@adia-ai/web-components 0.0.16 → 0.0.18

package/components/drawer/drawer.css

@@ -296,14 +296,13 @@
   [slot="panel"] > [slot="body"][padding] { background: var(--a-canvas-0-scrim); }
 
   /* ═══════ Footer ═══════
-     Flex row for actions. [slot="description"] + [slot="action"] = space-between.
-     Mirrors card-ui footer semantics. */
+     Block default — single non-slotted child (e.g. <grid-ui>, <col-ui>, raw
+     paragraph) stretches full-width naturally. Activate flex-row only when a
+     direct slotted child is present, or there are 2+ children — that's the
+     action-row case. Mirrors card-ui footer semantics. */
 
   [slot="panel"] > [slot="footer"] {
-    display: flex;
-    flex-wrap: wrap;
-    align-items: center;
-    gap: var(--drawer-footer-gap);
+    display: block;
     padding: var(--drawer-footer-pad);
     border-top: 1px solid var(--drawer-divider);
     flex-shrink: 0;
@@ -314,6 +313,14 @@
     z-index: 1;
   }
 
+  [slot="panel"] > [slot="footer"]:has(> [slot]),
+  [slot="panel"] > [slot="footer"]:has(> :nth-child(2)) {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: var(--drawer-footer-gap);
+  }
+
   [slot="panel"] > [slot="footer"][justify="end"] {
     justify-content: flex-end;
   }

package/components/index.js

@@ -38,6 +38,7 @@ export { AdiaCommand } from './command/command.js';
 export { AdiaColorPicker } from './color-picker/color-picker.js';
 export { AdiaNoodles } from './noodles/noodles.js';
 export { AdiaTable } from './table/table.js';
+export { AdiaTableToolbar } from './table-toolbar/table-toolbar.js';
 export { AdiaTimeline, AdiaTimelineItem } from './timeline/timeline.js';
 export { AdiaStepper, AdiaStepperItem } from './stepper/stepper.js';
 export { AdiaSwiper } from './swiper/swiper.js';

package/components/input/input.css

@@ -123,12 +123,21 @@
     pointer-events: none;
   }
 
-  /* Prefix + Suffix */
+  /* Prefix + Suffix — inline-flex so icon-ui (or any non-text affix
+     content) centers vertically within the slot wrapper. Without
+     this, an icon inside a default <span slot="prefix"> sits at the
+     baseline of the field's 1.4 line-box and renders visually below
+     the field's center. With inline-flex + align-items: center the
+     icon centers in the slot box, which is itself centered in the
+     field via the field's align-items: center. */
   [slot="prefix"],
   [slot="suffix"] {
+    display: inline-flex;
+    align-items: center;
     flex-shrink: 0;
     color: var(--input-affix-fg);
     font-size: var(--input-font-size);
+    line-height: 1;
     user-select: none;
     pointer-events: none;
   }

package/components/noodles/noodles.js

@@ -241,12 +241,26 @@ class AdiaNoodles extends AdiaElement {
   }
 
   // ── Port position computation ──────────────────────────────
-
+  // Uses bounding client rects so nested port-bearing descendants
+  // (e.g. inside an absolutely-positioned card wrapper) project
+  // correctly into the noodles-ui coordinate system.
+  //
+  // When an ancestor applies a CSS transform (zoom/pan in a graph
+  // editor), bounding rects are in *screen* pixels — but SVG paths
+  // and port-indicator dots are positioned in *local* (untransformed)
+  // pixels. We detect any ancestor scale by comparing this element's
+  // visible width to its layout width and divide deltas accordingly.
+  // No transform → ratio is 1, no-op.
   #getPortPosition(el, side) {
-    const left = el.offsetLeft;
-    const top = el.offsetTop;
-    const w = el.offsetWidth;
-    const h = el.offsetHeight;
+    const elRect = el.getBoundingClientRect();
+    const myRect = this.getBoundingClientRect();
+    const localScale = (this.offsetWidth && myRect.width)
+      ? (myRect.width / this.offsetWidth)
+      : 1;
+    const left = (elRect.left - myRect.left) / localScale;
+    const top  = (elRect.top  - myRect.top)  / localScale;
+    const w = elRect.width  / localScale;
+    const h = elRect.height / localScale;
 
     switch (side) {
       case 'left':   return { x: left,         y: top + h / 2 };

package/components/option-card/option-card.css

@@ -22,7 +22,11 @@
     --option-card-radio-bg:         var(--a-bg);
     --option-card-radio-border:     var(--a-border);
     --option-card-radio-fill:       var(--a-accent);
-    --option-card-radio-dot:        var(--a-accent-fg);
+    /* Mirror radio.css's --radio-fg-checked recipe: an always-light
+       token rather than --a-accent-fg, which can flip dark depending
+       on theme/scheme combos and produce a near-black inner dot
+       against the accent disc. */
+    --option-card-radio-dot:        var(--a-chrome-light);
 
     /* ── Typography ── */
     --option-card-heading-color:          var(--a-fg);

package/components/segment/segment.css

@@ -57,8 +57,20 @@
       background var(--segment-duration) var(--segment-easing);
   }
 
