@nldd/design-system 0.8.37

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

@@ -0,0 +1,52 @@
+import { html, nothing } from 'lit';
+import '../../content/tooltip/tooltip.js';
+export function toggleButtonTemplate(component) {
+    const label = component.accessibleLabel || nothing;
+    const iconOnly = !!component.icon && !component.text;
+    const tooltipText = iconOnly ? (component.accessibleLabel || component.text) : '';
+    const icon = component.icon
+        ? html `<nldd-icon class="toggle-button__icon" name=${component.icon}></nldd-icon>`
+        : html `<slot name="icon" @slotchange=${component.requestUpdate}></slot>`;
+    const textContent = component.text
+        ? html `<span class="toggle-button__text">${component.text}</span>`
+        : nothing;
+    let result;
+    if (component.type === 'checkbox' || component.type === 'radio') {
+        result = html `
+			<label class="toggle-button">
+				<input
+					class="toggle-button__input"
+					type=${component.type}
+					.checked=${component.selected}
+					?disabled=${component.disabled}
+					name=${component.name || nothing}
+					value=${component.value}
+					aria-label=${label}
+					@change=${component._handleInputChange}
+				>
+				${icon}
+				${textContent}
+			</label>
+		`;
+    }
+    else {
+        result = html `
+			<button
+				class="toggle-button"
+				type="button"
+				aria-pressed=${component.selected}
+				?disabled=${component.disabled}
+				aria-label=${label}
+				@click=${component._handleButtonClick}
+			>
+				${icon}
+				${textContent}
+			</button>
+		`;
+    }
+    if (tooltipText) {
+        return html `<nldd-tooltip text=${tooltipText}>${result}</nldd-tooltip>`;
+    }
+    return result;
+}
+//# sourceMappingURL=toggle-button.template.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"toggle-button.template.js","sourceRoot":"","sources":["../../../../src/components/inputs/toggle-button/toggle-button.template.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,OAAO,EAAkB,MAAM,KAAK,CAAC;AAEpD,OAAO,kCAAkC,CAAC;AAG1C,MAAM,UAAU,oBAAoB,CAAC,SAA2B;IAC/D,MAAM,KAAK,GAAG,SAAS,CAAC,eAAe,IAAI,OAAO,CAAC;IACnD,MAAM,QAAQ,GAAG,CAAC,CAAC,SAAS,CAAC,IAAI,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC;IACrD,MAAM,WAAW,GAAG,QAAQ,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC,eAAe,IAAI,SAAS,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC;IAElF,MAAM,IAAI,GAAG,SAAS,CAAC,IAAI;QAC1B,CAAC,CAAC,IAAI,CAAA,+CAA+C,SAAS,CAAC,IAAI,eAAe;QAClF,CAAC,CAAC,IAAI,CAAA,iCAAiC,SAAS,CAAC,aAAa,UAAU,CAAC;IAE1E,MAAM,WAAW,GAAG,SAAS,CAAC,IAAI;QACjC,CAAC,CAAC,IAAI,CAAA,qCAAqC,SAAS,CAAC,IAAI,SAAS;QAClE,CAAC,CAAC,OAAO,CAAC;IAEX,IAAI,MAAsB,CAAC;IAE3B,IAAI,SAAS,CAAC,IAAI,KAAK,UAAU,IAAI,SAAS,CAAC,IAAI,KAAK,OAAO,EAAE,CAAC;QACjE,MAAM,GAAG,IAAI,CAAA;;;;YAIH,SAAS,CAAC,IAAI;gBACV,SAAS,CAAC,QAAQ;iBACjB,SAAS,CAAC,QAAQ;YACvB,SAAS,CAAC,IAAI,IAAI,OAAO;aACxB,SAAS,CAAC,KAAK;kBACV,KAAK;eACR,SAAS,CAAC,kBAAkB;;MAErC,IAAI;MACJ,WAAW;;GAEd,CAAC;IACH,CAAC;SAAM,CAAC;QACP,MAAM,GAAG,IAAI,CAAA;;;;mBAII,SAAS,CAAC,QAAQ;gBACrB,SAAS,CAAC,QAAQ;iBACjB,KAAK;aACT,SAAS,CAAC,kBAAkB;;MAEnC,IAAI;MACJ,WAAW;;GAEd,CAAC;IACH,CAAC;IAED,IAAI,WAAW,EAAE,CAAC;QACjB,OAAO,IAAI,CAAA,sBAAsB,WAAW,IAAI,MAAM,iBAAiB,CAAC;IACzE,CAAC;IACD,OAAO,MAAM,CAAC;AACf,CAAC"}

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

