@deepfuture/dui-components 0.0.1

package/sidebar/sidebar-group-label.d.ts

@@ -0,0 +1,17 @@
+/** Ported from original DUI: deep-future-app/app/client/components/dui/sidebar */
+import { LitElement, type TemplateResult } from "lit";
+/**
+ * `<dui-sidebar-group-label>` — Heading for a sidebar group.
+ *
+ * Automatically hides (with opacity transition) when the sidebar is
+ * in icon-collapsed mode.
+ *
+ * @slot - Label text.
+ */
+export declare class DuiSidebarGroupLabel extends LitElement {
+    #private;
+    static tagName: "dui-sidebar-group-label";
+    static styles: import("lit").CSSResult[];
+    updated(): void;
+    render(): TemplateResult;
+}

package/sidebar/sidebar-group-label.js

@@ -0,0 +1,49 @@
+/** Ported from original DUI: deep-future-app/app/client/components/dui/sidebar */
+import { css, html, LitElement } from "lit";
+import { ContextConsumer } from "@lit/context";
+import { base } from "@deepfuture/dui-core/base";
+import { sidebarContext } from "./sidebar-context.js";
+const styles = css `
+  :host {
+    display: flex;
+    align-items: center;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+  }
+
+  :host([data-icon-collapsed]) {
+    opacity: 0;
+  }
+`;
+/**
+ * `<dui-sidebar-group-label>` — Heading for a sidebar group.
+ *
+ * Automatically hides (with opacity transition) when the sidebar is
+ * in icon-collapsed mode.
+ *
+ * @slot - Label text.
+ */
+export class DuiSidebarGroupLabel extends LitElement {
+    static { this.tagName = "dui-sidebar-group-label"; }
+    static { this.styles = [base, styles]; }
+    #ctx = new ContextConsumer(this, {
+        context: sidebarContext,
+        subscribe: true,
+    });
+    get #isIconCollapsed() {
+        const ctx = this.#ctx.value;
+        return ctx?.collapsible === "icon" && ctx?.state === "collapsed";
+    }
+    updated() {
+        if (this.#isIconCollapsed) {
+            this.setAttribute("data-icon-collapsed", "");
+        }
+        else {
+            this.removeAttribute("data-icon-collapsed");
+        }
+    }
+    render() {
+        return html `<slot></slot>`;
+    }
+}

package/sidebar/sidebar-group.d.ts

@@ -0,0 +1,15 @@
+/** Ported from original DUI: deep-future-app/app/client/components/dui/sidebar */
+import { LitElement, type TemplateResult } from "lit";
+/**
+ * `<dui-sidebar-group>` — Section container within the sidebar.
+ *
+ * Groups related menu items with an optional label.
+ *
+ * @slot label - Optional group label (use `<dui-sidebar-group-label>`).
+ * @slot - Default slot for group content (menus, items, etc.).
+ */
+export declare class DuiSidebarGroup extends LitElement {
+    static tagName: "dui-sidebar-group";
+    static styles: import("lit").CSSResult[];
+    render(): TemplateResult;
+}

package/sidebar/sidebar-group.js

@@ -0,0 +1,29 @@
+/** Ported from original DUI: deep-future-app/app/client/components/dui/sidebar */
+import { css, html, LitElement } from "lit";
+import { base } from "@deepfuture/dui-core/base";
+const styles = css `
+  :host {
+    display: flex;
+    flex-direction: column;
+    position: relative;
+    overflow: hidden;
+  }
+`;
+/**
+ * `<dui-sidebar-group>` — Section container within the sidebar.
+ *
+ * Groups related menu items with an optional label.
+ *
+ * @slot label - Optional group label (use `<dui-sidebar-group-label>`).
+ * @slot - Default slot for group content (menus, items, etc.).
+ */
+export class DuiSidebarGroup extends LitElement {
+    static { this.tagName = "dui-sidebar-group"; }
+    static { this.styles = [base, styles]; }
+    render() {
+        return html `
+      <slot name="label"></slot>
+      <slot></slot>
+    `;
+    }
+}

