@deepfuture/dui-components 0.0.21 → 1.0.0

package/breadcrumb/breadcrumb-page.js

@@ -1,36 +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 { DuiBreadcrumbPagePrimitive } from "@deepfuture/dui-primitives/breadcrumb";
+import "../_install.js";
 const styles = css `
-  :host {
-    display: inline-flex;
-  }
-
   [part="root"] {
-    display: inline-flex;
-    align-items: center;
+    color: var(--text-1);
+    font-weight: var(--font-weight-regular);
   }
 `;
-/**
- * `<dui-breadcrumb-page>` — Current page indicator (not clickable).
- *
- * @slot - The current page label text.
- * @csspart root - The `<span>` element with `aria-current="page"`.
- */
-export class DuiBreadcrumbPage extends LitElement {
-    static tagName = "dui-breadcrumb-page";
-    static styles = [base, styles];
-    render() {
-        return html `
-      <span
-        role="link"
-        aria-disabled="true"
-        aria-current="page"
-        part="root"
-      >
-        <slot></slot>
-      </span>
-    `;
-    }
+export class DuiBreadcrumbPage extends DuiBreadcrumbPagePrimitive {
+    static styles = [...DuiBreadcrumbPagePrimitive.styles, styles];
 }
+customElements.define(DuiBreadcrumbPage.tagName, DuiBreadcrumbPage);

package/breadcrumb/breadcrumb-separator.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-separator>` — Visual separator between breadcrumb items.
- * Defaults to "/" but can be overridden via slot (e.g., a chevron icon).
- *
- * @slot - Custom separator content. Defaults to "/".
- * @csspart root - The `<li>` element (presentational, aria-hidden).
- */
-export declare class DuiBreadcrumbSeparator extends LitElement {
-    static tagName: "dui-breadcrumb-separator";
+import { DuiBreadcrumbSeparatorPrimitive } from "@deepfuture/dui-primitives/breadcrumb";
+import "../_install.js";
+export declare class DuiBreadcrumbSeparator extends DuiBreadcrumbSeparatorPrimitive {
     static styles: import("lit").CSSResult[];
-    render(): TemplateResult;
 }

package/breadcrumb/breadcrumb-separator.js

@@ -1,36 +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 { DuiBreadcrumbSeparatorPrimitive } from "@deepfuture/dui-primitives/breadcrumb";
+import "../_install.js";
 const styles = css `
-  :host {
-    display: flex;
-  }
-
   [part="root"] {
-    display: flex;
-    align-items: center;
+    --icon-size: var(--space-3_5);
+    color: color-mix(in oklch, var(--text-2) 50%, transparent);
   }
 `;
-/**
- * `<dui-breadcrumb-separator>` — Visual separator between breadcrumb items.
- * Defaults to "/" but can be overridden via slot (e.g., a chevron icon).
- *
- * @slot - Custom separator content. Defaults to "/".
- * @csspart root - The `<li>` element (presentational, aria-hidden).
- */
-export class DuiBreadcrumbSeparator extends LitElement {
-    static tagName = "dui-breadcrumb-separator";
-    static styles = [base, styles];
-    render() {
-        return html `
-      <li
-        role="presentation"
-        aria-hidden="true"
-        part="root"
-      >
-        <slot>/</slot>
-      </li>
-    `;
-    }
+export class DuiBreadcrumbSeparator extends DuiBreadcrumbSeparatorPrimitive {
+    static styles = [...DuiBreadcrumbSeparatorPrimitive.styles, styles];
 }
+customElements.define(DuiBreadcrumbSeparator.tagName, DuiBreadcrumbSeparator);

package/breadcrumb/breadcrumb.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>` — Root navigation wrapper for breadcrumb trails.
- * Renders a `<nav>` with an internal `<ol>` for semantic structure.
- *
- * @slot - Breadcrumb items and separators.
- * @csspart root - The `<ol>` element.
- */
-export declare class DuiBreadcrumb extends LitElement {
-    static tagName: "dui-breadcrumb";
+import { DuiBreadcrumbPrimitive } from "@deepfuture/dui-primitives/breadcrumb";
+import "../_install.js";
+export declare class DuiBreadcrumb extends DuiBreadcrumbPrimitive {
     static styles: import("lit").CSSResult[];
-    render(): TemplateResult;
 }

package/breadcrumb/breadcrumb.js

@@ -1,38 +1,15 @@
-/** 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 { DuiBreadcrumbPrimitive } from "@deepfuture/dui-primitives/breadcrumb";
+import "../_install.js";
 const styles = css `
-  :host {
-    display: block;
-  }
-
   [part="root"] {
-    display: flex;
-    flex-wrap: nowrap;
-    align-items: center;
-    list-style: none;
-    margin: 0;
-    padding: 0;
+    gap: var(--space-2);
+    font-size: var(--text-sm); line-height: var(--text-sm--line-height);
+    font-family: var(--font-sans);
+    color: var(--text-2);
   }
 `;
-/**
- * `<dui-breadcrumb>` — Root navigation wrapper for breadcrumb trails.
- * Renders a `<nav>` with an internal `<ol>` for semantic structure.
- *
- * @slot - Breadcrumb items and separators.
- * @csspart root - The `<ol>` element.
- */
-export class DuiBreadcrumb extends LitElement {
-    static tagName = "dui-breadcrumb";
-    static styles = [base, styles];
-    render() {
-        return html `
-      <nav aria-label="breadcrumb">
-        <ol part="root">
-          <slot></slot>
-        </ol>
-      </nav>
-    `;
-    }
+export class DuiBreadcrumb extends DuiBreadcrumbPrimitive {
+    static styles = [...DuiBreadcrumbPrimitive.styles, styles];
 }
+customElements.define(DuiBreadcrumb.tagName, DuiBreadcrumb);

package/breadcrumb/index.d.ts

@@ -1,13 +1,12 @@
-import { DuiBreadcrumb } from "./breadcrumb.js";
-export { DuiBreadcrumb };
-import { DuiBreadcrumbItem } from "./breadcrumb-item.js";
-export { DuiBreadcrumbItem };
-import { DuiBreadcrumbLink } from "./breadcrumb-link.js";
-export { DuiBreadcrumbLink };
-import { DuiBreadcrumbPage } from "./breadcrumb-page.js";
-export { DuiBreadcrumbPage };
-import { DuiBreadcrumbSeparator } from "./breadcrumb-separator.js";
-export { DuiBreadcrumbSeparator };
-import { DuiBreadcrumbEllipsis } from "./breadcrumb-ellipsis.js";
-export { DuiBreadcrumbEllipsis };
-export declare const breadcrumbFamily: (typeof DuiBreadcrumb | typeof DuiBreadcrumbItem | typeof DuiBreadcrumbLink | typeof DuiBreadcrumbPage | typeof DuiBreadcrumbSeparator | typeof DuiBreadcrumbEllipsis)[];
+import "./breadcrumb.js";
+import "./breadcrumb-ellipsis.js";
+import "./breadcrumb-item.js";
+import "./breadcrumb-link.js";
+import "./breadcrumb-page.js";
+import "./breadcrumb-separator.js";
+export { DuiBreadcrumb } from "./breadcrumb.js";
+export { DuiBreadcrumbEllipsis } from "./breadcrumb-ellipsis.js";
+export { DuiBreadcrumbItem } from "./breadcrumb-item.js";
+export { DuiBreadcrumbLink } from "./breadcrumb-link.js";
+export { DuiBreadcrumbPage } from "./breadcrumb-page.js";
+export { DuiBreadcrumbSeparator } from "./breadcrumb-separator.js";

package/breadcrumb/index.js

@@ -1,13 +1,12 @@
-import { DuiBreadcrumb } from "./breadcrumb.js";
-export { DuiBreadcrumb };
-import { DuiBreadcrumbItem } from "./breadcrumb-item.js";
-export { DuiBreadcrumbItem };
-import { DuiBreadcrumbLink } from "./breadcrumb-link.js";
-export { DuiBreadcrumbLink };
-import { DuiBreadcrumbPage } from "./breadcrumb-page.js";
-export { DuiBreadcrumbPage };
-import { DuiBreadcrumbSeparator } from "./breadcrumb-separator.js";
-export { DuiBreadcrumbSeparator };
-import { DuiBreadcrumbEllipsis } from "./breadcrumb-ellipsis.js";
-export { DuiBreadcrumbEllipsis };
-export const breadcrumbFamily = [DuiBreadcrumb, DuiBreadcrumbItem, DuiBreadcrumbLink, DuiBreadcrumbPage, DuiBreadcrumbSeparator, DuiBreadcrumbEllipsis];
+import "./breadcrumb.js";
+import "./breadcrumb-ellipsis.js";
+import "./breadcrumb-item.js";
+import "./breadcrumb-link.js";
+import "./breadcrumb-page.js";
+import "./breadcrumb-separator.js";
+export { DuiBreadcrumb } from "./breadcrumb.js";
+export { DuiBreadcrumbEllipsis } from "./breadcrumb-ellipsis.js";
+export { DuiBreadcrumbItem } from "./breadcrumb-item.js";
+export { DuiBreadcrumbLink } from "./breadcrumb-link.js";
+export { DuiBreadcrumbPage } from "./breadcrumb-page.js";
+export { DuiBreadcrumbSeparator } from "./breadcrumb-separator.js";

package/button/button.d.ts

@@ -1,34 +1,5 @@
-import { LitElement, type TemplateResult } from "lit";
-/** Fired when a button with `href` is clicked via normal (non-modifier) click. */
-export declare const navigateEvent: (detail: {
-    href: string;
-}) => CustomEvent<{
-    href: string;
-}>;
-/**
- * `<dui-button>` — A button component.
- *
- * Renders as a native `<button>` by default. When `href` is set, renders as a
- * native `<a>` tag instead. Normal clicks fire a `dui-navigate` event that
- * consumers handle for SPA routing.
- *
- * @slot - Button label / content.
- * @csspart root - The button or anchor element.
- * @fires dui-navigate - Fired on normal link clicks. Detail: { href: string }
- */
-export declare class DuiButton extends LitElement {
-    #private;
-    static tagName: "dui-button";
-    static shadowRootOptions: {
-        delegatesFocus: boolean;
-        mode: ShadowRootMode;
-        serializable?: boolean;
-        slotAssignment?: SlotAssignmentMode;
-    };
+import { DuiButtonPrimitive } from "@deepfuture/dui-primitives/button";
+import "../_install.js";
+export declare class DuiButton extends DuiButtonPrimitive {
     static styles: import("lit").CSSResult[];
-    accessor disabled: boolean;
-    accessor focusableWhenDisabled: boolean;
-    accessor type: "button" | "submit" | "reset";
-    accessor href: string | undefined;
-    render(): TemplateResult;
 }

package/button/button.js

@@ -1,174 +1,230 @@
-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;
-};
-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";
-/** Fired when a button with `href` is clicked via normal (non-modifier) click. */
-export const navigateEvent = customEvent("dui-navigate", { bubbles: true, composed: true });
-/** Structural styles only — layout and behavioral CSS. */
+import { css } from "lit";
+import { DuiButtonPrimitive } from "@deepfuture/dui-primitives/button";
+import "../_install.js";
 const styles = css `
+  /* =================================================================
+   * Two-axis variant system:
+   *   variant   → semantic intent (neutral, primary, danger)
+   *   appearance → visual treatment (filled, outline, ghost, link)
+   *
+   * Uses the --_interact alpha overlay pattern for hover/active states.
+   * ================================================================= */
+
+  /* ---------------------------------------------------------------
+   * 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-1);
+    --_intent-border: var(--border);
+  }
+
+  :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: var(--destructive-text);
+    --_intent-border: oklch(from var(--destructive) l c h / 0.5);
+  }
+
+  /* ---------------------------------------------------------------
+   * Layer 2 — Appearance (maps --_intent-* to --button-*)
+   * --------------------------------------------------------------- */
+
+  :host,
+  :host([appearance=""]),
+  :host([appearance="filled"]) {
+    --button-bg: var(--_intent-base);
+    --button-fg: var(--_intent-base-fg);
+    --button-border: transparent;
+  }
+
+  :host([appearance="outline"]) {
+    --button-bg: oklch(from var(--_intent-base) l c h / 0);
+    --button-fg: var(--_intent-subtle-fg);
+    --button-border: var(--_intent-border);
+  }
+
+  :host([appearance="ghost"]) {
+    --button-bg: oklch(from var(--_intent-base) l c h / 0);
+    --button-fg: var(--_intent-subtle-fg);
+    --button-border: transparent;
+  }
+
+  :host([appearance="soft"]) {
+    --button-bg: var(--_intent-subtle);
+    --button-fg: var(--_intent-subtle-fg);
+    --button-border: transparent;
+  }
+
+  :host([appearance="link"]) {
+    --button-bg: transparent;
+    --button-fg: var(--_intent-subtle-fg);
+    --button-border: transparent;
+  }
+
+  /* ---------------------------------------------------------------
+   * Sizes (swap dimensions)
+   * --------------------------------------------------------------- */
+
   :host {
-    display: inline-block;
+    --button-height: var(--component-height-md);
+    --button-width: auto;
+    --button-padding-y: var(--space-2);
+    --button-padding-x: var(--space-2_5);
+    --button-gap: var(--space-1_5);
+    --button-radius: var(--radius-md);
+    --button-font-size: var(--text-sm);
+    --button-icon-size: var(--space-4_5);
+    width: var(--button-width);
   }
 
-  button, a {
-    appearance: none;
-    background: none;
-    border: none;
-    padding: 0;
-    margin: 0;
-    font: inherit;
-    color: inherit;
-    text-decoration: none;
+  :host([size="xs"]) {
+    --button-height: var(--component-height-xs);
+    --button-padding-y: var(--space-1);
+    --button-padding-x: var(--space-1_5);
+    --button-gap: var(--space-1);
+    --button-font-size: var(--text-xs);
+    --button-icon-size: var(--space-3_5);
   }
 
+  :host([size="sm"]) {
+    --button-height: var(--component-height-sm);
+    --button-padding-y: var(--space-1_5);
+    --button-padding-x: var(--space-2);
+    --button-gap: var(--space-1);
+    --button-font-size: var(--text-xs);
+    --button-icon-size: var(--space-4);
+  }
+
+  :host([size="lg"]) {
+    --button-height: var(--component-height-lg);
+    --button-padding-y: var(--space-2_5);
+    --button-padding-x: var(--space-3);
+    --button-gap: var(--space-1_5);
+    --button-font-size: var(--text-sm);
+    --button-icon-size: var(--space-4_5);
+  }
+
+  /* ---------------------------------------------------------------
+   * Base appearance
+   * --------------------------------------------------------------- */
+
   [part="root"] {
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    box-sizing: border-box;
-    cursor: pointer;
-    user-select: none;
-    -webkit-tap-highlight-color: transparent;
+    --icon-size: var(--button-icon-size);
+    --icon-color: var(--button-fg);
+    gap: var(--button-gap);
+    padding: var(--button-padding-y) var(--button-padding-x);
+    width: var(--button-width);
+    height: var(--button-height);
+    border: var(--border-width-thin) solid var(--button-border);
+    border-radius: var(--button-radius);
+    background: var(--button-bg);
+    color: var(--button-fg);
+    font-family: var(--font-sans);
+    font-weight: var(--font-weight-medium);
+    font-size: var(--button-font-size);
+    letter-spacing: var(--letter-spacing-tight);
+    line-height: var(--line-height-snug);
+    text-box: trim-both cap alphabetic;
+    white-space: nowrap;
+    transition-property: background, box-shadow, filter, transform, border-color, text-decoration-color;
+    transition-duration: var(--duration-fast);
+    transition-timing-function: var(--ease-out-3);
+  }
+
+  /* ---------------------------------------------------------------
+   * Interactive states — filled variant uses filter for hover/active
+   * --------------------------------------------------------------- */
+
+  /* Filled: darken on hover, more on active */
+  :host(:not([appearance="outline"]):not([appearance="ghost"]):not([appearance="soft"]):not([appearance="link"]))
+    [part="root"]:hover:not(:disabled):not([aria-disabled="true"]) {
+    filter: brightness(0.88);
+  }
+
+  :host(:not([appearance="outline"]):not([appearance="ghost"]):not([appearance="soft"]):not([appearance="link"]))
+    [part="root"]:active:not(:disabled):not([aria-disabled="true"]) {
+    filter: brightness(0.80);
+  }
+
+  /* Ghost / outline: alpha overlay on foreground */
+  :host([appearance="ghost"]) [part="root"]:hover:not(:disabled):not([aria-disabled="true"]),
+  :host([appearance="outline"]) [part="root"]:hover:not(:disabled):not([aria-disabled="true"]) {
+    background: oklch(from var(--_intent-base) l c h / 0.05);
+  }
+
+  :host([appearance="ghost"]) [part="root"]:active:not(:disabled):not([aria-disabled="true"]),
+  :host([appearance="outline"]) [part="root"]:active:not(:disabled):not([aria-disabled="true"]) {
+    background: oklch(from var(--_intent-base) l c h / 0.10);
+  }
+
+  /* Soft: layer intent color on top of tinted background */
+  :host([appearance="soft"])
+    [part="root"]:hover:not(:disabled):not([aria-disabled="true"]) {
+    background: oklch(from var(--_intent-base) l c h / 0.12);
+  }
+
+  :host([appearance="soft"])
+    [part="root"]:active:not(:disabled):not([aria-disabled="true"]) {
+    background: oklch(from var(--_intent-base) l c h / 0.18);
+  }
+
+  [part="root"]:focus-visible {
+    outline: none;
+    box-shadow:
+      0 0 0 var(--focus-ring-offset) var(--background),
+      0 0 0 calc(var(--focus-ring-offset) + var(--focus-ring-width)) var(--focus-ring-color);
+  }
+
+  [part="root"]:disabled,
+  [part="root"][aria-disabled="true"] {
+    opacity: 0.2;
+    cursor: not-allowed;
+  }
+
+  /* Link appearance: persistent transparent underline, fades in on hover */
+  :host([appearance="link"]) [part="root"] {
+    text-decoration: underline;
+    text-underline-offset: 4px;
+    text-decoration-color: transparent;
+  }
+
+  :host([appearance="link"])
+    [part="root"]:hover:not(:disabled):not([aria-disabled="true"]) {
+    text-decoration-color: currentColor;
+  }
+
+  /* Open state — mirrors :active so the trigger looks pressed while its overlay is open */
+
+  :host([data-open]:not([appearance="outline"]):not([appearance="ghost"]):not([appearance="soft"]):not([appearance="link"]))
+    [part="root"]:not(:disabled):not([aria-disabled="true"]) {
+    filter: brightness(0.80);
+  }
+
+  :host([data-open][appearance="ghost"]) [part="root"]:not(:disabled):not([aria-disabled="true"]),
+  :host([data-open][appearance="outline"]) [part="root"]:not(:disabled):not([aria-disabled="true"]) {
+    background: oklch(from var(--_intent-base) l c h / 0.10);
+  }
+
+  :host([data-open][appearance="soft"]) [part="root"]:not(:disabled):not([aria-disabled="true"]) {
+    background: oklch(from var(--_intent-base) l c h / 0.18);
   }
 `;
-/**
- * `<dui-button>` — A button component.
- *
- * Renders as a native `<button>` by default. When `href` is set, renders as a
- * native `<a>` tag instead. Normal clicks fire a `dui-navigate` event that
- * consumers handle for SPA routing.
- *
- * @slot - Button label / content.
- * @csspart root - The button or anchor element.
- * @fires dui-navigate - Fired on normal link clicks. Detail: { href: string }
- */
-let DuiButton = (() => {
-    let _classSuper = LitElement;
-    let _disabled_decorators;
-    let _disabled_initializers = [];
-    let _disabled_extraInitializers = [];
-    let _focusableWhenDisabled_decorators;
-    let _focusableWhenDisabled_initializers = [];
-    let _focusableWhenDisabled_extraInitializers = [];
-    let _type_decorators;
-    let _type_initializers = [];
-    let _type_extraInitializers = [];
-    let _href_decorators;
-    let _href_initializers = [];
-    let _href_extraInitializers = [];
-    return class DuiButton extends _classSuper {
-        static {
-            const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
-            _disabled_decorators = [property({ type: Boolean, reflect: true })];
-            _focusableWhenDisabled_decorators = [property({ type: Boolean, attribute: "focusable-when-disabled" })];
-            _type_decorators = [property()];
-            _href_decorators = [property()];
-            __esDecorate(this, null, _disabled_decorators, { kind: "accessor", name: "disabled", static: false, private: false, access: { has: obj => "disabled" in obj, get: obj => obj.disabled, set: (obj, value) => { obj.disabled = value; } }, metadata: _metadata }, _disabled_initializers, _disabled_extraInitializers);
-            __esDecorate(this, null, _focusableWhenDisabled_decorators, { kind: "accessor", name: "focusableWhenDisabled", static: false, private: false, access: { has: obj => "focusableWhenDisabled" in obj, get: obj => obj.focusableWhenDisabled, set: (obj, value) => { obj.focusableWhenDisabled = value; } }, metadata: _metadata }, _focusableWhenDisabled_initializers, _focusableWhenDisabled_extraInitializers);
-            __esDecorate(this, null, _type_decorators, { kind: "accessor", name: "type", static: false, private: false, access: { has: obj => "type" in obj, get: obj => obj.type, set: (obj, value) => { obj.type = value; } }, metadata: _metadata }, _type_initializers, _type_extraInitializers);
-            __esDecorate(this, null, _href_decorators, { kind: "accessor", name: "href", static: false, private: false, access: { has: obj => "href" in obj, get: obj => obj.href, set: (obj, value) => { obj.href = value; } }, metadata: _metadata }, _href_initializers, _href_extraInitializers);
-            if (_metadata) Object.defineProperty(this, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
-        }
-        static tagName = "dui-button";
-        static shadowRootOptions = {
-            ...LitElement.shadowRootOptions,
-            delegatesFocus: true,
-        };
-        static styles = [base, styles];
-        #disabled_accessor_storage = __runInitializers(this, _disabled_initializers, false);
-        get disabled() { return this.#disabled_accessor_storage; }
-        set disabled(value) { this.#disabled_accessor_storage = value; }
-        #focusableWhenDisabled_accessor_storage = (__runInitializers(this, _disabled_extraInitializers), __runInitializers(this, _focusableWhenDisabled_initializers, false));
-        get focusableWhenDisabled() { return this.#focusableWhenDisabled_accessor_storage; }
-        set focusableWhenDisabled(value) { this.#focusableWhenDisabled_accessor_storage = value; }
-        #type_accessor_storage = (__runInitializers(this, _focusableWhenDisabled_extraInitializers), __runInitializers(this, _type_initializers, "button"));
-        get type() { return this.#type_accessor_storage; }
-        set type(value) { this.#type_accessor_storage = value; }
-        #href_accessor_storage = (__runInitializers(this, _type_extraInitializers), __runInitializers(this, _href_initializers, undefined));
-        get href() { return this.#href_accessor_storage; }
-        set href(value) { this.#href_accessor_storage = value; }
-        #handleClick = (__runInitializers(this, _href_extraInitializers), (e) => {
-            if (this.disabled) {
-                e.preventDefault();
-                e.stopPropagation();
-            }
-        });
-        #onLinkClick = (event) => {
-            if (this.disabled) {
-                event.preventDefault();
-                return;
-            }
-            if (event.metaKey || event.ctrlKey || event.shiftKey || event.altKey) {
-                return;
-            }
-            if (this.href) {
-                event.preventDefault();
-                this.dispatchEvent(navigateEvent({ href: this.href }));
-            }
-        };
-        #renderButton() {
-            const ariaDisabled = this.disabled && this.focusableWhenDisabled;
-            return html `
-      <button
-        part="root"
-        type="${this.type}"
-        ?disabled="${this.disabled && !this.focusableWhenDisabled}"
-        aria-disabled="${ariaDisabled || nothing}"
-        @click="${this.#handleClick}"
-      >
-        <slot></slot>
-      </button>
-    `;
-        }
-        #renderLink() {
-            return html `
-      <a
-        part="root"
-        href="${this.href ?? nothing}"
-        aria-disabled="${this.disabled || nothing}"
-        @click="${this.#onLinkClick}"
-      >
-        <slot></slot>
-      </a>
-    `;
-        }
-        render() {
-            return this.href !== undefined ? this.#renderLink() : this.#renderButton();
-        }
-    };
-})();
-export { DuiButton };
+export class DuiButton extends DuiButtonPrimitive {
+    static styles = [...DuiButtonPrimitive.styles, styles];
+}
+customElements.define(DuiButton.tagName, DuiButton);