@deepfuture/dui-components 0.0.19 → 0.0.21

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/scroll-area/scroll-area.d.ts

@@ -11,7 +11,7 @@ type ScrollAreaOrientation = "vertical" | "horizontal" | "both";
  *
  * @cssprop [--scroll-area-max-height] - Max-height constraint.
  * @cssprop [--scroll-area-thumb-color] - Scrollbar thumb color.
- * @cssprop [--scroll-fade-color] - Fade overlay color.
+ * @cssprop [--scroll-fade-size] - Distance over which the top fade goes from transparent to opaque (default: 1.5rem).
  */
 export declare class DuiScrollArea extends LitElement {
     #private;

package/scroll-area/scroll-area.js

@@ -69,14 +69,9 @@ const styles = css `
     }
   }
 
-  .ScrollFade {
-    position: absolute;
-    top: 0;
-    left: 0;
-    right: 0;
-    height: 0;
-    pointer-events: none;
-    z-index: 1;
+  :host([fade]) .Viewport[data-scrolled] {
+    -webkit-mask-image: linear-gradient(to bottom, transparent, black var(--scroll-fade-size, 1.5rem));
+    mask-image: linear-gradient(to bottom, transparent, black var(--scroll-fade-size, 1.5rem));
   }
 
   .Scrollbar {
@@ -147,7 +142,7 @@ const styles = css `
  *
  * @cssprop [--scroll-area-max-height] - Max-height constraint.
  * @cssprop [--scroll-area-thumb-color] - Scrollbar thumb color.
- * @cssprop [--scroll-fade-color] - Fade overlay color.
+ * @cssprop [--scroll-fade-size] - Distance over which the top fade goes from transparent to opaque (default: 1.5rem).
  */
 let DuiScrollArea = (() => {
     var _a;
@@ -541,13 +536,7 @@ let DuiScrollArea = (() => {
         ?data-has-overflow-y="${this.#hasOverflowY}"
         ?data-scrolling="${this.#scrolling}"
       >
-        ${this.fade
-                ? html `<div
-              class="ScrollFade"
-              ?data-scrolled="${!this.#isAtTop}"
-            ></div>`
-                : nothing}
-        <div class="Viewport" part="viewport" @scroll="${this.#onScroll}">
+        <div class="Viewport" part="viewport" ?data-scrolled="${!this.#isAtTop}" @scroll="${this.#onScroll}">
           <slot></slot>
         </div>
         ${this.#renderVerticalScrollbar()} ${this.#renderHorizontalScrollbar()}

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. */
@@ -31,8 +32,10 @@ export declare class DuiSelect extends LitElement {
     accessor placeholder: string;
     /** Whether the select is disabled. */
     accessor disabled: boolean;
+    /** Position the popup so the selected item overlays the trigger (macOS-style). */
+    accessor alignItemToTrigger: 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 `
@@ -143,12 +141,12 @@ let DuiSelect = (() => {
     let _disabled_decorators;
     let _disabled_initializers = [];
     let _disabled_extraInitializers = [];
+    let _alignItemToTrigger_decorators;
+    let _alignItemToTrigger_initializers = [];
+    let _alignItemToTrigger_extraInitializers = [];
     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 = [];
@@ -160,20 +158,26 @@ let DuiSelect = (() => {
             _value_decorators = [property({ type: String })];
             _placeholder_decorators = [property({ type: String })];
             _disabled_decorators = [property({ type: Boolean, reflect: true })];
+            _alignItemToTrigger_decorators = [property({ type: Boolean, attribute: "align-item-to-trigger", 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, _alignItemToTrigger_decorators, { kind: "accessor", name: "alignItemToTrigger", static: false, private: false, access: { has: obj => "alignItemToTrigger" in obj, get: obj => obj.alignItemToTrigger, set: (obj, value) => { obj.alignItemToTrigger = value; } }, metadata: _metadata }, _alignItemToTrigger_initializers, _alignItemToTrigger_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; }
@@ -190,14 +194,15 @@ let DuiSelect = (() => {
         /** Whether the select is disabled. */
         get disabled() { return this.#disabled_accessor_storage; }
         set disabled(value) { this.#disabled_accessor_storage = value; }
-        #name_accessor_storage = (__runInitializers(this, _disabled_extraInitializers), __runInitializers(this, _name_initializers, ""));
+        #alignItemToTrigger_accessor_storage = (__runInitializers(this, _disabled_extraInitializers), __runInitializers(this, _alignItemToTrigger_initializers, true));
+        /** Position the popup so the selected item overlays the trigger (macOS-style). */
+        get alignItemToTrigger() { return this.#alignItemToTrigger_accessor_storage; }
+        set alignItemToTrigger(value) { this.#alignItemToTrigger_accessor_storage = value; }
+        #name_accessor_storage = (__runInitializers(this, _alignItemToTrigger_extraInitializers), __runInitializers(this, _name_initializers, ""));
         /** 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)}`);
@@ -207,17 +212,29 @@ let DuiSelect = (() => {
             matchWidth: false,
             minMatchWidth: true,
             styles: portalPopupStyles,
+            alignToInner: () => {
+                if (!this.alignItemToTrigger)
+                    return null;
+                const root = this.#popup.renderRoot;
+                const selectedItem = root?.querySelector("[data-selected]");
+                return selectedItem?.querySelector(".ItemText") ?? selectedItem ?? null;
+            },
+            alignToInnerReference: () => {
+                if (!this.alignItemToTrigger)
+                    return null;
+                return this.shadowRoot?.querySelector(".Value") ?? null;
+            },
             onOpen: () => {
                 this.#highlightedIndex = this.#selectedIndex;
             },
             onClose: () => {
                 this.#highlightedIndex = -1;
-                this._fieldCtx?.markTouched();
             },
             renderPopup: (portal) => {
                 return html `
         <div
           class="Popup"
+          ?data-align-inner="${this.alignItemToTrigger && this.value !== ""}"
           ?data-starting-style="${portal.isStarting}"
           ?data-ending-style="${portal.isEnding}"
         >
@@ -225,7 +242,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 +251,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 +267,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 +277,7 @@ let DuiSelect = (() => {
             }
         };
         #onTriggerKeyDown = (event) => {
-            if (this.#isDisabled)
+            if (this.disabled)
                 return;
             switch (event.key) {
                 case "Enter":
@@ -346,8 +360,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 +411,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 +435,6 @@ let DuiSelect = (() => {
         </span>
       </div>
 
-      ${this.name
-                ? html `<input type="hidden" name="${this.name}" .value="${this.value}" />`
-                : nothing}
     `;
         }
     };

package/separator/separator.js

@@ -44,6 +44,7 @@ const styles = css `
   :host([orientation="vertical"]) {
     display: inline-block;
     align-self: stretch;
+    height: 100%;
   }
 
   [part="root"] {

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/split-button/split-button.d.ts

@@ -26,6 +26,8 @@ export declare class DuiSplitButton extends LitElement {
     accessor appearance: string;
     /** Size — mapped to theme styles (e.g. xs, sm, md, lg). */
     accessor size: string;
+    /** Sets `min-width` on the popup panel (e.g. `"200px"`). Defaults to `"var(--space-28)"`. */
+    accessor popupMinWidth: string;
     /** Whether the entire split button is disabled. */
     accessor disabled: boolean;
     protected updated(): void;

package/split-button/split-button.js

@@ -136,6 +136,9 @@ let DuiSplitButton = (() => {
     let _size_decorators;
     let _size_initializers = [];
     let _size_extraInitializers = [];
+    let _popupMinWidth_decorators;
+    let _popupMinWidth_initializers = [];
+    let _popupMinWidth_extraInitializers = [];
     let _disabled_decorators;
     let _disabled_initializers = [];
     let _disabled_extraInitializers = [];
@@ -149,11 +152,13 @@ let DuiSplitButton = (() => {
             _variant_decorators = [property({ reflect: true })];
             _appearance_decorators = [property({ reflect: true })];
             _size_decorators = [property({ reflect: true })];
+            _popupMinWidth_decorators = [property({ attribute: "popup-min-width" })];
             _disabled_decorators = [property({ type: Boolean, reflect: true })];
             _private_highlightedIndex_decorators = [state()];
             __esDecorate(this, null, _variant_decorators, { kind: "accessor", name: "variant", static: false, private: false, access: { has: obj => "variant" in obj, get: obj => obj.variant, set: (obj, value) => { obj.variant = value; } }, metadata: _metadata }, _variant_initializers, _variant_extraInitializers);
             __esDecorate(this, null, _appearance_decorators, { kind: "accessor", name: "appearance", static: false, private: false, access: { has: obj => "appearance" in obj, get: obj => obj.appearance, set: (obj, value) => { obj.appearance = value; } }, metadata: _metadata }, _appearance_initializers, _appearance_extraInitializers);
             __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, 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, 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, _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 });
@@ -172,7 +177,11 @@ let DuiSplitButton = (() => {
         /** Size — mapped to theme styles (e.g. xs, sm, md, lg). */
         get size() { return this.#size_accessor_storage; }
         set size(value) { this.#size_accessor_storage = value; }
-        #disabled_accessor_storage = (__runInitializers(this, _size_extraInitializers), __runInitializers(this, _disabled_initializers, false));
+        #popupMinWidth_accessor_storage = (__runInitializers(this, _size_extraInitializers), __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; }
+        #disabled_accessor_storage = (__runInitializers(this, _popupMinWidth_extraInitializers), __runInitializers(this, _disabled_initializers, false));
         /** Whether the entire split button is disabled. */
         get disabled() { return this.#disabled_accessor_storage; }
         set disabled(value) { this.#disabled_accessor_storage = value; }
@@ -195,6 +204,7 @@ let DuiSplitButton = (() => {
             renderPopup: (portal) => html `
       <div
         class="Popup"
+        style="${this.popupMinWidth ? `min-width:${this.popupMinWidth}` : ""}"
         ?data-starting-style="${portal.isStarting}"
         ?data-ending-style="${portal.isEnding}"
       >

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;