@nldd/design-system 0.8.68 → 0.8.69

package/dist/utilities/popup-anchor-controller.d.ts

@@ -0,0 +1,63 @@
+/**
+ * Shared wiring for a control that invokes a slotted overlay (`nldd-menu` /
+ * `nldd-popover`): it adopts the overlay from a slot, anchors it, and turns the
+ * control's clicks into open/close.
+ *
+ * A controller rather than a mixin, because the parts that differ between
+ * nldd-button, nldd-icon-button and nldd-split-button are configuration, not
+ * subclassing: the anchor target (the host, or an inner wrapper) is a callback,
+ * and the click handling is a method the control calls from its own handler,
+ * which then falls through to its own form / link / event behaviour. Split-button
+ * layers `toggle` tracking on top via `onChange`, which composition allows and
+ * inheritance would fight.
+ *
+ * The delicate part it centralises is the pointerdown snapshot. The browser
+ * light-dismisses an open popover on pointerdown, which is *before* the click
+ * lands, so a click handler that only sees "the overlay is closed" would
+ * immediately re-open what the same gesture just dismissed (the "flashes closed
+ * then reopens" bug). Snapshotting on pointerdown keeps the two apart.
+ */
+import type { NLDDMenu } from '../components/actions/menu/menu.js';
+import type { NLDDPopover } from '../components/layout/popover/popover.js';
+/** A floating overlay a control can anchor and toggle from a slot. Both expose
+ *  `anchorElement` and bail on their own anchor-click toggle once it is set, so
+ *  the control drives them uniformly via showPopover(). */
+export type Overlay = (NLDDMenu | NLDDPopover) & {
+    anchorElement: Element | null;
+};
+export interface PopupAnchorOptions {
+    /** Element the overlay positions against; defaults to the host. A callback,
+     *  so a target that only resolves after the first render (an inner element
+     *  behind @query) still works — call `anchor()` once it exists. */
+    anchorFor?: () => Element | null;
+    /** Runs after the slotted overlay is swapped, for behaviour layered on top
+     *  (e.g. tracking `toggle` to drive a chevron's expanded state). */
+    onChange?: (overlay: Overlay | null, previous: Overlay | null) => void;
+}
+export declare class PopupAnchorController {
+    private _anchorFor;
+    private _onChange?;
+    private _overlay;
+    private _wasOpenOnPointerdown;
+    constructor(host: HTMLElement, options?: PopupAnchorOptions);
+    /** The slotted overlay, or null when none is slotted. */
+    get overlay(): Overlay | null;
+    /** Bind to the popup slot's `slotchange`. */
+    handleSlotChange: (event: Event) => void;
+    /** 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: Overlay | null): void;
+    /** (Re-)anchor the current overlay. Call once the anchor target exists when
+     *  it resolves later than the first `slotchange`. */
+    anchor(): void;
+    /** Bind to the invoker's `pointerdown`. Snapshots the open state before the
+     *  browser's light-dismiss runs. Covers mouse, touch and pen — `mousedown`
+     *  alone would skip touch, where no mousedown precedes the synthetic click. */
+    handlePointerdown: () => void;
+    /** 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: MouseEvent): boolean;
+}
+//# sourceMappingURL=popup-anchor-controller.d.ts.map

package/dist/utilities/popup-anchor-controller.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"popup-anchor-controller.d.ts","sourceRoot":"","sources":["../../src/utilities/popup-anchor-controller.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;GAkBG;AACH,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,oCAAoC,CAAC;AACnE,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,yCAAyC,CAAC;AAE3E;;2DAE2D;AAC3D,MAAM,MAAM,OAAO,GAAG,CAAC,QAAQ,GAAG,WAAW,CAAC,GAAG;IAAE,aAAa,EAAE,OAAO,GAAG,IAAI,CAAA;CAAE,CAAC;AAInF,MAAM,WAAW,kBAAkB;IAClC;;uEAEmE;IACnE,SAAS,CAAC,EAAE,MAAM,OAAO,GAAG,IAAI,CAAC;IACjC;wEACoE;IACpE,QAAQ,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,GAAG,IAAI,EAAE,QAAQ,EAAE,OAAO,GAAG,IAAI,KAAK,IAAI,CAAC;CACvE;AAED,qBAAa,qBAAqB;IACjC,OAAO,CAAC,UAAU,CAAuB;IACzC,OAAO,CAAC,SAAS,CAAC,CAA8D;IAChF,OAAO,CAAC,QAAQ,CAAwB;IACxC,OAAO,CAAC,qBAAqB,CAAS;gBAE1B,IAAI,EAAE,WAAW,EAAE,OAAO,GAAE,kBAAuB;IAK/D,yDAAyD;IACzD,IAAI,OAAO,IAAI,OAAO,GAAG,IAAI,CAE5B;IAED,6CAA6C;IAC7C,gBAAgB,GAAI,OAAO,KAAK,KAAG,IAAI,CAIrC;IAEF;;2EAEuE;IACvE,UAAU,CAAC,OAAO,EAAE,OAAO,GAAG,IAAI,GAAG,IAAI;IASzC;yDACqD;IACrD,MAAM,IAAI,IAAI;IAKd;;mFAE+E;IAC/E,iBAAiB,QAAO,IAAI,CAE1B;IAEF;;wEAEoE;IACpE,WAAW,CAAC,KAAK,EAAE,UAAU,GAAG,OAAO;CAYvC"}

package/dist/utilities/popup-anchor-controller.js

@@ -0,0 +1,63 @@
+const OVERLAY_SELECTOR = 'nldd-menu, nldd-popover';
+export class PopupAnchorController {
+    constructor(host, options = {}) {
+        this._overlay = null;
+        this._wasOpenOnPointerdown = false;
+        /** Bind to the popup slot's `slotchange`. */
+        this.handleSlotChange = (event) => {
+            const slot = event.target;
+            const overlay = slot.assignedElements().find((el) => el.matches(OVERLAY_SELECTOR)) ?? null;
+            this.setOverlay(overlay);
+        };
+        /** Bind to the invoker's `pointerdown`. Snapshots the open state before the
+         *  browser's light-dismiss runs. Covers mouse, touch and pen — `mousedown`
+         *  alone would skip touch, where no mousedown precedes the synthetic click. */
+        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;
+        // Only a pointer-driven click (detail > 0) has a preceding pointerdown; a
+        // keyboard click must ignore the snapshot, which would otherwise be left
+        // over from an earlier gesture that ended without a click (drag off the
+        // control, touch scroll) and swallow the activation. The :popover-open
+        // guard keeps showPopover() from throwing on an already-open overlay.
+        const wasOpen = event.detail > 0 && this._wasOpenOnPointerdown;
+        this._wasOpenOnPointerdown = false;
+        if (!wasOpen && !this._overlay.matches(':popover-open'))
+            this._overlay.showPopover();
+        return true;
+    }
+}
+//# sourceMappingURL=popup-anchor-controller.js.map

