@adia-ai/web-components 0.6.31 → 0.6.33

package/components/swiper/swiper.a2ui.json

@@ -157,6 +157,7 @@
         "name": "idle"
       }
     ],
+    "status": "stable",
     "synonyms": {
       "carousel": [
         "swiper",

package/components/swiper/swiper.yaml

@@ -1,6 +1,7 @@
 $schema: ../../../../scripts/schemas/component.yaml.schema.json
 name: UISwiper
 tag: swiper-ui
+status: stable
 component: Swiper
 category: layout
 version: 1

package/components/switch/switch.a2ui.json

@@ -125,6 +125,7 @@
         "name": "disabled"
       }
     ],
+    "status": "stable",
     "synonyms": {
       "tags": [
         "Toggle",

package/components/switch/switch.yaml

@@ -1,6 +1,7 @@
 $schema: ../../../../scripts/schemas/component.yaml.schema.json
 name: UISwitch
 tag: switch-ui
+status: stable
 component: Switch
 category: layout
 version: 1

package/components/table/class.js

@@ -541,6 +541,15 @@ export class UITable extends UIElement {
   // ── Render ─────────────────────────────────────────────────────────────────
 
   render() {
+    // Raw mode: visual-only passthrough. The consumer authored the entire
+    // body shape (native <table>, custom row rendering, etc.) and only wants
+    // table-ui's CSS tokens (chrome reset via :scope[raw]). The data
+    // lifecycle (header injection, body reconciliation, overlays, aggregation,
+    // pagination) MUST NOT run — otherwise `.data === []` injects a
+    // [data-empty] overlay above the consumer's content (FB-53 §2). Raw is
+    // the explicit "consumer owns layout" mode.
+    if (this.raw) return;
+
     const visCols = this.#visibleColumns;
 
     // Set grid template

package/components/table/table.a2ui.json

@@ -52,7 +52,7 @@
       "default": 0
     },
     "raw": {
-      "description": "Raw mode",
+      "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.",
       "type": "boolean",
       "default": false
     },
@@ -281,6 +281,7 @@
         "name": "idle"
       }
     ],
+    "status": "stable",
     "synonyms": {
       "admin": [
         "dashboard",

package/components/table/table.d.ts

@@ -98,7 +98,7 @@ export class UITable extends UIElement {
   loading: boolean;
   /** Rows per page. 0 = show all rows without pagination. When > 0, renders a pagination bar below the table. */
   paginate: number;
-  /** Raw mode */
+  /** 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. */
   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;

package/components/table/table.test.js

@@ -283,3 +283,56 @@ describe('table-ui — FB-47 keyboard: Enter activates focused body cell', () =>
     expect(cellClickFired).toBe(false);
   });
 });
+
+/**
+ * Raw mode: visual-only passthrough — consumer owns the body shape.
+ *
+ * Pre-v0.6.33 (FB-53 §2), `<table-ui raw>` only applied the CSS chrome
+ * reset (background/border/radius transparent) but the data lifecycle
+ * still ran. With `.data === []` (the natural state when wrapping a
+ * consumer-authored native <table>), `#renderOverlays` injected a
+ * [data-empty] "No data" placeholder above the consumer's content.
+ *
+ * v0.6.33 short-circuits `render()` at the top when `this.raw` is set:
+ * no header injection, no body reconciliation, no overlays, no
+ * aggregation, no pagination.
+ */
+describe('table-ui — raw mode passthrough (FB-53 §2)', () => {
+  beforeEach(() => { document.body.innerHTML = ''; });
+
+  it('raw mode does NOT inject [data-empty] overlay when .data is empty', async () => {
+    const el = mount('<table-ui raw><table><tr><td>foo</td></tr></table></table-ui>');
+    // No .data set → empty by default. Without the raw early-return,
+    // #renderOverlays would create the [data-empty] placeholder.
+    await raf();
+    expect(el.querySelector(':scope > [data-empty]')).toBeNull();
+    // Consumer's native <table> survives untouched.
+    expect(el.querySelector(':scope > table')).not.toBeNull();
+  });
+
+  it('raw mode does NOT inject [data-header] or [data-body] rowgroups', async () => {
+    const el = mount('<table-ui raw><table><tr><td>x</td></tr></table></table-ui>');
+    await raf();
+    expect(el.querySelector(':scope > [data-header]')).toBeNull();
+    expect(el.querySelector(':scope > [data-body]')).toBeNull();
+  });
+
+  it('raw mode preserves consumer markup even when .columns + .data are set', async () => {
+    const el = mount('<table-ui raw><table id="consumer"><tr><td>consumer-owned</td></tr></table></table-ui>');
+    el.columns = COLS;
+    el.data = ROWS;
+    await raf();
+    // The consumer's native <table> is still the only table-shaped child.
+    expect(el.querySelector('#consumer')).not.toBeNull();
+    expect(el.querySelectorAll(':scope > [role="rowgroup"]').length).toBe(0);
+  });
+
+  it('non-raw mode (default) still injects header + body rowgroups', async () => {
+    const el = mount('<table-ui></table-ui>');
+    el.columns = COLS;
+    el.data = ROWS;
+    await raf();
+    expect(el.querySelector(':scope > [data-header]')).not.toBeNull();
+    expect(el.querySelector(':scope > [data-body]')).not.toBeNull();
+  });
+});

package/components/table/table.yaml

@@ -3,6 +3,7 @@
 $schema: ../../../../scripts/schemas/component.yaml.schema.json
 name: UITable
 tag: table-ui
+status: stable
 component: Table
 category: agent
 version: 1
@@ -54,7 +55,19 @@ props:
     type: number
     default: 0
   raw:
-    description: Raw mode
+    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.
     type: boolean
     default: false
     reflect: true

package/components/table-toolbar/table-toolbar.a2ui.json

@@ -139,6 +139,7 @@
         "name": "idle"
       }
     ],
