@deepfuture/dui-components 0.0.1

package/dialog/dialog-popup.js

@@ -0,0 +1,277 @@
+/** Ported from original DUI: deep-future-app/app/client/components/dui/dialog */
+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 { ContextConsumer } from "@lit/context";
+import { base } from "@deepfuture/dui-core/base";
+import { getComposedFocusableElements, queryComposedAutofocus, } from "@deepfuture/dui-core/dom";
+import { dialogContext } from "./dialog-context.js";
+const hostStyles = css `
+  :host {
+    display: contents;
+  }
+
+  :host(:not([mounted])) [part="backdrop"],
+  :host(:not([mounted])) [part="popup"] {
+    display: none;
+  }
+`;
+const componentStyles = css `
+  [part="backdrop"] {
+    position: fixed;
+    min-height: 100dvh;
+    inset: 0;
+    z-index: 999;
+  }
+
+  [part="popup"] {
+    box-sizing: border-box;
+    position: fixed;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    width: var(--popup-width, 24rem);
+    max-width: calc(100vw - 3rem);
+    overflow: hidden;
+    z-index: 1000;
+    transition-property: opacity, transform;
+  }
+`;
+/**
+ * `<dui-dialog-popup>` — The popup overlay for the dialog.
+ *
+ * Renders a backdrop and a centered dialog popup with focus trapping.
+ * Handles open/close animations via `data-starting-style` / `data-ending-style`.
+ * Closes on backdrop click (unlike `<dui-alert-dialog-popup>`).
+ *
+ * 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 dialog (rendered as `<h2>`).
+ * @slot description - Description text for the dialog (rendered as `<p>`).
+ * @slot - Default slot for dialog content (actions, form fields, 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 class DuiDialogPopup extends LitElement {
+    static { this.tagName = "dui-dialog-popup"; }
+    static { this.styles = [base, hostStyles, componentStyles]; }
+    #keepMounted_accessor_storage = false;
+    /** Keep the popup in the DOM when closed. */
+    get keepMounted() { return this.#keepMounted_accessor_storage; }
+    set keepMounted(value) { this.#keepMounted_accessor_storage = value; }
+    #initialFocus_accessor_storage = undefined;
+    /** CSS selector within the popup to focus when the dialog opens. */
+    get initialFocus() { return this.#initialFocus_accessor_storage; }
+    set initialFocus(value) { this.#initialFocus_accessor_storage = value; }
+    #finalFocus_accessor_storage = undefined;
+    /** CSS selector in the document to focus when the dialog closes. */
+    get finalFocus() { return this.#finalFocus_accessor_storage; }
+    set finalFocus(value) { this.#finalFocus_accessor_storage = value; }
+    #width_accessor_storage = undefined;
+    /** Width of the popup (CSS value, e.g. "32rem" or "600px"). Defaults to 24rem. */
+    get width() { return this.#width_accessor_storage; }
+    set width(value) { this.#width_accessor_storage = value; }
+    #mounted_accessor_storage = false;
+    get #mounted() { return this.#mounted_accessor_storage; }
+    set #mounted(value) { this.#mounted_accessor_storage = value; }
+    #startingStyle_accessor_storage = false;
+    get #startingStyle() { return this.#startingStyle_accessor_storage; }
+    set #startingStyle(value) { this.#startingStyle_accessor_storage = value; }
+    #endingStyle_accessor_storage = false;
+    get #endingStyle() { return this.#endingStyle_accessor_storage; }
+    set #endingStyle(value) { this.#endingStyle_accessor_storage = value; }
+    #previouslyFocused;
+    #ctx = new ContextConsumer(this, {
+        context: dialogContext,
+        subscribe: true,
+    });
+    updated() {
+        const isOpen = this.#ctx.value?.open ?? false;
+        if (isOpen && !this.#mounted) {
+            this.#animateOpen();
+        }
+        else if (!isOpen && this.#mounted && !this.#endingStyle) {
+            this.#animateClose();
+        }
+    }
+    async #animateOpen() {
+        this.#previouslyFocused =
+            document.activeElement ?? undefined;
+        this.#mounted = true;
+        this.#startingStyle = true;
+        await new Promise((r) => requestAnimationFrame(() => requestAnimationFrame(() => r())));
+        this.#startingStyle = false;
+        await this.updateComplete;
+        this.#trapFocusIn();
+    }
+    #animateClose() {
+        this.#endingStyle = true;
+        const popup = this.shadowRoot?.querySelector('[part="popup"]');
+        if (!popup) {
+            this.#finishClose();
+            return;
+        }
+        let called = false;
+        const done = () => {
+            if (called)
+                return;
+            called = true;
+            popup.removeEventListener("transitionend", onEnd);
+            clearTimeout(timer);
+            this.#finishClose();
+        };
+        const onEnd = (e) => {
+            if (e.propertyName === "opacity") {
+                done();
+            }
+        };
+        popup.addEventListener("transitionend", onEnd);
+        const timer = setTimeout(done, 200);
+    }
+    #finishClose() {
+        if (!this.#endingStyle && !this.#mounted)
+            return;
+        this.#endingStyle = false;
+        if (!this.keepMounted) {
+            this.#mounted = false;
+        }
+        this.#restoreFocus();
+    }
+    #trapFocusIn() {
+        const popup = this.shadowRoot?.querySelector('[part="popup"]');
+        if (!popup)
+            return;
+        if (this.initialFocus) {
+            const target = popup.querySelector(this.initialFocus);
+            if (target) {
+                target.focus();
+                return;
+            }
+        }
+        const autoEl = queryComposedAutofocus(popup);
+        if (autoEl) {
+            autoEl.focus();
+            return;
+        }
+        const focusables = getComposedFocusableElements(popup);
+        if (focusables.length > 0) {
+            focusables[0].focus();
+            return;
+        }
+        popup.focus();
+    }
+    #restoreFocus() {
+        if (this.finalFocus) {
+            const target = document.querySelector(this.finalFocus);
+            target?.focus();
+            return;
+        }
+        this.#previouslyFocused?.focus();
+        this.#previouslyFocused = undefined;
+    }
+    #handleKeyDown = (e) => {
+        if (e.key === "Escape") {
+            e.preventDefault();
+            e.stopPropagation();
+            this.#ctx.value?.closeDialog();
+        }
+        if (e.key === "Tab") {
+            this.#handleTabTrap(e);
+        }
+    };
+    #handleTabTrap(e) {
+        const popup = this.shadowRoot?.querySelector('[part="popup"]');
+        if (!popup)
+            return;
+        const focusables = getComposedFocusableElements(popup);
+        if (focusables.length === 0) {
+            e.preventDefault();
+            return;
+        }
+        const first = focusables[0];
+        const last = focusables[focusables.length - 1];
+        const isFirst = first.matches(":focus");
+        const isLast = last.matches(":focus");
+        const popupHasFocus = !focusables.some((el) => el.matches(":focus"));
+        if (e.shiftKey && (isFirst || popupHasFocus)) {
+            e.preventDefault();
+            last.focus();
+        }
+        else if (!e.shiftKey && isLast) {
+            e.preventDefault();
+            first.focus();
+        }
+    }
+    #handleBackdropClick = () => {
+        this.#ctx.value?.closeDialog();
+    };
+    willUpdate(changed) {
+        if (changed.has("width")) {
+            if (this.width)
+                this.style.setProperty("--popup-width", this.width);
+            else
+                this.style.removeProperty("--popup-width");
+        }
+        if (this.#mounted || this.keepMounted) {
+            this.setAttribute("mounted", "");
+        }
+        else {
+            this.removeAttribute("mounted");
+        }
+    }
+    render() {
+        const isOpen = this.#ctx.value?.open ?? false;
+        const titleId = this.#ctx.value?.titleId ?? "";
+        const descriptionId = this.#ctx.value?.descriptionId ?? "";
+        if (!this.#mounted && !this.keepMounted) {
+            return html ``;
+        }
+        return html `
+      <div
+        part="backdrop"
+        ?data-open="${isOpen && !this.#endingStyle}"
+        ?data-closed="${!isOpen || this.#endingStyle}"
+        ?data-starting-style="${this.#startingStyle}"
+        ?data-ending-style="${this.#endingStyle}"
+        @click="${this.#handleBackdropClick}"
+      ></div>
+      <div
+        part="popup"
+        role="dialog"
+        aria-modal="true"
+        aria-labelledby="${titleId}"
+        aria-describedby="${descriptionId}"
+        ?data-open="${isOpen && !this.#endingStyle}"
+        ?data-closed="${!isOpen || this.#endingStyle}"
+        ?data-starting-style="${this.#startingStyle}"
+        ?data-ending-style="${this.#endingStyle}"
+        tabindex="-1"
+        @keydown="${this.#handleKeyDown}"
+      >
+        <h2 part="title" id="${titleId}"><slot name="title"></slot></h2>
+        <p part="description" id="${descriptionId}"><slot name="description"></slot></p>
+        <slot></slot>
+      </div>
+    `;
+    }
+}
+__decorate([
+    property({ type: Boolean, attribute: "keep-mounted" })
+], DuiDialogPopup.prototype, "keepMounted", null);
+__decorate([
+    property({ attribute: "initial-focus" })
+], DuiDialogPopup.prototype, "initialFocus", null);
+__decorate([
+    property({ attribute: "final-focus" })
+], DuiDialogPopup.prototype, "finalFocus", null);
+__decorate([
+    property()
+], DuiDialogPopup.prototype, "width", null);

