@nldd/design-system 0.8.37

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

@@ -0,0 +1,156 @@
+import { css } from 'lit';
+export const switchStyles = css `
+
+
+	/* # Host */
+
+	:host {
+		display: inline-block;
+		position: relative;
+		flex-shrink: 0;
+		--_switch-xs-width: var(--semantics-controls-md-min-size);
+		--_switch-xs-height: var(--semantics-controls-xs-min-size);
+		--_switch-sm-width: var(--semantics-controls-lg-min-size);
+		--_switch-sm-height: var(--semantics-controls-sm-min-size);
+		--_switch-padding: var(--primitives-space-2);
+		--_switch-xs-thumb-size: calc(var(--_switch-xs-height) - var(--_switch-padding) * 2 - var(--components-switch-thumb-border-thickness) * 2);
+		--_switch-sm-thumb-size: calc(var(--_switch-sm-height) - var(--_switch-padding) * 2 - var(--components-switch-thumb-border-thickness) * 2);
+		--_transition-duration: var(--primitives-transition-duration-fast);
+		-webkit-tap-highlight-color: transparent;
+	}
+
+	:host([hidden]) {
+		display: none;
+	}
+
+	:host([disabled]) {
+		opacity: var(--primitives-opacity-disabled);
+	}
+
+	:host([size='xs']) {
+		width: var(--_switch-xs-width);
+		height: var(--_switch-xs-height);
+	}
+
+	:host([size='sm']),
+	:host(:not([size])) {
+		width: var(--_switch-sm-width);
+		height: var(--_switch-sm-height);
+	}
+
+
+	/* # Input */
+
+	.switch__input {
+		position: absolute;
+		inset: 0;
+		z-index: 1;
+		width: 100%;
+		height: 100%;
+		margin: 0;
+		opacity: 0;
+	}
+
+
+	/* # Track */
+
+	.switch__track {
+		position: relative;
+		display: flex;
+		align-items: center;
+		box-sizing: border-box;
+		width: 100%;
+		height: 100%;
+		padding: var(--_switch-padding);
+		background-color: var(--components-switch-background-color);
+		border: var(--components-switch-border-thickness) solid var(--components-switch-border-color);
+		transition: background-color var(--_transition-duration) ease, border-color var(--_transition-duration) ease;
+	}
+
+	:host([size='xs']) .switch__track {
+		border-radius: calc(var(--semantics-controls-xs-min-size) / 2);
+	}
+
+	:host([size='sm']) .switch__track,
+	:host(:not([size])) .switch__track {
+		border-radius: calc(var(--semantics-controls-sm-min-size) / 2);
+	}
+
+	.switch__input:checked ~ .switch__track {
+		background-color: var(--components-switch-is-selected-background-color);
+		border-color: var(--components-switch-is-selected-background-color);
+	}
+
+	.switch__input:focus-visible ~ .switch__track {
+		outline: var(--semantics-focus-ring-outline);
+		outline-offset: var(--semantics-focus-ring-outline-offset);
+		box-shadow: var(--semantics-focus-ring-box-shadow);
+	}
+
+
+	/* # Thumb */
+
+	.switch__thumb {
+		position: absolute;
+		left: var(--_switch-padding);
+		box-sizing: border-box;
+		border-radius: 50%;
+		background-color: var(--components-switch-thumb-background-color);
+		border: var(--components-switch-thumb-border-thickness) solid var(--components-switch-thumb-border-color);
+		transition: width var(--_transition-duration) ease, height var(--_transition-duration) ease, left var(--_transition-duration) ease, background-color var(--_transition-duration) ease, border-color var(--_transition-duration) ease;
+		will-change: width, height, left;
+	}
+
+	:host([size='xs']) .switch__thumb {
+		width: var(--_switch-xs-thumb-size);
+		height: var(--_switch-xs-thumb-size);
+	}
+
+	:host([size='sm']) .switch__thumb,
+	:host(:not([size])) .switch__thumb {
+		width: var(--_switch-sm-thumb-size);
+		height: var(--_switch-sm-thumb-size);
+	}
+
+	.switch__input:checked ~ .switch__track .switch__thumb {
+		background-color: var(--components-switch-is-selected-thumb-background-color);
+		border-color: var(--components-switch-is-selected-thumb-background-color);
+	}
+
+	:host([size='xs']) .switch__input:checked ~ .switch__track .switch__thumb {
+		left: calc(var(--_switch-xs-width) - var(--components-switch-thumb-border-thickness) * 2 - var(--_switch-xs-thumb-size) - var(--_switch-padding) * 2);
+		width: calc(var(--_switch-xs-thumb-size) + var(--_switch-padding) * 2);
+		height: calc(var(--_switch-xs-thumb-size) + var(--_switch-padding) * 2);
+	}
+
+	:host([size='sm']) .switch__input:checked ~ .switch__track .switch__thumb,
+	:host(:not([size])) .switch__input:checked ~ .switch__track .switch__thumb {
+		left: calc(var(--_switch-sm-width) - var(--components-switch-thumb-border-thickness) * 2 - var(--_switch-sm-thumb-size) - var(--_switch-padding) * 2);
+		width: calc(var(--_switch-sm-thumb-size) + var(--_switch-padding) * 2);
+		height: calc(var(--_switch-sm-thumb-size) + var(--_switch-padding) * 2);
+	}
+
+
+	/* # Check */
+
+	.switch__check {
+		position: absolute;
+		top: 50%;
+		left: 50%;
+		transform: translate(-50%, -50%);
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		width: calc(100% + var(--components-switch-thumb-border-thickness) * 2);
+		height: calc(100% + var(--components-switch-thumb-border-thickness) * 2);
+		color: var(--components-switch-is-selected-background-color);
+		opacity: 0;
+		pointer-events: none;
+		transition: opacity var(--_transition-duration) ease;
+	}
+
+	.switch__input:checked ~ .switch__track .switch__check {
+		opacity: 1;
+	}
+`;
+//# sourceMappingURL=switch.styles.js.map

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

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

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

