@nldd/design-system 0.8.37

package/dist/components/content/title/title.styles.js

@@ -0,0 +1,235 @@
+import { css, unsafeCSS } from 'lit';
+import { breakpoints } from '../../../assets/styles/breakpoints.js';
+const smMax = unsafeCSS(breakpoints.smMax);
+const mdMin = unsafeCSS(breakpoints.mdMin);
+const mdMax = unsafeCSS(breakpoints.mdMax);
+const lgMin = unsafeCSS(breakpoints.lgMin);
+export const titleStyles = css `
+
+
+	/* # Host */
+
+	:host {
+		display: flex;
+	}
+
+	:host([hidden]) {
+		display: none;
+	}
+
+
+	/* # Block */
+
+	.title {
+		display: flex;
+		flex-direction: row;
+		align-items: center;
+		gap: var(--primitives-space-12);
+		width: 100%;
+	}
+
+
+	/* # Title group */
+
+	.title__title-group {
+		display: flex;
+		flex-direction: column;
+		flex: 1;
+		min-width: 0;
+	}
+
+
+	/* # Overline */
+
+	::slotted([slot='overline']) {
+		margin: 0;
+		color: var(--semantics-content-secondary-color);
+		font: var(--primitives-font-body-sm-regular-tight);
+	}
+
+
+	/* # Title */
+
+	::slotted(:not([slot])) {
+		margin: 0;
+		color: var(--semantics-content-color);
+	}
+
+	:host([size='1']) ::slotted(:not([slot])) {
+		@media (max-width: ${smMax}) {
+			font: var(--primitives-font-display-1-sm);
+		}
+
+		@media (min-width: ${mdMin}) and (max-width: ${mdMax}) {
+			font: var(--primitives-font-display-1-md);
+		}
+
+		@media (min-width: ${lgMin}) {
+			font: var(--primitives-font-display-1-lg);
+		}
+
+		@container layout-area (max-width: ${smMax}) {
+			font: var(--primitives-font-display-1-sm);
+		}
+
+		@container layout-area (min-width: ${mdMin}) and (max-width: ${mdMax}) {
+			font: var(--primitives-font-display-1-md);
+		}
+
+		@container layout-area (min-width: ${lgMin}) {
+			font: var(--primitives-font-display-1-lg);
+		}
+	}
+
+	:host([size='2']) ::slotted(:not([slot])) {
+		@media (max-width: ${smMax}) {
+			font: var(--primitives-font-display-2-sm);
+		}
+
+		@media (min-width: ${mdMin}) and (max-width: ${mdMax}) {
+			font: var(--primitives-font-display-2-md);
+		}
+
+		@media (min-width: ${lgMin}) {
+			font: var(--primitives-font-display-2-lg);
+		}
+
+		@container layout-area (max-width: ${smMax}) {
+			font: var(--primitives-font-display-2-sm);
+		}
+
+		@container layout-area (min-width: ${mdMin}) and (max-width: ${mdMax}) {
+			font: var(--primitives-font-display-2-md);
+		}
+
+		@container layout-area (min-width: ${lgMin}) {
+			font: var(--primitives-font-display-2-lg);
+		}
+	}
+
+	:host([size='3']) ::slotted(:not([slot])),
+	:host(:not([size])) ::slotted(:not([slot])) {
+		@media (max-width: ${smMax}) {
+			font: var(--primitives-font-display-3-sm);
+		}
+
+		@media (min-width: ${mdMin}) and (max-width: ${mdMax}) {
+			font: var(--primitives-font-display-3-md);
+		}
+
+		@media (min-width: ${lgMin}) {
+			font: var(--primitives-font-display-3-lg);
+		}
+
+		@container layout-area (max-width: ${smMax}) {
+			font: var(--primitives-font-display-3-sm);
+		}
+
+		@container layout-area (min-width: ${mdMin}) and (max-width: ${mdMax}) {
+			font: var(--primitives-font-display-3-md);
+		}
+
+		@container layout-area (min-width: ${lgMin}) {
+			font: var(--primitives-font-display-3-lg);
+		}
+	}
+
+	:host([size='4']) ::slotted(:not([slot])) {
+		@media (max-width: ${smMax}) {
+			font: var(--primitives-font-display-4-sm);
+		}
+
+		@media (min-width: ${mdMin}) and (max-width: ${mdMax}) {
+			font: var(--primitives-font-display-4-md);
+		}
+
+		@media (min-width: ${lgMin}) {
+			font: var(--primitives-font-display-4-lg);
+		}
+
+		@container layout-area (max-width: ${smMax}) {
+			font: var(--primitives-font-display-4-sm);
+		}
+
+		@container layout-area (min-width: ${mdMin}) and (max-width: ${mdMax}) {
+			font: var(--primitives-font-display-4-md);
+		}
+
+		@container layout-area (min-width: ${lgMin}) {
+			font: var(--primitives-font-display-4-lg);
+		}
+	}
+
+	:host([size='5']) ::slotted(:not([slot])) {
+		@media (max-width: ${smMax}) {
+			font: var(--primitives-font-display-5-sm);
+		}
+
+		@media (min-width: ${mdMin}) and (max-width: ${mdMax}) {
+			font: var(--primitives-font-display-5-md);
+		}
+
+		@media (min-width: ${lgMin}) {
+			font: var(--primitives-font-display-5-lg);
+		}
+
+		@container layout-area (max-width: ${smMax}) {
+			font: var(--primitives-font-display-5-sm);
+		}
+
+		@container layout-area (min-width: ${mdMin}) and (max-width: ${mdMax}) {
+			font: var(--primitives-font-display-5-md);
+		}
+
+		@container layout-area (min-width: ${lgMin}) {
+			font: var(--primitives-font-display-5-lg);
+		}
+	}
+
+	:host([size='6']) ::slotted(:not([slot])) {
+		@media (max-width: ${smMax}) {
+			font: var(--primitives-font-display-6-sm);
+		}
+
+		@media (min-width: ${mdMin}) and (max-width: ${mdMax}) {
+			font: var(--primitives-font-display-6-md);
+		}
+
+		@media (min-width: ${lgMin}) {
+			font: var(--primitives-font-display-6-lg);
+		}
+
+		@container layout-area (max-width: ${smMax}) {
+			font: var(--primitives-font-display-6-sm);
+		}
+
+		@container layout-area (min-width: ${mdMin}) and (max-width: ${mdMax}) {
+			font: var(--primitives-font-display-6-md);
+		}
+
+		@container layout-area (min-width: ${lgMin}) {
+			font: var(--primitives-font-display-6-lg);
+		}
+	}
+
+
+	/* # Subtitle */
+
+	::slotted([slot='subtitle']) {
+		margin: 0;
+		color: var(--semantics-content-secondary-color);
+		font: var(--primitives-font-body-sm-regular-tight);
+	}
+
+
+	/* # Actions */
+
+	.title__actions {
+		display: flex;
+		flex-direction: row;
+		align-items: center;
+		flex-shrink: 0;
+	}
+
+`;
+//# sourceMappingURL=title.styles.js.map

