@deepfuture/dui-components 0.0.1

package/menu/menu-item.js

@@ -0,0 +1,62 @@
+/** Ported from original DUI: deep-future-app/app/client/components/dui/menu */
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { css, html, LitElement } from "lit";
+import { property } from "lit/decorators.js";
+import { base } from "@deepfuture/dui-core/base";
+const hostStyles = css `
+  :host {
+    display: block;
+  }
+
+  :host([disabled]) {
+    pointer-events: none;
+  }
+`;
+const componentStyles = css `
+  .Item {
+    display: flex;
+    align-items: center;
+    gap: var(--space-2);
+    cursor: pointer;
+  }
+`;
+/**
+ * `<dui-menu-item>` — An item within a `dui-menu`.
+ *
+ * @slot default - Item content (text, icons, etc.).
+ */
+export class DuiMenuItem extends LitElement {
+    static { this.tagName = "dui-menu-item"; }
+    static { this.styles = [base, hostStyles, componentStyles]; }
+    #variant_accessor_storage = "default";
+    /** Visual variant. */
+    get variant() { return this.#variant_accessor_storage; }
+    set variant(value) { this.#variant_accessor_storage = value; }
+    #disabled_accessor_storage = false;
+    /** Whether the item is disabled. */
+    get disabled() { return this.#disabled_accessor_storage; }
+    set disabled(value) { this.#disabled_accessor_storage = value; }
+    connectedCallback() {
+        super.connectedCallback();
+        this.setAttribute("role", "menuitem");
+        this.setAttribute("tabindex", "-1");
+    }
+    render() {
+        return html `
+      <div class="Item" part="root" aria-disabled="${this.disabled}">
+        <slot></slot>
+      </div>
+    `;
+    }
+}
+__decorate([
+    property({ type: String, reflect: true })
+], DuiMenuItem.prototype, "variant", null);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], DuiMenuItem.prototype, "disabled", null);

package/menu/menu.d.ts

@@ -0,0 +1,15 @@
+/** Ported from original DUI: deep-future-app/app/client/components/dui/menu */
+import { LitElement, type TemplateResult } from "lit";
+/**
+ * `<dui-menu>` — A popup menu triggered by a slotted element.
+ *
+ * @slot trigger - The element that opens the menu on click.
+ * @slot default - `dui-menu-item` children rendered inside the popup.
+ */
+export declare class DuiMenu extends LitElement {
+    #private;
+    static tagName: "dui-menu";
+    static styles: import("lit").CSSResult[];
+    protected updated(): void;
+    render(): TemplateResult;
+}

package/menu/menu.js

@@ -0,0 +1,228 @@
+/** Ported from original DUI: deep-future-app/app/client/components/dui/menu */
+import { css, html, LitElement } from "lit";
+import { base } from "@deepfuture/dui-core/base";
+import { FloatingPortalController } from "@deepfuture/dui-core/floating-portal-controller";
+import { DuiMenuItem } from "./menu-item.js";
+const hostStyles = css `
+  :host {
+    display: block;
+  }
+`;
+const componentStyles = css `
+  .Trigger {
+    display: contents;
+    cursor: pointer;
+  }
+`;
+/** Styles injected into the portal positioner. */
+const portalPopupStyles = [
+    css `
+    .Popup {
+      background: var(--popover);
+      border: var(--border-width-thin) solid var(--border);
+      border-radius: var(--radius-md);
+      box-shadow: var(--shadow-md);
+      max-height: 240px;
+      overflow-y: auto;
+      overscroll-behavior: contain;
+      opacity: 1;
+      transform: translateY(0);
+      transition-property: opacity, transform;
+      transition-duration: var(--duration-fast);
+      transition-timing-function: var(--ease-out-3);
+      pointer-events: auto;
+    }
+
+    .Popup[data-starting-style],
+    .Popup[data-ending-style] {
+      opacity: 0;
+      transform: translateY(calc(var(--space-1) * -1));
+    }
+
+    .Menu {
+      padding: var(--space-1);
+    }
+  `,
+];
+/**
+ * `<dui-menu>` — A popup menu triggered by a slotted element.
+ *
+ * @slot trigger - The element that opens the menu on click.
+ * @slot default - `dui-menu-item` children rendered inside the popup.
+ */
+export class DuiMenu extends LitElement {
+    static { this.tagName = "dui-menu"; }
+    static { this.styles = [base, hostStyles, componentStyles]; }
+    #highlightedIndex_accessor_storage = -1;
+    get #highlightedIndex() { return this.#highlightedIndex_accessor_storage; }
+    set #highlightedIndex(value) { this.#highlightedIndex_accessor_storage = value; }
+    #getTriggerElement = () => {
+        const slot = this.shadowRoot?.querySelector('slot[name="trigger"]');
+        return slot?.assignedElements()?.[0];
+    };
+    #popup = new FloatingPortalController(this, {
+        getAnchor: () => this.#getTriggerElement() ?? this,
+        matchWidth: false,
+        styles: portalPopupStyles,
+        contentContainer: ".Menu",
+        contentSelector: "dui-menu-item",
+        onOpen: () => {
+            this.#highlightedIndex = -1;
+            this.#getTriggerElement()?.setAttribute("data-open", "");
+        },
+        onClose: () => {
+            this.#highlightedIndex = -1;
+            this.#getTriggerElement()?.removeAttribute("data-open");
+        },
+        renderPopup: (portal) => html `
+      <div
+        class="Popup"
+        ?data-starting-style="${portal.isStarting}"
+        ?data-ending-style="${portal.isEnding}"
+      >
+        <div
+          class="Menu"
+          id="${this.#menuId}"
+          role="menu"
+          @click="${this.#onItemSlotClick}"
+          @mousemove="${this.#onMenuMouseMove}"
+        ></div>
+      </div>
+    `,
+    });
+    #menuId = `menu-${crypto.randomUUID().slice(0, 8)}`;
+    get #items() {
+        const container = this.#popup.renderRoot?.querySelector(".Menu") ?? this;
+        return [...container.querySelectorAll("dui-menu-item")];
+    }
+    updated() {
+        const items = this.#items;
+        for (let i = 0; i < items.length; i++) {
+            if (i === this.#highlightedIndex) {
+                items[i].setAttribute("data-highlighted", "");
+            }
+            else {
+                items[i].removeAttribute("data-highlighted");
+            }
+        }
+    }
+    #togglePopup() {
+        if (this.#popup.isOpen) {
+            this.#popup.close();
+        }
+        else {
+            this.#popup.open();
+        }
+    }
+    #onTriggerClick = (event) => {
+        event.stopPropagation();
+        event.preventDefault();
+        this.#togglePopup();
+    };
+    #onItemSlotClick = (event) => {
+        const item = event
+            .composedPath()
+            .find((el) => el instanceof HTMLElement && el.matches(DuiMenuItem.tagName));
+        if (item && !item.disabled) {
+            this.#popup.close();
+        }
+    };
+    #onKeyDown = (event) => {
+        const items = this.#items;
+        switch (event.key) {
+            case "ArrowDown": {
+                event.preventDefault();
+                if (!this.#popup.isOpen) {
+                    this.#popup.open();
+                }
+                else {
+                    let next = this.#highlightedIndex + 1;
+                    while (next < items.length && items[next]?.disabled)
+                        next++;
+                    if (next < items.length)
+                        this.#highlightedIndex = next;
+                }
+                break;
+            }
+            case "ArrowUp": {
+                event.preventDefault();
+                if (!this.#popup.isOpen) {
+                    this.#popup.open();
+                }
+                else {
+                    let prev = this.#highlightedIndex - 1;
+                    while (prev >= 0 && items[prev]?.disabled)
+                        prev--;
+                    if (prev >= 0)
+                        this.#highlightedIndex = prev;
+                }
+                break;
+            }
+            case "Home":
+                if (this.#popup.isOpen) {
+                    event.preventDefault();
+                    const firstEnabled = items.findIndex((item) => !item.disabled);
+                    if (firstEnabled >= 0)
+                        this.#highlightedIndex = firstEnabled;
+                }
+                break;
+            case "End":
+                if (this.#popup.isOpen) {
+                    event.preventDefault();
+                    for (let i = items.length - 1; i >= 0; i--) {
+                        if (!items[i]?.disabled) {
+                            this.#highlightedIndex = i;
+                            break;
+                        }
+                    }
+                }
+                break;
+            case "Enter":
+            case " ": {
+                if (this.#popup.isOpen && this.#highlightedIndex >= 0) {
+                    event.preventDefault();
+                    const item = items[this.#highlightedIndex];
+                    if (item && !item.disabled) {
+                        item.click();
+                        this.#popup.close();
+                    }
+                }
+                else if (!this.#popup.isOpen) {
+                    event.preventDefault();
+                    this.#popup.open();
+                }
+                break;
+            }
+            case "Escape":
+                if (this.#popup.isOpen) {
+                    event.preventDefault();
+                    this.#popup.close();
+                }
+                break;
+            case "Tab":
+                if (this.#popup.isOpen) {
+                    this.#popup.close();
+                }
+                break;
+        }
+    };
+    #onMenuMouseMove = () => {
+        if (this.#highlightedIndex >= 0) {
+            this.#highlightedIndex = -1;
+        }
+    };
+    render() {
+        return html `
+      <div
+        class="Trigger"
+        aria-haspopup="menu"
+        aria-expanded="${this.#popup.isOpen}"
+        aria-controls="${this.#menuId}"
+        @click="${this.#onTriggerClick}"
+        @keydown="${this.#onKeyDown}"
+      >
+        <slot name="trigger"></slot>
+      </div>
+    `;
+    }
+}

