@nldd/design-system 0.8.37

package/dist/components/inputs/stepper/stepper.d.ts

@@ -0,0 +1,44 @@
+/**
+ * Nederlandse Digitale Dienst Stepper Component (Lit + TypeScript)
+ *
+ * A numeric control with increment and decrement buttons.
+ *
+ * @element nldd-stepper
+ * @attr {number}  value        - Current value
+ * @attr {number}  min          - Minimum value (default: 0)
+ * @attr {number}  max          - Maximum value (default: Infinity)
+ * @attr {number}  step         - Step size (default: 1)
+ * @attr {boolean} disabled     - Disabled state
+ * @attr {string}  size         - Size: 'xs' | 'sm' | 'md' (default: 'md')
+ * @attr {object}  translations - Translations; unspecified keys fall back to Dutch
+ *
+ * @fires change - When the value changes; detail: { value: number }
+ */
+import { LitElement } from 'lit';
+import type { NLDDStepperTranslations } from './stepper.i18n.js';
+import './../../actions/icon-button/icon-button.js';
+import './../../content/icon/icon.js';
+export type StepperSize = 'xs' | 'sm' | 'md';
+export declare class NLDDStepper extends LitElement {
+    static styles: import("lit").CSSResult;
+    value: number;
+    min: number;
+    max: number;
+    step: number;
+    disabled: boolean;
+    size: StepperSize;
+    /** Override one or more translation keys. Unspecified keys fall back to Dutch. */
+    translations: Partial<NLDDStepperTranslations>;
+    _t(key: keyof NLDDStepperTranslations): string;
+    _decrement(): void;
+    _increment(): void;
+    _handleKeydown(e: KeyboardEvent): void;
+    private _dispatchChange;
+    render(): import("lit-html").TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'nldd-stepper': NLDDStepper;
+    }
+}
+//# sourceMappingURL=stepper.d.ts.map

package/dist/components/inputs/stepper/stepper.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"stepper.d.ts","sourceRoot":"","sources":["../../../../src/components/inputs/stepper/stepper.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;GAeG;AACH,OAAO,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AAKjC,OAAO,KAAK,EAAE,uBAAuB,EAAE,MAAM,mBAAmB,CAAC;AACjE,OAAO,4CAA4C,CAAC;AACpD,OAAO,8BAA8B,CAAC;AAEtC,MAAM,MAAM,WAAW,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAE7C,qBACa,WAAY,SAAQ,UAAU;IAC1C,OAAgB,MAAM,0BAAiB;IAGvC,KAAK,SAAK;IAGV,GAAG,SAAK;IAGR,GAAG,SAAY;IAGf,IAAI,SAAK;IAGT,QAAQ,UAAS;IAGjB,IAAI,EAAE,WAAW,CAAQ;IAEzB,kFAAkF;IAElF,YAAY,EAAE,OAAO,CAAC,uBAAuB,CAAC,CAAM;IAI7C,EAAE,CAAC,GAAG,EAAE,MAAM,uBAAuB,GAAG,MAAM;IAM9C,UAAU,IAAI,IAAI;IASlB,UAAU,IAAI,IAAI;IASlB,cAAc,CAAC,CAAC,EAAE,aAAa,GAAG,IAAI;IA6B7C,OAAO,CAAC,eAAe;IAQd,MAAM;CAGf;AAED,OAAO,CAAC,MAAM,CAAC;IACd,UAAU,qBAAqB;QAC9B,cAAc,EAAE,WAAW,CAAC;KAC5B;CACD"}

package/dist/components/inputs/stepper/stepper.i18n.d.ts

@@ -0,0 +1,7 @@
+export declare const nlddStepperTranslations: {
+    'components.stepper.decrement-action': string;
+    'components.stepper.increment-action': string;
+    'components.stepper.to-adjust-value-action': string;
+};
+export type NLDDStepperTranslations = typeof nlddStepperTranslations;
+//# sourceMappingURL=stepper.i18n.d.ts.map

package/dist/components/inputs/stepper/stepper.i18n.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"stepper.i18n.d.ts","sourceRoot":"","sources":["../../../../src/components/inputs/stepper/stepper.i18n.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,uBAAuB;;;;CAInC,CAAC;AAEF,MAAM,MAAM,uBAAuB,GAAG,OAAO,uBAAuB,CAAC"}

package/dist/components/inputs/stepper/stepper.i18n.js