@@ -0,0 +1,56 @@
+/**
+ * Nederlandse Digitale Dienst Toggle Button Group Component (Lit + TypeScript)
+ *
+ * Groups nldd-toggle-button elements and manages selection, keyboard navigation,
+ * and forwarding of type, name, size, and disabled state to all buttons.
+ *
+ * For type="radio" (single-select), arrow keys navigate between buttons and
+ * automatically select the focused one.
+ * For type="checkbox" (multi-select), multiple buttons can be selected simultaneously.
+ *
+ * @element nldd-toggle-button-group
+ *
+ * @attr {'button' | 'checkbox' | 'radio'} type                  - Selection mode (default: 'checkbox')
+ * @attr {string}               name                  - Forwarded to all buttons
+ * @attr {'xs' | 'sm' | 'md'}  size                  - Forwarded to all buttons (default: 'md')
+ * @attr {boolean}              disabled              - Disables all buttons
+ * @attr {string}               accessible-label      - Accessible name for the group (aria-label)
+ * @attr {string}               accessible-labelledby - ID of an external label element (aria-labelledby)
+ *
+ * @slot - nldd-toggle-button elements
+ *
+ * @fires change - Bubbles up from the changed button; detail: { selected: boolean, value: string }
+ */
+import { LitElement } from 'lit';
+import type { ToggleButtonSize } from '../toggle-button/toggle-button.js';
+type GroupType = 'button' | 'checkbox' | 'radio';
+export declare class NLDDToggleButtonGroup extends LitElement {
+    static styles: import("lit").CSSResult;
+    type: GroupType;
+    name: string;
+    size: ToggleButtonSize;
+    disabled: boolean;
+    /** Accessible name forwarded as aria-label to the group host. */
+    accessibleLabel: string;
+    /** ID of an external label element forwarded as aria-labelledby to the group host. */
+    accessibleLabelledBy: string;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    private _syncRole;
+    firstUpdated(): void;
+    updated(changed: Map<PropertyKey, unknown>): void;
+    private _getButtons;
+    private _getEnabledButtons;
+    private _syncButtons;
+    private _handleChange;
+    private _handleKeyDown;
+    _onSlotChange: () => void;
+    render(): import("lit-html").TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'nldd-toggle-button-group': NLDDToggleButtonGroup;
+    }
+}
+export {};
+//# sourceMappingURL=toggle-button-group.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"toggle-button-group.d.ts","sourceRoot":"","sources":["../../../../src/components/inputs/toggle-button-group/toggle-button-group.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;GAsBG;AAEH,OAAO,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AAIjC,OAAO,KAAK,EAAoB,gBAAgB,EAAE,MAAM,mCAAmC,CAAC;AAE5F,KAAK,SAAS,GAAG,QAAQ,GAAG,UAAU,GAAG,OAAO,CAAC;AAEjD,qBACa,qBAAsB,SAAQ,UAAU;IACpD,OAAgB,MAAM,0BAA2B;IAGjD,IAAI,EAAE,SAAS,CAAc;IAG7B,IAAI,SAAM;IAGV,IAAI,EAAE,gBAAgB,CAAQ;IAG9B,QAAQ,UAAS;IAEjB,iEAAiE;IAEjE,eAAe,SAAM;IAErB,sFAAsF;IAEtF,oBAAoB,SAAM;IAEjB,iBAAiB,IAAI,IAAI;IAOzB,oBAAoB,IAAI,IAAI;IAMrC,OAAO,CAAC,SAAS;IAIR,YAAY,IAAI,IAAI;IAKpB,OAAO,CAAC,OAAO,EAAE,GAAG,CAAC,WAAW,EAAE,OAAO,CAAC,GAAG,IAAI;IAuB1D,OAAO,CAAC,WAAW;IAInB,OAAO,CAAC,kBAAkB;IAI1B,OAAO,CAAC,YAAY;IAsBpB,OAAO,CAAC,aAAa,CAUnB;IAEF,OAAO,CAAC,cAAc,CAgCpB;IAEK,aAAa,QAAO,IAAI,CAE7B;IAEO,MAAM;CAGf;AAED,OAAO,CAAC,MAAM,CAAC;IACd,UAAU,qBAAqB;QAC9B,0BAA0B,EAAE,qBAAqB,CAAC;KAClD;CACD"}

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

