@adia-ai/web-components 0.0.18 → 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

@@ -2,7 +2,7 @@
   "$schema": "https://json-schema.org/draft/2020-12/schema",
   "$id": "https://adiaui.dev/a2ui/v0_9/components/TableToolbar.json",
   "title": "TableToolbar",
-  "description": "Header / companion bar for a sibling table-ui. Renders title + count badge, filter / sort / columns popovers, and a search input — all wired to the target table via an [for] id-ref. Modeled on chart-legend-ui's [for] binding pattern. Drop next to (or above) any table-ui to add the standard data-grid toolbar without re-implementing search, filter, sort, or column visibility.",
+  "description": "Header / companion bar for a sibling table-ui. Renders title + count badge, filter / sort / columns popovers, and a search input — all wired to the target table via an [for] id-ref. Modeled on chart-legend-ui's [for] binding pattern. Drop next to (or above) any table-ui to add the standard data-grid toolbar without re-implementing search, filter, sort, or column visibility. Filter rows auto-pick a primitive per column: ≤ 50 distinct values → multi- select (searchable above 12 options), id-like keys → free-text contains. The column descriptor's `filter` field overrides the auto-detect: `'select'` forces multi-select even on high-cardinality columns; `'text'` forces a contains input even on small enums.",
   "type": "object",
   "allOf": [
     {
@@ -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 ═══════ */
@@ -150,12 +158,16 @@
   gap: var(--a-space-1);
 }
 
+/* The popover head + empty hint are <text-ui variant="kicker"|caption">,
+   so their typography (uppercase, tracking, muted color) comes from
+   text-ui's own variant rules — no rule needed here.
+   Sort rows are <menu-item-ui> — hover/focus/danger styling comes from
+   menu-item-ui's @scope block.
+   Filter and columns rows are <field-ui inline> — label/control geometry
+   comes from field-ui's @scope block. */
+
 [data-toolbar-popover] [data-popover-head] {
-  font-size: var(--a-ui-tiny);
-  text-transform: uppercase;
-  letter-spacing: 0.06em;
-  color: var(--a-fg-muted);
-  padding: var(--a-space-1) var(--a-ui-px, var(--a-space-2));
+  padding: var(--a-space-1) var(--a-space-2);
 }
 
 [data-toolbar-popover] [data-popover-list] {
@@ -178,92 +190,21 @@
   padding-top: var(--a-space-1);
 }
 
-/* ── Filter rows ── */
-
-[data-toolbar-popover] [data-filter-row] {
-  display: grid;
-  grid-template-columns: 1fr minmax(8rem, 1.2fr);
-  align-items: center;
-  gap: var(--a-space-2);
+[data-toolbar-popover] [data-filter-row],
+[data-toolbar-popover] [data-columns-row] {
   padding: var(--a-space-1) var(--a-space-2);
-  border-radius: var(--a-radius-sm);
-  color: var(--a-fg-subtle);
-  transition:
-    background var(--a-duration-fast) var(--a-easing),
-    color var(--a-duration-fast) var(--a-easing);
-}
-
-[data-toolbar-popover] [data-filter-row]:hover {
-  background: var(--a-bg-hover);
-  color: var(--a-fg-hover);
-}
-
-[data-toolbar-popover] [data-filter-label] {
-  font-size: var(--a-ui-sm);
-  color: inherit;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
 }
 
 [data-toolbar-popover] [data-filter-input] {
   min-width: 0;
 }
 
-/* ── Sort rows ── */
-
-[data-toolbar-popover] [data-sort-row] {
-  all: unset;
-  cursor: pointer;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: var(--a-space-2);
-  padding: var(--a-space-1) var(--a-space-2);
-  font-size: var(--a-ui-sm);
-  color: var(--a-fg-subtle);
-  border-radius: var(--a-radius-sm);
-  transition:
-    background var(--a-duration-fast) var(--a-easing),
-    color var(--a-duration-fast) var(--a-easing);
-}
-
-[data-toolbar-popover] [data-sort-row]:hover {
-  background: var(--a-bg-hover);
-  color: var(--a-fg-hover);
-}
-
+/* Active sort row: lift the menu-item-ui's bg/fg via CSS-var override —
+   menu-item-ui exposes --menu-item-bg / --menu-item-fg / --menu-item-icon-fg
+   for exactly this. Stays inside the menu-item-ui token contract. */
 [data-toolbar-popover] [data-sort-row][data-active] {
-  color: var(--a-fg);
-  background: var(--a-bg-selected);
+  --menu-item-bg: var(--a-bg-selected);
+  --menu-item-fg: var(--a-fg);
+  --menu-item-icon-fg: var(--a-fg);
   font-weight: var(--a-ui-weight, var(--a-weight-medium));
 }
-
-[data-toolbar-popover] [data-sort-indicator] {
-  color: var(--a-fg-muted);
-}
-
-[data-toolbar-popover] [data-sort-row][data-active] [data-sort-indicator] {
-  color: var(--a-fg);
-}
-
-/* ── Columns rows ── */
-
-[data-toolbar-popover] [data-columns-row] {
-  display: flex;
-  align-items: center;
-  gap: var(--a-space-2);
-  padding: var(--a-space-1) var(--a-space-2);
-  font-size: var(--a-ui-sm);
-  color: var(--a-fg-subtle);
-  border-radius: var(--a-radius-sm);
-  cursor: pointer;
-  transition:
-    background var(--a-duration-fast) var(--a-easing),
-    color var(--a-duration-fast) var(--a-easing);
-}
-
-[data-toolbar-popover] [data-columns-row]:hover {
-  background: var(--a-bg-hover);
-  color: var(--a-fg-hover);
-}