@agent-ui-kit/components 0.0.3

package/dist/controls/swiper/swiper-item.js

@@ -0,0 +1,47 @@
+// swiper-item.ts — UISwiperItemElement, the slide of the ui-swiper family (swiper-family.lld.md LLD-C4 ·
+// swiper-family.spec.md SPEC-R9 · ADR-0124). BEHAVIOUR + the coordinator-applied `labelAs` seam + self-define
+// ONLY; geometry lives in swiper.css (the family's single sheet), the public contract in swiper-item.md.
+//
+// A `ui-swiper-item` is NOT a standalone control — it is a component-native ChildList child the owning
+// `ui-swiper` coordinates (the `ui-tab` "regions = sub-elements" precedent). It extends the plain `UIElement`
+// (it needs the protected `internals` for `role=group` + `aria-roledescription='slide'` + `aria-label`, none
+// of which a sibling can reach), and owns no surface axes (not a `UIContainerElement` — swiper.css lists only
+// `ui-swiper` in the surface seam). The host carries NO `role`/`aria-*` attribute — every ARIA fact rides
+// `this.internals`. `render()` stays the inherited void: a slide's content is its light-DOM children, placed
+// by swiper.css (host-as-content), never clobbered.
+//
+// `labelAs` is PUBLIC but coordinator-driven (the `ui-tab.setSelected` precedent): the owning `ui-swiper` holds
+// the real/clone/count truth (a sibling cannot set another element's protected internals), so it pushes each
+// REAL item's position label in. A clone (an inert, id-stripped `cloneNode` copy the coordinator creates in
+// loop mode) is never labelled this way — it is marked `aria-hidden`/`inert` directly on the cloned node by
+// the coordinator, not through this method. `controls → dom` is the allowed import direction.
+import { UIElement } from "../../dom/element.js";
+import { prop } from "../../dom/index.js";
+const props = {
+    // `key` — the slide's optional STABLE identity (the agent's slide id), REFLECTED so the attribute mirrors
+    // it. ui-swiper resolves `active` against `key` first, then falls back to the real DOM index, so a
+    // `key`-less item is addressed positionally (the ui-tab `key` precedent, though ui-tab does not reflect —
+    // swiper-family.lld.md §3.1 is explicit that THIS one does).
+    key: { ...prop.string(), reflect: true }, // renamed from `value` (TKT-0069 item 1 ruling: `value` = the FACE form value, reserved)
+};
+export class UISwiperItemElement extends UIElement {
+    static props = props;
+    // No self-driven ARIA on connect — the coordinator (which alone knows the real/clone/count truth) applies
+    // role/roledescription/label via `labelAs` once it has captured this item. Overridden only to document the
+    // deliberate no-op (matches the LLD's "no self-driven ARIA on connect" contract, probed by descriptor/source
+    // trip-wires expecting zero customStates and no host role/aria-* attribute here).
+    connected() { }
+    /**
+     * Label this REAL slide (called by the owning `ui-swiper`, never a sibling — `internals` is protected).
+     * Sets `role=group`, `aria-roledescription='slide'`, and `aria-label` to the supplied position string
+     * (`"{n} of {realCount}"`, SPEC-R9/R11) — all via `ElementInternals`, never a host attribute. Idempotent:
+     * safe to call again with a new position string as the real-slide set shifts (resize/mutation rebuilds).
+     */
+    labelAs(position) {
+        this.internals.role = 'group';
+        this.internals.ariaRoleDescription = 'slide';
+        this.internals.ariaLabel = position;
+    }
+}
+if (!customElements.get('ui-swiper-item'))
+    customElements.define('ui-swiper-item', UISwiperItemElement);

package/dist/controls/swiper/swiper-label.css

@@ -0,0 +1,10 @@
+/* swiper-label.css — ui-swiper-label's own sheet (ADR-0124 Consequences, the family-root resolution;
+ * swiper-family.lld.md LLD-C11/§7 REV). No `--ui-swiper-label-*` tokens of its own — display-only author
+ * text with no geometry law beyond inline flow. Standalone; never injected from a .ts (behaviour-only .ts,
+ * no runtime style injection — plan §2). */
+
+@scope (ui-swiper-label) {
+  :scope {
+    display: inline;
+  }
+}

package/dist/controls/swiper/swiper-label.d.ts

