@deepfuture/dui-components 0.0.1

package/page-inset/register.js

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

package/popover/index.d.ts

@@ -0,0 +1,6 @@
+export { DuiPopover, openChangeEvent } from "./popover.js";
+export type { PopoverOpenChangeDetail } from "./popover.js";
+export { DuiPopoverTrigger } from "./popover-trigger.js";
+export { DuiPopoverPopup } from "./popover-popup.js";
+export { DuiPopoverClose } from "./popover-close.js";
+export type { PopoverContext, PopoverSide } from "./popover-context.js";

package/popover/index.js

@@ -0,0 +1,4 @@
+export { DuiPopover, openChangeEvent } from "./popover.js";
+export { DuiPopoverTrigger } from "./popover-trigger.js";
+export { DuiPopoverPopup } from "./popover-popup.js";
+export { DuiPopoverClose } from "./popover-close.js";

package/popover/popover-close.d.ts

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

package/popover/popover-close.js

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

package/popover/popover-context.d.ts

@@ -0,0 +1,17 @@
+/** Ported from original DUI: deep-future-app/app/client/components/dui/popover */
+export type PopoverSide = "top" | "bottom";
+export type PopoverContext = {
+    readonly open: boolean;
+    readonly triggerId: string;
+    readonly popupId: string;
+    readonly side: PopoverSide;
+    readonly sideOffset: number;
+    readonly triggerEl: HTMLElement | undefined;
+    readonly openPopover: () => void;
+    readonly closePopover: () => void;
+    readonly togglePopover: () => void;
+    readonly setTriggerEl: (el: HTMLElement | undefined) => void;
+};
+export declare const popoverContext: {
+    __context__: PopoverContext;
+};

package/popover/popover-context.js

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

package/popover/popover-popup.d.ts

@@ -0,0 +1,20 @@
+/** Ported from original DUI: deep-future-app/app/client/components/dui/popover */
+import { LitElement, type TemplateResult } from "lit";
+/**
+ * `<dui-popover-popup>` — The popover popup content container.
+ *
+ * @slot - Popover content.
+ */
+export declare class DuiPopoverPopup extends LitElement {
+    #private;
+    static tagName: "dui-popover-popup";
+    static styles: import("lit").CSSResult[];
+    /** Whether to show an arrow pointing to the trigger. */
+    accessor showArrow: boolean;
+    /** Close the popover when content inside the popup is clicked. */
+    accessor closeOnClick: boolean;
+    /** Check if an event path includes this popup's portal positioner. */
+    containsEventTarget(path: EventTarget[]): boolean;
+    updated(): void;
+    render(): TemplateResult;
+}

package/popover/popover-popup.js

