Code

Raw source. Used verbatim when `lines` is absent, and always used as the text the copy button puts on the clipboard.

Language label shown in the toolbar (the card eyebrow when framed). Purely presentational — the component does no highlighting of its own.

Pre-tokenized lines from a highlighter. When omitted, `code` is rendered as unhighlighted plain text — so the component degrades to a readable block rather than nothing.

A title for the block, e.g. its filename. Bare: the toolbar's leading text, before the language label. Framed (`card`): the card heading.

The color family the highlight active state paints in (`activeEmphasis="highlight"`), independent of `tone` — e.g. a primary current row in a neutral list. Ignored at other levels.

Surface background from the Panel scale (`surface.peak` → `surface.ground`, or `transparent`).

Border color at rest: `none`, `default`, `bold`, `muted`, or `accent`. The 1px line is always reserved when a border can appear, so changing it never shifts layout.

Border color while the surface is `active` — the explicit form of the ring `activeEmphasis` would otherwise pick. It holds through hover, so a `borderInteract` color can't steal it. `inherit` keeps whatever `activeEmphasis` chose; `none` clears it.

Border color on hover and press: `none`, `default`, `bold`, `muted`, or `accent`. Composes with `border`, e.g. a muted line at rest that turns bold on hover.

Frame the block in a Card. Unset or `false` renders the bare block (the default). With an object, `title` becomes the card heading, `lang` the eyebrow, the copy button moves to the header's trailing slot, the expand button to the footer, and the scroller is the card content (`content.padding: "none"`; set `contentBackground` for an inset panel).

Which surface ramp the panel paints with: `primary` is the filled tone accent (with contrast text), `secondary` the tone's own surface tint, `tertiary` the neutral ramp with tone-accent text. `background` then picks the step on that ramp.

Line numbers (in displayed terms, honouring `startLine`) to emphasise.

What hover and press paint on an interactive surface: `surface` steps the resting surface ramp; `highlight` paints the tone's highlight (`neutral.highlight` on a neutral surface) and its next step while pressed. An active surface keeps its own hover steps.

Elevation shadow applied to the surface.

Type scale of the block. `xs` and `sm` currently render at the same font size — the scale's smallest step is `xs`, so separating them means moving `sm`/`md` up, which is a deliberate visual change that hasn't been made.

Color tone: a semantic tone (`neutral`, `primary`, `success`, `warning`, `danger`, `inherit`) or a color family such as `teal`. A family carries no status meaning.

Frosted glass: the chosen `background` step at /35 with a large backdrop blur, so content behind the panel shows through. A transparent background stays transparent.

Clamp the block to this many lines, fading the overflow.

Inner padding from the spacing scale.

Corner radius from the radii scale (`full` for fully rounded). `inner` computes a concentric corner from the parent panel's radius minus its padding; `inherit` mirrors the parent's corner exactly, for a child that sits flush with its edge.

Corner radius for the bottom-left and bottom-right corners.

Corner radius for the top-left and bottom-left corners.

Corner radius for the top-right and bottom-right corners.

Corner radius for the top-left and top-right corners.

Keep (or drop) the always-1px transparent border the panel reserves so a border appearing or changing never shifts layout. Computed automatically — it's reserved when a resting `border` is visible, or when `interactive` / `borderInteract` / `active` can change the border at runtime. Set `false` only on a panel that must not occupy that 1px (e.g. a borderless housing frame that would otherwise add 2px around a set).

Opt this panel into the baseline rhythm: bakes `data-rhythm` on the root, so the whole subtree becomes a rhythm scope. The panel's padding turns into whole raster lines (minus its border) and text inside can quantise its own leading through the preset's `rhythm` pattern. A `<Grid rhythm>` (or any `[data-rhythm]`) ancestor makes the subtree rhythmic without this prop — the prop is how a panel opts ITSELF in, and how it takes the line-based padding.

Show a line number beside each line.

Number the first line as this. Lets an excerpt report its real position in the file rather than restarting at 1.

Wrap long lines instead of scrolling horizontally.

Mark this as the chosen one in a set (a current nav item, a checked option, a selected card). Where `interactive` says it *can* be clicked, `active` says it *is* the current choice. Use `activeEmphasis` to control how loud the state is. Combined with `interactive`, hover and press restart their stepping from the active baseline rather than falling back to the unchosen ramp. The four values differ only in what drives the state: `true` by the prop (via `data-panel-active`), `"checked"` by a wrapped native input (`:has(input:checked)` — zero JS, nothing to re-render), `"current"` by an existing `aria-current` on the panel, and `"current-within"` by an `aria-current` on a direct child (a split nav row whose link carries it).

How loud the `active` state is. Defaults to the panel's own `emphasis`, so the chosen state lands on the same ramp as the resting look — this prop is the override for when the active item should be louder (or quieter) than the panel itself. `"primary"` fills with the tone accent ramp and flips text to the contrast scale (~150 RGB units of separation — the option that reads at a glance in a dense list). `"secondary"` tints the tone surface ramp and `"tertiary"` the neutral ramp; both promote text to `bold` and lift the border to the default line, but move the surface only ~7–18 units.

HTML element to render. Curated to container-like tags so semantic intent stays clear (no html/script/style/etc).

Offer an expand control when clamped by `maxLines`.

Whether the copy button is in its just-copied state. Frameworks own the timer that flips it back.

Render a copy-to-clipboard button in the toolbar.

Whether the block is currently expanded past `maxLines`. Frameworks feed their reactive state in; the component is controlled.

Enable interactive (hover / focus / press) affordances and states.

Serialize the panel's resolved surface inputs into a `data-panel-config` attribute on the root, enabling runtime surface changes via `updatePanelElement()` (and, for inheritors like Card, `updateCard()`) without a framework runtime — the primary consumer is Astro / vanilla JS, where props don't re-render. Reactive frameworks (Svelte/React/Vue) don't need this: their prop changes re-run the connect already.

Called after the source has been written to the clipboard.

Accessible label for the block.

Bound reference to the root element (`bind:this`) — the block root, or the Card root when framed. Typed as `HTMLElement` because the root is a Panel and `as` can change its tag.

Per-slot style and HTML-attribute overrides.