@nldd/design-system 0.8.70 → 0.8.71

package/dist/components/layout/app-view/app-view.d.ts

@@ -14,8 +14,18 @@
  * blend with the app instead of revealing the user-agent's default white.
  * Cleared when the app-view disconnects.
  *
+ * ## Scroll mode
+ * The app scrolls the DOCUMENT (root mode) or lets each `nldd-page` scroll
+ * inside its pane (nested mode). The mode is derived from the outermost
+ * horizontal split view: one column means the document scrolls, several columns
+ * mean the panes do. An app without such a split view is a single column at
+ * every width and therefore scrolls the document too — nested scrolling would
+ * cost it the rubber-band and the collapsing browser toolbar on iOS for nothing.
+ * Set `--context-scroll-mode` on the `nldd-app-view` itself to override the
+ * derived mode; an inherited value loses from it.
+ *
  * ## Overscroll
- * In nested (default) scroll mode `overscroll-behavior: none` is set on
+ * In nested scroll mode `overscroll-behavior: none` is set on
  * `document.documentElement` and `document.body` while the app-view is
  * connected. Combined with `overscroll-behavior: contain` on `nldd-page`'s
  * scroll target, this prevents iOS rubber-band on the viewport when scroll
@@ -45,9 +55,11 @@ export declare class NLDDAppView extends LitElement implements ScrollModeProvide
     private _onSingleColumnChange;
     /**
      * Derive the document-vs-nested scroll mode from the outermost horizontal
-     * split view and push it to every registered layer. When there is no such
-     * split view the mode is left unset so it inherits (nested by default, or a
-     * consumer/media-query override such as the docs' bare page).
+     * split view and push it to every registered layer. Without such a split view
+     * the app is a single column at any width, so it scrolls the document: nested
+     * scrolling costs you the rubber-band and the collapsing browser toolbar on
+     * iOS for nothing. Set `--context-scroll-mode: nested` on the `nldd-app-view`
+     * itself to override (an inherited value loses from the derived one).
      */
     private _evaluateScrollMode;
     connectedCallback(): void;

