@nldd/design-system 0.8.79 → 0.8.82

package/dist/components/icon-button-BAkUJTn6.js

@@ -0,0 +1,1676 @@
+import { t as inheritedTextReset } from "./shadow-resets-aG-rgyNQ.js";
+import { t as __decorate } from "./decorate-BKn10QQi.js";
+import { t as withTranslations } from "./with-translations-DzAdFTK8.js";
+import { t as reflectNonDefault } from "./reflect-non-default-OLaK60rT.js";
+import "./icon-CIpJq_cf.js";
+import { r as isTouchMode } from "./input-modality-DhTeUxKi.js";
+import { LitElement, css, html, nothing } from "lit";
+import { customElement, property, state } from "lit/decorators.js";
+import { classMap } from "lit/directives/class-map.js";
+import { computePosition, flip, offset, shift } from "@floating-ui/dom";
+//#region src/utilities/popup-anchor-controller.ts
+var OVERLAY_SELECTOR = "nldd-menu, nldd-popover";
+var PopupAnchorController = class {
+	constructor(host, options = {}) {
+		this._overlay = null;
+		this._wasOpenOnPointerdown = false;
+		this.handleSlotChange = (event) => {
+			const overlay = event.target.assignedElements().find((el) => el.matches(OVERLAY_SELECTOR)) ?? null;
+			this.setOverlay(overlay);
+		};
+		this.handlePointerdown = () => {
+			this._wasOpenOnPointerdown = this._overlay?.matches(":popover-open") ?? false;
+		};
+		this._anchorFor = options.anchorFor ?? (() => host);
+		this._onChange = options.onChange;
+	}
+	/** The slotted overlay, or null when none is slotted. */
+	get overlay() {
+		return this._overlay;
+	}
+	/** Adopt an overlay (or none). Releases the previous one first: left
+	*  anchored, a removed overlay keeps positioning against this control and
+	*  syncing `expanded` onto it, and the pair can never be collected. */
+	setOverlay(overlay) {
+		if (overlay === this._overlay) return;
+		const previous = this._overlay;
+		if (previous) previous.anchorElement = null;
+		this._overlay = overlay;
+		this.anchor();
+		this._onChange?.(overlay, previous);
+	}
+	/** (Re-)anchor the current overlay. Call once the anchor target exists when
+	*  it resolves later than the first `slotchange`. */
+	anchor() {
+		const target = this._anchorFor();
+		if (this._overlay && target) this._overlay.anchorElement = target;
+	}
+	/** Call from the control's click handler. Returns true when the click was
+	*  consumed (an overlay is slotted, so the control is its invoker and
+	*  neither submits a form nor navigates); false to fall through. */
+	handleClick(event) {
+		if (!this._overlay) return false;
+		const wasOpen = event.detail > 0 && this._wasOpenOnPointerdown;
+		this._wasOpenOnPointerdown = false;
+		if (!wasOpen && !this._overlay.matches(":popover-open")) this._overlay.showPopover();
+		return true;
+	}
+};
+//#endregion
+//#region src/components/status-and-feedback/activity-indicator/activity-indicator.styles.ts
+var activityIndicatorStyles = css`
+	:host {
+		box-sizing: border-box;
+	}
+
+
+	/* # Host */
+
+	:host {
+		--_circle-size: var(--primitives-space-32);
+		--_color: var(--context-content-color, currentColor);
+		--_track-opacity: 0.25;
+		--_stroke-width: 2;
+		--_rotation-duration: 0.8s;
+		--_fade-duration: var(--primitives-transition-duration-slow);
+		--_fade-easing: ease-out;
+		--_pulse-duration: 2s;
+		--_pulse-easing: ease-in-out;
+		--_max-width: var(--primitives-area-240);
+		--_gap: var(--primitives-space-4);
+		--_text-font: var(--primitives-font-body-sm-regular-flat);
+		--_backdrop-blur: 3px;
+		--_overlay-panel-padding: var(--primitives-space-12);
+		--_overlay-panel-corner-radius: var(--primitives-corner-radius-md);
+
+		${inheritedTextReset}
+		box-sizing: border-box;
+		display: flex;
+		flex-grow: 1;
+		flex-shrink: 1;
+		flex-basis: auto;
+		width: 100%;
+		height: 100%;
+		align-items: center;
+		justify-content: center;
+	}
+
+	:host([hidden]) {
+		display: none;
+	}
+
+	/* Overlay mode (content in the default slot): the host wraps the content and
+	   is the containing block for the absolutely-positioned indicator + backdrop,
+	   so it sizes to the content instead of filling its parent. */
+	:host([has-content]) {
+		display: block;
+		position: relative;
+		height: auto;
+	}
+
+
+	/* ## Sizes (icon scale) */
+
+	:host([size="16"]) { --_circle-size: var(--primitives-space-16); }
+	:host([size="20"]) { --_circle-size: var(--primitives-space-20); }
+	:host([size="24"]) { --_circle-size: var(--primitives-space-24); }
+	:host([size="28"]) { --_circle-size: var(--primitives-space-28); }
+	:host([size="40"]) { --_circle-size: var(--primitives-space-40); }
+	:host([size="44"]) { --_circle-size: var(--primitives-space-44); }
+	:host([size="48"]) { --_circle-size: var(--primitives-space-48); }
+	:host([size="56"]) { --_circle-size: var(--primitives-space-56); }
+	:host([size="64"]) { --_circle-size: var(--primitives-space-64); }
+	:host([size="80"]) { --_circle-size: var(--primitives-space-80); }
+	:host([size="96"]) { --_circle-size: var(--primitives-space-96); }
+
+
+	/* # Block
+	   Stacks the default circle + label as a centered column. width:100% +
+	   max-width gives a slotted progress-bar a width to fill; the fixed-size
+	   circle and the label stay centered via align-items. */
+
+	.activity-indicator {
+		/* position:relative so it paints above the absolutely-positioned backdrop
+		   (both are z-index:auto; the backdrop comes first in the DOM). Hidden by
+		   default; the loading host attribute fades it (and the backdrop) in and
+		   out — opacity + display via transition-behavior: allow-discrete, with a
+		   starting-style for the entry. */
+		position: relative;
+		display: none;
+		opacity: 0;
+		pointer-events: none;
+		width: 100%;
+		max-width: var(--_max-width);
+		flex-direction: column;
+		align-items: center;
+		gap: var(--_gap);
+		transition-property: opacity, display;
+		transition-duration: var(--_fade-duration);
+		transition-timing-function: var(--_fade-easing);
+		transition-behavior: allow-discrete;
+	}
+
+	:host([loading]) .activity-indicator {
+		display: flex;
+		opacity: 1;
+	}
+
+	@starting-style {
+		:host([loading]) .activity-indicator {
+			opacity: 0;
+		}
+	}
+
+	/* Overlay mode: the wrapped content flows normally; the indicator + backdrop
+	   sit on top as absolute layers that fill the host. */
+	.activity-indicator__content {
+		display: block;
+	}
+
+	/* Overlay mode: the indicator + label sit on a small rounded base-surface
+	   panel that hugs them with padding (not the full component width) so they
+	   keep contrast over the dimmed content, and read in the content color
+	   instead of inheriting currentColor. */
+	:host([has-content]) .activity-indicator {
+		box-sizing: border-box;
+		position: absolute;
+		top: 50%;
+		left: 50%;
+		border-radius: var(--_overlay-panel-corner-radius);
+		background-color: var(--semantics-surfaces-base-background-color);
+		width: max-content;
+		max-width: calc(100% - var(--primitives-space-32));
+		padding: var(--_overlay-panel-padding);
+		color: var(--semantics-content-color);
+		transform: translate(-50%, -50%);
+	}
+
+	/* Dimming layer (overlay mode, on by default; opt out with no-backdrop): the
+	   context parent background color — fallback the base surface — at one minus
+	   the disabled opacity, so the content underneath reads as inactive while
+	   loading. Fades in and out with the indicator via the loading attribute. */
+	.activity-indicator__backdrop {
+		position: absolute;
+		inset: 0;
+		display: none;
+		opacity: 0;
+		/* Frosted dim: the parent surface — fallback base surface — as a
+		   translucent fill at one minus the disabled opacity (a translucent
+		   color, not element opacity, which would hide the blur), plus a blur so
+		   the content behind reads as inactive. backdrop-filter degrades
+		   gracefully where unsupported, leaving just the translucent fill. */
+		background-color: color-mix(in oklab, var(--context-parent-background-color, var(--semantics-surfaces-base-background-color)) calc((1 - var(--primitives-opacity-disabled)) * 100%), transparent);
+		-webkit-backdrop-filter: blur(var(--_backdrop-blur));
+		backdrop-filter: blur(var(--_backdrop-blur));
+		pointer-events: none;
+		transition-property: opacity, display;
+		transition-duration: var(--_fade-duration);
+		transition-timing-function: var(--_fade-easing);
+		transition-behavior: allow-discrete;
+	}
+
+	:host([loading]) .activity-indicator__backdrop {
+		display: block;
+		opacity: 1;
+	}
+
+	@starting-style {
+		:host([loading]) .activity-indicator__backdrop {
+			opacity: 0;
+		}
+	}
+
+	/* display:contents so the default circle + label (or a slotted override)
+	   are direct flex items of the block. */
+	slot {
+		display: contents;
+	}
+
+
+	/* # Elements */
+
+	/* The whole SVG (stroke included) scales with the size, like an icon. */
+	.activity-indicator__circle {
+		display: block;
+		width: var(--_circle-size);
+		height: var(--_circle-size);
+	}
+
+	.activity-indicator__track {
+		opacity: var(--_track-opacity);
+		stroke: var(--_color);
+		stroke-width: var(--_stroke-width);
+	}
+
+	/* Rotate only the arc inside the SVG (around the view-box center via
+	   transform-origin) rather than the whole <svg> element — rotating the
+	   element visibly wobbles when it sits at a sub-pixel position (next to a
+	   label, or overlaid on a button). Mirrors nldd-progress-circle. */
+	.activity-indicator__indicator {
+		stroke: var(--_color);
+		stroke-width: var(--_stroke-width);
+		stroke-linecap: round;
+		stroke-dasharray: 25 100;
+		transform-origin: 50% 50%;
+		animation: activity-indicator-rotate var(--_rotation-duration) linear infinite;
+	}
+
+	@keyframes activity-indicator-rotate {
+		to { transform: rotate(360deg); }
+	}
+
+	.activity-indicator__text {
+		color: currentColor;
+		font: var(--_text-font);
+		text-align: center;
+	}
+
+	/* show-text off (default): the label still renders as the announced
+	   content of the role="status" host, but is visually hidden.
+	   Standard visually-hidden recipe. */
+	.activity-indicator__text--visually-hidden {
+		position: absolute;
+		width: 1px;
+		height: 1px;
+		overflow: hidden;
+		clip-path: inset(50%);
+		white-space: nowrap;
+	}
+
+
+	/* # Reduced Motion */
+
+	@media (prefers-reduced-motion: reduce) {
+		.activity-indicator,
+		.activity-indicator__backdrop {
+			transition: none;
+		}
+
+		.activity-indicator__indicator {
+			/* Drop the rotation (vestibular safety); keep the 25 / 100 arc and
+			   pulse its opacity instead, mirroring nldd-progress-circle. */
+			animation: activity-indicator-pulse var(--_pulse-duration) var(--_pulse-easing) infinite;
+		}
+
+		@keyframes activity-indicator-pulse {
+			0%, 100% { opacity: 0.3; }
+			50% { opacity: 0.7; }
+		}
+	}
+`;
+//#endregion
+//#region src/components/status-and-feedback/activity-indicator/activity-indicator.template.ts
+function activityIndicatorTemplate(component) {
+	const disableContent = component._visible && !component.complete && component._hasContent;
+	const renderBackdrop = component._hasContent && !component.noBackdrop;
+	const text = component._accessibleName;
+	return html`
+		<div class="activity-indicator__content"
+			?inert=${disableContent}
+			aria-busy=${disableContent ? "true" : "false"}
+		>
+			<slot @slotchange=${component._onContentSlotChange}></slot>
+		</div>
+		${renderBackdrop ? html`<div class="activity-indicator__backdrop" aria-hidden="true"></div>` : nothing}
+		<div class="activity-indicator">
+			<slot name="indicator">
+				<svg class="activity-indicator__circle"
+					viewBox="0 0 24 24"
+					fill="none"
+					aria-hidden="true"
+					focusable="false"
+				>
+					<circle class="activity-indicator__track"
+						cx="12"
+						cy="12"
+						r="9"
+					></circle>
+					<circle class="activity-indicator__indicator"
+						cx="12"
+						cy="12"
+						r="9"
+						pathLength="100"
+					></circle>
+				</svg>
+				<span class=${classMap({
+		"activity-indicator__text": true,
+		"activity-indicator__text--visually-hidden": !component.showText
+	})}>${text}</span>
+			</slot>
+		</div>
+	`;
+}
+//#endregion
+//#region src/components/status-and-feedback/activity-indicator/activity-indicator.i18n.ts
+var nlddActivityIndicatorTranslations = { "components.activity-indicator.loading-label": "Laden" };
+//#endregion
+//#region src/components/status-and-feedback/activity-indicator/activity-indicator.ts
+/**
+* Nederlandse Digitale Dienst Activity Indicator Component (Lit + TypeScript)
+*
+* Layout placeholder that fills its parent and centers an indeterminate
+* activity indicator. By default the indicator is held back for 1000ms so
+* brief loading states don't flash; once the delay passes it fades in. Set
+* `timing="instant"` to skip the delay (the fade-in still plays) — this is
+* what embedding components such as `nldd-button` use for their loading state.
+*
+* The default indicator is a simple icon-sized circle that follows the shared
+* `--context-content-color` channel (set by list-item / table / menu on their
+* content), falling back to `currentColor` wherever that channel is unset
+* (buttons, rich-text, standalone) — so a spinner inside a cell tracks the
+* row's state-aware content color, while embedders relying on currentColor are
+* unaffected. An optional label sits below (hidden unless `show-text` is set).
+* Drop a
+* `<nldd-progress-circle>`, `<nldd-progress-bar>` or any element in the
+* `indicator` slot to override it.
+*
+* Icon alignment: the visible ring already sits at 5/6 of its box (the SVG's
+* r=9 plus a 2-unit stroke in a 24 view-box, the same optical inset a filled
+* icon glyph has), so a standalone spinner lines up with an icon or an
+* `icon-aligned` `nldd-avatar` on the same grid — no extra option needed
+* (unlike `nldd-avatar`, which fills edge-to-edge and opts in via
+* `icon-aligned`).
+*
+* Overlay mode: put content in the default slot and the indicator wraps it — it
+* becomes a `position: relative` container, renders the spinner over a dimming
+* backdrop (opt out with `no-backdrop`), and makes the content `inert` so its
+* controls can't be focused or clicked. Toggle loading with `complete`
+* (`?complete=${!isLoading}`). With no slotted content it stays the standalone
+* placeholder described above.
+*
+* Reconnect behavior: every `connectedCallback` resets the timer and hides
+* the indicator again. If a consumer toggles the element via a conditional
+* render (remove + re-insert) the indicator disappears and re-fades after
+* another delay. Keep the element mounted and toggle visibility / `hidden`
+* instead if you want the timer to run only once.
+*
+* Accessibility: while connected and not `complete` the host is a polite live
+* region (`role="status"`). The label (`text`, or the translated "Laden"
+* fallback) always renders as the region's content — visually hidden when
+* `show-text` is off (the default) — so assistive tech announces the loading
+* state when the indicator appears. Set `complete` (or unmount) to clear it.
+*
+* @element nldd-activity-indicator
+*
+* @attr {string} size - Circle diameter on the icon scale: 16,20,24,28,32,40,44,48,56,64,80,96 (default '32')
+* @attr {boolean} show-text - Show the label under the indicator (default false; the label still feeds the accessible name)
+* @attr {string} text - Label text. Falls back to the translated "Laden" when unset.
+* @attr {'default'|'instant'} timing - 'default' waits 1000ms before showing (anti-flash); 'instant' shows immediately (the fade-in still plays). Default 'default'.
+* @attr {boolean} complete - Mark the loader as finished while keeping the element mounted; clears aria-busy and hides the indicator.
+* @attr {boolean} no-backdrop - Overlay mode dims and blurs the wrapped content with a frosted backdrop by default; set this to show only the indicator panel without dimming. No effect in standalone mode.
+* @attr {object} translations - Override translation keys; unset keys fall back to Dutch
+*
+* @slot - Content to wrap (overlay mode); made inert while loading. Leave empty
+*   for the standalone placeholder.
+* @slot indicator - Optional custom indicator; overrides the default circle (and
+*   its visually-hidden label). Consumers replacing it supply their own indicator
+*   semantics; the host's role="status" still marks the loading region.
+*
+* @migration The custom-indicator override moved from the default slot to the
+*   `indicator` slot, since the default slot now holds wrapped content:
+*   `<nldd-progress-bar slot="indicator">`.
+*/
+var _NLDDActivityIndicator;
+/** Delay before the indicator fades in. Brief loading states finish within
+*  this window and the indicator is never shown — avoids a jarring flash. */
+var DELAY_MS = 1e3;
+var NLDDActivityIndicator = (_NLDDActivityIndicator = class NLDDActivityIndicator extends LitElement {
+	constructor(..._args) {
+		super(..._args);
+		this.size = "32";
+		this.showText = false;
+		this.text = "";
+		this.timing = "default";
+		this.complete = false;
+		this.noBackdrop = false;
+		this.translations = {};
+		this._visible = false;
+		this._hasContent = false;
+		this._onContentSlotChange = (e) => {
+			const slot = e.target;
+			this._hasContent = slot.assignedElements().length > 0;
+		};
+	}
+	_t(key) {
+		return this.translations[key] ?? nlddActivityIndicatorTranslations[key];
+	}
+	/** Accessible name announced while loading. */
+	get _accessibleName() {
+		return this.text || this._t("components.activity-indicator.loading-label");
+	}
+	connectedCallback() {
+		super.connectedCallback();
+		this._syncAria();
+		this._visible = this.timing === "instant";
+		if (!this._visible && !this.complete) this._scheduleDelay();
+	}
+	willUpdate(changed) {
+		if (changed.has("complete")) this._syncAria();
+		if (changed.has("timing")) {
+			this._clearDelay();
+			if (this.timing === "instant") this._visible = true;
+			else if (!this._visible && !this.complete) this._scheduleDelay();
+		}
+	}
+	disconnectedCallback() {
+		super.disconnectedCallback();
+		this._clearDelay();
+	}
+	_clearDelay() {
+		if (this._delayTimeout) {
+			clearTimeout(this._delayTimeout);
+			this._delayTimeout = void 0;
+		}
+	}
+	_scheduleDelay() {
+		this._delayTimeout = setTimeout(() => {
+			this._visible = true;
+			this._delayTimeout = void 0;
+		}, DELAY_MS);
+	}
+	/** A polite live region (role="status") while loading; cleared when
+	*  complete. The announced text is the visually-hidden label rendered by
+	*  the template — not an aria-label, and without aria-busy, since a busy
+	*  live region would defer the very announcement we want. */
+	_syncAria() {
+		if (this.complete) this.removeAttribute("role");
+		else this.setAttribute("role", "status");
+	}
+	updated() {
+		this.toggleAttribute("loading", this._visible && !this.complete);
+		this.toggleAttribute("has-content", this._hasContent);
+	}
+	render() {
+		return activityIndicatorTemplate(this);
+	}
+}, _NLDDActivityIndicator.styles = activityIndicatorStyles, _NLDDActivityIndicator);
+__decorate([property({
+	reflect: true,
+	converter: reflectNonDefault("32")
+})], NLDDActivityIndicator.prototype, "size", void 0);
+__decorate([property({
+	type: Boolean,
+	reflect: true,
+	attribute: "show-text"
+})], NLDDActivityIndicator.prototype, "showText", void 0);
+__decorate([property({
+	reflect: true,
+	converter: reflectNonDefault("")
+})], NLDDActivityIndicator.prototype, "text", void 0);
+__decorate([property({
+	reflect: true,
+	converter: reflectNonDefault("default")
+})], NLDDActivityIndicator.prototype, "timing", void 0);
+__decorate([property({
+	type: Boolean,
+	reflect: true
+})], NLDDActivityIndicator.prototype, "complete", void 0);
+__decorate([property({
+	type: Boolean,
+	reflect: true,
+	attribute: "no-backdrop"
+})], NLDDActivityIndicator.prototype, "noBackdrop", void 0);
+__decorate([property({ type: Object })], NLDDActivityIndicator.prototype, "translations", void 0);
+__decorate([state()], NLDDActivityIndicator.prototype, "_visible", void 0);
+__decorate([state()], NLDDActivityIndicator.prototype, "_hasContent", void 0);
+NLDDActivityIndicator = __decorate([customElement("nldd-activity-indicator")], NLDDActivityIndicator);
+//#endregion
+//#region src/components/actions/icon-button/icon-button.styles.ts
+var iconButtonStyles = css`
+	:host {
+		box-sizing: border-box;
+	}
+
+
+	/* # Host */
+
+	:host {
+		--_corner-radius: var(--semantics-controls-md-corner-radius);
+		--_width: auto;
+		--_min-size: var(--semantics-controls-md-min-size);
+		--_block-padding: var(--semantics-buttons-md-is-icon-only-inline-padding);
+		--_inline-padding: var(--semantics-buttons-md-is-icon-only-inline-padding);
+		--_icon-size: var(--semantics-buttons-md-is-icon-only-icon-size);
+		--_disclosure-icon-margin-right: calc(var(--primitives-space-2) * -1);
+		--_disclosure-icon-size: var(--primitives-space-20);
+		--_text-display: none;
+		--_text-font: var(--primitives-font-body-xxs-medium-flat);
+		--_background-color: var(--semantics-buttons-neutral-tinted-background-color);
+		--_primary-content-color: var(--semantics-buttons-neutral-tinted-content-color);
+		--_highlight-border-color: var(--semantics-buttons-neutral-tinted-highlight-border-color);
+		--_is-hovered-background-color: var(--semantics-buttons-neutral-tinted-is-hovered-background-color);
+		--_is-hovered-primary-content-color: var(--semantics-buttons-neutral-tinted-is-hovered-content-color);
+		--_is-hovered-highlight-border-color: var(--semantics-buttons-neutral-tinted-is-hovered-highlight-border-color);
+		--_is-active-background-color: var(--semantics-buttons-neutral-tinted-is-active-background-color);
+		--_is-active-primary-content-color: var(--semantics-buttons-neutral-tinted-is-active-content-color);
+		--_is-active-highlight-border-color: var(--semantics-buttons-neutral-tinted-is-active-highlight-border-color);
+
+		${inheritedTextReset}
+		/* inline-flex, not inline-block: a block container puts the control on a
+		   line, and the strut's descender then grows the host with the inherited
+		   line-height, so the same button is taller in body text than in a form. */
+		display: inline-flex;
+		position: relative;
+		max-width: 100%;
+		-webkit-user-select: none;
+		user-select: none;
+		-webkit-tap-highlight-color: transparent;
+	}
+
+	:host([size="xs"]) {
+		--_corner-radius: var(--semantics-controls-xs-corner-radius);
+		--_min-size: var(--semantics-controls-xs-min-size);
+		--_block-padding: var(--semantics-buttons-xs-is-icon-only-inline-padding);
+		--_inline-padding: var(--semantics-buttons-xs-is-icon-only-inline-padding);
+		--_icon-size: var(--semantics-buttons-xs-is-icon-only-icon-size);
+		--_disclosure-icon-margin-right: 0;
+		--_disclosure-icon-size: var(--primitives-space-16);
+	}
+
+	:host([size="sm"]) {
+		--_corner-radius: var(--semantics-controls-sm-corner-radius);
+		--_min-size: var(--semantics-controls-sm-min-size);
+		--_block-padding: var(--semantics-buttons-sm-is-icon-only-inline-padding);
+		--_inline-padding: var(--semantics-buttons-sm-is-icon-only-inline-padding);
+		--_icon-size: var(--semantics-buttons-sm-is-icon-only-icon-size);
+	}
+
+	:host([size="lg"]) {
+		--_corner-radius: var(--semantics-controls-lg-corner-radius);
+		--_min-size: var(--semantics-controls-lg-min-size);
+		--_block-padding: var(--primitives-space-8);
+		--_inline-padding: var(--primitives-space-8);
+		--_text-display: block;
+	}
+
+	:host([size="lg"][hide-lg-text]) {
+		--_block-padding: var(--semantics-buttons-lg-is-icon-only-inline-padding);
+		--_inline-padding: var(--semantics-buttons-lg-is-icon-only-inline-padding);
+		--_icon-size: var(--semantics-buttons-lg-is-icon-only-icon-size);
+		--_text-display: none;
+	}
+
+	:host([variant="neutral-base"]) {
+		--_background-color: var(--semantics-buttons-neutral-base-background-color);
+		--_primary-content-color: var(--semantics-buttons-neutral-base-content-color);
+		--_highlight-border-color: var(--semantics-buttons-neutral-base-highlight-border-color);
+		--_is-hovered-background-color: var(--semantics-buttons-neutral-base-is-hovered-background-color);
+		--_is-hovered-primary-content-color: var(--semantics-buttons-neutral-base-is-hovered-content-color);
+		--_is-hovered-highlight-border-color: var(--semantics-buttons-neutral-base-is-hovered-highlight-border-color);
+		--_is-active-background-color: var(--semantics-buttons-neutral-base-is-active-background-color);
+		--_is-active-primary-content-color: var(--semantics-buttons-neutral-base-is-active-content-color);
+		--_is-active-highlight-border-color: var(--semantics-buttons-neutral-base-is-active-highlight-border-color);
+	}
+
+	:host([variant="neutral-transparent"]) {
+		--_background-color: transparent;
+		--_primary-content-color: var(--semantics-buttons-neutral-transparent-content-color);
+		--_highlight-border-color: transparent;
+		--_is-hovered-background-color: transparent;
+		--_is-hovered-primary-content-color: var(--semantics-buttons-neutral-transparent-is-hovered-content-color);
+		--_is-hovered-highlight-border-color: transparent;
+		--_is-active-background-color: transparent;
+		--_is-active-primary-content-color: var(--semantics-buttons-neutral-transparent-is-active-content-color);
+		--_is-active-highlight-border-color: transparent;
+	}
+
+	:host([variant="accent-filled"]),
+	:host([variant="primary"]) {
+		--_background-color: var(--semantics-buttons-accent-filled-background-color);
+		--_primary-content-color: var(--semantics-buttons-accent-filled-content-color);
+		--_highlight-border-color: var(--semantics-buttons-accent-filled-highlight-border-color);
+		--_is-hovered-background-color: var(--semantics-buttons-accent-filled-is-hovered-background-color);
+		--_is-hovered-primary-content-color: var(--semantics-buttons-accent-filled-is-hovered-content-color);
+		--_is-hovered-highlight-border-color: var(--semantics-buttons-accent-filled-is-hovered-highlight-border-color);
+		--_is-active-background-color: var(--semantics-buttons-accent-filled-is-active-background-color);
+		--_is-active-primary-content-color: var(--semantics-buttons-accent-filled-is-active-content-color);
+		--_is-active-highlight-border-color: var(--semantics-buttons-accent-filled-is-active-highlight-border-color);
+	}
+
+	:host([variant="accent-transparent"]) {
+		--_background-color: transparent;
+		--_primary-content-color: var(--semantics-buttons-accent-transparent-content-color);
+		--_highlight-border-color: transparent;
+		--_is-hovered-background-color: transparent;
+		--_is-hovered-primary-content-color: var(--semantics-buttons-accent-transparent-is-hovered-content-color);
+		--_is-hovered-highlight-border-color: transparent;
+		--_is-active-background-color: transparent;
+		--_is-active-primary-content-color: var(--semantics-buttons-accent-transparent-is-active-content-color);
+		--_is-active-highlight-border-color: transparent;
+	}
+
+	:host([variant="critical-tinted"]),
+	:host([variant="destructive"]) {
+		--_background-color: var(--semantics-buttons-critical-tinted-background-color);
+		--_primary-content-color: var(--semantics-buttons-critical-tinted-content-color);
+		--_highlight-border-color: var(--semantics-buttons-critical-tinted-highlight-border-color);
+		--_is-hovered-background-color: var(--semantics-buttons-critical-tinted-is-hovered-background-color);
+		--_is-hovered-primary-content-color: var(--semantics-buttons-critical-tinted-is-hovered-content-color);
+		--_is-hovered-highlight-border-color: var(--semantics-buttons-critical-tinted-is-hovered-highlight-border-color);
+		--_is-active-background-color: var(--semantics-buttons-critical-tinted-is-active-background-color);
+		--_is-active-primary-content-color: var(--semantics-buttons-critical-tinted-is-active-content-color);
+		--_is-active-highlight-border-color: var(--semantics-buttons-critical-tinted-is-active-highlight-border-color);
+	}
+
+	:host([variant="critical-transparent"]) {
+		--_background-color: transparent;
+		--_primary-content-color: var(--semantics-buttons-critical-transparent-content-color);
+		--_highlight-border-color: transparent;
+		--_is-hovered-background-color: transparent;
+		--_is-hovered-primary-content-color: var(--semantics-buttons-critical-transparent-is-hovered-content-color);
+		--_is-hovered-highlight-border-color: transparent;
+		--_is-active-background-color: transparent;
+		--_is-active-primary-content-color: var(--semantics-buttons-critical-transparent-is-active-content-color);
+		--_is-active-highlight-border-color: transparent;
+	}
+
+	/* The on-color variants derive from currentColor; see nldd-button for
+	   the full rationale. The filled label resolves the context var here on
+	   the host, with the tokens' white/black contrast flip as fallback. */
+
+	:host([variant="inherit-tinted"]) {
+		--_background-color: var(--semantics-buttons-inherit-tinted-background-color);
+		--_primary-content-color: var(--semantics-buttons-inherit-tinted-content-color);
+		--_highlight-border-color: var(--semantics-buttons-inherit-tinted-highlight-border-color);
+		--_is-hovered-background-color: var(--semantics-buttons-inherit-tinted-is-hovered-background-color);
+		--_is-hovered-primary-content-color: var(--semantics-buttons-inherit-tinted-is-hovered-content-color);
+		--_is-hovered-highlight-border-color: var(--semantics-buttons-inherit-tinted-is-hovered-highlight-border-color);
+		--_is-active-background-color: var(--semantics-buttons-inherit-tinted-is-active-background-color);
+		--_is-active-primary-content-color: var(--semantics-buttons-inherit-tinted-is-active-content-color);
+		--_is-active-highlight-border-color: var(--semantics-buttons-inherit-tinted-is-active-highlight-border-color);
+	}
+
+	:host([variant="inherit-filled"]) {
+		--_background-color: var(--semantics-buttons-inherit-filled-background-color);
+		--_primary-content-color: var(--context-parent-background-color, var(--semantics-buttons-inherit-filled-content-color));
+		--_highlight-border-color: var(--semantics-buttons-inherit-filled-highlight-border-color);
+		--_is-hovered-background-color: var(--semantics-buttons-inherit-filled-is-hovered-background-color);
+		--_is-hovered-primary-content-color: var(--semantics-buttons-inherit-filled-is-hovered-content-color);
+		--_is-hovered-highlight-border-color: var(--semantics-buttons-inherit-filled-is-hovered-highlight-border-color);
+		--_is-active-background-color: var(--semantics-buttons-inherit-filled-is-active-background-color);
+		--_is-active-primary-content-color: var(--semantics-buttons-inherit-filled-is-active-content-color);
+		--_is-active-highlight-border-color: var(--semantics-buttons-inherit-filled-is-active-highlight-border-color);
+	}
+
+	/* For inherit-filled the inner button keeps the inherited on-color:
+	   its currentColor background and the label's contrast flip resolve
+	   against it, and would otherwise self-reference the label. The label
+	   color moves to the content layer instead; see nldd-button. */
+	:host([variant="inherit-filled"]) .icon-button {
+		color: inherit;
+	}
+
+	:host([variant="inherit-filled"]) .icon-button > * {
+		color: var(--_primary-content-color);
+	}
+
+	/* ## Expanded — default (incl. unknown variant) */
+
+	:host([expanded]) {
+		--_background-color: var(--semantics-buttons-neutral-tinted-is-expanded-background-color);
+		--_primary-content-color: var(--semantics-buttons-neutral-tinted-is-expanded-content-color);
+		--_highlight-border-color: var(--semantics-buttons-neutral-tinted-is-expanded-highlight-border-color);
+		--_is-hovered-background-color: var(--semantics-buttons-neutral-tinted-is-expanded-is-hovered-background-color);
+		--_is-hovered-primary-content-color: var(--semantics-buttons-neutral-tinted-is-expanded-is-hovered-content-color);
+		--_is-hovered-highlight-border-color: var(--semantics-buttons-neutral-tinted-is-expanded-is-hovered-highlight-border-color);
+		--_is-active-background-color: var(--semantics-buttons-neutral-tinted-is-expanded-is-active-background-color);
+		--_is-active-primary-content-color: var(--semantics-buttons-neutral-tinted-is-expanded-is-active-content-color);
+		--_is-active-highlight-border-color: var(--semantics-buttons-neutral-tinted-is-expanded-is-active-highlight-border-color);
+	}
+
+	:host([expanded][variant="neutral-base"]) {
+		--_background-color: var(--semantics-buttons-neutral-base-is-expanded-background-color);
+		--_primary-content-color: var(--semantics-buttons-neutral-base-is-expanded-content-color);
+		--_highlight-border-color: var(--semantics-buttons-neutral-base-is-expanded-highlight-border-color);
+		--_is-hovered-background-color: var(--semantics-buttons-neutral-base-is-expanded-is-hovered-background-color);
+		--_is-hovered-primary-content-color: var(--semantics-buttons-neutral-base-is-expanded-is-hovered-content-color);
+		--_is-hovered-highlight-border-color: var(--semantics-buttons-neutral-base-is-expanded-is-hovered-highlight-border-color);
+		--_is-active-background-color: var(--semantics-buttons-neutral-base-is-expanded-is-active-background-color);
+		--_is-active-primary-content-color: var(--semantics-buttons-neutral-base-is-expanded-is-active-content-color);
+		--_is-active-highlight-border-color: var(--semantics-buttons-neutral-base-is-expanded-is-active-highlight-border-color);
+	}
+
+	:host([expanded][variant="neutral-transparent"]) {
+		--_background-color: transparent;
+		--_primary-content-color: var(--semantics-buttons-neutral-transparent-content-color);
+		--_highlight-border-color: transparent;
+		--_is-hovered-background-color: transparent;
+		--_is-hovered-primary-content-color: var(--semantics-buttons-neutral-transparent-is-hovered-content-color);
+		--_is-hovered-highlight-border-color: transparent;
+		--_is-active-background-color: transparent;
+		--_is-active-primary-content-color: var(--semantics-buttons-neutral-transparent-is-active-content-color);
+		--_is-active-highlight-border-color: transparent;
+	}
+
+	:host([expanded][variant="accent-filled"]),
+	:host([expanded][variant="primary"]) {
+		--_background-color: var(--semantics-buttons-accent-filled-is-expanded-background-color);
+		--_primary-content-color: var(--semantics-buttons-accent-filled-is-expanded-content-color);
+		--_highlight-border-color: var(--semantics-buttons-accent-filled-is-expanded-highlight-border-color);
+		--_is-hovered-background-color: var(--semantics-buttons-accent-filled-is-expanded-is-hovered-background-color);
+		--_is-hovered-primary-content-color: var(--semantics-buttons-accent-filled-is-expanded-is-hovered-content-color);
+		--_is-hovered-highlight-border-color: var(--semantics-buttons-accent-filled-is-expanded-is-hovered-highlight-border-color);
+		--_is-active-background-color: var(--semantics-buttons-accent-filled-is-expanded-is-active-background-color);
+		--_is-active-primary-content-color: var(--semantics-buttons-accent-filled-is-expanded-is-active-content-color);
+		--_is-active-highlight-border-color: var(--semantics-buttons-accent-filled-is-expanded-is-active-highlight-border-color);
+	}
+
+	:host([expanded][variant="accent-transparent"]) {
+		--_background-color: transparent;
+		--_primary-content-color: var(--semantics-buttons-accent-transparent-content-color);
+		--_highlight-border-color: transparent;
+		--_is-hovered-background-color: transparent;
+		--_is-hovered-primary-content-color: var(--semantics-buttons-accent-transparent-is-hovered-content-color);
+		--_is-hovered-highlight-border-color: transparent;
+		--_is-active-background-color: transparent;
+		--_is-active-primary-content-color: var(--semantics-buttons-accent-transparent-is-active-content-color);
+		--_is-active-highlight-border-color: transparent;
+	}
+
+	:host([expanded][variant="critical-tinted"]),
+	:host([expanded][variant="destructive"]) {
+		--_background-color: var(--semantics-buttons-critical-tinted-is-expanded-background-color);
+		--_primary-content-color: var(--semantics-buttons-critical-tinted-is-expanded-content-color);
+		--_highlight-border-color: var(--semantics-buttons-critical-tinted-is-expanded-highlight-border-color);
+		--_is-hovered-background-color: var(--semantics-buttons-critical-tinted-is-expanded-is-hovered-background-color);
+		--_is-hovered-primary-content-color: var(--semantics-buttons-critical-tinted-is-expanded-is-hovered-content-color);
+		--_is-hovered-highlight-border-color: var(--semantics-buttons-critical-tinted-is-expanded-is-hovered-highlight-border-color);
+		--_is-active-background-color: var(--semantics-buttons-critical-tinted-is-expanded-is-active-background-color);
+		--_is-active-primary-content-color: var(--semantics-buttons-critical-tinted-is-expanded-is-active-content-color);
+		--_is-active-highlight-border-color: var(--semantics-buttons-critical-tinted-is-expanded-is-active-highlight-border-color);
+	}
+
+	:host([expanded][variant="critical-transparent"]) {
+		--_background-color: transparent;
+		--_primary-content-color: var(--semantics-buttons-critical-transparent-content-color);
+		--_highlight-border-color: transparent;
+		--_is-hovered-background-color: transparent;
+		--_is-hovered-primary-content-color: var(--semantics-buttons-critical-transparent-is-hovered-content-color);
+		--_is-hovered-highlight-border-color: transparent;
+		--_is-active-background-color: transparent;
+		--_is-active-primary-content-color: var(--semantics-buttons-critical-transparent-is-active-content-color);
+		--_is-active-highlight-border-color: transparent;
+	}
+
+	/* The on-color variants keep their currentColor-derived content; expanded
+	   only deepens the background. Content is restated (not inherited from the
+	   resting block) because the default [expanded] block has equal
+	   specificity and later source order. See nldd-button for the rationale. */
+	:host([expanded][variant="inherit-tinted"]) {
+		--_background-color: var(--semantics-buttons-inherit-tinted-is-expanded-background-color);
+		--_primary-content-color: var(--semantics-buttons-inherit-tinted-is-expanded-content-color);
+		--_highlight-border-color: var(--semantics-buttons-inherit-tinted-is-expanded-highlight-border-color);
+		--_is-hovered-background-color: var(--semantics-buttons-inherit-tinted-is-expanded-is-hovered-background-color);
+		--_is-hovered-primary-content-color: var(--semantics-buttons-inherit-tinted-is-expanded-is-hovered-content-color);
+		--_is-hovered-highlight-border-color: var(--semantics-buttons-inherit-tinted-is-expanded-is-hovered-highlight-border-color);
+		--_is-active-background-color: var(--semantics-buttons-inherit-tinted-is-expanded-is-active-background-color);
+		--_is-active-primary-content-color: var(--semantics-buttons-inherit-tinted-is-expanded-is-active-content-color);
+		--_is-active-highlight-border-color: var(--semantics-buttons-inherit-tinted-is-expanded-is-active-highlight-border-color);
+	}
+
+	:host([expanded][variant="inherit-filled"]) {
+		--_background-color: var(--semantics-buttons-inherit-filled-is-expanded-background-color);
+		--_primary-content-color: var(--context-parent-background-color, var(--semantics-buttons-inherit-filled-is-expanded-content-color));
+		--_highlight-border-color: var(--semantics-buttons-inherit-filled-is-expanded-highlight-border-color);
+		--_is-hovered-background-color: var(--semantics-buttons-inherit-filled-is-expanded-is-hovered-background-color);
+		--_is-hovered-primary-content-color: var(--semantics-buttons-inherit-filled-is-expanded-is-hovered-content-color);
+		--_is-hovered-highlight-border-color: var(--semantics-buttons-inherit-filled-is-expanded-is-hovered-highlight-border-color);
+		--_is-active-background-color: var(--semantics-buttons-inherit-filled-is-expanded-is-active-background-color);
+		--_is-active-primary-content-color: var(--semantics-buttons-inherit-filled-is-expanded-is-active-content-color);
+		--_is-active-highlight-border-color: var(--semantics-buttons-inherit-filled-is-expanded-is-active-highlight-border-color);
+	}
+
+	:host([width="full"]) {
+		display: block;
+		width: 100%;
+		flex-grow: 1;
+	}
+
+	:host([hidden]) {
+		display: none;
+	}
+
+	:host([disabled]) {
+		opacity: var(--primitives-opacity-disabled);
+		pointer-events: none;
+	}
+
+	:host([no-highlight-border]),
+	:host([no-highlight-border][expanded]) {
+		--_highlight-border-color: transparent;
+		--_is-hovered-highlight-border-color: transparent;
+		--_is-active-highlight-border-color: transparent;
+	}
+
+
+	/* # Block */
+
+	.icon-button {
+		box-sizing: border-box;
+		display: inline-flex;
+		margin: 0;
+		border: none;
+		border-radius: var(--_corner-radius);
+		background: none;
+		background-color: var(--_background-color);
+		box-shadow: inset 0 0 0 var(--primitives-border-width-thin) var(--_highlight-border-color);
+		width: var(--_width);
+		min-width: var(--_min-size);
+		height: var(--_min-size);
+		min-height: var(--_min-size);
+		padding: var(--_block-padding) var(--_inline-padding);
+		flex-direction: column;
+		align-items: center;
+		justify-content: center;
+		color: var(--_primary-content-color);
+		font: inherit;
+		text-decoration: none;
+		transition:
+			background-color var(--primitives-transition-duration-fast) var(--primitives-transition-easing-default),
+			color var(--primitives-transition-duration-fast) var(--primitives-transition-easing-default)
+		;
+		appearance: none;
+	}
+
+	a.icon-button {
+		cursor: var(--semantics-controls-link-cursor);
+	}
+
+	@media (prefers-reduced-motion: reduce) {
+		.icon-button,
+		.icon-button__icon-area,
+		.icon-button__text {
+			transition: none;
+		}
+	}
+
+	.icon-button:focus-visible {
+		outline: var(--semantics-focus-ring-outline);
+		outline-offset: var(--semantics-focus-ring-outline-offset);
+		box-shadow: var(--semantics-focus-ring-box-shadow), inset 0 0 0 var(--primitives-border-width-thin) var(--_highlight-border-color);
+	}
+
+	.icon-button:focus:not(:focus-visible) {
+		outline: none;
+	}
+
+	@media (hover: hover) {
+		.icon-button:hover {
+			background-color: var(--_is-hovered-background-color);
+			color: var(--_is-hovered-primary-content-color);
+			--_highlight-border-color: var(--_is-hovered-highlight-border-color);
+		}
+	}
+
+	.icon-button:active {
+		background-color: var(--_is-active-background-color);
+		color: var(--_is-active-primary-content-color);
+		--_highlight-border-color: var(--_is-active-highlight-border-color);
+	}
+
+	/* Loading keeps the control focusable (not disabled); activation is blocked in JS. */
+	:host([loading]) .icon-button {
+		cursor: default;
+	}
+
+
+	/* # Elements */
+
+	.icon-button__icon-area {
+		display: inline-flex;
+		flex-direction: row;
+		align-items: center;
+		justify-content: center;
+		transition: opacity var(--primitives-transition-duration-slow) var(--primitives-transition-easing-default);
+	}
+
+	/* Loading crossfades the content out (opacity, not visibility, so the control
+	   keeps its accessible name) while the indicator fades in. The content stays
+	   laid out, so the control keeps its size. */
+	:host([loading]) .icon-button__icon-area {
+		opacity: 0;
+	}
+
+	.icon-button__icon {
+		display: flex;
+		width: var(--_icon-size);
+		height: var(--_icon-size);
+		flex-shrink: 0;
+		align-items: center;
+		justify-content: center;
+	}
+
+	.icon-button__disclosure-icon {
+		display: flex;
+		margin-right: var(--_disclosure-icon-margin-right);
+		width: var(--_disclosure-icon-size);
+		height: var(--_disclosure-icon-size);
+		flex-shrink: 0;
+	}
+
+	.icon-button__text {
+		display: var(--_text-display);
+		text-align: center;
+		color: inherit;
+		font: var(--_text-font);
+		white-space: nowrap;
+		transition: opacity var(--primitives-transition-duration-slow) var(--primitives-transition-easing-default);
+	}
+
+	:host([loading]) .icon-button__text {
+		opacity: 0;
+	}
+
+	/* Wrapper overlaid on the control, positioned against the host (which is
+	   position:relative). It lives outside the <button>/<a> and the tooltip
+	   wrapper so the indicator's role="status" live region works reliably. The
+	   activity-indicator inside fills it and centers its circle, which inherits
+	   the content color via currentColor. */
+	.icon-button__activity-indicator {
+		position: absolute;
+		inset: 0;
+		color: var(--_primary-content-color);
+	}
+`;
+//#endregion
+//#region src/components/content/tooltip/tooltip.styles.ts
+var tooltipStyles = css`
+	:host {
+		box-sizing: border-box;
+	}
+
+
+	/* # Host */
+
+	:host {
+		--_hide-duration: var(--primitives-transition-duration-fast);
+		--_show-duration: var(--primitives-transition-duration-fast);
+		--_max-width: var(--primitives-area-280);
+		--_z-index: 10000;
+		--_show-delay: 700ms;
+		--_hide-delay: 50; /* unitless ms, read by JavaScript */
+		--_offset: 4; /* px, unitless — read by JS */
+		--_shift-padding: 8; /* px, unitless — read by JS */
+
+		${inheritedTextReset}
+		display: contents;
+	}
+
+	:host([hidden]) {
+		display: none;
+	}
+
+
+	/* # Block */
+
+	.tooltip {
+		position: fixed;
+		opacity: 0;
+		margin: 0;
+		border: none;
+		background: none;
+		padding: 0;
+		transition:
+			opacity var(--_hide-duration) ease,
+			display var(--_hide-duration) allow-discrete,
+			overlay var(--_hide-duration) allow-discrete;
+	}
+
+	.tooltip:popover-open {
+		opacity: 1;
+		transition:
+			opacity var(--_show-duration) ease,
+			display var(--_show-duration) allow-discrete,
+			overlay var(--_show-duration) allow-discrete;
+	}
+
+	/* Stay invisible (no fade) until Floating UI has placed it, so the fade-in plays at
+	   the final position rather than flashing at the popover's default spot. The
+	   positioned attribute is set once _updatePosition writes the coordinates. */
+	.tooltip:popover-open:not([positioned]) {
+		/* visibility (like nldd-menu/nldd-popover) keeps the not-yet-placed tooltip out
+		   of hit-testing at its stale default spot; opacity still drives the fade. */
+		visibility: hidden;
+		opacity: 0;
+		transition: none;
+	}
+
+	@starting-style {
+		.tooltip:popover-open {
+			opacity: 0;
+		}
+	}
+
+	@media (prefers-reduced-motion: reduce) {
+		.tooltip,
+		.tooltip.is-visible,
+		.tooltip.is-focus-visible {
+			transition: none;
+		}
+	}
+
+
+	/* ## Tooltip body */
+
+	.tooltip__body {
+		border-radius: var(--primitives-corner-radius-xs);
+		box-shadow: var(--components-tooltip-box-shadow);
+		background-color: var(--components-tooltip-background-color);
+		width: max-content;
+		max-width: var(--_max-width);
+		padding-block: var(--primitives-space-4);
+		padding-inline: var(--primitives-space-8);
+		color: var(--components-tooltip-content-color);
+		font: var(--primitives-font-body-xs-regular-tight);
+		overflow-wrap: break-word;
+	}
+
+	@media (forced-colors: active) {
+		.tooltip__body {
+			border: 1px solid CanvasText;
+		}
+	}
+`;
+//#endregion
+//#region src/components/content/tooltip/tooltip.template.ts
+function tooltipTemplate(component) {
+	return html`
+		<slot
+			@mouseenter=${component._handleTriggerEnter}
+			@mouseleave=${component._handleTriggerLeave}
+			@focusin=${component._handleFocusIn}
+			@focusout=${component._handleFocusOut}
+			@click=${component._handleTriggerActivate}
+		></slot>
+		<div class="tooltip"
+			popover="manual"
+			aria-hidden="true"
+			@mouseenter=${component._handleTooltipEnter}
+			@mouseleave=${component._handleTooltipLeave}
+		>
+			<div class="tooltip__body">${component.text}</div>
+		</div>
+	`;
+}
+//#endregion
+//#region src/components/content/tooltip/tooltip.ts
+/**
+* Nederlandse Digitale Dienst Tooltip Component (Lit + TypeScript)
+*
+* A wrapper that shows a tooltip on hover or focus of its child element. It
+* uses `display: contents`, so it does not affect the child's layout.
+*
+* @element nldd-tooltip
+* @attr {string} text - Tooltip text
+* @attr {boolean} open - Forces the tooltip visible, whatever hover or focus does. Use it for programmatic feedback ("Copied", for instance). Reset it to false to restore the hover behaviour.
+* @attr {string} placement - Position: 'top' | 'bottom' | 'left' | 'right' (default: 'bottom'; automatically 'top' on touch devices)
+* @attr {string} timing - When the tooltip appears on hover: 'instant' — right away, without a show delay. 'default' — after the standard show delay (700ms). 'never' — the tooltip is never shown; hover and focus events are ignored, aria-describedby is suppressed, and a tooltip that is already visible disappears. The hide delay and the touch suppression stay in force under every value. A focus trigger is always instant.
+*
+* @slot - The element the tooltip is shown for
+*
+* @fires nldd-tooltip-dismiss - When a user presses Escape while `open=true`.
+*   The consumer owns the open lifecycle from there (we cannot clear `open`
+*   on our own), so this event is the consumer's chance to set `open` back to
+*   `false`. WCAG 1.4.13: a persistent hover or focus overlay has to be
+*   dismissible without moving focus.
+*
+* @note It renders through the native Popover API (`popover="manual"`) in the
+* top layer. That escapes every ancestor stacking context and `overflow:
+* hidden` clipping, so no more z-index fights with overlay containers, panes
+* or transform containers. Positioning still goes through Floating UI with
+* `strategy: 'fixed'`.
+*
+* @note aria-describedby only works when the trigger element is in the light
+* DOM. With a web component as the trigger (with a shadow DOM of its own) the
+* link is a known shadow DOM plus ARIA limitation. For nldd-icon-button that
+* does not matter, because aria-label already sits on the inner button. Tooltip
+* text on an icon-button must therefore hold nothing that aria-label does not
+* already say.
+*
+* @note With a disabled trigger (a disabled nldd-icon-button, for instance) the
+* tooltip is not shown, because disabled buttons fire no mouseenter or focusin
+* and `display: contents` has no layout box of its own to catch events on.
+*/
+var _NLDDTooltip;
+var tooltipCounter = 0;
+var coarsePointerQuery = matchMedia("(pointer: coarse)");
+var DEFAULT_SHOW_DELAY_MS = 700;
+var DEFAULT_HIDE_DELAY_MS = 50;
+var NLDDTooltip = (_NLDDTooltip = class NLDDTooltip extends LitElement {
+	constructor(..._args) {
+		super(..._args);
+		this.text = "";
+		this.open = false;
+		this.placement = "bottom";
+		this.timing = "default";
+		this._visible = false;
+		this._tooltipId = `nldd-tooltip-${++tooltipCounter}`;
+		this._hideTimeout = null;
+		this._showTimeout = null;
+		this._descriptionEl = null;
+		this._currentTrigger = null;
+		this._boundSlotChange = () => this._syncAriaDescribedBy();
+		this._positionVersion = 0;
+		this._handleKeyDown = (e) => {
+			if (e.key !== "Escape" || !this._visible) return;
+			if (this.open) {
+				this.dispatchEvent(new CustomEvent("nldd-tooltip-dismiss", {
+					bubbles: true,
+					composed: true
+				}));
+				e.preventDefault();
+				return;
+			}
+			this._visible = false;
+		};
+	}
+	get _effectivePlacement() {
+		return this.placement;
+	}
+	connectedCallback() {
+		super.connectedCallback();
+		this.addEventListener("keydown", this._handleKeyDown);
+		if (this.hasUpdated) this.shadowRoot?.querySelector("slot")?.addEventListener("slotchange", this._boundSlotChange);
+	}
+	firstUpdated() {
+		this.shadowRoot?.querySelector("slot")?.addEventListener("slotchange", this._boundSlotChange);
+	}
+	updated(changed) {
+		if (changed.has("open")) {
+			if (this.open) {
+				if (this._hideTimeout) {
+					clearTimeout(this._hideTimeout);
+					this._hideTimeout = null;
+				}
+				if (this._showTimeout) {
+					clearTimeout(this._showTimeout);
+					this._showTimeout = null;
+				}
+				this._visible = true;
+			} else if (this._visible) this._visible = false;
+		}
+		if (changed.has("_visible")) {
+			const tooltip = this._getTooltipElement();
+			if (tooltip) {
+				if (this._visible) {
+					if (!tooltip.matches(":popover-open")) {
+						tooltip.removeAttribute("positioned");
+						tooltip.showPopover();
+					}
+					this._updatePosition();
+				} else if (tooltip.matches(":popover-open")) tooltip.hidePopover();
+			}
+		}
+		if (changed.has("text") || changed.has("timing")) this._syncAriaDescribedBy();
+		if (changed.has("text") && this._visible) this._updatePosition();
+		if (changed.has("timing") && this.timing === "never") {
+			if (this._showTimeout) {
+				clearTimeout(this._showTimeout);
+				this._showTimeout = null;
+			}
+			if (this._visible) this._visible = false;
+		}
+	}
+	_syncAriaDescribedBy() {
+		const trigger = this._getTriggerElement();
+		if (this._currentTrigger && this._currentTrigger !== trigger) this._currentTrigger.removeAttribute("aria-describedby");
+		this._currentTrigger = trigger;
+		if (!trigger) return;
+		if (trigger.getRootNode() !== document) return;
+		if (this.text && this.timing !== "never") {
+			if (!this._descriptionEl) {
+				this._descriptionEl = document.createElement("span");
+				this._descriptionEl.id = this._tooltipId;
+				Object.assign(this._descriptionEl.style, {
+					position: "absolute",
+					top: "0",
+					left: "0",
+					width: "1px",
+					height: "1px",
+					overflow: "hidden",
+					clipPath: "inset(50%)",
+					whiteSpace: "nowrap"
+				});
+				document.body.appendChild(this._descriptionEl);
+			}
+			this._descriptionEl.textContent = this.text;
+			trigger.setAttribute("aria-describedby", this._tooltipId);
+		} else {
+			trigger.removeAttribute("aria-describedby");
+			this._descriptionEl?.remove();
+			this._descriptionEl = null;
+		}
+	}
+	_getTriggerElement() {
+		return ((this.shadowRoot?.querySelector("slot"))?.assignedElements({ flatten: true }))?.[0] ?? null;
+	}
+	_getTooltipElement() {
+		return this.shadowRoot?.querySelector(".tooltip") ?? null;
+	}
+	_handleTriggerEnter() {
+		if (this.timing === "never") return;
+		if (!this.text) return;
+		if (coarsePointerQuery.matches) return;
+		if (this._hideTimeout) {
+			clearTimeout(this._hideTimeout);
+			this._hideTimeout = null;
+		}
+		if (this._showTimeout) clearTimeout(this._showTimeout);
+		if (this.timing === "instant") {
+			this._showTimeout = null;
+			this._visible = true;
+			return;
+		}
+		const parsedShow = parseInt(getComputedStyle(this).getPropertyValue("--_show-delay"), 10);
+		const showDelay = Number.isFinite(parsedShow) ? parsedShow : DEFAULT_SHOW_DELAY_MS;
+		this._showTimeout = setTimeout(() => {
+			this._showTimeout = null;
+			this._visible = true;
+		}, showDelay);
+	}
+	_handleFocusIn() {
+		if (this.timing === "never") return;
+		if (!this.text) return;
+		if (isTouchMode()) return;
+		if (this._hideTimeout) {
+			clearTimeout(this._hideTimeout);
+			this._hideTimeout = null;
+		}
+		if (this._showTimeout) {
+			clearTimeout(this._showTimeout);
+			this._showTimeout = null;
+		}
+		this._visible = true;
+	}
+	_handleTriggerLeave() {
+		if (this._showTimeout) {
+			clearTimeout(this._showTimeout);
+			this._showTimeout = null;
+		}
+		if (this.open) return;
+		if (this._hideTimeout) clearTimeout(this._hideTimeout);
+		const parsedHide = parseInt(getComputedStyle(this).getPropertyValue("--_hide-delay"), 10);
+		const hideDelay = Number.isFinite(parsedHide) ? parsedHide : DEFAULT_HIDE_DELAY_MS;
+		this._hideTimeout = setTimeout(() => {
+			this._visible = false;
+			this._hideTimeout = null;
+		}, hideDelay);
+	}
+	/** Focus guard checks one shadow root level deep for composite triggers. */
+	_handleFocusOut(e) {
+		const assigned = (this.shadowRoot?.querySelector("slot"))?.assignedElements({ flatten: true }) ?? [];
+		const related = e.relatedTarget;
+		if (!(related && assigned.some((el) => el.contains(related) || el.shadowRoot?.contains(related)))) this._handleTriggerLeave();
+	}
+	_handleTriggerActivate() {
+		if (this.open) return;
+		if (this._showTimeout) {
+			clearTimeout(this._showTimeout);
+			this._showTimeout = null;
+		}
+		if (this._hideTimeout) {
+			clearTimeout(this._hideTimeout);
+			this._hideTimeout = null;
+		}
+		this._visible = false;
+	}
+	_handleTooltipEnter() {
+		if (this._hideTimeout) {
+			clearTimeout(this._hideTimeout);
+			this._hideTimeout = null;
+		}
+	}
+	_handleTooltipLeave() {
+		this._handleTriggerLeave();
+	}
+	async _updatePosition() {
+		const version = ++this._positionVersion;
+		const trigger = this._getTriggerElement();
+		const tooltip = this._getTooltipElement();
+		if (!trigger || !tooltip) {
+			tooltip?.setAttribute("positioned", "");
+			return;
+		}
+		if (document.fonts?.status !== "loaded") {
+			await document.fonts?.ready;
+			if (version !== this._positionVersion) return;
+		}
+		const styles = getComputedStyle(this);
+		const { x, y } = await computePosition(trigger, tooltip, {
+			placement: this._effectivePlacement,
+			strategy: "fixed",
+			middleware: [
+				offset(parseInt(styles.getPropertyValue("--_offset"), 10)),
+				flip(),
+				shift({ padding: parseInt(styles.getPropertyValue("--_shift-padding"), 10) })
+			]
+		});
+		if (version !== this._positionVersion) return;
+		tooltip.style.left = `${x}px`;
+		tooltip.style.top = `${y}px`;
+		tooltip.setAttribute("positioned", "");
+	}
+	disconnectedCallback() {
+		super.disconnectedCallback();
+		this.removeEventListener("keydown", this._handleKeyDown);
+		this.shadowRoot?.querySelector("slot")?.removeEventListener("slotchange", this._boundSlotChange);
+		if (this._hideTimeout) {
+			clearTimeout(this._hideTimeout);
+			this._hideTimeout = null;
+		}
+		if (this._showTimeout) {
+			clearTimeout(this._showTimeout);
+			this._showTimeout = null;
+		}
+		this._currentTrigger?.removeAttribute("aria-describedby");
+		this._currentTrigger = null;
+		this._descriptionEl?.remove();
+		this._descriptionEl = null;
+	}
+	render() {
+		return tooltipTemplate(this);
+	}
+}, _NLDDTooltip.styles = tooltipStyles, _NLDDTooltip);
+__decorate([property({
+	reflect: true,
+	converter: reflectNonDefault("")
+})], NLDDTooltip.prototype, "text", void 0);
+__decorate([property({
+	type: Boolean,
+	reflect: true
+})], NLDDTooltip.prototype, "open", void 0);
+__decorate([property({
+	reflect: true,
+	converter: reflectNonDefault("bottom")
+})], NLDDTooltip.prototype, "placement", void 0);
+__decorate([property({
+	reflect: true,
+	converter: reflectNonDefault("default")
+})], NLDDTooltip.prototype, "timing", void 0);
+__decorate([state()], NLDDTooltip.prototype, "_visible", void 0);
+NLDDTooltip = __decorate([customElement("nldd-tooltip")], NLDDTooltip);
+//#endregion
+//#region src/components/actions/icon-button/icon-button.template.ts
+function renderContent(component) {
+	return html`
+		<span class="icon-button__icon-area">
+			<span class="icon-button__icon">
+				${component.icon ? html`<nldd-icon name=${component.icon}></nldd-icon>` : html`<slot name="icon" @slotchange=${component._onIconSlotChange}>
+							<nldd-icon name="icon-placeholder"></nldd-icon>
+						</slot>`}
+			</span>
+			${component.expandable ? html`
+				<span class="icon-button__disclosure-icon">
+					<nldd-icon name="chevron-down-small"></nldd-icon>
+				</span>
+			` : nothing}
+		</span>
+		${component.text ? html`
+			<span class="icon-button__text">${component.text}</span>
+		` : ""}
+	`;
+}
+function template() {
+	const opensInNewTabHint = this.href && this.target === "_blank" ? this._t("components.icon-button.opens-in-new-tab-label") : "";
+	const label = [this.accessibleLabel || this.text || "", opensInNewTabHint].filter(Boolean).join(", ") || nothing;
+	const content = renderContent(this);
+	const tooltipText = this.accessibleLabel || (this.size !== "lg" || this.hideLgText ? this.text : "");
+	const ariaExpanded = this.expandable || !!this.popupType ? String(this.expanded) : this.expanded ? "true" : nothing;
+	const ariaBusy = this.loading ? "true" : nothing;
+	const loadingSize = this.size === "xs" ? "16" : this.size === "sm" ? "20" : this.size === "lg" ? "28" : "24";
+	const loadingIndicator = this.loading ? html`
+			<div class="icon-button__activity-indicator">
+				<nldd-activity-indicator
+					timing="instant"
+					size=${loadingSize}
+				></nldd-activity-indicator>
+			</div>
+		` : nothing;
+	const renderButton = () => {
+		if (this.href) {
+			const resolvedRel = this._resolvedRel();
+			return html`
+				<a class="icon-button"
+					href=${this.href}
+					target=${this.target || nothing}
+					rel=${resolvedRel || nothing}
+					aria-disabled=${this.disabled ? "true" : nothing}
+					aria-label=${label}
+					aria-haspopup=${this.popupType || nothing}
+					aria-expanded=${ariaExpanded}
+					aria-busy=${ariaBusy}
+					tabindex=${this.noTab ? "-1" : nothing}
+					@pointerdown=${this._popup.handlePointerdown}
+					@click=${this._handleClick}
+				>
+					${content}
+				</a>
+			`;
+		}
+		return html`
+			<button class="icon-button"
+				type=${this.type}
+				?disabled=${this.disabled}
+				aria-disabled=${this.disabled ? "true" : nothing}
+				aria-label=${label}
+				aria-haspopup=${this.popupType || nothing}
+				aria-expanded=${ariaExpanded}
+				aria-busy=${ariaBusy}
+				tabindex=${this.noTab ? "-1" : nothing}
+				popovertarget=${this.popovertarget || nothing}
+				.popoverTargetElement=${this.popoverTargetElement}
+				.popoverTargetAction=${this.popoverTargetAction}
+				@pointerdown=${this._popup.handlePointerdown}
+				@click=${this._handleClick}
+			>
+				${content}
+			</button>
+		`;
+	};
+	const control = tooltipText && this.tooltipTiming !== "never" ? html`
+			<nldd-tooltip text=${tooltipText} timing=${this.tooltipTiming}>
+				${renderButton()}
+			</nldd-tooltip>
+		` : renderButton();
+	const popupSlot = html`<slot name="popup" @slotchange=${this._popup.handleSlotChange}></slot>`;
+	return html`${control}${loadingIndicator}${popupSlot}`;
+}
+//#endregion
+//#region src/components/actions/icon-button/icon-button.i18n.ts
+var nlddIconButtonTranslations = { "components.icon-button.opens-in-new-tab-label": "Opent in nieuw tabblad" };
+//#endregion
+//#region src/components/actions/icon-button/icon-button.ts
+/**
+* Nederlandse Digitale Dienst Icon Button Component (Lit + TypeScript)
+*
+* @element nldd-icon-button
+* @attr {string} variant - Button variant: 'accent-filled' | 'accent-transparent' | 'neutral-tinted' | 'neutral-transparent' | 'critical-tinted' | 'critical-transparent' | 'inherit-filled' | 'inherit-tinted' | 'primary' | 'secondary' | 'destructive'. De inherit-varianten leiden hun kleuren af van currentColor, voor knoppen op gekleurde vlakken.
+* @attr {string} size - Button size: 'xs' | 'sm' | 'md' | 'lg' (default: 'md')
+* @attr {boolean} hide-lg-text - In lg size, hides the text label and enlarges the icon by one step (28px)
+* @attr {boolean} no-highlight-border - Removes the per-variant highlight border (e.g. when a control group draws a single border instead).
+* @attr {boolean} loading - Loading state (default: false). Shows an activity indicator over the visually hidden icon, sets aria-busy on the inner control and blocks activation, without dropping the button from the tab order (unlike disabled).
+* @attr {boolean} disabled - Disabled state
+* @attr {boolean} no-tab - Takes the button out of the tab order (tabindex="-1"), for a control owned by a roving container (e.g. an nldd-token in nldd-token-field) that manages focus itself. Still mouse- and script-focusable.
+* @attr {string} type - Button type for form submission: 'button' | 'submit' | 'reset' (ignored when href is set)
+* @attr {boolean} expandable - Whether the button opens a menu or popover and shows chevron next to the icon
+* @attr {boolean} expanded - Whether the popover/menu controlled by this button is currently open. Forwarded as aria-expanded on the inner button; toggles the is-expanded visual state.
+* @attr {string} popup-type - Type of popup container this button opens: 'menu' | 'listbox' | 'dialog' | 'tree' | 'grid'. Sets aria-haspopup on the inner button and forces aria-expanded to always be present (true/false) so screen readers know the popup state.
+* @attr {string} width - Width mode: 'full' (stretches to container) or any CSS length (e.g. '240px')
+* @attr {string} text - Button text, used as aria-label and shown below the icon in lg size
+* @attr {string} icon - Icon name for the nldd-icon element. Defaults to a placeholder icon when neither this attribute nor the icon slot is set.
+* @attr {string} accessible-label - Accessible label for screen readers. Overrides text as aria-label and title tooltip. Use when the visible text alone lacks context for screen readers (e.g. text "Toon", accessible-label "Toon wachtwoord"). The text is still shown visually in lg size regardless.
+* @attr {string} tooltip-timing - Forwarded to the inner nldd-tooltip's `timing`: 'default' (700 ms show-delay), 'instant', or 'never' (suppress the visual tooltip; screen readers still get the aria-label). Use 'never' when the surrounding context already explains the button (e.g. spin buttons in nldd-number-field, the chevron in nldd-split-button).
+* @attr {string} href - When set, renders an <a> element instead of <button>
+* @attr {string} target - Link target (e.g. '_blank'); only used when href is set. With '_blank' the "opens in new tab" announcement is folded into the aria-label for screen readers (WCAG 2.1 SC 3.2.2).
+* @attr {string} rel - Link rel attribute; defaults to 'noopener noreferrer' when target is '_blank'
+* @attr {object} translations - Override translation keys (e.g. the "opens in new tab" announcement); unset keys fall back to Dutch.
+* @attr {string} popovertarget - ID of a popover element to toggle; forwarded to the inner <button>
+*
+* @slot icon - Slot for a custom icon (e.g. custom SVG). Only used when icon attribute is not set; falls back to a placeholder icon when the slot is empty.
+* @slot popup - A single `nldd-menu` or `nldd-popover` this button invokes. Slotting it auto-anchors the overlay to the button and toggles it on click (no id/anchor wiring). The overlay syncs `expanded` and `aria-haspopup` back onto the button. Add `expandable` for the disclosure chevron. Mirrors nldd-split-button; manual `popovertarget` wiring keeps working without a slotted overlay.
+*
+* @example
+* ```html
+* <nldd-icon-button text="Download" icon="download"></nldd-icon-button>
+* ```
+*
+* @fires click - When button is clicked (not fired when disabled)
+*/
+var _NLDDIconButton;
+var NLDDIconButton = (_NLDDIconButton = class NLDDIconButton extends withTranslations(LitElement, nlddIconButtonTranslations) {
+	constructor(..._args) {
+		super(..._args);
+		this._internals = this.attachInternals();
+		this.variant = "neutral-tinted";
+		this.size = "md";
+		this.hideLgText = false;
+		this.loading = false;
+		this.disabled = false;
+		this.noHighlightBorder = false;
+		this.type = "button";
+		this.expandable = false;
+		this.expanded = false;
+		this.noTab = false;
+		this.width = "";
+		this.popovertarget = void 0;
+		this.popoverTargetElement = null;
+		this.popoverTargetAction = "toggle";
+		this.text = "";
+		this.icon = "";
+		this.accessibleLabel = "";
+		this.tooltipTiming = "default";
+		this.href = void 0;
+		this.target = void 0;
+		this.rel = void 0;
+		this._warnedA11y = false;
+		this._popup = new PopupAnchorController(this);
+	}
+	/** Whether an icon is present via attribute or slot. */
+	get _hasIcon() {
+		if (this.icon) return true;
+		return ((this.shadowRoot?.querySelector("slot[name=\"icon\"]"))?.assignedElements().length ?? 0) > 0;
+	}
+	updated(changedProperties) {
+		if (changedProperties.has("width")) {
+			const w = this.width;
+			const isFull = w === "full";
+			const isValidLength = !!w && !isFull && CSS.supports("width", w);
+			this.style.width = isValidLength ? w : "";
+			if (isFull || isValidLength) this.style.setProperty("--_width", "100%");
+			else this.style.removeProperty("--_width");
+		}
+		if (!(this._hasIcon && !this.text && !this.accessibleLabel)) this._warnedA11y = false;
+	}
+	/** Resolves the effective rel value for link rendering. */
+	_resolvedRel() {
+		if (this.rel) return this.rel;
+		if (this.target === "_blank") return "noopener noreferrer";
+		return "";
+	}
+	_handleClick(e) {
+		if (this.disabled || this.loading) {
+			e.preventDefault();
+			e.stopPropagation();
+			return;
+		}
+		if (this._popup.handleClick(e)) {
+			e.preventDefault();
+			return;
+		}
+		if (this.href) return;
+		if (this.type === "submit") this._internals.form?.requestSubmit();
+		else if (this.type === "reset") this._internals.form?.reset();
+	}
+	/**
+	* Delegates focus to the inner `<button>` (or `<a>` when `href` is set), so
+	* consumers can call `iconButtonEl.focus()` without reaching into shadow DOM.
+	*/
+	focus(options) {
+		this.shadowRoot?.querySelector(".icon-button")?.focus(options);
+	}
+	_onIconSlotChange() {
+		this.requestUpdate();
+	}
+	render() {
+		return template.call(this);
+	}
+}, _NLDDIconButton.styles = iconButtonStyles, _NLDDIconButton.formAssociated = true, _NLDDIconButton);
+__decorate([property({
+	reflect: true,
+	converter: reflectNonDefault("neutral-tinted")
+})], NLDDIconButton.prototype, "variant", void 0);
+__decorate([property({
+	reflect: true,
+	converter: reflectNonDefault("md")
+})], NLDDIconButton.prototype, "size", void 0);
+__decorate([property({
+	type: Boolean,
+	reflect: true,
+	attribute: "hide-lg-text"
+})], NLDDIconButton.prototype, "hideLgText", void 0);
+__decorate([property({
+	type: Boolean,
+	reflect: true
+})], NLDDIconButton.prototype, "loading", void 0);
+__decorate([property({
+	type: Boolean,
+	reflect: true
+})], NLDDIconButton.prototype, "disabled", void 0);
+__decorate([property({
+	type: Boolean,
+	reflect: true,
+	attribute: "no-highlight-border"
+})], NLDDIconButton.prototype, "noHighlightBorder", void 0);
+__decorate([property({
+	type: String,
+	reflect: true
+})], NLDDIconButton.prototype, "type", void 0);
+__decorate([property({
+	type: Boolean,
+	reflect: true,
+	attribute: "expandable"
+})], NLDDIconButton.prototype, "expandable", void 0);
+__decorate([property({
+	type: Boolean,
+	reflect: true
+})], NLDDIconButton.prototype, "expanded", void 0);
+__decorate([property({
+	type: Boolean,
+	reflect: true,
+	attribute: "no-tab"
+})], NLDDIconButton.prototype, "noTab", void 0);
+__decorate([property({
+	type: String,
+	reflect: true,
+	attribute: "popup-type"
+})], NLDDIconButton.prototype, "popupType", void 0);
+__decorate([property({
+	reflect: true,
+	converter: reflectNonDefault("")
+})], NLDDIconButton.prototype, "width", void 0);
+__decorate([property({ type: String })], NLDDIconButton.prototype, "popovertarget", void 0);
+__decorate([property({ attribute: false })], NLDDIconButton.prototype, "popoverTargetElement", void 0);
+__decorate([property({ attribute: false })], NLDDIconButton.prototype, "popoverTargetAction", void 0);
+__decorate([property({
+	reflect: true,
+	converter: reflectNonDefault("")
+})], NLDDIconButton.prototype, "text", void 0);
+__decorate([property({ type: String })], NLDDIconButton.prototype, "icon", void 0);
+__decorate([property({
+	type: String,
+	attribute: "accessible-label"
+})], NLDDIconButton.prototype, "accessibleLabel", void 0);
+__decorate([property({
+	reflect: true,
+	attribute: "tooltip-timing",
+	converter: reflectNonDefault("default")
+})], NLDDIconButton.prototype, "tooltipTiming", void 0);
+__decorate([property({
+	type: String,
+	reflect: true
+})], NLDDIconButton.prototype, "href", void 0);
+__decorate([property({ type: String })], NLDDIconButton.prototype, "target", void 0);
+__decorate([property({ type: String })], NLDDIconButton.prototype, "rel", void 0);
+NLDDIconButton = __decorate([customElement("nldd-icon-button")], NLDDIconButton);
+//#endregion
+export { PopupAnchorController as i, NLDDTooltip as n, NLDDActivityIndicator as r, NLDDIconButton as t };