@adia-ai/web-components 0.0.1

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

@@ -0,0 +1,98 @@
+# Generated by scripts/migrate-yamls-to-v1.mjs — migrated to v1 contract.
+# Edit this file; run `npm run build:components` to regenerate a2ui.json.
+$schema: ../../../../scripts/schemas/component.yaml.schema.json
+name: AdiaToggleGroup
+tag: toggle-group-ui
+component: ToggleGroup
+category: navigation
+version: 1
+description: Multi-select button group (unlike segmented which is single-select).
+props:
+  single:
+    description: When true, restrict to one active option (single-select).
+    type: boolean
+    default: false
+  value:
+    description: Comma-separated selected values
+    type: string
+    default: ""
+events:
+  change:
+    description: "Fired when selection changes. detail: { value }"
+slots:
+  default:
+    description: "Default slot — primary child content."
+states:
+  - name: idle
+    description: Default, ready for interaction.
+traits: []
+tokens:
+  --toggle-group-border:
+    description: Border color of the group container
+  --toggle-group-height:
+    description: Height of the group container
+  --toggle-group-radius:
+    description: Border radius of the group container
+  --toggle-option-bg-hover:
+    description: Background color on hover
+  --toggle-option-border:
+    description: Border color between adjacent options
+  --toggle-option-duration:
+    description: Transition duration
+  --toggle-option-easing:
+    description: Transition easing function
+  --toggle-option-fg:
+    description: Default text color
+  --toggle-option-fg-disabled:
+    description: Text color when disabled
+  --toggle-option-fg-hover:
+    description: Text color on hover
+  --toggle-option-focus-ring:
+    description: Focus ring box-shadow
+  --toggle-option-font-size:
+    description: Font size for option text and icons
+  --toggle-option-gap:
+    description: Gap between icon and text within an option
+  --toggle-option-height:
+    description: Min-height of each option
+  --toggle-option-px:
+    description: Horizontal padding of each option
+  --toggle-option-selected-bg:
+    description: Background color when selected
+  --toggle-option-selected-fg:
+    description: Text color when selected
+a2ui:
+  rules: []
+anti_patterns: []
+examples:
+  - name: basic-toggle-group
+    description: Basic ToggleGroup usage
+    a2ui: >-
+      [
+        {
+          "id": "root",
+          "component": "Card",
+          "children": [
+            "sec"
+          ]
+        },
+        {
+          "id": "sec",
+          "component": "Section",
+          "children": [
+            "comp"
+          ]
+        },
+        {
+          "id": "comp",
+          "component": "ToggleGroup",
+          "value": ""
+        }
+      ]
+keywords:
+  - togglegroup
+  - toggle-group
+  - toggle
+  - group
+synonyms: {}
+related: []

package/components/toolbar/toolbar.a2ui.json

