@deepfuture/dui-components 0.0.1

package/accordion/accordion-context.d.ts

@@ -0,0 +1,15 @@
+/** Ported from original DUI: deep-future-app/app/client/components/dui/accordion */
+export type AccordionContext = {
+    readonly openValues: readonly string[];
+    readonly disabled: boolean;
+    readonly orientation: "vertical" | "horizontal";
+    readonly loopFocus: boolean;
+    readonly keepMounted: boolean;
+    readonly toggle: (value: string) => void;
+    readonly registerItem: (value: string, el: HTMLElement) => void;
+    readonly unregisterItem: (value: string) => void;
+    readonly focusItem: (value: string, direction: "next" | "prev" | "first" | "last") => void;
+};
+export declare const accordionContext: {
+    __context__: AccordionContext;
+};

package/accordion/accordion-context.js

@@ -0,0 +1,3 @@
+/** Ported from original DUI: deep-future-app/app/client/components/dui/accordion */
+import { createContext } from "@lit/context";
+export const accordionContext = createContext(Symbol("dui-accordion"));

package/accordion/accordion-item.d.ts

@@ -0,0 +1,22 @@
+/** Ported from original DUI: deep-future-app/app/client/components/dui/accordion */
+import { LitElement, type TemplateResult } from "lit";
+import { type AccordionContext } from "./accordion-context.js";
+export declare const openChangeEvent: (detail: {
+    value: string;
+    open: boolean;
+}) => CustomEvent<{
+    value: string;
+    open: boolean;
+}>;
+export declare class DuiAccordionItem extends LitElement {
+    #private;
+    static tagName: "dui-accordion-item";
+    static styles: import("lit").CSSResult[];
+    accessor value: string;
+    accessor disabled: boolean;
+    accessor _ctx: AccordionContext;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    willUpdate(): void;
+    render(): TemplateResult;
+}

package/accordion/accordion-item.js