+    "status": "stable",
     "synonyms": {
       "columns": [
         "table-toolbar",

package/components/table-toolbar/table-toolbar.yaml

@@ -1,6 +1,7 @@
 $schema: ../../../../scripts/schemas/component.yaml.schema.json
 name: UITableToolbar
 tag: table-toolbar-ui
+status: stable
 component: TableToolbar
 category: agent
 version: 1

package/components/tabs/tab.a2ui.json

@@ -58,6 +58,7 @@
     ],
     "slots": {},
     "states": [],
+    "status": "stable",
     "synonyms": {
       "tab": [
         "view-tab",

package/components/tabs/tab.yaml

@@ -11,6 +11,7 @@
 $schema: ../../../../scripts/schemas/component.yaml.schema.json
 name: UITab
 tag: tab-ui
+status: stable
 component: Tab
 category: navigation
 version: 1

package/components/tabs/tabs.a2ui.json

@@ -40,7 +40,8 @@
     }
   },
   "required": [
-    "component"
+    "component",
+    "value"
   ],
   "unevaluatedProperties": false,
   "x-adiaui": {
@@ -92,6 +93,7 @@
         "name": "idle"
       }
     ],
+    "status": "stable",
     "synonyms": {
       "layout": [
         "split",

package/components/tabs/tabs.css

@@ -4,7 +4,7 @@
     --tabs-border:          transparent;
     --tabs-bg:              transparent;
     --tabs-radius:          var(--a-radius-md);
-    --tabs-button-height:   2.25rem;
+    --tabs-button-height:   var(--a-size);
     --tabs-button-px:       var(--a-space-2);
     --tabs-font-size:       var(--a-ui-md);
     --tabs-gap:             var(--a-space-1);

package/components/tabs/tabs.yaml

@@ -3,6 +3,7 @@
 $schema: ../../../../scripts/schemas/component.yaml.schema.json
 name: UITabs
 tag: tabs-ui
+status: stable
 component: Tabs
 category: container
 version: 1
@@ -28,6 +29,7 @@ props:
   value:
     description: Value of the currently active tab. Set programmatically or auto-assigned to the first
       non-disabled tab on connect.
+    required: true
     type: string
     default: ""
 events:

package/components/tag/tag.a2ui.json

@@ -114,6 +114,7 @@
         "name": "disabled"
       }
     ],
