@nldd/design-system 0.8.37

package/dist/components/navigation/top-navigation-bar/top-navigation-bar.styles.js

@@ -0,0 +1,325 @@
+import { css, unsafeCSS } from 'lit';
+import { breakpoints } from '../../../assets/styles/breakpoints.js';
+const mdMin = unsafeCSS(breakpoints.mdMin);
+const mdMax = unsafeCSS(breakpoints.mdMax);
+const lgMin = unsafeCSS(breakpoints.lgMin);
+// # Top navigation bar styles
+export const topNavigationBarStyles = css `
+
+
+	/* # Host */
+
+	:host {
+		--_logo-width: var(--primitives-space-40);
+		--_wordmark-content-color: light-dark(var(--primitives-color-reference-lintblauw), var(--primitives-color-neutral-1000));
+		display: block;
+		width: 100%;
+
+		@media (min-width: ${mdMin}) {
+			--_logo-width: var(--primitives-space-44);
+		}
+
+		@media (min-width: ${lgMin}) {
+			--_logo-width: var(--primitives-space-48);
+		}
+
+		@container layout-area (min-width: ${mdMin}) {
+			--_logo-width: var(--primitives-space-44);
+		}
+
+		@container layout-area (min-width: ${lgMin}) {
+			--_logo-width: var(--primitives-space-48);
+		}
+	}
+
+	:host([hidden]) {
+		display: none;
+	}
+
+
+	/* # Block */
+
+	.top-navigation-bar {
+		display: flex;
+		flex-direction: column;
+		width: 100%;
+		margin: 0 auto;
+		box-sizing: border-box;
+		container-type: inline-size;
+		container-name: top-navigation-bar;
+	}
+
+
+	/* # Logo bar */
+
+	.top-navigation-bar__logo-bar {
+		display: grid;
+		grid-template-columns: 1fr auto 1fr;
+		gap: var(--primitives-space-8);
+		align-items: center;
+		padding-inline: var(--semantics-page-sections-sm-margin-inline);
+
+		@media (min-width: ${mdMin}) {
+			padding-inline: var(--semantics-page-sections-md-margin-inline);
+		}
+
+		@media (min-width: ${lgMin}) {
+			padding-inline: var(--semantics-page-sections-lg-margin-inline);
+		}
+
+		@container layout-area (min-width: ${mdMin}) {
+			padding-inline: var(--semantics-page-sections-md-margin-inline);
+		}
+
+		@container layout-area (min-width: ${lgMin}) {
+			padding-inline: var(--semantics-page-sections-lg-margin-inline);
+		}
+	}
+
+	/* ## Logo */
+
+	.top-navigation-bar__logo {
+		grid-column: 2;
+		align-self: start;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		width: var(--_logo-width);
+		height: calc(var(--_logo-width) * 2);
+	}
+
+	.top-navigation-bar__logo svg {
+		width: 100%;
+		height: 100%;
+	}
+
+	a.top-navigation-bar__logo {
+		color: inherit;
+		text-decoration: none;
+	}
+
+	a.top-navigation-bar__logo:focus-visible {
+		outline: var(--semantics-focus-ring-outline);
+		outline-offset: var(--semantics-focus-ring-outline-offset);
+		box-shadow: var(--semantics-focus-ring-box-shadow);
+	}
+
+	/* ## Logo and wordmark */
+
+	.top-navigation-bar__logo-and-wordmark {
+		grid-column: 2 / 4;
+		display: grid;
+		grid-template-columns: subgrid;
+		align-items: center;
+	}
+
+	.top-navigation-bar__logo-and-wordmark > .top-navigation-bar__logo {
+		grid-column: 1;
+	}
+
+	.top-navigation-bar__logo-and-wordmark > .top-navigation-bar__wordmark {
+		grid-column: 2;
+	}
+
+	a.top-navigation-bar__logo-and-wordmark {
+		text-decoration: none;
+	}
+
+	a.top-navigation-bar__logo-and-wordmark:focus-visible {
+		outline: var(--semantics-focus-ring-outline);
+		outline-offset: var(--semantics-focus-ring-outline-offset);
+		box-shadow: var(--semantics-focus-ring-box-shadow);
+	}
+
+	/* ## Wordmark */
+
+	.top-navigation-bar__wordmark {
+		grid-column: 3;
+		display: flex;
+		flex-direction: column;
+		min-height: calc(var(--_logo-width) * 2);
+		color: var(--_wordmark-content-color);
+	}
+
+	.top-navigation-bar__wordmark-spacer {
+		flex-grow: 0;
+		flex-shrink: 0;
+		height: var(--_logo-width);
+	}
+
+	.top-navigation-bar__wordmark-content {
+		display: flex;
+		flex-direction: column;
+		flex-grow: 1;
+		flex-shrink: 1;
+		flex-basis: 50%;
+	}
+
+	.top-navigation-bar__wordmark-title {
+		font: var(--primitives-font-body-sm-bold-flat);
+		margin: 0;
+	}
+
+	.top-navigation-bar__wordmark-subtitle {
+		font: var(--primitives-font-body-xs-regular-flat);
+		margin: 0;
+	}
+
+	.top-navigation-bar__wordmark-supporting-text {
+		font: var(--primitives-font-body-xxs-regular-flat);
+		margin: 0;
+	}
+
+
+	/* # Main bar */
+
+	.top-navigation-bar__main-bar {
+		display: flex;
+		flex-direction: column;
+		padding-inline: calc(var(--semantics-page-sections-sm-margin-inline) - var(--components-menu-bar-item-inline-padding));
+
+		@media (min-width: ${mdMin}) {
+			padding-inline: var(--semantics-page-sections-md-margin-inline);
+		}
+
+		@media (min-width: ${lgMin}) {
+			padding-inline: var(--semantics-page-sections-lg-margin-inline);
+		}
+
+		@container layout-area (min-width: ${mdMin}) {
+			padding-inline: var(--semantics-page-sections-md-margin-inline);
+		}
+
+		@container layout-area (min-width: ${lgMin}) {
+			padding-inline: var(--semantics-page-sections-lg-margin-inline);
+		}
+
+		@container top-navigation-bar (min-width: ${mdMin}) {
+			flex-direction: row;
+			align-items: center;
+		}
+	}
+
+	/* ## Title bar */
+
+	.top-navigation-bar__website-title-bar {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		padding: var(--primitives-space-4) var(--primitives-space-8);
+
+		@container top-navigation-bar (min-width: ${mdMin}) {
+			justify-content: flex-start;
+			padding: 0;
+		}
+	}
+
+	/* ## Title */
+
+	.top-navigation-bar__website-title {
+		font: var(--components-top-navigation-bar-title-sm-font);
+		color: var(--semantics-content-color);
+		white-space: nowrap;
+
+		@container top-navigation-bar (min-width: ${mdMin}) {
+			font: var(--components-top-navigation-bar-title-md-font);
+			/* Create spacing between title and menu-bar on md+ where they sit
+			   on the same row. On sm the title-bar stacks above the menu-bar
+			   and this margin would visually offset the centered title. */
+			margin-inline-end: var(--primitives-space-8);
+		}
+
+		@container top-navigation-bar (min-width: ${lgMin}) {
+			font: var(--components-top-navigation-bar-title-lg-font);
+		}
+	}
+
+	a.top-navigation-bar__website-title {
+		text-decoration: none;
+		border-radius: var(--primitives-corner-radius-xxs);
+	}
+
+	a.top-navigation-bar__website-title:focus-visible {
+		outline: var(--semantics-focus-ring-outline);
+		outline-offset: var(--semantics-focus-ring-outline-offset);
+		box-shadow: var(--semantics-focus-ring-box-shadow);
+	}
+
+	/* ## Menu bar */
+
+	.top-navigation-bar__menu-bar {
+		display: flex;
+		align-items: center;
+		flex-grow: 1;
+		min-width: 0;
+	}
+
+	/* ## Menu bar start */
+
+	.top-navigation-bar__menu-bar-start {
+		display: flex;
+		align-items: center;
+		min-width: 0;
+		flex-grow: 1;
+
+		@container top-navigation-bar (max-width: ${mdMax}) {
+			flex-shrink: 0;
+		}
+
+		@container top-navigation-bar (min-width: ${lgMin}) {
+			flex-shrink: 1;
+		}
+	}
+
+	/* ## Menu bar end */
+
+	.top-navigation-bar__menu-bar-end {
+		display: flex;
+		align-items: center;
+		min-width: 0;
+
+		@container top-navigation-bar (max-width: ${mdMax}) {
+			flex-shrink: 1;
+		}
+
+		@container top-navigation-bar (min-width: ${lgMin}) {
+			flex-shrink: 0;
+		}
+	}
+
+	/* ## Global bar */
+
+	.top-navigation-bar__global-menu-bar {
+		display: none;
+		flex-grow: 1;
+		flex-shrink: 1;
+		min-width: 0;
+		@container top-navigation-bar (min-width: ${lgMin}) {
+			:host(.has-global-items) & {
+				display: flex;
+			}
+		}
+	}
+
+	/* ## Menu button */
+
+	.top-navigation-bar__menu-button {
+		display: none;
+
+		@container top-navigation-bar (max-width: ${mdMax}) {
+			:host(.has-global-items) & {
+				display: inline-block;
+			}
+		}
+	}
+
+	/* ## Utility menu bar */
+
+	.top-navigation-bar__utility-menu-bar {
+		display: flex;
+		flex-grow: 1;
+		flex-shrink: 1;
+		min-width: 0;
+	}
+`;
+//# sourceMappingURL=top-navigation-bar.styles.js.map

