@nldd/design-system 0.8.37

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

@@ -0,0 +1,223 @@
+import { css } from 'lit';
+export const passwordFieldStyles = css `
+
+
+	/* # Host */
+
+	:host {
+		display: block;
+		--_background-color: var(--semantics-input-fields-background-color);
+		--_z-index-button-focus: 1;
+		-webkit-tap-highlight-color: transparent;
+	}
+
+	:host([hidden]) {
+		display: none;
+	}
+
+
+	/* # Block */
+
+	.password-field {
+		display: flex;
+		flex-direction: row;
+		align-items: center;
+		overflow: hidden;
+		box-sizing: border-box;
+		border: var(--semantics-input-fields-border);
+		background-color: var(--_background-color);
+	}
+
+	:host([size='sm']) .password-field {
+		padding-left: calc(var(--semantics-controls-sm-inline-padding) - var(--semantics-input-fields-border-thickness));
+		min-height: var(--semantics-controls-sm-min-size);
+		border-radius: var(--semantics-controls-sm-corner-radius);
+	}
+
+	:host([size='md']) .password-field,
+	:host(:not([size])) .password-field {
+		padding-left: calc(var(--semantics-controls-md-inline-padding) - var(--semantics-input-fields-border-thickness));
+		min-height: var(--semantics-controls-md-min-size);
+		border-radius: var(--semantics-controls-md-corner-radius);
+	}
+
+	:host([valid]) .password-field {
+		border-color: var(--semantics-input-fields-is-valid-border-color);
+	}
+
+	:host([invalid]) .password-field {
+		border-color: var(--semantics-input-fields-is-invalid-border-color);
+	}
+
+	:host([readonly]) .password-field {
+		border-color: var(--semantics-input-fields-is-read-only-border-color);
+		--_background-color: var(--semantics-input-fields-is-read-only-background-color);
+	}
+
+	:host([disabled]) .password-field {
+		opacity: var(--primitives-opacity-disabled);
+	}
+
+	.password-field:has(input:-webkit-autofill),
+	.password-field:has(input:autofill) {
+		--_background-color: var(--semantics-input-fields-is-autofill-background-color);
+	}
+
+	.password-field:focus-within:not(:has(.password-field__visibility-toggle-button:focus-within)) {
+		outline: var(--semantics-focus-ring-outline);
+		outline-offset: var(--semantics-focus-ring-outline-offset);
+		box-shadow: var(--semantics-focus-ring-box-shadow);
+	}
+
+	.password-field:has(.password-field__visibility-toggle-button:focus-within) {
+		overflow: visible;
+	}
+
+
+	/* # Input */
+
+	.password-field__input {
+		flex-grow: 1;
+		min-width: 0;
+		overflow: hidden;
+		box-sizing: border-box;
+		padding: 0;
+		margin: 0;
+		color: var(--semantics-content-color);
+		background: transparent;
+		border: none;
+		outline: none;
+		appearance: none;
+	}
+
+	:host([size='sm']) .password-field__input {
+		min-height: calc(var(--semantics-controls-sm-min-size) - var(--semantics-input-fields-border-thickness) * 2);
+		font: var(--semantics-input-fields-sm-text-font);
+	}
+
+	:host([size='md']) .password-field__input,
+	:host(:not([size])) .password-field__input {
+		min-height: calc(var(--semantics-controls-md-min-size) - var(--semantics-input-fields-border-thickness) * 2);
+		font: var(--semantics-input-fields-md-text-font);
+	}
+
+	:host([size='sm']) .password-field__input.is-masked {
+		font: var(--semantics-input-fields-sm-mask-font);
+	}
+
+	:host([size='md']) .password-field__input.is-masked,
+	:host(:not([size])) .password-field__input.is-masked {
+		font: var(--semantics-input-fields-md-mask-font);
+	}
+
+	.password-field__input::placeholder {
+		color: var(--semantics-input-fields-placeholder-color);
+	}
+
+	:host([size='sm']) .password-field__input::placeholder {
+		font: var(--semantics-input-fields-sm-text-font);
+	}
+
+	:host([size='md']) .password-field__input::placeholder,
+	:host(:not([size])) .password-field__input::placeholder {
+		font: var(--semantics-input-fields-md-text-font);
+	}
+
+	.password-field__input:-webkit-autofill,
+	.password-field__input:autofill {
+		box-shadow: 0 0 0 999px var(--_background-color) inset;
+	}
+
+	:host([disabled]) .password-field__input {
+		pointer-events: none;
+	}
+
+
+	/* # Input fade */
+
+	.password-field__input-fade {
+		position: relative;
+		flex-shrink: 0;
+		align-self: stretch;
+		width: 0;
+	}
+
+	.password-field__input-fade::after {
+		content: '';
+		position: absolute;
+		top: 0;
+		bottom: 0;
+		right: 0;
+		width: var(--primitives-space-8);
+		border-radius: var(--semantics-controls-md-corner-radius);
+		background: linear-gradient(90deg, color-mix(in oklch, var(--_background-color) 0%, transparent) 0%, var(--_background-color) 100%);
+		pointer-events: none;
+	}
+
+
+	/* # Validation icon */
+
+	.password-field__validation-icon-area {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		flex-shrink: 0;
+		height: 100%;
+	}
+
+	:host([size='sm']) .password-field__validation-icon-area {
+		width: calc(var(--semantics-controls-sm-min-size) - var(--semantics-input-fields-border-thickness) * 2);
+	}
+
+	:host([size='md']) .password-field__validation-icon-area,
+	:host(:not([size])) .password-field__validation-icon-area {
+		width: calc(var(--semantics-controls-md-min-size) - var(--semantics-input-fields-border-thickness) * 2);
+	}
+
+	:host([valid]) .password-field__validation-icon-area {
+		color: var(--semantics-input-fields-is-valid-icon-color);
+	}
+
+	:host([invalid]) .password-field__validation-icon-area {
+		color: var(--semantics-input-fields-is-invalid-icon-color);
+	}
+
+	:host([size='sm']) .password-field__validation-icon {
+		width: var(--semantics-input-fields-sm-validation-icon-size);
+		height: var(--semantics-input-fields-sm-validation-icon-size);
+	}
+
+	:host([size='md']) .password-field__validation-icon,
+	:host(:not([size])) .password-field__validation-icon {
+		width: var(--semantics-input-fields-md-validation-icon-size);
+		height: var(--semantics-input-fields-md-validation-icon-size);
+	}
+
+
+	/* # Visibility toggle button */
+
+	.password-field__visibility-toggle-button {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		flex-shrink: 0;
+		height: 100%;
+	}
+
+	:host([size='sm']) .password-field__visibility-toggle-button {
+		padding-block: calc((var(--semantics-controls-sm-min-size) - var(--semantics-input-fields-border-thickness) * 2 - var(--semantics-controls-xs-min-size)) / 2);
+		padding-inline-end: calc((var(--semantics-controls-sm-min-size) - var(--semantics-input-fields-border-thickness) * 2 - var(--semantics-controls-xs-min-size)) / 2);
+	}
+
+	:host([size='md']) .password-field__visibility-toggle-button,
+	:host(:not([size])) .password-field__visibility-toggle-button {
+		padding-block: calc((var(--semantics-controls-md-min-size) - var(--semantics-input-fields-border-thickness) * 2 - var(--semantics-controls-sm-min-size)) / 2);
+		padding-inline-end: calc((var(--semantics-controls-md-min-size) - var(--semantics-input-fields-border-thickness) * 2 - var(--semantics-controls-sm-min-size)) / 2);
+	}
+
+	.password-field__visibility-toggle-button:focus-within {
+		position: relative;
+		z-index: var(--_z-index-button-focus);
+	}
+`;
+//# sourceMappingURL=password-field.styles.js.map

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

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

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

