@adia-ai/web-components 0.8.39 → 0.8.41

package/components/check/check.yaml

@@ -5,7 +5,7 @@ name: UICheck
 tag: check-ui
 status: stable
 component: Check
-category: layout
+category: input
 version: 1
 description: |
   Checkbox primitive — the host IS the control (per ADR-0025, no
@@ -66,11 +66,11 @@ props:
 events:
   change:
     description: Fired when checked state changes
-slots:
+parts:
   box:
-    description: Visual checkbox indicator
+    description: Visual checkbox indicator — template-owned anatomy part, not a light-DOM insertion point
   label:
-    description: Label text beside the checkbox
+    description: Label text beside the checkbox — set via the `label` attribute (rendered by CSS `attr(label)` on `::after`, exposed as `aria-label`); template-owned, not a light-DOM insertion point (gh#1435, gh#1447)
 states:
   - name: idle
     description: Default, ready for interaction.

package/components/code/code.a2ui.json

@@ -150,6 +150,7 @@
       "developer"
     ],
     "name": "UICode",
+    "parts": {},
     "related": [
       "badge",
       "button"

package/components/code/code.css

@@ -107,9 +107,9 @@
   }
 
   & > header [slot="label"] {
-    font-weight: 500;
+    font-weight: var(--a-weight-medium);
     text-transform: uppercase;
-    letter-spacing: 0.05em;
+    letter-spacing: var(--a-font-tracking-wide);
   }
 
   /* Copy button — ghost style */
@@ -141,7 +141,7 @@
     overflow-x: auto;
     font-family: var(--code-font);
     font-size: var(--code-font-size);
-    line-height: 1.5;
+    line-height: var(--a-font-leading-relaxed);
     scrollbar-width: none;
   }
   & > pre::-webkit-scrollbar {
@@ -312,7 +312,7 @@
     color: var(--code-fg);
     font-family: var(--code-font);
     font-size: var(--code-font-size);
-    line-height: 1.5;
+    line-height: var(--a-font-leading-relaxed);
   }
 
   :scope .cm-scroller {
@@ -377,7 +377,7 @@
 
   /* Syntax highlight — one rule per token role (see core/_cm-theme.js) */
   :scope .tok-comment     { color: var(--code-tok-comment); font-style: italic; }
-  :scope .tok-keyword     { color: var(--code-tok-keyword); font-weight: 500; }
+  :scope .tok-keyword     { color: var(--code-tok-keyword); font-weight: var(--a-weight-medium); }
   :scope .tok-string      { color: var(--code-tok-string); }
   :scope .tok-number      { color: var(--code-tok-number); }
   :scope .tok-boolean     { color: var(--code-tok-boolean); }
@@ -385,7 +385,7 @@
   :scope .tok-punctuation { color: var(--code-tok-punctuation); }
   :scope .tok-function    { color: var(--code-tok-function); }
   :scope .tok-variable    { color: var(--code-tok-variable); }
-  :scope .tok-type        { color: var(--code-tok-type); font-weight: 500; }
+  :scope .tok-type        { color: var(--code-tok-type); font-weight: var(--a-weight-medium); }
   :scope .tok-property    { color: var(--code-tok-property); }
   :scope .tok-tag         { color: var(--code-tok-tag); }
   :scope .tok-attribute   { color: var(--code-tok-attribute); }

package/components/col/col.a2ui.json

@@ -63,6 +63,7 @@
       "col"
     ],
     "name": "UICol",
+    "parts": {},
     "related": [
       "avatar",
       "input",

package/components/color-input/color-input.a2ui.json

@@ -175,6 +175,7 @@
       "compact"
     ],
     "name": "UIColorInput",
+    "parts": {},
     "related": [
       "color-picker",
       "popover",

package/components/color-picker/color-picker.a2ui.json

@@ -112,6 +112,7 @@
       "picker"
     ],
     "name": "UIColorPicker",