@@ -0,0 +1,6 @@
+export const nlddStepperTranslations = {
+    'components.stepper.decrement-action': 'Verlaag',
+    'components.stepper.increment-action': 'Verhoog',
+    'components.stepper.to-adjust-value-action': 'Aantal aanpassen',
+};
+//# sourceMappingURL=stepper.i18n.js.map

package/dist/components/inputs/stepper/stepper.i18n.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"stepper.i18n.js","sourceRoot":"","sources":["../../../../src/components/inputs/stepper/stepper.i18n.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,uBAAuB,GAAG;IACtC,qCAAqC,EAAE,SAAS;IAChD,qCAAqC,EAAE,SAAS;IAChD,2CAA2C,EAAE,kBAAkB;CAC/D,CAAC"}

package/dist/components/inputs/stepper/stepper.js

@@ -0,0 +1,130 @@
+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;
+};
+/**
+ * Nederlandse Digitale Dienst Stepper Component (Lit + TypeScript)
+ *
+ * A numeric control with increment and decrement buttons.
+ *
+ * @element nldd-stepper
+ * @attr {number}  value        - Current value
+ * @attr {number}  min          - Minimum value (default: 0)
+ * @attr {number}  max          - Maximum value (default: Infinity)
+ * @attr {number}  step         - Step size (default: 1)
+ * @attr {boolean} disabled     - Disabled state
+ * @attr {string}  size         - Size: 'xs' | 'sm' | 'md' (default: 'md')
+ * @attr {object}  translations - Translations; unspecified keys fall back to Dutch
+ *
+ * @fires change - When the value changes; detail: { value: number }
+ */
+import { LitElement } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import { stepperStyles } from './stepper.styles.js';
+import { stepperTemplate } from './stepper.template.js';
+import { nlddStepperTranslations } from './stepper.i18n.js';
+import './../../actions/icon-button/icon-button.js';
+import './../../content/icon/icon.js';
+let NLDDStepper = class NLDDStepper extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.value = 0;
+        this.min = 0;
+        this.max = Infinity;
+        this.step = 1;
+        this.disabled = false;
+        this.size = 'md';
+        /** Override one or more translation keys. Unspecified keys fall back to Dutch. */
+        this.translations = {};
+    }
+    // — i18n —————————————————————————————————————————————————————————————————
+    _t(key) {
+        return this.translations[key] ?? nlddStepperTranslations[key];
+    }
+    // — Actions ——————————————————————————————————————————————————————————————
+    _decrement() {
+        if (this.disabled)
+            return;
+        const newValue = Math.max(this.min, this.value - this.step);
+        if (newValue !== this.value) {
+            this.value = newValue;
+            this._dispatchChange();
+        }
+    }
+    _increment() {
+        if (this.disabled)
+            return;
+        const newValue = Math.min(this.max, this.value + this.step);
+        if (newValue !== this.value) {
+            this.value = newValue;
+            this._dispatchChange();
+        }
+    }
+    _handleKeydown(e) {
+        switch (e.key) {
+            case 'ArrowUp':
+            case 'ArrowRight':
+                e.preventDefault();
+                this._increment();
+                break;
+            case 'ArrowDown':
+            case 'ArrowLeft':
+                e.preventDefault();
+                this._decrement();
+                break;
+            case 'Home':
+                e.preventDefault();
+                if (isFinite(this.min)) {
+                    this.value = this.min;
+                    this._dispatchChange();
+                }
+                break;
+            case 'End':
+                e.preventDefault();
+                if (isFinite(this.max)) {
+                    this.value = this.max;
+                    this._dispatchChange();
+                }
+                break;
+        }
+    }
+    _dispatchChange() {
+        this.dispatchEvent(new CustomEvent('change', {
+            detail: { value: this.value },
+            bubbles: true,
+            composed: true,
+        }));
+    }
+    render() {
+        return stepperTemplate(this);
+    }
+};
+NLDDStepper.styles = stepperStyles;
+__decorate([
+    property({ type: Number })
+], NLDDStepper.prototype, "value", void 0);
+__decorate([
+    property({ type: Number })
+], NLDDStepper.prototype, "min", void 0);
+__decorate([
+    property({ type: Number })
+], NLDDStepper.prototype, "max", void 0);
+__decorate([
+    property({ type: Number })
+], NLDDStepper.prototype, "step", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], NLDDStepper.prototype, "disabled", void 0);
+__decorate([
+    property({ type: String, reflect: true })
+], NLDDStepper.prototype, "size", void 0);
+__decorate([
+    property({ type: Object })
+], NLDDStepper.prototype, "translations", void 0);
+NLDDStepper = __decorate([
+    customElement('nldd-stepper')
+], NLDDStepper);
+export { NLDDStepper };
+//# sourceMappingURL=stepper.js.map