package/dialog/dialog-trigger.d.ts

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

package/dialog/dialog-trigger.js

@@ -0,0 +1,52 @@
+/** Ported from original DUI: deep-future-app/app/client/components/dui/dialog */
+import { css, html, LitElement } from "lit";
+import { ContextConsumer } from "@lit/context";
+import { base } from "@deepfuture/dui-core/base";
+import { dialogContext } from "./dialog-context.js";
+const hostStyles = css `
+  :host {
+    display: contents;
+  }
+`;
+const componentStyles = css `
+  .Trigger {
+    display: contents;
+  }
+`;
+/**
+ * `<dui-dialog-trigger>` — Behavioral wrapper that opens the dialog.
+ *
+ * Wraps slotted content and opens the dialog on click.
+ *
+ * @slot - Content that triggers the dialog (usually a `<dui-button>`).
+ */
+export class DuiDialogTrigger extends LitElement {
+    static { this.tagName = "dui-dialog-trigger"; }
+    static { this.styles = [base, hostStyles, componentStyles]; }
+    #ctx = new ContextConsumer(this, {
+        context: dialogContext,
+        subscribe: true,
+    });
+    #handleClick = () => {
+        this.#ctx.value?.openDialog();
+    };
+    render() {
+        const isOpen = this.#ctx.value?.open ?? false;
+        const triggerId = this.#ctx.value?.triggerId ?? "";
+        const dialogId = this.#ctx.value?.dialogId ?? "";
+        return html `
+      <span
+        class="Trigger"
+        part="trigger"
+        id="${triggerId}"
+        aria-haspopup="dialog"
+        aria-expanded="${isOpen}"
+        aria-controls="${isOpen ? dialogId : ""}"
+        ?data-popup-open="${isOpen}"
+        @click="${this.#handleClick}"
+      >
+        <slot></slot>
+      </span>
+    `;
+    }
+}

