@adia-ai/web-components 0.6.35 → 0.6.36

package/CHANGELOG.md

@@ -1,5 +1,34 @@
 # Changelog — @adia-ai/web-components
 
+## [0.6.36] — 2026-05-24
+
+### Fixed — `<tag-ui>` dismiss X + slotted icons now inherit the variant text color
+
+- **Visible after the solid-default flip**: the dismiss X (`[slot="dismiss"]`) was hardcoded to `--a-fg-muted` (a neutral grey) regardless of the host's variant, so the X disappeared against saturated solid pills — a near-invisible grey X on the Info/Success/Warning/Error bgs. Same trap on any slotted leading icon: tag had no `currentColor` inheritance rule, so `<icon-ui>` children rendered in their own foreground color rather than the variant's.
+- **Fix**: dismiss `color` token now defaults to `currentColor` at `opacity: 0.7` (quieter than the label, but tracks every variant — near-white X on saturated bg, dark X on warning amber, fg-muted X on quiet chrome). Hover restores `opacity: 1` and overlays a `color-mix(in oklch, currentColor 15%, transparent)` bg highlight — same color family as the host, not a stark neutral wash. NEW `:scope > icon-ui { color: currentColor; flex-shrink: 0 }` rule mirrors `<badge-ui>`'s convention so leading-icon legends/status chips read as a single color-coded unit.
+- Two new component tokens for the dismiss opacity (`--tag-dismiss-opacity`, `--tag-dismiss-opacity-hover`) replace the prior color-swap tokens (`--tag-dismiss-fg-hover` removed — opacity-driven hover instead). Files: `components/tag/tag.css`.
+
+### Fixed — `<tag-ui variant="warning">` solid pill: bright amber bg instead of muddy mid-brown
+
+- **Visible after the solid-default flip**: the canonical `--a-warning-bg` + `--a-warning-fg` pair collapses for warning. `--a-warning-fg` resolves to `--a-warning-10-shade` (a dark brown — per `semantics.css:309` "warning is light-colored — text on warning fills should be dark"), but `--a-warning-bg` (= `--a-warning-strong` = `-50`) is a mid-tone amber. Dark text on mid-tone amber gives the muddy brown-on-brown look the user reported. The other family variants (info/success/danger) all have `-text-strong = -05-tint` (near-white) which contrasts cleanly against their `-50` saturated bg, so they don't hit this trap.
+- **Fix at the tag layer**: `:scope[variant="warning"]` now uses the literal `--a-warning-20-tint` step (bright caution-tape amber, scheme-independent) as bg + keeps `--a-warning-fg` as dark text. Restores the bright-amber-with-dark-text shape `semantics.css` intends. Other family variants unchanged. Regression guard added that hard-fails any revert to `--a-warning-bg` for the warning solid bg.
+- **Token-system follow-up flagged (not shipped)**: this is a symptom of `--a-warning-bg` pointing at the wrong step. Same muddy contrast likely surfaces wherever `--a-warning-bg` + `--a-warning-fg` is paired (`button-ui variant="warning"`, `chart-ui` warning bars, `rating-ui` filled fg, `progress-row variant="warning"`). A token-side fix that redirects `--a-warning-bg` to `--a-warning-20-tint` would resolve all consumers in one stroke but needs a visual sweep across those components first. Files: `components/tag/tag.{css,test.js}`.
+
+### Changed — `<tag-ui>` family variants default to **solid** fill (BREAKING-visual)
+
+- **`<tag-ui variant="info|success|warning|danger">` now renders as a saturated bg + on-strong (near-white) text** — the chip IS the state, not a tinted metadata label. Aligns the chip vocabulary so consumers can read tag-ui as a status pill at a glance. Previously: muted tinted bg with `--a-{family}-bg` (saturated solid) text — an off-canonical pair that read as "passive metadata with bold color" and diverged from `<badge-ui>`'s canonical muted pair.
+- **Opt-out**: NEW `[tone="muted"]` attribute drops a family variant back to the canonical muted pair `--a-{family}-muted` + `--a-{family}-text` (scheme-flipping text — the same pair `<badge-ui>` uses as its default). Use on metadata chips in dense lists where the saturated default would compete for attention.
+- **The `default` variant (no family) is unchanged** — it stays as quiet `--a-bg-muted` + `--a-fg` chrome. Opt in to a high-contrast inverse stamp via `<tag-ui tone="solid">` (no variant); resolves to `--a-fg` bg + `--a-bg` fg.
+- **Author migration**: existing `<tag-ui variant="info|success|warning|danger">` markup auto-flips to the new saturated default — every existing tag in the codebase becomes louder. If any specific surface needs the prior look, append `tone="muted"`. 75 occurrences across 30 substrate/app/playground files identified; review per surface.
+- Source-grep regression guards added: 4 family variants verified to use the solid pair as default; 4 `[tone="muted"][variant=…]` rules verified to use the canonical muted pair; `[variant="default"]` verified unchanged; `[tone="solid"]` neutral inverse verified. Files: `components/tag/tag.{css,yaml,test.js,examples.html,a2ui.json}` + regenerated corpus catalog.
+
+### Fixed — placeholder pseudo no longer pushes the caret to its right after type-then-delete
+
+- **Bug report**: with `<input-ui placeholder="Select country…">`, typing text then deleting it left the caret visually at the END of the placeholder text instead of at position 0. Same trap on `<textarea-ui>`, `<combobox-ui>`, and `<tags-input-ui>`. Root cause: the empty-state placeholder is implemented via `[data-empty]::before { content: attr(data-placeholder); }`, rendered as an **inline** pseudo box. When the contenteditable is empty, the caret IS at offset 0 of the empty text node — but the in-flow `::before` pseudo precedes the text content, occupying inline space, so the caret renders to the right of the pseudo's box. (Only happens after type-then-delete because that path leaves the contenteditable focused, making the caret visible at its true position-0 location.)
+- **Fix**: pseudo is now `position: absolute; inset: 0; padding: inherit` — fills the host's content-box without occupying inline-flow space, so the caret renders at the actual content-start where it belongs. Host elements gain `position: relative` as the positioning anchor. For `<tags-input-ui>` + `<combobox-ui>` the pseudo also uses `display: flex; align-items: center` so the placeholder text vertically aligns with the host's flex-centered line-box.
+- Regression guards added to `input.test.js` — three source-grep assertions (`:scope` declares `position: relative`, pseudo declares `position: absolute`, pseudo carries `inset: 0` + `padding: inherit`) that hard-fail if the in-flow shape ever re-appears.
+- Files: `components/input/input.{css,test.js}`, `components/textarea/textarea.css`, `components/tags-input/tags-input.css`, `components/combobox/combobox.css`.
+
 ## [0.6.35] — 2026-05-24
 
 ### Fixed — `<popover-ui>` + `<menu-ui>` yaml `slots:` blocks declare the canonical `trigger` / `content` vocabulary (FB-62)

