@deepfuture/dui-components 0.0.19 → 0.0.20

package/input/input.js

@@ -34,12 +34,10 @@ var __runInitializers = (this && this.__runInitializers) || function (thisArg, i
     return useValue ? value : void 0;
 };
 import { css, html, LitElement } from "lit";
-import { property, state } from "lit/decorators.js";
-import { consume } from "@lit/context";
+import { property } from "lit/decorators.js";
 import { ifDefined } from "lit/directives/if-defined.js";
 import { live } from "lit/directives/live.js";
 import { base } from "@deepfuture/dui-core/base";
-import { fieldContext } from "@deepfuture/dui-components/field";
 import { customEvent } from "@deepfuture/dui-core/event";
 export const inputChangeEvent = customEvent("input-change", {
     bubbles: true,
@@ -107,9 +105,6 @@ let DuiInput = (() => {
     let _autofocus_decorators;
     let _autofocus_initializers = [];
     let _autofocus_extraInitializers = [];
-    let __fieldCtx_decorators;
-    let __fieldCtx_initializers = [];
-    let __fieldCtx_extraInitializers = [];
     return class DuiInput extends _classSuper {
         static {
             const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
@@ -125,7 +120,6 @@ let DuiInput = (() => {
             _name_decorators = [property({ type: String })];
             _autocomplete_decorators = [property({ type: String })];
             _autofocus_decorators = [property({ type: Boolean })];
-            __fieldCtx_decorators = [consume({ context: fieldContext, subscribe: true }), state()];
             __esDecorate(this, null, _type_decorators, { kind: "accessor", name: "type", static: false, private: false, access: { has: obj => "type" in obj, get: obj => obj.type, set: (obj, value) => { obj.type = value; } }, metadata: _metadata }, _type_initializers, _type_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);
@@ -138,15 +132,20 @@ let DuiInput = (() => {
             __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, _autocomplete_decorators, { kind: "accessor", name: "autocomplete", static: false, private: false, access: { has: obj => "autocomplete" in obj, get: obj => obj.autocomplete, set: (obj, value) => { obj.autocomplete = value; } }, metadata: _metadata }, _autocomplete_initializers, _autocomplete_extraInitializers);
             __esDecorate(this, null, _autofocus_decorators, { kind: "accessor", name: "autofocus", static: false, private: false, access: { has: obj => "autofocus" in obj, get: obj => obj.autofocus, set: (obj, value) => { obj.autofocus = value; } }, metadata: _metadata }, _autofocus_initializers, _autofocus_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-input";
+        static formAssociated = true;
         static shadowRootOptions = {
             ...LitElement.shadowRootOptions,
             delegatesFocus: true,
         };
         static styles = [base, styles];
+        #internals;
+        constructor() {
+            super();
+            this.#internals = this.attachInternals();
+        }
         #type_accessor_storage = __runInitializers(this, _type_initializers, "text");
         /** Input type (text, email, password, etc.) */
         get type() { return this.#type_accessor_storage; }
@@ -195,55 +194,42 @@ let DuiInput = (() => {
         /** Whether the input should receive focus on mount. */
         get autofocus() { return this.#autofocus_accessor_storage; }
         set autofocus(value) { this.#autofocus_accessor_storage = value; }
-        #_fieldCtx_accessor_storage = (__runInitializers(this, _autofocus_extraInitializers), __runInitializers(this, __fieldCtx_initializers, void 0));
-        get _fieldCtx() { return this.#_fieldCtx_accessor_storage; }
-        set _fieldCtx(value) { this.#_fieldCtx_accessor_storage = value; }
-        get #controlId() {
-            return this._fieldCtx?.controlId ?? "";
-        }
-        get #descriptionId() {
-            return this._fieldCtx?.descriptionId;
-        }
-        get #errorId() {
-            return this._fieldCtx?.errorId;
-        }
-        get #isDisabled() {
-            return this.disabled || (this._fieldCtx?.disabled ?? false);
-        }
-        get #isInvalid() {
-            return this._fieldCtx?.invalid ?? false;
-        }
         firstUpdated() {
+            this.#syncValidity();
             if (this.autofocus) {
                 this.focus();
             }
         }
-        #onInput = (__runInitializers(this, __fieldCtx_extraInitializers), (event) => {
+        updated() {
+            this.#syncValidity();
+        }
+        #onInput = (__runInitializers(this, _autofocus_extraInitializers), (event) => {
             const target = event.target;
             this.value = target.value;
-            this._fieldCtx?.markDirty();
-            this._fieldCtx?.setFilled(this.value.length > 0);
+            this.#syncFormValue();
+            this.#syncValidity();
             this.dispatchEvent(inputChangeEvent({ value: this.value }));
         });
-        #onFocus = () => {
-            this._fieldCtx?.setFocused(true);
-        };
-        #onBlur = () => {
-            this._fieldCtx?.setFocused(false);
-            this._fieldCtx?.markTouched();
-        };
+        willUpdate() {
+            this.#syncFormValue();
+        }
+        #syncFormValue() {
+            this.#internals.setFormValue(this.value);
+        }
+        #syncValidity() {
+            const input = this.shadowRoot?.querySelector("input");
+            if (input) {
+                this.#internals.setValidity(input.validity, input.validationMessage, input);
+            }
+        }
         render() {
-            const describedBy = [this.#descriptionId, this.#isInvalid ? this.#errorId : undefined]
-                .filter(Boolean)
-                .join(" ") || undefined;
             return html `
       <input
         part="input"
-        id="${this.#controlId}"
         type="${this.type}"
         .value="${live(this.value)}"
         placeholder="${this.placeholder}"
-        ?disabled="${this.#isDisabled}"
+        ?disabled="${this.disabled}"
         ?required="${this.required}"
         ?readonly="${this.readonly}"
         minlength="${ifDefined(this.minLength)}"
@@ -251,18 +237,7 @@ let DuiInput = (() => {
         pattern="${ifDefined(this.pattern)}"
         name="${this.name}"
         autocomplete="${ifDefined(this.autocomplete)}"
-        aria-describedby="${ifDefined(describedBy)}"
-        aria-invalid="${this.#isInvalid}"
-        ?data-disabled="${this.#isDisabled}"
-        ?data-invalid="${this.#isInvalid}"
-        ?data-valid="${!this.#isInvalid}"
-        ?data-dirty="${this._fieldCtx?.dirty}"
-        ?data-touched="${this._fieldCtx?.touched}"
-        ?data-filled="${this._fieldCtx?.filled}"
-        ?data-focused="${this._fieldCtx?.focused}"
         @input="${this.#onInput}"
-        @focus="${this.#onFocus}"
-        @blur="${this.#onBlur}"
       />
     `;
         }

package/menu/menu.d.ts

@@ -10,6 +10,8 @@ export declare class DuiMenu extends LitElement {
     #private;
     static tagName: "dui-menu";
     static styles: import("lit").CSSResult[];
+    /** Sets `min-width` on the popup panel (e.g. `"200px"`). Defaults to `"var(--space-28)".` */
+    accessor popupMinWidth: string;
     protected updated(): void;
     render(): TemplateResult;
 }

package/menu/menu.js

@@ -38,7 +38,7 @@ var __setFunctionName = (this && this.__setFunctionName) || function (f, name, p
     return Object.defineProperty(f, "name", { configurable: true, value: prefix ? "".concat(prefix, " ", name) : name });
 };
 import { css, html, LitElement } from "lit";
-import { state } from "lit/decorators.js";
+import { property, state } from "lit/decorators.js";
 import { base } from "@deepfuture/dui-core/base";
 import { FloatingPortalController } from "@deepfuture/dui-core/floating-portal-controller";
 import { DuiMenuItem } from "./menu-item.js";
@@ -80,6 +80,9 @@ const portalPopupStyles = [
  */
 let DuiMenu = (() => {
     let _classSuper = LitElement;
+    let _popupMinWidth_decorators;
+    let _popupMinWidth_initializers = [];
+    let _popupMinWidth_extraInitializers = [];
     let _private_highlightedIndex_decorators;
     let _private_highlightedIndex_initializers = [];
     let _private_highlightedIndex_extraInitializers = [];
@@ -87,13 +90,19 @@ let DuiMenu = (() => {
     return class DuiMenu extends _classSuper {
         static {
             const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
+            _popupMinWidth_decorators = [property({ attribute: "popup-min-width" })];
             _private_highlightedIndex_decorators = [state()];
+            __esDecorate(this, null, _popupMinWidth_decorators, { kind: "accessor", name: "popupMinWidth", static: false, private: false, access: { has: obj => "popupMinWidth" in obj, get: obj => obj.popupMinWidth, set: (obj, value) => { obj.popupMinWidth = value; } }, metadata: _metadata }, _popupMinWidth_initializers, _popupMinWidth_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-menu";
         static styles = [base, hostStyles, componentStyles];
-        #highlightedIndex_accessor_storage = __runInitializers(this, _private_highlightedIndex_initializers, -1);
+        #popupMinWidth_accessor_storage = __runInitializers(this, _popupMinWidth_initializers, "var(--space-28)");
+        /** Sets `min-width` on the popup panel (e.g. `"200px"`). Defaults to `"var(--space-28)".` */
+        get popupMinWidth() { return this.#popupMinWidth_accessor_storage; }
+        set popupMinWidth(value) { this.#popupMinWidth_accessor_storage = value; }
+        #highlightedIndex_accessor_storage = (__runInitializers(this, _popupMinWidth_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); }
         #getTriggerElement = (__runInitializers(this, _private_highlightedIndex_extraInitializers), () => {
@@ -105,7 +114,7 @@ let DuiMenu = (() => {
             matchWidth: false,
             styles: portalPopupStyles,
             contentContainer: ".Menu",
-            contentSelector: "dui-menu-item",
+            contentSelector: "dui-menu-item, dui-separator",
             onOpen: () => {
                 this.#highlightedIndex = -1;
                 this.#getTriggerElement()?.setAttribute("data-open", "");
@@ -117,6 +126,7 @@ let DuiMenu = (() => {
             renderPopup: (portal) => html `
       <div
         class="Popup"
+        style="${this.popupMinWidth ? `min-width:${this.popupMinWidth}` : ""}"
         ?data-starting-style="${portal.isStarting}"
         ?data-ending-style="${portal.isEnding}"
       >

package/number-field/number-field.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<{
@@ -27,8 +26,10 @@ export declare const valueCommittedEvent: (detail: {
 export declare class DuiNumberField extends LitElement {
     #private;
     static tagName: "dui-number-field";
+    static formAssociated: boolean;
     static shadowRootOptions: ShadowRootInit;
     static styles: import("lit").CSSResult[];
+    constructor();
     accessor value: number | undefined;
     accessor defaultValue: number | undefined;
     accessor min: number | undefined;
@@ -50,7 +51,6 @@ export declare class DuiNumberField extends LitElement {
     accessor clickLabel: boolean;
     accessor clickValue: boolean;
     accessor clickField: boolean;
-    accessor _fieldCtx: FieldContext;
     connectedCallback(): void;
     willUpdate(): void;
     render(): TemplateResult;

package/number-field/number-field.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. */
@@ -112,14 +110,6 @@ const styles = css `
     pointer-events: none;
   }
 
-  .HiddenInput {
-    position: absolute;
-    pointer-events: none;
-    opacity: 0;
-    margin: 0;
-    width: 0;
-    height: 0;
-  }
 `;
 /** Drag threshold in px before scrub starts. */
 const DRAG_THRESHOLD = 3;
@@ -218,9 +208,6 @@ let DuiNumberField = (() => {
     let _private_editing_initializers = [];
     let _private_editing_extraInitializers = [];
     let _private_editing_descriptor;
-    let __fieldCtx_decorators;
-    let __fieldCtx_initializers = [];
-    let __fieldCtx_extraInitializers = [];
     return class DuiNumberField extends _classSuper {
         static {
             const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
@@ -249,7 +236,6 @@ let DuiNumberField = (() => {
             _private_inputText_decorators = [state()];
             _private_dragging_decorators = [state()];
             _private_editing_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);
@@ -275,15 +261,20 @@ let DuiNumberField = (() => {
             __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, _private_dragging_descriptor = { get: __setFunctionName(function () { return this.#dragging_accessor_storage; }, "#dragging", "get"), set: __setFunctionName(function (value) { this.#dragging_accessor_storage = value; }, "#dragging", "set") }, _private_dragging_decorators, { kind: "accessor", name: "#dragging", static: false, private: true, access: { has: obj => #dragging in obj, get: obj => obj.#dragging, set: (obj, value) => { obj.#dragging = value; } }, metadata: _metadata }, _private_dragging_initializers, _private_dragging_extraInitializers);
             __esDecorate(this, _private_editing_descriptor = { get: __setFunctionName(function () { return this.#editing_accessor_storage; }, "#editing", "get"), set: __setFunctionName(function (value) { this.#editing_accessor_storage = value; }, "#editing", "set") }, _private_editing_decorators, { kind: "accessor", name: "#editing", static: false, private: true, access: { has: obj => #editing in obj, get: obj => obj.#editing, set: (obj, value) => { obj.#editing = value; } }, metadata: _metadata }, _private_editing_initializers, _private_editing_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-number-field";
+        static formAssociated = true;
         static shadowRootOptions = {
             ...LitElement.shadowRootOptions,
             delegatesFocus: true,
         };
         static styles = [base, styles];
+        #internals;
+        constructor() {
+            super();
+            this.#internals = this.attachInternals();
+        }
         #value_accessor_storage = __runInitializers(this, _value_initializers, undefined);
         // ── Core properties ────────────────────────────────────────────────
         get value() { return this.#value_accessor_storage; }
@@ -363,11 +354,8 @@ let DuiNumberField = (() => {
         #editing_accessor_storage = (__runInitializers(this, _private_dragging_extraInitializers), __runInitializers(this, _private_editing_initializers, false));
         get #editing() { return _private_editing_descriptor.get.call(this); }
         set #editing(value) { return _private_editing_descriptor.set.call(this, value); }
-        #_fieldCtx_accessor_storage = (__runInitializers(this, _private_editing_extraInitializers), __runInitializers(this, __fieldCtx_initializers, void 0));
-        get _fieldCtx() { return this.#_fieldCtx_accessor_storage; }
-        set _fieldCtx(value) { this.#_fieldCtx_accessor_storage = value; }
         // ── Drag state (not reactive) ──────────────────────────────────────
-        #dragStartX = (__runInitializers(this, __fieldCtx_extraInitializers), 0);
+        #dragStartX = (__runInitializers(this, _private_editing_extraInitializers), 0);
         #dragStartValue = 0;
         #dragStarted = false;
         #dragPointerId = null;
@@ -376,12 +364,6 @@ let DuiNumberField = (() => {
         get #currentValue() {
             return this.value ?? this.#internalValue;
         }
-        get #isDisabled() {
-            return this.disabled || (this._fieldCtx?.disabled ?? false);
-        }
-        get #isInvalid() {
-            return this._fieldCtx?.invalid ?? false;
-        }
         get #inferredPrecision() {
             const stepStr = String(this.step);
             const dotIndex = stepStr.indexOf(".");
@@ -455,6 +437,7 @@ let DuiNumberField = (() => {
             if (!this.#editing) {
                 this.#syncInputText();
             }
+            this.#internals.setFormValue(this.#currentValue !== undefined ? String(this.#currentValue) : null);
         }
         // ── Value helpers ──────────────────────────────────────────────────
         #syncInputText() {
@@ -472,18 +455,16 @@ let DuiNumberField = (() => {
             if (this.value === undefined) {
                 this.#internalValue = clamped;
             }
-            this._fieldCtx?.markDirty();
-            this._fieldCtx?.setFilled(true);
             this.dispatchEvent(valueChangeEvent({ value: clamped }));
         }
         #increment = (amount) => {
-            if (this.#isDisabled || this.readOnly)
+            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);
@@ -512,7 +493,7 @@ let DuiNumberField = (() => {
         }
         // ── Drag-to-scrub ─────────────────────────────────────────────────
         #startDrag(e, allowsClick) {
-            if (this.#isDisabled || this.readOnly)
+            if (this.disabled || this.readOnly)
                 return;
             this.#dragPointerId = e.pointerId;
             this.#dragStartX = e.clientX;
@@ -631,12 +612,9 @@ let DuiNumberField = (() => {
             if (this.#editing) {
                 this.#commitInput();
             }
-            this._fieldCtx?.setFocused(false);
-            this._fieldCtx?.markTouched();
         };
         #onFocus = () => {
             this.#editing = true;
-            this._fieldCtx?.setFocused(true);
             const input = this.shadowRoot?.querySelector('[part="input"]');
             if (input) {
                 requestAnimationFrame(() => input.select());
@@ -697,9 +675,6 @@ let DuiNumberField = (() => {
         };
         // ── Render ─────────────────────────────────────────────────────────
         render() {
-            const isDisabled = this.#isDisabled;
-            const isInvalid = this.#isInvalid;
-            const controlId = this._fieldCtx?.controlId ?? "";
             const currentValue = this.#currentValue;
             // Compute which zones are scrubbable for cursor styling
             const labelScrub = this.#effectiveScrubLabel || this.#effectiveScrubField;
@@ -716,9 +691,8 @@ let DuiNumberField = (() => {
         part="root"
         ?data-scrub="${rootScrub}"
         ?data-dragging="${this.#dragging}"
-        ?data-disabled="${isDisabled}"
+        ?data-disabled="${this.disabled}"
         ?data-readonly="${this.readOnly}"
-        ?data-invalid="${isInvalid}"
         @pointerdown="${this.#onRootPointerDown}"
       >
         <span part="icon">
@@ -727,20 +701,17 @@ let DuiNumberField = (() => {
 
         <input
           part="input"
-          id="${controlId || nothing}"
           type="text"
           inputmode="decimal"
           ?data-scrub="${inputScrub}"
           .value="${live(this.#inputText)}"
-          ?disabled="${isDisabled}"
+          ?disabled="${this.disabled}"
           ?readonly="${this.readOnly}"
           ?required="${this.required}"
           aria-label="${this.label || nothing}"
           aria-valuenow="${currentValue ?? nothing}"
           aria-valuemin="${this.min ?? nothing}"
           aria-valuemax="${this.max ?? nothing}"
-          aria-invalid="${isInvalid ? "true" : nothing}"
-          ?data-disabled="${isDisabled}"
           @pointerdown="${this.#onInputPointerDown}"
           @input="${this.#onInput}"
           @keydown="${this.#onKeyDown}"
@@ -750,13 +721,6 @@ let DuiNumberField = (() => {
 
         <span part="unit">${this.unit}</span>
 
-        ${this.name
-                ? html `<input
-              type="hidden"
-              name="${this.name}"
-              .value="${String(currentValue ?? "")}"
-            />`
-                : nothing}
       </div>
     `;
         }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@deepfuture/dui-components",
-  "version": "0.0.19",
+  "version": "0.0.20",
   "description": "DUI unstyled web components — structural CSS only, themed via applyTheme()",
   "type": "module",
   "license": "MIT",
@@ -94,10 +94,6 @@
       "import": "./trunc/index.js",
       "types": "./trunc/index.d.ts"
     },
-    "./link": {
-      "import": "./link/index.js",
-      "types": "./link/index.d.ts"
-    },
     "./avatar": {
       "import": "./avatar/index.js",
       "types": "./avatar/index.d.ts"
@@ -110,6 +106,10 @@
       "import": "./field/index.js",
       "types": "./field/index.d.ts"
     },
+    "./fieldset": {
+      "import": "./fieldset/index.js",
+      "types": "./fieldset/index.d.ts"
+    },
     "./input": {
       "import": "./input/index.js",
       "types": "./input/index.d.ts"
@@ -174,6 +174,10 @@
       "import": "./split-button/index.js",
       "types": "./split-button/index.d.ts"
     },
+    "./card": {
+      "import": "./card/index.js",
+      "types": "./card/index.d.ts"
+    },
     "./card-grid": {
       "import": "./card-grid/index.js",
       "types": "./card-grid/index.d.ts"
@@ -190,7 +194,7 @@
     "README.md"
   ],
   "dependencies": {
-    "@deepfuture/dui-core": "0.0.19",
+    "@deepfuture/dui-core": "0.0.20",
     "lit": "^3.3.2",
     "@lit/context": "^1.1.3"
   },

package/radio/radio.d.ts

@@ -1,6 +1,5 @@
 /** Ported from original DUI: deep-future-app/app/client/components/dui/radio */
 import { LitElement, type TemplateResult } from "lit";
-import { type FieldContext } from "@deepfuture/dui-components/field";
 /**
  * `<dui-radio>` — A radio button input.
  *
@@ -15,15 +14,17 @@ import { type FieldContext } from "@deepfuture/dui-components/field";
 export declare class DuiRadio extends LitElement {
     #private;
     static tagName: "dui-radio";
+    static formAssociated: boolean;
     static styles: import("lit").CSSResult[];
+    constructor();
     /** The value attribute for this radio option. */
     accessor value: string;
     /** Whether the radio is disabled. */
     accessor disabled: boolean;
     /** Whether the radio is read-only. */
     accessor readOnly: boolean;
-    accessor _fieldCtx: FieldContext;
     connectedCallback(): void;
+    willUpdate(): void;
     disconnectedCallback(): void;
     render(): TemplateResult;
 }