@deepfuture/dui-components 0.0.1

package/alert-dialog/alert-dialog-popup.js

@@ -0,0 +1,260 @@
+/** Ported from original DUI: deep-future-app/app/client/components/dui/alert-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 { alertDialogContext } from "./alert-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: 24rem;
+    max-width: calc(100vw - 3rem);
+    overflow: hidden;
+    z-index: 1000;
+    transition-property: opacity, transform;
+  }
+`;
+/**
+ * `<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 class DuiAlertDialogPopup extends LitElement {
+    static { this.tagName = "dui-alert-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; }
+    #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: alertDialogContext,
+        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();
+        }
+    }
+    willUpdate() {
+        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}"
+      ></div>
+      <div
+        part="popup"
+        role="alertdialog"
+        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" })
+], DuiAlertDialogPopup.prototype, "keepMounted", null);
+__decorate([
+    property({ attribute: "initial-focus" })
+], DuiAlertDialogPopup.prototype, "initialFocus", null);
+__decorate([
+    property({ attribute: "final-focus" })
+], DuiAlertDialogPopup.prototype, "finalFocus", null);

package/alert-dialog/alert-dialog-trigger.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-trigger>` — Behavioral wrapper that opens the alert dialog.
+ *
+ * Wraps slotted content and opens the alert dialog on click.
+ *
+ * @slot - Content that triggers the alert dialog (usually a `<dui-button>`).
+ */
+export declare class DuiAlertDialogTrigger extends LitElement {
+    #private;
+    static tagName: "dui-alert-dialog-trigger";
+    static styles: import("lit").CSSResult[];
+    render(): TemplateResult;
+}

package/alert-dialog/alert-dialog-trigger.js

