@nldd/design-system 0.8.69 → 0.8.71

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

@@ -5,34 +5,31 @@
  * and an optional search button.
  *
  * @element nldd-search-field
- * @attr {string}  value               - The search value
- * @attr {string}  placeholder         - Placeholder text for the input
- * @attr {string}  accessible-label    - Accessible label (aria-label) for the native input.
- *                                       Falls back to placeholder when not set.
- *                                       Set explicitly when a value is already present
- *                                       and the placeholder is no longer visible.
- * @attr {string}  size                - Field size: 'sm' | 'md' (default: 'md')
- * @attr {boolean} disabled            - Disabled state
- * @attr {string}  name                - Input name for form submission
+ * @attr {string} value - The search value
+ * @attr {string} placeholder - Placeholder text for the input
+ * @attr {string} accessible-label - Accessible label (aria-label) for the native input. Falls back to placeholder when not set. Set explicitly when a value is already present and the placeholder is no longer visible.
+ * @attr {string} size - Field size: 'sm' | 'md' (default: 'md')
+ * @attr {boolean} disabled - Disabled state
+ * @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 {boolean} no-spellcheck       - Disables browser spellchecking on the inner input
- * @attr {string}  width               - Optional fixed width (any CSS length, e.g. "240px"). Default: stretches to fill container.
+ * @attr {object} translations - Override translation keys; unset keys fall back to Dutch
+ * @attr {boolean} no-spellcheck - Disables browser spellchecking on the inner input
+ * @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 input - When the input value changes; detail: { value: string }
  * @fires change - When the input value is committed; detail: { value: string }
  * @fires search - When search is submitted via Enter or the search button; detail: { value: string }
  */
 import { LitElement, type PropertyValues } from 'lit';
+import { type FormValue } from '../../../utilities/form-associated-mixin.js';
 import type { NLDDSearchFieldTranslations } from './search-field.i18n.js';
 import './../../actions/icon-button/icon-button.js';
 import './../../actions/button/button.js';
 import './../../content/icon/icon.js';
 export type SearchFieldSize = 'sm' | 'md';
