@agent-ui-kit/components 0.0.3

package/dist/controls/checkbox/checkbox.css

@@ -0,0 +1,204 @@
+/* checkbox.css — ui-checkbox, the Indicator-class widget stylesheet (decomp S1 · ADR-0041 · ADR-0042).
+ *
+ *   [1] TOKEN BLOCK  — `:where(ui-checkbox)` (specificity 0,0,0) declares the --ui-checkbox-* chain from
+ *       the colour roles (--md-sys-color-{family}-{role}) and the widget-box ramp (--md-sys-compact-{size}, ADR-0041).
+ *       [size] repoints the box to the correct compact tier; [disabled] mutes to neutral roles.
+ *   [2] STYLES BLOCK — `@scope (ui-checkbox)` consumes ONLY --ui-checkbox-*. The host is inline-flex
+ *       (box + optional label text). ::before paints the square widget box (2px border + background fill).
+ *       ::after paints the glyph (checkmark or indeterminate-dash), positioned absolutely within the box
+ *       column so it centers on the box regardless of label-text height. :state(checked)/:state(indeterminate)
+ *       drive the visual states; :focus-visible draws the shared fleet ring (ADR-0009); forced-colors maps to
+ *       Highlight/HighlightText so the glyph always survives (CanvasText ink on Highlight fill; ADR-0009 ring
+ *       free via --md-sys-color-focus-ring → Highlight from the token layer).
+ *
+ * Standalone stylesheet — linked via the host page / component-styles barrel (decomp s14); NEVER injected
+ * from checkbox.ts (behaviour-only `.ts`, no runtime style injection — plan §2).
+ */
+
+/* ════════════════ [1] TOKEN BLOCK — :where(ui-checkbox) declares --ui-checkbox-* ════════════════ */
+
+:where(ui-checkbox) {
+  /* Widget-box size — the compact-class square, per ADR-0041. Default size = md (16px at ui-md scale). */
+  --ui-checkbox-box: var(--md-sys-compact-md);
+
+  /* Colour channel: unchecked = neutral border on transparent; checked/indeterminate = primary fill + ink.
+     The border-color and bg-checked ride the same --md-sys-color-primary ladder step as button.css's solid variant
+     (the design-system's primary fill); the ink is the on-primary pair for readability (WCAG AA). */
+  --ui-checkbox-bg: transparent;
+  --ui-checkbox-border: var(--md-sys-color-neutral-high);
+  --ui-checkbox-bg-checked: var(--md-sys-color-primary);
+  --ui-checkbox-border-checked: var(--md-sys-color-primary);
+  --ui-checkbox-ink: var(--md-sys-color-primary-on-primary); /* checkmark / indeterminate-dash fill */
+
+  /* Label gap — the rhythm between the box and the optional label text (density-bearing, via --md-sys-gap-md). */
+  --ui-checkbox-gap: var(--md-sys-gap-md);
+
+  /* user-invalid (ADR-0051) — the danger border, appearing only AFTER the first interaction (the
+     trackUserInvalid controller owns that timing; checkbox.ts toggles :state(user-invalid)). The
+     text-field precedent, applied to the box's border channel. */
+  --ui-checkbox-border-invalid: var(--md-sys-color-danger);
+}
+
+/* [size] → widget-box tier (ADR-0041 clause 2: sm/md/lg at the default ui-md scale = 14/16/18 px). */
+:where(ui-checkbox[size='sm']) {
+  --ui-checkbox-box: var(--md-sys-compact-sm);
+  --ui-checkbox-gap: var(--md-sys-gap-sm);
+}
+:where(ui-checkbox[size='lg']) {
+  --ui-checkbox-box: var(--md-sys-compact-lg);
+  --ui-checkbox-gap: var(--md-sys-gap-lg);
+}
+
+/* [disabled] → mute the border + fill to neutral roles. The state holds at idle: pointer-events:none (below)
+   prevents :hover from ever matching, so no path can lift the muted tokens. */
+:where(ui-checkbox[disabled]) {
+  --ui-checkbox-border: var(--md-sys-color-neutral-surface-high);
+  --ui-checkbox-bg-checked: var(--md-sys-color-neutral-surface-high);
+  --ui-checkbox-border-checked: var(--md-sys-color-neutral-surface-high);
+  --ui-checkbox-ink: var(--md-sys-color-neutral-on-surface-variant);
+}
+
+/* ════════════════ [2] STYLES BLOCK — @scope (ui-checkbox) consumes ONLY --ui-checkbox-* ════════════════ */
+
+@scope (ui-checkbox) {
+  :scope {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--ui-checkbox-gap);
+    position: relative; /* containing block for the absolutely-positioned ::after glyph */
+    cursor: pointer;
+    -webkit-user-select: none; /* WebKit/Safari still requires the prefix; the label is a control surface, not selectable text */
+    user-select: none;
+  }
+
+  /* The visual box — first flex item (flex-shrink:0), the checkbox's physical affordance.
+     border + fill are the two state-PAINT properties that transition on check/uncheck. */
+  :scope::before {
+    content: '';
+    display: block;
+    flex-shrink: 0;
+    box-sizing: border-box;
+    inline-size: var(--ui-checkbox-box);
+    block-size: var(--ui-checkbox-box);
+    border: 2px solid var(--ui-checkbox-border);
+    border-radius: calc(var(--ui-checkbox-box) / 5); /* proportional slight rounding (~3px at 16px default) */
+    background-color: var(--ui-checkbox-bg);
+    /* State-PAINT transition only — geometry never animates (geometry.md). */
+    transition:
+      background-color var(--md-sys-motion-duration-fast) var(--md-sys-motion-easing-standard),
+      border-color var(--md-sys-motion-duration-fast) var(--md-sys-motion-easing-standard);
+  }
+
+  /* Checked: fill the box with the primary colour (border disappears into the fill). */
+  :scope:state(checked)::before {
+    background-color: var(--ui-checkbox-bg-checked);
+    border-color: var(--ui-checkbox-border-checked);
+  }
+
+  /* Indeterminate: same primary fill as checked (the dash glyph differentiates the two states visually). */
+  :scope:state(indeterminate)::before {
+    background-color: var(--ui-checkbox-bg-checked);
+    border-color: var(--ui-checkbox-border-checked);
+  }
+
+  /* Hover (TKT-0047) — border-color lift toward the checked colour, the radio.css precedent: same
+     Indicator-class idle shape (border + transparent bg), so the same mechanism ports directly. Invisible
+     while checked (the border already blends into the same-colour fill) — harmless, no state gate needed.
+     Disabled is pointer-inert (below), so :hover never matches it. Authored BEFORE the user-invalid rule
+     below (component-reviewer MINOR fix) — equal specificity (0,2,1) means source order decides which
+     wins on hover+user-invalid, and the danger signal must win (the text-field.css:205-208 precedent:
+     idle < hover < user-invalid, source-later). Placing hover here, ahead of user-invalid, is the fix. */
+  :scope:hover::before {
+    border-color: var(--ui-checkbox-border-checked);
+  }
+
+  /* user-invalid (ADR-0051) — the danger border, appearing only AFTER the first interaction. Cannot
+     co-occur with :state(checked) (valueMissing only fires when unchecked) — but it CAN co-occur with
+     :state(indeterminate) (required + indeterminate + unchecked IS valueMissing), AND with :hover (a user
+     hovering a required, still-unchecked box after an earlier blur). Equal specificity (0,2,1) with BOTH
+     the indeterminate rule above AND the hover rule immediately above it: SOURCE ORDER is load-bearing —
+     this rule must stay authored LAST among the three so the danger border always wins. */
+  :scope:state(user-invalid)::before {
+    border-color: var(--ui-checkbox-border-invalid);
+  }
+
+  /* Glyph base — absolutely positioned at the inline-start of the host, centered in the block direction.
+     The box (::before) is the first flex item whose inline-start IS the host's inline-start, so
+     inset-inline-start:0 aligns the glyph column with the box. inset-block-start:50% + translateY(-50%)
+     centers the glyph vertically relative to the host; because align-items:center makes the box flex-center
+     within the host, this equals the box's vertical center regardless of label-text height. No background
+     by default (the glyph is invisible in the unchecked state). */
+  :scope::after {
+    content: '';
+    position: absolute;
+    inset-inline-start: 0;
+    inset-block-start: 50%;
+    transform: translateY(-50%);
+    pointer-events: none;
+  }
+
+  /* Checkmark glyph — a clip-path polygon tick, the classic ✓ shape within [0,100%]×[0,100%] canvas.
+     Inset 20% from inline-start; sized 60%×55% of the box (the glyph bounding box). The :scope::after
+     base rule supplies position:absolute and the vertical centering (not repeated here). */
+  :scope:state(checked)::after {
+    background-color: var(--ui-checkbox-ink);
+    inset-inline-start: calc(var(--ui-checkbox-box) * 0.2);
+    inline-size: calc(var(--ui-checkbox-box) * 0.6);
+    block-size: calc(var(--ui-checkbox-box) * 0.55);
+    clip-path: polygon(14% 44%, 0% 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
+  }
+
+  /* Indeterminate dash — a thin horizontal bar centered within the box (2px tall, 60% wide, 20% inset). */
+  :scope:state(indeterminate)::after {
+    background-color: var(--ui-checkbox-ink);
+    inset-inline-start: calc(var(--ui-checkbox-box) * 0.2);
+    inline-size: calc(var(--ui-checkbox-box) * 0.6);
+    block-size: 2px;
+    border-radius: 1px;
+  }
+
+  /* Focus ring (ADR-0009) — the shared fleet ring: :focus-visible (keyboard-only) draws a layout-neutral
+     outline on the host. This encircles the whole control (box + label), the fleet standard. The ring
+     reads the fleet-wide --md-sys-color-focus-ring / --md-sys-state-focus-ring-* tokens (never a per-control repoint). */
+  :scope:focus-visible {
+    outline: var(--md-sys-state-focus-ring-width) solid var(--md-sys-color-focus-ring);
+    outline-offset: var(--md-sys-state-focus-ring-offset);
+  }
+
+  /* Motion (interaction-states standard) — zero the box transition under reduced motion. */
+  @media (prefers-reduced-motion: reduce) {
+    :scope::before {
+      transition: none;
+    }
+  }
+
+  /* Disabled — pointer-inert + cursor reset. The [disabled] token block already muted the colours;
+     pointer-events:none ensures :hover/:active never match (so the muted idle holds forever). */
+  :scope[disabled] {
+    pointer-events: none;
+    cursor: default;
+  }
+
+  /* Forced-colors — use system colours so the box and glyph are always visible in high-contrast modes.
+     Unchecked: ButtonText border on ButtonFace. Checked/indeterminate: Highlight fill with HighlightText
+     glyph (the system accent + its reading-pair, WCAG AA guaranteed by the OS). forced-color-adjust:none
+     preserves our explicit system-colour mappings so the browser does not re-override them. The :focus-visible
+     ring is free: --md-sys-color-focus-ring carries the token layer's Highlight mapping (ADR-0009) — no per-control rule. */
+  @media (forced-colors: active) {
+    :scope::before {
+      border-color: ButtonText;
+      background-color: ButtonFace;
+    }
+    :scope:state(checked)::before,
+    :scope:state(indeterminate)::before {
+      background-color: Highlight;
+      border-color: Highlight;
+      forced-color-adjust: none;
+    }
+    :scope:state(checked)::after,
+    :scope:state(indeterminate)::after {
+      background-color: HighlightText;
+      forced-color-adjust: none;
+    }
+  }
+}

