@deepfuture/dui-components 0.0.19 → 0.0.21

package/all.d.ts

@@ -29,6 +29,8 @@ import { DuiButton } from "./button/index.js";
 export { DuiButton };
 import { DuiCalendar } from "./calendar/index.js";
 export { DuiCalendar };
+import { DuiCard } from "./card/index.js";
+export { DuiCard };
 import { DuiCheckbox, DuiCheckboxGroup } from "./checkbox/index.js";
 export { DuiCheckbox, DuiCheckboxGroup };
 export type { CheckboxGroupContext } from "./checkbox/index.js";
@@ -48,13 +50,15 @@ export { DuiDialog, DuiDialogTrigger, DuiDialogPopup, DuiDialogClose, };
 export type { DialogOpenChangeDetail, DialogContext } from "./dialog/index.js";
 import { DuiDropzone } from "./dropzone/index.js";
 export { DuiDropzone };
+import { DuiField } from "./field/index.js";
+export { DuiField };
+import { DuiFieldset } from "./fieldset/index.js";
+export { DuiFieldset };
 export type { DropzoneErrorCode, DropzoneRejectionCode, FileRejectionError, RejectedFile, DropzoneDropDetail, DropzoneAcceptedDetail, DropzoneRejectedDetail, DropzoneErrorDetail, } from "./dropzone/index.js";
 import { DuiIcon } from "./icon/index.js";
 export { DuiIcon };
 import { DuiInput } from "./input/index.js";
 export { DuiInput };
-import { DuiLink } from "./link/index.js";
-export { DuiLink };
 import { DuiMenu, DuiMenuItem } from "./menu/index.js";
 export { DuiMenu, DuiMenuItem };
 import { DuiMenubar } from "./menubar/index.js";

package/all.js

@@ -32,6 +32,9 @@ export { DuiButton };
 // --- Calendar ---
 import { DuiCalendar } from "./calendar/index.js";
 export { DuiCalendar };
+// --- Card ---
+import { DuiCard } from "./card/index.js";
+export { DuiCard };
 // --- Checkbox ---
 import { DuiCheckbox, DuiCheckboxGroup } from "./checkbox/index.js";
 export { DuiCheckbox, DuiCheckboxGroup };
@@ -53,15 +56,18 @@ export { DuiDialog, DuiDialogTrigger, DuiDialogPopup, DuiDialogClose, };
 // --- Dropzone ---
 import { DuiDropzone } from "./dropzone/index.js";
 export { DuiDropzone };
+// --- Field ---
+import { DuiField } from "./field/index.js";
+export { DuiField };
+// --- Fieldset ---
+import { DuiFieldset } from "./fieldset/index.js";
+export { DuiFieldset };
 // --- Icon ---
 import { DuiIcon } from "./icon/index.js";
 export { DuiIcon };
 // --- Input ---
 import { DuiInput } from "./input/index.js";
 export { DuiInput };
-// --- Link ---
-import { DuiLink } from "./link/index.js";
-export { DuiLink };
 // --- Menu ---
 import { DuiMenu, DuiMenuItem } from "./menu/index.js";
 export { DuiMenu, DuiMenuItem };
