@adia-ai/web-components 0.6.34 → 0.6.35

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",