+    "parts": {},
     "related": [
       "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.css

@@ -149,7 +149,7 @@
     color: var(--combobox-fg);
     font: inherit;
     font-size: var(--combobox-font-size);
-    line-height: 1.4;
+    line-height: var(--a-font-leading-normal);
     white-space: nowrap;
     overflow: hidden;
     /* Positioning context for the [data-empty]::before placeholder pseudo
@@ -322,7 +322,7 @@ combobox-ui [data-listbox] [role="group"] [data-group-label] {
   font-weight: var(--a-ui-weight);
   color: var(--a-ui-text-muted);
   text-transform: uppercase;
-  letter-spacing: 0.05em;
+  letter-spacing: var(--a-font-tracking-wide);
   white-space: nowrap;
 }
 

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.css

@@ -111,7 +111,7 @@
     color: var(--command-fg);
     font-family: var(--command-font-family, var(--a-font-family-ui));
     font-size: var(--command-input-font-size);
-    line-height: 1.4;
+    line-height: var(--a-font-leading-normal);
     padding: 0;
     white-space: nowrap;
     overflow: hidden;
@@ -216,7 +216,7 @@
     font-weight: var(--command-group-font-weight);
     color: var(--command-group-fg);
     text-transform: uppercase;
-    letter-spacing: 0.05em;
+    letter-spacing: var(--a-font-tracking-wide);
     white-space: nowrap;
   }
 
@@ -255,7 +255,7 @@
     border-radius: var(--command-kbd-radius);
     font-family: inherit;
     font-size: inherit;
-    line-height: 1.6;
+    line-height: var(--a-font-leading-loose);
     color: var(--command-kbd-fg);
     background: var(--command-kbd-bg);
   }

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.css

@@ -119,7 +119,7 @@
        slot triplet. button-ui's natural alignment is `center`; our
        leading+text+trailing layout reads better as space-between. */
     justify-content: space-between;
-    line-height: 1;
+    line-height: var(--a-font-leading-none);
     transition:
       border-color var(--date-range-picker-duration) var(--date-range-picker-easing),
       background   var(--date-range-picker-duration) var(--date-range-picker-easing);

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.

package/components/datetime-picker/datetime-picker.a2ui.json

@@ -2,7 +2,7 @@
   "$schema": "https://json-schema.org/draft/2020-12/schema",
   "$id": "https://adiaui.dev/a2ui/v0_9/components/DatetimePicker.json",
   "title": "DatetimePicker",
-  "description": "Single-control date + time selection. Trigger button opens a popover with a `<calendar-picker-ui>` on the left + a `<time-picker-ui>` on the right; commit emits a full ISO 8601 datetime string (\"YYYY-MM-DDTHH:mm\" or with seconds). Composes the two underlying primitives — never wraps a native `<input type=\"datetime-local\">` (per ADR-0025). Form-associated under one `name`. SPEC-038.",
+  "description": "DEPRECATED (gh#1372, #1363 C3c) — folded into <calendar-picker-ui>'s widened `precision` axis. `<datetime-picker-ui>` is now a thin `UICalendarPicker` subclass (see datetime-picker.class.js) rather than an independent implementation: `precision` defaults to `\"minute\"` (not `\"date\"`) and `placeholder` defaults to `\"Select date and time\"`; every other prop/event/token is inherited unchanged from <calendar-picker-ui>. Existing markup keeps working, but new markup should reach for `<calendar-picker-ui precision=\"minute\">` (or `precision=\"second\"`) directly. See <calendar-picker-ui> for the full contract.",
   "type": "object",
   "allOf": [
     {
@@ -72,7 +72,7 @@
       "default": false
     },
     "placeholder": {
-      "description": "Text shown in the trigger when the value is empty.",
+      "description": "Text shown in the trigger when the value is empty. Defaults to \"Select date and time\" HERE (vs. \"Select date...\" on the base `<calendar-picker-ui>`).",
       "type": "string",
       "default": "Select date and time"
     },
@@ -92,9 +92,10 @@
       "default": "bottom"
     },
     "precision": {
-      "description": "Time-pane precision. `minute` (default) emits `HH:mm`; `second` exposes the seconds segment and emits `HH:mm:ss`.",
+      "description": "Time-pane precision. `minute` (default HERE — `date` on the base `<calendar-picker-ui>`) emits `HH:mm`; `second` exposes the seconds segment and emits `HH:mm:ss`; `date` drops the time pane entirely (identical to the base class's own default).",
       "type": "string",
       "enum": [
+        "date",
         "minute",
         "second"
       ],
@@ -127,34 +128,21 @@
         "wrong": "{\"component\": \"DatetimePicker\", \"value\": \"2026-05-24\"}\n"
       },
       {
-        "fix": "{\"component\": \"DatetimePicker\", \"value\": \"2026-05-24T14:30\"}\n",
-        "why": "`value` is a time-only string — no date component. Use `<TimePicker>` for\ntime-only selection or supply the date portion.\n",
-        "wrong": "{\"component\": \"DatetimePicker\", \"value\": \"14:30\"}\n"
-      },
-      {
-        "fix": "{\"component\": \"DatetimePicker\", \"name\": \"field-name\"}\n",
-        "why": "Nesting a native datetime-local input violates ADR-0025 and bypasses\nElementInternals form participation.\n",
-        "wrong": "{\"component\": \"DatetimePicker\", \"children\": [\n  {\"component\": \"Input\", \"type\": \"datetime-local\"}\n]}\n"
-      },
-      {
-        "fix": "<datetime-picker-ui name=\"appointment\"></datetime-picker-ui>\n",
-        "why": "Hand-rolled date + free-form time composition is the pattern this primitive\nreplaces. It misses the coordinated popover, the per-segment Spinbutton\na11y model, and unified form participation.\n",
-        "wrong": "<calendar-picker-ui></calendar-picker-ui>\n<input-ui type=\"text\" placeholder=\"HH:mm\"></input-ui>\n"
+        "fix": "{\"component\": \"CalendarPicker\", \"precision\": \"minute\", \"name\": \"appointment\"}\n",
+        "why": "DatetimePicker is deprecated (gh#1372) — new generation should reach\nfor CalendarPicker's widened precision axis instead.\n",
+        "wrong": "{\"component\": \"DatetimePicker\", \"name\": \"appointment\"}\n"
       }
     ],
     "category": "input",
     "composes": [
       "calendar-grid-ui",
       "time-picker-ui",
-      "button-ui",
-      "popover-ui",
       "divider-ui"
     ],
     "events": {
       "change": {
         "description": "Fired when the value commits (date picked + time edited, OR Apply clicked in explicit-commit mode).",
         "detail": {
-          "source": "string",
           "value": "string"
         }
       },
@@ -186,24 +174,9 @@
     },
     "examples": [
       {
-        "description": "Form-field-wrapped picker with min/max bounds.",
+        "description": "Form-field-wrapped picker with min/max bounds. Prefer the CalendarPicker[precision] form for NEW markup — see calendar-picker-ui's own \"datetime-picker\" example.",
         "a2ui": "[\n  {\n    \"id\": \"field\",\n    \"component\": \"Field\",\n    \"label\": \"Appointment\",\n    \"children\": [\"dt\"]\n  },\n  {\n    \"id\": \"dt\",\n    \"component\": \"DatetimePicker\",\n    \"name\": \"appointment\",\n    \"min\": \"2026-01-01T00:00\",\n    \"max\": \"2026-12-31T23:59\"\n  }\n]\n",
         "name": "canonical"
-      },
-      {
-        "description": "Log-cursor picker with second precision.",
-        "a2ui": "[\n  {\n    \"id\": \"dt\",\n    \"component\": \"DatetimePicker\",\n    \"name\": \"log-cursor\",\n    \"precision\": \"second\",\n    \"step\": 1,\n    \"value\": \"2026-05-24T14:30:45\"\n  }\n]\n",
-        "name": "second-precision"
-      },
-      {
-        "description": "Cron editor with forced 24-hour cycle.",
-        "a2ui": "[\n  {\n    \"id\": \"dt\",\n    \"component\": \"DatetimePicker\",\n    \"name\": \"cron\",\n    \"hourCycle\": \"h23\"\n  }\n]\n",
-        "name": "forced-24h"
-      },
-      {
-        "description": "Read-only datetime for inspection only.",
-        "a2ui": "[\n  {\n    \"id\": \"dt\",\n    \"component\": \"DatetimePicker\",\n    \"readonly\": true,\n    \"value\": \"2026-05-24T14:30\"\n  }\n]\n",
-        "name": "readonly"
       }
     ],
     "keywords": [
@@ -217,6 +190,7 @@
       "timestamp"
     ],
     "name": "UIDatetimePicker",