package/dist/components/inputs/stepper/stepper.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"stepper.js","sourceRoot":"","sources":["../../../../src/components/inputs/stepper/stepper.ts"],"names":[],"mappings":";;;;;;AAAA;;;;;;;;;;;;;;;GAeG;AACH,OAAO,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AACjC,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC5D,OAAO,EAAE,aAAa,EAAE,MAAM,qBAAqB,CAAC;AACpD,OAAO,EAAE,eAAe,EAAE,MAAM,uBAAuB,CAAC;AACxD,OAAO,EAAE,uBAAuB,EAAE,MAAM,mBAAmB,CAAC;AAE5D,OAAO,4CAA4C,CAAC;AACpD,OAAO,8BAA8B,CAAC;AAK/B,IAAM,WAAW,GAAjB,MAAM,WAAY,SAAQ,UAAU;IAApC;;QAIN,UAAK,GAAG,CAAC,CAAC;QAGV,QAAG,GAAG,CAAC,CAAC;QAGR,QAAG,GAAG,QAAQ,CAAC;QAGf,SAAI,GAAG,CAAC,CAAC;QAGT,aAAQ,GAAG,KAAK,CAAC;QAGjB,SAAI,GAAgB,IAAI,CAAC;QAEzB,kFAAkF;QAElF,iBAAY,GAAqC,EAAE,CAAC;IAoErD,CAAC;IAlEA,2EAA2E;IAEpE,EAAE,CAAC,GAAkC;QAC3C,OAAO,IAAI,CAAC,YAAY,CAAC,GAAG,CAAC,IAAI,uBAAuB,CAAC,GAAG,CAAC,CAAC;IAC/D,CAAC;IAED,2EAA2E;IAEpE,UAAU;QAChB,IAAI,IAAI,CAAC,QAAQ;YAAE,OAAO;QAC1B,MAAM,QAAQ,GAAG,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,GAAG,EAAE,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,IAAI,CAAC,CAAC;QAC5D,IAAI,QAAQ,KAAK,IAAI,CAAC,KAAK,EAAE,CAAC;YAC7B,IAAI,CAAC,KAAK,GAAG,QAAQ,CAAC;YACtB,IAAI,CAAC,eAAe,EAAE,CAAC;QACxB,CAAC;IACF,CAAC;IAEM,UAAU;QAChB,IAAI,IAAI,CAAC,QAAQ;YAAE,OAAO;QAC1B,MAAM,QAAQ,GAAG,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,GAAG,EAAE,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,IAAI,CAAC,CAAC;QAC5D,IAAI,QAAQ,KAAK,IAAI,CAAC,KAAK,EAAE,CAAC;YAC7B,IAAI,CAAC,KAAK,GAAG,QAAQ,CAAC;YACtB,IAAI,CAAC,eAAe,EAAE,CAAC;QACxB,CAAC;IACF,CAAC;IAEM,cAAc,CAAC,CAAgB;QACrC,QAAQ,CAAC,CAAC,GAAG,EAAE,CAAC;YACf,KAAK,SAAS,CAAC;YACf,KAAK,YAAY;gBAChB,CAAC,CAAC,cAAc,EAAE,CAAC;gBACnB,IAAI,CAAC,UAAU,EAAE,CAAC;gBAClB,MAAM;YACP,KAAK,WAAW,CAAC;YACjB,KAAK,WAAW;gBACf,CAAC,CAAC,cAAc,EAAE,CAAC;gBACnB,IAAI,CAAC,UAAU,EAAE,CAAC;gBAClB,MAAM;YACP,KAAK,MAAM;gBACV,CAAC,CAAC,cAAc,EAAE,CAAC;gBACnB,IAAI,QAAQ,CAAC,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC;oBACxB,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,GAAG,CAAC;oBACtB,IAAI,CAAC,eAAe,EAAE,CAAC;gBACxB,CAAC;gBACD,MAAM;YACP,KAAK,KAAK;gBACT,CAAC,CAAC,cAAc,EAAE,CAAC;gBACnB,IAAI,QAAQ,CAAC,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC;oBACxB,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,GAAG,CAAC;oBACtB,IAAI,CAAC,eAAe,EAAE,CAAC;gBACxB,CAAC;gBACD,MAAM;QACR,CAAC;IACF,CAAC;IAEO,eAAe;QACtB,IAAI,CAAC,aAAa,CAAC,IAAI,WAAW,CAAC,QAAQ,EAAE;YAC5C,MAAM,EAAE,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE;YAC7B,OAAO,EAAE,IAAI;YACb,QAAQ,EAAE,IAAI;SACd,CAAC,CAAC,CAAC;IACL,CAAC;IAEQ,MAAM;QACd,OAAO,eAAe,CAAC,IAAI,CAAC,CAAC;IAC9B,CAAC;;AAzFe,kBAAM,GAAG,aAAa,AAAhB,CAAiB;AAGvC;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;0CACjB;AAGV;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;wCACnB;AAGR;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;wCACZ;AAGf;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;yCAClB;AAGT;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;6CAC1B;AAGjB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;yCACjB;AAIzB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;iDACyB;AAvBxC,WAAW;IADvB,aAAa,CAAC,cAAc,CAAC;GACjB,WAAW,CA2FvB"}

