@adia-ai/web-components 0.6.34 → 0.6.36

package/components/spinner/{class.js → spinner.class.js}

@@ -50,9 +50,16 @@ export class UISpinner extends UIElement {
     label:   { type: String,  default: 'Loading', reflect: false },
   };
 
-  // No stamped children. The visual is pure CSS (::before / per-variant
-  // peers) on the host. Same shape as the spec calls out for SPEC-003
-  // <visually-hidden-ui> — a CSS-styled wrapper with no internal stamp.
+  // Arc / ring / knight variants are pure ::before paint — no children.
+  // Dots variant stamps three <span data-spinner-dot=N> children in
+  // #syncDots() so each dot can carry an independent animation-delay.
+  // Pre-fix: ::before painted dot1, ::after painted dot3, and a
+  // box-shadow on ::before painted the middle dot. The pseudo-element
+  // approach broke spacing (the box-shadow dot doesn't participate in
+  // flex-gap math; the middle dot can't animate; the outer dots picked
+  // up scale from keyframes but the middle stayed static). Three real
+  // children let flex-gap distribute the row evenly AND give each dot
+  // its own animation phase.
   static template = () => null;
 
   connected() {
@@ -60,10 +67,33 @@ export class UISpinner extends UIElement {
     if (!this.hasAttribute('role')) this.setAttribute('role', 'progressbar');
     if (!this.hasAttribute('aria-busy')) this.setAttribute('aria-busy', 'true');
     this.setAttribute('aria-valuetext', this.label || 'Loading');
+    this.#syncDots();
   }
 
   render() {
     // Keep aria-valuetext in sync if `label` changes after connect.
     this.setAttribute('aria-valuetext', this.label || 'Loading');
+    this.#syncDots();
+  }
+
+  #syncDots() {
+    const isDots = this.variant === 'dots';
+    const existing = this.querySelectorAll(':scope > [data-spinner-dot]');
+    if (isDots) {
+      if (existing.length === 3) return; // already stamped
+      // Wipe any stale dots from a previous variant + stamp fresh.
+      existing.forEach((n) => n.remove());
+      const frag = document.createDocumentFragment();
+      for (let i = 1; i <= 3; i++) {
+        const span = document.createElement('span');
+        span.setAttribute('data-spinner-dot', String(i));
+        span.setAttribute('aria-hidden', 'true');
+        frag.appendChild(span);
+      }
+      this.appendChild(frag);
+    } else if (existing.length) {
+      // Variant changed away from dots — drop the stamped children.
+      existing.forEach((n) => n.remove());
+    }
   }
 }

package/components/spinner/spinner.css

@@ -8,10 +8,23 @@
     --spinner-size-default:           1rem;                       /* icon-ui md */
     --spinner-color-default:          currentColor;
     --spinner-stroke-default:         2px;
-    --spinner-duration-default:       var(--a-duration-slow);
+    /* Rotational cadence — interaction-duration tokens (`--a-duration-*`,
+       120-300 ms) are tuned for hover/focus transitions; a full spinner
+       revolution at 300 ms reads as a frantic blur. Canonical loader
+       cadence is ~0.8 s per revolution (smooth, perceptible motion). */
+    --spinner-duration-default:       0.8s;
     --spinner-track-opacity-default:  0.25;
     --spinner-dot-size-default:       calc(var(--spinner-size, var(--spinner-size-default)) / 4);
     --spinner-dot-gap-default:        calc(var(--spinner-size, var(--spinner-size-default)) / 8);
+    /* Knight-rider variant — horizontal track with a sliding thumb.
+       Track width is a separate scale from the round-spinner --spinner-size
+       (Knight reads as a bar, not a glyph). Track height defaults to the
+       spinner-stroke for visual continuity with arc/ring. Thumb width
+       expressed as a 0-1 ratio of the track so the keyframe math is
+       single-variable. */
+    --spinner-bar-track-width-default:  4rem;
+    --spinner-bar-track-height-default: var(--spinner-stroke, var(--spinner-stroke-default));
+    --spinner-bar-thumb-ratio-default:  0.3;
   }
 
   /* ── Block 2 — BASE ────────────────────────────────────────────── */