@@ -0,0 +1,176 @@
+/** Ported from original DUI: deep-future-app/app/client/components/dui/popover */
+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 { popoverContext } from "./popover-context.js";
+import { FloatingPortalController } from "@deepfuture/dui-core/floating-portal-controller";
+import { renderArrow, } from "@deepfuture/dui-core/floating-popup-utils";
+const hostStyles = css `
+  :host {
+    display: none;
+  }
+`;
+/** Styles injected into the portal positioner. */
+const portalPopupStyles = [
+    css `
+    .Popup {
+      box-sizing: border-box;
+      padding: var(--space-1);
+      border-radius: var(--radius-md);
+      background: var(--popover);
+      color: var(--popover-foreground);
+      font-family: var(--font-sans);
+      font-size: var(--font-size-sm);
+      line-height: var(--line-height-normal);
+      box-shadow: var(--shadow-md);
+      border: var(--border-width-thin) solid var(--border);
+      pointer-events: auto;
+      transform-origin: var(--transform-origin, center);
+      opacity: 1;
+      transform: scale(1);
+      transition-property: opacity, transform;
+      transition-duration: var(--duration-fast);
+      transition-timing-function: var(--ease-out-3);
+    }
+
+    .Popup[data-starting-style],
+    .Popup[data-ending-style] {
+      opacity: 0;
+      transform: scale(0.96);
+    }
+
+    .Popup[data-side="top"] {
+      --transform-origin: bottom center;
+    }
+
+    .Popup[data-side="bottom"] {
+      --transform-origin: top center;
+    }
+
+    .Arrow {
+      position: absolute;
+      width: 10px;
+      height: 6px;
+    }
+
+    .Arrow[data-side="top"] {
+      bottom: -5px;
+      left: 50%;
+      transform: translateX(-50%);
+    }
+
+    .Arrow[data-side="bottom"] {
+      top: -5px;
+      left: 50%;
+      transform: translateX(-50%) rotate(180deg);
+    }
+
+    .Arrow .arrow-fill {
+      fill: var(--popover);
+    }
+
+    .Arrow .arrow-stroke {
+      fill: none;
+      stroke: var(--border);
+      stroke-width: 1px;
+    }
+  `,
+];
+/**
+ * `<dui-popover-popup>` — The popover popup content container.
+ *
+ * @slot - Popover content.
+ */
+export class DuiPopoverPopup extends LitElement {
+    static { this.tagName = "dui-popover-popup"; }
+    static { this.styles = [base, hostStyles]; }
+    #showArrow_accessor_storage = true;
+    /** Whether to show an arrow pointing to the trigger. */
+    get showArrow() { return this.#showArrow_accessor_storage; }
+    set showArrow(value) { this.#showArrow_accessor_storage = value; }
+    #closeOnClick_accessor_storage = false;
+    /** Close the popover when content inside the popup is clicked. */
+    get closeOnClick() { return this.#closeOnClick_accessor_storage; }
+    set closeOnClick(value) { this.#closeOnClick_accessor_storage = value; }
+    #side_accessor_storage = "bottom";
+    get #side() { return this.#side_accessor_storage; }
+    set #side(value) { this.#side_accessor_storage = value; }
+    #ctx = new ContextConsumer(this, {
+        context: popoverContext,
+        subscribe: true,
+    });
+    #wasOpen = false;
+    #portal = new FloatingPortalController(this, {
+        getAnchor: () => this.#ctx.value?.triggerEl,
+        matchWidth: false,
+        placement: "bottom",
+        offset: 8,
+        styles: portalPopupStyles,
+        contentContainer: ".Content",
+        onPosition: ({ placement }) => {
+            const actualSide = placement.split("-")[0];
+            if (actualSide !== this.#side) {
+                this.#side = actualSide;
+            }
+        },
+        renderPopup: (portal) => {
+            const popupId = this.#ctx.value?.popupId ?? "";
+            return html `
+        <div
+          class="Popup"
+          id="${popupId}"
+          role="dialog"
+          ?data-starting-style="${portal.isStarting}"
+          ?data-ending-style="${portal.isEnding}"
+          data-side="${this.#side}"
+          @click="${this.#handleContentClick}"
+        >
+          <div class="Content"></div>
+          ${this.showArrow ? renderArrow(this.#side) : ""}
+        </div>
+      `;
+        },
+    });
+    /** Check if an event path includes this popup's portal positioner. */
+    containsEventTarget(path) {
+        const positioner = this.#portal.positionerElement;
+        return positioner !== null && path.includes(positioner);
+    }
+    #handleContentClick = () => {
+        if (this.closeOnClick) {
+            this.#ctx.value?.closePopover();
+        }
+    };
+    updated() {
+        const isOpen = this.#ctx.value?.open ?? false;
+        if (isOpen && !this.#wasOpen) {
+            this.#updatePlacement();
+            this.#portal.open();
+        }
+        else if (!isOpen && this.#wasOpen) {
+            this.#portal.close();
+        }
+        this.#wasOpen = isOpen;
+    }
+    #updatePlacement() {
+        const side = this.#ctx.value?.side ?? "bottom";
+        this.#portal.placement = side;
+        this.#portal.offset = this.#ctx.value?.sideOffset ?? 8;
+    }
+    render() {
+        return html `<slot></slot>`;
+    }
+}
+__decorate([
+    property({ type: Boolean, attribute: "show-arrow" })
+], DuiPopoverPopup.prototype, "showArrow", null);
+__decorate([
+    property({ type: Boolean, attribute: "close-on-click" })
+], DuiPopoverPopup.prototype, "closeOnClick", null);