package/dist/components/inputs/stepper/stepper.styles.d.ts

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

package/dist/components/inputs/stepper/stepper.styles.d.ts.map

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

package/dist/components/inputs/stepper/stepper.styles.js

@@ -0,0 +1,85 @@
+import { css } from 'lit';
+export const stepperStyles = css `
+
+
+	/* # Host */
+
+	:host {
+		display: inline-flex;
+		isolation: isolate;
+		-webkit-tap-highlight-color: transparent;
+	}
+
+	:host([hidden]) {
+		display: none;
+	}
+
+	:host([disabled]) {
+		opacity: var(--primitives-opacity-disabled);
+		pointer-events: none;
+	}
+
+	:host([disabled]) nldd-icon-button {
+		opacity: 1;
+	}
+
+
+	/* # Block */
+
+	.stepper {
+		display: inline-flex;
+		flex-direction: row;
+		align-items: center;
+		background-color: var(--semantics-buttons-neutral-tinted-background-color);
+	}
+
+	:host([size='xs']) .stepper {
+		border-radius: var(--semantics-controls-xs-corner-radius);
+	}
+
+	:host([size='sm']) .stepper {
+		border-radius: var(--semantics-controls-sm-corner-radius);
+	}
+
+	:host([size='md']) .stepper,
+	:host(:not([size])) .stepper {
+		border-radius: var(--semantics-controls-md-corner-radius);
+	}
+
+	.stepper:focus-visible {
+		outline: var(--semantics-focus-ring-outline);
+		outline-offset: var(--semantics-focus-ring-outline-offset);
+		box-shadow: var(--semantics-focus-ring-box-shadow);
+	}
+
+
+	/* # Divider */
+
+	.stepper__divider {
+		width: var(--semantics-dividers-thickness);
+		flex-shrink: 0;
+		background-color: var(--semantics-buttons-neutral-tinted-divider-color);
+	}
+
+	:host([size='xs']) .stepper__divider {
+		height: var(--semantics-buttons-xs-divider-length);
+	}
+
+	:host([size='sm']) .stepper__divider {
+		height: var(--semantics-buttons-sm-divider-length);
+	}
+
+	:host([size='md']) .stepper__divider,
+	:host(:not([size])) .stepper__divider {
+		height: var(--semantics-buttons-md-divider-length);
+	}
+
+
+	/* # Focus */
+
+	nldd-icon-button:focus-within {
+		position: relative;
+		z-index: 1;
+	}
+`;
+//# sourceMappingURL=stepper.styles.js.map

package/dist/components/inputs/stepper/stepper.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"stepper.styles.js","sourceRoot":"","sources":["../../../../src/components/inputs/stepper/stepper.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,aAAa,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAkF/B,CAAC"}

package/dist/components/inputs/stepper/stepper.template.d.ts

@@ -0,0 +1,5 @@
+import { TemplateResult } from 'lit';
+import type { NLDDStepper } from './stepper.js';
+import './../../actions/icon-button/icon-button.js';
+export declare function stepperTemplate(component: NLDDStepper): TemplateResult;
+//# sourceMappingURL=stepper.template.d.ts.map

