Tokens and components
for Carbon Panel and Carbon Cloud.

The shared action control. Renders a native <button type="button"> or, when href is present, an <a>. One primary action per view; danger is reserved for irreversible operations.

• size maps to --carbon-control-sm|md|lg|xl. sm also drops the label to text-xs; xl raises it to text-base.
• iconOnly forces a square: equal width and height at the chosen control size, zero padding. The caller must supply an accessible name (aria-label).
• loading renders a 16 px spinner and sets aria-busy="true". It also disables the control, so a duplicate submit is impossible while the promise is pending.
• With href, a disabled or loading button keeps the anchor element but withholds href, adds role="link", aria-disabled="true" and tabindex="-1", and calls preventDefault().
• The root sets motion-press (active scale 0.96) and focus-ring. Icons are marked shrink-0; labels stay on one line (whitespace-nowrap).

The single h1 for a route, with an optional status snippet, a short description and right-aligned actions. It does not own page padding; the shell provides the gutter.

• Title: text-2xl font-light tracking-tight. Description: text-xs in the literal #8d8d8d secondary tone.
• The tag snippet sits inline with the title and wraps with it; actions move to their own row below 640 px.
• The root is a flex row with border-b and pb-4. It is not sticky and does not scroll independently.

A bordered content surface. The same component is a static panel, a clickable card or a link, decided by href and clickable.

• Root selection is href first, then clickable, then a static div. In the link branch onclick is not forwarded; use the anchor's own navigation.
• clickable renders <div role="button" tabindex="0"> and activates on Enter or Space. Prefer href when a real destination exists.
• Interactive tiles gain a 1 px lift on hover (translateY(-1px)), hover:bg-accent and focus-ring. Static tiles gain none of these.
• Padding is --carbon-space-4 (16 px). Metric tiles keep the shared hierarchy: uppercase label, one large tabular value, footer strip above a divider.

A compact status or filter label. Eleven colour pairs, two heights, an optional remove control and an optional pulse.

• Heights are 20 px (sm) and 24 px (md). Label: uppercase monospace, semibold, tracking-wider.
• filter renders a remove button with aria-label="Remove filter". It calls onclose, which must be provided or the button does nothing.
• pulse applies motion-pulse (1600 ms, opacity 1 → 0.35 → 1). Use it for live state, not decoration.
• Colour is supplemental. Every tag must contain a readable label; the eleven types are not a severity scale.

A framed table with an optional header bar and toolbar. It supplies the chrome and the horizontal overflow container; the caller supplies thead cells and tbody rows.

• The header bar renders only when title or toolbar is present. header is the thead content; children renders inside tbody.
• The table is wrapped in overflow-x-auto, so narrow viewports scroll the table rather than the page.
• Documented gap: this component still uses literal #161616, #262626, #393939 and #f4f4f4. It will not follow the light theme until those are replaced with token roles.
• Empty, loading and error states are not built in. Compose CarbonEmptyState, CarbonInlineLoading or CarbonErrorState around it rather than rendering a table with no rows.

A modal dialog portalled to <body>. Owns backdrop, scroll lock, focus placement, focus containment, Escape handling and focus restoration.

• use:portal appends the overlay to document.body. Rendering it inside <main> left it in the page stacking context, where the fixed header and sidebar painted over it and the scroll container clipped it.
• Open locks document.body.style.overflow; close restores the previous value. Backdrop clicks close; wheel events on the backdrop are prevented.
• Focus moves to the first focusable descendant after 50 ms, otherwise to the dialog. Tab and Shift+Tab wrap inside the dialog. Escape closes with preventDefault() and stopPropagation(). The previously focused element regains focus on close.
• size="full" is 95 vw × 90 vh. fullscreen removes the padding, uses h-screen and no maximum width.
• bare suppresses header and footer chrome but keeps the title and description as sr-only elements so aria-labelledby and aria-describedby still resolve.
• onprimary does not close the dialog; the caller decides. onsecondary falls back to closing when omitted. Bind open to a boolean value, not to an expression such as {value !== null}.

A small confirmation dialog built on CarbonModal. Awaiting onconfirm before closing makes it safe for slow destructive requests.

• Renders CarbonModal at size="sm" with hasFooter={false}; the action row lives in the body.
• details renders inside a bordered monospace block. Use it for the exact resource name, size or count affected.
• handleConfirm awaits onconfirm, then sets open = false. If the request throws, the dialog stays open and the error belongs in the caller's UI.
• confirming disables both buttons and replaces the confirm label with "Working…". It does not stop Escape or backdrop dismissal; disable those in the caller when cancellation is unsafe.
• danger adds the alert triangle and switches the confirm button to kind="danger".

A labelled text field with hint, error and optional password reveal. Extends HTMLInputAttributes, so every native attribute is accepted.

• id falls back to the Svelte-generated $props.id(), so a label and field still connect without a caller-supplied id.
• aria-describedby points at {id}-desc only when an error or hint exists. error also sets aria-invalid="true".
• Message precedence is error, then the Caps Lock notice, then the hint. The Caps Lock check runs only for type="password" and reads getModifierState('CapsLock') on key down and key up.
• revealable only applies to type="password". The toggle is a 24 px button with aria-pressed and a Show/Hide password label.
• Field geometry: 40 px height, 1 px bottom border, 2 px border on focus or error, --carbon-control-md, 16 px horizontal padding.

