@nldd/design-system 0.8.79 → 0.8.82

package/dist/components/status-and-feedback/modal-dialog/modal-dialog.js.map

@@ -1 +1 @@
-{"version":3,"file":"modal-dialog.js","sourceRoot":"","sources":["../../../../src/components/status-and-feedback/modal-dialog/modal-dialog.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"modal-dialog.js","sourceRoot":"","sources":["../../../../src/components/status-and-feedback/modal-dialog/modal-dialog.ts"],"names":[],"mappings":"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"}

package/dist/components/status-and-feedback/notification/notification-region.d.ts

@@ -0,0 +1,6 @@
+import type { NLDDNotification } from './notification.js';
+/** Newest in front: what just happened is what you want to read, and the older
+ *  ones slide back and downwards behind it. */
+export declare function joinRegion(notification: NLDDNotification, label: string): void;
+export declare function leaveRegion(notification: NLDDNotification): void;
+//# sourceMappingURL=notification-region.d.ts.map

package/dist/components/status-and-feedback/notification/notification-region.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"notification-region.d.ts","sourceRoot":"","sources":["../../../../src/components/status-and-feedback/notification/notification-region.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,mBAAmB,CAAC;AAgH1D;+CAC+C;AAC/C,wBAAgB,UAAU,CAAC,YAAY,EAAE,gBAAgB,EAAE,KAAK,EAAE,MAAM,GAAG,IAAI,CAK9E;AAED,wBAAgB,WAAW,CAAC,YAAY,EAAE,gBAAgB,GAAG,IAAI,CAYhE"}

package/dist/components/status-and-feedback/notification/notification-region.js

@@ -0,0 +1,245 @@
+/**
+ * The one place every notification ends up, wherever a consumer wrote it.
+ *
+ * It exists because a notification cannot answer the three questions that decide
+ * its behaviour on its own: where it sits in the stack, how deep it is buried,
+ * and whether it is the one that should be counting down. All three are
+ * properties of the group. The region owns the group, so it owns the answers.
+ *
+ * ## The deck
+ * Notifications sit on top of each other, the front one readable and the older
+ * ones peeking out below it, so a burst of messages takes the room of roughly
+ * one. The newest is in front and is the one counting down. Dismiss it and the
+ * one behind it is already standing there: it slides up into the place that
+ * came free and its message fades in, because it was there all along.
+ *
+ * ## Opening it
+ * Under the front notification sits a strip as wide as the deck and as tall as
+ * the deck is when it fans out. That strip is the handle: pointing at it fans
+ * the deck out to fill it, clicking it lays the deck out as a list. Moving
+ * focus into the region does the same, and clicking or tabbing away puts it
+ * back. Nothing counts down while the list is open, because open means someone
+ * is reading. The notification itself is not a button, so a click on the
+ * message you are reading does nothing, which is what it says it does.
+ */
+const REGION_ID = 'nldd-notification-region';
+/** Past this a notification adds no edge of its own: it would sit exactly
+ *  behind the last one that does, and stack another copy of the same shadow on
+ *  the same spot. Three cards is enough to say "there is more". */
+const MAX_DEPTH = 2;
+let frontObserver = null;
+let expanded = false;
+function notifications(region) {
+    return Array.from(region.querySelectorAll(':scope > nldd-notification'));
+}
+function expander(region) {
+    return region.querySelector(':scope > [data-expander]');
+}
+function ensureRegion(label) {
+    const existing = document.getElementById(REGION_ID);
+    if (existing)
+        return existing;
+    const region = document.createElement('div');
+    region.id = REGION_ID;
+    // Styled here rather than in a stylesheet because this element is not a
+    // component: it is the one fixed place notifications land, and where that is
+    // deliberately cannot be set. Top right from md so it stays clear of the
+    // content, full width across the top below that, where there is no corner to
+    // spare. One grid cell holds every notification, so the deck stacks without
+    // any of them taking room of its own.
+    region.style.cssText = [
+        'box-sizing: border-box',
+        'position: fixed',
+        'z-index: 1000',
+        'top: max(var(--semantics-overlays-inset), env(safe-area-inset-top))',
+        'right: max(var(--semantics-overlays-inset), env(safe-area-inset-right))',
+        'left: auto',
+        'display: grid',
+        'align-items: start',
+        'pointer-events: none',
+        'max-height: calc(100dvh - 2 * var(--semantics-overlays-inset))',
+    ].join(';');
+    // The stack itself catches no clicks, only the notifications in it, so the
+    // empty space beside them stays part of the page.
+    region.addEventListener('pointerdown', () => { }, { passive: true });
+    // Focus is the keyboard's way of reaching for the deck. Without this, tabbing
+    // would land on a button in a notification nobody can see.
+    region.addEventListener('focusin', () => setExpanded(region, true));
+    region.addEventListener('focusout', (e) => {
+        if (region.contains(e.relatedTarget))
+            return;
+        setExpanded(region, false);
+    });
+    // A live region so a notification is announced wherever it was written; the
+    // urgency itself comes from each notification's own role.
+    region.setAttribute('role', 'region');
+    region.setAttribute('aria-label', label);
+    region.appendChild(makeExpander(region));
+    document.body.appendChild(region);
+    return region;
+}
+/**
+ * The strip under the front notification. It covers the edges peeking out from
+ * behind it, which on their own are a few pixels tall and no target at all, and
+ * it stays exactly as tall as the deck is when it fans out, so what you point
+ * at is what you get.
+ */
+function makeExpander(region) {
+    const strip = document.createElement('div');
+    strip.dataset.expander = '';
+    strip.style.cssText = [
+        'position: absolute',
+        'z-index: 1000',
+        'top: 100%',
+        'right: 0',
+        'left: 0',
+        'display: none',
+        'height: var(--primitives-space-24)',
+        'pointer-events: auto',
+    ].join(';');
+    strip.addEventListener('pointerenter', () => setFanned(region, true));
+    strip.addEventListener('pointerleave', () => setFanned(region, false));
+    strip.addEventListener('click', () => setExpanded(region, true));
+    return strip;
+}
+/** Newest in front: what just happened is what you want to read, and the older
+ *  ones slide back and downwards behind it. */
+export function joinRegion(notification, label) {
+    const region = ensureRegion(label);
+    notification.style.pointerEvents = 'auto';
+    region.prepend(notification);
+    syncStack(region);
+}
+export function leaveRegion(notification) {
+    const region = document.getElementById(REGION_ID);
+    if (!region)
+        return;
+    if (notification.parentElement === region)
+        region.removeChild(notification);
+    if (notifications(region).length === 0) {
+        stopWatchingFront();
+        document.removeEventListener('pointerdown', onDocumentPointerDown, true);
+        expanded = false;
+        region.remove();
+        return;
+    }
+    syncStack(region);
+}
+/**
+ * Exactly one notification counts down: the front of the deck, and only while
+ * the deck is closed. The rest wait their turn, so nothing disappears from
+ * under the one you are reading. An error in front never leaves on its own, and
+ * holds the whole deck until it is dismissed.
+ *
+ * Closed, everything behind the front is cut to the front's height. Without
+ * that a taller notification would hang out from under a shorter one, and a
+ * shorter one would vanish behind a taller one, leaving a deck that says
+ * nothing about how much is in it.
+ */
+function syncStack(region) {
+    const items = notifications(region);
+    if (items.length < 2)
+        expanded = false;
+    region.style.display = expanded ? 'flex' : 'grid';
+    region.style.flexDirection = expanded ? 'column' : '';
+    region.style.gap = expanded ? 'var(--primitives-space-12)' : '';
+    expander(region).style.display = !expanded && items.length > 1 ? 'block' : 'none';
+    items.forEach((item, index) => {
+        item.style.gridArea = expanded ? '' : '1 / 1';
+        item.style.setProperty('--_stack-depth', expanded ? '0' : String(Math.min(index, MAX_DEPTH)));
+        // Closed, the front has to paint over the deck. Open, it is the other way
+        // round: each notification covers the shadow of the one above it, so no
+        // shadow lands on a notification instead of on the page.
+        item.style.zIndex = String(expanded ? index + 1 : items.length - index);
+        item.style.visibility = !expanded && index > MAX_DEPTH ? 'hidden' : '';
+        item._setFront?.(!expanded && index === 0);
+    });
+    if (expanded) {
+        stopWatchingFront();
+        items.forEach((item) => { item.style.height = ''; });
+        applyOverflow(region);
+        return;
+    }
+    applyOverflow(region);
+    watchFront(region, items[0]);
+}
+/**
+ * A list longer than the screen it opened on has to scroll, because a message
+ * you cannot reach is a message you do not have. It only scrolls then: a scroll
+ * box clips, and what it would clip is the shadow every notification stands on.
+ */
+function applyOverflow(region) {
+    // Measure unclipped, which means putting it back first.
+    setScrolling(region, false);
+    if (!expanded)
+        return;
+    if (region.scrollHeight <= region.clientHeight)
+        return;
+    setScrolling(region, true);
+}
+function setScrolling(region, on) {
+    const inset = 'var(--semantics-overlays-inset)';
+    const shadow = 'var(--primitives-space-48)';
+    region.style.overflow = on ? 'auto' : '';
+    region.style.overscrollBehavior = on ? 'contain' : '';
+    // Room inside the scroll box for the shadow, taken straight back off the
+    // outside again, so nothing moves when the list starts to scroll. Left and
+    // below it needs the reach of the shadow itself; above and to the right the
+    // box lands on the edge of the screen, where a clip and a shadow running off
+    // the screen look the same.
+    region.style.padding = on ? `${inset} ${inset} ${shadow} ${shadow}` : '';
+    region.style.margin = on ? `calc(-1 * ${inset}) calc(-1 * ${inset}) 0 calc(-1 * ${shadow})` : '';
+    region.style.maxHeight = on ? '100dvh' : `calc(100dvh - 2 * ${inset})`;
+}
+function setExpanded(region, next) {
+    if (expanded === next)
+        return;
+    if (next && notifications(region).length < 2)
+        return;
+    expanded = next;
+    if (next) {
+        setFanned(region, false);
+        document.addEventListener('pointerdown', onDocumentPointerDown, true);
+    }
+    else {
+        document.removeEventListener('pointerdown', onDocumentPointerDown, true);
+    }
+    syncStack(region);
+}
+function onDocumentPointerDown(e) {
+    const region = document.getElementById(REGION_ID);
+    if (!region)
+        return;
+    if (e.composedPath().includes(region))
+        return;
+    setExpanded(region, false);
+}
+/** Pointing at the strip fans the deck out until it fills it. It is the only
+ *  thing saying there is more here than the one message you can read. */
+function setFanned(region, on) {
+    notifications(region).forEach((item) => {
+        item.style.setProperty('--_stack-fanned', on ? '1' : '0');
+    });
+}
+function watchFront(region, front) {
+    stopWatchingFront();
+    if (!front)
+        return;
+    // Not just once: the front notification is a live element whose height moves
+    // with its own text, and the deck behind it has to follow.
+    if (typeof ResizeObserver !== 'undefined') {
+        frontObserver = new ResizeObserver(() => cutToFront(region, front.offsetHeight));
+        frontObserver.observe(front);
+    }
+    cutToFront(region, front.offsetHeight);
+}
+function stopWatchingFront() {
+    frontObserver?.disconnect();
+    frontObserver = null;
+}
+function cutToFront(region, height) {
+    notifications(region).forEach((item, index) => {
+        item.style.height = index === 0 ? '' : `${height}px`;
+    });
+}
+//# sourceMappingURL=notification-region.js.map

package/dist/components/status-and-feedback/notification/notification-region.js.map

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

package/dist/components/status-and-feedback/notification/notification.d.ts

@@ -0,0 +1,129 @@
+/**
+ * Nederlandse Digitale Dienst Notification Component (Lit + TypeScript)
+ *
+ * A short message that arrives over the interface and leaves on its own: a
+ * save that worked, a request that failed. Not a banner, which stands in the
+ * page and stays there — this one floats, stacks, and goes away.
+ *
+ * It places itself. Write it wherever it belongs in your code and it moves to
+ * one shared region: top right from md, full width across the top below that.
+ * Nothing about the position is settable, so notifications from anywhere in an
+ * application land in the same place and stack in the same order.
+ *
+ * ## The stack
+ * More than one is a deck, not a list: the front one is readable and the older
+ * ones peek out below it, so a burst of messages takes the room of roughly one.
+ * The newest is in front. Behind it a notification is a bare surface, cut to
+ * the height of the one in front; dismiss the front and it slides up into the
+ * place that came free while its message fades in, because it was standing
+ * there all along.
+ *
+ * Under the front notification sits a strip as wide as the deck and as tall as
+ * the deck is when it fans out. Pointing at it fans the deck out to fill it,
+ * which is the only hint that there is more here than the message you can read;
+ * clicking it, or moving focus into the region, lays the whole deck out as a
+ * list. Clicking or tabbing away puts it back. The notification itself is not a
+ * button: a click on the message you are reading does nothing.
+ *
+ * ## Timing
+ * Only the front of the deck counts down, and only while the deck is closed:
+ * open means someone is reading. The rest wait, so nothing disappears from
+ * under the one you are reading. `critical` never leaves on its own: a
+ * failure is worth reading, and the count-down would take it away while you
+ * were. That also keeps this within WCAG 2.2.1, which allows a time limit when
+ * what disappears is not essential.
+ *
+ * The clock pauses while a pointer moves over the notification and while focus
+ * is inside it, and resumes where it left off rather than starting over. A
+ * pointer that merely happens to rest where the notification appears does not
+ * count: it never moved, so nobody is reading.
+ *
+ * ## ARIA
+ * role follows the variant: `critical` becomes role="alert", the rest
+ * role="status". Focus never moves on its own. Escape dismisses the
+ * notification that focus is in.
+ *
+ * @element nldd-notification
+ *
+ * @attr {'neutral'|'accent'|'success'|'warning'|'critical'} variant - What kind of message this is; sets the icon color and the ARIA role (default: 'neutral')
+ * @attr {string} icon - Icon override. Default per variant: neutral → info-circle-filled, accent → info-circle-filled, success → check-circle-filled, warning → exclamation-triangle-filled, critical → exclamation-circle-filled
+ * @attr {string} text - The message
+ * @attr {string} supporting-text - A second line under the message
+ * @attr {number} duration - Milliseconds before it leaves once it is front of the deck (default: 10000). `0` keeps it until dismissed, which is what `critical` does regardless.
+ * @attr {object} translations - Override translation keys; unset keys fall back to Dutch
+ *
+ * @slot actions - At most 2 nldd-button elements, under the text. More than 2 is refused with a DEV warning: a message that needs three choices is a dialog.
+ *
+ * @fires dismiss - Fired when the notification is dismissed, by the button, by Escape, or by its own clock. The consumer removes it.
+ */
+import { LitElement, type PropertyValues } from 'lit';
+import '../../content/icon/icon.js';
+import '../../actions/icon-button/icon-button.js';
+export type NotificationVariant = 'neutral' | 'accent' | 'success' | 'warning' | 'critical';
+declare const NLDDNotification_base: (abstract new (...args: any[]) => LitElement & {
+    translations: Partial<{
+        'components.notification.dismiss-action': string;
+        'components.notification.region-label': string;
+    }>;
+    _t(key: "components.notification.dismiss-action" | "components.notification.region-label", vars?: Record<string, string | number>): string;
+}) & typeof LitElement;
+export declare class NLDDNotification extends NLDDNotification_base {
+    static styles: import("lit").CSSResult;
+    variant: NotificationVariant;
+    icon: string;
+    text: string;
+    supportingText: string;
+    duration: number;
+    _hasActions: boolean;
+    /** Set by the region: true for the front of the deck, the only one that runs
+     *  its clock. */
+    private _isFront;
+    private _timer;
+    /** When the running timeout was scheduled, so a pause can work out what is
+     *  left of it. */
+    private _timerStartedAt;
+    /** Remembered from the events rather than read back from the browser with
+     *  `:hover`: what an engine reports about a stationary pointer over a fixed
+     *  spot differs per engine and per platform. */
+    private _pointerInside;
+    private _focusInside;
+    /** Moving into the region disconnects and reconnects this element. Without
+     *  this the leave-handler would tear down the very region we are joining. */
+    private _moving;
+    /** What is left of `duration`, so a pause resumes rather than restarts. */
+    private _remainingDuration;
+    get _resolvedIcon(): string;
+    /** `critical` ignores any duration: a failure stays until it is read. */
+    private get _leavesOnItsOwn();
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    willUpdate(changed: PropertyValues): void;
+    /** Called by the region. Starting the clock here rather than on connect is
+     *  the whole point: a notification three deep in the deck is not counting. */
+    _setFront(isFront: boolean): void;
+    _onActionsSlotChange: (e: Event) => void;
+    /** A move rather than an enter. A notification arrives at a fixed spot on the
+     *  screen, so the browser hit-tests whatever happens to be under the pointer
+     *  and fires a genuine pointerenter without the pointer having moved. Taking
+     *  that as hover parks the clock forever for anyone whose cursor happens to
+     *  rest in that corner, because the pointerleave that would release it never
+     *  comes. A move is someone pointing at it; sitting still is not. */
+    private _onPointerMove;
+    private _onPointerLeave;
+    private _onFocusIn;
+    private _onFocusOut;
+    private _resumeTimer;
+    /** Clears the running timeout and banks what is left of the duration. */
+    private _clearTimer;
+    private _onKeyDown;
+    _handleDismiss: () => void;
+    private _dismiss;
+    render(): import("lit-html").TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'nldd-notification': NLDDNotification;
+    }
+}
+export {};
+//# sourceMappingURL=notification.d.ts.map

package/dist/components/status-and-feedback/notification/notification.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"notification.d.ts","sourceRoot":"","sources":["../../../../src/components/status-and-feedback/notification/notification.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAyDG;AAEH,OAAO,EAAE,UAAU,EAAE,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;AAQtD,OAAO,4BAA4B,CAAC;AACpC,OAAO,0CAA0C,CAAC;AAElD,MAAM,MAAM,mBAAmB,GAAG,SAAS,GAAG,QAAQ,GAAG,SAAS,GAAG,SAAS,GAAG,UAAU,CAAC;;;;;;;;AAY5F,qBACa,gBAAiB,SAAQ,qBAA0D;IAC/F,OAAgB,MAAM,0BAAsB;IAG5C,OAAO,EAAE,mBAAmB,CAAa;IAGzC,IAAI,SAAM;IAGV,IAAI,SAAM;IAGV,cAAc,SAAM;IAGpB,QAAQ,SAAoB;IAG5B,WAAW,UAAS;IAEpB;qBACiB;IAEjB,OAAO,CAAC,QAAQ,CAAS;IAEzB,OAAO,CAAC,MAAM,CAAuB;IAErC;sBACkB;IAClB,OAAO,CAAC,eAAe,CAAK;IAE5B;;oDAEgD;IAChD,OAAO,CAAC,cAAc,CAAS;IAE/B,OAAO,CAAC,YAAY,CAAS;IAE7B;iFAC6E;IAC7E,OAAO,CAAC,OAAO,CAAS;IAExB,2EAA2E;IAC3E,OAAO,CAAC,kBAAkB,CAAoB;IAE9C,IAAI,aAAa,IAAI,MAAM,CAE1B;IAED,yEAAyE;IACzE,OAAO,KAAK,eAAe,GAE1B;IAEQ,iBAAiB,IAAI,IAAI;IAsBzB,oBAAoB,IAAI,IAAI;IAY5B,UAAU,CAAC,OAAO,EAAE,cAAc,GAAG,IAAI;IAQlD;kFAC8E;IAC9E,SAAS,CAAC,OAAO,EAAE,OAAO,GAAG,IAAI;IAOjC,oBAAoB,GAAI,GAAG,KAAK,KAAG,IAAI,CASrC;IAEF;;;;;yEAKqE;IACrE,OAAO,CAAC,cAAc,CAIpB;IAEF,OAAO,CAAC,eAAe,CAGrB;IAEF,OAAO,CAAC,UAAU,CAGhB;IAEF,OAAO,CAAC,WAAW,CAMjB;IAEF,OAAO,CAAC,YAAY,CAQlB;IAEF,yEAAyE;IACzE,OAAO,CAAC,WAAW;IAOnB,OAAO,CAAC,UAAU,CAIhB;IAEF,cAAc,QAAO,IAAI,CAEvB;IAEF,OAAO,CAAC,QAAQ;IAKP,MAAM;CAGf;AAED,OAAO,CAAC,MAAM,CAAC;IACd,UAAU,qBAAqB;QAC9B,mBAAmB,EAAE,gBAAgB,CAAC;KACtC;CACD"}

package/dist/components/status-and-feedback/notification/notification.i18n.d.ts

@@ -0,0 +1,6 @@
+export declare const nlddNotificationTranslations: {
+    'components.notification.dismiss-action': string;
+    'components.notification.region-label': string;
+};
+export type NLDDNotificationTranslations = typeof nlddNotificationTranslations;
+//# sourceMappingURL=notification.i18n.d.ts.map

package/dist/components/status-and-feedback/notification/notification.i18n.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"notification.i18n.d.ts","sourceRoot":"","sources":["../../../../src/components/status-and-feedback/notification/notification.i18n.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,4BAA4B;;;CAGxC,CAAC;AAEF,MAAM,MAAM,4BAA4B,GAAG,OAAO,4BAA4B,CAAC"}

package/dist/components/status-and-feedback/notification/notification.i18n.js

@@ -0,0 +1,5 @@
+export const nlddNotificationTranslations = {
+    'components.notification.dismiss-action': 'Sluit',
+    'components.notification.region-label': 'Meldingen',
+};
+//# sourceMappingURL=notification.i18n.js.map

package/dist/components/status-and-feedback/notification/notification.i18n.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"notification.i18n.js","sourceRoot":"","sources":["../../../../src/components/status-and-feedback/notification/notification.i18n.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,4BAA4B,GAAG;IAC3C,wCAAwC,EAAE,OAAO;IACjD,sCAAsC,EAAE,WAAW;CACnD,CAAC"}