@adia-ai/web-components 0.0.16 → 0.0.18

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

@@ -0,0 +1,160 @@
+$schema: ../../../../scripts/schemas/component.yaml.schema.json
+name: AdiaTableToolbar
+tag: table-toolbar-ui
+component: TableToolbar
+category: agent
+version: 1
+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.
+props:
+  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: ""
+    reflect: true
+  text:
+    description: Title text shown on the left. Alternative to slotted heading content.
+    type: string
+    default: ""
+  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
+    reflect: true
+  sortable:
+    description: Show the Sort popover button.
+    type: boolean
+    default: true
+    reflect: true
+  columns:
+    description: Show the Columns visibility popover button.
+    type: boolean
+    default: true
+    reflect: true
+  searchable:
+    description: Show the search input.
+    type: boolean
+    default: true
+    reflect: true
+  placeholder:
+    description: Placeholder text for the search input.
+    type: string
+    default: Search...
+  variant:
+    description: Toolbar visual variant. `default` renders bare on parent surface; `card` adds the same chrome as a card-ui header.
+    type: string
+    default: default
+    enum:
+      - default
+      - card
+    reflect: true
+events:
+  search:
+    description: "Debounced search query change. Detail: { value }."
+  filter-change:
+    description: "Filter set changed. Detail: { filters }."
+  sort-change:
+    description: "Sort state changed. Detail: { sortState }."
+  columns-change:
+    description: "Column visibility changed. Detail: { hiddenColumns }."
+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:
+  - name: idle
+    description: Default, ready for interaction.
+traits: []
+tokens:
+  --table-toolbar-gap:
+    description: Gap between toolbar clusters
+  --table-toolbar-py:
+    description: Vertical padding
+  --table-toolbar-px:
+    description: Horizontal padding
+  --table-toolbar-bg:
+    description: Toolbar background (variant=card)
+  --table-toolbar-border:
+    description: Toolbar border color (variant=card)
+  --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
+  --table-toolbar-popover-bg:
+    description: Popover background
+  --table-toolbar-popover-fg:
+    description: Popover text color
+  --table-toolbar-popover-border:
+    description: Popover border
+  --table-toolbar-popover-radius:
+    description: Popover radius
+  --table-toolbar-popover-shadow:
+    description: Popover shadow
+  --table-toolbar-popover-pad:
+    description: Popover padding
+  --table-toolbar-popover-gap:
+    description: Popover content gap
+  --table-toolbar-popover-min:
+    description: Popover minimum width
+a2ui:
+  rules: []
+anti_patterns: []
+examples:
+  - name: members-toolbar
+    description: Members table with filter/sort/columns/search wired to a sibling table-ui.
+    a2ui: >-
+      [
+        {"id": "root", "component": "Column", "gap": "3", "children": ["bar", "card"]},
+        {"id": "bar", "component": "TableToolbar", "for": "members", "text": "All Employees", "count": "32"},
+        {"id": "card", "component": "Card", "children": ["sec"]},
+        {"id": "sec", "component": "Section", "bleed": true, "children": ["tbl"]},
+        {"id": "tbl", "component": "Table", "id": "members", "sortable": true, "raw": true}
+      ]
+keywords:
+  - table-toolbar
+  - data-grid
+  - data-grid-toolbar
+  - filter
+  - sort
+  - columns
+  - search
+  - directory
+  - admin
+  - backoffice
+  - listing
+  - records
+synonyms:
+  data-grid:
+    - table-toolbar
+    - table
+  data-grid-toolbar:
+    - table-toolbar
+    - table
+  filter:
+    - table-toolbar
+    - table
+  sort:
+    - table-toolbar
+    - table
+  columns:
+    - table-toolbar
+    - table
+related:
+  - table
+  - search
+  - button
+  - badge
+  - popover

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@adia-ai/web-components",
-  "version": "0.0.16",
+  "version": "0.0.18",
   "description": "AdiaUI web components — vanilla custom elements. A2UI runtime (renderer, registry, streams, wiring) lives in @adia-ai/a2ui-utils.",
   "type": "module",
   "exports": {

package/patterns/app-nav-group/app-nav-group.css

@@ -208,7 +208,7 @@ app-nav-group-ui [slot="popover"] {
   margin: 0;
   padding: var(--a-space-1);
   border: 1px solid var(--a-border-subtle);
-  border-radius: var(--a-radius-lg);
+  border-radius: var(--a-radius);
   background: var(--a-bg-subtle);
   box-shadow: var(--a-shadow-lg);
   min-width: 160px;
@@ -228,7 +228,7 @@ app-nav-group-ui [slot="popover-label"] {
 
 app-nav-group-ui [slot="popover"] [role="option"] {
   padding: var(--a-space-1) var(--a-space-2);
-  border-radius: var(--a-radius-sm);
+  border-radius: var(--a-radius);
   color: var(--a-fg-subtle);
   cursor: pointer;
   white-space: nowrap;

package/patterns/app-shell/css/app-shell.tokens.css

@@ -45,6 +45,10 @@
 
   /* Section labels (e.g. "WORKSPACE") — maps to "kicker" typography role */
   --page-section-gap:             var(--a-space-6);
+  /* Within-section block rhythm (h2 / [data-note] / code-ui / artifact stack). */
+  --page-block-gap:               var(--a-space-4);
+  /* h2 → immediately-following deck/subtitle pair (auto-stamped <header>). */
+  --page-deck-gap:                var(--a-space-1);
   --page-section-size:            var(--a-kicker-size);
   --page-section-weight:          var(--a-kicker-weight);
   --page-section-leading:         var(--a-kicker-leading);
@@ -82,7 +86,7 @@
   --nav-easing:               var(--a-easing);
   --nav-label-px:             var(--a-space-2);
   --nav-label-py:             var(--a-space-1);
-  --nav-label-font-size:      var(--a-ui-tiny);
+  --nav-label-font-size:      var(--a-kicker-sm);
   --nav-label-weight:         var(--a-weight-medium);
   --nav-label-fg:             var(--a-fg-muted);
   --nav-divider-bg:           var(--a-border-subtle);

package/patterns/section-nav/section-nav.css

@@ -12,10 +12,10 @@
     --section-nav-font-size: var(--a-ui-size);
 
     --section-nav-heading-fg:     var(--a-fg-muted);
-    --section-nav-heading-size:   var(--a-ui-tiny);
+    --section-nav-heading-size:   var(--a-kicker-sm);
     --section-nav-heading-weight: var(--a-weight-medium);
     --section-nav-heading-pad-x:  var(--a-space-2);
-    --section-nav-heading-pad-y:  0;
+    --section-nav-heading-pad-y:  var(--a-space-3) var(--a-space-1);
   }
 
   :scope {
@@ -47,7 +47,8 @@
   :scope[heading]:not([heading=""])::before {
     content: attr(heading);
     display: block;
-    padding: var(--section-nav-heading-pad-y) var(--section-nav-heading-pad-x);
+    padding-inline: var(--section-nav-heading-pad-x);
+    padding-block: var(--section-nav-heading-pad-y);
     font-size: var(--section-nav-heading-size);
     font-weight: var(--section-nav-heading-weight);
     color: var(--section-nav-heading-fg);

package/styles/colors/semantics.css

@@ -105,7 +105,7 @@
   --a-bg-subtle:       var(--a-canvas-1);
   --a-bg-muted:        var(--a-canvas-2);
   --a-bg-strong:       var(--a-canvas-4);
-  --a-bg-hover:        var(--a-canvas-3);
+  --a-bg-hover:        var(--a-canvas-2);
   --a-bg-active:       var(--a-canvas-pressed);
   --a-bg-selected:     var(--a-canvas-0-scrim);
   --a-bg-disabled:     var(--a-canvas-muted);
@@ -486,7 +486,7 @@
   --a-ui-bg:               var(--a-canvas-0-scrim);
   --a-ui-bg-hover:         var(--a-canvas-2-scrim);
   --a-ui-bg-active:        var(--a-canvas-0);
-  --a-ui-bg-selected:      var(--a-canvas-bright);
+  --a-ui-bg-selected:      var(--a-canvas-0-scrim);
   --a-ui-bg-disabled:      var(--a-canvas-1);
   --a-ui-bg-invalid:       var(--a-danger-muted);
 
@@ -494,7 +494,7 @@
   --a-ui-text-hover:       var(--a-fg-strong);
   --a-ui-text-active:      var(--a-fg-strong);
   --a-ui-text-selected:    var(--a-fg-strong);
-  --a-ui-text-placeholder: var(--a-fg-subtle);
+  --a-ui-text-placeholder: var(--a-fg-muted);
   --a-ui-text-subtle:      var(--a-fg-subtle);
   --a-ui-text-muted:       var(--a-fg-muted);
   --a-ui-text-disabled:    var(--a-fg-disabled);

package/styles/components.css

@@ -39,6 +39,7 @@
 @import "../components/color-picker/color-picker.css";
 @import "../components/noodles/noodles.css";
 @import "../components/table/table.css";
+@import "../components/table-toolbar/table-toolbar.css";
 @import "../components/timeline/timeline.css";
 @import "../components/upload/upload.css";
 @import "../components/card/card.css";

package/styles/typography.css

@@ -193,9 +193,9 @@
   /* kicker — short label above a title (eyebrow/overline) */
   --a-kicker-family: var(--a-font-family-ui);
   --a-kicker-weight: var(--a-weight-semibold);
-  --a-kicker-sm: 13px;
-  --a-kicker-md: 14px;
-  --a-kicker-lg: 15px;
+  --a-kicker-sm: 11px;
+  --a-kicker-md: 12px;
+  --a-kicker-lg: 13px;
   --a-kicker-size: var(--a-kicker-md);
   --a-kicker-leading: var(--a-font-leading-normal);
   --a-kicker-tracking: var(--a-font-tracking-wider);