@deepfuture/dui-components 0.0.1

package/all.js

@@ -0,0 +1,191 @@
+/**
+ * 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 });
+ * ```
+ */
+// --- Accordion ---
+export { DuiAccordion, DuiAccordionItem } from "./accordion/index.js";
+// --- Alert Dialog ---
+export { DuiAlertDialog, DuiAlertDialogTrigger, DuiAlertDialogPopup, DuiAlertDialogClose, } from "./alert-dialog/index.js";
+// --- Avatar ---
+export { DuiAvatar } from "./avatar/index.js";
+// --- Badge ---
+export { DuiBadge } from "./badge/index.js";
+// --- Breadcrumb ---
+export { DuiBreadcrumb, DuiBreadcrumbItem, DuiBreadcrumbLink, DuiBreadcrumbPage, DuiBreadcrumbSeparator, DuiBreadcrumbEllipsis, } from "./breadcrumb/index.js";
+// --- Button ---
+export { DuiButton } from "./button/index.js";
+// --- Calendar ---
+export { DuiCalendar } from "./calendar/index.js";
+// --- Center ---
+export { DuiCenter } from "./center/index.js";
+// --- Checkbox ---
+export { DuiCheckbox, DuiCheckboxGroup } from "./checkbox/index.js";
+// --- Collapsible ---
+export { DuiCollapsible } from "./collapsible/index.js";
+// --- Combobox ---
+export { DuiCombobox } from "./combobox/index.js";
+// --- Command ---
+export { DuiCommand, DuiCommandInput, DuiCommandList, DuiCommandGroup, DuiCommandItem, DuiCommandEmpty, DuiCommandSeparator, DuiCommandShortcut, } from "./command/index.js";
+// --- Data Table ---
+export { DuiDataTable } from "./data-table/index.js";
+// --- Dialog ---
+export { DuiDialog, DuiDialogTrigger, DuiDialogPopup, DuiDialogClose, } from "./dialog/index.js";
+// --- Dropzone ---
+export { DuiDropzone } from "./dropzone/index.js";
+// --- HStack ---
+export { DuiHstack } from "./hstack/index.js";
+// --- Icon ---
+export { DuiIcon } from "./icon/index.js";
+// --- Input ---
+export { DuiInput } from "./input/index.js";
+// --- Link ---
+export { DuiLink } from "./link/index.js";
+// --- Menu ---
+export { DuiMenu, DuiMenuItem } from "./menu/index.js";
+// --- Menubar ---
+export { DuiMenubar } from "./menubar/index.js";
+// --- Number Field ---
+export { DuiNumberField } from "./number-field/index.js";
+// --- Page Inset ---
+export { DuiPageInset } from "./page-inset/index.js";
+// --- Popover ---
+export { DuiPopover, DuiPopoverTrigger, DuiPopoverPopup, DuiPopoverClose, } from "./popover/index.js";
+// --- Portal ---
+export { DuiPortal } from "./portal/index.js";
+// --- Preview Card ---
+export { DuiPreviewCard, DuiPreviewCardTrigger, DuiPreviewCardPopup, } from "./preview-card/index.js";
+// --- Progress ---
+export { DuiProgress } from "./progress/index.js";
+// --- Radio ---
+export { DuiRadio, DuiRadioGroup } from "./radio/index.js";
+// --- Scroll Area ---
+export { DuiScrollArea } from "./scroll-area/index.js";
+// --- Select ---
+export { DuiSelect } from "./select/index.js";
+// --- Separator ---
+export { DuiSeparator } from "./separator/index.js";
+// --- Sidebar ---
+export { DuiSidebarProvider, DuiSidebar, DuiSidebarTrigger, DuiSidebarContent, DuiSidebarHeader, DuiSidebarFooter, DuiSidebarGroup, DuiSidebarGroupLabel, DuiSidebarMenu, DuiSidebarMenuItem, DuiSidebarMenuButton, DuiSidebarSeparator, DuiSidebarInset, } from "./sidebar/index.js";
+// --- Slider ---
+export { DuiSlider } from "./slider/index.js";
+// --- Spinner ---
+export { DuiSpinner } from "./spinner/index.js";
+// --- Switch ---
+export { DuiSwitch } from "./switch/index.js";
+// --- Tabs ---
+export { DuiTabs, DuiTabsList, DuiTab, DuiTabsPanel, DuiTabsIndicator, } from "./tabs/index.js";
+// --- Textarea ---
+export { DuiTextarea } from "./textarea/index.js";
+// --- Toggle ---
+export { DuiToggle, DuiToggleGroup } from "./toggle/index.js";
+// --- Toolbar ---
+export { DuiToolbar } from "./toolbar/index.js";
+// --- Tooltip ---
+export { DuiTooltip, DuiTooltipTrigger, DuiTooltipPopup, } from "./tooltip/index.js";
+// --- Trunc ---
+export { DuiTrunc } from "./trunc/index.js";
+// --- VStack ---
+export { DuiVstack } from "./vstack/index.js";
+/**
+ * All DUI component classes, ready for `applyTheme()`.
+ * Includes every component and sub-component.
+ */
+export const allComponents = [
+    DuiAccordion,
+    DuiAccordionItem,
+    DuiAlertDialog,
+    DuiAlertDialogTrigger,
+    DuiAlertDialogPopup,
+    DuiAlertDialogClose,
+    DuiAvatar,
+    DuiBadge,
+    DuiBreadcrumb,
+    DuiBreadcrumbItem,
+    DuiBreadcrumbLink,
+    DuiBreadcrumbPage,
+    DuiBreadcrumbSeparator,
+    DuiBreadcrumbEllipsis,
+    DuiButton,
+    DuiCalendar,
+    DuiCenter,
+    DuiCheckbox,
+    DuiCheckboxGroup,
+    DuiCollapsible,
+    DuiCombobox,
+    DuiCommand,
+    DuiCommandInput,
+    DuiCommandList,
+    DuiCommandGroup,
+    DuiCommandItem,
+    DuiCommandEmpty,
+    DuiCommandSeparator,
+    DuiCommandShortcut,
+    DuiDataTable,
+    DuiDialog,
+    DuiDialogTrigger,
+    DuiDialogPopup,
+    DuiDialogClose,
+    DuiDropzone,
+    DuiHstack,
+    DuiIcon,
+    DuiInput,
+    DuiLink,
+    DuiMenu,
+    DuiMenuItem,
+    DuiMenubar,
+    DuiNumberField,
+    DuiPageInset,
+    DuiPopover,
+    DuiPopoverTrigger,
+    DuiPopoverPopup,
+    DuiPopoverClose,
+    DuiPortal,
+    DuiPreviewCard,
+    DuiPreviewCardTrigger,
+    DuiPreviewCardPopup,
+    DuiProgress,
+    DuiRadio,
+    DuiRadioGroup,
+    DuiScrollArea,
+    DuiSelect,
+    DuiSeparator,
+    DuiSidebarProvider,
+    DuiSidebar,
+    DuiSidebarTrigger,
+    DuiSidebarContent,
+    DuiSidebarHeader,
+    DuiSidebarFooter,
+    DuiSidebarGroup,
+    DuiSidebarGroupLabel,
+    DuiSidebarMenu,
+    DuiSidebarMenuItem,
+    DuiSidebarMenuButton,
+    DuiSidebarSeparator,
+    DuiSidebarInset,
+    DuiSlider,
+    DuiSpinner,
+    DuiSwitch,
+    DuiTabs,
+    DuiTabsList,
+    DuiTab,
+    DuiTabsPanel,
+    DuiTabsIndicator,
+    DuiTextarea,
+    DuiToggle,
+    DuiToggleGroup,
+    DuiToolbar,
+    DuiTooltip,
+    DuiTooltipTrigger,
+    DuiTooltipPopup,
+    DuiTrunc,
+    DuiVstack,
+];

