@deepfuture/dui-components 0.0.18 → 0.0.20

package/radio/radio.js

@@ -34,12 +34,10 @@ var __runInitializers = (this && this.__runInitializers) || function (thisArg, i
     return useValue ? value : void 0;
 };
 import { css, html, LitElement, nothing } from "lit";
-import { property, state } from "lit/decorators.js";
+import { property } from "lit/decorators.js";
 import { ContextConsumer } from "@lit/context";
-import { consume } from "@lit/context";
 import { base } from "@deepfuture/dui-core/base";
 import { radioGroupContext } from "./radio-group-context.js";
-import { fieldContext } from "@deepfuture/dui-components/field";
 /** Structural styles only — layout CSS. */
 const styles = css `
   :host {
@@ -62,6 +60,7 @@ const styles = css `
     padding: 0;
     margin: 0;
     border: none;
+    user-select: none;
   }
 
   [part="root"][data-disabled] {
@@ -84,14 +83,6 @@ const styles = css `
     display: none;
   }
 
-  .hidden-input {
-    position: absolute;
-    pointer-events: none;
-    opacity: 0;
-    margin: 0;
-    width: 0;
-    height: 0;
-  }
 `;
 /**
  * `<dui-radio>` — A radio button input.
@@ -115,24 +106,25 @@ let DuiRadio = (() => {
     let _readOnly_decorators;
     let _readOnly_initializers = [];
     let _readOnly_extraInitializers = [];
-    let __fieldCtx_decorators;
-    let __fieldCtx_initializers = [];
-    let __fieldCtx_extraInitializers = [];
     return class DuiRadio extends _classSuper {
         static {
             const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
             _value_decorators = [property()];
             _disabled_decorators = [property({ type: Boolean, reflect: true })];
             _readOnly_decorators = [property({ type: Boolean, reflect: true, attribute: "read-only" })];
-            __fieldCtx_decorators = [consume({ context: fieldContext, subscribe: true }), state()];
             __esDecorate(this, null, _value_decorators, { kind: "accessor", name: "value", static: false, private: false, access: { has: obj => "value" in obj, get: obj => obj.value, set: (obj, value) => { obj.value = value; } }, metadata: _metadata }, _value_initializers, _value_extraInitializers);
             __esDecorate(this, null, _disabled_decorators, { kind: "accessor", name: "disabled", static: false, private: false, access: { has: obj => "disabled" in obj, get: obj => obj.disabled, set: (obj, value) => { obj.disabled = value; } }, metadata: _metadata }, _disabled_initializers, _disabled_extraInitializers);
             __esDecorate(this, null, _readOnly_decorators, { kind: "accessor", name: "readOnly", static: false, private: false, access: { has: obj => "readOnly" in obj, get: obj => obj.readOnly, set: (obj, value) => { obj.readOnly = value; } }, metadata: _metadata }, _readOnly_initializers, _readOnly_extraInitializers);
-            __esDecorate(this, null, __fieldCtx_decorators, { kind: "accessor", name: "_fieldCtx", static: false, private: false, access: { has: obj => "_fieldCtx" in obj, get: obj => obj._fieldCtx, set: (obj, value) => { obj._fieldCtx = value; } }, metadata: _metadata }, __fieldCtx_initializers, __fieldCtx_extraInitializers);
             if (_metadata) Object.defineProperty(this, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
         }
         static tagName = "dui-radio";
+        static formAssociated = true;
         static styles = [base, styles];
+        #internals;
+        constructor() {
+            super();
+            this.#internals = this.attachInternals();
+        }
         #value_accessor_storage = __runInitializers(this, _value_initializers, "");
         /** The value attribute for this radio option. */
         get value() { return this.#value_accessor_storage; }
@@ -149,16 +141,12 @@ let DuiRadio = (() => {
             context: radioGroupContext,
             subscribe: true,
         }));
-        #_fieldCtx_accessor_storage = __runInitializers(this, __fieldCtx_initializers, void 0);
-        get _fieldCtx() { return this.#_fieldCtx_accessor_storage; }
-        set _fieldCtx(value) { this.#_fieldCtx_accessor_storage = value; }
         get #isChecked() {
             return this.#groupCtx.value?.value === this.value;
         }
         get #isDisabled() {
             return (this.disabled ||
-                (this.#groupCtx.value?.disabled ?? false) ||
-                (this._fieldCtx?.disabled ?? false));
+                (this.#groupCtx.value?.disabled ?? false));
         }
         get #isReadOnly() {
             return this.readOnly || (this.#groupCtx.value?.readOnly ?? false);
@@ -166,30 +154,36 @@ let DuiRadio = (() => {
         get #isRequired() {
             return this.#groupCtx.value?.required ?? false;
         }
-        get #isInvalid() {
-            return this._fieldCtx?.invalid ?? false;
-        }
         connectedCallback() {
             super.connectedCallback();
             this.addEventListener("click", this.#handleHostClick);
         }
+        willUpdate() {
+            this.#syncFormValue();
+        }
+        #syncFormValue() {
+            if (this.#isChecked) {
+                this.#internals.setFormValue(this.value);
+            }
+            else {
+                this.#internals.setFormValue(null);
+            }
+        }
         disconnectedCallback() {
             super.disconnectedCallback();
             this.removeEventListener("click", this.#handleHostClick);
         }
-        #handleHostClick = (__runInitializers(this, __fieldCtx_extraInitializers), (e) => {
+        #handleHostClick = (e) => {
             if (e.target.closest("[part='root']"))
                 return;
             this.#handleClick(e);
-        });
+        };
         #handleClick = (_e) => {
             if (this.#isDisabled || this.#isReadOnly)
                 return;
             const ctx = this.#groupCtx.value;
             if (ctx) {
                 ctx.select(this.value);
-                this._fieldCtx?.markDirty();
-                this._fieldCtx?.markTouched();
             }
         };
         #handleKeyDown = (e) => {
@@ -203,25 +197,20 @@ let DuiRadio = (() => {
             const isDisabled = this.#isDisabled;
             const isReadOnly = this.#isReadOnly;
             const isRequired = this.#isRequired;
-            const isInvalid = this.#isInvalid;
-            const controlId = this._fieldCtx?.controlId ?? "";
             return html `
       <span
         part="root"
         role="radio"
-        id="${controlId || nothing}"
         aria-checked="${String(isChecked)}"
         aria-disabled="${isDisabled ? "true" : nothing}"
         aria-readonly="${isReadOnly ? "true" : nothing}"
         aria-required="${isRequired ? "true" : nothing}"
-        aria-invalid="${isInvalid ? "true" : nothing}"
         tabindex="${isDisabled ? nothing : "0"}"
         ?data-checked="${isChecked}"
         ?data-unchecked="${!isChecked}"
         ?data-disabled="${isDisabled}"
         ?data-readonly="${isReadOnly}"
         ?data-required="${isRequired}"
-        ?data-invalid="${isInvalid}"
         @click="${this.#handleClick}"
         @keydown="${this.#handleKeyDown}"
       >
@@ -232,17 +221,6 @@ let DuiRadio = (() => {
         >
           ${isChecked ? html `<span part="dot"></span>` : nothing}
         </span>
-        <input
-          type="radio"
-          name="${this.#groupCtx.value?.name ?? nothing}"
-          value="${this.value}"
-          .checked="${isChecked}"
-          ?disabled="${isDisabled}"
-          ?required="${isRequired}"
-          class="hidden-input"
-          aria-hidden="true"
-          tabindex="-1"
-        />
       </span>
       <slot></slot>
     `;

package/select/select.d.ts

@@ -1,6 +1,5 @@
 /** Ported from original DUI: deep-future-app/app/client/components/dui/select */
 import { LitElement, type TemplateResult } from "lit";
-import { type FieldContext } from "../field/field-context.js";
 export type SelectOption = {
     label: string;
     value: string;
@@ -22,7 +21,9 @@ export declare const valueChangeEvent: (detail: SelectValueChangeDetail) => Cust
 export declare class DuiSelect extends LitElement {
     #private;
     static tagName: "dui-select";
+    static formAssociated: boolean;
     static styles: import("lit").CSSResult[];
+    constructor();
     /** The available options. */
     accessor options: SelectOption[];
     /** Currently selected value. */
@@ -33,6 +34,6 @@ export declare class DuiSelect extends LitElement {
     accessor disabled: boolean;
     /** Name for form submission. */
     accessor name: string;
-    accessor _fieldCtx: FieldContext;
+    willUpdate(): void;
     render(): TemplateResult;
 }

package/select/select.js

@@ -40,11 +40,9 @@ var __setFunctionName = (this && this.__setFunctionName) || function (f, name, p
 import { css, html, LitElement, nothing } from "lit";
 import { property, state } from "lit/decorators.js";
 import { repeat } from "lit/directives/repeat.js";
-import { consume } from "@lit/context";
 import { base } from "@deepfuture/dui-core/base";
 import { customEvent } from "@deepfuture/dui-core/event";
 import { FloatingPortalController } from "@deepfuture/dui-core/floating-portal-controller";
-import { fieldContext } from "../field/field-context.js";
 export const valueChangeEvent = customEvent("value-change", { bubbles: true, composed: true });
 /** Structural styles only — layout CSS. */
 const hostStyles = css `
@@ -146,9 +144,6 @@ let DuiSelect = (() => {
     let _name_decorators;
     let _name_initializers = [];
     let _name_extraInitializers = [];
-    let __fieldCtx_decorators;
-    let __fieldCtx_initializers = [];
-    let __fieldCtx_extraInitializers = [];
     let _private_highlightedIndex_decorators;
     let _private_highlightedIndex_initializers = [];
     let _private_highlightedIndex_extraInitializers = [];
@@ -161,19 +156,23 @@ let DuiSelect = (() => {
             _placeholder_decorators = [property({ type: String })];
             _disabled_decorators = [property({ type: Boolean, reflect: true })];
             _name_decorators = [property({ type: String })];
-            __fieldCtx_decorators = [consume({ context: fieldContext, subscribe: true }), state()];
             _private_highlightedIndex_decorators = [state()];
             __esDecorate(this, null, _options_decorators, { kind: "accessor", name: "options", static: false, private: false, access: { has: obj => "options" in obj, get: obj => obj.options, set: (obj, value) => { obj.options = value; } }, metadata: _metadata }, _options_initializers, _options_extraInitializers);
             __esDecorate(this, null, _value_decorators, { kind: "accessor", name: "value", static: false, private: false, access: { has: obj => "value" in obj, get: obj => obj.value, set: (obj, value) => { obj.value = value; } }, metadata: _metadata }, _value_initializers, _value_extraInitializers);
             __esDecorate(this, null, _placeholder_decorators, { kind: "accessor", name: "placeholder", static: false, private: false, access: { has: obj => "placeholder" in obj, get: obj => obj.placeholder, set: (obj, value) => { obj.placeholder = value; } }, metadata: _metadata }, _placeholder_initializers, _placeholder_extraInitializers);
             __esDecorate(this, null, _disabled_decorators, { kind: "accessor", name: "disabled", static: false, private: false, access: { has: obj => "disabled" in obj, get: obj => obj.disabled, set: (obj, value) => { obj.disabled = value; } }, metadata: _metadata }, _disabled_initializers, _disabled_extraInitializers);
             __esDecorate(this, null, _name_decorators, { kind: "accessor", name: "name", static: false, private: false, access: { has: obj => "name" in obj, get: obj => obj.name, set: (obj, value) => { obj.name = value; } }, metadata: _metadata }, _name_initializers, _name_extraInitializers);
-            __esDecorate(this, null, __fieldCtx_decorators, { kind: "accessor", name: "_fieldCtx", static: false, private: false, access: { has: obj => "_fieldCtx" in obj, get: obj => obj._fieldCtx, set: (obj, value) => { obj._fieldCtx = value; } }, metadata: _metadata }, __fieldCtx_initializers, __fieldCtx_extraInitializers);
             __esDecorate(this, _private_highlightedIndex_descriptor = { get: __setFunctionName(function () { return this.#highlightedIndex_accessor_storage; }, "#highlightedIndex", "get"), set: __setFunctionName(function (value) { this.#highlightedIndex_accessor_storage = value; }, "#highlightedIndex", "set") }, _private_highlightedIndex_decorators, { kind: "accessor", name: "#highlightedIndex", static: false, private: true, access: { has: obj => #highlightedIndex in obj, get: obj => obj.#highlightedIndex, set: (obj, value) => { obj.#highlightedIndex = value; } }, metadata: _metadata }, _private_highlightedIndex_initializers, _private_highlightedIndex_extraInitializers);
             if (_metadata) Object.defineProperty(this, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
         }
         static tagName = "dui-select";
+        static formAssociated = true;
         static styles = [base, hostStyles, componentStyles];
+        #internals;
+        constructor() {
+            super();
+            this.#internals = this.attachInternals();
+        }
         #options_accessor_storage = __runInitializers(this, _options_initializers, []);
         /** The available options. */
         get options() { return this.#options_accessor_storage; }
@@ -194,10 +193,7 @@ let DuiSelect = (() => {
         /** Name for form submission. */
         get name() { return this.#name_accessor_storage; }
         set name(value) { this.#name_accessor_storage = value; }
-        #_fieldCtx_accessor_storage = (__runInitializers(this, _name_extraInitializers), __runInitializers(this, __fieldCtx_initializers, void 0));
-        get _fieldCtx() { return this.#_fieldCtx_accessor_storage; }
-        set _fieldCtx(value) { this.#_fieldCtx_accessor_storage = value; }
-        #highlightedIndex_accessor_storage = (__runInitializers(this, __fieldCtx_extraInitializers), __runInitializers(this, _private_highlightedIndex_initializers, -1));
+        #highlightedIndex_accessor_storage = (__runInitializers(this, _name_extraInitializers), __runInitializers(this, _private_highlightedIndex_initializers, -1));
         get #highlightedIndex() { return _private_highlightedIndex_descriptor.get.call(this); }
         set #highlightedIndex(value) { return _private_highlightedIndex_descriptor.set.call(this, value); }
         #triggerId = (__runInitializers(this, _private_highlightedIndex_extraInitializers), `select-trigger-${crypto.randomUUID().slice(0, 8)}`);
@@ -212,7 +208,6 @@ let DuiSelect = (() => {
             },
             onClose: () => {
                 this.#highlightedIndex = -1;
-                this._fieldCtx?.markTouched();
             },
             renderPopup: (portal) => {
                 return html `
@@ -225,7 +220,7 @@ let DuiSelect = (() => {
             class="Listbox"
             id="${this.#listboxId}"
             role="listbox"
-            aria-labelledby="${this._fieldCtx?.labelId ?? ""}"
+
             @mousedown="${this.#onListMouseDown}"
           >
             ${repeat(this.options, (option) => option.value, this.#renderItem)}
@@ -234,13 +229,10 @@ let DuiSelect = (() => {
       `;
             },
         });
-        // ---- Computed ----
-        get #isDisabled() {
-            return this.disabled || (this._fieldCtx?.disabled ?? false);
-        }
-        get #isInvalid() {
-            return this._fieldCtx?.invalid ?? false;
+        willUpdate() {
+            this.#internals.setFormValue(this.value);
         }
+        // ---- Computed ----
         get #selectedOption() {
             return this.options.find((o) => o.value === this.value);
         }
@@ -253,7 +245,7 @@ let DuiSelect = (() => {
         // ---- Event handlers ----
         #onTriggerClick = (event) => {
             event.stopPropagation();
-            if (this.#isDisabled)
+            if (this.disabled)
                 return;
             if (this.#popup.isOpen) {
                 this.#popup.close();
@@ -263,7 +255,7 @@ let DuiSelect = (() => {
             }
         };
         #onTriggerKeyDown = (event) => {
-            if (this.#isDisabled)
+            if (this.disabled)
                 return;
             switch (event.key) {
                 case "Enter":
@@ -346,8 +338,6 @@ let DuiSelect = (() => {
         // ---- Selection ----
         #selectOption(option) {
             this.value = option.value;
-            this._fieldCtx?.markDirty();
-            this._fieldCtx?.setFilled(this.value.length > 0);
             this.dispatchEvent(valueChangeEvent({ value: option.value, option }));
             this.#popup.close();
             this.#focusTrigger();
@@ -399,22 +389,17 @@ let DuiSelect = (() => {
         part="trigger"
         id="${this.#triggerId}"
         role="combobox"
-        tabindex="${this.#isDisabled ? -1 : 0}"
+        tabindex="${this.disabled ? -1 : 0}"
         aria-haspopup="listbox"
         aria-expanded="${this.#popup.isOpen}"
         aria-controls="${this.#listboxId}"
         aria-activedescendant="${this.#highlightedIndex >= 0
                 ? `${this.#listboxId}-option-${this.#highlightedIndex}`
                 : nothing}"
-        aria-labelledby="${this._fieldCtx?.labelId ?? ""}"
-        aria-invalid="${this.#isInvalid}"
-        ?data-disabled="${this.#isDisabled}"
-        ?data-invalid="${this.#isInvalid}"
+        ?data-disabled="${this.disabled}"
         ?data-open="${this.#popup.isOpen}"
         @click="${this.#onTriggerClick}"
         @keydown="${this.#onTriggerKeyDown}"
-        @focus="${() => this._fieldCtx?.setFocused(true)}"
-        @blur="${() => this._fieldCtx?.setFocused(false)}"
       >
         <span
           class="Value"
@@ -428,9 +413,6 @@ let DuiSelect = (() => {
         </span>
       </div>
 
-      ${this.name
-                ? html `<input type="hidden" name="${this.name}" .value="${this.value}" />`
-                : nothing}
     `;
         }
     };

package/slider/slider.d.ts

@@ -20,7 +20,9 @@ export declare const valueCommittedEvent: (detail: {
 export declare class DuiSlider extends LitElement {
     #private;
     static tagName: "dui-slider";
+    static formAssociated: boolean;
     static styles: import("lit").CSSResult[];
+    constructor();
     /** Current value. */
     accessor value: number;
     /** Minimum value. */
@@ -39,6 +41,7 @@ export declare class DuiSlider extends LitElement {
     accessor unit: string;
     /** Decimal places for value readout. Auto-inferred from `step` if not set. */
     accessor precision: number | undefined;
+    willUpdate(): void;
     disconnectedCallback(): void;
     render(): TemplateResult;
 }

package/slider/slider.js

@@ -201,7 +201,13 @@ let DuiSlider = (() => {
             if (_metadata) Object.defineProperty(this, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
         }
         static tagName = "dui-slider";
+        static formAssociated = true;
         static styles = [base, styles];
+        #internals;
+        constructor() {
+            super();
+            this.#internals = this.attachInternals();
+        }
         #value_accessor_storage = __runInitializers(this, _value_initializers, 0);
         /** Current value. */
         get value() { return this.#value_accessor_storage; }
@@ -238,6 +244,9 @@ let DuiSlider = (() => {
         /** Decimal places for value readout. Auto-inferred from `step` if not set. */
         get precision() { return this.#precision_accessor_storage; }
         set precision(value) { this.#precision_accessor_storage = value; }
+        willUpdate() {
+            this.#internals.setFormValue(String(this.value));
+        }
         #dragging_accessor_storage = (__runInitializers(this, _precision_extraInitializers), __runInitializers(this, _private_dragging_initializers, false));
         get #dragging() { return _private_dragging_descriptor.get.call(this); }
         set #dragging(value) { return _private_dragging_descriptor.set.call(this, value); }
@@ -275,7 +284,6 @@ let DuiSlider = (() => {
             if (this.disabled)
                 return;
             event.preventDefault();
-            this.#dragging = true;
             const newValue = this.#getValueFromPosition(event.clientX);
             if (newValue !== this.value) {
                 this.value = newValue;
@@ -286,7 +294,7 @@ let DuiSlider = (() => {
         });
         #onPointerMove = (event) => {
             if (!this.#dragging)
-                return;
+                this.#dragging = true;
             const newValue = this.#getValueFromPosition(event.clientX);
             if (newValue !== this.value) {
                 this.value = newValue;
@@ -294,12 +302,11 @@ let DuiSlider = (() => {
             }
         };
         #onPointerUp = () => {
-            if (!this.#dragging)
-                return;
+            const wasDragging = this.#dragging;
             this.#dragging = false;
-            this.dispatchEvent(valueCommittedEvent({ value: this.value }));
             document.removeEventListener("pointermove", this.#onPointerMove);
             document.removeEventListener("pointerup", this.#onPointerUp);
+            this.dispatchEvent(valueCommittedEvent({ value: this.value }));
         };
         #onKeyDown = (event) => {
             if (this.disabled)

package/stepper/stepper.d.ts

@@ -1,5 +1,4 @@
 import { LitElement, type TemplateResult } from "lit";
-import { type FieldContext } from "@deepfuture/dui-components/field";
 export declare const valueChangeEvent: (detail: {
     value: number;
 }) => CustomEvent<{
@@ -38,7 +37,6 @@ export declare class DuiStepper extends LitElement {
     accessor readOnly: boolean;
     accessor required: boolean;
     accessor name: string | undefined;
-    accessor _fieldCtx: FieldContext;
     connectedCallback(): void;
     willUpdate(): void;
     render(): TemplateResult;

package/stepper/stepper.js

@@ -38,11 +38,9 @@ var __setFunctionName = (this && this.__setFunctionName) || function (f, name, p
 };
 import { css, html, LitElement, nothing } from "lit";
 import { property, state } from "lit/decorators.js";
-import { consume } from "@lit/context";
 import { live } from "lit/directives/live.js";
 import { base } from "@deepfuture/dui-core/base";
 import { customEvent } from "@deepfuture/dui-core/event";
-import { fieldContext } from "@deepfuture/dui-components/field";
 export const valueChangeEvent = customEvent("value-change", { bubbles: true, composed: true });
 export const valueCommittedEvent = customEvent("value-committed", { bubbles: true, composed: true });
 /** Structural styles only — layout CSS. */
@@ -153,9 +151,6 @@ let DuiStepper = (() => {
     let _private_inputText_initializers = [];
     let _private_inputText_extraInitializers = [];
     let _private_inputText_descriptor;
-    let __fieldCtx_decorators;
-    let __fieldCtx_initializers = [];
-    let __fieldCtx_extraInitializers = [];
     return class DuiStepper extends _classSuper {
         static {
             const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
@@ -171,7 +166,6 @@ let DuiStepper = (() => {
             _name_decorators = [property()];
             _private_internalValue_decorators = [state()];
             _private_inputText_decorators = [state()];
-            __fieldCtx_decorators = [consume({ context: fieldContext, subscribe: true }), state()];
             __esDecorate(this, null, _value_decorators, { kind: "accessor", name: "value", static: false, private: false, access: { has: obj => "value" in obj, get: obj => obj.value, set: (obj, value) => { obj.value = value; } }, metadata: _metadata }, _value_initializers, _value_extraInitializers);
             __esDecorate(this, null, _defaultValue_decorators, { kind: "accessor", name: "defaultValue", static: false, private: false, access: { has: obj => "defaultValue" in obj, get: obj => obj.defaultValue, set: (obj, value) => { obj.defaultValue = value; } }, metadata: _metadata }, _defaultValue_initializers, _defaultValue_extraInitializers);
             __esDecorate(this, null, _min_decorators, { kind: "accessor", name: "min", static: false, private: false, access: { has: obj => "min" in obj, get: obj => obj.min, set: (obj, value) => { obj.min = value; } }, metadata: _metadata }, _min_initializers, _min_extraInitializers);
@@ -184,7 +178,6 @@ let DuiStepper = (() => {
             __esDecorate(this, null, _name_decorators, { kind: "accessor", name: "name", static: false, private: false, access: { has: obj => "name" in obj, get: obj => obj.name, set: (obj, value) => { obj.name = value; } }, metadata: _metadata }, _name_initializers, _name_extraInitializers);
             __esDecorate(this, _private_internalValue_descriptor = { get: __setFunctionName(function () { return this.#internalValue_accessor_storage; }, "#internalValue", "get"), set: __setFunctionName(function (value) { this.#internalValue_accessor_storage = value; }, "#internalValue", "set") }, _private_internalValue_decorators, { kind: "accessor", name: "#internalValue", static: false, private: true, access: { has: obj => #internalValue in obj, get: obj => obj.#internalValue, set: (obj, value) => { obj.#internalValue = value; } }, metadata: _metadata }, _private_internalValue_initializers, _private_internalValue_extraInitializers);
             __esDecorate(this, _private_inputText_descriptor = { get: __setFunctionName(function () { return this.#inputText_accessor_storage; }, "#inputText", "get"), set: __setFunctionName(function (value) { this.#inputText_accessor_storage = value; }, "#inputText", "set") }, _private_inputText_decorators, { kind: "accessor", name: "#inputText", static: false, private: true, access: { has: obj => #inputText in obj, get: obj => obj.#inputText, set: (obj, value) => { obj.#inputText = value; } }, metadata: _metadata }, _private_inputText_initializers, _private_inputText_extraInitializers);
-            __esDecorate(this, null, __fieldCtx_decorators, { kind: "accessor", name: "_fieldCtx", static: false, private: false, access: { has: obj => "_fieldCtx" in obj, get: obj => obj._fieldCtx, set: (obj, value) => { obj._fieldCtx = value; } }, metadata: _metadata }, __fieldCtx_initializers, __fieldCtx_extraInitializers);
             if (_metadata) Object.defineProperty(this, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
         }
         static tagName = "dui-stepper";
@@ -230,19 +223,10 @@ let DuiStepper = (() => {
         #inputText_accessor_storage = (__runInitializers(this, _private_internalValue_extraInitializers), __runInitializers(this, _private_inputText_initializers, ""));
         get #inputText() { return _private_inputText_descriptor.get.call(this); }
         set #inputText(value) { return _private_inputText_descriptor.set.call(this, value); }
-        #_fieldCtx_accessor_storage = (__runInitializers(this, _private_inputText_extraInitializers), __runInitializers(this, __fieldCtx_initializers, void 0));
-        get _fieldCtx() { return this.#_fieldCtx_accessor_storage; }
-        set _fieldCtx(value) { this.#_fieldCtx_accessor_storage = value; }
         // ── Computed getters ───────────────────────────────────────────────
         get #currentValue() {
             return this.value ?? this.#internalValue;
         }
-        get #isDisabled() {
-            return this.disabled || (this._fieldCtx?.disabled ?? false);
-        }
-        get #isInvalid() {
-            return this._fieldCtx?.invalid ?? false;
-        }
         get #canDecrement() {
             const v = this.#currentValue;
             if (v === undefined)
@@ -283,18 +267,16 @@ let DuiStepper = (() => {
             if (this.value === undefined) {
                 this.#internalValue = clamped;
             }
-            this._fieldCtx?.markDirty();
-            this._fieldCtx?.setFilled(true);
             this.dispatchEvent(valueChangeEvent({ value: clamped }));
         }
-        #increment = (__runInitializers(this, __fieldCtx_extraInitializers), (amount) => {
-            if (this.#isDisabled || this.readOnly)
+        #increment = (__runInitializers(this, _private_inputText_extraInitializers), (amount) => {
+            if (this.disabled || this.readOnly)
                 return;
             const current = this.#currentValue ?? this.min ?? 0;
             this.#setValue(current + amount);
         });
         #decrement = (amount) => {
-            if (this.#isDisabled || this.readOnly)
+            if (this.disabled || this.readOnly)
                 return;
             const current = this.#currentValue ?? this.max ?? 0;
             this.#setValue(current - amount);
@@ -318,11 +300,6 @@ let DuiStepper = (() => {
         };
         #onBlur = () => {
             this.#commitInput();
-            this._fieldCtx?.setFocused(false);
-            this._fieldCtx?.markTouched();
-        };
-        #onFocus = () => {
-            this._fieldCtx?.setFocused(true);
         };
         #onKeyDown = (e) => {
             switch (e.key) {
@@ -369,40 +346,32 @@ let DuiStepper = (() => {
         };
         // ── Render ─────────────────────────────────────────────────────────
         render() {
-            const isDisabled = this.#isDisabled;
-            const isInvalid = this.#isInvalid;
-            const controlId = this._fieldCtx?.controlId ?? "";
             const currentValue = this.#currentValue;
             return html `
       <div
         part="root"
-        ?data-disabled="${isDisabled}"
-        ?data-invalid="${isInvalid}"
+        ?data-disabled="${this.disabled}"
       >
         <button
           part="decrement"
           type="button"
           tabindex="-1"
           aria-label="Decrease"
-          ?disabled="${isDisabled || this.readOnly || !this.#canDecrement}"
+          ?disabled="${this.disabled || this.readOnly || !this.#canDecrement}"
           @click="${this.#onDecrementClick}"
         >
           <slot name="decrement">&minus;</slot>
         </button>
         <input
           part="input"
-          id="${controlId || nothing}"
           type="text"
           inputmode="decimal"
           .value="${live(this.#inputText)}"
-          ?disabled="${isDisabled}"
+          ?disabled="${this.disabled}"
           ?readonly="${this.readOnly}"
           ?required="${this.required}"
-          aria-invalid="${isInvalid ? "true" : nothing}"
-          ?data-disabled="${isDisabled}"
           @input="${this.#onInput}"
           @keydown="${this.#onKeyDown}"
-          @focus="${this.#onFocus}"
           @blur="${this.#onBlur}"
         />
         <button
@@ -410,7 +379,7 @@ let DuiStepper = (() => {
           type="button"
           tabindex="-1"
           aria-label="Increase"
-          ?disabled="${isDisabled || this.readOnly || !this.#canIncrement}"
+          ?disabled="${this.disabled || this.readOnly || !this.#canIncrement}"
           @click="${this.#onIncrementClick}"
         >
           <slot name="increment">+</slot>

package/switch/switch.d.ts

@@ -1,5 +1,4 @@
 import { LitElement, type TemplateResult } from "lit";
-import { type FieldContext } from "../field/field-context.js";
 export declare const checkedChangeEvent: (detail: {
     checked: boolean;
 }) => CustomEvent<{
@@ -15,7 +14,9 @@ export declare const checkedChangeEvent: (detail: {
 export declare class DuiSwitch extends LitElement {
     #private;
     static tagName: "dui-switch";
+    static formAssociated: boolean;
     static styles: import("lit").CSSResult[];
+    constructor();
     accessor checked: boolean | undefined;
     accessor defaultChecked: boolean;
     accessor disabled: boolean;
@@ -24,8 +25,8 @@ export declare class DuiSwitch extends LitElement {
     accessor name: string | undefined;
     accessor value: string;
     accessor uncheckedValue: string;
-    accessor _fieldCtx: FieldContext;
     connectedCallback(): void;
+    willUpdate(): void;
     disconnectedCallback(): void;
     render(): TemplateResult;
 }