@nldd/design-system 0.8.37

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

@@ -0,0 +1,184 @@
+import { css } from 'lit';
+export const textFieldStyles = css `
+
+
+	/* # Host */
+
+	:host {
+		display: block;
+		--_background-color: var(--semantics-input-fields-background-color);
+		-webkit-tap-highlight-color: transparent;
+	}
+
+	:host([hidden]) {
+		display: none;
+	}
+
+
+	/* # Block */
+
+	.text-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']) .text-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']) .text-field,
+	:host(:not([size])) .text-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]) .text-field {
+		border-color: var(--semantics-input-fields-is-valid-border-color);
+	}
+
+	:host([invalid]) .text-field {
+		border-color: var(--semantics-input-fields-is-invalid-border-color);
+	}
+
+	:host([readonly]) .text-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]) .text-field {
+		opacity: var(--primitives-opacity-disabled);
+	}
+
+	.text-field:has(input:-webkit-autofill),
+	.text-field:has(input:autofill) {
+		--_background-color: var(--semantics-input-fields-is-autofill-background-color);
+	}
+
+	.text-field:focus-within {
+		outline: var(--semantics-focus-ring-outline);
+		outline-offset: var(--semantics-focus-ring-outline-offset);
+		box-shadow: var(--semantics-focus-ring-box-shadow);
+	}
+
+
+	/* # Input */
+
+	.text-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']) .text-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']) .text-field__input,
+	:host(:not([size])) .text-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([disabled]) .text-field__input {
+		pointer-events: none;
+	}
+
+	.text-field__input::placeholder {
+		color: var(--semantics-input-fields-placeholder-color);
+	}
+
+	.text-field__input:-webkit-autofill,
+	.text-field__input:autofill {
+		box-shadow: 0 0 0 999px var(--_background-color) inset;
+	}
+
+
+	/* # Input fade */
+
+	.text-field__input-fade {
+		position: relative;
+		flex-shrink: 0;
+		align-self: stretch;
+		width: 0;
+	}
+
+	.text-field__input-fade::after {
+		content: '';
+		position: absolute;
+		top: 0;
+		bottom: 0;
+		right: 0;
+		width: var(--primitives-space-8);
+		background: linear-gradient(90deg, color-mix(in oklch, var(--_background-color) 0%, transparent) 0%, var(--_background-color) 100%);
+		pointer-events: none;
+	}
+
+	:host([size='sm']) .text-field__input-fade::after {
+		border-radius: var(--semantics-controls-sm-corner-radius);
+	}
+
+	:host([size='md']) .text-field__input-fade::after,
+	:host(:not([size])) .text-field__input-fade::after {
+		border-radius: var(--semantics-controls-md-corner-radius);
+	}
+
+
+	/* # Validation icon area */
+
+	.text-field__validation-icon-area {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		flex-shrink: 0;
+		height: 100%;
+	}
+
+	:host([size='sm']) .text-field__validation-icon-area {
+		width: calc(var(--semantics-controls-sm-min-size) - var(--semantics-input-fields-border-thickness) * 2);
+	}
+
+	:host([size='md']) .text-field__validation-icon-area,
+	:host(:not([size])) .text-field__validation-icon-area {
+		width: calc(var(--semantics-controls-md-min-size) - var(--semantics-input-fields-border-thickness) * 2);
+	}
+
+	:host([valid]) .text-field__validation-icon-area {
+		color: var(--semantics-input-fields-is-valid-icon-color);
+	}
+
+	:host([invalid]) .text-field__validation-icon-area {
+		color: var(--semantics-input-fields-is-invalid-icon-color);
+	}
+
+
+	/* # Validation icon */
+
+	:host([size='sm']) .text-field__validation-icon {
+		width: var(--semantics-input-fields-sm-validation-icon-size);
+		height: var(--semantics-input-fields-sm-validation-icon-size);
+	}
+
+	:host([size='md']) .text-field__validation-icon,
+	:host(:not([size])) .text-field__validation-icon {
+		width: var(--semantics-input-fields-md-validation-icon-size);
+		height: var(--semantics-input-fields-md-validation-icon-size);
+	}
+`;
+//# sourceMappingURL=text-field.styles.js.map

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

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

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"text-field.template.d.ts","sourceRoot":"","sources":["../../../../src/components/inputs/text-field/text-field.template.ts"],"names":[],"mappings":"AAAA,OAAO,EAAiB,cAAc,EAAE,MAAM,KAAK,CAAC;AACpD,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AACrD,OAAO,8BAA8B,CAAC;AA0BtC,wBAAgB,iBAAiB,CAAC,SAAS,EAAE,aAAa,GAAG,cAAc,CAuB1E"}

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

