@deepfuture/dui-components 0.0.1

package/breadcrumb/breadcrumb-page.js

@@ -0,0 +1,36 @@
+/** 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-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 { this.tagName = "dui-breadcrumb-page"; }
+    static { this.styles = [base, styles]; }
+    render() {
+        return html `
+      <span
+        role="link"
+        aria-disabled="true"
+        aria-current="page"
+        part="root"
+      >
+        <slot></slot>
+      </span>
+    `;
+    }
+}

package/breadcrumb/breadcrumb-separator.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-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";
+    static styles: import("lit").CSSResult[];
+    render(): TemplateResult;
+}

package/breadcrumb/breadcrumb-separator.js

@@ -0,0 +1,36 @@
+/** 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;
+  }
+
+  [part="root"] {
+    display: flex;
+    align-items: center;
+  }
+`;
+/**
+ * `<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 { this.tagName = "dui-breadcrumb-separator"; }
+    static { this.styles = [base, styles]; }
+    render() {
+        return html `
+      <li
+        role="presentation"
+        aria-hidden="true"
+        part="root"
+      >
+        <slot>/</slot>
+      </li>
+    `;
+    }
+}

package/breadcrumb/breadcrumb.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>` — 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";
+    static styles: import("lit").CSSResult[];
+    render(): TemplateResult;
+}

package/breadcrumb/breadcrumb.js

@@ -0,0 +1,38 @@
+/** 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: block;
+  }
+
+  [part="root"] {
+    display: flex;
+    flex-wrap: nowrap;
+    align-items: center;
+    list-style: none;
+    margin: 0;
+    padding: 0;
+  }
+`;
+/**
+ * `<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 { this.tagName = "dui-breadcrumb"; }
+    static { this.styles = [base, styles]; }
+    render() {
+        return html `
+      <nav aria-label="breadcrumb">
+        <ol part="root">
+          <slot></slot>
+        </ol>
+      </nav>
+    `;
+    }
+}

package/breadcrumb/index.d.ts

@@ -0,0 +1,6 @@
+export { DuiBreadcrumb } from "./breadcrumb.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";
+export { DuiBreadcrumbEllipsis } from "./breadcrumb-ellipsis.js";

package/breadcrumb/index.js

@@ -0,0 +1,6 @@
+export { DuiBreadcrumb } from "./breadcrumb.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";
+export { DuiBreadcrumbEllipsis } from "./breadcrumb-ellipsis.js";

package/breadcrumb/register.d.ts

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

package/breadcrumb/register.js

@@ -0,0 +1,14 @@
+import { DuiBreadcrumb, DuiBreadcrumbItem, DuiBreadcrumbLink, DuiBreadcrumbPage, DuiBreadcrumbSeparator, DuiBreadcrumbEllipsis, } from "./index.js";
+const components = [
+    DuiBreadcrumb,
+    DuiBreadcrumbItem,
+    DuiBreadcrumbLink,
+    DuiBreadcrumbPage,
+    DuiBreadcrumbSeparator,
+    DuiBreadcrumbEllipsis,
+];
+for (const comp of components) {
+    if (!customElements.get(comp.tagName)) {
+        customElements.define(comp.tagName, comp);
+    }
+}

package/button/button.d.ts

@@ -0,0 +1,38 @@
+import { LitElement, type TemplateResult } from "lit";
+export type ButtonSize = "sm" | "md" | "lg";
+export type ButtonVariant = "default" | "primary" | "secondary" | "destructive" | "outline" | "ghost" | "link";
+/** 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 with variants, sizes, and theme-aware hover.
+ *
+ * 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;
+    };
+    static styles: import("lit").CSSResult[];
+    accessor variant: ButtonVariant;
+    accessor size: ButtonSize;
+    accessor disabled: boolean;
+    accessor focusableWhenDisabled: boolean;
+    accessor type: "button" | "submit" | "reset";
+    accessor href: string | undefined;
+    render(): TemplateResult;
+}

package/button/button.js

@@ -0,0 +1,143 @@
+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";
+/** 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. */
+const styles = css `
+  :host {
+    display: inline-block;
+  }
+
+  button, a {
+    appearance: none;
+    background: none;
+    border: none;
+    padding: 0;
+    margin: 0;
+    font: inherit;
+    color: inherit;
+    text-decoration: none;
+  }
+
+  [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;
+    transition-property: background, box-shadow, filter, transform, border-color;
+  }
+`;
+/**
+ * `<dui-button>` — A button component with variants, sizes, and theme-aware hover.
+ *
+ * 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 class DuiButton extends LitElement {
+    static { this.tagName = "dui-button"; }
+    static { this.shadowRootOptions = {
+        ...LitElement.shadowRootOptions,
+        delegatesFocus: true,
+    }; }
+    static { this.styles = [base, styles]; }
+    #variant_accessor_storage = "default";
+    get variant() { return this.#variant_accessor_storage; }
+    set variant(value) { this.#variant_accessor_storage = value; }
+    #size_accessor_storage = "md";
+    get size() { return this.#size_accessor_storage; }
+    set size(value) { this.#size_accessor_storage = value; }
+    #disabled_accessor_storage = false;
+    get disabled() { return this.#disabled_accessor_storage; }
+    set disabled(value) { this.#disabled_accessor_storage = value; }
+    #focusableWhenDisabled_accessor_storage = false;
+    get focusableWhenDisabled() { return this.#focusableWhenDisabled_accessor_storage; }
+    set focusableWhenDisabled(value) { this.#focusableWhenDisabled_accessor_storage = value; }
+    #type_accessor_storage = "button";
+    get type() { return this.#type_accessor_storage; }
+    set type(value) { this.#type_accessor_storage = value; }
+    #href_accessor_storage = undefined;
+    get href() { return this.#href_accessor_storage; }
+    set href(value) { this.#href_accessor_storage = value; }
+    #handleClick = (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();
+    }
+}
+__decorate([
+    property({ reflect: true })
+], DuiButton.prototype, "variant", null);
+__decorate([
+    property({ reflect: true })
+], DuiButton.prototype, "size", null);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], DuiButton.prototype, "disabled", null);
+__decorate([
+    property({ type: Boolean, attribute: "focusable-when-disabled" })
+], DuiButton.prototype, "focusableWhenDisabled", null);
+__decorate([
+    property()
+], DuiButton.prototype, "type", null);
+__decorate([
+    property()
+], DuiButton.prototype, "href", null);

package/button/index.d.ts

@@ -0,0 +1,2 @@
+export { DuiButton, navigateEvent } from "./button.js";
+export type { ButtonSize, ButtonVariant } from "./button.js";

package/button/index.js

@@ -0,0 +1 @@
+export { DuiButton, navigateEvent } from "./button.js";

package/button/register.d.ts

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

package/button/register.js

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

package/calendar/calendar.d.ts

@@ -0,0 +1,33 @@
+import { LitElement, type TemplateResult } from "lit";
+export declare const valueChangeEvent: (detail: {
+    value: string;
+}) => CustomEvent<{
+    value: string;
+}>;
+/**
+ * `<dui-calendar>` — A date picker calendar grid.
+ *
+ * @csspart root - The outer container.
+ * @csspart header - Month navigation header.
+ * @csspart heading - The month/year heading text.
+ * @csspart prev - Previous month button.
+ * @csspart next - Next month button.
+ * @csspart grid - The day grid container.
+ * @csspart weekday - Weekday column header.
+ * @csspart day - Individual day button.
+ * @fires value-change - Fired when a date is selected. Detail: { value: string }
+ */
+export declare class DuiCalendar extends LitElement {
+    #private;
+    static tagName: "dui-calendar";
+    static styles: import("lit").CSSResult[];
+    accessor value: string | undefined;
+    accessor defaultValue: string | undefined;
+    accessor min: string | undefined;
+    accessor max: string | undefined;
+    accessor locale: string;
+    accessor disabled: boolean;
+    accessor readOnly: boolean;
+    connectedCallback(): void;
+    render(): TemplateResult;
+}