@nldd/design-system 0.8.70 → 0.8.72

package/dist/utilities/autofocus.d.ts

@@ -0,0 +1,19 @@
+/**
+ * Focus the `[autofocus]` element inside an overlay, if there is one.
+ *
+ * The browser's own autofocus only reaches natively focusable elements. A
+ * design-system field is a custom element whose input sits in its shadow root,
+ * so `<nldd-text-field autofocus>` would be skipped entirely and the overlay
+ * would open with focus on the dialog. Calling `focus()` on the host covers
+ * both: our components forward it inward, and for a native element the browser
+ * has already done it, which makes the second call a no-op.
+ *
+ * Custom elements may not have rendered yet when an overlay opens right after
+ * an htmx swap, so a component that exposes `updateComplete` gets a second
+ * attempt once it has.
+ *
+ * @returns true when an autofocus target was found, so the caller can skip its
+ *          own fallback focus.
+ */
+export declare function focusAutofocusTarget(host: Element): boolean;
+//# sourceMappingURL=autofocus.d.ts.map

package/dist/utilities/autofocus.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"autofocus.d.ts","sourceRoot":"","sources":["../../src/utilities/autofocus.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;GAgBG;AACH,wBAAgB,oBAAoB,CAAC,IAAI,EAAE,OAAO,GAAG,OAAO,CAiB3D"}

package/dist/utilities/autofocus.js

@@ -0,0 +1,35 @@
+/**
+ * Focus the `[autofocus]` element inside an overlay, if there is one.
+ *
+ * The browser's own autofocus only reaches natively focusable elements. A
+ * design-system field is a custom element whose input sits in its shadow root,
+ * so `<nldd-text-field autofocus>` would be skipped entirely and the overlay
+ * would open with focus on the dialog. Calling `focus()` on the host covers
+ * both: our components forward it inward, and for a native element the browser
+ * has already done it, which makes the second call a no-op.
+ *
+ * Custom elements may not have rendered yet when an overlay opens right after
+ * an htmx swap, so a component that exposes `updateComplete` gets a second
+ * attempt once it has.
+ *
+ * @returns true when an autofocus target was found, so the caller can skip its
+ *          own fallback focus.
+ */
+export function focusAutofocusTarget(host) {
+    const target = host.querySelector('[autofocus]');
+    if (!target)
+        return false;
+    target.focus();
+    const pending = target.updateComplete;
+    if (pending && typeof pending.then === 'function') {
+        pending.then(() => {
+            // Only if focus is still sitting where the overlay left it: a user who
+            // clicked elsewhere in the meantime should not be yanked back.
+            if (!host.contains(document.activeElement) || document.activeElement === host) {
+                target.focus();
+            }
+        });
+    }
+    return true;
+}
+//# sourceMappingURL=autofocus.js.map

package/dist/utilities/autofocus.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"autofocus.js","sourceRoot":"","sources":["../../src/utilities/autofocus.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;GAgBG;AACH,MAAM,UAAU,oBAAoB,CAAC,IAAa;IACjD,MAAM,MAAM,GAAG,IAAI,CAAC,aAAa,CAAc,aAAa,CAAC,CAAC;IAC9D,IAAI,CAAC,MAAM;QAAE,OAAO,KAAK,CAAC;IAE1B,MAAM,CAAC,KAAK,EAAE,CAAC;IAEf,MAAM,OAAO,GAAI,MAA8D,CAAC,cAAc,CAAC;IAC/F,IAAI,OAAO,IAAI,OAAO,OAAO,CAAC,IAAI,KAAK,UAAU,EAAE,CAAC;QACnD,OAAO,CAAC,IAAI,CAAC,GAAG,EAAE;YACjB,uEAAuE;YACvE,+DAA+D;YAC/D,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,QAAQ,CAAC,aAAa,CAAC,IAAI,QAAQ,CAAC,aAAa,KAAK,IAAI,EAAE,CAAC;gBAC/E,MAAM,CAAC,KAAK,EAAE,CAAC;YAChB,CAAC;QACF,CAAC,CAAC,CAAC;IACJ,CAAC;IACD,OAAO,IAAI,CAAC;AACb,CAAC"}

package/dist/utilities/codemirror/theme.js