package/sidebar/sidebar-header.d.ts

@@ -0,0 +1,12 @@
+/** Ported from original DUI: deep-future-app/app/client/components/dui/sidebar */
+import { LitElement, type TemplateResult } from "lit";
+/**
+ * `<dui-sidebar-header>` — Top section of the sidebar.
+ *
+ * @slot - Default slot for header content (logo, title, etc.).
+ */
+export declare class DuiSidebarHeader extends LitElement {
+    static tagName: "dui-sidebar-header";
+    static styles: import("lit").CSSResult[];
+    render(): TemplateResult;
+}

package/sidebar/sidebar-header.js

@@ -0,0 +1,21 @@
+/** Ported from original DUI: deep-future-app/app/client/components/dui/sidebar */
+import { css, html, LitElement } from "lit";
+import { base } from "@deepfuture/dui-core/base";
+const styles = css `
+  :host {
+    display: flex;
+    flex-direction: column;
+  }
+`;
+/**
+ * `<dui-sidebar-header>` — Top section of the sidebar.
+ *
+ * @slot - Default slot for header content (logo, title, etc.).
+ */
+export class DuiSidebarHeader extends LitElement {
+    static { this.tagName = "dui-sidebar-header"; }
+    static { this.styles = [base, styles]; }
+    render() {
+        return html `<slot></slot>`;
+    }
+}

package/sidebar/sidebar-inset.d.ts

@@ -0,0 +1,15 @@
+/** Ported from original DUI: deep-future-app/app/client/components/dui/sidebar */
+import { LitElement, type TemplateResult } from "lit";
+/**
+ * `<dui-sidebar-inset>` — Content wrapper adjacent to the sidebar.
+ *
+ * Fills the remaining space next to the sidebar. Provides a container
+ * query context for responsive content.
+ *
+ * @slot - Default slot for main page content.
+ */
+export declare class DuiSidebarInset extends LitElement {
+    static tagName: "dui-sidebar-inset";
+    static styles: import("lit").CSSResult[];
+    render(): TemplateResult;
+}

package/sidebar/sidebar-inset.js

@@ -0,0 +1,29 @@
+/** Ported from original DUI: deep-future-app/app/client/components/dui/sidebar */
+import { css, html, LitElement } from "lit";
+import { base } from "@deepfuture/dui-core/base";
+const styles = css `
+  :host {
+    display: flex;
+    flex-direction: column;
+    flex: 1;
+    min-width: 0;
+    position: relative;
+    overflow: hidden;
+    container-type: size;
+  }
+`;
+/**
+ * `<dui-sidebar-inset>` — Content wrapper adjacent to the sidebar.
+ *
+ * Fills the remaining space next to the sidebar. Provides a container
+ * query context for responsive content.
+ *
+ * @slot - Default slot for main page content.
+ */
+export class DuiSidebarInset extends LitElement {
+    static { this.tagName = "dui-sidebar-inset"; }
+    static { this.styles = [base, styles]; }
+    render() {
+        return html `<slot></slot>`;
+    }
+}

package/sidebar/sidebar-menu-button.d.ts