package/components/combobox/combobox.css

@@ -130,11 +130,23 @@
     line-height: 1.4;
     white-space: nowrap;
     overflow: hidden;
+    /* Positioning context for the [data-empty]::before placeholder pseudo
+       (kept out of inline flow so the caret renders at content-start). */
+    position: relative;
   }
+  /* Empty-state placeholder. Absolutely positioned (NOT inline) so an
+     in-flow pseudo box doesn't push the caret-at-position-0 to the right
+     of the placeholder text after type-then-delete. Same pattern
+     input-ui + textarea-ui + tags-input-ui use. */
   [data-input][data-empty]::before {
     content: attr(data-placeholder);
     color: var(--combobox-placeholder-fg, var(--combobox-placeholder-fg-default));
     pointer-events: none;
+    position: absolute;
+    inset: 0;
+    padding: inherit;
+    display: flex;
+    align-items: center;
   }
 
   [data-clear] {

package/components/date-range-picker/date-range-picker.class.js

@@ -485,7 +485,7 @@ export class UIDateRangePicker extends UIFormElement {
           // Matches select-ui + calendar-picker-ui's anchorPopover pattern.
           this.#anchorCleanup?.();
           this.#anchorCleanup = anchorPopover(this.#triggerRef, this.#popoverRef, {
-            placement: this.getAttribute('placement') || 'bottom-start',
+            placement: this.getAttribute('placement') || 'bottom',
             gap: 4,
           });
           document.addEventListener('pointerdown', this.#onOutside);

package/components/date-range-picker/date-range-picker.css

@@ -62,11 +62,14 @@
   }
 
   /* ── Block 2 — BASE ── */