@@ -0,0 +1,5 @@
+import { TemplateResult } from 'lit';
+import type { NLDDSwitch } from './switch.js';
+import './../../content/icon/icon.js';
+export declare function switchTemplate(component: NLDDSwitch): TemplateResult;
+//# sourceMappingURL=switch.template.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"switch.template.d.ts","sourceRoot":"","sources":["../../../../src/components/inputs/switch/switch.template.ts"],"names":[],"mappings":"AAAA,OAAO,EAAiB,cAAc,EAAE,MAAM,KAAK,CAAC;AACpD,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAC9C,OAAO,8BAA8B,CAAC;AAEtC,wBAAgB,cAAc,CAAC,SAAS,EAAE,UAAU,GAAG,cAAc,CA2BpE"}

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

@@ -0,0 +1,31 @@
+import { html, nothing } from 'lit';
+import './../../content/icon/icon.js';
+export function switchTemplate(component) {
+    return html `
+		<input class="switch__input"
+			type="checkbox"
+			role="switch"
+			.checked=${component.checked}
+			aria-checked=${component.checked}
+			?disabled=${component.disabled}
+			value=${component.value}
+			aria-label=${component.accessibleLabel || nothing}
+			@change=${component._handleChange}
+			@pointerdown=${component._handlePointerDown}
+			@pointermove=${component._handlePointerMove}
+			@pointerup=${component._handlePointerUp}
+			@pointercancel=${component._handlePointerCancel}
+			@click=${component._handleClick}
+		>
+		<div class="switch__track"
+			aria-hidden="true"
+		>
+			<div class="switch__thumb">
+				<div class="switch__check">
+					<nldd-icon name="check-mark-small"></nldd-icon>
+				</div>
+			</div>
+		</div>
+	`;
+}
+//# sourceMappingURL=switch.template.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"switch.template.js","sourceRoot":"","sources":["../../../../src/components/inputs/switch/switch.template.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,OAAO,EAAkB,MAAM,KAAK,CAAC;AAEpD,OAAO,8BAA8B,CAAC;AAEtC,MAAM,UAAU,cAAc,CAAC,SAAqB;IACnD,OAAO,IAAI,CAAA;;;;cAIE,SAAS,CAAC,OAAO;kBACb,SAAS,CAAC,OAAO;eACpB,SAAS,CAAC,QAAQ;WACtB,SAAS,CAAC,KAAK;gBACV,SAAS,CAAC,eAAe,IAAI,OAAO;aACvC,SAAS,CAAC,aAAa;kBAClB,SAAS,CAAC,kBAAkB;kBAC5B,SAAS,CAAC,kBAAkB;gBAC9B,SAAS,CAAC,gBAAgB;oBACtB,SAAS,CAAC,oBAAoB;YACtC,SAAS,CAAC,YAAY;;;;;;;;;;;EAWhC,CAAC;AACH,CAAC"}

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

