@adia-ai/web-components 0.6.33 → 0.6.35

package/components/color-picker/color-picker.css

@@ -1,41 +1,41 @@
 @scope (color-picker-ui) {
   :where(:scope) {
     /* ── Tokens ── */
-    --color-picker-gap:              var(--a-space-2);
-    --color-picker-area-height:      10rem;
-    --color-picker-area-radius:      var(--a-radius-md);
-    --color-picker-track-height:     0.75rem;
-    --color-picker-track-radius:     var(--a-radius-full);
-    --color-picker-thumb-size:       1.125rem;
-    --color-picker-thumb-border:     2px solid var(--a-chrome-border);
-    --color-picker-thumb-shadow:     0 0 0 1px var(--a-chrome-ring-subtle), 0 2px 4px var(--a-chrome-shadow-soft);
-    --color-picker-font:             var(--a-font-family-code);
-    --color-picker-font-size:        var(--a-ui-sm);
-    --color-picker-fg:               var(--a-fg);
-    --color-picker-label-fg:         var(--a-fg-muted);
-    --color-picker-border:           var(--a-border-subtle);
-    --color-picker-output-bg:        var(--a-bg-muted);
-    --color-picker-output-radius:    var(--a-radius-sm);
-    --color-picker-fg-disabled:      var(--a-ui-text-disabled);
+    --color-picker-gap-default:              var(--a-space-2);
+    --color-picker-area-height-default:      10rem;
+    --color-picker-area-radius-default:      var(--a-radius-md);
+    --color-picker-track-height-default:     0.75rem;
+    --color-picker-track-radius-default:     var(--a-radius-full);
+    --color-picker-thumb-size-default:       1.125rem;
+    --color-picker-thumb-border-default:     2px solid var(--a-chrome-border);
+    --color-picker-thumb-shadow-default:     0 0 0 1px var(--a-chrome-ring-subtle), 0 2px 4px var(--a-chrome-shadow-soft);
+    --color-picker-font-default:             var(--a-font-family-code);
+    --color-picker-font-size-default:        var(--a-ui-sm);
+    --color-picker-fg-default:               var(--a-fg);
+    --color-picker-label-fg-default:         var(--a-fg-muted);
+    --color-picker-border-default:           var(--a-border-subtle);
+    --color-picker-output-bg-default:        var(--a-bg-muted);
+    --color-picker-output-radius-default:    var(--a-radius-sm);
+    --color-picker-fg-disabled-default:      var(--a-ui-text-disabled);
 
     /* ── Spacing ── */
-    --color-picker-gap-sm:           var(--a-space-1);
-    --color-picker-pad-sm:           var(--a-space-2);
+    --color-picker-gap-sm-default:           var(--a-space-1);
+    --color-picker-pad-sm-default:           var(--a-space-2);
 
     /* ── Interactive ── */
-    --color-picker-focus-color:      var(--a-accent);
-    --color-picker-disabled-border:  var(--a-border-subtle);
+    --color-picker-focus-color-default:      var(--a-accent);
+    --color-picker-disabled-border-default:  var(--a-border-subtle);
 
     /* ── Transitions ── */
-    --color-picker-duration:         var(--a-duration-fast);
-    --color-picker-easing:           var(--a-easing);
+    --color-picker-duration-default:         var(--a-duration-fast);
+    --color-picker-easing-default:           var(--a-easing);
   }
 
   :scope {
     box-sizing: border-box;
     display: flex;
     flex-direction: column;
-    gap: var(--color-picker-gap);
+    gap: var(--color-picker-gap, var(--color-picker-gap-default));
     width: 100%;
   }
 
@@ -44,16 +44,16 @@
   [data-area] {
     position: relative;
     width: 100%;
-    height: var(--color-picker-area-height);
-    border-radius: var(--color-picker-area-radius);
-    border: 1px solid var(--color-picker-border);
+    height: var(--color-picker-area-height, var(--color-picker-area-height-default));
+    border-radius: var(--color-picker-area-radius, var(--color-picker-area-radius-default));
+    border: 1px solid var(--color-picker-border, var(--color-picker-border-default));
     overflow: hidden;
     cursor: crosshair;
     touch-action: none;
   }
 
   [data-area]:focus-visible {
-    outline: 2px solid var(--color-picker-focus-color);
+    outline: 2px solid var(--color-picker-focus-color, var(--color-picker-focus-color-default));
     outline-offset: 2px;
   }
 
@@ -63,11 +63,11 @@
 
   [data-area-thumb] {
     position: absolute;
-    width: var(--color-picker-thumb-size);
-    height: var(--color-picker-thumb-size);
+    width: var(--color-picker-thumb-size, var(--color-picker-thumb-size-default));
+    height: var(--color-picker-thumb-size, var(--color-picker-thumb-size-default));
     border-radius: 50%;
-    border: var(--color-picker-thumb-border);
-    box-shadow: var(--color-picker-thumb-shadow);
+    border: var(--color-picker-thumb-border, var(--color-picker-thumb-border-default));
+    box-shadow: var(--color-picker-thumb-shadow, var(--color-picker-thumb-shadow-default));
     transform: translate(-50%, -50%);
     pointer-events: none;
     z-index: 1;
@@ -78,7 +78,7 @@
   [data-sliders] {
     display: flex;
     flex-direction: column;
-    gap: var(--color-picker-gap-sm);
+    gap: var(--color-picker-gap-sm, var(--color-picker-gap-sm-default));
   }
 
   /* ═══════ Hue Track ═══════ */
@@ -86,25 +86,25 @@
   [data-hue-track] {
     position: relative;
     width: 100%;
-    height: var(--color-picker-track-height);
-    border-radius: var(--color-picker-track-radius);
+    height: var(--color-picker-track-height, var(--color-picker-track-height-default));
+    border-radius: var(--color-picker-track-radius, var(--color-picker-track-radius-default));
     cursor: pointer;
     touch-action: none;
   }
 
   [data-hue-track]:focus-visible {
-    outline: 2px solid var(--color-picker-focus-color);
+    outline: 2px solid var(--color-picker-focus-color, var(--color-picker-focus-color-default));
     outline-offset: 2px;
   }
 
   [data-hue-thumb] {
     position: absolute;
     top: 50%;
-    width: var(--color-picker-thumb-size);
-    height: var(--color-picker-thumb-size);
+    width: var(--color-picker-thumb-size, var(--color-picker-thumb-size-default));
+    height: var(--color-picker-thumb-size, var(--color-picker-thumb-size-default));
     border-radius: 50%;
-    border: var(--color-picker-thumb-border);
-    box-shadow: var(--color-picker-thumb-shadow);
+    border: var(--color-picker-thumb-border, var(--color-picker-thumb-border-default));
+    box-shadow: var(--color-picker-thumb-shadow, var(--color-picker-thumb-shadow-default));
     transform: translate(-50%, -50%);
     pointer-events: none;
   }
@@ -114,22 +114,22 @@
   [data-output] {
     display: flex;
     flex-direction: column;
-    gap: var(--color-picker-gap-sm);
+    gap: var(--color-picker-gap-sm, var(--color-picker-gap-sm-default));
   }
 
   [data-output-group] {
     display: flex;
     align-items: center;
-    gap: var(--color-picker-gap-sm);
-    padding: var(--color-picker-gap-sm) var(--color-picker-pad-sm);
-    background: var(--color-picker-output-bg);
-    border-radius: var(--color-picker-output-radius);
+    gap: var(--color-picker-gap-sm, var(--color-picker-gap-sm-default));
+    padding: var(--color-picker-gap-sm, var(--color-picker-gap-sm-default)) var(--color-picker-pad-sm, var(--color-picker-pad-sm-default));
+    background: var(--color-picker-output-bg, var(--color-picker-output-bg-default));
+    border-radius: var(--color-picker-output-radius, var(--color-picker-output-radius-default));
   }
 
   [data-output-value] {
-    font-family: var(--color-picker-font);
-    font-size: var(--color-picker-font-size);
-    color: var(--color-picker-fg);
+    font-family: var(--color-picker-font, var(--color-picker-font-default));
+    font-size: var(--color-picker-font-size, var(--color-picker-font-size-default));
+    color: var(--color-picker-fg, var(--color-picker-fg-default));
     user-select: all;
     -webkit-user-select: all;
     flex: 1;
@@ -149,23 +149,23 @@
     border: none;
     padding: 0;
     cursor: pointer;
-    color: var(--color-picker-label-fg);
-    transition: color var(--color-picker-duration) var(--color-picker-easing);
+    color: var(--color-picker-label-fg, var(--color-picker-label-fg-default));
+    transition: color var(--color-picker-duration, var(--color-picker-duration-default)) var(--color-picker-easing, var(--color-picker-easing-default));
   }
 
   [data-copy]:hover {
-    color: var(--color-picker-fg);
+    color: var(--color-picker-fg, var(--color-picker-fg-default));
   }
 
   [data-copy] icon-ui {
-    --a-icon-size: var(--color-picker-font-size);
+    --a-icon-size: var(--color-picker-font-size, var(--color-picker-font-size-default));
   }
 
   /* ═══════ Disabled ═══════ */
 
   :scope[disabled] {
     pointer-events: none;
-    color: var(--color-picker-fg-disabled);
+    color: var(--color-picker-fg-disabled, var(--color-picker-fg-disabled-default));
   }
   :scope[disabled] [data-area],
   :scope[disabled] [data-hue-track] {
@@ -173,10 +173,10 @@
     cursor: not-allowed;
   }
   :scope[disabled] slider-ui {
-    --slider-fill-bg: var(--color-picker-disabled-border);
-    --slider-thumb-bg: var(--color-picker-disabled-border);
+    --slider-fill-bg: var(--color-picker-disabled-border, var(--color-picker-disabled-border-default));
+    --slider-thumb-bg: var(--color-picker-disabled-border, var(--color-picker-disabled-border-default));
   }
   :scope[disabled] [data-output-value] {
-    color: var(--color-picker-fg-disabled);
+    color: var(--color-picker-fg-disabled, var(--color-picker-fg-disabled-default));
   }
 }

package/components/color-picker/color-picker.js

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

package/components/combobox/combobox.a2ui.json

@@ -0,0 +1,363 @@
+{
+  "$schema": "https://json-schema.org/draft/2020-12/schema",
+  "$id": "https://adiaui.dev/a2ui/v0_9/components/Combobox.json",
+  "title": "Combobox",
+  "description": "Typeahead-filterable single-select primitive — the constrained-choice\ncombobox per WAI-APG \"Combobox With List Autocomplete (manual\nselection)\". The committed value MUST come from the options list\nunless `[free-text]` is set. Distinct from `<select-ui searchable>`\n(button-first dropdown) and `<autocomplete-input-ui>` (free-form).\nForm-bearing via UIFormElement: `[name]`, `[value]`, `[required]`,\n`[disabled]`, fires `change`. Options via native `<option>` /\n`<optgroup>` children OR programmatic `.options` array.\n",
+  "type": "object",
+  "allOf": [
+    {
+      "$ref": "common_types.json#/$defs/ComponentCommon"
+    },
+    {
+      "$ref": "common_types.json#/$defs/CatalogComponentCommon"
+    }
+  ],
+  "properties": {
+    "required": {
+      "description": "Marks the field as required for form validation",
+      "type": "boolean",
+      "default": false
+    },
+    "clearable": {
+      "description": "Renders an `x` clear button when value is set",
+      "type": "boolean",
+      "default": false
+    },
+    "component": {
+      "const": "Combobox"
+    },
+    "creatable": {
+      "description": "Implies `[free-text]`; on Enter with unmatched typed text fires a\n`create` event with detail.value so the consumer can run a\nbackend create-then-refresh-options flow.",
+      "type": "boolean",
+      "default": false
+    },
+    "disabled": {
+      "description": "Disables interaction and dims the control",
+      "type": "boolean",
+      "default": false
+    },
+    "error": {
+      "description": "Validation error message",
+      "type": "string",
+      "default": ""
+    },
+    "filter-mode": {
+      "description": "Client-side filter algorithm.",
+      "type": "string",
+      "enum": [
+        "substring",
+        "prefix",
+        "fuzzy"
+      ],
+      "default": "substring"
+    },
+    "free-text": {
+      "description": "Allow typed text not in the options list. Blurs the distinction\nwith <autocomplete-input-ui>; prefer the dedicated primitive\nunless the value model truly needs both modes (tag-with-suggestions,\nemail-with-recent-recipients).",
+      "type": "boolean",
+      "default": false
+    },
+    "highlight-match": {
+      "description": "Wraps the matched substring in `<mark>` inside option labels",
+      "type": "boolean",
+      "default": true
+    },
+    "hint": {
+      "description": "Caption text below the field; wires `aria-describedby` on the host\nso screen readers announce it as a description.",
+      "type": "string",
+      "default": ""
+    },
+    "label": {
+      "description": "Inline label rendered above the field. Wrap with <field-ui> for\nproper `<label for>` association in form-row compositions.",
+      "type": "string",
+      "default": ""
+    },
+    "loading": {
+      "description": "Shows a loading spinner inside the popover; consumer drives async fetch",
+      "type": "boolean",
+      "default": false
+    },
+    "max-options": {
+      "description": "Cap on rendered options. Overflow shows a \"scroll for more\" hint",
+      "type": "number",
+      "default": 100
+    },
+    "name": {
+      "description": "Form control name for form data submission",
+      "type": "string",
+      "default": ""
+    },
+    "open": {
+      "description": "Reflects popover open / closed state",
+      "type": "boolean",
+      "default": false
+    },
+    "options": {
+      "description": "Programmatic option list. Array of {value, label, disabled?, group?} or grouped {label, options:[…]}. Alternative to declarative <option> / <optgroup> children.",
+      "type": "array",
+      "default": []
+    },
+    "placeholder": {
+      "description": "Placeholder text in the input when value is empty",
+      "type": "string",
+      "default": "Select..."
+    },
+    "readonly": {
+      "description": "Prevents selection changes while keeping the field focusable + popover-open allowed",
+      "type": "boolean",
+      "default": false
+    },
+    "size": {
+      "description": "Sizing scale via universal `[size]` attribute system. Matches Input + Select sizing tokens so a Combobox rendered alongside either feels coherent in a form row.",
+      "type": "string",
+      "enum": [
+        "sm",
+        "md",
+        "lg"
+      ],
+      "default": "md"
+    },
+    "value": {
+      "description": "Currently selected option value. Must be a member of `options[].value` unless `[free-text]` is set. With declarative <option> children, a child carrying the native `selected` attribute sets the initial value when this attribute is absent.",
+      "type": "string",
+      "default": ""
+    }
+  },
+  "required": [
+    "component"
+  ],
+  "unevaluatedProperties": false,
+  "x-adiaui": {
+    "anti_patterns": [
+      {
+        "fix": "{\"component\": \"Combobox\", \"value\": \"us\", \"options\": [{\"value\": \"us\", \"label\": \"United States\"}]}\n",
+        "why": "`value` is \"xx\" but only \"us\" is in options. With free-text:false (default), this is an invalid\nmid-state — set value: \"us\" or add an option with value: \"xx\".\n",
+        "wrong": "{\"component\": \"Combobox\", \"value\": \"xx\", \"options\": [{\"value\": \"us\", \"label\": \"United States\"}]}\n"
+      },
+      {
+        "fix": "{\"component\": \"SegmentedControl\", \"options\": [{\"value\": \"a\", \"label\": \"A\"}, {\"value\": \"b\", \"label\": \"B\"}]}\n",
+        "why": "Only 2 options. Combobox is overkill — use SegmentedControl or Radio.\n",
+        "wrong": "{\"component\": \"Combobox\", \"options\": [{\"value\": \"a\", \"label\": \"A\"}, {\"value\": \"b\", \"label\": \"B\"}]}\n"
+      },
+      {
+        "fix": "{\"component\": \"MultiSelect\", \"options\": [...]}\n",
+        "why": "Combobox is single-select. Multi-select goes through MultiSelect.\n",
+        "wrong": "{\"component\": \"Combobox\", \"multiple\": true, \"options\": [...]}\n"
+      }
+    ],
+    "category": "input",
+    "composes": [
+      "icon-ui"
+    ],
+    "events": {
+      "change": {
+        "description": "Fired when value is committed — option clicked, Enter on active\noption, or programmatic `.value =`. Detail.option resolves to the\nmatching `{label,value,...}` or null in free-text/cleared paths.",
+        "detail": {
+          "option": {
+            "description": "Resolved option object or null when free-text / cleared.",
+            "type": "object"
+          },
+          "source": {
+            "description": "One of `click` / `keyboard` / `programmatic`.",
+            "type": "string"
+          },
+          "value": {
+            "description": "Committed value.",
+            "type": "string"
+          }
+        }
+      },
+      "close": {
+        "description": "Popover closed.",
+        "detail": {
+          "reason": {
+            "description": "One of `escape` / `outside` / `select` / `blur`.",
+            "type": "string"
+          }
+        }
+      },
+      "create": {
+        "description": "Fired when `[creatable]` is set and the user presses Enter on\ntyped text that doesn't match any option. Consumer wires this to\na backend create flow and then refreshes `.options`.",
+        "detail": {
+          "value": {
+            "description": "The typed text the user is trying to create.",
+            "type": "string"
+          }
+        }
+      },
+      "input": {
+        "description": "Fired on each keystroke (filter typing); not a commit. Detail carries the typed query.",
+        "detail": {
+          "query": {
+            "description": "Lowercased filter query.",
+            "type": "string"
+          },
+          "value": {
+            "description": "Current input text (the user's typed query).",
+            "type": "string"
+          }
+        }
+      },
+      "invalid": {
+        "description": "Fired when `[free-text]` is false and the user presses Enter on\ntyped text that doesn't match any option. The value is NOT\ncommitted; the input is restored to the last committed value.",
+        "detail": {
+          "query": {
+            "description": "The unmatched typed text.",
+            "type": "string"
+          }
+        }
+      },
+      "open": {
+        "description": "Popover opened.",
+        "detail": {
+          "trigger": {
+            "description": "One of `click` / `keyboard` / `typing`.",
+            "type": "string"
+          }
+        }
+      }
+    },
+    "examples": [
+      {
+        "description": "Country picker — canonical declarative <option> children inside a <field-ui>.",
+        "a2ui": "[\n  {\"id\": \"root\", \"component\": \"Card\", \"children\": [\"sec\"]},\n  {\"id\": \"sec\", \"component\": \"Section\", \"children\": [\"country\"]},\n  {\n    \"id\": \"country\",\n    \"component\": \"Combobox\",\n    \"name\": \"country\",\n    \"label\": \"Country\",\n    \"placeholder\": \"Select country…\",\n    \"options\": [\n      {\"value\": \"us\", \"label\": \"United States\"},\n      {\"value\": \"gb\", \"label\": \"United Kingdom\"},\n      {\"value\": \"de\", \"label\": \"Germany\"},\n      {\"value\": \"fr\", \"label\": \"France\"},\n      {\"value\": \"es\", \"label\": \"Spain\"}\n    ],\n    \"value\": \"us\"\n  }\n]",
+        "name": "country-picker"
+      },
+      {
+        "description": "Tag picker with create-new affordance — fires `create` event on unmatched Enter.",
+        "a2ui": "[\n  {\"id\": \"root\", \"component\": \"Card\", \"children\": [\"sec\"]},\n  {\"id\": \"sec\", \"component\": \"Section\", \"children\": [\"tag\"]},\n  {\n    \"id\": \"tag\",\n    \"component\": \"Combobox\",\n    \"name\": \"tag\",\n    \"label\": \"Tag\",\n    \"creatable\": true,\n    \"placeholder\": \"Pick or create a tag…\",\n    \"options\": [\n      {\"value\": \"bug\", \"label\": \"bug\"},\n      {\"value\": \"feature\", \"label\": \"feature\"},\n      {\"value\": \"chore\", \"label\": \"chore\"}\n    ]\n  }\n]",
+        "name": "creatable-tag-picker"
+      }
+    ],
+    "keywords": [
+      "combobox",
+      "autocomplete",
+      "typeahead",
+      "select",
+      "filter",
+      "picker",
+      "country-picker",
+      "timezone-picker",
+      "member-picker"
+    ],
+    "name": "UICombobox",
+    "related": [
+      "select",
+      "search",
+      "input",
+      "field"
+    ],
+    "slots": {
+      "default": {
+        "description": "Native <option> / <optgroup> children for declarative authoring"
+      },
+      "empty": {
+        "description": "Custom no-matches content (defaults to \"No matches\")"
+      },
+      "footer": {
+        "description": "Footer area inside the popover (e.g. \"Press Enter to create…\" affordance)"
+      },
+      "loading": {
+        "description": "Custom loading content (defaults to a spinner)"
+      },
+      "prefix": {
+        "description": "Leading icon / element inside the input chrome"
+      },
+      "suffix": {
+        "description": "Trailing icon / element (defaults to `caret-down`)"
+      }
+    },
+    "states": [
+      {
+        "description": "Closed; not focused.",
+        "name": "idle"
+      },
+      {
+        "description": "Input focused; popover closed.",
+        "attribute": ":focus-within",
+        "name": "focused"
+      },
+      {
+        "description": "Popover visible; filtered options listed.",
+        "attribute": "open",
+        "name": "open"
+      },
+      {
+        "description": "Spinner shown; options stale (consumer-driven async fetch).",
+        "attribute": "loading",
+        "name": "loading"
+      },
+      {
+        "description": "Non-interactive; dimmed.",
+        "attribute": "disabled",
+        "name": "disabled"
+      },
+      {
+        "description": "Focusable + popover-open allowed; commits blocked.",
+        "attribute": "readonly",
+        "name": "readonly"
+      }
+    ],
+    "status": "stable",
+    "synonyms": {
+      "autocomplete": [
+        "combobox",
+        "typeahead",
+        "suggest"
+      ],
+      "combobox": [
+        "autocomplete",
+        "typeahead",
+        "filter",
+        "picker"
+      ],
+      "picker": [
+        "combobox",
+        "select",
+        "dropdown"
+      ],
+      "typeahead": [
+        "combobox",
+        "autocomplete",
+        "search"
+      ]
+    },
+    "tag": "combobox-ui",
+    "tokens": {
+      "--combobox-bg": {
+        "description": "Input background color"
+      },
+      "--combobox-fg": {
+        "description": "Input text color"
+      },
+      "--combobox-match-bg": {
+        "description": "Background for `<mark>` spans that highlight matched substrings"
+      },
+      "--combobox-option-bg-active": {
+        "description": "Background for the currently active (arrow-navigated) option"
+      },
+      "--combobox-option-bg-selected": {
+        "description": "Background for the currently committed option"
+      },
+      "--combobox-option-fg-active": {
+        "description": "Foreground for the currently active option"
+      },
+      "--combobox-popover-bg": {
+        "description": "Popover background color"
+      },
+      "--combobox-popover-border": {
+        "description": "Popover border color"
+      },
+      "--combobox-popover-radius": {
+        "description": "Popover border radius"
+      },
+      "--combobox-popover-shadow": {
+        "description": "Popover elevation shadow"
+      },
+      "--combobox-radius": {
+        "description": "Input border radius"
+      }
+    },
+    "traits": [],
+    "version": 1
+  }
+}