@nldd/design-system 0.8.92 → 0.8.94

package/dist/components/lists-and-tables/list-item/list-item.d.ts

@@ -17,6 +17,13 @@ declare const NLDDListItem_base: (abstract new (...args: any[]) => LitElement &
  * plain container otherwise. All cells and segments share one flat
  * slot, in source order.
  *
+ * ## One action or several
+ * With one action, make the row itself the control (`href`, `button`,
+ * `checkbox` or `radio`): the whole row is then one hit area. With two or
+ * more, give each its own `nldd-list-item-segment` and leave the row without
+ * an action of its own. Both at once nests a control inside a control, and the
+ * item warns about that in development.
+ *
  * ## Geometry
  * Two rules govern every row:
  * 1. State fills always paint the WIDENED row geometry — the row box extended
@@ -57,8 +64,8 @@ declare const NLDDListItem_base: (abstract new (...args: any[]) => LitElement &
  *
  * `checkbox` makes the WHOLE row the control: the inner action becomes a
  * `role="checkbox"` button carrying `aria-checked`, it toggles `checked` on
- * activation and fires `change`. Slot a visual `nldd-checkbox` (or any glyph)
- * before the text and mark it `aria-hidden` + non-focusable — the row already
+ * activation and fires `change`. Slot an `nldd-checkbox decorative` (or any
+ * glyph) before the text: it only shows the state, since the row already
  * conveys role and state, and a second focusable control would double the tab
  * stops. Do NOT nest a real `<input type="checkbox">` in the action: interactive
  * content inside a `<button>` is invalid HTML and AT announces the button, not
@@ -82,20 +89,24 @@ declare const NLDDListItem_base: (abstract new (...args: any[]) => LitElement &
  * @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: 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 {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>`, only with `href`; with target '_blank', 'noopener noreferrer' is added to whatever you set
  * @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} radio - Makes the whole row one radio of a group: the action becomes a `role="radio"` button carrying `aria-checked`, and activation sets `checked` (never clears it) and fires `change`. Put the rows in an `nldd-list type="radiogroup"`, which is what makes them a set. Wins over `button`, loses to `href` and `checkbox`. The arrow keys move focus without checking, where a native radio group and `nldd-radio-button-group` check as they go: a row can carry more than a label, so stepping past one should not commit it.
+ * @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.
+ * @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} checked - Checked state of a `checkbox` or `radio` row. A checkbox row toggles it on activation, a radio row only ever sets it
- * @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>`, only with `href`; with target '_blank', 'noopener noreferrer' is added to whatever you set
- * @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.
+ * @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} 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.
  *
- * @slot - Cells and segments, in source order
+ * Divider markers, set on a CELL in the row rather than on the row itself:
+ * @attr {boolean} divider-start - The divider starts at this cell instead of at the row's first text or title cell. On the leading cell it restores the full-width line.
+ * @attr {boolean} divider-end - The divider stops after this cell. With several markers the line runs from the first start to the last end.
+ *
+ * @slot - Cells and segments, in source order. Anything else, bare text included, gets none of a cell's typography, size and alignment, and warns in development.
  * @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, and on a `radio` row when it becomes checked; detail: { checked: boolean }
@@ -103,35 +114,31 @@ declare const NLDDListItem_base: (abstract new (...args: any[]) => LitElement &
 export declare class NLDDListItem extends NLDDListItem_base {
     static styles: import("lit").CSSResult[];
     size: ListItemSize;
-    selected: boolean;
+    /** When set, renders the item as a link. */
+    href?: string;
     /**
-     * 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.
+     * Link target (e.g. '_blank' to open in a new tab). Forwarded to the `<a>`; only applies with href.
+     * When set to '_blank', the item appends a visually hidden "opens in new tab" announcement to the
+     * link so the change of context is conveyed to assistive technology (WCAG 2.1 SC 3.2.2). Override
+     * the wording via the `translations` property.
      */
-    current: boolean;
+    target?: string;
+    /** Link rel, forwarded to the `<a>` with href. With target '_blank',
+     *  'noopener noreferrer' is added to it. */
+    rel?: string;
     /** When set, renders the item as a button; ignored when href is set. */
     button: boolean;
     /** When set, the whole row is the checkbox control. Ignored when href is set. */
     checkbox: boolean;
     /** When set, the whole row is one radio of a group. Ignored when href is set. */
     radio: boolean;
+    /** Set by the parent nldd-list when reorderable is enabled. Used as a CSS hook for drag handle visibility. */
+    reorderable: boolean;
+    selected: boolean;
     /** Checked state of a `checkbox` or `radio` row. A checkbox row toggles it on
      *  activation; a radio row only ever sets it, because picking the option you
      *  already have is not a way to unpick it. */
     checked: boolean;
-    /**
-     * 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.
-     */
-    disabled: boolean;
     /**
      * Disclosure state of a row that opens something (a tree row's children, a
      * details panel). Reflected as `aria-expanded` on the row's own control —
@@ -139,20 +146,24 @@ export declare class NLDDListItem extends NLDDListItem_base {
      * the attribute off entirely when the row discloses nothing.
      */
     expanded?: boolean;
-    /** When set, renders the item as a link. */
-    href?: string;
     /**
-     * Link target (e.g. '_blank' to open in a new tab). Forwarded to the `<a>`; only applies with href.
-     * When set to '_blank', the item appends a visually hidden "opens in new tab" announcement to the
-     * link so the change of context is conveyed to assistive technology (WCAG 2.1 SC 3.2.2). Override
-     * the wording via the `translations` property.
+     * 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.
      */
-    target?: string;
-    /** Link rel, forwarded to the `<a>` with href. With target '_blank',
-     *  'noopener noreferrer' is added to it. */
-    rel?: string;
-    /** Set by the parent nldd-list when reorderable is enabled. Used as a CSS hook for drag handle visibility. */
-    reorderable: boolean;
+    current: boolean;
+    /**
+     * 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.
+     */
+    disabled: boolean;
     private _showChildren;
     private _parentType;
     /** Set by the parent nldd-list when it runs the roving tabindex (everywhere
@@ -182,6 +193,8 @@ export declare class NLDDListItem extends NLDDListItem_base {
     private _observedMarkerTargets;
     private _warnedDegenerateDivider;
     private _warnedChildrenOutsideTree;
+    private _warnedStrayContent;
+    private _warnedNestedControl;
     connectedCallback(): void;
     disconnectedCallback(): void;
     private _onLightDomChange;
@@ -282,18 +295,27 @@ export declare class NLDDListItem extends NLDDListItem_base {
     private _relayExpanded;
     /** `expanded` needs a control to sit on; a plain container has none. */
     private _warnOnStrayExpanded;
+    /** A row takes cells and segments. Anything else gets none of the typography,
+     *  size and alignment a cell brings, and bare text in a clickable row falls
+     *  back to the browser's button font. */
+    private _warnOnStrayContent;
+    /** A row that is its own control cannot hold another one: a control inside a
+     *  link or button is invalid HTML, doubles the tab stop, and a press on it can
+     *  set off the row as well. A glyph that only shows the row's state is fine:
+     *  a `decorative` radio button, or a checkbox marked `aria-hidden`. */
+    private _warnOnNestedControl;
     /** True when the item is an option in a `type="listbox"` parent. */
     get _isListboxOption(): boolean;
     /**
-     * Reads the initial variant + type from the closest parent nldd-list, before
+     * Reads the initial appearance + 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`
+     * are PUSHED by the list: its `updated` / `_updateItems` calls `_applyAppearance`
      * 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)
+     * truth and a runtime appearance/type switch (or an item moved to another list)
      * always tracks its current parent.
      */
     private _syncWithList;
-    _applyVariant(variant: string): void;
+    _applyAppearance(appearance: string): void;
     _applyParentType(type: ListType): void;
     /** Nested rows sit in this item's `children` slot, not the list's, so a plain
      *  `querySelector` from the list walks past them. */

package/dist/components/lists-and-tables/list-item/list-item.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"list-item.d.ts","sourceRoot":"","sources":["../../../../src/components/lists-and-tables/list-item/list-item.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"list-item.d.ts","sourceRoot":"","sources":["../../../../src/components/lists-and-tables/list-item/list-item.ts"],"names":[],"mappings":"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"}

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

@@ -65,12 +65,25 @@ function releaseTabbable(el) {
     applyAuthoredTabState(el, authored);
     authoredTabState.delete(el);
 }
+/** What counts as a control of its own inside a row that already is one. */
+const NESTED_CONTROLS = [
+    'nldd-list-item-segment', 'nldd-button', 'nldd-icon-button', 'nldd-link',
+    'nldd-checkbox', 'nldd-radio-button', 'nldd-switch',
+    'a[href]', 'button', 'input', 'select', 'textarea',
+].join(', ');
 /**
  * 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 segments share one flat
  * slot, in source order.
  *
+ * ## One action or several
+ * With one action, make the row itself the control (`href`, `button`,
+ * `checkbox` or `radio`): the whole row is then one hit area. With two or
+ * more, give each its own `nldd-list-item-segment` and leave the row without
+ * an action of its own. Both at once nests a control inside a control, and the
+ * item warns about that in development.
+ *
  * ## Geometry
  * Two rules govern every row:
  * 1. State fills always paint the WIDENED row geometry — the row box extended
@@ -111,8 +124,8 @@ function releaseTabbable(el) {
  *
  * `checkbox` makes the WHOLE row the control: the inner action becomes a
  * `role="checkbox"` button carrying `aria-checked`, it toggles `checked` on
- * activation and fires `change`. Slot a visual `nldd-checkbox` (or any glyph)
- * before the text and mark it `aria-hidden` + non-focusable — the row already
+ * activation and fires `change`. Slot an `nldd-checkbox decorative` (or any
+ * glyph) before the text: it only shows the state, since the row already
  * conveys role and state, and a second focusable control would double the tab
  * stops. Do NOT nest a real `<input type="checkbox">` in the action: interactive
  * content inside a `<button>` is invalid HTML and AT announces the button, not
@@ -136,20 +149,24 @@ function releaseTabbable(el) {
  * @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: 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 {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>`, only with `href`; with target '_blank', 'noopener noreferrer' is added to whatever you set
  * @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} radio - Makes the whole row one radio of a group: the action becomes a `role="radio"` button carrying `aria-checked`, and activation sets `checked` (never clears it) and fires `change`. Put the rows in an `nldd-list type="radiogroup"`, which is what makes them a set. Wins over `button`, loses to `href` and `checkbox`. The arrow keys move focus without checking, where a native radio group and `nldd-radio-button-group` check as they go: a row can carry more than a label, so stepping past one should not commit it.
+ * @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.
+ * @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} checked - Checked state of a `checkbox` or `radio` row. A checkbox row toggles it on activation, a radio row only ever sets it
- * @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>`, only with `href`; with target '_blank', 'noopener noreferrer' is added to whatever you set
- * @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.
+ * @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} 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.
+ *
+ * Divider markers, set on a CELL in the row rather than on the row itself:
+ * @attr {boolean} divider-start - The divider starts at this cell instead of at the row's first text or title cell. On the leading cell it restores the full-width line.
+ * @attr {boolean} divider-end - The divider stops after this cell. With several markers the line runs from the first start to the last end.
  *
- * @slot - Cells and segments, in source order
+ * @slot - Cells and segments, in source order. Anything else, bare text included, gets none of a cell's typography, size and alignment, and warns in development.
  * @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, and on a `radio` row when it becomes checked; detail: { checked: boolean }
@@ -158,26 +175,28 @@ let NLDDListItem = NLDDListItem_1 = class NLDDListItem extends withTranslations(
     constructor() {
         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;
         /** When set, the whole row is one radio of a group. Ignored when href is set. */
         this.radio = false;
+        /** Set by the parent nldd-list when reorderable is enabled. Used as a CSS hook for drag handle visibility. */
+        this.reorderable = false;
+        this.selected = false;
         /** Checked state of a `checkbox` or `radio` row. A checkbox row toggles it on
          *  activation; a radio row only ever sets it, because picking the option you
          *  already have is not a way to unpick it. */
         this.checked = 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;
         /**
          * Switches off the row's own control.
          *
@@ -187,8 +206,6 @@ let NLDDListItem = NLDDListItem_1 = class NLDDListItem extends withTranslations(
          * 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 it runs the roving tabindex (everywhere
@@ -217,8 +234,36 @@ let NLDDListItem = NLDDListItem_1 = class NLDDListItem extends withTranslations(
         this._observedMarkerTargets = [];
         this._warnedDegenerateDivider = false;
         this._warnedChildrenOutsideTree = false;
+        this._warnedStrayContent = false;
+        this._warnedNestedControl = false;
         /** Remembers the size a cell was authored with, so a later push can restore it. */
         this._ownCellSize = new WeakMap();
+        /** A row takes cells and segments. Anything else gets none of the typography,
+         *  size and alignment a cell brings, and bare text in a clickable row falls
+         *  back to the browser's button font. */
+        this._warnOnStrayContent = (e) => {
+            if (!import.meta.env?.DEV || this._warnedStrayContent)
+                return;
+            const slot = e.target;
+            if (slot.name)
+                return;
+            const stray = slot.assignedNodes({ flatten: true }).find((node) => {
+                if (node.nodeType === Node.TEXT_NODE)
+                    return (node.textContent ?? '').trim() !== '';
+                if (node.nodeType !== Node.ELEMENT_NODE)
+                    return false;
+                const tag = node.localName;
+                return tag !== 'nldd-list-item-segment' && !(tag.startsWith('nldd-') && tag.endsWith('-cell'));
+            });
+            this._warnOnNestedControl();
+            if (!stray)
+                return;
+            this._warnedStrayContent = true;
+            const what = stray.nodeType === Node.TEXT_NODE
+                ? `bare text ("${stray.textContent.trim().slice(0, 40)}")`
+                : `<${stray.localName}>`;
+            console.warn(`nldd-list-item: ${what} sits directly in a row. A row takes cells and segments (nldd-text-cell, nldd-icon-cell, nldd-list-item-segment, …). Anything else gets none of their typography, size and alignment, and bare text in a clickable row falls back to the browser's button font. Wrap it in a cell.`);
+        };
         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.
@@ -467,7 +512,7 @@ let NLDDListItem = NLDDListItem_1 = class NLDDListItem extends withTranslations(
     }
     willUpdate(changed) {
         super.willUpdate(changed);
-        // Before the first render, so the row is painted with the list's variant and
+        // Before the first render, so the row is painted with the list's appearance 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'))
@@ -480,6 +525,9 @@ let NLDDListItem = NLDDListItem_1 = class NLDDListItem extends withTranslations(
         if (this.hasAttribute('data-nldd-clone'))
             return;
         this._observeChildrenSlot();
+        // On the shadow root, not on the slot: the default slot is re-rendered
+        // inside a different wrapper when the row becomes a link or a button.
+        this.renderRoot.addEventListener('slotchange', this._warnOnStrayContent);
         // 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.
@@ -536,6 +584,7 @@ let NLDDListItem = NLDDListItem_1 = class NLDDListItem extends withTranslations(
         }
         if (changed.has('button') || changed.has('checkbox') || changed.has('radio') || changed.has('href')) {
             this._updateInteractive();
+            this._warnOnNestedControl();
         }
         if (changed.has('expanded')) {
             this._relayExpanded();
@@ -585,16 +634,36 @@ let NLDDListItem = NLDDListItem_1 = class NLDDListItem extends withTranslations(
             return;
         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`.');
     }
+    /** A row that is its own control cannot hold another one: a control inside a
+     *  link or button is invalid HTML, doubles the tab stop, and a press on it can
+     *  set off the row as well. A glyph that only shows the row's state is fine:
+     *  a `decorative` radio button, or a checkbox marked `aria-hidden`. */
+    _warnOnNestedControl() {
+        if (!import.meta.env?.DEV || this._warnedNestedControl)
+            return;
+        if (this.hasAttribute('data-nldd-clone'))
+            return;
+        if (!(this.href || this.button || this.checkbox || this.radio))
+            return;
+        const nested = [...this.children]
+            .filter((child) => !child.slot)
+            .flatMap((child) => [child, ...child.querySelectorAll('*')])
+            .find((el) => el.matches(NESTED_CONTROLS) && !el.matches('[decorative]') && !el.closest('[aria-hidden="true"], [inert]'));
+        if (!nested)
+            return;
+        this._warnedNestedControl = true;
+        console.warn(`nldd-list-item: <${nested.localName}> sits in a row that is its own control (href, button, checkbox or radio). A control inside a control is invalid HTML and doubles the tab stop. With more than one action, give each its own nldd-list-item-segment and leave the row without an action.`);
+    }
     /** 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, before
+     * Reads the initial appearance + 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`
+     * are PUSHED by the list: its `updated` / `_updateItems` calls `_applyAppearance`
      * 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)
+     * truth and a runtime appearance/type switch (or an item moved to another list)
      * always tracks its current parent.
      */
     _syncWithList() {
@@ -605,12 +674,12 @@ let NLDDListItem = NLDDListItem_1 = class NLDDListItem extends withTranslations(
             }
             return;
         }
-        this._applyVariant(list.variant);
+        this._applyAppearance(list.appearance);
         this._applyParentType(list.type);
     }
-    _applyVariant(variant) {
-        this._isBoxed = variant.startsWith('box');
-        this._relayToChildren(item => item._applyVariant(variant));
+    _applyAppearance(appearance) {
+        this._isBoxed = appearance.startsWith('box');
+        this._relayToChildren(item => item._applyAppearance(appearance));
         this.classList.toggle('is-boxed', this._isBoxed);
     }
     _applyParentType(type) {
@@ -750,7 +819,7 @@ let NLDDListItem = NLDDListItem_1 = class NLDDListItem extends withTranslations(
             // A start past the last end: authoring error, fall back to full width.
             if (import.meta.env?.DEV && !this._warnedDegenerateDivider) {
                 this._warnedDegenerateDivider = true;
-                console.warn('nldd-list-item: divider-start ligt voorbij de laatste divider-end; de divider valt terug op de volle contentbreedte.');
+                console.warn('<nldd-list-item>: divider-start lies past the last divider-end, so the divider falls back to the full content width.');
             }
             this.style.removeProperty('--_divider-inset-start');
             this.style.removeProperty('--_divider-inset-end');
@@ -783,7 +852,7 @@ let NLDDListItem = NLDDListItem_1 = class NLDDListItem extends withTranslations(
             // reach them. Relay what we were given, and they relay it downwards.
             rows.forEach(row => {
                 const item = row;
-                item._applyVariant?.(this._isBoxed ? 'box-tinted' : 'simple');
+                item._applyAppearance?.(this._isBoxed ? 'box-tinted' : 'simple');
                 item._applyParentType?.(this._parentType);
             });
         }
@@ -998,11 +1067,14 @@ __decorate([
     property({ reflect: true, converter: reflectNonDefault('md') })
 ], NLDDListItem.prototype, "size", void 0);
 __decorate([
-    property({ type: Boolean, reflect: true })
-], NLDDListItem.prototype, "selected", void 0);
+    property({ reflect: true })
+], NLDDListItem.prototype, "href", void 0);
 __decorate([
-    property({ type: Boolean, reflect: true })
-], NLDDListItem.prototype, "current", void 0);
+    property({ reflect: true })
+], NLDDListItem.prototype, "target", void 0);
+__decorate([
+    property({ reflect: true })
+], NLDDListItem.prototype, "rel", void 0);
 __decorate([
     property({ type: Boolean, reflect: true })
 ], NLDDListItem.prototype, "button", void 0);
@@ -1014,25 +1086,22 @@ __decorate([
 ], NLDDListItem.prototype, "radio", void 0);
 __decorate([
     property({ type: Boolean, reflect: true })
-], NLDDListItem.prototype, "checked", void 0);
+], NLDDListItem.prototype, "reorderable", void 0);
 __decorate([
     property({ type: Boolean, reflect: true })
-], NLDDListItem.prototype, "disabled", void 0);
+], NLDDListItem.prototype, "selected", void 0);
 __decorate([
     property({ type: Boolean, reflect: true })
-], NLDDListItem.prototype, "expanded", void 0);
-__decorate([
-    property({ reflect: true })
-], NLDDListItem.prototype, "href", void 0);
+], NLDDListItem.prototype, "checked", void 0);
 __decorate([
-    property({ reflect: true })
-], NLDDListItem.prototype, "target", void 0);
+    property({ type: Boolean, reflect: true })
+], NLDDListItem.prototype, "expanded", void 0);
 __decorate([
-    property({ reflect: true })
-], NLDDListItem.prototype, "rel", void 0);
+    property({ type: Boolean, reflect: true })
+], NLDDListItem.prototype, "current", void 0);
 __decorate([
     property({ type: Boolean, reflect: true })
-], NLDDListItem.prototype, "reorderable", void 0);
+], NLDDListItem.prototype, "disabled", void 0);
 __decorate([
     state()
 ], NLDDListItem.prototype, "_showChildren", void 0);