@@ -0,0 +1,187 @@
+/**
+ * Nederlandse Digitale Dienst Toggle Button Group Component (Lit + TypeScript)
+ *
+ * Groups nldd-toggle-button elements and manages selection, keyboard navigation,
+ * and forwarding of type, name, size, and disabled state to all buttons.
+ *
+ * For type="radio" (single-select), arrow keys navigate between buttons and
+ * automatically select the focused one.
+ * For type="checkbox" (multi-select), multiple buttons can be selected simultaneously.
+ *
+ * @element nldd-toggle-button-group
+ *
+ * @attr {'button' | 'checkbox' | 'radio'} type                  - Selection mode (default: 'checkbox')
+ * @attr {string}               name                  - Forwarded to all buttons
+ * @attr {'xs' | 'sm' | 'md'}  size                  - Forwarded to all buttons (default: 'md')
+ * @attr {boolean}              disabled              - Disables all buttons
+ * @attr {string}               accessible-label      - Accessible name for the group (aria-label)
+ * @attr {string}               accessible-labelledby - ID of an external label element (aria-labelledby)
+ *
+ * @slot - nldd-toggle-button elements
+ *
+ * @fires change - Bubbles up from the changed button; 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 { toggleButtonGroupStyles } from './toggle-button-group.styles.js';
+import { toggleButtonGroupTemplate } from './toggle-button-group.template.js';
+let NLDDToggleButtonGroup = class NLDDToggleButtonGroup extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.type = 'checkbox';
+        this.name = '';
+        this.size = 'md';
+        this.disabled = false;
+        /** Accessible name forwarded as aria-label to the group host. */
+        this.accessibleLabel = '';
+        /** ID of an external label element forwarded as aria-labelledby to the group host. */
+        this.accessibleLabelledBy = '';
+        this._handleChange = (e) => {
+            if (this.type !== 'radio')
+                return;
+            const changedButton = e.target;
+            if (!changedButton.selected)
+                return;
+            // Deselect all other buttons when a radio button is selected
+            this._getButtons().forEach(button => {
+                if (button !== changedButton)
+                    button.selected = false;
+            });
+        };
+        this._handleKeyDown = (e) => {
+            if (this.type !== 'radio')
+                return;
+            if (!['ArrowDown', 'ArrowUp', 'ArrowRight', 'ArrowLeft'].includes(e.key))
+                return;
+            const buttons = this._getEnabledButtons();
+            if (buttons.length === 0)
+                return;
+            const activeButton = buttons.find(b => b.selected);
+            const currentIndex = activeButton ? buttons.indexOf(activeButton) : -1;
+            const isNext = e.key === 'ArrowDown' || e.key === 'ArrowRight';
+            const nextIndex = isNext
+                ? (currentIndex + 1) % buttons.length
+                : currentIndex <= 0 ? buttons.length - 1 : currentIndex - 1;
+            const nextButton = buttons[nextIndex];
+            if (!nextButton)
+                return;
+            e.preventDefault();
+            // Directly mutate selected rather than calling toggle() to avoid triggering
+            // _handleChange which would attempt to deselect other buttons a second time.
+            if (activeButton)
+                activeButton.selected = false;
+            nextButton.selected = true;
+            const input = nextButton.shadowRoot?.querySelector('.toggle-button__input');
+            input?.focus();
+            nextButton.dispatchEvent(new CustomEvent('change', {
+                detail: { selected: true, value: nextButton.value },
+                bubbles: true,
+                composed: true,
+            }));
+        };
+        this._onSlotChange = () => {
+            this._syncButtons();
+        };
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this._syncRole();
+        this.addEventListener('change', this._handleChange);
+        this.addEventListener('keydown', this._handleKeyDown);
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        this.removeEventListener('change', this._handleChange);
+        this.removeEventListener('keydown', this._handleKeyDown);
+    }
+    _syncRole() {
+        this.setAttribute('role', this.type === 'radio' ? 'radiogroup' : 'group');
+    }
+    firstUpdated() {
+        import.meta.env?.DEV && !this.accessibleLabel && !this.accessibleLabelledBy &&
+            console.warn('<nldd-toggle-button-group>: No accessible name provided. Add an accessible-label or accessible-labelledby attribute for screen reader accessibility.');
+    }
+    updated(changed) {
+        if (changed.has('type') || changed.has('name') || changed.has('size') || changed.has('disabled')) {
+            this._syncButtons();
+        }
+        if (changed.has('type')) {
+            this._syncRole();
+        }
+        if (changed.has('accessibleLabel')) {
+            if (this.accessibleLabel) {
+                this.setAttribute('aria-label', this.accessibleLabel);
+            }
+            else {
+                this.removeAttribute('aria-label');
+            }
+        }
+        if (changed.has('accessibleLabelledBy')) {
+            if (this.accessibleLabelledBy) {
+                this.setAttribute('aria-labelledby', this.accessibleLabelledBy);
+            }
+            else {
+                this.removeAttribute('aria-labelledby');
+            }
+        }
+    }
+    _getButtons() {
+        return Array.from(this.querySelectorAll('nldd-toggle-button'));
+    }
+    _getEnabledButtons() {
+        return this._getButtons().filter(b => !b.disabled);
+    }
+    _syncButtons() {
+        this._getButtons().forEach(button => {
+            button.type = this.type;
+            button.size = this.size;
+            // name is only meaningful for checkbox and radio
+            if (this.type !== 'button') {
+                button.name = this.name;
+            }
+            if (this.disabled) {
+                if (!button.hasAttribute('disabled')) {
+                    button.setAttribute('group-disabled', '');
+                    button.disabled = true;
+                }
+            }
+            else if (button.hasAttribute('group-disabled')) {
+                button.removeAttribute('group-disabled');
+                button.disabled = false;
+            }
+        });
+    }
+    render() {
+        return toggleButtonGroupTemplate(this);
+    }
+};
+NLDDToggleButtonGroup.styles = toggleButtonGroupStyles;
+__decorate([
+    property({ type: String, reflect: true })
+], NLDDToggleButtonGroup.prototype, "type", void 0);
+__decorate([
+    property({ type: String })
+], NLDDToggleButtonGroup.prototype, "name", void 0);
+__decorate([
+    property({ type: String, reflect: true })
+], NLDDToggleButtonGroup.prototype, "size", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], NLDDToggleButtonGroup.prototype, "disabled", void 0);
+__decorate([
+    property({ type: String, attribute: 'accessible-label' })
+], NLDDToggleButtonGroup.prototype, "accessibleLabel", void 0);
+__decorate([
+    property({ type: String, attribute: 'accessible-labelledby' })
+], NLDDToggleButtonGroup.prototype, "accessibleLabelledBy", void 0);
+NLDDToggleButtonGroup = __decorate([
+    customElement('nldd-toggle-button-group')
+], NLDDToggleButtonGroup);
+export { NLDDToggleButtonGroup };
+//# sourceMappingURL=toggle-button-group.js.map

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

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

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

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

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

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

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