@@ -0,0 +1,32 @@
+/**
+ * Nederlandse Digitale Dienst Switch Field Component (Lit + TypeScript)
+ *
+ * A switch toggle with an inline label for use in forms.
+ *
+ * @element nldd-switch-field
+ * @attr {boolean} checked  - Checked state
+ * @attr {boolean} disabled - Disabled state
+ * @attr {string}  value    - Value for form submission
+ * @attr {string}  name     - Name for form submission
+ * @attr {string}  label    - Label text for the switch
+ *
+ * @fires change - When checked state changes; detail: { checked: boolean, value: string }
+ */
+import { LitElement } from 'lit';
+export declare class NLDDSwitchField extends LitElement {
+    static styles: import("lit").CSSResult;
+    checked: boolean;
+    disabled: boolean;
+    value: string;
+    name: string;
+    label: string;
+    _handleLabelClick(e: Event): void;
+    _handleChange(e: Event): void;
+    render(): import("lit-html").TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'nldd-switch-field': NLDDSwitchField;
+    }
+}
+//# sourceMappingURL=switch-field.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"switch-field.d.ts","sourceRoot":"","sources":["../../../../src/components/inputs/switch-field/switch-field.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;GAaG;AACH,OAAO,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AAMjC,qBACa,eAAgB,SAAQ,UAAU;IAC9C,OAAgB,MAAM,0BAAqB;IAG3C,OAAO,UAAS;IAGhB,QAAQ,UAAS;IAGjB,KAAK,SAAQ;IAGb,IAAI,SAAM;IAGV,KAAK,SAAM;IAEJ,iBAAiB,CAAC,CAAC,EAAE,KAAK,GAAG,IAAI;IAOjC,aAAa,CAAC,CAAC,EAAE,KAAK,GAAG,IAAI;IAS3B,MAAM;CAGf;AAED,OAAO,CAAC,MAAM,CAAC;IACd,UAAU,qBAAqB;QAC9B,mBAAmB,EAAE,eAAe,CAAC;KACrC;CACD"}

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

