@nldd/design-system 0.8.42 → 0.8.44

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

@@ -19,16 +19,16 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
  * @attr {boolean} invalid     - Marks the field as invalid
  * @attr {boolean} disabled    - Disabled state
  * @attr {boolean} masked                  - Whether the password is masked (default: true)
- * @attr {string} show-text               - Visible toggle button text when masked (default: 'Toon')
- * @attr {string} hide-text               - Visible toggle button text when unmasked (default: 'Verberg')
- * @attr {string} show-accessible-label    - aria-label for toggle when masked (default: 'Toon wachtwoord')
- * @attr {string} hide-accessible-label    - aria-label for toggle when unmasked (default: 'Verberg wachtwoord')
+ * @attr {string} show-button-text               - Visible toggle button text when masked (default: 'Toon')
+ * @attr {string} hide-button-text               - Visible toggle button text when unmasked (default: 'Verberg')
+ * @attr {string} show-button-accessible-label    - aria-label for toggle when masked (default: 'Toon wachtwoord')
+ * @attr {string} hide-button-accessible-label    - aria-label for toggle when unmasked (default: 'Verberg wachtwoord')
  * @attr {boolean} readonly    - Readonly state
  * @attr {boolean} required    - Required state
  * @attr {string} name         - Input name for form submission
  * @attr {string} autocomplete        - Autocomplete hint
  * @attr {string} accessible-label    - Accessible label forwarded to the inner input. Set automatically by nldd-form-field.
- * @attr {string} width        - Optional fixed width (any CSS length, e.g. "240px"). Default: full-width.
+ * @attr {string} width        - Optional fixed width (any CSS length, e.g. "240px"). Default: stretches to fill container.
  *
  * @fires input  - When the input value changes ({ detail: { value } })
  * @fires change - When the input value is committed ({ detail: { value } })
@@ -51,13 +51,13 @@ let NLDDPasswordField = class NLDDPasswordField extends LitElement {
         this.disabled = false;
         this.masked = true;
         /** Visible button label when the field is masked. Override for localisation. */
-        this.showText = 'Toon';
+        this.showButtonText = 'Toon';
         /** Visible button label when the field is unmasked. Override for localisation. */
-        this.hideText = 'Verberg';
+        this.hideButtonText = 'Verberg';
         /** Accessible aria-label for the toggle button when the field is masked. Override for localisation. */
-        this.showAccessibleLabel = 'Toon wachtwoord';
+        this.showButtonAccessibleLabel = 'Toon wachtwoord';
         /** Accessible aria-label for the toggle button when the field is unmasked. Override for localisation. */
-        this.hideAccessibleLabel = 'Verberg wachtwoord';
+        this.hideButtonAccessibleLabel = 'Verberg wachtwoord';
         this.readonly = false;
         this.required = false;
         this.name = '';
@@ -73,7 +73,13 @@ let NLDDPasswordField = class NLDDPasswordField extends LitElement {
     }
     updated(changed) {
         if (changed.has('width')) {
-            this.style.width = this.width || '';
+            const w = this.width;
+            if (w && w !== 'full' && CSS.supports('width', w)) {
+                this.style.setProperty('--_width', w);
+            }
+            else {
+                this.style.removeProperty('--_width');
+            }
         }
         if (changed.has('value')) {
             this._internals.setFormValue(this.value);
@@ -153,17 +159,17 @@ __decorate([
     property({ type: Boolean, reflect: true })
 ], NLDDPasswordField.prototype, "masked", void 0);
 __decorate([
-    property({ type: String, attribute: 'show-text' })
-], NLDDPasswordField.prototype, "showText", void 0);
+    property({ type: String, attribute: 'show-button-text' })
+], NLDDPasswordField.prototype, "showButtonText", void 0);
 __decorate([
-    property({ type: String, attribute: 'hide-text' })
-], NLDDPasswordField.prototype, "hideText", void 0);
+    property({ type: String, attribute: 'hide-button-text' })
+], NLDDPasswordField.prototype, "hideButtonText", void 0);
 __decorate([
-    property({ type: String, attribute: 'show-accessible-label' })
-], NLDDPasswordField.prototype, "showAccessibleLabel", void 0);
+    property({ type: String, attribute: 'show-button-accessible-label' })
+], NLDDPasswordField.prototype, "showButtonAccessibleLabel", void 0);
 __decorate([
-    property({ type: String, attribute: 'hide-accessible-label' })
-], NLDDPasswordField.prototype, "hideAccessibleLabel", void 0);
+    property({ type: String, attribute: 'hide-button-accessible-label' })
+], NLDDPasswordField.prototype, "hideButtonAccessibleLabel", void 0);
 __decorate([
     property({ type: Boolean, reflect: true })
 ], NLDDPasswordField.prototype, "readonly", void 0);

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

