@adia-ai/web-components 0.8.38 → 0.8.40

package/components/chart/chart.yaml

@@ -76,10 +76,11 @@ props:
     type: boolean
     default: false
     attribute: hide-values
-  radius:
-    description: Bar corner radius (null = let CSS tokens decide)
+  cornerRadius:
+    description: Bar corner radius in px (null = let CSS tokens decide)
     type: number
     default: null
+    attribute: corner-radius
   size:
     description: Chart size
     type: string

package/components/chat-thread/chat-thread.css

@@ -50,7 +50,7 @@
     --chat-msg-avatar-size-font:  var(--a-ui-sm);
     --chat-msg-avatar-weight:     var(--a-weight-semibold);
     --chat-bubble-font-size:      var(--a-body-size);
-    --chat-bubble-line-height:    var(--a-leading-normal);
+    --chat-bubble-line-height:    var(--a-font-leading-relaxed);
   }
 
   :scope {

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

@@ -127,6 +127,12 @@
     cursor: pointer;
   }
   [data-suffix] icon-ui[name="caret-down"] {
+    /* Universal caret size (gh#1314 sweep) — overrides the shared
+       [data-prefix]/[data-suffix] --a-icon-size (font-size) above so the
+       default caret matches select-ui's trigger caret instead of riding
+       the field's text size. Name-guarded: a consumer-slotted non-caret
+       suffix glyph keeps the font-size default. */
+    --a-icon-size: var(--a-caret-size);
     transition: rotate var(--a-duration-fast) var(--a-easing);
   }
   /* Clear OPEN state: the default caret flips while the listbox is open.
@@ -143,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
@@ -316,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/command/command.a2ui.json

@@ -105,6 +105,9 @@
       "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"
       }

package/components/command/command.class.js

@@ -14,6 +14,12 @@
 import { UIElement } from '../../core/element.js';
 import { logicalSlotted } from '../../core/logical-children.js';
 
+function escapeHTML(s) {
+  return String(s).replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
+}
+
+let cmdInstanceSeq = 0;
+
 /**
  * <command-ui> — Searchable command palette.
  *
@@ -58,6 +64,7 @@ export class UICommand extends UIElement {
   #bound = false;
   #itemByEl = new WeakMap();
   #emptyNodes = [];
+  #instanceId = `command-${++cmdInstanceSeq}`;
 
   static #RECENTS_MAX = 3;
 
@@ -96,12 +103,22 @@ export class UICommand extends UIElement {
       }
       this.#emptyNodes = logicalSlotted(this, 'empty');
 
+      const listId = `${this.#instanceId}-list`;
+
+      // No native <input> wrap (per ADR-0055 / ADR-0025): the search field
+      // is a `contenteditable="plaintext-only"` surface carrying
+      // `role="combobox"`, matching combobox-ui's editable-surface pattern.
+      // Placeholder text renders via the [data-empty]::before pseudo (see
+      // command.css), same mechanism as input-ui / combobox-ui.
       this.innerHTML = `
         <header>
           <icon-ui name="magnifying-glass" slot="icon"></icon-ui>
-          <input type="text" placeholder="${this.placeholder}" slot="input" />
+          <span contenteditable="plaintext-only" role="combobox" tabindex="0"
+                aria-autocomplete="list" aria-expanded="false" aria-controls="${listId}"
+                data-placeholder="${escapeHTML(this.placeholder)}" data-empty
+                slot="input"></span>
         </header>
-        <section slot="list"></section>
+        <section slot="list" id="${listId}"></section>
         <footer>
           <span data-hint><kbd>↑</kbd><kbd>↓</kbd> Navigate</span>
           <span data-hint><kbd>↵</kbd> Select</span>
@@ -109,7 +126,7 @@ export class UICommand extends UIElement {
         </footer>
       `;
 
-      this.#inputEl = this.querySelector('input');
+      this.#inputEl = this.querySelector('[slot="input"]');
       this.#listEl = this.querySelector('[slot="list"]');
       this.#footerEl = this.querySelector('footer');
 
@@ -120,6 +137,8 @@ export class UICommand extends UIElement {
       this.#renderItems();
     }
 
+    if (this.#inputEl) this.#inputEl.setAttribute('aria-expanded', String(this.open));
+
     if (this.open) {
       this.#focusRaf = requestAnimationFrame(() => {
         this.#focusRaf = null;
@@ -130,11 +149,12 @@ export class UICommand extends UIElement {
 
   // ── Public API ──
 
-  get value() { return this.#inputEl?.value || ''; }
+  get value() { return this.#inputEl?.textContent || ''; }
   set value(v) {
     if (!this.#inputEl) return;
     const next = v ?? '';
-    this.#inputEl.value = next;
+    this.#inputEl.textContent = next;
+    this.#inputEl.toggleAttribute('data-empty', !next);
     // Keep the rendered list in sync with the visible input — the host
     // commonly clears value on (re)open, and consumers expect to see the
     // full list (plus recents) rather than the previous filter's residue.
@@ -421,7 +441,9 @@ export class UICommand extends UIElement {
   // ── Events ──
 
   #onInput = () => {
-    this.#renderItems(this.#inputEl.value);
+    const text = this.#inputEl.textContent || '';
+    this.#inputEl.toggleAttribute('data-empty', !text);
+    this.#renderItems(text);
   };
 
   #onKeydown = (e) => {

package/components/command/command.css

@@ -102,7 +102,7 @@
     --a-icon-size: 1rem;
   }
 
-  & > header input {
+  & > header [slot="input"] {
     flex: 1;
     min-width: 0;
     border: none;
@@ -111,16 +111,27 @@
     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;
+    /* Positioning context for the [data-empty]::before placeholder pseudo
+       below — out-of-flow, same rationale as input-ui/combobox-ui: an
+       in-flow pseudo would render the caret after the placeholder text
+       instead of at content-start. */
+    position: relative;
   }
 
