@nldd/design-system 0.8.80 → 0.8.83

package/dist/components/lists-and-tables/{list-item-action/list-item-action.js → list-item-segment/list-item-segment.js}

@@ -8,60 +8,60 @@ import { LitElement } from 'lit';
 import { customElement, property, query, state } from 'lit/decorators.js';
 import { reflectNonDefault } from '../../../utilities/reflect-non-default.js';
 import { isPointerMode } from '../../../utilities/input-modality.js';
-import { listItemActionStyles } from './list-item-action.styles.js';
-import { template } from './list-item-action.template.js';
+import { listItemSegmentStyles } from './list-item-segment.styles.js';
+import { template } from './list-item-segment.template.js';
 /**
- * A segmented action inside an `nldd-list-item`: it groups a run of cells
+ * A segment inside an `nldd-list-item`: it groups a run of cells
  * and makes just that run clickable. Use it when a row needs more than one
- * action — a tree row whose chevron expands while the label toggles a checkbox,
+ * segment — a tree row whose chevron expands while the label toggles a checkbox,
  * or a row that navigates with a separate button beside it.
  *
  * Put it in the row where its cells would go: the item has one flat slot, and a
- * segmented action takes the place of the cells it covers. Where the divider
+ * segment takes the place of the cells it covers. Where the divider
  * starts or stops is marked on the cells themselves (`divider-start` /
- * `divider-end`), not by the slot an action sits in.
+ * `divider-end`), not by the slot a segment sits in.
  *
  * A row is EITHER row-level interactive (`href` / `button` / `checkbox` on the
  * `nldd-list-item`) OR segmented (one or more of these). Both at once nests
  * a control inside a control, which is invalid HTML; the item DEV-warns.
  *
- * Unlike the row-wide action this does not bleed outward: a segmented action sits
+ * Unlike the row-wide action this does not bleed outward: a segment sits
  * between siblings, so an outward inset would overlap them. It owns its inline
  * padding and never drops below the row's control size, so an icon-only one still
  * meets the WCAG 2.5.8 target size — do not add spacer cells inside it for room
  * or hit area, that doubles the space.
  *
- * In a `type="listbox"` list the segmented action renders as a plain container (no
+ * In a `type="listbox"` list the segment renders as a plain container (no
  * control, not focusable) and DEV-warns: an `option` may not contain
  * interactive descendants. The cells render unchanged, so nothing shifts.
  *
- * @element nldd-list-item-action
+ * @element nldd-list-item-segment
  *
- * @attr {boolean} button - Renders the segmented action as a `<button>`; ignored when `href` is set
- * @attr {string} href - Renders the segmented action as an `<a>` with this URL; wins over `button` and `checkbox`
+ * @attr {boolean} button - Renders the segment as a `<button>`. Last of the three: `href` and `checkbox` both win over it.
+ * @attr {string} href - Renders the segment as an `<a>` with this URL. Wins over `checkbox` and `button`.
  * @attr {string} target - Link target forwarded to the `<a>`; only applies with `href`
  * @attr {string} rel - Link rel forwarded to the `<a>`; only applies with `href`
- * @attr {boolean} checkbox - Makes the segmented action a `role="checkbox"` control; ignored when `href` is set
- * @attr {boolean} checked - Checked state of a `checkbox` action; it toggles on activation
- * @attr {boolean} expanded - Disclosure state, reflected as `aria-expanded` on the control. Set it on the segmented action that opens something (e.g. a tree row's chevron). Leave it off entirely when the segmented action discloses nothing — an absent attribute emits no aria-expanded.
- * @attr {boolean} disclosure - Marks the segmented action as the row's disclosure control: `aria-expanded` comes from the parent item's `expanded`, so the state lives in one place. A slotted `nldd-icon-cell` rotates a quarter turn while the row is open
- * @attr {boolean} current - Marks the segmented action as the current page (`aria-current="page"`)
- * @attr {boolean} disabled - Disabled state; only applies to button and checkbox segmented actions
- * @attr {'fit-content'|'full'} width - `full` lets the segmented action grow to fill the row (default: 'fit-content')
- * @attr {string} accessible-label - Accessible name for the control. Set it when the segmented action holds only an icon, or when the cell text does not describe the action.
+ * @attr {boolean} checkbox - Makes the segment a `role="checkbox"` control. Wins over `button`, loses to `href`.
+ * @attr {boolean} checked - Checked state of a `checkbox` segment; it toggles on activation
+ * @attr {boolean} expanded - Disclosure state, reflected as `aria-expanded` on the control, and painted: the segment stays lit a step above hover for as long as what it opened is on screen, so a menu reads as hanging off this row rather than floating over the list. Set it on the segment that opens something (a tree row's chevron, a menu). Leave it off entirely when the segment discloses nothing — an absent attribute emits no aria-expanded.
+ * @attr {boolean} disclosure - Marks the segment as the row's disclosure control: `aria-expanded` comes from the parent item's `expanded`, so the state lives in one place. A slotted `nldd-icon-cell` rotates a quarter turn while the row is open
+ * @attr {boolean} current - Marks the segment as the current page (`aria-current="page"`). The row it sits in paints itself as the current row from it, so on a segmented row this is the only place it has to be set.
+ * @attr {boolean} disabled - Switches the segment off: a `button` or `checkbox` segment stops responding and dims, a `href` segment gets `aria-disabled` and its click is blocked (a link cannot be disabled natively). The arrow keys skip a row whose only segment is off.
+ * @attr {'fit-content'|'full'} width - `full` lets the segment grow to fill the row (default: 'fit-content')
+ * @attr {string} accessible-label - Accessible name for the control. Set it when the segment holds only an icon, or when the cell text does not describe the action.
  *
- * @slot - The cells that belong to this action
+ * @slot - The cells that belong to this segment
  *
- * @fires change - On a `checkbox` action after it toggles; detail: { checked: boolean }
+ * @fires change - On a `checkbox` segment after it toggles; detail: { checked: boolean }
  */
