@nldd/design-system 0.8.82 → 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/status-and-feedback/badge/badge.d.ts

@@ -15,7 +15,8 @@
  *
  * @element nldd-badge
  * @attr {string} size - Size: 'sm' | 'md' (default: 'md')
- * @attr {string} color - Semantic ('critical' | 'accent' | 'neutral' | 'warning' | 'success') or a Rijkshuisstijl color ('lintblauw' | 'hemelblauw' | 'oranje' | …). Default: 'critical'
+ * @attr {string} color - Semantic ('critical' | 'accent' | 'neutral' | 'warning' | 'success'), a Rijkshuisstijl color ('lintblauw' | 'hemelblauw' | 'oranje' | …), or 'inherit' to fill in the content color around it: the `--context-content-color` channel a list item, table row or menu sets, falling back to `currentColor`. Default: 'critical'
+ * @attr {string} custom-color - A color of its own, as any CSS color value ('#a90061', 'oklch(0.6 0.2 20)', 'var(--brand-cable-blue)'). For a color the design system cannot know: the jacket of a cable, a color someone picked. It wins over `color`. Whatever it paints, the text and icon on top become white or black, whichever contrasts. The text on it is black or white, picked on the relative luminance of the fill, so it clears 4.5:1 whatever color you hand it.
  * @attr {boolean} pulse - Grows a ring out of the badge and fades it, for something happening right now (a live connection, an outage). Respects `prefers-reduced-motion`.
  * @attr {string} text - Text (takes precedence over number)
  * @attr {number} number - Numeric value. Shortened when it is over max
@@ -26,7 +27,7 @@
  */
 import { LitElement } from 'lit';
 import './../../content/icon/icon.js';