@@ -0,0 +1,31 @@
+/** Ported from original DUI: deep-future-app/app/client/components/dui/sidebar */
+import { LitElement, type TemplateResult } from "lit";
+export type SidebarMenuButtonSize = "default" | "sm" | "lg";
+/**
+ * `<dui-sidebar-menu-button>` — Interactive button or link within a sidebar menu.
+ *
+ * Renders as a `<button>` by default, or an `<a>` when `href` is set.
+ * Supports icon-collapsed mode where only the icon is visible, with an
+ * optional tooltip.
+ *
+ * @slot icon - Icon slot, shown before the label.
+ * @slot - Default slot for label text.
+ * @slot suffix - Suffix slot, shown after the label.
+ * @fires spa-navigate - Fired on normal link clicks. Detail: { href: string }
+ */
+export declare class DuiSidebarMenuButton extends LitElement {
+    #private;
+    static tagName: "dui-sidebar-menu-button";
+    static styles: import("lit").CSSResult[];
+    /** Size variant for the button. */
+    accessor size: SidebarMenuButtonSize;
+    /** Whether the button is in active/selected state. */
+    accessor active: boolean;
+    /** Whether the button is disabled. */
+    accessor disabled: boolean;
+    /** Tooltip text shown when sidebar is icon-collapsed. */
+    accessor tooltip: string;
+    /** When set, renders as an anchor tag instead of a button. */
+    accessor href: string | undefined;
+    render(): TemplateResult;
+}

package/sidebar/sidebar-menu-button.js

@@ -0,0 +1,201 @@
+/** Ported from original DUI: deep-future-app/app/client/components/dui/sidebar */
+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 { ContextConsumer } from "@lit/context";
+import { base } from "@deepfuture/dui-core/base";
+import { sidebarContext } from "./sidebar-context.js";
+const styles = css `
+  :host {
+    display: block;
+  }
+
+  .Row {
+    display: flex;
+    align-items: center;
+    overflow: hidden;
+  }
+
+  .Button {
+    box-sizing: border-box;
+    display: flex;
+    flex: 1;
+    min-width: 0;
+    align-items: center;
+    height: 100%;
+    border: none;
+    border-radius: 0;
+    background: transparent;
+    text-align: left;
+    text-decoration: none;
+    white-space: nowrap;
+    overflow: hidden;
+    cursor: pointer;
+    user-select: none;
+    font: inherit;
+    color: inherit;
+    padding: 0;
+  }
+
+  .Button:focus-visible {
+    outline: none;
+  }
+
+  .Label {
+    flex: 1;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+  .Suffix {
+    flex-shrink: 0;
+  }
+
+  .Row[data-icon-collapsed] {
+    justify-content: center;
+  }
+
+  .Row[data-icon-collapsed] .Label,
+  .Row[data-icon-collapsed] .Suffix {
+    display: none;
+  }
+
+  :host([disabled]) .Button {
+    pointer-events: none;
+  }
+`;
+/**
+ * `<dui-sidebar-menu-button>` — Interactive button or link within a sidebar menu.
+ *
+ * Renders as a `<button>` by default, or an `<a>` when `href` is set.
+ * Supports icon-collapsed mode where only the icon is visible, with an
+ * optional tooltip.
+ *
+ * @slot icon - Icon slot, shown before the label.
+ * @slot - Default slot for label text.
+ * @slot suffix - Suffix slot, shown after the label.
+ * @fires spa-navigate - Fired on normal link clicks. Detail: { href: string }
+ */
+export class DuiSidebarMenuButton extends LitElement {
+    static { this.tagName = "dui-sidebar-menu-button"; }
+    static { this.styles = [base, styles]; }
+    #size_accessor_storage = "default";
+    /** Size variant for the button. */
+    get size() { return this.#size_accessor_storage; }
+    set size(value) { this.#size_accessor_storage = value; }
+    #active_accessor_storage = false;
+    /** Whether the button is in active/selected state. */
+    get active() { return this.#active_accessor_storage; }
+    set active(value) { this.#active_accessor_storage = value; }
+    #disabled_accessor_storage = false;
+    /** Whether the button is disabled. */
+    get disabled() { return this.#disabled_accessor_storage; }
+    set disabled(value) { this.#disabled_accessor_storage = value; }
+    #tooltip_accessor_storage = "";
+    /** Tooltip text shown when sidebar is icon-collapsed. */
+    get tooltip() { return this.#tooltip_accessor_storage; }
+    set tooltip(value) { this.#tooltip_accessor_storage = value; }
+    #href_accessor_storage = undefined;
+    /** When set, renders as an anchor tag instead of a button. */
+    get href() { return this.#href_accessor_storage; }
+    set href(value) { this.#href_accessor_storage = value; }
+    #ctx = new ContextConsumer(this, {
+        context: sidebarContext,
+        subscribe: true,
+    });
+    get #isIconCollapsed() {
+        const ctx = this.#ctx.value;
+        return ctx?.collapsible === "icon" && ctx?.state === "collapsed";
+    }
+    #onLinkClick = (event) => {
+        if (this.disabled) {
+            event.preventDefault();
+            return;
+        }
+        if (this.href &&
+            !(event.metaKey || event.ctrlKey || event.shiftKey || event.altKey)) {
+            event.preventDefault();
+            this.dispatchEvent(new CustomEvent("spa-navigate", {
+                detail: { href: this.href },
+                bubbles: true,
+                composed: true,
+            }));
+        }
+    };
+    #renderButton() {
+        return html `
+      <button
+        class="Button"
+        ?disabled=${this.disabled}
+        ?data-active=${this.active}
+      >
+        <slot name="icon"></slot>
+        <span class="Label"><slot></slot></span>
+        <span class="Suffix"><slot name="suffix"></slot></span>
+      </button>
+    `;
+    }
+    #renderLink() {
+        return html `
+      <a
+        class="Button"
+        href=${this.href ?? nothing}
+        aria-disabled=${this.disabled || nothing}
+        ?data-active=${this.active}
+        @click=${this.#onLinkClick}
+      >
+        <slot name="icon"></slot>
+        <span class="Label"><slot></slot></span>
+        <span class="Suffix"><slot name="suffix"></slot></span>
+      </a>
+    `;
+    }
+    #renderContent() {
+        const iconCollapsed = this.#isIconCollapsed;
+        return html `
+      <div
+        class="Row"
+        ?data-icon-collapsed=${iconCollapsed}
+        ?data-active=${this.active}
+      >
+        ${this.href !== undefined ? this.#renderLink() : this.#renderButton()}
+      </div>
+    `;
+    }
+    render() {
+        const iconCollapsed = this.#isIconCollapsed;
+        if (iconCollapsed && this.tooltip) {
+            return html `
+        <dui-tooltip>
+          <dui-tooltip-trigger>
+            ${this.#renderContent()}
+          </dui-tooltip-trigger>
+          <dui-tooltip-popup side="right">
+            ${this.tooltip}
+          </dui-tooltip-popup>
+        </dui-tooltip>
+      `;
+        }
+        return this.#renderContent();
+    }
+}
+__decorate([
+    property({ reflect: true })
+], DuiSidebarMenuButton.prototype, "size", null);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], DuiSidebarMenuButton.prototype, "active", null);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], DuiSidebarMenuButton.prototype, "disabled", null);
+__decorate([
+    property()
+], DuiSidebarMenuButton.prototype, "tooltip", null);
+__decorate([
+    property()
+], DuiSidebarMenuButton.prototype, "href", null);