-let NLDDListItemAction = class NLDDListItemAction extends LitElement {
+let NLDDListItemSegment = class NLDDListItemSegment extends LitElement {
     constructor() {
         super(...arguments);
         this.button = false;
         this.checkbox = false;
         this.checked = false;
         /**
-         * Marks this action as the row's disclosure control: it takes `aria-expanded`
+         * Marks this segment as the row's disclosure control: it takes `aria-expanded`
          * from the parent item's `expanded` instead of its own. Use it on a tree row's
          * chevron, so the open/closed state is written once — on the row, where it also
          * drives the children group — rather than kept in step in two places.
@@ -77,8 +77,13 @@ let NLDDListItemAction = class NLDDListItemAction extends LitElement {
         /** Set by the parent nldd-list-item, mirroring its list's type. */
         this._parentType = 'list';
         this._handleClick = (e) => {
-            if (this.disabled)
+            // A disabled <button> never gets here, but a link does: there is no such
+            // thing as a disabled <a>, so the segment 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
             // the :focus-visible styling below stays reliable.
             this._control?.focus();
@@ -102,10 +107,28 @@ let NLDDListItemAction = class NLDDListItemAction extends LitElement {
         this._handleFocusOut = () => {
             this._control?.classList.remove('is-pointer-focus');
         };
+        /**
+         * Safari moves focus to the body on mousedown and only puts it on a button
+         * when the mouse comes up, so a row whose paint follows the focus in it
+         * flickers back to its resting state for as long as you hold the button
+         * down. Preventing the default stops that hand-off; we set the focus
+         * ourselves in the pointerdown above, and the click still fires.
+         */
+        this._onMouseDown = (e) => {
+            if (e.button > 0 || this.disabled)
+                return;
+            e.preventDefault();
+        };
         this._onPointerDown = (e) => {
             if (e.button > 0 || this.disabled)
                 return;
             this._control?.classList.add('is-pressed');
+            // Safari does not focus a <button> on click, so a row whose paint follows
+            // the focus in it (see nldd-list-item's current rules) would stay unlit
+            // there while every other browser lights up. Focusing on the press makes
+            // the three browsers agree; the ring stays hidden because this is a
+            // pointer focus, which .is-pointer-focus already marks.
+            this._control?.focus({ preventScroll: true });
         };
         this._clearPressed = () => {
             this._control?.classList.remove('is-pressed');
@@ -117,6 +140,7 @@ let NLDDListItemAction = class NLDDListItemAction extends LitElement {
         this.addEventListener('focusout', this._handleFocusOut);
         this.addEventListener('click', this._handleClick);
         this.addEventListener('pointerdown', this._onPointerDown);
+        this.addEventListener('mousedown', this._onMouseDown);
         this.addEventListener('pointerup', this._clearPressed);
         this.addEventListener('pointercancel', this._clearPressed);
     }
@@ -126,6 +150,7 @@ let NLDDListItemAction = class NLDDListItemAction extends LitElement {
         this.removeEventListener('focusout', this._handleFocusOut);
         this.removeEventListener('click', this._handleClick);
         this.removeEventListener('pointerdown', this._onPointerDown);
+        this.removeEventListener('mousedown', this._onMouseDown);
         this.removeEventListener('pointerup', this._clearPressed);
         this.removeEventListener('pointercancel', this._clearPressed);
     }
@@ -138,10 +163,10 @@ let NLDDListItemAction = class NLDDListItemAction extends LitElement {
     _applyParentType(type) {
         this._parentType = type;
         if (import.meta.env?.DEV && type === 'listbox' && this._wantsControl) {
-            console.warn('nldd-list-item-action: rendered as a plain container because the parent nldd-list is type="listbox". An `option` may not contain interactive descendants — move the action out of the listbox, or drive selection from the option itself.');
+            console.warn('nldd-list-item-segment: rendered as a plain container because the parent nldd-list is type="listbox". An `option` may not contain interactive descendants — move the segment out of the listbox, or drive selection from the option itself.');
         }
     }
-    /** Whether the consumer asked for an interactive action at all. */
+    /** Whether the consumer asked for an interactive segment at all. */
     get _wantsControl() {
         return Boolean(this.href) || this.button || this.checkbox;
     }
@@ -159,7 +184,7 @@ let NLDDListItemAction = class NLDDListItemAction extends LitElement {
         this._control?.focus(options);
     }
     /** The open state has to reach the styles, and it lives in a property (the
-     *  row's, for a disclosure action) that CSS cannot see. A host class is the
+     *  row's, for a disclosure segment) that CSS cannot see. A host class is the
      *  hook — the same mechanism nldd-list already uses for .is-boxed / .is-first. */
     updated() {
         const expanded = this.disclosure ? this._rowExpanded : this.expanded;
@@ -167,62 +192,62 @@ let NLDDListItemAction = class NLDDListItemAction extends LitElement {
     }
     render() {
         if (import.meta.env?.DEV && this.disclosure && this.expanded !== undefined) {
-            console.warn('nldd-list-item-action: `disclosure` takes aria-expanded from the row, so the `expanded` on this action is ignored. Drop one of the two.');
+            console.warn('nldd-list-item-segment: `disclosure` takes aria-expanded from the row, so the `expanded` on this action is ignored. Drop one of the two.');
         }
         return template(this._controlType, this.href, this.target, this.rel, this.checked, this.disclosure ? this._rowExpanded : this.expanded, this.current, this.disabled, this.accessibleLabel, this._tabbable === undefined ? undefined : (this._tabbable ? '0' : '-1'));
     }
 };
-NLDDListItemAction.styles = [listItemActionStyles];
+NLDDListItemSegment.styles = [listItemSegmentStyles];
 __decorate([
     property({ type: Boolean, reflect: true })
-], NLDDListItemAction.prototype, "button", void 0);
+], NLDDListItemSegment.prototype, "button", void 0);
 __decorate([
     property({ reflect: true })
-], NLDDListItemAction.prototype, "href", void 0);
+], NLDDListItemSegment.prototype, "href", void 0);
 __decorate([
     property({ reflect: true })
-], NLDDListItemAction.prototype, "target", void 0);
+], NLDDListItemSegment.prototype, "target", void 0);
 __decorate([
     property({ reflect: true })
-], NLDDListItemAction.prototype, "rel", void 0);
+], NLDDListItemSegment.prototype, "rel", void 0);
 __decorate([
     property({ type: Boolean, reflect: true })
-], NLDDListItemAction.prototype, "checkbox", void 0);
+], NLDDListItemSegment.prototype, "checkbox", void 0);
 __decorate([
     property({ type: Boolean, reflect: true })
-], NLDDListItemAction.prototype, "checked", void 0);
+], NLDDListItemSegment.prototype, "checked", void 0);
 __decorate([
     property({ type: Boolean, reflect: true })
-], NLDDListItemAction.prototype, "expanded", void 0);
+], NLDDListItemSegment.prototype, "expanded", void 0);
 __decorate([
     property({ type: Boolean, reflect: true })
-], NLDDListItemAction.prototype, "disclosure", void 0);
+], NLDDListItemSegment.prototype, "disclosure", void 0);
 __decorate([
     property({ type: Boolean, reflect: true })
-], NLDDListItemAction.prototype, "current", void 0);
+], NLDDListItemSegment.prototype, "current", void 0);
 __decorate([
     property({ type: Boolean, reflect: true })
-], NLDDListItemAction.prototype, "disabled", void 0);
+], NLDDListItemSegment.prototype, "disabled", void 0);
 __decorate([
     property({ reflect: true, converter: reflectNonDefault('fit-content') })
-], NLDDListItemAction.prototype, "width", void 0);
+], NLDDListItemSegment.prototype, "width", void 0);
 __decorate([
     property({ attribute: 'accessible-label' })
-], NLDDListItemAction.prototype, "accessibleLabel", void 0);
+], NLDDListItemSegment.prototype, "accessibleLabel", void 0);
 __decorate([
     state()
-], NLDDListItemAction.prototype, "_parentType", void 0);
+], NLDDListItemSegment.prototype, "_parentType", void 0);
 __decorate([
     state()
-], NLDDListItemAction.prototype, "_tabbable", void 0);
+], NLDDListItemSegment.prototype, "_tabbable", void 0);
 __decorate([
     state()
-], NLDDListItemAction.prototype, "_rowExpanded", void 0);
-__decorate([
-    query('.list-item-action')
-], NLDDListItemAction.prototype, "_control", void 0);
-NLDDListItemAction = __decorate([
-    customElement('nldd-list-item-action')
-], NLDDListItemAction);
-export { NLDDListItemAction };
-//# sourceMappingURL=list-item-action.js.map
+], NLDDListItemSegment.prototype, "_rowExpanded", void 0);
+__decorate([
+    query('.list-item-segment')
+], NLDDListItemSegment.prototype, "_control", void 0);
+NLDDListItemSegment = __decorate([
+    customElement('nldd-list-item-segment')
+], NLDDListItemSegment);
+export { NLDDListItemSegment };
+//# sourceMappingURL=list-item-segment.js.map

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

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

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

