@nldd/design-system 0.8.82 → 0.8.84

package/dist/components/lists-and-tables/list-item/list-item.js

@@ -13,10 +13,62 @@ import { template } from './list-item.template.js';
 import { isPointerMode } from '../../../utilities/input-modality.js';
 import { withTranslations } from '../../../utilities/with-translations.js';
 import { nlddListItemTranslations } from './list-item.i18n.js';
+/** Anything in a row's light DOM that is a tab stop of its own. `[tabindex]`
+ *  counts because an authored one makes any element focusable; the value itself
+ *  is read per element, and put back when the row becomes the current one. */
+const OWN_TAB_STOP = 'a[href], button, input, select, textarea, [contenteditable]:not([contenteditable="false"]), [tabindex]';
+/** Keyed on the element, so a row that is re-rendered around the same control
+ *  still knows what the consumer authored. */
+const authoredTabState = new WeakMap();
+function authoredStateOf(el) {
+    let authored = authoredTabState.get(el);
+    if (!authored) {
+        authored = { noTab: 'noTab' in el ? el.noTab : undefined, tabindex: el.getAttribute('tabindex') };
+        authoredTabState.set(el, authored);
+    }
+    return authored;
+}
+function applyAuthoredTabState(el, authored) {
+    if (authored.noTab !== undefined) {
+        el.noTab = authored.noTab;
+        return;
+    }
+    if (authored.tabindex === null)
+        el.removeAttribute('tabindex');
+    else
+        el.setAttribute('tabindex', authored.tabindex);
+}
+/**
+ * Puts one control in or out of the tab order on behalf of the row it sits in.
+ *
+ * A design-system control keeps its tab stop inside its own shadow root, where
+ * a tabindex on the host cannot reach it, so it carries `no-tab` for exactly
+ * this. Everything else is native and takes the tabindex directly. A consumer
+ * who set either themselves keeps it: their `no-tab` or `tabindex="-1"` is a
+ * decision, not a leftover.
+ */
+function setTabbable(el, tabbable) {
+    const authored = authoredStateOf(el);
+    if (authored.noTab !== undefined) {
+        el.noTab = authored.noTab || !tabbable;
+        return;
+    }
+    if (tabbable)
+        applyAuthoredTabState(el, authored);
+    else
+        el.setAttribute('tabindex', '-1');
+}
+function releaseTabbable(el) {
+    const authored = authoredTabState.get(el);
+    if (!authored)
+        return;
+    applyAuthoredTabState(el, authored);
+    authoredTabState.delete(el);
+}
 /**
  * A row within an `nldd-list`. Renders as a link when `href` is set, as a
  * checkbox when `checkbox` is set, as a button when `button` is set, or as a
- * plain container otherwise. All cells and action segmented actions share one flat
+ * plain container otherwise. All cells and segments share one flat
  * slot, in source order.
  *
  * ## Geometry
@@ -30,7 +82,7 @@ import { nlddListItemTranslations } from './list-item.i18n.js';
  *    itself outward (`is-interactive` host class → negative inline margin)
  *    and pads the row block back by the same amount, so content stays on the
  *    grid. A row-wide action owns that padding itself, making the whole
- *    widened box one hit area; slotted segmented actions stay in the grid, so their
+ *    widened box one hit area; slotted segments stay in the grid, so their
  *    footprint is position-independent and tree columns line up at any depth.
  *
  * ## Divider
@@ -39,7 +91,7 @@ import { nlddListItemTranslations } from './list-item.i18n.js';
  * an avatar, a checkbox, or the spacers a tree indents with. Rows of different
  * shapes then still line their dividers up with each other, and a tree's
  * dividers step inward with its indentation. Text inside an
- * `nldd-list-item-action` counts as the row's content, and the marker is that
+ * `nldd-list-item-segment` counts as the row's content, and the marker is that
  * text cell rather than the action: the action carries its own inline padding,
  * so its edge sits before the words. A row with no text or title cell keeps the
  * full content width. Mark a cell with `divider-start` and/or `divider-end` to
@@ -51,7 +103,7 @@ import { nlddListItemTranslations } from './list-item.i18n.js';
  *
  * ## Disclosure
  * A branch row can disclose its children in two ways: a dedicated
- * `nldd-list-item-action[disclosure]` segment (only the chevron is clickable),
+ * `nldd-list-item-segment[disclosure]` segment (only the chevron is clickable),
  * or the row itself as the control (`button` + `expanded`, the whole row
  * toggles). In the second case, mark the chevron's `nldd-icon-cell` with
  * `disclosure` and the row turns it with `expanded` — the same affordance,
@@ -84,17 +136,19 @@ import { nlddListItemTranslations } from './list-item.i18n.js';
  * @element nldd-list-item
  *
  * @attr {'sm'|'md'} size - Row size (default: 'md'). Pushed onto the cells whose `size` means the same scale (nldd-text-cell, nldd-drag-handle-cell), so it is written once per row instead of once per cell. A size set on the cell itself wins. Cells where `size` means something else — pixels on nldd-icon-cell / nldd-spacer-cell, a heading scale on nldd-title-cell — are left alone.
- * @attr {boolean} selected - Marks the item as selected. Selection is consumer-managed; the list never sets it. In a `navigation` parent it puts `aria-current="page"` on the inner action, in a `listbox` parent it drives `aria-selected`.
- * @attr {boolean} button - Renders the item as a `<button>`; ignored when `href` is set (a link wins)
- * @attr {boolean} checkbox - Makes the whole row a `role="checkbox"` control; ignored when `href` is set
+ * @attr {boolean} selected - Marks the item as selected: it is one of the rows you picked. Selection is consumer-managed; the list never sets it. In a `navigation` parent it puts `aria-current="page"` on the inner action, in a `listbox` parent it drives `aria-selected`.
+ * @attr {boolean} current - Marks the item as the one you are on: the page a menu row points at, the record a list has open. Exactly one row in a list carries it, where `selected` may be on many. It paints like `selected` at rest, and takes the highlighted fill while focus is anywhere in the row — including inside a nested `nldd-list-item-segment`, which is what a segmented row needs: the focus never reaches the row's own control, because there is none. In a `navigation` parent it puts `aria-current="page"` on the inner action. On a segmented row set it on the segment that holds the link instead: the row reads `current` off its own segments and paints itself, so it is written once, where `aria-current` belongs.
+ * @attr {boolean} button - Renders the item as a `<button>`. Last of the three: `href` and `checkbox` both win over it.
+ * @attr {boolean} checkbox - Makes the whole row a `role="checkbox"` control. Wins over `button`, loses to `href`.
  * @attr {boolean} checked - Checked state of a `checkbox` row; the item toggles it on activation
- * @attr {boolean} expanded - Disclosure state. Drives the `children` group's visibility AND supplies `aria-expanded` — to the row's own control when the row is interactive, or to the segmented action marked `disclosure`. Written once either way; the item DEV-warns when there is nowhere for it to live.
- * @attr {string} href - Renders the item as an `<a>` with this URL. Takes precedence over `button`; without either the item is a plain container with no action.
+ * @attr {boolean} disabled - Switches the row's own control off: a `button` or `checkbox` row stops responding and dims, a `href` row gets `aria-disabled` and its click is blocked (a link cannot be disabled natively). A row without a control of its own has nothing to switch off, and segments carry their own `disabled`. The arrow keys skip a disabled row.
+ * @attr {boolean} expanded - Disclosure state. Drives the `children` group's visibility AND supplies `aria-expanded` — to the row's own control when the row is interactive, or to the segment marked `disclosure`. Written once either way; the item DEV-warns when there is nowhere for it to live.
+ * @attr {string} href - Renders the item as an `<a>` with this URL. Wins over `checkbox` and `button`; without any of the three the item is a plain container with no action.
  * @attr {string} target - Link target forwarded to the `<a>` (e.g. '_blank'); only applies with `href`. With '_blank' a visually hidden "opens in new tab" announcement is added for assistive technology.
  * @attr {string} rel - Link rel forwarded to the `<a>` (e.g. 'noopener noreferrer'); only applies with `href`
  * @attr {boolean} reorderable - Set by the parent `nldd-list` when its own `reorderable` is on (with `type="list"`); consumers do not set this. Serves as a CSS hook for drag handle visibility.
  *
- * @slot - Cells and segmented actions, in source order
+ * @slot - Cells and segments, in source order
  * @slot children - Child rows of a branch in an `nldd-list type="tree"`. Rendered as a `role="group"` below the row, hidden while `expanded` is false. The nesting IS the hierarchy, so aria-level / -posinset / -setsize are derived, not authored. The group has no styling of its own: repeat a spacer-cell per level to indent, or show depth some other way.
  *
  * @fires change - On a `checkbox` row after it toggles; detail: { checked: boolean }
@@ -104,20 +158,39 @@ let NLDDListItem = NLDDListItem_1 = class NLDDListItem extends withTranslations(
         super(...arguments);
         this.size = 'md';
         this.selected = false;
+        /**
+         * The row you are on, as opposed to the rows you picked (`selected`).
+         *
+         * Kept apart because the two say different things and a list can show both:
+         * a checkbox list where three rows are ticked and one is open. At rest they
+         * paint the same, so a menu reads the same as it always did; the difference
+         * shows when focus is in the row.
+         */
+        this.current = false;
         /** When set, renders the item as a button; ignored when href is set. */
         this.button = false;
         /** When set, the whole row is the checkbox control. Ignored when href is set. */
         this.checkbox = false;
         /** Checked state of a `checkbox` row. Toggled by the item on activation. */
         this.checked = false;