@@ -34,10 +34,10 @@ const baseTheme = EditorView.theme({
     '.cm-placeholder': {
         color: 'var(--semantics-input-fields-placeholder-color)',
     },
-    // A solid selection colour. accent-150/250 are themselves light-dark; the
+    // A solid selection color. accent-150/250 are themselves light-dark; the
     // outer light-dark() picks the lighter step in light mode and the darker step
     // in dark mode (the accent scale inverts), keeping the selection subtle.
-    // The focused selector matches CodeMirror's own deep one so our colour wins on
+    // The focused selector matches CodeMirror's own deep one so our color wins on
     // equal specificity — otherwise CM's light base theme paints the focused
     // selection lavender, unreadable on a dark surface.
     '&.cm-focused > .cm-scroller > .cm-selectionLayer .cm-selectionBackground, .cm-selectionBackground, .cm-content ::selection': {

package/dist/utilities/codemirror/theme.js.map

@@ -1 +1 @@
-{"version":3,"file":"theme.js","sourceRoot":"","sources":["../../../src/utilities/codemirror/theme.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"theme.js","sourceRoot":"","sources":["../../../src/utilities/codemirror/theme.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAC9C,OAAO,EAAE,cAAc,EAAE,kBAAkB,EAAE,MAAM,sBAAsB,CAAC;AAC1E,OAAO,EAAE,IAAI,IAAI,CAAC,EAAE,MAAM,kBAAkB,CAAC;AAG7C;;;;mEAImE;AACnE,MAAM,SAAS,GAAG,UAAU,CAAC,KAAK,CAAC;IAClC,GAAG,EAAE;QACJ,MAAM,EAAE,MAAM;QACd,KAAK,EAAE,gCAAgC;QACvC,eAAe,EAAE,aAAa;KAC9B;IACD,cAAc,EAAE;QACf,gEAAgE;QAChE,OAAO,EAAE,MAAM;KACf;IACD,cAAc,EAAE;QACf,UAAU,EAAE,SAAS;QACrB,UAAU,EAAE,SAAS;QACrB,QAAQ,EAAE,MAAM;KAChB;IACD,aAAa,EAAE;QACd,OAAO,EAAE,GAAG;QACZ,UAAU,EAAE,gCAAgC;KAC5C;IACD,UAAU,EAAE;QACX,OAAO,EAAE,GAAG;KACZ;IACD,4BAA4B,EAAE;QAC7B,eAAe,EAAE,gCAAgC;KACjD;IACD,iBAAiB,EAAE;QAClB,KAAK,EAAE,iDAAiD;KACxD;IACD,yEAAyE;IACzE,8EAA8E;IAC9E,yEAAyE;IACzE,8EAA8E;IAC9E,yEAAyE;IACzE,oDAAoD;IACpD,4HAA4H,EAAE;QAC7H,eAAe,EAAE,oFAAoF;KACrG;IACD,aAAa,EAAE;QACd,MAAM,EAAE,MAAM;QACd,eAAe,EAAE,aAAa;QAC9B,KAAK,EAAE,iDAAiD;KACxD;IACD,6EAA6E;IAC7E,mCAAmC,EAAE;QACpC,OAAO,EAAE,0DAA0D;KACnE;IACD,sCAAsC,EAAE;QACvC,eAAe,EAAE,aAAa;KAC9B;CACD,CAAC,CAAC;AAEH;sEACsE;AACtE,MAAM,cAAc,GAAG,cAAc,CAAC,MAAM,CAAC;IAC5C,EAAE,GAAG,EAAE,CAAC,CAAC,CAAC,OAAO,EAAE,CAAC,CAAC,WAAW,EAAE,CAAC,CAAC,YAAY,EAAE,CAAC,CAAC,UAAU,CAAC,EAAE,KAAK,EAAE,mDAAmD,EAAE,SAAS,EAAE,QAAQ,EAAE;IAClJ,EAAE,GAAG,EAAE,CAAC,CAAC,CAAC,OAAO,EAAE,CAAC,CAAC,QAAQ,EAAE,CAAC,CAAC,cAAc,EAAE,CAAC,CAAC,eAAe,CAAC,EAAE,KAAK,EAAE,mDAAmD,EAAE;IACjI,EAAE,GAAG,EAAE,CAAC,CAAC,CAAC,MAAM,EAAE,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,MAAM,CAAC,EAAE,CAAC,CAAC,SAAS,CAAC,EAAE,KAAK,EAAE,kDAAkD,EAAE;IAChH,EAAE,GAAG,EAAE,CAAC,CAAC,CAAC,MAAM,EAAE,CAAC,CAAC,OAAO,EAAE,CAAC,CAAC,KAAK,CAAC,EAAE,KAAK,EAAE,kDAAkD,EAAE;IAClG,EAAE,GAAG,EAAE,CAAC,CAAC,IAAI,EAAE,KAAK,EAAE,mDAAmD,EAAE;IAC3E,EAAE,GAAG,EAAE,CAAC,CAAC,IAAI,EAAE,KAAK,EAAE,gDAAgD,EAAE;IACxE,EAAE,GAAG,EAAE,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,YAAY,CAAC,EAAE,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,EAAE,KAAK,EAAE,oDAAoD,EAAE;IAC9H,EAAE,GAAG,EAAE,CAAC,CAAC,CAAC,SAAS,EAAE,CAAC,CAAC,QAAQ,EAAE,CAAC,CAAC,SAAS,CAAC,EAAE,KAAK,EAAE,iDAAiD,EAAE;IACzG,EAAE,GAAG,EAAE,CAAC,CAAC,CAAC,YAAY,EAAE,CAAC,CAAC,aAAa,CAAC,EAAE,KAAK,EAAE,oDAAoD,EAAE;IACvG,EAAE,GAAG,EAAE,CAAC,CAAC,CAAC,WAAW,EAAE,CAAC,CAAC,SAAS,EAAE,CAAC,CAAC,OAAO,CAAC,EAAE,KAAK,EAAE,uDAAuD,EAAE;IAChH,EAAE,GAAG,EAAE,CAAC,CAAC,QAAQ,EAAE,KAAK,EAAE,oDAAoD,EAAE;IAChF,EAAE,GAAG,EAAE,CAAC,CAAC,OAAO,EAAE,KAAK,EAAE,+CAA+C,EAAE;IAC1E,EAAE,GAAG,EAAE,CAAC,CAAC,cAAc,EAAE,KAAK,EAAE,sDAAsD,EAAE;IACxF,EAAE,GAAG,EAAE,CAAC,CAAC,YAAY,EAAE,KAAK,EAAE,oDAAoD,EAAE;IACpF,EAAE,GAAG,EAAE,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,YAAY,CAAC,EAAE,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,EAAE,KAAK,EAAE,oDAAoD,EAAE;IAC9H,EAAE,GAAG,EAAE,CAAC,CAAC,MAAM,EAAE,KAAK,EAAE,iDAAiD,EAAE;IAC3E,EAAE,GAAG,EAAE,CAAC,CAAC,GAAG,EAAE,KAAK,EAAE,+CAA+C,EAAE;IACtE,EAAE,GAAG,EAAE,CAAC,CAAC,MAAM,EAAE,UAAU,EAAE,MAAM,EAAE;IACrC,EAAE,GAAG,EAAE,CAAC,CAAC,QAAQ,EAAE,SAAS,EAAE,QAAQ,EAAE;CACxC,CAAC,CAAC;AAEH,8EAA8E;AAC9E,MAAM,CAAC,MAAM,mBAAmB,GAAc,CAAC,SAAS,EAAE,kBAAkB,CAAC,cAAc,CAAC,CAAC,CAAC"}

package/dist/utilities/color-scheme-repaint.d.ts

@@ -1,11 +1,11 @@
 /**
  * Notifies subscribers when `:root[data-scheme]` flips, so they can force
- * a repaint of any scrollable region with `light-dark()` colours.
+ * a repaint of any scrollable region with `light-dark()` colors.
  *
  * Why this exists: browsers (Chromium especially) cache off-screen tiles
  * for composited scroll layers and don't always invalidate them when a
  * `color-scheme` flip re-resolves `light-dark()` values. Scroll back
- * after a theme switch and you see stale colours from the old scheme.
+ * after a theme switch and you see stale colors from the old scheme.
  * Components with overflowing scroll containers can subscribe here and
  * drop their compositor layer on each scheme change.
  *

package/dist/utilities/color-scheme-repaint.js

@@ -1,11 +1,11 @@
 /**
  * Notifies subscribers when `:root[data-scheme]` flips, so they can force
- * a repaint of any scrollable region with `light-dark()` colours.
+ * a repaint of any scrollable region with `light-dark()` colors.
  *
  * Why this exists: browsers (Chromium especially) cache off-screen tiles
  * for composited scroll layers and don't always invalidate them when a
  * `color-scheme` flip re-resolves `light-dark()` values. Scroll back
- * after a theme switch and you see stale colours from the old scheme.
+ * after a theme switch and you see stale colors from the old scheme.
  * Components with overflowing scroll containers can subscribe here and
  * drop their compositor layer on each scheme change.
  *

package/dist/utilities/form-associated-mixin.d.ts

@@ -0,0 +1,33 @@
+import type { LitElement } from 'lit';
+/** What ElementInternals accepts as a form value. */
+export type FormValue = string | File | FormData | null;
+type Constructor<T = Record<string, unknown>> = abstract new (...args: any[]) => T;
+export interface FormAssociatedElement {
+    readonly internals: ElementInternals;
+    /** The value submitted under `name`; `null` submits nothing. Override this. */
+    formValue(): FormValue;
+    /** Extra state for bfcache and state restore, when the value alone is not enough. */
+    formState(): FormValue | undefined;
+    commitFormValue(): void;
+}
+/**
+ * Turns a Lit element into a form-associated custom element: it submits under
+ * `name`, follows a disabled fieldset, and can be read back with `FormData`.
+ *
+ * A component supplies the one thing that is its own — what it submits — by
+ * overriding `formValue()`. Everything around it lives here, including the
+ * timing: the value is committed on every render AND has to be committed again
+ * from the handler that changed it, with `commitFormValue()`. A render is a
+ * task later than the event, so a listener that serializes the form on `change`
+ * (htmx, or a plain `new FormData(form)`) runs before the render and would
+ * otherwise read the value from before the change. That contract is checked for
+ * every input at once in `form-value-timing.test.ts`.
+ *
+ * Reset and state restore stay with the component: what "the initial value" is
+ * differs per input (checked, text, a number to clamp, two fields at once), so
+ * a component implements `formResetCallback` / `formStateRestoreCallback`
+ * itself.
+ */
+export declare function FormAssociated<T extends Constructor<LitElement>>(Base: T): T & Constructor<InstanceType<T> & FormAssociatedElement>;
+export {};
+//# sourceMappingURL=form-associated-mixin.d.ts.map

package/dist/utilities/form-associated-mixin.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"form-associated-mixin.d.ts","sourceRoot":"","sources":["../../src/utilities/form-associated-mixin.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAsB,MAAM,KAAK,CAAC;AAE1D,qDAAqD;AACrD,MAAM,MAAM,SAAS,GAAG,MAAM,GAAG,IAAI,GAAG,QAAQ,GAAG,IAAI,CAAC;AAIxD,KAAK,WAAW,CAAC,CAAC,GAAG,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,IAAI,QAAQ,MAAM,GAAG,IAAI,EAAE,GAAG,EAAE,KAAK,CAAC,CAAC;AAEnF,MAAM,WAAW,qBAAqB;IACrC,QAAQ,CAAC,SAAS,EAAE,gBAAgB,CAAC;IACrC,+EAA+E;IAC/E,SAAS,IAAI,SAAS,CAAC;IACvB,qFAAqF;IACrF,SAAS,IAAI,SAAS,GAAG,SAAS,CAAC;IACnC,eAAe,IAAI,IAAI,CAAC;CACxB;AAED;;;;;;;;;;;;;;;;;GAiBG;AACH,wBAAgB,cAAc,CAAC,CAAC,SAAS,WAAW,CAAC,UAAU,CAAC,EAAE,IAAI,EAAE,CAAC,GAsC/B,CAAC,GAAG,WAAW,CAAC,YAAY,CAAC,CAAC,CAAC,GAAG,qBAAqB,CAAC,CACjG"}

package/dist/utilities/form-associated-mixin.js

@@ -0,0 +1,52 @@
+/**
+ * Turns a Lit element into a form-associated custom element: it submits under
+ * `name`, follows a disabled fieldset, and can be read back with `FormData`.
+ *
+ * A component supplies the one thing that is its own — what it submits — by
+ * overriding `formValue()`. Everything around it lives here, including the
+ * timing: the value is committed on every render AND has to be committed again
+ * from the handler that changed it, with `commitFormValue()`. A render is a
+ * task later than the event, so a listener that serializes the form on `change`
+ * (htmx, or a plain `new FormData(form)`) runs before the render and would
+ * otherwise read the value from before the change. That contract is checked for
+ * every input at once in `form-value-timing.test.ts`.
+ *
+ * Reset and state restore stay with the component: what "the initial value" is
+ * differs per input (checked, text, a number to clamp, two fields at once), so
+ * a component implements `formResetCallback` / `formStateRestoreCallback`
+ * itself.
+ */
+export function FormAssociated(Base) {
+    class FormAssociatedMixin extends Base {
+        constructor(...args) {
+            super(...args);
+            this.internals = this.attachInternals();
+            // A controller, not an updated() override: a component that defines
+            // its own updated() would have to remember to call super.
+            const commit = { hostUpdated: () => this.commitFormValue() };
+            this.addController(commit);
+        }
+        /** The value submitted under `name`; `null` submits nothing. Override. */
+        formValue() {
+            return null;
+        }
+        /** Extra state kept for bfcache and state restore, when the submitted
+         *  value alone cannot rebuild the control (a combo box submits a code but
+         *  shows a label). Override alongside `formValue()`. */
+        formState() {
+            return undefined;
+        }
+        /** Commit the value now, from the handler that changed it. */
+        commitFormValue() {
+            this.internals.setFormValue(this.formValue(), this.formState());
+        }
+        formDisabledCallback(disabled) {
+            // Every form-associated component declares its own `disabled` property
+            // (with its own reflection), so the mixin only writes to it.
+            this.disabled = disabled;
+        }
+    }
+    FormAssociatedMixin.formAssociated = true;
+    return FormAssociatedMixin;
+}
+//# sourceMappingURL=form-associated-mixin.js.map

package/dist/utilities/form-associated-mixin.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"form-associated-mixin.js","sourceRoot":"","sources":["../../src/utilities/form-associated-mixin.ts"],"names":[],"mappings":"AAkBA;;;;;;;;;;;;;;;;;GAiBG;AACH,MAAM,UAAU,cAAc,CAAoC,IAAO;IACxE,MAAe,mBAAoB,SAAQ,IAAI;QAK9C,YAAY,GAAG,IAAW;YACzB,KAAK,CAAC,GAAG,IAAI,CAAC,CAAC;YAHP,cAAS,GAAG,IAAI,CAAC,eAAe,EAAE,CAAC;YAI3C,oEAAoE;YACpE,0DAA0D;YAC1D,MAAM,MAAM,GAAuB,EAAE,WAAW,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,eAAe,EAAE,EAAE,CAAC;YACjF,IAAI,CAAC,aAAa,CAAC,MAAM,CAAC,CAAC;QAC5B,CAAC;QAED,0EAA0E;QAC1E,SAAS;YACR,OAAO,IAAI,CAAC;QACb,CAAC;QAED;;gEAEwD;QACxD,SAAS;YACR,OAAO,SAAS,CAAC;QAClB,CAAC;QAED,8DAA8D;QAC9D,eAAe;YACd,IAAI,CAAC,SAAS,CAAC,YAAY,CAAC,IAAI,CAAC,SAAS,EAAE,EAAE,IAAI,CAAC,SAAS,EAAE,CAAC,CAAC;QACjE,CAAC;QAED,oBAAoB,CAAC,QAAiB;YACrC,uEAAuE;YACvE,6DAA6D;YAC5D,IAAyC,CAAC,QAAQ,GAAG,QAAQ,CAAC;QAChE,CAAC;;IAjCM,kCAAc,GAAG,IAAI,AAAP,CAAQ;IAoC9B,OAAO,mBAA0F,CAAC;AACnG,CAAC"}

package/dist/utilities/input-modality.d.ts

@@ -5,6 +5,8 @@ export declare function isKeyboardMode(): boolean;
 export declare function isPointerMode(): boolean;
 export declare function isMouseMode(): boolean;
 export declare function isTouchMode(): boolean;
-/** @internal Reset state for testing only. */
+/** @internal Reset state for testing only. Re-registers straight away, the way
+ *  importing the module does, so a test sees the same starting position as a
+ *  freshly loaded page. */
 export declare function _resetInputModalityForTesting(): void;
 //# sourceMappingURL=input-modality.d.ts.map

package/dist/utilities/input-modality.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"input-modality.d.ts","sourceRoot":"","sources":["../../src/utilities/input-modality.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,aAAa,GAAG,UAAU,GAAG,OAAO,GAAG,OAAO,CAAC;AA0B3D,wBAAgB,gBAAgB,IAAI,aAAa,CAGhD;AAED,wBAAgB,cAAc,IAAI,OAAO,CAExC;AAED,wDAAwD;AACxD,wBAAgB,aAAa,IAAI,OAAO,CAGvC;AAED,wBAAgB,WAAW,IAAI,OAAO,CAErC;AAED,wBAAgB,WAAW,IAAI,OAAO,CAErC;AAED,8CAA8C;AAC9C,wBAAgB,6BAA6B,IAAI,IAAI,CAKpD"}
+{"version":3,"file":"input-modality.d.ts","sourceRoot":"","sources":["../../src/utilities/input-modality.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,aAAa,GAAG,UAAU,GAAG,OAAO,GAAG,OAAO,CAAC;AA0B3D,wBAAgB,gBAAgB,IAAI,aAAa,CAGhD;AASD,wBAAgB,cAAc,IAAI,OAAO,CAExC;AAED,wDAAwD;AACxD,wBAAgB,aAAa,IAAI,OAAO,CAGvC;AAED,wBAAgB,WAAW,IAAI,OAAO,CAErC;AAED,wBAAgB,WAAW,IAAI,OAAO,CAErC;AAED;;2BAE2B;AAC3B,wBAAgB,6BAA6B,IAAI,IAAI,CAMpD"}

package/dist/utilities/input-modality.js

@@ -23,6 +23,13 @@ export function getInputModality() {
     init();
     return modality;
 }
+// At import, not on the first question: the listeners have to be in place
+// before the first key press. Initialising lazily meant that someone who tabs
+// straight into the page had already pressed Tab by the time a component asked,
+// so the modality still read 'mouse' and the first control swallowed its focus
+// ring.
+if (typeof document !== 'undefined')
+    init();
 export function isKeyboardMode() {
     return getInputModality() === 'keyboard';
 }
@@ -37,11 +44,15 @@ export function isMouseMode() {
 export function isTouchMode() {
     return getInputModality() === 'touch';
 }
-/** @internal Reset state for testing only. */
+/** @internal Reset state for testing only. Re-registers straight away, the way
+ *  importing the module does, so a test sees the same starting position as a
+ *  freshly loaded page. */
 export function _resetInputModalityForTesting() {
     controller?.abort();
     controller = null;
     modality = 'mouse';
     initialized = false;
+    if (typeof document !== 'undefined')
+        init();
 }
 //# sourceMappingURL=input-modality.js.map

package/dist/utilities/input-modality.js.map

@@ -1 +1 @@
-{"version":3,"file":"input-modality.js","sourceRoot":"","sources":["../../src/utilities/input-modality.ts"],"names":[],"mappings":"AAEA,IAAI,QAAQ,GAAkB,OAAO,CAAC;AACtC,IAAI,WAAW,GAAG,KAAK,CAAC;AACxB,IAAI,UAAU,GAA2B,IAAI,CAAC;AAE9C,SAAS,IAAI;IACZ,IAAI,WAAW;QAAE,OAAO;IACxB,WAAW,GAAG,IAAI,CAAC;IACnB,UAAU,GAAG,IAAI,eAAe,EAAE,CAAC;IACnC,MAAM,EAAE,MAAM,EAAE,GAAG,UAAU,CAAC;IAE9B,QAAQ,CAAC,gBAAgB,CAAC,SAAS,EAAE,CAAC,CAAgB,EAAE,EAAE;QACzD,IAAI,CAAC,KAAK,EAAE,SAAS,EAAE,WAAW,EAAE,WAAW,EAAE,YAAY,EAAE,OAAO,EAAE,GAAG,EAAE,QAAQ,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,GAAG,CAAC,EAAE,CAAC;YACxG,QAAQ,GAAG,UAAU,CAAC;QACvB,CAAC;IACF,CAAC,EAAE,EAAE,MAAM,EAAE,CAAC,CAAC;IAEf,2EAA2E;IAC3E,2EAA2E;IAC3E,uEAAuE;IACvE,QAAQ,CAAC,gBAAgB,CAAC,aAAa,EAAE,CAAC,CAAe,EAAE,EAAE;QAC5D,QAAQ,GAAG,CAAC,CAAC,WAAW,KAAK,OAAO,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,OAAO,CAAC;IAC1D,CAAC,EAAE,EAAE,MAAM,EAAE,CAAC,CAAC;AAChB,CAAC;AAED,MAAM,UAAU,gBAAgB;IAC/B,IAAI,EAAE,CAAC;IACP,OAAO,QAAQ,CAAC;AACjB,CAAC;AAED,MAAM,UAAU,cAAc;IAC7B,OAAO,gBAAgB,EAAE,KAAK,UAAU,CAAC;AAC1C,CAAC;AAED,wDAAwD;AACxD,MAAM,UAAU,aAAa;IAC5B,MAAM,CAAC,GAAG,gBAAgB,EAAE,CAAC;IAC7B,OAAO,CAAC,KAAK,OAAO,IAAI,CAAC,KAAK,OAAO,CAAC;AACvC,CAAC;AAED,MAAM,UAAU,WAAW;IAC1B,OAAO,gBAAgB,EAAE,KAAK,OAAO,CAAC;AACvC,CAAC;AAED,MAAM,UAAU,WAAW;IAC1B,OAAO,gBAAgB,EAAE,KAAK,OAAO,CAAC;AACvC,CAAC;AAED,8CAA8C;AAC9C,MAAM,UAAU,6BAA6B;IAC5C,UAAU,EAAE,KAAK,EAAE,CAAC;IACpB,UAAU,GAAG,IAAI,CAAC;IAClB,QAAQ,GAAG,OAAO,CAAC;IACnB,WAAW,GAAG,KAAK,CAAC;AACrB,CAAC"}
+{"version":3,"file":"input-modality.js","sourceRoot":"","sources":["../../src/utilities/input-modality.ts"],"names":[],"mappings":"AAEA,IAAI,QAAQ,GAAkB,OAAO,CAAC;AACtC,IAAI,WAAW,GAAG,KAAK,CAAC;AACxB,IAAI,UAAU,GAA2B,IAAI,CAAC;AAE9C,SAAS,IAAI;IACZ,IAAI,WAAW;QAAE,OAAO;IACxB,WAAW,GAAG,IAAI,CAAC;IACnB,UAAU,GAAG,IAAI,eAAe,EAAE,CAAC;IACnC,MAAM,EAAE,MAAM,EAAE,GAAG,UAAU,CAAC;IAE9B,QAAQ,CAAC,gBAAgB,CAAC,SAAS,EAAE,CAAC,CAAgB,EAAE,EAAE;QACzD,IAAI,CAAC,KAAK,EAAE,SAAS,EAAE,WAAW,EAAE,WAAW,EAAE,YAAY,EAAE,OAAO,EAAE,GAAG,EAAE,QAAQ,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,GAAG,CAAC,EAAE,CAAC;YACxG,QAAQ,GAAG,UAAU,CAAC;QACvB,CAAC;IACF,CAAC,EAAE,EAAE,MAAM,EAAE,CAAC,CAAC;IAEf,2EAA2E;IAC3E,2EAA2E;IAC3E,uEAAuE;IACvE,QAAQ,CAAC,gBAAgB,CAAC,aAAa,EAAE,CAAC,CAAe,EAAE,EAAE;QAC5D,QAAQ,GAAG,CAAC,CAAC,WAAW,KAAK,OAAO,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,OAAO,CAAC;IAC1D,CAAC,EAAE,EAAE,MAAM,EAAE,CAAC,CAAC;AAChB,CAAC;AAED,MAAM,UAAU,gBAAgB;IAC/B,IAAI,EAAE,CAAC;IACP,OAAO,QAAQ,CAAC;AACjB,CAAC;AAED,0EAA0E;AAC1E,8EAA8E;AAC9E,gFAAgF;AAChF,+EAA+E;AAC/E,QAAQ;AACR,IAAI,OAAO,QAAQ,KAAK,WAAW;IAAE,IAAI,EAAE,CAAC;AAE5C,MAAM,UAAU,cAAc;IAC7B,OAAO,gBAAgB,EAAE,KAAK,UAAU,CAAC;AAC1C,CAAC;AAED,wDAAwD;AACxD,MAAM,UAAU,aAAa;IAC5B,MAAM,CAAC,GAAG,gBAAgB,EAAE,CAAC;IAC7B,OAAO,CAAC,KAAK,OAAO,IAAI,CAAC,KAAK,OAAO,CAAC;AACvC,CAAC;AAED,MAAM,UAAU,WAAW;IAC1B,OAAO,gBAAgB,EAAE,KAAK,OAAO,CAAC;AACvC,CAAC;AAED,MAAM,UAAU,WAAW;IAC1B,OAAO,gBAAgB,EAAE,KAAK,OAAO,CAAC;AACvC,CAAC;AAED;;2BAE2B;AAC3B,MAAM,UAAU,6BAA6B;IAC5C,UAAU,EAAE,KAAK,EAAE,CAAC;IACpB,UAAU,GAAG,IAAI,CAAC;IAClB,QAAQ,GAAG,OAAO,CAAC;IACnB,WAAW,GAAG,KAAK,CAAC;IACpB,IAAI,OAAO,QAAQ,KAAK,WAAW;QAAE,IAAI,EAAE,CAAC;AAC7C,CAAC"}

package/dist/utilities/page-section-mixin.d.ts

@@ -11,7 +11,7 @@ export type PageSectionPadding = '0' | '2' | '4' | '6' | '8' | '10' | '12' | '16
  * into the section's block element and slotted content):
  *
  * - **background**: `inherit` (the default — transparent, shows the ancestor's
- *   surface) | `base` (the base surface colour) | `tinted`. Setting
+ *   surface) | `base` (the base surface color) | `tinted`. Setting
  *   `base`/`tinted` also cascades `--context-parent-background-color` so
  *   descendants (cards, nested sections) read the same surface.
  * - **scheme**: `inherit` (default) | `light` | `dark` | `inverted`.

package/dist/utilities/page-section-mixin.js

@@ -36,7 +36,7 @@ const PADDING_KEYS = [
  * into the section's block element and slotted content):
  *
  * - **background**: `inherit` (the default — transparent, shows the ancestor's
- *   surface) | `base` (the base surface colour) | `tinted`. Setting
+ *   surface) | `base` (the base surface color) | `tinted`. Setting
  *   `base`/`tinted` also cascades `--context-parent-background-color` so
  *   descendants (cards, nested sections) read the same surface.
  * - **scheme**: `inherit` (default) | `light` | `dark` | `inverted`.
@@ -146,7 +146,7 @@ export function PageSectionMixin(Base) {
          * boundaries, so a `color-scheme` declared on an outer custom
          * element's host won't be picked up by the walk; we then fall
          * through to `prefers-color-scheme`. For reliable `'inverted'`
-         * behaviour inside nested shadow trees, set `data-scheme` on
+         * behavior inside nested shadow trees, set `data-scheme` on
          * `:root` so the fast path resolves the painted scheme directly.
          */
         _resolveActiveScheme() {

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

@@ -7,7 +7,7 @@
  * 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
+ * which then falls through to its own form / link / event behavior. Split-button
  * layers `toggle` tracking on top via `onChange`, which composition allows and
  * inheritance would fight.
  *
@@ -30,7 +30,7 @@ export interface PopupAnchorOptions {
      *  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
+    /** Runs after the slotted overlay is swapped, for behavior layered on top
      *  (e.g. tracking `toggle` to drive a chevron's expanded state). */
     onChange?: (overlay: Overlay | null, previous: Overlay | null) => void;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nldd/design-system",
-  "version": "0.8.70",
+  "version": "0.8.72",
   "description": "Design System voor Nederlandse Digitale Dienst",
   "type": "module",
   "main": "dist/components/components.js",
@@ -299,6 +299,10 @@
       "types": "./dist/components/lists-and-tables/list-item/list-item.d.ts",
       "default": "./dist/components/lists-and-tables/list-item/list-item.js"
     },
+    "./list-item-action": {
+      "types": "./dist/components/lists-and-tables/list-item-action/list-item-action.d.ts",
+      "default": "./dist/components/lists-and-tables/list-item-action/list-item-action.js"
+    },
     "./table": {
       "types": "./dist/components/lists-and-tables/table/table.d.ts",
       "default": "./dist/components/lists-and-tables/table/table.js"
@@ -399,6 +403,10 @@
       "types": "./dist/components/status-and-feedback/progress-circle/progress-circle.d.ts",
       "default": "./dist/components/status-and-feedback/progress-circle/progress-circle.js"
     },
+    "./step-indicator": {
+      "types": "./dist/components/status-and-feedback/step-indicator/step-indicator.d.ts",
+      "default": "./dist/components/status-and-feedback/step-indicator/step-indicator.js"
+    },
     "./activity-indicator": {
       "types": "./dist/components/status-and-feedback/activity-indicator/activity-indicator.d.ts",
       "default": "./dist/components/status-and-feedback/activity-indicator/activity-indicator.js"