@@ -0,0 +1,50 @@
+import { html, nothing } from 'lit';
+import './../../content/icon/icon.js';
+function renderValidationIcon(component) {
+    if (component.invalid) {
+        return html `
+			<div class="text-field__validation-icon-area">
+				<nldd-icon class="text-field__validation-icon"
+					name="invalid"
+					aria-hidden="true"
+				></nldd-icon>
+			</div>
+		`;
+    }
+    if (component.valid) {
+        return html `
+			<div class="text-field__validation-icon-area">
+				<nldd-icon class="text-field__validation-icon"
+					name="valid"
+					aria-hidden="true"
+				></nldd-icon>
+			</div>
+		`;
+    }
+    return nothing;
+}
+export function textFieldTemplate(component) {
+    return html `
+		<div class="text-field">
+			<input class="text-field__input"
+				id=${component.inputId || nothing}
+				type=${component.type}
+				.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="text-field__input-fade"></div>
+			${renderValidationIcon(component)}
+		</div>
+	`;
+}
+//# sourceMappingURL=text-field.template.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"text-field.template.js","sourceRoot":"","sources":["../../../../src/components/inputs/text-field/text-field.template.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,OAAO,EAAkB,MAAM,KAAK,CAAC;AAEpD,OAAO,8BAA8B,CAAC;AAEtC,SAAS,oBAAoB,CAAC,SAAwB;IACrD,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,MAAM,UAAU,iBAAiB,CAAC,SAAwB;IACzD,OAAO,IAAI,CAAA;;;SAGH,SAAS,CAAC,OAAO,IAAI,OAAO;WAC1B,SAAS,CAAC,IAAI;aACZ,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;;EAElC,CAAC;AACH,CAAC"}

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

@@ -0,0 +1,60 @@
+/**
+ * Nederlandse Digitale Dienst Toggle Button Component (Lit + TypeScript)
+ *
+ * A selectable button that toggles between selected and unselected.
+ * Available as a button (aria-pressed), checkbox, or radio input.
+ *
+ * @element nldd-toggle-button
+ *
+ * @attr {'button' | 'checkbox' | 'radio'} type - Underlying element (default: 'button')
+ * @attr {'xs' | 'sm' | 'md'}              size - Button size (default: 'md')
+ * @attr {boolean}                         selected         - Selected state
+ * @attr {boolean}                         disabled         - Disabled state
+ * @attr {string}                          value            - Value for form submission (checkbox/radio)
+ * @attr {string}                          name             - Name for form submission (checkbox/radio)
+ * @attr {string}                          text             - Button text
+ * @attr {string}                          icon             - Icon name for nldd-icon
+ * @attr {string}                          accessible-label - Accessible label; required for icon-only usage
+ *
+ * @slot icon - Slot for a custom icon (e.g. custom SVG). Only used when icon attribute is not set.
+ *
+ * @fires change - When selection changes; detail: { selected: boolean, value: string }
+ */
+import { LitElement } from 'lit';
+import './../../content/icon/icon.js';
+export type ToggleButtonType = 'button' | 'checkbox' | 'radio';
+export type ToggleButtonSize = 'xs' | 'sm' | 'md';
+export declare class NLDDToggleButton extends LitElement {
+    static styles: import("lit").CSSResult;
+    type: ToggleButtonType;
+    size: ToggleButtonSize;
+    selected: boolean;
+    disabled: boolean;
+    value: string;
+    name: string;
+    /** Button text. */
+    text: string;
+    /** Icon name for the nldd-icon element. When not set, the icon slot is used. */
+    icon: string;
+    accessibleLabel: string;
+    /** Whether an icon is present via attribute or slot. */
+    private get _hasIcon();
+    private _warnedA11y;
+    updated(): void;
+    _handleButtonClick(): void;
+    _handleInputChange(e: Event): void;
+    private _toggle;
+    private _dispatchChange;
+    /**
+     * Toggle selected state programmatically.
+     * For type="radio", the button can only be selected, never deselected (native behavior).
+     */
+    toggle(): void;
+    render(): import("lit-html").TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'nldd-toggle-button': NLDDToggleButton;
+    }
+}
+//# sourceMappingURL=toggle-button.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"toggle-button.d.ts","sourceRoot":"","sources":["../../../../src/components/inputs/toggle-button/toggle-button.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;GAqBG;AAEH,OAAO,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AAIjC,OAAO,8BAA8B,CAAC;AAEtC,MAAM,MAAM,gBAAgB,GAAG,QAAQ,GAAG,UAAU,GAAG,OAAO,CAAC;AAC/D,MAAM,MAAM,gBAAgB,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAElD,qBACa,gBAAiB,SAAQ,UAAU;IAC/C,OAAgB,MAAM,0BAAsB;IAG5C,IAAI,EAAE,gBAAgB,CAAY;IAGlC,IAAI,EAAE,gBAAgB,CAAQ;IAG9B,QAAQ,UAAS;IAGjB,QAAQ,UAAS;IAGjB,KAAK,SAAQ;IAGb,IAAI,SAAM;IAEV,mBAAmB;IAEnB,IAAI,SAAM;IAEV,gFAAgF;IAEhF,IAAI,SAAM;IAGV,eAAe,SAAM;IAErB,wDAAwD;IACxD,OAAO,KAAK,QAAQ,GAInB;IAED,OAAO,CAAC,WAAW,CAAS;IAEnB,OAAO,IAAI,IAAI;IAYxB,kBAAkB,IAAI,IAAI;IAK1B,kBAAkB,CAAC,CAAC,EAAE,KAAK,GAAG,IAAI;IAMlC,OAAO,CAAC,OAAO;IAKf,OAAO,CAAC,eAAe;IAQvB;;;OAGG;IACH,MAAM,IAAI,IAAI;IAML,MAAM;CAGf;AAED,OAAO,CAAC,MAAM,CAAC;IACd,UAAU,qBAAqB;QAC9B,oBAAoB,EAAE,gBAAgB,CAAC;KACvC;CACD"}

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