+  /* Host is a transparent inline wrapper — trigger button-ui paints its
+     own surface. Mirrors the datetime-picker decision (2026-05-24): a host
+     background paint creates an off-axis rectangle inside field-ui because
+     the field-ui's value-cell expands beyond the inline-block host. */
   :scope {
     box-sizing: border-box;
     position: relative;
     display: inline-block;
-    background: var(--date-range-picker-bg, var(--date-range-picker-bg-default));
     color: var(--date-range-picker-fg, var(--date-range-picker-fg-default));
     font-size: var(--a-ui-size);
   }

package/components/datetime-picker/datetime-picker.css

@@ -38,11 +38,17 @@
   }
 
   /* ── Block 2 — BASE ── */
+  /* Host is a transparent inline wrapper. Painting `background` on the host
+     used to create an off-axis rectangle behind the trigger when the host
+     sat inside a field-ui (the field-ui's value-cell expanded but the
+     inline-block host only sized to its child). Trigger button-ui paints
+     its own surface — host stays transparent.
+     2026-05-24 QA: "odd background colors and block element container for
+     inline trigger" — consumer report on /site/components/datetime-picker. */
   :scope {
     box-sizing: border-box;
     position: relative;
     display: inline-block;
-    background: var(--datetime-picker-bg, var(--datetime-picker-bg-default));
     color: var(--datetime-picker-fg, var(--datetime-picker-fg-default));
     font-size: var(--a-ui-size);
   }

package/components/input/input.css

@@ -121,6 +121,10 @@ input-ui:not([disabled]) [slot="field"]:hover [slot="suffix"] {
     outline: none;
     white-space: nowrap;
     overflow: hidden;
+    /* Positioning context for the [data-empty]::before placeholder
+       pseudo, which is taken out of inline flow so the caret renders
+       at the actual content-start (not after the pseudo box). */
+    position: relative;
   }
 
   /* Text (native input — password only) */
@@ -138,11 +142,21 @@ input-ui:not([disabled]) [slot="field"]:hover [slot="suffix"] {
     color: var(--input-placeholder-fg, var(--input-placeholder-fg-default));
   }
 
-  /* Placeholder (contenteditable only) */
+  /* Placeholder (contenteditable only).
+     Out-of-flow positioning is load-bearing — an in-flow ::before with
+     `content: attr(...)` puts the pseudo box INLINE before the empty
+     text node, which means the caret-at-position-0 visually renders to
+     the RIGHT of the placeholder text (after the user types and deletes).
+     `position: absolute; inset: 0; padding: inherit` makes the pseudo
+     fill the host's content-box without occupying any inline-flow space,
+     so the caret renders at the actual content-start where it belongs. */
   span[slot="text"][data-empty]::before {
     content: attr(data-placeholder);
     color: var(--input-placeholder-fg, var(--input-placeholder-fg-default));
     pointer-events: none;
+    position: absolute;
+    inset: 0;
+    padding: inherit;
   }
 
   /* ── Number mode (type="number") ──

package/components/input/input.test.js

@@ -10,9 +10,15 @@
  */
 
 import { describe, it, expect, beforeEach } from 'vitest';
+import { readFileSync } from 'node:fs';
+import { fileURLToPath } from 'node:url';
+import { dirname, resolve } from 'node:path';
 import '../../core/element.js';
 import './input.js';
 
+const __dirname = dirname(fileURLToPath(import.meta.url));
+const INPUT_CSS = readFileSync(resolve(__dirname, 'input.css'), 'utf8');
+
 const tick = () => new Promise((r) => queueMicrotask(r));
 
 function mount(html) {
@@ -220,3 +226,37 @@ describe('input-ui — §220 (v0.5.9) throttle parity', () => {
     expect(events).toEqual([]);
   });
 });
