@deepfuture/dui-components 0.0.15 → 0.0.17

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@deepfuture/dui-components",
-  "version": "0.0.15",
+  "version": "0.0.17",
   "description": "DUI unstyled web components — structural CSS only, themed via applyTheme()",
   "type": "module",
   "license": "MIT",
@@ -158,6 +158,10 @@
       "import": "./number-field/index.js",
       "types": "./number-field/index.d.ts"
     },
+    "./stepper": {
+      "import": "./stepper/index.js",
+      "types": "./stepper/index.d.ts"
+    },
     "./menubar": {
       "import": "./menubar/index.js",
       "types": "./menubar/index.d.ts"
@@ -166,6 +170,14 @@
       "import": "./calendar/index.js",
       "types": "./calendar/index.d.ts"
     },
+    "./split-button": {
+      "import": "./split-button/index.js",
+      "types": "./split-button/index.d.ts"
+    },
+    "./card-grid": {
+      "import": "./card-grid/index.js",
+      "types": "./card-grid/index.d.ts"
+    },
     "./all": {
       "import": "./all.js",
       "types": "./all.d.ts"
@@ -178,7 +190,7 @@
     "README.md"
   ],
   "dependencies": {
-    "@deepfuture/dui-core": "0.0.15",
+    "@deepfuture/dui-core": "0.0.17",
     "lit": "^3.3.2",
     "@lit/context": "^1.1.3"
   },

package/popover/popover-popup.js

@@ -46,6 +46,10 @@ import { FloatingPortalController } from "@deepfuture/dui-core/floating-portal-c
 import { renderArrow, } from "@deepfuture/dui-core/floating-popup-utils";
 const hostStyles = css `
   :host {
+    display: contents;
+  }
+
+  .slot-wrapper {
     display: none;
   }
 `;
@@ -198,7 +202,7 @@ let DuiPopoverPopup = (() => {
             this.#portal.offset = this.#ctx.value?.sideOffset ?? 8;
         }
         render() {
-            return html `<slot></slot>`;
+            return html `<div class="slot-wrapper"><slot></slot></div>`;
         }
     };
 })();

package/popover/popover-trigger.d.ts

@@ -9,5 +9,6 @@ export declare class DuiPopoverTrigger extends LitElement {
     #private;
     static tagName: "dui-popover-trigger";
     static styles: import("lit").CSSResult[];
+    protected updated(): void;
     render(): TemplateResult;
 }

package/popover/popover-trigger.js

@@ -35,6 +35,23 @@ export class DuiPopoverTrigger extends LitElement {
         const el = slot?.assignedElements()?.[0] ?? this;
         this.#ctx.value?.setTriggerEl(el);
     }
+    /** Mirror open state onto the slotted element so its theme can style it. */
+    #syncOpenAttr() {
+        const slot = this.shadowRoot?.querySelector("slot");
+        const el = slot?.assignedElements()?.[0];
+        if (!el)
+            return;
+        const isOpen = this.#ctx.value?.open ?? false;
+        if (isOpen) {
+            el.setAttribute("data-open", "");
+        }
+        else {
+            el.removeAttribute("data-open");
+        }
+    }
+    updated() {
+        this.#syncOpenAttr();
+    }
     render() {
         const isOpen = this.#ctx.value?.open ?? false;
         const popupId = this.#ctx.value?.popupId ?? "";

package/preview-card/preview-card-popup.js

@@ -46,6 +46,10 @@ import { FloatingPortalController } from "@deepfuture/dui-core/floating-portal-c
 import { renderArrow, } from "@deepfuture/dui-core/floating-popup-utils";
 const hostStyles = css `
   :host {
+    display: contents;
+  }
+
+  .slot-wrapper {
     display: none;
   }
 `;
@@ -186,7 +190,7 @@ let DuiPreviewCardPopup = (() => {
             this.#portal.offset = this.#ctx.value?.sideOffset ?? 8;
         }
         render() {
-            return html `<slot></slot>`;
+            return html `<div class="slot-wrapper"><slot></slot></div>`;
         }
     };
 })();

