@adia-ai/web-components 0.6.33 → 0.6.35

package/components/segment/segment.css

@@ -2,35 +2,35 @@
    (Flavor B — attribute-removal restyle) both fail inside `@scope`.
    Selectors moved out. See docs/BROWSER-COMPAT.md §3a. */
 segment-ui:not([disabled]):not([selected]):hover {
-  color: var(--segment-fg-hover);
+  color: var(--segment-fg-hover, var(--segment-fg-hover-default));
 }
 segment-ui[selected] {
-  color: var(--segment-fg-selected);
+  color: var(--segment-fg-selected, var(--segment-fg-selected-default));
 }
 
 @scope (segment-ui) {
   :where(:scope) {
     /* ── Layout ── */
-    --segment-px:              var(--a-ui-px);
-    --segment-gap:             var(--a-space-1);
-    --segment-radius:          calc(var(--a-radius) - 2px);
+    --segment-px-default:              var(--a-ui-px);
+    --segment-gap-default:             var(--a-space-1);
+    --segment-radius-default:          calc(var(--a-radius) - 2px);
 
     /* ── Typography ── */
-    --segment-font-size:       var(--a-ui-size);
-    --segment-font-weight:     var(--a-ui-weight);
+    --segment-font-size-default:       var(--a-ui-size);
+    --segment-font-weight-default:     var(--a-ui-weight);
 
     /* ── Colors ── */
-    --segment-fg:              var(--a-ui-text-subtle);
-    --segment-fg-hover:        var(--a-ui-text-hover);
-    --segment-fg-selected:     var(--a-chrome-dark);
-    --segment-fg-disabled:     var(--a-ui-text-disabled);
+    --segment-fg-default:              var(--a-ui-text-subtle);
+    --segment-fg-hover-default:        var(--a-ui-text-hover);
+    --segment-fg-selected-default:     var(--a-chrome-dark);
+    --segment-fg-disabled-default:     var(--a-ui-text-disabled);
 
     /* ── Transition ── */
-    --segment-duration:        var(--a-duration-fast);
-    --segment-easing:          var(--a-easing);
+    --segment-duration-default:        var(--a-duration-fast);
+    --segment-easing-default:          var(--a-easing);
 
     /* ── Focus ── */
-    --segment-focus-ring:      var(--a-focus-ring);
+    --segment-focus-ring-default:      var(--a-focus-ring);
   }
 
   :scope {
@@ -41,15 +41,15 @@ segment-ui[selected] {
     justify-content: center;
     align-self: stretch;
     min-width: 0;
-    gap: var(--segment-gap);
+    gap: var(--segment-gap, var(--segment-gap-default));
 
-    padding-inline: var(--segment-px);
+    padding-inline: var(--segment-px, var(--segment-px-default));
 
     font: inherit;
-    font-size: var(--segment-font-size);
-    font-weight: var(--segment-font-weight);
+    font-size: var(--segment-font-size, var(--segment-font-size-default));
+    font-weight: var(--segment-font-weight, var(--segment-font-weight-default));
     line-height: 1;
-    color: var(--segment-fg);
+    color: var(--segment-fg, var(--segment-fg-default));
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
@@ -59,12 +59,12 @@ segment-ui[selected] {
     z-index: 1;
     cursor: pointer;
     user-select: none;
-    border-radius: var(--segment-radius);
+    border-radius: var(--segment-radius, var(--segment-radius-default));
     background: transparent;
 
     transition:
-      color var(--segment-duration) var(--segment-easing),
-      background var(--segment-duration) var(--segment-easing);
+      color var(--segment-duration, var(--segment-duration-default)) var(--segment-easing, var(--segment-easing-default)),
+      background var(--segment-duration, var(--segment-duration-default)) var(--segment-easing, var(--segment-easing-default));
   }
 
   /* Text rendered via ::after so consumers can drive label via [text].
@@ -93,11 +93,11 @@ segment-ui[selected] {
 
   :scope:focus-visible {
     outline: none;
-    box-shadow: var(--segment-focus-ring);
+    box-shadow: var(--segment-focus-ring, var(--segment-focus-ring-default));
   }
 
   :scope[disabled] {
-    color: var(--segment-fg-disabled);
+    color: var(--segment-fg-disabled, var(--segment-fg-disabled-default));
     cursor: not-allowed;
     pointer-events: none;
   }

package/components/segment/segment.js

@@ -10,7 +10,7 @@
  */
 
 import { defineIfFree } from '../../core/register.js';
-import { UISegment } from './class.js';
+import { UISegment } from './segment.class.js';
 
 defineIfFree('segment-ui', UISegment);
 

package/components/segmented/segmented.css

@@ -1,26 +1,26 @@
 @scope (segmented-ui) {
   :where(:scope) {
     /* ── Layout ── */
-    --segmented-height:           var(--a-size);
+    --segmented-height-default:           var(--a-size);
     /* Component-intrinsic visual constants; no --a-space-* equivalent */
-    --segmented-padding:          2px;
-    --segmented-border-width:     0px;
-    --segmented-inset:            calc(var(--segmented-padding) + var(--segmented-border-width));
-    --segmented-radius:           var(--a-radius);
+    --segmented-padding-default:          2px;
+    --segmented-border-width-default:     0px;
+    --segmented-inset-default:            calc(var(--segmented-padding, var(--segmented-padding-default)) + var(--segmented-border-width, var(--segmented-border-width-default)));
+    --segmented-radius-default:           var(--a-radius);
 
     /* ── Colors ── */
-    --segmented-bg:               var(--a-ui-bg);
-    --segmented-border:           transparent;
-    --segmented-indicator-bg:     var(--a-chrome-light);
-    --segmented-indicator-shadow: var(--a-shadow-sm);
-    --segmented-indicator-radius: calc(var(--segmented-radius) - var(--segmented-inset));
+    --segmented-bg-default:               var(--a-ui-bg);
+    --segmented-border-default:           transparent;
+    --segmented-indicator-bg-default:     var(--a-chrome-light);
+    --segmented-indicator-shadow-default: var(--a-shadow-sm);
+    --segmented-indicator-radius-default: calc(var(--segmented-radius, var(--segmented-radius-default)) - var(--segmented-inset, var(--segmented-inset-default)));
 
     /* ── Typography ── */
-    --segmented-font-size:        var(--a-ui-size);
+    --segmented-font-size-default:        var(--a-ui-size);
 
     /* ── Transition ── */
-    --segmented-duration:         var(--a-duration);
-    --segmented-easing:           var(--a-easing-out);
+    --segmented-duration-default:         var(--a-duration);
+    --segmented-easing-default:           var(--a-easing-out);
 
     text-align: start;  /* §text-align-reset — blocks inheritance from centered ancestors */
 }
@@ -46,13 +46,13 @@
     isolation: isolate;
     overflow: hidden;
 
-    min-height: var(--segmented-height);
-    padding: var(--segmented-padding);
-    font-size: var(--segmented-font-size);
+    min-height: var(--segmented-height, var(--segmented-height-default));
+    padding: var(--segmented-padding, var(--segmented-padding-default));
+    font-size: var(--segmented-font-size, var(--segmented-font-size-default));
 
-    background: var(--segmented-bg);
-    border: var(--segmented-border-width) solid var(--segmented-border);
-    border-radius: var(--segmented-radius);
+    background: var(--segmented-bg, var(--segmented-bg-default));
+    border: var(--segmented-border-width, var(--segmented-border-width-default)) solid var(--segmented-border, var(--segmented-border-default));
+    border-radius: var(--segmented-radius, var(--segmented-radius-default));
   }
 
   /* -- Indicator (hidden until first selection) -- */
@@ -63,16 +63,16 @@
   :scope[data-indicator-ready] > [data-indicator] {
     display: block;
     position: absolute;
-    inset: var(--segmented-inset);
+    inset: var(--segmented-inset, var(--segmented-inset-default));
     right: auto;
-    width: calc((100% - var(--segmented-inset) * 2) / var(--_segment-count));
+    width: calc((100% - var(--segmented-inset, var(--segmented-inset-default)) * 2) / var(--_segment-count));
 
-    background: var(--segmented-indicator-bg);
-    border-radius: var(--segmented-indicator-radius);
-    box-shadow: var(--segmented-indicator-shadow);
+    background: var(--segmented-indicator-bg, var(--segmented-indicator-bg-default));
+    border-radius: var(--segmented-indicator-radius, var(--segmented-indicator-radius-default));
+    box-shadow: var(--segmented-indicator-shadow, var(--segmented-indicator-shadow-default));
     pointer-events: none;
 
-    transition: transform var(--segmented-duration) var(--segmented-easing);
+    transition: transform var(--segmented-duration, var(--segmented-duration-default)) var(--segmented-easing, var(--segmented-easing-default));
   }
 
   /* Size handled by universal [size] attribute system. */

package/components/segmented/segmented.js

@@ -10,7 +10,7 @@
  */
 
 import { defineIfFree } from '../../core/register.js';
-import { UISegmented } from './class.js';
+import { UISegmented } from './segmented.class.js';
 
 defineIfFree('segmented-ui', UISegmented);
 

package/components/select/select.a2ui.json

@@ -2,7 +2,7 @@
   "$schema": "https://json-schema.org/draft/2020-12/schema",
   "$id": "https://adiaui.dev/a2ui/v0_9/components/Select.json",
   "title": "Select",
-  "description": "Single-select dropdown primitive — the canonical AdiaUI select\ncontrol. Form-bearing via UIFormElement: [name], [value],\n[required], [disabled], fires `change`. Options via native\n<option> / <optgroup> children, programmatic `.options` array, or\nJSON [data-options] (hydrated by <editor-shell>'s wireSelects).\nUse for single-select with > 4 options; for ≤ 4 options use\n<segmented-ui> or <radio-ui>. Multi-select via [multiple searchable].\n",
+  "description": "Single- and multi-select dropdown primitive — the canonical AdiaUI\nselect control. Form-bearing via UIFormElement: [name], [value],\n[required], [disabled], fires `change`. Options via native\n<option> / <optgroup> children, programmatic `.options` array, or\nJSON [data-options] (hydrated by <editor-shell>'s wireSelects).\nUse for single-select with > 4 options; for ≤ 4 options use\n<segmented-ui> or <radio-ui>. Multi-select via [multiple]: trigger\nrenders <tag-ui> chips per selection, popover shows checkbox-style\noption list, Backspace removes the last chip, [select-all] adds\nbulk controls, [max-chips] caps the visible chip count with a\n\"+N more\" pill. Form value stays a comma-separated string under\n[name] for native <form> compatibility (parse with .split(',')).\n",
   "type": "object",
   "allOf": [
     {
@@ -23,6 +23,11 @@
       "type": "string",
       "default": ""
     },
+    "clearable": {
+      "description": "Multi-select only. Adds a clear-all `x` affordance to the trigger\nwhen at least one chip is present. Click empties value and fires\n`change`.\n",
+      "type": "boolean",
+      "default": false
+    },
     "component": {
       "const": "Select"
     },
@@ -61,18 +66,33 @@
       "type": "string",
       "default": ""
     },
+    "max": {
+      "description": "Multi-select only. Maximum allowed selections. Toggling past the\ncap is suppressed; the `invalid` event fires with reason=\"max\".\n`0` (default) = unlimited.\n",
+      "type": "number",
+      "default": 0
+    },
+    "max-chips": {
+      "description": "Multi-select only. Caps the number of chips visible in the\ntrigger. When `value.length > max-chips`, the first N chips\nrender plus a \"+M more\" pill that opens the popover on click.\n`0` (default) = unlimited.\n",
+      "type": "number",
+      "default": 0
+    },
     "maxlength": {
       "description": "Maximum character length for validation",
       "type": "number",
       "default": null
     },
+    "min": {
+      "description": "Multi-select only. Minimum required selections. Below this floor\nthe host's form validity goes invalid (valueMissing) and the\n`invalid` event fires.\n",
+      "type": "number",
+      "default": 0
+    },
     "minlength": {
       "description": "Minimum character length for validation",
       "type": "number",
       "default": null
     },
     "multiple": {
-      "description": "Enables multi-select (comma-separated values)",
+      "description": "Enables multi-select. Trigger renders <tag-ui> chips per selection\n(not comma-separated text); popover renders checkbox-style option\nrows where clicks toggle without closing; Backspace from the\ntrigger removes the last chip. Form value remains comma-separated\nunder [name] for native <form> compatibility.\n",
       "type": "boolean",
       "default": false
     },
@@ -111,6 +131,11 @@
       "type": "boolean",
       "default": false
     },
+    "select-all": {
+      "description": "Multi-select only. Renders a \"Select all\" / \"Clear\" control row\nabove the option list. Click selects every non-disabled option;\nwhen already all selected, click clears.\n",
+      "type": "boolean",
+      "default": false
+    },
     "size": {
       "description": "Sizing scale via universal `[size]` attribute system (packages/web-components/styles/tokens.css). Matches Input's sizing tokens so a Select rendered alongside an Input feels coherent in a form row.",
       "type": "string",
@@ -146,11 +171,15 @@
     "anti_patterns": [],
     "category": "input",
     "composes": [
-      "icon-ui"
+      "icon-ui",
+      "tag-ui"
     ],
     "events": {
       "change": {
         "description": "Fired when selected value changes"
+      },
+      "invalid": {
+        "description": "Multi-select only. Fired when a toggle is suppressed by [min] or\n[max] constraints. detail = { value, reason: 'min' | 'max' }.\n"
       }
     },
     "examples": [
@@ -159,6 +188,11 @@
         "a2ui": "[\n  {\n    \"id\": \"root\",\n    \"component\": \"Card\",\n    \"children\": [\n      \"hdr\",\n      \"photo-sec\",\n      \"settings-sec\",\n      \"ftr\"\n    ]\n  },\n  {\n    \"id\": \"hdr\",\n    \"component\": \"Header\",\n    \"children\": [\n      \"hdr-title\",\n      \"hdr-desc\"\n    ]\n  },\n  {\n    \"id\": \"hdr-title\",\n    \"component\": \"Text\",\n    \"slot\": \"heading\",\n    \"textContent\": \"Bleed Design Settings\",\n    \"variant\": \"section\"\n  },\n  {\n    \"id\": \"hdr-desc\",\n    \"component\": \"Text\",\n    \"slot\": \"description\",\n    \"textContent\": \"Configure bleed margins, upload artwork, and preview before approval.\",\n    \"variant\": \"body\"\n  },\n  {\n    \"id\": \"photo-sec\",\n    \"component\": \"Section\",\n    \"children\": [\n      \"photo-col\"\n    ]\n  },\n  {\n    \"id\": \"photo-col\",\n    \"component\": \"Column\",\n    \"children\": [\n      \"photo-label\",\n      \"photo-img\",\n      \"photo-btn\"\n    ],\n    \"gap\": \"3\"\n  },\n  {\n    \"id\": \"photo-label\",\n    \"component\": \"Text\",\n    \"textContent\": \"Artwork Upload\",\n    \"variant\": \"label\"\n  },\n  {\n    \"id\": \"photo-img\",\n    \"component\": \"Image\",\n    \"src\": \"https://picsum.photos/400/200\",\n    \"aspect\": \"2/1\"\n  },\n  {\n    \"id\": \"photo-btn\",\n    \"component\": \"Button\",\n    \"text\": \"Upload Photo\",\n    \"variant\": \"secondary\"\n  },\n  {\n    \"id\": \"settings-sec\",\n    \"component\": \"Section\",\n    \"children\": [\n      \"settings-col\"\n    ]\n  },\n  {\n    \"id\": \"settings-col\",\n    \"component\": \"Column\",\n    \"children\": [\n      \"bleed-mode\",\n      \"bleed-margin\",\n      \"bleed-unit\",\n      \"approved\"\n    ],\n    \"gap\": \"4\"\n  },\n  {\n    \"id\": \"bleed-mode\",\n    \"component\": \"Select\",\n    \"label\": \"Bleed Mode\",\n    \"name\": \"bleed-mode\",\n    \"placeholder\": \"Select mode...\"\n  },\n  {\n    \"id\": \"bleed-margin\",\n    \"component\": \"Input\",\n    \"label\": \"Bleed Margin\",\n    \"name\": \"bleed-margin\",\n    \"type\": \"number\",\n    \"placeholder\": \"e.g. 3\"\n  },\n  {\n    \"id\": \"bleed-unit\",\n    \"component\": \"Select\",\n    \"label\": \"Unit\",\n    \"name\": \"bleed-unit\",\n    \"placeholder\": \"mm\"\n  },\n  {\n    \"id\": \"approved\",\n    \"component\": \"CheckBox\",\n    \"label\": \"Approved for production\",\n    \"name\": \"approved\"\n  },\n  {\n    \"id\": \"ftr\",\n    \"component\": \"Footer\",\n    \"children\": [\n      \"preview-btn\",\n      \"apply-btn\"\n    ]\n  },\n  {\n    \"id\": \"preview-btn\",\n    \"component\": \"Button\",\n    \"text\": \"Preview\",\n    \"variant\": \"secondary\"\n  },\n  {\n    \"id\": \"apply-btn\",\n    \"component\": \"Button\",\n    \"text\": \"Apply\",\n    \"variant\": \"primary\"\n  }\n]",
         "name": "bleed-design-settings"
       },
+      {
+        "description": "Multi-select with chip trigger + checkbox option list (SPEC-040).",
+        "a2ui": "[\n  {\n    \"id\": \"root\",\n    \"component\": \"Card\",\n    \"children\": [\"sec\"]\n  },\n  {\n    \"id\": \"sec\",\n    \"component\": \"Section\",\n    \"children\": [\"col\"]\n  },\n  {\n    \"id\": \"col\",\n    \"component\": \"Column\",\n    \"children\": [\"tags\"],\n    \"gap\": \"3\"\n  },\n  {\n    \"id\": \"tags\",\n    \"component\": \"Select\",\n    \"multiple\": true,\n    \"selectAll\": true,\n    \"label\": \"Tags\",\n    \"name\": \"tags\",\n    \"placeholder\": \"Pick tags...\",\n    \"value\": \"urgent,backend\"\n  }\n]",
+        "name": "multi-select-tags"
+      },
       {
         "description": "Simple account creation form with text fields, select, and action buttons.",
         "a2ui": "[\n  {\n    \"id\": \"root\",\n    \"component\": \"Card\",\n    \"children\": [\n      \"hdr\",\n      \"sec\",\n      \"ftr\"\n    ]\n  },\n  {\n    \"id\": \"hdr\",\n    \"component\": \"Header\",\n    \"children\": [\n      \"title\",\n      \"desc\"\n    ]\n  },\n  {\n    \"id\": \"title\",\n    \"component\": \"Text\",\n    \"slot\": \"heading\",\n    \"textContent\": \"Create Account\",\n    \"variant\": \"section\"\n  },\n  {\n    \"id\": \"desc\",\n    \"component\": \"Text\",\n    \"slot\": \"description\",\n    \"variant\": \"caption\",\n    \"textContent\": \"Fill in your details\"\n  },\n  {\n    \"id\": \"sec\",\n    \"component\": \"Section\",\n    \"children\": [\n      \"form\"\n    ]\n  },\n  {\n    \"id\": \"form\",\n    \"component\": \"Column\",\n    \"children\": [\n      \"name\",\n      \"email\",\n      \"role\"\n    ],\n    \"gap\": \"4\"\n  },\n  {\n    \"id\": \"name\",\n    \"component\": \"Input\",\n    \"label\": \"Full Name\",\n    \"placeholder\": \"Kim Granlund\",\n    \"name\": \"name\",\n    \"required\": true\n  },\n  {\n    \"id\": \"email\",\n    \"component\": \"Input\",\n    \"label\": \"Email\",\n    \"type\": \"email\",\n    \"placeholder\": \"kim@adia.health\",\n    \"name\": \"email\",\n    \"required\": true\n  },\n  {\n    \"id\": \"role\",\n    \"component\": \"Select\",\n    \"label\": \"Role\",\n    \"placeholder\": \"Choose role...\",\n    \"name\": \"role\"\n  },\n  {\n    \"id\": \"ftr\",\n    \"component\": \"Footer\",\n    \"children\": [\n      \"cancel\",\n      \"submit\"\n    ]\n  },\n  {\n    \"id\": \"cancel\",\n    \"component\": \"Button\",\n    \"text\": \"Cancel\",\n    \"variant\": \"ghost\"\n  },\n  {\n    \"id\": \"submit\",\n    \"component\": \"Button\",\n    \"text\": \"Create\",\n    \"variant\": \"primary\"\n  }\n]",
@@ -169,7 +203,13 @@
       "select",
       "dropdown",
       "combobox",
-      "autocomplete"
+      "autocomplete",
+      "multi-select",
+      "multiple",
+      "chips",
+      "tokens",
+      "tags",
+      "picker"
     ],
     "name": "UISelect",
     "related": [
@@ -222,6 +262,20 @@
         "menu",
         "select",
         "form"
+      ],
+      "multi-select": [
+        "multiselect",
+        "multi-pick",
+        "chips",
+        "tokens",
+        "tags",
+        "multiple"
+      ],
+      "multiple": [
+        "multi-select",
+        "multiselect",
+        "chips",
+        "select-many"
       ]
     },
     "tag": "select-ui",