package/menu/register.d.ts

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

package/menu/register.js

@@ -0,0 +1,8 @@
+import { DuiMenu } from "./menu.js";
+import { DuiMenuItem } from "./menu-item.js";
+if (!customElements.get(DuiMenu.tagName)) {
+    customElements.define(DuiMenu.tagName, DuiMenu);
+}
+if (!customElements.get(DuiMenuItem.tagName)) {
+    customElements.define(DuiMenuItem.tagName, DuiMenuItem);
+}

package/menubar/index.d.ts

@@ -0,0 +1,2 @@
+export { DuiMenubar } from "./menubar.js";
+export type { MenubarContext } from "./menubar-context.js";

package/menubar/index.js

@@ -0,0 +1 @@
+export { DuiMenubar } from "./menubar.js";

package/menubar/menubar-context.d.ts

@@ -0,0 +1,9 @@
+export type MenubarContext = {
+    readonly activeMenuId: string | null;
+    readonly openMenu: (id: string) => void;
+    readonly closeAll: () => void;
+    readonly navigateToMenu: (direction: "next" | "prev") => void;
+};
+export declare const menubarContext: {
+    __context__: MenubarContext;
+};

package/menubar/menubar-context.js

@@ -0,0 +1,2 @@
+import { createContext } from "@lit/context";
+export const menubarContext = createContext(Symbol("dui-menubar"));