package/dist/components/navigation/top-navigation-bar/top-navigation-bar.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"top-navigation-bar.styles.js","sourceRoot":"","sources":["../../../../src/components/navigation/top-navigation-bar/top-navigation-bar.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;AAE3C,8BAA8B;AAE9B,MAAM,CAAC,MAAM,sBAAsB,GAAG,GAAG,CAAA;;;;;;;;;;;uBAWlB,KAAK;;;;uBAIL,KAAK;;;;uCAIW,KAAK;;;;uCAIL,KAAK;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;uBAgCrB,KAAK;;;;uBAIL,KAAK;;;;uCAIW,KAAK;;;;uCAIL,KAAK;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;uBA2GrB,KAAK;;;;uBAIL,KAAK;;;;uCAIW,KAAK;;;;uCAIL,KAAK;;;;8CAIE,KAAK;;;;;;;;;;;;;;8CAcL,KAAK;;;;;;;;;;;;;8CAaL,KAAK;;;;;;;;8CAQL,KAAK;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;8CAiCL,KAAK;;;;8CAIL,KAAK;;;;;;;;;;;;8CAYL,KAAK;;;;8CAIL,KAAK;;;;;;;;;;;;8CAYL,KAAK;;;;;;;;;;;;8CAYL,KAAK;;;;;;;;;;;;;;;CAelD,CAAC"}