@@ -0,0 +1,254 @@
+/** Ported from original DUI: deep-future-app/app/client/components/dui/accordion */
+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, nothing } from "lit";
+import { property } from "lit/decorators.js";
+import { consume } from "@lit/context";
+import { base } from "@deepfuture/dui-core/base";
+import { customEvent } from "@deepfuture/dui-core/event";
+import { accordionContext, } from "./accordion-context.js";
+export const openChangeEvent = customEvent("open-change", { bubbles: true, composed: true });
+const styles = css `
+  :host {
+    display: block;
+  }
+
+  [part="trigger"] {
+    display: flex;
+    width: 100%;
+    align-items: center;
+    justify-content: space-between;
+    cursor: pointer;
+    user-select: none;
+    border: none;
+    background: none;
+    text-align: left;
+    outline: none;
+    box-sizing: border-box;
+    transition-property: background, box-shadow, filter, transform;
+  }
+
+  [part="trigger"][data-disabled] {
+    cursor: default;
+  }
+
+  [part="indicator"] {
+    flex-shrink: 0;
+    transition-property: transform;
+  }
+
+  [part="panel"] {
+    overflow: hidden;
+    transition-property: height;
+  }
+`;
+// Inline chevron-down SVG to avoid icon component dependency
+const chevronSvg = html `<svg
+  part="indicator"
+  width="16"
+  height="16"
+  viewBox="0 0 24 24"
+  fill="none"
+  stroke="currentColor"
+  stroke-width="2"
+  stroke-linecap="round"
+  stroke-linejoin="round"
+>
+  <path d="m6 9 6 6 6-6" />
+</svg>`;
+export class DuiAccordionItem extends LitElement {
+    static { this.tagName = "dui-accordion-item"; }
+    static { this.styles = [base, styles]; }
+    #value_accessor_storage = "";
+    get value() { return this.#value_accessor_storage; }
+    set value(value) { this.#value_accessor_storage = value; }
+    #disabled_accessor_storage = false;
+    get disabled() { return this.#disabled_accessor_storage; }
+    set disabled(value) { this.#disabled_accessor_storage = value; }
+    #_ctx_accessor_storage;
+    get _ctx() { return this.#_ctx_accessor_storage; }
+    set _ctx(value) { this.#_ctx_accessor_storage = value; }
+    #starting_accessor_storage = false;
+    get #starting() { return this.#starting_accessor_storage; }
+    set #starting(value) { this.#starting_accessor_storage = value; }
+    #ending_accessor_storage = false;
+    get #ending() { return this.#ending_accessor_storage; }
+    set #ending(value) { this.#ending_accessor_storage = value; }
+    #panelHeight_accessor_storage = "0";
+    get #panelHeight() { return this.#panelHeight_accessor_storage; }
+    set #panelHeight(value) { this.#panelHeight_accessor_storage = value; }
+    #visible_accessor_storage = false;
+    get #visible() { return this.#visible_accessor_storage; }
+    set #visible(value) { this.#visible_accessor_storage = value; }
+    #prevOpen = undefined;
+    #animGen = 0;
+    get #open() {
+        return this._ctx?.openValues.includes(this.value) ?? false;
+    }
+    get #isDisabled() {
+        return this.disabled || this._ctx?.disabled;
+    }
+    get #triggerId() {
+        return `dui-trigger-${this.value}`;
+    }
+    get #panelId() {
+        return `dui-panel-${this.value}`;
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this._ctx?.registerItem(this.value, this);
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        this._ctx?.unregisterItem(this.value);
+    }
+    willUpdate() {
+        const isOpen = this.#open;
+        if (this.#prevOpen === undefined) {
+            this.#visible = isOpen;
+            this.#panelHeight = isOpen ? "auto" : "0";
+        }
+        else if (this.#prevOpen !== isOpen) {
+            if (isOpen) {
+                this.#startOpenAnimation();
+            }
+            else {
+                this.#startCloseAnimation();
+            }
+            this.dispatchEvent(openChangeEvent({ value: this.value, open: isOpen }));
+        }
+        this.#prevOpen = isOpen;
+    }
+    #startOpenAnimation() {
+        const gen = ++this.#animGen;
+        this.#ending = false;
+        this.#visible = true;
+        this.#starting = true;
+        this.#panelHeight = "0";
+        requestAnimationFrame(() => {
+            if (this.#animGen !== gen)
+                return;
+            const panel = this.shadowRoot?.querySelector("[part='panel']");
+            if (panel) {
+                this.#panelHeight = `${panel.scrollHeight}px`;
+            }
+            this.#starting = false;
+        });
+    }
+    #startCloseAnimation() {
+        const gen = ++this.#animGen;
+        this.#starting = false;
+        const panel = this.shadowRoot?.querySelector("[part='panel']");
+        if (panel) {
+            this.#panelHeight = `${panel.scrollHeight}px`;
+        }
+        requestAnimationFrame(() => {
+            if (this.#animGen !== gen)
+                return;
+            this.#ending = true;
+            this.#panelHeight = "0";
+        });
+    }
+    #onTransitionEnd = (event) => {
+        if (event.propertyName !== "height")
+            return;
+        if (this.#ending) {
+            this.#ending = false;
+            if (!this._ctx?.keepMounted) {
+                this.#visible = false;
+            }
+        }
+        else if (this.#open) {
+            this.#panelHeight = "auto";
+        }
+    };
+    #onClick = () => {
+        if (this.#isDisabled)
+            return;
+        this._ctx.toggle(this.value);
+    };
+    #onKeyDown = (event) => {
+        if (this.#isDisabled)
+            return;
+        const isVertical = this._ctx.orientation === "vertical";
+        const nextKey = isVertical ? "ArrowDown" : "ArrowRight";
+        const prevKey = isVertical ? "ArrowUp" : "ArrowLeft";
+        switch (event.key) {
+            case nextKey:
+                event.preventDefault();
+                this._ctx.focusItem(this.value, "next");
+                break;
+            case prevKey:
+                event.preventDefault();
+                this._ctx.focusItem(this.value, "prev");
+                break;
+            case "Home":
+                event.preventDefault();
+                this._ctx.focusItem(this.value, "first");
+                break;
+            case "End":
+                event.preventDefault();
+                this._ctx.focusItem(this.value, "last");
+                break;
+        }
+    };
+    render() {
+        const shouldRender = this.#visible || this._ctx?.keepMounted;
+        return html `
+      <div
+        part="item"
+        ?data-open=${this.#open}
+        ?data-disabled=${this.#isDisabled}
+      >
+        <h3 part="header">
+          <button
+            part="trigger"
+            id=${this.#triggerId}
+            aria-expanded=${this.#open}
+            aria-controls=${this.#panelId}
+            ?data-open=${this.#open}
+            ?data-disabled=${this.#isDisabled}
+            @click=${this.#onClick}
+            @keydown=${this.#onKeyDown}
+          >
+            <slot name="trigger"></slot>
+            ${chevronSvg}
+          </button>
+        </h3>
+        ${shouldRender
+            ? html `
+              <div
+                part="panel"
+                id=${this.#panelId}
+                role="region"
+                aria-labelledby=${this.#triggerId}
+                style="height: ${this.#panelHeight}"
+                ?data-open=${this.#open && !this.#starting}
+                ?data-starting-style=${this.#starting}
+                ?data-ending-style=${this.#ending}
+                ?hidden=${!this.#visible && !this.#ending}
+                @transitionend=${this.#onTransitionEnd}
+              >
+                <div part="content">
+                  <slot></slot>
+                </div>
+              </div>
+            `
+            : nothing}
+      </div>
+    `;
+    }
+}
+__decorate([
+    property({ type: String })
+], DuiAccordionItem.prototype, "value", null);
+__decorate([
+    property({ type: Boolean })
+], DuiAccordionItem.prototype, "disabled", null);
+__decorate([
+    consume({ context: accordionContext, subscribe: true })
+], DuiAccordionItem.prototype, "_ctx", null);

package/accordion/accordion.d.ts

@@ -0,0 +1,20 @@
+/** Ported from original DUI: deep-future-app/app/client/components/dui/accordion */
+import { LitElement, type TemplateResult } from "lit";
+import { type AccordionContext } from "./accordion-context.js";
+export declare const valueChangeEvent: (detail: string[]) => CustomEvent<string[]>;
+export declare class DuiAccordion extends LitElement {
+    #private;
+    static tagName: "dui-accordion";
+    static styles: import("lit").CSSResult[];
+    accessor value: string[] | undefined;
+    accessor defaultValue: string[];
+    accessor disabled: boolean;
+    accessor multiple: boolean;
+    accessor loopFocus: boolean;
+    accessor orientation: "vertical" | "horizontal";
+    accessor keepMounted: boolean;
+    accessor _ctx: AccordionContext;
+    connectedCallback(): void;
+    willUpdate(): void;
+    render(): TemplateResult;
+}

package/accordion/accordion.js

@@ -0,0 +1,185 @@
+/** Ported from original DUI: deep-future-app/app/client/components/dui/accordion */
+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, state } from "lit/decorators.js";
+import { provide } from "@lit/context";
+import { base } from "@deepfuture/dui-core/base";
+import { customEvent } from "@deepfuture/dui-core/event";
+import { accordionContext, } from "./accordion-context.js";
+export const valueChangeEvent = customEvent("value-change", {
+    bubbles: true,
+    composed: true,
+});
+const styles = css `
+  :host {
+    display: block;
+  }
+
+  [part="root"] {
+    display: flex;
+    flex-direction: column;
+  }
+`;
+export class DuiAccordion extends LitElement {
+    static { this.tagName = "dui-accordion"; }
+    static { this.styles = [base, styles]; }
+    #value_accessor_storage = undefined;
+    get value() { return this.#value_accessor_storage; }
+    set value(value) { this.#value_accessor_storage = value; }
+    #defaultValue_accessor_storage = [];
+    get defaultValue() { return this.#defaultValue_accessor_storage; }
+    set defaultValue(value) { this.#defaultValue_accessor_storage = value; }
+    #disabled_accessor_storage = false;
+    get disabled() { return this.#disabled_accessor_storage; }
+    set disabled(value) { this.#disabled_accessor_storage = value; }
+    #multiple_accessor_storage = false;
+    get multiple() { return this.#multiple_accessor_storage; }
+    set multiple(value) { this.#multiple_accessor_storage = value; }
+    #loopFocus_accessor_storage = true;
+    get loopFocus() { return this.#loopFocus_accessor_storage; }
+    set loopFocus(value) { this.#loopFocus_accessor_storage = value; }
+    #orientation_accessor_storage = "vertical";
+    get orientation() { return this.#orientation_accessor_storage; }
+    set orientation(value) { this.#orientation_accessor_storage = value; }
+    #keepMounted_accessor_storage = false;
+    get keepMounted() { return this.#keepMounted_accessor_storage; }
+    set keepMounted(value) { this.#keepMounted_accessor_storage = value; }
+    #internalOpenValues_accessor_storage = [];
+    get #internalOpenValues() { return this.#internalOpenValues_accessor_storage; }
+    set #internalOpenValues(value) { this.#internalOpenValues_accessor_storage = value; }
+    #itemRegistry = new Map();
+    #itemOrder = [];
+    #getOpenValues = () => this.value ?? this.#internalOpenValues;
+    #toggle = (value) => {
+        const current = [...this.#getOpenValues()];
+        const index = current.indexOf(value);
+        let next;
+        if (index >= 0) {
+            next = current.filter((v) => v !== value);
+        }
+        else if (this.multiple) {
+            next = [...current, value];
+        }
+        else {
+            next = [value];
+        }
+        if (this.value === undefined) {
+            this.#internalOpenValues = next;
+        }
+        this.dispatchEvent(valueChangeEvent(next));
+    };
+    #registerItem = (value, el) => {
+        this.#itemRegistry.set(value, el);
+        if (!this.#itemOrder.includes(value)) {
+            this.#itemOrder.push(value);
+        }
+    };
+    #unregisterItem = (value) => {
+        this.#itemRegistry.delete(value);
+        this.#itemOrder = this.#itemOrder.filter((v) => v !== value);
+    };
+    #focusItem = (value, direction) => {
+        const currentIndex = this.#itemOrder.indexOf(value);
+        if (currentIndex === -1)
+            return;
+        const len = this.#itemOrder.length;
+        let targetIndex;
+        switch (direction) {
+            case "next":
+                if (currentIndex < len - 1) {
+                    targetIndex = currentIndex + 1;
+                }
+                else if (this.loopFocus) {
+                    targetIndex = 0;
+                }
+                break;
+            case "prev":
+                if (currentIndex > 0) {
+                    targetIndex = currentIndex - 1;
+                }
+                else if (this.loopFocus) {
+                    targetIndex = len - 1;
+                }
+                break;
+            case "first":
+                targetIndex = 0;
+                break;
+            case "last":
+                targetIndex = len - 1;
+                break;
+        }
+        if (targetIndex !== undefined) {
+            const targetValue = this.#itemOrder[targetIndex];
+            const targetEl = this.#itemRegistry.get(targetValue);
+            const trigger = targetEl?.shadowRoot?.querySelector("[part='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 {
+            openValues: this.#getOpenValues(),
+            disabled: this.disabled,
+            orientation: this.orientation,
+            loopFocus: this.loopFocus,
+            keepMounted: this.keepMounted,
+            toggle: this.#toggle,
+            registerItem: this.#registerItem,
+            unregisterItem: this.#unregisterItem,
+            focusItem: this.#focusItem,
+        };
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        if (this.value === undefined && this.defaultValue.length > 0) {
+            this.#internalOpenValues = [...this.defaultValue];
+        }
+        this._ctx = this.#buildContext();
+    }
+    willUpdate() {
+        this._ctx = this.#buildContext();
+    }
+    render() {
+        return html `
+      <div
+        part="root"
+        data-orientation=${this.orientation}
+        ?data-disabled=${this.disabled}
+      >
+        <slot></slot>
+      </div>
+    `;
+    }
+}
+__decorate([
+    property({ type: Array })
+], DuiAccordion.prototype, "value", null);
+__decorate([
+    property({ type: Array, attribute: "default-value" })
+], DuiAccordion.prototype, "defaultValue", null);
+__decorate([
+    property({ type: Boolean })
+], DuiAccordion.prototype, "disabled", null);
+__decorate([
+    property({ type: Boolean })
+], DuiAccordion.prototype, "multiple", null);
+__decorate([
+    property({ type: Boolean, attribute: "loop-focus" })
+], DuiAccordion.prototype, "loopFocus", null);
+__decorate([
+    property({ type: String })
+], DuiAccordion.prototype, "orientation", null);
+__decorate([
+    property({ type: Boolean, attribute: "keep-mounted" })
+], DuiAccordion.prototype, "keepMounted", null);
+__decorate([
+    provide({ context: accordionContext }),
+    state()
+], DuiAccordion.prototype, "_ctx", null);

package/accordion/index.d.ts

@@ -0,0 +1,3 @@
+export { DuiAccordion, valueChangeEvent } from "./accordion.js";
+export { DuiAccordionItem, openChangeEvent } from "./accordion-item.js";
+export type { AccordionContext } from "./accordion-context.js";

package/accordion/index.js

@@ -0,0 +1,2 @@
+export { DuiAccordion, valueChangeEvent } from "./accordion.js";
+export { DuiAccordionItem, openChangeEvent } from "./accordion-item.js";

package/accordion/register.d.ts

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

package/accordion/register.js

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

package/alert-dialog/alert-dialog-close.d.ts

@@ -0,0 +1,15 @@
+/** Ported from original DUI: deep-future-app/app/client/components/dui/alert-dialog */
+import { LitElement, type TemplateResult } from "lit";
+/**
+ * `<dui-alert-dialog-close>` — A close button wrapper for the alert dialog.
+ *
+ * Wraps slotted content and closes the alert dialog on click.
+ *
+ * @slot - Content that closes the alert dialog (usually a button).
+ */
+export declare class DuiAlertDialogClose extends LitElement {
+    #private;
+    static tagName: "dui-alert-dialog-close";
+    static styles: import("lit").CSSResult[];
+    render(): TemplateResult;
+}

package/alert-dialog/alert-dialog-close.js

@@ -0,0 +1,35 @@
+/** Ported from original DUI: deep-future-app/app/client/components/dui/alert-dialog */
+import { css, html, LitElement } from "lit";
+import { ContextConsumer } from "@lit/context";
+import { base } from "@deepfuture/dui-core/base";
+import { alertDialogContext } from "./alert-dialog-context.js";
+const hostStyles = css `
+  :host {
+    display: contents;
+  }
+`;
+/**
+ * `<dui-alert-dialog-close>` — A close button wrapper for the alert dialog.
+ *
+ * Wraps slotted content and closes the alert dialog on click.
+ *
+ * @slot - Content that closes the alert dialog (usually a button).
+ */
+export class DuiAlertDialogClose extends LitElement {
+    static { this.tagName = "dui-alert-dialog-close"; }
+    static { this.styles = [base, hostStyles]; }
+    #ctx = new ContextConsumer(this, {
+        context: alertDialogContext,
+        subscribe: true,
+    });
+    #handleClick = () => {
+        this.#ctx.value?.closeDialog();
+    };
+    render() {
+        return html `
+      <span @click="${this.#handleClick}">
+        <slot></slot>
+      </span>
+    `;
+    }
+}

package/alert-dialog/alert-dialog-context.d.ts

@@ -0,0 +1,13 @@
+/** Ported from original DUI: deep-future-app/app/client/components/dui/alert-dialog */
+export type AlertDialogContext = {
+    readonly open: boolean;
+    readonly dialogId: string;
+    readonly triggerId: string;
+    readonly titleId: string;
+    readonly descriptionId: string;
+    readonly openDialog: () => void;
+    readonly closeDialog: () => void;
+};
+export declare const alertDialogContext: {
+    __context__: AlertDialogContext;
+};

package/alert-dialog/alert-dialog-context.js

@@ -0,0 +1,3 @@
+/** Ported from original DUI: deep-future-app/app/client/components/dui/alert-dialog */
+import { createContext } from "@lit/context";
+export const alertDialogContext = createContext(Symbol("dui-alert-dialog"));

package/alert-dialog/alert-dialog-popup.d.ts

@@ -0,0 +1,34 @@
+/** Ported from original DUI: deep-future-app/app/client/components/dui/alert-dialog */
+import { LitElement, type TemplateResult } from "lit";
+/**
+ * `<dui-alert-dialog-popup>` — The popup overlay for the alert dialog.
+ *
+ * Renders a backdrop and a centered dialog popup with focus trapping.
+ * Handles open/close animations via `data-starting-style` / `data-ending-style`.
+ * Does NOT close on backdrop click — requires explicit user action.
+ *
+ * Title and description are provided via named slots and rendered as
+ * semantic `<h2>` and `<p>` elements with ARIA linkage.
+ *
+ * @slot title - Title text for the alert dialog (rendered as `<h2>`).
+ * @slot description - Description text for the alert dialog (rendered as `<p>`).
+ * @slot - Default slot for dialog content (actions, etc.).
+ * @csspart backdrop - The overlay backdrop behind the dialog.
+ * @csspart popup - The dialog popup container.
+ * @csspart title - The heading element wrapping the title slot.
+ * @csspart description - The paragraph element wrapping the description slot.
+ */
+export declare class DuiAlertDialogPopup extends LitElement {
+    #private;
+    static tagName: "dui-alert-dialog-popup";
+    static styles: import("lit").CSSResult[];
+    /** Keep the popup in the DOM when closed. */
+    accessor keepMounted: boolean;
+    /** CSS selector within the popup to focus when the dialog opens. */
+    accessor initialFocus: string | undefined;
+    /** CSS selector in the document to focus when the dialog closes. */
+    accessor finalFocus: string | undefined;
+    updated(): void;
+    willUpdate(): void;
+    render(): TemplateResult;
+}