package/dialog/dialog.d.ts

@@ -0,0 +1,30 @@
+/** Ported from original DUI: deep-future-app/app/client/components/dui/dialog */
+import { LitElement, type TemplateResult } from "lit";
+export type DialogOpenChangeDetail = {
+    open: boolean;
+};
+export declare const openChangeEvent: (detail: DialogOpenChangeDetail) => CustomEvent<DialogOpenChangeDetail>;
+/**
+ * `<dui-dialog>` — Root element for the dialog compound component.
+ *
+ * Manages open/close state and provides context to child elements.
+ * Does not render visible DOM — uses `display: contents`.
+ *
+ * Unlike `<dui-alert-dialog>`, this dialog closes on backdrop click,
+ * following WAI-ARIA `dialog` semantics for non-critical modals.
+ *
+ * @slot - Default slot for trigger, popup, and other dialog parts.
+ * @fires open-change - Fired when the dialog opens or closes. Detail: { open: boolean }
+ */
+export declare class DuiDialog extends LitElement {
+    #private;
+    static tagName: "dui-dialog";
+    static styles: import("lit").CSSResult[];
+    /** Controls the dialog open state (controlled mode). */
+    accessor open: boolean | undefined;
+    /** Initial open state for uncontrolled mode. */
+    accessor defaultOpen: boolean;
+    connectedCallback(): void;
+    willUpdate(): void;
+    render(): TemplateResult;
+}

package/dialog/dialog.js