@@ -152,6 +158,7 @@ export const allComponents = [
     DuiBreadcrumbEllipsis,
     DuiButton,
     DuiCalendar,
+    DuiCard,
     DuiCheckbox,
     DuiCheckboxGroup,
     DuiCollapsible,
@@ -170,9 +177,10 @@ export const allComponents = [
     DuiDialogPopup,
     DuiDialogClose,
     DuiDropzone,
+    DuiField,
+    DuiFieldset,
     DuiIcon,
     DuiInput,
-    DuiLink,
     DuiMenu,
     DuiMenuItem,
     DuiMenubar,

package/card/card.d.ts

@@ -0,0 +1,29 @@
+/** Ported from ShadCN/ui: https://ui.shadcn.com/docs/components/card */
+import { LitElement, type TemplateResult } from "lit";
+/**
+ * `<dui-card>` — A container for grouped content with header, body,
+ * and footer sections.
+ *
+ * Uses flex-column + gap for vertical rhythm. The card owns all internal
+ * spacing; consumers slot content into named regions.
+ *
+ * @slot - Main card content (body).
+ * @slot title - Card heading text.
+ * @slot description - Helper text below the title.
+ * @slot action - Top-right header action (button, badge, etc.).
+ * @slot footer - Footer content (buttons, links, etc.).
+ *
+ * @csspart root - The outer card container.
+ * @csspart header - The header section (title + description + action).
+ * @csspart header-text - The vertical stack holding title and description.
+ * @csspart content - The wrapper around the default slot.
+ * @csspart footer - The footer section.
+ */
+export declare class DuiCard extends LitElement {
+    #private;
+    static tagName: "dui-card";
+    static styles: import("lit").CSSResult[];
+    /** Card size — controls internal spacing via `--card-*` tokens. */
+    accessor size: string;
+    render(): TemplateResult;
+}

package/card/card.js

@@ -0,0 +1,179 @@
+/** Ported from ShadCN/ui: https://ui.shadcn.com/docs/components/card */
+var __esDecorate = (this && this.__esDecorate) || function (ctor, descriptorIn, decorators, contextIn, initializers, extraInitializers) {
+    function accept(f) { if (f !== void 0 && typeof f !== "function") throw new TypeError("Function expected"); return f; }
+    var kind = contextIn.kind, key = kind === "getter" ? "get" : kind === "setter" ? "set" : "value";
+    var target = !descriptorIn && ctor ? contextIn["static"] ? ctor : ctor.prototype : null;
+    var descriptor = descriptorIn || (target ? Object.getOwnPropertyDescriptor(target, contextIn.name) : {});
+    var _, done = false;
+    for (var i = decorators.length - 1; i >= 0; i--) {
+        var context = {};
+        for (var p in contextIn) context[p] = p === "access" ? {} : contextIn[p];
+        for (var p in contextIn.access) context.access[p] = contextIn.access[p];
+        context.addInitializer = function (f) { if (done) throw new TypeError("Cannot add initializers after decoration has completed"); extraInitializers.push(accept(f || null)); };
+        var result = (0, decorators[i])(kind === "accessor" ? { get: descriptor.get, set: descriptor.set } : descriptor[key], context);
+        if (kind === "accessor") {
+            if (result === void 0) continue;
+            if (result === null || typeof result !== "object") throw new TypeError("Object expected");
+            if (_ = accept(result.get)) descriptor.get = _;
+            if (_ = accept(result.set)) descriptor.set = _;
+            if (_ = accept(result.init)) initializers.unshift(_);
+        }
+        else if (_ = accept(result)) {
+            if (kind === "field") initializers.unshift(_);
+            else descriptor[key] = _;
+        }
+    }
+    if (target) Object.defineProperty(target, contextIn.name, descriptor);
+    done = true;
+};
+var __runInitializers = (this && this.__runInitializers) || function (thisArg, initializers, value) {
+    var useValue = arguments.length > 2;
+    for (var i = 0; i < initializers.length; i++) {
+        value = useValue ? initializers[i].call(thisArg, value) : initializers[i].call(thisArg);
+    }
+    return useValue ? value : void 0;
+};
+var __setFunctionName = (this && this.__setFunctionName) || function (f, name, prefix) {
+    if (typeof name === "symbol") name = name.description ? "[".concat(name.description, "]") : "";
+    return Object.defineProperty(f, "name", { configurable: true, value: prefix ? "".concat(prefix, " ", name) : name });
+};
+import { css, html, LitElement } from "lit";
+import { property, state } from "lit/decorators.js";
+import { base } from "@deepfuture/dui-core/base";
+/** Structural styles only — layout CSS. */
+const styles = css `
+  :host {
+    display: block;
+  }
+
+  [part="root"] {
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+  }
+
+  [part="header"]:not([hidden]) {
+    display: flex;
+    align-items: start;
+  }
+
+  [part="header-text"] {
+    flex: 1;
+    min-width: 0;
+    display: flex;
+    flex-direction: column;
+  }
+
+  [part="action"] {
+    height: 0;
+    overflow: visible;
+    display: flex;
+    align-items: start;
+  }
+
+  [part="footer"]:not([hidden]) {
+    display: flex;
+    align-items: center;
+  }
+`;
+/**
+ * `<dui-card>` — A container for grouped content with header, body,
+ * and footer sections.
+ *
+ * Uses flex-column + gap for vertical rhythm. The card owns all internal
+ * spacing; consumers slot content into named regions.
+ *
+ * @slot - Main card content (body).
+ * @slot title - Card heading text.
+ * @slot description - Helper text below the title.
+ * @slot action - Top-right header action (button, badge, etc.).
+ * @slot footer - Footer content (buttons, links, etc.).
+ *
+ * @csspart root - The outer card container.
+ * @csspart header - The header section (title + description + action).
+ * @csspart header-text - The vertical stack holding title and description.
+ * @csspart content - The wrapper around the default slot.
+ * @csspart footer - The footer section.
+ */
+let DuiCard = (() => {
+    let _classSuper = LitElement;
+    let _size_decorators;
+    let _size_initializers = [];
+    let _size_extraInitializers = [];
+    let _private_hasHeader_decorators;
+    let _private_hasHeader_initializers = [];
+    let _private_hasHeader_extraInitializers = [];
+    let _private_hasHeader_descriptor;
+    let _private_hasFooter_decorators;
+    let _private_hasFooter_initializers = [];
+    let _private_hasFooter_extraInitializers = [];
+    let _private_hasFooter_descriptor;
+    return class DuiCard extends _classSuper {
+        static {
+            const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
+            _size_decorators = [property({ reflect: true })];
+            _private_hasHeader_decorators = [state()];
+            _private_hasFooter_decorators = [state()];
+            __esDecorate(this, null, _size_decorators, { kind: "accessor", name: "size", static: false, private: false, access: { has: obj => "size" in obj, get: obj => obj.size, set: (obj, value) => { obj.size = value; } }, metadata: _metadata }, _size_initializers, _size_extraInitializers);
+            __esDecorate(this, _private_hasHeader_descriptor = { get: __setFunctionName(function () { return this.#hasHeader_accessor_storage; }, "#hasHeader", "get"), set: __setFunctionName(function (value) { this.#hasHeader_accessor_storage = value; }, "#hasHeader", "set") }, _private_hasHeader_decorators, { kind: "accessor", name: "#hasHeader", static: false, private: true, access: { has: obj => #hasHeader in obj, get: obj => obj.#hasHeader, set: (obj, value) => { obj.#hasHeader = value; } }, metadata: _metadata }, _private_hasHeader_initializers, _private_hasHeader_extraInitializers);
+            __esDecorate(this, _private_hasFooter_descriptor = { get: __setFunctionName(function () { return this.#hasFooter_accessor_storage; }, "#hasFooter", "get"), set: __setFunctionName(function (value) { this.#hasFooter_accessor_storage = value; }, "#hasFooter", "set") }, _private_hasFooter_decorators, { kind: "accessor", name: "#hasFooter", static: false, private: true, access: { has: obj => #hasFooter in obj, get: obj => obj.#hasFooter, set: (obj, value) => { obj.#hasFooter = value; } }, metadata: _metadata }, _private_hasFooter_initializers, _private_hasFooter_extraInitializers);
+            if (_metadata) Object.defineProperty(this, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
+        }
+        static tagName = "dui-card";
+        static styles = [base, styles];
+        #size_accessor_storage = __runInitializers(this, _size_initializers, "");
+        /** Card size — controls internal spacing via `--card-*` tokens. */
+        get size() { return this.#size_accessor_storage; }
+        set size(value) { this.#size_accessor_storage = value; }
+        #hasHeader_accessor_storage = (__runInitializers(this, _size_extraInitializers), __runInitializers(this, _private_hasHeader_initializers, false));
+        get #hasHeader() { return _private_hasHeader_descriptor.get.call(this); }
+        set #hasHeader(value) { return _private_hasHeader_descriptor.set.call(this, value); }
+        #hasFooter_accessor_storage = (__runInitializers(this, _private_hasHeader_extraInitializers), __runInitializers(this, _private_hasFooter_initializers, false));
+        get #hasFooter() { return _private_hasFooter_descriptor.get.call(this); }
+        set #hasFooter(value) { return _private_hasFooter_descriptor.set.call(this, value); }
+        #titleFilled = (__runInitializers(this, _private_hasFooter_extraInitializers), false);
+        #descFilled = false;
+        #actionFilled = false;
+        #onHeaderSlotChange = (e) => {
+            const slot = e.target;
+            const filled = slot.assignedElements().length > 0;
+            if (slot.name === "title")
+                this.#titleFilled = filled;
+            else if (slot.name === "description")
+                this.#descFilled = filled;
+            else if (slot.name === "action")
+                this.#actionFilled = filled;
+            this.#hasHeader = this.#titleFilled || this.#descFilled ||
+                this.#actionFilled;
+        };
+        #onFooterSlotChange = (e) => {
+            const slot = e.target;
+            this.#hasFooter = slot.assignedElements().length > 0;
+        };
+        render() {
+            return html `
+      <div part="root">
+        <div part="header" ?hidden=${!this.#hasHeader}>
+          <div part="header-text">
+            <slot name="title" @slotchange=${this.#onHeaderSlotChange}></slot>
+            <slot
+              name="description"
+              @slotchange=${this.#onHeaderSlotChange}
+            ></slot>
+          </div>
+          <div part="action">
+            <slot name="action" @slotchange=${this.#onHeaderSlotChange}></slot>
+          </div>
+        </div>
+        <div part="content">
+          <slot></slot>
+        </div>
+        <div part="footer" ?hidden=${!this.#hasFooter}>
+          <slot name="footer" @slotchange=${this.#onFooterSlotChange}></slot>
+        </div>
+      </div>
+    `;
+        }
+    };
+})();
+export { DuiCard };

package/card/index.d.ts

@@ -0,0 +1,3 @@
+import { DuiCard } from "./card.js";
+export { DuiCard };
+export declare const cardFamily: (typeof DuiCard)[];

package/card/index.js

@@ -0,0 +1,3 @@
+import { DuiCard } from "./card.js";
+export { DuiCard };
+export const cardFamily = [DuiCard];

package/checkbox/checkbox.d.ts

@@ -1,6 +1,5 @@
 /** Ported from original DUI: deep-future-app/app/client/components/dui/checkbox */
 import { LitElement, type TemplateResult } from "lit";
-import { type FieldContext } from "../field/field-context.js";
 export declare const checkedChangeEvent: (detail: {
     checked: boolean;
     indeterminate: boolean;
@@ -22,7 +21,9 @@ export declare const checkedChangeEvent: (detail: {
 export declare class DuiCheckbox extends LitElement {
     #private;
     static tagName: "dui-checkbox";
+    static formAssociated: boolean;
     static styles: import("lit").CSSResult[];
+    constructor();
     /** Whether the checkbox is checked (controlled). */
     accessor checked: boolean | undefined;
     /** Initial checked state for uncontrolled usage. */
@@ -41,8 +42,8 @@ export declare class DuiCheckbox extends LitElement {
     accessor value: string | undefined;
     /** When true, acts as a parent (select-all) checkbox within a group. */
     accessor parent: boolean;
-    accessor _fieldCtx: FieldContext;
     connectedCallback(): void;
+    willUpdate(): void;
     disconnectedCallback(): void;
     render(): TemplateResult;
 }

package/checkbox/checkbox.js

@@ -40,10 +40,8 @@ var __setFunctionName = (this && this.__setFunctionName) || function (f, name, p
 import { css, html, LitElement, nothing } from "lit";
 import { property, state } from "lit/decorators.js";
 import { ContextConsumer } from "@lit/context";
-import { consume } from "@lit/context";
 import { base } from "@deepfuture/dui-core/base";
 import { customEvent } from "@deepfuture/dui-core/event";
-import { fieldContext } from "../field/field-context.js";
 import { checkboxGroupContext } from "./checkbox-group-context.js";
 export const checkedChangeEvent = customEvent("checked-change", { bubbles: true, composed: true });
 /** Structural styles only — layout and behavioral CSS. */
@@ -71,6 +69,7 @@ const styles = css `
     border: none;
     outline: 0;
     cursor: pointer;
+    user-select: none;
   }
 
   [part="root"][data-disabled] {
@@ -89,14 +88,6 @@ const styles = css `
     display: none;
   }
 
-  .HiddenInput {
-    position: absolute;
-    pointer-events: none;
-    opacity: 0;
-    margin: 0;
-    width: 0;
-    height: 0;
-  }
 `;
 const checkIcon = html `
   <svg
@@ -170,9 +161,6 @@ let DuiCheckbox = (() => {
     let _private_internalChecked_initializers = [];
     let _private_internalChecked_extraInitializers = [];
     let _private_internalChecked_descriptor;
-    let __fieldCtx_decorators;
-    let __fieldCtx_initializers = [];
-    let __fieldCtx_extraInitializers = [];
     return class DuiCheckbox extends _classSuper {
         static {
             const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
@@ -186,7 +174,6 @@ let DuiCheckbox = (() => {
             _value_decorators = [property()];
             _parent_decorators = [property({ type: Boolean })];
             _private_internalChecked_decorators = [state()];
-            __fieldCtx_decorators = [consume({ context: fieldContext, subscribe: true }), state()];
             __esDecorate(this, null, _checked_decorators, { kind: "accessor", name: "checked", static: false, private: false, access: { has: obj => "checked" in obj, get: obj => obj.checked, set: (obj, value) => { obj.checked = value; } }, metadata: _metadata }, _checked_initializers, _checked_extraInitializers);
             __esDecorate(this, null, _defaultChecked_decorators, { kind: "accessor", name: "defaultChecked", static: false, private: false, access: { has: obj => "defaultChecked" in obj, get: obj => obj.defaultChecked, set: (obj, value) => { obj.defaultChecked = value; } }, metadata: _metadata }, _defaultChecked_initializers, _defaultChecked_extraInitializers);
             __esDecorate(this, null, _indeterminate_decorators, { kind: "accessor", name: "indeterminate", static: false, private: false, access: { has: obj => "indeterminate" in obj, get: obj => obj.indeterminate, set: (obj, value) => { obj.indeterminate = value; } }, metadata: _metadata }, _indeterminate_initializers, _indeterminate_extraInitializers);
@@ -197,11 +184,16 @@ let DuiCheckbox = (() => {
             __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, _parent_decorators, { kind: "accessor", name: "parent", static: false, private: false, access: { has: obj => "parent" in obj, get: obj => obj.parent, set: (obj, value) => { obj.parent = value; } }, metadata: _metadata }, _parent_initializers, _parent_extraInitializers);
             __esDecorate(this, _private_internalChecked_descriptor = { get: __setFunctionName(function () { return this.#internalChecked_accessor_storage; }, "#internalChecked", "get"), set: __setFunctionName(function (value) { this.#internalChecked_accessor_storage = value; }, "#internalChecked", "set") }, _private_internalChecked_decorators, { kind: "accessor", name: "#internalChecked", static: false, private: true, access: { has: obj => #internalChecked in obj, get: obj => obj.#internalChecked, set: (obj, value) => { obj.#internalChecked = value; } }, metadata: _metadata }, _private_internalChecked_initializers, _private_internalChecked_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-checkbox";
+        static formAssociated = true;
         static styles = [base, styles];
+        #internals;
+        constructor() {
+            super();
+            this.#internals = this.attachInternals();
+        }
         #checked_accessor_storage = __runInitializers(this, _checked_initializers, undefined);
         /** Whether the checkbox is checked (controlled). */
         get checked() { return this.#checked_accessor_storage; }
@@ -245,9 +237,6 @@ let DuiCheckbox = (() => {
             context: checkboxGroupContext,
             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() {
             const ctx = this.#groupCtx.value;
             if (ctx && this.value !== undefined) {
@@ -269,11 +258,7 @@ let DuiCheckbox = (() => {
         }
         get #isDisabled() {
             return (this.disabled ||
-                (this.#groupCtx.value?.disabled ?? false) ||
-                (this._fieldCtx?.disabled ?? false));
-        }
-        get #isInvalid() {
-            return this._fieldCtx?.invalid ?? false;
+                (this.#groupCtx.value?.disabled ?? false));
         }
         connectedCallback() {
             super.connectedCallback();
@@ -282,13 +267,24 @@ let DuiCheckbox = (() => {
             }
             this.addEventListener("click", this.#handleHostClick);
         }
+        willUpdate() {
+            this.#syncFormValue();
+        }
+        #syncFormValue() {
+            if (this.#isChecked) {
+                this.#internals.setFormValue(this.value ?? "on");
+            }
+            else {
+                this.#internals.setFormValue(null);
+            }
+        }
         disconnectedCallback() {
             super.disconnectedCallback();
             this.removeEventListener("click", this.#handleHostClick);
         }
-        #handleHostClick = (__runInitializers(this, __fieldCtx_extraInitializers), (_e) => {
+        #handleHostClick = (_e) => {
             this.#handleClick();
-        });
+        };
         #handleClick = () => {
             if (this.#isDisabled || this.readOnly)
                 return;
@@ -301,8 +297,6 @@ let DuiCheckbox = (() => {
                 else {
                     ctx.toggle(this.value);
                 }
-                this._fieldCtx?.markDirty();
-                this._fieldCtx?.markTouched();
                 return;
             }
             // Standalone behavior
@@ -311,8 +305,6 @@ let DuiCheckbox = (() => {
                 this.#internalChecked = newChecked;
                 this.indeterminate = false;
             }
-            this._fieldCtx?.markDirty();
-            this._fieldCtx?.markTouched();
             this.dispatchEvent(checkedChangeEvent({
                 checked: newChecked,
                 indeterminate: false,
@@ -328,19 +320,15 @@ let DuiCheckbox = (() => {
             const isChecked = this.#isChecked;
             const isIndeterminate = this.#isIndeterminate;
             const isDisabled = this.#isDisabled;
-            const isInvalid = this.#isInvalid;
             const showIndicator = isChecked || isIndeterminate;
-            const controlId = this._fieldCtx?.controlId ?? "";
             return html `
       <span
         part="root"
         role="checkbox"
-        id="${controlId || nothing}"
         aria-checked="${isIndeterminate ? "mixed" : String(isChecked)}"
         aria-disabled="${isDisabled ? "true" : nothing}"
         aria-readonly="${this.readOnly ? "true" : nothing}"
         aria-required="${this.required ? "true" : nothing}"
-        aria-invalid="${isInvalid ? "true" : nothing}"
         tabindex="${isDisabled ? nothing : "0"}"
         ?data-checked="${isChecked && !isIndeterminate}"
         ?data-unchecked="${!isChecked && !isIndeterminate}"
@@ -348,7 +336,6 @@ let DuiCheckbox = (() => {
         ?data-disabled="${isDisabled}"
         ?data-readonly="${this.readOnly}"
         ?data-required="${this.required}"
-        ?data-invalid="${isInvalid}"
         @keydown="${this.#handleKeyDown}"
       >
         <span
@@ -363,18 +350,6 @@ let DuiCheckbox = (() => {
                     : checkIcon
                 : nothing}
         </span>
-        <input
-          type="checkbox"
-          name="${this.name ?? nothing}"
-          value="${this.value ?? nothing}"
-          .checked="${isChecked}"
-          .indeterminate="${isIndeterminate}"
-          ?disabled="${isDisabled}"
-          ?required="${this.required}"
-          class="HiddenInput"
-          aria-hidden="true"
-          tabindex="-1"
-        />
       </span>
       <slot></slot>
     `;

package/combobox/combobox.d.ts

@@ -27,7 +27,9 @@ export declare const valuesChangeEvent: (detail: ComboboxValuesChangeDetail) =>
 export declare class DuiCombobox extends LitElement {
     #private;
     static tagName: "dui-combobox";
+    static formAssociated: boolean;
     static styles: import("lit").CSSResult[];
+    constructor();
     /** The available options. */
     accessor options: SelectOption[];
     /** Currently selected value (single-select mode). */
@@ -42,5 +44,6 @@ export declare class DuiCombobox extends LitElement {
     accessor disabled: boolean;
     /** Name for form submission. */
     accessor name: string;
+    willUpdate(): void;
     render(): TemplateResult;
 }

package/combobox/combobox.js

@@ -224,7 +224,13 @@ let DuiCombobox = (() => {
             if (_metadata) Object.defineProperty(this, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
         }
         static tagName = "dui-combobox";
+        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; }
@@ -253,6 +259,21 @@ let DuiCombobox = (() => {
         /** Name for form submission. */
         get name() { return this.#name_accessor_storage; }
         set name(value) { this.#name_accessor_storage = value; }
+        willUpdate() {
+            this.#syncFormValue();
+        }
+        #syncFormValue() {
+            if (this.multiple) {
+                const formData = new FormData();
+                for (const v of this.values) {
+                    formData.append(this.name || "values", v);
+                }
+                this.#internals.setFormValue(formData);
+            }
+            else {
+                this.#internals.setFormValue(this.value || null);
+            }
+        }
         #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); }
@@ -531,11 +552,6 @@ let DuiCombobox = (() => {
           ${inputHtml}
           <dui-icon class="Arrow"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m6 9 6 6 6-6"/></svg></dui-icon>
         </div>
-        ${this.name
-                    ? repeat(Array.from(this.values), (v) => v, (v) => html `
-                <input type="hidden" name="${this.name}" .value="${v}" />
-              `)
-                    : nothing}
       `;
             }
             return html `
@@ -543,11 +559,6 @@ let DuiCombobox = (() => {
         ${inputHtml}
         <dui-icon class="Arrow"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m6 9 6 6 6-6"/></svg></dui-icon>
       </div>
-      ${this.name
-                ? html `
-            <input type="hidden" name="${this.name}" .value="${this.value}" />
-          `
-                : nothing}
     `;
         }
     };

package/data-table/data-table.js

@@ -433,7 +433,7 @@ let DuiDataTable = (() => {
             @click=${() => this.#goToPage(1)}
             aria-label="First page"
           >
-            <dui-icon style="--icon-size: var(--font-size-sm)"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m11 17-5-5 5-5"/><path d="m18 17-5-5 5-5"/></svg></dui-icon>
+            <dui-icon style="--icon-size: var(--text-sm)"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m11 17-5-5 5-5"/><path d="m18 17-5-5 5-5"/></svg></dui-icon>
           </button>
           <button
             class="PageButton"
@@ -441,7 +441,7 @@ let DuiDataTable = (() => {
             @click=${() => this.#goToPage(this.#page - 1)}
             aria-label="Previous page"
           >
-            <dui-icon style="--icon-size: var(--font-size-sm)"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m15 18-6-6 6-6"/></svg></dui-icon>
+            <dui-icon style="--icon-size: var(--text-sm)"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m15 18-6-6 6-6"/></svg></dui-icon>
           </button>
           <button
             class="PageButton"
@@ -449,7 +449,7 @@ let DuiDataTable = (() => {
             @click=${() => this.#goToPage(this.#page + 1)}
             aria-label="Next page"
           >
-            <dui-icon style="--icon-size: var(--font-size-sm)"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m9 18 6-6-6-6"/></svg></dui-icon>
+            <dui-icon style="--icon-size: var(--text-sm)"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m9 18 6-6-6-6"/></svg></dui-icon>
           </button>
           <button
             class="PageButton"
@@ -457,7 +457,7 @@ let DuiDataTable = (() => {
             @click=${() => this.#goToPage(this.#totalPages)}
             aria-label="Last page"
           >
-            <dui-icon style="--icon-size: var(--font-size-sm)"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m6 17 5-5-5-5"/><path d="m13 17 5-5-5-5"/></svg></dui-icon>
+            <dui-icon style="--icon-size: var(--text-sm)"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m6 17 5-5-5-5"/><path d="m13 17 5-5-5-5"/></svg></dui-icon>
           </button>
         </div>
       </div>

package/dropzone/dropzone.js

@@ -389,6 +389,7 @@ let DuiDropzone = (() => {
         part="root"
         tabindex="${this.disabled ? -1 : 0}"
         ?data-dragover="${this.#isDragOver}"
+        ?data-disabled="${this.disabled}"
         @dragenter="${this.#handleDragEnter}"
         @dragover="${this.#handleDragOver}"
         @dragleave="${this.#handleDragLeave}"