@@ -0,0 +1,6 @@
+import { TemplateResult } from 'lit';
+import type { NLDDPasswordField } from './password-field.js';
+import './../../content/icon/icon.js';
+import './../../actions/button/button.js';
+export declare function passwordFieldTemplate(component: NLDDPasswordField): TemplateResult;
+//# sourceMappingURL=password-field.template.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"password-field.template.d.ts","sourceRoot":"","sources":["../../../../src/components/inputs/password-field/password-field.template.ts"],"names":[],"mappings":"AAAA,OAAO,EAAiB,cAAc,EAAE,MAAM,KAAK,CAAC;AACpD,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAC;AAC7D,OAAO,8BAA8B,CAAC;AACtC,OAAO,kCAAkC,CAAC;AA8C1C,wBAAgB,qBAAqB,CAAC,SAAS,EAAE,iBAAiB,GAAG,cAAc,CAwBlF"}

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

@@ -0,0 +1,70 @@
+import { html, nothing } from 'lit';
+import './../../content/icon/icon.js';
+import './../../actions/button/button.js';
+function renderValidationIcon(component) {
+    if (component.invalid) {
+        return html `
+			<div class="password-field__validation-icon-area">
+				<nldd-icon class="password-field__validation-icon"
+					name="invalid"
+					aria-hidden="true"
+				></nldd-icon>
+			</div>
+		`;
+    }
+    if (component.valid) {
+        return html `
+			<div class="password-field__validation-icon-area">
+				<nldd-icon class="password-field__validation-icon"
+					name="valid"
+					aria-hidden="true"
+				></nldd-icon>
+			</div>
+		`;
+    }
+    return nothing;
+}
+function renderVisibilityToggle(component) {
+    const buttonSize = component.size === 'sm' ? 'xs' : 'sm';
+    const label = component.masked ? component.showText : component.hideText;
+    const accessibleLabel = component.masked ? component.showAccessibleLabel : component.hideAccessibleLabel;
+    return html `
+		<div class="password-field__visibility-toggle-button">
+			<nldd-button
+				size=${buttonSize}
+				type="button"
+				text=${label}
+				accessible-label=${accessibleLabel}
+				?disabled=${component.disabled}
+				@click=${component._handleToggle}
+				@mousedown=${(e) => e.preventDefault()}
+			></nldd-button>
+		</div>
+	`;
+}
+export function passwordFieldTemplate(component) {
+    return html `
+		<div class="password-field">
+			<input class="password-field__input ${component.masked ? 'is-masked' : ''}"
+				id=${component.inputId || nothing}
+				type=${component.masked ? 'password' : 'text'}
+				.value=${component.value}
+				placeholder=${component.placeholder || nothing}
+				?disabled=${component.disabled}
+				?readonly=${component.readonly}
+				?required=${component.required}
+				name=${component.name || nothing}
+				autocomplete=${component.autocomplete || nothing}
+				aria-label=${component.accessibleLabel || nothing}
+				aria-describedby=${component.errorMessageIds || nothing}
+				aria-invalid=${component.invalid ? 'true' : nothing}
+				@input=${component._handleInput}
+				@change=${component._handleChange}
+			/>
+			<div class="password-field__input-fade"></div>
+			${renderValidationIcon(component)}
+			${renderVisibilityToggle(component)}
+		</div>
+	`;
+}
+//# sourceMappingURL=password-field.template.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"password-field.template.js","sourceRoot":"","sources":["../../../../src/components/inputs/password-field/password-field.template.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,OAAO,EAAkB,MAAM,KAAK,CAAC;AAEpD,OAAO,8BAA8B,CAAC;AACtC,OAAO,kCAAkC,CAAC;AAE1C,SAAS,oBAAoB,CAAC,SAA4B;IACzD,IAAI,SAAS,CAAC,OAAO,EAAE,CAAC;QACvB,OAAO,IAAI,CAAA;;;;;;;GAOV,CAAC;IACH,CAAC;IACD,IAAI,SAAS,CAAC,KAAK,EAAE,CAAC;QACrB,OAAO,IAAI,CAAA;;;;;;;GAOV,CAAC;IACH,CAAC;IACD,OAAO,OAAO,CAAC;AAChB,CAAC;AAED,SAAS,sBAAsB,CAAC,SAA4B;IAC3D,MAAM,UAAU,GAAG,SAAS,CAAC,IAAI,KAAK,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC;IACzD,MAAM,KAAK,GAAG,SAAS,CAAC,MAAM,CAAC,CAAC,CAAC,SAAS,CAAC,QAAQ,CAAC,CAAC,CAAC,SAAS,CAAC,QAAQ,CAAC;IACzE,MAAM,eAAe,GAAG,SAAS,CAAC,MAAM,CAAC,CAAC,CAAC,SAAS,CAAC,mBAAmB,CAAC,CAAC,CAAC,SAAS,CAAC,mBAAmB,CAAC;IAEzG,OAAO,IAAI,CAAA;;;WAGD,UAAU;;WAEV,KAAK;uBACO,eAAe;gBACtB,SAAS,CAAC,QAAQ;aACrB,SAAS,CAAC,aAAa;iBACnB,CAAC,CAAQ,EAAE,EAAE,CAAC,CAAC,CAAC,cAAc,EAAE;;;EAG/C,CAAC;AACH,CAAC;AAED,MAAM,UAAU,qBAAqB,CAAC,SAA4B;IACjE,OAAO,IAAI,CAAA;;yCAE6B,SAAS,CAAC,MAAM,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,EAAE;SACnE,SAAS,CAAC,OAAO,IAAI,OAAO;WAC1B,SAAS,CAAC,MAAM,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,MAAM;aACpC,SAAS,CAAC,KAAK;kBACV,SAAS,CAAC,WAAW,IAAI,OAAO;gBAClC,SAAS,CAAC,QAAQ;gBAClB,SAAS,CAAC,QAAQ;gBAClB,SAAS,CAAC,QAAQ;WACvB,SAAS,CAAC,IAAI,IAAI,OAAO;mBACjB,SAAS,CAAC,YAAY,IAAI,OAAO;iBACnC,SAAS,CAAC,eAAe,IAAI,OAAO;uBAC9B,SAAS,CAAC,eAAe,IAAI,OAAO;mBACxC,SAAS,CAAC,OAAO,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO;aAC1C,SAAS,CAAC,YAAY;cACrB,SAAS,CAAC,aAAa;;;KAGhC,oBAAoB,CAAC,SAAS,CAAC;KAC/B,sBAAsB,CAAC,SAAS,CAAC;;EAEpC,CAAC;AACH,CAAC"}

