@adia-ai/web-components 0.0.19 → 0.0.20

package/components/swiper/swiper.a2ui.json

@@ -2,7 +2,7 @@
   "$schema": "https://json-schema.org/draft/2020-12/schema",
   "$id": "https://adiaui.dev/a2ui/v0_9/components/Swiper.json",
   "title": "Swiper",
-  "description": "CSS-first carousel with scroll-snap. Supports autoplay, loop, peek, and native scroll markers.",
+  "description": "CSS-first carousel with scroll-snap. Supports autoplay, loop, and peek; JS-stamped pagination dots and paddles.",
   "type": "object",
   "allOf": [
     {
@@ -77,8 +77,8 @@
       "autoplay-resume": {
         "description": "Fired on autoplay-resume."
       },
-      "slide-change": {
-        "description": "Fired on slide-change."
+      "change": {
+        "description": "Fired when the active slide changes. Detail: { index, slide }."
       }
     },
     "examples": [

package/components/swiper/swiper.css

@@ -1,7 +1,7 @@
 /* ═══════════════════════════════════════════════════════════════
    SWIPER-N — CSS-first carousel
-   Scroll-snap positioning, native ::scroll-marker dots,
-   ::scroll-button prev/next, container-query responsive.
+   Scroll-snap positioning, container-query responsive,
+   JS-stamped pagination dots + prev/next paddles.
 
    Structure (JS-stamped):
      swiper-ui                    ← flex column wrapper
@@ -10,6 +10,12 @@
        [data-swiper-dots]        ← pagination dots (below track)
        [data-swiper-btn prev]    ← absolute left paddle
        [data-swiper-btn next]    ← absolute right paddle
+
+   Native ::scroll-marker / ::scroll-button is Chrome-135-only and
+   not yet on Safari/Firefox roadmaps. Until cross-engine, JS-stamped
+   dots are the single source of pagination UI; re-introduce native
+   paths gated on CSS.supports('selector(::scroll-marker)') when both
+   other engines ship.
    ═══════════════════════════════════════════════════════════════ */
 
 @scope (swiper-ui) {
@@ -31,9 +37,6 @@
     /* ── Host vertical rhythm ── */
     --swiper-gap-vertical:  var(--a-space-3);
 
-    /* ── Native scroll-marker group padding ── */
-    --swiper-marker-group-py: var(--a-space-3);
-
     /* ── Paddle bottom offset ── */
     --swiper-btn-bottom:    var(--a-space-3);
 
@@ -127,80 +130,11 @@
     :scope:not([slides-per-view]) { --swiper-columns: 3; }
   }
 
-  /* ── Native scroll markers (Chrome 135+) ── */
-
-  :scope > [data-swiper-track]::scroll-marker-group {
-    display: flex;
-    gap: var(--swiper-dot-gap);
-    justify-content: center;
-    padding-block: var(--swiper-marker-group-py);
-    position: sticky;
-    bottom: 0;
-    align-self: end;
-    grid-column: 1 / -1;
-  }
-
-  :scope > [data-swiper-track] > *::scroll-marker {
-    content: '';
-    width: var(--swiper-dot-size);
-    height: var(--swiper-dot-size);
-    border-radius: var(--swiper-dot-radius);
-    background: var(--swiper-dot-bg);
-    border: none;
-    cursor: pointer;
-    transition: background var(--swiper-duration) var(--swiper-easing),
-                transform var(--swiper-duration) var(--swiper-easing);
-  }
-
-  :scope > [data-swiper-track] > *::scroll-marker:target-current {
-    background: var(--swiper-dot-bg-active);
-  }
-
-  /* ── Native scroll buttons (Chrome 135+) ──
-     Disabled — we always stamp JS paddles for consistent
-     cross-browser appearance. Uncomment to use native instead. */
-
-  /*
-  :scope > [data-swiper-track]::scroll-button(inline-start),
-  :scope > [data-swiper-track]::scroll-button(inline-end) {
-    position: absolute;
-    top: 50%;
-    transform: translateY(-50%);
-    width: var(--swiper-btn-size);
-    height: var(--swiper-btn-size);
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    border-radius: var(--swiper-btn-radius);
-    background: var(--swiper-btn-bg);
-    color: var(--swiper-btn-fg);
-    border: none;
-    box-shadow: var(--swiper-btn-shadow);
-    cursor: pointer;
-    z-index: 2;
-    font-size: 1.25em;
-    transition: background var(--swiper-duration) var(--swiper-easing),
-                opacity var(--swiper-duration) var(--swiper-easing);
-  }
-
-  :scope > [data-swiper-track]::scroll-button(inline-start) { content: '\2039'; left: var(--swiper-btn-offset); }
-  :scope > [data-swiper-track]::scroll-button(inline-end)   { content: '\203A'; right: var(--swiper-btn-offset); }
-
-  :scope > [data-swiper-track]::scroll-button(inline-start):hover,
-  :scope > [data-swiper-track]::scroll-button(inline-end):hover {
-    background: var(--swiper-btn-bg-hover);
-  }
-
-  :scope > [data-swiper-track]::scroll-button(inline-start):disabled,
-  :scope > [data-swiper-track]::scroll-button(inline-end):disabled {
-    opacity: 0;
-    pointer-events: none;
-  }
-  */
-
   /* ══════════════════════════════════════════════════════════
-     JS-stamped fallback paddles
+     JS-stamped paddles
      Centered vertically on the track area only.
+     Native ::scroll-button is Chrome-135-only — re-introduce
+     when cross-engine.
      ══════════════════════════════════════════════════════════ */
 
   :scope > [data-swiper-btn] {

package/components/swiper/swiper.js

@@ -6,16 +6,17 @@
  * </swiper-ui>
  *
  * CSS-first carousel. Scroll-snap does all positioning.
- * JS handles: auto-advance, programmatic API, ARIA, fallback nav.
+ * JS handles: auto-advance, programmatic API, ARIA, paddles + dots.
  *
  * On connect, wraps user children into a [data-swiper-track] scroll
  * container so pagination dots can sit below (outside overflow).
  *
- * Native ::scroll-marker / ::scroll-button in Chrome 135+.
- * JS-stamped button-ui fallback + dots in other browsers.
+ * Pagination dots and prev/next paddles are JS-stamped on every
+ * engine. Native ::scroll-marker / ::scroll-button are Chrome-135-only
+ * with no Safari / Firefox roadmap; re-evaluate when cross-engine.
  *
  * Events:
- *   slide-change   — { detail: { index, slide } }
+ *   change         — { detail: { index, slide } }
  *   autoplay-pause — { detail: { reason } }
  *   autoplay-resume
  */
@@ -180,7 +181,7 @@ class AdiaSwiper extends AdiaElement {
           if (index !== -1 && index !== this.#activeIndex) {
             this.#activeIndex = index;
             this.#updateFallbackDots();
-            this.dispatchEvent(new CustomEvent('slide-change', {
+            this.dispatchEvent(new CustomEvent('change', {
               bubbles: true,
               detail: { index, slide: entry.target },
             }));

package/components/swiper/swiper.yaml

@@ -6,7 +6,7 @@ tag: swiper-ui
 component: Swiper
 category: layout
 version: 1
-description: CSS-first carousel with scroll-snap. Supports autoplay, loop, peek, and native scroll markers.
+description: CSS-first carousel with scroll-snap. Supports autoplay, loop, and peek; JS-stamped pagination dots and paddles.
 props:
   autoplay:
     description: Enable auto-advance
@@ -49,8 +49,8 @@ events:
     description: "Fired on autoplay-pause."
   autoplay-resume:
     description: "Fired on autoplay-resume."
-  slide-change:
-    description: "Fired on slide-change."
+  change:
+    description: "Fired when the active slide changes. Detail: { index, slide }."
 slots:
   default:
     description: "Default slot — primary child content."

package/components/switch/switch.a2ui.json

@@ -47,8 +47,15 @@
       "default": ""
     },
     "size": {
-      "description": "Sizing scale (xs/sm/md/lg/xl).",
+      "description": "Sizing scale (full tier — xs / sm / md / lg / xl).",
       "type": "string",
+      "enum": [
+        "xs",
+        "sm",
+        "md",
+        "lg",
+        "xl"
+      ],
       "default": ""
     },
     "value": {

package/components/switch/switch.yaml

@@ -36,9 +36,16 @@ props:
     type: string
     default: ""
   size:
-    description: "Sizing scale (xs/sm/md/lg/xl)."
+    description: Sizing scale (full tier — xs / sm / md / lg / xl).
     type: string
     default: ""
+    enum:
+      - xs
+      - sm
+      - md
+      - lg
+      - xl
+    reflect: true
   value:
     description: Form value (submitted as 'on' when checked)
     type: string

package/components/table/table.js

@@ -107,6 +107,7 @@ class AdiaTable extends AdiaElement {
   #bound = false;
   #lastSelectedIndex = -1;   // for shift-click range select
   #openFilter = null;        // column key of open filter dropdown
+  #filterFocusRaf = null;
 
   // ── Public API: columns ──
 
@@ -264,6 +265,10 @@ class AdiaTable extends AdiaElement {
       cancelAnimationFrame(this.#renderRaf);
       this.#renderRaf = null;
     }
+    if (this.#filterFocusRaf != null) {
+      cancelAnimationFrame(this.#filterFocusRaf);
+      this.#filterFocusRaf = null;
+    }
   }
 
   // ── <col-def> Parsing ──────────────────────────────────────────────────────
@@ -989,7 +994,10 @@ class AdiaTable extends AdiaElement {
     }
 
     // Auto-focus input
-    requestAnimationFrame(() => {
+    if (this.#filterFocusRaf != null) cancelAnimationFrame(this.#filterFocusRaf);
+    this.#filterFocusRaf = requestAnimationFrame(() => {
+      this.#filterFocusRaf = null;
+      if (!this.isConnected) return;
       const input = dropdown.querySelector('input');
       if (input) input.focus();
     });

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

@@ -13,11 +13,6 @@
     }
   ],
   "properties": {
-    "columns": {
-      "description": "Show the Columns visibility popover button.",
-      "type": "boolean",
-      "default": true
-    },
     "component": {
       "const": "TableToolbar"
     },
@@ -26,30 +21,35 @@
       "type": "string",
       "default": ""
     },
-    "filterable": {
-      "description": "Show the Filter popover button.",
-      "type": "boolean",
-      "default": true
-    },
     "for": {
       "description": "id-ref of the table-ui to control. Falls back to the first sibling table-ui within the same parent when omitted.",
       "type": "string",
       "default": ""
     },
-    "placeholder": {
-      "description": "Placeholder text for the search input.",
-      "type": "string",
-      "default": "Search..."
+    "noColumns": {
+      "description": "Hide the Columns visibility popover button. Columns control is shown by default; set to opt out.",
+      "type": "boolean",
+      "default": false
+    },
+    "noFilter": {
+      "description": "Hide the Filter popover button. Filter is shown by default; set to opt out.",
+      "type": "boolean",
+      "default": false
     },
-    "searchable": {
-      "description": "Show the search input.",
+    "noSearch": {
+      "description": "Hide the search input. Search is shown by default; set to opt out.",
       "type": "boolean",
-      "default": true
+      "default": false
     },
-    "sortable": {
-      "description": "Show the Sort popover button.",
+    "noSort": {
+      "description": "Hide the Sort popover button. Sort is shown by default; set to opt out.",
       "type": "boolean",
-      "default": true
+      "default": false
+    },
+    "placeholder": {
+      "description": "Placeholder text for the search input.",
+      "type": "string",
+      "default": "Search..."
     },
     "text": {
       "description": "Title text shown on the left. Alternative to slotted heading content.",

package/components/table-toolbar/table-toolbar.css

@@ -9,6 +9,7 @@
     /* ── Surface ── */
     --table-toolbar-bg:            transparent;
     --table-toolbar-border:        transparent;
+    --table-toolbar-border-width:  0;
     --table-toolbar-radius:        var(--a-radius-lg);
 
     /* ── Title ── */
@@ -60,16 +61,23 @@
     align-items: center;
     gap: var(--table-toolbar-gap);
     padding: var(--table-toolbar-py) var(--table-toolbar-px);
+    background: var(--table-toolbar-bg);
+    border: var(--table-toolbar-border-width) solid var(--table-toolbar-border);
+    border-radius: var(--table-toolbar-radius);
     min-width: 0;
   }
 
-  /* ═══════ Variant: card ═══════ */
-
-  :scope[variant="card"] [data-toolbar] {
-    background: var(--table-toolbar-bg);
-    border: 1px solid var(--table-toolbar-border);
-    border-radius: var(--table-toolbar-radius);
-    padding: var(--a-space-3) var(--a-space-4);
+  /* ═══════ Variant: card ═══════
+     Variant only re-assigns surface tokens; base layout above consumes
+     them unchanged. Matches contract §"Variants override TOKENS, never
+     base styles". */
+
+  :scope[variant="card"] {
+    --table-toolbar-bg:           var(--a-bg);
+    --table-toolbar-border:       var(--a-border-subtle);
+    --table-toolbar-border-width: 1px;
+    --table-toolbar-py:           var(--a-space-3);
+    --table-toolbar-px:           var(--a-space-4);
   }
 
   /* ═══════ Title cluster ═══════ */

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

@@ -31,10 +31,10 @@ class AdiaTableToolbar extends AdiaElement {
     for:         { type: String,  default: '',         reflect: true },
     text:        { type: String,  default: '',         reflect: false },
     count:       { type: String,  default: '',         reflect: false },
-    filterable:  { type: Boolean, default: true,       reflect: true },
-    sortable:    { type: Boolean, default: true,       reflect: true },
-    columns:     { type: Boolean, default: true,       reflect: true },
-    searchable:  { type: Boolean, default: true,       reflect: true },
+    noFilter:    { type: Boolean, default: false,      reflect: true, attribute: 'no-filter' },
+    noSort:      { type: Boolean, default: false,      reflect: true, attribute: 'no-sort' },
+    noColumns:   { type: Boolean, default: false,      reflect: true, attribute: 'no-columns' },
+    noSearch:    { type: Boolean, default: false,      reflect: true, attribute: 'no-search' },
     placeholder: { type: String,  default: 'Search...', reflect: false },
     variant:     { type: String,  default: 'default',  reflect: true },
   };
@@ -45,6 +45,8 @@ class AdiaTableToolbar extends AdiaElement {
   #targetListeners = [];
   #activePopover = null;       // { btn, panel, cleanup }
   #docListenersBound = false;
+  #docListenerRaf = null;
+  #sortIndicatorRafs = new Set();
 
   // ── Lifecycle ────────────────────────────────────────────────────────────
 
@@ -56,6 +58,12 @@ class AdiaTableToolbar extends AdiaElement {
   }
 
   disconnected() {
+    if (this.#docListenerRaf != null) {
+      cancelAnimationFrame(this.#docListenerRaf);
+      this.#docListenerRaf = null;
+    }
+    for (const id of this.#sortIndicatorRafs) cancelAnimationFrame(id);
+    this.#sortIndicatorRafs.clear();
     this.#closePopover();
     this.#detachTarget();
   }
@@ -227,15 +235,15 @@ class AdiaTableToolbar extends AdiaElement {
       if (el) el.hidden = hidden;
     };
 
-    setHidden('[data-toolbar-btn="filter"]',  !this.filterable);
-    setHidden('[data-toolbar-btn="sort"]',    !this.sortable);
-    setHidden('[data-toolbar-btn="columns"]', !this.columns);
-    setHidden('[data-search]',                !this.searchable);
+    setHidden('[data-toolbar-btn="filter"]',  this.noFilter);
+    setHidden('[data-toolbar-btn="sort"]',    this.noSort);
+    setHidden('[data-toolbar-btn="columns"]', this.noColumns);
+    setHidden('[data-search]',                this.noSearch);
   }
 
   // Re-run on attribute changes for boolean flags.
   attributeChanged(name) {
-    if (['filterable', 'sortable', 'columns', 'searchable'].includes(name)) {
+    if (['no-filter', 'no-sort', 'no-columns', 'no-search'].includes(name)) {
       this.#updateControlVisibility();
     }
     if (name === 'placeholder') {
@@ -293,7 +301,9 @@ class AdiaTableToolbar extends AdiaElement {
 
     if (!this.#docListenersBound) {
       this.#docListenersBound = true;
-      requestAnimationFrame(() => {
+      this.#docListenerRaf = requestAnimationFrame(() => {
+        this.#docListenerRaf = null;
+        if (!this.isConnected || !this.#docListenersBound) return;
         document.addEventListener('pointerdown', this.#onDocDown, true);
         document.addEventListener('keydown', this.#onDocKey, true);
       });
@@ -472,13 +482,16 @@ class AdiaTableToolbar extends AdiaElement {
 
       // Trailing direction indicator — append AFTER menu-item-ui's connected()
       // has run its #stamp() (defers via rAF so the [slot="text"] span exists).
-      requestAnimationFrame(() => {
+      const rafId = requestAnimationFrame(() => {
+        this.#sortIndicatorRafs.delete(rafId);
+        if (!this.isConnected) return;
         const indicator = document.createElement('icon-ui');
         indicator.setAttribute('data-sort-indicator', '');
         indicator.setAttribute('size', 'xs');
         indicator.setAttribute('name', dir === 'asc' ? 'arrow-up' : dir === 'desc' ? 'arrow-down' : 'caret-up-down');
         row.appendChild(indicator);
       });
+      this.#sortIndicatorRafs.add(rafId);
 
       row.addEventListener('click', (e) => {
         // Forward to the bound table by simulating a header click — the table

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

@@ -29,26 +29,30 @@ props:
     description: Optional count badge value shown next to the title. When unset, falls back to the row count of the bound table.
     type: string
     default: ""
-  filterable:
-    description: Show the Filter popover button.
+  noFilter:
+    description: Hide the Filter popover button. Filter is shown by default; set to opt out.
     type: boolean
-    default: true
+    default: false
     reflect: true
-  sortable:
-    description: Show the Sort popover button.
+    attribute: no-filter
+  noSort:
+    description: Hide the Sort popover button. Sort is shown by default; set to opt out.
     type: boolean
-    default: true
+    default: false
     reflect: true
-  columns:
-    description: Show the Columns visibility popover button.
+    attribute: no-sort
+  noColumns:
+    description: Hide the Columns visibility popover button. Columns control is shown by default; set to opt out.
     type: boolean
-    default: true
+    default: false
     reflect: true
-  searchable:
-    description: Show the search input.
+    attribute: no-columns
+  noSearch:
+    description: Hide the search input. Search is shown by default; set to opt out.
     type: boolean
-    default: true
+    default: false
     reflect: true
+    attribute: no-search
   placeholder:
     description: Placeholder text for the search input.
     type: string

package/components/tabs/tabs.css

@@ -30,8 +30,9 @@
     --tabs-focus-radius:    var(--a-radius-sm);
 
     /* ── Vertical strip min-width ── */
-    /* Component-intrinsic visual constant; no --a-space-* equivalent */
-    --tabs-vertical-strip-min-width: 140px;
+    /* Component-intrinsic visual constant; no --a-space-* equivalent
+       (8.75rem ≈ 140px at 1rem=16px). */
+    --tabs-vertical-strip-min-width: 8.75rem;
   }
 
   :scope {

package/components/tabs/tabs.js

@@ -27,6 +27,7 @@ class AdiaTabs extends AdiaElement {
 
   #strip = null;
   #indicator = null;
+  #transitionRaf = null;
 
   connected() {
     this.setAttribute('role', 'tablist');
@@ -42,6 +43,10 @@ class AdiaTabs extends AdiaElement {
   }
 
   disconnected() {
+    if (this.#transitionRaf != null) {
+      cancelAnimationFrame(this.#transitionRaf);
+      this.#transitionRaf = null;
+    }
     this.removeEventListener('click', this.#handleClick);
     this.removeEventListener('keydown', this.#handleKeydown);
     this.#strip = null;
@@ -175,7 +180,8 @@ class AdiaTabs extends AdiaElement {
     if (isNew) {
       this.#indicator.style.transition = 'none';
       apply();
-      requestAnimationFrame(() => {
+      this.#transitionRaf = requestAnimationFrame(() => {
+        this.#transitionRaf = null;
         if (this.#indicator) this.#indicator.style.transition = '';
       });
     } else {

package/components/tag/tag.a2ui.json

@@ -41,14 +41,14 @@
       "default": ""
     },
     "variant": {
-      "description": "Visual style variant with semantic colors.",
+      "description": "Semantic variant — `default | info | success | warning | danger`.",
       "type": "string",
       "enum": [
         "default",
         "info",
         "success",
         "warning",
-        "error"
+        "danger"
       ],
       "default": "default"
     }

package/components/tag/tag.yaml

@@ -29,7 +29,7 @@ props:
     type: string
     default: ""
   variant:
-    description: Visual style variant with semantic colors.
+    description: Semantic variant — `default | info | success | warning | danger`.
     type: string
     default: default
     enum:
@@ -37,7 +37,7 @@ props:
       - info
       - success
       - warning
-      - error
+      - danger
 events:
   remove:
     description: Fired when the dismiss button is activated.