@nldd/design-system 0.8.62 → 0.8.64

package/dist/components/inputs/text-field/text-field.styles.js

@@ -1,6 +1,9 @@
 import { css } from 'lit';
-import { inheritedTextReset } from '../../../assets/styles/slotted-reset.js';
+import { inheritedTextReset } from '../../../assets/styles/style-resets.js';
 export const textFieldStyles = css `
+	:host {
+		box-sizing: border-box;
+	}
 
 
 	/* # Host */

package/dist/components/inputs/text-field/text-field.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"text-field.styles.js","sourceRoot":"","sources":["../../../../src/components/inputs/text-field/text-field.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAC1B,OAAO,EAAE,kBAAkB,EAAE,MAAM,yCAAyC,CAAC;AAE7E,MAAM,CAAC,MAAM,eAAe,GAAG,GAAG,CAAA;;;;;;;;;;;;;;IAc9B,kBAAkB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA0IrB,CAAC"}
+{"version":3,"file":"text-field.styles.js","sourceRoot":"","sources":["../../../../src/components/inputs/text-field/text-field.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAC1B,OAAO,EAAE,kBAAkB,EAAE,MAAM,wCAAwC,CAAC;AAE5E,MAAM,CAAC,MAAM,eAAe,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;IAiB9B,kBAAkB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA0IrB,CAAC"}

package/dist/components/inputs/toggle-button/toggle-button.styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"toggle-button.styles.d.ts","sourceRoot":"","sources":["../../../../src/components/inputs/toggle-button/toggle-button.styles.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,kBAAkB,yBAoM9B,CAAC"}
+{"version":3,"file":"toggle-button.styles.d.ts","sourceRoot":"","sources":["../../../../src/components/inputs/toggle-button/toggle-button.styles.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,kBAAkB,yBAuM9B,CAAC"}

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

@@ -1,6 +1,9 @@
 import { css } from 'lit';
-import { inheritedTextReset } from '../../../assets/styles/slotted-reset.js';
+import { inheritedTextReset } from '../../../assets/styles/style-resets.js';
 export const toggleButtonStyles = css `
+	:host {
+		box-sizing: border-box;
+	}
 
 
 	/* # Host */

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