@@ -0,0 +1,33 @@
+import { css } from 'lit';
+export const toggleButtonGroupStyles = css `
+
+
+	/* # Host */
+
+	:host {
+		display: block;
+		isolation: isolate;
+	}
+
+	:host([hidden]) {
+		display: none;
+	}
+
+
+	/* # Block */
+
+	.toggle-button-group {
+		display: flex;
+		flex-wrap: wrap;
+		gap: var(--components-toggle-button-group-md-gap);
+	}
+
+	:host([size="sm"]) .toggle-button-group {
+		gap: var(--components-toggle-button-group-sm-gap);
+	}
+
+	:host([size="xs"]) .toggle-button-group {
+		gap: var(--components-toggle-button-group-xs-gap);
+	}
+`;
+//# sourceMappingURL=toggle-button-group.styles.js.map

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

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

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"toggle-button-group.template.d.ts","sourceRoot":"","sources":["../../../../src/components/inputs/toggle-button-group/toggle-button-group.template.ts"],"names":[],"mappings":"AAAA,OAAO,EAAQ,cAAc,EAAE,MAAM,KAAK,CAAC;AAC3C,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,0BAA0B,CAAC;AAEtE,wBAAgB,yBAAyB,CAAC,SAAS,EAAE,qBAAqB,GAAG,cAAc,CAM1F"}

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