@@ -0,0 +1,97 @@
+/** Ported from original DUI: deep-future-app/app/client/components/dui/dialog */
+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";
+import { customEvent } from "@deepfuture/dui-core/event";
+export const openChangeEvent = customEvent("open-change", { bubbles: true, composed: true });
+const hostStyles = css `
+  :host {
+    display: contents;
+  }
+`;
+/**
+ * `<dui-dialog>` — Root element for the dialog compound component.
+ *
+ * Manages open/close state and provides context to child elements.
+ * Does not render visible DOM — uses `display: contents`.
+ *
+ * Unlike `<dui-alert-dialog>`, this dialog closes on backdrop click,
+ * following WAI-ARIA `dialog` semantics for non-critical modals.
+ *
+ * @slot - Default slot for trigger, popup, and other dialog parts.
+ * @fires open-change - Fired when the dialog opens or closes. Detail: { open: boolean }
+ */
+export class DuiDialog extends LitElement {
+    static { this.tagName = "dui-dialog"; }
+    static { this.styles = [base, hostStyles]; }
+    #open_accessor_storage = undefined;
+    /** Controls the dialog open state (controlled mode). */
+    get open() { return this.#open_accessor_storage; }
+    set open(value) { this.#open_accessor_storage = value; }
+    #defaultOpen_accessor_storage = false;
+    /** Initial open state for uncontrolled mode. */
+    get defaultOpen() { return this.#defaultOpen_accessor_storage; }
+    set defaultOpen(value) { this.#defaultOpen_accessor_storage = value; }
+    #internalOpen_accessor_storage = false;
+    get #internalOpen() { return this.#internalOpen_accessor_storage; }
+    set #internalOpen(value) { this.#internalOpen_accessor_storage = value; }
+    #instanceId = crypto.randomUUID().slice(0, 8);
+    #dialogId = `dui-dialog-${this.#instanceId}`;
+    #triggerId = `dui-trigger-${this.#instanceId}`;
+    #titleId = `dui-title-${this.#instanceId}`;
+    #descriptionId = `dui-desc-${this.#instanceId}`;
+    get #isOpen() {
+        return this.open ?? this.#internalOpen;
+    }
+    #openDialog = () => {
+        if (this.open === undefined) {
+            this.#internalOpen = true;
+        }
+        this.dispatchEvent(openChangeEvent({ open: true }));
+    };
+    #closeDialog = () => {
+        if (this.open === undefined) {
+            this.#internalOpen = false;
+        }
+        this.dispatchEvent(openChangeEvent({ open: false }));
+    };
+    #ctx_accessor_storage = this.#buildContext();
+    get #ctx() { return this.#ctx_accessor_storage; }
+    set #ctx(value) { this.#ctx_accessor_storage = value; }
+    #buildContext() {
+        return {
+            open: this.#isOpen,
+            dialogId: this.#dialogId,
+            triggerId: this.#triggerId,
+            titleId: this.#titleId,
+            descriptionId: this.#descriptionId,
+            openDialog: this.#openDialog,
+            closeDialog: this.#closeDialog,
+        };
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        if (this.open === undefined && this.defaultOpen) {
+            this.#internalOpen = true;
+        }
+        this.#ctx = this.#buildContext();
+    }
+    willUpdate() {
+        this.#ctx = this.#buildContext();
+    }
+    render() {
+        return html `<slot></slot>`;
+    }
+}
+__decorate([
+    property({ type: Boolean, reflect: true })
+], DuiDialog.prototype, "open", null);
+__decorate([
+    property({ type: Boolean, attribute: "default-open" })
+], DuiDialog.prototype, "defaultOpen", null);

package/dialog/index.d.ts

@@ -0,0 +1,6 @@
+export { DuiDialog, openChangeEvent } from "./dialog.js";
+export type { DialogOpenChangeDetail } from "./dialog.js";
+export { DuiDialogTrigger } from "./dialog-trigger.js";
+export { DuiDialogPopup } from "./dialog-popup.js";
+export { DuiDialogClose } from "./dialog-close.js";
+export type { DialogContext } from "./dialog-context.js";

package/dialog/index.js

@@ -0,0 +1,4 @@
+export { DuiDialog, openChangeEvent } from "./dialog.js";
+export { DuiDialogTrigger } from "./dialog-trigger.js";
+export { DuiDialogPopup } from "./dialog-popup.js";
+export { DuiDialogClose } from "./dialog-close.js";

package/dialog/register.d.ts

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

package/dialog/register.js