+    "parts": {},
     "related": [
       "calendar-picker",
       "time-picker",
@@ -230,7 +204,7 @@
         "description": "Optional Apply / Cancel buttons for explicit-commit flows. Spans both panes below the calendar + time area."
       },
       "trigger": {
-        "description": "Custom trigger replacement. When omitted, a default `<button-ui>` is stamped."
+        "description": "Custom trigger replacement. When omitted, a default trigger is stamped (a plain clickable span, per the base `<calendar-picker-ui>` — NOT the old standalone datetime-picker's `<button-ui>` trigger; see the Consequences note below)."
       }
     },
     "states": [
@@ -239,19 +213,9 @@
         "name": "idle"
       },
       {
-        "description": "Popover open, no calendar pick yet.",
-        "attribute": "open",
-        "name": "open-pending-date"
-      },
-      {
-        "description": "Date picked; time pane is the next focus target.",
-        "attribute": "open",
-        "name": "open-pending-time"
-      },
-      {
-        "description": "Both panes set; awaiting Apply (explicit-commit mode only).",
+        "description": "Popover open.",
         "attribute": "open",
-        "name": "open-committed"
+        "name": "open"
       },
       {
         "description": "Non-interactive; dimmed.",
@@ -264,7 +228,7 @@
         "name": "readonly"
       }
     ],