package/dist/components/layout/app-view/app-view.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"app-view.d.ts","sourceRoot":"","sources":["../../../../src/components/layout/app-view/app-view.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8BG;AACH,OAAO,EAAE,UAAU,EAAE,cAAc,EAAE,MAAM,KAAK,CAAC;AAIjD,OAAO,KAAK,EAAc,kBAAkB,EAAE,kBAAkB,EAAE,MAAM,8CAA8C,CAAC;AAyBvH,qBACa,WAAY,SAAQ,UAAW,YAAW,kBAAkB;IACxE,OAAgB,MAAM,0BAAiB;IAGvC,UAAU,EAAE,MAAM,GAAG,QAAQ,CAAU;IAIvC,OAAO,CAAC,gBAAgB,CAAiC;IAIzD,OAAO,CAAC,YAAY,CAA2B;IAK/C,OAAO,CAAC,WAAW,CAAiE;IAIpF,gBAAgB;IAChB,sBAAsB,CAAC,QAAQ,EAAE,kBAAkB,GAAG,IAAI;IAQ1D,gBAAgB;IAChB,wBAAwB,CAAC,QAAQ,EAAE,kBAAkB,GAAG,IAAI;IAQ5D,OAAO,CAAC,mBAAmB;IAI3B,OAAO,CAAC,qBAAqB,CAE3B;IAEF;;;;;OAKG;IACH,OAAO,CAAC,mBAAmB;IA2BlB,iBAAiB,IAAI,IAAI;IAYzB,oBAAoB,IAAI,IAAI;IAsBrC,OAAO,CAAC,gBAAgB;IAWf,OAAO,CAAC,OAAO,EAAE,cAAc,GAAG,IAAI;IAM/C,OAAO,CAAC,oBAAoB;IAOnB,MAAM;CAGf;AAED,OAAO,CAAC,MAAM,CAAC;IACd,UAAU,qBAAqB;QAC9B,eAAe,EAAE,WAAW,CAAC;KAC7B;CACD"}
+{"version":3,"file":"app-view.d.ts","sourceRoot":"","sources":["../../../../src/components/layout/app-view/app-view.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAwCG;AACH,OAAO,EAAE,UAAU,EAAE,cAAc,EAAE,MAAM,KAAK,CAAC;AAIjD,OAAO,KAAK,EAAc,kBAAkB,EAAE,kBAAkB,EAAE,MAAM,8CAA8C,CAAC;AAyBvH,qBACa,WAAY,SAAQ,UAAW,YAAW,kBAAkB;IACxE,OAAgB,MAAM,0BAAiB;IAGvC,UAAU,EAAE,MAAM,GAAG,QAAQ,CAAU;IAIvC,OAAO,CAAC,gBAAgB,CAAiC;IAIzD,OAAO,CAAC,YAAY,CAA2B;IAK/C,OAAO,CAAC,WAAW,CAAiE;IAIpF,gBAAgB;IAChB,sBAAsB,CAAC,QAAQ,EAAE,kBAAkB,GAAG,IAAI;IAQ1D,gBAAgB;IAChB,wBAAwB,CAAC,QAAQ,EAAE,kBAAkB,GAAG,IAAI;IAQ5D,OAAO,CAAC,mBAAmB;IAI3B,OAAO,CAAC,qBAAqB,CAE3B;IAEF;;;;;;;OAOG;IACH,OAAO,CAAC,mBAAmB;IAqBlB,iBAAiB,IAAI,IAAI;IAYzB,oBAAoB,IAAI,IAAI;IAsBrC,OAAO,CAAC,gBAAgB;IAWf,OAAO,CAAC,OAAO,EAAE,cAAc,GAAG,IAAI;IAM/C,OAAO,CAAC,oBAAoB;IAOnB,MAAM;CAGf;AAED,OAAO,CAAC,MAAM,CAAC;IACd,UAAU,qBAAqB;QAC9B,eAAe,EAAE,WAAW,CAAC;KAC7B;CACD"}

package/dist/components/layout/app-view/app-view.js

@@ -20,8 +20,18 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
  * blend with the app instead of revealing the user-agent's default white.
  * Cleared when the app-view disconnects.
  *
+ * ## Scroll mode
+ * The app scrolls the DOCUMENT (root mode) or lets each `nldd-page` scroll
+ * inside its pane (nested mode). The mode is derived from the outermost
+ * horizontal split view: one column means the document scrolls, several columns
+ * mean the panes do. An app without such a split view is a single column at
+ * every width and therefore scrolls the document too — nested scrolling would
+ * cost it the rubber-band and the collapsing browser toolbar on iOS for nothing.
+ * Set `--context-scroll-mode` on the `nldd-app-view` itself to override the
+ * derived mode; an inherited value loses from it.
+ *
  * ## Overscroll
- * In nested (default) scroll mode `overscroll-behavior: none` is set on
+ * In nested scroll mode `overscroll-behavior: none` is set on
  * `document.documentElement` and `document.body` while the app-view is
  * connected. Combined with `overscroll-behavior: contain` on `nldd-page`'s
  * scroll target, this prevents iOS rubber-band on the viewport when scroll
@@ -97,9 +107,11 @@ let NLDDAppView = class NLDDAppView extends LitElement {
     }
     /**
      * Derive the document-vs-nested scroll mode from the outermost horizontal
-     * split view and push it to every registered layer. When there is no such
-     * split view the mode is left unset so it inherits (nested by default, or a
-     * consumer/media-query override such as the docs' bare page).
+     * split view and push it to every registered layer. Without such a split view
+     * the app is a single column at any width, so it scrolls the document: nested
+     * scrolling costs you the rubber-band and the collapsing browser toolbar on
+     * iOS for nothing. Set `--context-scroll-mode: nested` on the `nldd-app-view`
+     * itself to override (an inherited value loses from the derived one).
      */
     _evaluateScrollMode() {
         const splitView = this._outermostSplitView();
@@ -109,23 +121,16 @@ let NLDDAppView = class NLDDAppView extends LitElement {
             return;
         const next = splitView
             ? (splitView.isSingleColumn ? 'root' : 'nested')
-            : null;
+            : 'root';
         if (next === this._derivedMode)
             return;
         this._derivedMode = next;
-        if (next) {
-            this.style.setProperty('--context-scroll-mode', next);
-        }
-        else {
-            this.style.removeProperty('--context-scroll-mode');
-        }
+        this.style.setProperty('--context-scroll-mode', next);
         // Push the derived mode to every layer. Pass the value explicitly rather
         // than letting each layer re-read the CSS var: a plain var change wouldn't
         // reach the resize-polling layers in the same frame, and a getComputedStyle
         // read during this synchronous push can be stale for a deeply-nested layer
         // (the var may not have propagated through an ancestor's pending re-render).
-        // When there is no derived mode (bare-page app) pass undefined so layers
-        // fall back to the inherited var.
         this._scrollConsumers.forEach(consumer => consumer.readScrollMode(this._derivedMode ?? undefined));
     }
     connectedCallback() {

package/dist/components/layout/app-view/app-view.js.map

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

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

@@ -9,7 +9,7 @@
  * @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).
+ *   ring gets +2 palette steps so it still reads against a card-on-card).
  * @slot - Place components inside the box
  */
 import { LitElement } from 'lit';

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

@@ -15,7 +15,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
  * @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).
+ *   ring gets +2 palette steps so it still reads against a card-on-card).
  * @slot - Place components inside the box
  */
 import { LitElement } from 'lit';

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,yBA2DrB,CAAC"}
+{"version":3,"file":"box.styles.d.ts","sourceRoot":"","sources":["../../../../src/components/layout/box/box.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,SAAS,yBAiDrB,CAAC"}

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

@@ -8,8 +8,11 @@ export const boxStyles = css `
 	/* # Host */
 
 	:host {
+		--_corner-radius: var(--semantics-surfaces-corner-radius);
 		--_background-color: var(--components-box-background-color);
+		--_border-width: var(--components-box-border-width);
 		--_border-color: var(--components-box-border-color);
+		--_highlight-border: inset 0 0 0 var(--_border-width) var(--_border-color);
 
 		display: block;
 	}
@@ -19,10 +22,7 @@ export const boxStyles = css `
 	}
 
 