@@ -0,0 +1,16 @@
+import { DuiDialog } from "./dialog.js";
+import { DuiDialogTrigger } from "./dialog-trigger.js";
+import { DuiDialogPopup } from "./dialog-popup.js";
+import { DuiDialogClose } from "./dialog-close.js";
+if (!customElements.get(DuiDialog.tagName)) {
+    customElements.define(DuiDialog.tagName, DuiDialog);
+}
+if (!customElements.get(DuiDialogTrigger.tagName)) {
+    customElements.define(DuiDialogTrigger.tagName, DuiDialogTrigger);
+}
+if (!customElements.get(DuiDialogPopup.tagName)) {
+    customElements.define(DuiDialogPopup.tagName, DuiDialogPopup);
+}
+if (!customElements.get(DuiDialogClose.tagName)) {
+    customElements.define(DuiDialogClose.tagName, DuiDialogClose);
+}

package/dropzone/dropzone.d.ts

@@ -0,0 +1,74 @@
+/** Ported from original DUI: deep-future-app/app/client/components/dui/dropzone */
+import { LitElement, type TemplateResult } from "lit";
+export type DropzoneErrorCode = "FILE_DIALOG_OPEN_FAILED" | "FILE_PROCESSING_FAILED";
+export type DropzoneRejectionCode = "TOO_MANY_FILES" | "FILE_TOO_LARGE" | "FILE_TOO_SMALL" | "FILE_INVALID_TYPE";
+export type FileRejectionError = {
+    code: DropzoneRejectionCode;
+    message: string;
+};
+export type RejectedFile = {
+    file: File;
+    errors: FileRejectionError[];
+};
+export type DropzoneDropDetail = {
+    acceptedFiles: File[];
+    rejectedFiles: RejectedFile[];
+};
+export type DropzoneAcceptedDetail = {
+    acceptedFiles: File[];
+};
+export type DropzoneRejectedDetail = {
+    rejectedFiles: RejectedFile[];
+};
+export type DropzoneErrorDetail = {
+    error: unknown;
+    code: DropzoneErrorCode;
+};
+export declare const dropzoneDropEvent: (detail: DropzoneDropDetail) => CustomEvent<DropzoneDropDetail>;
+export declare const dropAcceptedEvent: (detail: DropzoneAcceptedDetail) => CustomEvent<DropzoneAcceptedDetail>;
+export declare const dropRejectedEvent: (detail: DropzoneRejectedDetail) => CustomEvent<DropzoneRejectedDetail>;
+export declare const dropzoneDragEnterEvent: (detail: void) => CustomEvent<void>;
+export declare const dropzoneDragOverEvent: (detail: void) => CustomEvent<void>;
+export declare const dropzoneDragLeaveEvent: (detail: void) => CustomEvent<void>;
+export declare const dropzoneErrorEvent: (detail: DropzoneErrorDetail) => CustomEvent<DropzoneErrorDetail>;
+/**
+ * `<dui-dropzone>` — A drag-and-drop file upload area.
+ *
+ * @slot - Custom content for the dropzone area.
+ * @csspart root - The dropzone container.
+ *
+ * @fires drop - Files dropped or selected (valid or invalid).
+ * @fires drop-accepted - Files that passed validation.
+ * @fires drop-rejected - Files that failed validation.
+ * @fires dragenter - File dragged over the dropzone.
+ * @fires dragover - File hovering over the dropzone.
+ * @fires dragleave - File dragged away from the dropzone.
+ * @fires dropzone-error - Internal error (e.g. file dialog failure).
+ */
+export declare class DuiDropzone extends LitElement {
+    #private;
+    static tagName: "dui-dropzone";
+    static styles: import("lit").CSSResult[];
+    static readonly ERROR_CODES: Record<DropzoneErrorCode, DropzoneErrorCode>;
+    static readonly REJECTION_CODES: Record<DropzoneRejectionCode, DropzoneRejectionCode>;
+    /** Accepted file types (e.g. "image/*,.pdf"). */
+    accessor accept: string | undefined;
+    /** Allow multiple files. */
+    accessor multiple: boolean;
+    /** Disable the dropzone. */
+    accessor disabled: boolean;
+    /** Maximum number of files allowed. */
+    accessor maxFiles: number;
+    /** Maximum file size in bytes. */
+    accessor maxSize: number;
+    /** Minimum file size in bytes. */
+    accessor minSize: number;
+    /** Auto-focus the dropzone on mount. */
+    accessor autoFocus: boolean;
+    /** Disable default dropzone styling. */
+    accessor noStyle: boolean;
+    connectedCallback(): void;
+    /** Opens the native file dialog programmatically. */
+    openFileDialog(): void;
+    render(): TemplateResult;
+}