-type Color = 'critical' | 'accent' | 'neutral' | 'warning' | 'success' | 'lintblauw' | 'donkerblauw' | 'hemelblauw' | 'lichtblauw' | 'paars' | 'violet' | 'robijnrood' | 'roze' | 'rood' | 'oranje' | 'donkergeel' | 'geel' | 'donkerbruin' | 'bruin' | 'donkergroen' | 'groen' | 'mosgroen' | 'mintgroen';
+type Color = 'critical' | 'accent' | 'neutral' | 'warning' | 'success' | 'lintblauw' | 'donkerblauw' | 'hemelblauw' | 'lichtblauw' | 'paars' | 'violet' | 'robijnrood' | 'roze' | 'rood' | 'oranje' | 'donkergeel' | 'geel' | 'donkerbruin' | 'bruin' | 'donkergroen' | 'groen' | 'mosgroen' | 'mintgroen' | 'inherit';
 type Size = 'sm' | 'md';
 declare const NLDDBadge_base: (abstract new (...args: any[]) => LitElement & {
     translations: Partial<{
@@ -38,6 +39,10 @@ export declare class NLDDBadge extends NLDDBadge_base {
     static styles: import("lit").CSSResult;
     size: Size;
     color: Color;
+    /** Handed to the styles as a custom property rather than read from the
+     *  attribute in CSS: `attr()` with a type is not available everywhere yet,
+     *  and this keeps one code path. */
+    customColor: string;
     pulse: boolean;
     text: string;
     number: number | undefined;
@@ -45,6 +50,7 @@ export declare class NLDDBadge extends NLDDBadge_base {
     icon: string;
     accessibleLabel: string;
     decorative: boolean;
+    updated(changed: Map<string, unknown>): void;
     get _hasText(): boolean;
     get _isDot(): boolean;
     get _isIconOnly(): boolean;

package/dist/components/status-and-feedback/badge/badge.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"badge.d.ts","sourceRoot":"","sources":["../../../../src/components/status-and-feedback/badge/badge.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AAEH,OAAO,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AAOjC,OAAO,8BAA8B,CAAC;AAEtC,KAAK,KAAK,GACP,UAAU,GAAG,QAAQ,GAAG,SAAS,GAAG,SAAS,GAAG,SAAS,GACzD,WAAW,GAAG,aAAa,GAAG,YAAY,GAAG,YAAY,GACzD,OAAO,GAAG,QAAQ,GAClB,YAAY,GAAG,MAAM,GAAG,MAAM,GAAG,QAAQ,GACzC,YAAY,GAAG,MAAM,GACrB,aAAa,GAAG,OAAO,GACvB,aAAa,GAAG,OAAO,GAAG,UAAU,GAAG,WAAW,CAAC;AACtD,KAAK,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;;;;;;;AAExB,qBACa,SAAU,SAAQ,cAAmD;IACjF,OAAgB,MAAM,0BAAe;IAGrC,IAAI,EAAE,IAAI,CAAQ;IAGlB,KAAK,EAAE,KAAK,CAAc;IAG1B,KAAK,UAAS;IAGd,IAAI,SAAM;IAGV,MAAM,EAAE,MAAM,GAAG,SAAS,CAAa;IAGvC,GAAG,SAAM;IAGT,IAAI,SAAM;IAGV,eAAe,SAAM;IAGrB,UAAU,UAAS;IAEnB,IAAI,QAAQ,IAAI,OAAO,CAEtB;IAED,IAAI,MAAM,IAAI,OAAO,CAEpB;IAED,IAAI,WAAW,IAAI,OAAO,CAEzB;IAED,IAAI,aAAa,IAAI,MAAM,CAM1B;IAED,IAAI,UAAU,IAAI,MAAM,CAIvB;IAEQ,MAAM;CAGf;AAED,OAAO,CAAC,MAAM,CAAC;IACd,UAAU,qBAAqB;QAC9B,YAAY,EAAE,SAAS,CAAC;KACxB;CACD"}
+{"version":3,"file":"badge.d.ts","sourceRoot":"","sources":["../../../../src/components/status-and-feedback/badge/badge.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BG;AAEH,OAAO,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AAOjC,OAAO,8BAA8B,CAAC;AAEtC,KAAK,KAAK,GACP,UAAU,GAAG,QAAQ,GAAG,SAAS,GAAG,SAAS,GAAG,SAAS,GACzD,WAAW,GAAG,aAAa,GAAG,YAAY,GAAG,YAAY,GACzD,OAAO,GAAG,QAAQ,GAClB,YAAY,GAAG,MAAM,GAAG,MAAM,GAAG,QAAQ,GACzC,YAAY,GAAG,MAAM,GACrB,aAAa,GAAG,OAAO,GACvB,aAAa,GAAG,OAAO,GAAG,UAAU,GAAG,WAAW,GAClD,SAAS,CAAC;AACb,KAAK,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;;;;;;;AAExB,qBACa,SAAU,SAAQ,cAAmD;IACjF,OAAgB,MAAM,0BAAe;IAGrC,IAAI,EAAE,IAAI,CAAQ;IAGlB,KAAK,EAAE,KAAK,CAAc;IAE1B;;wCAEoC;IAEpC,WAAW,SAAM;IAGjB,KAAK,UAAS;IAGd,IAAI,SAAM;IAGV,MAAM,EAAE,MAAM,GAAG,SAAS,CAAa;IAGvC,GAAG,SAAM;IAGT,IAAI,SAAM;IAGV,eAAe,SAAM;IAGrB,UAAU,UAAS;IAEV,OAAO,CAAC,OAAO,EAAE,GAAG,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,IAAI;IAMrD,IAAI,QAAQ,IAAI,OAAO,CAEtB;IAED,IAAI,MAAM,IAAI,OAAO,CAEpB;IAED,IAAI,WAAW,IAAI,OAAO,CAEzB;IAED,IAAI,aAAa,IAAI,MAAM,CAM1B;IAED,IAAI,UAAU,IAAI,MAAM,CAIvB;IAEQ,MAAM;CAGf;AAED,OAAO,CAAC,MAAM,CAAC;IACd,UAAU,qBAAqB;QAC9B,YAAY,EAAE,SAAS,CAAC;KACxB;CACD"}

package/dist/components/status-and-feedback/badge/badge.js

@@ -15,7 +15,8 @@
  *
  * @element nldd-badge
  * @attr {string} size - Size: 'sm' | 'md' (default: 'md')
- * @attr {string} color - Semantic ('critical' | 'accent' | 'neutral' | 'warning' | 'success') or a Rijkshuisstijl color ('lintblauw' | 'hemelblauw' | 'oranje' | …). Default: 'critical'
+ * @attr {string} color - Semantic ('critical' | 'accent' | 'neutral' | 'warning' | 'success'), a Rijkshuisstijl color ('lintblauw' | 'hemelblauw' | 'oranje' | …), or 'inherit' to fill in the content color around it: the `--context-content-color` channel a list item, table row or menu sets, falling back to `currentColor`. Default: 'critical'
+ * @attr {string} custom-color - A color of its own, as any CSS color value ('#a90061', 'oklch(0.6 0.2 20)', 'var(--brand-cable-blue)'). For a color the design system cannot know: the jacket of a cable, a color someone picked. It wins over `color`. Whatever it paints, the text and icon on top become white or black, whichever contrasts. The text on it is black or white, picked on the relative luminance of the fill, so it clears 4.5:1 whatever color you hand it.
  * @attr {boolean} pulse - Grows a ring out of the badge and fades it, for something happening right now (a live connection, an outage). Respects `prefers-reduced-motion`.
  * @attr {string} text - Text (takes precedence over number)
  * @attr {number} number - Numeric value. Shortened when it is over max
@@ -43,6 +44,10 @@ let NLDDBadge = class NLDDBadge extends withTranslations(LitElement, nlddBadgeTr
         super(...arguments);
         this.size = 'md';
         this.color = 'critical';
+        /** Handed to the styles as a custom property rather than read from the
+         *  attribute in CSS: `attr()` with a type is not available everywhere yet,
+         *  and this keeps one code path. */
+        this.customColor = '';
         this.pulse = false;
         this.text = '';
         this.number = undefined;
@@ -51,6 +56,14 @@ let NLDDBadge = class NLDDBadge extends withTranslations(LitElement, nlddBadgeTr
         this.accessibleLabel = '';
         this.decorative = false;
     }
+    updated(changed) {
+        if (!changed.has('customColor'))
+            return;
+        if (this.customColor)
+            this.style.setProperty('--_custom-color', this.customColor);
+        else
+            this.style.removeProperty('--_custom-color');
+    }
     get _hasText() {
         return !!this.text || typeof this.number === 'number';
     }
@@ -86,6 +99,9 @@ __decorate([
 __decorate([
     property({ reflect: true, converter: reflectNonDefault('critical') })
 ], NLDDBadge.prototype, "color", void 0);
+__decorate([
+    property({ reflect: true, attribute: 'custom-color', converter: reflectNonDefault('') })
+], NLDDBadge.prototype, "customColor", void 0);
 __decorate([
     property({ type: Boolean, reflect: true })
 ], NLDDBadge.prototype, "pulse", void 0);

package/dist/components/status-and-feedback/badge/badge.js.map

@@ -1 +1 @@
-{"version":3,"file":"badge.js","sourceRoot":"","sources":["../../../../src/components/status-and-feedback/badge/badge.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"badge.js","sourceRoot":"","sources":["../../../../src/components/status-and-feedback/badge/badge.ts"],"names":[],"mappings":"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"}

package/dist/components/status-and-feedback/badge/badge.styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"badge.styles.d.ts","sourceRoot":"","sources":["../../../../src/components/status-and-feedback/badge/badge.styles.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,WAAW,yBA4SvB,CAAC"}
+{"version":3,"file":"badge.styles.d.ts","sourceRoot":"","sources":["../../../../src/components/status-and-feedback/badge/badge.styles.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,WAAW,yBAyUvB,CAAC"}