package/dist/components/inputs/stepper/stepper.template.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"stepper.template.d.ts","sourceRoot":"","sources":["../../../../src/components/inputs/stepper/stepper.template.ts"],"names":[],"mappings":"AAAA,OAAO,EAAiB,cAAc,EAAE,MAAM,KAAK,CAAC;AACpD,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,cAAc,CAAC;AAChD,OAAO,4CAA4C,CAAC;AAEpD,wBAAgB,eAAe,CAAC,SAAS,EAAE,WAAW,GAAG,cAAc,CAwCtE"}

package/dist/components/inputs/stepper/stepper.template.js

@@ -0,0 +1,43 @@
+import { html, nothing } from 'lit';
+import './../../actions/icon-button/icon-button.js';
+export function stepperTemplate(component) {
+    const atMin = component.value <= component.min;
+    const atMax = component.value >= component.max;
+    return html `
+		<div class="stepper"
+			role="spinbutton"
+			tabindex=${component.disabled ? nothing : '0'}
+			aria-valuenow=${component.value}
+			aria-valuemin=${isFinite(component.min) ? component.min : nothing}
+			aria-valuemax=${isFinite(component.max) ? component.max : nothing}
+			aria-label=${component._t('components.stepper.to-adjust-value-action')}
+			aria-disabled=${component.disabled ? 'true' : nothing}
+			@keydown=${component._handleKeydown}
+		>
+			<nldd-icon-button
+				variant="neutral-tinted"
+				size=${component.size}
+				icon="minus"
+				text=${component._t('components.stepper.decrement-action')}
+				?disabled=${component.disabled || atMin}
+				aria-hidden="true"
+				tabindex="-1"
+				@click=${component._decrement}
+			></nldd-icon-button>
+			<div class="stepper__divider"
+				aria-hidden="true"
+			></div>
+			<nldd-icon-button
+				variant="neutral-tinted"
+				size=${component.size}
+				icon="plus"
+				text=${component._t('components.stepper.increment-action')}
+				?disabled=${component.disabled || atMax}
+				aria-hidden="true"
+				tabindex="-1"
+				@click=${component._increment}
+			></nldd-icon-button>
+		</div>
+	`;
+}
+//# sourceMappingURL=stepper.template.js.map

package/dist/components/inputs/stepper/stepper.template.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"stepper.template.js","sourceRoot":"","sources":["../../../../src/components/inputs/stepper/stepper.template.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,OAAO,EAAkB,MAAM,KAAK,CAAC;AAEpD,OAAO,4CAA4C,CAAC;AAEpD,MAAM,UAAU,eAAe,CAAC,SAAsB;IACrD,MAAM,KAAK,GAAG,SAAS,CAAC,KAAK,IAAI,SAAS,CAAC,GAAG,CAAC;IAC/C,MAAM,KAAK,GAAG,SAAS,CAAC,KAAK,IAAI,SAAS,CAAC,GAAG,CAAC;IAE/C,OAAO,IAAI,CAAA;;;cAGE,SAAS,CAAC,QAAQ,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,GAAG;mBAC7B,SAAS,CAAC,KAAK;mBACf,QAAQ,CAAC,SAAS,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC,GAAG,CAAC,CAAC,CAAC,OAAO;mBACjD,QAAQ,CAAC,SAAS,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC,GAAG,CAAC,CAAC,CAAC,OAAO;gBACpD,SAAS,CAAC,EAAE,CAAC,2CAA2C,CAAC;mBACtD,SAAS,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO;cAC1C,SAAS,CAAC,cAAc;;;;WAI3B,SAAS,CAAC,IAAI;;WAEd,SAAS,CAAC,EAAE,CAAC,qCAAqC,CAAC;gBAC9C,SAAS,CAAC,QAAQ,IAAI,KAAK;;;aAG9B,SAAS,CAAC,UAAU;;;;;;;WAOtB,SAAS,CAAC,IAAI;;WAEd,SAAS,CAAC,EAAE,CAAC,qCAAqC,CAAC;gBAC9C,SAAS,CAAC,QAAQ,IAAI,KAAK;;;aAG9B,SAAS,CAAC,UAAU;;;EAG/B,CAAC;AACH,CAAC"}

package/dist/components/inputs/switch/switch.d.ts

