@nldd/design-system 0.8.92 → 0.8.94

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

@@ -17,11 +17,23 @@ export const toggleButtonStyles = css `
 		--_font: var(--semantics-buttons-md-primary-text-font);
 		--_icon-size: var(--semantics-buttons-md-icon-size);
 		--_icon-only-icon-size: var(--semantics-buttons-md-is-icon-only-icon-size);
+		--_background-color: var(--semantics-buttons-neutral-tinted-background-color);
+		--_content-color: var(--semantics-buttons-neutral-tinted-content-color);
 		--_highlight-border-color: var(--semantics-buttons-neutral-tinted-highlight-border-color);
+		--_is-hovered-background-color: var(--semantics-buttons-neutral-tinted-is-hovered-background-color);
+		--_is-hovered-content-color: var(--semantics-buttons-neutral-tinted-is-hovered-content-color);
 		--_is-hovered-highlight-border-color: var(--semantics-buttons-neutral-tinted-is-hovered-highlight-border-color);
+		--_is-active-background-color: var(--semantics-buttons-neutral-tinted-is-active-background-color);
+		--_is-active-content-color: var(--semantics-buttons-neutral-tinted-is-active-content-color);
 		--_is-active-highlight-border-color: var(--semantics-buttons-neutral-tinted-is-active-highlight-border-color);
+		--_is-selected-background-color: var(--semantics-buttons-neutral-tinted-is-selected-background-color);
+		--_is-selected-content-color: var(--semantics-buttons-neutral-tinted-is-selected-content-color);
 		--_is-selected-highlight-border-color: var(--semantics-buttons-neutral-tinted-is-selected-highlight-border-color);
+		--_is-selected-is-hovered-background-color: var(--semantics-buttons-neutral-tinted-is-selected-is-hovered-background-color);
+		--_is-selected-is-hovered-content-color: var(--semantics-buttons-neutral-tinted-is-selected-is-hovered-content-color);
 		--_is-selected-is-hovered-highlight-border-color: var(--semantics-buttons-neutral-tinted-is-selected-is-hovered-highlight-border-color);
+		--_is-selected-is-active-background-color: var(--semantics-buttons-neutral-tinted-is-selected-is-active-background-color);
+		--_is-selected-is-active-content-color: var(--semantics-buttons-neutral-tinted-is-selected-is-active-content-color);
 		--_is-selected-is-active-highlight-border-color: var(--semantics-buttons-neutral-tinted-is-selected-is-active-highlight-border-color);
 
 		${inheritedTextReset}
@@ -74,6 +86,81 @@ export const toggleButtonStyles = css `
 		--_stacked-text-font: var(--primitives-font-body-xxs-medium-flat);
 	}
 