@@ -0,0 +1,137 @@
+/**
+ * Nederlandse Digitale Dienst Toggle Button Component (Lit + TypeScript)
+ *
+ * A selectable button that toggles between selected and unselected.
+ * Available as a button (aria-pressed), checkbox, or radio input.
+ *
+ * @element nldd-toggle-button
+ *
+ * @attr {'button' | 'checkbox' | 'radio'} type - Underlying element (default: 'button')
+ * @attr {'xs' | 'sm' | 'md'}              size - Button size (default: 'md')
+ * @attr {boolean}                         selected         - Selected state
+ * @attr {boolean}                         disabled         - Disabled state
+ * @attr {string}                          value            - Value for form submission (checkbox/radio)
+ * @attr {string}                          name             - Name for form submission (checkbox/radio)
+ * @attr {string}                          text             - Button text
+ * @attr {string}                          icon             - Icon name for nldd-icon
+ * @attr {string}                          accessible-label - Accessible label; required for icon-only usage
+ *
+ * @slot icon - Slot for a custom icon (e.g. custom SVG). Only used when icon attribute is not set.
+ *
+ * @fires change - When selection changes; detail: { selected: boolean, value: string }
+ */
+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;
+};
+import { LitElement } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import { toggleButtonStyles } from './toggle-button.styles.js';
+import { toggleButtonTemplate } from './toggle-button.template.js';
+import './../../content/icon/icon.js';
+let NLDDToggleButton = class NLDDToggleButton extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.type = 'button';
+        this.size = 'md';
+        this.selected = false;
+        this.disabled = false;
+        this.value = 'on';
+        this.name = '';
+        /** Button text. */
+        this.text = '';
+        /** Icon name for the nldd-icon element. When not set, the icon slot is used. */
+        this.icon = '';
+        this.accessibleLabel = '';
+        this._warnedA11y = false;
+    }
+    /** Whether an icon is present via attribute or slot. */
+    get _hasIcon() {
+        if (this.icon)
+            return true;
+        const slot = this.shadowRoot?.querySelector('slot[name="icon"]');
+        return (slot?.assignedElements().length ?? 0) > 0;
+    }
+    updated() {
+        const iconOnly = this._hasIcon && !this.text;
+        this.toggleAttribute('icon-only', iconOnly);
+        const inaccessible = iconOnly && !this.accessibleLabel;
+        if (import.meta.env?.DEV && inaccessible && !this._warnedA11y) {
+            this._warnedA11y = true;
+            console.warn('<nldd-toggle-button>: Icon-only usage requires an accessible-label attribute for accessibility.');
+        }
+        else if (!inaccessible) {
+            this._warnedA11y = false;
+        }
+    }
+    _handleButtonClick() {
+        if (this.disabled)
+            return;
+        this._toggle();
+    }
+    _handleInputChange(e) {
+        const input = e.target;
+        this.selected = input.checked;
+        this._dispatchChange();
+    }
+    _toggle() {
+        this.selected = !this.selected;
+        this._dispatchChange();
+    }
+    _dispatchChange() {
+        this.dispatchEvent(new CustomEvent('change', {
+            detail: { selected: this.selected, value: this.value },
+            bubbles: true,
+            composed: true,
+        }));
+    }
+    /**
+     * Toggle selected state programmatically.
+     * For type="radio", the button can only be selected, never deselected (native behavior).
+     */
+    toggle() {
+        if (this.disabled)
+            return;
+        if (this.type === 'radio' && this.selected)
+            return;
+        this._toggle();
+    }
+    render() {
+        return toggleButtonTemplate(this);
+    }
+};
+NLDDToggleButton.styles = toggleButtonStyles;
+__decorate([
+    property({ type: String, reflect: true })
+], NLDDToggleButton.prototype, "type", void 0);
+__decorate([
+    property({ type: String, reflect: true })
+], NLDDToggleButton.prototype, "size", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], NLDDToggleButton.prototype, "selected", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], NLDDToggleButton.prototype, "disabled", void 0);
+__decorate([
+    property({ type: String })
+], NLDDToggleButton.prototype, "value", void 0);
+__decorate([
+    property({ type: String })
+], NLDDToggleButton.prototype, "name", void 0);
+__decorate([
+    property({ type: String })
+], NLDDToggleButton.prototype, "text", void 0);
+__decorate([
+    property({ type: String })
+], NLDDToggleButton.prototype, "icon", void 0);
+__decorate([
+    property({ type: String, attribute: 'accessible-label' })
+], NLDDToggleButton.prototype, "accessibleLabel", void 0);
+NLDDToggleButton = __decorate([
+    customElement('nldd-toggle-button')
+], NLDDToggleButton);
+export { NLDDToggleButton };
+//# sourceMappingURL=toggle-button.js.map

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

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

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

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

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

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

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