@@ -1 +1 @@
-{"version":3,"file":"password-field.js","sourceRoot":"","sources":["../../../../src/components/inputs/password-field/password-field.ts"],"names":[],"mappings":";;;;;;AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4BG;AACH,OAAO,EAAE,UAAU,EAAuB,MAAM,KAAK,CAAC;AACtD,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AACnE,OAAO,EAAE,mBAAmB,EAAE,MAAM,4BAA4B,CAAC;AACjE,OAAO,EAAE,qBAAqB,EAAE,MAAM,8BAA8B,CAAC;AAG9D,IAAM,iBAAiB,GAAvB,MAAM,iBAAkB,SAAQ,UAAU;IAA1C;;QAUE,eAAU,GAAG,IAAI,CAAC,eAAe,EAAE,CAAC;QAEpC,kBAAa,GAAG,EAAE,CAAC;QAG3B,SAAI,GAAgB,IAAI,CAAC;QAGzB,UAAK,GAAG,EAAE,CAAC;QAGX,YAAO,GAAG,EAAE,CAAC;QAGb,gBAAW,GAAG,EAAE,CAAC;QAGjB,UAAK,GAAG,KAAK,CAAC;QAGd,YAAO,GAAG,KAAK,CAAC;QAGhB,aAAQ,GAAG,KAAK,CAAC;QAGjB,WAAM,GAAG,IAAI,CAAC;QAEd,gFAAgF;QAEhF,aAAQ,GAAG,MAAM,CAAC;QAElB,kFAAkF;QAElF,aAAQ,GAAG,SAAS,CAAC;QAErB,uGAAuG;QAEvG,wBAAmB,GAAG,iBAAiB,CAAC;QAExC,yGAAyG;QAEzG,wBAAmB,GAAG,oBAAoB,CAAC;QAG3C,aAAQ,GAAG,KAAK,CAAC;QAGjB,aAAQ,GAAG,KAAK,CAAC;QAGjB,SAAI,GAAG,EAAE,CAAC;QAGV,iBAAY,GAAG,EAAE,CAAC;QAElB,6FAA6F;QAE7F,oBAAe,GAAG,EAAE,CAAC;QAGrB,oBAAe,GAAG,EAAE,CAAC;QAErB,oGAAoG;QAEpG,UAAK,GAAG,EAAE,CAAC;IAmEZ,CAAC;IA9DS,YAAY;QACpB,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC,KAAK,CAAC;IACjC,CAAC;IAEQ,OAAO,CAAC,OAAuB;QACvC,IAAI,OAAO,CAAC,GAAG,CAAC,OAAO,CAAC,EAAE,CAAC;YAC1B,IAAI,CAAC,KAAK,CAAC,KAAK,GAAG,IAAI,CAAC,KAAK,IAAI,EAAE,CAAC;QACrC,CAAC;QACD,IAAI,OAAO,CAAC,GAAG,CAAC,OAAO,CAAC,EAAE,CAAC;YAC1B,IAAI,CAAC,UAAU,CAAC,YAAY,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;QAC1C,CAAC;IACF,CAAC;IAED,iBAAiB;QAChB,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,aAAa,CAAC;IACjC,CAAC;IAED,oBAAoB,CAAC,QAAiB;QACrC,IAAI,CAAC,QAAQ,GAAG,QAAQ,CAAC;IAC1B,CAAC;IAED,wBAAwB,CAAC,KAAsC;QAC9D,IAAI,OAAO,KAAK,KAAK,QAAQ;YAAE,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC;IACnD,CAAC;IAEM,YAAY,CAAC,CAAQ;QAC3B,CAAC,CAAC,eAAe,EAAE,CAAC;QACpB,MAAM,KAAK,GAAG,CAAC,CAAC,MAA0B,CAAC;QAC3C,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC,KAAK,CAAC;QACzB,IAAI,CAAC,aAAa,CAAC,IAAI,WAAW,CAAC,OAAO,EAAE;YAC3C,MAAM,EAAE,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE;YAC7B,OAAO,EAAE,IAAI;YACb,QAAQ,EAAE,IAAI;SACd,CAAC,CAAC,CAAC;IACL,CAAC;IAEM,aAAa,CAAC,CAAQ;QAC5B,CAAC,CAAC,eAAe,EAAE,CAAC;QACpB,MAAM,KAAK,GAAG,CAAC,CAAC,MAA0B,CAAC;QAC3C,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC,KAAK,CAAC;QACzB,IAAI,CAAC,aAAa,CAAC,IAAI,WAAW,CAAC,QAAQ,EAAE;YAC5C,MAAM,EAAE,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE;YAC7B,OAAO,EAAE,IAAI;YACb,QAAQ,EAAE,IAAI;SACd,CAAC,CAAC,CAAC;IACL,CAAC;IAEM,aAAa;QACnB,IAAI,CAAC,MAAM,GAAG,CAAC,IAAI,CAAC,MAAM,CAAC;IAC5B,CAAC;IAEM,KAAK;QACX,IAAI,CAAC,MAAM,EAAE,KAAK,EAAE,CAAC;IACtB,CAAC;IAEM,IAAI;QACV,IAAI,CAAC,MAAM,EAAE,IAAI,EAAE,CAAC;IACrB,CAAC;IAEQ,MAAM;QACd,OAAO,qBAAqB,CAAC,IAAI,CAAC,CAAC;IACpC,CAAC;;AA5IM,gCAAc,GAAG,IAAI,AAAP,CAAQ;AAEb,mCAAiB,GAAG;IACnC,GAAG,UAAU,CAAC,iBAAiB;IAC/B,cAAc,EAAE,IAAI;CACpB,AAHgC,CAG/B;AAEc,wBAAM,GAAG,mBAAmB,AAAtB,CAAuB;AAO7C;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;+CACjB;AAGzB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;gDAChB;AAGX;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,SAAS,EAAE,UAAU,EAAE,CAAC;kDACrC;AAGb;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;sDACV;AAGjB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;gDAC7B;AAGd;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;kDAC3B;AAGhB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;mDAC1B;AAGjB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;iDAC7B;AAId;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,SAAS,EAAE,WAAW,EAAE,CAAC;mDACjC;AAIlB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,SAAS,EAAE,WAAW,EAAE,CAAC;mDAC9B;AAIrB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,SAAS,EAAE,uBAAuB,EAAE,CAAC;8DACvB;AAIxC;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,SAAS,EAAE,uBAAuB,EAAE,CAAC;8DACpB;AAG3C;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;mDAC1B;AAGjB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;mDAC1B;AAGjB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;+CAChC;AAGV;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;uDACT;AAIlB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,SAAS,EAAE,kBAAkB,EAAE,CAAC;0DACrC;AAGrB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,SAAS,EAAE,mBAAmB,EAAE,CAAC;0DACtC;AAIrB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;gDAC/B;AAGH;IADP,KAAK,CAAC,wBAAwB,CAAC;iDACE;AA9EtB,iBAAiB;IAD7B,aAAa,CAAC,qBAAqB,CAAC;GACxB,iBAAiB,CA8I7B"}
+{"version":3,"file":"password-field.js","sourceRoot":"","sources":["../../../../src/components/inputs/password-field/password-field.ts"],"names":[],"mappings":"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"}

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

@@ -1 +1 @@
-{"version":3,"file":"password-field.styles.d.ts","sourceRoot":"","sources":["../../../../src/components/inputs/password-field/password-field.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,mBAAmB,yBA6N/B,CAAC"}
+{"version":3,"file":"password-field.styles.d.ts","sourceRoot":"","sources":["../../../../src/components/inputs/password-field/password-field.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,mBAAmB,yBAgO/B,CAAC"}

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

@@ -7,8 +7,11 @@ export const passwordFieldStyles = css `
 	:host {
 		--_background-color: var(--semantics-input-fields-background-color);
 		--_z-index-button-focus: 1;
+		--_width: auto;
 
 		display: block;
+		width: var(--_width);
+		max-width: 100%;
 		-webkit-tap-highlight-color: transparent;
 	}
 
@@ -21,25 +24,25 @@ export const passwordFieldStyles = css `
 
 	.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);
+		overflow: hidden;
+		flex-direction: row;
+		align-items: center;
 	}
 
 	: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);