@@ -0,0 +1,74 @@
+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 Switch Field Component (Lit + TypeScript)
+ *
+ * A switch toggle with an inline label for use in forms.
+ *
+ * @element nldd-switch-field
+ * @attr {boolean} checked  - Checked state
+ * @attr {boolean} disabled - Disabled state
+ * @attr {string}  value    - Value for form submission
+ * @attr {string}  name     - Name for form submission
+ * @attr {string}  label    - Label text for the switch
+ *
+ * @fires change - When checked state changes; detail: { checked: boolean, value: string }
+ */
+import { LitElement } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import { switchFieldStyles } from './switch-field.styles.js';
+import { switchFieldTemplate } from './switch-field.template.js';
+let NLDDSwitchField = class NLDDSwitchField extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.checked = false;
+        this.disabled = false;
+        this.value = 'on';
+        this.name = '';
+        this.label = '';
+    }
+    _handleLabelClick(e) {
+        if (this.disabled)
+            return;
+        if (e.target.closest?.('nldd-switch'))
+            return;
+        const switchEl = this.shadowRoot?.querySelector('nldd-switch');
+        switchEl?.toggle();
+    }
+    _handleChange(e) {
+        this.checked = e.detail.checked;
+        this.dispatchEvent(new CustomEvent('change', {
+            detail: { checked: this.checked, value: this.value },
+            bubbles: true,
+            composed: true,
+        }));
+    }
+    render() {
+        return switchFieldTemplate(this);
+    }
+};
+NLDDSwitchField.styles = switchFieldStyles;
+__decorate([
+    property({ type: Boolean, reflect: true })
+], NLDDSwitchField.prototype, "checked", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], NLDDSwitchField.prototype, "disabled", void 0);
+__decorate([
+    property({ type: String })
+], NLDDSwitchField.prototype, "value", void 0);
+__decorate([
+    property({ type: String })
+], NLDDSwitchField.prototype, "name", void 0);
+__decorate([
+    property({ type: String })
+], NLDDSwitchField.prototype, "label", void 0);
+NLDDSwitchField = __decorate([
+    customElement('nldd-switch-field')
+], NLDDSwitchField);
+export { NLDDSwitchField };
+//# sourceMappingURL=switch-field.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"switch-field.js","sourceRoot":"","sources":["../../../../src/components/inputs/switch-field/switch-field.ts"],"names":[],"mappings":";;;;;;AAAA;;;;;;;;;;;;;GAaG;AACH,OAAO,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AACjC,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC5D,OAAO,EAAE,iBAAiB,EAAE,MAAM,0BAA0B,CAAC;AAC7D,OAAO,EAAE,mBAAmB,EAAE,MAAM,4BAA4B,CAAC;AAI1D,IAAM,eAAe,GAArB,MAAM,eAAgB,SAAQ,UAAU;IAAxC;;QAIN,YAAO,GAAG,KAAK,CAAC;QAGhB,aAAQ,GAAG,KAAK,CAAC;QAGjB,UAAK,GAAG,IAAI,CAAC;QAGb,SAAI,GAAG,EAAE,CAAC;QAGV,UAAK,GAAG,EAAE,CAAC;IAqBZ,CAAC;IAnBO,iBAAiB,CAAC,CAAQ;QAChC,IAAI,IAAI,CAAC,QAAQ;YAAE,OAAO;QAC1B,IAAK,CAAC,CAAC,MAAsB,CAAC,OAAO,EAAE,CAAC,aAAa,CAAC;YAAE,OAAO;QAC/D,MAAM,QAAQ,GAAG,IAAI,CAAC,UAAU,EAAE,aAAa,CAAC,aAAa,CAAsB,CAAC;QACpF,QAAQ,EAAE,MAAM,EAAE,CAAC;IACpB,CAAC;IAEM,aAAa,CAAC,CAAQ;QAC5B,IAAI,CAAC,OAAO,GAAI,CAAuC,CAAC,MAAM,CAAC,OAAO,CAAC;QACvE,IAAI,CAAC,aAAa,CAAC,IAAI,WAAW,CAAC,QAAQ,EAAE;YAC5C,MAAM,EAAE,EAAE,OAAO,EAAE,IAAI,CAAC,OAAO,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE;YACpD,OAAO,EAAE,IAAI;YACb,QAAQ,EAAE,IAAI;SACd,CAAC,CAAC,CAAC;IACL,CAAC;IAEQ,MAAM;QACd,OAAO,mBAAmB,CAAC,IAAI,CAAC,CAAC;IAClC,CAAC;;AAnCe,sBAAM,GAAG,iBAAiB,AAApB,CAAqB;AAG3C;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;gDAC3B;AAGhB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;iDAC1B;AAGjB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;8CACd;AAGb;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;6CACjB;AAGV;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;8CAChB;AAhBC,eAAe;IAD3B,aAAa,CAAC,mBAAmB,CAAC;GACtB,eAAe,CAqC3B"}

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

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

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

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

package/dist/components/inputs/switch-field/switch-field.styles.js

@@ -0,0 +1,52 @@
+import { css } from 'lit';
+export const switchFieldStyles = css `
+
+
+	/* # Host */
+
+	:host {
+		display: block;
+	}
+
+	:host([hidden]) {
+		display: none;
+	}
+
+
+	/* # Block */
+
+	.switch-field {
+		display: flex;
+		flex-direction: row;
+		align-items: flex-start;
+		gap: var(--primitives-space-8);
+		min-height: var(--semantics-controls-md-min-size);
+	}
+
+
+	/* # Control */
+
+	.switch-field__control {
+		display: flex;
+		flex-shrink: 0;
+		min-height: var(--semantics-controls-md-min-size);
+		align-items: center;
+	}
+
+
+	/* # Label */
+
+	.switch-field__label {
+		padding-top: calc((var(--semantics-controls-md-min-size) - 1em * var(--primitives-line-height-snug)) / 2);
+		display: flex;
+		flex-grow: 1;
+		font: var(--primitives-font-body-md-regular-snug);
+		color: var(--semantics-content-color);
+		cursor: default;
+	}
+
+	:host([disabled]) .switch-field__label {
+		opacity: var(--primitives-opacity-disabled);
+	}
+`;
+//# sourceMappingURL=switch-field.styles.js.map

package/dist/components/inputs/switch-field/switch-field.styles.js.map

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