package/dist/components/content/title/title.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"title.styles.js","sourceRoot":"","sources":["../../../../src/components/content/title/title.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,SAAS,EAAE,MAAM,KAAK,CAAC;AACrC,OAAO,EAAE,WAAW,EAAE,MAAM,uCAAuC,CAAC;AAEpE,MAAM,KAAK,GAAG,SAAS,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC;AAC3C,MAAM,KAAK,GAAG,SAAS,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC;AAC3C,MAAM,KAAK,GAAG,SAAS,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC;AAC3C,MAAM,KAAK,GAAG,SAAS,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC;AAE3C,MAAM,CAAC,MAAM,WAAW,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;uBAoDP,KAAK;;;;uBAIL,KAAK,qBAAqB,KAAK;;;;uBAI/B,KAAK;;;;uCAIW,KAAK;;;;uCAIL,KAAK,qBAAqB,KAAK;;;;uCAI/B,KAAK;;;;;;uBAMrB,KAAK;;;;uBAIL,KAAK,qBAAqB,KAAK;;;;uBAI/B,KAAK;;;;uCAIW,KAAK;;;;uCAIL,KAAK,qBAAqB,KAAK;;;;uCAI/B,KAAK;;;;;;;uBAOrB,KAAK;;;;uBAIL,KAAK,qBAAqB,KAAK;;;;uBAI/B,KAAK;;;;uCAIW,KAAK;;;;uCAIL,KAAK,qBAAqB,KAAK;;;;uCAI/B,KAAK;;;;;;uBAMrB,KAAK;;;;uBAIL,KAAK,qBAAqB,KAAK;;;;uBAI/B,KAAK;;;;uCAIW,KAAK;;;;uCAIL,KAAK,qBAAqB,KAAK;;;;uCAI/B,KAAK;;;;;;uBAMrB,KAAK;;;;uBAIL,KAAK,qBAAqB,KAAK;;;;uBAI/B,KAAK;;;;uCAIW,KAAK;;;;uCAIL,KAAK,qBAAqB,KAAK;;;;uCAI/B,KAAK;;;;;;uBAMrB,KAAK;;;;uBAIL,KAAK,qBAAqB,KAAK;;;;uBAI/B,KAAK;;;;uCAIW,KAAK;;;;uCAIL,KAAK,qBAAqB,KAAK;;;;uCAI/B,KAAK;;;;;;;;;;;;;;;;;;;;;;;;CAwB3C,CAAC"}

