@adia-ai/web-components 0.8.30 → 0.8.32

package/components/stepper/stepper.class.js

@@ -28,21 +28,104 @@
  *
  *   el.next(); el.prev(); el.goTo(2);
  *
+ *   <!-- Host-controlled click-to-navigate + keyboard (gh#711 S1) -->
+ *   <stepper-ui step="1" interactive>
+ *     <stepper-item-ui text="Account"></stepper-item-ui>
+ *     <stepper-item-ui text="Details" disabled></stepper-item-ui>
+ *     ...
+ *   </stepper-ui>
+ *
+ *   <!-- Veto a navigation before it lands (gh#711 S1 review) -->
+ *   el.addEventListener('step-request', (e) => {
+ *     if (!phaseAllows(e.detail.step)) e.preventDefault();
+ *   });
+ *
  * Attributes:
  *   step        — current step index (0-based)
  *   orientation — horizontal (default) | vertical
+ *   interactive — opt-in click-to-navigate + roving-tabindex keyboard
+ *                 nav (arrow keys / Home / End). Absent by default —
+ *                 a bare stepper is a read-only progress display.
+ *
+ * Events (interactive only):
+ *   step-request — cancelable, fires BEFORE `step` mutates.
+ *                  { detail: { step, previous } }. `preventDefault()`
+ *                  vetoes the navigation: no mutation, no `change`,
+ *                  focus/roving state unaffected. A host that never
+ *                  listens keeps today's uncontrolled behavior —
+ *                  this is additive, not a breaking change.
+ *   change       — { detail: { step } } — fires AFTER a click or
+ *                  keyboard navigation changes `step` (i.e. only if
+ *                  `step-request` wasn't vetoed). The host reacts;
+ *                  the stepper does not itself drive any other UI.
  */
 
 import { UIElement } from '../../core/element.js';
 
+// gh#736 — during static innerHTML parsing, a stepper-item-ui's attribute
+// list is on the DOM node the instant the parser inserts it, but its
+// `disabled` PROPERTY mirror only lands once its own attributeChangedCallback
+// replay has run — which some environments (this repo's happy-dom test env,
+// certain upgrade orderings) don't guarantee has happened yet by the time the
+// PARENT's connectedCallback (and its first render()) fires, since children
+// connect after their parent in tree order. Reading the attribute directly
+// is synchronous with parsing and never lags, so it's the race-proof source
+// of truth; the property read stays primary for the (overwhelmingly common)
+// already-upgraded case.
+function isDisabled(item) {
+  return item.disabled || item.hasAttribute('disabled');
+}
+
 export class UIStepper extends UIElement {
   static properties = {
-    step:        { type: Number, default: 0,            reflect: true },
-    orientation: { type: String, default: 'horizontal', reflect: true },
+    step:        { type: Number,  default: 0,            reflect: true },
+    orientation: { type: String,  default: 'horizontal', reflect: true },
+    interactive: { type: Boolean, default: false,         reflect: true },
   };
 
   static template = () => null;
 
+  // gh#736 — two related child-reactivity gaps, one observer:
+  //   1. Upgrade-order race: during static innerHTML parsing this element's
+  //      connectedCallback (and its first synchronous render()) can fire
+  //      BEFORE its stepper-item-ui children are even appended as DOM
+  //      children (confirmed: this element's own render() sees zero items
+  //      on that first pass) — the isDisabled() hasAttribute fallback in
+  //      render() alone can't help when there's nothing to iterate yet.
+  //      Watching `childList` catches children landing a tick later and
+  //      re-renders once they're actually there.
+  //   2. A child's [disabled] flip after mount must re-render this parent's
+  //      roving-tabindex/aria-disabled computation without the host
+  //      manually poking render() (nav-group-ui's gh#501 idiom: a scoped
+  //      MutationObserver, not a signal, since `disabled` lives on
+  //      descendant DOM, not this element's own reactive properties).
+  // attributeFilter is narrow (['disabled']) and render() never writes
+  // childList or that attribute itself (it only reads `disabled`), so the
+  // observer can't feed back into its own render.
+  #onChildMutation = () => this.render();
+  #childObserver = null;
+
+  connected() {
+    this.addEventListener('click', this.#handleClick);
+    this.addEventListener('keydown', this.#handleKeydown);
+    if (!this.#childObserver) {
+      this.#childObserver = new MutationObserver(this.#onChildMutation);
+      this.#childObserver.observe(this, {
+        childList: true,
+        subtree: true,
+        attributes: true,
+        attributeFilter: ['disabled'],
+      });
+    }
+  }
+
+  disconnected() {
+    this.removeEventListener('click', this.#handleClick);
+    this.removeEventListener('keydown', this.#handleKeydown);
+    this.#childObserver?.disconnect();
+    this.#childObserver = null;
+  }
+
   render() {
     const items = [...this.querySelectorAll('stepper-item-ui')];
 
@@ -64,7 +147,40 @@ export class UIStepper extends UIElement {
       } else {
         item.setAttribute('status', 'idle');
       }
+
+      // Roving tabindex + button semantics only when the host opts
+      // in via [interactive] — a bare stepper stays a non-focusable
+      // progress display (Rule: absent attribute is the default).
+      if (this.interactive) {
+        item.setAttribute('role', 'button');
+        if (i === this.step) item.setAttribute('aria-current', 'step');
+        else item.removeAttribute('aria-current');
+      } else {
+        item.removeAttribute('role');
+        item.removeAttribute('tabindex');
+        item.removeAttribute('aria-current');
+        item.removeAttribute('aria-disabled');
+      }
     });
+
+    // Disabled items (S2's phase-gating mechanism) never take the
+    // roving tabindex stop and are never clickable/keyboard-reachable
+    // — an author-set [disabled] on a stepper-item-ui always wins,
+    // whatever [status] the parent computed for it above.
+    if (this.interactive) {
+      const enabled = items.filter((item) => !isDisabled(item));
+      const current = items[this.step];
+      const focusTarget = current && !isDisabled(current) ? current : enabled[0];
+      for (const item of items) {
+        if (isDisabled(item)) {
+          item.setAttribute('aria-disabled', 'true');
+          item.removeAttribute('tabindex');
+        } else {
+          item.removeAttribute('aria-disabled');
+          item.setAttribute('tabindex', item === focusTarget ? '0' : '-1');
+        }
+      }
+    }
   }
 
   next() {
@@ -80,6 +196,82 @@ export class UIStepper extends UIElement {
     const max = this.querySelectorAll('stepper-item-ui').length - 1;
     this.step = Math.max(0, Math.min(index, max));
   }
+
+  get #items() {
+    return [...this.querySelectorAll('stepper-item-ui')];
+  }
+
+  get #enabledItems() {
+    return this.#items.filter((item) => !isDisabled(item));
+  }
+
+  /** @returns {boolean} true if the navigation landed, false if vetoed or a no-op. */
+  #select(index) {
+    const items = this.#items;
+    const max = items.length - 1;
+    const next = Math.max(0, Math.min(index, max));
+    if (next === this.step || (items[next] && isDisabled(items[next]))) return false;
+
+    // Pre-mutation cancelable event (gh#711 S1 review) — the host
+    // gets a veto BEFORE `step` changes. `preventDefault()` stops
+    // the mutation and the `change` event; focus/roving are
+    // untouched either way. A host that never listens sees no
+    // difference from before this event existed.
+    const previous = this.step;
+    const proceed = this.dispatchEvent(new CustomEvent('step-request', {
+      bubbles: true,
+      cancelable: true,
+      detail: { step: next, previous },
+    }));
+    if (!proceed) return false; // vetoed
+
+    this.step = next;
+    this.dispatchEvent(new CustomEvent('change', { bubbles: true, detail: { step: this.step } }));
+    return true;
+  }
+
+  #handleClick = (e) => {
+    if (!this.interactive) return;
+    const item = e.target.closest('stepper-item-ui');
+    if (!item || !this.contains(item) || isDisabled(item)) return;
+    const index = this.#items.indexOf(item);
+    if (index < 0) return;
+    this.#select(index);
+  };
+
+  #handleKeydown = (e) => {
+    if (!this.interactive) return;
+    const item = e.target.closest('stepper-item-ui');
+    if (!item || !this.contains(item)) return;
+
+    // Disabled items are unreachable (no tabindex) and skipped in the
+    // arrow/Home/End order — the roving set is the enabled subset.
+    const items = this.#enabledItems;
+    const idx = items.indexOf(item);
+    if (idx < 0) return;
+
+    const isVertical = this.orientation === 'vertical';
+    const nextKey = isVertical ? 'ArrowDown' : 'ArrowRight';
+    const prevKey = isVertical ? 'ArrowUp' : 'ArrowLeft';
+
+    let next;
+    switch (e.key) {
+      case nextKey:    next = idx < items.length - 1 ? idx + 1 : 0; break; // wraps to first
+      case prevKey:    next = idx > 0 ? idx - 1 : items.length - 1; break; // wraps to last
+      case 'Home':     next = 0; break;
+      case 'End':      next = items.length - 1; break;
+      case 'Enter':
+      case ' ':        e.preventDefault(); this.#select(this.#items.indexOf(item)); return;
+      default: return;
+    }
+
+    e.preventDefault();
+    const target = items[next];
+    // Only move roving focus if the navigation actually landed — a
+    // veto leaves focus (and the tabindex roving stop) exactly where
+    // it was, per the review's "focus/roving unaffected" contract.
+    if (this.#select(this.#items.indexOf(target))) target.focus();
+  };
 }
 
 export class UIStepperItem extends UIElement {
@@ -92,6 +284,11 @@ export class UIStepperItem extends UIElement {
     // values prevent the `active && completed` footgun the prior multi-
     // Boolean shape allowed.
     status:      { type: String,  default: 'idle', reflect: true },
+    // S2's phase-gating mechanism (gh#711 S1 review) — a disabled step
+    // is skipped in [interactive] roving tabindex/arrow order, is
+    // unclickable, and carries aria-disabled. Independent of `status`:
+    // a completed or upcoming step can be disabled for a different reason.
+    disabled:    { type: Boolean, default: false,   reflect: true },
   };
 
   static template = () => null;

package/components/stepper/stepper.css

@@ -253,6 +253,36 @@
   :scope [slot]:empty {
     display: none;
   }
+
+  /* Interactive (click-to-navigate) — host opts in via [interactive]
+     on the parent; absent by default (Rule: bare stepper is a
+     read-only progress display, not a nav control). */
+  stepper-ui[interactive] > :scope {
+    cursor: pointer;
+    outline: none;
+  }
+
+  stepper-ui[interactive] > :scope:focus-visible::after {
+    outline: 2px solid var(--md-sys-color-primary);
+    outline-offset: 2px;
+  }
+
+  /* Disabled (S2's phase-gating mechanism) — never clickable, never
+     the roving-tabindex stop; visually recedes regardless of status. */
+  stepper-ui[interactive] > :scope[disabled] {
+    cursor: not-allowed;
+  }
+
+  :scope[disabled]::after,
+  :scope[disabled] [slot="icon"] {
+    opacity: 0.5;
+  }
+
+  :scope[disabled] [slot="label"],
+  :scope[disabled] [slot="description"] {
+    color: var(--stepper-item-pending-fg);
+    opacity: 0.5;
+  }
 }
 
 /* ── Vertical orientation rules — must reach across stepper-ui →

package/components/stepper/stepper.d.ts

@@ -1,5 +1,5 @@
 /**
- * `<stepper-ui>` — Wizard / process stepper — parent step index drives numbered children's complete/current/upcoming states automatically. Renders horizontally as a labeled step bar with connectors. Use for multi-step forms, onboarding, or pipelines; for read-only event history use <timeline-ui> instead.
+ * `<stepper-ui>` — Wizard / process stepper — parent step index drives numbered children's complete/current/upcoming states automatically. Renders horizontally as a labeled step bar with connectors. Use for multi-step forms, onboarding, or pipelines; for read-only event history use <timeline-ui> instead. Add [interactive] to opt into click-to-navigate + roving- tabindex keyboard (arrow keys / Home / End) — the host still owns whether navigation is permitted: listen for the cancelable [step-request] event and call preventDefault() to veto a step before it lands, or set [disabled] on a stepper-item-ui to phase-gate it out of reach entirely.
  *
  * @see https://ui-kit.exe.xyz/site/components/stepper
  *
@@ -12,16 +12,43 @@
 
 import { UIElement } from '../../core/element.js';
 
+export interface StepperChangeEventDetail {
+  /** New current step index. */
+  step: number;
+}
+
+export type StepperChangeEvent = CustomEvent<StepperChangeEventDetail>;
+export interface StepperStepRequestEventDetail {
+  /** The current step index before this navigation. */
+  previous: number;
+  /** The step index the navigation would land on if not vetoed. */
+  step: number;
+}
+
+export type StepperStepRequestEvent = CustomEvent<StepperStepRequestEventDetail>;
+
 export class UIStepper extends UIElement {
+  /** Opt into click-to-navigate + roving-tabindex keyboard nav (arrow keys / Home / End / Enter / Space). Absent by default — a bare stepper is a read-only progress display, not a nav control (gh#711 S1). */
+  interactive: boolean;
   /** horizontal | vertical */
   orientation: string;
   /** Current step index (0-based). */
   step: number;
+
+  addEventListener(type: 'change', listener: (ev: StepperChangeEvent) => unknown, options?: boolean | AddEventListenerOptions): void;
+  addEventListener(type: 'step-request', listener: (ev: StepperStepRequestEvent) => unknown, options?: boolean | AddEventListenerOptions): void;
+  addEventListener<K extends keyof HTMLElementEventMap>(
+    type: K,
+    listener: (this: UIStepper, ev: HTMLElementEventMap[K]) => unknown,
+    options?: boolean | AddEventListenerOptions,
+  ): void;
 }
 
 export class UIStepperItem extends UIElement {
   /** Secondary description line under the label. */
   description: string;
+  /** S2's phase-gating mechanism (gh#711 S1 review). Skipped in the parent's [interactive] roving tabindex/arrow order, unclickable, carries aria-disabled. Independent of [status] — a completed or upcoming step can still be disabled for a different reason (e.g. the visit phase hasn't unlocked it yet). */
+  disabled: boolean;
   /** Optional leading Phosphor icon name; overrides the auto-stamped numeric badge. */
   icon: string;
   /** Canonical stage-progress state. Mutually exclusive (prevents the

package/components/stepper/stepper.yaml

@@ -12,7 +12,12 @@ description: >-
   complete/current/upcoming states automatically. Renders horizontally as
   a labeled step bar with connectors. Use for multi-step forms,
   onboarding, or pipelines; for read-only event history use <timeline-ui>
-  instead.
+  instead. Add [interactive] to opt into click-to-navigate + roving-
+  tabindex keyboard (arrow keys / Home / End) — the host still owns
+  whether navigation is permitted: listen for the cancelable
+  [step-request] event and call preventDefault() to veto a step before
+  it lands, or set [disabled] on a stepper-item-ui to phase-gate it
+  out of reach entirely.
 # Per ADR-0027 — primitives that programmatically create other primitives
 # do NOT auto-import them. Consumer (or demo shell) must explicitly import.
 composes:
@@ -26,7 +31,39 @@ props:
     description: Current step index (0-based).
     type: number
     default: 0
-events: {}
+  interactive:
+    description: >-
+      Opt into click-to-navigate + roving-tabindex keyboard nav
+      (arrow keys / Home / End / Enter / Space). Absent by default —
+      a bare stepper is a read-only progress display, not a nav
+      control (gh#711 S1).
+    type: boolean
+    default: false
+events:
+  step-request:
+    description: >-
+      Cancelable — fires BEFORE [step] mutates, on a click or keyboard
+      navigation. call preventDefault() to veto: the step does not
+      change, [change] does not fire, and focus/roving-tabindex stay
+      exactly where they were. A host that never listens for this
+      event keeps the pre-veto uncontrolled behavior unchanged
+      (gh#711 S1 review).
+    detail:
+      step:
+        type: number
+        description: The step index the navigation would land on if not vetoed.
+      previous:
+        type: number
+        description: The current step index before this navigation.
+  change:
+    description: >-
+      Fired after a click or keyboard navigation changes [step] (i.e.
+      only when the preceding [step-request] wasn't vetoed).
+      Only fires when [interactive] is set.
+    detail:
+      step:
+        type: number
+        description: New current step index.
 slots:
   default:
     description: "Default slot — primary child content."
@@ -43,6 +80,10 @@ a2ui:
       reason: 'Surface examples.'
     - rule: 'For read-only event history use <timeline-ui>; stepper requires forward progress semantics.'
       reason: 'Decision rule vs timeline.'
+    - rule: 'Add [interactive] only when the host permits jumping to a step out of order; leave absent for a linear wizard the host advances programmatically.'
+      reason: 'Click-to-navigate is host-controlled, not automatic (gh#711 S1).'
+    - rule: 'Listen for [step-request] and call preventDefault() to veto a navigation conditionally (e.g. block a phase the app has not unlocked); set [disabled] on a stepper-item-ui to phase-gate it out of reach unconditionally.'
+      reason: 'Two host-controlled gates at different granularities (gh#711 S1 review).'
 anti_patterns: []
 examples:
   - name: basic
@@ -75,6 +116,37 @@ examples:
           "text": "Review"
         }
       ]
+  - name: interactive
+    description: Click/keyboard-navigable stepper — host allows jumping between steps.
+    a2ui: >-
+      [
+        {
+          "id": "root",
+          "component": "Stepper",
+          "step": 1,
+          "interactive": true,
+          "children": [
+            "s1",
+            "s2",
+            "s3"
+          ]
+        },
+        {
+          "id": "s1",
+          "component": "StepperItem",
+          "text": "Account"
+        },
+        {
+          "id": "s2",
+          "component": "StepperItem",
+          "text": "Details"
+        },
+        {
+          "id": "s3",
+          "component": "StepperItem",
+          "text": "Review"
+        }
+      ]
 keywords:
   - stepper
   - wizard
@@ -82,6 +154,8 @@ keywords:
   - process
   - onboarding
   - multi-step
+  - interactive
+  - click-to-navigate
 synonyms:
   timeline-ui mode=steps: stepper-ui
 related:

package/components/stream/stream.d.ts

@@ -27,12 +27,12 @@ export class UIStream extends UIElement {
   /** Read-only reflected state, true while stream is active */
   streaming: boolean;
 
+  addEventListener(type: 'stream-end', listener: (ev: StreamEndEvent) => unknown, options?: boolean | AddEventListenerOptions): void;
+  addEventListener(type: 'stream-error', listener: (ev: StreamErrorEvent) => unknown, options?: boolean | AddEventListenerOptions): void;
+  addEventListener(type: 'stream-start', listener: (ev: StreamStartEvent) => unknown, options?: boolean | AddEventListenerOptions): void;
   addEventListener<K extends keyof HTMLElementEventMap>(
     type: K,
     listener: (this: UIStream, ev: HTMLElementEventMap[K]) => unknown,
     options?: boolean | AddEventListenerOptions,
   ): void;
-  addEventListener(type: 'stream-end', listener: (ev: StreamEndEvent) => unknown, options?: boolean | AddEventListenerOptions): void;
-  addEventListener(type: 'stream-error', listener: (ev: StreamErrorEvent) => unknown, options?: boolean | AddEventListenerOptions): void;
-  addEventListener(type: 'stream-start', listener: (ev: StreamStartEvent) => unknown, options?: boolean | AddEventListenerOptions): void;
 }