package/dist/components/navigation/top-navigation-bar/top-navigation-bar.template.d.ts

@@ -0,0 +1,3 @@
+import type { NLDDTopNavigationBar } from './top-navigation-bar.js';
+export declare function template(component: NLDDTopNavigationBar): import("lit-html").TemplateResult<1>;
+//# sourceMappingURL=top-navigation-bar.template.d.ts.map

package/dist/components/navigation/top-navigation-bar/top-navigation-bar.template.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"top-navigation-bar.template.d.ts","sourceRoot":"","sources":["../../../../src/components/navigation/top-navigation-bar/top-navigation-bar.template.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,yBAAyB,CAAC;AAkCpE,wBAAgB,QAAQ,CAAC,SAAS,EAAE,oBAAoB,wCA6FvD"}

package/dist/components/navigation/top-navigation-bar/top-navigation-bar.template.js

@@ -0,0 +1,126 @@
+import { html, nothing } from 'lit';
+import { unsafeHTML } from 'lit/directives/unsafe-html.js';
+import { sanitizeUrl } from '../../../utilities/sanitize-url.js';
+import logoSvg from './logo.js';
+// # Top navigation bar template
+function wordmarkContent(component) {
+    return html `
+		<div class="top-navigation-bar__wordmark">
+			<div class="top-navigation-bar__wordmark-spacer"></div>
+			<div class="top-navigation-bar__wordmark-content">
+				<p class="top-navigation-bar__wordmark-title">
+					${component.logoTitle}
+				</p>
+				${component.logoSubtitle ? html `
+					<p class="top-navigation-bar__wordmark-subtitle">
+						${component.logoSubtitle}
+					</p>
+				` : nothing}
+				${component.logoSupportingText1 ? html `
+					<p class="top-navigation-bar__wordmark-supporting-text">
+						${component.logoSupportingText1}
+					</p>
+				` : nothing}
+				${component.logoSupportingText2 ? html `
+					<p class="top-navigation-bar__wordmark-supporting-text">
+						${component.logoSupportingText2}
+					</p>
+				` : nothing}
+			</div>
+		</div>
+	`;
+}
+export function template(component) {
+    const safeLogoHref = sanitizeUrl(component.logoHref);
+    const safeWebsiteHref = sanitizeUrl(component.websiteHref);
+    return html `
+		<div class="top-navigation-bar">
+			${!component.noLogo ? html `<div class="top-navigation-bar__logo-bar">
+				${component.logoTitle && safeLogoHref ? html `
+					<a class="top-navigation-bar__logo-and-wordmark"
+						href="${safeLogoHref}"
+					>
+						<div class="top-navigation-bar__logo"
+							aria-hidden="true"
+						>
+							${unsafeHTML(logoSvg)}
+						</div>
+						${wordmarkContent(component)}
+					</a>
+				` : safeLogoHref ? html `
+					<a class="top-navigation-bar__logo"
+						href="${safeLogoHref}"
+						aria-label="${component._t('components.top-navigation-bar.logo-label')}"
+					>
+						<span aria-hidden="true">${unsafeHTML(logoSvg)}</span>
+					</a>
+				` : html `
+					<div class="top-navigation-bar__logo"
+						role="img"
+						aria-label="${component._t('components.top-navigation-bar.logo-label')}"
+					>
+						${unsafeHTML(logoSvg)}
+					</div>
+					${component.logoTitle ? wordmarkContent(component) : nothing}
+				`}
+			</div>` : nothing}
+			<div class="top-navigation-bar__main-bar">
+				${component.websiteTitle ? html `
+					<div class="top-navigation-bar__website-title-bar">
+						${safeWebsiteHref ? html `
+							<a class="top-navigation-bar__website-title"
+								href="${safeWebsiteHref}"
+							>
+								${component.websiteTitle}
+							</a>
+						` : html `
+							<span class="top-navigation-bar__website-title">
+								${component.websiteTitle}
+							</span>
+						`}
+					</div>
+				` : nothing}
+				<div class="top-navigation-bar__menu-bar">
+					<div class="top-navigation-bar__menu-bar-start">
+						${component._hasBackButton ? html `
+							<div class="top-navigation-bar__back-button">
+								<nldd-menu-bar-item
+									icon="arrow-left"
+									text="${component._backText}"
+									href=${component.backHref || nothing}
+									accessible-label="${component._backText}"
+									@click=${component._handleBackClick}
+								></nldd-menu-bar-item>
+							</div>
+						` : nothing}
+						<div class="top-navigation-bar__menu-button">
+							<nldd-menu-bar-item
+								icon="menu"
+								text="${component._menuText}"
+								haspopup="dialog"
+								@click=${component._onMenuButtonClick}
+							></nldd-menu-bar-item>
+						</div>
+						<div class="top-navigation-bar__global-menu-bar">
+							<nldd-menu-bar
+								accessible-label="${component._t('components.top-navigation-bar.global-menu-bar-label')}"
+							>
+								<slot name="global"></slot>
+							</nldd-menu-bar>
+						</div>
+					</div>
+					<div class="top-navigation-bar__menu-bar-end">
+						<div class="top-navigation-bar__utility-menu-bar">
+							<nldd-menu-bar
+								accessible-label="${component._t('components.top-navigation-bar.utility-menu-bar-label')}"
+							>
+								<slot name="utility"></slot>
+							</nldd-menu-bar>
+						</div>
+					</div>
+				</div>
+			</div>
+		</div>
+	`;
+}
+//# sourceMappingURL=top-navigation-bar.template.js.map