@@ -0,0 +1,9 @@
+import { html } from 'lit';
+export function toggleButtonGroupTemplate(component) {
+    return html `
+		<div class="toggle-button-group">
+			<slot @slotchange=${component._onSlotChange}></slot>
+		</div>
+	`;
+}
+//# sourceMappingURL=toggle-button-group.template.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"toggle-button-group.template.js","sourceRoot":"","sources":["../../../../src/components/inputs/toggle-button-group/toggle-button-group.template.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAkB,MAAM,KAAK,CAAC;AAG3C,MAAM,UAAU,yBAAyB,CAAC,SAAgC;IACzE,OAAO,IAAI,CAAA;;uBAEW,SAAS,CAAC,aAAa;;EAE5C,CAAC;AACH,CAAC"}

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

@@ -0,0 +1,42 @@
+/**
+ * Nederlandse Digitale Dienst Token Component (Lit + TypeScript)
+ *
+ * A token component representing a piece of data — such as a person in an address field
+ * or an active filter value. Optionally dismissable or interactive via a contextual menu.
+ *
+ * @element nldd-token
+ *
+ * @attr {'none' | 'dismiss' | 'menu'} control       - Control type (default: 'none')
+ * @attr {boolean}                        open          - Whether the menu is open (menu only)
+ * @attr {boolean}                        disabled      - Disabled state
+ * @attr {string}                         dismiss-text - Text for the dismiss button (default: 'Verwijder')
+ * @attr {string}                         controls      - ID of the associated popup element (aria-controls).
+ *                                                        Required for ARIA compliance when control="menu".
+ *
+ * @slot - Token text
+ *
+ * @fires dismiss - When the dismiss button is clicked
+ * @fires toggle  - When the menu is clicked; detail: { open: boolean }
+ */
+import { LitElement } from 'lit';
+import './../../content/icon/icon.js';
+import './../../actions/icon-button/icon-button.js';
+export type TokenControl = 'none' | 'dismiss' | 'menu';
+export declare class NLDDToken extends LitElement {
+    static styles: import("lit").CSSResult;
+    control: TokenControl;
+    open: boolean;
+    disabled: boolean;
+    dismissText: string;
+    /** ID of the associated popup element. Required for ARIA compliance when control="menu". */
+    controls: string;
+    _handleDismiss(e: Event): void;
+    _handleMenuClick(): void;
+    render(): import("lit-html").TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'nldd-token': NLDDToken;
+    }
+}
+//# sourceMappingURL=token.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"token.d.ts","sourceRoot":"","sources":["../../../../src/components/inputs/token/token.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AACH,OAAO,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AAIjC,OAAO,8BAA8B,CAAC;AACtC,OAAO,4CAA4C,CAAC;AAEpD,MAAM,MAAM,YAAY,GAAG,MAAM,GAAG,SAAS,GAAG,MAAM,CAAC;AAEvD,qBACa,SAAU,SAAQ,UAAU;IACxC,OAAgB,MAAM,0BAAe;IAGrC,OAAO,EAAE,YAAY,CAAU;IAG/B,IAAI,UAAS;IAGb,QAAQ,UAAS;IAGjB,WAAW,SAAe;IAE1B,4FAA4F;IAE5F,QAAQ,SAAM;IAEd,cAAc,CAAC,CAAC,EAAE,KAAK,GAAG,IAAI;IAS9B,gBAAgB,IAAI,IAAI;IAUf,MAAM;CAGf;AAED,OAAO,CAAC,MAAM,CAAC;IACd,UAAU,qBAAqB;QAC9B,YAAY,EAAE,SAAS,CAAC;KACxB;CACD"}

package/dist/components/inputs/token/token.js