package/popover/popover-trigger.d.ts

@@ -0,0 +1,13 @@
+/** Ported from original DUI: deep-future-app/app/client/components/dui/popover */
+import { LitElement, type TemplateResult } from "lit";
+/**
+ * `<dui-popover-trigger>` — Click-to-toggle trigger for the popover.
+ *
+ * @slot - Content that triggers the popover (usually a button).
+ */
+export declare class DuiPopoverTrigger extends LitElement {
+    #private;
+    static tagName: "dui-popover-trigger";
+    static styles: import("lit").CSSResult[];
+    render(): TemplateResult;
+}

package/popover/popover-trigger.js

@@ -0,0 +1,57 @@
+/** Ported from original DUI: deep-future-app/app/client/components/dui/popover */
+import { css, html, LitElement } from "lit";
+import { ContextConsumer } from "@lit/context";
+import { base } from "@deepfuture/dui-core/base";
+import { popoverContext } from "./popover-context.js";
+const hostStyles = css `
+  :host {
+    display: contents;
+  }
+`;
+const componentStyles = css `
+  .Trigger {
+    display: contents;
+  }
+`;
+/**
+ * `<dui-popover-trigger>` — Click-to-toggle trigger for the popover.
+ *
+ * @slot - Content that triggers the popover (usually a button).
+ */
+export class DuiPopoverTrigger extends LitElement {
+    static { this.tagName = "dui-popover-trigger"; }
+    static { this.styles = [base, hostStyles, componentStyles]; }
+    #ctx = new ContextConsumer(this, {
+        context: popoverContext,
+        subscribe: true,
+    });
+    #handleClick = (e) => {
+        e.stopPropagation();
+        this.#updateTriggerEl();
+        this.#ctx.value?.togglePopover();
+    };
+    #updateTriggerEl() {
+        const slot = this.shadowRoot?.querySelector("slot");
+        const el = slot?.assignedElements()?.[0] ?? this;
+        this.#ctx.value?.setTriggerEl(el);
+    }
+    render() {
+        const isOpen = this.#ctx.value?.open ?? false;
+        const popupId = this.#ctx.value?.popupId ?? "";
+        const triggerId = this.#ctx.value?.triggerId ?? "";
+        return html `
+      <span
+        class="Trigger"
+        part="trigger"
+        id="${triggerId}"
+        aria-haspopup="dialog"
+        aria-expanded="${isOpen}"
+        aria-controls="${isOpen ? popupId : ""}"
+        ?data-popup-open="${isOpen}"
+        @click="${this.#handleClick}"
+      >
+        <slot></slot>
+      </span>
+    `;
+    }
+}

package/popover/popover.d.ts

@@ -0,0 +1,30 @@
+/** Ported from original DUI: deep-future-app/app/client/components/dui/popover */
+import { LitElement, type PropertyValues, type TemplateResult } from "lit";
+import { type PopoverSide } from "./popover-context.js";
+export type PopoverOpenChangeDetail = {
+    open: boolean;
+};
+export declare const openChangeEvent: (detail: PopoverOpenChangeDetail) => CustomEvent<PopoverOpenChangeDetail>;
+/**
+ * `<dui-popover>` — A popover root that provides context for trigger and popup.
+ *
+ * @slot - Default slot for dui-popover-trigger and dui-popover-popup.
+ * @fires open-change - Dispatched when the popover opens or closes.
+ */
+export declare class DuiPopover extends LitElement {
+    #private;
+    static tagName: "dui-popover";
+    static styles: import("lit").CSSResult[];
+    /** Controlled open state. */
+    accessor open: boolean;
+    /** Default open state for uncontrolled usage. */
+    accessor defaultOpen: boolean;
+    /** Which side of the trigger the popover appears on. */
+    accessor side: PopoverSide;
+    /** Offset from the trigger in pixels. */
+    accessor sideOffset: number;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    protected willUpdate(changed: PropertyValues): void;
+    render(): TemplateResult;
+}