@@ -0,0 +1,168 @@
+import { css } from 'lit';
+export const toggleButtonStyles = css `
+
+
+	/* # Host */
+
+	:host {
+		display: inline-block;
+		-webkit-tap-highlight-color: transparent;
+	}
+
+	:host([hidden]) {
+		display: none;
+	}
+
+	:host([disabled]) {
+		opacity: var(--primitives-opacity-disabled);
+		pointer-events: none;
+	}
+
+
+	/* # Block */
+
+	.toggle-button {
+		/* Reset */
+		appearance: none;
+		border: none;
+		margin: 0;
+		padding: 0;
+		background: none;
+		font: inherit;
+
+		/* Layout */
+		position: relative;
+		box-sizing: border-box;
+		display: inline-flex;
+		align-items: center;
+		justify-content: center;
+		white-space: nowrap;
+		text-decoration: none;
+
+		/* Appearance */
+		background-color: var(--semantics-buttons-neutral-tinted-background-color);
+		color: var(--semantics-buttons-neutral-tinted-content-color);
+	}
+
+	/* ## Sizes */
+
+	:host([size="xs"]) .toggle-button {
+		min-height: var(--semantics-controls-xs-min-size);
+		padding: var(--semantics-controls-xs-block-padding) var(--semantics-controls-xs-inline-padding);
+		font: var(--semantics-buttons-xs-font);
+		border-radius: var(--semantics-controls-xs-corner-radius);
+		gap: var(--semantics-buttons-xs-gap);
+	}
+
+	:host([size="sm"]) .toggle-button {
+		min-height: var(--semantics-controls-sm-min-size);
+		padding: var(--semantics-controls-sm-block-padding) var(--semantics-controls-sm-inline-padding);
+		font: var(--semantics-buttons-sm-font);
+		border-radius: var(--semantics-controls-sm-corner-radius);
+		gap: var(--semantics-buttons-sm-gap);
+	}
+
+	:host([size="md"]) .toggle-button,
+	:host(:not([size])) .toggle-button {
+		min-height: var(--semantics-controls-md-min-size);
+		padding: var(--semantics-controls-md-block-padding) var(--semantics-controls-md-inline-padding);
+		font: var(--semantics-buttons-md-font);
+		border-radius: var(--semantics-controls-md-corner-radius);
+		gap: var(--semantics-buttons-md-gap);
+	}
+
+	/* ## Icon-only sizes */
+
+	:host([icon-only][size="xs"]) .toggle-button {
+		width: var(--semantics-controls-xs-min-size);
+		padding: 0;
+	}
+
+	:host([icon-only][size="sm"]) .toggle-button {
+		width: var(--semantics-controls-sm-min-size);
+		padding: 0;
+	}
+
+	:host([icon-only][size="md"]) .toggle-button,
+	:host([icon-only]:not([size])) .toggle-button {
+		width: var(--semantics-controls-md-min-size);
+		padding: 0;
+	}
+
+	/* ## Hover */
+
+	.toggle-button:hover,
+	.toggle-button:has(.toggle-button__input:hover) {
+		background-color: var(--semantics-buttons-neutral-tinted-is-hovered-background-color);
+		color: var(--semantics-buttons-neutral-tinted-is-hovered-content-color);
+	}
+
+	/* ## Selected */
+
+	:host([selected]) .toggle-button {
+		background-color: var(--semantics-buttons-neutral-tinted-is-selected-background-color);
+		color: var(--semantics-buttons-neutral-tinted-is-selected-content-color);
+	}
+
+	:host([selected]) .toggle-button:hover,
+	:host([selected]) .toggle-button:has(.toggle-button__input:hover) {
+		background-color: var(--semantics-buttons-neutral-tinted-is-selected-is-hovered-background-color);
+		color: var(--semantics-buttons-neutral-tinted-is-selected-is-hovered-content-color);
+	}
+
+	/* ## Focus */
+
+	.toggle-button:focus-visible,
+	.toggle-button:has(.toggle-button__input:focus-visible) {
+		outline: var(--semantics-focus-ring-outline);
+		outline-offset: var(--semantics-focus-ring-outline-offset);
+		box-shadow: var(--semantics-focus-ring-box-shadow);
+	}
+
+	.toggle-button:focus:not(:focus-visible) {
+		outline: none;
+	}
+
+
+	/* # Icon */
+
+	/* Hide the original nldd-icon in the slot — it is re-rendered in the shadow DOM */
+	::slotted(nldd-icon) {
+		display: none;
+	}
+
+	.toggle-button__icon {
+		display: block;
+		flex-shrink: 0;
+	}
+
+	:host([size="md"]) .toggle-button__icon,
+	:host(:not([size])) .toggle-button__icon {
+		width: var(--primitives-space-20);
+		height: var(--primitives-space-20);
+	}
+
+	:host([size="sm"]) .toggle-button__icon {
+		width: var(--primitives-space-18);
+		height: var(--primitives-space-18);
+	}
+
+	:host([size="xs"]) .toggle-button__icon {
+		width: var(--primitives-space-16);
+		height: var(--primitives-space-16);
+	}
+
+
+	/* # Input */
+
+	.toggle-button__input {
+		position: absolute;
+		inset: 0;
+		width: 100%;
+		height: 100%;
+		margin: 0;
+		opacity: 0;
+		z-index: 1;
+	}
+`;
+//# sourceMappingURL=toggle-button.styles.js.map

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

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

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

@@ -0,0 +1,5 @@
+import { TemplateResult } from 'lit';
+import type { NLDDToggleButton } from './toggle-button.js';
+import '../../content/tooltip/tooltip.js';
+export declare function toggleButtonTemplate(component: NLDDToggleButton): TemplateResult;
+//# sourceMappingURL=toggle-button.template.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"toggle-button.template.d.ts","sourceRoot":"","sources":["../../../../src/components/inputs/toggle-button/toggle-button.template.ts"],"names":[],"mappings":"AAAA,OAAO,EAAiB,cAAc,EAAE,MAAM,KAAK,CAAC;AACpD,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AAC3D,OAAO,kCAAkC,CAAC;AAG1C,wBAAgB,oBAAoB,CAAC,SAAS,EAAE,gBAAgB,GAAG,cAAc,CAoDhF"}