@deepfuture/dui-templates 1.0.0

package/data/key-value.d.ts

@@ -0,0 +1,27 @@
+import { LitElement, type TemplateResult } from "lit";
+/**
+ * `<dui-key-value>` — A label–value pair for metadata display.
+ *
+ * Renders a muted label and a prominent value. Supports two layouts:
+ * `stacked` (default — label above value) and `inline` (label left, value right).
+ *
+ * Compose inside `<dui-key-value-group>` for grid layouts.
+ *
+ * @csspart pair - The outer container.
+ * @csspart label - The label text.
+ * @csspart value - The value text.
+ * @csspart description - The description text.
+ */
+export declare class DuiKeyValue extends LitElement {
+    static tagName: "dui-key-value";
+    static styles: import("lit").CSSResult[];
+    /** The label text (e.g. "Status", "Region", "Created"). */
+    accessor label: string;
+    /** The value text (e.g. "Active", "North America", "Jan 15, 2025"). */
+    accessor value: string;
+    /** Optional supporting description below the value. */
+    accessor description: string;
+    /** Layout mode: "stacked" (label above value) or "inline" (side by side). */
+    accessor layout: "stacked" | "inline";
+    render(): TemplateResult;
+}

package/data/key-value.js

@@ -0,0 +1,165 @@
+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";
+const styles = css `
+  :host {
+    display: block;
+  }
+
+  .pair {
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-0_5);
+  }
+
+  :host([layout="inline"]) .pair {
+    flex-direction: row;
+    align-items: baseline;
+    justify-content: space-between;
+    gap: var(--space-3);
+  }
+
+  .label {
+    font-family: var(--font-sans);
+    font-size: var(--text-xs);
+    font-weight: var(--font-weight-medium);
+    letter-spacing: var(--letter-spacing-wide);
+    line-height: var(--line-height-normal);
+    color: var(--text-2);
+  }
+
+  .value {
+    font-family: var(--font-sans);
+    font-size: var(--text-sm);
+    font-weight: var(--font-weight-medium);
+    letter-spacing: var(--letter-spacing-wide);
+    line-height: var(--line-height-snug);
+    color: var(--foreground);
+  }
+
+  :host([layout="inline"]) .value {
+    text-align: end;
+  }
+
+  .description {
+    font-family: var(--font-sans);
+    font-size: var(--text-xs);
+    letter-spacing: var(--letter-spacing-wide);
+    line-height: var(--line-height-normal);
+    color: var(--text-3);
+    margin: 0;
+  }
+`;
+/**
+ * `<dui-key-value>` — A label–value pair for metadata display.
+ *
+ * Renders a muted label and a prominent value. Supports two layouts:
+ * `stacked` (default — label above value) and `inline` (label left, value right).
+ *
+ * Compose inside `<dui-key-value-group>` for grid layouts.
+ *
+ * @csspart pair - The outer container.
+ * @csspart label - The label text.
+ * @csspart value - The value text.
+ * @csspart description - The description text.
+ */
+let DuiKeyValue = (() => {
+    let _classSuper = LitElement;
+    let _label_decorators;
+    let _label_initializers = [];
+    let _label_extraInitializers = [];
+    let _value_decorators;
+    let _value_initializers = [];
+    let _value_extraInitializers = [];
+    let _description_decorators;
+    let _description_initializers = [];
+    let _description_extraInitializers = [];
+    let _layout_decorators;
+    let _layout_initializers = [];
+    let _layout_extraInitializers = [];
+    return class DuiKeyValue extends _classSuper {
+        static {
+            const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
+            _label_decorators = [property()];
+            _value_decorators = [property()];
+            _description_decorators = [property()];
+            _layout_decorators = [property({ reflect: true })];
+            __esDecorate(this, null, _label_decorators, { kind: "accessor", name: "label", static: false, private: false, access: { has: obj => "label" in obj, get: obj => obj.label, set: (obj, value) => { obj.label = value; } }, metadata: _metadata }, _label_initializers, _label_extraInitializers);
+            __esDecorate(this, null, _value_decorators, { kind: "accessor", name: "value", static: false, private: false, access: { has: obj => "value" in obj, get: obj => obj.value, set: (obj, value) => { obj.value = value; } }, metadata: _metadata }, _value_initializers, _value_extraInitializers);
+            __esDecorate(this, null, _description_decorators, { kind: "accessor", name: "description", static: false, private: false, access: { has: obj => "description" in obj, get: obj => obj.description, set: (obj, value) => { obj.description = value; } }, metadata: _metadata }, _description_initializers, _description_extraInitializers);
+            __esDecorate(this, null, _layout_decorators, { kind: "accessor", name: "layout", static: false, private: false, access: { has: obj => "layout" in obj, get: obj => obj.layout, set: (obj, value) => { obj.layout = value; } }, metadata: _metadata }, _layout_initializers, _layout_extraInitializers);
+            if (_metadata) Object.defineProperty(this, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
+        }
+        static tagName = "dui-key-value";
+        static styles = [base, styles];
+        #label_accessor_storage = __runInitializers(this, _label_initializers, "");
+        /** The label text (e.g. "Status", "Region", "Created"). */
+        get label() { return this.#label_accessor_storage; }
+        set label(value) { this.#label_accessor_storage = value; }
+        #value_accessor_storage = (__runInitializers(this, _label_extraInitializers), __runInitializers(this, _value_initializers, ""));
+        /** The value text (e.g. "Active", "North America", "Jan 15, 2025"). */
+        get value() { return this.#value_accessor_storage; }
+        set value(value) { this.#value_accessor_storage = value; }
+        #description_accessor_storage = (__runInitializers(this, _value_extraInitializers), __runInitializers(this, _description_initializers, ""));
+        /** Optional supporting description below the value. */
+        get description() { return this.#description_accessor_storage; }
+        set description(value) { this.#description_accessor_storage = value; }
+        #layout_accessor_storage = (__runInitializers(this, _description_extraInitializers), __runInitializers(this, _layout_initializers, "stacked"));
+        /** Layout mode: "stacked" (label above value) or "inline" (side by side). */
+        get layout() { return this.#layout_accessor_storage; }
+        set layout(value) { this.#layout_accessor_storage = value; }
+        render() {
+            return html `
+      <div class="pair" part="pair">
+        <span class="label" part="label">${this.label}</span>
+        <span class="value" part="value">
+          <slot>${this.value}</slot>
+        </span>
+      </div>
+      ${this.description
+                ? html `<p class="description" part="description">${this.description}</p>`
+                : nothing}
+    `;
+        }
+        constructor() {
+            super(...arguments);
+            __runInitializers(this, _layout_extraInitializers);
+        }
+    };
+})();
+export { DuiKeyValue };
+customElements.define(DuiKeyValue.tagName, DuiKeyValue);

package/data/market-table.d.ts

@@ -0,0 +1,40 @@
+import { LitElement, type TemplateResult } from "lit";
+import "@deepfuture/dui-components/icon";
+/** A single row in the market table. */
+export interface MarketRow {
+    /** Ticker symbol (e.g. "AAPL", "BTC"). */
+    symbol: string;
+    /** Full name (e.g. "Apple Inc."). Optional. */
+    name?: string;
+    /** Current price. */
+    price: number;
+    /** Absolute change (positive or negative). */
+    change: number;
+    /** Percentage change (positive or negative). */
+    changePercent: number;
+}
+/**
+ * `<dui-market-table>` — A compact financial ticker table.
+ *
+ * Renders rows of symbols with prices, absolute change, and percentage change.
+ * Positive changes are colored with the accent token; negative with destructive.
+ * Each row includes a directional arrow indicator.
+ *
+ * @csspart table - The `<table>` element.
+ * @csspart thead - The `<thead>` element.
+ * @csspart tbody - The `<tbody>` element.
+ */
+export declare class DuiMarketTable extends LitElement {
+    #private;
+    static tagName: "dui-market-table";
+    static styles: import("lit").CSSResult[];
+    /** Array of market data rows. */
+    accessor data: MarketRow[];
+    /** Number of decimal places for prices. */
+    accessor pricePrecision: number;
+    /** Currency symbol prepended to prices. */
+    accessor currencySymbol: string;
+    /** Text shown when data is empty. */
+    accessor emptyText: string;
+    render(): TemplateResult;
+}

package/data/market-table.js

@@ -0,0 +1,270 @@
+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 "@deepfuture/dui-components/icon";
+const styles = css `
+  :host {
+    display: block;
+  }
+
+  table {
+    width: 100%;
+    border-collapse: collapse;
+    font-family: var(--font-sans);
+    font-size: var(--text-sm);
+    letter-spacing: var(--letter-spacing-wide);
+  }
+
+  thead th {
+    padding: var(--space-2) var(--space-3);
+    font-size: var(--text-xs);
+    font-weight: var(--font-weight-medium);
+    color: var(--text-3);
+    text-align: left;
+    border-bottom: var(--border-width-thin) solid var(--border);
+    white-space: nowrap;
+  }
+
+  thead th.align-end {
+    text-align: right;
+  }
+
+  tbody tr {
+    transition: background var(--duration-fast) ease;
+  }
+
+  tbody tr:hover {
+    background: var(--surface-2);
+  }
+
+  tbody td {
+    padding: var(--space-2) var(--space-3);
+    border-bottom: var(--border-width-thin) solid var(--border);
+    line-height: var(--line-height-snug);
+    white-space: nowrap;
+  }
+
+  tbody tr:last-child td {
+    border-bottom: none;
+  }
+
+  .symbol {
+    font-weight: var(--font-weight-semibold);
+    color: var(--foreground);
+  }
+
+  .name {
+    color: var(--text-2);
+    font-size: var(--text-xs);
+    margin-left: var(--space-1);
+  }
+
+  .price {
+    text-align: right;
+    font-variant-numeric: tabular-nums;
+    color: var(--foreground);
+  }
+
+  .change {
+    text-align: right;
+    font-variant-numeric: tabular-nums;
+  }
+
+  .pct {
+    text-align: right;
+    font-variant-numeric: tabular-nums;
+    font-weight: var(--font-weight-medium);
+  }
+
+  .positive {
+    color: var(--accent-text);
+  }
+
+  .negative {
+    color: var(--destructive-text);
+  }
+
+  .neutral {
+    color: var(--text-3);
+  }
+
+  .arrow {
+    display: inline-flex;
+    align-items: center;
+    vertical-align: middle;
+    margin-right: var(--space-0_5);
+  }
+
+  .empty {
+    padding: var(--space-6) var(--space-4);
+    text-align: center;
+    color: var(--text-3);
+    font-size: var(--text-sm);
+  }
+`;
+/**
+ * `<dui-market-table>` — A compact financial ticker table.
+ *
+ * Renders rows of symbols with prices, absolute change, and percentage change.
+ * Positive changes are colored with the accent token; negative with destructive.
+ * Each row includes a directional arrow indicator.
+ *
+ * @csspart table - The `<table>` element.
+ * @csspart thead - The `<thead>` element.
+ * @csspart tbody - The `<tbody>` element.
+ */
+let DuiMarketTable = (() => {
+    let _classSuper = LitElement;
+    let _data_decorators;
+    let _data_initializers = [];
+    let _data_extraInitializers = [];
+    let _pricePrecision_decorators;
+    let _pricePrecision_initializers = [];
+    let _pricePrecision_extraInitializers = [];
+    let _currencySymbol_decorators;
+    let _currencySymbol_initializers = [];
+    let _currencySymbol_extraInitializers = [];
+    let _emptyText_decorators;
+    let _emptyText_initializers = [];
+    let _emptyText_extraInitializers = [];
+    return class DuiMarketTable extends _classSuper {
+        static {
+            const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
+            _data_decorators = [property({ type: Array })];
+            _pricePrecision_decorators = [property({ type: Number, attribute: "price-precision" })];
+            _currencySymbol_decorators = [property({ attribute: "currency-symbol" })];
+            _emptyText_decorators = [property({ attribute: "empty-text" })];
+            __esDecorate(this, null, _data_decorators, { kind: "accessor", name: "data", static: false, private: false, access: { has: obj => "data" in obj, get: obj => obj.data, set: (obj, value) => { obj.data = value; } }, metadata: _metadata }, _data_initializers, _data_extraInitializers);
+            __esDecorate(this, null, _pricePrecision_decorators, { kind: "accessor", name: "pricePrecision", static: false, private: false, access: { has: obj => "pricePrecision" in obj, get: obj => obj.pricePrecision, set: (obj, value) => { obj.pricePrecision = value; } }, metadata: _metadata }, _pricePrecision_initializers, _pricePrecision_extraInitializers);
+            __esDecorate(this, null, _currencySymbol_decorators, { kind: "accessor", name: "currencySymbol", static: false, private: false, access: { has: obj => "currencySymbol" in obj, get: obj => obj.currencySymbol, set: (obj, value) => { obj.currencySymbol = value; } }, metadata: _metadata }, _currencySymbol_initializers, _currencySymbol_extraInitializers);
+            __esDecorate(this, null, _emptyText_decorators, { kind: "accessor", name: "emptyText", static: false, private: false, access: { has: obj => "emptyText" in obj, get: obj => obj.emptyText, set: (obj, value) => { obj.emptyText = value; } }, metadata: _metadata }, _emptyText_initializers, _emptyText_extraInitializers);
+            if (_metadata) Object.defineProperty(this, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
+        }
+        static tagName = "dui-market-table";
+        static styles = [base, styles];
+        #data_accessor_storage = __runInitializers(this, _data_initializers, []);
+        /** Array of market data rows. */
+        get data() { return this.#data_accessor_storage; }
+        set data(value) { this.#data_accessor_storage = value; }
+        #pricePrecision_accessor_storage = (__runInitializers(this, _data_extraInitializers), __runInitializers(this, _pricePrecision_initializers, 2));
+        /** Number of decimal places for prices. */
+        get pricePrecision() { return this.#pricePrecision_accessor_storage; }
+        set pricePrecision(value) { this.#pricePrecision_accessor_storage = value; }
+        #currencySymbol_accessor_storage = (__runInitializers(this, _pricePrecision_extraInitializers), __runInitializers(this, _currencySymbol_initializers, "$"));
+        /** Currency symbol prepended to prices. */
+        get currencySymbol() { return this.#currencySymbol_accessor_storage; }
+        set currencySymbol(value) { this.#currencySymbol_accessor_storage = value; }
+        #emptyText_accessor_storage = (__runInitializers(this, _currencySymbol_extraInitializers), __runInitializers(this, _emptyText_initializers, "No market data"));
+        /** Text shown when data is empty. */
+        get emptyText() { return this.#emptyText_accessor_storage; }
+        set emptyText(value) { this.#emptyText_accessor_storage = value; }
+        #formatPrice(price) {
+            return `${this.currencySymbol}${price.toFixed(this.pricePrecision)}`;
+        }
+        #formatChange(change) {
+            const sign = change > 0 ? "+" : "";
+            return `${sign}${change.toFixed(this.pricePrecision)}`;
+        }
+        #formatPercent(pct) {
+            const sign = pct > 0 ? "+" : "";
+            return `${sign}${pct.toFixed(2)}%`;
+        }
+        #changeClass(value) {
+            if (value > 0)
+                return "positive";
+            if (value < 0)
+                return "negative";
+            return "neutral";
+        }
+        #renderArrow(change) {
+            if (change === 0)
+                return nothing;
+            const path = change > 0
+                ? "M12 19V5M5 12l7-7 7 7" // up arrow
+                : "M12 5v14M19 12l-7 7-7-7"; // down arrow
+            return html `
+      <span class="arrow">
+        <svg width="12" height="12" viewBox="0 0 24 24" fill="none"
+          stroke="currentColor" stroke-width="2.5" stroke-linecap="round"
+          stroke-linejoin="round"><path d="${path}"/></svg>
+      </span>
+    `;
+        }
+        render() {
+            if (this.data.length === 0) {
+                return html `<div class="empty">${this.emptyText}</div>`;
+            }
+            return html `
+      <table part="table">
+        <thead part="thead">
+          <tr>
+            <th>Symbol</th>
+            <th class="align-end">Price</th>
+            <th class="align-end">Change</th>
+            <th class="align-end">%</th>
+          </tr>
+        </thead>
+        <tbody part="tbody">
+          ${this.data.map(row => {
+                const cls = this.#changeClass(row.change);
+                return html `
+              <tr>
+                <td>
+                  <span class="symbol">${row.symbol}</span>${row.name
+                    ? html `<span class="name">${row.name}</span>`
+                    : nothing}
+                </td>
+                <td class="price">${this.#formatPrice(row.price)}</td>
+                <td class="change ${cls}">
+                  ${this.#renderArrow(row.change)}${this.#formatChange(row.change)}
+                </td>
+                <td class="pct ${cls}">${this.#formatPercent(row.changePercent)}</td>
+              </tr>
+            `;
+            })}
+        </tbody>
+      </table>
+    `;
+        }
+        constructor() {
+            super(...arguments);
+            __runInitializers(this, _emptyText_extraInitializers);
+        }
+    };
+})();
+export { DuiMarketTable };
+customElements.define(DuiMarketTable.tagName, DuiMarketTable);

package/feed/activity-item.d.ts

@@ -0,0 +1,35 @@
+import { LitElement, type TemplateResult } from "lit";
+import "@deepfuture/dui-components/badge";
+/**
+ * `<dui-activity-item>` — A timestamped event in a vertical timeline.
+ *
+ * Renders a timeline dot + connecting line on the left, with a title,
+ * timestamp, optional description, and optional status badge on the right.
+ * The dot is a pseudo-element of the header row so it always aligns with
+ * the title text. Stack multiple activity-items to form a timeline. Set
+ * `last` on the final item to hide the trailing line.
+ *
+ * @slot actions - Optional action buttons or links.
+ * @csspart article - The outer container.
+ * @csspart title - The event title.
+ * @csspart timestamp - The timestamp text.
+ * @csspart description - The description paragraph.
+ */
+export declare class DuiActivityItem extends LitElement {
+    #private;
+    static tagName: "dui-activity-item";
+    static styles: import("lit").CSSResult[];
+    /** Event title. */
+    accessor title: string;
+    /** Display timestamp (e.g. "2 min ago", "14:23 UTC"). */
+    accessor timestamp: string;
+    /** Optional description text. */
+    accessor description: string;
+    /** Status — determines dot color (success | error | warning | info | pending). */
+    accessor status: string;
+    /** Optional status label — renders as a badge next to the title. */
+    accessor statusLabel: string;
+    /** Mark as the last item to hide the trailing timeline line. */
+    accessor last: boolean;
+    render(): TemplateResult;
+}