@@ -0,0 +1,2 @@
+export declare const listItemSegmentStyles: import("lit").CSSResult;
+//# sourceMappingURL=list-item-segment.styles.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"list-item-segment.styles.d.ts","sourceRoot":"","sources":["../../../../src/components/lists-and-tables/list-item-segment/list-item-segment.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,qBAAqB,yBAgLjC,CAAC"}

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

@@ -0,0 +1,179 @@
+import { css } from 'lit';
+export const listItemSegmentStyles = css `
+	:host {
+		box-sizing: border-box;
+	}
+
+	:host {
+		--_background-color: transparent;
+		--_min-size: var(--context-list-item-size, var(--semantics-controls-md-min-size));
+		--_expanded-rotation: 90deg;
+		--_fill-z-index: -1;
+
+		display: flex;
+		position: relative;
+		/* Its own stacking context, so the fill below (z-index -1) stays behind
+		   this segment's content but in front of the row's fill. Without it the
+		   two -1 layers land in the same context — the row's while it is lit —
+		   and the segment's disappears underneath. */
+		isolation: isolate;
+		align-items: stretch;
+		/* The row's areas center their children; this must span instead, so its hit
+		   area and fill reach the row's top and bottom edges. */
+		align-self: stretch;
+		flex-grow: 0;
+		flex-shrink: 1;
+		/* Square floor from the row's control size, so an icon-only action is still
+		   a touch target. On the host, not the control: the host is the flex item,
+		   so a floor on the control would be measured against a host that had
+		   already shrunk to zero. */
+		min-width: var(--_min-size);
+		min-height: var(--_min-size);
+		-webkit-tap-highlight-color: transparent;
+	}
+
+	:host([hidden]) {
+		display: none;
+	}
+
+	/* A growing action needs no floor and needs min-width: 0, so its text can
+	   truncate instead of pushing its siblings out. */
+	:host([width="full"]) {
+		flex-grow: 1;
+		min-width: 0;
+	}
+
+	:host([width="full"]) .list-item-segment {
+		justify-content: flex-start;
+	}
+
+	/* The cell rotates, not the icon — ::slotted reaches a direct child only, and
+	   rotating the cell turns the glyph in place. */
+	:host([disclosure]) ::slotted(nldd-icon-cell) {
+		rotate: 0deg;
+		transition: rotate var(--primitives-transition-duration-fast) var(--primitives-transition-easing-default);
+	}
+
+	:host([disclosure].is-expanded) ::slotted(nldd-icon-cell) {
+		rotate: var(--_expanded-rotation);
+	}
+
+	@media (prefers-reduced-motion: reduce) {
+		:host([disclosure]) ::slotted(nldd-icon-cell) {
+			transition: none;
+		}
+	}
+
+	/* The control owns its inline padding, fixed at the indicator inset. Do not
+	   add spacer cells for room or hit area: that doubles the space. */
+	.list-item-segment {
+		box-sizing: border-box;
+		display: flex;
+		position: relative;
+		margin: 0;
+		outline: none;
+		border: none;
+		background: none;
+		width: 100%;
+		min-width: 0;
+		padding: 0;
+		padding-inline: var(--components-list-item-indicator-inline-inset);
+		flex-direction: row;
+		align-items: center;
+		justify-content: center;
+		color: inherit;
+		text-align: start;
+		text-decoration: none;
+	}
+
+	a.list-item-segment {
+		cursor: var(--semantics-controls-link-cursor);
+	}
+
+	/* There is no disabled attribute for an anchor, so the segment blocks the
+	   click itself and aria-disabled carries the state. */
+	button.list-item-segment:disabled,
+	:host([disabled]) a.list-item-segment {
+		cursor: default;
+		opacity: var(--primitives-opacity-disabled);
+	}
+
+	.list-item-segment::before {
+		content: '';
+		display: block;
+		position: absolute;
+		z-index: var(--_fill-z-index);
+		inset-block: 0;
+		inset-inline: 0;
+		border-radius: var(--components-list-item-indicator-corner-radius);
+		background-color: var(--_background-color);
+		pointer-events: none;
+	}
+
+	/* The row hands down which fill a hovered segment takes. Unset on an ordinary
+	   row, where the fallback answers. */
+	@media (hover: hover) {
+		:host(:not([disabled])) a.list-item-segment:hover,
+		button.list-item-segment:not(:disabled):hover {
+			--_background-color: var(--context-list-item-hovered-background-color, var(--components-list-item-is-hovered-background-color));
+			--context-content-color: var(--context-list-item-hovered-content-color, var(--components-list-item-is-hovered-content-color));
+			--context-content-secondary-color: var(--context-list-item-hovered-content-color, var(--components-list-item-is-hovered-content-color));
+		}
+	}
+
+	/* Press feedback — works on touch where :hover doesn't. JS-driven so a touch
+	   that turns into a scroll clears it (pointercancel) instead of flashing. */
+	/* The element selectors match the weight of the hover rule above: a pointer
+	   that presses is hovering as well, and the press has to win. */
+	:host(:not([disabled])) a.list-item-segment.is-pressed,
+	button.list-item-segment:not(:disabled).is-pressed,
+	:host(:not([disabled])) .list-item-segment.is-pressed {
+		--_background-color: var(--context-list-item-active-background-color, var(--components-list-item-is-active-background-color));
+		--context-content-color: var(--context-list-item-active-content-color, var(--context-list-item-hovered-content-color, var(--components-list-item-is-active-content-color)));
+		--context-content-secondary-color: var(--context-list-item-active-content-color, var(--context-list-item-hovered-content-color, var(--components-list-item-is-active-content-color)));
+	}
+
+	/* After the hover rule on purpose: hovering back over the segment must not
+	   dim it while what it opened is still on screen. */
+	:host([expanded]) .list-item-segment {
+		--_background-color: var(--components-list-item-is-expanded-background-color);
+		--context-content-color: var(--components-list-item-is-expanded-content-color);
+		--context-content-secondary-color: var(--components-list-item-is-expanded-content-color);
+	}
+
+	@media (hover: hover) {
+		:host([expanded]:not([disabled])) a.list-item-segment:hover,
+		:host([expanded]) button.list-item-segment:not(:disabled):hover {
+			--_background-color: var(--components-list-item-is-expanded-is-hovered-background-color);
+			--context-content-color: var(--components-list-item-is-expanded-content-color);
+			--context-content-secondary-color: var(--components-list-item-is-expanded-content-color);
+		}
+	}
+
+	:host([expanded]:not([disabled])) a.list-item-segment.is-pressed,
+	:host([expanded]) button.list-item-segment:not(:disabled).is-pressed,
+	:host([expanded]:not([disabled])) .list-item-segment.is-pressed {
+		--_background-color: var(--components-list-item-is-expanded-is-active-background-color);
+		--context-content-color: var(--components-list-item-is-expanded-content-color);
+		--context-content-secondary-color: var(--components-list-item-is-expanded-content-color);
+	}
+
+	:host([checked]) .list-item-segment {
+		--_background-color: var(--components-list-item-is-selected-background-color);
+		--context-content-color: var(--components-list-item-is-selected-content-color);
+		--context-content-secondary-color: var(--components-list-item-is-selected-content-color);
+	}
+
+	.list-item-segment:focus-visible:not(.is-pointer-focus)::after {
+		content: '';
+		display: block;
+		position: absolute;
+		inset: 0;
+		border-radius: var(--components-list-item-indicator-corner-radius);
+		outline: var(--semantics-focus-ring-outline);
+		outline-offset: var(--semantics-focus-ring-outline-offset);
+		box-shadow: var(--semantics-focus-ring-box-shadow);
+		pointer-events: none;
+	}
+`;
+//# sourceMappingURL=list-item-segment.styles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"list-item-segment.styles.js","sourceRoot":"","sources":["../../../../src/components/lists-and-tables/list-item-segment/list-item-segment.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,qBAAqB,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAgLvC,CAAC"}

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