package/components/swatch/swatch.class.js

@@ -166,7 +166,7 @@ export class UISwatch extends UIElement {
     copyValue:    { type: String,  default: '' },  // not reflected — long color strings as attrs read poorly
     selectable:   { type: Boolean, default: false,    reflect: true },
     selected:     { type: Boolean, default: false,    reflect: true },
-    autoContrast: { type: Boolean, default: false,    reflect: true },
+    autoContrast: { type: Boolean, default: false,    reflect: true, attribute: 'auto-contrast' },
     // §253 (v0.5.12, FB-23 §1): label position relative to the tile.
     // `below` (default) = current shape="block" stacked layout.
     // `overlay` = label sits ON the tile via absolute positioning;

package/components/swatch/swatch.d.ts

@@ -73,10 +73,10 @@ pattern; blocked 3 cycles on this design call). */
   /** Size preset — sm / md / lg. Drives the swatch's intrinsic dimensions; lg is reserved for the token-scale demo (40 px tall). */
   size: 'sm' | 'md' | 'lg';
 
+  addEventListener(type: 'select', listener: (ev: SwatchSelectEvent) => unknown, options?: boolean | AddEventListenerOptions): void;
   addEventListener<K extends keyof HTMLElementEventMap>(
     type: K,
     listener: (this: UISwatch, ev: HTMLElementEventMap[K]) => unknown,
     options?: boolean | AddEventListenerOptions,
   ): void;