package/dist/components/navigation/top-navigation-bar/top-navigation-bar.template.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"top-navigation-bar.template.js","sourceRoot":"","sources":["../../../../src/components/navigation/top-navigation-bar/top-navigation-bar.template.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,OAAO,EAAE,MAAM,KAAK,CAAC;AACpC,OAAO,EAAE,UAAU,EAAE,MAAM,+BAA+B,CAAC;AAE3D,OAAO,EAAE,WAAW,EAAE,MAAM,oCAAoC,CAAC;AACjE,OAAO,OAAO,MAAM,WAAW,CAAC;AAEhC,gCAAgC;AAEhC,SAAS,eAAe,CAAC,SAA+B;IACvD,OAAO,IAAI,CAAA;;;;;OAKL,SAAS,CAAC,SAAS;;MAEpB,SAAS,CAAC,YAAY,CAAC,CAAC,CAAC,IAAI,CAAA;;QAE3B,SAAS,CAAC,YAAY;;KAEzB,CAAC,CAAC,CAAC,OAAO;MACT,SAAS,CAAC,mBAAmB,CAAC,CAAC,CAAC,IAAI,CAAA;;QAElC,SAAS,CAAC,mBAAmB;;KAEhC,CAAC,CAAC,CAAC,OAAO;MACT,SAAS,CAAC,mBAAmB,CAAC,CAAC,CAAC,IAAI,CAAA;;QAElC,SAAS,CAAC,mBAAmB;;KAEhC,CAAC,CAAC,CAAC,OAAO;;;EAGb,CAAC;AACH,CAAC;AAED,MAAM,UAAU,QAAQ,CAAC,SAA+B;IACvD,MAAM,YAAY,GAAG,WAAW,CAAC,SAAS,CAAC,QAAQ,CAAC,CAAC;IACrD,MAAM,eAAe,GAAG,WAAW,CAAC,SAAS,CAAC,WAAW,CAAC,CAAC;IAE3D,OAAO,IAAI,CAAA;;KAEP,CAAC,SAAS,CAAC,MAAM,CAAC,CAAC,CAAC,IAAI,CAAA;MACvB,SAAS,CAAC,SAAS,IAAI,YAAY,CAAC,CAAC,CAAC,IAAI,CAAA;;cAElC,YAAY;;;;;SAKjB,UAAU,CAAC,OAAO,CAAC;;QAEpB,eAAe,CAAC,SAAS,CAAC;;KAE7B,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,IAAI,CAAA;;cAEb,YAAY;oBACN,SAAS,CAAC,EAAE,CAAC,0CAA0C,CAAC;;iCAE3C,UAAU,CAAC,OAAO,CAAC;;KAE/C,CAAC,CAAC,CAAC,IAAI,CAAA;;;oBAGQ,SAAS,CAAC,EAAE,CAAC,0CAA0C,CAAC;;QAEpE,UAAU,CAAC,OAAO,CAAC;;OAEpB,SAAS,CAAC,SAAS,CAAC,CAAC,CAAC,eAAe,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC,OAAO;KAC5D;UACK,CAAC,CAAC,CAAC,OAAO;;MAEd,SAAS,CAAC,YAAY,CAAC,CAAC,CAAC,IAAI,CAAA;;QAE3B,eAAe,CAAC,CAAC,CAAC,IAAI,CAAA;;gBAEd,eAAe;;UAErB,SAAS,CAAC,YAAY;;OAEzB,CAAC,CAAC,CAAC,IAAI,CAAA;;UAEJ,SAAS,CAAC,YAAY;;OAEzB;;KAEF,CAAC,CAAC,CAAC,OAAO;;;QAGP,SAAS,CAAC,cAAc,CAAC,CAAC,CAAC,IAAI,CAAA;;;;iBAItB,SAAS,CAAC,SAAS;gBACpB,SAAS,CAAC,QAAQ,IAAI,OAAO;6BAChB,SAAS,CAAC,SAAS;kBAC9B,SAAS,CAAC,gBAAgB;;;OAGrC,CAAC,CAAC,CAAC,OAAO;;;;gBAID,SAAS,CAAC,SAAS;;iBAElB,SAAS,CAAC,kBAAkB;;;;;4BAKjB,SAAS,CAAC,EAAE,CAAC,qDAAqD,CAAC;;;;;;;;;4BASnE,SAAS,CAAC,EAAE,CAAC,sDAAsD,CAAC;;;;;;;;;EAS9F,CAAC;AACH,CAAC"}