package/dist/components/inputs/switch-field/switch-field.template.d.ts

@@ -0,0 +1,5 @@
+import { TemplateResult } from 'lit';
+import type { NLDDSwitchField } from './switch-field.js';
+import '../switch/switch.js';
+export declare function switchFieldTemplate(component: NLDDSwitchField): TemplateResult;
+//# sourceMappingURL=switch-field.template.d.ts.map

package/dist/components/inputs/switch-field/switch-field.template.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"switch-field.template.d.ts","sourceRoot":"","sources":["../../../../src/components/inputs/switch-field/switch-field.template.ts"],"names":[],"mappings":"AAAA,OAAO,EAAiB,cAAc,EAAE,MAAM,KAAK,CAAC;AACpD,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AACzD,OAAO,qBAAqB,CAAC;AAG7B,wBAAgB,mBAAmB,CAAC,SAAS,EAAE,eAAe,GAAG,cAAc,CAmB9E"}

package/dist/components/inputs/switch-field/switch-field.template.js

@@ -0,0 +1,24 @@
+import { html, nothing } from 'lit';
+import '../switch/switch.js';
+/* eslint-disable lit-a11y/click-events-have-key-events -- label wrapper delegates to inner switch */
+export function switchFieldTemplate(component) {
+    return html `
+		<div class="switch-field"
+			@click=${component._handleLabelClick}
+		>
+			<div class="switch-field__control">
+				<nldd-switch
+					size="sm"
+					name=${component.name || nothing}
+					value=${component.value}
+					?checked=${component.checked}
+					?disabled=${component.disabled}
+					accessible-label=${component.label || nothing}
+					@change=${component._handleChange}
+				></nldd-switch>
+			</div>
+			<span class="switch-field__label">${component.label}</span>
+		</div>
+	`;
+}
+//# sourceMappingURL=switch-field.template.js.map

package/dist/components/inputs/switch-field/switch-field.template.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"switch-field.template.js","sourceRoot":"","sources":["../../../../src/components/inputs/switch-field/switch-field.template.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,OAAO,EAAkB,MAAM,KAAK,CAAC;AAEpD,OAAO,qBAAqB,CAAC;AAE7B,qGAAqG;AACrG,MAAM,UAAU,mBAAmB,CAAC,SAA0B;IAC7D,OAAO,IAAI,CAAA;;YAEA,SAAS,CAAC,iBAAiB;;;;;YAK3B,SAAS,CAAC,IAAI,IAAI,OAAO;aACxB,SAAS,CAAC,KAAK;gBACZ,SAAS,CAAC,OAAO;iBAChB,SAAS,CAAC,QAAQ;wBACX,SAAS,CAAC,KAAK,IAAI,OAAO;eACnC,SAAS,CAAC,aAAa;;;uCAGC,SAAS,CAAC,KAAK;;EAEpD,CAAC;AACH,CAAC"}

package/dist/components/inputs/text-field/text-field.d.ts