-  addEventListener(type: 'select', listener: (ev: SwatchSelectEvent) => unknown, options?: boolean | AddEventListenerOptions): void;
 }

package/components/swiper/swiper.d.ts

@@ -52,12 +52,12 @@ export class UISwiper extends UIElement {
   /** Scroll-snap alignment — start, center, end, or none. */
   snap: 'start' | 'center' | 'end' | 'none';
 
+  addEventListener(type: 'autoplay-pause', listener: (ev: SwiperAutoplayPauseEvent) => unknown, options?: boolean | AddEventListenerOptions): void;
+  addEventListener(type: 'autoplay-resume', listener: (ev: SwiperAutoplayResumeEvent) => unknown, options?: boolean | AddEventListenerOptions): void;
+  addEventListener(type: 'change', listener: (ev: SwiperChangeEvent) => unknown, options?: boolean | AddEventListenerOptions): void;
   addEventListener<K extends keyof HTMLElementEventMap>(
     type: K,
     listener: (this: UISwiper, ev: HTMLElementEventMap[K]) => unknown,
     options?: boolean | AddEventListenerOptions,
   ): void;
-  addEventListener(type: 'autoplay-pause', listener: (ev: SwiperAutoplayPauseEvent) => unknown, options?: boolean | AddEventListenerOptions): void;
-  addEventListener(type: 'autoplay-resume', listener: (ev: SwiperAutoplayResumeEvent) => unknown, options?: boolean | AddEventListenerOptions): void;
-  addEventListener(type: 'change', listener: (ev: SwiperChangeEvent) => unknown, options?: boolean | AddEventListenerOptions): void;
 }

