@adia-ai/web-components 0.8.40 → 0.8.42

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

@@ -1,182 +1,14 @@
-@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(--md-sys-color-neutral-on-surface);
-    --color-picker-label-fg:         var(--a-fg-muted);
-    --color-picker-border:           var(--md-sys-color-neutral-outline-variant);
-    --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);
-
-    /* ── Spacing ── */
-    --color-picker-gap-sm:           var(--a-space-1);
-    --color-picker-pad-sm:           var(--a-space-2);
-
-    /* ── Interactive ── */
-    --color-picker-focus-color:      var(--md-sys-color-primary);
-    --color-picker-disabled-border:  var(--md-sys-color-neutral-outline-variant);
-
-    /* ── Transitions ── */
-    --color-picker-duration:         var(--a-duration-fast);
-    --color-picker-easing:           var(--a-easing);
-  }
-
-  :scope {
-    box-sizing: border-box;
-    display: flex;
-    flex-direction: column;
-    gap: var(--color-picker-gap);
-    width: 100%;
-  }
-
-  /* ═══════ 2D Color Area ═══════ */
-
-  [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);
-    overflow: hidden;
-    cursor: crosshair;
-    touch-action: none;
-  }
-
-  [data-area]:focus-visible {
-    outline: 2px solid var(--color-picker-focus-color);
-    outline-offset: 2px;
-  }
-
-  [data-area] canvas {
-    image-rendering: auto;
-  }
-
-  [data-area-thumb] {
-    position: absolute;
-    width: var(--color-picker-thumb-size);
-    height: var(--color-picker-thumb-size);
-    border-radius: 50%;
-    border: var(--color-picker-thumb-border);
-    box-shadow: var(--color-picker-thumb-shadow);
-    transform: translate(-50%, -50%);
-    pointer-events: none;
-    z-index: 1;
-  }
-
-  /* ═══════ Slider Rows (H / C / L) ═══════ */
-
-  [data-sliders] {
-    display: flex;
-    flex-direction: column;
-    gap: var(--color-picker-gap-sm);
-  }
-
-  /* ═══════ Hue Track ═══════ */
-
-  [data-hue-track] {
-    position: relative;
-    width: 100%;
-    height: var(--color-picker-track-height);
-    border-radius: var(--color-picker-track-radius);
-    cursor: pointer;
-    touch-action: none;
-  }
-
-  [data-hue-track]:focus-visible {
-    outline: 2px solid var(--color-picker-focus-color);
-    outline-offset: 2px;
-  }
-
-  [data-hue-thumb] {
-    position: absolute;
-    top: 50%;
-    width: var(--color-picker-thumb-size);
-    height: var(--color-picker-thumb-size);
-    border-radius: 50%;
-    border: var(--color-picker-thumb-border);
-    box-shadow: var(--color-picker-thumb-shadow);
-    transform: translate(-50%, -50%);
-    pointer-events: none;
-  }
-
-  /* ═══════ Output Values ═══════ */
-
-  [data-output] {
-    display: flex;
-    flex-direction: column;
-    gap: var(--color-picker-gap-sm);
-  }
-
-  [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);
-  }
-
-  [data-output-value] {
-    font-family: var(--color-picker-font);
-    font-size: var(--color-picker-font-size);
-    color: var(--color-picker-fg);
-    user-select: all;
-    -webkit-user-select: all;
-    flex: 1;
-    min-width: 0;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-  }
-
-  /* Copy button */
-  [data-copy] {
-    flex-shrink: 0;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    background: none;
-    border: none;
-    padding: 0;
-    cursor: pointer;
-    color: var(--color-picker-label-fg);
-    transition: color var(--color-picker-duration) var(--color-picker-easing);
-  }
-
-  [data-copy]:hover {
-    color: var(--color-picker-fg);
-  }
-
-  [data-copy] icon-ui {
-    --a-icon-size: var(--color-picker-font-size);
-  }
-
-  /* ═══════ Disabled ═══════ */
-
-  :scope[disabled] {
-    pointer-events: none;
-    color: var(--color-picker-fg-disabled);
-  }
-  :scope[disabled] [data-area],
-  :scope[disabled] [data-hue-track] {
-    filter: grayscale(1);
-    cursor: not-allowed;
-  }
-  :scope[disabled] slider-ui {
-    --slider-fill-bg: var(--color-picker-disabled-border);
-    --slider-thumb-bg: var(--color-picker-disabled-border);
-  }
-  :scope[disabled] [data-output-value] {
-    color: var(--color-picker-fg-disabled);
-  }
-}
+/* `<color-picker-ui>` is DEPRECATED (ADR-0063, gh#1563) — a thin
+ * `UIColorArea` subclass (see color-picker.class.js), never its own
+ * independent implementation. Its visual contract lives entirely in
+ * ../color-area/color-area.css, whose `@scope (color-area-ui,
+ * color-picker-ui)` root and `:is(color-area-ui, color-picker-ui)`
+ * selectors already cover this tag — one styling source, not two files
+ * drifting apart (`@scope` matches by literal tag name, not JS prototype
+ * chain, so the alias tag has to be named in that scope root explicitly —
+ * same shape as calendar-picker.css's own `datetime-picker-ui` alias
+ * coverage). This file intentionally carries no rules of its own;
+ * `packages/web-components/styles/components.css` still imports it so the
+ * barrel's per-component import list stays complete and mechanical (no
+ * special-cased skip for a deprecated-but-still-shipping tag).
+ */