@@ -0,0 +1,69 @@
+/**
+ * Nederlandse Digitale Dienst Text Field Component (Lit + TypeScript)
+ *
+ * @element nldd-text-field
+ *
+ * @attr {string} value        - The input value
+ * @attr {string} placeholder  - Placeholder text
+ * @attr {string} input-id     - Sets the id on the native input. Set automatically by nldd-form-field.
+ * @attr {string} size         - 'md' (default) | 'sm'. Set automatically by nldd-form-field.
+ * @attr {boolean} invalid     - Marks the field as invalid
+ * @attr {boolean} valid       - Marks the field as valid
+ * @attr {boolean} disabled    - Disabled state
+ * @attr {string} type         - Input type: 'text' | 'email' | 'tel' | 'url'
+ * @attr {string} name         - Input name for form submission
+ * @attr {boolean} readonly    - Readonly state
+ * @attr {boolean} required    - Required state
+ * @attr {string} autocomplete - Autocomplete hint
+ * @attr {string} accessible-label    - Accessible label forwarded to the inner input. Set automatically by nldd-form-field.
+ * @attr {string} width        - Optional fixed width (any CSS length, e.g. "240px"). Default: full-width.
+ *
+ * @fires input  - When input value changes
+ * @fires change - When input value is committed
+ *
+ * @csspart container - The field container
+ * @csspart input     - The native input element
+ */
+import { LitElement, type PropertyValues } from 'lit';
+export type InputType = 'text' | 'email' | 'tel' | 'url';
+export declare class NLDDTextField extends LitElement {
+    static shadowRootOptions: {
+        delegatesFocus: boolean;
+        clonable?: boolean;
+        customElementRegistry?: CustomElementRegistry;
+        mode: ShadowRootMode;
+        serializable?: boolean;
+        slotAssignment?: SlotAssignmentMode;
+    };
+    static styles: import("lit").CSSResult;
+    size: 'md' | 'sm';
+    value: string;
+    inputId: string;
+    placeholder: string;
+    invalid: boolean;
+    valid: boolean;
+    disabled: boolean;
+    type: InputType;
+    name: string;
+    readonly: boolean;
+    required: boolean;
+    autocomplete: string;
+    /** Accessible label forwarded to the inner <input>. Set automatically by nldd-form-field. */
+    accessibleLabel: string;
+    errorMessageIds: string;
+    /** Optional fixed width (any CSS length). When unset, the field stretches to fill its container. */
+    width: string;
+    private _input;
+    updated(changed: PropertyValues): void;
+    _handleInput(e: Event): void;
+    _handleChange(e: Event): void;
+    focus(): void;
+    blur(): void;
+    render(): import("lit-html").TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'nldd-text-field': NLDDTextField;
+    }
+}
+//# sourceMappingURL=text-field.d.ts.map

package/dist/components/inputs/text-field/text-field.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"text-field.d.ts","sourceRoot":"","sources":["../../../../src/components/inputs/text-field/text-field.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AACH,OAAO,EAAE,UAAU,EAAE,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;AAKtD,MAAM,MAAM,SAAS,GAAG,MAAM,GAAG,OAAO,GAAG,KAAK,GAAG,KAAK,CAAC;AAEzD,qBACa,aAAc,SAAQ,UAAU;IAC5C,OAAgB,iBAAiB;;;;;;;MAG/B;IAEF,OAAgB,MAAM,0BAAmB;IAGzC,IAAI,EAAE,IAAI,GAAG,IAAI,CAAQ;IAGzB,KAAK,SAAM;IAGX,OAAO,SAAM;IAGb,WAAW,SAAM;IAGjB,OAAO,UAAS;IAGhB,KAAK,UAAS;IAGd,QAAQ,UAAS;IAGjB,IAAI,EAAE,SAAS,CAAU;IAGzB,IAAI,SAAM;IAGV,QAAQ,UAAS;IAGjB,QAAQ,UAAS;IAGjB,YAAY,SAAM;IAElB,6FAA6F;IAE7F,eAAe,SAAM;IAGrB,eAAe,SAAM;IAErB,oGAAoG;IAEpG,KAAK,SAAM;IAIX,OAAO,CAAC,MAAM,CAAoB;IAEzB,OAAO,CAAC,OAAO,EAAE,cAAc,GAAG,IAAI;IAMxC,YAAY,CAAC,CAAC,EAAE,KAAK,GAAG,IAAI;IAW5B,aAAa,CAAC,CAAC,EAAE,KAAK,GAAG,IAAI;IAW7B,KAAK,IAAI,IAAI;IAIb,IAAI,IAAI,IAAI;IAIV,MAAM;CAGf;AAED,OAAO,CAAC,MAAM,CAAC;IACd,UAAU,qBAAqB;QAC9B,iBAAiB,EAAE,aAAa,CAAC;KACjC;CACD"}

package/dist/components/inputs/text-field/text-field.js