package/dist/components/content/title/title.template.d.ts

@@ -0,0 +1,3 @@
+import { TemplateResult } from 'lit';
+export declare function titleTemplate(): TemplateResult;
+//# sourceMappingURL=title.template.d.ts.map

package/dist/components/content/title/title.template.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"title.template.d.ts","sourceRoot":"","sources":["../../../../src/components/content/title/title.template.ts"],"names":[],"mappings":"AAAA,OAAO,EAAQ,cAAc,EAAE,MAAM,KAAK,CAAC;AAE3C,wBAAgB,aAAa,IAAI,cAAc,CAa9C"}

package/dist/components/content/title/title.template.js

@@ -0,0 +1,16 @@
+import { html } from 'lit';
+export function titleTemplate() {
+    return html `
+		<div class="title">
+			<div class="title__title-group">
+				<slot name="overline"></slot>
+				<slot></slot>
+				<slot name="subtitle"></slot>
+			</div>
+			<div class="title__actions">
+				<slot name="actions"></slot>
+			</div>
+		</div>
+	`;
+}
+//# sourceMappingURL=title.template.js.map

package/dist/components/content/title/title.template.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"title.template.js","sourceRoot":"","sources":["../../../../src/components/content/title/title.template.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAkB,MAAM,KAAK,CAAC;AAE3C,MAAM,UAAU,aAAa;IAC5B,OAAO,IAAI,CAAA;;;;;;;;;;;EAWV,CAAC;AACH,CAAC"}

package/dist/components/content/tooltip/tooltip.d.ts

@@ -0,0 +1,65 @@
+/**
+ * Nederlandse Digitale Dienst Tooltip Component (Lit + TypeScript)
+ *
+ * Wrapper component dat een tooltip toont bij hover of focus op het child element.
+ * Gebruikt `display: contents` zodat het de layout van het child niet beïnvloedt.
+ *
+ * @element nldd-tooltip
+ * @attr {string} text - Tooltip tekst
+ * @attr {string} placement - Positie: 'top' | 'bottom' | 'left' | 'right' (standaard: 'bottom'; op touch devices automatisch 'top')
+ *
+ * @slot - Het element waarop de tooltip wordt getoond
+ *
+ * @note Gebruikt position: fixed + floating-ui strategy: 'fixed'. Positionering kan
+ * breken wanneer een voorouder-element transform, filter of will-change heeft.
+ *
+ * @note aria-describedby werkt alleen wanneer het trigger element in de light DOM staat.
+ * Bij web components als trigger (met eigen shadow DOM) is de koppeling een bekende
+ * limitatie van shadow DOM + ARIA. Voor nldd-icon-button is dit niet relevant omdat
+ * aria-label al op de interne button staat. Tooltip tekst op icon-button mag daarom
+ * geen informatie bevatten die niet al in aria-label zit.
+ *
+ * @note Bij disabled triggers (bijv. disabled nldd-icon-button) wordt de tooltip niet
+ * getoond omdat disabled buttons geen mouseenter/focusin events afvuren en display:
+ * contents geen eigen layout box heeft om events op te vangen.
+ */
+import { LitElement } from 'lit';
+import type { PropertyValues } from 'lit';
+type Placement = 'top' | 'bottom' | 'left' | 'right';
+export declare class NLDDTooltip extends LitElement {
+    static styles: import("lit").CSSResult;
+    text: string;
+    placement: Placement;
+    private get _effectivePlacement();
+    _visible: boolean;
+    _focusVisible: boolean;
+    private _tooltipId;
+    private _hideTimeout;
+    private _descriptionEl;
+    private _currentTrigger;
+    private _boundSlotChange;
+    connectedCallback(): void;
+    firstUpdated(): void;
+    updated(changed: PropertyValues): void;
+    private _syncAriaDescribedBy;
+    private _getTriggerElement;
+    private _getTooltipElement;
+    _handleTriggerEnter(): void;
+    _handleFocusIn(): void;
+    _handleTriggerLeave(): void;
+    /** Focus guard checks one shadow root level deep for composite triggers. */
+    _handleFocusOut(e: FocusEvent): void;
+    _handleTooltipEnter(): void;
+    _handleTooltipLeave(): void;
+    private _handleKeyDown;
+    private _updatePosition;
+    disconnectedCallback(): void;
+    render(): import("lit-html").TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'nldd-tooltip': NLDDTooltip;
+    }
+}
+export {};
+//# sourceMappingURL=tooltip.d.ts.map