+		min-height: var(--semantics-controls-sm-min-size);
+		padding-left: calc(var(--semantics-controls-sm-inline-padding) - var(--semantics-input-fields-border-thickness));
 	}
 
 	: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);
+		min-height: var(--semantics-controls-md-min-size);
+		padding-left: calc(var(--semantics-controls-md-inline-padding) - var(--semantics-input-fields-border-thickness));
 	}
 
 	:host([valid]) .password-field {
@@ -78,16 +81,16 @@ export const passwordFieldStyles = css `
 	/* # 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;
+		background: transparent;
+		min-width: 0;
+		overflow: hidden;
+		padding: 0;
+		flex-grow: 1;
+		color: var(--semantics-content-color);
 		appearance: none;
 	}
 
@@ -138,9 +141,9 @@ export const passwordFieldStyles = css `
 
 	.password-field__input-fade {
 		position: relative;
+		width: 0;
 		flex-shrink: 0;
 		align-self: stretch;
-		width: 0;
 	}
 
 	.password-field__input-fade::after {
@@ -149,10 +152,10 @@ export const passwordFieldStyles = css `
 		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;
+		width: var(--primitives-space-8);
 	}
 
 
@@ -160,10 +163,10 @@ export const passwordFieldStyles = css `
 
 	.password-field__validation-icon-area {
 		display: flex;
+		height: 100%;
 		align-items: center;
 		justify-content: center;
 		flex-shrink: 0;
-		height: 100%;
 	}
 
 	:host([size='sm']) .password-field__validation-icon-area {
@@ -199,10 +202,10 @@ export const passwordFieldStyles = css `
 
 	.password-field__visibility-toggle-button {
 		display: flex;
+		height: 100%;
 		align-items: center;
 		justify-content: center;
 		flex-shrink: 0;
-		height: 100%;
 	}
 
 	:host([size='sm']) .password-field__visibility-toggle-button {

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

@@ -1 +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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA6NrC,CAAC"}
+{"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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAgOrC,CAAC"}

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

@@ -26,8 +26,8 @@ function renderValidationIcon(component) {
 }
 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;
+    const label = component.masked ? component.showButtonText : component.hideButtonText;
+    const accessibleLabel = component.masked ? component.showButtonAccessibleLabel : component.hideButtonAccessibleLabel;
     return html `
 		<div class="password-field__visibility-toggle-button">
 			<nldd-button
@@ -37,7 +37,7 @@ function renderVisibilityToggle(component) {
 				accessible-label=${accessibleLabel}
 				?disabled=${component.disabled}
 				@click=${component._handleToggle}
-				@mousedown=${(e) => e.preventDefault()}
+				@pointerdown=${(e) => e.preventDefault()}
 			></nldd-button>
 		</div>
 	`;

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

@@ -1 +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"}
+{"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,cAAc,CAAC,CAAC,CAAC,SAAS,CAAC,cAAc,CAAC;IACrF,MAAM,eAAe,GAAG,SAAS,CAAC,MAAM,CAAC,CAAC,CAAC,SAAS,CAAC,yBAAyB,CAAC,CAAC,CAAC,SAAS,CAAC,yBAAyB,CAAC;IAErH,OAAO,IAAI,CAAA;;;WAGD,UAAU;;WAEV,KAAK;uBACO,eAAe;gBACtB,SAAS,CAAC,QAAQ;aACrB,SAAS,CAAC,aAAa;mBACjB,CAAC,CAAQ,EAAE,EAAE,CAAC,CAAC,CAAC,cAAc,EAAE;;;EAGjD,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.styles.js

@@ -6,11 +6,11 @@ export const radioButtonStyles = css `
 
 	: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);
+		align-items: center;
+		justify-content: center;
 		-webkit-tap-highlight-color: transparent;
 	}
 
@@ -24,11 +24,11 @@ export const radioButtonStyles = css `
 	.radio-button__input {
 		position: absolute;
 		inset: 0;
-		width: 100%;
-		height: 100%;
-		margin: 0;
 		opacity: 0;
 		z-index: 1;
+		margin: 0;
+		width: 100%;
+		height: 100%;
 	}
 
 
@@ -37,11 +37,11 @@ export const radioButtonStyles = css `
 	.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);
+		width: var(--semantics-controls-xs-min-size);
+		height: var(--semantics-controls-xs-min-size);
 	}
 
 
@@ -51,12 +51,12 @@ export const radioButtonStyles = css `
 		position: absolute;
 		top: 50%;
 		left: 50%;
-		transform: translate(-50%, -50%) scale(0);
-		width: var(--primitives-space-20);
-		height: var(--primitives-space-20);
+		box-sizing: border-box;
 		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;
+		width: var(--primitives-space-20);
+		height: var(--primitives-space-20);
+		transform: translate(-50%, -50%) scale(0);
 	}
 
 

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

@@ -17,10 +17,10 @@ export const radioButtonFieldStyles = css `
 
 	.radio-button-field {
 		display: flex;
+		min-height: var(--semantics-controls-md-min-size);
 		flex-direction: row;
 		align-items: flex-start;
 		gap: var(--primitives-space-8);
-		min-height: var(--semantics-controls-md-min-size);
 	}
 
 