package/components/color-picker/color-picker.yaml

@@ -3,21 +3,38 @@
 $schema: ../../../../scripts/schemas/component.yaml.schema.json
 name: UIColorPicker
 tag: color-picker-ui
-status: stable
+status: deprecated
 component: ColorPicker
 category: input
-version: 1
+version: 2
 description: >-
-  OKLCH-native color picker with 2D area and H/C/L sliders.
-  Form-associated input emitting OKLCH color strings; canonical color
-  authoring surface in the AdiaUI token system. Use for color input in
-  design tools or theming UIs; for simple color swatches use <swatch-ui>
-  or <color-input-ui> instead.
+  DEPRECATED (ADR-0063, gh#1563, gh#1377 B11) — `-picker` is reserved for
+  the outer, trigger + popover, form-associated composite shape
+  (`calendar-picker-ui` / `date-range-picker-ui` / `datetime-picker-ui` /
+  `time-picker-ui`); `color-picker-ui` was the sole violator, playing
+  `calendar-grid-ui`'s inline-substrate role under a `-picker` name.
+  `<color-picker-ui>` is now a thin `UIColorArea` subclass (see
+  color-picker.class.js) rather than an independent implementation — every
+  prop/event/token is inherited unchanged from `<color-area-ui>`. Existing
+  markup keeps working, but new markup should reach for `<color-area-ui>`
+  directly. See `<color-area-ui>` for the full contract.
 # Per ADR-0027 — primitives that programmatically create other primitives
-# do NOT auto-import them. Consumer (or demo shell) must explicitly import.
+# do NOT auto-import them. Consumer (or demo shell) must explicitly import
+# the slider-ui module (same one <color-area-ui> itself needs — this alias
+# inherits its render(), not just its class).
 composes:
   - slider-ui
 props:
+  # Every prop below is inherited VERBATIM from <color-area-ui> —
+  # documented here too (not just "see the base class") because a
+  # consumer scanning THIS tag's own catalog entry, or the a2ui pipeline
+  # generating THIS tag by name, needs the full contract without a second
+  # hop. audit-static-properties-vs-yaml.mjs's component-extends-component
+  # exemption (gh#1372/gh#1563) resolves this against <color-area-ui>'s
+  # own yaml, so re-declaring the inherited names here is documentation,
+  # not a second runtime contract. Nothing overrides a default here (the
+  # alias is byte-identical behavior; only the class/tag/component names
+  # differ), unlike datetime-picker-ui's own two overridden defaults.
   name:
     description: Form field name
     type: string
@@ -100,47 +117,29 @@ states:
     description: Non-interactive; dimmed.
     attribute: disabled
 traits: []
-tokens: {}
+tokens: {}  # No component-owned tokens — styling flows entirely through
+            # <color-area-ui>'s own --color-area-* custom properties.
 requiredIcons:
   - copy
   - check
   - warning
 a2ui:
   rules:
-    - rule: 'OKLCH-native color picker with 2D color area + H/C/L sliders. Form-associated; emits OKLCH color strings.'
-      reason: 'Canonical color-authoring surface.'
+    - rule: 'DEPRECATED — prefer `{"component": "ColorArea"}` over `{"component": "ColorPicker"}`. Both render and behave identically; ColorPicker is a thin compatibility alias.'
+      reason: 'ADR-0063/gh#1377 B11 fold — steer new generation at the canonical primitive.'
     - rule: 'For simple color swatches (read-only display) use <swatch-ui>; for hex/rgb text input use <color-input-ui>.'
       reason: 'Surface boundary.'
-    - rule: 'Output format defaults to oklch(); set format= to override (hex, rgb, hsl).'
-      reason: 'Format knob.'
-anti_patterns: []
+anti_patterns:
+  - wrong: |
+      {"component": "ColorPicker", "name": "brand"}
+    why: |
+      ColorPicker is deprecated (ADR-0063, gh#1563) — new generation should
+      reach for ColorArea instead.
+    fix: |
+      {"component": "ColorArea", "name": "brand"}
 examples:
-  - name: color-picker-demo
-    description: Color picker card with a color picker component for selecting colors with swatches.
-    a2ui: >-
-      [
-        {
-          "id": "root",
-          "component": "Card",
-          "children": [
-            "sec"
-          ]
-        },
-        {
-          "id": "sec",
-          "component": "Section",
-          "children": [
-            "cp"
-          ]
-        },
-        {
-          "id": "cp",
-          "component": "ColorPicker",
-          "value": "#6366f1"
-        }
-      ]
-  - name: color-picker-panel
-    description: Color picker with swatch selection in a card.
+  - name: color-picker-legacy
+    description: Deprecated tag — prefer ColorArea's own "color-area-demo" example for NEW markup.
     a2ui: >-
       [
         {
@@ -169,7 +168,8 @@ keywords:
   - color
   - picker
 synonyms:
-  color-picker: [color-canvas, color-surface, swatch-picker]
+  color-picker: [color-canvas, color-surface, swatch-picker, color-area]
 related:
+  - color-area
   - grid
   - button

package/components/combobox/combobox.a2ui.json

@@ -138,8 +138,8 @@
         "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",
+        "fix": "{\"component\": \"Segmented\", \"children\": [{\"component\": \"Segment\", \"value\": \"a\", \"text\": \"A\"}, {\"component\": \"Segment\", \"value\": \"b\", \"text\": \"B\"}]}\n",
+        "why": "Only 2 options. Combobox is overkill — use Segmented or Radio.\n",
         "wrong": "{\"component\": \"Combobox\", \"options\": [{\"value\": \"a\", \"label\": \"A\"}, {\"value\": \"b\", \"label\": \"B\"}]}\n"
       },
       {
@@ -246,6 +246,7 @@
       "member-picker"
     ],
     "name": "UICombobox",
+    "parts": {},
     "related": [
       "select",
       "search",

package/components/combobox/combobox.yaml

@@ -297,9 +297,9 @@ anti_patterns:
   - wrong: |
       {"component": "Combobox", "options": [{"value": "a", "label": "A"}, {"value": "b", "label": "B"}]}
     why: |
-      Only 2 options. Combobox is overkill — use SegmentedControl or Radio.
+      Only 2 options. Combobox is overkill — use Segmented or Radio.
     fix: |
-      {"component": "SegmentedControl", "options": [{"value": "a", "label": "A"}, {"value": "b", "label": "B"}]}
+      {"component": "Segmented", "children": [{"component": "Segment", "value": "a", "text": "A"}, {"component": "Segment", "value": "b", "text": "B"}]}
   - wrong: |
       {"component": "Combobox", "multiple": true, "options": [...]}
     why: |

package/components/command/command.a2ui.json

@@ -92,6 +92,17 @@
       "keybinding"
     ],
     "name": "UICommand",
+    "parts": {
+      "footer": {
+        "description": "Keyboard hint bar — template-owned anatomy part, not a light-DOM insertion point (gh#1454). render() unconditionally stamps a fixed `<footer>` with hard-coded kbd hints; no consumer override path exists in source."
+      },
+      "input": {
+        "description": "The auto-stamped search field — a contenteditable=\"plaintext-only\" span carrying role=\"combobox\" (per ADR-0025/ADR-0055; no native <input>). Internal only; not consumer-slottable — template-owned anatomy part, not a light-DOM insertion point (gh#1454)."
+      },
+      "list": {
+        "description": "Container for command items and groups — template-owned anatomy part, not a light-DOM insertion point (gh#1454). render() always populates it wholesale from `.options`/parsed `<option>` children; any pre-existing content is discarded, not adopted."
+      }
+    },
     "related": [
       "AdminCommand",
       "Menu",
@@ -100,16 +111,7 @@
     ],
     "slots": {
       "empty": {
-        "description": "Empty state shown when no items match"
-      },
-      "footer": {
-        "description": "Keyboard hint bar"
-      },
-      "input": {
-        "description": "The auto-stamped search field — a contenteditable=\"plaintext-only\" span carrying role=\"combobox\" (per ADR-0025/ADR-0055; no native <input>). Internal only; not consumer-slottable."
-      },
-      "list": {
-        "description": "Container for command items and groups"
+        "description": "Empty state shown when no items match. Consumer-supplied [slot=\"empty\"] content is captured before the internal shell renders and re-inserted — a genuine light-DOM insertion point."
       }
     },
     "states": [

package/components/command/command.class.js

@@ -13,6 +13,7 @@
 
 import { UIElement } from '../../core/element.js';
 import { logicalSlotted } from '../../core/logical-children.js';
+import { isElement } from '../../core/dom.js';
 
 function escapeHTML(s) {
   return String(s).replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
@@ -69,14 +70,14 @@ export class UICommand extends UIElement {
   static #RECENTS_MAX = 3;
 
   #onListClick = (e) => {
-    const el = e.target instanceof Element ? e.target.closest('[role="option"]:not([aria-disabled])') : null;
+    const el = isElement(e.target) ? e.target.closest('[role="option"]:not([aria-disabled])') : null;
     if (!el) return;
     const item = this.#itemByEl.get(el);
     if (item) this.#select(item);
   };
 
   #onListPointerOver = (e) => {
-    const el = e.target instanceof Element ? e.target.closest('[role="option"]:not([aria-disabled])') : null;
+    const el = isElement(e.target) ? e.target.closest('[role="option"]:not([aria-disabled])') : null;
     if (!el) return;
     const idx = parseInt(el.dataset.idx);
     if (Number.isFinite(idx) && idx !== this.#activeIdx) this.#activate(idx);

package/components/command/command.yaml

@@ -64,16 +64,29 @@ events:
         description: Parent optgroup label (empty string when item has no group).
 slots:
   empty:
-    description: Empty state shown when no items match
+    description: >-
+      Empty state shown when no items match. Consumer-supplied [slot="empty"]
+      content is captured before the internal shell renders and re-inserted —
+      a genuine light-DOM insertion point.
+parts:
   footer:
-    description: Keyboard hint bar
+    description: >-
+      Keyboard hint bar — template-owned anatomy part, not a light-DOM
+      insertion point (gh#1454). render() unconditionally stamps a fixed
+      `<footer>` with hard-coded kbd hints; no consumer override path exists
+      in source.
   input:
     description: >-
       The auto-stamped search field — a contenteditable="plaintext-only"
       span carrying role="combobox" (per ADR-0025/ADR-0055; no native
-      <input>). Internal only; not consumer-slottable.
+      <input>). Internal only; not consumer-slottable — template-owned
+      anatomy part, not a light-DOM insertion point (gh#1454).
   list:
-    description: Container for command items and groups
+    description: >-
+      Container for command items and groups — template-owned anatomy part,
+      not a light-DOM insertion point (gh#1454). render() always populates it
+      wholesale from `.options`/parsed `<option>` children; any pre-existing
+      content is discarded, not adopted.
 states:
 - name: idle
   description: Default, ready for interaction.

package/components/context-menu/context-menu.a2ui.json

@@ -103,6 +103,7 @@
       "popup-menu"
     ],
     "name": "UIContextMenu",
+    "parts": {},
     "related": [
       "menu",
       "menu-item",

package/components/date-range-picker/date-range-picker.a2ui.json

@@ -192,6 +192,7 @@
       "reporting-period"
     ],
     "name": "UIDateRangePicker",
+    "parts": {},
     "related": [
       "calendar-picker",
       "popover",
@@ -301,7 +302,7 @@
         "default": "var(--a-space-2)"
       },
       "--date-range-picker-selected-bg": {
-        "description": "Selected day-cell background (cascaded into the inner calendar via --calendar-picker-day-bg-selected).",
+        "description": "Selected day-cell background (cascaded into the inner calendar via --calendar-grid-day-bg-selected).",
         "default": "var(--md-sys-color-primary)"
       },
       "--date-range-picker-selected-fg": {

package/components/date-range-picker/date-range-picker.yaml

@@ -181,7 +181,7 @@ tokens:
     description: Preset row background on hover.
     default: var(--a-bg-hover)
   --date-range-picker-selected-bg:
-    description: Selected day-cell background (cascaded into the inner calendar via --calendar-picker-day-bg-selected).
+    description: Selected day-cell background (cascaded into the inner calendar via --calendar-grid-day-bg-selected).
     default: var(--md-sys-color-primary)
   --date-range-picker-selected-fg:
     description: Selected day-cell foreground.