package/dist/components/navigation/top-title-bar/top-title-bar.d.ts

@@ -0,0 +1,50 @@
+/**
+ * Nederlandse Digitale Dienst Top Title Bar Component (Lit + TypeScript)
+ *
+ * A toolbar for page and container headings with optional navigation and action buttons.
+ *
+ * The component has two states:
+ * - Default: the back button shows the previous page title as a text button
+ * - Compact (class `is-compact`): the back button is an icon button, a divider and the
+ *   toolbar title are visible
+ *
+ * When `collapse-anchor` is set, the `is-compact` class is automatically applied
+ * as soon as the top of the anchor element reaches the top of the scroll container.
+ *
+ * @slot toolbar - Optional buttons to the left of the dismiss button
+ *
+ * @fires back    - Fired when the back button is clicked (not fired when back-href is set)
+ * @fires dismiss - Fired when the dismiss button is clicked
+ */
+import { LitElement } from 'lit';
+export declare class NLDDTopTitleBar extends LitElement {
+    static styles: import("lit").CSSResult;
+    text: string;
+    supportingText: string;
+    collapseAnchor: string;
+    backText: string;
+    backHref: string;
+    dismissText: string;
+    _hasToolbarItems: boolean;
+    private _pageElement;
+    private _anchorElement;
+    private _activeScrollTarget;
+    private _boundOnScroll;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    updated(changed: Map<string, unknown>): void;
+    private _connectPage;
+    private _connectAnchor;
+    private _teardownAnchor;
+    private _onScroll;
+    _onToolbarSlotChange: (e: Event) => void;
+    _handleBack(): void;
+    _handleDismiss(): void;
+    render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'nldd-top-title-bar': NLDDTopTitleBar;
+    }
+}
+//# sourceMappingURL=top-title-bar.d.ts.map

