@deepfuture/dui-components 0.0.1

package/select/select.js

@@ -0,0 +1,404 @@
+/** Ported from original DUI: deep-future-app/app/client/components/dui/select */
+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 { repeat } from "lit/directives/repeat.js";
+import { base } from "@deepfuture/dui-core/base";
+import { customEvent } from "@deepfuture/dui-core/event";
+import { FloatingPortalController } from "@deepfuture/dui-core/floating-portal-controller";
+export const valueChangeEvent = customEvent("value-change", { bubbles: true, composed: true });
+/** Structural styles only — layout CSS. */
+const hostStyles = css `
+  :host {
+    display: block;
+  }
+`;
+const componentStyles = css `
+  .Trigger {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    width: 100%;
+    cursor: pointer;
+    user-select: none;
+    box-sizing: border-box;
+    transition-property: border-color, box-shadow, background, filter, transform;
+  }
+
+  .Trigger[data-disabled] {
+    cursor: not-allowed;
+  }
+
+  .Value {
+    flex: 1;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .Icon {
+    flex-shrink: 0;
+  }
+`;
+/** 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));
+    }
+
+    .Listbox {
+      padding: var(--space-1);
+    }
+
+    .Item {
+      display: flex;
+      align-items: center;
+      gap: var(--space-2);
+      padding: var(--space-1_5) var(--space-2);
+      border-radius: var(--radius-sm);
+      font-size: var(--font-size-sm);
+      font-family: var(--font-sans);
+      color: var(--popover-foreground);
+      cursor: pointer;
+    }
+
+    .Item:hover,
+    .Item[data-highlighted] {
+      background: var(--secondary);
+      color: var(--foreground);
+    }
+
+    .Item[data-selected] {
+      font-weight: var(--font-weight-medium);
+    }
+
+    .Item[data-disabled] {
+      opacity: 0.5;
+      cursor: not-allowed;
+    }
+
+    .ItemIndicator {
+      flex-shrink: 0;
+      width: var(--space-3_5);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+
+    .ItemIndicator dui-icon {
+      --icon-size: var(--space-3_5);
+    }
+
+    .ItemText {
+      flex: 1;
+    }
+  `,
+];
+/**
+ * `<dui-select>` — A dropdown select for choosing from a list of options.
+ *
+ * @csspart trigger - The trigger button.
+ * @csspart value - The displayed value text.
+ * @fires value-change - Fired when the selected value changes.
+ *   Detail: { value: string, option: SelectOption }
+ */
+export class DuiSelect extends LitElement {
+    static { this.tagName = "dui-select"; }
+    static { this.styles = [base, hostStyles, componentStyles]; }
+    #options_accessor_storage = [];
+    /** The available options. */
+    get options() { return this.#options_accessor_storage; }
+    set options(value) { this.#options_accessor_storage = value; }
+    #value_accessor_storage = "";
+    /** Currently selected value. */
+    get value() { return this.#value_accessor_storage; }
+    set value(value) { this.#value_accessor_storage = value; }
+    #placeholder_accessor_storage = "Select...";
+    /** Placeholder text shown when no value is selected. */
+    get placeholder() { return this.#placeholder_accessor_storage; }
+    set placeholder(value) { this.#placeholder_accessor_storage = value; }
+    #disabled_accessor_storage = false;
+    /** Whether the select is disabled. */
+    get disabled() { return this.#disabled_accessor_storage; }
+    set disabled(value) { this.#disabled_accessor_storage = value; }
+    #name_accessor_storage = "";
+    /** Name for form submission. */
+    get name() { return this.#name_accessor_storage; }
+    set name(value) { this.#name_accessor_storage = value; }
+    #ctx_accessor_storage;
+    get #ctx() { return this.#ctx_accessor_storage; }
+    set #ctx(value) { this.#ctx_accessor_storage = value; }
+    #highlightedIndex_accessor_storage = -1;
+    get #highlightedIndex() { return this.#highlightedIndex_accessor_storage; }
+    set #highlightedIndex(value) { this.#highlightedIndex_accessor_storage = value; }
+    #triggerId = `select-trigger-${crypto.randomUUID().slice(0, 8)}`;
+    #listboxId = `select-listbox-${crypto.randomUUID().slice(0, 8)}`;
+    #popup = new FloatingPortalController(this, {
+        getAnchor: () => this.shadowRoot?.querySelector(".Trigger"),
+        styles: portalPopupStyles,
+        onOpen: () => {
+            this.#highlightedIndex = this.#selectedIndex;
+        },
+        onClose: () => {
+            this.#highlightedIndex = -1;
+            this.#ctx?.markTouched();
+        },
+        renderPopup: (portal) => {
+            return html `
+        <div
+          class="Popup"
+          ?data-starting-style="${portal.isStarting}"
+          ?data-ending-style="${portal.isEnding}"
+        >
+          <div
+            class="Listbox"
+            id="${this.#listboxId}"
+            role="listbox"
+            aria-labelledby="${this.#ctx?.labelId ?? ""}"
+            @mousedown="${this.#onListMouseDown}"
+          >
+            ${repeat(this.options, (option) => option.value, this.#renderItem)}
+          </div>
+        </div>
+      `;
+        },
+    });
+    // ---- Computed ----
+    get #isDisabled() {
+        return this.disabled || (this.#ctx?.disabled ?? false);
+    }
+    get #isInvalid() {
+        return this.#ctx?.invalid ?? false;
+    }
+    get #selectedOption() {
+        return this.options.find((o) => o.value === this.value);
+    }
+    get #selectedIndex() {
+        return this.options.findIndex((o) => o.value === this.value);
+    }
+    get #displayValue() {
+        return this.#selectedOption?.label ?? "";
+    }
+    // ---- Event handlers ----
+    #onTriggerClick = (event) => {
+        event.stopPropagation();
+        if (this.#isDisabled)
+            return;
+        if (this.#popup.isOpen) {
+            this.#popup.close();
+        }
+        else {
+            this.#popup.open();
+        }
+    };
+    #onTriggerKeyDown = (event) => {
+        if (this.#isDisabled)
+            return;
+        switch (event.key) {
+            case "Enter":
+            case " ": {
+                event.preventDefault();
+                if (this.#popup.isOpen) {
+                    const option = this.options[this.#highlightedIndex];
+                    if (option && !option.disabled) {
+                        this.#selectOption(option);
+                    }
+                }
+                else {
+                    this.#popup.open();
+                }
+                break;
+            }
+            case "ArrowDown": {
+                event.preventDefault();
+                if (!this.#popup.isOpen) {
+                    this.#popup.open();
+                }
+                else {
+                    this.#highlightedIndex = this.#nextEnabledIndex(this.#highlightedIndex, 1);
+                }
+                break;
+            }
+            case "ArrowUp": {
+                event.preventDefault();
+                if (!this.#popup.isOpen) {
+                    this.#popup.open();
+                }
+                else {
+                    this.#highlightedIndex = this.#nextEnabledIndex(this.#highlightedIndex, -1);
+                }
+                break;
+            }
+            case "Home": {
+                if (this.#popup.isOpen) {
+                    event.preventDefault();
+                    this.#highlightedIndex = this.#nextEnabledIndex(-1, 1);
+                }
+                break;
+            }
+            case "End": {
+                if (this.#popup.isOpen) {
+                    event.preventDefault();
+                    this.#highlightedIndex = this.#nextEnabledIndex(this.options.length, -1);
+                }
+                break;
+            }
+            case "Escape": {
+                if (this.#popup.isOpen) {
+                    event.preventDefault();
+                    this.#popup.close();
+                    this.#focusTrigger();
+                }
+                break;
+            }
+            case "Tab": {
+                if (this.#popup.isOpen) {
+                    this.#popup.close();
+                }
+                break;
+            }
+        }
+    };
+    #onListMouseDown = (event) => {
+        event.preventDefault();
+    };
+    #onItemClick = (option) => {
+        if (option.disabled)
+            return;
+        this.#selectOption(option);
+    };
+    #onItemMouseEnter = (index) => {
+        if (!this.options[index]?.disabled) {
+            this.#highlightedIndex = index;
+        }
+    };
+    // ---- Selection ----
+    #selectOption(option) {
+        this.value = option.value;
+        this.#ctx?.markDirty();
+        this.#ctx?.setFilled(this.value.length > 0);
+        this.dispatchEvent(valueChangeEvent({ value: option.value, option }));
+        this.#popup.close();
+        this.#focusTrigger();
+    }
+    #nextEnabledIndex(current, direction) {
+        const len = this.options.length;
+        let next = current + direction;
+        while (next >= 0 && next < len) {
+            if (!this.options[next].disabled)
+                return next;
+            next += direction;
+        }
+        return current;
+    }
+    #focusTrigger() {
+        const trigger = this.shadowRoot?.querySelector(".Trigger");
+        trigger?.focus();
+    }
+    // ---- Render ----
+    #renderItem = (option, index) => {
+        const isSelected = option.value === this.value;
+        const isHighlighted = index === this.#highlightedIndex;
+        return html `
+      <div
+        class="Item"
+        role="option"
+        id="${this.#listboxId}-option-${index}"
+        aria-selected="${isSelected}"
+        ?data-selected="${isSelected}"
+        ?data-highlighted="${isHighlighted}"
+        ?data-disabled="${option.disabled}"
+        @click="${() => this.#onItemClick(option)}"
+        @mouseenter="${() => this.#onItemMouseEnter(index)}"
+      >
+        <span class="ItemIndicator">
+          ${isSelected
+            ? html `<dui-icon><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6 9 17l-5-5"/></svg></dui-icon>`
+            : nothing}
+        </span>
+        <span class="ItemText">${option.label}</span>
+      </div>
+    `;
+    };
+    render() {
+        const hasValue = this.value !== "" && this.#selectedOption != null;
+        return html `
+      <div
+        class="Trigger"
+        part="trigger"
+        id="${this.#triggerId}"
+        role="combobox"
+        tabindex="${this.#isDisabled ? -1 : 0}"
+        aria-haspopup="listbox"
+        aria-expanded="${this.#popup.isOpen}"
+        aria-controls="${this.#listboxId}"
+        aria-activedescendant="${this.#highlightedIndex >= 0
+            ? `${this.#listboxId}-option-${this.#highlightedIndex}`
+            : nothing}"
+        aria-labelledby="${this.#ctx?.labelId ?? ""}"
+        aria-invalid="${this.#isInvalid}"
+        ?data-disabled="${this.#isDisabled}"
+        ?data-invalid="${this.#isInvalid}"
+        ?data-open="${this.#popup.isOpen}"
+        @click="${this.#onTriggerClick}"
+        @keydown="${this.#onTriggerKeyDown}"
+        @focus="${() => this.#ctx?.setFocused(true)}"
+        @blur="${() => this.#ctx?.setFocused(false)}"
+      >
+        <span
+          class="Value"
+          part="value"
+          ?data-placeholder="${!hasValue}"
+        >
+          ${hasValue ? this.#displayValue : this.placeholder}
+        </span>
+        <span class="Icon">
+          <dui-icon><svg xmlns="http://www.w3.org/2000/svg" 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></dui-icon>
+        </span>
+      </div>
+
+      ${this.name
+            ? html `<input type="hidden" name="${this.name}" .value="${this.value}" />`
+            : nothing}
+    `;
+    }
+}
+__decorate([
+    property({ attribute: false })
+], DuiSelect.prototype, "options", null);
+__decorate([
+    property({ type: String })
+], DuiSelect.prototype, "value", null);
+__decorate([
+    property({ type: String })
+], DuiSelect.prototype, "placeholder", null);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], DuiSelect.prototype, "disabled", null);
+__decorate([
+    property({ type: String })
+], DuiSelect.prototype, "name", null);

package/separator/index.d.ts

@@ -0,0 +1 @@
+export { DuiSeparator } from "./separator.js";

package/separator/index.js

@@ -0,0 +1 @@
+export { DuiSeparator } from "./separator.js";

package/separator/register.d.ts

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

package/separator/register.js

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

package/separator/separator.d.ts

@@ -0,0 +1,12 @@
+import { LitElement, type TemplateResult } from "lit";
+/**
+ * `<dui-separator>` — A visual divider between content sections.
+ *
+ * @csspart root - The separator element.
+ */
+export declare class DuiSeparator extends LitElement {
+    static tagName: "dui-separator";
+    static styles: import("lit").CSSResult[];
+    accessor orientation: "horizontal" | "vertical";
+    render(): TemplateResult;
+}

package/separator/separator.js

@@ -0,0 +1,50 @@
+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;
+  }
+
+  :host([orientation="vertical"]) {
+    display: inline-block;
+    align-self: stretch;
+  }
+
+  [part="root"] {
+    border: none;
+    margin: 0;
+    padding: 0;
+  }
+`;
+/**
+ * `<dui-separator>` — A visual divider between content sections.
+ *
+ * @csspart root - The separator element.
+ */
+export class DuiSeparator extends LitElement {
+    static { this.tagName = "dui-separator"; }
+    static { this.styles = [base, styles]; }
+    #orientation_accessor_storage = "horizontal";
+    get orientation() { return this.#orientation_accessor_storage; }
+    set orientation(value) { this.#orientation_accessor_storage = value; }
+    render() {
+        return html `
+      <div
+        part="root"
+        role="separator"
+        aria-orientation="${this.orientation}"
+      ></div>
+    `;
+    }
+}
+__decorate([
+    property({ reflect: true })
+], DuiSeparator.prototype, "orientation", null);

package/sidebar/index.d.ts

@@ -0,0 +1,16 @@
+export { DuiSidebarProvider, openChangeEvent } from "./sidebar-provider.js";
+export type { SidebarOpenChangeDetail } from "./sidebar-provider.js";
+export { DuiSidebar } from "./sidebar.js";
+export { DuiSidebarTrigger } from "./sidebar-trigger.js";
+export { DuiSidebarContent } from "./sidebar-content.js";
+export { DuiSidebarHeader } from "./sidebar-header.js";
+export { DuiSidebarFooter } from "./sidebar-footer.js";
+export { DuiSidebarGroup } from "./sidebar-group.js";
+export { DuiSidebarGroupLabel } from "./sidebar-group-label.js";
+export { DuiSidebarMenu } from "./sidebar-menu.js";
+export { DuiSidebarMenuItem } from "./sidebar-menu-item.js";
+export { DuiSidebarMenuButton } from "./sidebar-menu-button.js";
+export type { SidebarMenuButtonSize } from "./sidebar-menu-button.js";
+export { DuiSidebarSeparator } from "./sidebar-separator.js";
+export { DuiSidebarInset } from "./sidebar-inset.js";
+export type { SidebarContext } from "./sidebar-context.js";

package/sidebar/index.js

@@ -0,0 +1,13 @@
+export { DuiSidebarProvider, openChangeEvent } from "./sidebar-provider.js";
+export { DuiSidebar } from "./sidebar.js";
+export { DuiSidebarTrigger } from "./sidebar-trigger.js";
+export { DuiSidebarContent } from "./sidebar-content.js";
+export { DuiSidebarHeader } from "./sidebar-header.js";
+export { DuiSidebarFooter } from "./sidebar-footer.js";
+export { DuiSidebarGroup } from "./sidebar-group.js";
+export { DuiSidebarGroupLabel } from "./sidebar-group-label.js";
+export { DuiSidebarMenu } from "./sidebar-menu.js";
+export { DuiSidebarMenuItem } from "./sidebar-menu-item.js";
+export { DuiSidebarMenuButton } from "./sidebar-menu-button.js";
+export { DuiSidebarSeparator } from "./sidebar-separator.js";
+export { DuiSidebarInset } from "./sidebar-inset.js";

package/sidebar/register.d.ts

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

package/sidebar/register.js

@@ -0,0 +1,52 @@
+import { DuiSidebarProvider } from "./sidebar-provider.js";
+import { DuiSidebar } from "./sidebar.js";
+import { DuiSidebarTrigger } from "./sidebar-trigger.js";
+import { DuiSidebarContent } from "./sidebar-content.js";
+import { DuiSidebarHeader } from "./sidebar-header.js";
+import { DuiSidebarFooter } from "./sidebar-footer.js";
+import { DuiSidebarGroup } from "./sidebar-group.js";
+import { DuiSidebarGroupLabel } from "./sidebar-group-label.js";
+import { DuiSidebarMenu } from "./sidebar-menu.js";
+import { DuiSidebarMenuItem } from "./sidebar-menu-item.js";
+import { DuiSidebarMenuButton } from "./sidebar-menu-button.js";
+import { DuiSidebarSeparator } from "./sidebar-separator.js";
+import { DuiSidebarInset } from "./sidebar-inset.js";
+if (!customElements.get(DuiSidebarProvider.tagName)) {
+    customElements.define(DuiSidebarProvider.tagName, DuiSidebarProvider);
+}
+if (!customElements.get(DuiSidebar.tagName)) {
+    customElements.define(DuiSidebar.tagName, DuiSidebar);
+}
+if (!customElements.get(DuiSidebarTrigger.tagName)) {
+    customElements.define(DuiSidebarTrigger.tagName, DuiSidebarTrigger);
+}
+if (!customElements.get(DuiSidebarContent.tagName)) {
+    customElements.define(DuiSidebarContent.tagName, DuiSidebarContent);
+}
+if (!customElements.get(DuiSidebarHeader.tagName)) {
+    customElements.define(DuiSidebarHeader.tagName, DuiSidebarHeader);
+}
+if (!customElements.get(DuiSidebarFooter.tagName)) {
+    customElements.define(DuiSidebarFooter.tagName, DuiSidebarFooter);
+}
+if (!customElements.get(DuiSidebarGroup.tagName)) {
+    customElements.define(DuiSidebarGroup.tagName, DuiSidebarGroup);
+}
+if (!customElements.get(DuiSidebarGroupLabel.tagName)) {
+    customElements.define(DuiSidebarGroupLabel.tagName, DuiSidebarGroupLabel);
+}
+if (!customElements.get(DuiSidebarMenu.tagName)) {
+    customElements.define(DuiSidebarMenu.tagName, DuiSidebarMenu);
+}
+if (!customElements.get(DuiSidebarMenuItem.tagName)) {
+    customElements.define(DuiSidebarMenuItem.tagName, DuiSidebarMenuItem);
+}
+if (!customElements.get(DuiSidebarMenuButton.tagName)) {
+    customElements.define(DuiSidebarMenuButton.tagName, DuiSidebarMenuButton);
+}
+if (!customElements.get(DuiSidebarSeparator.tagName)) {
+    customElements.define(DuiSidebarSeparator.tagName, DuiSidebarSeparator);
+}
+if (!customElements.get(DuiSidebarInset.tagName)) {
+    customElements.define(DuiSidebarInset.tagName, DuiSidebarInset);
+}

package/sidebar/sidebar-content.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-content>` — Scrollable content section of the sidebar.
+ *
+ * Wraps its slot in a scroll area to provide overflow scrolling.
+ *
+ * @slot - Default slot for sidebar groups, menus, etc.
+ */
+export declare class DuiSidebarContent extends LitElement {
+    static tagName: "dui-sidebar-content";
+    static styles: import("lit").CSSResult[];
+    render(): TemplateResult;
+}

package/sidebar/sidebar-content.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 `
+  :host {
+    display: flex;
+    flex-direction: column;
+    flex: 1;
+    min-height: 0;
+    overflow: hidden;
+  }
+`;
+/**
+ * `<dui-sidebar-content>` — Scrollable content section of the sidebar.
+ *
+ * Wraps its slot in a scroll area to provide overflow scrolling.
+ *
+ * @slot - Default slot for sidebar groups, menus, etc.
+ */
+export class DuiSidebarContent extends LitElement {
+    static { this.tagName = "dui-sidebar-content"; }
+    static { this.styles = [base, styles]; }
+    render() {
+        return html `
+      <dui-scroll-area>
+        <slot></slot>
+      </dui-scroll-area>
+    `;
+    }
+}

package/sidebar/sidebar-context.d.ts

@@ -0,0 +1,15 @@
+/** Ported from original DUI: deep-future-app/app/client/components/dui/sidebar */
+export type SidebarContext = {
+    readonly state: "expanded" | "collapsed";
+    readonly open: boolean;
+    readonly openMobile: boolean;
+    readonly isMobile: boolean;
+    readonly side: "left" | "right";
+    readonly variant: "sidebar" | "floating" | "inset";
+    readonly collapsible: "offcanvas" | "icon" | "none";
+    readonly setOpen: (open: boolean) => void;
+    readonly toggleSidebar: () => void;
+};
+export declare const sidebarContext: {
+    __context__: SidebarContext;
+};

package/sidebar/sidebar-context.js

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

package/sidebar/sidebar-footer.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-footer>` — Bottom section of the sidebar.
+ *
+ * @slot - Default slot for footer content (user info, settings, etc.).
+ */
+export declare class DuiSidebarFooter extends LitElement {
+    static tagName: "dui-sidebar-footer";
+    static styles: import("lit").CSSResult[];
+    render(): TemplateResult;
+}

package/sidebar/sidebar-footer.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-footer>` — Bottom section of the sidebar.
+ *
+ * @slot - Default slot for footer content (user info, settings, etc.).
+ */
+export class DuiSidebarFooter extends LitElement {
+    static { this.tagName = "dui-sidebar-footer"; }
+    static { this.styles = [base, styles]; }
+    render() {
+        return html `<slot></slot>`;
+    }
+}