@adia-ai/web-components 0.8.39 → 0.8.41

package/components/input/input.a2ui.json

@@ -14,7 +14,7 @@
   ],
   "properties": {
     "type": {
-      "description": "Input type. `password` wraps a native `<input>` for disc masking; `number` renders a contenteditable + stepper buttons (no native input). All other types use plain contenteditable.",
+      "description": "Input type. `password` wraps a native `<input>` for disc masking; `number` renders a contenteditable + stepper buttons (no native input). `text`/`email`/`tel`/`url` use plain contenteditable. input-ui does NOT implement date/time/color/search affordances — those HTML5 type values render as a plain contenteditable with no calendar, clock, swatch, or search affordance (first-pass-VALID against this enum historically, but functionally broken generation output). Use the owning primitive instead — CalendarPicker for date (+ month/week, no dedicated granularity primitive exists), DatetimePicker for datetime-local, TimePicker for time, ColorInput/ColorPicker for color, Search for search. See anti_patterns.",
       "type": "string",
       "enum": [
         "text",
@@ -22,14 +22,7 @@
         "password",
         "number",
         "tel",
-        "url",
-        "search",
-        "date",
-        "datetime-local",
-        "time",
-        "month",
-        "week",
-        "color"
+        "url"
       ],
       "default": "text"
     },
@@ -71,22 +64,34 @@
     },
     "max": {
       "description": "Maximum numeric value. Applies when `type=\"number\"`. Clamps + drives aria-valuemax + the [+] button's disabled state.",
-      "type": "number",
+      "type": [
+        "number",
+        "null"
+      ],
       "default": null
     },
     "maxlength": {
       "description": "Maximum character length for validation",
-      "type": "number",
+      "type": [
+        "number",
+        "null"
+      ],
       "default": null
     },
     "min": {
       "description": "Minimum numeric value. Applies when `type=\"number\"`. Clamps + drives aria-valuemin + the [-] button's disabled state.",
-      "type": "number",
+      "type": [
+        "number",
+        "null"
+      ],
       "default": null
     },
     "minlength": {
       "description": "Minimum character length for validation",
-      "type": "number",
+      "type": [
+        "number",
+        "null"
+      ],
       "default": null
     },
     "name": {
@@ -106,7 +111,10 @@
     },
     "precision": {
       "description": "Decimal places to display + clamp to, when `type=\"number\"`. Overrides the implicit decimal-count from `step` — e.g. `step=1 precision=2` formats \"10.00\".",
-      "type": "number",
+      "type": [
+        "number",
+        "null"
+      ],
       "default": null
     },
     "prefix": {
@@ -150,7 +158,43 @@
   ],
   "unevaluatedProperties": false,
   "x-adiaui": {
-    "anti_patterns": [],
+    "anti_patterns": [
+      {
+        "fix": "{\"component\": \"CalendarPicker\"}\n",
+        "why": "input-ui's `type` enum no longer includes \"date\" (gh#1363\nB10) — it never rendered a native date picker, just a plain\ncontenteditable surface with no calendar affordance. Use\nCalendarPicker for single-date input.\n",
+        "wrong": "{\"component\": \"Input\", \"type\": \"date\"}\n"
+      },
+      {
+        "fix": "{\"component\": \"DatetimePicker\"}\n",
+        "why": "Same gap as \"date\" — no native datetime picker rendered. Use\nDatetimePicker for combined date + time input.\n",
+        "wrong": "{\"component\": \"Input\", \"type\": \"datetime-local\"}\n"
+      },
+      {
+        "fix": "{\"component\": \"TimePicker\"}\n",
+        "why": "Same gap as \"date\" — no native time picker rendered. Use\nTimePicker for time-of-day input.\n",
+        "wrong": "{\"component\": \"Input\", \"type\": \"time\"}\n"
+      },
+      {
+        "fix": "{\"component\": \"CalendarPicker\"}\n",
+        "why": "No native month picker rendered, and no dedicated month-granularity\nprimitive exists in the catalog. CalendarPicker (day granularity)\nis the closest routed primitive.\n",
+        "wrong": "{\"component\": \"Input\", \"type\": \"month\"}\n"
+      },
+      {
+        "fix": "{\"component\": \"CalendarPicker\"}\n",
+        "why": "No native week picker rendered, and no dedicated week-granularity\nprimitive exists in the catalog. CalendarPicker (day granularity)\nis the closest routed primitive.\n",
+        "wrong": "{\"component\": \"Input\", \"type\": \"week\"}\n"
+      },
+      {
+        "fix": "{\"component\": \"ColorInput\"}\n",
+        "why": "No native color swatch/picker rendered — just a plain text\nsurface. Use ColorInput for a compact form-bearing swatch +\npopover, or ColorPicker directly for the full OKLCH picker\nsurface.\n",
+        "wrong": "{\"component\": \"Input\", \"type\": \"color\"}\n"
+      },
+      {
+        "fix": "{\"component\": \"Search\"}\n",
+        "why": "No search icon or clear affordance rendered — plain\ncontenteditable, functionally identical to the default text\ntype. Use Search for the dedicated magnifying-glass + clear +\ndebounced-search-event primitive.\n",
+        "wrong": "{\"component\": \"Input\", \"type\": \"search\"}\n"
+      }
+    ],
     "category": "input",
     "composes": [
       "button-ui",
@@ -211,12 +255,18 @@
       "tag"
     ],
     "name": "UIInput",
+    "parts": {},
     "related": [
       "avatar",
       "button",
       "table",
       "pagination",
-      "check-box"
+      "check-box",
+      "search",
+      "calendar-picker",
+      "datetime-picker",
+      "time-picker",
+      "color-input"
     ],
     "slots": {
       "leading": {

package/components/input/input.class.js

@@ -148,12 +148,7 @@ export class UIInput extends UIFormElement {
     const trailingNodes = logicalSlotted(this, 'trailing');
 
     if (!this.querySelector('[slot="text"]')) {
-      const labelId = this.label ? `input-label-${++UIInput.#labelSeq}` : '';
-      this.innerHTML = this.#shellHTML(labelId);
-      // innerHTML wiped the consumer-supplied leading/trailing nodes; re-attach
-      // them into the field at the right positions. Order matches the JSDoc:
-      //   prefix → leading → label → text → suffix → trailing → controls
-      this.#installAffordances(leadingNodes, trailingNodes);
+      this.#buildShell(leadingNodes, trailingNodes);
     }
 
     this.#textEl  = this.querySelector('[slot="text"]');
@@ -200,6 +195,64 @@ export class UIInput extends UIFormElement {
     }
   }
 
+  #buildShell(leadingNodes, trailingNodes) {
+    const labelId = this.label ? `input-label-${++UIInput.#labelSeq}` : '';
+    this.innerHTML = this.#shellHTML(labelId);
+    // innerHTML wiped the consumer-supplied leading/trailing nodes; re-attach
+    // them into the field at the right positions. Order matches the JSDoc:
+    //   prefix → leading → label → text → suffix → trailing → controls
+    this.#installAffordances(leadingNodes, trailingNodes);
+  }
+
+  /**
+   * Post-connect `type` reconciliation (gh#1332 review follow-up). The shell
+   * is built once at connect, but `type` is reactive and reflected — since
+   * number-mode CSS now keys off the host's [type="number"] directly, a
+   * text↔number flip after connect would restyle without restructuring
+   * (role, inputmode, stepper controls, beforeinput filter all stale).
+   * Rebuild the shell + listeners when the built mode disagrees with the
+   * live property. No-op on every render where the modes already agree.
+   */
+  #reconcileTypeMode() {
+    if (this.#isNativePassword || !this.#textEl) return;
+    const builtNumberMode = !!this.querySelector(':scope > [slot="field"] [data-controls]');
+    if (builtNumberMode === this.#isNumberMode) return;
+
+    // Unwire the old surface, capture consumer affordances from inside the
+    // live field (logicalSlotted won't re-match nodes already moved there).
+    this.#textEl.removeEventListener('input',    this.#onInput);
+    this.#textEl.removeEventListener('keydown',  this.#onKeydown);
+    this.#textEl.removeEventListener('blur',     this.#onBlur);
+    this.#textEl.removeEventListener('focus',    this.#onFocus);
+    this.#textEl.removeEventListener('paste',    this.#onPaste);
+    this.#textEl.removeEventListener('beforeinput', this.#onBeforeInput);
+    const field = this.querySelector(':scope > [slot="field"]');
+    const leadingNodes  = field ? [...field.querySelectorAll(':scope > [slot="leading"]')]  : [];
+    const trailingNodes = field ? [...field.querySelectorAll(':scope > [slot="trailing"]')] : [];
+
+    this.#buildShell(leadingNodes, trailingNodes);
+    this.setAttribute('role', this.#isNumberMode ? 'spinbutton' : 'textbox');
+    this.#textEl  = this.querySelector('[slot="text"]');
+    this.#labelEl = this.querySelector('[slot="label"]');
+    this.#upBtn   = this.querySelector('[data-step="up"]');
+    this.#downBtn = this.querySelector('[data-step="down"]');
+    if (this.#textEl) {
+      this.#textEl.addEventListener('input',    this.#onInput);
+      this.#textEl.addEventListener('keydown',  this.#onKeydown);
+      this.#textEl.addEventListener('blur',     this.#onBlur);
+      this.#textEl.addEventListener('focus',    this.#onFocus);
+      this.#textEl.addEventListener('paste',    this.#onPaste);
+      if (this.#isNumberMode) {
+        this.#textEl.addEventListener('beforeinput', this.#onBeforeInput);
+      }
+    }
+    this.#upBtn?.addEventListener('pointerdown', this.#onStepperUpDown);
+    this.#downBtn?.addEventListener('pointerdown', this.#onStepperDownDown);
+    if (this.prefix || this.suffix) {
+      whenIconRegistryReady.then(() => this.#promoteAffixes());
+    }
+  }
+
   #shellHTML(labelId) {
     const prefix  = this.prefix ? `<span slot="prefix">${renderAffix(this.prefix)}</span>` : '';
     const label   = this.label  ? `<span slot="label" id="${labelId}">${this.label}</span>` : '';
@@ -234,8 +287,11 @@ export class UIInput extends UIFormElement {
                    icon="caret-down" data-step="down" aria-label="Decrease"></button-ui>
       </span>` : '';
 
+    // No private data-number mirror on the field div — number-mode CSS keys
+    // off the declared, reflected host [type="number"] directly (gh#1332
+    // Category A; select-ui data-multi-chips precedent).
     return `
-      <div slot="field"${this.#isNumberMode ? ' data-number' : ''}>
+      <div slot="field">
         ${prefix}${label}${editable}${suffix}${controls}
       </div>
     `;
@@ -372,6 +428,7 @@ export class UIInput extends UIFormElement {
 
   render() {
     if (!this.#textEl) return;
+    this.#reconcileTypeMode();
 
     const text = this.value ?? '';
 

package/components/input/input.css

@@ -106,13 +106,14 @@ input-ui:not([disabled]) [slot="field"]:hover [slot="suffix"] {
     /* font-family floor — see segment.css rationale. */
     font-family: var(--input-font-family);
     font-size: var(--input-font-size);
-    /* line-height: 1.4 (not 1) so descender-bearing glyphs (g, j, p, q, y)
-       have room inside [slot="text"]'s line box. With line-height: 1 the
+    /* line-height: normal (1.35, not 1) so descender-bearing glyphs
+       (g, j, p, q, y) have room inside [slot="text"]'s line box. With
+       line-height: 1 the
        line box equals the em-square and descenders extend below it; the
        overflow: hidden on [slot="text"] then clips them. The min-height
        still controls overall chrome height — align-items: center keeps the
        baseline centered regardless of line-height. */
-    line-height: 1.4;
+    line-height: var(--a-font-leading-normal);
     cursor: text;
     /* Cover every property the hover / focus / invalid states change so
        the field doesn't half-snap (border slides, but bg/colour/ring snap). */
@@ -190,10 +191,10 @@ input-ui:not([disabled]) [slot="field"]:hover [slot="suffix"] {
      absolutely against the field's inline-end edge so it NEVER affects
      the field's flex-sized height — number-mode inputs share the same
      24/30/36px (sm/md/lg) baseline as text/email/password/etc. */
-  [data-number] [slot="text"] {
+  :scope[type="number"] [slot="field"] [slot="text"] {
     text-align: end;
     font-variant-numeric: tabular-nums;
-    font-weight: var(--a-weight-medium, 500);
+    font-weight: var(--a-weight-medium);
     /* Reserve space for the absolutely-positioned controls column so the
        value never collides with the stepper buttons. */
     padding-inline-end: var(--input-controls-width, calc(var(--input-height) * 0.7));
@@ -201,7 +202,7 @@ input-ui:not([disabled]) [slot="field"]:hover [slot="suffix"] {
 
   /* Suffix sits flush after the value in number mode (no auto margin so
      the value+suffix pair stays right-aligned together). */
-  [data-number] [slot="suffix"] {
+  :scope[type="number"] [slot="field"] [slot="suffix"] {
     margin-inline-start: 0;
     /* Reserve space for the absolutely-positioned controls column so the
        suffix never collides with the stepper buttons. The padding moves
@@ -209,11 +210,11 @@ input-ui:not([disabled]) [slot="field"]:hover [slot="suffix"] {
        — only one element needs the reservation since they're adjacent. */
     margin-inline-end: var(--input-controls-width, calc(var(--input-height) * 0.7));
   }
-  [data-number]:has([slot="suffix"]) [slot="text"] {
+  :scope[type="number"] [slot="field"]:has([slot="suffix"]) [slot="text"] {
     padding-inline-end: 0;
   }
 
-  [data-number] {
+  :scope[type="number"] [slot="field"] {
     position: relative;
   }
 
@@ -229,7 +230,7 @@ input-ui:not([disabled]) [slot="field"]:hover [slot="suffix"] {
     overflow: hidden;
   }
 
-  [data-number] [slot="controls"] button-ui {
+  :scope[type="number"] [slot="field"] [slot="controls"] button-ui {
     /* Defeat button-ui's intrinsic min-height (driven by --button-height) so
        its content can't push past half the column height. Padding + border
        are zeroed; the divider between the two buttons comes from the
@@ -255,14 +256,14 @@ input-ui:not([disabled]) [slot="field"]:hover [slot="suffix"] {
      because its own `:where(:scope)` declaration of --icon-size wins over
      any value inherited from its parent button-ui. Tying it to
      --input-height keeps the caret proportional across sm/md/lg. */
-  [data-number] [slot="controls"] icon-ui {
+  :scope[type="number"] [slot="field"] [slot="controls"] icon-ui {
     --icon-size: calc(var(--input-height) * 0.4);
   }
-  [data-number] [slot="controls"] button-ui:hover {
+  :scope[type="number"] [slot="field"] [slot="controls"] button-ui:hover {
     --button-bg: var(--a-ui-bg-hover);
     --button-fg: var(--a-ui-text);
   }
-  [data-number] [slot="controls"] button-ui[disabled] {
+  :scope[type="number"] [slot="field"] [slot="controls"] button-ui[disabled] {
     --button-fg: var(--a-ui-text-disabled);
     pointer-events: none;
   }
@@ -272,11 +273,11 @@ input-ui:not([disabled]) [slot="field"]:hover [slot="suffix"] {
      field radius cleanly. The divider between the two buttons is the
      inline-start border on the column + the bottom-border on the upper
      button. */
-  [data-number] [slot="controls"] button-ui:first-child {
+  :scope[type="number"] [slot="field"] [slot="controls"] button-ui:first-child {
     border-bottom: 1px solid var(--input-border);
     border-start-end-radius: calc(var(--input-radius) - 1px);
   }
-  [data-number] [slot="controls"] button-ui:last-child {
+  :scope[type="number"] [slot="field"] [slot="controls"] button-ui:last-child {
     border-end-end-radius: calc(var(--input-radius) - 1px);
   }
 
@@ -286,8 +287,8 @@ input-ui:not([disabled]) [slot="field"]:hover [slot="suffix"] {
     margin-inline-end: 0;
     border-inline-start: none;
   }
-  :scope[raw] [data-number] [slot="controls"] button-ui:first-child,
-  :scope[raw] [data-number] [slot="controls"] button-ui:last-child {
+  :scope[raw][type="number"] [slot="field"] [slot="controls"] button-ui:first-child,
+  :scope[raw][type="number"] [slot="field"] [slot="controls"] button-ui:last-child {
     border-bottom: none;
     border-radius: 0;
   }
@@ -306,7 +307,7 @@ input-ui:not([disabled]) [slot="field"]:hover [slot="suffix"] {
     flex-shrink: 0;
     color: var(--input-affix-fg);
     font-size: var(--input-font-size);
-    line-height: 1;
+    line-height: var(--a-font-leading-none);
     user-select: none;
     pointer-events: none;
   }
@@ -372,7 +373,7 @@ input-ui:not([disabled]) [slot="field"]:hover [slot="suffix"] {
      for the stepper column so it doesn't overlap. (controls is
      absolutely positioned at inset-inline-end: 0; trailing sits in the
      flex flow.) Same pattern as [slot="suffix"] in number mode. */
-  [data-number]:has(> [slot="trailing"]) > [slot="trailing"] {
+  :scope[type="number"] [slot="field"]:has(> [slot="trailing"]) > [slot="trailing"] {
     margin-inline-end: var(--input-controls-width, calc(var(--input-height) * 0.7));
   }
 

package/components/input/input.d.ts

@@ -1,20 +1,25 @@
 /**
- * `<input-ui>` — Text + email + password + number + tel + url + search input.
+ * `<input-ui>` — Text + email + password + number + tel + url input.
  *
  * @see https://ui-kit.exe.xyz/site/components/input
  */
 
 import { UIFormElement } from '../../core/form.js';
 
-/** Native HTML input types this primitive supports. */
+/**
+ * Native HTML input types this primitive actually implements. Does NOT
+ * cover date/datetime-local/time/month/week/color/search — those never
+ * rendered a native affordance on this primitive (v0.9.0, gh#1363 B10);
+ * route to CalendarPicker/DatetimePicker/TimePicker/ColorInput/Search
+ * instead.
+ */
 export type UIInputType =
   | 'text'
   | 'email'
   | 'password'
   | 'number'
   | 'tel'
-  | 'url'
-  | 'search';
+  | 'url';
 
 export interface InputChangeEventDetail {
   value: string;

package/components/input/input.yaml

@@ -23,8 +23,19 @@ props:
     type: string
     default: ''
   type:
-    description: Input type. `password` wraps a native `<input>` for disc masking; `number` renders a contenteditable + stepper
-      buttons (no native input). All other types use plain contenteditable.
+    description: >-
+      Input type. `password` wraps a native `<input>` for disc masking;
+      `number` renders a contenteditable + stepper buttons (no native
+      input). `text`/`email`/`tel`/`url` use plain contenteditable.
+      input-ui does NOT implement date/time/color/search affordances —
+      those HTML5 type values render as a plain contenteditable with no
+      calendar, clock, swatch, or search affordance (first-pass-VALID
+      against this enum historically, but functionally broken generation
+      output). Use the owning primitive instead — CalendarPicker for date
+      (+ month/week, no dedicated granularity primitive exists),
+      DatetimePicker for datetime-local, TimePicker for time,
+      ColorInput/ColorPicker for color, Search for search. See
+      anti_patterns.
     type: string
     default: text
     enum:
@@ -34,13 +45,6 @@ props:
     - number
     - tel
     - url
-    - search
-    - date
-    - datetime-local
-    - time
-    - month
-    - week
-    - color
   required:
     description: Marks the field as required for form validation. Sets aria-required.
     type: boolean
@@ -282,7 +286,71 @@ a2ui:
       primitive ALSO fires a bubbling `submit` event on Enter
       (unconditional, no opt-in attribute); <chat-input-ui> simply
       builds on that semantic.
-anti_patterns: []
+    - >-
+      input-ui's `type` enum covers only the modes it actually implements
+      — text/email/password/number/tel/url (gh#1363 B10). Never
+      set [type] to an HTML5 value input-ui doesn't render — route
+      date/time/color/search intents to the owning primitive instead:
+      CalendarPicker, DatetimePicker, TimePicker, ColorInput (or
+      ColorPicker directly), Search. See anti_patterns.
+anti_patterns:
+  - wrong: |
+      {"component": "Input", "type": "date"}
+    why: |
+      input-ui's `type` enum no longer includes "date" (gh#1363
+      B10) — it never rendered a native date picker, just a plain
+      contenteditable surface with no calendar affordance. Use
+      CalendarPicker for single-date input.
+    fix: |
+      {"component": "CalendarPicker"}
+  - wrong: |
+      {"component": "Input", "type": "datetime-local"}
+    why: |
+      Same gap as "date" — no native datetime picker rendered. Use
+      DatetimePicker for combined date + time input.
+    fix: |
+      {"component": "DatetimePicker"}
+  - wrong: |
+      {"component": "Input", "type": "time"}
+    why: |
+      Same gap as "date" — no native time picker rendered. Use
+      TimePicker for time-of-day input.
+    fix: |
+      {"component": "TimePicker"}
+  - wrong: |
+      {"component": "Input", "type": "month"}
+    why: |
+      No native month picker rendered, and no dedicated month-granularity
+      primitive exists in the catalog. CalendarPicker (day granularity)
+      is the closest routed primitive.
+    fix: |
+      {"component": "CalendarPicker"}
+  - wrong: |
+      {"component": "Input", "type": "week"}
+    why: |
+      No native week picker rendered, and no dedicated week-granularity
+      primitive exists in the catalog. CalendarPicker (day granularity)
+      is the closest routed primitive.
+    fix: |
+      {"component": "CalendarPicker"}
+  - wrong: |
+      {"component": "Input", "type": "color"}
+    why: |
+      No native color swatch/picker rendered — just a plain text
+      surface. Use ColorInput for a compact form-bearing swatch +
+      popover, or ColorPicker directly for the full OKLCH picker
+      surface.
+    fix: |
+      {"component": "ColorInput"}
+  - wrong: |
+      {"component": "Input", "type": "search"}
+    why: |
+      No search icon or clear affordance rendered — plain
+      contenteditable, functionally identical to the default text
+      type. Use Search for the dedicated magnifying-glass + clear +
+      debounced-search-event primitive.
+    fix: |
+      {"component": "Search"}
 examples:
 - name: quantity-stepper
   description: Number input with [+]/[-] stepper buttons, min/max bounds, and a quantity label. Use for product quantity,
@@ -391,3 +459,8 @@ related:
 - table
 - pagination
 - check-box
+- search
+- calendar-picker
+- datetime-picker
+- time-picker
+- color-input

package/components/inspector/inspector.a2ui.json

@@ -46,6 +46,7 @@
       "inspector"
     ],
     "name": "UIInspector",
+    "parts": {},
     "related": [
       "A2uiRoot",
       "EditorSidebar",

package/components/integration-card/integration-card.a2ui.json

@@ -150,6 +150,7 @@
       "tile"
     ],
     "name": "UIIntegrationCard",
+    "parts": {},
     "related": [
       "card",
       "badge",

package/components/integration-card/integration-card.css

@@ -97,7 +97,7 @@
     color: var(--integration-card-heading-fg);
     font-size: var(--integration-card-heading-size);
     font-weight: var(--integration-card-heading-weight);
-    line-height: 1.3;
+    line-height: var(--a-font-leading-normal);
     min-width: 0;
     overflow: hidden;
     text-overflow: ellipsis;
@@ -118,7 +118,7 @@
     margin: 0;
     color: var(--integration-card-description-fg);
     font-size: var(--integration-card-description-size);
-    line-height: 1.4;
+    line-height: var(--a-font-leading-relaxed);
   }
   :scope > [data-integration-card-description][hidden] {
     display: none;
@@ -131,7 +131,7 @@
     margin: 0;
     color: var(--integration-card-description-fg);
     font-size: var(--integration-card-description-size);
-    line-height: 1.4;
+    line-height: var(--a-font-leading-relaxed);
   }
 
   /* ── Error message ── */
@@ -139,7 +139,7 @@
     margin: 0;
     color: var(--integration-card-error-fg);
     font-size: var(--integration-card-error-size);
-    line-height: 1.4;
+    line-height: var(--a-font-leading-relaxed);
   }
   :scope > [data-integration-card-error][hidden] {
     display: none;

package/components/kbd/kbd.a2ui.json

@@ -56,6 +56,7 @@
       "keybinding"
     ],
     "name": "UIKbd",
+    "parts": {},
     "related": [
       "grid"
     ],

package/components/kbd/kbd.css

@@ -43,7 +43,7 @@
     font-family: var(--kbd-font);
     font-size: var(--kbd-font-size);
     font-weight: var(--kbd-weight);
-    line-height: 1;
+    line-height: var(--a-font-leading-none);
     color: var(--kbd-fg);
     background: var(--kbd-bg);
     border: 1px solid var(--kbd-border);

package/components/link/link.a2ui.json

@@ -79,7 +79,7 @@
       "❌ `<link-ui>` with no `href` AND no `press` handler — a link to nowhere is a bug. Either set `href` or wire a navigate action handler.",
       "❌ `<link-ui>` for form submission — submission is a button concern. Use `<button-ui type=\"submit\">`."
     ],
-    "category": "content",
+    "category": "display",
     "composes": [],
     "events": {
       "press": {
@@ -121,6 +121,7 @@
       "url"
     ],
     "name": "UILink",
+    "parts": {},
     "related": [
       "Button",
       "NavItem",

package/components/link/link.yaml

@@ -3,7 +3,7 @@ name: UILink
 tag: link-ui
 status: stable
 component: Link
-category: content
+category: display
 version: 1
 description: |
   Inline navigation primitive — semantic `<a href>` wrapper. Use for

package/components/list/list-item.a2ui.json

@@ -24,6 +24,11 @@
       "description": "Optional leading icon name (Phosphor).",
       "type": "string"
     },
+    "selected": {
+      "description": "Whether this row is the current selection. Managed by the parent <list-ui>[selectable] — don't set directly; the parent's [selectedKey] is the single source of truth (ADR-0056).",
+      "type": "boolean",
+      "default": false
+    },
     "text": {
       "description": "Primary text. Renders as semibold inline body.",
       "type": "string"
@@ -34,6 +39,9 @@
   ],
   "unevaluatedProperties": false,
   "x-adiaui": {
+    "allowedParents": [
+      "List"
+    ],
     "anti_patterns": [],
     "category": "layout",
     "composes": [],
@@ -47,6 +55,7 @@
       "row"
     ],
     "name": "UIListItem",
+    "parts": {},
     "related": [
       "List",
       "NavItem",