+  /* Text rendered via ::after so consumers can drive label via [text].
+     Under the parent's `display: flex`, ::after becomes a flex item with
+     `min-width: auto` (= min-content), which would force the segment to
+     overflow when the label is wider than the available track. Setting
+     `min-width: 0` re-enables shrinking, and `text-overflow: ellipsis`
+     has to live here (not on :scope) because text-overflow does not
+     inherit and only applies to the box that owns the inline text. */
   :scope::after {
     content: attr(text);
+    min-width: 0;
+    max-width: 100%;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
   }
 
   /* States */

package/components/select/select.css

@@ -110,9 +110,13 @@
     color: var(--select-fg-subtle);
   }
 
-  /* Leading icon / avatar */
+  /* Leading icon / avatar — inline-flex centers icon content vertically
+     within the slot box (same recipe as input-ui's prefix/suffix). */
   [slot="leading"] {
+    display: inline-flex;
+    align-items: center;
     flex-shrink: 0;
+    line-height: 1;
     --a-icon-size: var(--select-font-size);
     color: var(--select-fg-muted);
   }
@@ -204,7 +208,7 @@ select-ui [role="option"] {
 select-ui [role="option"]:hover,
 select-ui [role="option"][data-focused] {
   background: var(--a-bg-hover);
-  color: var(--a-fg);
+  color: var(--a-fg-hover);
 }
 select-ui [role="option"][aria-selected="true"] {
   color: var(--select-fg-selected);

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

@@ -0,0 +1,212 @@
+{
+  "$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.",
+  "type": "object",
+  "allOf": [
+    {
+      "$ref": "common_types.json#/$defs/ComponentCommon"
+    },
+    {
+      "$ref": "common_types.json#/$defs/CatalogComponentCommon"
+    }
+  ],
+  "properties": {
+    "columns": {
+      "description": "Show the Columns visibility popover button.",
+      "type": "boolean",
+      "default": true
+    },
+    "component": {
+      "const": "TableToolbar"
+    },
+    "count": {
+      "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.",
+      "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..."
+    },
+    "searchable": {
+      "description": "Show the search input.",
+      "type": "boolean",
+      "default": true
+    },
+    "sortable": {
+      "description": "Show the Sort popover button.",
+      "type": "boolean",
+      "default": true
+    },
+    "text": {
+      "description": "Title text shown on the left. Alternative to slotted heading content.",
+      "type": "string",
+      "default": ""
+    },
+    "variant": {
+      "description": "Toolbar visual variant. `default` renders bare on parent surface; `card` adds the same chrome as a card-ui header.",
+      "type": "string",
+      "enum": [
+        "default",
+        "card"
+      ],
+      "default": "default"
+    }
+  },
+  "required": [
+    "component"
+  ],
+  "unevaluatedProperties": false,
+  "x-adiaui": {
+    "anti_patterns": [],
+    "category": "agent",
+    "events": {
+      "columns-change": {
+        "description": "Column visibility changed. Detail: { hiddenColumns }."
+      },
+      "filter-change": {
+        "description": "Filter set changed. Detail: { filters }."
+      },
+      "search": {
+        "description": "Debounced search query change. Detail: { value }."
+      },
+      "sort-change": {
+        "description": "Sort state changed. Detail: { sortState }."
+      }
+    },
+    "examples": [
+      {
+        "description": "Members table with filter/sort/columns/search wired to a sibling table-ui.",
+        "a2ui": "[\n  {\"id\": \"root\", \"component\": \"Column\", \"gap\": \"3\", \"children\": [\"bar\", \"card\"]},\n  {\"id\": \"bar\", \"component\": \"TableToolbar\", \"for\": \"members\", \"text\": \"All Employees\", \"count\": \"32\"},\n  {\"id\": \"card\", \"component\": \"Card\", \"children\": [\"sec\"]},\n  {\"id\": \"sec\", \"component\": \"Section\", \"bleed\": true, \"children\": [\"tbl\"]},\n  {\"id\": \"tbl\", \"component\": \"Table\", \"id\": \"members\", \"sortable\": true, \"raw\": true}\n]",
+        "name": "members-toolbar"
+      }
+    ],
+    "keywords": [
+      "table-toolbar",
+      "data-grid",
+      "data-grid-toolbar",
+      "filter",
+      "sort",
+      "columns",
+      "search",
+      "directory",
+      "admin",
+      "backoffice",
+      "listing",
+      "records"
+    ],
+    "name": "AdiaTableToolbar",
+    "related": [
+      "table",
+      "search",
+      "button",
+      "badge",
+      "popover"
+    ],
+    "slots": {
+      "default": {
+        "description": "Optional title content. Used when [text] is empty."
+      },
+      "actions": {
+        "description": "Trailing action area — primary buttons (e.g. \"New row\") rendered after the search input."
+      }
+    },
+    "states": [
+      {
+        "description": "Default, ready for interaction.",
+        "name": "idle"
+      }
+    ],
+    "synonyms": {
+      "columns": [
+        "table-toolbar",
+        "table"
+      ],
+      "data-grid": [
+        "table-toolbar",
+        "table"
+      ],
+      "data-grid-toolbar": [
+        "table-toolbar",
+        "table"
+      ],
+      "filter": [
+        "table-toolbar",
+        "table"
+      ],
+      "sort": [
+        "table-toolbar",
+        "table"
+      ]
+    },
+    "tag": "table-toolbar-ui",
+    "tokens": {
+      "--table-toolbar-bg": {
+        "description": "Toolbar background (variant=card)"
+      },
+      "--table-toolbar-border": {
+        "description": "Toolbar border color (variant=card)"
+      },
+      "--table-toolbar-gap": {
+        "description": "Gap between toolbar clusters"
+      },
+      "--table-toolbar-popover-bg": {
+        "description": "Popover background"
+      },
+      "--table-toolbar-popover-border": {
+        "description": "Popover border"
+      },
+      "--table-toolbar-popover-fg": {
+        "description": "Popover text color"
+      },
+      "--table-toolbar-popover-gap": {
+        "description": "Popover content gap"
+      },
+      "--table-toolbar-popover-min": {
+        "description": "Popover minimum width"
+      },
+      "--table-toolbar-popover-pad": {
+        "description": "Popover padding"
+      },
+      "--table-toolbar-popover-radius": {
+        "description": "Popover radius"
+      },
+      "--table-toolbar-popover-shadow": {
+        "description": "Popover shadow"
+      },
+      "--table-toolbar-px": {
+        "description": "Horizontal padding"
+      },
+      "--table-toolbar-py": {
+        "description": "Vertical padding"
+      },
+      "--table-toolbar-radius": {
+        "description": "Toolbar corner radius (variant=card)"
+      },
+      "--table-toolbar-title-fg": {
+        "description": "Title text color"
+      },
+      "--table-toolbar-title-size": {
+        "description": "Title font size"
+      },
+      "--table-toolbar-title-weight": {
+        "description": "Title font weight"
+      }
+    },
+    "traits": [],
+    "version": 1
+  }
+}

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

@@ -0,0 +1,269 @@
+@scope (table-toolbar-ui) {
+  :where(:scope) {
+    /* ── Layout ── */
+    --table-toolbar-gap:           var(--a-space-3);
+    --table-toolbar-py:            var(--a-space-2);
+    --table-toolbar-px:            0;
+    --table-toolbar-cluster-gap:   var(--a-space-2);
+
+    /* ── Surface ── */
+    --table-toolbar-bg:            transparent;
+    --table-toolbar-border:        transparent;
+    --table-toolbar-radius:        var(--a-radius-lg);
+
+    /* ── Title ── */
+    --table-toolbar-title-fg:      var(--a-fg-strong);
+    --table-toolbar-title-size:    var(--a-ui-lg);
+    --table-toolbar-title-weight:  var(--a-weight-medium);
+    --table-toolbar-title-gap:     var(--a-space-2);
+
+    /* ── Search ── */
+    --table-toolbar-search-min:    14rem;
+    --table-toolbar-search-max:    22rem;
+
+    /* ── Popover ── */
+    --table-toolbar-popover-bg:           var(--a-canvas);
+    --table-toolbar-popover-fg:           var(--a-canvas-text);
+    --table-toolbar-popover-border:       var(--a-border);
+    --table-toolbar-popover-radius:       var(--a-radius-lg);
+    --table-toolbar-popover-shadow:       var(--a-shadow-lg);
+    --table-toolbar-popover-pad:          var(--a-space-2);
+    --table-toolbar-popover-gap:          var(--a-space-1);
+    --table-toolbar-popover-min:          16rem;
+    --table-toolbar-popover-head-fg:      var(--a-fg-muted);
+    --table-toolbar-popover-head-size:    var(--a-ui-tiny);
+    --table-toolbar-popover-head-pad:     var(--a-space-2);
+    --table-toolbar-popover-row-pad:      var(--a-space-2);
+    --table-toolbar-popover-row-radius:   var(--a-radius-sm);
+    --table-toolbar-popover-row-bg-hover: var(--a-bg-hover);
+    --table-toolbar-popover-input-bg:     var(--a-bg-subtle);
+    --table-toolbar-popover-input-border: var(--a-border-subtle);
+    --table-toolbar-popover-input-radius: var(--a-radius-sm);
+    --table-toolbar-popover-input-py:     var(--a-space-1);
+    --table-toolbar-popover-input-px:     var(--a-space-2);
+    --table-toolbar-popover-input-size:   var(--a-ui-sm);
+    --table-toolbar-popover-action-fg:    var(--a-accent);
+    --table-toolbar-popover-action-size:  var(--a-ui-sm);
+  }
+
+  /* ═══════ Base ═══════ */
+
+  :scope {
+    box-sizing: border-box;
+    display: block;
+    color: var(--a-fg);
+  }
+
+  [data-toolbar] {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    gap: var(--table-toolbar-gap);
+    padding: var(--table-toolbar-py) var(--table-toolbar-px);
+    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);
+  }
+
+  /* ═══════ Title cluster ═══════ */
+
+  [data-title] {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--table-toolbar-title-gap);
+    flex: 0 0 auto;
+    min-width: 0;
+  }
+
+  [data-heading] {
+    font-size: var(--table-toolbar-title-size);
+    font-weight: var(--table-toolbar-title-weight);
+    color: var(--table-toolbar-title-fg);
+    line-height: 1.2;
+  }
+
+  [data-count-badge][hidden] { display: none; }
+
+  /* ═══════ Controls cluster ═══════ */
+
+  [data-controls] {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--table-toolbar-cluster-gap);
+    flex: 0 0 auto;
+  }
+
+  [data-toolbar-btn][hidden] { display: none; }
+
+  /* ═══════ Search ═══════ */
+
+  [data-search] {
+    flex: 1 1 var(--table-toolbar-search-min);
+    min-width: 0;
+    max-width: var(--table-toolbar-search-max);
+    margin-inline-start: auto;
+  }
+
+  [data-search][hidden] { display: none; }
+
+  /* ═══════ Actions slot ═══════ */
+
+  [data-actions] {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--table-toolbar-cluster-gap);
+    flex: 0 0 auto;
+  }
+
+  [data-actions]:empty { display: none; }
+}
+
+/* ═══════ Popover (top layer — outside @scope) ═══════
+   Popovers escape to the top layer and cannot inherit --table-toolbar-* tokens
+   from the @scope block. Style with raw --a-* tokens — same pattern used by
+   tooltip-ui and toolbar-ui's spillover menu. */
+
+[data-toolbar-popover]:not(:popover-open) {
+  display: none !important;
+}
+
+[data-toolbar-popover]:popover-open {
+  margin: 0;
+  padding: var(--a-space-1);
+  background: var(--a-canvas-bright);
+  color: var(--a-fg);
+  border: 1px solid var(--a-ui-border);
+  border-radius: var(--a-radius);
+  box-shadow: var(--a-shadow-lg);
+  min-width: 16rem;
+  font-family: inherit;
+  font-size: var(--a-ui-size);
+  display: flex;
+  flex-direction: column;
+  gap: var(--a-space-1);
+}
+
+[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));
+}
+
+[data-toolbar-popover] [data-popover-list] {
+  display: flex;
+  flex-direction: column;
+  gap: var(--a-space-1);
+  max-height: 22rem;
+  overflow-y: auto;
+}
+
+[data-toolbar-popover] [data-popover-empty] {
+  display: block;
+  padding: var(--a-space-3) var(--a-space-2);
+  text-align: center;
+}
+
+[data-toolbar-popover] [data-popover-action] {
+  margin-top: var(--a-space-1);
+  border-top: 1px solid var(--a-border-subtle);
+  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);
+  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);
+}
+
+[data-toolbar-popover] [data-sort-row][data-active] {
+  color: var(--a-fg);
+  background: var(--a-bg-selected);
+  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);
+}