@@ -65,20 +78,17 @@
   }
 
   /* ── Variant: DOTS — three bouncing dots ─────────────────────────
-     The dots layout uses inline-flex + three ::before/::after-style
-     children. Since pseudo-elements only give us two, we render dots
-     via three radial-gradient stops on a background animation that
-     translates each stop independently — but a simpler, more robust
-     shape is to overlay three identical dot pseudos via a flexbox
-     container of pseudo + two child pseudos isn't possible without
-     a stamped child. So we use a single ::before that paints all
-     three dots via background gradients + an animation on the
-     `--dot-bounce` custom property (animated via @property).
+     Layout: inline-flex with three real <span data-spinner-dot=N>
+     children stamped by spinner.class.js #syncDots(). flex-gap distributes
+     the row evenly; each child carries its own animation-delay so
+     the bounce reads as a left-to-right wave.
 
-     Pragmatic alternative: render the three dots using ::before +
-     ::after pseudos as the outer two dots, and a tightly-controlled
-     box-shadow on ::before to paint the middle dot. Animate each via
-     keyframes that stagger the bounce timing. */
+     Why three real children (instead of ::before / ::after + a
+     middle dot painted via box-shadow): box-shadow paints the
+     middle dot but does NOT participate in flex-gap, so the box-
+     shadow dot and the right pseudo had asymmetric spacing. The
+     middle dot also couldn't carry its own @keyframes animation
+     (box-shadow can't animate per-stop). Stamped children fix both. */
   :scope[variant="dots"] {
     display: inline-flex;
     align-items: center;
@@ -88,35 +98,61 @@
     gap: var(--spinner-dot-gap, var(--spinner-dot-gap-default));
   }
 
-  :scope[variant="dots"]::before,
-  :scope[variant="dots"]::after {
-    content: "";
-    display: block;
+  :scope[variant="dots"] > [data-spinner-dot] {
     width:  var(--spinner-dot-size, var(--spinner-dot-size-default));
     height: var(--spinner-dot-size, var(--spinner-dot-size-default));
     border-radius: 50%;
     background: currentColor;
     animation: spinner-ui-bounce var(--spinner-duration, var(--spinner-duration-default)) ease-in-out infinite;
   }
-
-  /* Stagger the trailing dot so the row reads as a wave. The middle
-     dot is painted via box-shadow on ::before — same dot diameter, a
-     dot-gap to the right, painted with the same currentColor. The
-     middle dot's animation phase is the average of the two pseudos. */
-  :scope[variant="dots"]::before {
-    box-shadow:
-      calc(var(--spinner-dot-size, var(--spinner-dot-size-default)) + var(--spinner-dot-gap, var(--spinner-dot-gap-default))) 0 0 currentColor;
-    margin-right: calc(var(--spinner-dot-size, var(--spinner-dot-size-default)) + var(--spinner-dot-gap, var(--spinner-dot-gap-default)));
-    animation-delay: 0s;
+  /* Stagger each dot so the row reads as a wave left → right.
+     Three equal slices of one revolution (0, T/3, 2T/3) give the
+     classic three-dot loading rhythm. */
+  :scope[variant="dots"] > [data-spinner-dot="1"] { animation-delay: 0s; }
+  :scope[variant="dots"] > [data-spinner-dot="2"] {
+    animation-delay: calc(var(--spinner-duration, var(--spinner-duration-default)) / 3);
+  }
+  :scope[variant="dots"] > [data-spinner-dot="3"] {
+    animation-delay: calc(var(--spinner-duration, var(--spinner-duration-default)) * 2 / 3);
   }
 
-  :scope[variant="dots"]::after {
-    animation-delay: calc(var(--spinner-duration, var(--spinner-duration-default)) / 3);
+  /* ── Variant: KNIGHT — knight-rider sliding bar ──────────────────
+     Horizontal track with a thumb sliding back-and-forth via
+     `animation-direction: alternate`. Thumb width is a 0–1 ratio of
+     the track so the keyframe math reduces to translateX(((1/ratio) - 1) * 100%)
+     of the THUMB's own width — i.e. travel = (track - thumb) px,
+     expressed in thumb-relative percentages so it scales with any
+     track width without a calc that touches both axes. Default
+     ratio 0.3 → translate end = 233.33% (of thumb width). */
+  :scope[variant="knight"] {
+    display: inline-block;
+    width: var(--spinner-bar-track-width, var(--spinner-bar-track-width-default));
+    height: var(--spinner-bar-track-height, var(--spinner-bar-track-height-default));
+    background: color-mix(
+      in oklch,
+      currentColor calc(var(--spinner-track-opacity, var(--spinner-track-opacity-default)) * 100%),
+      transparent
+    );
+    border-radius: 9999px;
+    position: relative;
+    overflow: hidden;
+  }
+  :scope[variant="knight"]::before {
+    content: "";
+    position: absolute;
+    inset: 0 auto 0 0;       /* top:0; right:auto; bottom:0; left:0 */
+    width: calc(var(--spinner-bar-thumb-ratio, var(--spinner-bar-thumb-ratio-default)) * 100%);
+    background: currentColor;
+    border-radius: inherit;
+    animation: spinner-ui-knight
+      var(--spinner-duration, var(--spinner-duration-default))
+      ease-in-out infinite alternate;
   }
 
   /* ── Paused state — freeze in place ────────────────────────────── */
   :scope[paused]::before,
-  :scope[paused]::after {
+  :scope[paused]::after,
+  :scope[paused] > [data-spinner-dot] {
     animation-play-state: paused;
   }
 
@@ -126,7 +162,8 @@
      JS lifecycle. */
   @media (prefers-reduced-motion: reduce) {
     :scope::before,
-    :scope::after {
+    :scope::after,
+    :scope > [data-spinner-dot] {
       animation: none !important;
     }
     :scope::before {
@@ -145,12 +182,18 @@
       text-align: center;
       color: currentColor;
     }
-    :scope[variant="dots"]::after {
-      display: none;
-    }
+    /* Dots variant — hide all three stamped dots and let the host's
+       ::before paint the ellipsis fallback. */
+    :scope[variant="dots"] > [data-spinner-dot] { display: none; }
     :scope[variant="dots"] {
       width: var(--spinner-size, var(--spinner-size-default));   /* shrink back to a square in reduced mode */
     }
+    /* Knight-rider — hide the sliding thumb; the host's ::before
+       above repaints as the ellipsis fallback. */
+    :scope[variant="knight"] {
+      width: var(--spinner-size, var(--spinner-size-default));
+      background: transparent;
+    }
   }
 
   /* ── Keyframes ─────────────────────────────────────────────────── */
@@ -162,4 +205,17 @@
     0%, 80%, 100% { transform: scale(0.6); opacity: 0.6; }
     40%           { transform: scale(1);   opacity: 1; }
   }
+
+  /* Knight-rider — thumb slides from left edge to (track - thumb)
+     and bounces back via `animation-direction: alternate`. The
+     translate distance is expressed in thumb-relative percentages:
+     translateX(((1 / ratio) - 1) * 100%) of the thumb's own width
+     equals (track - thumb) px. At default ratio 0.3 this resolves
+     to translateX(233.33%). */
+  @keyframes spinner-ui-knight {
+    from { transform: translateX(0); }
+    to   { transform: translateX(
+      calc((1 / var(--spinner-bar-thumb-ratio, var(--spinner-bar-thumb-ratio-default)) - 1) * 100%)
+    ); }
+  }
 }

package/components/spinner/spinner.d.ts

@@ -21,6 +21,6 @@ export class UISpinner extends UIElement {
   size: 'sm' | 'md' | 'lg';
   /** Color tone — `current` inherits parent text color (matches button label), `accent` uses brand accent, `subtle` is muted, `inverse` flips for on-accent surfaces. */
   tone: 'current' | 'accent' | 'subtle' | 'inverse';
-  /** Visual flavor — arc (rotating quarter-circle), ring (full ring with one colored segment), dots (three bouncing dots). */
-  variant: 'arc' | 'ring' | 'dots';
+  /** Visual flavor — `arc` (rotating quarter-circle, the default glyph spinner), `ring` (full ring with one colored segment rotating around it), `dots` (three bouncing dots — animated in a left-to-right wave), `knight` (horizontal "knight-rider" bar — a sliding thumb that bounces back-and-forth across a track; widest variant, reads as a determinate-looking bar but is indeterminate by intent). */
+  variant: 'arc' | 'ring' | 'dots' | 'knight';
 }

package/components/spinner/spinner.js

@@ -10,7 +10,7 @@
  */
 
 import { defineIfFree } from '../../core/register.js';
-import { UISpinner } from './class.js';
+import { UISpinner } from './spinner.class.js';
 
 defineIfFree('spinner-ui', UISpinner);
 

package/components/spinner/spinner.test.js

@@ -182,16 +182,20 @@ describe('spinner-ui — CSS source contract', () => {
     }
   });
 
-  it('size="sm" / "md" / "lg" all override --spinner-size', () => {
-    expect(SPINNER_CSS).toMatch(/:scope\[size="sm"\][^}]*--spinner-size:\s*0\.875rem/);
-    expect(SPINNER_CSS).toMatch(/:scope\[size="md"\][^}]*--spinner-size:\s*1rem/);
-    expect(SPINNER_CSS).toMatch(/:scope\[size="lg"\][^}]*--spinner-size:\s*1\.25rem/);
+  it('size="sm" / "md" / "lg" all override --spinner-size-default', () => {
+    // The two-token convention (--{prop}-default for defaults +
+    // var(--{prop}, var(--{prop}-default)) at use sites) means size
+    // variants flip the -default token; consumer overrides write to
+    // the bare --{prop} which wins via the var() fallback chain.
+    expect(SPINNER_CSS).toMatch(/:scope\[size="sm"\][^}]*--spinner-size-default:\s*0\.875rem/);
+    expect(SPINNER_CSS).toMatch(/:scope\[size="md"\][^}]*--spinner-size-default:\s*1rem/);
+    expect(SPINNER_CSS).toMatch(/:scope\[size="lg"\][^}]*--spinner-size-default:\s*1\.25rem/);
   });
 