package/dist/components/navigation/top-title-bar/top-title-bar.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"top-title-bar.d.ts","sourceRoot":"","sources":["../../../../src/components/navigation/top-title-bar/top-title-bar.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;GAiBG;AAEH,OAAO,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AAMjC,qBACa,eAAgB,SAAQ,UAAU;IAC9C,OAAgB,MAAM,0BAAqB;IAG3C,IAAI,SAAM;IAGV,cAAc,SAAM;IAGpB,cAAc,SAAM;IAGpB,QAAQ,SAAM;IAGd,QAAQ,SAAM;IAGd,WAAW,SAAM;IAGjB,gBAAgB,UAAS;IAEzB,OAAO,CAAC,YAAY,CAAwB;IAC5C,OAAO,CAAC,cAAc,CAAwB;IAC9C,OAAO,CAAC,mBAAmB,CAA4B;IACvD,OAAO,CAAC,cAAc,CAA6B;IAE1C,iBAAiB,IAAI,IAAI;IAUzB,oBAAoB,IAAI,IAAI;IAK5B,OAAO,CAAC,OAAO,EAAE,GAAG,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,IAAI;IAWrD,OAAO,CAAC,YAAY;IAgBpB,OAAO,CAAC,cAAc;IAiBtB,OAAO,CAAC,eAAe;IAMvB,OAAO,CAAC,SAAS;IAOjB,oBAAoB,GAAI,GAAG,KAAK,UAG9B;IAEF,WAAW,IAAI,IAAI;IAKnB,cAAc,IAAI,IAAI;IAIb,MAAM;CAGf;AAED,OAAO,CAAC,MAAM,CAAC;IACd,UAAU,qBAAqB;QAC9B,oBAAoB,EAAE,eAAe,CAAC;KACtC;CACD"}

package/dist/components/navigation/top-title-bar/top-title-bar.js