package/dist/components/inputs/radio-button/radio-button.d.ts

@@ -0,0 +1,40 @@
+/**
+ * Nederlandse Digitale Dienst Radio Button Component (Lit + TypeScript)
+ *
+ * WAI-ARIA: Wrap radio buttons in a <fieldset>/<legend> or a container with
+ * role="radiogroup" and aria-labelledby for proper group semantics.
+ *
+ * @example
+ * <fieldset>
+ *   <legend>Kies een optie</legend>
+ *   <nldd-radio-button name="options" value="1">Optie 1</nldd-radio-button>
+ *   <nldd-radio-button name="options" value="2">Optie 2</nldd-radio-button>
+ * </fieldset>
+ *
+ * @element nldd-radio-button
+ * @attr {boolean} checked  - Checked state
+ * @attr {boolean} disabled - Disabled state
+ * @attr {string}  accessible-label - Accessible label forwarded as aria-label to the native input.
+ *   Note: aria-labelledby is not supported as IDREF resolution cannot cross shadow DOM boundaries.
+ *
+ * @fires change - When checked state changes; detail: { checked: boolean, value: string, name: string }
+ */
+import { LitElement } from 'lit';
+export declare class NLDDRadioButton extends LitElement {
+    static styles: import("lit").CSSResult;
+    checked: boolean;
+    disabled: boolean;
+    required: boolean;
+    name: string;
+    value: string;
+    accessibleLabel: string;
+    select(): void;
+    _handleChange(e: Event): void;
+    render(): import("lit-html").TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'nldd-radio-button': NLDDRadioButton;
+    }
+}
+//# sourceMappingURL=radio-button.d.ts.map