-export declare class NLDDSearchField extends LitElement {
-    static formAssociated: boolean;
+declare const NLDDSearchField_base: typeof LitElement & (abstract new (...args: any[]) => LitElement & import("../../../utilities/form-associated-mixin.js").FormAssociatedElement);
+export declare class NLDDSearchField extends NLDDSearchField_base {
     static styles: import("lit").CSSResult;
-    private _internals;
     private _initialValue;
     value: string;
     placeholder: string;
@@ -54,8 +51,8 @@ export declare class NLDDSearchField extends LitElement {
     _input: HTMLInputElement;
     firstUpdated(): void;
     updated(changed: PropertyValues): void;
+    formValue(): FormValue;
     formResetCallback(): void;
-    formDisabledCallback(disabled: boolean): void;
     formStateRestoreCallback(state: File | string | FormData | null): void;
     _t(key: keyof NLDDSearchFieldTranslations): string;
     _handleInput(e: Event): void;
@@ -76,4 +73,5 @@ declare global {
         'nldd-search-field': NLDDSearchField;
     }
 }
+export {};
 //# sourceMappingURL=search-field.d.ts.map

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;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AACH,OAAO,EAAE,UAAU,EAAE,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;AAMtD,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;IAGxD,YAAY,UAAS;IAErB,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"}
+{"version":3,"file":"search-field.d.ts","sourceRoot":"","sources":["../../../../src/components/inputs/search-field/search-field.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,OAAO,EAAE,UAAU,EAAE,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;AAEtD,OAAO,EAAkB,KAAK,SAAS,EAAE,MAAM,6CAA6C,CAAC;AAK7F,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,oBAA0B;IAE9D,OAAgB,MAAM,0BAAqB;IAG3C,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;IAGxD,YAAY,UAAS;IAErB,oGAAoG;IAEpG,KAAK,SAAM;IAGX,MAAM,EAAG,gBAAgB,CAAC;IAEjB,YAAY,IAAI,IAAI;IAIpB,OAAO,CAAC,OAAO,EAAE,cAAc,GAAG,IAAI;IAWtC,SAAS,IAAI,SAAS;IAI/B,iBAAiB,IAAI,IAAI;IAKzB,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;IAW5B,aAAa,CAAC,CAAC,EAAE,KAAK,GAAG,IAAI;IAW7B,cAAc,CAAC,CAAC,EAAE,aAAa,GAAG,IAAI;IAMtC,YAAY,IAAI,IAAI;IAgBpB,aAAa,IAAI,IAAI;IAI5B,OAAO,CAAC,eAAe;IASvB;;;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

@@ -11,26 +11,24 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
  * and an optional search button.
  *
  * @element nldd-search-field
- * @attr {string}  value               - The search value
- * @attr {string}  placeholder         - Placeholder text for the input
- * @attr {string}  accessible-label    - Accessible label (aria-label) for the native input.
- *                                       Falls back to placeholder when not set.
- *                                       Set explicitly when a value is already present
- *                                       and the placeholder is no longer visible.
- * @attr {string}  size                - Field size: 'sm' | 'md' (default: 'md')
- * @attr {boolean} disabled            - Disabled state
- * @attr {string}  name                - Input name for form submission
+ * @attr {string} value - The search value
+ * @attr {string} placeholder - Placeholder text for the input
+ * @attr {string} accessible-label - Accessible label (aria-label) for the native input. Falls back to placeholder when not set. Set explicitly when a value is already present and the placeholder is no longer visible.
+ * @attr {string} size - Field size: 'sm' | 'md' (default: 'md')
+ * @attr {boolean} disabled - Disabled state
+ * @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 {boolean} no-spellcheck       - Disables browser spellchecking on the inner input
- * @attr {string}  width               - Optional fixed width (any CSS length, e.g. "240px"). Default: stretches to fill container.
+ * @attr {object} translations - Override translation keys; unset keys fall back to Dutch
+ * @attr {boolean} no-spellcheck - Disables browser spellchecking on the inner input
+ * @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 input - When the input value changes; detail: { value: string }
  * @fires change - When the input value is committed; detail: { value: string }
  * @fires search - When search is submitted via Enter or the search button; detail: { value: string }
  */
 import { LitElement } from 'lit';
 import { customElement, property, query } from 'lit/decorators.js';
+import { FormAssociated } from '../../../utilities/form-associated-mixin.js';
 import { reflectNonDefault } from '../../../utilities/reflect-non-default.js';
 import { searchFieldStyles } from './search-field.styles.js';
 import { searchFieldTemplate } from './search-field.template.js';
@@ -38,10 +36,9 @@ import { nlddSearchFieldTranslations } from './search-field.i18n.js';
 import './../../actions/icon-button/icon-button.js';
 import './../../actions/button/button.js';
 import './../../content/icon/icon.js';
-let NLDDSearchField = class NLDDSearchField extends LitElement {
+let NLDDSearchField = class NLDDSearchField extends FormAssociated(LitElement) {
     constructor() {
         super(...arguments);
-        this._internals = this.attachInternals();
         this._initialValue = '';
         this.value = '';
         this.placeholder = 'Zoeken';
@@ -74,16 +71,13 @@ let NLDDSearchField = class NLDDSearchField extends LitElement {
                 this.style.removeProperty('--_width');
             }
         }
-        if (changed.has('value')) {
-            this._internals.setFormValue(this.value);
-        }
+    }
+    formValue() {
+        return this.value;
     }
     formResetCallback() {
         this.value = this._initialValue;
     }
-    formDisabledCallback(disabled) {
-        this.disabled = disabled;
-    }
     formStateRestoreCallback(state) {
         if (typeof state === 'string')
             this.value = state;
@@ -96,6 +90,7 @@ let NLDDSearchField = class NLDDSearchField extends LitElement {
     _handleInput(e) {
         const input = e.target;
         this.value = input.value;
+        this.commitFormValue();
         this.dispatchEvent(new CustomEvent('input', {
             detail: { value: this.value },
             bubbles: true,
@@ -105,6 +100,7 @@ let NLDDSearchField = class NLDDSearchField extends LitElement {
     _handleChange(e) {
         const input = e.target;
         this.value = input.value;
+        this.commitFormValue();
         this.dispatchEvent(new CustomEvent('change', {
             detail: { value: this.value },
             bubbles: true,
@@ -118,6 +114,7 @@ let NLDDSearchField = class NLDDSearchField extends LitElement {
     }
     _handleClear() {
         this.value = '';
+        this.commitFormValue();
         this.dispatchEvent(new CustomEvent('input', {
             detail: { value: '' },
             bubbles: true,
@@ -134,6 +131,7 @@ let NLDDSearchField = class NLDDSearchField extends LitElement {
         this._dispatchSearch();
     }
     _dispatchSearch() {
+        this.commitFormValue();
         this.dispatchEvent(new CustomEvent('search', {
             detail: { value: this.value },
             bubbles: true,
@@ -151,7 +149,6 @@ let NLDDSearchField = class NLDDSearchField extends LitElement {
         return searchFieldTemplate(this);
     }
 };
-NLDDSearchField.formAssociated = true;
 NLDDSearchField.styles = searchFieldStyles;
 __decorate([
     property({ type: String })

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":";;;;;;AAAA;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;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,2CAA2C,CAAC;AAC9E,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;QAGxD,iBAAY,GAAG,KAAK,CAAC;QAErB,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;;AArJM,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,OAAO,EAAE,IAAI,EAAE,SAAS,EAAE,iBAAiB,CAAkB,IAAI,CAAC,EAAE,CAAC;6CACpD;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;AAGxD;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,SAAS,EAAE,eAAe,EAAE,CAAC;qDAClD;AAIrB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;8CAC/B;AAGX;IADC,KAAK,CAAC,sBAAsB,CAAC;+CACJ;AA/Cd,eAAe;IAD3B,aAAa,CAAC,mBAAmB,CAAC;GACtB,eAAe,CAuJ3B"}
+{"version":3,"file":"search-field.js","sourceRoot":"","sources":["../../../../src/components/inputs/search-field/search-field.ts"],"names":[],"mappings":"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"}

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

@@ -15,9 +15,9 @@ export const searchFieldStyles = css `
 		--_min-size: var(--semantics-controls-md-min-size);
 		--_search-icon-size: var(--primitives-space-24);
 		--_text-font: var(--semantics-input-fields-md-text-font);
-		--_end-padding-right: calc((var(--_min-size) - var(--semantics-controls-sm-min-size)) / 2 - var(--semantics-input-fields-border-thickness));
+		--_end-padding-right: calc((var(--_min-size) - var(--semantics-controls-sm-min-size)) / 2 - var(--semantics-input-fields-border-width));
 		--_end-gap: var(--primitives-space-6);
-		--_z-index-button-focus: 1;
+		--_button-focus-z-index: 1;
 
 		${inheritedTextReset}
 		display: block;
@@ -41,7 +41,7 @@ export const searchFieldStyles = css `
 		--_min-size: var(--semantics-controls-sm-min-size);
 		--_search-icon-size: var(--primitives-space-20);
 		--_text-font: var(--semantics-input-fields-sm-text-font);
-		--_end-padding-right: calc((var(--_min-size) - var(--semantics-controls-xs-min-size)) / 2 - var(--semantics-input-fields-border-thickness));
+		--_end-padding-right: calc((var(--_min-size) - var(--semantics-controls-xs-min-size)) / 2 - var(--semantics-input-fields-border-width));
 		--_end-gap: var(--primitives-space-4);
 	}
 
@@ -86,7 +86,7 @@ export const searchFieldStyles = css `
 
 	.search-field__search-icon {
 		display: flex;
-		margin-inline: calc((var(--_min-size) - var(--_search-icon-size)) / 2 - var(--semantics-input-fields-border-thickness));
+		margin-inline: calc((var(--_min-size) - var(--_search-icon-size)) / 2 - var(--semantics-input-fields-border-width));
 		width: var(--_search-icon-size);
 		height: var(--_search-icon-size);
 		flex-shrink: 0;
@@ -159,7 +159,7 @@ export const searchFieldStyles = css `
 	.search-field__clear-button:focus-within,
 	.search-field__search-button:focus-within {
 		position: relative;
-		z-index: var(--_z-index-button-focus);
+		z-index: var(--_button-focus-z-index);
 	}
 `;
 //# sourceMappingURL=search-field.styles.js.map

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

@@ -5,35 +5,40 @@
  * Exports both NLDDSegmentedControl and NLDDSegmentedControlItem.
  *
  * @element nldd-segmented-control
- * @attr {string}  value         - Selected value for radio type
- * @prop {string[]} values        - Selected values for checkbox type (property binding only, not an attribute)
- * @attr {string}  size          - Control size: 'sm' | 'md' | 'lg' (default: 'md')
- * @attr {string}  type          - Input type: 'radio' | 'checkbox' (default: 'radio').
- * @attr {string}  variant       - Content type for all items: 'text' | 'icon' | 'icon-and-text' (default: 'text')
- * @attr {boolean} disabled      - Disabled state for all items
- * @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
+ * @attr {string} value - Selected value for radio type
+ * @prop {string[]} values - Selected values for checkbox type (property binding only, not an attribute)
+ * @attr {string} size - Control size: 'sm' | 'md' | 'lg' (default: 'md')
+ * @attr {string} type - Input type: 'radio' | 'checkbox' (default: 'radio').
+ * @attr {string} variant - Content type for all items: 'text' | 'icon' | 'icon-and-text' (default: 'text')
+ * @attr {boolean} disabled - Disabled state for all items
+ * @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
+ * @attr {string} accessible-label - Accessible name for the group, set as aria-label
+ * @attr {string} accessible-labeled-by - Id of an external label element, set as aria-labelledby on the group
  *
- * @fires change - When selection changes; detail: { value: string } for radio,
- *                 detail: { values: string[] } for checkbox
+ * @fires change - When selection changes; detail: { value: string } for radio, detail: { values: string[] } for checkbox
  *
  * @slot - nldd-segmented-control-item elements
  *
  * ---
  *
  * @element nldd-segmented-control-item
- * @attr {string}  value        - Value for this item
- * @attr {boolean} selected     - Whether this item is selected (set by parent)
- * @attr {boolean} disabled     - Disabled state
- * @attr {string}  text         - Text label (shown for variant "text" and "icon-and-text";
- *                                used as aria-label and tooltip for variant "icon")
- * @attr {string}  icon         - Icon name for nldd-icon
+ * @attr {string} value - Value for this item
+ * @attr {boolean} selected - Whether this item is selected (set by parent)
+ * @attr {boolean} disabled - Disabled state
+ * @attr {string} text - Text label (shown for variant "text" and "icon-and-text"; used as aria-label and tooltip for variant "icon")
+ * @attr {string} icon - Icon name for nldd-icon
+ * @attr {string} size - Control size: 'sm' | 'md' | 'lg' (default: 'md'). Set by nldd-segmented-control.
+ * @attr {string} variant - Content type: 'text' | 'icon' | 'icon-and-text' (default: 'text'). Set by nldd-segmented-control.
+ * @attr {string} input-type - Type of the native input: 'radio' | 'checkbox' (default: 'radio'). Set by nldd-segmented-control.
+ * @attr {string} group-name - Name of the group for form submission, put on the native input. Set by nldd-segmented-control.
  *
- * @slot icon    - Slot for a custom icon (e.g. custom SVG). Only used when icon attribute is not set.
+ * @slot icon - Slot for a custom icon (e.g. custom SVG). Only used when icon attribute is not set.
  *
  * @fires item-change - When item is activated; detail: { value: string, checked: boolean }
  */
 import { LitElement } from 'lit';
+import { type FormValue } from '../../../utilities/form-associated-mixin.js';
 import './../../content/icon/icon.js';
 export type SegmentedControlSize = 'sm' | 'md' | 'lg';
 export type SegmentedControlType = 'radio' | 'checkbox';
@@ -49,7 +54,10 @@ export declare class NLDDSegmentedControlItem extends LitElement {
     variant: SegmentedControlVariant;
     /** Set by nldd-segmented-control. Not part of the public API. */
     inputType: SegmentedControlType;
-    /** Set by nldd-segmented-control. Not part of the public API. */
+    /** Set by nldd-segmented-control. Not part of the public API.
+     *
+     * The attribute name is stated: without it Lit derives `groupname`, all
+     * lowercase, while the documentation has always promised `group-name`. */
     groupName: string;
     /** Text label for the item. Used as visible text and as aria-label/tooltip for icon variant. */
     text: string;
@@ -59,10 +67,9 @@ export declare class NLDDSegmentedControlItem extends LitElement {
     _handleChange(e: Event): void;
     render(): import("lit-html").TemplateResult;
 }
-export declare class NLDDSegmentedControl extends LitElement {
-    static formAssociated: boolean;
+declare const NLDDSegmentedControl_base: typeof LitElement & (abstract new (...args: any[]) => LitElement & import("../../../utilities/form-associated-mixin.js").FormAssociatedElement);
+export declare class NLDDSegmentedControl extends NLDDSegmentedControl_base {
     static styles: import("lit").CSSResult;
-    private _internals;
     private _initialValue;
     private _initialValues;
     /** Selected value for radio type. */
@@ -89,13 +96,12 @@ export declare class NLDDSegmentedControl extends LitElement {
     /** Accessible name for the group (aria-label). */
     accessibleLabel: string;
     /** ID of an external label element (aria-labelledby). */
-    accessibleLabelledBy: string;
+    accessibleLabeledBy: string;
     connectedCallback(): void;
     disconnectedCallback(): void;
     firstUpdated(): void;
-    private _syncFormValue;
+    formValue(): FormValue;
     formResetCallback(): void;
-    formDisabledCallback(disabled: boolean): void;
     formStateRestoreCallback(state: FormData | string | null): void;
     updated(changedProperties: Map<string, unknown>): void;
     private _getItems;
@@ -121,4 +127,5 @@ declare global {
         'nldd-segmented-control-item': NLDDSegmentedControlItem;
     }
 }
+export {};
 //# sourceMappingURL=segmented-control.d.ts.map

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;AAWjC,OAAO,8BAA8B,CAAC;AAEtC,MAAM,MAAM,oBAAoB,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AACtD,MAAM,MAAM,oBAAoB,GAAG,OAAO,GAAG,UAAU,CAAC;AACxD,MAAM,MAAM,uBAAuB,GAAG,MAAM,GAAG,MAAM,GAAG,eAAe,CAAC;AAKxE,qBACa,wBAAyB,SAAQ,UAAU;IACvD,OAAgB,MAAM,0BAA8B;IAGpD,KAAK,SAAM;IAGX,QAAQ,UAAS;IAGjB,QAAQ,UAAS;IAEjB,mGAAmG;IAEnG,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;mFAC+E;IAE/E,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,yGAAyG;IAEzG,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"}
+{"version":3,"file":"segmented-control.d.ts","sourceRoot":"","sources":["../../../../src/components/inputs/segmented-control/segmented-control.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAsCG;AACH,OAAO,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AAEjC,OAAO,EAAkB,KAAK,SAAS,EAAE,MAAM,6CAA6C,CAAC;AAU7F,OAAO,8BAA8B,CAAC;AAEtC,MAAM,MAAM,oBAAoB,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AACtD,MAAM,MAAM,oBAAoB,GAAG,OAAO,GAAG,UAAU,CAAC;AACxD,MAAM,MAAM,uBAAuB,GAAG,MAAM,GAAG,MAAM,GAAG,eAAe,CAAC;AAKxE,qBACa,wBAAyB,SAAQ,UAAU;IACvD,OAAgB,MAAM,0BAA8B;IAGpD,KAAK,SAAM;IAGX,QAAQ,UAAS;IAGjB,QAAQ,UAAS;IAEjB,mGAAmG;IAEnG,IAAI,EAAE,oBAAoB,CAAQ;IAElC,iEAAiE;IAEjE,OAAO,EAAE,uBAAuB,CAAU;IAE1C,iEAAiE;IAEjE,SAAS,EAAE,oBAAoB,CAAW;IAE1C;;;8EAG0E;IAE1E,SAAS,SAAM;IAEf,gGAAgG;IAEhG,IAAI,SAAM;IAEV;mFAC+E;IAE/E,IAAI,SAAM;IAEH,aAAa,CAAC,CAAC,EAAE,KAAK,GAAG,IAAI;IAS3B,MAAM;CAGf;;AAKD,qBACa,oBAAqB,SAAQ,yBAA0B;IAEnE,OAAgB,MAAM,0BAA0B;IAGhD,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,yGAAyG;IAEzG,OAAO,EAAE,uBAAuB,CAAU;IAG1C,QAAQ,UAAS;IAEjB;;;;;OAKG;IAEH,KAAK,SAAM;IAGX,IAAI,SAAM;IAEV,kDAAkD;IAElD,eAAe,SAAM;IAErB,yDAAyD;IAEzD,mBAAmB,SAAM;IAIhB,iBAAiB,IAAI,IAAI;IASzB,oBAAoB,IAAI,IAAI;IAM5B,YAAY,IAAI,IAAI;IASpB,SAAS,IAAI,SAAS;IAS/B,iBAAiB,IAAI,IAAI;IAMzB,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,CA4BvB;IAEF;;;;;OAKG;IACH,OAAO,CAAC,cAAc,CA4CpB;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

@@ -12,36 +12,41 @@ var NLDDSegmentedControl_1;
  * Exports both NLDDSegmentedControl and NLDDSegmentedControlItem.
  *
  * @element nldd-segmented-control
- * @attr {string}  value         - Selected value for radio type
- * @prop {string[]} values        - Selected values for checkbox type (property binding only, not an attribute)
- * @attr {string}  size          - Control size: 'sm' | 'md' | 'lg' (default: 'md')
- * @attr {string}  type          - Input type: 'radio' | 'checkbox' (default: 'radio').
- * @attr {string}  variant       - Content type for all items: 'text' | 'icon' | 'icon-and-text' (default: 'text')
- * @attr {boolean} disabled      - Disabled state for all items
- * @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
+ * @attr {string} value - Selected value for radio type
+ * @prop {string[]} values - Selected values for checkbox type (property binding only, not an attribute)
+ * @attr {string} size - Control size: 'sm' | 'md' | 'lg' (default: 'md')
+ * @attr {string} type - Input type: 'radio' | 'checkbox' (default: 'radio').
+ * @attr {string} variant - Content type for all items: 'text' | 'icon' | 'icon-and-text' (default: 'text')
+ * @attr {boolean} disabled - Disabled state for all items
+ * @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
+ * @attr {string} accessible-label - Accessible name for the group, set as aria-label
+ * @attr {string} accessible-labeled-by - Id of an external label element, set as aria-labelledby on the group
  *
- * @fires change - When selection changes; detail: { value: string } for radio,
- *                 detail: { values: string[] } for checkbox
+ * @fires change - When selection changes; detail: { value: string } for radio, detail: { values: string[] } for checkbox
  *
  * @slot - nldd-segmented-control-item elements
  *
  * ---
  *
  * @element nldd-segmented-control-item
- * @attr {string}  value        - Value for this item
- * @attr {boolean} selected     - Whether this item is selected (set by parent)
- * @attr {boolean} disabled     - Disabled state
- * @attr {string}  text         - Text label (shown for variant "text" and "icon-and-text";
- *                                used as aria-label and tooltip for variant "icon")
- * @attr {string}  icon         - Icon name for nldd-icon
+ * @attr {string} value - Value for this item
+ * @attr {boolean} selected - Whether this item is selected (set by parent)
+ * @attr {boolean} disabled - Disabled state
+ * @attr {string} text - Text label (shown for variant "text" and "icon-and-text"; used as aria-label and tooltip for variant "icon")
+ * @attr {string} icon - Icon name for nldd-icon
+ * @attr {string} size - Control size: 'sm' | 'md' | 'lg' (default: 'md'). Set by nldd-segmented-control.
+ * @attr {string} variant - Content type: 'text' | 'icon' | 'icon-and-text' (default: 'text'). Set by nldd-segmented-control.
+ * @attr {string} input-type - Type of the native input: 'radio' | 'checkbox' (default: 'radio'). Set by nldd-segmented-control.
+ * @attr {string} group-name - Name of the group for form submission, put on the native input. Set by nldd-segmented-control.
  *
- * @slot icon    - Slot for a custom icon (e.g. custom SVG). Only used when icon attribute is not set.
+ * @slot icon - Slot for a custom icon (e.g. custom SVG). Only used when icon attribute is not set.
  *
  * @fires item-change - When item is activated; detail: { value: string, checked: boolean }
  */
 import { LitElement } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
+import { FormAssociated } from '../../../utilities/form-associated-mixin.js';
 import { reflectNonDefault } from '../../../utilities/reflect-non-default.js';
 import { segmentedControlStyles, segmentedControlItemStyles, } from './segmented-control.styles.js';
 import { segmentedControlTemplate, segmentedControlItemTemplate, } from './segmented-control.template.js';
@@ -59,7 +64,10 @@ let NLDDSegmentedControlItem = class NLDDSegmentedControlItem extends LitElement
         this.variant = 'text';
         /** Set by nldd-segmented-control. Not part of the public API. */
         this.inputType = 'radio';
-        /** Set by nldd-segmented-control. Not part of the public API. */
+        /** Set by nldd-segmented-control. Not part of the public API.
+         *
+         * The attribute name is stated: without it Lit derives `groupname`, all
+         * lowercase, while the documentation has always promised `group-name`. */
         this.groupName = '';
         /** Text label for the item. Used as visible text and as aria-label/tooltip for icon variant. */
         this.text = '';
@@ -99,7 +107,7 @@ __decorate([
     property({ reflect: true, attribute: 'input-type', converter: reflectNonDefault('radio') })
 ], NLDDSegmentedControlItem.prototype, "inputType", void 0);
 __decorate([
-    property({ type: String })
+    property({ type: String, attribute: 'group-name' })
 ], NLDDSegmentedControlItem.prototype, "groupName", void 0);
 __decorate([
     property({ reflect: true, converter: reflectNonDefault('') })
@@ -112,10 +120,9 @@ NLDDSegmentedControlItem = __decorate([
 ], NLDDSegmentedControlItem);
 export { NLDDSegmentedControlItem };
 // # nldd-segmented-control
-let NLDDSegmentedControl = NLDDSegmentedControl_1 = class NLDDSegmentedControl extends LitElement {
+let NLDDSegmentedControl = NLDDSegmentedControl_1 = class NLDDSegmentedControl extends FormAssociated(LitElement) {
     constructor() {
         super(...arguments);
-        this._internals = this.attachInternals();
         this._initialValue = '';
         this._initialValues = [];
         /** Selected value for radio type. */
@@ -142,7 +149,7 @@ let NLDDSegmentedControl = NLDDSegmentedControl_1 = class NLDDSegmentedControl e
         /** Accessible name for the group (aria-label). */
         this.accessibleLabel = '';
         /** ID of an external label element (aria-labelledby). */
-        this.accessibleLabelledBy = '';
+        this.accessibleLabeledBy = '';
         this._generatedName = '';
         // — Handlers ———————————————————————————————————————————————————————————————
         this._handleItemChange = (e) => {
@@ -156,6 +163,7 @@ let NLDDSegmentedControl = NLDDSegmentedControl_1 = class NLDDSegmentedControl e
                     : current.filter(v => v !== e.detail.value);
                 this.values = updated;
                 this._syncItems();
+                this.commitFormValue();
                 this.dispatchEvent(new CustomEvent('change', {
                     detail: { values: updated },
                     bubbles: true,
@@ -167,6 +175,7 @@ let NLDDSegmentedControl = NLDDSegmentedControl_1 = class NLDDSegmentedControl e
                     return;
                 this.value = e.detail.value;
                 this._syncItems();
+                this.commitFormValue();
                 this.dispatchEvent(new CustomEvent('change', {
                     detail: { value: this.value },
                     bubbles: true,
@@ -213,6 +222,7 @@ let NLDDSegmentedControl = NLDDSegmentedControl_1 = class NLDDSegmentedControl e
             if (nextIndex !== currentIndex && items[nextIndex]) {
                 this.value = items[nextIndex].value;
                 this._syncItems();
+                this.commitFormValue();
                 items[nextIndex].shadowRoot?.querySelector('input')?.focus();
                 this.dispatchEvent(new CustomEvent('change', {
                     detail: { value: this.value },
@@ -228,8 +238,8 @@ let NLDDSegmentedControl = NLDDSegmentedControl_1 = class NLDDSegmentedControl e
         this.setAttribute('role', this.type === 'checkbox' ? 'group' : 'radiogroup');
         if (this.accessibleLabel)
             this.setAttribute('aria-label', this.accessibleLabel);
-        if (this.accessibleLabelledBy)
-            this.setAttribute('aria-labelledby', this.accessibleLabelledBy);
+        if (this.accessibleLabeledBy)
+            this.setAttribute('aria-labelledby', this.accessibleLabeledBy);
         this.addEventListener('item-change', this._handleItemChange);
         this.addEventListener('keydown', this._handleKeydown);
     }
@@ -242,35 +252,25 @@ let NLDDSegmentedControl = NLDDSegmentedControl_1 = class NLDDSegmentedControl e
         this._syncItems();
         this._initialValue = this.value;
         this._initialValues = [...this.values];
-        // _syncFormValue() runs in updated() with the same changedProperties
-        // on first render — no need to call it explicitly here.
-        if (import.meta.env?.DEV && !this.accessibleLabel && !this.accessibleLabelledBy) {
-            console.warn('<nldd-segmented-control>: No accessible name provided. Add an accessible-label or accessible-labelled-by attribute for screen reader accessibility.');
+        if (import.meta.env?.DEV && !this.accessibleLabel && !this.accessibleLabeledBy) {
+            console.warn('<nldd-segmented-control>: No accessible name provided. Add an accessible-label or accessible-labeled-by attribute for screen reader accessibility.');
         }
     }
-    _syncFormValue() {
-        if (this.type === 'checkbox') {
-            if (this.values.length === 0 || !this.name) {
-                this._internals.setFormValue(null);
-                return;
-            }
-            // Submit each selected value under the same name (FormData.getAll)
-            const data = new FormData();
-            for (const v of this.values)
-                data.append(this.name, v);
-            this._internals.setFormValue(data);
-        }
-        else {
-            this._internals.setFormValue(this.value || null);
-        }
+    formValue() {
+        if (this.type !== 'checkbox')
+            return this.value || null;
+        if (this.values.length === 0 || !this.name)
+            return null;
+        // Submit each selected value under the same name (FormData.getAll)
+        const data = new FormData();
+        for (const v of this.values)
+            data.append(this.name, v);
+        return data;
     }
     formResetCallback() {
         this.value = this._initialValue;
         this.values = [...this._initialValues];
     }
-    formDisabledCallback(disabled) {
-        this.disabled = disabled;
-    }
     formStateRestoreCallback(state) {
         if (state === null)
             return;
@@ -310,7 +310,7 @@ let NLDDSegmentedControl = NLDDSegmentedControl_1 = class NLDDSegmentedControl e
             changedProperties.has('values') ||
             changedProperties.has('type') ||
             changedProperties.has('name')) {
-            this._syncFormValue();
+            this.commitFormValue();
         }
         if (changedProperties.has('type')) {
             this.setAttribute('role', this.type === 'checkbox' ? 'group' : 'radiogroup');
@@ -323,9 +323,9 @@ let NLDDSegmentedControl = NLDDSegmentedControl_1 = class NLDDSegmentedControl e
                 this.removeAttribute('aria-label');
             }
         }
-        if (changedProperties.has('accessibleLabelledBy')) {
-            if (this.accessibleLabelledBy) {
-                this.setAttribute('aria-labelledby', this.accessibleLabelledBy);
+        if (changedProperties.has('accessibleLabeledBy')) {
+            if (this.accessibleLabeledBy) {
+                this.setAttribute('aria-labelledby', this.accessibleLabeledBy);
             }
             else {
                 this.removeAttribute('aria-labelledby');
@@ -386,7 +386,6 @@ let NLDDSegmentedControl = NLDDSegmentedControl_1 = class NLDDSegmentedControl e
         return segmentedControlTemplate(this);
     }
 };
-NLDDSegmentedControl.formAssociated = true;
 NLDDSegmentedControl.styles = segmentedControlStyles;
 NLDDSegmentedControl._idCounter = 0;
 __decorate([
@@ -417,8 +416,8 @@ __decorate([
     property({ type: String, attribute: 'accessible-label' })
 ], NLDDSegmentedControl.prototype, "accessibleLabel", void 0);
 __decorate([
-    property({ type: String, attribute: 'accessible-labelled-by' })
-], NLDDSegmentedControl.prototype, "accessibleLabelledBy", void 0);
+    property({ type: String, attribute: 'accessible-labeled-by' })
+], NLDDSegmentedControl.prototype, "accessibleLabeledBy", void 0);
 NLDDSegmentedControl = NLDDSegmentedControl_1 = __decorate([
     customElement('nldd-segmented-control')
 ], NLDDSegmentedControl);