+
+// ── Placeholder caret-position regression guard ─────────────────────
+//
+// Per the v0.6.35 bug report: with the `::before { content: attr(data-placeholder) }`
+// pseudo rendered in inline flow, typing-then-deleting left the caret
+// visually at the END of the placeholder text (not at position 0) because
+// the in-flow pseudo box pushed the caret rendering position to its right.
+// Fix: pseudo is `position: absolute` so it doesn't occupy inline-flow
+// space; the host carries `position: relative` as its anchor.
+// These tests assert the CSS-source contract that prevents accidental
+// revert to the in-flow pseudo shape.
+
+describe('input-ui — CSS source contract: placeholder pseudo is out of flow', () => {
+  it('host [slot="text"] declares position: relative (pseudo anchor)', () => {
+    expect(INPUT_CSS).toMatch(
+      /\[slot="text"\]\s*\{[^}]*position:\s*relative/s
+    );
+  });
+
+  it('[data-empty]::before is position: absolute (not inline-flow)', () => {
+    expect(INPUT_CSS).toMatch(
+      /span\[slot="text"\]\[data-empty\]::before\s*\{[^}]*position:\s*absolute/s
+    );
+  });
+
+  it('[data-empty]::before fills the host content-box (inset: 0 + padding: inherit)', () => {
+    expect(INPUT_CSS).toMatch(
+      /span\[slot="text"\]\[data-empty\]::before\s*\{[^}]*inset:\s*0/s
+    );
+    expect(INPUT_CSS).toMatch(
+      /span\[slot="text"\]\[data-empty\]::before\s*\{[^}]*padding:\s*inherit/s
+    );
+  });
+});

package/components/search/search.class.js