package/dist/components/inputs/radio-button/radio-button.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"radio-button.d.ts","sourceRoot":"","sources":["../../../../src/components/inputs/radio-button/radio-button.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,OAAO,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AAKjC,qBACa,eAAgB,SAAQ,UAAU;IAC9C,OAAgB,MAAM,0BAAqB;IAG3C,OAAO,UAAS;IAGhB,QAAQ,UAAS;IAGjB,QAAQ,UAAS;IAGjB,IAAI,SAAM;IAGV,KAAK,SAAM;IAGX,eAAe,SAAM;IAEd,MAAM,IAAI,IAAI;IAQd,aAAa,CAAC,CAAC,EAAE,KAAK,GAAG,IAAI;IAU3B,MAAM;CAGf;AAED,OAAO,CAAC,MAAM,CAAC;IACd,UAAU,qBAAqB;QAC9B,mBAAmB,EAAE,eAAe,CAAC;KACrC;CACD"}

package/dist/components/inputs/radio-button/radio-button.js

@@ -0,0 +1,87 @@
+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 Radio Button Component (Lit + TypeScript)
+ *
+ * WAI-ARIA: Wrap radio buttons in a <fieldset>/<legend> or a container with
+ * role="radiogroup" and aria-labelledby for proper group semantics.
+ *
+ * @example
+ * <fieldset>
+ *   <legend>Kies een optie</legend>
+ *   <nldd-radio-button name="options" value="1">Optie 1</nldd-radio-button>
+ *   <nldd-radio-button name="options" value="2">Optie 2</nldd-radio-button>
+ * </fieldset>
+ *
+ * @element nldd-radio-button
+ * @attr {boolean} checked  - Checked state
+ * @attr {boolean} disabled - Disabled state
+ * @attr {string}  accessible-label - Accessible label forwarded as aria-label to the native input.
+ *   Note: aria-labelledby is not supported as IDREF resolution cannot cross shadow DOM boundaries.
+ *
+ * @fires change - When checked state changes; detail: { checked: boolean, value: string, name: string }
+ */
+import { LitElement } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import { radioButtonStyles } from './radio-button.styles.js';
+import { radioButtonTemplate } from './radio-button.template.js';
+let NLDDRadioButton = class NLDDRadioButton extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.checked = false;
+        this.disabled = false;
+        this.required = false;
+        this.name = '';
+        this.value = '';
+        this.accessibleLabel = '';
+    }
+    select() {
+        if (this.disabled || this.checked)
+            return;
+        const input = this.shadowRoot?.querySelector('input');
+        if (!input)
+            return;
+        input.checked = true;
+        input.dispatchEvent(new Event('change', { bubbles: true }));
+    }
+    _handleChange(e) {
+        const input = e.target;
+        this.checked = input.checked;
+        this.dispatchEvent(new CustomEvent('change', {
+            detail: { checked: this.checked, value: this.value, name: this.name },
+            bubbles: true,
+            composed: true,
+        }));
+    }
+    render() {
+        return radioButtonTemplate(this);
+    }
+};
+NLDDRadioButton.styles = radioButtonStyles;
+__decorate([
+    property({ type: Boolean, reflect: true })
+], NLDDRadioButton.prototype, "checked", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], NLDDRadioButton.prototype, "disabled", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], NLDDRadioButton.prototype, "required", void 0);
+__decorate([
+    property({ type: String })
+], NLDDRadioButton.prototype, "name", void 0);
+__decorate([
+    property({ type: String })
+], NLDDRadioButton.prototype, "value", void 0);
+__decorate([
+    property({ type: String, attribute: 'accessible-label' })
+], NLDDRadioButton.prototype, "accessibleLabel", void 0);
+NLDDRadioButton = __decorate([
+    customElement('nldd-radio-button')
+], NLDDRadioButton);
+export { NLDDRadioButton };
+//# sourceMappingURL=radio-button.js.map