-    "status": "experimental",
+    "status": "deprecated",
     "synonyms": {
       "appointment": [
         "datetime",
@@ -285,65 +249,8 @@
       ]
     },
     "tag": "datetime-picker-ui",
-    "tokens": {
-      "--datetime-picker-bg": {
-        "description": "Host background.",
-        "default": "var(--a-bg)"
-      },
-      "--datetime-picker-divider": {
-        "description": "Pane divider color.",
-        "default": "var(--a-border-subtle)"
-      },
-      "--datetime-picker-duration": {
-        "description": "Open/close transition duration.",
-        "default": "var(--a-duration-fast)"
-      },
-      "--datetime-picker-easing": {
-        "description": "Open/close transition easing.",
-        "default": "var(--a-easing)"
-      },
-      "--datetime-picker-fg": {
-        "description": "Host text color.",
-        "default": "var(--a-fg)"
-      },
-      "--datetime-picker-popover-bg": {
-        "description": "Popover background.",
-        "default": "var(--a-bg-subtle)"
-      },
-      "--datetime-picker-popover-border": {
-        "description": "Popover border color.",
-        "default": "var(--a-border-subtle)"
-      },
-      "--datetime-picker-popover-gap": {
-        "description": "Gap between calendar pane and time pane.",
-        "default": "var(--a-space-3)"
-      },
-      "--datetime-picker-popover-padding": {
-        "description": "Popover internal padding.",
-        "default": "var(--a-space-3)"
-      },
-      "--datetime-picker-popover-radius": {
-        "description": "Popover border radius.",
-        "default": "var(--a-radius-lg)"
-      },
-      "--datetime-picker-popover-shadow": {
-        "description": "Popover box shadow.",
-        "default": "var(--a-shadow-lg)"
-      },
-      "--datetime-picker-px": {
-        "description": "Horizontal popover padding.",
-        "default": "var(--a-space-3)"
-      },
-      "--datetime-picker-py": {
-        "description": "Vertical popover padding.",
-        "default": "var(--a-space-2)"
-      },
-      "--datetime-picker-trigger-min-width": {
-        "description": "Default trigger min-width — sized so the formatted date+time fits without truncation.",
-        "default": "16em"
-      }
-    },
+    "tokens": {},
     "traits": [],
-    "version": 1
+    "version": 2
   }
 }