@@ -40,12 +40,14 @@ export class UISearch extends UIFormElement {
     this.setAttribute('role', 'search');
 
     if (!this.querySelector('input-ui')) {
+      const size = this.getAttribute('size');
       this.innerHTML = `<input-ui
         type="search"
         prefix="magnifying-glass"
         suffix="x-circle"
         placeholder="${this.placeholder}"
         ${this.disabled ? 'disabled' : ''}
+        ${size ? `size="${size}"` : ''}
       ></input-ui>`;
     }
 

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

@@ -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/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/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;

package/components/tag/tag.css

@@ -27,11 +27,21 @@ tag-ui[removable]:not([disabled]):hover {
     --tag-duration-default:     var(--a-duration-fast);
     --tag-easing-default:       var(--a-easing);
 
-    /* ── Dismiss ── */
+    /* ── Dismiss ──
+       Rest = inherit the host's text color at reduced opacity (so the X
+       reads as quieter chrome than the label, but tracks every variant
+       — info/success/danger get a near-white X on saturated bg; warning
+       gets a dark-brown X on bright amber; default gets a fg-muted X on
+       quiet chrome). Hover restores full opacity + drops a translucent
+       overlay in the same color family for the affordance.
+       Pre-v0.6.36 used `--a-fg-muted` / `--a-fg` directly, which gave
+       a neutral-grey X on saturated solid pills — the X disappeared
+       against the variant bg. */
     --tag-dismiss-radius-default: var(--a-radius-full);
-    --tag-dismiss-fg-default:   var(--a-fg-muted);
-    --tag-dismiss-fg-hover-default: var(--a-fg);
-    --tag-dismiss-bg-hover-default: var(--a-bg-muted);
+    --tag-dismiss-fg-default:        currentColor;
+    --tag-dismiss-opacity-default:        0.85;
+    --tag-dismiss-opacity-hover-default:  1;
+    --tag-dismiss-bg-hover-default:  color-mix(in oklch, currentColor 18%, transparent);
     text-align: start;  /* §text-align-reset — blocks inheritance from centered ancestors */
 }
 
@@ -64,37 +74,81 @@ tag-ui[removable]:not([disabled]):hover {
     content: attr(text);
   }
 
-  /* ── Variants ── */
+  /* ── Variants ──
+     Default tone is `solid` for the four family variants:
+     `--a-{family}-bg` (saturated surface) + `--a-{family}-fg` (on-strong
+     text, near-white in both schemes by design). Reads as a status pill
+     where the chip IS the state. Opt out per-tag via [tone="muted"] for
+     metadata-chip surfaces in dense lists. */
   :scope[variant="info"] {
-    --tag-bg-default: var(--a-info-muted);
-    --tag-fg-default: var(--a-info-bg);
+    --tag-bg-default: var(--a-info-bg);
+    --tag-fg-default: var(--a-info-fg);
   }
 
   :scope[variant="success"] {
-    --tag-bg-default: var(--a-success-muted);
-    --tag-fg-default: var(--a-success-bg);
+    --tag-bg-default: var(--a-success-bg);
+    --tag-fg-default: var(--a-success-fg);
   }
 
+  /* `--a-warning-bg` (= --a-warning-strong / -50) is too dark to read
+     against `--a-warning-fg` (= -text-strong / -10-shade), giving a
+     muddy brown-on-brown chip. Per the semantics.css comment "warning
+     is light-colored — text on warning fills should be dark", the
+     intent is bright-amber-bg + dark-text. The literal `-20-tint`
+     step is bright in BOTH schemes (independent of light-dark swap),
+     so warning solid keeps the same caution-tape look across modes.
+     The other family variants stay on `-bg` + `-fg` because their
+     -text-strong is `-05-tint` (near-white) which contrasts fine
+     against their saturated `-strong` bg. */
   :scope[variant="warning"] {
-    --tag-bg-default: var(--a-warning-muted);
-    --tag-fg-default: var(--a-warning-bg);
+    --tag-bg-default: var(--a-warning-20-tint);
+    --tag-fg-default: var(--a-warning-fg);
   }
 
   :scope[variant="danger"] {
-    --tag-bg-default: var(--a-danger-muted);
-    --tag-fg-default: var(--a-danger-bg);
+    --tag-bg-default: var(--a-danger-bg);
+    --tag-fg-default: var(--a-danger-fg);
   }
 
-  /* `default` is a semantic alias of the base — same tokens as the
-     unstyled `:scope`, declared explicitly so the yaml enum and the
-     CSS contract agree. Most consumers omit `variant` and inherit the
-     base; the explicit selector lets `<tag-ui variant="default">`
-     render identically without falling through to base. */
+  /* `default` (no family) stays as quiet chrome — a stark fg/bg-inverse
+     would be too loud for the no-variant case. Opt in to the inverse
+     stamp via `[tone="solid"]` when you want a high-contrast neutral pill. */
   :scope[variant="default"] {
     --tag-bg-default: var(--a-bg-muted);
     --tag-fg-default: var(--a-fg);
   }
 
+  /* ── Tone modifier — orthogonal to [variant] ──
+     `[tone="muted"]` opts each family variant OUT of the solid default
+     into the canonical muted pair: `--a-{family}-muted` (tinted surface)
+     + `--a-{family}-text` (scheme-flipping text). Same shape <badge-ui>
+     uses as its default. Use on metadata chips in dense lists where the
+     saturated default would compete for attention. */
+  :scope[tone="muted"][variant="info"] {
+    --tag-bg-default: var(--a-info-muted);
+    --tag-fg-default: var(--a-info-text);
+  }
+  :scope[tone="muted"][variant="success"] {
+    --tag-bg-default: var(--a-success-muted);
+    --tag-fg-default: var(--a-success-text);
+  }
+  :scope[tone="muted"][variant="warning"] {
+    --tag-bg-default: var(--a-warning-muted);
+    --tag-fg-default: var(--a-warning-text);
+  }
+  :scope[tone="muted"][variant="danger"] {
+    --tag-bg-default: var(--a-danger-muted);
+    --tag-fg-default: var(--a-danger-text);
+  }
+
+  /* `[tone="solid"]` on the neutral default (or no variant) inverts the
+     chrome — solid fg-color bg with bg-color text. High-contrast neutral
+     stamp. Explicit opt-in; the variant-less default stays quiet chrome. */
+  :scope[tone="solid"]:not([variant="info"]):not([variant="success"]):not([variant="warning"]):not([variant="danger"]) {
+    --tag-bg-default: var(--a-fg);
+    --tag-fg-default: var(--a-bg);
+  }
+
   /* Size handled by universal [size] attribute system. */
 
   /* hover rule moved outside @scope — see Safari 17.x bug note at top. */
@@ -105,6 +159,15 @@ tag-ui[removable]:not([disabled]):hover {
     box-shadow: var(--tag-focus-ring, var(--tag-focus-ring-default));
   }
 
+  /* ── Slotted icons (leading) ──
+     Icons placed inside the tag (e.g. `<icon-ui name="check">`) inherit
+     the host's text color so legend / status chips read as a single
+     color-coded unit. Mirrors `<badge-ui>`'s convention. */
+  :scope > icon-ui {
+    color: currentColor;
+    flex-shrink: 0;
+  }
+
   /* ── Dismiss button ── */
   [slot="dismiss"] {
     display: inline-flex;
@@ -118,13 +181,14 @@ tag-ui[removable]:not([disabled]):hover {
     cursor: pointer;
     border-radius: var(--tag-dismiss-radius, var(--tag-dismiss-radius-default));
     color: var(--tag-dismiss-fg, var(--tag-dismiss-fg-default));
+    opacity: var(--tag-dismiss-opacity, var(--tag-dismiss-opacity-default));
     --a-icon-size: 0.875rem;
     order: 1; /* push dismiss to end so layout reads [text] [×] */
-    transition: color var(--tag-duration, var(--tag-duration-default)) var(--tag-easing, var(--tag-easing-default)), background var(--tag-duration, var(--tag-duration-default)) var(--tag-easing, var(--tag-easing-default));
+    transition: opacity var(--tag-duration, var(--tag-duration-default)) var(--tag-easing, var(--tag-easing-default)), background var(--tag-duration, var(--tag-duration-default)) var(--tag-easing, var(--tag-easing-default));
   }
 
   [slot="dismiss"]:hover {
-    color: var(--tag-dismiss-fg-hover, var(--tag-dismiss-fg-hover-default));
+    opacity: var(--tag-dismiss-opacity-hover, var(--tag-dismiss-opacity-hover-default));
     background: var(--tag-dismiss-bg-hover, var(--tag-dismiss-bg-hover-default));
   }
 

package/components/tag/tag.test.js

@@ -41,6 +41,80 @@ describe('tag-ui — content: attr(text) gating', () => {
     // [icon] + [dismiss] slot rendering and for proper :scope[text]
     // gap rendering when text IS set.
     expect(TAG_CSS).toMatch(/:scope\s*\{[^}]*display:\s*inline-flex/);
-    expect(TAG_CSS).toMatch(/:scope\s*\{[^}]*gap:\s*var\(--tag-gap\)/);
+    // Post OD-5 sweep: tokens read via `var(--prop, var(--prop-default))`
+    // chain so consumer-named overrides AND --a-* surface overrides both work.
+    expect(TAG_CSS).toMatch(/:scope\s*\{[^}]*gap:\s*var\(--tag-gap,\s*var\(--tag-gap-default\)\)/);
+  });
+});
+
+// ── Tone defaults (solid by default for families; muted as opt-out) ──
+//
+// Default tone is `solid` for family variants — the base `:scope[variant=…]`
+// rules use the saturated-fill pair `--a-{family}-bg` + `--a-{family}-fg`
+// (the chip IS the state). `[tone="muted"]` opts back into the canonical
+// muted pair `--a-{family}-muted` + `--a-{family}-text` (same look as
+// <badge-ui>'s default). The `default` (no-family) variant stays quiet
+// chrome unless `[tone="solid"]` is set explicitly (then it inverts
+// to fg/bg for a high-contrast neutral stamp).
+
+describe('tag-ui — variant defaults to solid fill', () => {
+  it.each([
+    ['info'],
+    ['success'],
+    ['danger'],
+  ])('[variant="%s"] base rule uses --a-{family}-bg + --a-{family}-fg', (family) => {
+    const block = new RegExp(
+      `:scope\\[variant="${family}"\\]\\s*\\{[^}]*` +
+      `--tag-bg-default:\\s*var\\(--a-${family}-bg\\)[^}]*` +
+      `--tag-fg-default:\\s*var\\(--a-${family}-fg\\)`,
+      's'
+    );
+    expect(TAG_CSS).toMatch(block);
+  });
+
+  it('[variant="warning"] uses the literal --a-warning-20-tint bg (NOT --a-warning-bg)', () => {
+    // The token-system convention `-bg` + `-fg` collapses for warning
+    // because `--a-warning-fg` is dark (`-10-shade`) but `--a-warning-bg`
+    // (= `-strong` = `-50`) is mid-tone amber — dark-on-mid is muddy.
+    // The literal `-20-tint` step is bright in both schemes, restoring
+    // the caution-tape look the semantics.css comment intends.
+    expect(TAG_CSS).toMatch(
+      /:scope\[variant="warning"\]\s*\{[^}]*--tag-bg-default:\s*var\(--a-warning-20-tint\)[^}]*--tag-fg-default:\s*var\(--a-warning-fg\)/s
+    );
+    // Negative — guard against accidental revert to the muddy pair.
+    expect(TAG_CSS).not.toMatch(
+      /:scope\[variant="warning"\]\s*\{[^}]*--tag-bg-default:\s*var\(--a-warning-bg\)/s
+    );
+  });
+});
+
+describe('tag-ui — [tone="muted"] opts out to canonical muted pair', () => {
+  it.each([
+    ['info'],
+    ['success'],
+    ['warning'],
+    ['danger'],
+  ])('[tone="muted"][variant="%s"] uses --a-{family}-muted + --a-{family}-text', (family) => {
+    const block = new RegExp(
+      `:scope\\[tone="muted"\\]\\[variant="${family}"\\]\\s*\\{[^}]*` +
+      `--tag-bg-default:\\s*var\\(--a-${family}-muted\\)[^}]*` +
+      `--tag-fg-default:\\s*var\\(--a-${family}-text\\)`,
+      's'
+    );
+    expect(TAG_CSS).toMatch(block);
+  });
+});
+
+describe('tag-ui — neutral default + explicit solid stamp', () => {
+  it('[variant="default"] stays quiet chrome (--a-bg-muted + --a-fg)', () => {
+    expect(TAG_CSS).toMatch(
+      /:scope\[variant="default"\]\s*\{[^}]*--tag-bg-default:\s*var\(--a-bg-muted\)[^}]*--tag-fg-default:\s*var\(--a-fg\)/s
+    );
+  });
+
+  it('[tone="solid"] without a family inverts to fg/bg high-contrast stamp', () => {
+    expect(TAG_CSS).toMatch(
+      /:scope\[tone="solid"\]:not\(\[variant="info"\]\)[\s\S]*?--tag-bg-default:\s*var\(--a-fg\)[\s\S]*?--tag-fg-default:\s*var\(--a-bg\)/
+    );
   });
 });