package/dist/components/content/tooltip/tooltip.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"tooltip.d.ts","sourceRoot":"","sources":["../../../../src/components/content/tooltip/tooltip.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AAEH,OAAO,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AACjC,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,KAAK,CAAC;AAO1C,KAAK,SAAS,GAAG,KAAK,GAAG,QAAQ,GAAG,MAAM,GAAG,OAAO,CAAC;AAKrD,qBACa,WAAY,SAAQ,UAAU;IAC1C,OAAgB,MAAM,0BAAiB;IAGvC,IAAI,SAAM;IAGV,SAAS,EAAE,SAAS,CAAY;IAEhC,OAAO,KAAK,mBAAmB,GAE9B;IAGD,QAAQ,UAAS;IAGjB,aAAa,UAAS;IAEtB,OAAO,CAAC,UAAU,CAAsC;IACxD,OAAO,CAAC,YAAY,CAA8C;IAClE,OAAO,CAAC,cAAc,CAAgC;IACtD,OAAO,CAAC,eAAe,CAAwB;IAC/C,OAAO,CAAC,gBAAgB,CAAqC;IAEpD,iBAAiB,IAAI,IAAI;IASzB,YAAY,IAAI,IAAI;IAIpB,OAAO,CAAC,OAAO,EAAE,cAAc,GAAG,IAAI;IAS/C,OAAO,CAAC,oBAAoB;IAwC5B,OAAO,CAAC,kBAAkB;IAM1B,OAAO,CAAC,kBAAkB;IAI1B,mBAAmB,IAAI,IAAI;IAW3B,cAAc,IAAI,IAAI;IActB,mBAAmB,IAAI,IAAI;IAW3B,4EAA4E;IAC5E,eAAe,CAAC,CAAC,EAAE,UAAU,GAAG,IAAI;IAUpC,mBAAmB,IAAI,IAAI;IAO3B,mBAAmB,IAAI,IAAI;IAI3B,OAAO,CAAC,cAAc,CAKpB;YAEY,eAAe;IAoBpB,oBAAoB,IAAI,IAAI;IAe5B,MAAM;CAGf;AAED,OAAO,CAAC,MAAM,CAAC;IACd,UAAU,qBAAqB;QAC9B,cAAc,EAAE,WAAW,CAAC;KAC5B;CACD"}

package/dist/components/content/tooltip/tooltip.js