package/dist/controls/checkbox/checkbox.d.ts

@@ -0,0 +1,114 @@
+import { type ReactiveProps } from '../../dom/index.js';
+import type { ValidityResult } from '../../dom/index.js';
+import { UIIndicatorElement } from '../_base/indicator-element.js';
+declare const checkboxProps: {
+    checked: {
+        reflect: true;
+        type: import("../../index.js").PropType<boolean>;
+        default: boolean;
+        attribute?: string | false;
+    };
+    value: {
+        reflect: true;
+        type: import("../../index.js").PropType<string>;
+        default: string;
+        attribute?: string | false;
+    };
+    size: {
+        reflect: true;
+        type: import("../../index.js").PropType<"sm" | "md" | "lg">;
+        default: "sm" | "md" | "lg";
+        attribute?: string | false;
+    };
+    name: {
+        reflect: true;
+        type: import("../../index.js").PropType<string>;
+        default: string;
+        attribute?: string | false;
+    };
+    disabled: {
+        reflect: true;
+        type: import("../../index.js").PropType<boolean>;
+        default: boolean;
+        attribute?: string | false;
+    };
+    required: {
+        reflect: true;
+        type: import("../../index.js").PropType<boolean>;
+        default: boolean;
+        attribute?: string | false;
+    };
+};
+export interface UICheckboxElement extends ReactiveProps<typeof checkboxProps> {
+}
+export declare class UICheckboxElement extends UIIndicatorElement {
+    #private;
+    static props: {
+        checked: {
+            reflect: true;
+            type: import("../../index.js").PropType<boolean>;
+            default: boolean;
+            attribute?: string | false;
+        };
+        value: {
+            reflect: true;
+            type: import("../../index.js").PropType<string>;
+            default: string;
+            attribute?: string | false;
+        };
+        size: {
+            reflect: true;
+            type: import("../../index.js").PropType<"sm" | "md" | "lg">;
+            default: "sm" | "md" | "lg";
+            attribute?: string | false;
+        };
+        name: {
+            reflect: true;
+            type: import("../../index.js").PropType<string>;
+            default: string;
+            attribute?: string | false;
+        };
+        disabled: {
+            reflect: true;
+            type: import("../../index.js").PropType<boolean>;
+            default: boolean;
+            attribute?: string | false;
+        };
+        required: {
+            reflect: true;
+            type: import("../../index.js").PropType<boolean>;
+            default: boolean;
+            attribute?: string | false;
+        };
+    };
+    static role: string;
+    get indeterminate(): boolean;
+    set indeterminate(v: boolean);
+    /**
+     * LLD-C1 extension: `required && !checked` → `valueMissing` (native `<input type=checkbox required>`
+     * parity — unlike ui-switch, whose required-ON semantics the fleet deliberately declined as an
+     * edge case, checkbox.md has always documented this constraint; this is the code catching up to
+     * that contract). `indeterminate` does not affect validity — a required checkbox is satisfied
+     * only by `checked=true`, matching the platform.
+     */
+    protected formValidity(): ValidityResult;
+    protected connected(): void;
+    /**
+     * Pre-toggle hook (LLD-C3): called by the base's click handler immediately before `checked` is flipped.
+     * Clears `indeterminate` so clicking an indeterminate checkbox first resolves the visual state and THEN
+     * toggles checked — platform checkbox parity (a click on ☐/☑/dash always produces ☑, never stays
+     * mixed on click; the next click is then ☑→☐).
+     */
+    protected beforeToggle(): void;
+    /**
+     * A reset must not leave a required-unchecked checkbox showing `:state(user-invalid)` until the
+     * user re-interacts (the text-field `formReset()` precedent) — `super.formReset()` restores
+     * `checked` ← `defaultChecked` (the base's own reset leg) first.
+     */
+    protected formReset(): void;
+    protected disconnected(): void;
+    /** Feeds `FormConnectDetail.userInvalid` (ADR-0050) — the `trackUserInvalid` tracker IS the one
+     *  timing source; this override just exposes its gate. */
+    protected formUserInvalid(): boolean;
+}
+export {};