package/components/tag/tag.yaml

@@ -51,6 +51,20 @@ props:
       - success
       - warning
       - danger
+  tone:
+    description: |
+      Fill style — orthogonal to [variant]. Default (`solid`) for family
+      variants is a saturated bg with on-strong (near-white) text — the
+      chip IS the state. Opt-out via `tone="muted"` for a tinted bg with
+      scheme-paired text (matches <badge-ui>'s default look) when the
+      chip is metadata in a dense list rather than a status stamp. The
+      `default` variant stays quiet chrome regardless of tone unless
+      `tone="solid"` is set explicitly (high-contrast neutral inverse).
+    type: string
+    default: solid
+    enum:
+      - solid
+      - muted
 events:
   remove:
     description: Fired when the dismiss button is activated.

package/components/tags-input/tags-input.class.js

@@ -518,12 +518,19 @@ export class UITagsInput extends UIFormElement {
   #handleChipRemove(e) {
     const chip = e.target.closest('tag-ui[data-index]');
     if (!chip) return;
-    // Stop the bubbling `remove` from <tag-ui> — tag-ui auto-removes the node
-    // itself on dispatch, but we own the list. Rebuild to keep the source of
-    // truth in `#value`.
+    // tag-ui's `remove` CustomEvent bubbles SYNCHRONOUSLY before tag-ui's
+    // own `this.remove()` runs (see tag/tag.class.js:59-63 — dispatch then
+    // remove). If we react inside the bubble (call `#renderChips()` now),
+    // the DOM still contains the about-to-be-removed chip and the
+    // positional reconcile in `#renderChips()` mutates the WRONG chip's
+    // text — visually erasing one or more adjacent chips. Pre-emptively
+    // detach the source chip ourselves so the DOM matches `#value` before
+    // render. tag-ui's later `this.remove()` is a harmless no-op on an
+    // already-detached node.
     e.stopPropagation();
     const idx = Number(chip.dataset.index);
     if (!Number.isInteger(idx)) return;
+    chip.remove();
     this.#removeByIndex(idx, 'chip-click');
   }
 

package/components/tags-input/tags-input.css

@@ -110,14 +110,23 @@
     white-space: pre-wrap;
     overflow-wrap: anywhere;
     cursor: text;
+    /* Positioning context for the [data-empty]::before placeholder pseudo
+       (kept out of inline flow so the caret renders at content-start). */
+    position: relative;
   }
