@deepfuture/dui-components 0.0.21 → 1.0.0

package/avatar/avatar.js

@@ -1,248 +1,28 @@
-/** Ported from original DUI: deep-future-app/app/client/components/dui/avatar */
-var __esDecorate = (this && this.__esDecorate) || function (ctor, descriptorIn, decorators, contextIn, initializers, extraInitializers) {
-    function accept(f) { if (f !== void 0 && typeof f !== "function") throw new TypeError("Function expected"); return f; }
-    var kind = contextIn.kind, key = kind === "getter" ? "get" : kind === "setter" ? "set" : "value";
-    var target = !descriptorIn && ctor ? contextIn["static"] ? ctor : ctor.prototype : null;
-    var descriptor = descriptorIn || (target ? Object.getOwnPropertyDescriptor(target, contextIn.name) : {});
-    var _, done = false;
-    for (var i = decorators.length - 1; i >= 0; i--) {
-        var context = {};
-        for (var p in contextIn) context[p] = p === "access" ? {} : contextIn[p];
-        for (var p in contextIn.access) context.access[p] = contextIn.access[p];
-        context.addInitializer = function (f) { if (done) throw new TypeError("Cannot add initializers after decoration has completed"); extraInitializers.push(accept(f || null)); };
-        var result = (0, decorators[i])(kind === "accessor" ? { get: descriptor.get, set: descriptor.set } : descriptor[key], context);
-        if (kind === "accessor") {
-            if (result === void 0) continue;
-            if (result === null || typeof result !== "object") throw new TypeError("Object expected");
-            if (_ = accept(result.get)) descriptor.get = _;
-            if (_ = accept(result.set)) descriptor.set = _;
-            if (_ = accept(result.init)) initializers.unshift(_);
-        }
-        else if (_ = accept(result)) {
-            if (kind === "field") initializers.unshift(_);
-            else descriptor[key] = _;
-        }
-    }
-    if (target) Object.defineProperty(target, contextIn.name, descriptor);
-    done = true;
-};
-var __runInitializers = (this && this.__runInitializers) || function (thisArg, initializers, value) {
-    var useValue = arguments.length > 2;
-    for (var i = 0; i < initializers.length; i++) {
-        value = useValue ? initializers[i].call(thisArg, value) : initializers[i].call(thisArg);
-    }
-    return useValue ? value : void 0;
-};
-var __setFunctionName = (this && this.__setFunctionName) || function (f, name, prefix) {
-    if (typeof name === "symbol") name = name.description ? "[".concat(name.description, "]") : "";
-    return Object.defineProperty(f, "name", { configurable: true, value: prefix ? "".concat(prefix, " ", name) : name });
-};
-import { css, html, LitElement, nothing, } from "lit";
-import { property, state } 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. */
+import { css } from "lit";
+import { DuiAvatarPrimitive } from "@deepfuture/dui-primitives/avatar";
+import "../_install.js";
 const styles = css `
   :host {
-    --avatar-size: var(--space-12);
-    display: inline-block;
+    --avatar-bg: oklch(from var(--foreground) l c h / 0.08);
+    --avatar-fg: var(--text-2);
   }
 
   [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%;
+    --icon-size: calc(var(--avatar-size) * 0.5);
+    --icon-color: var(--avatar-fg);
+    border-radius: var(--radius-full);
+    background: var(--avatar-bg);
+    color: var(--avatar-fg);
   }
 
   [part="fallback"] {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    height: 100%;
-    width: 100%;
+    font-family: var(--font-sans);
+    font-size: calc(var(--avatar-size) * 0.4);
+    font-weight: var(--font-weight-medium);
+    line-height: var(--line-height-none);
   }
 `;