+    "status": "stable",
     "synonyms": {
       "autocomplete": [
         "search",

package/components/tag/tag.css

@@ -55,7 +55,12 @@ tag-ui[removable]:not([disabled]):hover {
     transition: background var(--tag-duration) var(--tag-easing), color var(--tag-duration) var(--tag-easing);
   }
 
-  :scope::after {
+  /* `[text]` attribute selector gates the ::after so consumers using
+     slotted content (`<tag-ui>Beta</tag-ui>`) don't get an empty
+     pseudo-element flex item — which would otherwise inherit the
+     host's `gap` and add a phantom `--tag-gap`-wide trailing space
+     after the slotted content. Mirrors `button.css` line ~103. */
+  :scope[text]::after {
     content: attr(text);
   }
 

package/components/tag/tag.test.js

@@ -0,0 +1,46 @@
+/**
+ * tag-ui regression tests.
+ *
+ * Source-grep contract for the `content: attr(text)` gating pattern.
+ * Pre-fix (ungated `:scope::after { content: attr(text) }`), an empty
+ * `attr(text)` still generated a zero-width pseudo-element flex item,
+ * and the host's `inline-flex` + `gap` added a phantom `--tag-gap`
+ * trailing space after slotted content like `<tag-ui>Beta</tag-ui>`.
+ * The fix gates the pseudo-element on `[text]` attribute presence, so
+ * slot-content consumers don't pay the gap cost.
+ *
+ * jsdom doesn't evaluate `@scope` rules via `getComputedStyle()`, so
+ * we validate the CSS source shape directly (same recipe as
+ * description-list.test.js and text.test.js).
+ */
+
+import { describe, it, expect } from 'vitest';
+import { readFileSync } from 'node:fs';
+import { fileURLToPath } from 'node:url';
+import { dirname, resolve } from 'node:path';
+
+const HERE = dirname(fileURLToPath(import.meta.url));
+const TAG_CSS = readFileSync(resolve(HERE, 'tag.css'), 'utf8');
+
+describe('tag-ui — content: attr(text) gating', () => {
+  it('gates the ::after pseudo-element on [text] attribute presence', () => {
+    // The fixed rule: `:scope[text]::after { content: attr(text); }`
+    expect(TAG_CSS).toMatch(/:scope\[text\]::after\s*\{[^}]*content:\s*attr\(text\)/);
+  });
+
+  it('does NOT carry an ungated :scope::after with content: attr(text)', () => {
+    // The pre-fix shape would add phantom flex-gap space after slotted
+    // content. Match the bare `:scope::after` form (no attribute
+    // selector chained) followed by the attr(text) declaration.
+    expect(TAG_CSS).not.toMatch(/:scope::after\s*\{[^}]*content:\s*attr\(text\)/);
+  });
+
+  it('host :scope still declares the flex + gap layout (gap is real, just no longer applied to an empty pseudo)', () => {
+    // Sanity check that the fix didn't accidentally remove the host
+    // flex/gap declarations — those are still load-bearing for the
+    // [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\)/);
+  });
+});

package/components/tag/tag.yaml

@@ -3,6 +3,7 @@
 $schema: ../../../../scripts/schemas/component.yaml.schema.json
 name: UITag
 tag: tag-ui
+status: stable
 component: Tag
 category: display
 version: 1

package/components/text/text.a2ui.json

@@ -154,6 +154,7 @@
         "name": "idle"
       }
     ],
+    "status": "stable",
     "synonyms": {
       "text": [
         "typography",

package/components/text/text.yaml

@@ -3,6 +3,7 @@
 $schema: ../../../../scripts/schemas/component.yaml.schema.json
 name: UIText
 tag: text-ui
+status: stable
 component: Text
 category: display
 version: 1

package/components/textarea/textarea.a2ui.json

@@ -123,6 +123,7 @@
         "name": "idle"
       }
     ],
+    "status": "stable",
     "synonyms": {
       "textarea": [
         "multiline-input",

package/components/textarea/textarea.yaml

@@ -3,6 +3,7 @@
 $schema: ../../../../scripts/schemas/component.yaml.schema.json
 name: UITextarea
 tag: textarea-ui
+status: stable
 component: Textarea
 category: layout
 version: 1

package/components/timeline/timeline-item.a2ui.json

@@ -77,6 +77,7 @@
     ],
     "slots": {},
     "states": [],
+    "status": "stable",
     "synonyms": {
       "timeline-item": [
         "timeline-row",

package/components/timeline/timeline-item.yaml

@@ -11,6 +11,7 @@
 $schema: ../../../../scripts/schemas/component.yaml.schema.json
 name: UITimelineItem
 tag: timeline-item-ui
+status: stable
 component: TimelineItem
 category: feedback
 version: 1

package/components/timeline/timeline.a2ui.json

@@ -81,6 +81,7 @@
         "name": "idle"
       }
     ],
+    "status": "stable",
     "synonyms": {
       "timeline": [
         "activity-log",

package/components/timeline/timeline.yaml

@@ -3,6 +3,7 @@
 $schema: ../../../../scripts/schemas/component.yaml.schema.json
 name: UITimeline
 tag: timeline-ui
+status: stable
 component: Timeline
 category: display
 version: 1

package/components/toast/toast.a2ui.json

@@ -98,6 +98,7 @@
         "name": "idle"
       }
     ],
+    "status": "stable",
     "synonyms": {
       "alert": [
         "alert",

package/components/toast/toast.yaml

@@ -3,6 +3,7 @@
 $schema: ../../../../scripts/schemas/component.yaml.schema.json
 name: UIToast
 tag: toast-ui
+status: stable
 component: Toast
 category: container
 version: 1

package/components/toggle-group/toggle-group.a2ui.json

@@ -76,6 +76,7 @@
         "name": "idle"
       }
     ],
+    "status": "stable",
     "synonyms": {
       "toggle-group": [
         "segmented-control",

package/components/toggle-group/toggle-group.yaml

@@ -3,6 +3,7 @@
 $schema: ../../../../scripts/schemas/component.yaml.schema.json
 name: UIToggleGroup
 tag: toggle-group-ui
+status: stable
 component: ToggleGroup
 category: navigation
 version: 1

package/components/toggle-group/toggle-option.a2ui.json

@@ -61,6 +61,7 @@
     ],
     "slots": {},
     "states": [],
+    "status": "stable",
     "synonyms": {
       "toggle-option": [
         "toggle-segment",

package/components/toggle-group/toggle-option.yaml

@@ -8,6 +8,7 @@
 $schema: ../../../../scripts/schemas/component.yaml.schema.json
 name: UIToggleOption
 tag: toggle-option-ui
+status: stable
 component: ToggleOption
 category: forms
 version: 1

package/components/toggle-scheme/toggle-scheme.a2ui.json

@@ -186,6 +186,7 @@
         "name": "disabled"
       }
     ],
+    "status": "stable",
     "synonyms": {
       "dark-mode": [
         "toggle-scheme"

package/components/toggle-scheme/toggle-scheme.yaml

@@ -2,6 +2,7 @@
 $schema: ../../../../scripts/schemas/component.yaml.schema.json
 name: UIToggleScheme
 tag: toggle-scheme-ui
+status: stable
 component: ToggleScheme
 category: control
 version: 1

package/components/toolbar/toolbar-group.a2ui.json

@@ -41,6 +41,7 @@
     ],
     "slots": {},
     "states": [],
+    "status": "stable",
     "synonyms": {
       "toolbar-group": [
         "button-group",

package/components/toolbar/toolbar-group.yaml

@@ -9,6 +9,7 @@
 $schema: ../../../../scripts/schemas/component.yaml.schema.json
 name: UIToolbarGroup
 tag: toolbar-group-ui
+status: stable
 component: ToolbarGroup
 category: navigation
 version: 1

package/components/toolbar/toolbar.a2ui.json

@@ -78,6 +78,7 @@
         "name": "idle"
       }
     ],
+    "status": "stable",
     "synonyms": {
       "action-bar": [
         "toolbar",

package/components/toolbar/toolbar.yaml

@@ -3,6 +3,7 @@
 $schema: ../../../../scripts/schemas/component.yaml.schema.json
 name: UIToolbar
 tag: toolbar-ui
+status: stable
 component: Toolbar
 category: layout
 version: 1

package/components/tooltip/tooltip.a2ui.json

@@ -105,6 +105,7 @@
         "name": "idle"
       }
     ],
+    "status": "stable",
     "synonyms": {
       "buttons": [
         "toolbar",

package/components/tooltip/tooltip.yaml

@@ -3,6 +3,7 @@
 $schema: ../../../../scripts/schemas/component.yaml.schema.json
 name: UITooltip
 tag: tooltip-ui
+status: stable
 component: Tooltip
 category: container
 version: 1

package/components/tree/tree-item.a2ui.json

@@ -66,6 +66,7 @@
     ],
     "slots": {},
     "states": [],
+    "status": "stable",
     "synonyms": {
       "tree-item": [
         "tree-node",

package/components/tree/tree-item.yaml

@@ -11,6 +11,7 @@
 $schema: ../../../../scripts/schemas/component.yaml.schema.json
 name: UITreeItem
 tag: tree-item-ui
+status: stable
 component: TreeItem
 category: data
 version: 1

package/components/tree/tree.a2ui.json

@@ -87,6 +87,7 @@
         "name": "idle"
       }
     ],
+    "status": "stable",
     "synonyms": {
       "folder": [
         "inbox",

package/components/tree/tree.yaml

@@ -3,6 +3,7 @@
 $schema: ../../../../scripts/schemas/component.yaml.schema.json
 name: UITree
 tag: tree-ui
+status: stable
 component: Tree
 category: data
 version: 1

package/components/upload/upload.a2ui.json

@@ -128,6 +128,7 @@
         "name": "disabled"
       }
     ],
+    "status": "stable",
     "synonyms": {
       "attach": [
         "file",

package/components/upload/upload.yaml

@@ -3,6 +3,7 @@
 $schema: ../../../../scripts/schemas/component.yaml.schema.json
 name: UIUpload
 tag: upload-ui
+status: stable
 component: Upload
 category: input
 version: 1

package/core/icons-phosphor.js

@@ -118,10 +118,16 @@ if (hasViteGlob) {
   // never tries to pre-resolve it in dev (where the file doesn't exist).
   const manifestSpec = './icons-manifest.js';
   import(/* @vite-ignore */ manifestSpec).then(({ default: manifest }) => {
-    const modules = Object.fromEntries(Object.entries(manifest).map(([weight, names]) => {
-      const prefix = `/node_modules/@phosphor-icons/core/assets/${weight}/`;
+    // `cdn` is an optional key added by bundle-js.mjs for CDN-distributed
+    // bundles. When present, SVGs are fetched from the CDN origin rather than
+    // /node_modules/ (which only exists on localhost / in a bundler context).
+    const { cdn: cdnBase, ...weights } = manifest;
+    const modules = Object.fromEntries(Object.entries(weights).map(([weight, names]) => {
+      const base = cdnBase
+        ? `${cdnBase}${weight}/`
+        : `/node_modules/@phosphor-icons/core/assets/${weight}/`;
       const entries = names.map(name => {
-        const path = prefix + name;
+        const path = base + name;
         const loader = () => fetch(path).then(r => r.ok ? r.text() : Promise.reject(new Error(`icon fetch failed: ${path}`)));
         return [path, loader];
       });