package/menubar/menubar.d.ts

@@ -0,0 +1,19 @@
+import { LitElement, type TemplateResult } from "lit";
+/**
+ * `<dui-menubar>` — A horizontal bar of menus with coordinated open/close.
+ *
+ * Contains `<dui-menu>` children. When one menu is open, hovering another
+ * menu trigger opens it and closes the previous one.
+ *
+ * @slot - `dui-menu` children.
+ * @csspart root - The menubar container.
+ */
+export declare class DuiMenubar extends LitElement {
+    #private;
+    static tagName: "dui-menubar";
+    static styles: import("lit").CSSResult[];
+    accessor loop: boolean;
+    accessor orientation: "horizontal" | "vertical";
+    willUpdate(): void;
+    render(): TemplateResult;
+}

package/menubar/menubar.js

@@ -0,0 +1,130 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { css, html, LitElement } from "lit";
+import { property } 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;
+    align-items: center;
+  }
+
+  :host([orientation="vertical"]) [part="root"] {
+    flex-direction: column;
+    align-items: stretch;
+  }
+`;
+/**
+ * `<dui-menubar>` — A horizontal bar of menus with coordinated open/close.
+ *
+ * Contains `<dui-menu>` children. When one menu is open, hovering another
+ * menu trigger opens it and closes the previous one.
+ *
+ * @slot - `dui-menu` children.
+ * @csspart root - The menubar container.
+ */
+export class DuiMenubar extends LitElement {
+    static { this.tagName = "dui-menubar"; }
+    static { this.styles = [base, styles]; }
+    #loop_accessor_storage = true;
+    get loop() { return this.#loop_accessor_storage; }
+    set loop(value) { this.#loop_accessor_storage = value; }
+    #orientation_accessor_storage = "horizontal";
+    get orientation() { return this.#orientation_accessor_storage; }
+    set orientation(value) { this.#orientation_accessor_storage = value; }
+    #activeMenuId_accessor_storage = null;
+    get #activeMenuId() { return this.#activeMenuId_accessor_storage; }
+    set #activeMenuId(value) { this.#activeMenuId_accessor_storage = value; }
+    #getMenus() {
+        return [...this.querySelectorAll("dui-menu")];
+    }
+    #openMenu = (id) => {
+        this.#activeMenuId = id;
+    };
+    #closeAll = () => {
+        this.#activeMenuId = null;
+    };
+    #navigateToMenu = (direction) => {
+        const menus = this.#getMenus();
+        if (menus.length === 0)
+            return;
+        const currentIndex = menus.findIndex((m) => m.getAttribute("data-menubar-id") === this.#activeMenuId);
+        let nextIndex;
+        if (direction === "next") {
+            nextIndex = currentIndex + 1;
+            if (nextIndex >= menus.length) {
+                nextIndex = this.loop ? 0 : menus.length - 1;
+            }
+        }
+        else {
+            nextIndex = currentIndex - 1;
+            if (nextIndex < 0) {
+                nextIndex = this.loop ? menus.length - 1 : 0;
+            }
+        }
+        const nextMenu = menus[nextIndex];
+        if (!nextMenu)
+            return;
+        const nextId = nextMenu.getAttribute("data-menubar-id");
+        if (nextId) {
+            this.#activeMenuId = nextId;
+        }
+        // Focus the trigger of the next menu
+        const trigger = nextMenu.querySelector('[slot="trigger"]');
+        trigger?.focus();
+    };
+    #ctx_accessor_storage = this.#buildContext();
+    get #ctx() { return this.#ctx_accessor_storage; }
+    set #ctx(value) { this.#ctx_accessor_storage = value; }
+    #buildContext() {
+        return {
+            activeMenuId: this.#activeMenuId,
+            openMenu: this.#openMenu,
+            closeAll: this.#closeAll,
+            navigateToMenu: this.#navigateToMenu,
+        };
+    }
+    willUpdate() {
+        this.#ctx = this.#buildContext();
+    }
+    #onKeyDown = (e) => {
+        const isHorizontal = this.orientation === "horizontal";
+        const nextKey = isHorizontal ? "ArrowRight" : "ArrowDown";
+        const prevKey = isHorizontal ? "ArrowLeft" : "ArrowUp";
+        if (e.key === nextKey) {
+            e.preventDefault();
+            this.#navigateToMenu("next");
+        }
+        else if (e.key === prevKey) {
+            e.preventDefault();
+            this.#navigateToMenu("prev");
+        }
+    };
+    render() {
+        return html `
+      <div
+        part="root"
+        role="menubar"
+        aria-orientation="${this.orientation}"
+        @keydown="${this.#onKeyDown}"
+      >
+        <slot></slot>
+      </div>
+    `;
+    }
+}
+__decorate([
+    property({ type: Boolean })
+], DuiMenubar.prototype, "loop", null);
+__decorate([
+    property({ reflect: true })
+], DuiMenubar.prototype, "orientation", null);

package/menubar/register.d.ts

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

package/menubar/register.js

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

package/number-field/index.d.ts

@@ -0,0 +1 @@
+export { DuiNumberField, valueChangeEvent } from "./number-field.js";

package/number-field/index.js

@@ -0,0 +1 @@
+export { DuiNumberField, valueChangeEvent } from "./number-field.js";

package/number-field/number-field.d.ts

@@ -0,0 +1,34 @@
+import { LitElement, type TemplateResult } from "lit";
+export declare const valueChangeEvent: (detail: {
+    value: number;
+}) => CustomEvent<{
+    value: number;
+}>;
+/**
+ * `<dui-number-field>` — A numeric input with increment/decrement buttons.
+ *
+ * @csspart root - The outer container.
+ * @csspart input - The text input element.
+ * @csspart decrement - The decrement button.
+ * @csspart increment - The increment button.
+ * @fires value-change - Fired when value changes. Detail: { value: number }
+ */
+export declare class DuiNumberField extends LitElement {
+    #private;
+    static tagName: "dui-number-field";
+    static shadowRootOptions: ShadowRootInit;
+    static styles: import("lit").CSSResult[];
+    accessor value: number | undefined;
+    accessor defaultValue: number | undefined;
+    accessor min: number | undefined;
+    accessor max: number | undefined;
+    accessor step: number;
+    accessor largeStep: number;
+    accessor disabled: boolean;
+    accessor readOnly: boolean;
+    accessor required: boolean;
+    accessor name: string | undefined;
+    connectedCallback(): void;
+    willUpdate(): void;
+    render(): TemplateResult;
+}