@@ -0,0 +1,149 @@
+/**
+ * Nederlandse Digitale Dienst Top Title Bar Component (Lit + TypeScript)
+ *
+ * A toolbar for page and container headings with optional navigation and action buttons.
+ *
+ * The component has two states:
+ * - Default: the back button shows the previous page title as a text button
+ * - Compact (class `is-compact`): the back button is an icon button, a divider and the
+ *   toolbar title are visible
+ *
+ * When `collapse-anchor` is set, the `is-compact` class is automatically applied
+ * as soon as the top of the anchor element reaches the top of the scroll container.
+ *
+ * @slot toolbar - Optional buttons to the left of the dismiss button
+ *
+ * @fires back    - Fired when the back button is clicked (not fired when back-href is set)
+ * @fires dismiss - Fired when the dismiss button is clicked
+ */
+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;
+};
+import { LitElement } from 'lit';
+import { customElement, property, state } from 'lit/decorators.js';
+import { topTitleBarStyles } from './top-title-bar.styles.js';
+import { topTitleBarTemplate } from './top-title-bar.template.js';
+let NLDDTopTitleBar = class NLDDTopTitleBar extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.text = '';
+        this.supportingText = '';
+        this.collapseAnchor = '';
+        this.backText = '';
+        this.backHref = '';
+        this.dismissText = '';
+        this._hasToolbarItems = false;
+        this._pageElement = null;
+        this._anchorElement = null;
+        this._activeScrollTarget = null;
+        this._boundOnScroll = this._onScroll.bind(this);
+        this._onToolbarSlotChange = (e) => {
+            const slot = e.target;
+            this._hasToolbarItems = slot.assignedElements().length > 0;
+        };
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this._connectPage();
+        this._connectAnchor();
+        // Without a collapse-anchor there is no scroll trigger — always compact
+        if (!this.collapseAnchor) {
+            this.classList.add('is-compact');
+        }
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        this._teardownAnchor();
+    }
+    updated(changed) {
+        if (changed.has('collapseAnchor')) {
+            this._teardownAnchor();
+            if (this.collapseAnchor) {
+                this._connectAnchor();
+            }
+            else {
+                this.classList.add('is-compact');
+            }
+        }
+    }
+    _connectPage() {
+        let el = this;
+        while (el) {
+            if (el.tagName.toLowerCase() === 'nldd-page') {
+                this._pageElement = el;
+                return;
+            }
+            // Traverse up, piercing shadow DOM boundaries via getRootNode().host
+            el = el.parentElement ?? (el.getRootNode() instanceof ShadowRoot
+                ? el.getRootNode().host
+                : null);
+        }
+    }
+    _connectAnchor() {
+        if (!this.collapseAnchor)
+            return;
+        const root = this.getRootNode();
+        this._anchorElement = root.getElementById?.(this.collapseAnchor)
+            ?? root.querySelector(`#${this.collapseAnchor}`);
+        if (!this._anchorElement)
+            return;
+        const page = this._pageElement;
+        this._activeScrollTarget = page ? page.scrollTarget : window;
+        this._activeScrollTarget.addEventListener('scroll', this._boundOnScroll, { passive: true });
+        // Initial check after layout is complete
+        this.updateComplete.then(() => this._onScroll());
+    }
+    _teardownAnchor() {
+        this._activeScrollTarget?.removeEventListener('scroll', this._boundOnScroll);
+        this._activeScrollTarget = null;
+        this._anchorElement = null;
+    }
+    _onScroll() {
+        if (!this._anchorElement || !this._pageElement)
+            return;
+        const pageTop = this._pageElement.getBoundingClientRect().top;
+        const anchorTop = this._anchorElement.getBoundingClientRect().top;
+        this.classList.toggle('is-compact', anchorTop <= pageTop);
+    }
+    _handleBack() {
+        if (this.backHref)
+            return;
+        this.dispatchEvent(new CustomEvent('back', { bubbles: true, composed: true }));
+    }
+    _handleDismiss() {
+        this.dispatchEvent(new CustomEvent('dismiss', { bubbles: true, composed: true }));
+    }
+    render() {
+        return topTitleBarTemplate(this);
+    }
+};
+NLDDTopTitleBar.styles = topTitleBarStyles;
+__decorate([
+    property({ type: String })
+], NLDDTopTitleBar.prototype, "text", void 0);
+__decorate([
+    property({ type: String, attribute: 'supporting-text' })
+], NLDDTopTitleBar.prototype, "supportingText", void 0);
+__decorate([
+    property({ type: String, attribute: 'collapse-anchor' })
+], NLDDTopTitleBar.prototype, "collapseAnchor", void 0);
+__decorate([
+    property({ type: String, attribute: 'back-text' })
+], NLDDTopTitleBar.prototype, "backText", void 0);
+__decorate([
+    property({ type: String, attribute: 'back-href' })
+], NLDDTopTitleBar.prototype, "backHref", void 0);
+__decorate([
+    property({ type: String, attribute: 'dismiss-text' })
+], NLDDTopTitleBar.prototype, "dismissText", void 0);
+__decorate([
+    state()
+], NLDDTopTitleBar.prototype, "_hasToolbarItems", void 0);
+NLDDTopTitleBar = __decorate([
+    customElement('nldd-top-title-bar')
+], NLDDTopTitleBar);
+export { NLDDTopTitleBar };
+//# sourceMappingURL=top-title-bar.js.map

package/dist/components/navigation/top-title-bar/top-title-bar.js.map

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

package/dist/components/navigation/top-title-bar/top-title-bar.styles.d.ts

@@ -0,0 +1,2 @@
+export declare const topTitleBarStyles: import("lit").CSSResult;
+//# sourceMappingURL=top-title-bar.styles.d.ts.map

package/dist/components/navigation/top-title-bar/top-title-bar.styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"top-title-bar.styles.d.ts","sourceRoot":"","sources":["../../../../src/components/navigation/top-title-bar/top-title-bar.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,iBAAiB,yBA4J7B,CAAC"}