@@ -0,0 +1,234 @@
+/**
+ * Nederlandse Digitale Dienst Tooltip Component (Lit + TypeScript)
+ *
+ * Wrapper component dat een tooltip toont bij hover of focus op het child element.
+ * Gebruikt `display: contents` zodat het de layout van het child niet beïnvloedt.
+ *
+ * @element nldd-tooltip
+ * @attr {string} text - Tooltip tekst
+ * @attr {string} placement - Positie: 'top' | 'bottom' | 'left' | 'right' (standaard: 'bottom'; op touch devices automatisch 'top')
+ *
+ * @slot - Het element waarop de tooltip wordt getoond
+ *
+ * @note Gebruikt position: fixed + floating-ui strategy: 'fixed'. Positionering kan
+ * breken wanneer een voorouder-element transform, filter of will-change heeft.
+ *
+ * @note aria-describedby werkt alleen wanneer het trigger element in de light DOM staat.
+ * Bij web components als trigger (met eigen shadow DOM) is de koppeling een bekende
+ * limitatie van shadow DOM + ARIA. Voor nldd-icon-button is dit niet relevant omdat
+ * aria-label al op de interne button staat. Tooltip tekst op icon-button mag daarom
+ * geen informatie bevatten die niet al in aria-label zit.
+ *
+ * @note Bij disabled triggers (bijv. disabled nldd-icon-button) wordt de tooltip niet
+ * getoond omdat disabled buttons geen mouseenter/focusin events afvuren en display:
+ * contents geen eigen layout box heeft om events op te vangen.
+ */
+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 { computePosition, flip, shift, offset } from '@floating-ui/dom';
+import { tooltipStyles } from './tooltip.styles.js';
+import { tooltipTemplate } from './tooltip.template.js';
+import { isTouchMode } from '../../../utilities/input-modality.js';
+let tooltipCounter = 0;
+const coarsePointerQuery = matchMedia('(pointer: coarse)');
+let NLDDTooltip = class NLDDTooltip extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.text = '';
+        this.placement = 'bottom';
+        this._visible = false;
+        this._focusVisible = false;
+        this._tooltipId = `nldd-tooltip-${++tooltipCounter}`;
+        this._hideTimeout = null;
+        this._descriptionEl = null;
+        this._currentTrigger = null;
+        this._boundSlotChange = () => this._syncAriaDescribedBy();
+        this._handleKeyDown = (e) => {
+            if (e.key === 'Escape' && this._visible) {
+                this._visible = false;
+                this._focusVisible = false;
+            }
+        };
+    }
+    get _effectivePlacement() {
+        return this.placement;
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this.addEventListener('keydown', this._handleKeyDown);
+        // Re-register slotchange after reconnect (firstUpdated only runs once)
+        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('_visible') && this._visible) {
+            this._updatePosition();
+        }
+        if (changed.has('text')) {
+            this._syncAriaDescribedBy();
+        }
+    }
+    _syncAriaDescribedBy() {
+        const trigger = this._getTriggerElement();
+        // Clean up previous trigger if it changed
+        if (this._currentTrigger && this._currentTrigger !== trigger) {
+            this._currentTrigger.removeAttribute('aria-describedby');
+        }
+        this._currentTrigger = trigger;
+        if (!trigger)
+            return;
+        // aria-describedby ID refs are scoped to the element's root.
+        // Only works for triggers in the light DOM (document scope).
+        if (trigger.getRootNode() !== document) {
+            return;
+        }
+        if (this.text) {
+            if (!this._descriptionEl) {
+                this._descriptionEl = document.createElement('span');
+                this._descriptionEl.id = this._tooltipId;
+                Object.assign(this._descriptionEl.style, {
+                    position: 'absolute',
+                    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() {
+        const slot = this.shadowRoot?.querySelector('slot');
+        const assigned = slot?.assignedElements({ flatten: true });
+        return assigned?.[0] ?? null;
+    }
+    _getTooltipElement() {
+        return this.shadowRoot?.querySelector('.tooltip') ?? null;
+    }
+    _handleTriggerEnter() {
+        if (!this.text)
+            return;
+        if (coarsePointerQuery.matches)
+            return;
+        if (this._hideTimeout) {
+            clearTimeout(this._hideTimeout);
+            this._hideTimeout = null;
+        }
+        this._focusVisible = false;
+        this._visible = true;
+    }
+    _handleFocusIn() {
+        if (!this.text)
+            return;
+        // Touch taps can focus elements with explicit `tabindex` (e.g. tab-bar's
+        // roving-tabindex pattern on iOS, Android `<button>` focus-on-tap).
+        // Suppress the tooltip in that case — it's not a keyboard intent.
+        if (isTouchMode())
+            return;
+        if (this._hideTimeout) {
+            clearTimeout(this._hideTimeout);
+            this._hideTimeout = null;
+        }
+        this._focusVisible = true;
+        this._visible = true;
+    }
+    _handleTriggerLeave() {
+        if (this._hideTimeout) {
+            clearTimeout(this._hideTimeout);
+        }
+        const hideDelay = parseInt(getComputedStyle(this).getPropertyValue('--_hide-delay'), 10);
+        this._hideTimeout = setTimeout(() => {
+            this._visible = false;
+            this._hideTimeout = null;
+        }, hideDelay);
+    }
+    /** Focus guard checks one shadow root level deep for composite triggers. */
+    _handleFocusOut(e) {
+        const slot = this.shadowRoot?.querySelector('slot');
+        const assigned = slot?.assignedElements({ flatten: true }) ?? [];
+        const related = e.relatedTarget;
+        const stillInside = related && assigned.some(el => el.contains(related) || el.shadowRoot?.contains(related));
+        if (!stillInside)
+            this._handleTriggerLeave();
+    }
+    _handleTooltipEnter() {
+        if (this._hideTimeout) {
+            clearTimeout(this._hideTimeout);
+            this._hideTimeout = null;
+        }
+    }
+    _handleTooltipLeave() {
+        this._handleTriggerLeave();
+    }
+    async _updatePosition() {
+        const trigger = this._getTriggerElement();
+        const tooltip = this._getTooltipElement();
+        if (!trigger || !tooltip)
+            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) }),
+            ],
+        });
+        tooltip.style.left = `${x}px`;
+        tooltip.style.top = `${y}px`;
+    }
+    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;
+        }
+        // Clean up aria-describedby on trigger and remove description span from body
+        this._currentTrigger?.removeAttribute('aria-describedby');
+        this._currentTrigger = null;
+        this._descriptionEl?.remove();
+        this._descriptionEl = null;
+    }
+    render() {
+        return tooltipTemplate(this);
+    }
+};
+NLDDTooltip.styles = tooltipStyles;
+__decorate([
+    property({ type: String, reflect: true })
+], NLDDTooltip.prototype, "text", void 0);
+__decorate([
+    property({ type: String, reflect: true })
+], NLDDTooltip.prototype, "placement", void 0);
+__decorate([
+    state()
+], NLDDTooltip.prototype, "_visible", void 0);
+__decorate([
+    state()
+], NLDDTooltip.prototype, "_focusVisible", void 0);
+NLDDTooltip = __decorate([
+    customElement('nldd-tooltip')
+], NLDDTooltip);
+export { NLDDTooltip };
+//# sourceMappingURL=tooltip.js.map