@@ -0,0 +1,86 @@
+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 Token Component (Lit + TypeScript)
+ *
+ * A token component representing a piece of data — such as a person in an address field
+ * or an active filter value. Optionally dismissable or interactive via a contextual menu.
+ *
+ * @element nldd-token
+ *
+ * @attr {'none' | 'dismiss' | 'menu'} control       - Control type (default: 'none')
+ * @attr {boolean}                        open          - Whether the menu is open (menu only)
+ * @attr {boolean}                        disabled      - Disabled state
+ * @attr {string}                         dismiss-text - Text for the dismiss button (default: 'Verwijder')
+ * @attr {string}                         controls      - ID of the associated popup element (aria-controls).
+ *                                                        Required for ARIA compliance when control="menu".
+ *
+ * @slot - Token text
+ *
+ * @fires dismiss - When the dismiss button is clicked
+ * @fires toggle  - When the menu is clicked; detail: { open: boolean }
+ */
+import { LitElement } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import { tokenStyles } from './token.styles.js';
+import { tokenTemplate } from './token.template.js';
+import './../../content/icon/icon.js';
+import './../../actions/icon-button/icon-button.js';
+let NLDDToken = class NLDDToken extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.control = 'none';
+        this.open = false;
+        this.disabled = false;
+        this.dismissText = 'Verwijder';
+        /** ID of the associated popup element. Required for ARIA compliance when control="menu". */
+        this.controls = '';
+    }
+    _handleDismiss(e) {
+        e.stopPropagation();
+        if (this.disabled)
+            return;
+        this.dispatchEvent(new CustomEvent('dismiss', {
+            bubbles: true,
+            composed: true,
+        }));
+    }
+    _handleMenuClick() {
+        if (this.disabled)
+            return;
+        this.open = !this.open;
+        this.dispatchEvent(new CustomEvent('toggle', {
+            detail: { open: this.open },
+            bubbles: true,
+            composed: true,
+        }));
+    }
+    render() {
+        return tokenTemplate(this);
+    }
+};
+NLDDToken.styles = tokenStyles;
+__decorate([
+    property({ type: String, reflect: true })
+], NLDDToken.prototype, "control", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], NLDDToken.prototype, "open", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], NLDDToken.prototype, "disabled", void 0);
+__decorate([
+    property({ type: String, attribute: 'dismiss-text' })
+], NLDDToken.prototype, "dismissText", void 0);
+__decorate([
+    property({ type: String, reflect: true })
+], NLDDToken.prototype, "controls", void 0);
+NLDDToken = __decorate([
+    customElement('nldd-token')
+], NLDDToken);
+export { NLDDToken };
+//# sourceMappingURL=token.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"token.js","sourceRoot":"","sources":["../../../../src/components/inputs/token/token.ts"],"names":[],"mappings":";;;;;;AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AACH,OAAO,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AACjC,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC5D,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAChD,OAAO,EAAE,aAAa,EAAE,MAAM,qBAAqB,CAAC;AACpD,OAAO,8BAA8B,CAAC;AACtC,OAAO,4CAA4C,CAAC;AAK7C,IAAM,SAAS,GAAf,MAAM,SAAU,SAAQ,UAAU;IAAlC;;QAIN,YAAO,GAAiB,MAAM,CAAC;QAG/B,SAAI,GAAG,KAAK,CAAC;QAGb,aAAQ,GAAG,KAAK,CAAC;QAGjB,gBAAW,GAAG,WAAW,CAAC;QAE1B,4FAA4F;QAE5F,aAAQ,GAAG,EAAE,CAAC;IAwBf,CAAC;IAtBA,cAAc,CAAC,CAAQ;QACtB,CAAC,CAAC,eAAe,EAAE,CAAC;QACpB,IAAI,IAAI,CAAC,QAAQ;YAAE,OAAO;QAC1B,IAAI,CAAC,aAAa,CAAC,IAAI,WAAW,CAAC,SAAS,EAAE;YAC7C,OAAO,EAAE,IAAI;YACb,QAAQ,EAAE,IAAI;SACd,CAAC,CAAC,CAAC;IACL,CAAC;IAED,gBAAgB;QACf,IAAI,IAAI,CAAC,QAAQ;YAAE,OAAO;QAC1B,IAAI,CAAC,IAAI,GAAG,CAAC,IAAI,CAAC,IAAI,CAAC;QACvB,IAAI,CAAC,aAAa,CAAC,IAAI,WAAW,CAAC,QAAQ,EAAE;YAC5C,MAAM,EAAE,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE;YAC3B,OAAO,EAAE,IAAI;YACb,QAAQ,EAAE,IAAI;SACd,CAAC,CAAC,CAAC;IACL,CAAC;IAEQ,MAAM;QACd,OAAO,aAAa,CAAC,IAAI,CAAC,CAAC;IAC5B,CAAC;;AAvCe,gBAAM,GAAG,WAAW,AAAd,CAAe;AAGrC;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;0CACX;AAG/B;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;uCAC9B;AAGb;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;2CAC1B;AAGjB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,SAAS,EAAE,cAAc,EAAE,CAAC;8CAC5B;AAI1B;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;2CAC5B;AAjBF,SAAS;IADrB,aAAa,CAAC,YAAY,CAAC;GACf,SAAS,CAyCrB"}

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

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

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

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

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