package/dist/components/inputs/radio-button/radio-button.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"radio-button.js","sourceRoot":"","sources":["../../../../src/components/inputs/radio-button/radio-button.ts"],"names":[],"mappings":";;;;;;AAAA;;;;;;;;;;;;;;;;;;;;GAoBG;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;AAG1D,IAAM,eAAe,GAArB,MAAM,eAAgB,SAAQ,UAAU;IAAxC;;QAIN,YAAO,GAAG,KAAK,CAAC;QAGhB,aAAQ,GAAG,KAAK,CAAC;QAGjB,aAAQ,GAAG,KAAK,CAAC;QAGjB,SAAI,GAAG,EAAE,CAAC;QAGV,UAAK,GAAG,EAAE,CAAC;QAGX,oBAAe,GAAG,EAAE,CAAC;IAuBtB,CAAC;IArBO,MAAM;QACZ,IAAI,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,OAAO;YAAE,OAAO;QAC1C,MAAM,KAAK,GAAG,IAAI,CAAC,UAAU,EAAE,aAAa,CAAC,OAAO,CAA4B,CAAC;QACjF,IAAI,CAAC,KAAK;YAAE,OAAO;QACnB,KAAK,CAAC,OAAO,GAAG,IAAI,CAAC;QACrB,KAAK,CAAC,aAAa,CAAC,IAAI,KAAK,CAAC,QAAQ,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC,CAAC,CAAC;IAC7D,CAAC;IAEM,aAAa,CAAC,CAAQ;QAC5B,MAAM,KAAK,GAAG,CAAC,CAAC,MAA0B,CAAC;QAC3C,IAAI,CAAC,OAAO,GAAG,KAAK,CAAC,OAAO,CAAC;QAC7B,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,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE;YACrE,OAAO,EAAE,IAAI;YACb,QAAQ,EAAE,IAAI;SACd,CAAC,CAAC,CAAC;IACL,CAAC;IAEQ,MAAM;QACd,OAAO,mBAAmB,CAAC,IAAI,CAAC,CAAC;IAClC,CAAC;;AAxCe,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,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;iDAC1B;AAGjB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;6CACjB;AAGV;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;8CAChB;AAGX;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,SAAS,EAAE,kBAAkB,EAAE,CAAC;wDACrC;AAnBT,eAAe;IAD3B,aAAa,CAAC,mBAAmB,CAAC;GACtB,eAAe,CA0C3B"}

