@adia-ai/web-components 0.6.49 → 0.7.0

package/components/stack/stack.a2ui.json

@@ -14,8 +14,19 @@
   ],
   "properties": {
     "align": {
-      "description": "Alignment of stacked items",
+      "description": "Alignment of the layered children within the shared cell (maps to grid place-items). `center` (default) plus eight directional keywords.",
       "type": "string",
+      "enum": [
+        "center",
+        "top-left",
+        "top",
+        "top-right",
+        "left",
+        "right",
+        "bottom-left",
+        "bottom",
+        "bottom-right"
+      ],
       "default": "center"
     },
     "component": {

package/components/stack/stack.d.ts

@@ -21,6 +21,6 @@ cell.
 import { UIElement } from '../../core/element.js';
 
 export class UIStack extends UIElement {
-  /** Alignment of stacked items */
-  align: string;
+  /** Alignment of the layered children within the shared cell (maps to grid place-items). `center` (default) plus eight directional keywords. */
+  align: 'center' | 'top-left' | 'top' | 'top-right' | 'left' | 'right' | 'bottom-left' | 'bottom' | 'bottom-right';
 }

package/components/stack/stack.yaml

@@ -18,9 +18,21 @@ description: |
   cell.
 props:
   align:
-    description: Alignment of stacked items
+    description: >-
+      Alignment of the layered children within the shared cell (maps to
+      grid place-items). `center` (default) plus eight directional keywords.
     type: string
     default: center
+    enum:
+      - center
+      - top-left
+      - top
+      - top-right
+      - left
+      - right
+      - bottom-left
+      - bottom
+      - bottom-right
 events: {}
 slots:
   default:

package/components/stat/stat.a2ui.json

@@ -13,6 +13,11 @@
     }
   ],
   "properties": {
+    "bleed": {
+      "description": "Horizontal-bleed KPI layout. With a `slot=\"chart\"` child, the value / label / change stack on the left while the chart fills the right column at full height and bleeds to the card's top / right / bottom edges (the horizontal counterpart to a chart in a card `<section bleed>`). No effect without a chart slot.",
+      "type": "boolean",
+      "default": false
+    },
     "change": {
       "description": "Change indicator text (e.g. '+12%', '-3%')",
       "type": "string",

package/components/stat/stat.css

@@ -72,6 +72,61 @@
     grid-column: 1;
   }
 
+  /* ── Horizontal-bleed KPI tile ──
+     value / label / change stack on the LEFT; the chart fills the RIGHT
+     column at full height and bleeds to the card's top / right / bottom
+     edges (cancels the card-section inset via negative margins keyed to
+     the inherited --card-inset). The compact `slot="chart"` reflow above
+     keeps the chart resting on the value baseline; this opt-in spreads it
+     into a full-height trajectory panel. Compose inside a card section:
+       <card-ui><section>
+         <stat-ui bleed value=… label=… change=… trend=…>
+           <chart-ui slot="chart" type="area" …></chart-ui>
+         </stat-ui>
+       </section></card-ui>  */
+  :scope[bleed]:has([slot="chart"]) {
+    grid-template-columns: minmax(0, 1fr) minmax(0, var(--stat-bleed-col, 46%));
+    grid-template-areas:
+      "label  chart"
+      "value  chart"
+      "change chart";
+    align-items: start;
+  }
+  :scope[bleed] [slot="value"],
+  :scope[bleed] [slot="change"] {
+    grid-column: 1;
+  }
+  /* Icon shares the label row, pinned to the text column's inner edge. */
+  :scope[bleed] [slot="label"] {
+    padding-inline-end: var(--a-space-5);
+  }
+  :scope[bleed] [slot="icon"] {
+    grid-area: label;
+    justify-self: end;
+    align-self: start;
+  }
+  :scope[bleed] [slot="chart"] {
+    grid-area: chart;
+    /* VERTICAL bleed via stretch: a stretched grid item's height is
+       `track − margins`, so a negative margin-block overflows the track by
+       that amount top + bottom. `height:auto` overrides the base
+       chart-ui[slot="chart"]{height:100%} so the stretch governs. */
+    align-self: stretch;
+    height: auto;
+    margin-block: calc(-1 * var(--card-inset, var(--card-inset-default, 0px)));
+    /* HORIZONTAL bleed via explicit width: chart-ui pins its own
+       `width:100%` (chart.css), which beats justify-self:stretch and would
+       freeze the box to the track — so a negative margin-inline-end can't
+       widen it. Instead size the box to `track + inset` and left-anchor it,
+       so the right edge overflows to the card edge while the left keeps the
+       column gap. The percentage resolves against the grid track. */
+    justify-self: start;
+    width: calc(100% + var(--card-inset, var(--card-inset-default, 0px)));
+    min-width: 0;
+    /* override the inline-chart 4:3 — fill the row span instead */
+    aspect-ratio: auto;
+  }
+
   /* ── Label (eyebrow) ── */
   [slot="label"] {
     grid-area: label;

package/components/stat/stat.d.ts

@@ -13,6 +13,8 @@
 import { UIElement } from '../../core/element.js';
 
 export class UIStat extends UIElement {
+  /** Horizontal-bleed KPI layout. With a `slot="chart"` child, the value / label / change stack on the left while the chart fills the right column at full height and bleeds to the card's top / right / bottom edges (the horizontal counterpart to a chart in a card `<section bleed>`). No effect without a chart slot. */
+  bleed: boolean;
   /** Change indicator text (e.g. '+12%', '-3%') */
   change: string;
   /** Icon name displayed in the icon slot */

package/components/stat/stat.js

@@ -18,6 +18,10 @@ class UIStat extends UIElement {
     trend:   { type: String,  default: '',    reflect: true },
     icon:    { type: String,  default: '',    reflect: true },
     loading: { type: Boolean, default: false, reflect: true },
+    // Horizontal-bleed KPI layout: value/label/change stack on the left, the
+    // slot="chart" child fills the right column and bleeds to the card edges.
+    // Reflected so the [bleed] CSS selector gates the layout.
+    bleed:   { type: Boolean, default: false, reflect: true },
   };
 
   static template = () => null;

package/components/stat/stat.yaml

@@ -49,6 +49,15 @@ props:
     required: true
     type: string
     default: ""
+  bleed:
+    description: >-
+      Horizontal-bleed KPI layout. With a `slot="chart"` child, the value /
+      label / change stack on the left while the chart fills the right column
+      at full height and bleeds to the card's top / right / bottom edges (the
+      horizontal counterpart to a chart in a card `<section bleed>`). No effect
+      without a chart slot.
+    type: boolean
+    default: false
 events: {}
 slots:
   change:

package/components/swiper/swiper.class.js

@@ -249,14 +249,22 @@ export class UISwiper extends UIElement {
   }
 
   // ── Snap & page helpers ──
-  // `--swiper-columns` is set on the host by `[slides-per-view]` and
-  // cascades to the track; the responsive @container rules set it on
-  // the track directly. Reading the computed value on the track sees
-  // both paths.
-
+  // The column count drives the page/dot math. `[slides-per-view]` (and the
+  // responsive @container rules) set `--swiper-columns-default` on the host /
+  // track per the component-token contract; consumers may override via the
+  // public `--swiper-columns`. We must read the SAME fallback chain the CSS
+  // width calc uses — `var(--swiper-columns, var(--swiper-columns-default))` —
+  // not just the public token. Reading only `--swiper-columns` (unset unless a
+  // consumer overrides) made #getColumns() always fall back to 1, so the dot
+  // count was `total - 1 + 1 = total slides` instead of the real page count
+  // (bug-29: 5 slides at slides-per-view=3 stamped 5 dots, not 3). Regressed by
+  // the 2026-05-24 OD-5 `-default` token sweep, which renamed the CSS side but
+  // not this read site.
   #getColumns() {
     if (!this.#track) return 1;
-    const v = getComputedStyle(this.#track).getPropertyValue('--swiper-columns').trim();
+    const cs = getComputedStyle(this.#track);
+    const v = cs.getPropertyValue('--swiper-columns').trim()
+           || cs.getPropertyValue('--swiper-columns-default').trim();
     const n = parseInt(v, 10);
     return Number.isFinite(n) && n > 0 ? n : 1;
   }

package/components/switch/switch.css

@@ -115,6 +115,19 @@ switch-ui[checked] [slot="thumb"] {
     color: var(--switch-hint-fg, var(--a-fg-muted));
     line-height: var(--switch-hint-lh, 1.4);
   }
+  /* The hint is documented (yaml + props table) as rendering BELOW the label,
+     but the base `inline-flex` row laid the stamped `[slot="hint"]` out as a
+     third inline item (beside the label). When a hint is present, let the row
+     wrap and force the hint onto its own full-width line, indented under the
+     label (past the track + gap). `:has()`-scoped so hint-less switches keep
+     the unchanged single-row layout (no long-label side effects); no display-
+     model change (stays inline-flex). The hint span is stamped only when
+     [hint] is set (switch.class.js), so this never adds a phantom line. */
+  :scope:has([slot="hint"]) { flex-wrap: wrap; }
+  :scope:has([slot="hint"]) [slot="hint"] {
+    flex-basis: 100%;
+    padding-inline-start: calc(var(--switch-track-width, var(--switch-track-width-default)) + var(--switch-gap, var(--switch-gap-default)));
+  }
 
   :scope:focus-visible { outline: none; }
   :scope:focus-visible [slot="track"] { box-shadow: var(--switch-focus-ring, var(--switch-focus-ring-default)); }

package/components/table/table.a2ui.json

@@ -169,7 +169,7 @@
         }
       },
       "row-collapse": {
-        "description": "Fired when an already-expanded row's chevron is activated (collapses the row). Mirror of row-expand.",
+        "description": "Fired when an already-expanded row's caret is activated (collapses the row). Mirror of row-expand.",
         "detail": {
           "index": {
             "description": "Row index in the underlying data array.",
@@ -182,7 +182,7 @@
         }
       },
       "row-expand": {
-        "description": "Fired when an expandable row's chevron is activated. detail.index is the row position; detail.row is the row data.",
+        "description": "Fired when an expandable row's caret is activated. detail.index is the row position; detail.row is the row data.",
         "detail": {
           "index": {
             "description": "Row index in the underlying data array.",

package/components/table/table.css

@@ -323,7 +323,12 @@
     color: var(--table-fg-hover, var(--table-fg-hover-default));
   }
 
-  [data-selected] {
+  /* Selected row — must out-specify the base row rule `[data-body] >
+     [role="row"]` (0,2,0) and the hover rule (0,2,1), or the highlight never
+     paints. Scoping to `[data-body] > [role="row"][data-selected]` lifts it to
+     (0,4,0). (The striped-even override below handles selected+striped, which
+     is higher still.) */
+  [data-body] > [role="row"][data-selected] {
     background: var(--table-row-bg-selected, var(--table-row-bg-selected-default));
   }
 
@@ -341,6 +346,13 @@
     background: var(--table-row-bg-hover, var(--table-row-bg-hover-default));
   }
 
+  /* Selected wins over the stripe — same (0,5,0) specificity as the striped-
+     even rule above, placed AFTER it so source order resolves the tie in
+     favor of selection (a selected row reads as selected regardless of stripe). */
+  :scope[striped] [data-body] > [role="row"][data-selected] {
+    background: var(--table-row-bg-selected, var(--table-row-bg-selected-default));
+  }
+
   /* ═══════ Selection checkboxes ═══════ */
 
   [data-check-col] {

package/components/table/table.yaml

@@ -146,7 +146,7 @@ events:
         type: number
         description: New column width in pixels.
   row-collapse:
-    description: Fired when an already-expanded row's chevron is activated (collapses the row). Mirror of row-expand.
+    description: Fired when an already-expanded row's caret is activated (collapses the row). Mirror of row-expand.
     detail:
       index:
         type: number
@@ -155,7 +155,7 @@ events:
         type: object
         description: Row data object.
   row-expand:
-    description: Fired when an expandable row's chevron is activated. detail.index is the row position; detail.row is the row data.
+    description: Fired when an expandable row's caret is activated. detail.index is the row position; detail.row is the row data.
     detail:
       index:
         type: number

package/components/time-picker/time-picker.css

@@ -30,7 +30,7 @@
   :scope {
     /* ── Base ── */
     box-sizing: border-box;
-    display: inline-flex;
+    display: flex;
     align-items: center;
     gap: var(--time-picker-gap, var(--time-picker-gap-default));
     min-height: var(--time-picker-height, var(--time-picker-height-default));
@@ -50,6 +50,9 @@
       box-shadow   var(--time-picker-duration, var(--time-picker-duration-default)) var(--time-picker-easing, var(--time-picker-easing-default));
   }
 
+  /* Display convention (ADR-0037): block-level by default; [inline] opts back to inline-level. */
+  :scope[inline] { display: inline-flex; }
+
   /* ── Segments ── */
   :scope [data-segment] {
     display: inline-block;

package/components/timeline/timeline.class.js

@@ -87,7 +87,7 @@ export class UITimelineItem extends UIElement {
     spinner:     { type: Boolean, default: false,     reflect: true },
   };
 
-  // §205 (v0.5.7): dynamic chevron icons stamped on expanded-state ternary
+  // §205 (v0.5.7): dynamic caret icons stamped on expanded-state ternary
   // (timeline.class.js:167). Per FEEDBACK-16 §1 + §209 slot-11 ternary-walker discovery.
   // Note: `this.icon` consumer-supplied — not declared here.
   static requiredIcons = ['caret-down', 'caret-right'];
@@ -134,7 +134,7 @@ export class UITimelineItem extends UIElement {
       this.querySelector(':scope > [slot="icon"]')?.remove();
     }
 
-    // Outcomes sub-list + toggle chevron
+    // Outcomes sub-list + toggle caret
     let body = this.querySelector(':scope > [slot="outcomes"]');
     if (this.#outcomes.length > 0) {
       if (!body) {
@@ -150,7 +150,7 @@ export class UITimelineItem extends UIElement {
       }
       body.hidden = !this.#expanded;
 
-      // Toggle chevron lives on the row — we stamp a button once
+      // Toggle caret lives on the row — we stamp a button once
       let toggle = this.querySelector(':scope > [data-timeline-toggle]');
       if (!toggle) {
         toggle = document.createElement('button');

package/components/timeline/timeline.css

@@ -39,10 +39,18 @@
     --timeline-line-fg-default:            var(--a-border-subtle);
     --timeline-line-fg-done-default:       var(--a-border);
 
+    /* Marker box — the shared circular footprint the icon marker fills and
+       the dot / spinner center within (the column track --timeline-marker-w
+       is a touch wider for breathing room). One token sizes the whole marker
+       system; consumers (agent-reasoning-ui, chat surfaces) override it to
+       scale every marker type coherently. */
+    --timeline-marker-box-size-default:    1rem;
+
     /* Icon (replaces dot) */
-    --timeline-icon-size-default:          1rem;
+    --timeline-icon-size-default:          var(--timeline-marker-box-size, var(--timeline-marker-box-size-default));
     --timeline-icon-bg-default:            var(--a-bg-muted);
     --timeline-icon-fg-default:            var(--a-fg-subtle);
+    --timeline-icon-border-default:        var(--a-border-subtle);
     --timeline-icon-bg-success-default:    var(--a-success-muted);
     --timeline-icon-fg-success-default:    var(--a-success-strong);
     --timeline-icon-bg-accent-default:     var(--a-accent-muted);
@@ -85,6 +93,7 @@
   /* Compact variant (agent-reasoning + chat-adjacent) */
   :scope[size="sm"] {
     --timeline-marker-w-default: 1rem;
+    --timeline-marker-box-size-default: 0.875rem;
     --timeline-dot-size-default: 6px;
     --timeline-gap-row-default: var(--a-space-2);
     --timeline-label-size-default: var(--a-ui-sm);
@@ -133,9 +142,14 @@ agent-reasoning-ui timeline-ui:not([orientation="horizontal"]),
     --timeline-item-line-fg:            var(--timeline-line-fg, var(--a-border-subtle));
     --timeline-item-line-fg-done:       var(--timeline-line-fg-done, var(--a-border));
 
-    --timeline-item-icon-size:          var(--timeline-icon-size, 1rem);
+    /* Reads the override THEN the inherited -default (set on timeline-ui,
+       and shrunk by [size="sm"]) THEN a literal — so the marker box scales
+       with both consumer overrides AND the sm compact variant. */
+    --timeline-item-marker-box-size:    var(--timeline-marker-box-size, var(--timeline-marker-box-size-default, 1rem));
+    --timeline-item-icon-size:          var(--timeline-icon-size, var(--timeline-item-marker-box-size));
     --timeline-item-icon-bg:            var(--timeline-icon-bg, var(--a-bg-muted));
     --timeline-item-icon-fg:            var(--timeline-icon-fg, var(--a-fg-subtle));
+    --timeline-item-icon-border:        var(--timeline-icon-border, var(--a-border-subtle));
     --timeline-item-icon-bg-success:    var(--timeline-icon-bg-success, var(--a-success-muted));
     --timeline-item-icon-fg-success:    var(--timeline-icon-fg-success, var(--a-success-strong));
     --timeline-item-icon-bg-accent:     var(--timeline-icon-bg-accent, var(--a-accent-muted));
@@ -245,6 +259,10 @@ agent-reasoning-ui timeline-ui:not([orientation="horizontal"]),
     border-radius: 50%;
     background: var(--timeline-item-icon-bg);
     color: var(--timeline-item-icon-fg);
+    /* Subtle ring so the default (no-variant) chip reads as a marker even
+       when its muted fill blends with the surrounding surface; the colored
+       variants below restate background only, keeping this ring. */
+    border: 1px solid var(--timeline-item-icon-border);
     display: inline-flex;
     align-items: center;
     justify-content: center;
@@ -342,12 +360,12 @@ agent-reasoning-ui timeline-ui:not([orientation="horizontal"]),
     background: var(--timeline-item-subdot-bg);
   }
 
-  /* ═══════ Toggle chevron (outcomes) ═══════ */
+  /* ═══════ Toggle caret (outcomes) ═══════ */
 
   :scope > [data-timeline-toggle] {
     position: absolute;
     inset-inline-end: 0;
-    /* Place the chevron's icon-center on row 1's optical center.
+    /* Place the caret's icon-center on row 1's optical center.
        The button has --a-space-0-5 vertical padding, so the icon
        sits that much lower inside the box; we subtract that so the
        icon (not the box) lines up with the time-slot text center. */
@@ -372,7 +390,7 @@ agent-reasoning-ui timeline-ui:not([orientation="horizontal"]),
     color: var(--timeline-item-label-fg, var(--a-fg));
   }
 
-  /* Reserve room so the time isn't overlapped by the chevron */
+  /* Reserve room so the time isn't overlapped by the caret */
   :scope:has(> [data-timeline-toggle]) [slot="time"] {
     margin-inline-end: var(--timeline-item-toggle-time-margin);
   }

package/components/toggle-group/toggle-group.css

@@ -19,11 +19,14 @@ toggle-option-ui:not([disabled]):hover {
 
   :scope {
     box-sizing: border-box;
-    display: inline-flex;
+    display: flex;
     border: var(--toggle-group-border-width, var(--toggle-group-border-width-default)) solid var(--toggle-group-border-color, var(--toggle-group-border-color-default));
     border-radius: var(--toggle-group-radius, var(--toggle-group-radius-default));
     overflow: hidden;
   }
+
+  /* Display convention (ADR-0037): block-level by default; [inline] opts back to inline-level. */
+  :scope[inline] { display: inline-flex; }
 }
 
 @scope (toggle-option-ui) {

package/components/toggle-scheme/toggle-scheme.css

@@ -4,12 +4,15 @@
   }
 
   :scope {
-    display: inline-flex;
+    display: flex;
     align-items: center;
     justify-content: center;
     line-height: 0;
   }
 
+  /* Display convention (ADR-0037): block-level by default; [inline] opts back to inline-level. */
+  :scope[inline] { display: inline-flex; }
+
   :scope[disabled] {
     pointer-events: none;
   }

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

@@ -65,6 +65,12 @@
       "Accordion"
     ],
     "slots": {
+      "actions": {
+        "description": "Per-row action buttons (rename / add / overflow menu), right-aligned and hover-revealed. A declarative `slot=\"actions\"` child is adopted into the auto-stamped row (FEEDBACK-89), so it sits inline in the row rather than wrapping below it."
+      },
+      "caret": {
+        "description": "Override slot for the expand/collapse caret. Auto-stamped as `<icon-ui slot=\"caret\" name=\"caret-right\">` (rotates on `[open]`, hidden for leaf nodes). Supply your own `slot=\"caret\"` child to customize — adopt-or-stamp moves a declarative caret into the row."
+      },
       "icon": {
         "description": "Override the leading [icon] glyph with a custom slotted element (custom icon-ui, folder open/closed glyph, file-type marker). Mutually exclusive with the [icon] attribute — slot child wins."
       }

package/components/tree/tree-item.yaml

@@ -47,6 +47,18 @@ slots:
       Override the leading [icon] glyph with a custom slotted element (custom
       icon-ui, folder open/closed glyph, file-type marker). Mutually exclusive
       with the [icon] attribute — slot child wins.
+  caret:
+    description: >-
+      Override slot for the expand/collapse caret. Auto-stamped as
+      `<icon-ui slot="caret" name="caret-right">` (rotates on `[open]`,
+      hidden for leaf nodes). Supply your own `slot="caret"` child to
+      customize — adopt-or-stamp moves a declarative caret into the row.
+  actions:
+    description: >-
+      Per-row action buttons (rename / add / overflow menu), right-aligned
+      and hover-revealed. A declarative `slot="actions"` child is adopted
+      into the auto-stamped row (FEEDBACK-89), so it sits inline in the row
+      rather than wrapping below it.
 
 a2ui:
   rules:
@@ -72,7 +84,7 @@ a2ui:
     - >-
       Nest further <tree-item-ui> in the default slot only — no
       <list-item-ui>, <nav-item-ui>, or arbitrary content inside a
-      tree row. The chevron is auto-stamped when the row has nested
+      tree row. The caret is auto-stamped when the row has nested
       tree-item-ui children.
 
 keywords:

package/components/tree/tree.a2ui.json

@@ -126,8 +126,8 @@
       "--tree-bg-selected": {
         "description": "Background color when selected"
       },
-      "--tree-chevron-size": {
-        "description": "Size of the collapse chevron icon"
+      "--tree-caret-size": {
+        "description": "Size of the collapse caret icon"
       },
       "--tree-duration": {
         "description": "Transition duration"
@@ -139,7 +139,7 @@
         "description": "Primary text color"
       },
       "--tree-fg-muted": {
-        "description": "Muted text color (icons, chevrons)"
+        "description": "Muted text color (icons, carets)"
       },
       "--tree-focus-ring": {
         "description": "Focus ring box-shadow"

package/components/tree/tree.class.js

@@ -293,11 +293,17 @@ export class UITreeItem extends UIElement {
     row.setAttribute('slot', 'row');
     row.setAttribute('tabindex', '0');
 
-    // Chevron
-    const chevron = document.createElement('icon-ui');
-    chevron.setAttribute('slot', 'chevron');
-    chevron.setAttribute('name', 'caret-right');
-    row.appendChild(chevron);
+    // Caret — adopt a declarative [slot="caret"] child if the consumer supplied
+    // one, else stamp the default. (Adopt-or-stamp; same pattern as actions.)
+    const declaredCaret = this.querySelector(':scope > [slot="caret"]');
+    if (declaredCaret) {
+      row.appendChild(declaredCaret);
+    } else {
+      const caret = document.createElement('icon-ui');
+      caret.setAttribute('slot', 'caret');
+      caret.setAttribute('name', 'caret-right');
+      row.appendChild(caret);
+    }
 
     // Icon
     if (this.icon) {
@@ -320,10 +326,19 @@ export class UITreeItem extends UIElement {
     if (this.badge) badgeEl.textContent = this.badge;
     row.appendChild(badgeEl);
 
-    // Actions slot placeholder
-    const actions = document.createElement('span');
-    actions.setAttribute('slot', 'actions');
-    row.appendChild(actions);
+    // Actions — adopt pre-existing declarative [slot="actions"] children into
+    // the row (FEEDBACK-89) so per-row action buttons land in the styled,
+    // hover-revealed actions area; else stamp an empty placeholder. The host
+    // #onClick already excludes [slot="actions"] * from row selection, so
+    // adoption is click-safe.
+    const declaredActions = this.querySelectorAll(':scope > [slot="actions"]');
+    if (declaredActions.length) {
+      for (const a of declaredActions) row.appendChild(a);
+    } else {
+      const actions = document.createElement('span');
+      actions.setAttribute('slot', 'actions');
+      row.appendChild(actions);
+    }
 
     this.prepend(row);
   }

package/components/tree/tree.css

@@ -7,7 +7,7 @@
     --tree-row-gap-default:         var(--a-space-1);
     --tree-actions-gap-default:     var(--a-space-0-5);
     --tree-indent-default:          var(--a-space-4);
-    --tree-chevron-size-default:    var(--a-space-2);
+    --tree-caret-size-default:      var(--a-space-2);
     --tree-icon-size-default:       var(--a-space-3);
 
     /* ── Typography ── */
@@ -47,7 +47,7 @@
     --tree-item-row-gap:       var(--tree-row-gap, var(--a-space-1));
     --tree-item-actions-gap:   var(--tree-actions-gap, var(--a-space-0-5));
     --tree-item-indent:        var(--tree-indent, var(--a-space-4));
-    --tree-item-chevron-size:  var(--tree-chevron-size, var(--a-space-2));
+    --tree-item-caret-size:    var(--tree-caret-size, var(--a-space-2));
     --tree-item-icon-size:     var(--tree-icon-size, var(--a-space-3));
 
     --tree-item-fg:            var(--tree-fg, var(--a-fg));
@@ -92,21 +92,21 @@
 
   /* :scope[selected] rules moved outside @scope — see tree-ui Safari note at end of file. */
 
-  /* ── Chevron ── */
-  [slot="chevron"] {
-    --a-icon-size: var(--tree-chevron-size, var(--tree-chevron-size-default));
+  /* ── Caret ── */
+  [slot="caret"] {
+    --a-icon-size: var(--tree-caret-size, var(--tree-caret-size-default));
     flex-shrink: 0;
     color: var(--tree-fg-muted, var(--tree-fg-muted-default));
     transition: transform var(--tree-duration, var(--tree-duration-default)) var(--tree-easing, var(--tree-easing-default));
     transform: rotate(90deg);
   }
 
-  :scope:not([open]) > [slot="row"] > [slot="chevron"] {
+  :scope:not([open]) > [slot="row"] > [slot="caret"] {
     transform: rotate(0deg);
   }
 
-  /* Hide chevron for leaf nodes */
-  :scope:not(:has(> tree-item-ui)) > [slot="row"] > [slot="chevron"] {
+  /* Hide caret for leaf nodes */
+  :scope:not(:has(> tree-item-ui)) > [slot="row"] > [slot="caret"] {
     visibility: hidden;
   }