-  & > header input::placeholder {
+  & > header [slot="input"][data-empty]::before {
+    content: attr(data-placeholder);
     color: var(--command-fg-muted);
+    pointer-events: none;
+    position: absolute;
+    inset: 0;
   }
 
   /* Suppress focus ring on the input — the palette itself is the focused surface */
-  & > header input:focus-visible {
+  & > header [slot="input"]:focus-visible {
     outline: none;
     box-shadow: none;
   }
@@ -205,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;
   }
 
@@ -244,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

@@ -67,6 +67,11 @@ slots:
     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
 states:

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

@@ -90,6 +90,12 @@
      equal specificity so the picker trigger reads as part of the
      input/picker family rather than a generic button. */
   :scope [slot="trigger"] icon-ui[name="caret-down"] {
+    /* Universal caret size (gh#1314) — without this the caret rides the
+       ambient icon size instead of the shared --a-caret-size token that
+       select-ui's trigger caret already reads, so mixed control rows
+       (select-ui next to date-range-picker-ui) showed visibly different
+       chevron sizes. */
+    --a-icon-size: var(--a-caret-size);
     transition: rotate var(--a-duration-fast) var(--a-easing);
   }
   /* Clear OPEN state: the default trigger's trailing caret flips while the
@@ -113,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/datetime-picker/datetime-picker.css

@@ -62,6 +62,10 @@
      left-aligned with the caret pushed to the trailing edge, not centered
      like a default button. */
   :scope [slot="trigger"] icon-ui[name="caret-down"] {
+    /* Universal caret size (gh#1314 sweep) — mirrors select-ui's trigger
+       caret so mixed control rows read as one family instead of showing
+       the ambient (larger) icon size. */
+    --a-icon-size: var(--a-caret-size);
     transition: rotate var(--a-duration-fast) var(--a-easing);
   }
   /* Clear OPEN state: the default trigger's trailing caret flips while the
@@ -73,7 +77,7 @@
   :scope [slot="trigger"] {
     min-width: var(--datetime-picker-trigger-min-width);
     justify-content: space-between;
-    line-height: 1;
+    line-height: var(--a-font-leading-none);
   }
   /* A committed value bumps to --a-ui-text (bright), matching input-ui /
      select-ui / time-picker value color; the empty placeholder keeps

package/components/description-list/description-list.css

@@ -44,7 +44,7 @@
     font-size: var(--description-list-term-font-size);
     font-weight: var(--description-list-term-weight);
     color: var(--description-list-term-fg);
-    line-height: 1.3;
+    line-height: var(--a-font-leading-normal);
   }
 
   [data-dl-desc],
@@ -53,7 +53,7 @@
     font-size: var(--description-list-desc-font-size);
     font-weight: var(--description-list-desc-weight);
     color: var(--description-list-desc-fg);
-    line-height: 1.4;
+    line-height: var(--a-font-leading-relaxed);
   }
 
   /* Pair separator: extra margin under each non-last dd so DD→DT (between

package/components/display-field/display-field.css

@@ -50,7 +50,7 @@
     color: var(--display-field-label-color);
     font-size: var(--display-field-label-size);
     font-weight: var(--display-field-label-weight);
-    line-height: 1.3;
+    line-height: var(--a-font-leading-normal);
     min-width: 0;
   }
 
@@ -67,7 +67,7 @@
     color: var(--display-field-value-color);
     font-size: var(--display-field-value-size);
     font-weight: var(--display-field-value-weight);
-    line-height: 1.3;
+    line-height: var(--a-font-leading-normal);
     min-width: 0;
   }
 
@@ -75,7 +75,7 @@
     grid-area: hint;
     color: var(--display-field-hint-color);
     font-size: var(--display-field-hint-size);
-    line-height: 1.3;
+    line-height: var(--a-font-leading-normal);
     min-width: 0;
   }
 

package/components/divider/divider.css

@@ -52,7 +52,7 @@
     font-size: var(--divider-label-font);
     color: var(--divider-label-fg);
     white-space: nowrap;
-    line-height: 1;
+    line-height: var(--a-font-leading-none);
   }
 
   /* ── Vertical ── */

package/components/drawer/drawer.css

@@ -244,7 +244,7 @@ drawer-ui [slot="panel"] > [slot="header"]:has(> :is([slot="description"], p, sm
 drawer-ui [slot="panel"] > [slot="header"] > :is([slot="heading"], h1, h2, h3, h4, h5, h6),
 drawer-ui [slot="panel"] > [slot="header"] > [slot="heading"] :is(h1, h2, h3, h4, h5, h6) {
   grid-row: 1;
-  line-height: 1.3;
+  line-height: var(--a-font-leading-normal);
   margin: 0;
   font-size: var(--drawer-heading-size);
   font-weight: var(--drawer-heading-weight);
@@ -266,7 +266,7 @@ drawer-ui [slot="panel"] > [slot="header"]:not(:has(> [slot="icon"])) > :is([slo
 drawer-ui [slot="panel"] > [slot="header"] > :is([slot="description"], p, small) {
   grid-row: 2;
   grid-column: 1 / -1;
-  line-height: 1.4;
+  line-height: var(--a-font-leading-relaxed);
   margin: 0;
   font-size: var(--drawer-description-size);
   color: var(--drawer-description-fg);

package/components/drilldown/drilldown.a2ui.json

@@ -60,7 +60,9 @@
     "composes": [
       "icon-ui",
       "skeleton-ui",
-      "empty-state-ui"
+      "empty-state-ui",
+      "input-ui",
+      "button-ui"
     ],
     "events": {
       "navigate": {

package/components/drilldown/drilldown.class.js

@@ -181,6 +181,10 @@ export class UIDrilldown extends UIElement {
   // ── Structural stamp (once) ──
 
   #stamp() {
+    // No native <input> wrap (per ADR-0055 / ADR-0025): the filter field
+    // composes <input-ui> — the search-ui precedent — instead of stamping
+    // a raw <input>. `raw` strips input-ui's own chrome so it blends into
+    // this row's own icon + border-bottom (drilldown.css owns the layout).
     this.innerHTML = `
       <div slot="header">
         <button-ui slot="back" icon="caret-left" variant="ghost" size="sm" hidden>
@@ -194,7 +198,7 @@ export class UIDrilldown extends UIElement {
       </div>
       <div slot="filter" hidden>
         <icon-ui name="magnifying-glass"></icon-ui>
-        <input type="text" />
+        <input-ui raw></input-ui>
       </div>
       <div slot="viewport">
         <div slot="panel" role="listbox"></div>
@@ -207,7 +211,7 @@ export class UIDrilldown extends UIElement {
     this.#titleEl = this.querySelector('[data-level-title]');
     this.#countEl = this.querySelector('[data-level-count]');
     this.#filterRowEl = this.querySelector('[slot="filter"]');
-    this.#filterInputEl = this.querySelector('[slot="filter"] input');
+    this.#filterInputEl = this.querySelector('[slot="filter"] input-ui');
     this.#panelEl = this.querySelector('[slot="panel"]');
     this.#liveEl = this.querySelector('[slot="live"]');
     this.#breadcrumbEl = this.querySelector('[slot="breadcrumb"]');
@@ -233,7 +237,7 @@ export class UIDrilldown extends UIElement {
 
   #syncChrome() {
     this.#filterRowEl.hidden = !this.filterable;
-    this.#filterInputEl.placeholder = this.placeholder;
+    this.#filterInputEl.setAttribute('placeholder', this.placeholder);
   }
 
   // ── Tree walking ──
@@ -524,7 +528,11 @@ export class UIDrilldown extends UIElement {
       }
       case 'ArrowLeft':
       case 'Backspace':
-        if (e.key === 'Backspace' && e.target === this.#filterInputEl) break;
+        // input-ui's editable surface is a light-DOM contenteditable span
+        // INSIDE the composed <input-ui> — e.target on a keydown fired while
+        // typing is that inner span, not the <input-ui> host itself (unlike
+        // the former native <input>, where target === the field element).
+        if (e.key === 'Backspace' && this.#filterInputEl?.contains(e.target)) break;
         e.preventDefault();
         this.back();
         break;

package/components/drilldown/drilldown.css

@@ -144,18 +144,17 @@
     color: var(--drilldown-fg-muted);
     flex-shrink: 0;
   }
-  [slot="filter"] input {
+  /* Composed <input-ui raw> (per ADR-0055 / ADR-0025 — no native <input>
+     wrap; the search-ui precedent). `raw` already strips input-ui's own
+     border/background/padding (input.css); re-point its own tokens so the
+     text inherits this row's chrome instead of input-ui's defaults. */
+  [slot="filter"] input-ui {
     flex: 1;
     min-width: 0;
-    border: none;
-    outline: none;
-    background: transparent;
-    color: var(--drilldown-fg);
+    --input-fg: var(--drilldown-fg);
+    --input-placeholder-fg: var(--drilldown-fg-muted);
     font: inherit;
   }
-  [slot="filter"] input::placeholder {
-    color: var(--drilldown-fg-muted);
-  }
 
   /* ── Viewport / panel ── */
   [slot="viewport"] {
@@ -231,7 +230,7 @@
     flex-direction: column;
     min-width: 0;
     flex: 1;
-    line-height: 1.3;
+    line-height: var(--a-font-leading-normal);
   }
   [slot="label"] {
     overflow: hidden;
@@ -257,7 +256,7 @@
     border-radius: var(--drilldown-count-chip-radius);
     font-size: var(--drilldown-count-chip-font-size);
     font-variant-numeric: tabular-nums;
-    line-height: 1;
+    line-height: var(--a-font-leading-none);
     background: var(--drilldown-count-chip-bg);
     color: var(--drilldown-count-chip-fg);
     white-space: nowrap;

package/components/drilldown/drilldown.yaml

@@ -27,6 +27,8 @@ composes:
   - icon-ui
   - skeleton-ui
   - empty-state-ui
+  - input-ui    # filter row's text field (ADR-0055 — no native <input> in stamped DOM)
+  - button-ui   # back-navigation affordance
 props:
   items:
     description: >-

package/components/empty-state/empty-state.css

@@ -44,14 +44,14 @@
     font-size: var(--empty-state-heading-size);
     font-weight: var(--empty-state-heading-weight);
     color: var(--empty-state-heading-fg);
-    line-height: 1.3;
+    line-height: var(--a-font-leading-normal);
   }
 
   /* ── Description ── */
   [slot="description"] {
     font-size: var(--empty-state-desc-size);
     color: var(--empty-state-desc-fg);
-    line-height: 1.5;
+    line-height: var(--a-font-leading-relaxed);
     max-width: 36ch;
   }
 

package/components/field/field.css

@@ -133,7 +133,7 @@
   :scope [slot="hint"],
   :scope [slot="error"] {
     grid-area: message;
-    line-height: 1.3;
+    line-height: var(--a-font-leading-normal);
   }
   :scope [slot="hint"] {
     color: var(--field-hint-color);

package/components/heatmap/heatmap.css

@@ -53,7 +53,7 @@
 
   /* Title slot */
   :scope [slot="title"] {
-    font-weight: 600;
+    font-weight: var(--a-weight-semibold);
     margin: 0;
   }
 
@@ -66,7 +66,7 @@
   }
 
   :scope [data-month-label] {
-    line-height: 1;
+    line-height: var(--a-font-leading-none);
   }
 
   /* Grid of cells */

package/components/inline-message/inline-message.css

@@ -14,7 +14,7 @@
 
     /* ── Typography ── */
     --inline-message-font-size: var(--a-ui-sm);
-    --inline-message-line-height: var(--a-leading-snug);
+    --inline-message-line-height: var(--a-font-leading-normal);
   }
 
   :scope {

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). */
@@ -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;
   }

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

@@ -125,7 +125,7 @@
     row-gap: var(--list-item-gap-row);
     font-size: var(--list-item-font-size);
     color: var(--list-item-text-color);
-    line-height: 1.4;
+    line-height: var(--a-font-leading-normal);
     /* Defensive floor: empty list-item-ui (no text/icon/children) collapses
        to 0 height and disappears. Keep a visible row instead. */
     min-height: var(--a-space-6);
@@ -175,7 +175,7 @@
     grid-row: 2;
     color: var(--list-item-desc-color);
     font-size: var(--list-item-desc-font-size);
-    line-height: 1.3;
+    line-height: var(--a-font-leading-normal);
   }
 
   /* When a [slot="action"] child is present, the grid becomes 3-column: