@deepfuture/dui-components 0.0.20 → 1.0.0

package/combobox/index.d.ts

@@ -1,4 +1,4 @@
-import { DuiCombobox, valueChangeEvent, valuesChangeEvent } from "./combobox.js";
-export { DuiCombobox, valueChangeEvent, valuesChangeEvent, };
-export declare const comboboxFamily: (typeof DuiCombobox)[];
-export type { SelectOption, ComboboxValueChangeDetail, ComboboxValuesChangeDetail, } from "./combobox.js";
+import "./combobox.js";
+export { DuiCombobox } from "./combobox.js";
+export type { SelectOption, ComboboxValueChangeDetail, ComboboxValuesChangeDetail, } from "@deepfuture/dui-primitives/combobox";
+export { valueChangeEvent, valuesChangeEvent } from "@deepfuture/dui-primitives/combobox";

package/combobox/index.js

@@ -1,3 +1,3 @@
-import { DuiCombobox, valueChangeEvent, valuesChangeEvent, } from "./combobox.js";
-export { DuiCombobox, valueChangeEvent, valuesChangeEvent, };
-export const comboboxFamily = [DuiCombobox];
+import "./combobox.js";
+export { DuiCombobox } from "./combobox.js";
+export { valueChangeEvent, valuesChangeEvent } from "@deepfuture/dui-primitives/combobox";

package/command/command-empty.d.ts

@@ -1,10 +1,5 @@
-/** Ported from original DUI: deep-future-app/app/client/components/dui/command */
-import { LitElement, type TemplateResult } from "lit";
-import { type CommandContext } from "./command-context.js";
-export declare class DuiCommandEmpty extends LitElement {
-    static tagName: "dui-command-empty";
+import { DuiCommandEmptyPrimitive } from "@deepfuture/dui-primitives/command";
+import "../_install.js";
+export declare class DuiCommandEmpty extends DuiCommandEmptyPrimitive {
     static styles: import("lit").CSSResult[];
-    accessor _ctx: CommandContext;
-    willUpdate(): void;
-    render(): TemplateResult;
 }

package/command/command-empty.js

@@ -1,92 +1,14 @@
-/** Ported from original DUI: deep-future-app/app/client/components/dui/command */
-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;
-};
-import { css, html, LitElement } from "lit";
-import { consume } from "@lit/context";
-import { base } from "@deepfuture/dui-core/base";
-import { commandContext } from "./command-context.js";
+import { css } from "lit";
+import { DuiCommandEmptyPrimitive } from "@deepfuture/dui-primitives/command";
+import "../_install.js";
 const styles = css `
-  :host {
-    display: block;
-  }
-
-  :host([data-hidden]) .Empty {
-    display: none;
-  }
-
   .Empty {
-    text-align: center;
+    padding: var(--space-6);
+    font-size: var(--text-sm); line-height: var(--text-sm--line-height);
+    color: var(--text-2);
   }
 `;