package/dist/components/inputs/radio-button/radio-button.styles.d.ts

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

package/dist/components/inputs/radio-button/radio-button.styles.d.ts.map

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

package/dist/components/inputs/radio-button/radio-button.styles.js

@@ -0,0 +1,122 @@
+import { css } from 'lit';
+export const radioButtonStyles = css `
+
+
+	/* # Host */
+
+	:host {
+		display: inline-flex;
+		align-items: center;
+		justify-content: center;
+		position: relative;
+		width: var(--semantics-controls-xs-min-size);
+		height: var(--semantics-controls-xs-min-size);
+		-webkit-tap-highlight-color: transparent;
+	}
+
+	:host([hidden]) {
+		display: none;
+	}
+
+
+	/* # Native input */
+
+	.radio-button__input {
+		position: absolute;
+		inset: 0;
+		width: 100%;
+		height: 100%;
+		margin: 0;
+		opacity: 0;
+		z-index: 1;
+	}
+
+
+	/* # Outer shape */
+
+	.radio-button__outer-shape {
+		position: relative;
+		box-sizing: border-box;
+		width: var(--semantics-controls-xs-min-size);
+		height: var(--semantics-controls-xs-min-size);
+		border-radius: 50%;
+		border: var(--components-radio-button-border-thickness) solid var(--components-radio-button-border-color);
+		background-color: var(--components-radio-button-background-color);
+	}
+
+
+	/* # Inner shape */
+
+	.radio-button__inner-shape {
+		position: absolute;
+		top: 50%;
+		left: 50%;
+		transform: translate(-50%, -50%) scale(0);
+		width: var(--primitives-space-20);
+		height: var(--primitives-space-20);
+		border-radius: 50%;
+		border: var(--components-radio-button-is-selected-inner-shape-border-thickness) solid var(--components-radio-button-is-selected-inner-shape-border-color);
+		box-sizing: border-box;
+	}
+
+
+	/* # Selected */
+
+	.radio-button__input:checked ~ .radio-button__outer-shape {
+		border-color: var(--components-radio-button-is-selected-border-color);
+		background-color: var(--components-radio-button-is-selected-background-color);
+	}
+
+	.radio-button__input:checked ~ .radio-button__outer-shape .radio-button__inner-shape {
+		transform: translate(-50%, -50%) scale(1);
+	}
+
+
+	/* # Hover */
+
+	.radio-button__input:hover:not(:disabled) ~ .radio-button__outer-shape {
+		border-color: var(--components-radio-button-is-hovered-border-color);
+	}
+
+	.radio-button__input:checked:hover:not(:disabled) ~ .radio-button__outer-shape {
+		border-color: var(--components-radio-button-is-selected-is-hovered-border-color);
+		background-color: var(--components-radio-button-is-selected-is-hovered-background-color);
+	}
+
+	.radio-button__input:checked:hover:not(:disabled) ~ .radio-button__outer-shape .radio-button__inner-shape {
+		border-color: var(--components-radio-button-is-selected-is-hovered-inner-shape-border-color);
+	}
+
+
+	/* # Active */
+
+	.radio-button__input:active:not(:disabled) ~ .radio-button__outer-shape {
+		border-color: var(--components-radio-button-is-active-border-color);
+	}
+
+	.radio-button__input:checked:active:not(:disabled) ~ .radio-button__outer-shape {
+		border-color: var(--components-radio-button-is-selected-is-active-border-color);
+		background-color: var(--components-radio-button-is-selected-is-active-background-color);
+	}
+
+	.radio-button__input:checked:active:not(:disabled) ~ .radio-button__outer-shape .radio-button__inner-shape {
+		border-color: var(--components-radio-button-is-selected-is-active-inner-shape-border-color);
+	}
+
+
+	/* # Focus */
+
+	.radio-button__input:focus-visible ~ .radio-button__outer-shape {
+		outline: var(--semantics-focus-ring-outline);
+		outline-offset: var(--semantics-focus-ring-outline-offset);
+		box-shadow: var(--semantics-focus-ring-box-shadow);
+	}
+
+
+	/* # Disabled */
+
+	.radio-button__input:disabled ~ .radio-button__outer-shape {
+		opacity: var(--primitives-opacity-disabled);
+	}
+`;
+//# sourceMappingURL=radio-button.styles.js.map