-  /* Empty-state placeholder via ::before pseudo so the contenteditable
-     surface participates in inline layout (the same pattern the input-ui
-     + combobox-ui editable surfaces use). */
+  /* Empty-state placeholder. The pseudo is absolutely positioned (NOT
+     inline) so an in-flow pseudo box doesn't push the caret-at-position-0
+     to the right of the placeholder text after type-then-delete. Same
+     pattern input-ui + textarea-ui + combobox-ui use. */
   [data-inline-input][data-empty]::before {
     content: attr(data-placeholder);
     color: var(--tags-input-placeholder-fg, var(--tags-input-placeholder-fg-default));
     pointer-events: none;
+    position: absolute;
+    inset: 0;
+    padding: inherit;
+    display: flex;
+    align-items: center;
   }
 
   /* ── Spinner (async validator) ── */

package/components/textarea/textarea.css

@@ -60,6 +60,10 @@ textarea-ui:not([disabled]) [slot="text"]:hover {
   [slot="label"][label]::after { content: attr(label); }
 
   [slot="text"] {
+    /* Positioning context for the [data-empty]::before placeholder pseudo,
+       which is absolutely positioned (out of inline flow) so the caret
+       renders at content-start instead of after the placeholder text. */
+    position: relative;
     min-height: var(--textarea-min-height, var(--textarea-min-height-default));
     padding: var(--textarea-py, var(--textarea-py-default)) var(--textarea-px, var(--textarea-px-default));
     border: 1px solid var(--textarea-border, var(--textarea-border-default));
@@ -99,11 +103,16 @@ textarea-ui:not([disabled]) [slot="text"]:hover {
     color: var(--textarea-label-fg-focus, var(--textarea-label-fg-focus-default));
   }
 
-  /* Placeholder */
+  /* Placeholder — see input.css companion comment. Out-of-flow positioning
+     prevents the inline pseudo box from pushing the caret position to the
+     right of the placeholder text after type-then-delete. */
   [slot="text"][data-empty]::before {
     content: attr(data-placeholder);
     color: var(--textarea-placeholder-fg, var(--textarea-placeholder-fg-default));
     pointer-events: none;
+    position: absolute;
+    inset: 0;
+    padding: inherit;
   }
 
   /* Disabled */

package/core/provider.js

@@ -228,14 +228,31 @@ export class UIRouter extends UIProvider {
       }
     }
 
-    html = html.replace(/<script\b[^>]*>[\s\S]*?<\/script>/gi, '');
-
     // Template resolver hook — lets the site wrap content in a template before injection
     if (this.templateResolver) {
       html = await this.templateResolver(html, route);
     }
 
     this.innerHTML = html;
+    // Re-stamp executable <script> tags so consumer demos can wire data via
+    // imperative JS APIs (the documented `el.items = […]` / `el.invoice = {…}`
+    // pattern used by plan-picker, invoice-detail, list-window et al). HTML
+    // assigned via innerHTML does NOT execute embedded <script> elements per
+    // the HTML spec; we replicate the canonical standalone-wrapper rehydration
+    // pattern by cloning each script + swapping the inert original. `<script
+    // type="application/json" …>` blocks are left untouched so the receiving
+    // custom element's connectedCallback can absorb them (the documented
+    // in-band data pattern; see PlanPicker.#absorbInlinePlansScript et al).
+    for (const oldScript of this.querySelectorAll('script')) {
+      const type = oldScript.getAttribute('type') || '';
+      // Skip data blocks — those are consumed by the runtime, not executed.
+      if (type === 'application/json' || type === 'application/ld+json') continue;
+      const newScript = document.createElement('script');
+      if (type) newScript.type = type;
+      if (oldScript.src) newScript.src = oldScript.src;
+      else newScript.textContent = oldScript.textContent;
+      oldScript.replaceWith(newScript);
+    }
     this.scrollTo(0, 0);
     (this.closest('section') || this.parentElement)?.scrollTo(0, 0);