@@ -0,0 +1,3 @@
+export type ListItemSegmentControl = 'link' | 'button' | 'checkbox' | 'plain';
+export declare function template(control: ListItemSegmentControl, href: string | undefined, target: string | undefined, rel: string | undefined, checked: boolean, expanded: boolean | undefined, current: boolean, disabled: boolean, accessibleLabel: string, actionTabindex?: string): import("lit-html").TemplateResult<1>;
+//# sourceMappingURL=list-item-segment.template.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"list-item-segment.template.d.ts","sourceRoot":"","sources":["../../../../src/components/lists-and-tables/list-item-segment/list-item-segment.template.ts"],"names":[],"mappings":"AAEA,MAAM,MAAM,sBAAsB,GAAG,MAAM,GAAG,QAAQ,GAAG,UAAU,GAAG,OAAO,CAAC;AAE9E,wBAAgB,QAAQ,CACvB,OAAO,EAAE,sBAAsB,EAC/B,IAAI,EAAE,MAAM,GAAG,SAAS,EACxB,MAAM,EAAE,MAAM,GAAG,SAAS,EAC1B,GAAG,EAAE,MAAM,GAAG,SAAS,EACvB,OAAO,EAAE,OAAO,EAChB,QAAQ,EAAE,OAAO,GAAG,SAAS,EAC7B,OAAO,EAAE,OAAO,EAChB,QAAQ,EAAE,OAAO,EACjB,eAAe,EAAE,MAAM,EACvB,cAAc,CAAC,EAAE,MAAM,wCAqCvB"}

