@nldd/design-system 0.8.45 → 0.8.47

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

@@ -24,7 +24,7 @@ export const pageStyles = css `
 		display: none;
 	}
 
-	:host([background="default"]) {
+	:host([background="base"]) {
 		--context-parent-background-color: var(--semantics-surfaces-background-color);
 		--_background-color: var(--context-parent-background-color);
 	}

package/dist/components/layout/page-footer/page-footer.d.ts

@@ -0,0 +1,84 @@
+/**
+ * Nederlandse Digitale Dienst Page Footer Component (Lit + TypeScript)
+ *
+ * The footer band at the bottom of a page. Hosts three optional rows in a
+ * fixed order: breadcrumbs (top), consumer-defined main content (middle),
+ * and a legal-bar (bottom). Dividers are drawn automatically between
+ * non-empty rows. Establishes its own container query
+ * (`page-footer-container`) so the responsive padding and gap react to the
+ * footer's own width, not the viewport.
+ *
+ * The host has `id="page-footer"` so a skip-link can target it directly.
+ *
+ * Use the sub-components `nldd-page-footer-legal-bar` and
+ * `nldd-page-footer-legal-bar-item` for the bottom row.
+ *
+ * @element nldd-page-footer
+ *
+ * @slot breadcrumbs - `nldd-breadcrumbs` for the top row.
+ * @slot             - Main footer content (typically a container with a grid
+ *                     of link columns).
+ * @slot legal-bar   - `nldd-page-footer-legal-bar` for the bottom row.
+ */
+import { LitElement, type PropertyValues } from 'lit';
+import { type NLDDPageFooterTranslations } from './page-footer.i18n.js';
+/**
+ * A single entry in an `nldd-page-footer-legal-bar`. Renders as a link
+ * when `href` is set, as plain text otherwise. Uses the content color
+ * (not the link color) so the legal bar reads as a subdued utility row.
+ *
+ * @attr {string} href - Link target. When omitted, the item renders as plain text.
+ * @attr {string} text - Item label. Falls back to the default slot.
+ *
+ * @slot - Item label (alternative to `text`).
+ */
+export declare class NLDDPageFooterLegalBarItem extends LitElement {
+    static styles: import("lit").CSSResult;
+    href?: string;
+    text: string;
+    render(): import("lit-html").TemplateResult;
+}
+/**
+ * Holds the legal links row at the bottom of a `nldd-page-footer`. Items
+ * in `start` render flush-left, items in `end` flush-right, separated by
+ * spacing only (no separators). On narrow containers the two groups wrap
+ * to their own rows with `start` above `end`.
+ *
+ * @attr {string} accessible-label - Override the nav's aria-label.
+ *                                   Defaults to the i18n value (NL: "Juridische links").
+ * @attr {object} translations     - Override translation keys; unset keys
+ *                                   fall back to the Dutch default.
+ *
+ * @slot start - Items rendered flush-left (e.g. © notice, version).
+ * @slot end   - Items rendered flush-right (e.g. privacy, accessibility).
+ */
+export declare class NLDDPageFooterLegalBar extends LitElement {
+    static styles: import("lit").CSSResult;
+    accessibleLabel: string;
+    translations: Partial<NLDDPageFooterTranslations>;
+    _hasStart: boolean;
+    _hasEnd: boolean;
+    private _mergedTranslations;
+    willUpdate(changed: PropertyValues): void;
+    _t(key: keyof NLDDPageFooterTranslations): string;
+    _onSlotChange: (e: Event) => void;
+    render(): import("lit-html").TemplateResult;
+}
+export declare class NLDDPageFooter extends LitElement {
+    static styles: import("lit").CSSResult;
+    _hasBreadcrumbs: boolean;
+    _hasMain: boolean;
+    _hasLegalBar: boolean;
+    connectedCallback(): void;
+    _hasMeaningfulContent(slot: HTMLSlotElement | null): boolean;
+    _onSlotChange: (e: Event) => void;
+    render(): import("lit-html").TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'nldd-page-footer': NLDDPageFooter;
+        'nldd-page-footer-legal-bar': NLDDPageFooterLegalBar;
+        'nldd-page-footer-legal-bar-item': NLDDPageFooterLegalBarItem;
+    }
+}
+//# sourceMappingURL=page-footer.d.ts.map

package/dist/components/layout/page-footer/page-footer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"page-footer.d.ts","sourceRoot":"","sources":["../../../../src/components/layout/page-footer/page-footer.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,OAAO,EAAE,UAAU,EAAE,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;AAYtD,OAAO,EAA8B,KAAK,0BAA0B,EAAE,MAAM,uBAAuB,CAAC;AAKpG;;;;;;;;;GASG;AACH,qBAAa,0BAA2B,SAAQ,UAAU;IACzD,OAAgB,MAAM,0BAAgC;IAGtD,IAAI,CAAC,EAAE,MAAM,CAAC;IAGd,IAAI,SAAM;IAED,MAAM;CAGf;AAcD;;;;;;;;;;;;;GAaG;AACH,qBAAa,sBAAuB,SAAQ,UAAU;IACrD,OAAgB,MAAM,0BAA4B;IAGlD,eAAe,SAAM;IAGrB,YAAY,EAAE,OAAO,CAAC,0BAA0B,CAAC,CAAM;IAGvD,SAAS,UAAS;IAGlB,OAAO,UAAS;IAEhB,OAAO,CAAC,mBAAmB,CAAiE;IAEnF,UAAU,CAAC,OAAO,EAAE,cAAc,GAAG,IAAI;IAYlD,EAAE,CAAC,GAAG,EAAE,MAAM,0BAA0B,GAAG,MAAM;IAWjD,aAAa,GAAI,GAAG,KAAK,UAMvB;IAEO,MAAM;CAGf;AAWD,qBACa,cAAe,SAAQ,UAAU;IAC7C,OAAgB,MAAM,0BAAoB;IAG1C,eAAe,UAAS;IAGxB,QAAQ,UAAS;IAGjB,YAAY,UAAS;IAEZ,iBAAiB,IAAI,IAAI;IA6BlC,qBAAqB,CAAC,IAAI,EAAE,eAAe,GAAG,IAAI,GAAG,OAAO;IAQ5D,aAAa,GAAI,GAAG,KAAK,UAYvB;IAEO,MAAM;CAGf;AAED,OAAO,CAAC,MAAM,CAAC;IACd,UAAU,qBAAqB;QAC9B,kBAAkB,EAAE,cAAc,CAAC;QACnC,4BAA4B,EAAE,sBAAsB,CAAC;QACrD,iCAAiC,EAAE,0BAA0B,CAAC;KAC9D;CACD"}

package/dist/components/layout/page-footer/page-footer.i18n.d.ts

@@ -0,0 +1,5 @@
+export declare const nlddPageFooterTranslations: {
+    'components.page-footer.legal-bar-accessible-label': string;
+};
+export type NLDDPageFooterTranslations = typeof nlddPageFooterTranslations;
+//# sourceMappingURL=page-footer.i18n.d.ts.map

package/dist/components/layout/page-footer/page-footer.i18n.d.ts.map

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

package/dist/components/layout/page-footer/page-footer.i18n.js

@@ -0,0 +1,4 @@
+export const nlddPageFooterTranslations = {
+    'components.page-footer.legal-bar-accessible-label': 'Juridische links',
+};
+//# sourceMappingURL=page-footer.i18n.js.map

package/dist/components/layout/page-footer/page-footer.i18n.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"page-footer.i18n.js","sourceRoot":"","sources":["../../../../src/components/layout/page-footer/page-footer.i18n.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,0BAA0B,GAAG;IACzC,mDAAmD,EAAE,kBAAkB;CACvE,CAAC"}

package/dist/components/layout/page-footer/page-footer.js

@@ -0,0 +1,217 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+/**
+ * Nederlandse Digitale Dienst Page Footer Component (Lit + TypeScript)
+ *
+ * The footer band at the bottom of a page. Hosts three optional rows in a
+ * fixed order: breadcrumbs (top), consumer-defined main content (middle),
+ * and a legal-bar (bottom). Dividers are drawn automatically between
+ * non-empty rows. Establishes its own container query
+ * (`page-footer-container`) so the responsive padding and gap react to the
+ * footer's own width, not the viewport.
+ *
+ * The host has `id="page-footer"` so a skip-link can target it directly.
+ *
+ * Use the sub-components `nldd-page-footer-legal-bar` and
+ * `nldd-page-footer-legal-bar-item` for the bottom row.
+ *
+ * @element nldd-page-footer
+ *
+ * @slot breadcrumbs - `nldd-breadcrumbs` for the top row.
+ * @slot             - Main footer content (typically a container with a grid
+ *                     of link columns).
+ * @slot legal-bar   - `nldd-page-footer-legal-bar` for the bottom row.
+ */
+import { LitElement } from 'lit';
+import { customElement, property, state } from 'lit/decorators.js';
+import { pageFooterStyles, pageFooterLegalBarStyles, pageFooterLegalBarItemStyles, } from './page-footer.styles.js';
+import { pageFooterTemplate, pageFooterLegalBarTemplate, pageFooterLegalBarItemTemplate, } from './page-footer.template.js';
+import { nlddPageFooterTranslations } from './page-footer.i18n.js';
+// # nldd-page-footer-legal-bar-item
+/**
+ * A single entry in an `nldd-page-footer-legal-bar`. Renders as a link
+ * when `href` is set, as plain text otherwise. Uses the content color
+ * (not the link color) so the legal bar reads as a subdued utility row.
+ *
+ * @attr {string} href - Link target. When omitted, the item renders as plain text.
+ * @attr {string} text - Item label. Falls back to the default slot.
+ *
+ * @slot - Item label (alternative to `text`).
+ */
+export class NLDDPageFooterLegalBarItem extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.text = '';
+    }
+    render() {
+        return pageFooterLegalBarItemTemplate(this);
+    }
+}
+NLDDPageFooterLegalBarItem.styles = pageFooterLegalBarItemStyles;
+__decorate([
+    property({ type: String, reflect: true })
+], NLDDPageFooterLegalBarItem.prototype, "href", void 0);
+__decorate([
+    property({ type: String, reflect: true })
+], NLDDPageFooterLegalBarItem.prototype, "text", void 0);
+// Sub-component of nldd-page-footer-legal-bar. Exported as a public class
+// for type imports and slot-content composition. The guard registration
+// (matches nldd-menu's nldd-menu-item) is for de-dupe safety: @customElement
+// throws if the same tag is defined twice during HMR or test re-imports,
+// the guard keeps the first registration authoritative.
+if (!customElements.get('nldd-page-footer-legal-bar-item')) {
+    customElements.define('nldd-page-footer-legal-bar-item', NLDDPageFooterLegalBarItem);
+}
+// # nldd-page-footer-legal-bar
+/**
+ * Holds the legal links row at the bottom of a `nldd-page-footer`. Items
+ * in `start` render flush-left, items in `end` flush-right, separated by
+ * spacing only (no separators). On narrow containers the two groups wrap
+ * to their own rows with `start` above `end`.
+ *
+ * @attr {string} accessible-label - Override the nav's aria-label.
+ *                                   Defaults to the i18n value (NL: "Juridische links").
+ * @attr {object} translations     - Override translation keys; unset keys
+ *                                   fall back to the Dutch default.
+ *
+ * @slot start - Items rendered flush-left (e.g. © notice, version).
+ * @slot end   - Items rendered flush-right (e.g. privacy, accessibility).
+ */
+export class NLDDPageFooterLegalBar extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.accessibleLabel = '';
+        this.translations = {};
+        this._hasStart = false;
+        this._hasEnd = false;
+        this._mergedTranslations = { ...nlddPageFooterTranslations };
+        this._onSlotChange = (e) => {
+            const slot = e.target;
+            const hasContent = slot.assignedElements().length > 0;
+            const name = slot.getAttribute('name') ?? '';
+            if (name === 'start')
+                this._hasStart = hasContent;
+            else if (name === 'end')
+                this._hasEnd = hasContent;
+        };
+    }
+    willUpdate(changed) {
+        if (changed.has('translations') || changed.has('accessibleLabel')) {
+            this._mergedTranslations = {
+                ...nlddPageFooterTranslations,
+                ...this.translations,
+            };
+            if (this.accessibleLabel) {
+                this._mergedTranslations['components.page-footer.legal-bar-accessible-label'] = this.accessibleLabel;
+            }
+        }
+    }
+    _t(key) {
+        // Return '' (not the key) for missing translations so callers can do
+        // `value || nothing` to suppress aria-label / text rather than
+        // announcing the raw key string. Warn in DEV.
+        const value = this._mergedTranslations[key];
+        if (value === undefined && import.meta.env?.DEV) {
+            console.warn(`<nldd-page-footer-legal-bar>: missing translation for "${key}"`);
+        }
+        return value ?? '';
+    }
+    render() {
+        return pageFooterLegalBarTemplate(this);
+    }
+}
+NLDDPageFooterLegalBar.styles = pageFooterLegalBarStyles;
+__decorate([
+    property({ type: String, attribute: 'accessible-label' })
+], NLDDPageFooterLegalBar.prototype, "accessibleLabel", void 0);
+__decorate([
+    property({ type: Object })
+], NLDDPageFooterLegalBar.prototype, "translations", void 0);
+__decorate([
+    state()
+], NLDDPageFooterLegalBar.prototype, "_hasStart", void 0);
+__decorate([
+    state()
+], NLDDPageFooterLegalBar.prototype, "_hasEnd", void 0);
+// Sub-component of nldd-page-footer — see note on
+// nldd-page-footer-legal-bar-item above for the guard-pattern rationale.
+if (!customElements.get('nldd-page-footer-legal-bar')) {
+    customElements.define('nldd-page-footer-legal-bar', NLDDPageFooterLegalBar);
+}
+// # nldd-page-footer
+let NLDDPageFooter = class NLDDPageFooter extends LitElement {
+    constructor() {
+        super(...arguments);
+        this._hasBreadcrumbs = false;
+        this._hasMain = false;
+        this._hasLegalBar = false;
+        this._onSlotChange = (e) => {
+            const slot = e.target;
+            const hasContent = this._hasMeaningfulContent(slot);
+            const name = slot.getAttribute('name') ?? '';
+            if (name === 'breadcrumbs')
+                this._hasBreadcrumbs = hasContent;
+            else if (name === 'legal-bar')
+                this._hasLegalBar = hasContent;
+            else
+                this._hasMain = hasContent;
+            const visibleCount = (this._hasBreadcrumbs ? 1 : 0) +
+                (this._hasMain ? 1 : 0) +
+                (this._hasLegalBar ? 1 : 0);
+            this.toggleAttribute('single-slot', visibleCount === 1);
+        };
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        // Expose the contentinfo landmark on the host. VoiceOver/Safari
+        // (and a few other AT+browser combos) don't reliably traverse a
+        // shadow root to surface a <footer> as a landmark, so the role
+        // goes on the host element where the AT tree builder always sees
+        // it. Don't override a consumer-provided role.
+        if (!this.hasAttribute('role')) {
+            this.setAttribute('role', 'contentinfo');
+        }
+        // Skip-link target: `<a href="#page-footer">` can only reach an id
+        // in the light DOM, not one inside our shadow root. Set it on the
+        // host (don't override a consumer-provided id).
+        if (!this.id) {
+            // DEV: warn on duplicate id="page-footer" in the document — a
+            // second nldd-page-footer (SPA without cleanup, repeated layout
+            // fragment) silently breaks HTML uniqueness (WCAG SC 4.1.1) and
+            // makes skip-links target the wrong instance. Check BEFORE
+            // setting this.id so we can't self-match.
+            if (import.meta.env?.DEV && document.getElementById('page-footer')) {
+                console.warn('<nldd-page-footer>: another element already has id="page-footer"; ' +
+                    'set a unique id on this instance so skip-links target the right one.');
+            }
+            this.id = 'page-footer';
+        }
+    }
+    _hasMeaningfulContent(slot) {
+        const nodes = slot?.assignedNodes({ flatten: true }) ?? [];
+        return nodes.some(n => n.nodeType === Node.ELEMENT_NODE
+            || (n.nodeType === Node.TEXT_NODE && (n.textContent?.trim() ?? '') !== ''));
+    }
+    render() {
+        return pageFooterTemplate(this);
+    }
+};
+NLDDPageFooter.styles = pageFooterStyles;
+__decorate([
+    state()
+], NLDDPageFooter.prototype, "_hasBreadcrumbs", void 0);
+__decorate([
+    state()
+], NLDDPageFooter.prototype, "_hasMain", void 0);
+__decorate([
+    state()
+], NLDDPageFooter.prototype, "_hasLegalBar", void 0);
+NLDDPageFooter = __decorate([
+    customElement('nldd-page-footer')
+], NLDDPageFooter);
+export { NLDDPageFooter };
+//# sourceMappingURL=page-footer.js.map

package/dist/components/layout/page-footer/page-footer.js.map

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

package/dist/components/layout/page-footer/page-footer.styles.d.ts

@@ -0,0 +1,4 @@
+export declare const pageFooterStyles: import("lit").CSSResult;
+export declare const pageFooterLegalBarStyles: import("lit").CSSResult;
+export declare const pageFooterLegalBarItemStyles: import("lit").CSSResult;
+//# sourceMappingURL=page-footer.styles.d.ts.map

package/dist/components/layout/page-footer/page-footer.styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"page-footer.styles.d.ts","sourceRoot":"","sources":["../../../../src/components/layout/page-footer/page-footer.styles.ts"],"names":[],"mappings":"AAQA,eAAO,MAAM,gBAAgB,yBAuI5B,CAAC;AAEF,eAAO,MAAM,wBAAwB,yBAoCpC,CAAC;AAEF,eAAO,MAAM,4BAA4B,yBA0BxC,CAAC"}

package/dist/components/layout/page-footer/page-footer.styles.js

@@ -0,0 +1,207 @@
+import { css, unsafeCSS } from 'lit';
+import { breakpoints } from '../../../assets/styles/breakpoints.js';
+const smMax = unsafeCSS(breakpoints.smMax);
+const mdMin = unsafeCSS(breakpoints.mdMin);
+const mdMax = unsafeCSS(breakpoints.mdMax);
+const lgMin = unsafeCSS(breakpoints.lgMin);
+export const pageFooterStyles = css `
+	:host {
+		--_max-width: var(--semantics-page-sections-body-max-width);
+		/* Official Rijksoverheid lintje colour — identical across all
+		   .rijks.app / .overheid.nl sites by visual-identity policy, so it
+		   intentionally lives outside the semantic token system. Local
+		   --_ var keeps the value discoverable in one place. */
+		--_lintje-color: #154273;
+		--context-parent-background-color: var(--components-page-footer-background-color);
+
+		@container (max-width: ${smMax}) {
+			--_lintje-width: var(--primitives-space-40);
+		}
+
+		@container (min-width: ${mdMin}) and (max-width: ${mdMax}) {
+			--_lintje-width: var(--primitives-space-44);
+		}
+
+		@container (min-width: ${lgMin}) {
+			--_lintje-width: var(--primitives-space-48);
+		}
+
+		container-type: inline-size;
+		display: block;
+		background-color: var(--components-page-footer-background-color);
+	}
+
+	:host([hidden]) {
+		display: none;
+	}
+
+	.page-footer {
+		--_lintje-height: calc(var(--_lintje-width) / 2);
+
+		box-sizing: border-box;
+		display: flex;
+		position: relative;
+		width: 100%;
+		flex-direction: column;
+		align-items: center;
+
+		@container (max-width: ${smMax}) {
+			padding-inline: var(--semantics-page-sections-sm-margin-inline);
+		}
+
+		@container (min-width: ${mdMin}) and (max-width: ${mdMax}) {
+			padding-inline: var(--semantics-page-sections-md-margin-inline);
+		}
+
+		@container (min-width: ${lgMin}) {
+			padding-inline: var(--semantics-page-sections-lg-margin-inline);
+		}
+	}
+
+	.page-footer::after {
+		content: '';
+		position: absolute;
+		bottom: 0;
+		left: 50%;
+		background-color: var(--_lintje-color);
+		width: var(--_lintje-width);
+		height: var(--_lintje-height);
+		transform: translateX(-50%);
+	}
+
+	@media (forced-colors: active) {
+		.page-footer::after {
+			background-color: ButtonText;
+		}
+	}
+
+	.page-footer__body {
+		display: flex;
+		width: 100%;
+		max-width: var(--_max-width);
+		flex-direction: column;
+	}
+
+	.page-footer__breadcrumbs,
+	.page-footer__legal-bar {
+		@container (max-width: ${smMax}) {
+			padding-block: var(--primitives-space-16);
+		}
+
+		@container (min-width: ${mdMin}) and (max-width: ${mdMax}) {
+			padding-block: var(--primitives-space-24);
+		}
+
+		@container (min-width: ${lgMin}) {
+			padding-block: var(--primitives-space-24);
+		}
+	}
+
+	.page-footer__main {
+		@container (max-width: ${smMax}) {
+			padding-block: var(--primitives-space-24);
+		}
+
+		@container (min-width: ${mdMin}) and (max-width: ${mdMax}) {
+			padding-block: var(--primitives-space-32);
+		}
+
+		@container (min-width: ${lgMin}) {
+			padding-block: var(--primitives-space-48);
+		}
+	}
+
+	.page-footer__body > div:not([hidden]):not(:has(~ div:not([hidden]))) {
+		padding-bottom: calc(var(--primitives-space-16) + var(--_lintje-height));
+	}
+
+	:host([single-slot]) .page-footer__body > div:not([hidden]) {
+		padding-top: calc(var(--primitives-space-16) + var(--_lintje-height));
+	}
+
+	.page-footer__breadcrumbs[hidden],
+	.page-footer__main[hidden],
+	.page-footer__legal-bar[hidden],
+	.page-footer__divider[hidden] {
+		display: none;
+	}
+
+	.page-footer__divider {
+		margin: 0;
+		border: none;
+		background-color: var(--components-page-footer-divider-color);
+		width: 100%;
+		height: var(--semantics-dividers-thickness);
+	}
+
+	@media (forced-colors: active) {
+		.page-footer__divider {
+			background-color: CanvasText;
+		}
+	}
+`;
+export const pageFooterLegalBarStyles = css `
+	:host {
+		display: block;
+	}
+
+	:host([hidden]) {
+		display: none;
+	}
+
+	.page-footer__legal-bar {
+		display: flex;
+		flex-wrap: wrap;
+		row-gap: var(--primitives-space-4);
+		column-gap: var(--primitives-space-16);
+		align-items: flex-start;
+		justify-content: space-between;
+	}
+
+	.page-footer__legal-bar-start {
+		display: flex;
+		flex-wrap: wrap;
+		gap: var(--primitives-space-12);
+		order: 0;
+	}
+
+	.page-footer__legal-bar-end {
+		display: flex;
+		flex-wrap: wrap;
+		gap: var(--primitives-space-12);
+		order: 1;
+	}
+
+	.page-footer__legal-bar-start[hidden],
+	.page-footer__legal-bar-end[hidden] {
+		display: none;
+	}
+`;
+export const pageFooterLegalBarItemStyles = css `
+	:host {
+		display: inline-flex;
+	}
+
+	:host([hidden]) {
+		display: none;
+	}
+
+	.page-footer__legal-bar-item {
+		display: inline-flex;
+		color: var(--components-page-footer-legal-bar-item-color);
+		font: var(--primitives-font-body-sm-regular-tight);
+	}
+
+	.page-footer__legal-bar-item-link {
+		color: var(--components-page-footer-legal-bar-item-color);
+		text-decoration: underline;
+	}
+
+	.page-footer__legal-bar-item-link:focus-visible {
+		outline: var(--semantics-focus-ring-outline);
+		outline-offset: var(--semantics-focus-ring-outline-offset);
+		border-radius: var(--primitives-corner-radius-xs);
+		box-shadow: var(--semantics-focus-ring-box-shadow);
+	}
+`;
+//# sourceMappingURL=page-footer.styles.js.map

package/dist/components/layout/page-footer/page-footer.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"page-footer.styles.js","sourceRoot":"","sources":["../../../../src/components/layout/page-footer/page-footer.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;AAC3C,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;;;;;;;;;;2BAUR,KAAK;;;;2BAIL,KAAK,qBAAqB,KAAK;;;;2BAI/B,KAAK;;;;;;;;;;;;;;;;;;;;;;;2BAuBL,KAAK;;;;2BAIL,KAAK,qBAAqB,KAAK;;;;2BAI/B,KAAK;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;2BA+BL,KAAK;;;;2BAIL,KAAK,qBAAqB,KAAK;;;;2BAI/B,KAAK;;;;;;2BAML,KAAK;;;;2BAIL,KAAK,qBAAqB,KAAK;;;;2BAI/B,KAAK;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAiC/B,CAAC;AAEF,MAAM,CAAC,MAAM,wBAAwB,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAoC1C,CAAC;AAEF,MAAM,CAAC,MAAM,4BAA4B,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;CA0B9C,CAAC"}

package/dist/components/layout/page-footer/page-footer.template.d.ts

@@ -0,0 +1,6 @@
+import { type TemplateResult } from 'lit';
+import type { NLDDPageFooter, NLDDPageFooterLegalBar, NLDDPageFooterLegalBarItem } from './page-footer.js';
+export declare function pageFooterTemplate(component: NLDDPageFooter): TemplateResult;
+export declare function pageFooterLegalBarTemplate(component: NLDDPageFooterLegalBar): TemplateResult;
+export declare function pageFooterLegalBarItemTemplate(component: NLDDPageFooterLegalBarItem): TemplateResult;
+//# sourceMappingURL=page-footer.template.d.ts.map

package/dist/components/layout/page-footer/page-footer.template.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"page-footer.template.d.ts","sourceRoot":"","sources":["../../../../src/components/layout/page-footer/page-footer.template.ts"],"names":[],"mappings":"AAAA,OAAO,EAAiB,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;AACzD,OAAO,KAAK,EAAE,cAAc,EAAE,sBAAsB,EAAE,0BAA0B,EAAE,MAAM,kBAAkB,CAAC;AAE3G,wBAAgB,kBAAkB,CAAC,SAAS,EAAE,cAAc,GAAG,cAAc,CAkC5E;AAED,wBAAgB,0BAA0B,CAAC,SAAS,EAAE,sBAAsB,GAAG,cAAc,CAmB5F;AAED,wBAAgB,8BAA8B,CAAC,SAAS,EAAE,0BAA0B,GAAG,cAAc,CAepG"}

package/dist/components/layout/page-footer/page-footer.template.js

@@ -0,0 +1,73 @@
+import { html, nothing } from 'lit';
+export function pageFooterTemplate(component) {
+    const showDividerAboveMain = component._hasBreadcrumbs && component._hasMain;
+    const showDividerAboveLegal = (component._hasBreadcrumbs || component._hasMain) && component._hasLegalBar;
+    // The host carries role="contentinfo" (set in connectedCallback) so AT
+    // that doesn't traverse the shadow root still sees the landmark. Using
+    // <div> here instead of <footer> avoids double-announcing the landmark
+    // in AT that DOES cross the boundary.
+    return html `
+		<div class="page-footer">
+			<div class="page-footer__body">
+				<div class="page-footer__breadcrumbs"
+					?hidden=${!component._hasBreadcrumbs}
+				>
+					<slot name="breadcrumbs" @slotchange=${component._onSlotChange}></slot>
+				</div>
+				<hr class="page-footer__divider"
+					?hidden=${!showDividerAboveMain}
+				>
+				<div class="page-footer__main"
+					?hidden=${!component._hasMain}
+				>
+					<slot @slotchange=${component._onSlotChange}></slot>
+				</div>
+				<hr class="page-footer__divider"
+					?hidden=${!showDividerAboveLegal}
+				>
+				<div class="page-footer__legal-bar"
+					?hidden=${!component._hasLegalBar}
+				>
+					<slot name="legal-bar" @slotchange=${component._onSlotChange}></slot>
+				</div>
+			</div>
+		</div>
+	`;
+}
+export function pageFooterLegalBarTemplate(component) {
+    const label = component._t('components.page-footer.legal-bar-accessible-label');
+    return html `
+		<nav class="page-footer__legal-bar"
+			aria-label=${label || nothing}
+			?hidden=${!component._hasStart && !component._hasEnd}
+		>
+			<div class="page-footer__legal-bar-start"
+				?hidden=${!component._hasStart}
+			>
+				<slot name="start" @slotchange=${component._onSlotChange}></slot>
+			</div>
+			<div class="page-footer__legal-bar-end"
+				?hidden=${!component._hasEnd}
+			>
+				<slot name="end" @slotchange=${component._onSlotChange}></slot>
+			</div>
+		</nav>
+	`;
+}
+export function pageFooterLegalBarItemTemplate(component) {
+    // `text=""` (empty string) intentionally falls through to the slot —
+    // Lit normalises the absent-attribute case to '', so a single falsy
+    // check covers both "no text attr" and "explicit empty text".
+    const label = component.text || html `<slot></slot>`;
+    if (component.href) {
+        return html `
+			<span class="page-footer__legal-bar-item">
+				<a class="page-footer__legal-bar-item-link"
+					href=${component.href}
+				>${label}</a>
+			</span>
+		`;
+    }
+    return html `<span class="page-footer__legal-bar-item">${label}</span>`;
+}
+//# sourceMappingURL=page-footer.template.js.map

package/dist/components/layout/page-footer/page-footer.template.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"page-footer.template.js","sourceRoot":"","sources":["../../../../src/components/layout/page-footer/page-footer.template.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,OAAO,EAAuB,MAAM,KAAK,CAAC;AAGzD,MAAM,UAAU,kBAAkB,CAAC,SAAyB;IAC3D,MAAM,oBAAoB,GAAG,SAAS,CAAC,eAAe,IAAI,SAAS,CAAC,QAAQ,CAAC;IAC7E,MAAM,qBAAqB,GAAG,CAAC,SAAS,CAAC,eAAe,IAAI,SAAS,CAAC,QAAQ,CAAC,IAAI,SAAS,CAAC,YAAY,CAAC;IAC1G,uEAAuE;IACvE,uEAAuE;IACvE,uEAAuE;IACvE,sCAAsC;IACtC,OAAO,IAAI,CAAA;;;;eAIG,CAAC,SAAS,CAAC,eAAe;;4CAEG,SAAS,CAAC,aAAa;;;eAGpD,CAAC,oBAAoB;;;eAGrB,CAAC,SAAS,CAAC,QAAQ;;yBAET,SAAS,CAAC,aAAa;;;eAGjC,CAAC,qBAAqB;;;eAGtB,CAAC,SAAS,CAAC,YAAY;;0CAEI,SAAS,CAAC,aAAa;;;;EAI/D,CAAC;AACH,CAAC;AAED,MAAM,UAAU,0BAA0B,CAAC,SAAiC;IAC3E,MAAM,KAAK,GAAG,SAAS,CAAC,EAAE,CAAC,mDAAmD,CAAC,CAAC;IAChF,OAAO,IAAI,CAAA;;gBAEI,KAAK,IAAI,OAAO;aACnB,CAAC,SAAS,CAAC,SAAS,IAAI,CAAC,SAAS,CAAC,OAAO;;;cAGzC,CAAC,SAAS,CAAC,SAAS;;qCAEG,SAAS,CAAC,aAAa;;;cAG9C,CAAC,SAAS,CAAC,OAAO;;mCAEG,SAAS,CAAC,aAAa;;;EAGxD,CAAC;AACH,CAAC;AAED,MAAM,UAAU,8BAA8B,CAAC,SAAqC;IACnF,qEAAqE;IACrE,oEAAoE;IACpE,8DAA8D;IAC9D,MAAM,KAAK,GAAG,SAAS,CAAC,IAAI,IAAI,IAAI,CAAA,eAAe,CAAC;IACpD,IAAI,SAAS,CAAC,IAAI,EAAE,CAAC;QACpB,OAAO,IAAI,CAAA;;;YAGD,SAAS,CAAC,IAAI;OACnB,KAAK;;GAET,CAAC;IACH,CAAC;IACD,OAAO,IAAI,CAAA,6CAA6C,KAAK,SAAS,CAAC;AACxE,CAAC"}