-  it('tone="subtle" / "accent" / "inverse" override --spinner-color via semantic tokens', () => {
-    expect(SPINNER_CSS).toMatch(/:scope\[tone="subtle"\][^}]*--spinner-color:\s*var\(--a-fg-subtle\)/);
-    expect(SPINNER_CSS).toMatch(/:scope\[tone="accent"\][^}]*--spinner-color:\s*var\(--a-accent-strong\)/);
-    expect(SPINNER_CSS).toMatch(/:scope\[tone="inverse"\][^}]*--spinner-color:\s*var\(--a-chrome-light\)/);
+  it('tone="subtle" / "accent" / "inverse" override --spinner-color-default via semantic tokens', () => {
+    expect(SPINNER_CSS).toMatch(/:scope\[tone="subtle"\][^}]*--spinner-color-default:\s*var\(--a-fg-subtle\)/);
+    expect(SPINNER_CSS).toMatch(/:scope\[tone="accent"\][^}]*--spinner-color-default:\s*var\(--a-accent-strong\)/);
+    expect(SPINNER_CSS).toMatch(/:scope\[tone="inverse"\][^}]*--spinner-color-default:\s*var\(--a-chrome-light\)/);
   });
 
   it('arc variant uses a rotating quarter-circle border on ::before', () => {
@@ -206,12 +210,46 @@ describe('spinner-ui — CSS source contract', () => {
     expect(SPINNER_CSS).toMatch(/border-top-color:\s*currentColor/);
   });
 
-  it('dots variant uses ::before + ::after with bounce keyframes', () => {
-    expect(SPINNER_CSS).toMatch(/:scope\[variant="dots"\]::before/);
-    expect(SPINNER_CSS).toMatch(/:scope\[variant="dots"\]::after/);
+  it('dots variant uses 3 stamped [data-spinner-dot] children with bounce keyframes', () => {
+    // Pre-fix: ::before painted dot1 + a box-shadow middle dot, ::after
+    // painted dot3. Spacing was uneven (box-shadow doesn't participate
+    // in flex-gap math) and the middle dot couldn't animate. Post-fix
+    // (spinner.class.js #syncDots): three real <span data-spinner-dot=N>
+    // children stamped on connect; flex-gap distributes the row evenly
+    // and each child carries an independent animation-delay so the
+    // bounce reads as a left-to-right wave.
+    expect(SPINNER_CSS).toMatch(/:scope\[variant="dots"\]\s*>\s*\[data-spinner-dot\]/);
+    expect(SPINNER_CSS).toMatch(/:scope\[variant="dots"\]\s*>\s*\[data-spinner-dot="1"\]/);
+    expect(SPINNER_CSS).toMatch(/:scope\[variant="dots"\]\s*>\s*\[data-spinner-dot="2"\]/);
+    expect(SPINNER_CSS).toMatch(/:scope\[variant="dots"\]\s*>\s*\[data-spinner-dot="3"\]/);
     expect(SPINNER_CSS).toMatch(/animation:\s*spinner-ui-bounce/);
   });
 
+  it('knight variant uses a sliding ::before thumb with knight keyframes', () => {
+    expect(SPINNER_CSS).toMatch(/:scope\[variant="knight"\]\s*\{/);
+    expect(SPINNER_CSS).toMatch(/:scope\[variant="knight"\]::before/);
+    expect(SPINNER_CSS).toMatch(/animation:\s*spinner-ui-knight/);
+    // Keyframe math: translateX((1/ratio - 1) * 100%) sweeps the thumb
+    // from x=0 to x=(track - thumb) px, expressed in thumb-relative %.
+    expect(SPINNER_CSS).toMatch(/@keyframes\s+spinner-ui-knight/);
+  });
+
+  it('knight stamps NO data-spinner-dot children (pseudo-element paint only)', async () => {
+    const k = mount('<spinner-ui variant="knight"></spinner-ui>');
+    await tick();
+    expect(k.querySelectorAll(':scope > [data-spinner-dot]').length).toBe(0);
+  });
+
+  it('dots stamps exactly 3 data-spinner-dot children on connect', async () => {
+    const d = mount('<spinner-ui variant="dots"></spinner-ui>');
+    await tick();
+    const dots = d.querySelectorAll(':scope > [data-spinner-dot]');
+    expect(dots.length).toBe(3);
+    expect(dots[0].getAttribute('data-spinner-dot')).toBe('1');
+    expect(dots[1].getAttribute('data-spinner-dot')).toBe('2');
+    expect(dots[2].getAttribute('data-spinner-dot')).toBe('3');
+  });
+
   it('paused state freezes the animation via animation-play-state', () => {
     expect(SPINNER_CSS).toMatch(/:scope\[paused\][^}]*animation-play-state:\s*paused/);
   });

package/components/spinner/spinner.yaml

@@ -26,13 +26,21 @@ props:
       - lg
     reflect: true
   variant:
-    description: Visual flavor — arc (rotating quarter-circle), ring (full ring with one colored segment), dots (three bouncing dots).
+    description: >-
+      Visual flavor —
+      `arc` (rotating quarter-circle, the default glyph spinner),
+      `ring` (full ring with one colored segment rotating around it),
+      `dots` (three bouncing dots — animated in a left-to-right wave),
+      `knight` (horizontal "knight-rider" bar — a sliding thumb that
+      bounces back-and-forth across a track; widest variant, reads as
+      a determinate-looking bar but is indeterminate by intent).
     type: string
     default: arc
     enum:
       - arc
       - ring
       - dots
+      - knight
     reflect: true
   tone:
     description: Color tone — `current` inherits parent text color (matches button label), `accent` uses brand accent, `subtle` is muted, `inverse` flips for on-accent surfaces.

package/components/stack/stack.js

@@ -10,7 +10,7 @@
  */
 
 import { defineIfFree } from '../../core/register.js';
-import { UIStack } from './class.js';
+import { UIStack } from './stack.class.js';
 
 defineIfFree('stack-ui', UIStack);
 

package/components/step-progress/step-progress.js

@@ -10,7 +10,7 @@
  */
 
 import { defineIfFree } from '../../core/register.js';
-import { UIStepProgress } from './class.js';
+import { UIStepProgress } from './step-progress.class.js';
 
 defineIfFree('step-progress-ui', UIStepProgress);
 

package/components/stepper/stepper-item.yaml

@@ -1,7 +1,7 @@
 # Edit this file; run `npm run build:components` to regenerate a2ui.json.
 #
 # §228 (v0.5.9): authored to close the §229 baseline class-export-undeclared
-# drift for UIStepperItem. Ships as a sibling class in stepper/class.js
+# drift for UIStepperItem. Ships as a sibling class in stepper/stepper.class.js
 # + is registered alongside UIStepper.
 
 # Child component of <stepper-ui>. Surface only inside that parent.

package/components/stepper/stepper.js

@@ -10,7 +10,7 @@
  */
 
 import { defineIfFree } from '../../core/register.js';
-import { UIStepper, UIStepperItem } from './class.js';
+import { UIStepper, UIStepperItem } from './stepper.class.js';
 
 defineIfFree('stepper-ui', UIStepper);
 defineIfFree('stepper-item-ui', UIStepperItem);

package/components/stream/stream.js

@@ -10,7 +10,7 @@
  */
 
 import { defineIfFree } from '../../core/register.js';
-import { UIStream } from './class.js';
+import { UIStream } from './stream.class.js';
 
 defineIfFree('stream-ui', UIStream);
 

package/components/swatch/swatch.js

@@ -10,7 +10,7 @@
  */
 
 import { defineIfFree } from '../../core/register.js';
-import { UISwatch } from './class.js';
+import { UISwatch } from './swatch.class.js';
 
 defineIfFree('swatch-ui', UISwatch);
 

package/components/swiper/swiper.js

@@ -10,7 +10,7 @@
  */
 
 import { defineIfFree } from '../../core/register.js';
-import { UISwiper } from './class.js';
+import { UISwiper } from './swiper.class.js';
 
 defineIfFree('swiper-ui', UISwiper);
 

package/components/switch/switch.js

@@ -10,7 +10,7 @@
  */
 
 import { defineIfFree } from '../../core/register.js';
-import { UISwitch } from './class.js';
+import { UISwitch } from './switch.class.js';
 
 defineIfFree('switch-ui', UISwitch);
 

package/components/table/table.css

@@ -433,7 +433,7 @@
 
   /* ═══════ Loading (skeleton rows) ═══════
      Skeleton rows replace real rows while [loading] is set on the host
-     (see class.js #renderOverlays). Each row is a [data-skeleton-row]
+     (see table.class.js #renderOverlays). Each row is a [data-skeleton-row]
      containing <skeleton-ui> cells. Inherit body-row layout so column
      widths track the header, then suppress hover/striping/click states
      (no real data to interact with). */

package/components/table/table.js

@@ -10,7 +10,7 @@
  */
 
 import { defineIfFree } from '../../core/register.js';
-import { UITable } from './class.js';
+import { UITable } from './table.class.js';
 
 defineIfFree('table-ui', UITable);
 

package/components/table-toolbar/{class.js → table-toolbar.class.js}

@@ -124,7 +124,7 @@ export class UITableToolbar extends UIElement {
     variant:     { type: String,  default: 'default',  reflect: true },
   };
 
-  // §205 (v0.5.7): dynamic sort-indicator icons (class.js:576 — nested ternary
+  // §205 (v0.5.7): dynamic sort-indicator icons (table-toolbar.class.js:576 — nested ternary
   // `dir === 'asc' ? 'arrow-up' : dir === 'desc' ? 'arrow-down' : 'caret-up-down'`).
   // Per FEEDBACK-16 §1 + §209 slot-11 ternary-walker discovery.
   static requiredIcons = ['arrow-up', 'arrow-down', 'caret-up-down'];
@@ -290,6 +290,7 @@ export class UITableToolbar extends UIElement {
     // name renders as literal text before the icon registry resolves.
     const search = document.createElement('search-ui');
     search.setAttribute('data-search', '');
+    search.setAttribute('size', 'sm');  // match toolbar buttons + badge + filter chips
     search.setAttribute('placeholder', this.placeholder);
     search.setAttribute('debounce', String(SEARCH_DEBOUNCE));
     search.addEventListener('search', this.#onSearch);

package/components/table-toolbar/table-toolbar.js

@@ -10,7 +10,7 @@
  */
 
 import { defineIfFree } from '../../core/register.js';
-import { UITableToolbar } from './class.js';
+import { UITableToolbar } from './table-toolbar.class.js';
 
 defineIfFree('table-toolbar-ui', UITableToolbar);
 

package/components/tabs/tab.yaml

@@ -1,9 +1,9 @@
 # Edit this file; run `npm run build:components` to regenerate a2ui.json.
 #
 # §176 (v0.5.5): authored to close the §175 baseline-orphan class. The
-# component already existed as a sibling class in the parent's class.js
+# component already existed as a sibling class in the parent's tabs.class.js
 # + was registered alongside the parent (e.g. UIList + UIListItem both
-# from list/class.js). The catalog just lacked its own entry. With the
+# from list/list.class.js). The catalog just lacked its own entry. With the
 # §172 sibling-yaml scanner, this file gets picked up next to the parent
 # yaml.
 

package/components/tabs/tabs.js

@@ -10,7 +10,7 @@
  */
 
 import { defineIfFree } from '../../core/register.js';
-import { UITabs } from './class.js';
+import { UITabs } from './tabs.class.js';
 
 defineIfFree('tabs-ui', UITabs);
 

package/components/tag/tag.a2ui.json

@@ -44,6 +44,15 @@
       "description": "Tag label. Renderer routes this to the `text` attribute, rendered via CSS attr(text) on ::after.",
       "$ref": "common_types.json#/$defs/DynamicString"
     },
+    "tone": {
+      "description": "Fill style — orthogonal to [variant]. Default (`solid`) for family\nvariants is a saturated bg with on-strong (near-white) text — the\nchip IS the state. Opt-out via `tone=\"muted\"` for a tinted bg with\nscheme-paired text (matches <badge-ui>'s default look) when the\nchip is metadata in a dense list rather than a status stamp. The\n`default` variant stays quiet chrome regardless of tone unless\n`tone=\"solid\"` is set explicitly (high-contrast neutral inverse).\n",
+      "type": "string",
+      "enum": [
+        "solid",
+        "muted"
+      ],
+      "default": "solid"
+    },
     "variant": {
       "description": "Semantic variant — `default | info | success | warning | danger`.",
       "type": "string",

package/components/tag/{class.js → tag.class.js}

@@ -42,13 +42,20 @@ export class UITag extends UIElement {
     // `tag.textContent = …` working natively; the prop declaration
     // broke that path. v0.5.x §327.
     variant:   { type: String,  default: 'default', reflect: true },
+    // `tone` is read-only via attribute selectors (CSS), not by the
+    // class — declared in yaml for documentation + a2ui hint but NOT
+    // in `static properties` so the runtime doesn't reflect an
+    // ever-present `tone="solid"` attribute onto every <tag-ui>
+    // (which would defeat the variant-default cascade and force CSS
+    // selectors to compete with reflected defaults). Author sets
+    // `[tone]` directly when opting in.
     size:      { type: String,  default: 'md', reflect: true },
     removable: { type: Boolean, default: false, reflect: true },
     disabled:  { type: Boolean, default: false, reflect: true },
   };
 
   static parts = {
-    dismiss: '<button slot="dismiss" type="button" aria-label="Remove"><icon-ui name="x"></icon-ui></button>',
+    dismiss: '<button slot="dismiss" type="button" aria-label="Remove"><icon-ui name="x" weight="bold"></icon-ui></button>',
   };
 
   static template = () => null;