@nldd/design-system 0.8.49 → 0.8.51

package/dist/components/inputs/toggle-button/toggle-button.template.js

@@ -1,18 +1,36 @@
 import { html, nothing } from 'lit';
 import '../../content/tooltip/tooltip.js';
 export function toggleButtonTemplate(component) {
-    const variant = component._effectiveVariant;
-    const showText = (variant === 'text' || variant === 'icon-and-text') && !!component.text;
-    const label = component.accessibleLabel || nothing;
-    const tooltipText = variant === 'icon' ? (component.accessibleLabel || component.text) : '';
-    // Always render the slot so auto-detect can observe slotchange and so
-    // consumers can supply an icon via slot before the attribute. CSS hides
-    // the icon when variant resolves to 'text'. When variant is explicitly
-    // 'icon' but the consumer hasn't supplied one, fall back to the
-    // icon-placeholder as a visible hint.
+    /* `variant` forces what's rendered (not just styling):
+     * - 'icon'          → suppress text even if provided
+     * - 'text'          → suppress icon even if provided
+     * - 'icon-and-text' → same as unset: render whatever is there
+     *
+     * Styling (square vs auto, icon size) is driven entirely by what's
+     * in the DOM via :has(.toggle-button__text) in the stylesheet. */
+    const showText = component.variant !== 'icon' && !!component.text;
+    const showIcon = component.variant !== 'text' && component._hasIcon;
+    /* When variant="icon" hides a provided text, fall the text back to
+     * aria-label so screen readers still announce the button. Explicit
+     * accessible-label always wins. */
+    const ariaLabel = component.accessibleLabel
+        || (component.variant === 'icon' && component.text ? component.text : '')
+        || nothing;
+    /* Tooltip surfaces the off-screen label when an icon is visible but
+     * no text is. accessible-label takes precedence; text is the fallback
+     * (e.g. variant="icon" + text="Bold" → tooltip shows "Bold"). */
+    const isIconOnlyDisplay = showIcon && !showText;
+    const tooltipText = isIconOnlyDisplay ? (component.accessibleLabel || component.text || '') : '';
+    /* Always render the icon area so the slot stays in shadow DOM for
+     * assignment + slotchange detection — even when variant="text" hides
+     * it visually (CSS handles that via :host([variant="text"]) below).
+     * Without the slot present, slotted content can't be projected and a
+     * subsequent variant change couldn't pick it up because no slotchange
+     * would have fired. An empty slot collapses to 0×0 via display:contents,
+     * so it costs nothing visually. */
     const icon = component.icon
         ? html `<nldd-icon class="toggle-button__icon" name=${component.icon}></nldd-icon>`
-        : html `<slot name="icon" @slotchange=${component.requestUpdate}>${variant === 'icon' ? html `<nldd-icon class="toggle-button__icon" name="icon-placeholder"></nldd-icon>` : nothing}</slot>`;
+        : html `<slot name="icon" @slotchange=${component.requestUpdate}></slot>`;
     const textContent = showText
         ? html `<span class="toggle-button__text">${component.text}</span>`
         : nothing;
@@ -20,14 +38,13 @@ export function toggleButtonTemplate(component) {
     if (component.type === 'checkbox' || component.type === 'radio') {
         result = html `
 			<label class="toggle-button">
-				<input
-					class="toggle-button__input"
+				<input class="toggle-button__input"
 					type=${component.type}
 					.checked=${component.selected}
 					?disabled=${component.disabled}
 					name=${component.name || nothing}
 					value=${component.value}
-					aria-label=${label}
+					aria-label=${ariaLabel}
 					@change=${component._handleInputChange}
 				>
 				${icon}
@@ -37,12 +54,11 @@ export function toggleButtonTemplate(component) {
     }
     else {
         result = html `
-			<button
-				class="toggle-button"
+			<button class="toggle-button"
 				type="button"
 				aria-pressed=${component.selected}
 				?disabled=${component.disabled}
-				aria-label=${label}
+				aria-label=${ariaLabel}
 				@click=${component._handleButtonClick}
 			>
 				${icon}

package/dist/components/inputs/toggle-button/toggle-button.template.js.map

@@ -1 +1 @@
-{"version":3,"file":"toggle-button.template.js","sourceRoot":"","sources":["../../../../src/components/inputs/toggle-button/toggle-button.template.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,OAAO,EAAkB,MAAM,KAAK,CAAC;AAEpD,OAAO,kCAAkC,CAAC;AAG1C,MAAM,UAAU,oBAAoB,CAAC,SAA2B;IAC/D,MAAM,OAAO,GAAG,SAAS,CAAC,iBAAiB,CAAC;IAC5C,MAAM,QAAQ,GAAG,CAAC,OAAO,KAAK,MAAM,IAAI,OAAO,KAAK,eAAe,CAAC,IAAI,CAAC,CAAC,SAAS,CAAC,IAAI,CAAC;IACzF,MAAM,KAAK,GAAG,SAAS,CAAC,eAAe,IAAI,OAAO,CAAC;IACnD,MAAM,WAAW,GAAG,OAAO,KAAK,MAAM,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC,eAAe,IAAI,SAAS,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC;IAE5F,sEAAsE;IACtE,wEAAwE;IACxE,uEAAuE;IACvE,gEAAgE;IAChE,sCAAsC;IACtC,MAAM,IAAI,GAAG,SAAS,CAAC,IAAI;QAC1B,CAAC,CAAC,IAAI,CAAA,+CAA+C,SAAS,CAAC,IAAI,eAAe;QAClF,CAAC,CAAC,IAAI,CAAA,iCAAiC,SAAS,CAAC,aAAa,IAAI,OAAO,KAAK,MAAM,CAAC,CAAC,CAAC,IAAI,CAAA,6EAA6E,CAAC,CAAC,CAAC,OAAO,SAAS,CAAC;IAE7L,MAAM,WAAW,GAAG,QAAQ;QAC3B,CAAC,CAAC,IAAI,CAAA,qCAAqC,SAAS,CAAC,IAAI,SAAS;QAClE,CAAC,CAAC,OAAO,CAAC;IAEX,IAAI,MAAsB,CAAC;IAE3B,IAAI,SAAS,CAAC,IAAI,KAAK,UAAU,IAAI,SAAS,CAAC,IAAI,KAAK,OAAO,EAAE,CAAC;QACjE,MAAM,GAAG,IAAI,CAAA;;;;YAIH,SAAS,CAAC,IAAI;gBACV,SAAS,CAAC,QAAQ;iBACjB,SAAS,CAAC,QAAQ;YACvB,SAAS,CAAC,IAAI,IAAI,OAAO;aACxB,SAAS,CAAC,KAAK;kBACV,KAAK;eACR,SAAS,CAAC,kBAAkB;;MAErC,IAAI;MACJ,WAAW;;GAEd,CAAC;IACH,CAAC;SAAM,CAAC;QACP,MAAM,GAAG,IAAI,CAAA;;;;mBAII,SAAS,CAAC,QAAQ;gBACrB,SAAS,CAAC,QAAQ;iBACjB,KAAK;aACT,SAAS,CAAC,kBAAkB;;MAEnC,IAAI;MACJ,WAAW;;GAEd,CAAC;IACH,CAAC;IAED,IAAI,WAAW,EAAE,CAAC;QACjB,OAAO,IAAI,CAAA,sBAAsB,WAAW,IAAI,MAAM,iBAAiB,CAAC;IACzE,CAAC;IACD,OAAO,MAAM,CAAC;AACf,CAAC"}
+{"version":3,"file":"toggle-button.template.js","sourceRoot":"","sources":["../../../../src/components/inputs/toggle-button/toggle-button.template.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,OAAO,EAAkB,MAAM,KAAK,CAAC;AAEpD,OAAO,kCAAkC,CAAC;AAG1C,MAAM,UAAU,oBAAoB,CAAC,SAA2B;IAC/D;;;;;;sEAMkE;IAClE,MAAM,QAAQ,GAAG,SAAS,CAAC,OAAO,KAAK,MAAM,IAAI,CAAC,CAAC,SAAS,CAAC,IAAI,CAAC;IAClE,MAAM,QAAQ,GAAG,SAAS,CAAC,OAAO,KAAK,MAAM,IAAI,SAAS,CAAC,QAAQ,CAAC;IAEpE;;uCAEmC;IACnC,MAAM,SAAS,GAAG,SAAS,CAAC,eAAe;WACvC,CAAC,SAAS,CAAC,OAAO,KAAK,MAAM,IAAI,SAAS,CAAC,IAAI,CAAC,CAAC,CAAC,SAAS,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC;WACtE,OAAO,CAAC;IAEZ;;qEAEiE;IACjE,MAAM,iBAAiB,GAAG,QAAQ,IAAI,CAAC,QAAQ,CAAC;IAChD,MAAM,WAAW,GAAG,iBAAiB,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC,eAAe,IAAI,SAAS,CAAC,IAAI,IAAI,EAAE,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC;IAEjG;;;;;;uCAMmC;IACnC,MAAM,IAAI,GAAG,SAAS,CAAC,IAAI;QAC1B,CAAC,CAAC,IAAI,CAAA,+CAA+C,SAAS,CAAC,IAAI,eAAe;QAClF,CAAC,CAAC,IAAI,CAAA,iCAAiC,SAAS,CAAC,aAAa,UAAU,CAAC;IAE1E,MAAM,WAAW,GAAG,QAAQ;QAC3B,CAAC,CAAC,IAAI,CAAA,qCAAqC,SAAS,CAAC,IAAI,SAAS;QAClE,CAAC,CAAC,OAAO,CAAC;IAEX,IAAI,MAAsB,CAAC;IAE3B,IAAI,SAAS,CAAC,IAAI,KAAK,UAAU,IAAI,SAAS,CAAC,IAAI,KAAK,OAAO,EAAE,CAAC;QACjE,MAAM,GAAG,IAAI,CAAA;;;YAGH,SAAS,CAAC,IAAI;gBACV,SAAS,CAAC,QAAQ;iBACjB,SAAS,CAAC,QAAQ;YACvB,SAAS,CAAC,IAAI,IAAI,OAAO;aACxB,SAAS,CAAC,KAAK;kBACV,SAAS;eACZ,SAAS,CAAC,kBAAkB;;MAErC,IAAI;MACJ,WAAW;;GAEd,CAAC;IACH,CAAC;SAAM,CAAC;QACP,MAAM,GAAG,IAAI,CAAA;;;mBAGI,SAAS,CAAC,QAAQ;gBACrB,SAAS,CAAC,QAAQ;iBACjB,SAAS;aACb,SAAS,CAAC,kBAAkB;;MAEnC,IAAI;MACJ,WAAW;;GAEd,CAAC;IACH,CAAC;IAED,IAAI,WAAW,EAAE,CAAC;QACjB,OAAO,IAAI,CAAA,sBAAsB,WAAW,IAAI,MAAM,iBAAiB,CAAC;IACzE,CAAC;IACD,OAAO,MAAM,CAAC;AACf,CAAC"}

package/dist/components/inputs/token/token.styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"token.styles.d.ts","sourceRoot":"","sources":["../../../../src/components/inputs/token/token.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,WAAW,yBAoHvB,CAAC"}
+{"version":3,"file":"token.styles.d.ts","sourceRoot":"","sources":["../../../../src/components/inputs/token/token.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,WAAW,yBAqHvB,CAAC"}

package/dist/components/inputs/token/token.styles.js

@@ -6,6 +6,7 @@ export const tokenStyles = css `
 
 	:host {
 		display: inline-block;
+		user-select: none;
 		-webkit-tap-highlight-color: transparent;
 	}
 

package/dist/components/inputs/token/token.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"token.styles.js","sourceRoot":"","sources":["../../../../src/components/inputs/token/token.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,WAAW,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAoH7B,CAAC"}
+{"version":3,"file":"token.styles.js","sourceRoot":"","sources":["../../../../src/components/inputs/token/token.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,WAAW,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAqH7B,CAAC"}

package/dist/components/layout/box/box.d.ts

@@ -6,11 +6,17 @@
  * helping users understand their relationship at a glance.
  *
  * @element nldd-box
+ * @attr {'tinted'|'base'} background - Surface fill.
+ *   - `tinted` (default): for a box on a plain page bg.
+ *   - `base`: for a box sitting on an already-tinted parent (the border
+ *     ring gets +2 palette steps so it still reads against a card-on-card).
  * @slot - Place components inside the box
  */
 import { LitElement } from 'lit';
+export type BoxBackground = 'tinted' | 'base';
 export declare class NLDDBox extends LitElement {
     static styles: import("lit").CSSResult;
+    background: BoxBackground;
     render(): import("lit-html").TemplateResult;
 }
 declare global {

package/dist/components/layout/box/box.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"box.d.ts","sourceRoot":"","sources":["../../../../src/components/layout/box/box.ts"],"names":[],"mappings":"AAAA;;;;;;;;;GASG;AACH,OAAO,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AAKjC,qBACa,OAAQ,SAAQ,UAAU;IACtC,OAAgB,MAAM,0BAAa;IAE1B,MAAM;CAGf;AAED,OAAO,CAAC,MAAM,CAAC;IACd,UAAU,qBAAqB;QAC9B,UAAU,EAAE,OAAO,CAAC;KACpB;CACD"}
+{"version":3,"file":"box.d.ts","sourceRoot":"","sources":["../../../../src/components/layout/box/box.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;GAaG;AACH,OAAO,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AAKjC,MAAM,MAAM,aAAa,GAAG,QAAQ,GAAG,MAAM,CAAC;AAE9C,qBACa,OAAQ,SAAQ,UAAU;IACtC,OAAgB,MAAM,0BAAa;IAGnC,UAAU,EAAE,aAAa,CAAY;IAE5B,MAAM;CAGf;AAED,OAAO,CAAC,MAAM,CAAC;IACd,UAAU,qBAAqB;QAC9B,UAAU,EAAE,OAAO,CAAC;KACpB;CACD"}

package/dist/components/layout/box/box.js

@@ -12,18 +12,29 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
  * helping users understand their relationship at a glance.
  *
  * @element nldd-box
+ * @attr {'tinted'|'base'} background - Surface fill.
+ *   - `tinted` (default): for a box on a plain page bg.
+ *   - `base`: for a box sitting on an already-tinted parent (the border
+ *     ring gets +2 palette steps so it still reads against a card-on-card).
  * @slot - Place components inside the box
  */
 import { LitElement } from 'lit';
-import { customElement } from 'lit/decorators.js';
+import { customElement, property } from 'lit/decorators.js';
 import { boxStyles } from './box.styles.js';
 import { boxTemplate } from './box.template.js';
 let NLDDBox = class NLDDBox extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.background = 'tinted';
+    }
     render() {
         return boxTemplate(this);
     }
 };
 NLDDBox.styles = boxStyles;
+__decorate([
+    property({ reflect: true })
+], NLDDBox.prototype, "background", void 0);
 NLDDBox = __decorate([
     customElement('nldd-box')
 ], NLDDBox);

package/dist/components/layout/box/box.js.map

@@ -1 +1 @@
-{"version":3,"file":"box.js","sourceRoot":"","sources":["../../../../src/components/layout/box/box.ts"],"names":[],"mappings":";;;;;;AAAA;;;;;;;;;GASG;AACH,OAAO,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AACjC,OAAO,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC;AAClD,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAC5C,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAGzC,IAAM,OAAO,GAAb,MAAM,OAAQ,SAAQ,UAAU;IAG7B,MAAM;QACd,OAAO,WAAW,CAAC,IAAI,CAAC,CAAC;IAC1B,CAAC;;AAJe,cAAM,GAAG,SAAS,AAAZ,CAAa;AADvB,OAAO;IADnB,aAAa,CAAC,UAAU,CAAC;GACb,OAAO,CAMnB"}
+{"version":3,"file":"box.js","sourceRoot":"","sources":["../../../../src/components/layout/box/box.ts"],"names":[],"mappings":";;;;;;AAAA;;;;;;;;;;;;;GAaG;AACH,OAAO,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AACjC,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC5D,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAC5C,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAKzC,IAAM,OAAO,GAAb,MAAM,OAAQ,SAAQ,UAAU;IAAhC;;QAIN,eAAU,GAAkB,QAAQ,CAAC;IAKtC,CAAC;IAHS,MAAM;QACd,OAAO,WAAW,CAAC,IAAI,CAAC,CAAC;IAC1B,CAAC;;AAPe,cAAM,GAAG,SAAS,AAAZ,CAAa;AAGnC;IADC,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;2CACS;AAJzB,OAAO;IADnB,aAAa,CAAC,UAAU,CAAC;GACb,OAAO,CASnB"}

package/dist/components/layout/box/box.styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"box.styles.d.ts","sourceRoot":"","sources":["../../../../src/components/layout/box/box.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,SAAS,yBAsBrB,CAAC"}
+{"version":3,"file":"box.styles.d.ts","sourceRoot":"","sources":["../../../../src/components/layout/box/box.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,SAAS,yBA6DrB,CAAC"}

package/dist/components/layout/box/box.styles.js

@@ -5,6 +5,9 @@ export const boxStyles = css `
 	/* # Host */
 
 	:host {
+		--_background-color: var(--components-box-background-color);
+		--_border-color: var(--components-box-border-color);
+
 		display: block;
 	}
 
@@ -13,13 +16,49 @@ export const boxStyles = css `
 	}
 
 
+	/* ## Background variants
+	   Default is tinted (matches :host above). base = card-on-tinted, the
+	   border ring picks the +2-step semantic so the frame still reads
+	   against an already-tinted parent. */
+
+	:host([background="tinted"]) {
+		--_background-color: var(--components-box-background-color);
+		--_border-color: var(--components-box-border-color);
+	}
+
+	:host([background="base"]) {
+		--_background-color: var(--components-box-base-background-color);
+		--_border-color: var(--components-box-base-border-color);
+	}
+
+
 	/* # Block */
 
 	.box {
 		box-sizing: border-box;
 		border-radius: var(--components-box-corner-radius);
-		background-color: var(--components-box-background-color);
+		/* Inner box-shadow paints a 1px border ring inside the radius
+		   without taking layout space. The color is one to two palette
+		   steps above the surface bg depending on the variant, giving the
+		   box a defined edge that reads as "subtle dimensional lift"
+		   rather than a hard border. */
+		box-shadow: inset 0 0 0 1px var(--_border-color);
+		background-color: var(--_background-color);
 		padding: var(--components-box-padding);
 	}
+
+
+	/* # Accessibility
+	   box-shadow is dropped by Windows High Contrast / forced-colors mode,
+	   so the border ring would disappear and the box would lose its
+	   defined edge against the system background. Restore the edge with a
+	   real border in that mode. CanvasText is the system foreground color
+	   so the border always meets contrast. */
+
+	@media (forced-colors: active) {
+		.box {
+			border: 1px solid CanvasText;
+		}
+	}
 `;
 //# sourceMappingURL=box.styles.js.map

package/dist/components/layout/box/box.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"box.styles.js","sourceRoot":"","sources":["../../../../src/components/layout/box/box.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,SAAS,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;CAsB3B,CAAC"}
+{"version":3,"file":"box.styles.js","sourceRoot":"","sources":["../../../../src/components/layout/box/box.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,SAAS,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA6D3B,CAAC"}

package/dist/components/layout/collection/collection.d.ts

@@ -50,6 +50,7 @@ export declare class NLDDCollection extends LitElement {
     _totalCount: number;
     _atStart: boolean;
     _atEnd: boolean;
+    _isScrollable: boolean;
     _hasFooterSlot: boolean;
     _onFooterSlotChange: (e: Event) => void;
     private _itemsEl;

package/dist/components/layout/collection/collection.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"collection.d.ts","sourceRoot":"","sources":["../../../../src/components/layout/collection/collection.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+BG;AACH,OAAO,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AAKjC,OAAO,KAAK,EAAE,0BAA0B,EAAE,MAAM,sBAAsB,CAAC;AACvE,OAAO,gCAAgC,CAAC;AACxC,OAAO,wCAAwC,CAAC;AAChD,OAAO,0CAA0C,CAAC;AAClD,OAAO,4BAA4B,CAAC;AAEpC,KAAK,MAAM,GAAG,MAAM,GAAG,MAAM,GAAG,mBAAmB,CAAC;AAEpD,qBACa,cAAe,SAAQ,UAAU;IAC7C,OAAgB,MAAM,0BAAoB;IAG1C,MAAM,EAAE,MAAM,CAAU;IAGxB,YAAY,UAAS;IAGrB,QAAQ,SAAM;IAGd,QAAQ,UAAS;IAGjB,SAAS,EAAE,MAAM,GAAG,SAAS,CAAC;IAG9B,YAAY,EAAE,OAAO,CAAC,0BAA0B,CAAC,CAAM;IAIhD,EAAE,CAAC,GAAG,EAAE,MAAM,0BAA0B,GAAG,MAAM;IAKxD,aAAa,SAAK;IAGlB,WAAW,SAAK;IAGhB,QAAQ,UAAQ;IAGhB,MAAM,UAAS;IAGf,cAAc,UAAS;IAEvB,mBAAmB,GAAI,GAAG,KAAK,KAAG,IAAI,CAGpC;IAGF,OAAO,CAAC,QAAQ,CAAe;IAE/B,OAAO,CAAC,eAAe,CAKrB;IAGF,OAAO,CAAC,YAAY,CAAsB;IAE1C,OAAO,CAAC,qBAAqB,CAAmC;IAChE,OAAO,CAAC,eAAe,CAA6B;IACpD,OAAO,CAAC,uBAAuB,CAAS;IAE/B,iBAAiB,IAAI,IAAI;IAKzB,oBAAoB,IAAI,IAAI;IAM5B,OAAO,CAAC,iBAAiB,EAAE,GAAG,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,IAAI;IAyB/D,OAAO,CAAC,qBAAqB;IAW7B,OAAO,CAAC,wBAAwB;IAOhC,aAAa,CAAC,CAAC,EAAE,KAAK,GAAG,IAAI;IAS7B,OAAO,CAAC,gBAAgB;IAQxB,SAAS,IAAI,IAAI;IAMjB,IAAI,QAAQ,IAAI,OAAO,CAEtB;IAED,SAAS,CAAC,SAAS,EAAE,CAAC,GAAG,CAAC,CAAC,GAAG,IAAI;IAOzB,MAAM;CAGf;AAED,OAAO,CAAC,MAAM,CAAC;IACd,UAAU,qBAAqB;QAC9B,iBAAiB,EAAE,cAAc,CAAC;KAClC;CACD"}
+{"version":3,"file":"collection.d.ts","sourceRoot":"","sources":["../../../../src/components/layout/collection/collection.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+BG;AACH,OAAO,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AAKjC,OAAO,KAAK,EAAE,0BAA0B,EAAE,MAAM,sBAAsB,CAAC;AACvE,OAAO,gCAAgC,CAAC;AACxC,OAAO,wCAAwC,CAAC;AAChD,OAAO,0CAA0C,CAAC;AAClD,OAAO,4BAA4B,CAAC;AAEpC,KAAK,MAAM,GAAG,MAAM,GAAG,MAAM,GAAG,mBAAmB,CAAC;AAEpD,qBACa,cAAe,SAAQ,UAAU;IAC7C,OAAgB,MAAM,0BAAoB;IAG1C,MAAM,EAAE,MAAM,CAAU;IAGxB,YAAY,UAAS;IAGrB,QAAQ,SAAM;IAGd,QAAQ,UAAS;IAGjB,SAAS,EAAE,MAAM,GAAG,SAAS,CAAC;IAG9B,YAAY,EAAE,OAAO,CAAC,0BAA0B,CAAC,CAAM;IAIhD,EAAE,CAAC,GAAG,EAAE,MAAM,0BAA0B,GAAG,MAAM;IAKxD,aAAa,SAAK;IAGlB,WAAW,SAAK;IAGhB,QAAQ,UAAQ;IAGhB,MAAM,UAAS;IAGf,aAAa,UAAS;IAGtB,cAAc,UAAS;IAEvB,mBAAmB,GAAI,GAAG,KAAK,KAAG,IAAI,CAGpC;IAGF,OAAO,CAAC,QAAQ,CAAe;IAE/B,OAAO,CAAC,eAAe,CASrB;IAGF,OAAO,CAAC,YAAY,CAAsB;IAE1C,OAAO,CAAC,qBAAqB,CAAmC;IAChE,OAAO,CAAC,eAAe,CAA6B;IACpD,OAAO,CAAC,uBAAuB,CAAS;IAE/B,iBAAiB,IAAI,IAAI;IAKzB,oBAAoB,IAAI,IAAI;IAM5B,OAAO,CAAC,iBAAiB,EAAE,GAAG,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,IAAI;IAyB/D,OAAO,CAAC,qBAAqB;IAgB7B,OAAO,CAAC,wBAAwB;IAQhC,aAAa,CAAC,CAAC,EAAE,KAAK,GAAG,IAAI;IAS7B,OAAO,CAAC,gBAAgB;IAQxB,SAAS,IAAI,IAAI;IAMjB,IAAI,QAAQ,IAAI,OAAO,CAEtB;IAED,SAAS,CAAC,SAAS,EAAE,CAAC,GAAG,CAAC,CAAC,GAAG,IAAI;IAOzB,MAAM;CAGf;AAED,OAAO,CAAC,MAAM,CAAC;IACd,UAAU,qBAAqB;QAC9B,iBAAiB,EAAE,cAAc,CAAC;KAClC;CACD"}

package/dist/components/layout/collection/collection.i18n.d.ts

@@ -2,6 +2,7 @@ export declare const nlddCollectionTranslations: {
     'components.collection.previous-action': string;
     'components.collection.next-action': string;
     'components.collection.load-more-action': string;
+    'components.collection.region-label': string;
 };
 export type NLDDCollectionTranslations = typeof nlddCollectionTranslations;
 //# sourceMappingURL=collection.i18n.d.ts.map

package/dist/components/layout/collection/collection.i18n.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"collection.i18n.d.ts","sourceRoot":"","sources":["../../../../src/components/layout/collection/collection.i18n.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,0BAA0B;;;;CAItC,CAAC;AAEF,MAAM,MAAM,0BAA0B,GAAG,OAAO,0BAA0B,CAAC"}
+{"version":3,"file":"collection.i18n.d.ts","sourceRoot":"","sources":["../../../../src/components/layout/collection/collection.i18n.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,0BAA0B;;;;;CAKtC,CAAC;AAEF,MAAM,MAAM,0BAA0B,GAAG,OAAO,0BAA0B,CAAC"}

package/dist/components/layout/collection/collection.i18n.js

@@ -2,5 +2,6 @@ export const nlddCollectionTranslations = {
     'components.collection.previous-action': 'Vorige',
     'components.collection.next-action': 'Volgende',
     'components.collection.load-more-action': 'Toon meer',
+    'components.collection.region-label': 'Collectie',
 };
 //# sourceMappingURL=collection.i18n.js.map

package/dist/components/layout/collection/collection.i18n.js.map

@@ -1 +1 @@
-{"version":3,"file":"collection.i18n.js","sourceRoot":"","sources":["../../../../src/components/layout/collection/collection.i18n.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,0BAA0B,GAAG;IACzC,uCAAuC,EAAE,QAAQ;IACjD,mCAAmC,EAAE,UAAU;IAC/C,wCAAwC,EAAE,WAAW;CACrD,CAAC"}
+{"version":3,"file":"collection.i18n.js","sourceRoot":"","sources":["../../../../src/components/layout/collection/collection.i18n.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,0BAA0B,GAAG;IACzC,uCAAuC,EAAE,QAAQ;IACjD,mCAAmC,EAAE,UAAU;IAC/C,wCAAwC,EAAE,WAAW;IACrD,oCAAoC,EAAE,WAAW;CACjD,CAAC"}

package/dist/components/layout/collection/collection.js

@@ -57,6 +57,7 @@ let NLDDCollection = class NLDDCollection extends LitElement {
         this._totalCount = 0;
         this._atStart = true;
         this._atEnd = false;
+        this._isScrollable = false;
         this._hasFooterSlot = false;
         this._onFooterSlotChange = (e) => {
             const slot = e.target;
@@ -68,6 +69,10 @@ let NLDDCollection = class NLDDCollection extends LitElement {
                 return;
             this._atStart = el.scrollLeft < 1;
             this._atEnd = el.scrollLeft + el.clientWidth >= el.scrollWidth - 1;
+            /* Track overflow so the template can make the scroll container
+             * keyboard-focusable. Without focus, arrow-key users can't scroll
+             * a non-focusable region (WCAG 2.1.1). */
+            this._isScrollable = el.scrollWidth > el.clientWidth;
         };
         this._scrollListenerAttached = false;
     }
@@ -113,6 +118,11 @@ let NLDDCollection = class NLDDCollection extends LitElement {
             this._resizeObserver = new ResizeObserver(() => this._scrollListener());
             this._resizeObserver.observe(this._itemsEl);
             this._scrollListenerAttached = true;
+            // Compute initial overflow synchronously. The ResizeObserver only
+            // fires on the next animation frame, so without this the first
+            // render shows tabindex/aria-label missing until the observer
+            // catches up — flaky in tests and a brief flash in real use.
+            this._scrollListener();
         }
     }
     _teardownScrollListeners() {
@@ -120,6 +130,7 @@ let NLDDCollection = class NLDDCollection extends LitElement {
         this._resizeObserver?.disconnect();
         this._resizeObserver = undefined;
         this._scrollListenerAttached = false;
+        this._isScrollable = false;
     }
     _onSlotChange(e) {
         const slot = e.target;
@@ -185,6 +196,9 @@ __decorate([
 __decorate([
     state()
 ], NLDDCollection.prototype, "_atEnd", void 0);
+__decorate([
+    state()
+], NLDDCollection.prototype, "_isScrollable", void 0);
 __decorate([
     state()
 ], NLDDCollection.prototype, "_hasFooterSlot", void 0);

package/dist/components/layout/collection/collection.js.map

@@ -1 +1 @@
-{"version":3,"file":"collection.js","sourceRoot":"","sources":["../../../../src/components/layout/collection/collection.ts"],"names":[],"mappings":";;;;;;AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+BG;AACH,OAAO,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AACjC,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,KAAK,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AAC1E,OAAO,EAAE,gBAAgB,EAAE,MAAM,wBAAwB,CAAC;AAC1D,OAAO,EAAE,kBAAkB,EAAE,MAAM,0BAA0B,CAAC;AAC9D,OAAO,EAAE,0BAA0B,EAAE,MAAM,sBAAsB,CAAC;AAElE,OAAO,gCAAgC,CAAC;AACxC,OAAO,wCAAwC,CAAC;AAChD,OAAO,0CAA0C,CAAC;AAClD,OAAO,4BAA4B,CAAC;AAK7B,IAAM,cAAc,GAApB,MAAM,cAAe,SAAQ,UAAU;IAAvC;;QAIN,WAAM,GAAW,MAAM,CAAC;QAGxB,iBAAY,GAAG,KAAK,CAAC;QAGrB,aAAQ,GAAG,EAAE,CAAC;QAGd,aAAQ,GAAG,KAAK,CAAC;QAMjB,iBAAY,GAAwC,EAAE,CAAC;QASvD,kBAAa,GAAG,CAAC,CAAC;QAGlB,gBAAW,GAAG,CAAC,CAAC;QAGhB,aAAQ,GAAG,IAAI,CAAC;QAGhB,WAAM,GAAG,KAAK,CAAC;QAGf,mBAAc,GAAG,KAAK,CAAC;QAEvB,wBAAmB,GAAG,CAAC,CAAQ,EAAQ,EAAE;YACxC,MAAM,IAAI,GAAG,CAAC,CAAC,MAAyB,CAAC;YACzC,IAAI,CAAC,cAAc,GAAG,IAAI,CAAC,gBAAgB,EAAE,CAAC,MAAM,GAAG,CAAC,CAAC;QAC1D,CAAC,CAAC;QAKM,oBAAe,GAAG,GAAS,EAAE;YACpC,MAAM,EAAE,GAAG,IAAI,CAAC,QAAQ,CAAC;YACzB,IAAI,CAAC,EAAE;gBAAE,OAAO;YAChB,IAAI,CAAC,QAAQ,GAAG,EAAE,CAAC,UAAU,GAAG,CAAC,CAAC;YAClC,IAAI,CAAC,MAAM,GAAG,EAAE,CAAC,UAAU,GAAG,EAAE,CAAC,WAAW,IAAI,EAAE,CAAC,WAAW,GAAG,CAAC,CAAC;QACpE,CAAC,CAAC;QAOM,4BAAuB,GAAG,KAAK,CAAC;IA6FzC,CAAC;IAtIA,2EAA2E;IAEpE,EAAE,CAAC,GAAqC;QAC9C,OAAO,IAAI,CAAC,YAAY,CAAC,GAAG,CAAC,IAAI,0BAA0B,CAAC,GAAG,CAAC,CAAC;IAClE,CAAC;IAuCQ,iBAAiB;QACzB,KAAK,CAAC,iBAAiB,EAAE,CAAC;QAC1B,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC,QAAQ,CAAC;IACpC,CAAC;IAEQ,oBAAoB;QAC5B,KAAK,CAAC,oBAAoB,EAAE,CAAC;QAC7B,IAAI,CAAC,qBAAqB,EAAE,UAAU,EAAE,CAAC;QACzC,IAAI,CAAC,wBAAwB,EAAE,CAAC;IACjC,CAAC;IAEQ,OAAO,CAAC,iBAAuC;QACvD,IAAI,iBAAiB,CAAC,GAAG,CAAC,QAAQ,CAAC,EAAE,CAAC;YACrC,IAAI,CAAC,qBAAqB,EAAE,CAAC;QAC9B,CAAC;QAED,IAAI,iBAAiB,CAAC,GAAG,CAAC,WAAW,CAAC,EAAE,CAAC;YACxC,IAAI,IAAI,CAAC,SAAS,EAAE,CAAC;gBACpB,IAAI,CAAC,KAAK,CAAC,WAAW,CAAC,eAAe,EAAE,IAAI,CAAC,SAAS,CAAC,CAAC;YACzD,CAAC;iBAAM,CAAC;gBACP,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,eAAe,CAAC,CAAC;YAC5C,CAAC;QACF,CAAC;QAED,IAAI,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,YAAY,IAAI,CAAC,IAAI,CAAC,qBAAqB,EAAE,CAAC;YACvE,IAAI,CAAC,qBAAqB,GAAG,IAAI,oBAAoB,CACpD,CAAC,CAAC,KAAK,CAAC,EAAE,EAAE,GAAG,IAAI,KAAK,CAAC,cAAc;gBAAE,IAAI,CAAC,SAAS,EAAE,CAAC,CAAC,CAAC,EAC5D,EAAE,SAAS,EAAE,GAAG,EAAE,CAClB,CAAC;YACF,IAAI,CAAC,qBAAqB,CAAC,OAAO,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC;QACvD,CAAC;aAAM,IAAI,CAAC,IAAI,CAAC,YAAY,EAAE,CAAC;YAC/B,IAAI,CAAC,qBAAqB,EAAE,UAAU,EAAE,CAAC;YACzC,IAAI,CAAC,qBAAqB,GAAG,SAAS,CAAC;QACxC,CAAC;IACF,CAAC;IAEO,qBAAqB;QAC5B,IAAI,CAAC,wBAAwB,EAAE,CAAC;QAEhC,IAAI,IAAI,CAAC,MAAM,KAAK,mBAAmB,IAAI,IAAI,CAAC,QAAQ,EAAE,CAAC;YAC1D,IAAI,CAAC,QAAQ,CAAC,gBAAgB,CAAC,QAAQ,EAAE,IAAI,CAAC,eAAe,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC,CAAC;YAClF,IAAI,CAAC,eAAe,GAAG,IAAI,cAAc,CAAC,GAAG,EAAE,CAAC,IAAI,CAAC,eAAe,EAAE,CAAC,CAAC;YACxE,IAAI,CAAC,eAAe,CAAC,OAAO,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;YAC5C,IAAI,CAAC,uBAAuB,GAAG,IAAI,CAAC;QACrC,CAAC;IACF,CAAC;IAEO,wBAAwB;QAC/B,IAAI,CAAC,QAAQ,EAAE,mBAAmB,CAAC,QAAQ,EAAE,IAAI,CAAC,eAAe,CAAC,CAAC;QACnE,IAAI,CAAC,eAAe,EAAE,UAAU,EAAE,CAAC;QACnC,IAAI,CAAC,eAAe,GAAG,SAAS,CAAC;QACjC,IAAI,CAAC,uBAAuB,GAAG,KAAK,CAAC;IACtC,CAAC;IAED,aAAa,CAAC,CAAQ;QACrB,MAAM,IAAI,GAAG,CAAC,CAAC,MAAyB,CAAC;QACzC,MAAM,KAAK,GAAG,IAAI,CAAC,gBAAgB,EAAmB,CAAC;QACvD,IAAI,CAAC,WAAW,GAAG,KAAK,CAAC,MAAM,CAAC;QAChC,IAAI,IAAI,CAAC,MAAM,KAAK,mBAAmB,EAAE,CAAC;YACzC,IAAI,CAAC,gBAAgB,CAAC,KAAK,CAAC,CAAC;QAC9B,CAAC;IACF,CAAC;IAEO,gBAAgB,CAAC,KAAqB;QAC7C,MAAM,IAAI,GAAG,IAAI,CAAC,QAAQ,EAAE,aAAa,CAAC,MAAM,CAA2B,CAAC;QAC5E,MAAM,QAAQ,GAAG,KAAK,IAAI,CAAC,IAAI,EAAE,gBAAgB,EAAmB,IAAI,EAAE,CAAC,CAAC;QAC5E,QAAQ,CAAC,OAAO,CAAC,CAAC,EAAE,EAAE,CAAC,EAAE,EAAE;YAC1B,EAAE,CAAC,MAAM,GAAG,CAAC,IAAI,IAAI,CAAC,aAAa,CAAC;QACrC,CAAC,CAAC,CAAC;IACJ,CAAC;IAED,SAAS;QACR,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC,QAAQ,EAAE,IAAI,CAAC,WAAW,CAAC,CAAC;QACpF,IAAI,CAAC,gBAAgB,EAAE,CAAC;QACxB,IAAI,CAAC,aAAa,CAAC,IAAI,WAAW,CAAC,WAAW,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC,CAAC,CAAC;IACrF,CAAC;IAED,IAAI,QAAQ;QACX,OAAO,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC,WAAW,CAAC;IAC9C,CAAC;IAED,SAAS,CAAC,SAAiB;QAC1B,MAAM,IAAI,GAAG,IAAI,CAAC,QAAQ,EAAE,aAAa,CAAC,MAAM,CAA2B,CAAC;QAC5E,MAAM,SAAS,GAAG,IAAI,EAAE,gBAAgB,EAAE,CAAC,CAAC,CAA4B,CAAC;QACzE,MAAM,SAAS,GAAG,SAAS,EAAE,WAAW,IAAI,GAAG,CAAC;QAChD,IAAI,CAAC,QAAQ,EAAE,QAAQ,CAAC,EAAE,IAAI,EAAE,SAAS,GAAG,CAAC,SAAS,GAAG,EAAE,CAAC,EAAE,QAAQ,EAAE,QAAQ,EAAE,CAAC,CAAC;IACrF,CAAC;IAEQ,MAAM;QACd,OAAO,kBAAkB,CAAC,IAAI,CAAC,CAAC;IACjC,CAAC;;AAzJe,qBAAM,GAAG,gBAAgB,AAAnB,CAAoB;AAG1C;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;8CAClB;AAGxB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,SAAS,EAAE,gBAAgB,EAAE,CAAC;oDACnD;AAGrB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,SAAS,EAAE,WAAW,EAAE,CAAC;gDACrC;AAGd;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,SAAS,EAAE,WAAW,EAAE,CAAC;gDAClD;AAGjB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,SAAS,EAAE,YAAY,EAAE,CAAC;iDACrC;AAG9B;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;oDAC4B;AASvD;IADC,KAAK,EAAE;qDACU;AAGlB;IADC,KAAK,EAAE;mDACQ;AAGhB;IADC,KAAK,EAAE;gDACQ;AAGhB;IADC,KAAK,EAAE;8CACO;AAGf;IADC,KAAK,EAAE;sDACe;AAQf;IADP,KAAK,CAAC,oBAAoB,CAAC;gDACG;AAUvB;IADP,KAAK,CAAC,uBAAuB,CAAC;oDACW;AA1D9B,cAAc;IAD1B,aAAa,CAAC,iBAAiB,CAAC;GACpB,cAAc,CA2J1B"}
+{"version":3,"file":"collection.js","sourceRoot":"","sources":["../../../../src/components/layout/collection/collection.ts"],"names":[],"mappings":"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"}

package/dist/components/layout/collection/collection.styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"collection.styles.d.ts","sourceRoot":"","sources":["../../../../src/components/layout/collection/collection.styles.ts"],"names":[],"mappings":"AAMA,eAAO,MAAM,gBAAgB,yBAwH5B,CAAC"}
+{"version":3,"file":"collection.styles.d.ts","sourceRoot":"","sources":["../../../../src/components/layout/collection/collection.styles.ts"],"names":[],"mappings":"AAMA,eAAO,MAAM,gBAAgB,yBAmJ5B,CAAC"}

package/dist/components/layout/collection/collection.styles.js

@@ -9,6 +9,7 @@ export const collectionStyles = css `
 
 	:host {
 		--_item-width: var(--primitives-area-280);
+		--_focus-ring-z-index: 1;
 
 		display: flex;
 		width: 100%;
@@ -104,6 +105,32 @@ export const collectionStyles = css `
 		scroll-snap-align: start;
 	}
 
+	/* The horizontal-scroll items has a mask-image that fades the left
+	 * and right edges, which would clip an outline drawn directly on it.
+	 * The .collection__scroll-area wrapper has no mask and is the layout
+	 * box that matches the visible content area; its ::after sits above
+	 * slotted cards via z-index, so card box-shadows can't overlap the
+	 * ring. :has() works here because both elements are in the same
+	 * shadow tree (unlike :host(:has()), which doesn't pierce). */
+	.collection__scroll-area {
+		position: relative;
+	}
+
+	.collection__items:focus-visible {
+		outline: none;
+	}
+
+	.collection__scroll-area:has(.collection__items:focus-visible)::after {
+		content: '';
+		position: absolute;
+		inset: 0;
+		z-index: var(--_focus-ring-z-index);
+		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;
+	}
+
 
 	/* # Footer */
 

package/dist/components/layout/collection/collection.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"collection.styles.js","sourceRoot":"","sources":["../../../../src/components/layout/collection/collection.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,SAAS,EAAE,MAAM,KAAK,CAAC;AACrC,OAAO,EAAE,WAAW,EAAE,MAAM,uCAAuC,CAAC;AAEpE,MAAM,KAAK,GAAG,SAAS,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC;AAC3C,MAAM,KAAK,GAAG,SAAS,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC;AAE3C,MAAM,CAAC,MAAM,gBAAgB,GAAG,GAAG,CAAA;;;;;;;;;;;;;;uBAcZ,KAAK;;;;uBAIL,KAAK;;;;;;;;;;;;;;;;;uBAiBL,KAAK;;;;uBAIL,KAAK;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAiF3B,CAAC"}
+{"version":3,"file":"collection.styles.js","sourceRoot":"","sources":["../../../../src/components/layout/collection/collection.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,SAAS,EAAE,MAAM,KAAK,CAAC;AACrC,OAAO,EAAE,WAAW,EAAE,MAAM,uCAAuC,CAAC;AAEpE,MAAM,KAAK,GAAG,SAAS,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC;AAC3C,MAAM,KAAK,GAAG,SAAS,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC;AAE3C,MAAM,CAAC,MAAM,gBAAgB,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;uBAeZ,KAAK;;;;uBAIL,KAAK;;;;;;;;;;;;;;;;;uBAiBL,KAAK;;;;uBAIL,KAAK;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA2G3B,CAAC"}

package/dist/components/layout/collection/collection.template.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"collection.template.d.ts","sourceRoot":"","sources":["../../../../src/components/layout/collection/collection.template.ts"],"names":[],"mappings":"AAAA,OAAO,EAAiB,cAAc,EAAE,MAAM,KAAK,CAAC;AACpD,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AAEtD,wBAAgB,kBAAkB,CAAC,SAAS,EAAE,cAAc,GAAG,cAAc,CAyC5E"}
+{"version":3,"file":"collection.template.d.ts","sourceRoot":"","sources":["../../../../src/components/layout/collection/collection.template.ts"],"names":[],"mappings":"AAAA,OAAO,EAAiB,cAAc,EAAE,MAAM,KAAK,CAAC;AAEpD,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AAEtD,wBAAgB,kBAAkB,CAAC,SAAS,EAAE,cAAc,GAAG,cAAc,CAgD5E"}

package/dist/components/layout/collection/collection.template.js

@@ -1,11 +1,19 @@
 import { html, nothing } from 'lit';
+import { ifDefined } from 'lit/directives/if-defined.js';
 export function collectionTemplate(component) {
     const isHorizontal = component.layout === 'horizontal-scroll';
     const showLoadMore = !isHorizontal && component.showLoadMore && component._hasMore;
     const showFooter = isHorizontal || showLoadMore || component._hasFooterSlot;
+    const scrollable = isHorizontal && component._isScrollable;
     return html `
-		<div class="collection__items">
-			<slot @slotchange=${(e) => component._onSlotChange(e)}></slot>
+		<div class="collection__scroll-area">
+			<div class="collection__items"
+				tabindex=${ifDefined(scrollable ? '0' : undefined)}
+				role=${ifDefined(scrollable ? 'region' : undefined)}
+				aria-label=${ifDefined(scrollable ? component._t('components.collection.region-label') : undefined)}
+			>
+				<slot @slotchange=${(e) => component._onSlotChange(e)}></slot>
+			</div>
 		</div>
 		<footer class="collection__footer" ?hidden=${!showFooter}>
 			<slot name="footer" @slotchange=${component._onFooterSlotChange}>
@@ -15,7 +23,7 @@ export function collectionTemplate(component) {
 							icon="chevron-left"
 							text=${component._t('components.collection.previous-action')}
 							tooltip-timing="never"
-							?disabled=${component._atStart}
+							.disabled=${component._atStart}
 							@click=${() => component._scrollBy(-1)}
 						></nldd-icon-button>
 						<nldd-button-bar-divider></nldd-button-bar-divider>
@@ -23,7 +31,7 @@ export function collectionTemplate(component) {
 							icon="chevron-right"
 							text=${component._t('components.collection.next-action')}
 							tooltip-timing="never"
-							?disabled=${component._atEnd}
+							.disabled=${component._atEnd}
 							@click=${() => component._scrollBy(1)}
 						></nldd-icon-button>
 					</nldd-button-bar>

package/dist/components/layout/collection/collection.template.js.map

@@ -1 +1 @@
-{"version":3,"file":"collection.template.js","sourceRoot":"","sources":["../../../../src/components/layout/collection/collection.template.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,OAAO,EAAkB,MAAM,KAAK,CAAC;AAGpD,MAAM,UAAU,kBAAkB,CAAC,SAAyB;IAC3D,MAAM,YAAY,GAAG,SAAS,CAAC,MAAM,KAAK,mBAAmB,CAAC;IAC9D,MAAM,YAAY,GAAG,CAAC,YAAY,IAAI,SAAS,CAAC,YAAY,IAAI,SAAS,CAAC,QAAQ,CAAC;IACnF,MAAM,UAAU,GAAG,YAAY,IAAI,YAAY,IAAI,SAAS,CAAC,cAAc,CAAC;IAE5E,OAAO,IAAI,CAAA;;uBAEW,CAAC,CAAQ,EAAE,EAAE,CAAC,SAAS,CAAC,aAAa,CAAC,CAAC,CAAC;;+CAEhB,CAAC,UAAU;qCACrB,SAAS,CAAC,mBAAmB;MAC5D,YAAY,CAAC,CAAC,CAAC,IAAI,CAAA;;;;cAIX,SAAS,CAAC,EAAE,CAAC,uCAAuC,CAAC;;mBAEhD,SAAS,CAAC,QAAQ;gBACrB,GAAG,EAAE,CAAC,SAAS,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC;;;;;cAK/B,SAAS,CAAC,EAAE,CAAC,mCAAmC,CAAC;;mBAE5C,SAAS,CAAC,MAAM;gBACnB,GAAG,EAAE,CAAC,SAAS,CAAC,SAAS,CAAC,CAAC,CAAC;;;KAGvC,CAAC,CAAC,CAAC,OAAO;MACT,YAAY,CAAC,CAAC,CAAC,IAAI,CAAA;;;aAGZ,SAAS,CAAC,EAAE,CAAC,wCAAwC,CAAC;;eAEpD,GAAG,EAAE,CAAC,SAAS,CAAC,SAAS,EAAE;;KAErC,CAAC,CAAC,CAAC,OAAO;;;EAGb,CAAC;AACH,CAAC"}
+{"version":3,"file":"collection.template.js","sourceRoot":"","sources":["../../../../src/components/layout/collection/collection.template.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,OAAO,EAAkB,MAAM,KAAK,CAAC;AACpD,OAAO,EAAE,SAAS,EAAE,MAAM,8BAA8B,CAAC;AAGzD,MAAM,UAAU,kBAAkB,CAAC,SAAyB;IAC3D,MAAM,YAAY,GAAG,SAAS,CAAC,MAAM,KAAK,mBAAmB,CAAC;IAC9D,MAAM,YAAY,GAAG,CAAC,YAAY,IAAI,SAAS,CAAC,YAAY,IAAI,SAAS,CAAC,QAAQ,CAAC;IACnF,MAAM,UAAU,GAAG,YAAY,IAAI,YAAY,IAAI,SAAS,CAAC,cAAc,CAAC;IAC5E,MAAM,UAAU,GAAG,YAAY,IAAI,SAAS,CAAC,aAAa,CAAC;IAE3D,OAAO,IAAI,CAAA;;;eAGG,SAAS,CAAC,UAAU,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,SAAS,CAAC;WAC3C,SAAS,CAAC,UAAU,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,SAAS,CAAC;iBACtC,SAAS,CAAC,UAAU,CAAC,CAAC,CAAC,SAAS,CAAC,EAAE,CAAC,oCAAoC,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC;;wBAE/E,CAAC,CAAQ,EAAE,EAAE,CAAC,SAAS,CAAC,aAAa,CAAC,CAAC,CAAC;;;+CAGjB,CAAC,UAAU;qCACrB,SAAS,CAAC,mBAAmB;MAC5D,YAAY,CAAC,CAAC,CAAC,IAAI,CAAA;;;;cAIX,SAAS,CAAC,EAAE,CAAC,uCAAuC,CAAC;;mBAEhD,SAAS,CAAC,QAAQ;gBACrB,GAAG,EAAE,CAAC,SAAS,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC;;;;;cAK/B,SAAS,CAAC,EAAE,CAAC,mCAAmC,CAAC;;mBAE5C,SAAS,CAAC,MAAM;gBACnB,GAAG,EAAE,CAAC,SAAS,CAAC,SAAS,CAAC,CAAC,CAAC;;;KAGvC,CAAC,CAAC,CAAC,OAAO;MACT,YAAY,CAAC,CAAC,CAAC,IAAI,CAAA;;;aAGZ,SAAS,CAAC,EAAE,CAAC,wCAAwC,CAAC;;eAEpD,GAAG,EAAE,CAAC,SAAS,CAAC,SAAS,EAAE;;KAErC,CAAC,CAAC,CAAC,OAAO;;;EAGb,CAAC;AACH,CAAC"}

package/dist/components/lists-and-menus/list/list.d.ts

@@ -1,7 +1,8 @@
 import { LitElement } from 'lit';
 import type { NLDDListTranslations } from './list.i18n.js';
 import '../../status-and-feedback/inline-dialog/inline-dialog.js';
-export type ListVariant = 'simple' | 'box' | 'box-on-tinted';
+export type ListVariant = 'simple' | 'box';
+export type ListBackground = 'tinted' | 'base';
 export type ListType = 'list' | 'navigation';
 export interface NLDDReorderEventDetail {
     fromIndex: number;
@@ -10,7 +11,7 @@ export interface NLDDReorderEventDetail {
 /**
  * A container for `nldd-list-item` elements, with optional header and footer slots.
  *
- * The `type` attribute switches the list's a11y role and behaviour:
+ * The `type` attribute switches the list's a11y role and behavior:
  * - `list` (default) — `role="list"`, items `role="listitem"`. Reorderable allowed.
  *                     Items may individually be buttons or links; the list itself
  *                     has no special keyboard semantics.
@@ -41,8 +42,14 @@ export interface NLDDReorderEventDetail {
  */
 export declare class NLDDList extends LitElement {
     static styles: import("lit").CSSResult[];
-    /** Visual style of the list. */
+    /** Visual style of the list. `simple` is a plain vertical strip with
+     *  no chrome (no rounded corners, no fill, no border); `box` is a
+     *  framed card with rounded corners, fill, and an inset border ring. */
     variant: ListVariant;
+    /** Surface fill for `variant="box"`. `tinted` (default) for a list on
+     *  a plain page; `base` for a list on an already-tinted parent. No
+     *  effect when `variant="simple"`. */
+    background?: ListBackground;
     /** A11y semantics. See class docblock. */
     type: ListType;
     /** Enables drag-to-reorder. Only valid when `type="list"` (the default). */

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

@@ -1 +1 @@
-{"version":3,"file":"list.d.ts","sourceRoot":"","sources":["../../../../src/components/lists-and-menus/list/list.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AAMjC,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,gBAAgB,CAAC;AAC3D,OAAO,0DAA0D,CAAC;AAElE,MAAM,MAAM,WAAW,GAAG,QAAQ,GAAG,KAAK,GAAG,eAAe,CAAC;AAC7D,MAAM,MAAM,QAAQ,GAAG,MAAM,GAAG,YAAY,CAAC;AAE7C,MAAM,WAAW,sBAAsB;IACtC,SAAS,EAAE,MAAM,CAAC;IAClB,OAAO,EAAE,MAAM,CAAC;CAChB;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+BG;AACH,qBACa,QAAS,SAAQ,UAAU;IACvC,OAAgB,MAAM,4BAAgB;IAEtC,gCAAgC;IAEhC,OAAO,EAAE,WAAW,CAAY;IAEhC,0CAA0C;IAE1C,IAAI,EAAE,QAAQ,CAAU;IAExB,4EAA4E;IAE5E,WAAW,UAAS;IAEpB,yCAAyC;IAEzC,UAAU,UAAS;IAEnB;;;;OAIG;IAEH,SAAS,SAAM;IAEf;;;OAGG;IAEH,mBAAmB,SAAM;IAEzB,wFAAwF;IAExF,YAAY,EAAE,OAAO,CAAC,oBAAoB,CAAC,CAAM;IAGjD,OAAO,CAAC,mBAAmB,CAA+B;IAG1D,OAAO,CAAC,UAAU,CAAS;IAG3B,OAAO,CAAC,QAAQ,CAAS;IAIzB,OAAO,CAAC,WAAW,CAA6B;IAChD,OAAO,CAAC,kBAAkB,CAAM;IAChC,OAAO,CAAC,YAAY,CAA+B;IACnD,OAAO,CAAC,iBAAiB,CAAM;IAC/B,OAAO,CAAC,UAAU,CAAuB;IACzC,OAAO,CAAC,MAAM,CAA+B;IAC7C,OAAO,CAAC,aAAa,CAAK;IAC1B,OAAO,CAAC,SAAS,CAAwB;IAIzC,OAAO,CAAC,cAAc,CAAiC;IAI9C,YAAY;IA4CZ,iBAAiB;IAajB,oBAAoB;IASpB,OAAO,CAAC,OAAO,EAAE,GAAG,CAAC,MAAM,EAAE,OAAO,CAAC;IAiB9C,OAAO,CAAC,cAAc;IA0BtB,OAAO,CAAC,SAAS;IAOjB,OAAO,CAAC,YAAY;IAepB,OAAO,CAAC,YAAY;IAOpB,OAAO,CAAC,cAAc,CA2BpB;IAEF,OAAO,CAAC,aAAa,CAAK;IAE1B,OAAO,CAAC,cAAc,CA8BpB;IAEF,OAAO,CAAC,YAAY,CAElB;IAEF,OAAO,CAAC,gBAAgB,CAEtB;IAOF,OAAO,CAAC,UAAU,CA4ChB;IAEF,OAAO,CAAC,qBAAqB;IAU7B,OAAO,CAAC,UAAU;IA0ClB;;;OAGG;IACH,OAAO,CAAC,aAAa;IAqBrB,OAAO,CAAC,aAAa;IAIrB,OAAO,CAAC,QAAQ;IAgChB,OAAO,CAAC,WAAW;IAMnB,OAAO,CAAC,YAAY;IA0BpB,OAAO,CAAC,EAAE;IAYV,OAAO,CAAC,SAAS;IAWR,MAAM;CAUf;AAED,OAAO,CAAC,MAAM,CAAC;IACd,UAAU,qBAAqB;QAC9B,WAAW,EAAE,QAAQ,CAAC;KACtB;CACD"}
+{"version":3,"file":"list.d.ts","sourceRoot":"","sources":["../../../../src/components/lists-and-menus/list/list.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AAMjC,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,gBAAgB,CAAC;AAC3D,OAAO,0DAA0D,CAAC;AAElE,MAAM,MAAM,WAAW,GAAG,QAAQ,GAAG,KAAK,CAAC;AAC3C,MAAM,MAAM,cAAc,GAAG,QAAQ,GAAG,MAAM,CAAC;AAC/C,MAAM,MAAM,QAAQ,GAAG,MAAM,GAAG,YAAY,CAAC;AAE7C,MAAM,WAAW,sBAAsB;IACtC,SAAS,EAAE,MAAM,CAAC;IAClB,OAAO,EAAE,MAAM,CAAC;CAChB;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+BG;AACH,qBACa,QAAS,SAAQ,UAAU;IACvC,OAAgB,MAAM,4BAAgB;IAEtC;;4EAEwE;IAExE,OAAO,EAAE,WAAW,CAAY;IAEhC;;0CAEsC;IAEtC,UAAU,CAAC,EAAE,cAAc,CAAC;IAE5B,0CAA0C;IAE1C,IAAI,EAAE,QAAQ,CAAU;IAExB,4EAA4E;IAE5E,WAAW,UAAS;IAEpB,yCAAyC;IAEzC,UAAU,UAAS;IAEnB;;;;OAIG;IAEH,SAAS,SAAM;IAEf;;;OAGG;IAEH,mBAAmB,SAAM;IAEzB,wFAAwF;IAExF,YAAY,EAAE,OAAO,CAAC,oBAAoB,CAAC,CAAM;IAGjD,OAAO,CAAC,mBAAmB,CAA+B;IAG1D,OAAO,CAAC,UAAU,CAAS;IAG3B,OAAO,CAAC,QAAQ,CAAS;IAIzB,OAAO,CAAC,WAAW,CAA6B;IAChD,OAAO,CAAC,kBAAkB,CAAM;IAChC,OAAO,CAAC,YAAY,CAA+B;IACnD,OAAO,CAAC,iBAAiB,CAAM;IAC/B,OAAO,CAAC,UAAU,CAAuB;IACzC,OAAO,CAAC,MAAM,CAA+B;IAC7C,OAAO,CAAC,aAAa,CAAK;IAC1B,OAAO,CAAC,SAAS,CAAwB;IAIzC,OAAO,CAAC,cAAc,CAAiC;IAI9C,YAAY;IA4CZ,iBAAiB;IAajB,oBAAoB;IASpB,OAAO,CAAC,OAAO,EAAE,GAAG,CAAC,MAAM,EAAE,OAAO,CAAC;IAiB9C,OAAO,CAAC,cAAc;IA0BtB,OAAO,CAAC,SAAS;IAOjB,OAAO,CAAC,YAAY;IAepB,OAAO,CAAC,YAAY;IAOpB,OAAO,CAAC,cAAc,CA2BpB;IAEF,OAAO,CAAC,aAAa,CAAK;IAE1B,OAAO,CAAC,cAAc,CA8BpB;IAEF,OAAO,CAAC,YAAY,CAElB;IAEF,OAAO,CAAC,gBAAgB,CAEtB;IAOF,OAAO,CAAC,UAAU,CA4ChB;IAEF,OAAO,CAAC,qBAAqB;IAU7B,OAAO,CAAC,UAAU;IA0ClB;;;OAGG;IACH,OAAO,CAAC,aAAa;IAqBrB,OAAO,CAAC,aAAa;IAIrB,OAAO,CAAC,QAAQ;IAgChB,OAAO,CAAC,WAAW;IAMnB,OAAO,CAAC,YAAY;IA0BpB,OAAO,CAAC,EAAE;IAYV,OAAO,CAAC,SAAS;IAWR,MAAM;CAUf;AAED,OAAO,CAAC,MAAM,CAAC;IACd,UAAU,qBAAqB;QAC9B,WAAW,EAAE,QAAQ,CAAC;KACtB;CACD"}

package/dist/components/lists-and-menus/list/list.js

@@ -13,7 +13,7 @@ import '../../status-and-feedback/inline-dialog/inline-dialog.js';
 /**
  * A container for `nldd-list-item` elements, with optional header and footer slots.
  *
- * The `type` attribute switches the list's a11y role and behaviour:
+ * The `type` attribute switches the list's a11y role and behavior:
  * - `list` (default) — `role="list"`, items `role="listitem"`. Reorderable allowed.
  *                     Items may individually be buttons or links; the list itself
  *                     has no special keyboard semantics.
@@ -45,7 +45,9 @@ import '../../status-and-feedback/inline-dialog/inline-dialog.js';
 let NLDDList = class NLDDList extends LitElement {
     constructor() {
         super(...arguments);
-        /** Visual style of the list. */
+        /** Visual style of the list. `simple` is a plain vertical strip with
+         *  no chrome (no rounded corners, no fill, no border); `box` is a
+         *  framed card with rounded corners, fill, and an inset border ring. */
         this.variant = 'simple';
         /** A11y semantics. See class docblock. */
         this.type = 'list';
@@ -225,7 +227,7 @@ let NLDDList = class NLDDList extends LitElement {
         super.connectedCallback();
         // Set container-type/name as inline style on the host. Doing this from
         // a `:host` rule inside the shadow DOM works in Chromium but Safari
-        // does not always recognise the host as a container for slotted
+        // does not always recognize the host as a container for slotted
         // descendants — a known engine inconsistency. Same workaround as
         // nldd-page and nldd-card.
         this.style.containerType = 'inline-size';
@@ -461,6 +463,9 @@ NLDDList.styles = [listStyles];
 __decorate([
     property({ reflect: true })
 ], NLDDList.prototype, "variant", void 0);
+__decorate([
+    property({ reflect: true })
+], NLDDList.prototype, "background", void 0);
 __decorate([
     property({ reflect: true })
 ], NLDDList.prototype, "type", void 0);