-/**
- * `<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 }
- */
-let DuiAvatar = (() => {
-    let _classSuper = LitElement;
-    let _src_decorators;
-    let _src_initializers = [];
-    let _src_extraInitializers = [];
-    let _alt_decorators;
-    let _alt_initializers = [];
-    let _alt_extraInitializers = [];
-    let _fallbackDelay_decorators;
-    let _fallbackDelay_initializers = [];
-    let _fallbackDelay_extraInitializers = [];
-    let _size_decorators;
-    let _size_initializers = [];
-    let _size_extraInitializers = [];
-    let _private_imageStatus_decorators;
-    let _private_imageStatus_initializers = [];
-    let _private_imageStatus_extraInitializers = [];
-    let _private_imageStatus_descriptor;
-    let _private_delayPassed_decorators;
-    let _private_delayPassed_initializers = [];
-    let _private_delayPassed_extraInitializers = [];
-    let _private_delayPassed_descriptor;
-    return class DuiAvatar extends _classSuper {
-        static {
-            const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
-            _src_decorators = [property()];
-            _alt_decorators = [property()];
-            _fallbackDelay_decorators = [property({ type: Number, attribute: "fallback-delay" })];
-            _size_decorators = [property({ reflect: true })];
-            _private_imageStatus_decorators = [state()];
-            _private_delayPassed_decorators = [state()];
-            __esDecorate(this, null, _src_decorators, { kind: "accessor", name: "src", static: false, private: false, access: { has: obj => "src" in obj, get: obj => obj.src, set: (obj, value) => { obj.src = value; } }, metadata: _metadata }, _src_initializers, _src_extraInitializers);
-            __esDecorate(this, null, _alt_decorators, { kind: "accessor", name: "alt", static: false, private: false, access: { has: obj => "alt" in obj, get: obj => obj.alt, set: (obj, value) => { obj.alt = value; } }, metadata: _metadata }, _alt_initializers, _alt_extraInitializers);
-            __esDecorate(this, null, _fallbackDelay_decorators, { kind: "accessor", name: "fallbackDelay", static: false, private: false, access: { has: obj => "fallbackDelay" in obj, get: obj => obj.fallbackDelay, set: (obj, value) => { obj.fallbackDelay = value; } }, metadata: _metadata }, _fallbackDelay_initializers, _fallbackDelay_extraInitializers);
-            __esDecorate(this, null, _size_decorators, { kind: "accessor", name: "size", static: false, private: false, access: { has: obj => "size" in obj, get: obj => obj.size, set: (obj, value) => { obj.size = value; } }, metadata: _metadata }, _size_initializers, _size_extraInitializers);
-            __esDecorate(this, _private_imageStatus_descriptor = { get: __setFunctionName(function () { return this.#imageStatus_accessor_storage; }, "#imageStatus", "get"), set: __setFunctionName(function (value) { this.#imageStatus_accessor_storage = value; }, "#imageStatus", "set") }, _private_imageStatus_decorators, { kind: "accessor", name: "#imageStatus", static: false, private: true, access: { has: obj => #imageStatus in obj, get: obj => obj.#imageStatus, set: (obj, value) => { obj.#imageStatus = value; } }, metadata: _metadata }, _private_imageStatus_initializers, _private_imageStatus_extraInitializers);
-            __esDecorate(this, _private_delayPassed_descriptor = { get: __setFunctionName(function () { return this.#delayPassed_accessor_storage; }, "#delayPassed", "get"), set: __setFunctionName(function (value) { this.#delayPassed_accessor_storage = value; }, "#delayPassed", "set") }, _private_delayPassed_decorators, { kind: "accessor", name: "#delayPassed", static: false, private: true, access: { has: obj => #delayPassed in obj, get: obj => obj.#delayPassed, set: (obj, value) => { obj.#delayPassed = value; } }, metadata: _metadata }, _private_delayPassed_initializers, _private_delayPassed_extraInitializers);
-            if (_metadata) Object.defineProperty(this, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
-        }
-        static tagName = "dui-avatar";
-        static styles = [base, styles];
-        #src_accessor_storage = __runInitializers(this, _src_initializers, undefined);
-        /** Image URL for the avatar. */
-        get src() { return this.#src_accessor_storage; }
-        set src(value) { this.#src_accessor_storage = value; }
-        #alt_accessor_storage = (__runInitializers(this, _src_extraInitializers), __runInitializers(this, _alt_initializers, ""));
-        /** Alt text for the avatar image. */
-        get alt() { return this.#alt_accessor_storage; }
-        set alt(value) { this.#alt_accessor_storage = value; }
-        #fallbackDelay_accessor_storage = (__runInitializers(this, _alt_extraInitializers), __runInitializers(this, _fallbackDelay_initializers, 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 = (__runInitializers(this, _fallbackDelay_extraInitializers), __runInitializers(this, _size_initializers, 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 = (__runInitializers(this, _size_extraInitializers), __runInitializers(this, _private_imageStatus_initializers, "idle"));
-        get #imageStatus() { return _private_imageStatus_descriptor.get.call(this); }
-        set #imageStatus(value) { return _private_imageStatus_descriptor.set.call(this, value); }
-        #delayPassed_accessor_storage = (__runInitializers(this, _private_imageStatus_extraInitializers), __runInitializers(this, _private_delayPassed_initializers, false));
-        get #delayPassed() { return _private_delayPassed_descriptor.get.call(this); }
-        set #delayPassed(value) { return _private_delayPassed_descriptor.set.call(this, value); }
-        #probeImage = __runInitializers(this, _private_delayPassed_extraInitializers);
-        #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>
-    `;
-        }
-    };
-})();
-export { DuiAvatar };
+export class DuiAvatar extends DuiAvatarPrimitive {
+    static styles = [...DuiAvatarPrimitive.styles, styles];
+}
+customElements.define(DuiAvatar.tagName, DuiAvatar);

package/avatar/index.d.ts

@@ -1,4 +1,4 @@
-import { DuiAvatar, loadingStatusChangeEvent } from "./avatar.js";
-export { DuiAvatar, loadingStatusChangeEvent };
-export type { ImageStatus } from "./avatar.js";
-export declare const avatarFamily: (typeof DuiAvatar)[];
+import "./avatar.js";
+export { DuiAvatar } from "./avatar.js";
+export type { ImageStatus } from "@deepfuture/dui-primitives/avatar";
+export { loadingStatusChangeEvent } from "@deepfuture/dui-primitives/avatar";

package/avatar/index.js

@@ -1,3 +1,3 @@
-import { DuiAvatar, loadingStatusChangeEvent } from "./avatar.js";
-export { DuiAvatar, loadingStatusChangeEvent };
-export const avatarFamily = [DuiAvatar];
+import "./avatar.js";
+export { DuiAvatar } from "./avatar.js";
+export { loadingStatusChangeEvent } from "@deepfuture/dui-primitives/avatar";

package/badge/badge.d.ts

@@ -1,12 +1,5 @@
-import { LitElement, type TemplateResult } from "lit";
-/**
- * `<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";
+import { DuiBadgePrimitive } from "@deepfuture/dui-primitives/badge";
+import "../_install.js";
+export declare class DuiBadge extends DuiBadgePrimitive {
     static styles: import("lit").CSSResult[];
-    render(): TemplateResult;
 }

package/badge/badge.js

@@ -1,30 +1,96 @@
-import { css, html, LitElement } from "lit";
-import { base } from "@deepfuture/dui-core/base";
-/** Structural styles only — layout CSS. */
+import { css } from "lit";
+import { DuiBadgePrimitive } from "@deepfuture/dui-primitives/badge";
+import "../_install.js";
 const styles = css `
+  /* =================================================================
+   * Two-axis variant system:
+   *   variant    → semantic intent (neutral, accent, danger)
+   *   appearance → visual treatment (filled, outline, ghost)
+   * ================================================================= */
+
+  /* ---------------------------------------------------------------
+   * Layer 1 — Intent (sets --_intent-* private tokens)
+   * --------------------------------------------------------------- */
+
+  :host,
+  :host([variant=""]),
+  :host([variant="neutral"]) {
+    --_intent-base: var(--foreground);
+    --_intent-base-fg: var(--background);
+    --_intent-subtle: oklch(from var(--foreground) l c h / 0.08);
+    --_intent-subtle-fg: var(--text-2);
+    --_intent-border: var(--border-strong);
+  }
+
+  :host([variant="primary"]) {
+    --_intent-base: var(--accent);
+    --_intent-base-fg: oklch(from var(--accent) 0.98 0.01 h);
+    --_intent-subtle: var(--accent-subtle);
+    --_intent-subtle-fg: var(--accent-text);
+    --_intent-border: oklch(from var(--accent) l c h / 0.5);
+  }
+
+  :host([variant="danger"]) {
+    --_intent-base: var(--destructive);
+    --_intent-base-fg: oklch(from var(--destructive) 0.98 0.01 h);
+    --_intent-subtle: var(--destructive-subtle);
+    --_intent-subtle-fg: oklch(from var(--destructive-text) l c h / 0.8);
+    --_intent-border: oklch(from var(--destructive) l c h / 0.5);
+  }
+
+  /* ---------------------------------------------------------------
+   * Layer 2 — Appearance (maps --_intent-* to --badge-*)
+   * --------------------------------------------------------------- */
+
+  :host,
+  :host([appearance=""]),
+  :host([appearance="filled"]) {
+    --badge-bg: var(--_intent-base);
+    --badge-fg: var(--_intent-base-fg);
+    --badge-border: transparent;
+  }
+
+  :host([appearance="outline"]) {
+    --badge-bg: transparent;
+    --badge-fg: var(--_intent-subtle-fg);
+    --badge-border: var(--_intent-border);
+  }
+
+  :host([appearance="soft"]) {
+    --badge-bg: var(--_intent-subtle);
+    --badge-fg: var(--_intent-subtle-fg);
+    --badge-border: transparent;
+  }
+
+  /* ---------------------------------------------------------------
+   * Sizing & base appearance
+   * --------------------------------------------------------------- */
+
   :host {
-    display: inline-block;
+    --badge-icon-size: var(--space-3);
+    --icon-size: var(--badge-icon-size);
+    --icon-color: var(--badge-fg);
+    vertical-align: middle;
+    line-height: 0;
   }
 
   [part="root"] {
-    display: inline-flex;
-    align-items: center;
+    /* display: inline-block; */
+    gap: var(--space-1);
+    height: var(--space-5);
+    padding: 0 var(--space-2);
+    border-radius: var(--radius-full);
+    background: var(--badge-bg);
+    color: var(--badge-fg);
+    font-family: var(--font-sans);
+    font-size: var(--text-xs); letter-spacing: var(--letter-spacing-normal); line-height: var(--line-height-snug);
+    font-weight: var(--font-weight-medium);
+    text-box: trim-both cap alphabetic;
+    white-space: nowrap;
+    border: var(--border-width-thin) solid var(--badge-border);
   }
 `;
-/**
- * `<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 tagName = "dui-badge";
-    static styles = [base, styles];
-    render() {
-        return html `
-      <span part="root">
-        <slot></slot>
-      </span>
-    `;
-    }
+export class DuiBadge extends DuiBadgePrimitive {
+    static styles = [...DuiBadgePrimitive.styles, styles];
 }
+customElements.define(DuiBadge.tagName, DuiBadge);

package/badge/index.d.ts

@@ -1,3 +1,2 @@
-import { DuiBadge } from "./badge.js";
-export { DuiBadge };
-export declare const badgeFamily: (typeof DuiBadge)[];
+import "./badge.js";
+export { DuiBadge } from "./badge.js";

package/badge/index.js

@@ -1,3 +1,2 @@
-import { DuiBadge } from "./badge.js";
-export { DuiBadge };
-export const badgeFamily = [DuiBadge];
+import "./badge.js";
+export { DuiBadge } from "./badge.js";

package/breadcrumb/breadcrumb-ellipsis.d.ts

@@ -1,14 +1,5 @@
-/** 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";
+import { DuiBreadcrumbEllipsisPrimitive } from "@deepfuture/dui-primitives/breadcrumb";
+import "../_install.js";
+export declare class DuiBreadcrumbEllipsis extends DuiBreadcrumbEllipsisPrimitive {
     static styles: import("lit").CSSResult[];
-    render(): TemplateResult;
 }

package/breadcrumb/breadcrumb-ellipsis.js

@@ -1,39 +1,13 @@
-/** 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. */
+import { css } from "lit";
+import { DuiBreadcrumbEllipsisPrimitive } from "@deepfuture/dui-primitives/breadcrumb";
+import "../_install.js";
 const styles = css `
-  :host {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-  }
-
   [part="root"] {
-    display: flex;
-    align-items: center;
-    justify-content: center;
+    color: var(--text-2);
+    width: var(--space-4);
   }
 `;
-/**
- * `<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 tagName = "dui-breadcrumb-ellipsis";
-    static styles = [base, styles];
-    render() {
-        return html `
-      <span
-        role="presentation"
-        aria-hidden="true"
-        part="root"
-      >
-        <slot>&hellip;</slot>
-      </span>
-    `;
-    }
+export class DuiBreadcrumbEllipsis extends DuiBreadcrumbEllipsisPrimitive {
+    static styles = [...DuiBreadcrumbEllipsisPrimitive.styles, styles];
 }
+customElements.define(DuiBreadcrumbEllipsis.tagName, DuiBreadcrumbEllipsis);

package/breadcrumb/breadcrumb-item.d.ts

@@ -1,13 +1,5 @@
-/** 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";
+import { DuiBreadcrumbItemPrimitive } from "@deepfuture/dui-primitives/breadcrumb";
+import "../_install.js";
+export declare class DuiBreadcrumbItem extends DuiBreadcrumbItemPrimitive {
     static styles: import("lit").CSSResult[];
-    render(): TemplateResult;
 }

package/breadcrumb/breadcrumb-item.js

@@ -1,31 +1,12 @@
-/** 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. */
+import { css } from "lit";
+import { DuiBreadcrumbItemPrimitive } from "@deepfuture/dui-primitives/breadcrumb";
+import "../_install.js";
 const styles = css `
-  :host {
-    display: inline-flex;
-  }
-
   [part="root"] {
-    display: inline-flex;
-    align-items: center;
+    gap: var(--space-1_5);
   }
 `;
-/**
- * `<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 tagName = "dui-breadcrumb-item";
-    static styles = [base, styles];
-    render() {
-        return html `
-      <li part="root">
-        <slot></slot>
-      </li>
-    `;
-    }
+export class DuiBreadcrumbItem extends DuiBreadcrumbItemPrimitive {
+    static styles = [...DuiBreadcrumbItemPrimitive.styles, styles];
 }
+customElements.define(DuiBreadcrumbItem.tagName, DuiBreadcrumbItem);

package/breadcrumb/breadcrumb-link.d.ts

@@ -1,14 +1,5 @@
-/** 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";
+import { DuiBreadcrumbLinkPrimitive } from "@deepfuture/dui-primitives/breadcrumb";
+import "../_install.js";
+export declare class DuiBreadcrumbLink extends DuiBreadcrumbLinkPrimitive {
     static styles: import("lit").CSSResult[];
-    render(): TemplateResult;
 }

package/breadcrumb/breadcrumb-link.js

@@ -1,32 +1,22 @@
-/** 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. */
+import { css } from "lit";
+import { DuiBreadcrumbLinkPrimitive } from "@deepfuture/dui-primitives/breadcrumb";
+import "../_install.js";
 const styles = css `
-  :host {
-    display: inline-flex;
+  [part="root"] {
+    color: var(--text-2);
   }
 
-  [part="root"] {
-    display: inline-flex;
-    align-items: center;
+  [part="root"] ::slotted(a) {
+    color: inherit;
+    text-decoration: none;
+    transition: color var(--duration-fast);
+  }
+
+  [part="root"] ::slotted(a:hover) {
+    color: var(--text-1);
   }
 `;
-/**
- * `<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 tagName = "dui-breadcrumb-link";
-    static styles = [base, styles];
-    render() {
-        return html `
-      <span part="root">
-        <slot></slot>
-      </span>
-    `;
-    }
+export class DuiBreadcrumbLink extends DuiBreadcrumbLinkPrimitive {
+    static styles = [...DuiBreadcrumbLinkPrimitive.styles, styles];
 }
+customElements.define(DuiBreadcrumbLink.tagName, DuiBreadcrumbLink);

package/breadcrumb/breadcrumb-page.d.ts

@@ -1,13 +1,5 @@
-/** 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";
+import { DuiBreadcrumbPagePrimitive } from "@deepfuture/dui-primitives/breadcrumb";
+import "../_install.js";
+export declare class DuiBreadcrumbPage extends DuiBreadcrumbPagePrimitive {
     static styles: import("lit").CSSResult[];
-    render(): TemplateResult;
 }