@@ -0,0 +1,131 @@
+{
+  "$schema": "https://json-schema.org/draft/2020-12/schema",
+  "$id": "https://adiaui.dev/a2ui/v0_9/components/Toolbar.json",
+  "title": "Toolbar",
+  "description": "Horizontal action bar with automatic overflow. Items that don't fit move to a spillover popover menu.",
+  "type": "object",
+  "allOf": [
+    {
+      "$ref": "common_types.json#/$defs/ComponentCommon"
+    },
+    {
+      "$ref": "common_types.json#/$defs/CatalogComponentCommon"
+    }
+  ],
+  "properties": {
+    "align": {
+      "description": "Item alignment",
+      "type": "string",
+      "default": "start"
+    },
+    "bordered": {
+      "description": "Adds a border around the toolbar for visual separation from surrounding content.",
+      "type": "boolean",
+      "default": false
+    },
+    "component": {
+      "const": "Toolbar"
+    },
+    "gap": {
+      "description": "Gap between items",
+      "type": "string",
+      "default": "sm"
+    },
+    "orientation": {
+      "description": "Layout direction. Vertical mode disables overflow.",
+      "type": "string",
+      "enum": [
+        "horizontal",
+        "vertical"
+      ],
+      "default": "horizontal"
+    },
+    "overflow": {
+      "description": "Overflow behavior",
+      "type": "string",
+      "enum": [
+        "menu",
+        "none"
+      ],
+      "default": "menu"
+    },
+    "variant": {
+      "description": "Visual style. Transparent removes background, border, and padding.",
+      "type": "string",
+      "enum": [
+        "",
+        "transparent"
+      ],
+      "default": ""
+    },
+    "vertical": {
+      "description": "Stack items vertically (alias for orientation=\"vertical\").",
+      "type": "boolean",
+      "default": false
+    }
+  },
+  "required": [
+    "component"
+  ],
+  "unevaluatedProperties": false,
+  "x-adiaui": {
+    "anti_patterns": [],
+    "category": "layout",
+    "events": {},
+    "examples": [
+      {
+        "description": "Toolbar with grouped icon buttons for text formatting, alignment, and undo/redo actions separated by dividers.",
+        "a2ui": "[\n  {\n    \"id\": \"root\",\n    \"component\": \"Toolbar\",\n    \"attrs\": {\n      \"aria-label\": \"Text formatting\"\n    },\n    \"children\": [\n      \"format-group\",\n      \"div1\",\n      \"align-group\",\n      \"div2\",\n      \"history-group\"\n    ]\n  },\n  {\n    \"id\": \"format-group\",\n    \"component\": \"Row\",\n    \"attrs\": {\n      \"gap\": \"xs\"\n    },\n    \"children\": [\n      \"btn-bold\",\n      \"btn-italic\",\n      \"btn-underline\"\n    ]\n  },\n  {\n    \"id\": \"btn-bold\",\n    \"component\": \"Button\",\n    \"attrs\": {\n      \"variant\": \"ghost\",\n      \"icon\": \"bold\",\n      \"aria-label\": \"Bold\",\n      \"size\": \"sm\"\n    }\n  },\n  {\n    \"id\": \"btn-italic\",\n    \"component\": \"Button\",\n    \"attrs\": {\n      \"variant\": \"ghost\",\n      \"icon\": \"italic\",\n      \"aria-label\": \"Italic\",\n      \"size\": \"sm\"\n    }\n  },\n  {\n    \"id\": \"btn-underline\",\n    \"component\": \"Button\",\n    \"attrs\": {\n      \"variant\": \"ghost\",\n      \"icon\": \"underline\",\n      \"aria-label\": \"Underline\",\n      \"size\": \"sm\"\n    }\n  },\n  {\n    \"id\": \"div1\",\n    \"component\": \"Divider\",\n    \"attrs\": {\n      \"orientation\": \"vertical\"\n    }\n  },\n  {\n    \"id\": \"align-group\",\n    \"component\": \"Row\",\n    \"attrs\": {\n      \"gap\": \"xs\"\n    },\n    \"children\": [\n      \"btn-align-left\",\n      \"btn-align-center\",\n      \"btn-align-right\"\n    ]\n  },\n  {\n    \"id\": \"btn-align-left\",\n    \"component\": \"Button\",\n    \"attrs\": {\n      \"variant\": \"ghost\",\n      \"icon\": \"align-left\",\n      \"aria-label\": \"Align left\",\n      \"size\": \"sm\"\n    }\n  },\n  {\n    \"id\": \"btn-align-center\",\n    \"component\": \"Button\",\n    \"attrs\": {\n      \"variant\": \"ghost\",\n      \"icon\": \"align-center\",\n      \"aria-label\": \"Align center\",\n      \"size\": \"sm\"\n    }\n  },\n  {\n    \"id\": \"btn-align-right\",\n    \"component\": \"Button\",\n    \"attrs\": {\n      \"variant\": \"ghost\",\n      \"icon\": \"align-right\",\n      \"aria-label\": \"Align right\",\n      \"size\": \"sm\"\n    }\n  },\n  {\n    \"id\": \"div2\",\n    \"component\": \"Divider\",\n    \"attrs\": {\n      \"orientation\": \"vertical\"\n    }\n  },\n  {\n    \"id\": \"history-group\",\n    \"component\": \"Row\",\n    \"attrs\": {\n      \"gap\": \"xs\"\n    },\n    \"children\": [\n      \"btn-undo\",\n      \"btn-redo\"\n    ]\n  },\n  {\n    \"id\": \"btn-undo\",\n    \"component\": \"Button\",\n    \"attrs\": {\n      \"variant\": \"ghost\",\n      \"icon\": \"undo\",\n      \"aria-label\": \"Undo\",\n      \"size\": \"sm\"\n    }\n  },\n  {\n    \"id\": \"btn-redo\",\n    \"component\": \"Button\",\n    \"attrs\": {\n      \"variant\": \"ghost\",\n      \"icon\": \"redo\",\n      \"aria-label\": \"Redo\",\n      \"size\": \"sm\"\n    }\n  }\n]",
+        "name": "toolbar-buttons"
+      }
+    ],
+    "keywords": [
+      "toolbar",
+      "action-bar",
+      "button-group",
+      "buttons",
+      "actions"
+    ],
+    "name": "AdiaToolbar",
+    "related": [
+      "button",
+      "divider"
+    ],
+    "slots": {},
+    "states": [
+      {
+        "description": "Default, ready for interaction.",
+        "name": "idle"
+      }
+    ],
+    "synonyms": {
+      "action-bar": [
+        "toolbar",
+        "button"
+      ],
+      "actions": [
+        "toolbar",
+        "button",
+        "popover"
+      ],
+      "button-group": [
+        "toolbar",
+        "button",
+        "segmented"
+      ],
+      "buttons": [
+        "toolbar",
+        "button",
+        "tooltip"
+      ],
+      "toolbar": [
+        "toolbar",
+        "button"
+      ]
+    },
+    "tag": "toolbar-ui",
+    "tokens": {},
+    "traits": [],
+    "version": 1
+  }
+}

package/components/toolbar/toolbar.css