-let DuiCommandEmpty = (() => {
-    let _classSuper = LitElement;
-    let __ctx_decorators;
-    let __ctx_initializers = [];
-    let __ctx_extraInitializers = [];
-    return class DuiCommandEmpty extends _classSuper {
-        static {
-            const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
-            __ctx_decorators = [consume({ context: commandContext, subscribe: true })];
-            __esDecorate(this, null, __ctx_decorators, { kind: "accessor", name: "_ctx", static: false, private: false, access: { has: obj => "_ctx" in obj, get: obj => obj._ctx, set: (obj, value) => { obj._ctx = value; } }, metadata: _metadata }, __ctx_initializers, __ctx_extraInitializers);
-            if (_metadata) Object.defineProperty(this, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
-        }
-        static tagName = "dui-command-empty";
-        static styles = [base, styles];
-        #_ctx_accessor_storage = __runInitializers(this, __ctx_initializers, void 0);
-        get _ctx() { return this.#_ctx_accessor_storage; }
-        set _ctx(value) { this.#_ctx_accessor_storage = value; }
-        willUpdate() {
-            const shouldShow = this._ctx?.search !== "" && this._ctx?.getVisibleCount() === 0;
-            if (shouldShow) {
-                this.removeAttribute("data-hidden");
-            }
-            else {
-                this.setAttribute("data-hidden", "");
-            }
-        }
-        render() {
-            return html `
-      <div class="Empty" role="status">
-        <slot></slot>
-      </div>
-    `;
-        }
-        constructor() {
-            super(...arguments);
-            __runInitializers(this, __ctx_extraInitializers);
-        }
-    };
-})();
-export { DuiCommandEmpty };
+export class DuiCommandEmpty extends DuiCommandEmptyPrimitive {
+    static styles = [...DuiCommandEmptyPrimitive.styles, styles];
+}
+customElements.define(DuiCommandEmpty.tagName, DuiCommandEmpty);

package/command/command-group.d.ts

@@ -1,15 +1,5 @@
-/** Ported from original DUI: deep-future-app/app/client/components/dui/command */
-import { LitElement, type TemplateResult } from "lit";
-import { type CommandContext } from "./command-context.js";
-export declare class DuiCommandGroup extends LitElement {
-    #private;
-    static tagName: "dui-command-group";
+import { DuiCommandGroupPrimitive } from "@deepfuture/dui-primitives/command";
+import "../_install.js";
+export declare class DuiCommandGroup extends DuiCommandGroupPrimitive {
     static styles: import("lit").CSSResult[];
-    /** Heading text for this group. */
-    accessor heading: string;
-    accessor _ctx: CommandContext;
-    connectedCallback(): void;
-    disconnectedCallback(): void;
-    willUpdate(): void;
-    render(): TemplateResult;
 }

package/command/command-group.js

@@ -1,119 +1,20 @@
-/** Ported from original DUI: deep-future-app/app/client/components/dui/command */
-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;
-};
-import { css, html, LitElement, nothing } from "lit";
-import { property } from "lit/decorators.js";
-import { consume } from "@lit/context";
-import { base } from "@deepfuture/dui-core/base";
-import { commandContext } from "./command-context.js";
-let groupIdCounter = 0;
-const nextGroupId = () => `dui-command-group-${++groupIdCounter}`;
+import { css } from "lit";
+import { DuiCommandGroupPrimitive } from "@deepfuture/dui-primitives/command";
+import "../_install.js";
 const styles = css `
-  :host {
-    display: block;
-  }
-
-  :host([data-hidden]) .Group {
-    display: none;
+  .Group {
+    padding: var(--space-1_5);
   }
 
-  .Group {
-    overflow: hidden;
+  .Heading {
+    padding: var(--space-1_5) var(--space-2);
+    font-size: var(--text-xs); line-height: var(--text-xs--line-height);
+    text-box: trim-both cap alphabetic;
+    font-weight: var(--font-weight-medium);
+    color: var(--text-2);
   }
 `;
-let DuiCommandGroup = (() => {
-    let _classSuper = LitElement;
-    let _heading_decorators;
-    let _heading_initializers = [];
-    let _heading_extraInitializers = [];
-    let __ctx_decorators;
-    let __ctx_initializers = [];
-    let __ctx_extraInitializers = [];
-    return class DuiCommandGroup extends _classSuper {
-        static {
-            const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
-            _heading_decorators = [property({ type: String })];
-            __ctx_decorators = [consume({ context: commandContext, subscribe: true })];
-            __esDecorate(this, null, _heading_decorators, { kind: "accessor", name: "heading", static: false, private: false, access: { has: obj => "heading" in obj, get: obj => obj.heading, set: (obj, value) => { obj.heading = value; } }, metadata: _metadata }, _heading_initializers, _heading_extraInitializers);
-            __esDecorate(this, null, __ctx_decorators, { kind: "accessor", name: "_ctx", static: false, private: false, access: { has: obj => "_ctx" in obj, get: obj => obj._ctx, set: (obj, value) => { obj._ctx = value; } }, metadata: _metadata }, __ctx_initializers, __ctx_extraInitializers);
-            if (_metadata) Object.defineProperty(this, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
-        }
-        static tagName = "dui-command-group";
-        static styles = [base, styles];
-        #heading_accessor_storage = __runInitializers(this, _heading_initializers, "");
-        /** Heading text for this group. */
-        get heading() { return this.#heading_accessor_storage; }
-        set heading(value) { this.#heading_accessor_storage = value; }
-        #_ctx_accessor_storage = (__runInitializers(this, _heading_extraInitializers), __runInitializers(this, __ctx_initializers, void 0));
-        get _ctx() { return this.#_ctx_accessor_storage; }
-        set _ctx(value) { this.#_ctx_accessor_storage = value; }
-        #groupId = (__runInitializers(this, __ctx_extraInitializers), nextGroupId());
-        connectedCallback() {
-            super.connectedCallback();
-            this.setAttribute("data-group-id", this.#groupId);
-            this._ctx?.registerGroup(this.#groupId);
-        }
-        disconnectedCallback() {
-            super.disconnectedCallback();
-            this._ctx?.unregisterGroup(this.#groupId);
-        }
-        willUpdate() {
-            // Hide group when no visible items
-            if (this._ctx?.shouldFilter) {
-                const visibleCount = this._ctx.getGroupVisibleCount(this.#groupId);
-                if (visibleCount === 0 && this._ctx.search !== "") {
-                    this.setAttribute("data-hidden", "");
-                }
-                else {
-                    this.removeAttribute("data-hidden");
-                }
-            }
-            else {
-                this.removeAttribute("data-hidden");
-            }
-        }
-        render() {
-            return html `
-      <div class="Group" role="group" aria-label="${this.heading || nothing}">
-        ${this.heading
-                ? html `<div class="Heading" aria-hidden="true">${this.heading}</div>`
-                : nothing}
-        <slot></slot>
-      </div>
-    `;
-        }
-    };
-})();
-export { DuiCommandGroup };
+export class DuiCommandGroup extends DuiCommandGroupPrimitive {
+    static styles = [...DuiCommandGroupPrimitive.styles, styles];
+}
+customElements.define(DuiCommandGroup.tagName, DuiCommandGroup);

package/command/command-input.d.ts

@@ -1,13 +1,5 @@
-/** Ported from original DUI: deep-future-app/app/client/components/dui/command */
-import { LitElement, type TemplateResult } from "lit";
-import { type CommandContext } from "./command-context.js";
-export declare class DuiCommandInput extends LitElement {
-    #private;
-    static tagName: "dui-command-input";
+import { DuiCommandInputPrimitive } from "@deepfuture/dui-primitives/command";
+import "../_install.js";
+export declare class DuiCommandInput extends DuiCommandInputPrimitive {
     static styles: import("lit").CSSResult[];
-    /** Placeholder text for the search input. */
-    accessor placeholder: string;
-    accessor _ctx: CommandContext;
-    willUpdate(): void;
-    render(): TemplateResult;
 }

package/command/command-input.js

@@ -1,146 +1,30 @@
-/** Ported from original DUI: deep-future-app/app/client/components/dui/command */
-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;
-};
-import { css, html, LitElement, nothing } from "lit";
-import { property } from "lit/decorators.js";
-import { consume } from "@lit/context";
-import { base } from "@deepfuture/dui-core/base";
-import { commandContext } from "./command-context.js";
+import { css } from "lit";
+import { DuiCommandInputPrimitive } from "@deepfuture/dui-primitives/command";
+import "../_install.js";
 const styles = css `
-  :host {
-    display: block;
-  }
-
   .InputWrapper {
-    display: flex;
-    align-items: center;
-    width: 100%;
+    gap: var(--space-2);
+    border-bottom: var(--border-width-thin) solid var(--border);
+    padding-inline: var(--space-3);
   }
 
   .SearchIcon {
-    flex-shrink: 0;
+    color: var(--text-2);
+    width: var(--space-4);
+    height: var(--space-4);
   }
 
   .Input {
-    display: flex;
-    width: 100%;
-    border: none;
-    outline: none;
-    background: transparent;
-    padding: 0;
+    height: var(--component-height-md);
+    border-radius: var(--radius-md);
+    font-size: var(--text-sm); line-height: var(--text-sm--line-height);
+  }
+
+  .Input::placeholder {
+    color: var(--text-3);
   }
 `;
-let DuiCommandInput = (() => {
-    let _classSuper = LitElement;
-    let _placeholder_decorators;
-    let _placeholder_initializers = [];
-    let _placeholder_extraInitializers = [];
-    let __ctx_decorators;
-    let __ctx_initializers = [];
-    let __ctx_extraInitializers = [];
-    return class DuiCommandInput extends _classSuper {
-        static {
-            const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
-            _placeholder_decorators = [property({ type: String })];
-            __ctx_decorators = [consume({ context: commandContext, subscribe: true })];
-            __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, __ctx_decorators, { kind: "accessor", name: "_ctx", static: false, private: false, access: { has: obj => "_ctx" in obj, get: obj => obj._ctx, set: (obj, value) => { obj._ctx = value; } }, metadata: _metadata }, __ctx_initializers, __ctx_extraInitializers);
-            if (_metadata) Object.defineProperty(this, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
-        }
-        static tagName = "dui-command-input";
-        static styles = [base, styles];
-        #placeholder_accessor_storage = __runInitializers(this, _placeholder_initializers, "Search...");
-        /** Placeholder text for the search input. */
-        get placeholder() { return this.#placeholder_accessor_storage; }
-        set placeholder(value) { this.#placeholder_accessor_storage = value; }
-        #_ctx_accessor_storage = (__runInitializers(this, _placeholder_extraInitializers), __runInitializers(this, __ctx_initializers, void 0));
-        get _ctx() { return this.#_ctx_accessor_storage; }
-        set _ctx(value) { this.#_ctx_accessor_storage = value; }
-        #prevSearch = (__runInitializers(this, __ctx_extraInitializers), undefined);
-        #handleInput = (event) => {
-            const input = event.target;
-            this._ctx?.setSearch(input.value);
-        };
-        #handleKeyDown = (event) => {
-            if (event.key === "ArrowUp" || event.key === "ArrowDown") {
-                event.preventDefault();
-            }
-        };
-        willUpdate() {
-            // Sync input value when search is cleared externally
-            if (this.#prevSearch !== undefined &&
-                this._ctx?.search === "" &&
-                this.#prevSearch !== "") {
-                const input = this.shadowRoot?.querySelector(".Input");
-                if (input)
-                    input.value = "";
-            }
-            this.#prevSearch = this._ctx?.search;
-        }
-        render() {
-            return html `
-      <div class="InputWrapper">
-        <svg
-          class="SearchIcon"
-          width="16"
-          height="16"
-          viewBox="0 0 24 24"
-          fill="none"
-          stroke="currentColor"
-          stroke-width="2"
-          stroke-linecap="round"
-          stroke-linejoin="round"
-        >
-          <circle cx="11" cy="11" r="8" />
-          <line x1="21" y1="21" x2="16.65" y2="16.65" />
-        </svg>
-        <input
-          class="Input"
-          type="text"
-          role="combobox"
-          autocomplete="off"
-          aria-expanded="true"
-          aria-controls="${this._ctx?.listId ?? nothing}"
-          aria-activedescendant="${this._ctx?.selectedItemId ?? nothing}"
-          .placeholder="${this.placeholder}"
-          @input="${this.#handleInput}"
-          @keydown="${this.#handleKeyDown}"
-        />
-      </div>
-    `;
-        }
-    };
-})();
-export { DuiCommandInput };
+export class DuiCommandInput extends DuiCommandInputPrimitive {
+    static styles = [...DuiCommandInputPrimitive.styles, styles];
+}
+customElements.define(DuiCommandInput.tagName, DuiCommandInput);

package/command/command-item.d.ts

@@ -1,20 +1,5 @@
-/** Ported from original DUI: deep-future-app/app/client/components/dui/command */
-import { LitElement, type TemplateResult } from "lit";
-import { type CommandContext } from "./command-context.js";
-export declare class DuiCommandItem extends LitElement {
-    #private;
-    static tagName: "dui-command-item";
+import { DuiCommandItemPrimitive } from "@deepfuture/dui-primitives/command";
+import "../_install.js";
+export declare class DuiCommandItem extends DuiCommandItemPrimitive {
     static styles: import("lit").CSSResult[];
-    /** The value this item represents. */
-    accessor value: string;
-    /** Additional search keywords. */
-    accessor keywords: string[];
-    /** Whether this item is disabled. */
-    accessor disabled: boolean;
-    accessor _ctx: CommandContext;
-    connectedCallback(): void;
-    disconnectedCallback(): void;
-    willUpdate(): void;
-    updated(): void;
-    render(): TemplateResult;
 }