package/avatar/avatar.d.ts

@@ -0,0 +1,41 @@
+/** Ported from original DUI: deep-future-app/app/client/components/dui/avatar */
+import { LitElement, type PropertyValues, type TemplateResult } from "lit";
+export type ImageStatus = "idle" | "loading" | "loaded" | "error";
+export declare const loadingStatusChangeEvent: (detail: {
+    status: ImageStatus;
+}) => CustomEvent<{
+    status: ImageStatus;
+}>;
+/**
+ * `<dui-avatar>` — Avatar component with image and fallback support.
+ *
+ * Renders an image when `src` is provided and loads successfully.
+ * Falls back to slotted content (e.g. initials) after an optional delay.
+ *
+ * @slot - Fallback content shown when the image is unavailable.
+ * @csspart root - The avatar container.
+ * @csspart image - The avatar image element.
+ * @csspart fallback - The fallback content container.
+ * @cssprop --avatar-size - Avatar dimensions (width and height). Default: var(--space-12).
+ * @fires loading-status-change - Fired when the image loading status changes. Detail: { status }
+ */
+export declare class DuiAvatar extends LitElement {
+    #private;
+    static tagName: "dui-avatar";
+    static styles: import("lit").CSSResult[];
+    /** Image URL for the avatar. */
+    accessor src: string | undefined;
+    /** Alt text for the avatar image. */
+    accessor alt: string;
+    /** Milliseconds to wait before showing fallback content. */
+    accessor fallbackDelay: number | undefined;
+    /**
+     * Avatar size as a CSS length value (e.g. `"var(--space-8)"`, `"2rem"`).
+     * When set, overrides `--avatar-size` on the host.
+     */
+    accessor size: string | undefined;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    willUpdate(changed: PropertyValues): void;
+    render(): TemplateResult;
+}