@@ -0,0 +1,52 @@
+/** 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;
+  }
+`;
+const componentStyles = css `
+  .Trigger {
+    display: contents;
+  }
+`;
+/**
+ * `<dui-alert-dialog-trigger>` — Behavioral wrapper that opens the alert dialog.
+ *
+ * Wraps slotted content and opens the alert dialog on click.
+ *
+ * @slot - Content that triggers the alert dialog (usually a `<dui-button>`).
+ */
+export class DuiAlertDialogTrigger extends LitElement {
+    static { this.tagName = "dui-alert-dialog-trigger"; }
+    static { this.styles = [base, hostStyles, componentStyles]; }
+    #ctx = new ContextConsumer(this, {
+        context: alertDialogContext,
+        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/alert-dialog/alert-dialog.d.ts

@@ -0,0 +1,30 @@
+/** Ported from original DUI: deep-future-app/app/client/components/dui/alert-dialog */
+import { LitElement, type TemplateResult } from "lit";
+export type AlertDialogOpenChangeDetail = {
+    open: boolean;
+};
+export declare const openChangeEvent: (detail: AlertDialogOpenChangeDetail) => CustomEvent<AlertDialogOpenChangeDetail>;
+/**
+ * `<dui-alert-dialog>` — Root element for the alert dialog compound component.
+ *
+ * Manages open/close state and provides context to child elements.
+ * Does not render visible DOM — uses `display: contents`.
+ *
+ * Unlike `<dui-dialog>`, alert dialogs do NOT close on backdrop click,
+ * requiring explicit user action to dismiss.
+ *
+ * @slot - Default slot for trigger, popup, and other alert dialog parts.
+ * @fires open-change - Fired when the dialog opens or closes. Detail: { open: boolean }
+ */
+export declare class DuiAlertDialog extends LitElement {
+    #private;
+    static tagName: "dui-alert-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/alert-dialog/alert-dialog.js

@@ -0,0 +1,97 @@
+/** Ported from original DUI: deep-future-app/app/client/components/dui/alert-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-alert-dialog>` — Root element for the alert dialog compound component.
+ *
+ * Manages open/close state and provides context to child elements.
+ * Does not render visible DOM — uses `display: contents`.
+ *
+ * Unlike `<dui-dialog>`, alert dialogs do NOT close on backdrop click,
+ * requiring explicit user action to dismiss.
+ *
+ * @slot - Default slot for trigger, popup, and other alert dialog parts.
+ * @fires open-change - Fired when the dialog opens or closes. Detail: { open: boolean }
+ */
+export class DuiAlertDialog extends LitElement {
+    static { this.tagName = "dui-alert-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-alert-dialog-${this.#instanceId}`;
+    #triggerId = `dui-alert-trigger-${this.#instanceId}`;
+    #titleId = `dui-alert-title-${this.#instanceId}`;
+    #descriptionId = `dui-alert-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 })
+], DuiAlertDialog.prototype, "open", null);
+__decorate([
+    property({ type: Boolean, attribute: "default-open" })
+], DuiAlertDialog.prototype, "defaultOpen", null);

package/alert-dialog/index.d.ts

@@ -0,0 +1,6 @@
+export { DuiAlertDialog, openChangeEvent } from "./alert-dialog.js";
+export type { AlertDialogOpenChangeDetail } from "./alert-dialog.js";
+export { DuiAlertDialogTrigger } from "./alert-dialog-trigger.js";
+export { DuiAlertDialogPopup } from "./alert-dialog-popup.js";
+export { DuiAlertDialogClose } from "./alert-dialog-close.js";
+export type { AlertDialogContext } from "./alert-dialog-context.js";

package/alert-dialog/index.js

@@ -0,0 +1,4 @@
+export { DuiAlertDialog, openChangeEvent } from "./alert-dialog.js";
+export { DuiAlertDialogTrigger } from "./alert-dialog-trigger.js";
+export { DuiAlertDialogPopup } from "./alert-dialog-popup.js";
+export { DuiAlertDialogClose } from "./alert-dialog-close.js";

package/alert-dialog/register.d.ts

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

package/alert-dialog/register.js

@@ -0,0 +1,16 @@
+import { DuiAlertDialog } from "./alert-dialog.js";
+import { DuiAlertDialogTrigger } from "./alert-dialog-trigger.js";
+import { DuiAlertDialogPopup } from "./alert-dialog-popup.js";
+import { DuiAlertDialogClose } from "./alert-dialog-close.js";
+if (!customElements.get(DuiAlertDialog.tagName)) {
+    customElements.define(DuiAlertDialog.tagName, DuiAlertDialog);
+}
+if (!customElements.get(DuiAlertDialogTrigger.tagName)) {
+    customElements.define(DuiAlertDialogTrigger.tagName, DuiAlertDialogTrigger);
+}
+if (!customElements.get(DuiAlertDialogPopup.tagName)) {
+    customElements.define(DuiAlertDialogPopup.tagName, DuiAlertDialogPopup);
+}
+if (!customElements.get(DuiAlertDialogClose.tagName)) {
+    customElements.define(DuiAlertDialogClose.tagName, DuiAlertDialogClose);
+}

package/all.d.ts

@@ -0,0 +1,86 @@
+/**
+ * Barrel export of all DUI components.
+ * Provides the `allComponents` array for one-shot `applyTheme()` registration.
+ *
+ * @example
+ * ```ts
+ * import { applyTheme } from "@deepfuture/dui-core";
+ * import { defaultTheme } from "@deepfuture/dui-theme-default";
+ * import { allComponents } from "@deepfuture/dui-components/all";
+ *
+ * applyTheme({ theme: defaultTheme, components: allComponents });
+ * ```
+ */
+import type { LitElement } from "lit";
+export { DuiAccordion, DuiAccordionItem } from "./accordion/index.js";
+export type { AccordionContext } from "./accordion/index.js";
+export { DuiAlertDialog, DuiAlertDialogTrigger, DuiAlertDialogPopup, DuiAlertDialogClose, } from "./alert-dialog/index.js";
+export type { AlertDialogOpenChangeDetail, AlertDialogContext, } from "./alert-dialog/index.js";
+export { DuiAvatar } from "./avatar/index.js";
+export type { ImageStatus } from "./avatar/index.js";
+export { DuiBadge } from "./badge/index.js";
+export type { BadgeVariant } from "./badge/index.js";
+export { DuiBreadcrumb, DuiBreadcrumbItem, DuiBreadcrumbLink, DuiBreadcrumbPage, DuiBreadcrumbSeparator, DuiBreadcrumbEllipsis, } from "./breadcrumb/index.js";
+export { DuiButton } from "./button/index.js";
+export type { ButtonSize, ButtonVariant } from "./button/index.js";
+export { DuiCalendar } from "./calendar/index.js";
+export { DuiCenter } from "./center/index.js";
+export { DuiCheckbox, DuiCheckboxGroup } from "./checkbox/index.js";
+export type { CheckboxGroupContext } from "./checkbox/index.js";
+export { DuiCollapsible } from "./collapsible/index.js";
+export { DuiCombobox } from "./combobox/index.js";
+export type { SelectOption as ComboboxSelectOption, ComboboxValueChangeDetail, ComboboxValuesChangeDetail, } from "./combobox/index.js";
+export { DuiCommand, DuiCommandInput, DuiCommandList, DuiCommandGroup, DuiCommandItem, DuiCommandEmpty, DuiCommandSeparator, DuiCommandShortcut, } from "./command/index.js";
+export type { CommandContext, CommandItemEntry } from "./command/index.js";
+export { DuiDataTable } from "./data-table/index.js";
+export type { ColumnDef, SortDirection, SortState, PageState, } from "./data-table/index.js";
+export { DuiDialog, DuiDialogTrigger, DuiDialogPopup, DuiDialogClose, } from "./dialog/index.js";
+export type { DialogOpenChangeDetail, DialogContext } from "./dialog/index.js";
+export { DuiDropzone } from "./dropzone/index.js";
+export type { DropzoneErrorCode, DropzoneRejectionCode, FileRejectionError, RejectedFile, DropzoneDropDetail, DropzoneAcceptedDetail, DropzoneRejectedDetail, DropzoneErrorDetail, } from "./dropzone/index.js";
+export { DuiHstack } from "./hstack/index.js";
+export type { HstackAlignment, HstackJustify } from "./hstack/index.js";
+export { DuiIcon } from "./icon/index.js";
+export { DuiInput } from "./input/index.js";
+export { DuiLink } from "./link/index.js";
+export { DuiMenu, DuiMenuItem } from "./menu/index.js";
+export { DuiMenubar } from "./menubar/index.js";
+export type { MenubarContext } from "./menubar/index.js";
+export { DuiNumberField } from "./number-field/index.js";
+export { DuiPageInset } from "./page-inset/index.js";
+export { DuiPopover, DuiPopoverTrigger, DuiPopoverPopup, DuiPopoverClose, } from "./popover/index.js";
+export type { PopoverOpenChangeDetail, PopoverContext, PopoverSide, } from "./popover/index.js";
+export { DuiPortal } from "./portal/index.js";
+export type { QueryRoot } from "./portal/index.js";
+export { DuiPreviewCard, DuiPreviewCardTrigger, DuiPreviewCardPopup, } from "./preview-card/index.js";
+export type { PreviewCardOpenChangeDetail, PreviewCardContext, PreviewCardSide, } from "./preview-card/index.js";
+export { DuiProgress } from "./progress/index.js";
+export { DuiRadio, DuiRadioGroup } from "./radio/index.js";
+export type { RadioGroupContext } from "./radio/index.js";
+export { DuiScrollArea } from "./scroll-area/index.js";
+export { DuiSelect } from "./select/index.js";
+export type { SelectOption } from "./select/index.js";
+export { DuiSeparator } from "./separator/index.js";
+export { DuiSidebarProvider, DuiSidebar, DuiSidebarTrigger, DuiSidebarContent, DuiSidebarHeader, DuiSidebarFooter, DuiSidebarGroup, DuiSidebarGroupLabel, DuiSidebarMenu, DuiSidebarMenuItem, DuiSidebarMenuButton, DuiSidebarSeparator, DuiSidebarInset, } from "./sidebar/index.js";
+export type { SidebarContext } from "./sidebar/index.js";
+export { DuiSlider } from "./slider/index.js";
+export { DuiSpinner } from "./spinner/index.js";
+export { DuiSwitch } from "./switch/index.js";
+export { DuiTabs, DuiTabsList, DuiTab, DuiTabsPanel, DuiTabsIndicator, } from "./tabs/index.js";
+export type { TabsContext } from "./tabs/index.js";
+export { DuiTextarea } from "./textarea/index.js";
+export type { TextareaResize, TextareaVariant } from "./textarea/index.js";
+export { DuiToggle, DuiToggleGroup } from "./toggle/index.js";
+export type { ToggleGroupContext } from "./toggle/index.js";
+export { DuiToolbar } from "./toolbar/index.js";
+export { DuiTooltip, DuiTooltipTrigger, DuiTooltipPopup, } from "./tooltip/index.js";
+export type { TooltipContext, TooltipSide } from "./tooltip/index.js";
+export { DuiTrunc } from "./trunc/index.js";
+export { DuiVstack } from "./vstack/index.js";
+/**
+ * All DUI component classes, ready for `applyTheme()`.
+ * Includes every component and sub-component.
+ */
+export declare const allComponents: Array<typeof LitElement & {
+    tagName: string;
+}>;