@deepfuture/dui-templates 1.0.0

package/feed/activity-item.js

@@ -0,0 +1,278 @@
+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/badge";
+/** Status → dot color mapping. */
+const STATUS_COLORS = {
+    success: "var(--accent)",
+    error: "var(--destructive)",
+    warning: "var(--accent-text)",
+    info: "var(--text-3)",
+    pending: "var(--text-3)",
+};
+const DOT_SIZE = "--space-2";
+const TRACK_LEFT = "var(--space-0_5)"; /* center of the dot column */
+const styles = css `
+  :host {
+    display: block;
+    --_dot-color: var(--border-strong);
+    --_dot-size: var(--space-2);
+    /* Total left gutter = dot-size + gap */
+    --_gutter: calc(var(--_dot-size) + var(--space-3));
+  }
+
+  article {
+    position: relative;
+    padding-left: var(--_gutter);
+    padding-bottom: var(--space-4);
+  }
+
+  :host([last]) article {
+    padding-bottom: 0;
+  }
+
+  /* ── Vertical line — runs full height of the article ── */
+  article::before {
+    content: "";
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    /* Center the line under the dot */
+    left: calc(var(--_dot-size) / 2 - 0.5px);
+    width: var(--border-width-thin, 1px);
+    background: var(--border);
+    margin-top: 1rem;
+  }
+
+  /* :host([last]) article::before {
+    display: none;
+  } */
+
+  /* ── Content ── */
+  .content {
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-0_5);
+    min-width: 0;
+  }
+
+  /* ── Header — the dot is a ::before pseudo-element ── */
+  .header {
+    display: flex;
+    align-items: baseline;
+    gap: var(--space-2);
+    min-width: 0;
+  }
+
+  .title {
+    position: relative;
+    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);
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    min-width: 0;
+  }
+
+  .title::before {
+    content: "";
+    position: absolute;
+    width: var(--_dot-size);
+    height: var(--_dot-size);
+    border-radius: var(--radius-full);
+    background: var(--_dot-color);
+    /* Position: pull left into the gutter, vertically center with the title line */
+    left: calc(-1 * var(--_gutter));
+    /* Align to the first line of text: offset by half line-height minus half dot */
+    top: calc(var(--text-sm) * 0.35);
+  }
+
+
+  .timestamp {
+    font-family: var(--font-sans);
+    font-size: var(--text-xs);
+    letter-spacing: var(--letter-spacing-wide);
+    line-height: var(--line-height-snug);
+    color: var(--text-3);
+    flex-shrink: 0;
+    white-space: nowrap;
+  }
+
+  .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-2);
+    margin: 0;
+  }
+
+  .actions {
+    display: flex;
+    align-items: center;
+    gap: var(--space-2);
+    padding-top: var(--space-1);
+  }
+
+  .actions[hidden] {
+    display: none;
+  }
+`;
+/**
+ * `<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.
+ */
+let DuiActivityItem = (() => {
+    let _classSuper = LitElement;
+    let _title_decorators;
+    let _title_initializers = [];
+    let _title_extraInitializers = [];
+    let _timestamp_decorators;
+    let _timestamp_initializers = [];
+    let _timestamp_extraInitializers = [];
+    let _description_decorators;
+    let _description_initializers = [];
+    let _description_extraInitializers = [];
+    let _status_decorators;
+    let _status_initializers = [];
+    let _status_extraInitializers = [];
+    let _statusLabel_decorators;
+    let _statusLabel_initializers = [];
+    let _statusLabel_extraInitializers = [];
+    let _last_decorators;
+    let _last_initializers = [];
+    let _last_extraInitializers = [];
+    return class DuiActivityItem extends _classSuper {
+        static {
+            const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
+            _title_decorators = [property()];
+            _timestamp_decorators = [property()];
+            _description_decorators = [property()];
+            _status_decorators = [property()];
+            _statusLabel_decorators = [property({ attribute: "status-label" })];
+            _last_decorators = [property({ type: Boolean, reflect: true })];
+            __esDecorate(this, null, _title_decorators, { kind: "accessor", name: "title", static: false, private: false, access: { has: obj => "title" in obj, get: obj => obj.title, set: (obj, value) => { obj.title = value; } }, metadata: _metadata }, _title_initializers, _title_extraInitializers);
+            __esDecorate(this, null, _timestamp_decorators, { kind: "accessor", name: "timestamp", static: false, private: false, access: { has: obj => "timestamp" in obj, get: obj => obj.timestamp, set: (obj, value) => { obj.timestamp = value; } }, metadata: _metadata }, _timestamp_initializers, _timestamp_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, _status_decorators, { kind: "accessor", name: "status", static: false, private: false, access: { has: obj => "status" in obj, get: obj => obj.status, set: (obj, value) => { obj.status = value; } }, metadata: _metadata }, _status_initializers, _status_extraInitializers);
+            __esDecorate(this, null, _statusLabel_decorators, { kind: "accessor", name: "statusLabel", static: false, private: false, access: { has: obj => "statusLabel" in obj, get: obj => obj.statusLabel, set: (obj, value) => { obj.statusLabel = value; } }, metadata: _metadata }, _statusLabel_initializers, _statusLabel_extraInitializers);
+            __esDecorate(this, null, _last_decorators, { kind: "accessor", name: "last", static: false, private: false, access: { has: obj => "last" in obj, get: obj => obj.last, set: (obj, value) => { obj.last = value; } }, metadata: _metadata }, _last_initializers, _last_extraInitializers);
+            if (_metadata) Object.defineProperty(this, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
+        }
+        static tagName = "dui-activity-item";
+        static styles = [base, styles];
+        #title_accessor_storage = __runInitializers(this, _title_initializers, "");
+        /** Event title. */
+        get title() { return this.#title_accessor_storage; }
+        set title(value) { this.#title_accessor_storage = value; }
+        #timestamp_accessor_storage = (__runInitializers(this, _title_extraInitializers), __runInitializers(this, _timestamp_initializers, ""));
+        /** Display timestamp (e.g. "2 min ago", "14:23 UTC"). */
+        get timestamp() { return this.#timestamp_accessor_storage; }
+        set timestamp(value) { this.#timestamp_accessor_storage = value; }
+        #description_accessor_storage = (__runInitializers(this, _timestamp_extraInitializers), __runInitializers(this, _description_initializers, ""));
+        /** Optional description text. */
+        get description() { return this.#description_accessor_storage; }
+        set description(value) { this.#description_accessor_storage = value; }
+        #status_accessor_storage = (__runInitializers(this, _description_extraInitializers), __runInitializers(this, _status_initializers, ""));
+        /** Status — determines dot color (success | error | warning | info | pending). */
+        get status() { return this.#status_accessor_storage; }
+        set status(value) { this.#status_accessor_storage = value; }
+        #statusLabel_accessor_storage = (__runInitializers(this, _status_extraInitializers), __runInitializers(this, _statusLabel_initializers, ""));
+        /** Optional status label — renders as a badge next to the title. */
+        get statusLabel() { return this.#statusLabel_accessor_storage; }
+        set statusLabel(value) { this.#statusLabel_accessor_storage = value; }
+        #last_accessor_storage = (__runInitializers(this, _statusLabel_extraInitializers), __runInitializers(this, _last_initializers, false));
+        /** Mark as the last item to hide the trailing timeline line. */
+        get last() { return this.#last_accessor_storage; }
+        set last(value) { this.#last_accessor_storage = value; }
+        #onSlotChange(e) {
+            const slot = e.target;
+            slot.parentElement.hidden = slot.assignedElements().length === 0;
+        }
+        render() {
+            const dotColor = STATUS_COLORS[this.status.toLowerCase()] ?? undefined;
+            const dotStyle = dotColor ? `--_dot-color: ${dotColor}` : "";
+            // Map status to badge variant
+            const badgeVariant = this.status === "error" ? "danger"
+                : this.status === "success" ? "primary"
+                    : "neutral";
+            return html `
+      <article part="article" style=${dotStyle}>
+        <div class="content">
+          <div class="header">
+            <span class="title" part="title">${this.title}</span>
+            ${this.statusLabel
+                ? html `<dui-badge appearance="soft" size="sm" variant=${badgeVariant}>${this.statusLabel}</dui-badge>`
+                : nothing}
+            ${this.timestamp
+                ? html `<time class="timestamp" part="timestamp">${this.timestamp}</time>`
+                : nothing}
+          </div>
+
+          ${this.description
+                ? html `<p class="description" part="description">${this.description}</p>`
+                : nothing}
+
+          <div class="actions" hidden>
+            <slot name="actions" @slotchange=${this.#onSlotChange}></slot>
+          </div>
+        </div>
+      </article>
+    `;
+        }
+        constructor() {
+            super(...arguments);
+            __runInitializers(this, _last_extraInitializers);
+        }
+    };
+})();
+export { DuiActivityItem };
+customElements.define(DuiActivityItem.tagName, DuiActivityItem);

package/feed/feed-item.d.ts

@@ -0,0 +1,32 @@
+import { LitElement, type TemplateResult } from "lit";
+import "@deepfuture/dui-components/badge";
+/**
+ * `<dui-feed-item>` — An event card for feeds and monitoring dashboards.
+ *
+ * Renders a title, subtitle (source/location), timestamp, optional category
+ * and severity badges, and an optional description body.
+ *
+ * @slot actions - Optional action buttons or links below the body.
+ * @csspart article - The outer article container.
+ * @csspart header - The title + badges row.
+ * @csspart meta - The subtitle + timestamp row.
+ * @csspart body - The description paragraph.
+ */
+export declare class DuiFeedItem extends LitElement {
+    #private;
+    static tagName: "dui-feed-item";
+    static styles: import("lit").CSSResult[];
+    /** Primary label for the event. */
+    accessor title: string;
+    /** Secondary context — location, source, or origin. */
+    accessor subtitle: string;
+    /** Display timestamp (e.g. "2 min ago", "14:23 UTC"). */
+    accessor timestamp: string;
+    /** Category label — renders as a neutral badge. */
+    accessor category: string;
+    /** Severity level — maps to badge variant (critical | high | medium | low). */
+    accessor severity: string;
+    /** Optional body text. */
+    accessor description: string;
+    render(): TemplateResult;
+}

package/feed/feed-item.js

@@ -0,0 +1,260 @@
+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/badge";
+/**
+ * Severity → badge variant + appearance mapping.
+ * Uses the default theme's variant vocabulary.
+ */
+const SEVERITY_MAP = {
+    critical: { variant: "danger", appearance: "filled" },
+    high: { variant: "danger", appearance: "ghost" },
+    medium: { variant: "primary", appearance: "ghost" },
+    low: { variant: "neutral", appearance: "ghost" },
+};
+const styles = css `
+  :host {
+    display: block;
+  }
+
+  article {
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-0_5);
+    padding: var(--space-3);
+    border: var(--border-width-thin) solid var(--border);
+    border-radius: var(--radius-md);
+    background: var(--surface-1);
+    transition: background var(--duration-fast) ease;
+  }
+
+  article:hover {
+    background: var(--surface-2);
+  }
+
+  header {
+    display: flex;
+    align-items: center;
+    gap: var(--space-2);
+    min-width: 0;
+  }
+
+  .title {
+    font-family: var(--font-sans);
+    font-size: var(--text-sm);
+    font-weight: var(--font-weight-semibold);
+    letter-spacing: var(--letter-spacing-wide);
+    line-height: var(--line-height-snug);
+    color: var(--foreground);
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    min-width: 0;
+    flex: 1;
+  }
+
+  .badges {
+    display: flex;
+    align-items: center;
+    gap: var(--space-1_5);
+    flex-shrink: 0;
+    justify-self: flex-end;
+  }
+
+  .meta {
+    display: flex;
+    align-items: center;
+    gap: var(--space-1);
+    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-2);
+  }
+
+  .meta-separator {
+    color: var(--text-3);
+  }
+
+  .body {
+    font-family: var(--font-sans);
+    font-size: var(--text-sm);
+    letter-spacing: var(--letter-spacing-wide);
+    line-height: var(--line-height-normal);
+    color: var(--text-1);
+    margin: 0;
+  }
+
+  .actions {
+    display: flex;
+    align-items: center;
+    gap: var(--space-2);
+    padding-top: var(--space-1);
+  }
+
+  .actions[hidden] {
+    display: none;
+  }
+`;
+/**
+ * `<dui-feed-item>` — An event card for feeds and monitoring dashboards.
+ *
+ * Renders a title, subtitle (source/location), timestamp, optional category
+ * and severity badges, and an optional description body.
+ *
+ * @slot actions - Optional action buttons or links below the body.
+ * @csspart article - The outer article container.
+ * @csspart header - The title + badges row.
+ * @csspart meta - The subtitle + timestamp row.
+ * @csspart body - The description paragraph.
+ */
+let DuiFeedItem = (() => {
+    let _classSuper = LitElement;
+    let _title_decorators;
+    let _title_initializers = [];
+    let _title_extraInitializers = [];
+    let _subtitle_decorators;
+    let _subtitle_initializers = [];
+    let _subtitle_extraInitializers = [];
+    let _timestamp_decorators;
+    let _timestamp_initializers = [];
+    let _timestamp_extraInitializers = [];
+    let _category_decorators;
+    let _category_initializers = [];
+    let _category_extraInitializers = [];
+    let _severity_decorators;
+    let _severity_initializers = [];
+    let _severity_extraInitializers = [];
+    let _description_decorators;
+    let _description_initializers = [];
+    let _description_extraInitializers = [];
+    return class DuiFeedItem extends _classSuper {
+        static {
+            const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
+            _title_decorators = [property()];
+            _subtitle_decorators = [property()];
+            _timestamp_decorators = [property()];
+            _category_decorators = [property()];
+            _severity_decorators = [property()];
+            _description_decorators = [property()];
+            __esDecorate(this, null, _title_decorators, { kind: "accessor", name: "title", static: false, private: false, access: { has: obj => "title" in obj, get: obj => obj.title, set: (obj, value) => { obj.title = value; } }, metadata: _metadata }, _title_initializers, _title_extraInitializers);
+            __esDecorate(this, null, _subtitle_decorators, { kind: "accessor", name: "subtitle", static: false, private: false, access: { has: obj => "subtitle" in obj, get: obj => obj.subtitle, set: (obj, value) => { obj.subtitle = value; } }, metadata: _metadata }, _subtitle_initializers, _subtitle_extraInitializers);
+            __esDecorate(this, null, _timestamp_decorators, { kind: "accessor", name: "timestamp", static: false, private: false, access: { has: obj => "timestamp" in obj, get: obj => obj.timestamp, set: (obj, value) => { obj.timestamp = value; } }, metadata: _metadata }, _timestamp_initializers, _timestamp_extraInitializers);
+            __esDecorate(this, null, _category_decorators, { kind: "accessor", name: "category", static: false, private: false, access: { has: obj => "category" in obj, get: obj => obj.category, set: (obj, value) => { obj.category = value; } }, metadata: _metadata }, _category_initializers, _category_extraInitializers);
+            __esDecorate(this, null, _severity_decorators, { kind: "accessor", name: "severity", static: false, private: false, access: { has: obj => "severity" in obj, get: obj => obj.severity, set: (obj, value) => { obj.severity = value; } }, metadata: _metadata }, _severity_initializers, _severity_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);
+            if (_metadata) Object.defineProperty(this, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
+        }
+        static tagName = "dui-feed-item";
+        static styles = [base, styles];
+        #title_accessor_storage = __runInitializers(this, _title_initializers, "");
+        /** Primary label for the event. */
+        get title() { return this.#title_accessor_storage; }
+        set title(value) { this.#title_accessor_storage = value; }
+        #subtitle_accessor_storage = (__runInitializers(this, _title_extraInitializers), __runInitializers(this, _subtitle_initializers, ""));
+        /** Secondary context — location, source, or origin. */
+        get subtitle() { return this.#subtitle_accessor_storage; }
+        set subtitle(value) { this.#subtitle_accessor_storage = value; }
+        #timestamp_accessor_storage = (__runInitializers(this, _subtitle_extraInitializers), __runInitializers(this, _timestamp_initializers, ""));
+        /** Display timestamp (e.g. "2 min ago", "14:23 UTC"). */
+        get timestamp() { return this.#timestamp_accessor_storage; }
+        set timestamp(value) { this.#timestamp_accessor_storage = value; }
+        #category_accessor_storage = (__runInitializers(this, _timestamp_extraInitializers), __runInitializers(this, _category_initializers, ""));
+        /** Category label — renders as a neutral badge. */
+        get category() { return this.#category_accessor_storage; }
+        set category(value) { this.#category_accessor_storage = value; }
+        #severity_accessor_storage = (__runInitializers(this, _category_extraInitializers), __runInitializers(this, _severity_initializers, ""));
+        /** Severity level — maps to badge variant (critical | high | medium | low). */
+        get severity() { return this.#severity_accessor_storage; }
+        set severity(value) { this.#severity_accessor_storage = value; }
+        #description_accessor_storage = (__runInitializers(this, _severity_extraInitializers), __runInitializers(this, _description_initializers, ""));
+        /** Optional body text. */
+        get description() { return this.#description_accessor_storage; }
+        set description(value) { this.#description_accessor_storage = value; }
+        #onSlotChange(e) {
+            const slot = e.target;
+            slot.parentElement.hidden = slot.assignedElements().length === 0;
+        }
+        render() {
+            const sev = SEVERITY_MAP[this.severity.toLowerCase()];
+            return html `
+      <article part="article">
+        <header part="header">
+          <span class="title">${this.title}</span>
+          <div class="badges">
+            ${this.category
+                ? html `<dui-badge appearance="soft">${this.category}</dui-badge>`
+                : nothing}
+            ${sev
+                ? html `<dui-badge variant=${sev.variant} appearance=${sev.appearance}>${this.severity}</dui-badge>`
+                : nothing}
+          </div>
+        </header>
+
+        ${this.subtitle || this.timestamp
+                ? html `
+            <div class="meta" part="meta">
+              ${this.subtitle ? html `<span>${this.subtitle}</span>` : nothing}
+              ${this.subtitle && this.timestamp
+                    ? html `<span class="meta-separator">·</span>`
+                    : nothing}
+              ${this.timestamp
+                    ? html `<time>${this.timestamp}</time>`
+                    : nothing}
+            </div>`
+                : nothing}
+
+        ${this.description
+                ? html `<p class="body" part="body">
+              <slot name="description">${this.description}</slot>
+            </p>`
+                : nothing}
+
+        <div class="actions" hidden>
+          <slot name="actions" @slotchange=${this.#onSlotChange}></slot>
+        </div>
+      </article>
+    `;
+        }
+        constructor() {
+            super(...arguments);
+            __runInitializers(this, _description_extraInitializers);
+        }
+    };
+})();
+export { DuiFeedItem };
+customElements.define(DuiFeedItem.tagName, DuiFeedItem);

package/feed/headline-item.d.ts

@@ -0,0 +1,27 @@
+import { LitElement, type TemplateResult } from "lit";
+/**
+ * `<dui-headline-item>` — A minimal headline row: title, source, and timestamp.
+ *
+ * Designed for dense headline lists and news tickers where space is at a premium.
+ * Renders as a single horizontal row with the title taking available space and
+ * source + timestamp right-aligned.
+ *
+ * @slot actions - Optional trailing action buttons or links.
+ * @csspart article - The outer article container.
+ * @csspart title - The headline title text.
+ * @csspart meta - The source + timestamp row.
+ */
+export declare class DuiHeadlineItem extends LitElement {
+    #private;
+    static tagName: "dui-headline-item";
+    static styles: import("lit").CSSResult[];
+    /** Primary headline text. */
+    accessor title: string;
+    /** Source or publication name. */
+    accessor source: string;
+    /** Display timestamp (e.g. "2 min ago", "14:23 UTC"). */
+    accessor timestamp: string;
+    /** Optional URL — when set, the title renders as a link. */
+    accessor href: string;
+    render(): TemplateResult;
+}