package/dist/controls/checkbox/checkbox.js

@@ -0,0 +1,130 @@
+// checkbox.ts — UICheckboxElement, the Indicator-class tri-state checkbox (decomp S1 · ADR-0042 · ADR-0041).
+// Light-DOM FACE form control — extends UIIndicatorElement which owns: the boolean form value (checked /
+// value / size props), the checked-state machine + ARIA (LLD-C2), the pressActivation toggle (LLD-C3),
+// and the widget-box geometry seam (LLD-C4). The leaf adds:
+//   • static role = 'checkbox' (sets internals.role on connect via the base's LLD-C2 wiring)
+//   • `indeterminate` property (property-only, NOT reflected, NOT submitted) — tri-state visual override:
+//     ariaChecked="mixed" + :state(indeterminate) when true; cleared on the next click/Space toggle.
+//   • self-define as `ui-checkbox`
+//
+// `size` is now in UIIndicatorElement.props (the shared widget-box axis — ADR-0041); checkbox inherits it
+// via the base-props spread without a local override.
+//
+// No light-DOM parts: the box and glyph paint entirely in CSS via ::before/::after on the host.
+// Zero-dep; controls → dom+traits inward only (✓); erasableSyntaxOnly ✓ (no enum/decorator).
+import { signal } from "../../reactive/index.js";
+import {} from "../../dom/index.js";
+import { UIIndicatorElement } from "../_base/indicator-element.js";
+import { trackUserInvalid } from "../../traits/track-user-invalid.js";
+// `size` is inherited from UIIndicatorElement.props — the spread brings checked/value/size/name/disabled/
+// required. No local additions. Each control owns its own `static props` (the UIFormElement.formProps
+// precedent; ADR-0013 — static props cannot be inherited via the prototype chain).
+const checkboxProps = {
+    ...UIIndicatorElement.props,
+};
+export class UICheckboxElement extends UIIndicatorElement {
+    static props = checkboxProps;
+    // LLD-C2 contract: the subclass declares the ARIA role; the base applies it via internals.role in connected().
+    static role = 'checkbox';
+    // `indeterminate` — property-only (NOT reflected, NOT submitted; checkbox-specific tri-state).
+    // Visual override: `ariaChecked="mixed"` when true; `checked` retains its boolean for the form value.
+    // Backed by a private signal so the supplemental indeterminate effect (below) re-runs on every change.
+    #indeterminate = signal(false);
+    get indeterminate() {
+        return this.#indeterminate.value;
+    }
+    set indeterminate(v) {
+        this.#indeterminate.value = v;
+    }
+    // The user-invalid TIMING controller (ADR-0051), created per connection (re-arms on reconnect;
+    // released on disconnect) — the text-field/select precedent.
+    #userInvalid = null;
+    /**
+     * LLD-C1 extension: `required && !checked` → `valueMissing` (native `<input type=checkbox required>`
+     * parity — unlike ui-switch, whose required-ON semantics the fleet deliberately declined as an
+     * edge case, checkbox.md has always documented this constraint; this is the code catching up to
+     * that contract). `indeterminate` does not affect validity — a required checkbox is satisfied
+     * only by `checked=true`, matching the platform.
+     */
+    formValidity() {
+        if (this.required && !this.checked) {
+            return { valid: false, flags: { valueMissing: true }, message: 'Please check this box if you want to proceed.' };
+        }
+        return { valid: true };
+    }
+    connected() {
+        super.connected(); // base wires: role · tabbable · Enter-guard · pressActivation · click-toggle ·
+        //                             checked effect (ariaChecked="true"/"false", :state(checked)) · ariaDisabled
+        // ADR-0051 — the user-invalid TIMING controller: gates the danger treatment until the first
+        // blur/change (host itself is the focusable element — the tabbable trait's tabindex rides the
+        // host directly, no internal part). Reflects :state(user-invalid) + internals.ariaInvalid.
+        const invalidController = trackUserInvalid(this, { invalid: () => !this.formValidity().valid });
+        this.#userInvalid = invalidController;
+        this.effect(() => {
+            if (invalidController.userInvalid()) {
+                this.internals.states?.add('user-invalid');
+                this.internals.ariaInvalid = 'true';
+            }
+            else {
+                this.internals.states?.delete('user-invalid');
+                this.internals.ariaInvalid = null;
+            }
+        });
+        // Supplemental indeterminate effect — runs AFTER the base's checked effect (registered second).
+        // Reads BOTH #indeterminate AND checked so it tracks both signals and wins on any change to either.
+        // When indeterminate=true: overrides ariaChecked to "mixed", adds :state(indeterminate), removes
+        // :state(checked). When indeterminate=false: restores the correct checked state (the base effect
+        // may not re-run for an indeterminate→false transition alone, so we re-apply here).
+        this.effect(() => {
+            const indeterminate = this.#indeterminate.value; // tracked
+            const checked = this.checked; // also tracked — ensures re-run on checked change too
+            const states = this.internals.states;
+            if (indeterminate) {
+                states?.add('indeterminate');
+                states?.delete('checked');
+                this.internals.ariaChecked = 'mixed';
+            }
+            else {
+                states?.delete('indeterminate');
+                if (checked) {
+                    states?.add('checked');
+                    this.internals.ariaChecked = 'true';
+                }
+                else {
+                    states?.delete('checked');
+                    this.internals.ariaChecked = 'false';
+                }
+            }
+        });
+    }
+    /**
+     * Pre-toggle hook (LLD-C3): called by the base's click handler immediately before `checked` is flipped.
+     * Clears `indeterminate` so clicking an indeterminate checkbox first resolves the visual state and THEN
+     * toggles checked — platform checkbox parity (a click on ☐/☑/dash always produces ☑, never stays
+     * mixed on click; the next click is then ☑→☐).
+     */
+    beforeToggle() {
+        if (this.#indeterminate.value)
+            this.#indeterminate.value = false;
+    }
+    /**
+     * A reset must not leave a required-unchecked checkbox showing `:state(user-invalid)` until the
+     * user re-interacts (the text-field `formReset()` precedent) — `super.formReset()` restores
+     * `checked` ← `defaultChecked` (the base's own reset leg) first.
+     */
+    formReset() {
+        super.formReset();
+        this.#userInvalid?.reset();
+    }
+    disconnected() {
+        this.#userInvalid?.release(); // idempotent — the listeners already die with the connection scope
+        this.#userInvalid = null;
+    }
+    /** Feeds `FormConnectDetail.userInvalid` (ADR-0050) — the `trackUserInvalid` tracker IS the one
+     *  timing source; this override just exposes its gate. */
+    formUserInvalid() {
+        return this.#userInvalid?.userInvalid() ?? false;
+    }
+}
+if (!customElements.get('ui-checkbox'))
+    customElements.define('ui-checkbox', UICheckboxElement);

package/dist/controls/code/code.css

@@ -0,0 +1,72 @@
+/* code.css — ui-code, the Display-class zero-machinery verbatim code leaf (LLD-C6,
+ * content-family.lld.md §3; content-family.spec.md SPEC-R2/R19/R20; ADR-0113 cl.2). Two clearly-SECTIONED
+ * blocks:
+ *
+ *   [1] TOKEN BLOCK — `:where(ui-code)` (specificity 0,0,0) DECLARES the seven `--ui-code-*` component
+ *       tokens: `--ui-code-font` (the minted `--md-sys-typeface-mono` constant), `--ui-code-size`/`-line-height` (the
+ *       `--md-sys-typescale-body-medium-*` row — ADR-0113 cl.2, body-class metrics), `--ui-code-ink`
+ *       (the AA-gated on-surface role), `--ui-code-surface` (the cross-family `--ui-container-bg` seam —
+ *       ADR-0015 cl.2, the SAME seam ui-card's own default rides, card.css:59 — NOT a raw
+ *       `-surface-container` role, which does not exist in tokens.css), `--ui-code-radius` (the fleet
+ *       `--md-sys-shape-corner-base` referent), and `--ui-code-pad-inline`/`-pad-block` (density-INVARIANT frame
+ *       quantities — ADR-0113 cl.2, not the `--md-sys-space-*` rhythm ladder).
+ *   [2] STYLES BLOCK — `@scope (ui-code)` CONSUMES only `--ui-code-*`. The host itself IS the scroll box
+ *       (host-as-content — no inner wrapper): `white-space: pre` preserves verbatim text,
+ *       `overflow-x: auto` OWNS the component's own horizontal overflow (ADR-0102 Lane A — the component,
+ *       never the page, absorbs a wide unbroken line), `max-inline-size: 100%` keeps the host from
+ *       blowing out a flex/feed container. No `[size]`/`[scale]` rows (Display class, SPEC-R20) and no
+ *       `[density]` legs (every quantity above is frame-class, density-invariant — ADR-0113 cl.2).
+ *
+ * Standalone stylesheet — linked via the host page / component-styles barrel (Phase 2); NEVER injected
+ * from code.ts (behaviour-only `.ts`, no runtime style injection — plan §2).
+ */
+
+/* ════════════════ [1] TOKEN BLOCK — :where(ui-code) declares --ui-code-* ════════════════ */
+
+:where(ui-code) {
+  --ui-code-font: var(--md-sys-typeface-mono); /* the minted mono constant — "for code blocks" */
+  --ui-code-size: var(--md-sys-typescale-body-medium-size); /* body-class metrics (ADR-0113 cl.2) */
+  --ui-code-line-height: var(--md-sys-typescale-body-medium-line-height);
+  --ui-code-ink: var(--md-sys-color-neutral-on-surface);
+  /* the cross-family surface seam (ADR-0015 cl.2) — NOT a raw `-surface-container` role (does not exist
+     in tokens.css). component-reviewer finding (2026-07-09): `--ui-container-bg` is a SEAM, never
+     self-seeded by the seam's own declaration — ui-card SEEDS its own default
+     (`--ui-container-bg: var(--md-sys-color-neutral-surface)`, card.css:59) and a bare `ui-code` with no
+     seeding ancestor was computing `transparent`, violating SPEC-R2's "component-owned surface" +
+     ADR-0102's CSS-less-consumer law. Fallback form: consume an ancestor's seeded value if present
+     (e.g. nested inside a `ui-card`, matching its plane), else seed the SAME default ui-card uses, so a
+     bare `ui-code` never renders transparent. */
+  --ui-code-surface: var(--ui-container-bg, var(--md-sys-color-neutral-surface));
+  --ui-code-radius: var(--md-sys-shape-corner-base); /* the fleet referent (entry/container class) */
+  --ui-code-pad-inline: 12px; /* density-INVARIANT frame quantities (ADR-0113 cl.2 — not rhythm) */
+  --ui-code-pad-block: 8px;
+}
+
+/* ════════════════ [2] STYLES BLOCK — @scope (ui-code) consumes ONLY --ui-code-* ════════════════ */
+
+@scope (ui-code) {
+  :scope {
+    display: block;
+    font-family: var(--ui-code-font);
+    font-size: var(--ui-code-size);
+    line-height: var(--ui-code-line-height);
+    color: var(--ui-code-ink);
+    background: var(--ui-code-surface);
+    border-radius: var(--ui-code-radius);
+    padding: var(--ui-code-pad-block) var(--ui-code-pad-inline);
+    white-space: pre; /* verbatim — newlines/indentation live in the text nodes (SPEC-R2) */
+    overflow-x: auto; /* the component OWNS overflow (ADR-0102 Lane A) */
+    max-inline-size: 100%; /* never blows out a flex/feed container; the scroll box absorbs excess */
+    user-select: text;
+    tab-size: 4;
+  }
+
+  /* forced-colors — the surface keeps shape via the border when fills are forced away (SPEC-R19) */
+  @media (forced-colors: active) {
+    :scope {
+      color: CanvasText;
+      background: Canvas;
+      border: 1px solid CanvasText;
+    }
+  }
+}

package/dist/controls/code/code.d.ts

@@ -0,0 +1,23 @@
+import { UIElement, type ReactiveProps } from '../../dom/index.js';
+declare const props: {
+    language: {
+        reflect: true;
+        type: import("../../index.js").PropType<string>;
+        default: string;
+        attribute?: string | false;
+    };
+};
+export interface UICodeElement extends ReactiveProps<typeof props> {
+}
+export declare class UICodeElement extends UIElement {
+    static props: {
+        language: {
+            reflect: true;
+            type: import("../../index.js").PropType<string>;
+            default: string;
+            attribute?: string | false;
+        };
+    };
+    protected connected(): void;
+}
+export {};

package/dist/controls/code/code.js

@@ -0,0 +1,40 @@
+// code.ts — UICodeElement, the Display-class zero-machinery verbatim code leaf (LLD-C5,
+// content-family.lld.md §3; content-family.spec.md SPEC-R1/R3/R5; ADR-0113 cl.2/fork F2).
+//
+// Content model — host-as-content (ADR-0006/ADR-0113 fork F2): the light-DOM text IS the code. There is
+// NO `code` prop on the element and no `html\`\`` template — `render()` stays the inherited void. The
+// catalog's bindable `Code.code` property maps to `textContent` (the `Text.text` lane, SPEC-R3): a bound
+// write replaces plain text with plain text, so there is nothing to heal. Normative absences (SPEC-R1
+// AC2, the ADR-0106 grep-able-absence precedent, applied here — this file must never NAME the platform
+// child-mutation-watching API or a browser copy-affordance API, the same discipline text.ts holds for
+// its own banned box-size-watching API): no DOM-mutation watcher of any kind, no stamp, no adoption code,
+// no system copy-affordance hookup, no source-transforming pass of any kind — this file is the whole
+// zero-machinery leaf.
+//
+// `language` (SPEC-R4) is a reflected, free-string, INERT metadata prop — no enum (nothing for the
+// ADR-0098 static-enum lane to gate), no rendering effect, no dispatch to any rendering-transform
+// consumer. It exists so model-emitted markdown-fence habits round-trip losslessly; a future consumer of
+// this metadata is a named, fenced escape hatch (SPEC-R6), never built here.
+//
+// A11y (SPEC-R5): `internals.role = 'code'` — a CONSTANT, set once in connected() (the list.ts/bar-chart
+// `role=list` precedent), never a host `role` attribute. Keyboard access to horizontal overflow rides the
+// platform's focusable-scroller behaviour where it exists (code.css `overflow-x: auto`); this file mints
+// no `tabindex` and no measurement machinery for it (the residual is named and accepted, SPEC-R5 AC2).
+//
+// Imports inward only (controls → dom): UIElement + prop from the dom barrel.
+import { UIElement, prop } from "../../dom/index.js";
+const props = {
+    // inert metadata (SPEC-R4) — no enum, no effect; reflects so the attribute round-trips a JS-set value
+    // too (the fleet reflect precedent) even though nothing in this file or code.css reads the attribute.
+    language: { ...prop.string(''), reflect: true },
+};
+export class UICodeElement extends UIElement {
+    static props = props;
+    connected() {
+        // The ONE internals line (SPEC-R5) — a constant semantic role, set directly (not inside an effect,
+        // nothing reactive depends on it); re-set on each connect (idempotent).
+        this.internals.role = 'code';
+    }
+}
+if (!customElements.get('ui-code'))
+    customElements.define('ui-code', UICodeElement); // idempotent self-define