package/select/select.js

@@ -115,6 +115,9 @@ const portalPopupStyles = [
 
     .ItemText {
       flex: 1;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
     }
   `,
 ];
@@ -201,6 +204,8 @@ let DuiSelect = (() => {
         #listboxId = `select-listbox-${crypto.randomUUID().slice(0, 8)}`;
         #popup = new FloatingPortalController(this, {
             getAnchor: () => this.shadowRoot?.querySelector(".Trigger"),
+            matchWidth: false,
+            minMatchWidth: true,
             styles: portalPopupStyles,
             onOpen: () => {
                 this.#highlightedIndex = this.#selectedIndex;

package/slider/slider.d.ts

@@ -14,7 +14,8 @@ export declare const valueCommittedEvent: (detail: {
  * A slider for selecting numeric values within a range.
  *
  * Supports pointer drag, keyboard navigation (arrows, Page Up/Down, Home/End),
- * and a hidden native range input for accessibility.
+ * a hidden native range input for accessibility, and an optional click-to-type
+ * value readout (enabled via the `field` variant).
  */
 export declare class DuiSlider extends LitElement {
     #private;
@@ -32,6 +33,12 @@ export declare class DuiSlider extends LitElement {
     accessor disabled: boolean;
     /** Name for form submission. */
     accessor name: string;
+    /** Label text displayed by the slider. */
+    accessor label: string;
+    /** Unit suffix on the value readout (e.g. `m`, `°`, `%`). */
+    accessor unit: string;
+    /** Decimal places for value readout. Auto-inferred from `step` if not set. */
+    accessor precision: number | undefined;
     disconnectedCallback(): void;
     render(): TemplateResult;
 }

package/slider/slider.js

@@ -51,7 +51,7 @@ const styles = css `
   [part="root"] {
     position: relative;
     display: flex;
-    align-items: center;
+    flex-direction: column;
     width: 100%;
     touch-action: none;
     user-select: none;
@@ -61,6 +61,19 @@ const styles = css `
     pointer-events: none;
   }
 
+  [part="label"] {
+    display: flex;
+    align-items: center;
+    flex-shrink: 0;
+  }
+
+  .slider-row {
+    position: relative;
+    display: flex;
+    align-items: center;
+    width: 100%;
+  }
+
   [part="track"] {
     position: relative;
     flex-grow: 1;
@@ -75,6 +88,28 @@ const styles = css `
     width: var(--slider-progress, 0%);
   }
 
+  [part="readout"] {
+    position: absolute;
+    inset: 0;
+    box-sizing: border-box;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font: inherit;
+    color: inherit;
+    pointer-events: none;
+    z-index: 2;
+  }
+
+  [part="unit"] {
+    position: absolute;
+    right: 0;
+    top: 50%;
+    transform: translateY(-50%);
+    pointer-events: none;
+    z-index: 2;
+  }
+
   [part="thumb"] {
     position: absolute;
     left: var(--slider-progress, 0%);
@@ -104,7 +139,8 @@ const styles = css `
  * A slider for selecting numeric values within a range.
  *
  * Supports pointer drag, keyboard navigation (arrows, Page Up/Down, Home/End),
- * and a hidden native range input for accessibility.
+ * a hidden native range input for accessibility, and an optional click-to-type
+ * value readout (enabled via the `field` variant).
  */
 let DuiSlider = (() => {
     let _classSuper = LitElement;
@@ -126,6 +162,15 @@ let DuiSlider = (() => {
     let _name_decorators;
     let _name_initializers = [];
     let _name_extraInitializers = [];
+    let _label_decorators;
+    let _label_initializers = [];
+    let _label_extraInitializers = [];
+    let _unit_decorators;
+    let _unit_initializers = [];
+    let _unit_extraInitializers = [];
+    let _precision_decorators;
+    let _precision_initializers = [];
+    let _precision_extraInitializers = [];
     let _private_dragging_decorators;
     let _private_dragging_initializers = [];
     let _private_dragging_extraInitializers = [];
@@ -139,6 +184,9 @@ let DuiSlider = (() => {
             _step_decorators = [property({ type: Number })];
             _disabled_decorators = [property({ type: Boolean, reflect: true })];
             _name_decorators = [property()];
+            _label_decorators = [property({ reflect: true })];
+            _unit_decorators = [property({ reflect: true })];
+            _precision_decorators = [property({ type: Number })];
             _private_dragging_decorators = [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, _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);
@@ -146,6 +194,9 @@ let DuiSlider = (() => {
             __esDecorate(this, null, _step_decorators, { kind: "accessor", name: "step", static: false, private: false, access: { has: obj => "step" in obj, get: obj => obj.step, set: (obj, value) => { obj.step = value; } }, metadata: _metadata }, _step_initializers, _step_extraInitializers);
             __esDecorate(this, null, _disabled_decorators, { kind: "accessor", name: "disabled", static: false, private: false, access: { has: obj => "disabled" in obj, get: obj => obj.disabled, set: (obj, value) => { obj.disabled = value; } }, metadata: _metadata }, _disabled_initializers, _disabled_extraInitializers);
             __esDecorate(this, null, _name_decorators, { kind: "accessor", name: "name", static: false, private: false, access: { has: obj => "name" in obj, get: obj => obj.name, set: (obj, value) => { obj.name = value; } }, metadata: _metadata }, _name_initializers, _name_extraInitializers);
+            __esDecorate(this, null, _label_decorators, { kind: "accessor", name: "label", static: false, private: false, access: { has: obj => "label" in obj, get: obj => obj.label, set: (obj, value) => { obj.label = value; } }, metadata: _metadata }, _label_initializers, _label_extraInitializers);
+            __esDecorate(this, null, _unit_decorators, { kind: "accessor", name: "unit", static: false, private: false, access: { has: obj => "unit" in obj, get: obj => obj.unit, set: (obj, value) => { obj.unit = value; } }, metadata: _metadata }, _unit_initializers, _unit_extraInitializers);
+            __esDecorate(this, null, _precision_decorators, { kind: "accessor", name: "precision", static: false, private: false, access: { has: obj => "precision" in obj, get: obj => obj.precision, set: (obj, value) => { obj.precision = value; } }, metadata: _metadata }, _precision_initializers, _precision_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);
             if (_metadata) Object.defineProperty(this, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
         }
@@ -175,7 +226,19 @@ let DuiSlider = (() => {
         /** Name for form submission. */
         get name() { return this.#name_accessor_storage; }
         set name(value) { this.#name_accessor_storage = value; }
-        #dragging_accessor_storage = (__runInitializers(this, _name_extraInitializers), __runInitializers(this, _private_dragging_initializers, false));
+        #label_accessor_storage = (__runInitializers(this, _name_extraInitializers), __runInitializers(this, _label_initializers, ""));
+        /** Label text displayed by the slider. */
+        get label() { return this.#label_accessor_storage; }
+        set label(value) { this.#label_accessor_storage = value; }
+        #unit_accessor_storage = (__runInitializers(this, _label_extraInitializers), __runInitializers(this, _unit_initializers, ""));
+        /** Unit suffix on the value readout (e.g. `m`, `°`, `%`). */
+        get unit() { return this.#unit_accessor_storage; }
+        set unit(value) { this.#unit_accessor_storage = value; }
+        #precision_accessor_storage = (__runInitializers(this, _unit_extraInitializers), __runInitializers(this, _precision_initializers, undefined));
+        /** 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; }
+        #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); }
         get #progress() {
@@ -184,6 +247,17 @@ let DuiSlider = (() => {
                 return 0;
             return ((this.value - this.min) / range) * 100;
         }
+        get #inferredPrecision() {
+            const stepStr = String(this.step);
+            const dotIndex = stepStr.indexOf(".");
+            if (dotIndex === -1)
+                return 0;
+            return stepStr.length - dotIndex - 1;
+        }
+        get #displayValue() {
+            const p = this.precision ?? this.#inferredPrecision;
+            return this.value.toFixed(p);
+        }
         #clampValue(value) {
             const stepped = Math.round(value / this.step) * this.step;
             return Math.max(this.min, Math.min(this.max, stepped));
@@ -294,14 +368,21 @@ let DuiSlider = (() => {
         style="--slider-progress: ${this.#progress}%"
         @pointerdown=${this.#onPointerDown}
       >
-        <div part="track">
-          <div part="indicator"></div>
+        <span part="label">${this.label}</span>
+
+        <div class="slider-row">
+          <div part="track">
+            <div part="indicator"></div>
+            <span part="readout">${this.#displayValue}</span>
+            <span part="unit">${this.unit}</span>
+          </div>
+          <div
+            part="thumb"
+            tabindex=${this.disabled ? -1 : 0}
+            @keydown=${this.#onKeyDown}
+          ></div>
         </div>
-        <div
-          part="thumb"
-          tabindex=${this.disabled ? -1 : 0}
-          @keydown=${this.#onKeyDown}
-        ></div>
+
         <input
           class="native-input"
           type="range"
@@ -314,6 +395,7 @@ let DuiSlider = (() => {
           aria-valuenow=${this.value}
           aria-valuemin=${this.min}
           aria-valuemax=${this.max}
+          aria-label=${this.label || "Slider"}
           @input=${this.#onNativeInput}
           @change=${this.#onNativeChange}
         />

package/split-button/index.d.ts

@@ -0,0 +1 @@
+export { DuiSplitButton, actionEvent } from "./split-button.js";

package/split-button/index.js

@@ -0,0 +1 @@
+export { DuiSplitButton, actionEvent } from "./split-button.js";

package/split-button/register.d.ts

@@ -0,0 +1 @@
+export {};

package/split-button/register.js

@@ -0,0 +1,4 @@
+import { DuiSplitButton } from "./index.js";
+if (!customElements.get(DuiSplitButton.tagName)) {
+    customElements.define(DuiSplitButton.tagName, DuiSplitButton);
+}

package/split-button/split-button.d.ts

@@ -0,0 +1,33 @@
+import { LitElement, type TemplateResult } from "lit";
+/** Fired when the action (left) button is clicked. */
+export declare const actionEvent: (detail: {}) => CustomEvent<{}>;
+/**
+ * `<dui-split-button>` — A button with an attached dropdown menu trigger.
+ *
+ * The action zone (left) performs a primary action. The menu trigger (right)
+ * opens a dropdown of `dui-menu-item` children for secondary actions.
+ *
+ * @slot - Action button label / content.
+ * @slot icon - Custom icon for the dropdown trigger (defaults to chevron-down).
+ * @slot menu - `dui-menu-item` elements rendered inside the dropdown popup.
+ * @csspart root - The outer container wrapping both zones.
+ * @csspart action - The left action button element.
+ * @csspart divider - The vertical separator between action and trigger.
+ * @csspart trigger - The right dropdown trigger button element.
+ * @fires dui-action - Fired when the action button is clicked. Detail: {}
+ */
+export declare class DuiSplitButton extends LitElement {
+    #private;
+    static tagName: "dui-split-button";
+    static styles: import("lit").CSSResult[];
+    /** Visual variant — mapped to theme styles (e.g. neutral, primary, danger). */
+    accessor variant: string;
+    /** Visual appearance — mapped to theme styles (e.g. filled, outline, ghost). */
+    accessor appearance: string;
+    /** Size — mapped to theme styles (e.g. xs, sm, md, lg). */
+    accessor size: string;
+    /** Whether the entire split button is disabled. */
+    accessor disabled: boolean;
+    protected updated(): void;
+    render(): TemplateResult;
+}