@@ -0,0 +1,132 @@
+@scope (toolbar-ui) {
+  :where(:scope) {
+    /* ── Layout ── */
+    --toolbar-gap:    var(--a-space-1);
+    --toolbar-radius: var(--a-radius-md);
+    --toolbar-px:     var(--a-space-1);
+    --toolbar-py:     var(--a-space-1);
+
+    /* ── Colors ── */
+    --toolbar-bg:     transparent;
+    --toolbar-border: var(--a-border-subtle);
+  }
+
+  /* ── Base ── */
+  :scope {
+    box-sizing: border-box;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    gap: var(--toolbar-gap);
+    padding: var(--toolbar-py) var(--toolbar-px);
+    border-radius: var(--toolbar-radius);
+    min-width: 0;        /* allow shrinking within flex/grid parents */
+    overflow: hidden;    /* prevent pre-measurement flash before reflow */
+  }
+
+  /* Direct children must keep their natural size so reflow() can detect overflow.
+     (Without this, flex would shrink them and overflow would never trigger.) */
+  :scope > * {
+    flex: 0 0 auto;
+  }
+
+  /* ── Bordered ── */
+  :scope[bordered] {
+    border: 1px solid var(--toolbar-border);
+    background: var(--toolbar-bg);
+  }
+
+  /* ── Gap variants ── */
+  :scope[gap="sm"] { --toolbar-gap: var(--a-space-1); }
+  :scope[gap="md"] { --toolbar-gap: var(--a-space-2); }
+  :scope[gap="lg"] { --toolbar-gap: var(--a-space-3); }
+
+  /* ── Align ── */
+  :scope[align="start"]         { justify-content: flex-start; }
+  :scope[align="center"]        { justify-content: center; }
+  :scope[align="end"]           { justify-content: flex-end; }
+  :scope[align="space-between"] { justify-content: space-between; }
+  :scope[align="space-around"]  { justify-content: space-around; }
+
+  /* Spillover trigger sits at the end, pushed to the right edge when aligned start. */
+  [data-toolbar-spillover] {
+    margin-inline-start: auto;
+  }
+  :scope[align="end"] [data-toolbar-spillover],
+  :scope[align="center"] [data-toolbar-spillover],
+  :scope[align="space-between"] [data-toolbar-spillover],
+  :scope[align="space-around"] [data-toolbar-spillover] {
+    margin-inline-start: 0;
+  }
+
+  /* Custom elements define their own `display`, so the UA [hidden] default
+     doesn't stick. Force hidden to win. */
+  [hidden] { display: none !important; }
+}
+
+/* ── toolbar-group-ui: atomic inline-flex cluster ── */
+@scope (toolbar-group-ui) {
+  :scope {
+    box-sizing: border-box;
+    display: inline-flex;
+    flex-direction: row;
+    align-items: center;
+    gap: var(--toolbar-gap, var(--a-space-1));
+    min-width: 0;
+  }
+}
+
+/* ── Spillover popover (outside @scope — lives in top layer) ──
+   Closed [popover] elements are display:none per the UA stylesheet.
+   We MUST NOT override `display` at the unqualified selector — doing so
+   makes the closed popover render as a phantom flex item that adds width
+   to the toolbar and breaks the overflow measurement. Style only when open.
+
+   NOTE: Raw --a-* tokens are used below because the popover is promoted
+   to the top layer and cannot inherit --toolbar-* component tokens from
+   the @scope block above. This is the same pattern used by tooltip-ui. */
+toolbar-ui [data-toolbar-spillover-menu]:not(:popover-open) {
+  display: none !important;
+}
+
+toolbar-ui [data-toolbar-spillover-menu]:popover-open {
+  margin: 0;
+  padding: var(--a-space-1);
+  border: 1px solid var(--a-border-subtle);
+  border-radius: var(--a-radius-lg);
+  background: var(--a-bg-subtle);
+  box-shadow: var(--a-shadow-lg);
+  min-width: 10rem;
+  font-family: inherit;
+  font-size: var(--a-ui-size);
+  color: var(--a-fg);
+  /* Stack overflow items as rows (each row can be a group with its own gap). */
+  display: flex;
+  flex-direction: column;
+  gap: var(--a-space-1);
+}
+
+/* Inside the spillover, render as a vertical list — every item (groups and
+   their children) takes a full row. Looks like a menu, not a half-collapsed
+   strip. */
+toolbar-ui [data-toolbar-spillover-menu]:popover-open toolbar-group-ui {
+  display: flex;
+  flex-direction: column;
+  align-items: stretch;
+  width: 100%;
+  gap: var(--a-space-1);
+}
+
+toolbar-ui [data-toolbar-spillover-menu]:popover-open button-ui {
+  width: 100%;
+  justify-content: flex-start;
+}
+
+/* Composite controls that nest inside the toolbar (select-ui, segmented-ui,
+   etc.) should stretch as full-width rows in the spillover list. */
+toolbar-ui [data-toolbar-spillover-menu]:popover-open select-ui,
+toolbar-ui [data-toolbar-spillover-menu]:popover-open segmented-ui,
+toolbar-ui [data-toolbar-spillover-menu]:popover-open input-ui {
+  width: 100%;
+  min-width: 0;
+}