package/dist/utilities/popup-anchor-controller.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"popup-anchor-controller.js","sourceRoot":"","sources":["../../src/utilities/popup-anchor-controller.ts"],"names":[],"mappings":"AA2BA,MAAM,gBAAgB,GAAG,yBAAyB,CAAC;AAYnD,MAAM,OAAO,qBAAqB;IAMjC,YAAY,IAAiB,EAAE,UAA8B,EAAE;QAHvD,aAAQ,GAAmB,IAAI,CAAC;QAChC,0BAAqB,GAAG,KAAK,CAAC;QAYtC,6CAA6C;QAC7C,qBAAgB,GAAG,CAAC,KAAY,EAAQ,EAAE;YACzC,MAAM,IAAI,GAAG,KAAK,CAAC,MAAyB,CAAC;YAC7C,MAAM,OAAO,GAAI,IAAI,CAAC,gBAAgB,EAAE,CAAC,IAAI,CAAC,CAAC,EAAE,EAAE,EAAE,CAAC,EAAE,CAAC,OAAO,CAAC,gBAAgB,CAAC,CAAyB,IAAI,IAAI,CAAC;YACpH,IAAI,CAAC,UAAU,CAAC,OAAO,CAAC,CAAC;QAC1B,CAAC,CAAC;QAqBF;;uFAE+E;QAC/E,sBAAiB,GAAG,GAAS,EAAE;YAC9B,IAAI,CAAC,qBAAqB,GAAG,IAAI,CAAC,QAAQ,EAAE,OAAO,CAAC,eAAe,CAAC,IAAI,KAAK,CAAC;QAC/E,CAAC,CAAC;QAxCD,IAAI,CAAC,UAAU,GAAG,OAAO,CAAC,SAAS,IAAI,CAAC,GAAG,EAAE,CAAC,IAAI,CAAC,CAAC;QACpD,IAAI,CAAC,SAAS,GAAG,OAAO,CAAC,QAAQ,CAAC;IACnC,CAAC;IAED,yDAAyD;IACzD,IAAI,OAAO;QACV,OAAO,IAAI,CAAC,QAAQ,CAAC;IACtB,CAAC;IASD;;2EAEuE;IACvE,UAAU,CAAC,OAAuB;QACjC,IAAI,OAAO,KAAK,IAAI,CAAC,QAAQ;YAAE,OAAO;QACtC,MAAM,QAAQ,GAAG,IAAI,CAAC,QAAQ,CAAC;QAC/B,IAAI,QAAQ;YAAE,QAAQ,CAAC,aAAa,GAAG,IAAI,CAAC;QAC5C,IAAI,CAAC,QAAQ,GAAG,OAAO,CAAC;QACxB,IAAI,CAAC,MAAM,EAAE,CAAC;QACd,IAAI,CAAC,SAAS,EAAE,CAAC,OAAO,EAAE,QAAQ,CAAC,CAAC;IACrC,CAAC;IAED;yDACqD;IACrD,MAAM;QACL,MAAM,MAAM,GAAG,IAAI,CAAC,UAAU,EAAE,CAAC;QACjC,IAAI,IAAI,CAAC,QAAQ,IAAI,MAAM;YAAE,IAAI,CAAC,QAAQ,CAAC,aAAa,GAAG,MAAM,CAAC;IACnE,CAAC;IASD;;wEAEoE;IACpE,WAAW,CAAC,KAAiB;QAC5B,IAAI,CAAC,IAAI,CAAC,QAAQ;YAAE,OAAO,KAAK,CAAC;QACjC,0EAA0E;QAC1E,yEAAyE;QACzE,wEAAwE;QACxE,uEAAuE;QACvE,sEAAsE;QACtE,MAAM,OAAO,GAAG,KAAK,CAAC,MAAM,GAAG,CAAC,IAAI,IAAI,CAAC,qBAAqB,CAAC;QAC/D,IAAI,CAAC,qBAAqB,GAAG,KAAK,CAAC;QACnC,IAAI,CAAC,OAAO,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,OAAO,CAAC,eAAe,CAAC;YAAE,IAAI,CAAC,QAAQ,CAAC,WAAW,EAAE,CAAC;QACrF,OAAO,IAAI,CAAC;IACb,CAAC;CACD"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nldd/design-system",
-  "version": "0.8.68",
+  "version": "0.8.69",
   "description": "Design System voor Nederlandse Digitale Dienst",
   "type": "module",
   "main": "dist/components/components.js",
@@ -35,6 +35,10 @@
       "types": "./dist/components/actions/menu/menu.d.ts",
       "default": "./dist/components/actions/menu/menu.js"
     },
+    "./avatar": {
+      "types": "./dist/components/content/avatar/avatar.d.ts",
+      "default": "./dist/components/content/avatar/avatar.js"
+    },
     "./blockquote": {
       "types": "./dist/components/content/blockquote/blockquote.d.ts",
       "default": "./dist/components/content/blockquote/blockquote.js"