package/components/table/table.a2ui.json

@@ -40,7 +40,7 @@
       "default": false
     },
     "frameless": {
-      "description": "Drop the table's outer 1px perimeter and nothing else (gh#511) — row dividers are untouched (the perimeter is split onto its own --table-perimeter token, defaulting to --table-border). For card-composed tables: the card owns the frame, so the table's square perimeter otherwise renders a doubled edge (flush bleed) or a stray inner box (with content above). Standalone tables keep their chrome by default. Theming path without the attribute: set --table-perimeter to transparent per instance.",
+      "description": "Drop the table's outer 1px perimeter and nothing else (gh#511) — row dividers are untouched (the perimeter is split onto its own --table-perimeter token, defaulting to --table-border). For card-composed tables: the card owns the frame, so the table's square perimeter otherwise renders a doubled edge (flush bleed) or a stray inner box (with content above). Standalone tables keep their chrome by default. Theming path without the attribute: set --table-perimeter to transparent per instance. Note: `<card-ui><section bleed>` already drops a direct-child table-ui's chrome automatically (card.css, gh#796) — `frameless`/`raw` on the instance still applies and is honored, but is no longer required just to avoid the doubled-edge look in that composition.",
       "type": "boolean",
       "default": false
     },
@@ -55,7 +55,7 @@
       "default": 0
     },
     "raw": {
-      "description": "Visual-only passthrough — applies `<table-ui>`'s chrome reset (background / border / border-radius all transparent) AND short-circuits the data lifecycle entirely. The consumer owns the body shape: no header injection, no row reconciliation from `.data`, no empty-state / loading overlays, no aggregation or pagination footers. Use raw when embedding `<table-ui>` inside surfaces that supply their own chrome (e.g. `<card-ui><section bleed>`), or when wrapping a consumer-authored native `<table>` for design-token styling without the framework's data semantics. Pre-v0.6.33 (FB-53 §2) `raw` was visual-only and the data lifecycle still ran — wrapping a `.data`-unset native table produced a phantom \"No data\" overlay. v0.6.33+ matches the documented contract.",
+      "description": "Visual-only passthrough — applies `<table-ui>`'s chrome reset (background / border / border-radius all transparent) AND short-circuits the data lifecycle entirely. The consumer owns the body shape: no header injection, no row reconciliation from `.data`, no empty-state / loading overlays, no aggregation or pagination footers. Use raw when embedding `<table-ui>` inside surfaces that supply their own chrome (e.g. `<card-ui><section bleed>`), or when wrapping a consumer-authored native `<table>` for design-token styling without the framework's data semantics. Note: a `<table-ui>` placed directly inside `<card-ui><section bleed>` drops the table's visual chrome automatically (card.css, gh#796) even without `raw` — `raw` is still required to also short-circuit the data lifecycle. Pre-v0.6.33 (FB-53 §2) `raw` was visual-only and the data lifecycle still ran — wrapping a `.data`-unset native table produced a phantom \"No data\" overlay. v0.6.33+ matches the documented contract.",
       "type": "boolean",
       "default": false
     },