A labelled native <select> with an overlaid chevron and the same label, hint and error association as CarbonTextInput.

• Uses appearance-none plus a pointer-events-none chevron in the same box; the native menu, keyboard behaviour and mobile picker are preserved.
• value is bound, not an onchange callback. Read it from the bound variable rather than reaching for the event.
• Same {id}-desc association and aria-invalid behaviour as the text input.

A horizontal tab strip with a measured selection indicator and APG keyboard behaviour.

• The indicator is re-measured on selection, on tab-list changes and through a ResizeObserver on the strip. The observer exists because a sidebar collapse or a scrollbar appearing changes the width without a window resize, which previously left the indicator under the wrong tab.
• Keyboard: ArrowLeft and ArrowRight wrap, Home and End jump, and selection follows focus. Roving tabindex keeps one stop in the tab order.
• idPrefix emits {prefix}-tab-{id} and aria-controls="{prefix}-panel-{id}". Provide the matching panels yourself.
• Gotcha: onselect is an allowlist of ids in most call sites. Adding a tab without extending that handler produces a tab that selects but never loads its panel.
• The strip uses scroll-strip: horizontal overflow scrolls, but no scrollbar is painted, so the strip height cannot jump.

A single-line progress indicator with three outcomes: active, finished and error.

• Active renders a 16 px spinning square; finished draws a check with a 300 ms dash animation; error fades in a cross.
• The component has no live region of its own. When the description changes in place, wrap it in an aria-live="polite" status region or use a status role.
• Do not use it as a substitute for a skeleton when the final layout is already known.

Ancestor navigation for a nested route. Renders a nav labelled "Breadcrumbs" with slash separators.

• The final item is always rendered as a non-interactive span, even if it carries an href. That is the current location, not a destination.
• Items are keyed by index, so reordering the trail reuses DOM nodes. Include the whole path in the label when that matters.

The application frame: top bar, collapsible side navigation, profile menu, preferences dialog and the scrolling main region. It is the only component here that depends on the SvelteKit runtime.

• <main> owns p-4 / md:p-6, scrollbar-stable, md:ml-64 or md:ml-12, and an inner mx-auto max-w-7xl space-y-6. Routes must not add another page-level padding — nesting p-6 doubles the gutter.
• Imports $app/state, $app/paths, the auth and server stores, and the RPC client. It is product infrastructure, not a portable layout primitive; Cloud has its own AppShell.
• Sidebar expansion persists in component state only. The profile menu, password dialog and preferences dialog are mounted here, so routes do not each re-implement them.
• The header is fixed and paints above page content; the sidebar is offset by 64 px. A fixed overlay rendered inside main would sit below both — hence the modal portal.

A search input with a leading magnifier and a clear control that appears only when the field has a value.

• Heights are 32, 40 and 48 px; the leading icon and horizontal padding scale with the size.
• The accessible name falls back to aria-label from the rest props, then the placeholder, then "Search". A visible label is still preferred in forms.
• The input is always type="text". size is removed from the forwarded attributes so it cannot collide with the native input size.
• Clearing sets the bound value to '' and calls onclear; the button fades in over 100 ms.

The list wrapper for disclosure items. Renders a ul with a top rule; it holds no state and imposes no exclusivity.

• Styling only: m-0 w-full list-none border-t p-0. Put CarbonAccordionItem children inside.
• Opening one item does not close another. If the surface needs an exclusive group, own the open index in the parent.

A 48 px header row and a height-animated panel. Closed content is inert, so it cannot be focused or read by tab order.

• The panel animates grid-template-rows from 0fr to 1fr over --motion-slow with an in-out easing; the chevron rotates 90° over --motion-base.
• inert is applied whenever the item is closed, which removes its subtree from focus and accessibility APIs without unmounting it.
• Documented gap: the trigger does not set aria-expanded or aria-controls. Add both before relying on this component where disclosure semantics are audited.
• Title and subtitle both truncate. Long values lose text rather than wrapping; keep them short or put the full value in the panel.

A labelled list of rows with a coloured header strip and 1 px dividers. Lighter than CarbonDataTable, but not a table.

• Built from div elements, so a header cell is not associated with a row value. Use CarbonDataTable when a screen reader must associate columns with cells.
• The header snippet renders inside a single grid row; the caller supplies the same column template on the header and the rows.
• Rows are divided by divide-y on the row container. The outer element has a top border only.

A full-panel failure state with a retry action. Announces itself with role="alert".

• The retry button renders only when onretry exists. While the returned promise is pending the button is in loading state and cannot be pressed again.
• role="alert" makes the whole panel an assertive live region. Mounting it on every failed poll will announce repeatedly; keep it for terminal failures.
• Say what failed and what the user can do. Do not render an error state for a request that is still in flight.

The zero-results and never-created state, with an optional icon snippet and one primary action.

• The action renders only when both actionLabel and onaction are supplied. One action; the component has no secondary slot.
• There is no role and no live region. Announce a change to an empty collection in the surrounding region, not by remounting this panel.
• Distinguish a truly empty collection from no search matches and from a failed request. The copy and the available action differ in each case.