@@ -28,8 +28,8 @@ export const radioButtonFieldStyles = css `
 
 	.radio-button-field__control {
 		display: flex;
-		flex-shrink: 0;
 		min-height: var(--semantics-controls-md-min-size);
+		flex-shrink: 0;
 		align-items: center;
 	}
 
@@ -37,12 +37,12 @@ export const radioButtonFieldStyles = css `
 	/* # Label */
 
 	.radio-button-field__label {
-		padding-top: calc((var(--semantics-controls-md-min-size) - 1em * var(--primitives-line-height-snug)) / 2);
 		display: flex;
+		cursor: default;
+		padding-top: calc((var(--semantics-controls-md-min-size) - 1em * var(--primitives-line-height-snug)) / 2);
 		flex-grow: 1;
 		font: var(--primitives-font-body-md-regular-snug);
 		color: var(--semantics-content-color);
-		cursor: default;
 	}
 
 	:host([disabled]) .radio-button-field__label {

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

@@ -16,7 +16,7 @@
  * @attr {string}  name                - Input name for form submission
  * @attr {boolean} show-search-button - When set, shows a search button on the right
  * @attr {object}  translations        - Override translation keys; unset keys fall back to Dutch
- * @attr {string}  width               - Optional fixed width (any CSS length, e.g. "240px"). Default: full-width.
+ * @attr {string}  width               - Optional fixed width (any CSS length, e.g. "240px"). Default: stretches to fill container.
  *
  * @fires input  - When the input value changes; detail: { value: string }
  * @fires change - When the input value is committed; detail: { value: string }

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

@@ -1 +1 @@
-{"version":3,"file":"search-field.d.ts","sourceRoot":"","sources":["../../../../src/components/inputs/search-field/search-field.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AACH,OAAO,EAAE,UAAU,EAAE,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;AAKtD,OAAO,KAAK,EAAE,2BAA2B,EAAE,MAAM,wBAAwB,CAAC;AAC1E,OAAO,4CAA4C,CAAC;AACpD,OAAO,kCAAkC,CAAC;AAC1C,OAAO,8BAA8B,CAAC;AAEtC,MAAM,MAAM,eAAe,GAAG,IAAI,GAAG,IAAI,CAAC;AAE1C,qBACa,eAAgB,SAAQ,UAAU;IAC9C,MAAM,CAAC,cAAc,UAAQ;IAE7B,OAAgB,MAAM,0BAAqB;IAE3C,OAAO,CAAC,UAAU,CAA0B;IAE5C,OAAO,CAAC,aAAa,CAAM;IAG3B,KAAK,SAAM;IAGX,WAAW,SAAY;IAEvB;;;;yFAIqF;IAErF,eAAe,SAAM;IAGrB,IAAI,EAAE,eAAe,CAAQ;IAG7B,QAAQ,UAAS;IAGjB,IAAI,SAAM;IAGV,gBAAgB,UAAS;IAEzB,4EAA4E;IAE5E,YAAY,EAAE,OAAO,CAAC,2BAA2B,CAAC,CAAM;IAExD,oGAAoG;IAEpG,KAAK,SAAM;IAGX,MAAM,EAAG,gBAAgB,CAAC;IAEjB,YAAY,IAAI,IAAI;IAIpB,OAAO,CAAC,OAAO,EAAE,cAAc,GAAG,IAAI;IAS/C,iBAAiB,IAAI,IAAI;IAIzB,oBAAoB,CAAC,QAAQ,EAAE,OAAO,GAAG,IAAI;IAI7C,wBAAwB,CAAC,KAAK,EAAE,IAAI,GAAG,MAAM,GAAG,QAAQ,GAAG,IAAI,GAAG,IAAI;IAM/D,EAAE,CAAC,GAAG,EAAE,MAAM,2BAA2B,GAAG,MAAM;IAMlD,YAAY,CAAC,CAAC,EAAE,KAAK,GAAG,IAAI;IAU5B,aAAa,CAAC,CAAC,EAAE,KAAK,GAAG,IAAI;IAU7B,cAAc,CAAC,CAAC,EAAE,aAAa,GAAG,IAAI;IAMtC,YAAY,IAAI,IAAI;IAepB,aAAa,IAAI,IAAI;IAI5B,OAAO,CAAC,eAAe;IAQvB;;;OAGG;IACM,KAAK,CAAC,OAAO,CAAC,EAAE,YAAY,GAAG,IAAI;IAInC,MAAM;CAGf;AAED,OAAO,CAAC,MAAM,CAAC;IACd,UAAU,qBAAqB;QAC9B,mBAAmB,EAAE,eAAe,CAAC;KACrC;CACD"}
+{"version":3,"file":"search-field.d.ts","sourceRoot":"","sources":["../../../../src/components/inputs/search-field/search-field.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AACH,OAAO,EAAE,UAAU,EAAE,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;AAKtD,OAAO,KAAK,EAAE,2BAA2B,EAAE,MAAM,wBAAwB,CAAC;AAC1E,OAAO,4CAA4C,CAAC;AACpD,OAAO,kCAAkC,CAAC;AAC1C,OAAO,8BAA8B,CAAC;AAEtC,MAAM,MAAM,eAAe,GAAG,IAAI,GAAG,IAAI,CAAC;AAE1C,qBACa,eAAgB,SAAQ,UAAU;IAC9C,MAAM,CAAC,cAAc,UAAQ;IAE7B,OAAgB,MAAM,0BAAqB;IAE3C,OAAO,CAAC,UAAU,CAA0B;IAE5C,OAAO,CAAC,aAAa,CAAM;IAG3B,KAAK,SAAM;IAGX,WAAW,SAAY;IAEvB;;;;yFAIqF;IAErF,eAAe,SAAM;IAGrB,IAAI,EAAE,eAAe,CAAQ;IAG7B,QAAQ,UAAS;IAGjB,IAAI,SAAM;IAGV,gBAAgB,UAAS;IAEzB,4EAA4E;IAE5E,YAAY,EAAE,OAAO,CAAC,2BAA2B,CAAC,CAAM;IAExD,oGAAoG;IAEpG,KAAK,SAAM;IAGX,MAAM,EAAG,gBAAgB,CAAC;IAEjB,YAAY,IAAI,IAAI;IAIpB,OAAO,CAAC,OAAO,EAAE,cAAc,GAAG,IAAI;IAc/C,iBAAiB,IAAI,IAAI;IAIzB,oBAAoB,CAAC,QAAQ,EAAE,OAAO,GAAG,IAAI;IAI7C,wBAAwB,CAAC,KAAK,EAAE,IAAI,GAAG,MAAM,GAAG,QAAQ,GAAG,IAAI,GAAG,IAAI;IAM/D,EAAE,CAAC,GAAG,EAAE,MAAM,2BAA2B,GAAG,MAAM;IAMlD,YAAY,CAAC,CAAC,EAAE,KAAK,GAAG,IAAI;IAU5B,aAAa,CAAC,CAAC,EAAE,KAAK,GAAG,IAAI;IAU7B,cAAc,CAAC,CAAC,EAAE,aAAa,GAAG,IAAI;IAMtC,YAAY,IAAI,IAAI;IAepB,aAAa,IAAI,IAAI;IAI5B,OAAO,CAAC,eAAe;IAQvB;;;OAGG;IACM,KAAK,CAAC,OAAO,CAAC,EAAE,YAAY,GAAG,IAAI;IAInC,MAAM;CAGf;AAED,OAAO,CAAC,MAAM,CAAC;IACd,UAAU,qBAAqB;QAC9B,mBAAmB,EAAE,eAAe,CAAC;KACrC;CACD"}

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

@@ -22,7 +22,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
  * @attr {string}  name                - Input name for form submission
  * @attr {boolean} show-search-button - When set, shows a search button on the right
  * @attr {object}  translations        - Override translation keys; unset keys fall back to Dutch
- * @attr {string}  width               - Optional fixed width (any CSS length, e.g. "240px"). Default: full-width.
+ * @attr {string}  width               - Optional fixed width (any CSS length, e.g. "240px"). Default: stretches to fill container.
  *
  * @fires input  - When the input value changes; detail: { value: string }
  * @fires change - When the input value is committed; detail: { value: string }
@@ -63,7 +63,13 @@ let NLDDSearchField = class NLDDSearchField extends LitElement {
     }
     updated(changed) {
         if (changed.has('width')) {
-            this.style.width = this.width || '';
+            const w = this.width;
+            if (w && w !== 'full' && CSS.supports('width', w)) {
+                this.style.setProperty('--_width', w);
+            }
+            else {
+                this.style.removeProperty('--_width');
+            }
         }
         if (changed.has('value')) {
             this._internals.setFormValue(this.value);

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

@@ -1 +1 @@
-{"version":3,"file":"search-field.js","sourceRoot":"","sources":["../../../../src/components/inputs/search-field/search-field.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"search-field.js","sourceRoot":"","sources":["../../../../src/components/inputs/search-field/search-field.ts"],"names":[],"mappings":";;;;;;AAAA;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AACH,OAAO,EAAE,UAAU,EAAuB,MAAM,KAAK,CAAC;AACtD,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AACnE,OAAO,EAAE,iBAAiB,EAAE,MAAM,0BAA0B,CAAC;AAC7D,OAAO,EAAE,mBAAmB,EAAE,MAAM,4BAA4B,CAAC;AACjE,OAAO,EAAE,2BAA2B,EAAE,MAAM,wBAAwB,CAAC;AAErE,OAAO,4CAA4C,CAAC;AACpD,OAAO,kCAAkC,CAAC;AAC1C,OAAO,8BAA8B,CAAC;AAK/B,IAAM,eAAe,GAArB,MAAM,eAAgB,SAAQ,UAAU;IAAxC;;QAKE,eAAU,GAAG,IAAI,CAAC,eAAe,EAAE,CAAC;QAEpC,kBAAa,GAAG,EAAE,CAAC;QAG3B,UAAK,GAAG,EAAE,CAAC;QAGX,gBAAW,GAAG,QAAQ,CAAC;QAEvB;;;;6FAIqF;QAErF,oBAAe,GAAG,EAAE,CAAC;QAGrB,SAAI,GAAoB,IAAI,CAAC;QAG7B,aAAQ,GAAG,KAAK,CAAC;QAGjB,SAAI,GAAG,EAAE,CAAC;QAGV,qBAAgB,GAAG,KAAK,CAAC;QAEzB,4EAA4E;QAE5E,iBAAY,GAAyC,EAAE,CAAC;QAExD,oGAAoG;QAEpG,UAAK,GAAG,EAAE,CAAC;IA2GZ,CAAC;IAtGS,YAAY;QACpB,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC,KAAK,CAAC;IACjC,CAAC;IAEQ,OAAO,CAAC,OAAuB;QACvC,IAAI,OAAO,CAAC,GAAG,CAAC,OAAO,CAAC,EAAE,CAAC;YAC1B,MAAM,CAAC,GAAG,IAAI,CAAC,KAAK,CAAC;YACrB,IAAI,CAAC,IAAI,CAAC,KAAK,MAAM,IAAI,GAAG,CAAC,QAAQ,CAAC,OAAO,EAAE,CAAC,CAAC,EAAE,CAAC;gBACnD,IAAI,CAAC,KAAK,CAAC,WAAW,CAAC,UAAU,EAAE,CAAC,CAAC,CAAC;YACvC,CAAC;iBAAM,CAAC;gBACP,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,UAAU,CAAC,CAAC;YACvC,CAAC;QACF,CAAC;QACD,IAAI,OAAO,CAAC,GAAG,CAAC,OAAO,CAAC,EAAE,CAAC;YAC1B,IAAI,CAAC,UAAU,CAAC,YAAY,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;QAC1C,CAAC;IACF,CAAC;IAED,iBAAiB;QAChB,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,aAAa,CAAC;IACjC,CAAC;IAED,oBAAoB,CAAC,QAAiB;QACrC,IAAI,CAAC,QAAQ,GAAG,QAAQ,CAAC;IAC1B,CAAC;IAED,wBAAwB,CAAC,KAAsC;QAC9D,IAAI,OAAO,KAAK,KAAK,QAAQ;YAAE,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC;IACnD,CAAC;IAED,4EAA4E;IAErE,EAAE,CAAC,GAAsC;QAC/C,OAAO,IAAI,CAAC,YAAY,CAAC,GAAG,CAAC,IAAI,2BAA2B,CAAC,GAAG,CAAC,CAAC;IACnE,CAAC;IAED,0EAA0E;IAEnE,YAAY,CAAC,CAAQ;QAC3B,MAAM,KAAK,GAAG,CAAC,CAAC,MAA0B,CAAC;QAC3C,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC,KAAK,CAAC;QACzB,IAAI,CAAC,aAAa,CAAC,IAAI,WAAW,CAAC,OAAO,EAAE;YAC3C,MAAM,EAAE,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE;YAC7B,OAAO,EAAE,IAAI;YACb,QAAQ,EAAE,IAAI;SACd,CAAC,CAAC,CAAC;IACL,CAAC;IAEM,aAAa,CAAC,CAAQ;QAC5B,MAAM,KAAK,GAAG,CAAC,CAAC,MAA0B,CAAC;QAC3C,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC,KAAK,CAAC;QACzB,IAAI,CAAC,aAAa,CAAC,IAAI,WAAW,CAAC,QAAQ,EAAE;YAC5C,MAAM,EAAE,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE;YAC7B,OAAO,EAAE,IAAI;YACb,QAAQ,EAAE,IAAI;SACd,CAAC,CAAC,CAAC;IACL,CAAC;IAEM,cAAc,CAAC,CAAgB;QACrC,IAAI,CAAC,CAAC,GAAG,KAAK,OAAO,EAAE,CAAC;YACvB,IAAI,CAAC,eAAe,EAAE,CAAC;QACxB,CAAC;IACF,CAAC;IAEM,YAAY;QAClB,IAAI,CAAC,KAAK,GAAG,EAAE,CAAC;QAChB,IAAI,CAAC,aAAa,CAAC,IAAI,WAAW,CAAC,OAAO,EAAE;YAC3C,MAAM,EAAE,EAAE,KAAK,EAAE,EAAE,EAAE;YACrB,OAAO,EAAE,IAAI;YACb,QAAQ,EAAE,IAAI;SACd,CAAC,CAAC,CAAC;QACJ,IAAI,CAAC,aAAa,CAAC,IAAI,WAAW,CAAC,QAAQ,EAAE;YAC5C,MAAM,EAAE,EAAE,KAAK,EAAE,EAAE,EAAE;YACrB,OAAO,EAAE,IAAI;YACb,QAAQ,EAAE,IAAI;SACd,CAAC,CAAC,CAAC;QACJ,IAAI,CAAC,MAAM,EAAE,KAAK,EAAE,CAAC;IACtB,CAAC;IAEM,aAAa;QACnB,IAAI,CAAC,eAAe,EAAE,CAAC;IACxB,CAAC;IAEO,eAAe;QACtB,IAAI,CAAC,aAAa,CAAC,IAAI,WAAW,CAAC,QAAQ,EAAE;YAC5C,MAAM,EAAE,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE;YAC7B,OAAO,EAAE,IAAI;YACb,QAAQ,EAAE,IAAI;SACd,CAAC,CAAC,CAAC;IACL,CAAC;IAED;;;OAGG;IACM,KAAK,CAAC,OAAsB;QACpC,IAAI,CAAC,MAAM,EAAE,KAAK,CAAC,OAAO,CAAC,CAAC;IAC7B,CAAC;IAEQ,MAAM;QACd,OAAO,mBAAmB,CAAC,IAAI,CAAC,CAAC;IAClC,CAAC;;AAlJM,8BAAc,GAAG,IAAI,AAAP,CAAQ;AAEb,sBAAM,GAAG,iBAAiB,AAApB,CAAqB;AAO3C;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;8CAChB;AAGX;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;oDACJ;AAQvB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,SAAS,EAAE,kBAAkB,EAAE,CAAC;wDACrC;AAGrB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;6CACb;AAG7B;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;iDAC1B;AAGjB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;6CAChC;AAGV;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,SAAS,EAAE,oBAAoB,EAAE,CAAC;yDACnD;AAIzB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;qDAC6B;AAIxD;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;8CAC/B;AAGX;IADC,KAAK,CAAC,sBAAsB,CAAC;+CACJ;AA5Cd,eAAe;IAD3B,aAAa,CAAC,mBAAmB,CAAC;GACtB,eAAe,CAoJ3B"}

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

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

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

@@ -7,8 +7,11 @@ export const searchFieldStyles = css `
 	:host {
 		--_background-color: var(--semantics-input-fields-background-color);
 		--_z-index-button-focus: 1;
+		--_width: auto;
 
 		display: block;
+		width: var(--_width);
+		max-width: 100%;
 		min-width: 0;
 		-webkit-tap-highlight-color: transparent;
 	}
@@ -28,23 +31,23 @@ export const searchFieldStyles = css `
 	.search-field {
 		position: relative;
 		display: flex;
-		flex-direction: row;
-		align-items: center;
 		box-sizing: border-box;
-		width: 100%;
-		background-color: var(--_background-color);
 		border: var(--semantics-input-fields-border);
+		background-color: var(--_background-color);
+		width: 100%;
+		flex-direction: row;
+		align-items: center;
 	}
 
 	:host([size='sm']) .search-field {
-		min-height: var(--semantics-controls-sm-min-size);
 		border-radius: var(--semantics-controls-sm-corner-radius);
+		min-height: var(--semantics-controls-sm-min-size);
 	}
 
 	:host([size='md']) .search-field,
 	:host(:not([size])) .search-field {
-		min-height: var(--semantics-controls-md-min-size);
 		border-radius: var(--semantics-controls-md-corner-radius);
+		min-height: var(--semantics-controls-md-min-size);
 	}
 
 	.search-field:has(.search-field__input:focus-visible) {
@@ -70,32 +73,32 @@ export const searchFieldStyles = css `
 	}
 
 	:host([size='sm']) .search-field__search-icon {
+		margin-inline: calc((var(--semantics-controls-sm-min-size) - var(--primitives-space-20)) / 2 - var(--semantics-input-fields-border-thickness));
 		width: var(--primitives-space-20);
 		height: var(--primitives-space-20);
-		margin-inline: calc((var(--semantics-controls-sm-min-size) - var(--primitives-space-20)) / 2 - var(--semantics-input-fields-border-thickness));
 	}
 
 	:host([size='md']) .search-field__search-icon,
 	:host(:not([size])) .search-field__search-icon {
+		margin-inline: calc((var(--semantics-controls-md-min-size) - var(--primitives-space-24)) / 2 - var(--semantics-input-fields-border-thickness));
 		width: var(--primitives-space-24);
 		height: var(--primitives-space-24);
-		margin-inline: calc((var(--semantics-controls-md-min-size) - var(--primitives-space-24)) / 2 - var(--semantics-input-fields-border-thickness));
 	}
 
 
 	/* # Input */
 
 	.search-field__input {
-		appearance: none;
+		box-sizing: border-box;
+		margin: 0;
 		border: none;
+		outline: none;
 		background: transparent;
-		margin: 0;
+		min-width: 0;
 		padding: 0;
-		outline: none;
-		box-sizing: border-box;
 		flex: 1;
-		min-width: 0;
 		color: var(--semantics-content-color);
+		appearance: none;
 	}
 
 	:host([size='sm']) .search-field__input {
@@ -125,9 +128,9 @@ export const searchFieldStyles = css `
 
 	.search-field__input-fade {
 		position: relative;
+		width: 0;
 		flex-shrink: 0;
 		align-self: stretch;
-		width: 0;
 	}
 
 	.search-field__input-fade::after {
@@ -136,9 +139,9 @@ export const searchFieldStyles = css `
 		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;
+		width: var(--primitives-space-8);
 	}
 
 	:host([size='sm']) .search-field__input-fade::after {
@@ -155,9 +158,9 @@ export const searchFieldStyles = css `
 
 	.search-field__end {
 		display: flex;
+		position: relative;
 		flex-shrink: 0;
 		align-items: center;
-		position: relative;
 	}
 
 	:host([size='sm']) .search-field__end {

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

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

package/dist/components/inputs/segmented-control/segmented-control.d.ts

@@ -11,7 +11,7 @@
  * @attr {string}  type          - Input type: 'radio' | 'checkbox' (default: 'radio')
  * @attr {string}  variant       - Content type for all items: 'text' | 'icon' (default: 'text')
  * @attr {boolean} disabled      - Disabled state for all items
- * @attr {boolean} full-width    - Stretches to fill the container width
+ * @attr {string}  width         - Width mode: 'full' (stretches to container), 'fit-content' (per-item content size), or any CSS length (e.g. '240px')
  * @attr {string}  name          - Name for form submission, forwarded to native inputs
  *
  * @fires change - When selection changes; detail: { value: string } for radio,
@@ -77,7 +77,13 @@ export declare class NLDDSegmentedControl extends LitElement {
     /** Content type applied to all items. Mixing text and icon items is not supported. */
     variant: SegmentedControlVariant;
     disabled: boolean;
-    fullWidth: boolean;
+    /**
+     * Width mode: 'full' (stretch to container, equal-width items),
+     * 'fit-content' (per-item content size), or any CSS length (e.g. '240px',
+     * '50%') which sets the host width with equal-width items. Default is
+     * content-based outer with equal-width items.
+     */
+    width: string;
     name: string;
     /** Accessible name for the group (aria-label). */
     accessibleLabel: string;

package/dist/components/inputs/segmented-control/segmented-control.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"segmented-control.d.ts","sourceRoot":"","sources":["../../../../src/components/inputs/segmented-control/segmented-control.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAkCG;AACH,OAAO,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AAUjC,OAAO,8BAA8B,CAAC;AAEtC,MAAM,MAAM,oBAAoB,GAAG,IAAI,GAAG,IAAI,CAAC;AAC/C,MAAM,MAAM,oBAAoB,GAAG,OAAO,GAAG,UAAU,CAAC;AACxD,MAAM,MAAM,uBAAuB,GAAG,MAAM,GAAG,MAAM,CAAC;AAKtD,qBACa,wBAAyB,SAAQ,UAAU;IACvD,OAAgB,MAAM,0BAA8B;IAGpD,KAAK,SAAM;IAGX,QAAQ,UAAS;IAGjB,QAAQ,UAAS;IAEjB,iEAAiE;IAEjE,IAAI,EAAE,oBAAoB,CAAQ;IAElC,iEAAiE;IAEjE,OAAO,EAAE,uBAAuB,CAAU;IAE1C,iEAAiE;IAEjE,SAAS,EAAE,oBAAoB,CAAW;IAE1C,iEAAiE;IAEjE,SAAS,SAAM;IAEf,gGAAgG;IAEhG,IAAI,SAAM;IAEV,oEAAoE;IAEpE,IAAI,SAAM;IAEH,aAAa,CAAC,CAAC,EAAE,KAAK,GAAG,IAAI;IAS3B,MAAM;CAGf;AAKD,qBACa,oBAAqB,SAAQ,UAAU;IACnD,MAAM,CAAC,cAAc,UAAQ;IAE7B,OAAgB,MAAM,0BAA0B;IAEhD,OAAO,CAAC,UAAU,CAA0B;IAE5C,OAAO,CAAC,aAAa,CAAM;IAC3B,OAAO,CAAC,cAAc,CAAgB;IAEtC,qCAAqC;IAErC,KAAK,SAAM;IAEX;;;;OAIG;IAEH,MAAM,EAAE,MAAM,EAAE,CAAM;IAGtB,IAAI,EAAE,oBAAoB,CAAQ;IAGlC,IAAI,EAAE,oBAAoB,CAAW;IAErC,sFAAsF;IAEtF,OAAO,EAAE,uBAAuB,CAAU;IAG1C,QAAQ,UAAS;IAGjB,SAAS,UAAS;IAGlB,IAAI,SAAM;IAEV,kDAAkD;IAElD,eAAe,SAAM;IAErB,yDAAyD;IAEzD,oBAAoB,SAAM;IAIjB,iBAAiB,IAAI,IAAI;IASzB,oBAAoB,IAAI,IAAI;IAM5B,YAAY,IAAI,IAAI;IAW7B,OAAO,CAAC,cAAc;IAetB,iBAAiB,IAAI,IAAI;IAKzB,oBAAoB,CAAC,QAAQ,EAAE,OAAO,GAAG,IAAI;IAI7C,wBAAwB,CAAC,KAAK,EAAE,QAAQ,GAAG,MAAM,GAAG,IAAI,GAAG,IAAI;IAStD,OAAO,CAAC,iBAAiB,EAAE,GAAG,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,IAAI;IAyC/D,OAAO,CAAC,SAAS;IAUjB,OAAO,CAAC,kBAAkB;IAI1B,OAAO,CAAC,UAAU;IA+BlB,OAAO,CAAC,MAAM,CAAC,UAAU,CAAK;IAE9B,OAAO,KAAK,SAAS,GAKpB;IAED,OAAO,CAAC,cAAc,CAAM;IAI5B,OAAO,CAAC,iBAAiB,CA0BvB;IAEF;;;;;OAKG;IACH,OAAO,CAAC,cAAc,CA2CpB;IAEK,aAAa,IAAI,IAAI;IAInB,MAAM;CAGf;AAED,OAAO,CAAC,MAAM,CAAC;IACd,UAAU,qBAAqB;QAC9B,wBAAwB,EAAE,oBAAoB,CAAC;QAC/C,6BAA6B,EAAE,wBAAwB,CAAC;KACxD;CACD"}
+{"version":3,"file":"segmented-control.d.ts","sourceRoot":"","sources":["../../../../src/components/inputs/segmented-control/segmented-control.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAkCG;AACH,OAAO,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AAUjC,OAAO,8BAA8B,CAAC;AAEtC,MAAM,MAAM,oBAAoB,GAAG,IAAI,GAAG,IAAI,CAAC;AAC/C,MAAM,MAAM,oBAAoB,GAAG,OAAO,GAAG,UAAU,CAAC;AACxD,MAAM,MAAM,uBAAuB,GAAG,MAAM,GAAG,MAAM,CAAC;AAKtD,qBACa,wBAAyB,SAAQ,UAAU;IACvD,OAAgB,MAAM,0BAA8B;IAGpD,KAAK,SAAM;IAGX,QAAQ,UAAS;IAGjB,QAAQ,UAAS;IAEjB,iEAAiE;IAEjE,IAAI,EAAE,oBAAoB,CAAQ;IAElC,iEAAiE;IAEjE,OAAO,EAAE,uBAAuB,CAAU;IAE1C,iEAAiE;IAEjE,SAAS,EAAE,oBAAoB,CAAW;IAE1C,iEAAiE;IAEjE,SAAS,SAAM;IAEf,gGAAgG;IAEhG,IAAI,SAAM;IAEV,oEAAoE;IAEpE,IAAI,SAAM;IAEH,aAAa,CAAC,CAAC,EAAE,KAAK,GAAG,IAAI;IAS3B,MAAM;CAGf;AAKD,qBACa,oBAAqB,SAAQ,UAAU;IACnD,MAAM,CAAC,cAAc,UAAQ;IAE7B,OAAgB,MAAM,0BAA0B;IAEhD,OAAO,CAAC,UAAU,CAA0B;IAE5C,OAAO,CAAC,aAAa,CAAM;IAC3B,OAAO,CAAC,cAAc,CAAgB;IAEtC,qCAAqC;IAErC,KAAK,SAAM;IAEX;;;;OAIG;IAEH,MAAM,EAAE,MAAM,EAAE,CAAM;IAGtB,IAAI,EAAE,oBAAoB,CAAQ;IAGlC,IAAI,EAAE,oBAAoB,CAAW;IAErC,sFAAsF;IAEtF,OAAO,EAAE,uBAAuB,CAAU;IAG1C,QAAQ,UAAS;IAEjB;;;;;OAKG;IAEH,KAAK,SAAM;IAGX,IAAI,SAAM;IAEV,kDAAkD;IAElD,eAAe,SAAM;IAErB,yDAAyD;IAEzD,oBAAoB,SAAM;IAIjB,iBAAiB,IAAI,IAAI;IASzB,oBAAoB,IAAI,IAAI;IAM5B,YAAY,IAAI,IAAI;IAW7B,OAAO,CAAC,cAAc;IAetB,iBAAiB,IAAI,IAAI;IAKzB,oBAAoB,CAAC,QAAQ,EAAE,OAAO,GAAG,IAAI;IAI7C,wBAAwB,CAAC,KAAK,EAAE,QAAQ,GAAG,MAAM,GAAG,IAAI,GAAG,IAAI;IAStD,OAAO,CAAC,iBAAiB,EAAE,GAAG,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,IAAI;IAuD/D,OAAO,CAAC,SAAS;IAUjB,OAAO,CAAC,kBAAkB;IAI1B,OAAO,CAAC,UAAU;IA+BlB,OAAO,CAAC,MAAM,CAAC,UAAU,CAAK;IAE9B,OAAO,KAAK,SAAS,GAKpB;IAED,OAAO,CAAC,cAAc,CAAM;IAI5B,OAAO,CAAC,iBAAiB,CA0BvB;IAEF;;;;;OAKG;IACH,OAAO,CAAC,cAAc,CA2CpB;IAEK,aAAa,IAAI,IAAI;IAInB,MAAM;CAGf;AAED,OAAO,CAAC,MAAM,CAAC;IACd,UAAU,qBAAqB;QAC9B,wBAAwB,EAAE,oBAAoB,CAAC;QAC/C,6BAA6B,EAAE,wBAAwB,CAAC;KACxD;CACD"}

package/dist/components/inputs/segmented-control/segmented-control.js

@@ -18,7 +18,7 @@ var NLDDSegmentedControl_1;
  * @attr {string}  type          - Input type: 'radio' | 'checkbox' (default: 'radio')
  * @attr {string}  variant       - Content type for all items: 'text' | 'icon' (default: 'text')
  * @attr {boolean} disabled      - Disabled state for all items
- * @attr {boolean} full-width    - Stretches to fill the container width
+ * @attr {string}  width         - Width mode: 'full' (stretches to container), 'fit-content' (per-item content size), or any CSS length (e.g. '240px')
  * @attr {string}  name          - Name for form submission, forwarded to native inputs
  *
  * @fires change - When selection changes; detail: { value: string } for radio,
@@ -129,7 +129,13 @@ let NLDDSegmentedControl = NLDDSegmentedControl_1 = class NLDDSegmentedControl e
         /** Content type applied to all items. Mixing text and icon items is not supported. */
         this.variant = 'text';
         this.disabled = false;
-        this.fullWidth = false;
+        /**
+         * Width mode: 'full' (stretch to container, equal-width items),
+         * 'fit-content' (per-item content size), or any CSS length (e.g. '240px',
+         * '50%') which sets the host width with equal-width items. Default is
+         * content-based outer with equal-width items.
+         */
+        this.width = '';
         this.name = '';
         /** Accessible name for the group (aria-label). */
         this.accessibleLabel = '';
@@ -274,6 +280,21 @@ let NLDDSegmentedControl = NLDDSegmentedControl_1 = class NLDDSegmentedControl e
         }
     }
     updated(changedProperties) {
+        if (changedProperties.has('width')) {
+            // Keyword 'full' is handled by CSS ([width="full"] sets
+            // --_width: 100% and switches display to grid). Keyword
+            // 'fit-content' only changes grid-auto-columns and leaves the host
+            // width alone. A valid CSS length feeds --_width here.
+            // Invalid values do nothing.
+            const w = this.width;
+            const isKeyword = w === 'full' || w === 'fit-content';
+            if (w && !isKeyword && CSS.supports('width', w)) {
+                this.style.setProperty('--_width', w);
+            }
+            else {
+                this.style.removeProperty('--_width');
+            }
+        }
         if (changedProperties.has('value') ||
             changedProperties.has('values') ||
             changedProperties.has('size') ||
@@ -385,8 +406,8 @@ __decorate([
     property({ type: Boolean, reflect: true })
 ], NLDDSegmentedControl.prototype, "disabled", void 0);
 __decorate([
-    property({ type: Boolean, reflect: true, attribute: 'full-width' })
-], NLDDSegmentedControl.prototype, "fullWidth", void 0);
+    property({ type: String, reflect: true })
+], NLDDSegmentedControl.prototype, "width", void 0);
 __decorate([
     property({ type: String, reflect: true })
 ], NLDDSegmentedControl.prototype, "name", void 0);