package/dist/components/inputs/radio-button/radio-button.styles.js.map

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

package/dist/components/inputs/radio-button/radio-button.template.d.ts

@@ -0,0 +1,4 @@
+import { TemplateResult } from 'lit';
+import type { NLDDRadioButton } from './radio-button.js';
+export declare function radioButtonTemplate(component: NLDDRadioButton): TemplateResult;
+//# sourceMappingURL=radio-button.template.d.ts.map

package/dist/components/inputs/radio-button/radio-button.template.d.ts.map

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

package/dist/components/inputs/radio-button/radio-button.template.js

@@ -0,0 +1,19 @@
+import { html, nothing } from 'lit';
+export function radioButtonTemplate(component) {
+    return html `
+		<input class="radio-button__input"
+			type="radio"
+			.checked=${component.checked}
+			?disabled=${component.disabled}
+			?required=${component.required}
+			name=${component.name || ''}
+			value=${component.value}
+			aria-label=${component.accessibleLabel || nothing}
+			@change=${component._handleChange}
+		>
+		<div class="radio-button__outer-shape" aria-hidden="true">
+			<div class="radio-button__inner-shape"></div>
+		</div>
+	`;
+}
+//# sourceMappingURL=radio-button.template.js.map

package/dist/components/inputs/radio-button/radio-button.template.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"radio-button.template.js","sourceRoot":"","sources":["../../../../src/components/inputs/radio-button/radio-button.template.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,OAAO,EAAkB,MAAM,KAAK,CAAC;AAGpD,MAAM,UAAU,mBAAmB,CAAC,SAA0B;IAC7D,OAAO,IAAI,CAAA;;;cAGE,SAAS,CAAC,OAAO;eAChB,SAAS,CAAC,QAAQ;eAClB,SAAS,CAAC,QAAQ;UACvB,SAAS,CAAC,IAAI,IAAI,EAAE;WACnB,SAAS,CAAC,KAAK;gBACV,SAAS,CAAC,eAAe,IAAI,OAAO;aACvC,SAAS,CAAC,aAAa;;;;;EAKlC,CAAC;AACH,CAAC"}