package/components/table/table.d.ts

@@ -94,13 +94,13 @@ export class UITable extends UIElement {
   density: 'compact' | 'standard' | 'comfortable';
   /** Enable row expansion */
   expandable: boolean;
-  /** Drop the table's outer 1px perimeter and nothing else (gh#511) — row dividers are untouched (the perimeter is split onto its own --table-perimeter token, defaulting to --table-border). For card-composed tables: the card owns the frame, so the table's square perimeter otherwise renders a doubled edge (flush bleed) or a stray inner box (with content above). Standalone tables keep their chrome by default. Theming path without the attribute: set --table-perimeter to transparent per instance. */
+  /** Drop the table's outer 1px perimeter and nothing else (gh#511) — row dividers are untouched (the perimeter is split onto its own --table-perimeter token, defaulting to --table-border). For card-composed tables: the card owns the frame, so the table's square perimeter otherwise renders a doubled edge (flush bleed) or a stray inner box (with content above). Standalone tables keep their chrome by default. Theming path without the attribute: set --table-perimeter to transparent per instance. Note: `<card-ui><section bleed>` already drops a direct-child table-ui's chrome automatically (card.css, gh#796) — `frameless`/`raw` on the instance still applies and is honored, but is no longer required just to avoid the doubled-edge look in that composition. */
   frameless: boolean;
   /** Renders N ghost skeleton rows in place of the body data (count derived from `paginate` if set, else 5). Header + columns stay intact so the table layout is preserved while data fetches. Sets aria-busy="true" on the host. Data updates are deferred until loading is set back to false. */
   loading: boolean;
   /** Rows per page. 0 = show all rows without pagination. When > 0, renders a pagination bar below the table. */
   paginate: number;
-  /** Visual-only passthrough — applies `<table-ui>`'s chrome reset (background / border / border-radius all transparent) AND short-circuits the data lifecycle entirely. The consumer owns the body shape: no header injection, no row reconciliation from `.data`, no empty-state / loading overlays, no aggregation or pagination footers. Use raw when embedding `<table-ui>` inside surfaces that supply their own chrome (e.g. `<card-ui><section bleed>`), or when wrapping a consumer-authored native `<table>` for design-token styling without the framework's data semantics. Pre-v0.6.33 (FB-53 §2) `raw` was visual-only and the data lifecycle still ran — wrapping a `.data`-unset native table produced a phantom "No data" overlay. v0.6.33+ matches the documented contract. */
+  /** Visual-only passthrough — applies `<table-ui>`'s chrome reset (background / border / border-radius all transparent) AND short-circuits the data lifecycle entirely. The consumer owns the body shape: no header injection, no row reconciliation from `.data`, no empty-state / loading overlays, no aggregation or pagination footers. Use raw when embedding `<table-ui>` inside surfaces that supply their own chrome (e.g. `<card-ui><section bleed>`), or when wrapping a consumer-authored native `<table>` for design-token styling without the framework's data semantics. Note: a `<table-ui>` placed directly inside `<card-ui><section bleed>` drops the table's visual chrome automatically (card.css, gh#796) even without `raw` — `raw` is still required to also short-circuit the data lifecycle. Pre-v0.6.33 (FB-53 §2) `raw` was visual-only and the data lifecycle still ran — wrapping a `.data`-unset native table produced a phantom "No data" overlay. v0.6.33+ matches the documented contract. */
   raw: boolean;
   /** Global search/filter string. Filters visible rows across all columns using case-insensitive substring matching. Resets to page 1 on change. */
   search: string;
@@ -115,11 +115,6 @@ export class UITable extends UIElement {
   /** Allow body-cell content to wrap onto multiple lines. Default is single-line with ellipsis truncation (matches the row convention shared by <select-ui> + <nav-item-ui>); long unbreakable strings clip gracefully rather than rewrapping the row. With [wrap], row height auto-grows to fit wrapped content. For surgical opt-in on a single column, set [data-wrap] on the cell / col-def instead. */
   wrap: boolean;
 
-  addEventListener<K extends keyof HTMLElementEventMap>(
-    type: K,
-    listener: (this: UITable, ev: HTMLElementEventMap[K]) => unknown,
-    options?: boolean | AddEventListenerOptions,
-  ): void;
   addEventListener(type: 'cell-click', listener: (ev: TableCellClickEvent) => unknown, options?: boolean | AddEventListenerOptions): void;
   addEventListener(type: 'filter-change', listener: (ev: TableFilterChangeEvent) => unknown, options?: boolean | AddEventListenerOptions): void;
   addEventListener(type: 'page', listener: (ev: TablePageEvent) => unknown, options?: boolean | AddEventListenerOptions): void;
@@ -129,4 +124,9 @@ export class UITable extends UIElement {
   addEventListener(type: 'row-expand', listener: (ev: TableRowExpandEvent) => unknown, options?: boolean | AddEventListenerOptions): void;
   addEventListener(type: 'select', listener: (ev: TableSelectEvent) => unknown, options?: boolean | AddEventListenerOptions): void;
   addEventListener(type: 'sort', listener: (ev: TableSortEvent) => unknown, options?: boolean | AddEventListenerOptions): void;
+  addEventListener<K extends keyof HTMLElementEventMap>(
+    type: K,
+    listener: (this: UITable, ev: HTMLElementEventMap[K]) => unknown,
+    options?: boolean | AddEventListenerOptions,
+  ): void;
 }

package/components/table/table.yaml

@@ -74,6 +74,10 @@ props:
       surfaces that supply their own chrome (e.g. `<card-ui><section
       bleed>`), or when wrapping a consumer-authored native `<table>`
       for design-token styling without the framework's data semantics.
+      Note: a `<table-ui>` placed directly inside `<card-ui><section bleed>`
+      drops the table's visual chrome automatically (card.css, gh#796) even
+      without `raw` — `raw` is still required to also short-circuit the
+      data lifecycle.
       Pre-v0.6.33 (FB-53 §2) `raw` was visual-only and the data lifecycle
       still ran — wrapping a `.data`-unset native table produced a
       phantom "No data" overlay. v0.6.33+ matches the documented contract.
@@ -107,7 +111,11 @@ props:
       square perimeter otherwise renders a doubled edge (flush bleed) or
       a stray inner box (with content above). Standalone tables keep
       their chrome by default. Theming path without the attribute:
-      set --table-perimeter to transparent per instance.
+      set --table-perimeter to transparent per instance. Note:
+      `<card-ui><section bleed>` already drops a direct-child table-ui's
+      chrome automatically (card.css, gh#796) — `frameless`/`raw` on the
+      instance still applies and is honored, but is no longer required
+      just to avoid the doubled-edge look in that composition.
     type: boolean
     default: false
     reflect: true

package/components/table-toolbar/table-toolbar.d.ts

@@ -37,13 +37,13 @@ export class UITableToolbar extends UIElement {
   /** Toolbar visual variant. `default` renders bare on parent surface; `card` adds the same chrome as a card-ui header. */
   variant: 'default' | 'card';
 
+  addEventListener(type: 'columns-change', listener: (ev: TableToolbarColumnsChangeEvent) => unknown, options?: boolean | AddEventListenerOptions): void;
+  addEventListener(type: 'filter-change', listener: (ev: TableToolbarFilterChangeEvent) => unknown, options?: boolean | AddEventListenerOptions): void;
+  addEventListener(type: 'search', listener: (ev: TableToolbarSearchEvent) => unknown, options?: boolean | AddEventListenerOptions): void;
+  addEventListener(type: 'sort-change', listener: (ev: TableToolbarSortChangeEvent) => unknown, options?: boolean | AddEventListenerOptions): void;
   addEventListener<K extends keyof HTMLElementEventMap>(
     type: K,
     listener: (this: UITableToolbar, ev: HTMLElementEventMap[K]) => unknown,
     options?: boolean | AddEventListenerOptions,
   ): void;
-  addEventListener(type: 'columns-change', listener: (ev: TableToolbarColumnsChangeEvent) => unknown, options?: boolean | AddEventListenerOptions): void;
-  addEventListener(type: 'filter-change', listener: (ev: TableToolbarFilterChangeEvent) => unknown, options?: boolean | AddEventListenerOptions): void;
-  addEventListener(type: 'search', listener: (ev: TableToolbarSearchEvent) => unknown, options?: boolean | AddEventListenerOptions): void;
-  addEventListener(type: 'sort-change', listener: (ev: TableToolbarSortChangeEvent) => unknown, options?: boolean | AddEventListenerOptions): void;
 }

package/components/tabs/tabs.css

@@ -5,10 +5,12 @@
     --tabs-bg:              transparent;
     --tabs-radius:          var(--a-radius-md);
     --tabs-button-height:   var(--a-size);
-    --tabs-button-px:       var(--a-space-2);
     --tabs-font-size:       var(--a-ui-md);
     --tabs-font-family:     var(--a-font-family-ui);
-    --tabs-gap:             var(--a-space-1);
+    /* Strip owns the button-to-button spacing — 4px base gap + one
+       padding unit (8px) folded in, since tab-button carries no
+       horizontal padding of its own (gh#705). */
+    --tabs-gap:             var(--a-space-3);
     --tabs-indicator-color: var(--md-sys-color-primary);
     --tabs-indicator-height: 2px;
     --tabs-fg:              var(--md-sys-color-neutral-on-surface-variant);
@@ -101,6 +103,13 @@
       height var(--tabs-duration) var(--tabs-easing-out);
   }
 
+  /* Vertical: the indicator lives on the inline-start edge (not the bottom),
+     so contents need clearance from the line — the horizontal strip-gap
+     spacing (gh#705) can't provide it on this axis. */
+  :scope[orientation="vertical"] [slot="tab-button"] {
+    padding-inline-start: var(--a-space-3);
+  }
+
   /* Vertical panel area takes remaining space */
   :scope[orientation="vertical"] > tab-ui {
     flex: 1;
@@ -114,7 +123,6 @@
     align-items: center;
     gap: var(--tabs-button-gap);
     height: var(--tabs-button-height);
-    padding-inline: var(--tabs-button-px);
     border: none;
     background: none;
     color: var(--tabs-fg);