+        /**
+         * Switches off the row's own control.
+         *
+         * Only the row's own: a row built out of segments has no control here, and
+         * each segment carries its own `disabled`. A link cannot be disabled the way
+         * a button can, so there it is `aria-disabled` plus a blocked click, the
+         * same trade `nldd-button` makes.
+         */
+        this.disabled = false;
         /** Set by the parent nldd-list when reorderable is enabled. Used as a CSS hook for drag handle visibility. */
         this.reorderable = false;
         this._showChildren = false;
         this._parentType = 'list';
-        /** Set by the parent nldd-list when `arrow-navigation` (roving tabindex) is on.
+        /** Set by the parent nldd-list when it runs the roving tabindex (everywhere
+         *  except a listbox and a reorderable list).
          *  Switches the inner action from a normal tab stop to a roving one. */
         this._arrowNavigation = false;
-        /** Set by the parent nldd-list: when arrow-navigation is on, exactly one item
+        /** Set by the parent nldd-list: while the roving runs, exactly one item
          *  is the roving entry point (tabindex 0); the rest are tabindex -1. */
         this._rovingActive = false;
         /** Set by the parent nldd-list in `type="listbox"`: marks this option as
@@ -129,14 +202,26 @@ let NLDDListItem = NLDDListItem_1 = class NLDDListItem extends withTranslations(
         this._isBoxed = false;
         this._hasCheckedSegment = false;
         this._lightDomObserver = null;
+        /** The controls in this row the roving takes in and out of the tab order.
+         *  Rebuilt when the row's light DOM changes, so a keypress does not walk
+         *  every cell of every row again. */
+        this._rovingControlsCache = null;
         /** Watches the row and its divider-marker cells for size changes; marker
          *  insets are measured, so any reflow can move them. */
         this._dividerMarkerObserver = null;
         this._observedMarkerTargets = [];
         this._warnedDegenerateDivider = false;