package/dist/components/lists-and-tables/{list-item-action/list-item-action.template.js → list-item-segment/list-item-segment.template.js}

@@ -5,10 +5,11 @@ export function template(control, href, target, rel, checked, expanded, current,
     const ariaCurrent = current ? 'page' : nothing;
     const label = accessibleLabel || nothing;
     if (control === 'link') {
-        return html `<a class="list-item-action"
+        return html `<a class="list-item-segment"
 			href=${href ?? nothing}
 			target=${target ?? nothing}
 			rel=${rel ?? nothing}
+			aria-disabled=${disabled ? 'true' : nothing}
 			aria-expanded=${ariaExpanded}
 			aria-current=${ariaCurrent}
 			aria-label=${label}
@@ -16,7 +17,7 @@ export function template(control, href, target, rel, checked, expanded, current,
 		>${content}</a>`;
     }
     if (control === 'checkbox' || control === 'button') {
-        return html `<button class="list-item-action"
+        return html `<button class="list-item-segment"
 			type="button"
 			role=${control === 'checkbox' ? 'checkbox' : nothing}
 			aria-checked=${control === 'checkbox' ? String(checked) : nothing}
@@ -30,6 +31,6 @@ export function template(control, href, target, rel, checked, expanded, current,
     // Plain: no control at all. Used in a listbox parent, where an `option` may
     // not contain interactive descendants — the cells still render, so the row
     // looks unchanged, it just isn't operable.
-    return html `<div class="list-item-action">${content}</div>`;
+    return html `<div class="list-item-segment">${content}</div>`;
 }
-//# sourceMappingURL=list-item-action.template.js.map
+//# sourceMappingURL=list-item-segment.template.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"list-item-segment.template.js","sourceRoot":"","sources":["../../../../src/components/lists-and-tables/list-item-segment/list-item-segment.template.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,OAAO,EAAE,MAAM,KAAK,CAAC;AAIpC,MAAM,UAAU,QAAQ,CACvB,OAA+B,EAC/B,IAAwB,EACxB,MAA0B,EAC1B,GAAuB,EACvB,OAAgB,EAChB,QAA6B,EAC7B,OAAgB,EAChB,QAAiB,EACjB,eAAuB,EACvB,cAAuB;IAEvB,MAAM,OAAO,GAAG,IAAI,CAAA,eAAe,CAAC;IACpC,MAAM,YAAY,GAAG,QAAQ,KAAK,SAAS,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,MAAM,CAAC,QAAQ,CAAC,CAAC;IACzE,MAAM,WAAW,GAAG,OAAO,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO,CAAC;IAC/C,MAAM,KAAK,GAAG,eAAe,IAAI,OAAO,CAAC;IAEzC,IAAI,OAAO,KAAK,MAAM,EAAE,CAAC;QACxB,OAAO,IAAI,CAAA;UACH,IAAI,IAAI,OAAO;YACb,MAAM,IAAI,OAAO;SACpB,GAAG,IAAI,OAAO;mBACJ,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO;mBAC3B,YAAY;kBACb,WAAW;gBACb,KAAK;cACP,cAAc,IAAI,OAAO;KAClC,OAAO,MAAM,CAAC;IAClB,CAAC;IAED,IAAI,OAAO,KAAK,UAAU,IAAI,OAAO,KAAK,QAAQ,EAAE,CAAC;QACpD,OAAO,IAAI,CAAA;;UAEH,OAAO,KAAK,UAAU,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,OAAO;kBACrC,OAAO,KAAK,UAAU,CAAC,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,OAAO;mBACjD,YAAY;kBACb,WAAW;gBACb,KAAK;eACN,QAAQ;cACT,cAAc,IAAI,OAAO;KAClC,OAAO,WAAW,CAAC;IACvB,CAAC;IAED,4EAA4E;IAC5E,2EAA2E;IAC3E,2CAA2C;IAC3C,OAAO,IAAI,CAAA,kCAAkC,OAAO,QAAQ,CAAC;AAC9D,CAAC"}

package/dist/components/reflect-non-default-OLaK60rT.js

@@ -0,0 +1,37 @@
+//#region src/utilities/reflect-non-default.ts
+/**
+* A Lit attribute converter for a reflected property whose DEFAULT value should
+* not appear in the DOM. Works for an enum (a string union) and for a number.
+*
+* It reflects any non-default value to the attribute (so `:host([prop="x"])`
+* styling and framework property binding keep working), but maps the default to
+* *no* attribute (`toAttribute` returns null), so the DOM isn't polluted with a
+* redundant `prop="<default>"` on every instance.
+*
+* Pair it with `reflect: true`. The component's default styling must then live
+* on the bare `:host` (not `:host([prop="<default>"])`), since a default-valued
+* element carries no attribute to select on.
+*
+* Known edge: if markup writes the default *explicitly* (e.g. `<nldd-button
+* size="md">`), `fromAttribute` resolves the property to the value it already
+* holds, so Lit's default `hasChanged` sees no change, schedules no update, and
+* `toAttribute` never runs to strip the attribute — so that one authored default
+* attribute stays in the DOM. Visual behavior is unaffected (styling keys off the
+* bare `:host`); it only matters to code matching `[prop="<default>"]`, which
+* should read the property instead. Not worth a fragile `hasChanged` workaround.
+*
+* @example
+* ```ts
+* @property({ reflect: true, converter: reflectNonDefault<Size>('md') })
+* size: Size = 'md';
+* ```
+*/
+function reflectNonDefault(defaultValue) {
+	const parse = typeof defaultValue === "number" ? (value) => Number(value) : (value) => value;
+	return {
+		fromAttribute: (value) => value === null ? defaultValue : parse(value),
+		toAttribute: (value) => value === defaultValue ? null : String(value)
+	};
+}
+//#endregion
+export { reflectNonDefault as t };

package/dist/components/rolldown-runtime-D7D4PA-g.js

@@ -0,0 +1,13 @@
+//#region \0rolldown/runtime.js
+var __defProp = Object.defineProperty;
+var __exportAll = (all, no_symbols) => {
+	let target = {};
+	for (var name in all) __defProp(target, name, {
+		get: all[name],
+		enumerable: true
+	});
+	if (!no_symbols) __defProp(target, Symbol.toStringTag, { value: "Module" });
+	return target;
+};
+//#endregion
+export { __exportAll as t };

package/dist/components/shadow-resets-aG-rgyNQ.js

@@ -0,0 +1,61 @@
+import { css } from "lit";
+//#region src/assets/styles/shadow-resets.ts
+/**
+* Reset for slotted (light-DOM) content in shadow-DOM components.
+*
+* Slotted nodes live in the consumer's document, so document-level CSS —
+* Tailwind Preflight, Bootstrap Reboot, a bespoke host reset — beats a
+* component's `::slotted()` rules for any *normal* declaration, regardless of
+* specificity. That bleeds host styling into our components and breaks visual
+* consistency across consumers.
+*
+* `all: revert !important` closes that gap: an *important* declaration from the
+* shadow tree beats document declarations (even important ones), and `revert`
+* rolls each property back to its user-agent default — a stable, host-independent
+* baseline. Properties a host might weaponise (`display: none`,
+* `pointer-events: none`, stray margins/decoration) fall back to UA defaults.
+*
+* Usage — place at the START of a `::slotted()` rule, then declare the
+* properties the component owns, each `!important` so it wins over the revert:
+*
+* ```ts
+* css`
+*   ::slotted(:not([slot])) {
+*     ${slottedReset}
+*     ${inheritedTextReset}
+*     color: var(--semantics-content-color) !important;
+*     font: var(--_font) !important;
+*   }
+* `
+* ```
+*
+* NOTE: `revert` does NOT isolate *inherited* properties — they still flow in
+* from the host via the chain `body → host → :host → slot`. For slotted text,
+* add {@link inheritedTextReset} to seal the inherited typography that `font`
+* does not cover.
+*/
+var slottedReset = css`
+	all: revert !important;
+`;
+/**
+* Inherited typography that the `font` shorthand does NOT cover and that a host
+* can otherwise leak into our text — directly (`a { text-decoration }`) or via
+* inheritance (`body { letter-spacing }`). Used in two places:
+*
+* - inside `::slotted(…)` to lock the consumer's slotted text (pair with
+*   {@link slottedReset}), and
+* - inside `:host`, as a guard block right after the `--_*` vars, to lock the
+*   component's OWN shadow text against host inheritance (no `all: revert` there).
+*
+* `text-align` is locked to `start` (logical, RTL-safe) — a host cannot center or
+* justify our text. A component that needs a different alignment sets it
+* explicitly on its own element, which overrides this inherited default.
+*/
+var inheritedTextReset = css`
+	text-align: start !important;
+	letter-spacing: normal !important;
+	word-spacing: normal !important;
+	text-transform: none !important;
+`;
+//#endregion
+export { slottedReset as n, inheritedTextReset as t };