@@ -0,0 +1,131 @@
+import { css } from 'lit';
+export const tokenStyles = 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 */
+
+	.token {
+		/* Reset (for menu button) */
+		appearance: none;
+		border: none;
+		margin: 0;
+		background: none;
+		font: inherit;
+
+		/* Layout */
+		display: inline-flex;
+		align-items: center;
+		box-sizing: border-box;
+		height: var(--semantics-controls-sm-min-size);
+		padding: 0 var(--primitives-space-6);
+
+		/* Appearance */
+		border-radius: var(--semantics-controls-sm-corner-radius);
+		background-color: var(--semantics-buttons-neutral-tinted-background-color);
+		color: var(--semantics-buttons-neutral-tinted-content-color);
+		font: var(--semantics-buttons-sm-font);
+
+		/* Animation */
+		transition: background-color var(--primitives-transition-duration-fast) var(--primitives-transition-easing-default);
+	}
+
+	@media (prefers-reduced-motion: reduce) {
+		.token {
+			transition: none;
+		}
+	}
+
+
+	/* # Text */
+
+	.token__text {
+		display: flex;
+		align-items: center;
+		padding: 0 var(--primitives-space-2);
+	}
+
+
+	/* # Icon */
+
+	.token__icon {
+		display: block;
+		flex-shrink: 0;
+		width: var(--primitives-space-16);
+		height: var(--primitives-space-16);
+	}
+
+
+	/* # States */
+
+	/* ## Hover — menu */
+
+	:host([control="menu"]) .token:hover:not(:disabled) {
+		background-color: var(--semantics-buttons-neutral-tinted-is-hovered-background-color);
+		color: var(--semantics-buttons-neutral-tinted-is-hovered-content-color);
+	}
+
+	/* ## Open — menu */
+
+	:host([open]) .token {
+		background-color: var(--semantics-buttons-neutral-tinted-is-active-background-color);
+		color: var(--semantics-buttons-neutral-tinted-is-active-content-color);
+	}
+
+	:host([open]) .token:hover:not(:disabled) {
+		background-color: var(--semantics-buttons-neutral-tinted-is-active-background-color);
+		color: var(--semantics-buttons-neutral-tinted-is-active-content-color);
+	}
+
+	/* ## Focus — menu */
+
+	:host([control="menu"]) .token:focus-visible {
+		outline: var(--semantics-focus-ring-outline);
+		outline-offset: var(--semantics-focus-ring-outline-offset);
+		box-shadow: var(--semantics-focus-ring-box-shadow);
+	}
+
+	:host([control="menu"]) .token:focus:not(:focus-visible) {
+		outline: none;
+	}
+
+
+	/* # Dismiss — padding compensation */
+
+	/* Remove right padding so the nldd-icon-button flush-fits the token edge */
+	:host([control="dismiss"]) .token {
+		padding-right: 0;
+	}
+
+
+	/* # Accessibility */
+
+	@media (forced-colors: active) {
+		.token {
+			border: 1px solid CanvasText;
+		}
+
+		:host([control="menu"]) .token:focus-visible,
+		.token__dismiss:focus-visible {
+			outline: 2px solid CanvasText;
+			outline-offset: 2px;
+		}
+	}
+`;
+//# sourceMappingURL=token.styles.js.map