@@ -0,0 +1,44 @@
+/**
+ * Nederlandse Digitale Dienst Switch Component (Lit + TypeScript)
+ *
+ * A toggle control for on/off settings.
+ * Prefer nldd-switch-field for labeled usage — it combines the switch with a visible label.
+ * Direct use of nldd-switch requires an accessible-label attribute for screen reader accessibility.
+ *
+ * @element nldd-switch
+ * @attr {boolean} checked           - Whether the switch is on/off
+ * @attr {boolean} disabled          - Disabled state
+ * @attr {string}  size              - Switch size: 'xs' | 'sm' (default: 'sm')
+ * @attr {string}  accessible-label  - Accessible label forwarded as aria-label to the native input.
+ *                                     Required when using nldd-switch without nldd-switch-field.
+ *
+ * @fires change - When the switch state changes; detail: { checked: boolean, value: string }
+ */
+import { LitElement } from 'lit';
+export type SwitchSize = 'xs' | 'sm';
+export declare class NLDDSwitch extends LitElement {
+    static styles: import("lit").CSSResult;
+    checked: boolean;
+    disabled: boolean;
+    size: SwitchSize;
+    accessibleLabel: string;
+    value: string;
+    firstUpdated(): void;
+    private _pointerStartX;
+    private _swiped;
+    private static readonly SWIPE_THRESHOLD;
+    _handlePointerDown(e: PointerEvent): void;
+    _handlePointerMove(e: PointerEvent): void;
+    _handlePointerUp(e: PointerEvent): void;
+    _handlePointerCancel(): void;
+    _handleClick(e: Event): void;
+    toggle(): void;
+    _handleChange(e: Event): void;
+    render(): import("lit-html").TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'nldd-switch': NLDDSwitch;
+    }
+}
+//# sourceMappingURL=switch.d.ts.map

package/dist/components/inputs/switch/switch.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"switch.d.ts","sourceRoot":"","sources":["../../../../src/components/inputs/switch/switch.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;GAeG;AACH,OAAO,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AAKjC,MAAM,MAAM,UAAU,GAAG,IAAI,GAAG,IAAI,CAAC;AAErC,qBACa,UAAW,SAAQ,UAAU;IACzC,OAAgB,MAAM,0BAAgB;IAGtC,OAAO,UAAS;IAGhB,QAAQ,UAAS;IAGjB,IAAI,EAAE,UAAU,CAAQ;IAGxB,eAAe,SAAM;IAGrB,KAAK,SAAQ;IAEJ,YAAY,IAAI,IAAI;IAQ7B,OAAO,CAAC,cAAc,CAAuB;IAC7C,OAAO,CAAC,OAAO,CAAS;IACxB,OAAO,CAAC,MAAM,CAAC,QAAQ,CAAC,eAAe,CAAM;IAE7C,kBAAkB,CAAC,CAAC,EAAE,YAAY,GAAG,IAAI;IAMzC,kBAAkB,CAAC,CAAC,EAAE,YAAY,GAAG,IAAI;IAWzC,gBAAgB,CAAC,CAAC,EAAE,YAAY,GAAG,IAAI;IAkBvC,oBAAoB,IAAI,IAAI;IAK5B,YAAY,CAAC,CAAC,EAAE,KAAK,GAAG,IAAI;IASrB,MAAM,IAAI,IAAI;IAUd,aAAa,CAAC,CAAC,EAAE,KAAK,GAAG,IAAI;IAW3B,MAAM;CAGf;AAED,OAAO,CAAC,MAAM,CAAC;IACd,UAAU,qBAAqB;QAC9B,aAAa,EAAE,UAAU,CAAC;KAC1B;CACD"}

package/dist/components/inputs/switch/switch.js