package/dist/components/content/tooltip/tooltip.js.map

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

package/dist/components/content/tooltip/tooltip.styles.d.ts

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

package/dist/components/content/tooltip/tooltip.styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"tooltip.styles.d.ts","sourceRoot":"","sources":["../../../../src/components/content/tooltip/tooltip.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,aAAa,yBAyFzB,CAAC"}

package/dist/components/content/tooltip/tooltip.styles.js

@@ -0,0 +1,92 @@
+import { css } from 'lit';
+export const tooltipStyles = css `
+
+
+	/* # Host */
+
+	:host {
+		display: contents;
+		--_z-index: 10000;
+		--_show-delay: 700ms;
+		--_show-duration: var(--primitives-transition-duration-fast);
+		--_hide-delay: 50; /* unitless ms, read by JavaScript */
+		--_hide-duration: var(--primitives-transition-duration-fast);
+		--_offset: 4; /* px, unitless — read by JS */
+		--_shift-padding: 8; /* px, unitless — read by JS */
+		--_max-width: var(--primitives-area-280);
+	}
+
+	:host([hidden]) {
+		display: none;
+	}
+
+
+	/* # Block */
+
+	.tooltip {
+		position: fixed;
+		z-index: var(--_z-index);
+		opacity: 0;
+		pointer-events: none;
+		visibility: hidden;
+		transition:
+			opacity var(--_hide-duration) ease,
+			visibility 0ms linear var(--_hide-duration),
+			pointer-events 0ms linear var(--_hide-duration);
+	}
+
+	.tooltip.is-visible {
+		opacity: 1;
+		visibility: visible;
+		pointer-events: auto;
+		transition:
+			opacity var(--_show-duration) ease var(--_show-delay),
+			visibility 0ms linear,
+			pointer-events 0ms linear var(--_show-delay);
+	}
+
+	/* Focus triggers: geen show delay */
+	.tooltip.is-focus-visible {
+		opacity: 1;
+		visibility: visible;
+		pointer-events: auto;
+		transition:
+			opacity var(--_show-duration) ease,
+			visibility 0ms linear,
+			pointer-events 0ms linear;
+	}
+
+
+	/* ## Tooltip body */
+
+	.tooltip__body {
+		background-color: var(--components-tooltip-background-color);
+		color: var(--components-tooltip-content-color);
+		font: var(--primitives-font-body-xs-regular-tight);
+		padding-block: var(--primitives-space-4);
+		padding-inline: var(--primitives-space-8);
+		width: max-content;
+		max-width: var(--_max-width);
+		overflow-wrap: break-word;
+		box-shadow: var(--components-tooltip-box-shadow);
+		border-radius: var(--primitives-corner-radius-xs);
+	}
+
+
+	/* # Toegankelijkheid */
+
+	@media (forced-colors: active) {
+		.tooltip__body {
+			border: 1px solid CanvasText;
+		}
+	}
+
+	@media (prefers-reduced-motion: reduce) {
+		.tooltip,
+		.tooltip.is-visible,
+		.tooltip.is-focus-visible {
+			transition: none;
+		}
+	}
+`;
+//# sourceMappingURL=tooltip.styles.js.map