package/avatar/avatar.js

@@ -0,0 +1,188 @@
+/** Ported from original DUI: deep-future-app/app/client/components/dui/avatar */
+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 { base } from "@deepfuture/dui-core/base";
+import { customEvent } from "@deepfuture/dui-core/event";
+export const loadingStatusChangeEvent = customEvent("loading-status-change", { bubbles: true, composed: true });
+/** Structural styles only — layout CSS. */
+const styles = css `
+  :host {
+    --avatar-size: var(--space-12);
+    display: inline-block;
+  }
+
+  [part="root"] {
+    display: inline-flex;
+    justify-content: center;
+    align-items: center;
+    vertical-align: middle;
+    user-select: none;
+    overflow: hidden;
+    height: var(--avatar-size);
+    width: var(--avatar-size);
+  }
+
+  [part="image"] {
+    object-fit: cover;
+    height: 100%;
+    width: 100%;
+  }
+
+  [part="fallback"] {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 100%;
+    width: 100%;
+  }
+`;
+/**
+ * `<dui-avatar>` — Avatar component with image and fallback support.
+ *
+ * Renders an image when `src` is provided and loads successfully.
+ * Falls back to slotted content (e.g. initials) after an optional delay.
+ *
+ * @slot - Fallback content shown when the image is unavailable.
+ * @csspart root - The avatar container.
+ * @csspart image - The avatar image element.
+ * @csspart fallback - The fallback content container.
+ * @cssprop --avatar-size - Avatar dimensions (width and height). Default: var(--space-12).
+ * @fires loading-status-change - Fired when the image loading status changes. Detail: { status }
+ */
+export class DuiAvatar extends LitElement {
+    static { this.tagName = "dui-avatar"; }
+    static { this.styles = [base, styles]; }
+    #src_accessor_storage = undefined;
+    /** Image URL for the avatar. */
+    get src() { return this.#src_accessor_storage; }
+    set src(value) { this.#src_accessor_storage = value; }
+    #alt_accessor_storage = "";
+    /** Alt text for the avatar image. */
+    get alt() { return this.#alt_accessor_storage; }
+    set alt(value) { this.#alt_accessor_storage = value; }
+    #fallbackDelay_accessor_storage = undefined;
+    /** Milliseconds to wait before showing fallback content. */
+    get fallbackDelay() { return this.#fallbackDelay_accessor_storage; }
+    set fallbackDelay(value) { this.#fallbackDelay_accessor_storage = value; }
+    #size_accessor_storage = undefined;
+    /**
+     * Avatar size as a CSS length value (e.g. `"var(--space-8)"`, `"2rem"`).
+     * When set, overrides `--avatar-size` on the host.
+     */
+    get size() { return this.#size_accessor_storage; }
+    set size(value) { this.#size_accessor_storage = value; }
+    #imageStatus_accessor_storage = "idle";
+    get #imageStatus() { return this.#imageStatus_accessor_storage; }
+    set #imageStatus(value) { this.#imageStatus_accessor_storage = value; }
+    #delayPassed_accessor_storage = false;
+    get #delayPassed() { return this.#delayPassed_accessor_storage; }
+    set #delayPassed(value) { this.#delayPassed_accessor_storage = value; }
+    #probeImage;
+    #delayTimer;
+    #setImageStatus(status) {
+        this.#imageStatus = status;
+        this.dispatchEvent(loadingStatusChangeEvent({ status }));
+    }
+    #startProbe() {
+        this.#cleanupProbe();
+        if (!this.src) {
+            this.#setImageStatus("error");
+            return;
+        }
+        this.#setImageStatus("loading");
+        const img = new Image();
+        img.onload = () => this.#setImageStatus("loaded");
+        img.onerror = () => this.#setImageStatus("error");
+        img.src = this.src;
+        this.#probeImage = img;
+    }
+    #cleanupProbe() {
+        if (this.#probeImage) {
+            this.#probeImage.onload = null;
+            this.#probeImage.onerror = null;
+            this.#probeImage = undefined;
+        }
+    }
+    #startDelay() {
+        this.#clearDelay();
+        if (this.fallbackDelay === undefined || this.fallbackDelay <= 0) {
+            this.#delayPassed = true;
+            return;
+        }
+        this.#delayPassed = false;
+        this.#delayTimer = setTimeout(() => {
+            this.#delayPassed = true;
+        }, this.fallbackDelay);
+    }
+    #clearDelay() {
+        if (this.#delayTimer !== undefined) {
+            clearTimeout(this.#delayTimer);
+            this.#delayTimer = undefined;
+        }
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this.#startDelay();
+        this.#startProbe();
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        this.#cleanupProbe();
+        this.#clearDelay();
+    }
+    willUpdate(changed) {
+        if (changed.has("size")) {
+            if (this.size) {
+                this.style.setProperty("--avatar-size", this.size);
+            }
+            else {
+                this.style.removeProperty("--avatar-size");
+            }
+        }
+        if (changed.has("src")) {
+            this.#startProbe();
+        }
+        if (changed.has("fallbackDelay")) {
+            this.#startDelay();
+        }
+    }
+    render() {
+        const showImage = this.src && this.#imageStatus === "loaded";
+        const showFallback = !showImage && this.#delayPassed;
+        return html `
+      <span part="root">
+        ${showImage
+            ? html `
+              <img
+                part="image"
+                src="${this.src}"
+                alt="${this.alt}"
+              />
+            `
+            : showFallback
+                ? html `
+                <span part="fallback"><slot></slot></span>
+              `
+                : nothing}
+      </span>
+    `;
+    }
+}
+__decorate([
+    property()
+], DuiAvatar.prototype, "src", null);
+__decorate([
+    property()
+], DuiAvatar.prototype, "alt", null);
+__decorate([
+    property({ type: Number, attribute: "fallback-delay" })
+], DuiAvatar.prototype, "fallbackDelay", null);
+__decorate([
+    property({ reflect: true })
+], DuiAvatar.prototype, "size", null);

package/avatar/index.d.ts

@@ -0,0 +1,2 @@
+export { DuiAvatar, loadingStatusChangeEvent } from "./avatar.js";
+export type { ImageStatus } from "./avatar.js";

package/avatar/index.js

@@ -0,0 +1 @@
+export { DuiAvatar, loadingStatusChangeEvent } from "./avatar.js";

package/avatar/register.d.ts

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

package/avatar/register.js

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

package/badge/badge.d.ts

@@ -0,0 +1,14 @@
+import { LitElement, type TemplateResult } from "lit";
+export type BadgeVariant = "default" | "secondary" | "destructive" | "outline" | "success" | "warning" | "info";
+/**
+ * `<dui-badge>` — A badge/chip component for status indicators and labels.
+ *
+ * @slot - Badge content — text and/or icons.
+ * @csspart root - The badge span element.
+ */
+export declare class DuiBadge extends LitElement {
+    static tagName: "dui-badge";
+    static styles: import("lit").CSSResult[];
+    accessor variant: BadgeVariant;
+    render(): TemplateResult;
+}

package/badge/badge.js

@@ -0,0 +1,43 @@
+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: inline-block;
+  }
+
+  [part="root"] {
+    display: inline-flex;
+    align-items: center;
+  }
+`;
+/**
+ * `<dui-badge>` — A badge/chip component for status indicators and labels.
+ *
+ * @slot - Badge content — text and/or icons.
+ * @csspart root - The badge span element.
+ */
+export class DuiBadge extends LitElement {
+    static { this.tagName = "dui-badge"; }
+    static { this.styles = [base, styles]; }
+    #variant_accessor_storage = "default";
+    get variant() { return this.#variant_accessor_storage; }
+    set variant(value) { this.#variant_accessor_storage = value; }
+    render() {
+        return html `
+      <span part="root">
+        <slot></slot>
+      </span>
+    `;
+    }
+}
+__decorate([
+    property({ reflect: true })
+], DuiBadge.prototype, "variant", null);

package/badge/index.d.ts

@@ -0,0 +1,2 @@
+export { DuiBadge } from "./badge.js";
+export type { BadgeVariant } from "./badge.js";

package/badge/index.js

@@ -0,0 +1 @@
+export { DuiBadge } from "./badge.js";

package/badge/register.d.ts

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

package/badge/register.js

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

package/breadcrumb/breadcrumb-ellipsis.d.ts

@@ -0,0 +1,14 @@
+/** Ported from original DUI: deep-future-app/app/client/components/dui/breadcrumb */
+import { LitElement, type TemplateResult } from "lit";
+/**
+ * `<dui-breadcrumb-ellipsis>` — Collapsed breadcrumb indicator.
+ * Defaults to "\u2026" but can be overridden via slot (e.g., an icon).
+ *
+ * @slot - Custom ellipsis content. Defaults to "\u2026".
+ * @csspart root - The `<span>` element (presentational, aria-hidden).
+ */
+export declare class DuiBreadcrumbEllipsis extends LitElement {
+    static tagName: "dui-breadcrumb-ellipsis";
+    static styles: import("lit").CSSResult[];
+    render(): TemplateResult;
+}

package/breadcrumb/breadcrumb-ellipsis.js

@@ -0,0 +1,39 @@
+/** Ported from original DUI: deep-future-app/app/client/components/dui/breadcrumb */
+import { css, html, LitElement } from "lit";
+import { base } from "@deepfuture/dui-core/base";
+/** Structural styles only — layout CSS. */
+const styles = css `
+  :host {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  [part="root"] {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+`;
+/**
+ * `<dui-breadcrumb-ellipsis>` — Collapsed breadcrumb indicator.
+ * Defaults to "\u2026" but can be overridden via slot (e.g., an icon).
+ *
+ * @slot - Custom ellipsis content. Defaults to "\u2026".
+ * @csspart root - The `<span>` element (presentational, aria-hidden).
+ */
+export class DuiBreadcrumbEllipsis extends LitElement {
+    static { this.tagName = "dui-breadcrumb-ellipsis"; }
+    static { this.styles = [base, styles]; }
+    render() {
+        return html `
+      <span
+        role="presentation"
+        aria-hidden="true"
+        part="root"
+      >
+        <slot>&hellip;</slot>
+      </span>
+    `;
+    }
+}

package/breadcrumb/breadcrumb-item.d.ts

@@ -0,0 +1,13 @@
+/** Ported from original DUI: deep-future-app/app/client/components/dui/breadcrumb */
+import { LitElement, type TemplateResult } from "lit";
+/**
+ * `<dui-breadcrumb-item>` — List item wrapper for a single breadcrumb entry.
+ *
+ * @slot - A breadcrumb link, page, or ellipsis.
+ * @csspart root - The `<li>` element.
+ */
+export declare class DuiBreadcrumbItem extends LitElement {
+    static tagName: "dui-breadcrumb-item";
+    static styles: import("lit").CSSResult[];
+    render(): TemplateResult;
+}

package/breadcrumb/breadcrumb-item.js

@@ -0,0 +1,31 @@
+/** Ported from original DUI: deep-future-app/app/client/components/dui/breadcrumb */
+import { css, html, LitElement } from "lit";
+import { base } from "@deepfuture/dui-core/base";
+/** Structural styles only — layout CSS. */
+const styles = css `
+  :host {
+    display: inline-flex;
+  }
+
+  [part="root"] {
+    display: inline-flex;
+    align-items: center;
+  }
+`;
+/**
+ * `<dui-breadcrumb-item>` — List item wrapper for a single breadcrumb entry.
+ *
+ * @slot - A breadcrumb link, page, or ellipsis.
+ * @csspart root - The `<li>` element.
+ */
+export class DuiBreadcrumbItem extends LitElement {
+    static { this.tagName = "dui-breadcrumb-item"; }
+    static { this.styles = [base, styles]; }
+    render() {
+        return html `
+      <li part="root">
+        <slot></slot>
+      </li>
+    `;
+    }
+}

package/breadcrumb/breadcrumb-link.d.ts

@@ -0,0 +1,14 @@
+/** Ported from original DUI: deep-future-app/app/client/components/dui/breadcrumb */
+import { LitElement, type TemplateResult } from "lit";
+/**
+ * `<dui-breadcrumb-link>` — Styled wrapper for a clickable breadcrumb link.
+ * Consumer slots in their own `<a>` element.
+ *
+ * @slot - An `<a>` element for navigation.
+ * @csspart root - The wrapper `<span>` element.
+ */
+export declare class DuiBreadcrumbLink extends LitElement {
+    static tagName: "dui-breadcrumb-link";
+    static styles: import("lit").CSSResult[];
+    render(): TemplateResult;
+}

package/breadcrumb/breadcrumb-link.js

@@ -0,0 +1,32 @@
+/** Ported from original DUI: deep-future-app/app/client/components/dui/breadcrumb */
+import { css, html, LitElement } from "lit";
+import { base } from "@deepfuture/dui-core/base";
+/** Structural styles only — layout CSS. */
+const styles = css `
+  :host {
+    display: inline-flex;
+  }
+
+  [part="root"] {
+    display: inline-flex;
+    align-items: center;
+  }
+`;
+/**
+ * `<dui-breadcrumb-link>` — Styled wrapper for a clickable breadcrumb link.
+ * Consumer slots in their own `<a>` element.
+ *
+ * @slot - An `<a>` element for navigation.
+ * @csspart root - The wrapper `<span>` element.
+ */
+export class DuiBreadcrumbLink extends LitElement {
+    static { this.tagName = "dui-breadcrumb-link"; }
+    static { this.styles = [base, styles]; }
+    render() {
+        return html `
+      <span part="root">
+        <slot></slot>
+      </span>
+    `;
+    }
+}

package/breadcrumb/breadcrumb-page.d.ts

@@ -0,0 +1,13 @@
+/** Ported from original DUI: deep-future-app/app/client/components/dui/breadcrumb */
+import { LitElement, type TemplateResult } from "lit";
+/**
+ * `<dui-breadcrumb-page>` — Current page indicator (not clickable).
+ *
+ * @slot - The current page label text.
+ * @csspart root - The `<span>` element with `aria-current="page"`.
+ */
+export declare class DuiBreadcrumbPage extends LitElement {
+    static tagName: "dui-breadcrumb-page";
+    static styles: import("lit").CSSResult[];
+    render(): TemplateResult;
+}