@@ -0,0 +1,150 @@
+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 Text Field Component (Lit + TypeScript)
+ *
+ * @element nldd-text-field
+ *
+ * @attr {string} value        - The input value
+ * @attr {string} placeholder  - Placeholder text
+ * @attr {string} input-id     - Sets the id on the native input. Set automatically by nldd-form-field.
+ * @attr {string} size         - 'md' (default) | 'sm'. Set automatically by nldd-form-field.
+ * @attr {boolean} invalid     - Marks the field as invalid
+ * @attr {boolean} valid       - Marks the field as valid
+ * @attr {boolean} disabled    - Disabled state
+ * @attr {string} type         - Input type: 'text' | 'email' | 'tel' | 'url'
+ * @attr {string} name         - Input name for form submission
+ * @attr {boolean} readonly    - Readonly state
+ * @attr {boolean} required    - Required state
+ * @attr {string} autocomplete - Autocomplete hint
+ * @attr {string} accessible-label    - Accessible label forwarded to the inner input. Set automatically by nldd-form-field.
+ * @attr {string} width        - Optional fixed width (any CSS length, e.g. "240px"). Default: full-width.
+ *
+ * @fires input  - When input value changes
+ * @fires change - When input value is committed
+ *
+ * @csspart container - The field container
+ * @csspart input     - The native input element
+ */
+import { LitElement } from 'lit';
+import { customElement, property, query } from 'lit/decorators.js';
+import { textFieldStyles } from './text-field.styles.js';
+import { textFieldTemplate } from './text-field.template.js';
+let NLDDTextField = class NLDDTextField extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.size = 'md';
+        this.value = '';
+        this.inputId = '';
+        this.placeholder = '';
+        this.invalid = false;
+        this.valid = false;
+        this.disabled = false;
+        this.type = 'text';
+        this.name = '';
+        this.readonly = false;
+        this.required = false;
+        this.autocomplete = '';
+        /** Accessible label forwarded to the inner <input>. Set automatically by nldd-form-field. */
+        this.accessibleLabel = '';
+        this.errorMessageIds = '';
+        /** Optional fixed width (any CSS length). When unset, the field stretches to fill its container. */
+        this.width = '';
+    }
+    updated(changed) {
+        if (changed.has('width')) {
+            this.style.width = this.width || '';
+        }
+    }
+    _handleInput(e) {
+        e.stopPropagation();
+        const input = e.target;
+        this.value = input.value;
+        this.dispatchEvent(new CustomEvent('input', {
+            detail: { value: this.value },
+            bubbles: true,
+            composed: true,
+        }));
+    }
+    _handleChange(e) {
+        e.stopPropagation();
+        const input = e.target;
+        this.value = input.value;
+        this.dispatchEvent(new CustomEvent('change', {
+            detail: { value: this.value },
+            bubbles: true,
+            composed: true,
+        }));
+    }
+    focus() {
+        this._input?.focus();
+    }
+    blur() {
+        this._input?.blur();
+    }
+    render() {
+        return textFieldTemplate(this);
+    }
+};
+NLDDTextField.shadowRootOptions = {
+    ...LitElement.shadowRootOptions,
+    delegatesFocus: true,
+};
+NLDDTextField.styles = textFieldStyles;
+__decorate([
+    property({ type: String, reflect: true })
+], NLDDTextField.prototype, "size", void 0);
+__decorate([
+    property({ type: String })
+], NLDDTextField.prototype, "value", void 0);
+__decorate([
+    property({ type: String, attribute: 'input-id' })
+], NLDDTextField.prototype, "inputId", void 0);
+__decorate([
+    property({ type: String })
+], NLDDTextField.prototype, "placeholder", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], NLDDTextField.prototype, "invalid", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], NLDDTextField.prototype, "valid", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], NLDDTextField.prototype, "disabled", void 0);
+__decorate([
+    property({ type: String })
+], NLDDTextField.prototype, "type", void 0);
+__decorate([
+    property({ type: String })
+], NLDDTextField.prototype, "name", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], NLDDTextField.prototype, "readonly", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], NLDDTextField.prototype, "required", void 0);
+__decorate([
+    property({ type: String })
+], NLDDTextField.prototype, "autocomplete", void 0);
+__decorate([
+    property({ type: String, attribute: 'accessible-label' })
+], NLDDTextField.prototype, "accessibleLabel", void 0);
+__decorate([
+    property({ type: String, attribute: 'error-message-ids' })
+], NLDDTextField.prototype, "errorMessageIds", void 0);
+__decorate([
+    property({ type: String, reflect: true })
+], NLDDTextField.prototype, "width", void 0);
+__decorate([
+    query('.text-field__input')
+], NLDDTextField.prototype, "_input", void 0);
+NLDDTextField = __decorate([
+    customElement('nldd-text-field')
+], NLDDTextField);
+export { NLDDTextField };
+//# sourceMappingURL=text-field.js.map

package/dist/components/inputs/text-field/text-field.js.map

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

package/dist/components/inputs/text-field/text-field.styles.d.ts

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

package/dist/components/inputs/text-field/text-field.styles.d.ts.map

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