@@ -0,0 +1,137 @@
+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;
+};
+var NLDDSwitch_1;
+/**
+ * Nederlandse Digitale Dienst Switch Component (Lit + TypeScript)
+ *
+ * A toggle control for on/off settings.
+ * Prefer nldd-switch-field for labeled usage — it combines the switch with a visible label.
+ * Direct use of nldd-switch requires an accessible-label attribute for screen reader accessibility.
+ *
+ * @element nldd-switch
+ * @attr {boolean} checked           - Whether the switch is on/off
+ * @attr {boolean} disabled          - Disabled state
+ * @attr {string}  size              - Switch size: 'xs' | 'sm' (default: 'sm')
+ * @attr {string}  accessible-label  - Accessible label forwarded as aria-label to the native input.
+ *                                     Required when using nldd-switch without nldd-switch-field.
+ *
+ * @fires change - When the switch state changes; detail: { checked: boolean, value: string }
+ */
+import { LitElement } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import { switchStyles } from './switch.styles.js';
+import { switchTemplate } from './switch.template.js';
+let NLDDSwitch = NLDDSwitch_1 = class NLDDSwitch extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.checked = false;
+        this.disabled = false;
+        this.size = 'sm';
+        this.accessibleLabel = '';
+        this.value = 'on';
+        // ## Swipe gesture
+        this._pointerStartX = null;
+        this._swiped = false;
+    }
+    firstUpdated() {
+        if (import.meta.env?.DEV && !this.accessibleLabel) {
+            console.warn('<nldd-switch>: No accessible-label provided. Use nldd-switch-field for labeled usage, or provide an accessible-label attribute for screen reader accessibility.');
+        }
+    }
+    _handlePointerDown(e) {
+        this._pointerStartX = e.clientX;
+        this._swiped = false;
+        try {
+            e.target.setPointerCapture(e.pointerId);
+        }
+        catch { /* synthetic events in tests have no active pointer */ }
+    }
+    _handlePointerMove(e) {
+        if (this._pointerStartX === null)
+            return;
+        const dx = e.clientX - this._pointerStartX;
+        // Once the threshold is crossed, _swiped locks in — matching iOS switch
+        // behaviour where intent is set by crossing the threshold, and the final
+        // toggle direction is determined by the terminal dx in _handlePointerUp.
+        if (Math.abs(dx) >= NLDDSwitch_1.SWIPE_THRESHOLD) {
+            this._swiped = true;
+        }
+    }
+    _handlePointerUp(e) {
+        if (this._pointerStartX === null)
+            return;
+        const dx = e.clientX - this._pointerStartX;
+        this._pointerStartX = null;
+        if (!this._swiped)
+            return;
+        e.preventDefault();
+        // Reads the dir HTML attribute from the nearest ancestor. Does not detect
+        // RTL set purely via CSS `direction: rtl` (no attribute).
+        const isRtl = this.closest('[dir]')?.getAttribute('dir') === 'rtl';
+        const shouldCheck = isRtl ? dx < 0 : dx > 0;
+        if (shouldCheck !== this.checked) {
+            this.toggle();
+        }
+    }
+    _handlePointerCancel() {
+        this._pointerStartX = null;
+        this._swiped = false;
+    }
+    _handleClick(e) {
+        if (this._swiped) {
+            e.preventDefault();
+            this._swiped = false;
+        }
+    }
+    // ## Public API
+    toggle() {
+        if (this.disabled)
+            return;
+        this.checked = !this.checked;
+        this.dispatchEvent(new CustomEvent('change', {
+            detail: { checked: this.checked, value: this.value },
+            bubbles: true,
+            composed: true,
+        }));
+    }
+    _handleChange(e) {
+        if (this.disabled)
+            return;
+        const input = e.target;
+        this.checked = input.checked;
+        this.dispatchEvent(new CustomEvent('change', {
+            detail: { checked: this.checked, value: this.value },
+            bubbles: true,
+            composed: true,
+        }));
+    }
+    render() {
+        return switchTemplate(this);
+    }
+};
+NLDDSwitch.styles = switchStyles;
+NLDDSwitch.SWIPE_THRESHOLD = 10;
+__decorate([
+    property({ type: Boolean, reflect: true })
+], NLDDSwitch.prototype, "checked", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], NLDDSwitch.prototype, "disabled", void 0);
+__decorate([
+    property({ type: String, reflect: true })
+], NLDDSwitch.prototype, "size", void 0);
+__decorate([
+    property({ type: String, attribute: 'accessible-label' })
+], NLDDSwitch.prototype, "accessibleLabel", void 0);
+__decorate([
+    property({ type: String })
+], NLDDSwitch.prototype, "value", void 0);
+NLDDSwitch = NLDDSwitch_1 = __decorate([
+    customElement('nldd-switch')
+], NLDDSwitch);
+export { NLDDSwitch };
+//# sourceMappingURL=switch.js.map

package/dist/components/inputs/switch/switch.js.map

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

package/dist/components/inputs/switch/switch.styles.d.ts

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

package/dist/components/inputs/switch/switch.styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"switch.styles.d.ts","sourceRoot":"","sources":["../../../../src/components/inputs/switch/switch.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,YAAY,yBAyJxB,CAAC"}