package/dist/components/inputs/radio-button-field/radio-button-field.d.ts

@@ -0,0 +1,34 @@
+/**
+ * Nederlandse Digitale Dienst Radio Button Field Component (Lit + TypeScript)
+ *
+ * A radio button with an inline label. Use inside nldd-radio-button-group
+ * for keyboard navigation and group semantics. The group sets the name.
+ *
+ * @element nldd-radio-button-field
+ * @attr {boolean} checked  - Checked state
+ * @attr {boolean} disabled - Disabled state
+ * @attr {string}  value    - Value for form submission
+ * @attr {string}  label    - Label text for the radio button
+ *
+ * @fires change - When checked state changes; detail: { checked: boolean, value: string }
+ */
+import { LitElement } from 'lit';
+export declare class NLDDRadioButtonField extends LitElement {
+    static styles: import("lit").CSSResult;
+    checked: boolean;
+    disabled: boolean;
+    value: string;
+    /** Set by nldd-radio-button-group. Not part of the public API. */
+    name: string;
+    required: boolean;
+    label: string;
+    _handleLabelClick(e: Event): void;
+    _handleChange(e: Event): void;
+    render(): import("lit-html").TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'nldd-radio-button-field': NLDDRadioButtonField;
+    }
+}
+//# sourceMappingURL=radio-button-field.d.ts.map

package/dist/components/inputs/radio-button-field/radio-button-field.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"radio-button-field.d.ts","sourceRoot":"","sources":["../../../../src/components/inputs/radio-button-field/radio-button-field.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;GAaG;AACH,OAAO,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AAMjC,qBACa,oBAAqB,SAAQ,UAAU;IACnD,OAAgB,MAAM,0BAA0B;IAGhD,OAAO,UAAS;IAGhB,QAAQ,UAAS;IAGjB,KAAK,SAAM;IAEX,kEAAkE;IAElE,IAAI,SAAM;IAGV,QAAQ,UAAS;IAGjB,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,yBAAyB,EAAE,oBAAoB,CAAC;KAChD;CACD"}