@@ -0,0 +1,4 @@
+import { UIElement } from '../../dom/element.js';
+export declare class UISwiperLabelElement extends UIElement {
+    static props: {};
+}

package/dist/controls/swiper/swiper-label.js

@@ -0,0 +1,20 @@
+// swiper-label.ts — UISwiperLabelElement, the accessible-name anchor of the ui-swiper family
+// (swiper-family.lld.md LLD-C11 · swiper-family.spec.md SPEC-R12/R15 · ADR-0124 F3). EMPTY by design — the
+// same posture as `ui-toast-region` (present for the fleet convention + the descriptor trip-wire's empty
+// bijection), because ALL of its behaviour lives on the owning `ui-swiper`, never on this element itself:
+//
+//   - the author's light-DOM text IS the carousel's accessible name (no re-rendering, no own ARIA);
+//   - the coordinator (`ui-swiper`) reads this element's `id` (assigning one if absent) and points its OWN
+//     region `aria-labelledby` at it via the internals element-reflection (`reflectAriaElements`,
+//     `ariaLabelledByElements`) — a sibling cannot set another element's protected internals, so the
+//     coordinator drives that wiring, not this class;
+//   - absent a `ui-swiper-label` anchor, the region falls back to `internals.ariaLabel = 'Carousel'`
+//     (swiper.ts's own concern, not this element's).
+//
+// `controls → dom` is the allowed import direction.
+import { UIElement } from "../../dom/element.js";
+export class UISwiperLabelElement extends UIElement {
+    static props = {};
+}
+if (!customElements.get('ui-swiper-label'))
+    customElements.define('ui-swiper-label', UISwiperLabelElement);

package/dist/controls/swiper/swiper-paddles.css

@@ -0,0 +1,26 @@
+/* swiper-paddles.css — ui-swiper-paddles's own sheet (ADR-0124 Consequences, the family-root resolution;
+ * swiper-family.lld.md LLD-C10/§7 REV). No `--ui-swiper-paddles-*` tokens of its own — each composed
+ * ui-button keeps its OWN geometry (icon-only square structure, default md size); this sheet contributes
+ * only the flex layout wrapping them + the default-stamped overlay placement. Standalone; never injected
+ * from a .ts (behaviour-only .ts, no runtime style injection — plan §2). */
+
+@scope (ui-swiper-paddles) {
+  :scope {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+  }
+  /* Default-stamped placement: overlaid on the track, spanning its full extent (author-placed anchors keep
+     whatever layout the author gave them — only the DEFAULT stamp gets this positioning). The host
+     (ui-swiper) is `position: relative` (swiper.css), the anchor for this overlay. */
+  :scope[data-default] {
+    position: absolute;
+    inset-block: 0;
+    inset-inline: 0;
+    pointer-events: none; /* only the buttons themselves are hit-testable */
+    z-index: 1;
+  }
+  :scope[data-default] ui-button {
+    pointer-events: auto;
+  }
+}

package/dist/controls/swiper/swiper-paddles.d.ts

@@ -0,0 +1,10 @@
+import { UIElement } from '../../dom/element.js';
+export declare class UISwiperPaddlesElement extends UIElement {
+    #private;
+    static props: {};
+    /**
+     * Coordinator command (swiper.ts's `#driveChrome`) — fill this anchor with two real, wired `ui-button`s
+     * (idempotent: built once, reused on every re-drive) and rotate their glyphs to `orientation`.
+     */
+    fill(onPrev: () => void, onNext: () => void, orientation: 'horizontal' | 'vertical'): void;
+}

package/dist/controls/swiper/swiper-paddles.js