+	:host([appearance="neutral-base"]) {
+		--_background-color: var(--semantics-buttons-neutral-base-background-color);
+		--_content-color: var(--semantics-buttons-neutral-base-content-color);
+		--_highlight-border-color: var(--semantics-buttons-neutral-base-highlight-border-color);
+		--_is-hovered-background-color: var(--semantics-buttons-neutral-base-is-hovered-background-color);
+		--_is-hovered-content-color: var(--semantics-buttons-neutral-base-is-hovered-content-color);
+		--_is-hovered-highlight-border-color: var(--semantics-buttons-neutral-base-is-hovered-highlight-border-color);
+		--_is-active-background-color: var(--semantics-buttons-neutral-base-is-active-background-color);
+		--_is-active-content-color: var(--semantics-buttons-neutral-base-is-active-content-color);
+		--_is-active-highlight-border-color: var(--semantics-buttons-neutral-base-is-active-highlight-border-color);
+		--_is-selected-background-color: var(--semantics-buttons-neutral-base-is-selected-background-color);
+		--_is-selected-content-color: var(--semantics-buttons-neutral-base-is-selected-content-color);
+		--_is-selected-highlight-border-color: var(--semantics-buttons-neutral-base-is-selected-highlight-border-color);
+		--_is-selected-is-hovered-background-color: var(--semantics-buttons-neutral-base-is-selected-is-hovered-background-color);
+		--_is-selected-is-hovered-content-color: var(--semantics-buttons-neutral-base-is-selected-is-hovered-content-color);
+		--_is-selected-is-hovered-highlight-border-color: var(--semantics-buttons-neutral-base-is-selected-is-hovered-highlight-border-color);
+		--_is-selected-is-active-background-color: var(--semantics-buttons-neutral-base-is-selected-is-active-background-color);
+		--_is-selected-is-active-content-color: var(--semantics-buttons-neutral-base-is-selected-is-active-content-color);
+		--_is-selected-is-active-highlight-border-color: var(--semantics-buttons-neutral-base-is-selected-is-active-highlight-border-color);
+	}
+
+	:host([appearance="neutral-transparent"]) {
+		--_background-color: transparent;
+		--_content-color: var(--semantics-buttons-neutral-transparent-content-color);
+		--_highlight-border-color: transparent;
+		--_is-hovered-background-color: transparent;
+		--_is-hovered-content-color: var(--semantics-buttons-neutral-transparent-is-hovered-content-color);
+		--_is-hovered-highlight-border-color: transparent;
+		--_is-active-background-color: transparent;
+		--_is-active-content-color: var(--semantics-buttons-neutral-transparent-is-active-content-color);
+		--_is-active-highlight-border-color: transparent;
+		--_is-selected-background-color: var(--semantics-buttons-neutral-transparent-is-selected-background-color);
+		--_is-selected-content-color: var(--semantics-buttons-neutral-transparent-is-selected-content-color);
+		--_is-selected-highlight-border-color: var(--semantics-buttons-neutral-transparent-is-selected-highlight-border-color);
+		--_is-selected-is-hovered-background-color: var(--semantics-buttons-neutral-transparent-is-selected-is-hovered-background-color);
+		--_is-selected-is-hovered-content-color: var(--semantics-buttons-neutral-transparent-is-selected-is-hovered-content-color);
+		--_is-selected-is-hovered-highlight-border-color: var(--semantics-buttons-neutral-transparent-is-selected-is-hovered-highlight-border-color);
+		--_is-selected-is-active-background-color: var(--semantics-buttons-neutral-transparent-is-selected-is-active-background-color);
+		--_is-selected-is-active-content-color: var(--semantics-buttons-neutral-transparent-is-selected-is-active-content-color);
+		--_is-selected-is-active-highlight-border-color: var(--semantics-buttons-neutral-transparent-is-selected-is-active-highlight-border-color);
+	}
+
+	:host([appearance="accent-transparent"]) {
+		--_background-color: transparent;
+		--_content-color: var(--semantics-buttons-accent-transparent-content-color);
+		--_highlight-border-color: transparent;
+		--_is-hovered-background-color: transparent;
+		--_is-hovered-content-color: var(--semantics-buttons-accent-transparent-is-hovered-content-color);
+		--_is-hovered-highlight-border-color: transparent;
+		--_is-active-background-color: transparent;
+		--_is-active-content-color: var(--semantics-buttons-accent-transparent-is-active-content-color);
+		--_is-active-highlight-border-color: transparent;
+		--_is-selected-background-color: var(--semantics-buttons-accent-transparent-is-selected-background-color);
+		--_is-selected-content-color: var(--semantics-buttons-accent-transparent-is-selected-content-color);
+		--_is-selected-highlight-border-color: var(--semantics-buttons-accent-transparent-is-selected-highlight-border-color);
+		--_is-selected-is-hovered-background-color: var(--semantics-buttons-accent-transparent-is-selected-is-hovered-background-color);
+		--_is-selected-is-hovered-content-color: var(--semantics-buttons-accent-transparent-is-selected-is-hovered-content-color);
+		--_is-selected-is-hovered-highlight-border-color: var(--semantics-buttons-accent-transparent-is-selected-is-hovered-highlight-border-color);
+		--_is-selected-is-active-background-color: var(--semantics-buttons-accent-transparent-is-selected-is-active-background-color);
+		--_is-selected-is-active-content-color: var(--semantics-buttons-accent-transparent-is-selected-is-active-content-color);
+		--_is-selected-is-active-highlight-border-color: var(--semantics-buttons-accent-transparent-is-selected-is-active-highlight-border-color);
+	}
+
+	:host([selected-icon]:is([appearance="neutral-transparent"], [appearance="accent-transparent"])) {
+		--_is-selected-background-color: var(--_background-color);
+		--_is-selected-content-color: var(--_content-color);
+		--_is-selected-highlight-border-color: var(--_highlight-border-color);
+		--_is-selected-is-hovered-background-color: var(--_is-hovered-background-color);
+		--_is-selected-is-hovered-content-color: var(--_is-hovered-content-color);
+		--_is-selected-is-hovered-highlight-border-color: var(--_is-hovered-highlight-border-color);
+		--_is-selected-is-active-background-color: var(--_is-active-background-color);
+		--_is-selected-is-active-content-color: var(--_is-active-content-color);
+		--_is-selected-is-active-highlight-border-color: var(--_is-active-highlight-border-color);
+	}
+
 	:host([disabled]) {
 		opacity: var(--primitives-opacity-disabled);
 		pointer-events: none;
@@ -90,7 +177,7 @@ export const toggleButtonStyles = css `
 		border: none;
 		border-radius: var(--_corner-radius);
 		background: none;
-		background-color: var(--semantics-buttons-neutral-tinted-background-color);
+		background-color: var(--_background-color);
 		box-shadow: inset 0 0 0 var(--primitives-border-width-thin) var(--_highlight-border-color);
 		width: var(--_min-size);
 		min-height: var(--_min-size);
@@ -98,7 +185,7 @@ export const toggleButtonStyles = css `
 		gap: var(--_gap);
 		align-items: center;
 		justify-content: center;
-		color: var(--semantics-buttons-neutral-tinted-content-color);
+		color: var(--_content-color);
 		font: var(--_font);
 		white-space: nowrap;
 		text-decoration: none;
@@ -114,38 +201,38 @@ export const toggleButtonStyles = css `
 		.toggle-button:hover,
 		.toggle-button:has(.toggle-button__input:hover) {
 			--_highlight-border-color: var(--_is-hovered-highlight-border-color);
-			background-color: var(--semantics-buttons-neutral-tinted-is-hovered-background-color);
-			color: var(--semantics-buttons-neutral-tinted-is-hovered-content-color);
+			background-color: var(--_is-hovered-background-color);
+			color: var(--_is-hovered-content-color);
 		}
 	}
 
 	.toggle-button:active,
 	.toggle-button:has(.toggle-button__input:active) {
 		--_highlight-border-color: var(--_is-active-highlight-border-color);
-		background-color: var(--semantics-buttons-neutral-tinted-is-active-background-color);
-		color: var(--semantics-buttons-neutral-tinted-is-active-content-color);
+		background-color: var(--_is-active-background-color);
+		color: var(--_is-active-content-color);
 	}
 
 	:host([selected]) .toggle-button {
 		--_highlight-border-color: var(--_is-selected-highlight-border-color);
-		background-color: var(--semantics-buttons-neutral-tinted-is-selected-background-color);
-		color: var(--semantics-buttons-neutral-tinted-is-selected-content-color);
+		background-color: var(--_is-selected-background-color);
+		color: var(--_is-selected-content-color);
 	}
 
 	@media (hover: hover) {
 		:host([selected]) .toggle-button:hover,
 		:host([selected]) .toggle-button:has(.toggle-button__input:hover) {
 			--_highlight-border-color: var(--_is-selected-is-hovered-highlight-border-color);
-			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);
+			background-color: var(--_is-selected-is-hovered-background-color);
+			color: var(--_is-selected-is-hovered-content-color);
 		}
 	}
 
 	:host([selected]) .toggle-button:active,
 	:host([selected]) .toggle-button:has(.toggle-button__input:active) {
 		--_highlight-border-color: var(--_is-selected-is-active-highlight-border-color);
-		background-color: var(--semantics-buttons-neutral-tinted-is-selected-is-active-background-color);
-		color: var(--semantics-buttons-neutral-tinted-is-selected-is-active-content-color);
+		background-color: var(--_is-selected-is-active-background-color);
+		color: var(--_is-selected-is-active-content-color);
 	}
 
 	.toggle-button:focus-visible,

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

@@ -1 +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;AAC1B,OAAO,EAAE,kBAAkB,EAAE,MAAM,yCAAyC,CAAC;AAE7E,MAAM,CAAC,MAAM,kBAAkB,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;IAwBjC,kBAAkB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA2LrB,CAAC"}
+{"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;AAC1B,OAAO,EAAE,kBAAkB,EAAE,MAAM,yCAAyC,CAAC;AAE7E,MAAM,CAAC,MAAM,kBAAkB,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAoCjC,kBAAkB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAsQrB,CAAC"}

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

@@ -1 +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,CAgHhF"}
+{"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,CAkHhF"}

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

@@ -32,14 +32,16 @@ export function toggleButtonTemplate(component) {
      * subsequent variant change couldn't pick it up because no slotchange
      * would have fired. An empty slot collapses to 0×0 via display:contents,
      * so it costs nothing visually. */
-    const icon = component.icon
+    const iconName = component.selected && component.selectedIcon ? component.selectedIcon : component.icon;
+    const icon = iconName
         ? html `<nldd-icon class="toggle-button__icon"
-				name=${component.icon}
+				icon=${iconName}
 			></nldd-icon>`
-        : html `<slot name="icon"
+        : html `<slot
+				name="icon"
 				@slotchange=${component.requestUpdate}
 			>${showPlaceholder ? html `<nldd-icon class="toggle-button__icon"
-					name="icon-placeholder"
+					icon="icon-placeholder"
 				></nldd-icon>` : nothing}</slot>`;
     const textContent = showText
         ? html `<span class="toggle-button__text">${component.text}</span>`

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

@@ -1 +1 @@
-{"version":3,"file":"toggle-button.template.js","sourceRoot":"","sources":["../../../../src/components/inputs/toggle-button/toggle-button.template.ts"],"names":[],"mappings":"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"}
+{"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;;;;;;sEAMkE;IAClE,MAAM,QAAQ,GAAG,SAAS,CAAC,OAAO,KAAK,MAAM,IAAI,CAAC,CAAC,SAAS,CAAC,IAAI,CAAC;IAClE,MAAM,QAAQ,GAAG,SAAS,CAAC,OAAO,KAAK,MAAM,IAAI,SAAS,CAAC,QAAQ,CAAC;IAEpE;qEACiE;IACjE,MAAM,eAAe,GAAG,SAAS,CAAC,OAAO,KAAK,MAAM;WAChD,SAAS,CAAC,OAAO,KAAK,eAAe,CAAC;IAE1C;;uCAEmC;IACnC,MAAM,SAAS,GAAG,SAAS,CAAC,eAAe;WACvC,CAAC,SAAS,CAAC,OAAO,KAAK,MAAM,IAAI,SAAS,CAAC,IAAI,CAAC,CAAC,CAAC,SAAS,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC;WACtE,OAAO,CAAC;IAEZ;;qEAEiE;IACjE,MAAM,iBAAiB,GAAG,QAAQ,IAAI,CAAC,QAAQ,CAAC;IAChD,MAAM,WAAW,GAAG,iBAAiB,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC,eAAe,IAAI,SAAS,CAAC,IAAI,IAAI,EAAE,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC;IAEjG;;;;;;uCAMmC;IACnC,MAAM,QAAQ,GAAG,SAAS,CAAC,QAAQ,IAAI,SAAS,CAAC,YAAY,CAAC,CAAC,CAAC,SAAS,CAAC,YAAY,CAAC,CAAC,CAAC,SAAS,CAAC,IAAI,CAAC;IACxG,MAAM,IAAI,GAAG,QAAQ;QACpB,CAAC,CAAC,IAAI,CAAA;WACG,QAAQ;iBACF;QACf,CAAC,CAAC,IAAI,CAAA;;kBAEU,SAAS,CAAC,aAAa;MACnC,eAAe,CAAC,CAAC,CAAC,IAAI,CAAA;;kBAEV,CAAC,CAAC,CAAC,OAAO,SAAS,CAAC;IAErC,MAAM,WAAW,GAAG,QAAQ;QAC3B,CAAC,CAAC,IAAI,CAAA,qCAAqC,SAAS,CAAC,IAAI,SAAS;QAClE,CAAC,CAAC,OAAO,CAAC;IAEX,IAAI,MAAsB,CAAC;IAE3B,IAAI,SAAS,CAAC,IAAI,KAAK,OAAO,EAAE,CAAC;QAChC,sEAAsE;QACtE,uEAAuE;QACvE,uEAAuE;QACvE,2EAA2E;QAC3E,4EAA4E;QAC5E,+EAA+E;QAC/E,0DAA0D;QAC1D,MAAM,GAAG,IAAI,CAAA;;;;;;iBAME,SAAS,CAAC,QAAQ;iBAClB,SAAS,CAAC,QAAQ;gBACnB,SAAS,CAAC,kBAAkB;;MAEtC,IAAI;MACJ,WAAW;;GAEd,CAAC;IACH,CAAC;SAAM,IAAI,SAAS,CAAC,IAAI,KAAK,UAAU,EAAE,CAAC;QAC1C,MAAM,GAAG,IAAI,CAAA;;;;gBAIC,SAAS,CAAC,QAAQ;iBACjB,SAAS,CAAC,QAAQ;iBAClB,SAAS,CAAC,QAAQ;YACvB,SAAS,CAAC,IAAI,IAAI,OAAO;aACxB,SAAS,CAAC,KAAK;kBACV,SAAS;gBACX,SAAS,CAAC,KAAK,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,OAAO;eACjC,SAAS,CAAC,kBAAkB;;MAErC,IAAI;MACJ,WAAW;;GAEd,CAAC;IACH,CAAC;SAAM,CAAC;QACP,MAAM,GAAG,IAAI,CAAA;;;mBAGI,SAAS,CAAC,QAAQ;gBACrB,SAAS,CAAC,QAAQ;iBACjB,SAAS;eACX,SAAS,CAAC,KAAK,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,OAAO;aAClC,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

@@ -2,7 +2,7 @@
  * 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.
+ * and forwarding of type, name, appearance, size, and disabled state to all buttons.
  *
  * For type="radio" (single-select), arrow keys navigate between buttons and
  * automatically select the focused one.
@@ -12,6 +12,7 @@
  *
  * @attr {'button' | 'checkbox' | 'radio'} type - Selection mode (default: 'checkbox')
  * @attr {string} name - Forwarded to all buttons
+ * @attr {'neutral-tinted' | 'neutral-base' | 'neutral-transparent' | 'accent-transparent'} appearance - Forwarded to all buttons (default: 'neutral-tinted')
  * @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)
@@ -24,7 +25,7 @@
  * @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';
+import type { ToggleButtonAppearance, ToggleButtonSize } from '../toggle-button/toggle-button.js';
 type GroupType = 'button' | 'checkbox' | 'radio';
 export declare class NLDDToggleButtonGroup extends LitElement {
     /**
@@ -48,6 +49,7 @@ export declare class NLDDToggleButtonGroup extends LitElement {
     static isFormInput: boolean;
     type: GroupType;
     name: string;
+    appearance: ToggleButtonAppearance;
     size: ToggleButtonSize;
     disabled: boolean;
     /** Accessible name forwarded as aria-label to the group host. */

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

@@ -1 +1 @@
-{"version":3,"file":"toggle-button-group.d.ts","sourceRoot":"","sources":["../../../../src/components/inputs/toggle-button-group/toggle-button-group.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AAEH,OAAO,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AAKjC,OAAO,KAAK,EAAoB,gBAAgB,EAAE,MAAM,mCAAmC,CAAC;AAI5F,KAAK,SAAS,GAAG,QAAQ,GAAG,UAAU,GAAG,OAAO,CAAC;AAEjD,qBACa,qBAAsB,SAAQ,UAAU;IACpD;;;;;;;;;;;;OAYG;IAEH,QAAQ,UAAS;IAEjB,OAAO,CAAC,eAAe,CAAS;IAEhC,OAAgB,MAAM,0BAA2B;IAEjD;wEACoE;IACpE,MAAM,CAAC,WAAW,UAAQ;IAG1B,IAAI,EAAE,SAAS,CAAc;IAG7B,IAAI,SAAM;IAGV,IAAI,EAAE,gBAAgB,CAAQ;IAG9B,QAAQ,UAAS;IAEjB,iEAAiE;IAEjE,eAAe,SAAM;IAErB,sFAAsF;IAEtF,mBAAmB,SAAM;IAEzB,8EAA8E;IAC9E,OAAO,CAAC,aAAa,CAAuB;IAG5C;;;;;;;;OAQG;IAEH,OAAO,UAAS;IAEP,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;IAmB1D,OAAO,CAAC,WAAW;IAInB,OAAO,CAAC,kBAAkB;IAI1B,OAAO,CAAC,YAAY;IAsCpB;;0DAEsD;IACtD,OAAO,CAAC,gBAAgB;IAcxB,OAAO,CAAC,aAAa,CAgBnB;IAEF,OAAO,CAAC,cAAc,CAoCpB;IAEK,aAAa,QAAO,IAAI,CAE7B;IAEF;;;;OAIG;IACM,KAAK,CAAC,OAAO,CAAC,EAAE,YAAY,GAAG,IAAI;IAKnC,MAAM;CAGf;AAED,OAAO,CAAC,MAAM,CAAC;IACd,UAAU,qBAAqB;QAC9B,0BAA0B,EAAE,qBAAqB,CAAC;KAClD;CACD"}
+{"version":3,"file":"toggle-button-group.d.ts","sourceRoot":"","sources":["../../../../src/components/inputs/toggle-button-group/toggle-button-group.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AAEH,OAAO,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AAKjC,OAAO,KAAK,EAAoB,sBAAsB,EAAE,gBAAgB,EAAE,MAAM,mCAAmC,CAAC;AAIpH,KAAK,SAAS,GAAG,QAAQ,GAAG,UAAU,GAAG,OAAO,CAAC;AAEjD,qBACa,qBAAsB,SAAQ,UAAU;IACpD;;;;;;;;;;;;OAYG;IAEH,QAAQ,UAAS;IAEjB,OAAO,CAAC,eAAe,CAAS;IAEhC,OAAgB,MAAM,0BAA2B;IAEjD;wEACoE;IACpE,MAAM,CAAC,WAAW,UAAQ;IAG1B,IAAI,EAAE,SAAS,CAAc;IAG7B,IAAI,SAAM;IAGV,UAAU,EAAE,sBAAsB,CAAoB;IAGtD,IAAI,EAAE,gBAAgB,CAAQ;IAG9B,QAAQ,UAAS;IAEjB,iEAAiE;IAEjE,eAAe,SAAM;IAErB,sFAAsF;IAEtF,mBAAmB,SAAM;IAEzB,8EAA8E;IAC9E,OAAO,CAAC,aAAa,CAAuB;IAG5C;;;;;;;;OAQG;IAEH,OAAO,UAAS;IAEP,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;IAmB1D,OAAO,CAAC,WAAW;IAInB,OAAO,CAAC,kBAAkB;IAI1B,OAAO,CAAC,YAAY;IAuCpB;;0DAEsD;IACtD,OAAO,CAAC,gBAAgB;IAcxB,OAAO,CAAC,aAAa,CAgBnB;IAEF,OAAO,CAAC,cAAc,CAoCpB;IAEK,aAAa,QAAO,IAAI,CAE7B;IAEF;;;;OAIG;IACM,KAAK,CAAC,OAAO,CAAC,EAAE,YAAY,GAAG,IAAI;IAKnC,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

@@ -2,7 +2,7 @@
  * 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.
+ * and forwarding of type, name, appearance, size, and disabled state to all buttons.
  *
  * For type="radio" (single-select), arrow keys navigate between buttons and
  * automatically select the focused one.
@@ -12,6 +12,7 @@
  *
  * @attr {'button' | 'checkbox' | 'radio'} type - Selection mode (default: 'checkbox')
  * @attr {string} name - Forwarded to all buttons
+ * @attr {'neutral-tinted' | 'neutral-base' | 'neutral-transparent' | 'accent-transparent'} appearance - Forwarded to all buttons (default: 'neutral-tinted')
  * @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)
@@ -56,6 +57,7 @@ let NLDDToggleButtonGroup = class NLDDToggleButtonGroup extends LitElement {
         this._warnedRequired = false;
         this.type = 'checkbox';
         this.name = '';
+        this.appearance = 'neutral-tinted';
         this.size = 'md';
         this.disabled = false;
         /** Accessible name forwarded as aria-label to the group host. */
@@ -149,7 +151,7 @@ let NLDDToggleButtonGroup = class NLDDToggleButtonGroup extends LitElement {
             console.warn('<nldd-toggle-button-group>: No accessible name provided. Add an accessible-label or accessible-labeled-by attribute for screen reader accessibility.');
     }
     updated(changed) {
-        if (changed.has('type') || changed.has('name') || changed.has('size') || changed.has('disabled')) {
+        if (changed.has('type') || changed.has('name') || changed.has('appearance') || changed.has('size') || changed.has('disabled')) {
             this._syncButtons();
         }
         if (changed.has('type')) {
@@ -188,6 +190,7 @@ let NLDDToggleButtonGroup = class NLDDToggleButtonGroup extends LitElement {
         }
         this._getButtons().forEach(button => {
             button.type = this.type;
+            button.appearance = this.appearance;
             button.size = this.size;
             button.required = this.required && this.type === 'radio';
             // name is only meaningful for checkbox and radio
@@ -249,6 +252,9 @@ __decorate([
 __decorate([
     property({ type: String })
 ], NLDDToggleButtonGroup.prototype, "name", void 0);
+__decorate([
+    property({ reflect: true, converter: reflectNonDefault('neutral-tinted') })
+], NLDDToggleButtonGroup.prototype, "appearance", void 0);
 __decorate([
     property({ reflect: true, converter: reflectNonDefault('md') })
 ], NLDDToggleButtonGroup.prototype, "size", void 0);

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

@@ -1 +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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"}
+{"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/token-field/token-field.d.ts

@@ -8,13 +8,19 @@
  * exactly like nldd-combo-box; the menu filters as you type, with a chevron picker
  * button, arrow-key roving across the tokens and ElementInternals form participation.
  *
+ * Options can arrive after the keystroke, from a server you query per
+ * keystroke. Slot them into the menu when they come in: if the user is still
+ * in the field and the keystroke found nothing to show, the menu opens then.
+ * After Escape, or once the user left the field, it stays shut.
+ *
  * @element nldd-token-field
  * @attr {string} values - Initial token values as a comma-separated string (e.g. "nl, be, de"). Not reflected; the live value is the `.values` array property. Values can't contain commas.
  * @attr {string} placeholder - Placeholder shown in the input
  * @attr {string} type - Input type forwarded to the inner input (e.g. 'email')
  * @attr {string} autocomplete - Autocomplete hint forwarded to the inner input
  * @attr {string} accessible-label - Accessible label forwarded as aria-label to the input
- * @attr {boolean} allow-custom - Allow free-typed values (not just menu options)
+ * @attr {boolean} allow-custom - Allow free-typed values (not just menu options). Typing an option's label in full adds that option, with its value, ignoring case and the spaces around it; with two such labels, the first one.
+ * @attr {boolean} no-filter - Leaves the options as they are while typing, for a list your server already filtered per keystroke. Without it the field hides options that do not contain the typed text, which also hides a server match on, say, an e-mail address.
  * @attr {boolean} valid - Marks the field valid (shows the valid icon)
  * @attr {boolean} invalid - Marks the field invalid (shows the invalid icon)
  * @attr {boolean} no-spellcheck - Disables browser spellchecking on the inner input
@@ -65,6 +71,8 @@ export declare class NLDDTokenField extends NLDDTokenField_base {
      *  becomes a token on Enter, a trailing comma, or blur. Also governs whether
      *  the input stays visible when no options remain. */
     allowCustom: boolean;
+    /** Leaves the options as they are while typing: the list was filtered already, by a server. */
+    noFilter: boolean;
     valid: boolean;
     invalid: boolean;
     noSpellcheck: boolean;
@@ -96,6 +104,10 @@ export declare class NLDDTokenField extends NLDDTokenField_base {
      *  change (e.g. a framework populating them asynchronously), so the field
      *  re-evaluates whether to show the input/picker and re-resolves token labels. */
     private _menuObserver;
+    /** A keystroke wanted the menu open but there was nothing to show yet.
+     *  Options that arrive after it, from a server answering per keystroke,
+     *  open it then. Escape, leaving the field or opening the menu clear it. */
+    private _openPending;
     /** Watches the light-DOM `[slot="template"]` prototypes for changes (menu items,
      *  their attributes, or an added/removed prototype) and invalidates the cloned
      *  per-token menus so they re-clone. These components run on live sites, not just
@@ -227,6 +239,12 @@ export declare class NLDDTokenField extends NLDDTokenField_base {
      * input so Tab continues from there — same handling as the combo-box.
      */
     private _handleMenuKeydown;
+    /**
+     * Typing an option's label in full means that option: its value becomes the
+     * token, not the label, so the form sends what a choice from the menu would.
+     * Anything else typed is a custom value as it stands.
+     */
+    private _valueForTypedText;
     /**
      * Add a value, clear the input, and close the menu — focus returns to the empty
      * input. The menu only reopens on a deliberate action (typing, ArrowDown, or the
@@ -235,6 +253,13 @@ export declare class NLDDTokenField extends NLDDTokenField_base {
      */
     private _commitValue;
     _openMenu(): void;
+    /**
+     * The menu decides whether to open on a keystroke. Options that arrive later
+     * get the same decision: they open a menu the keystroke could not open, and a
+     * menu whose options all went away closes again, as it would on typing. Only
+     * while the user is still in the field.
+     */
+    private _handleMenuItemsChange;
     _closeMenu(): void;
     private _updateActiveDescendant;
     private _resetInputText;

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

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

package/dist/components/inputs/token-field/token-field.i18n.js

@@ -2,7 +2,7 @@ export const nlddTokenFieldTranslations = {
     'components.token-field.dismiss-action': 'Verwijder',
     'components.token-field.removable-lowercase-label': 'verwijderbaar',
     'components.token-field.open-menu-action': 'Toon opties',
-    'components.token-field.token-menu-action': 'Toon acties',
+    'components.token-field.token-menu-action': 'Toon acties voor',
     'components.token-field.required-error-text': 'Voeg minimaal één waarde toe',
 };
 //# sourceMappingURL=token-field.i18n.js.map

package/dist/components/inputs/token-field/token-field.i18n.js.map

@@ -1 +1 @@
-{"version":3,"file":"token-field.i18n.js","sourceRoot":"","sources":["../../../../src/components/inputs/token-field/token-field.i18n.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,0BAA0B,GAAG;IACzC,uCAAuC,EAAE,WAAW;IACpD,kDAAkD,EAAE,eAAe;IACnE,yCAAyC,EAAE,aAAa;IACxD,0CAA0C,EAAE,aAAa;IACzD,4CAA4C,EAAE,8BAA8B;CAC5E,CAAC"}
+{"version":3,"file":"token-field.i18n.js","sourceRoot":"","sources":["../../../../src/components/inputs/token-field/token-field.i18n.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,0BAA0B,GAAG;IACzC,uCAAuC,EAAE,WAAW;IACpD,kDAAkD,EAAE,eAAe;IACnE,yCAAyC,EAAE,aAAa;IACxD,0CAA0C,EAAE,kBAAkB;IAC9D,4CAA4C,EAAE,8BAA8B;CAC5E,CAAC"}