package/sidebar/sidebar-menu-item.d.ts

@@ -0,0 +1,12 @@
+/** Ported from original DUI: deep-future-app/app/client/components/dui/sidebar */
+import { LitElement, type TemplateResult } from "lit";
+/**
+ * `<dui-sidebar-menu-item>` — Individual navigation item in a sidebar menu.
+ *
+ * @slot - Default slot for a `<dui-sidebar-menu-button>` or other content.
+ */
+export declare class DuiSidebarMenuItem extends LitElement {
+    static tagName: "dui-sidebar-menu-item";
+    static styles: import("lit").CSSResult[];
+    render(): TemplateResult;
+}

package/sidebar/sidebar-menu-item.js

@@ -0,0 +1,20 @@
+/** Ported from original DUI: deep-future-app/app/client/components/dui/sidebar */
+import { css, html, LitElement } from "lit";
+import { base } from "@deepfuture/dui-core/base";
+const styles = css `
+  :host {
+    display: list-item;
+  }
+`;
+/**
+ * `<dui-sidebar-menu-item>` — Individual navigation item in a sidebar menu.
+ *
+ * @slot - Default slot for a `<dui-sidebar-menu-button>` or other content.
+ */
+export class DuiSidebarMenuItem extends LitElement {
+    static { this.tagName = "dui-sidebar-menu-item"; }
+    static { this.styles = [base, styles]; }
+    render() {
+        return html `<slot></slot>`;
+    }
+}