-	/* ## Background variants
-	   The default (tinted) lives on the :host base. base = card-on-tinted, the
-	   border ring picks the +2-step semantic so the frame still reads
-	   against an already-tinted parent. */
+	/* ## Background variants */
 
 	:host([background="base"]) {
 		--_background-color: var(--components-box-base-background-color);
@@ -34,28 +34,18 @@ export const boxStyles = css `
 
 	.box {
 		box-sizing: border-box;
-		border-radius: var(--components-box-corner-radius);
-		/* 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);
+		border-radius: var(--_corner-radius);
+		box-shadow: var(--_highlight-border);
 		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. */
+	/* # Accessibility */
 
 	@media (forced-colors: active) {
 		.box {
-			border: 1px solid CanvasText;
+			border: var(--_border-width) solid CanvasText;
 		}
 	}
 `;

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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA2D3B,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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAiD3B,CAAC"}

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

@@ -5,17 +5,21 @@
  * De kaart heeft een elevated look als standaard. Padding wordt overgelaten
  * aan geneste containers.
  *
- * Met `href` wordt de hele kaart een link (een overlay-anchor over de kaart).
- * Geneste interactieve content (bijv. footer-knoppen) moet je erboven tillen met
+ * Met `href` wordt de hele kaart een link (een overlay-anchor over de kaart);
+ * met `button` een knop (een overlay-button die een gewone, composed `click`
+ * geeft — een klik-listener of htmx-attribuut op de kaart zelf werkt dus direct,
+ * en Enter/Space doen het native). `href` wint als beide gezet zijn. Geneste
+ * interactieve content (bijv. footer-knoppen) moet je erboven tillen met
  * `position: relative; z-index: 1` om klikbaar te blijven.
  *
  * @element nldd-card
  *
- * @attr {string} accessible-label - Toegankelijke naam van de kaart; bij `href` benoemt deze de link, anders de kaart-region
- * @attr {string} href             - Maakt de hele kaart een link naar deze URL (leeg = geen link)
- * @attr {string} target           - Link target voor href (bijv. '_blank'); stelt rel automatisch bij en voegt bij '_blank' een "Opent in nieuw tabblad"-melding toe
- * @attr {string} rel              - Link rel voor href; standaard 'noopener noreferrer' bij target='_blank'
- * @attr {object} translations     - Overschrijf vertaalsleutels (bijv. de "Opent in nieuw tabblad"-melding)
+ * @attr {string} accessible-label - Toegankelijke naam van de kaart; bij `href`/`button` benoemt deze de link of knop, anders de kaart-region
+ * @attr {string} href - Maakt de hele kaart een link naar deze URL (leeg = geen link)
+ * @attr {boolean} button - Maakt de hele kaart een knop; genegeerd wanneer `href` is gezet
+ * @attr {string} target - Link target voor href (bijv. '_blank'); stelt rel automatisch bij en voegt bij '_blank' een "Opent in nieuw tabblad"-melding toe
+ * @attr {string} rel - Link rel voor href; standaard 'noopener noreferrer' bij target='_blank'
+ * @attr {object} translations - Overschrijf vertaalsleutels (bijv. de "Opent in nieuw tabblad"-melding)
  *
  * @slot header - Header-content (bijv. nldd-title)
  * @slot - Body-content
@@ -24,9 +28,9 @@
 import { LitElement } from 'lit';
 declare const NLDDCard_base: (abstract new (...args: any[]) => LitElement & {
     translations: Partial<{
-        'components.card.opens-in-new-tab-text': string;
+        'components.card.opens-in-new-tab-label': string;
     }>;
-    _t(key: "components.card.opens-in-new-tab-text", vars?: Record<string, string | number>): string;
+    _t(key: "components.card.opens-in-new-tab-label", vars?: Record<string, string | number>): string;
 }) & typeof LitElement;
 export declare class NLDDCard extends NLDDCard_base {
     static styles: import("lit").CSSResult;
@@ -35,15 +39,28 @@ export declare class NLDDCard extends NLDDCard_base {
      *  Nested interactive content must be raised above it (position: relative;
      *  z-index: 1) to stay clickable. */
     href: string;
+    /** Makes the whole card a button via an overlay `<button>`: activation (click,
+     *  Enter, Space) surfaces as a composed `click` on the host, so a listener or
+     *  htmx attribute on the card just works. Ignored when `href` is set — a card
+     *  is one action, and a link outranks a button. */
+    button: boolean;
     target: string;
     rel: string;
     /** Resolve rel for the overlay link: add noopener noreferrer for _blank
      *  (mirrors nldd-link), merged with any consumer-set rel. */
     _resolvedRel(): string;
     private _warnedLabel;
+    /** True while the card's own overlay control holds keyboard focus. Drives the
+     *  focus ring from JS rather than from `:has(… :focus-visible)` in CSS:
+     *  Safari does not re-evaluate a dynamic pseudo-class inside `:has()`, so the
+     *  ring stayed away there while it worked in Chromium. */
+    private _actionFocused;
+    private _onFocusIn;
+    private _onFocusOut;
     connectedCallback(): void;
     updated(): void;
     _onSlotChange: (e: Event) => void;
+    disconnectedCallback(): void;
     render(): import("lit-html").TemplateResult;
 }
 declare global {

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

@@ -1 +1 @@
-{"version":3,"file":"card.d.ts","sourceRoot":"","sources":["../../../../src/components/layout/card/card.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;GAsBG;AAEH,OAAO,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;;;;;;;AAOjC,qBACa,QAAS,SAAQ,aAAkD;IAC/E,OAAgB,MAAM,0BAAc;IAGpC,eAAe,EAAE,MAAM,GAAG,SAAS,CAAC;IAEpC;;yCAEqC;IAErC,IAAI,SAAM;IAGV,MAAM,SAAM;IAGZ,GAAG,SAAM;IAET;iEAC6D;IAC7D,YAAY,IAAI,MAAM;IAStB,OAAO,CAAC,YAAY,CAAS;IAEpB,iBAAiB;IAejB,OAAO,IAAI,IAAI;IAexB,aAAa,GAAI,GAAG,KAAK,KAAG,IAAI,CAI9B;IAEO,MAAM;CAGf;AAED,OAAO,CAAC,MAAM,CAAC;IACd,UAAU,qBAAqB;QAC9B,WAAW,EAAE,QAAQ,CAAC;KACtB;CACD"}
+{"version":3,"file":"card.d.ts","sourceRoot":"","sources":["../../../../src/components/layout/card/card.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BG;AAEH,OAAO,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;;;;;;;AAOjC,qBACa,QAAS,SAAQ,aAAkD;IAC/E,OAAgB,MAAM,0BAAc;IAGpC,eAAe,EAAE,MAAM,GAAG,SAAS,CAAC;IAEpC;;yCAEqC;IAErC,IAAI,SAAM;IAEV;;;uDAGmD;IAEnD,MAAM,UAAS;IAGf,MAAM,SAAM;IAGZ,GAAG,SAAM;IAET;iEAC6D;IAC7D,YAAY,IAAI,MAAM;IAStB,OAAO,CAAC,YAAY,CAAS;IAE7B;;;8DAG0D;IAE1D,OAAO,CAAC,cAAc,CAAS;IAE/B,OAAO,CAAC,UAAU,CAKhB;IAEF,OAAO,CAAC,WAAW,CAEjB;IAEO,iBAAiB;IAiBjB,OAAO,IAAI,IAAI;IAgBxB,aAAa,GAAI,GAAG,KAAK,KAAG,IAAI,CAI9B;IAEO,oBAAoB;IAMpB,MAAM;CAGf;AAED,OAAO,CAAC,MAAM,CAAC;IACd,UAAU,qBAAqB;QAC9B,WAAW,EAAE,QAAQ,CAAC;KACtB;CACD"}

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

@@ -1,5 +1,5 @@
 export declare const nlddCardTranslations: {
-    'components.card.opens-in-new-tab-text': string;
+    'components.card.opens-in-new-tab-label': string;
 };
 export type NLDDCardTranslations = typeof nlddCardTranslations;
 //# sourceMappingURL=card.i18n.d.ts.map

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

@@ -1,4 +1,4 @@
 export const nlddCardTranslations = {
-    'components.card.opens-in-new-tab-text': 'Opent in nieuw tabblad',
+    'components.card.opens-in-new-tab-label': 'Opent in nieuw tabblad',
 };
 //# sourceMappingURL=card.i18n.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"card.i18n.js","sourceRoot":"","sources":["../../../../src/components/layout/card/card.i18n.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,oBAAoB,GAAG;IACnC,uCAAuC,EAAE,wBAAwB;CACjE,CAAC"}
+{"version":3,"file":"card.i18n.js","sourceRoot":"","sources":["../../../../src/components/layout/card/card.i18n.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,oBAAoB,GAAG;IACnC,wCAAwC,EAAE,wBAAwB;CAClE,CAAC"}

package/dist/components/layout/card/card.js

@@ -5,17 +5,21 @@
  * De kaart heeft een elevated look als standaard. Padding wordt overgelaten
  * aan geneste containers.
  *
- * Met `href` wordt de hele kaart een link (een overlay-anchor over de kaart).
- * Geneste interactieve content (bijv. footer-knoppen) moet je erboven tillen met
+ * Met `href` wordt de hele kaart een link (een overlay-anchor over de kaart);
+ * met `button` een knop (een overlay-button die een gewone, composed `click`
+ * geeft — een klik-listener of htmx-attribuut op de kaart zelf werkt dus direct,
+ * en Enter/Space doen het native). `href` wint als beide gezet zijn. Geneste
+ * interactieve content (bijv. footer-knoppen) moet je erboven tillen met
  * `position: relative; z-index: 1` om klikbaar te blijven.
  *
  * @element nldd-card
  *
- * @attr {string} accessible-label - Toegankelijke naam van de kaart; bij `href` benoemt deze de link, anders de kaart-region
- * @attr {string} href             - Maakt de hele kaart een link naar deze URL (leeg = geen link)
- * @attr {string} target           - Link target voor href (bijv. '_blank'); stelt rel automatisch bij en voegt bij '_blank' een "Opent in nieuw tabblad"-melding toe
- * @attr {string} rel              - Link rel voor href; standaard 'noopener noreferrer' bij target='_blank'
- * @attr {object} translations     - Overschrijf vertaalsleutels (bijv. de "Opent in nieuw tabblad"-melding)
+ * @attr {string} accessible-label - Toegankelijke naam van de kaart; bij `href`/`button` benoemt deze de link of knop, anders de kaart-region
+ * @attr {string} href - Maakt de hele kaart een link naar deze URL (leeg = geen link)
+ * @attr {boolean} button - Maakt de hele kaart een knop; genegeerd wanneer `href` is gezet
+ * @attr {string} target - Link target voor href (bijv. '_blank'); stelt rel automatisch bij en voegt bij '_blank' een "Opent in nieuw tabblad"-melding toe
+ * @attr {string} rel - Link rel voor href; standaard 'noopener noreferrer' bij target='_blank'
+ * @attr {object} translations - Overschrijf vertaalsleutels (bijv. de "Opent in nieuw tabblad"-melding)
  *
  * @slot header - Header-content (bijv. nldd-title)
  * @slot - Body-content
@@ -28,7 +32,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
 import { LitElement } from 'lit';
-import { customElement, property } from 'lit/decorators.js';
+import { customElement, property, state } from 'lit/decorators.js';
 import { cardStyles } from './card.styles.js';
 import { cardTemplate } from './card.template.js';
 import { withTranslations } from '../../../utilities/with-translations.js';
@@ -40,9 +44,28 @@ let NLDDCard = class NLDDCard extends withTranslations(LitElement, nlddCardTrans
          *  Nested interactive content must be raised above it (position: relative;
          *  z-index: 1) to stay clickable. */
         this.href = '';
+        /** Makes the whole card a button via an overlay `<button>`: activation (click,
+         *  Enter, Space) surfaces as a composed `click` on the host, so a listener or
+         *  htmx attribute on the card just works. Ignored when `href` is set — a card
+         *  is one action, and a link outranks a button. */
+        this.button = false;
         this.target = '';
         this.rel = '';
         this._warnedLabel = false;
+        /** True while the card's own overlay control holds keyboard focus. Drives the
+         *  focus ring from JS rather than from `:has(… :focus-visible)` in CSS:
+         *  Safari does not re-evaluate a dynamic pseudo-class inside `:has()`, so the
+         *  ring stayed away there while it worked in Chromium. */
+        this._actionFocused = false;
+        this._onFocusIn = (e) => {
+            // composedPath()[0], not e.target: the control lives in the shadow root, so
+            // the event is retargeted to the host by the time it reaches this listener.
+            const focused = e.composedPath()[0];
+            this._actionFocused = !!focused?.matches?.('.card__action:focus-visible');
+        };
+        this._onFocusOut = () => {
+            this._actionFocused = false;
+        };
         this._onSlotChange = (e) => {
             const slot = e.target;
             const wrapper = slot.parentElement;
@@ -64,31 +87,39 @@ let NLDDCard = class NLDDCard extends withTranslations(LitElement, nlddCardTrans
         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.
         //
         // We don't clear these on disconnect: a DOM move (disconnect →
         // reconnect) would just re-set them, and there's no scenario where the
         // styles being absent is meaningful. They are effectively part of the
         // element's identity, written once and kept.
+        this.addEventListener('focusin', this._onFocusIn);
+        this.addEventListener('focusout', this._onFocusOut);
         this.style.containerType = 'inline-size';
         this.style.containerName = 'layout-container';
     }
     updated() {
-        // A linked card with no accessible name is a silent a11y failure — the
-        // overlay anchor has no text. Warn once in dev (like nldd-image does for
-        // alt); stay quiet in production.
+        this.classList.toggle('is-action-focused', this._actionFocused);
+        // An interactive card with no accessible name is a silent a11y failure —
+        // the overlay control has no text. Warn once in dev (like nldd-image does
+        // for alt); stay quiet in production.
         if (import.meta.env?.DEV) {
-            const missing = !!this.href && !(this.accessibleLabel ?? '').trim();
+            const missing = (!!this.href || this.button) && !(this.accessibleLabel ?? '').trim();
             if (missing && !this._warnedLabel) {
                 this._warnedLabel = true;
-                console.warn('<nldd-card>: a card with `href` needs `accessible-label` so the link has an accessible name.');
+                console.warn('<nldd-card>: a card with `href` or `button` needs `accessible-label` so the control has an accessible name.');
             }
             else if (!missing) {
                 this._warnedLabel = false;
             }
         }
     }
+    disconnectedCallback() {
+        this.removeEventListener('focusin', this._onFocusIn);
+        this.removeEventListener('focusout', this._onFocusOut);
+        super.disconnectedCallback();
+    }
     render() {
         return cardTemplate(this);
     }
@@ -100,12 +131,18 @@ __decorate([
 __decorate([
     property({ type: String, reflect: true })
 ], NLDDCard.prototype, "href", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], NLDDCard.prototype, "button", void 0);
 __decorate([
     property({ type: String })
 ], NLDDCard.prototype, "target", void 0);
 __decorate([
     property({ type: String })
 ], NLDDCard.prototype, "rel", void 0);
+__decorate([
+    state()
+], NLDDCard.prototype, "_actionFocused", void 0);
 NLDDCard = __decorate([
     customElement('nldd-card')
 ], NLDDCard);

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

@@ -1 +1 @@
-{"version":3,"file":"card.js","sourceRoot":"","sources":["../../../../src/components/layout/card/card.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"card.js","sourceRoot":"","sources":["../../../../src/components/layout/card/card.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BG;;;;;;;AAEH,OAAO,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AACjC,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AACnE,OAAO,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAC9C,OAAO,EAAE,YAAY,EAAE,MAAM,oBAAoB,CAAC;AAClD,OAAO,EAAE,gBAAgB,EAAE,MAAM,yCAAyC,CAAC;AAC3E,OAAO,EAAE,oBAAoB,EAAE,MAAM,gBAAgB,CAAC;AAG/C,IAAM,QAAQ,GAAd,MAAM,QAAS,SAAQ,gBAAgB,CAAC,UAAU,EAAE,oBAAoB,CAAC;IAAzE;;QAMN;;6CAEqC;QAErC,SAAI,GAAG,EAAE,CAAC;QAEV;;;2DAGmD;QAEnD,WAAM,GAAG,KAAK,CAAC;QAGf,WAAM,GAAG,EAAE,CAAC;QAGZ,QAAG,GAAG,EAAE,CAAC;QAaD,iBAAY,GAAG,KAAK,CAAC;QAE7B;;;kEAG0D;QAElD,mBAAc,GAAG,KAAK,CAAC;QAEvB,eAAU,GAAG,CAAC,CAAa,EAAQ,EAAE;YAC5C,4EAA4E;YAC5E,4EAA4E;YAC5E,MAAM,OAAO,GAAG,CAAC,CAAC,YAAY,EAAE,CAAC,CAAC,CAAwB,CAAC;YAC3D,IAAI,CAAC,cAAc,GAAG,CAAC,CAAC,OAAO,EAAE,OAAO,EAAE,CAAC,6BAA6B,CAAC,CAAC;QAC3E,CAAC,CAAC;QAEM,gBAAW,GAAG,GAAS,EAAE;YAChC,IAAI,CAAC,cAAc,GAAG,KAAK,CAAC;QAC7B,CAAC,CAAC;QAmCF,kBAAa,GAAG,CAAC,CAAQ,EAAQ,EAAE;YAClC,MAAM,IAAI,GAAG,CAAC,CAAC,MAAyB,CAAC;YACzC,MAAM,OAAO,GAAG,IAAI,CAAC,aAA4B,CAAC;YAClD,OAAO,CAAC,MAAM,GAAG,IAAI,CAAC,gBAAgB,EAAE,CAAC,MAAM,KAAK,CAAC,CAAC;QACvD,CAAC,CAAC;IAWH,CAAC;IA/EA;iEAC6D;IAC7D,YAAY;QACX,MAAM,IAAI,GAAG,IAAI,CAAC,GAAG,IAAI,EAAE,CAAC;QAC5B,IAAI,IAAI,CAAC,MAAM,KAAK,QAAQ;YAAE,OAAO,IAAI,CAAC;QAC1C,MAAM,KAAK,GAAG,IAAI,GAAG,CAAC,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,CAAC;QACzD,KAAK,CAAC,GAAG,CAAC,UAAU,CAAC,CAAC;QACtB,KAAK,CAAC,GAAG,CAAC,YAAY,CAAC,CAAC;QACxB,OAAO,CAAC,GAAG,KAAK,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;IAC7B,CAAC;IAsBQ,iBAAiB;QACzB,KAAK,CAAC,iBAAiB,EAAE,CAAC;QAC1B,uEAAuE;QACvE,oEAAoE;QACpE,gEAAgE;QAChE,8CAA8C;QAC9C,EAAE;QACF,+DAA+D;QAC/D,uEAAuE;QACvE,sEAAsE;QACtE,6CAA6C;QAC7C,IAAI,CAAC,gBAAgB,CAAC,SAAS,EAAE,IAAI,CAAC,UAAU,CAAC,CAAC;QAClD,IAAI,CAAC,gBAAgB,CAAC,UAAU,EAAE,IAAI,CAAC,WAAW,CAAC,CAAC;QACpD,IAAI,CAAC,KAAK,CAAC,aAAa,GAAG,aAAa,CAAC;QACzC,IAAI,CAAC,KAAK,CAAC,aAAa,GAAG,kBAAkB,CAAC;IAC/C,CAAC;IAEQ,OAAO;QACf,IAAI,CAAC,SAAS,CAAC,MAAM,CAAC,mBAAmB,EAAE,IAAI,CAAC,cAAc,CAAC,CAAC;QAChE,yEAAyE;QACzE,0EAA0E;QAC1E,sCAAsC;QACtC,IAAI,MAAM,CAAC,IAAI,CAAC,GAAG,EAAE,GAAG,EAAE,CAAC;YAC1B,MAAM,OAAO,GAAG,CAAC,CAAC,CAAC,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC,IAAI,CAAC,eAAe,IAAI,EAAE,CAAC,CAAC,IAAI,EAAE,CAAC;YACrF,IAAI,OAAO,IAAI,CAAC,IAAI,CAAC,YAAY,EAAE,CAAC;gBACnC,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC;gBACzB,OAAO,CAAC,IAAI,CAAC,6GAA6G,CAAC,CAAC;YAC7H,CAAC;iBAAM,IAAI,CAAC,OAAO,EAAE,CAAC;gBACrB,IAAI,CAAC,YAAY,GAAG,KAAK,CAAC;YAC3B,CAAC;QACF,CAAC;IACF,CAAC;IAQQ,oBAAoB;QAC5B,IAAI,CAAC,mBAAmB,CAAC,SAAS,EAAE,IAAI,CAAC,UAAU,CAAC,CAAC;QACrD,IAAI,CAAC,mBAAmB,CAAC,UAAU,EAAE,IAAI,CAAC,WAAW,CAAC,CAAC;QACvD,KAAK,CAAC,oBAAoB,EAAE,CAAC;IAC9B,CAAC;IAEQ,MAAM;QACd,OAAO,YAAY,CAAC,IAAI,CAAC,CAAC;IAC3B,CAAC;;AAtGe,eAAM,GAAG,UAAU,AAAb,CAAc;AAGpC;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,SAAS,EAAE,kBAAkB,EAAE,CAAC;iDACtB;AAMpC;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;sCAChC;AAOV;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;wCAC5B;AAGf;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;wCACf;AAGZ;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;qCAClB;AAoBD;IADP,KAAK,EAAE;gDACuB;AA3CnB,QAAQ;IADpB,aAAa,CAAC,WAAW,CAAC;GACd,QAAQ,CAwGpB"}

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

@@ -1 +1 @@
-{"version":3,"file":"card.styles.d.ts","sourceRoot":"","sources":["../../../../src/components/layout/card/card.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,UAAU,yBAoFtB,CAAC"}
+{"version":3,"file":"card.styles.d.ts","sourceRoot":"","sources":["../../../../src/components/layout/card/card.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,UAAU,yBAyHtB,CAAC"}

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

@@ -11,6 +11,8 @@ export const cardStyles = css `
 		--_highlight-border: inset 0 0 0 var(--components-card-highlight-border-width) var(--components-card-highlight-border-color);
 
 		display: flex;
+		/* Anchor for the focus ring, which hangs outside the card box. */
+		position: relative;
 		flex-direction: column;
 	}
 
@@ -43,19 +45,54 @@ export const cardStyles = css `
 	}
 
 
-	/* # Link */
+	/* # Link / button overlay */
 
-	.card__link {
+	.card__action {
 		position: absolute;
 		inset: 0;
 		z-index: 0;
 		border-radius: inherit;
 	}
 
-	.card:has(.card__link:focus-visible) {
+	a.card__action {
+		cursor: var(--semantics-controls-link-cursor);
+	}
+
+	/* Strip the native button chrome so the overlay stays invisible; the focus
+	   ring is drawn on the card below, same as for the anchor. */
+	button.card__action {
+		margin: 0;
+		outline: none;
+		border: none;
+		background: none;
+		padding: 0;
+		appearance: none;
+	}
+
+	/* Shown from JS (a class on the host) instead of with
+	   :has(.card__action:focus-visible): Safari does not re-evaluate a dynamic
+	   pseudo-class inside :has(), so the ring stayed away there while Chromium
+	   drew it.
+
+	   The ring is a sibling of the card, not something drawn on it. Two reasons:
+	   the card clips its descendants (overflow: hidden keeps images and fills
+	   inside the rounded corners), so a ring drawn within would be cut off at the
+	   edge; and the card's own box-shadow is a token that may be "none", which
+	   cannot be combined with a second shadow in one declaration — the whole
+	   declaration would be dropped and the ring's halo with it. */
+	.card__focus-ring {
+		display: none;
+		position: absolute;
+		inset: 0;
+		border-radius: var(--components-card-corner-radius);
 		outline: var(--semantics-focus-ring-outline);
 		outline-offset: var(--semantics-focus-ring-outline-offset);
-		box-shadow: var(--components-card-box-shadow), var(--semantics-focus-ring-box-shadow);
+		box-shadow: var(--semantics-focus-ring-box-shadow);
+		pointer-events: none;
+	}
+
+	:host(.is-action-focused) .card__focus-ring {
+		display: block;
 	}
 
 

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"card.template.d.ts","sourceRoot":"","sources":["../../../../src/components/layout/card/card.template.ts"],"names":[],"mappings":"AAAA,OAAO,EAAiB,cAAc,EAAE,MAAM,KAAK,CAAC;AACpD,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,WAAW,CAAC;AAE1C,wBAAgB,YAAY,CAAC,SAAS,EAAE,QAAQ,GAAG,cAAc,CAwChE"}
+{"version":3,"file":"card.template.d.ts","sourceRoot":"","sources":["../../../../src/components/layout/card/card.template.ts"],"names":[],"mappings":"AAAA,OAAO,EAAiB,cAAc,EAAE,MAAM,KAAK,CAAC;AACpD,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,WAAW,CAAC;AAE1C,wBAAgB,YAAY,CAAC,SAAS,EAAE,QAAQ,GAAG,cAAc,CAgDhE"}

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

@@ -2,23 +2,30 @@ import { html, nothing } from 'lit';
 export function cardTemplate(component) {
     // A new-tab link is a change of context, so announce it (WCAG 2.1 SC 3.2.2).
     const opensInNewTabHint = component.href && component.target === '_blank'
-        ? component._t('components.card.opens-in-new-tab-text')
+        ? component._t('components.card.opens-in-new-tab-label')
         : '';
-    // The overlay anchor has no text, so its name comes from aria-label, with the
-    // new-tab hint appended. accessible-label names the link when the card is a
-    // link, the article otherwise — so the card carries exactly one name.
+    // The overlay control has no text, so its name comes from aria-label, with
+    // the new-tab hint appended. accessible-label names the link or button when
+    // the card is interactive, the article otherwise — so the card carries
+    // exactly one name.
     const linkLabel = [component.accessibleLabel, opensInNewTabHint].filter(Boolean).join(', ') || nothing;
+    const isInteractive = Boolean(component.href) || component.button;
     return html `
 		<article class="card"
-			aria-label=${component.href ? nothing : (component.accessibleLabel ?? nothing)}
+			aria-label=${isInteractive ? nothing : (component.accessibleLabel ?? nothing)}
 		>
 			${component.href ? html `
-				<a class="card__link"
+				<a class="card__action"
 					href=${component.href}
 					target=${component.target || nothing}
 					rel=${component._resolvedRel() || nothing}
 					aria-label=${linkLabel}
 				></a>
+			` : component.button ? html `
+				<button class="card__action"
+					type="button"
+					aria-label=${linkLabel}
+				></button>
 			` : nothing}
 			<header class="card__header"
 				hidden
@@ -38,6 +45,7 @@ export function cardTemplate(component) {
 				></slot>
 			</footer>
 		</article>
+		<span class="card__focus-ring"></span>
 	`;
 }
 //# sourceMappingURL=card.template.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"card.template.js","sourceRoot":"","sources":["../../../../src/components/layout/card/card.template.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,OAAO,EAAkB,MAAM,KAAK,CAAC;AAGpD,MAAM,UAAU,YAAY,CAAC,SAAmB;IAC/C,6EAA6E;IAC7E,MAAM,iBAAiB,GAAG,SAAS,CAAC,IAAI,IAAI,SAAS,CAAC,MAAM,KAAK,QAAQ;QACxE,CAAC,CAAC,SAAS,CAAC,EAAE,CAAC,uCAAuC,CAAC;QACvD,CAAC,CAAC,EAAE,CAAC;IACN,8EAA8E;IAC9E,4EAA4E;IAC5E,sEAAsE;IACtE,MAAM,SAAS,GAAG,CAAC,SAAS,CAAC,eAAe,EAAE,iBAAiB,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,OAAO,CAAC;IACvG,OAAO,IAAI,CAAA;;gBAEI,SAAS,CAAC,IAAI,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC,eAAe,IAAI,OAAO,CAAC;;KAE5E,SAAS,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,CAAA;;YAEd,SAAS,CAAC,IAAI;cACZ,SAAS,CAAC,MAAM,IAAI,OAAO;WAC9B,SAAS,CAAC,YAAY,EAAE,IAAI,OAAO;kBAC5B,SAAS;;IAEvB,CAAC,CAAC,CAAC,OAAO;;;;;mBAKK,SAAS,CAAC,aAAa;;;;;;;;;;mBAUvB,SAAS,CAAC,aAAa;;;;EAIxC,CAAC;AACH,CAAC"}
+{"version":3,"file":"card.template.js","sourceRoot":"","sources":["../../../../src/components/layout/card/card.template.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,OAAO,EAAkB,MAAM,KAAK,CAAC;AAGpD,MAAM,UAAU,YAAY,CAAC,SAAmB;IAC/C,6EAA6E;IAC7E,MAAM,iBAAiB,GAAG,SAAS,CAAC,IAAI,IAAI,SAAS,CAAC,MAAM,KAAK,QAAQ;QACxE,CAAC,CAAC,SAAS,CAAC,EAAE,CAAC,wCAAwC,CAAC;QACxD,CAAC,CAAC,EAAE,CAAC;IACN,2EAA2E;IAC3E,4EAA4E;IAC5E,uEAAuE;IACvE,oBAAoB;IACpB,MAAM,SAAS,GAAG,CAAC,SAAS,CAAC,eAAe,EAAE,iBAAiB,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,OAAO,CAAC;IACvG,MAAM,aAAa,GAAG,OAAO,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI,SAAS,CAAC,MAAM,CAAC;IAClE,OAAO,IAAI,CAAA;;gBAEI,aAAa,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC,eAAe,IAAI,OAAO,CAAC;;KAE3E,SAAS,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,CAAA;;YAEd,SAAS,CAAC,IAAI;cACZ,SAAS,CAAC,MAAM,IAAI,OAAO;WAC9B,SAAS,CAAC,YAAY,EAAE,IAAI,OAAO;kBAC5B,SAAS;;IAEvB,CAAC,CAAC,CAAC,SAAS,CAAC,MAAM,CAAC,CAAC,CAAC,IAAI,CAAA;;;kBAGZ,SAAS;;IAEvB,CAAC,CAAC,CAAC,OAAO;;;;;mBAKK,SAAS,CAAC,aAAa;;;;;;;;;;mBAUvB,SAAS,CAAC,aAAa;;;;;EAKxC,CAAC;AACH,CAAC"}

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

@@ -15,16 +15,9 @@
  * @attr {boolean} show-load-more - Show load-more button in grid/stack (default: false)
  * @attr {number} max-items - Number of visible items per page (default: 24)
  * @attr {boolean} lazy-load - Automatically load more items when the button becomes visible
- * @attr {string}  item-width - Preferred width for each item (e.g. '280px', '20rem'). In grid
- *                              layout used as the minimum column width (columns will be at
- *                              least this wide; 1fr if container allows more). In horizontal
- *                              scroll used as flex-basis. Never forces horizontal overflow —
- *                              the value is clamped to container width.
- * @attr {string}  gap - Custom gap between items (any CSS length, e.g. '8px'). Overrides the
- *                       responsive default at every breakpoint; unset keeps the default.
- * @attr {object} translations - Translation overrides; unset keys fall back to Dutch.
- *                               Available keys: 'components.collection.previous-action',
- *                               'components.collection.next-action', 'components.collection.load-more-action'
+ * @attr {string} item-width - Preferred width for each item (e.g. '280px', '20rem'). In grid layout used as the minimum column width (columns will be at least this wide; 1fr if container allows more). In horizontal scroll used as flex-basis. Never forces horizontal overflow — the value is clamped to container width.
+ * @attr {string} gap - Custom gap between items (any CSS length, e.g. '8px'). Overrides the responsive default at every breakpoint; unset keeps the default.
+ * @attr {object} translations - Translation overrides; unset keys fall back to Dutch. Available keys: 'components.collection.previous-action', 'components.collection.next-action', 'components.collection.load-more-action'
  *
  * @migration The `load-more-label` attribute has been removed.
  *            Use `translations` property instead: `.translations=${{ 'components.collection.load-more-action': 'Show more' }}`