package/popover/popover.js

@@ -0,0 +1,140 @@
+/** Ported from original DUI: deep-future-app/app/client/components/dui/popover */
+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-popover>` — A popover root that provides context for trigger and popup.
+ *
+ * @slot - Default slot for dui-popover-trigger and dui-popover-popup.
+ * @fires open-change - Dispatched when the popover opens or closes.
+ */
+export class DuiPopover extends LitElement {
+    static { this.tagName = "dui-popover"; }
+    static { this.styles = [base, hostStyles]; }
+    #open_accessor_storage = false;
+    /** Controlled open state. */
+    get open() { return this.#open_accessor_storage; }
+    set open(value) { this.#open_accessor_storage = value; }
+    #defaultOpen_accessor_storage = false;
+    /** Default open state for uncontrolled usage. */
+    get defaultOpen() { return this.#defaultOpen_accessor_storage; }
+    set defaultOpen(value) { this.#defaultOpen_accessor_storage = value; }
+    #side_accessor_storage = "bottom";
+    /** Which side of the trigger the popover appears on. */
+    get side() { return this.#side_accessor_storage; }
+    set side(value) { this.#side_accessor_storage = value; }
+    #sideOffset_accessor_storage = 8;
+    /** Offset from the trigger in pixels. */
+    get sideOffset() { return this.#sideOffset_accessor_storage; }
+    set sideOffset(value) { this.#sideOffset_accessor_storage = value; }
+    #internalOpen_accessor_storage = false;
+    get #internalOpen() { return this.#internalOpen_accessor_storage; }
+    set #internalOpen(value) { this.#internalOpen_accessor_storage = value; }
+    #triggerEl_accessor_storage;
+    get #triggerEl() { return this.#triggerEl_accessor_storage; }
+    set #triggerEl(value) { this.#triggerEl_accessor_storage = value; }
+    get #isOpen() {
+        return this.open || this.#internalOpen;
+    }
+    #triggerId = `popover-trigger-${crypto.randomUUID().slice(0, 8)}`;
+    #popupId = `popover-popup-${crypto.randomUUID().slice(0, 8)}`;
+    #ctx_accessor_storage = {
+        open: false,
+        triggerId: this.#triggerId,
+        popupId: this.#popupId,
+        side: "bottom",
+        sideOffset: 8,
+        triggerEl: undefined,
+        openPopover: () => this.#doOpen(),
+        closePopover: () => this.#doClose(),
+        togglePopover: () => this.#doToggle(),
+        setTriggerEl: (el) => this.#setTriggerEl(el),
+    };
+    get #ctx() { return this.#ctx_accessor_storage; }
+    set #ctx(value) { this.#ctx_accessor_storage = value; }
+    connectedCallback() {
+        super.connectedCallback();
+        if (this.defaultOpen) {
+            this.#internalOpen = true;
+        }
+        document.addEventListener("keydown", this.#onDocumentKeyDown);
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        document.removeEventListener("keydown", this.#onDocumentKeyDown);
+    }
+    willUpdate(changed) {
+        if (changed.has("open") ||
+            changed.has("side") ||
+            changed.has("sideOffset") ||
+            this.#ctx.open !== this.#isOpen ||
+            this.#ctx.triggerEl !== this.#triggerEl) {
+            this.#ctx = {
+                ...this.#ctx,
+                open: this.#isOpen,
+                side: this.side,
+                sideOffset: this.sideOffset,
+                triggerEl: this.#triggerEl,
+            };
+        }
+    }
+    #onDocumentKeyDown = (event) => {
+        if (!this.#isOpen)
+            return;
+        if (event.key === "Escape") {
+            event.preventDefault();
+            this.#doClose();
+        }
+    };
+    #doOpen() {
+        if (this.#internalOpen)
+            return;
+        this.#internalOpen = true;
+        this.dispatchEvent(openChangeEvent({ open: true }));
+    }
+    #doClose() {
+        if (!this.#internalOpen)
+            return;
+        this.#internalOpen = false;
+        this.dispatchEvent(openChangeEvent({ open: false }));
+    }
+    #doToggle() {
+        if (this.#isOpen) {
+            this.#doClose();
+        }
+        else {
+            this.#doOpen();
+        }
+    }
+    #setTriggerEl(el) {
+        this.#triggerEl = el;
+    }
+    render() {
+        return html `<slot></slot>`;
+    }
+}
+__decorate([
+    property({ type: Boolean, reflect: true })
+], DuiPopover.prototype, "open", null);
+__decorate([
+    property({ type: Boolean, attribute: "default-open" })
+], DuiPopover.prototype, "defaultOpen", null);
+__decorate([
+    property({ reflect: true })
+], DuiPopover.prototype, "side", null);
+__decorate([
+    property({ type: Number, attribute: "side-offset" })
+], DuiPopover.prototype, "sideOffset", null);

package/popover/register.d.ts

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

package/popover/register.js

@@ -0,0 +1,16 @@
+import { DuiPopover } from "./popover.js";
+import { DuiPopoverTrigger } from "./popover-trigger.js";
+import { DuiPopoverPopup } from "./popover-popup.js";
+import { DuiPopoverClose } from "./popover-close.js";
+if (!customElements.get(DuiPopover.tagName)) {
+    customElements.define(DuiPopover.tagName, DuiPopover);
+}
+if (!customElements.get(DuiPopoverTrigger.tagName)) {
+    customElements.define(DuiPopoverTrigger.tagName, DuiPopoverTrigger);
+}
+if (!customElements.get(DuiPopoverPopup.tagName)) {
+    customElements.define(DuiPopoverPopup.tagName, DuiPopoverPopup);
+}
+if (!customElements.get(DuiPopoverClose.tagName)) {
+    customElements.define(DuiPopoverClose.tagName, DuiPopoverClose);
+}

package/portal/index.d.ts

@@ -0,0 +1,2 @@
+export { DuiPortal } from "./portal.js";
+export type { QueryRoot } from "./portal.js";

package/portal/index.js

@@ -0,0 +1 @@
+export { DuiPortal } from "./portal.js";

package/portal/portal.d.ts

@@ -0,0 +1,29 @@
+/** Ported from original DUI: deep-future-app/app/client/components/dui/portal */
+import { LitElement, type PropertyValues, type TemplateResult } from "lit";
+export type QueryRoot = "shadow" | "document";
+/**
+ * `<dui-portal>` — Teleports light DOM children to a target container.
+ *
+ * Children are moved back into the portal when the element disconnects,
+ * allowing the portal and its children to be moved or garbage-collected
+ * correctly.
+ *
+ * @slot - Content to teleport.
+ * @attr {string} target - CSS selector for the destination container (default: "body").
+ * @attr {"shadow" | "document"} target-root - Where to resolve the target selector.
+ */
+export declare class DuiPortal extends LitElement {
+    #private;
+    static tagName: "dui-portal";
+    static styles: import("lit").CSSResult[];
+    /** CSS selector for the destination container. */
+    accessor target: string;
+    /** Where to resolve the target selector: "document" (default) or "shadow". */
+    accessor targetRoot: QueryRoot;
+    /** Direct element reference for cross-shadow-root targets. Takes precedence over `target` selector. */
+    accessor targetElement: HTMLElement | undefined;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    protected updated(changed: PropertyValues): void;
+    render(): TemplateResult;
+}