@@ -1 +1 @@
-{"version":3,"file":"toggle-button.styles.js","sourceRoot":"","sources":["../../../../src/components/inputs/toggle-button/toggle-button.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAC1B,OAAO,EAAE,kBAAkB,EAAE,MAAM,yCAAyC,CAAC;AAE7E,MAAM,CAAC,MAAM,kBAAkB,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;IAoBjC,kBAAkB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAgLrB,CAAC"}
+{"version":3,"file":"toggle-button.styles.js","sourceRoot":"","sources":["../../../../src/components/inputs/toggle-button/toggle-button.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAC1B,OAAO,EAAE,kBAAkB,EAAE,MAAM,wCAAwC,CAAC;AAE5E,MAAM,CAAC,MAAM,kBAAkB,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;IAuBjC,kBAAkB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAgLrB,CAAC"}

package/dist/components/inputs/toggle-button-group/toggle-button-group.styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"toggle-button-group.styles.d.ts","sourceRoot":"","sources":["../../../../src/components/inputs/toggle-button-group/toggle-button-group.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,uBAAuB,yBA8BnC,CAAC"}
+{"version":3,"file":"toggle-button-group.styles.d.ts","sourceRoot":"","sources":["../../../../src/components/inputs/toggle-button-group/toggle-button-group.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,uBAAuB,yBAiCnC,CAAC"}

package/dist/components/inputs/toggle-button-group/toggle-button-group.styles.js

@@ -1,5 +1,8 @@
 import { css } from 'lit';
 export const toggleButtonGroupStyles = css `
+	:host {
+		box-sizing: border-box;
+	}
 
 
 	/* # Host */

package/dist/components/inputs/toggle-button-group/toggle-button-group.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"toggle-button-group.styles.js","sourceRoot":"","sources":["../../../../src/components/inputs/toggle-button-group/toggle-button-group.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,uBAAuB,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA8BzC,CAAC"}
+{"version":3,"file":"toggle-button-group.styles.js","sourceRoot":"","sources":["../../../../src/components/inputs/toggle-button-group/toggle-button-group.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,uBAAuB,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAiCzC,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":"AAGA,eAAO,MAAM,WAAW,yBAuIvB,CAAC"}
+{"version":3,"file":"token.styles.d.ts","sourceRoot":"","sources":["../../../../src/components/inputs/token/token.styles.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,WAAW,yBA0IvB,CAAC"}

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

@@ -1,6 +1,9 @@
 import { css } from 'lit';
-import { inheritedTextReset } from '../../../assets/styles/slotted-reset.js';
+import { inheritedTextReset } from '../../../assets/styles/style-resets.js';
 export const tokenStyles = css `
+	:host {
+		box-sizing: border-box;
+	}
 
 
 	/* # Host */

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;AAC1B,OAAO,EAAE,kBAAkB,EAAE,MAAM,yCAAyC,CAAC;AAE7E,MAAM,CAAC,MAAM,WAAW,GAAG,GAAG,CAAA;;;;;;;;IAQ1B,kBAAkB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA+HrB,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;AAC1B,OAAO,EAAE,kBAAkB,EAAE,MAAM,wCAAwC,CAAC;AAE5E,MAAM,CAAC,MAAM,WAAW,GAAG,GAAG,CAAA;;;;;;;;;;;IAW1B,kBAAkB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA+HrB,CAAC"}

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

@@ -1 +1 @@
-{"version":3,"file":"app-view.styles.d.ts","sourceRoot":"","sources":["../../../../src/components/layout/app-view/app-view.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,aAAa,yBA+CzB,CAAC"}
+{"version":3,"file":"app-view.styles.d.ts","sourceRoot":"","sources":["../../../../src/components/layout/app-view/app-view.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,aAAa,yBAkDzB,CAAC"}

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

@@ -1,5 +1,8 @@
 import { css } from 'lit';
 export const appViewStyles = css `
+	:host {
+		box-sizing: border-box;
+	}
 
 
 	/* # Host */

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

@@ -1 +1 @@
-{"version":3,"file":"app-view.styles.js","sourceRoot":"","sources":["../../../../src/components/layout/app-view/app-view.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,aAAa,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA+C/B,CAAC"}
+{"version":3,"file":"app-view.styles.js","sourceRoot":"","sources":["../../../../src/components/layout/app-view/app-view.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,aAAa,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAkD/B,CAAC"}

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

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

@@ -1,5 +1,8 @@
 import { css } from 'lit';
 export const boxStyles = css `
+	:host {
+		box-sizing: border-box;
+	}
 
 
 	/* # Host */

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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA6D3B,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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAgE3B,CAAC"}

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

@@ -5,19 +5,44 @@
  * 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
+ * `position: relative; z-index: 1` om klikbaar te blijven.
+ *
  * @element nldd-card
  *
- * @attr {string} accessible-label - Toegankelijke naam voor de kaart (aria-label)
+ * @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)
  *
  * @slot header - Header-content (bijv. nldd-title)
  * @slot - Body-content
  * @slot footer - Footer-content (bijv. nldd-button-group) — altijd aan onderkant
  */
 import { LitElement } from 'lit';
-export declare class NLDDCard extends LitElement {
+declare const NLDDCard_base: (abstract new (...args: any[]) => LitElement & {
+    translations: Partial<{
+        'components.card.opens-in-new-tab-text': string;
+    }>;
+    _t(key: "components.card.opens-in-new-tab-text", vars?: Record<string, string | number>): string;
+}) & typeof LitElement;
+export declare class NLDDCard extends NLDDCard_base {
     static styles: import("lit").CSSResult;
     accessibleLabel: string | undefined;
+    /** When set, the whole card becomes one link to this URL via an overlay anchor.
+     *  Nested interactive content must be raised above it (position: relative;
+     *  z-index: 1) to stay clickable. */
+    href: string;
+    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;
     connectedCallback(): void;
+    updated(): void;
     _onSlotChange: (e: Event) => void;
     render(): import("lit-html").TemplateResult;
 }
@@ -26,4 +51,5 @@ declare global {
         'nldd-card': NLDDCard;
     }
 }
+export {};
 //# sourceMappingURL=card.d.ts.map

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;;;;;;;;;;;;;;GAcG;AAEH,OAAO,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AAKjC,qBACa,QAAS,SAAQ,UAAU;IACvC,OAAgB,MAAM,0BAAc;IAGpC,eAAe,EAAE,MAAM,GAAG,SAAS,CAAC;IAE3B,iBAAiB;IAe1B,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;;;;;;;;;;;;;;;;;;;;;;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"}

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

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

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

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

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

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

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

@@ -0,0 +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"}

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

@@ -5,9 +5,17 @@
  * 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
+ * `position: relative; z-index: 1` om klikbaar te blijven.
+ *
  * @element nldd-card
  *
- * @attr {string} accessible-label - Toegankelijke naam voor de kaart (aria-label)
+ * @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)
  *
  * @slot header - Header-content (bijv. nldd-title)
  * @slot - Body-content
@@ -23,15 +31,35 @@ import { LitElement } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
 import { cardStyles } from './card.styles.js';
 import { cardTemplate } from './card.template.js';
-let NLDDCard = class NLDDCard extends LitElement {
+import { withTranslations } from '../../../utilities/with-translations.js';
+import { nlddCardTranslations } from './card.i18n.js';
+let NLDDCard = class NLDDCard extends withTranslations(LitElement, nlddCardTranslations) {
     constructor() {
         super(...arguments);
+        /** When set, the whole card becomes one link to this URL via an overlay anchor.
+         *  Nested interactive content must be raised above it (position: relative;
+         *  z-index: 1) to stay clickable. */
+        this.href = '';
+        this.target = '';
+        this.rel = '';
+        this._warnedLabel = false;
         this._onSlotChange = (e) => {
             const slot = e.target;
             const wrapper = slot.parentElement;
             wrapper.hidden = slot.assignedElements().length === 0;
         };
     }
+    /** Resolve rel for the overlay link: add noopener noreferrer for _blank
+     *  (mirrors nldd-link), merged with any consumer-set rel. */
+    _resolvedRel() {
+        const base = this.rel ?? '';
+        if (this.target !== '_blank')
+            return base;
+        const parts = new Set(base.split(/\s+/).filter(Boolean));
+        parts.add('noopener');
+        parts.add('noreferrer');
+        return [...parts].join(' ');
+    }
     connectedCallback() {
         super.connectedCallback();
         // Set container-type/name as inline style on the host. Doing this from
@@ -46,6 +74,21 @@ let NLDDCard = class NLDDCard extends LitElement {
         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.
+        if (import.meta.env?.DEV) {
+            const missing = !!this.href && !(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.');
+            }
+            else if (!missing) {
+                this._warnedLabel = false;
+            }
+        }
+    }
     render() {
         return cardTemplate(this);
     }
@@ -54,6 +97,15 @@ NLDDCard.styles = cardStyles;
 __decorate([
     property({ type: String, attribute: 'accessible-label' })
 ], NLDDCard.prototype, "accessibleLabel", void 0);
+__decorate([
+    property({ type: String, reflect: true })
+], NLDDCard.prototype, "href", void 0);
+__decorate([
+    property({ type: String })
+], NLDDCard.prototype, "target", void 0);
+__decorate([
+    property({ type: String })
+], NLDDCard.prototype, "rel", 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":"AAAA;;;;;;;;;;;;;;GAcG;;;;;;;AAEH,OAAO,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AACjC,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC5D,OAAO,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAC9C,OAAO,EAAE,YAAY,EAAE,MAAM,oBAAoB,CAAC;AAG3C,IAAM,QAAQ,GAAd,MAAM,QAAS,SAAQ,UAAU;IAAjC;;QAqBN,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;IAKH,CAAC;IAxBS,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,KAAK,CAAC,aAAa,GAAG,aAAa,CAAC;QACzC,IAAI,CAAC,KAAK,CAAC,aAAa,GAAG,kBAAkB,CAAC;IAC/C,CAAC;IAQQ,MAAM;QACd,OAAO,YAAY,CAAC,IAAI,CAAC,CAAC;IAC3B,CAAC;;AA5Be,eAAM,GAAG,UAAU,AAAb,CAAc;AAGpC;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,SAAS,EAAE,kBAAkB,EAAE,CAAC;iDACtB;AAJxB,QAAQ;IADpB,aAAa,CAAC,WAAW,CAAC;GACd,QAAQ,CA8BpB"}
+{"version":3,"file":"card.js","sourceRoot":"","sources":["../../../../src/components/layout/card/card.ts"],"names":[],"mappings":"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"}

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

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

@@ -1,5 +1,8 @@
 import { css } from 'lit';
 export const cardStyles = css `
+	:host {
+		box-sizing: border-box;
+	}
 
 
 	/* # Host */
@@ -27,6 +30,7 @@ export const cardStyles = css `
 		overflow: hidden;
 		flex-direction: column;
 		flex-grow: 1;
+		isolation: isolate;
 	}
 
 	.card::after {
@@ -39,6 +43,22 @@ export const cardStyles = css `
 	}
 
 
+	/* # Link */
+
+	.card__link {
+		position: absolute;
+		inset: 0;
+		z-index: 0;
+		border-radius: inherit;
+	}
+
+	.card:has(.card__link:focus-visible) {
+		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);
+	}
+
+
 	/* # Elements */
 
 	.card__header {

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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAgE5B,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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAoF5B,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,CAwBhE"}
+{"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"}

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

@@ -1,9 +1,25 @@
 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')
+        : '';
+    // 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.
+    const linkLabel = [component.accessibleLabel, opensInNewTabHint].filter(Boolean).join(', ') || nothing;
     return html `
 		<article class="card"
-			aria-label=${component.accessibleLabel ?? nothing}
+			aria-label=${component.href ? nothing : (component.accessibleLabel ?? nothing)}
 		>
+			${component.href ? html `
+				<a class="card__link"
+					href=${component.href}
+					target=${component.target || nothing}
+					rel=${component._resolvedRel() || nothing}
+					aria-label=${linkLabel}
+				></a>
+			` : nothing}
 			<header class="card__header"
 				hidden
 			>

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,OAAO,IAAI,CAAA;;gBAEI,SAAS,CAAC,eAAe,IAAI,OAAO;;;;;;mBAMjC,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,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"}

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

@@ -2,15 +2,17 @@
  * Nederlandse Digitale Dienst Collection Component (Lit + TypeScript)
  *
  * A container for displaying collections of items.
- * Supports grid, list, and horizontal scroll layouts.
- * In grid and list modes, items are paginated via a load-more button.
+ * Supports grid, stack, and horizontal scroll layouts.
+ * In grid and stack modes, items are paginated via a load-more button. In
+ * horizontal scroll, the prev/next controls and the edge fade appear only when
+ * the items overflow the container.
  * With `lazy-load`, the next items are automatically loaded when
  * the load-more button comes into view.
  *
  * @element nldd-collection
  *
- * @attr {string} layout - Layout mode: 'grid' | 'list' | 'horizontal-scroll' (default: 'grid')
- * @attr {boolean} show-load-more - Show load-more button in grid/list (default: false)
+ * @attr {string} layout - Layout mode: 'grid' | 'stack' | 'horizontal-scroll' (default: 'grid')
+ * @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
@@ -36,7 +38,7 @@ import '../../actions/button/button.js';
 import '../../actions/button-bar/button-bar.js';
 import '../../actions/icon-button/icon-button.js';
 import '../../content/icon/icon.js';
-type Layout = 'grid' | 'list' | 'horizontal-scroll';
+type Layout = 'grid' | 'stack' | 'horizontal-scroll';
 export declare class NLDDCollection extends LitElement {
     static styles: import("lit").CSSResult;
     layout: Layout;

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,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"}
+{"version":3,"file":"collection.d.ts","sourceRoot":"","sources":["../../../../src/components/layout/collection/collection.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAiCG;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,OAAO,GAAG,mBAAmB,CAAC;AAErD,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;IA6B/D,OAAO,CAAC,qBAAqB;IAgB7B,OAAO,CAAC,wBAAwB;IAQhC,aAAa,CAAC,CAAC,EAAE,KAAK,GAAG,IAAI;IAe7B,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.js

@@ -8,15 +8,17 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
  * Nederlandse Digitale Dienst Collection Component (Lit + TypeScript)
  *
  * A container for displaying collections of items.
- * Supports grid, list, and horizontal scroll layouts.
- * In grid and list modes, items are paginated via a load-more button.
+ * Supports grid, stack, and horizontal scroll layouts.
+ * In grid and stack modes, items are paginated via a load-more button. In
+ * horizontal scroll, the prev/next controls and the edge fade appear only when
+ * the items overflow the container.
  * With `lazy-load`, the next items are automatically loaded when
  * the load-more button comes into view.
  *
  * @element nldd-collection
  *
- * @attr {string} layout - Layout mode: 'grid' | 'list' | 'horizontal-scroll' (default: 'grid')
- * @attr {boolean} show-load-more - Show load-more button in grid/list (default: false)
+ * @attr {string} layout - Layout mode: 'grid' | 'stack' | 'horizontal-scroll' (default: 'grid')
+ * @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
@@ -110,6 +112,9 @@ let NLDDCollection = class NLDDCollection extends LitElement {
             this._intersectionObserver?.disconnect();
             this._intersectionObserver = undefined;
         }
+        // Reflect overflow state so the styles show the fade + peek space only
+        // when the items actually scroll (see :host([scrollable]) in the styles).
+        this.toggleAttribute('scrollable', this.layout === 'horizontal-scroll' && this._isScrollable);
     }
     _setupScrollListeners() {
         this._teardownScrollListeners();
@@ -136,7 +141,14 @@ let NLDDCollection = class NLDDCollection extends LitElement {
         const slot = e.target;
         const items = slot.assignedElements();
         this._totalCount = items.length;
-        if (this.layout !== 'horizontal-scroll') {
+        if (this.layout === 'horizontal-scroll') {
+            // Adding/removing items changes the content width (scrollWidth) but not
+            // the scroll container's own box, so the ResizeObserver never fires.
+            // Recompute overflow here so the fade + controls react to a content
+            // change right away, not only on the next resize.
+            this._scrollListener();
+        }
+        else {
             this._applyVisibility(items);
         }
     }

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":"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"}
+{"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.js

@@ -3,6 +3,9 @@ import { breakpoints } from '../../../assets/styles/breakpoints.js';
 const mdMin = unsafeCSS(breakpoints.mdMin);
 const lgMin = unsafeCSS(breakpoints.lgMin);
 export const collectionStyles = css `
+	:host {
+		box-sizing: border-box;
+	}
 
 
 	/* # Host */
@@ -57,19 +60,19 @@ export const collectionStyles = css `
 		grid-template-columns: repeat(auto-fill, minmax(min(var(--_item-width), 100%), 1fr));
 	}
 
-	/* ## List */
+	/* ## Stack */
 
-	:host([layout="list"]) .collection__items {
+	:host([layout="stack"]) .collection__items {
 		flex-direction: column;
 	}
 
 	/* ## Horizontal scroll */
 
 	:host([layout="horizontal-scroll"]) .collection__items {
-		margin-inline-start: calc(var(--primitives-space-16) * -1);
+		margin-inline: calc(var(--primitives-space-16) * -1);
 		margin-block: calc(var(--primitives-space-16) * -1);
 		overflow-x: auto;
-		padding-inline-start: var(--primitives-space-16);
+		padding-inline: var(--primitives-space-16);
 		padding-block: var(--primitives-space-16);
 		flex-direction: row;
 		flex-wrap: nowrap;
@@ -78,27 +81,24 @@ export const collectionStyles = css `
 		-webkit-overflow-scrolling: touch;
 		scrollbar-width: none;
 		scroll-padding-inline-start: var(--primitives-space-16);
+	}
+
+	:host([layout="horizontal-scroll"][scrollable]) .collection__items {
 		mask-image: linear-gradient(
 			to right,
 			transparent 0,
 			black var(--primitives-space-16),
-			black calc(100% - var(--primitives-space-48)),
+			black calc(100% - var(--primitives-space-16)),
 			transparent 100%
 		);
 	}
 
-	:host([layout="horizontal-scroll"]) .collection__items::after {
-		content: '';
-		flex-grow: 0;
-		flex-shrink: 0;
-		flex-basis: var(--primitives-space-48);
-	}
-
 	:host([layout="horizontal-scroll"]) .collection__items::-webkit-scrollbar {
 		display: none;
 	}
 
 	:host([layout="horizontal-scroll"]) .collection__items ::slotted(*) {
+		max-width: 100%;
 		flex-grow: 1;
 		flex-shrink: 0;
 		flex-basis: var(--_item-width);

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;;;;;;;;;;;;;;;uBAeZ,KAAK;;;;uBAIL,KAAK;;;;;;;;;;;;;;;;;uBAiBL,KAAK;;;;uBAIL,KAAK;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA2G3B,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;;;;;;;;;;;;;;;;;;uBAkBZ,KAAK;;;;uBAIL,KAAK;;;;;;;;;;;;;;;;;uBAiBL,KAAK;;;;uBAIL,KAAK;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAwG3B,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;AAEpD,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AAEtD,wBAAgB,kBAAkB,CAAC,SAAS,EAAE,cAAc,GAAG,cAAc,CAkD5E"}
+{"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,CAoD5E"}