@@ -0,0 +1,62 @@
+// swiper-paddles.ts — UISwiperPaddlesElement, the prev/next anchor of the ui-swiper family
+// (swiper-family.lld.md LLD-C10 · swiper-family.spec.md SPEC-R12 · ADR-0124 F3). BEHAVIOUR + the coordinator-
+// driven `fill` seam + self-define ONLY; geometry lives in swiper.css, the public contract in
+// swiper-paddles.md.
+//
+// An author-placed ANCHOR the owning `ui-swiper` fills and wires (`#driveChrome`, swiper.ts): TWO composed
+// `<ui-button icon-only variant=ghost>` (the toast.ts close-button precedent — an icon-only composed button
+// named by `aria-label`, a plain HTML global attribute set from OUTSIDE the button's own FACE internals, not
+// a violation of the "ARIA via internals" rule which governs a control's OWN self-applied state). Marked
+// `data-part='prev'`/`'next'` so the coordinator can toggle their `disabled` PUBLIC prop directly in non-loop
+// mode (LLD §5 — "the coordinator toggles the composed ui-buttons' disabled"; no second method on this class
+// is needed for that — `disabled` is public). Icons rotate with `orientation` (caret-left/right horizontal,
+// caret-up/down vertical) — `@agent-ui-kit/icons` is a zero-dep sibling package (disclosure.ts's own import
+// precedent), never a CSS transform hack.
+//
+// `controls → dom + @agent-ui-kit/icons` is the allowed import direction.
+import { UIElement } from "../../dom/element.js";
+import { setIcon } from '@agent-ui-kit/icons';
+export class UISwiperPaddlesElement extends UIElement {
+    static props = {};
+    #prev = null;
+    #next = null;
+    #prevIcon = null;
+    #nextIcon = null;
+    /**
+     * Coordinator command (swiper.ts's `#driveChrome`) — fill this anchor with two real, wired `ui-button`s
+     * (idempotent: built once, reused on every re-drive) and rotate their glyphs to `orientation`.
+     */
+    fill(onPrev, onNext, orientation) {
+        this.#ensureButtons();
+        setIcon(this.#prevIcon, orientation === 'vertical' ? 'caret-up' : 'caret-left');
+        setIcon(this.#nextIcon, orientation === 'vertical' ? 'caret-down' : 'caret-right');
+        this.#prev.onclick = () => onPrev(); // reassigning .onclick replaces cleanly — no accumulation across re-drives
+        this.#next.onclick = () => onNext();
+    }
+    #ensureButtons() {
+        if (this.#prev)
+            return;
+        this.#prev = document.createElement('ui-button');
+        this.#prev.setAttribute('data-part', 'prev');
+        this.#prev.setAttribute('variant', 'ghost');
+        this.#prev.setAttribute('icon-only', '');
+        this.#prev.setAttribute('aria-label', 'Previous slide');
+        this.#prevIcon = document.createElement('ui-icon');
+        this.#prevIcon.setAttribute('slot', 'leading');
+        this.#prevIcon.setAttribute('data-role', 'icon');
+        this.#prev.appendChild(this.#prevIcon);
+        this.appendChild(this.#prev);
+        this.#next = document.createElement('ui-button');
+        this.#next.setAttribute('data-part', 'next');
+        this.#next.setAttribute('variant', 'ghost');
+        this.#next.setAttribute('icon-only', '');
+        this.#next.setAttribute('aria-label', 'Next slide');
+        this.#nextIcon = document.createElement('ui-icon');
+        this.#nextIcon.setAttribute('slot', 'leading');
+        this.#nextIcon.setAttribute('data-role', 'icon');
+        this.#next.appendChild(this.#nextIcon);
+        this.appendChild(this.#next);
+    }
+}
+if (!customElements.get('ui-swiper-paddles'))
+    customElements.define('ui-swiper-paddles', UISwiperPaddlesElement);

package/dist/controls/swiper/swiper-pagination.css

@@ -0,0 +1,60 @@
+/* swiper-pagination.css — ui-swiper-pagination's own sheet (ADR-0124 Consequences, the family-root
+ * resolution; swiper-family.lld.md LLD-C9/§7 REV). No `--ui-swiper-pagination-*` tokens of its own — the
+ * dot ladder (`--ui-swiper-dot-*`) is declared once in the family root (swiper.css) and CONSUMED here
+ * (the family-root rule the amended family-coherence.test.ts invariant B allows). Standalone; never
+ * injected from a .ts (behaviour-only .ts, no runtime style injection — plan §2). */
+
+@scope (ui-swiper-pagination) {
+  :scope {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: var(--ui-swiper-pagination-gap);
+  }
+  /* Default-stamped placement: below the track, in normal flow (the coordinator's boolean-stamp fallback). */
+  :scope[data-default] {
+    margin-block-start: var(--ui-swiper-pagination-margin-block-start);
+  }
+  :scope [data-part='dot'] {
+    inline-size: var(--ui-swiper-dot-size);
+    block-size: var(--ui-swiper-dot-size);
+    padding: 0;
+    border: 0;
+    border-radius: 50%;
+    background: var(--ui-swiper-dot-color);
+    cursor: pointer;
+  }
+  /* The active dot is SIZE-larger — the non-colour signifier (ADR-0057); colour is a secondary cue. */
+  :scope [data-part='dot'][aria-current='true'] {
+    inline-size: var(--ui-swiper-dot-size-active);
+    block-size: var(--ui-swiper-dot-size-active);
+    background: var(--ui-swiper-dot-color-active);
+  }
+  :scope [data-part='dot']: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);
+  }
+  :scope [data-part='fraction'] {
+    font-size: var(--ui-swiper-pagination-fraction-font);
+    color: var(--ui-swiper-pagination-fraction-ink);
+  }
+
+  /* NOTE: the ready-gated dot-transition motion rule lives in swiper.css (the PRIMARY sheet), not here —
+     `ready` is a custom state ui-swiper alone owns (sets via its own internals.states); a rule referencing
+     it, even one styling a descendant, belongs with its owner so customStates stays truthful per file (the
+     contract-to-source trip-wire is file-scoped: swiper-pagination.md declares customStates as empty, and
+     this file carries no state-selector text of its own). See swiper.css's own "cross-tag motion" section.
+
+     Forced-colors (WHCM) — the pagination dots need a non-colour signifier that also survives WHCM (they
+     already carry SIZE; here the idle/active dots additionally map to system colours so they remain visible
+     against Canvas). */
+  @media (forced-colors: active) {
+    :scope [data-part='dot'] {
+      background: CanvasText;
+      forced-color-adjust: none;
+    }
+    :scope [data-part='dot'][aria-current='true'] {
+      background: Highlight;
+    }
+  }
+}

package/dist/controls/swiper/swiper-pagination.d.ts

@@ -0,0 +1,31 @@
+import { UIElement } from '../../dom/element.js';
+import { type ReactiveProps } from '../../dom/index.js';
+declare const props: {
+    type: {
+        reflect: true;
+        type: import("../../index.js").PropType<"fraction" | "dots">;
+        default: "fraction" | "dots";
+        attribute?: string | false;
+    };
+};
+export interface UISwiperPaginationElement extends ReactiveProps<typeof props> {
+}
+export declare class UISwiperPaginationElement extends UIElement {
+    #private;
+    static props: {
+        type: {
+            reflect: true;
+            type: import("../../index.js").PropType<"fraction" | "dots">;
+            default: "fraction" | "dots";
+            attribute?: string | false;
+        };
+    };
+    /**
+     * Coordinator command (swiper.ts's `#driveChrome`) — render `count` indicators (or the `'n / count'`
+     * fraction) and mark `active`. `onSelect(i)` is the coordinator's `goTo` — called with the clicked dot's
+     * REAL index. Idempotent: re-running with the same `count` reuses the existing dot nodes (only the
+     * `aria-current`/label state updates), so a settle-time re-drive never steals focus from an operated dot.
+     */
+    renderInto(count: number, active: number, onSelect: (i: number) => void): void;
+}
+export {};

package/dist/controls/swiper/swiper-pagination.js

@@ -0,0 +1,78 @@
+// swiper-pagination.ts — UISwiperPaginationElement, the dots/fraction anchor of the ui-swiper family
+// (swiper-family.lld.md LLD-C9 · swiper-family.spec.md SPEC-R12 · ADR-0124 F3). BEHAVIOUR + the coordinator-
+// driven `renderInto` seam + self-define ONLY; geometry lives in swiper.css, the public contract in
+// swiper-pagination.md.
+//
+// An author-placed ANCHOR the owning `ui-swiper` fills and wires (`#driveChrome`, swiper.ts) — this element
+// holds no slide/active state of its own; it is a pure render target the coordinator commands. `type=dots`
+// renders one real `<button>` indicator per REAL slide (native buttons are keyboard-operable — Enter/Space —
+// for free, no roving-focus trait needed: each dot is its own tab stop, exactly like a native radio-less
+// button group); `type=fraction` renders a single "n / realCount" text readout. The active dot is
+// distinguished by `aria-current="true"` (a real ARIA fact, not a decorative class) — swiper.css keys its
+// SIZE-larger treatment off that same attribute (ADR-0057: never colour alone).
+//
+// `renderInto` REBUILDS the dot list only when the slide COUNT changes (cheap incremental update otherwise —
+// re-running on every `active` change must not thrash focus/DOM identity mid-interaction). `controls → dom` is
+// the allowed import direction.
+import { UIElement } from "../../dom/element.js";
+import { prop } from "../../dom/index.js";
+const PAGINATION_TYPES = ['dots', 'fraction'];
+const props = {
+    type: { ...prop.enum(PAGINATION_TYPES, 'dots'), reflect: true },
+};
+export class UISwiperPaginationElement extends UIElement {
+    static props = props;
+    #dots = [];
+    #fraction = null;
+    /**
+     * Coordinator command (swiper.ts's `#driveChrome`) — render `count` indicators (or the `'n / count'`
+     * fraction) and mark `active`. `onSelect(i)` is the coordinator's `goTo` — called with the clicked dot's
+     * REAL index. Idempotent: re-running with the same `count` reuses the existing dot nodes (only the
+     * `aria-current`/label state updates), so a settle-time re-drive never steals focus from an operated dot.
+     */
+    renderInto(count, active, onSelect) {
+        if (this.type === 'fraction') {
+            this.#renderFraction(count, active);
+            return;
+        }
+        this.#renderDots(count, active, onSelect);
+    }
+    #renderFraction(count, active) {
+        if (this.#dots.length > 0) {
+            for (const dot of this.#dots)
+                dot.remove();
+            this.#dots = [];
+        }
+        if (!this.#fraction) {
+            this.#fraction = document.createElement('span');
+            this.#fraction.setAttribute('data-part', 'fraction');
+            this.appendChild(this.#fraction);
+        }
+        this.#fraction.textContent = count === 0 ? '0 / 0' : `${active + 1} / ${count}`;
+    }
+    #renderDots(count, active, onSelect) {
+        if (this.#fraction) {
+            this.#fraction.remove();
+            this.#fraction = null;
+        }
+        if (this.#dots.length !== count) {
+            for (const dot of this.#dots)
+                dot.remove();
+            this.#dots = [];
+            for (let i = 0; i < count; i++) {
+                const dot = document.createElement('button');
+                dot.type = 'button';
+                dot.setAttribute('data-part', 'dot');
+                this.appendChild(dot);
+                this.#dots.push(dot);
+            }
+        }
+        this.#dots.forEach((dot, i) => {
+            dot.setAttribute('aria-label', `Go to slide ${i + 1}`);
+            dot.setAttribute('aria-current', i === active ? 'true' : 'false');
+            dot.onclick = () => onSelect(i); // reassigning .onclick replaces cleanly — no accumulation across re-drives
+        });
+    }
+}
+if (!customElements.get('ui-swiper-pagination'))
+    customElements.define('ui-swiper-pagination', UISwiperPaginationElement);

package/dist/controls/swiper/swiper.css

@@ -0,0 +1,153 @@
+/* swiper.css — the PRIMARY sheet for the ui-swiper family (ADR-0124 Consequences, the family-root
+ * resolution; swiper-family.lld.md §2/§7/§13 REV). Declares the WHOLE family's `--ui-swiper-*` token
+ * table (columns/gap/align/duration/easing + the pagination dot ladder) — the four leaf sheets
+ * (swiper-item/-pagination/-paddles/-label.css) CONSUME this prefix as family-shared but declare NONE of
+ * it themselves (family-coherence.test.ts's amended invariant B). This sheet's OWN styles block covers
+ * only the HOST (`ui-swiper` itself: the track + the live region) — each leaf's own anatomy lives in its
+ * own file, the fleet's one-file-per-descriptor law (ADR-0081 A4) held for every tag.
+ *
+ * Two sectioned blocks (ADR-0003): a :where() TOKEN block (specificity 0 — declares the --ui-swiper-*
+ * chain from the colour roles + the space/motion ladders) then an @scope STYLES block (consumes ONLY
+ * --ui-swiper-* + the shared fleet focus-ring/motion tokens). Linked via the component-styles barrel;
+ * NEVER injected from a .ts (behaviour holds no runtime style; plan §2).
+ *
+ * Geometry (swiper-family.lld.md §7 — the fleet's FIRST scroll-snap surface, ADR-0124 F1): the track is a
+ * `grid-auto-flow` scroll container sized off `--ui-swiper-columns` + `--ui-swiper-gap`; slides snap via
+ * `scroll-snap-type`/`scroll-snap-align`/`scroll-snap-stop` (declared here, consumed by swiper-item.css).
+ * `ui-swiper` is `tier: pattern` (geometry.md — container + control-height rows). The surface (elevation/
+ * brightness) is the shared container.css seam — this sheet does not repoint --ui-container-bg (the
+ * ui-tabs precedent): a bare <ui-swiper> is transparent by default (ADR-0015 cl.1). */
+
+/* ════════════════════════ [1] TOKEN BLOCK — :where() declarations (the WHOLE family's chain) ════════════════════════ */
+
+:where(ui-swiper) {
+  /* Track geometry — the responsive-auto column count (real @container repoint below); `[slides-in-view="n"]`
+     pins it. */
+  --ui-swiper-columns: 1;
+  --ui-swiper-align: start; /* repointed by [align=center|end]; consumed by swiper-item.css's scroll-snap-align */
+  --ui-swiper-gap: var(--md-sys-space-md); /* inter-slide gap off the space ladder (density-responsive) */
+
+  /* Programmatic-advance timing (F1 Consequences — native gesture snaps use the UA's own timing and cannot be
+     shaped by these; `goTo`/paddle/dot/keyboard read them via the JS scroll animation, swiper.ts). The fleet
+     motion ramp has no "medium" step — `--md-sys-motion-duration-fast` (300ms) + `--md-sys-motion-easing-standard` are the real tokens
+     every other control's transition consumes (tabs.css/button.css); reused here rather than inventing a new one. */
+  --ui-swiper-duration: var(--md-sys-motion-duration-fast);
+  --ui-swiper-easing: var(--md-sys-motion-easing-standard);
+
+  /* Pagination dots — the compact widget ramp; the ACTIVE dot is size-larger (non-colour signifier, ADR-0057).
+     Declared HERE (the family root) though only swiper-pagination.css consumes them — the family-root rule
+     (ADR-0124 Consequences): a leaf never DECLARES another tag's private token, but MAY consume the primary's
+     `--ui-swiper-*` prefix. The +2px bump is a flat literal (the compact-realm box is density-invariant,
+     geometry.md — density rides the pad/gap, never the box), not a --md-sys-space step. */
+  --ui-swiper-dot-size: var(--md-sys-compact-sm);
+  --ui-swiper-dot-size-active: calc(var(--md-sys-compact-sm) + 2px);
+  --ui-swiper-dot-color: var(--md-sys-color-neutral-outline-variant);
+  --ui-swiper-dot-color-active: var(--md-sys-color-primary);
+  --ui-swiper-pagination-fraction-ink: var(--md-sys-color-neutral-on-surface-variant); /* TKT-0066: the fraction readout's ink — was a direct role read in swiper-pagination.css's @scope; declared HERE per the family token tunnel (pagination declares nothing of its own, its pin test enforces that) */
+  /* TKT-0066 item 5 ruling: pagination's dimensional constants ALSO route through the tunnel. */
+  --ui-swiper-pagination-gap: var(--md-sys-space-xs);
+  --ui-swiper-pagination-margin-block-start: var(--md-sys-space-sm);
+  --ui-swiper-pagination-fraction-font: var(--md-sys-font-sm);
+}
+
+/* [slides-in-view="n"] — pin the visible column count (a numeric string; '' stays responsive-auto below). */
+:where(ui-swiper[slides-in-view='2']) { --ui-swiper-columns: 2; }
+:where(ui-swiper[slides-in-view='3']) { --ui-swiper-columns: 3; }
+:where(ui-swiper[slides-in-view='4']) { --ui-swiper-columns: 4; }
+:where(ui-swiper[slides-in-view='5']) { --ui-swiper-columns: 5; }
+:where(ui-swiper[slides-in-view='6']) { --ui-swiper-columns: 6; }
+
+:where(ui-swiper[align='center']) { --ui-swiper-align: center; }
+:where(ui-swiper[align='end']) { --ui-swiper-align: end; }
+
+/* ════════════════════════ [2] STYLES BLOCK — @scope (ui-swiper) — the HOST only ════════════════════════ */
+
+@scope (ui-swiper) {
+  :scope {
+    display: block;
+    position: relative; /* the anchor for a default-stamped [data-default] paddles overlay */
+    container-type: inline-size; /* the responsive-auto @container basis for --ui-swiper-columns below */
+  }
+
+  /* The owned scroll track (SPEC-R3 — the ONLY scrolling element). Horizontal (default): column flow, x-axis
+     scroll/snap. Slides are sized off the columns + gap formula (the prior-art formula). */
+  :scope > [data-part='track'] {
+    display: grid;
+    grid-auto-flow: column;
+    grid-auto-columns: calc((100% - (var(--ui-swiper-columns) - 1) * var(--ui-swiper-gap)) / var(--ui-swiper-columns));
+    gap: var(--ui-swiper-gap);
+    overflow-x: auto;
+    overflow-y: hidden;
+    scroll-snap-type: x mandatory;
+    scrollbar-width: none;
+    outline: none; /* the shared focus-ring (:focus-visible) below replaces the UA default */
+  }
+  :scope > [data-part='track']::-webkit-scrollbar {
+    display: none;
+  }
+
+  :scope[orientation='vertical'] > [data-part='track'] {
+    grid-auto-flow: row;
+    grid-auto-rows: calc((100% - (var(--ui-swiper-columns) - 1) * var(--ui-swiper-gap)) / var(--ui-swiper-columns));
+    overflow-x: hidden;
+    overflow-y: auto;
+    scroll-snap-type: y mandatory;
+  }
+
+  /* [data-part=live] — visually hidden, announced (the stat.css delta-word idiom). */
+  :scope > [data-part='live'] {
+    position: absolute;
+    inline-size: 1px;
+    block-size: 1px;
+    overflow: hidden;
+    clip-path: inset(50%);
+    white-space: nowrap;
+  }
+
+  /* The shared focus ring (ADR-0009) on the track's single tab stop. */
+  :scope > [data-part='track']:focus-visible {
+    outline: var(--md-sys-state-focus-ring-width) solid var(--md-sys-color-focus-ring);
+    outline-offset: calc(-1 * var(--md-sys-state-focus-ring-offset));
+  }
+
+  /* Reduced motion — native snap loses its smooth-scroll animation; the JS scroll animation (swiper.ts)
+     already checks prefers-reduced-motion and skips its own rAF loop, so this rule only needs to neutralise
+     any UA-applied smooth-scroll behaviour on the track itself. */
+  @media (prefers-reduced-motion: reduce) {
+    :scope > [data-part='track'] {
+      scroll-behavior: auto;
+    }
+  }
+
+  /* Responsive-auto columns (slides-in-view='') — a real @container basis; a built-output-only truth. */
+  @container (min-width: 40rem) {
+    :scope:not([slides-in-view]) > [data-part='track'],
+    :scope[slides-in-view=''] > [data-part='track'] {
+      --ui-swiper-columns: 2;
+    }
+  }
+  @container (min-width: 64rem) {
+    :scope:not([slides-in-view]) > [data-part='track'],
+    :scope[slides-in-view=''] > [data-part='track'] {
+      --ui-swiper-columns: 3;
+    }
+  }
+
+  /* Cross-tag motion (interaction-states standard) — the pagination dot's size/colour swap transitions
+     ONLY after first paint, gated behind THIS host's :state(ready) (the ui-tabs ready-gate precedent: the
+     synchronous initial position snaps; only later changes animate). Lives HERE, not in
+     swiper-pagination.css, because `ready` is a state ui-swiper alone owns (sets via its own
+     internals.states) — the contract↔source trip-wire is file-scoped, so a rule referencing a state
+     belongs in its owner's file even when it styles a descendant. Geometry never animates. */
+  :scope:state(ready) ui-swiper-pagination [data-part='dot'] {
+    transition:
+      inline-size var(--md-sys-motion-duration-fast) var(--md-sys-motion-easing-standard),
+      block-size var(--md-sys-motion-duration-fast) var(--md-sys-motion-easing-standard),
+      background-color var(--md-sys-motion-duration-fast) var(--md-sys-motion-easing-standard);
+  }
+  @media (prefers-reduced-motion: reduce) {
+    :scope:state(ready) ui-swiper-pagination [data-part='dot'] {
+      transition: none;
+    }
+  }
+}