package/sidebar/sidebar-menu.d.ts

@@ -0,0 +1,14 @@
+/** Ported from original DUI: deep-future-app/app/client/components/dui/sidebar */
+import { LitElement, type TemplateResult } from "lit";
+/**
+ * `<dui-sidebar-menu>` — Navigation list within a sidebar group.
+ *
+ * Renders a semantic `<ul>` for menu items.
+ *
+ * @slot - Default slot for `<dui-sidebar-menu-item>` elements.
+ */
+export declare class DuiSidebarMenu extends LitElement {
+    static tagName: "dui-sidebar-menu";
+    static styles: import("lit").CSSResult[];
+    render(): TemplateResult;
+}

package/sidebar/sidebar-menu.js

@@ -0,0 +1,30 @@
+/** Ported from original DUI: deep-future-app/app/client/components/dui/sidebar */
+import { css, html, LitElement } from "lit";
+import { base } from "@deepfuture/dui-core/base";
+const styles = css `
+  .Menu {
+    display: flex;
+    flex-direction: column;
+    list-style: none;
+    margin: 0;
+    padding: 0;
+  }
+`;
+/**
+ * `<dui-sidebar-menu>` — Navigation list within a sidebar group.
+ *
+ * Renders a semantic `<ul>` for menu items.
+ *
+ * @slot - Default slot for `<dui-sidebar-menu-item>` elements.
+ */
+export class DuiSidebarMenu extends LitElement {
+    static { this.tagName = "dui-sidebar-menu"; }
+    static { this.styles = [base, styles]; }
+    render() {
+        return html `
+      <ul class="Menu" role="list">
+        <slot></slot>
+      </ul>
+    `;
+    }
+}

package/sidebar/sidebar-provider.d.ts

@@ -0,0 +1,34 @@
+/** Ported from original DUI: deep-future-app/app/client/components/dui/sidebar */
+import { LitElement, type TemplateResult } from "lit";
+export type SidebarOpenChangeDetail = {
+    open: boolean;
+};
+export declare const openChangeEvent: (detail: SidebarOpenChangeDetail) => CustomEvent<SidebarOpenChangeDetail>;
+/**
+ * `<dui-sidebar-provider>` — Root state manager for the sidebar compound component.
+ *
+ * Manages open/close state, mobile detection, and provides context to all
+ * sidebar sub-components. Wraps the entire layout (sidebar + main content).
+ *
+ * @slot - Default slot for sidebar and content areas.
+ * @fires open-change - Fired when the sidebar opens or closes. Detail: { open: boolean }
+ */
+export declare class DuiSidebarProvider extends LitElement {
+    #private;
+    static tagName: "dui-sidebar-provider";
+    static styles: import("lit").CSSResult[];
+    /** Controls the sidebar open state (controlled mode). */
+    accessor open: boolean | undefined;
+    /** Initial open state for uncontrolled mode. Defaults to true. */
+    accessor defaultOpen: boolean;
+    /** Which side the sidebar appears on. */
+    accessor side: "left" | "right";
+    /** Visual variant of the sidebar. */
+    accessor variant: "sidebar" | "floating" | "inset";
+    /** How the sidebar collapses. */
+    accessor collapsible: "offcanvas" | "icon" | "none";
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    willUpdate(): void;
+    render(): TemplateResult;
+}