+        this._warnedChildrenOutsideTree = false;
         /** Remembers the size a cell was authored with, so a later push can restore it. */
         this._ownCellSize = new WeakMap();
         this._handleClick = (e) => {
+            // A disabled <button> never gets here, but a link does: there is no such
+            // thing as a disabled <a>, so the row stops the navigation itself.
+            if (this.disabled) {
+                e.preventDefault();
+                e.stopPropagation();
+                return;
+            }
             // Safari and Firefox on Mac don't focus buttons on click. Force focus
             // so :has(.list-item__action:focus) and :focus-within CSS work reliably.
             this._action?.focus();
@@ -160,7 +245,24 @@ let NLDDListItem = NLDDListItem_1 = class NLDDListItem extends withTranslations(
         this._handleFocusOut = () => {
             this._action?.classList.remove('is-pointer-focus');
         };
+        /**
+         * See the same handler in nldd-list-item-segment: Safari hands focus to the
+         * body while the mouse is down, which drops a row out of its lit state until
+         * you let go. Left alone on a reorderable row and on a row whose press came
+         * from a nested one, where the default is doing real work (dragging).
+         */
+        this._onMouseDown = (e) => {
+            if (e.button > 0 || this.reorderable)
+                return;
+            if (this._isFromNestedRow(e))
+                return;
+            if (!this._action)
+                return;
+            e.preventDefault();
+        };
         this._onPointerDown = (e) => {
+            if (this.disabled)
+                return;
             // Primary button / touch / pen only (mouse right-click has button > 0).
             if (e.button > 0)
                 return;
@@ -170,8 +272,17 @@ let NLDDListItem = NLDDListItem_1 = class NLDDListItem extends withTranslations(
             if (this._isFromNestedRow(e))
                 return;
             this._action?.classList.add('is-pressed');
+            window.addEventListener('pointerup', this._clearPressed);
+            window.addEventListener('pointercancel', this._clearPressed);
+            // Safari does not focus a <button> on click, so a row whose paint follows
+            // the focus in it would stay unlit there while the other browsers light
+            // up. Focusing on the press makes the three agree; the ring stays hidden
+            // because is-pointer-focus already marks a pointer focus.
+            this._action?.focus({ preventScroll: true });
         };
         this._clearPressed = () => {
+            window.removeEventListener('pointerup', this._clearPressed);
+            window.removeEventListener('pointercancel', this._clearPressed);
             this._action?.classList.remove('is-pressed');
         };
     }
@@ -191,12 +302,13 @@ let NLDDListItem = NLDDListItem_1 = class NLDDListItem extends withTranslations(
         this.addEventListener('click', this._handleClick);
         // Press feedback: shown on press, cleared on release or when a touch
         // turns into a scroll (the browser fires pointercancel for that pointer),
-        // so `active` never sticks while the user scrolls the list.
+        // so `active` never sticks while the user scrolls the list. The release
+        // is watched on the window rather than here, because a button let go
+        // outside the row fires nowhere near it and the feedback would stay on.
         this.addEventListener('pointerdown', this._onPointerDown);
-        this.addEventListener('pointerup', this._clearPressed);
-        this.addEventListener('pointercancel', this._clearPressed);
+        this.addEventListener('mousedown', this._onMouseDown);
         // Light-DOM state the row derives styling from: a checked checkbox-
-        // segment (row-wide selected fill), which segmented actions own a row edge, and
+        // segment (row-wide selected fill), which segments own a row edge, and
         // the divider markers. Attribute observation, not events: consumers
         // also set these programmatically via setAttribute.
         this._lightDomObserver = new MutationObserver(() => this._onLightDomChange());
@@ -204,7 +316,7 @@ let NLDDListItem = NLDDListItem_1 = class NLDDListItem extends withTranslations(
             subtree: true,
             childList: true,
             attributes: true,
-            attributeFilter: ['checked', 'divider-start', 'divider-end'],
+            attributeFilter: ['checked', 'current', 'divider-start', 'divider-end'],
         });
         this._onLightDomChange();
     }
@@ -214,8 +326,8 @@ let NLDDListItem = NLDDListItem_1 = class NLDDListItem extends withTranslations(
         this.removeEventListener('focusout', this._handleFocusOut);
         this.removeEventListener('click', this._handleClick);
         this.removeEventListener('pointerdown', this._onPointerDown);
-        this.removeEventListener('pointerup', this._clearPressed);
-        this.removeEventListener('pointercancel', this._clearPressed);
+        this.removeEventListener('mousedown', this._onMouseDown);
+        this._clearPressed();
         this._lightDomObserver?.disconnect();
         this._lightDomObserver = null;
         this._dividerMarkerObserver?.disconnect();
@@ -223,47 +335,138 @@ let NLDDListItem = NLDDListItem_1 = class NLDDListItem extends withTranslations(
     }
     _onLightDomChange() {
         this._updateCheckedSegment();
+        this._updateCurrentSegment();
         this._updateInteractive();
         this._measureDividerMarkers();
+        this._rovingControlsCache = null;
+        // A framework can fill a row in a later pass than the one that put the row
+        // in the list, so both have to run again: the tab stops inside this row,
+        // and the list's choice of which rows the arrows stop at — a row that just
+        // gained its only control was not a stop when that choice was made.
+        if (this._arrowNavigation) {
+            this._syncRovingTabStops();
+            this._parentList?._updateRoving();
+        }
+    }
+    get _parentList() {
+        return this.closest('nldd-list');
+    }
+    /**
+     * The controls in this row that own a tab stop: a design-system control that
+     * carries `no-tab`, or anything natively focusable. Segments are left
+     * out — they have their own channel (`_tabbable`) — but a control slotted
+     * inside one is not, so it is managed here.
+     *
+     * Custom elements that have not upgraded yet cannot answer whether they carry
+     * `no-tab`, so the cache is dropped and the row re-syncs once they do.
+     */
+    _rovingControls() {
+        if (this._rovingControlsCache)
+            return this._rovingControlsCache;
+        const pending = new Set();
+        const controls = this._ownDescendants('*').filter((el) => {
+            const tag = el.tagName.toLowerCase();
+            if (tag === 'nldd-list-item-segment')
+                return false;
+            if (tag.includes('-') && !customElements.get(tag)) {
+                pending.add(tag);
+                return false;
+            }
+            return 'noTab' in el || el.matches(OWN_TAB_STOP);
+        });
+        this._rovingControlsCache = controls;
+        pending.forEach((tag) => {
+            customElements.whenDefined(tag).then(() => {
+                this._rovingControlsCache = null;
+                if (this._arrowNavigation)
+                    this._syncRovingTabStops();
+            });
+        });
+        return controls;
+    }
+    /**
+     * Whether the arrow keys stop at this row.
+     *
+     * Anything you can operate makes a row a stop: its own link, button or
+     * checkbox, a segment, or a control sitting in one of its cells. A
+     * row of nothing but text is skipped, because focus that leads nowhere is a
+     * dead end for a keyboard.
+     *
+     * @internal Read by the parent nldd-list.
+     */
+    get _isRovingStop() {
+        // Nothing to land on: a disabled control is not focusable, so a stop there
+        // would swallow the arrow key and leave focus where it was.
+        if (this.disabled)
+            return false;
+        if (this.href || this.button || this.checkbox)
+            return true;
+        if (this._ownDescendants('nldd-list-item-segment:not([disabled])').length > 0)
+            return true;
+        return this._rovingControls().some((control) => !control.hasAttribute('disabled'));
+    }
+    /**
+     * A segment marked `current` makes the whole row the current one.
+     *
+     * A row cut into segments has no control of its own, so `aria-current="page"`
+     * belongs on the segment that holds the link. Written there, the row would
+     * stay unpainted and the consumer had to set `current` twice, once for the
+     * semantics and once for the color, with nothing to catch the two drifting
+     * apart. The row reads it off its own segments instead — reading, not
+     * writing: the attributes stay the consumer's.
+     */
+    _updateCurrentSegment() {
+        this.toggleAttribute('data-current', this._ownDescendants('nldd-list-item-segment[current]').length > 0);
     }
     /** A checked checkbox-segment reads as "this row is selected", so the fill
      *  covers the whole row — including a disclosure segment — instead of
-     *  stopping at the segmented action boundary. Scoped to own descendants: a checked
+     *  stopping at the segment boundary. Scoped to own descendants: a checked
      *  row in a nested branch must not light up its ancestors. */
     _updateCheckedSegment() {
         this._hasCheckedSegment =
-            this._ownDescendants('nldd-list-item-action[checkbox][checked]').length > 0;
+            this._ownDescendants('nldd-list-item-segment[checkbox][checked]').length > 0;
     }
     /** A row with any action — its own href/button/checkbox or a slotted
      *  segment — carries the widened geometry: negative host margin plus the
      *  compensating row padding (see the geometry rules in the class doc).
      *
-     *  An action segment at a row edge owns the padding for that side itself,
-     *  so the row drops its own there and the segmented action lands on the row's edge.
+     *  An segment at a row edge owns the padding for that side itself,
+     *  so the row drops its own there and the segment lands on the row's edge.
      *  Stamped as classes because the CSS cannot ask: `:has()` is not allowed
      *  inside `:host()`, and the row's own padding is what has to change — a
-     *  `::slotted()` rule could only reach the segmented action. */
+     *  `::slotted()` rule could only reach the segment. */
     _updateInteractive() {
         const interactive = !!this.href || this.button || this.checkbox ||
-            this._ownDescendants('nldd-list-item-action').length > 0;
+            this._ownDescendants('nldd-list-item-segment').length > 0;
         this.classList.toggle('is-interactive', interactive);
         // The row's own children, not the branch's child rows: those go to the
         // `children` slot and render BELOW the row, so on a branch row the last
         // element child is a nested row rather than the row's trailing segment.
         const ownChildren = Array.from(this.children)
             .filter(el => el.getAttribute('slot') !== 'children');
-        const isSegment = (el) => el?.tagName.toLowerCase() === 'nldd-list-item-action';
-        this.classList.toggle('has-leading-action', isSegment(ownChildren[0]));
-        this.classList.toggle('has-trailing-action', isSegment(ownChildren[ownChildren.length - 1]));
+        const isSegment = (el) => el?.tagName.toLowerCase() === 'nldd-list-item-segment';
+        this.classList.toggle('has-leading-segment', isSegment(ownChildren[0]));
+        this.classList.toggle('has-trailing-segment', isSegment(ownChildren[ownChildren.length - 1]));
+    }
+    willUpdate(changed) {
+        super.willUpdate(changed);
+        // Before the first render, so the row is painted with the list's variant and
+        // type right away. Setting them in `firstUpdated` asks for a second render
+        // from inside the first.
+        if (this.hasUpdated || this.hasAttribute('data-nldd-clone'))
+            return;
+        this._syncWithList();
     }
     firstUpdated() {
         // Clones are visual-only copies inside nldd-list's shadow root: their
         // classes and stamped attributes came along with cloneNode, so no sync.
         if (this.hasAttribute('data-nldd-clone'))
             return;
-        this._syncWithList();
         this._observeChildrenSlot();
-        this._updateChildren();
+        // Read out of the row's own shadow DOM, so not before the first render,
+        // and deferred out of the update cycle: setting the state here would
+        // schedule a second update from inside the first.
+        queueMicrotask(() => this._updateChildren());
         this._relayExpanded();
         // First measurement after the first render: the marker offsets need
         // laid-out boxes.
@@ -271,12 +474,12 @@ let NLDDListItem = NLDDListItem_1 = class NLDDListItem extends withTranslations(
     }
     /**
      * The row's own descendants for `selector` — everything down to and inside
-     * its action segmented actions, but NOT inside a nested row. In a tree the child rows
+     * its segments, but NOT inside a nested row. In a tree the child rows
      * are DOM children of this row, so a plain querySelectorAll would push this
      * row's state into theirs (a parent's `expanded` turning every nested
      * chevron, its `size` overwriting theirs). A `:scope >` child selector is
      * too strict the other way: cells legitimately sit one level deeper, inside
-     * an nldd-list-item-action.
+     * an nldd-list-item-segment.
      */
     _ownDescendants(selector) {
         return Array.from(this.querySelectorAll(selector))
@@ -311,7 +514,7 @@ let NLDDListItem = NLDDListItem_1 = class NLDDListItem extends withTranslations(
         });
     }
     updated(changed) {
-        if (changed.has('selected') || changed.has('button') || changed.has('checkbox') || changed.has('href') || changed.has('_parentType')) {
+        if (changed.has('selected') || changed.has('current') || changed.has('button') || changed.has('checkbox') || changed.has('href') || changed.has('_parentType')) {
             this._updateAriaState();
         }
         if (changed.has('button') || changed.has('checkbox') || changed.has('href')) {
@@ -324,6 +527,14 @@ let NLDDListItem = NLDDListItem_1 = class NLDDListItem extends withTranslations(
         if (changed.has('_arrowNavigation') || changed.has('_rovingActive')) {
             this._syncRovingTabStops();
         }
+        // A row that switches off mid-flight stops being a stop, but the tab stop it
+        // already holds does not move by itself: a disabled anchor keeps its
+        // tabindex, so Tab would land on a row that answers to nothing until some
+        // unrelated change happened to re-run the roving.
+        if (changed.has('disabled')) {
+            this._syncRovingTabStops();
+            this._parentList?._updateRoving();
+        }
         this._propagateSize();
     }
     /**
@@ -342,8 +553,8 @@ let NLDDListItem = NLDDListItem_1 = class NLDDListItem extends withTranslations(
     /** Segments marked `disclosure` announce the row's expanded state, so the
      *  consumer writes it once — here, where it also drives the children group. */
     _relayExpanded() {
-        this._ownDescendants('nldd-list-item-action[disclosure]')
-            .forEach(action => { action._rowExpanded = this._resolvedExpanded; });
+        this._ownDescendants('nldd-list-item-segment[disclosure]')
+            .forEach(segment => { segment._rowExpanded = this._resolvedExpanded; });
     }
     /** `expanded` needs a control to sit on; a plain container has none. */
     _warnOnStrayExpanded() {
@@ -353,17 +564,17 @@ let NLDDListItem = NLDDListItem_1 = class NLDDListItem extends withTranslations(
             return;
         if (this.href || this.button || this.checkbox)
             return;
-        if (this._ownDescendants('nldd-list-item-action[disclosure]').length > 0)
+        if (this._ownDescendants('nldd-list-item-segment[disclosure]').length > 0)
             return;
-        console.warn('nldd-list-item: `expanded` needs somewhere to live — make the row interactive (href, button or checkbox), or mark the segmented action that does the disclosing with `disclosure`.');
+        console.warn('nldd-list-item: `expanded` needs somewhere to live — make the row interactive (href, button or checkbox), or mark the segment that does the disclosing with `disclosure`.');
     }
     /** True when the item is an option in a `type="listbox"` parent. */
     get _isListboxOption() {
         return this._parentType === 'listbox';
     }
     /**
-     * Reads the initial variant + type from the closest parent nldd-list, once in
-     * firstUpdated, so the item is styled correctly on first paint. Later changes
+     * Reads the initial variant + type from the closest parent nldd-list, before
+     * the first render, so the item is styled correctly on first paint. Later changes
      * are PUSHED by the list: its `updated` / `_updateItems` calls `_applyVariant`
      * and `_applyParentType` on every item, so the list is the single source of
      * truth and a runtime variant/type switch (or an item moved to another list)
@@ -388,11 +599,11 @@ let NLDDListItem = NLDDListItem_1 = class NLDDListItem extends withTranslations(
     _applyParentType(type) {
         this._parentType = type;
         this._relayToChildren(item => item._applyParentType(type));
-        // Segment actions need the list type too: in a listbox they degrade to a
+        // Segments need the list type too: in a listbox they degrade to a
         // plain container, since an `option` may not hold interactive descendants.
-        // Own segmented actions only — nested rows get the relay above and push their own.
-        this._ownDescendants('nldd-list-item-action')
-            .forEach(action => action._applyParentType?.(type));
+        // Own segments only — nested rows get the relay above and push their own.
+        this._ownDescendants('nldd-list-item-segment')
+            .forEach(segment => segment._applyParentType?.(type));
     }
     /** Nested rows sit in this item's `children` slot, not the list's, so a plain
      *  `querySelector` from the list walks past them. */
@@ -423,7 +634,7 @@ let NLDDListItem = NLDDListItem_1 = class NLDDListItem extends withTranslations(
         }
         // aria-current on the inner action (link/button) — navigation only
         const action = this._action;
-        if (this._parentType === 'navigation' && this.selected && action) {
+        if (this._parentType === 'navigation' && (this.current || this.selected) && action) {
             action.setAttribute('aria-current', 'page');
         }
         else {
@@ -447,7 +658,7 @@ let NLDDListItem = NLDDListItem_1 = class NLDDListItem extends withTranslations(
      * full-width line back.
      */
     _implicitDividerStart() {
-        // The marker is the CELL, never a segmented action around it: the action
+        // The marker is the CELL, never a segment around it: the action
         // carries its own inline padding, so its edge sits before the text. Own
         // descendants, so a text inside a segment counts as this row's content
         // while a nested row's text does not.
@@ -555,12 +766,11 @@ let NLDDListItem = NLDDListItem_1 = class NLDDListItem extends withTranslations(
         }
         if (!import.meta.env?.DEV)
             return;
-        if (this._showChildren && this._parentType !== 'tree') {
+        // Once per row: slotchange runs this again on every change to the branch.
+        if (this._showChildren && this._parentType !== 'tree' && !this._warnedChildrenOutsideTree) {
+            this._warnedChildrenOutsideTree = true;
             console.warn('nldd-list-item: `slot="children"` nests rows, which only carries meaning in an nldd-list with type="tree". Elsewhere the group has no owning tree and assistive technology cannot read the hierarchy.');
         }
-        if (this._showChildren && this.expanded === undefined) {
-            console.warn('nldd-list-item: a row with children needs `expanded` — without it there is no aria-expanded, so the branch reads as a leaf and the group can never be announced as collapsed.');
-        }
     }
     /** Whether the event started in a row nested inside this one. Only the part
      *  of the path BELOW this row counts — everything above it is this row's own
@@ -577,7 +787,7 @@ let NLDDListItem = NLDDListItem_1 = class NLDDListItem extends withTranslations(
      * so consumers can call `listItemEl.focus()` without reaching into shadow DOM.
      */
     focus(options) {
-        // A tree row without a control of its own (only segmented actions, or
+        // A tree row without a control of its own (only segments, or
         // none at all) takes focus on the host: that is where role="treeitem"
         // sits, so assistive technology announces the row rather than a button
         // inside it. _syncRovingTabStops gives the host the tabindex for it.
@@ -590,8 +800,9 @@ let NLDDListItem = NLDDListItem_1 = class NLDDListItem extends withTranslations(
     /**
      * The roving tab stop, spread over the row and the controls inside it: the
      * current row is reachable with Tab, everything else only with the arrow
-     * keys. Within the current row Tab then walks its segmented actions, so a row
-     * that holds a checkbox and a chevron stays fully operable.
+     * keys. Within the current row Tab then walks its segments and any
+     * control in its cells, so a row that holds a checkbox and a chevron, or a
+     * menu button at its end, stays fully operable.
      *
      * A row that is not the current one carries NO tabindex at all rather than
      * -1. A shadow host with a tabindex is a focus scope of its own, and Chromium
@@ -603,11 +814,11 @@ let NLDDListItem = NLDDListItem_1 = class NLDDListItem extends withTranslations(
      * tab stop is in the DOM before focus is handed over.
      */
     _syncRovingTabStops() {
-        const ownActions = Array.from(this.children).filter((el) => el.getAttribute('slot') !== 'children'
-            && el.tagName.toLowerCase() === 'nldd-list-item-action');
+        const ownSegments = this._ownSegments();
         if (!this._arrowNavigation) {
             this.removeAttribute('tabindex');
-            ownActions.forEach((action) => { action._tabbable = undefined; });
+            ownSegments.forEach((segment) => { segment._tabbable = undefined; });
+            this._rovingControls().forEach(releaseTabbable);
             return;
         }
         // Only a row without its own control needs the host as focus target; with
@@ -618,14 +829,68 @@ let NLDDListItem = NLDDListItem_1 = class NLDDListItem extends withTranslations(
         else {
             this.setAttribute('tabindex', '0');
         }
-        ownActions.forEach((action) => { action._tabbable = this._rovingActive; });
+        ownSegments.forEach((segment) => { segment._tabbable = this._rovingActive; });
+        this._rovingControls().forEach((control) => { setTabbable(control, this._rovingActive); });
+    }
+    /**
+     * The control of this row an event started in, if it started in one at all.
+     *
+     * Tells apart what the row IS from what it HOLDS, and it asks that of the
+     * light DOM rather than of `_rovingControls`. That set holds what the roving
+     * can park, which needs `no-tab` or a native tab stop — and a combo box has
+     * neither, so the one control most in need of protection is exactly the one
+     * missing from it.
+     *
+     * So: everything in the path that is a light-DOM descendant of this row,
+     * stopping at the row. Nothing means the event came from the row's own
+     * action, which lives in its shadow root where `contains` does not reach.
+     * A segment on its own is what the row IS; a control slotted into one is not,
+     * and shows up in front of it.
+     *
+     * @internal Read by the parent nldd-list.
+     */
+    _slottedControlFor(path) {
+        const held = [];
+        for (const node of path) {
+            if (node === this)
+                break;
+            if (node instanceof Element && this.contains(node))
+                held.push(node);
+        }
+        if (held.length === 0)
+            return null;
+        if (held.length === 1 && held[0].tagName.toLowerCase() === 'nldd-list-item-segment')
+            return null;
+        return held[0];
+    }
+    /**
+     * Everything but the row itself out of the tab order.
+     *
+     * A list is one stop from the outside: Tab into it lands on the row, and the
+     * controls inside open up from there. Without this the stops the row handed
+     * out stay handed out after you tab away, so tabbing back in drops you into
+     * the control you left rather than on the row, and the arrow keys are two
+     * moves away instead of none.
+     *
+     * @internal Called by the parent nldd-list when focus leaves it.
+     */
+    _parkControls() {
+        if (!this._arrowNavigation || !this._rovingActive)
+            return;
+        this._ownSegments().forEach((segment) => { segment._tabbable = false; });
+        this._rovingControls().forEach((control) => { setTabbable(control, false); });
+    }
+    /** The segments of this row, leaving out those of a nested tree row. */
+    _ownSegments() {
+        return Array.from(this.children).filter((el) => el.getAttribute('slot') !== 'children'
+            && el.tagName.toLowerCase() === 'nldd-list-item-segment');
     }
-    /** The control that opens and closes this row: the segmented action marked
+    /** The control that opens and closes this row: the segment marked
      *  `disclosure`, or the row itself when it is a button. Never a link — Left
      *  and Right may not navigate away. */
     get _disclosureControl() {
         const action = Array.from(this.children).find((el) => el.getAttribute('slot') !== 'children'
-            && el.tagName.toLowerCase() === 'nldd-list-item-action'
+            && el.tagName.toLowerCase() === 'nldd-list-item-segment'
             && el.hasAttribute('disclosure'));
         if (action)
             return action;
@@ -640,7 +905,7 @@ let NLDDListItem = NLDDListItem_1 = class NLDDListItem extends withTranslations(
         const control = this._disclosureControl;
         if (!control)
             return false;
-        // The click lands on a segmented action, and that action pulls focus into
+        // The click lands on a segment, and that segment pulls focus into
         // its own control — with the pointer-focus flag set, since a click is what
         // it sees. Focus belongs to the row: that is the roving tab stop, and the
         // keyboard user has to keep seeing where they are.
@@ -650,6 +915,28 @@ let NLDDListItem = NLDDListItem_1 = class NLDDListItem extends withTranslations(
             this.focus();
         return true;
     }
+    /**
+     * Activates what this row is FOR, as opposed to what folds it: the first
+     * segment that is not the disclosure. A row that is its own control
+     * needs none of this, because the key reaches that control by itself.
+     * Returns false when there is nothing but a chevron.
+     */
+    _activatePrimary() {
+        const segments = [...this.querySelectorAll(':scope > nldd-list-item-segment')];
+        const primary = segments.find((segment) => !segment.hasAttribute('disclosure'));
+        if (!primary)
+            return false;
+        const control = primary.shadowRoot?.querySelector('a, button');
+        if (!control)
+            return false;
+        // Same trade as _activateDisclosure: the click pulls focus into the
+        // segment, and the row has to keep it, because the row is the tab stop.
+        const hadFocus = this.matches(':focus-within');
+        control.click();
+        if (hadFocus)
+            this.focus();
+        return true;
+    }
     /** The branch this row hangs under, or undefined for a top-level row. */
     get parentRow() {
         const parent = this.parentElement;
@@ -665,7 +952,7 @@ let NLDDListItem = NLDDListItem_1 = class NLDDListItem extends withTranslations(
         // search input is in the tab order, and active moves via
         // aria-activedescendant. Roving tabindex (arrow-navigation) supersedes
         // nothing here: the two modes are mutually exclusive on the parent list.
-        // Otherwise, roving tabindex: when the list runs arrow-navigation,
+        // Otherwise, roving tabindex: while the list runs the roving,
         // exactly one item is the tab stop (0) and the rest are reachable only
         // via the arrow keys (-1). Off → undefined leaves the native
         // button/link as a normal tab stop.
@@ -674,7 +961,7 @@ let NLDDListItem = NLDDListItem_1 = class NLDDListItem extends withTranslations(
             : this._arrowNavigation
                 ? (this._rovingActive ? '0' : '-1')
                 : undefined;
-        return template(this.button, this.href, this.target, this.rel, opensInNewTabLabel, actionTabindex, this._highlighted, this.checkbox, this.checked, this._resolvedExpanded, this._showChildren, this._hasCheckedSegment);
+        return template(this.button, this.href, this.target, this.rel, opensInNewTabLabel, actionTabindex, this._highlighted, this.checkbox, this.checked, this._resolvedExpanded, this._showChildren, this._hasCheckedSegment, this.disabled);
     }
 };
 NLDDListItem.styles = [listItemStyles];
@@ -690,6 +977,9 @@ __decorate([
 __decorate([
     property({ type: Boolean, reflect: true })
 ], NLDDListItem.prototype, "selected", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], NLDDListItem.prototype, "current", void 0);
 __decorate([
     property({ type: Boolean, reflect: true })
 ], NLDDListItem.prototype, "button", void 0);
@@ -699,6 +989,9 @@ __decorate([
 __decorate([
     property({ type: Boolean, reflect: true })
 ], NLDDListItem.prototype, "checked", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], NLDDListItem.prototype, "disabled", void 0);
 __decorate([
     property({ type: Boolean, reflect: true })
 ], NLDDListItem.prototype, "expanded", void 0);