@deepfuture/dui-templates 1.0.0

package/dashboard/page-header.js

@@ -0,0 +1,218 @@
+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/separator";
+const styles = css `
+  :host {
+    display: block;
+  }
+
+  header {
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-3);
+    padding: var(--space-5) var(--space-6);
+  }
+
+  /* ── Title row ── */
+  .title-row {
+    display: flex;
+    align-items: flex-start;
+    justify-content: space-between;
+    gap: var(--space-4);
+  }
+
+  .title-group {
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-1);
+    min-width: 0;
+  }
+
+  .title {
+    font-family: var(--font-sans);
+    font-size: var(--text-2xl);
+    font-weight: var(--font-weight-semibold);
+    letter-spacing: var(--letter-spacing-normal);
+    line-height: var(--line-height-tight);
+    color: var(--foreground);
+    margin: 0;
+  }
+
+  .subtitle {
+    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-2);
+    margin: 0;
+  }
+
+  /* ── Actions slot ── */
+  .actions {
+    display: flex;
+    align-items: center;
+    gap: var(--space-2);
+    flex-shrink: 0;
+  }
+
+  .actions[hidden] {
+    display: none;
+  }
+
+  /* ── Bottom border ── */
+  dui-separator {
+    margin-top: var(--space-1);
+  }
+`;
+/**
+ * `<dui-page-header>` — Full-width top bar for dashboard pages.
+ *
+ * Renders an optional breadcrumb trail, a title, an optional subtitle,
+ * and trailing action buttons. A separator is rendered at the bottom.
+ *
+ * The `breadcrumbs` prop accepts a comma-separated string. The last segment
+ * is rendered as the current page; preceding segments render as links.
+ *
+ * @slot actions - Trailing action buttons or controls.
+ * @csspart header - The outer `<header>` container.
+ * @csspart breadcrumb - The breadcrumb navigation.
+ * @csspart title - The page title.
+ * @csspart subtitle - The subtitle paragraph.
+ */
+let DuiPageHeader = (() => {
+    let _classSuper = LitElement;
+    let _title_decorators;
+    let _title_initializers = [];
+    let _title_extraInitializers = [];
+    let _subtitle_decorators;
+    let _subtitle_initializers = [];
+    let _subtitle_extraInitializers = [];
+    let _breadcrumbs_decorators;
+    let _breadcrumbs_initializers = [];
+    let _breadcrumbs_extraInitializers = [];
+    return class DuiPageHeader extends _classSuper {
+        static {
+            const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
+            _title_decorators = [property()];
+            _subtitle_decorators = [property()];
+            _breadcrumbs_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, _breadcrumbs_decorators, { kind: "accessor", name: "breadcrumbs", static: false, private: false, access: { has: obj => "breadcrumbs" in obj, get: obj => obj.breadcrumbs, set: (obj, value) => { obj.breadcrumbs = value; } }, metadata: _metadata }, _breadcrumbs_initializers, _breadcrumbs_extraInitializers);
+            if (_metadata) Object.defineProperty(this, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
+        }
+        static tagName = "dui-page-header";
+        static styles = [base, styles];
+        #title_accessor_storage = __runInitializers(this, _title_initializers, "");
+        /** Page title displayed prominently. */
+        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, ""));
+        /** Supporting text below the title. */
+        get subtitle() { return this.#subtitle_accessor_storage; }
+        set subtitle(value) { this.#subtitle_accessor_storage = value; }
+        #breadcrumbs_accessor_storage = (__runInitializers(this, _subtitle_extraInitializers), __runInitializers(this, _breadcrumbs_initializers, ""));
+        /** Comma-separated breadcrumb trail (e.g. "Home, Settings, Profile"). */
+        get breadcrumbs() { return this.#breadcrumbs_accessor_storage; }
+        set breadcrumbs(value) { this.#breadcrumbs_accessor_storage = value; }
+        #onSlotChange(e) {
+            const slot = e.target;
+            slot.parentElement.hidden = slot.assignedElements().length === 0;
+        }
+        #renderBreadcrumbs() {
+            if (!this.breadcrumbs)
+                return nothing;
+            const segments = this.breadcrumbs.split(",").map((s) => s.trim()).filter(Boolean);
+            if (segments.length === 0)
+                return nothing;
+            const items = [];
+            segments.forEach((segment, i) => {
+                const isLast = i === segments.length - 1;
+                if (i > 0) {
+                    items.push(html `<dui-breadcrumb-separator></dui-breadcrumb-separator>`);
+                }
+                if (isLast) {
+                    items.push(html `
+          <dui-breadcrumb-item>
+            <dui-breadcrumb-page>${segment}</dui-breadcrumb-page>
+          </dui-breadcrumb-item>
+        `);
+                }
+                else {
+                    items.push(html `
+          <dui-breadcrumb-item>
+            <dui-breadcrumb-link>
+              <a href="javascript:void(0)">${segment}</a>
+            </dui-breadcrumb-link>
+          </dui-breadcrumb-item>
+        `);
+                }
+            });
+            return html `
+      <dui-breadcrumb part="breadcrumb">${items}</dui-breadcrumb>
+    `;
+        }
+        render() {
+            return html `
+      <header part="header">
+        ${this.#renderBreadcrumbs()}
+
+        <div class="title-row">
+          <div class="title-group">
+            <h1 class="title" part="title">${this.title}</h1>
+            ${this.subtitle
+                ? html `<p class="subtitle" part="subtitle">${this.subtitle}</p>`
+                : nothing}
+          </div>
+
+          <div class="actions" hidden>
+            <slot name="actions" @slotchange=${this.#onSlotChange}></slot>
+          </div>
+        </div>
+      </header>
+      <dui-separator></dui-separator>
+    `;
+        }
+        constructor() {
+            super(...arguments);
+            __runInitializers(this, _breadcrumbs_extraInitializers);
+        }
+    };
+})();
+export { DuiPageHeader };
+customElements.define(DuiPageHeader.tagName, DuiPageHeader);

package/dashboard/section-panel.d.ts

@@ -0,0 +1,41 @@
+import { LitElement, type TemplateResult } from "lit";
+import "@deepfuture/dui-components/badge";
+import "@deepfuture/dui-components/icon";
+import "@deepfuture/dui-components/collapsible";
+import "@deepfuture/dui-components/tooltip";
+/**
+ * `<dui-section-panel>` — A bordered container with a header bar, the fundamental
+ * building block for dashboard panels.
+ *
+ * The header renders an optional icon (slotted), title, badge count, LIVE indicator,
+ * help tooltip, and trailing actions. The body is slotted.
+ *
+ * When `collapsible` is set, the panel wraps its body in a `<dui-collapsible>`,
+ * suppressing the collapsible's built-in indicator and rendering its own chevron.
+ *
+ * @slot - Body content.
+ * @slot icon - Optional leading icon (`<dui-icon>` recommended).
+ * @slot actions - Trailing actions in the header bar (buttons, menus, etc.).
+ * @csspart section - The outer `<section>` container.
+ * @csspart header - The header bar.
+ * @csspart body - The body content wrapper.
+ */
+export declare class DuiSectionPanel extends LitElement {
+    #private;
+    static tagName: "dui-section-panel";
+    static styles: import("lit").CSSResult[];
+    /** Panel title displayed in the header. */
+    accessor title: string;
+    /** Badge count shown after the title (e.g. "27"). */
+    accessor badge: string;
+    /** Show a pulsing LIVE indicator in the header. */
+    accessor live: boolean;
+    /** Tooltip text for a help "?" indicator. */
+    accessor help: string;
+    /** Enable collapsible mode — body can be toggled open/closed. */
+    accessor collapsible: boolean;
+    /** Whether the collapsible panel starts open (only relevant when collapsible). */
+    accessor defaultOpen: boolean;
+    connectedCallback(): void;
+    render(): TemplateResult;
+}

package/dashboard/section-panel.js

@@ -0,0 +1,393 @@
+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";
+import "@deepfuture/dui-components/icon";
+import "@deepfuture/dui-components/collapsible";
+import "@deepfuture/dui-components/tooltip";
+const styles = css `
+  :host {
+    display: block;
+  }
+
+  section {
+    border: var(--border-width-thin) solid var(--border);
+    border-radius: var(--radius-md);
+    background: var(--surface-1);
+    overflow: hidden;
+  }
+
+  /* ── Header bar ── */
+  .header {
+    display: flex;
+    align-items: center;
+    gap: var(--space-2);
+    padding: var(--space-3) var(--space-4);
+    border-bottom: var(--border-width-thin) solid var(--border);
+    min-height: var(--space-5);
+    width: 100%;
+    transition: border var(--duration-normal) linear;
+  }
+
+
+  :host([collapsible]:not([data-open])) .header {
+    /* Hide header bottom border on collapsible sections when the section is closed */
+    /* Or else we get double bottom borders. */
+    border-color: transparent;
+  }
+
+  .header-left {
+    display: flex;
+    align-items: center;
+    gap: var(--space-2);
+    min-width: 0;
+    flex: 1;
+  }
+
+  .icon-slot {
+    display: contents;
+  }
+
+  .icon-slot[hidden] {
+    display: none;
+  }
+
+  .icon-slot ::slotted(dui-icon) {
+    --icon-size: 1rem;
+    --icon-color: var(--text-2);
+    flex-shrink: 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;
+  }
+
+  /* ── Indicators ── */
+  .live {
+    display: flex;
+    align-items: center;
+    gap: var(--space-1);
+    flex-shrink: 0;
+  }
+
+  .live-dot {
+    display: inline-block;
+    width: var(--space-1_5);
+    height: var(--space-1_5);
+    border-radius: var(--radius-full);
+    background: var(--destructive);
+    animation: pulse-dot 2s ease-in-out infinite;
+  }
+
+  @keyframes pulse-dot {
+    0%, 100% { opacity: 1; }
+    50% { opacity: 0.35; }
+  }
+
+  .live-label {
+    font-family: var(--font-sans);
+    font-size: var(--text-2xs);
+    font-weight: var(--font-weight-semibold);
+    letter-spacing: var(--letter-spacing-widest);
+    text-transform: uppercase;
+    color: var(--destructive-text);
+  }
+
+  .help-btn {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: var(--space-4);
+    height: var(--space-4);
+    border-radius: var(--radius-full);
+    border: var(--border-width-thin) solid var(--border);
+    background: transparent;
+    color: var(--text-3);
+    font-family: var(--font-sans);
+    font-size: var(--text-xs);
+    font-weight: var(--font-weight-medium);
+    cursor: help;
+    flex-shrink: 0;
+    line-height: 1;
+    transition: color var(--duration-fast) ease, border-color var(--duration-fast) ease;
+  }
+
+  .help-btn:hover {
+    color: var(--text-2);
+    border-color: var(--border-strong);
+  }
+
+  /* ── Header trailing ── */
+  .header-right {
+    display: flex;
+    align-items: center;
+    gap: var(--space-2);
+    flex-shrink: 0;
+  }
+
+  .actions-slot {
+    display: contents;
+  }
+
+  .actions-slot[hidden] {
+    display: none;
+  }
+
+  /* ── Body ── */
+  .body {
+    padding: var(--space-4);
+  }
+
+  /* ── Collapsible overrides ── */
+  dui-collapsible {
+    /* Hide the theme's indicator — we render our own chevron */
+    --collapsible-indicator-display: none;
+  }
+
+  /* Reset the theme's trigger chrome so our .header controls layout */
+  dui-collapsible::part(trigger) {
+    padding: 0;
+    height: auto;
+    border-radius: 0;
+  }
+
+  dui-collapsible::part(content) {
+    padding: 0;
+  }
+
+  /* ── Chevron ── */
+  .chevron {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+    color: var(--text-3);
+    transition: transform var(--duration-fast) var(--ease-out-3);
+  }
+
+  :host([data-open]) .chevron {
+    transform: rotate(180deg);
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .chevron {
+      transition-duration: 0s;
+    }
+  }
+`;
+/**
+ * `<dui-section-panel>` — A bordered container with a header bar, the fundamental
+ * building block for dashboard panels.
+ *
+ * The header renders an optional icon (slotted), title, badge count, LIVE indicator,
+ * help tooltip, and trailing actions. The body is slotted.
+ *
+ * When `collapsible` is set, the panel wraps its body in a `<dui-collapsible>`,
+ * suppressing the collapsible's built-in indicator and rendering its own chevron.
+ *
+ * @slot - Body content.
+ * @slot icon - Optional leading icon (`<dui-icon>` recommended).
+ * @slot actions - Trailing actions in the header bar (buttons, menus, etc.).
+ * @csspart section - The outer `<section>` container.
+ * @csspart header - The header bar.
+ * @csspart body - The body content wrapper.
+ */
+let DuiSectionPanel = (() => {
+    let _classSuper = LitElement;
+    let _title_decorators;
+    let _title_initializers = [];
+    let _title_extraInitializers = [];
+    let _badge_decorators;
+    let _badge_initializers = [];
+    let _badge_extraInitializers = [];
+    let _live_decorators;
+    let _live_initializers = [];
+    let _live_extraInitializers = [];
+    let _help_decorators;
+    let _help_initializers = [];
+    let _help_extraInitializers = [];
+    let _collapsible_decorators;
+    let _collapsible_initializers = [];
+    let _collapsible_extraInitializers = [];
+    let _defaultOpen_decorators;
+    let _defaultOpen_initializers = [];
+    let _defaultOpen_extraInitializers = [];
+    return class DuiSectionPanel extends _classSuper {
+        static {
+            const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
+            _title_decorators = [property()];
+            _badge_decorators = [property()];
+            _live_decorators = [property({ type: Boolean })];
+            _help_decorators = [property()];
+            _collapsible_decorators = [property({ type: Boolean })];
+            _defaultOpen_decorators = [property({ type: Boolean, attribute: "default-open" })];
+            __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, _badge_decorators, { kind: "accessor", name: "badge", static: false, private: false, access: { has: obj => "badge" in obj, get: obj => obj.badge, set: (obj, value) => { obj.badge = value; } }, metadata: _metadata }, _badge_initializers, _badge_extraInitializers);
+            __esDecorate(this, null, _live_decorators, { kind: "accessor", name: "live", static: false, private: false, access: { has: obj => "live" in obj, get: obj => obj.live, set: (obj, value) => { obj.live = value; } }, metadata: _metadata }, _live_initializers, _live_extraInitializers);
+            __esDecorate(this, null, _help_decorators, { kind: "accessor", name: "help", static: false, private: false, access: { has: obj => "help" in obj, get: obj => obj.help, set: (obj, value) => { obj.help = value; } }, metadata: _metadata }, _help_initializers, _help_extraInitializers);
+            __esDecorate(this, null, _collapsible_decorators, { kind: "accessor", name: "collapsible", static: false, private: false, access: { has: obj => "collapsible" in obj, get: obj => obj.collapsible, set: (obj, value) => { obj.collapsible = value; } }, metadata: _metadata }, _collapsible_initializers, _collapsible_extraInitializers);
+            __esDecorate(this, null, _defaultOpen_decorators, { kind: "accessor", name: "defaultOpen", static: false, private: false, access: { has: obj => "defaultOpen" in obj, get: obj => obj.defaultOpen, set: (obj, value) => { obj.defaultOpen = value; } }, metadata: _metadata }, _defaultOpen_initializers, _defaultOpen_extraInitializers);
+            if (_metadata) Object.defineProperty(this, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
+        }
+        static tagName = "dui-section-panel";
+        static styles = [base, styles];
+        #title_accessor_storage = __runInitializers(this, _title_initializers, "");
+        /** Panel title displayed in the header. */
+        get title() { return this.#title_accessor_storage; }
+        set title(value) { this.#title_accessor_storage = value; }
+        #badge_accessor_storage = (__runInitializers(this, _title_extraInitializers), __runInitializers(this, _badge_initializers, ""));
+        /** Badge count shown after the title (e.g. "27"). */
+        get badge() { return this.#badge_accessor_storage; }
+        set badge(value) { this.#badge_accessor_storage = value; }
+        #live_accessor_storage = (__runInitializers(this, _badge_extraInitializers), __runInitializers(this, _live_initializers, false));
+        /** Show a pulsing LIVE indicator in the header. */
+        get live() { return this.#live_accessor_storage; }
+        set live(value) { this.#live_accessor_storage = value; }
+        #help_accessor_storage = (__runInitializers(this, _live_extraInitializers), __runInitializers(this, _help_initializers, ""));
+        /** Tooltip text for a help "?" indicator. */
+        get help() { return this.#help_accessor_storage; }
+        set help(value) { this.#help_accessor_storage = value; }
+        #collapsible_accessor_storage = (__runInitializers(this, _help_extraInitializers), __runInitializers(this, _collapsible_initializers, false));
+        /** Enable collapsible mode — body can be toggled open/closed. */
+        get collapsible() { return this.#collapsible_accessor_storage; }
+        set collapsible(value) { this.#collapsible_accessor_storage = value; }
+        #defaultOpen_accessor_storage = (__runInitializers(this, _collapsible_extraInitializers), __runInitializers(this, _defaultOpen_initializers, true));
+        /** Whether the collapsible panel starts open (only relevant when collapsible). */
+        get defaultOpen() { return this.#defaultOpen_accessor_storage; }
+        set defaultOpen(value) { this.#defaultOpen_accessor_storage = value; }
+        #onSlotChange(e) {
+            const slot = e.target;
+            slot.parentElement.hidden = slot.assignedElements().length === 0;
+        }
+        #onOpenChange(e) {
+            this.toggleAttribute("data-open", e.detail.open);
+        }
+        connectedCallback() {
+            super.connectedCallback();
+            if (this.collapsible && this.defaultOpen) {
+                this.toggleAttribute("data-open", true);
+            }
+        }
+        #renderHeaderContent() {
+            return html `
+      <div class="header-left">
+        <span class="icon-slot" hidden><slot name="icon" @slotchange=${this.#onSlotChange}></slot></span>
+        <span class="title">${this.title}</span>
+        ${this.badge
+                ? html `<dui-badge appearance="soft">${this.badge}</dui-badge>`
+                : nothing}
+        ${this.live
+                ? html `<span class="live">
+              <span class="live-dot"></span>
+              <span class="live-label">Live</span>
+            </span>`
+                : nothing}
+        ${this.help
+                ? html `
+            <dui-tooltip>
+              <dui-tooltip-trigger>
+                <button class="help-btn" aria-label="Help" @click=${this.#stopProp}>?</button>
+              </dui-tooltip-trigger>
+              <dui-tooltip-popup>${this.help}</dui-tooltip-popup>
+            </dui-tooltip>`
+                : nothing}
+      </div>
+      <div class="header-right">
+        <span class="actions-slot" hidden @click=${this.collapsible ? this.#stopProp : nothing}>
+          <slot name="actions" @slotchange=${this.#onSlotChange}></slot>
+        </span>
+        ${this.collapsible
+                ? html `<span class="chevron">
+              <svg width="14" height="14" viewBox="0 0 24 24" fill="none"
+                stroke="currentColor" stroke-width="2" stroke-linecap="round"
+                stroke-linejoin="round"><path d="m6 9 6 6 6-6"/></svg>
+            </span>`
+                : nothing}
+      </div>
+    `;
+        }
+        render() {
+            if (this.collapsible) {
+                return html `
+        <section part="section">
+          <dui-collapsible
+            .defaultOpen=${this.defaultOpen}
+            @open-change=${this.#onOpenChange}
+          >
+            <div slot="trigger" class="header" part="header">
+              ${this.#renderHeaderContent()}
+            </div>
+
+            <div class="body" part="body">
+              <slot></slot>
+            </div>
+          </dui-collapsible>
+        </section>
+      `;
+            }
+            return html `
+      <section part="section">
+        <div class="header" part="header">
+          ${this.#renderHeaderContent()}
+        </div>
+        <div class="body" part="body">
+          <slot></slot>
+        </div>
+      </section>
+    `;
+        }
+        /** Stop click propagation so actions/help in header don't trigger collapse. */
+        #stopProp(e) {
+            e.stopPropagation();
+        }
+        constructor() {
+            super(...arguments);
+            __runInitializers(this, _defaultOpen_extraInitializers);
+        }
+    };
+})();
+export { DuiSectionPanel };
+customElements.define(DuiSectionPanel.tagName, DuiSectionPanel);

package/data/index.d.ts

@@ -0,0 +1,5 @@
+import { DuiKeyValue } from "./key-value.js";
+import { DuiMarketTable } from "./market-table.js";
+export { DuiKeyValue, DuiMarketTable };
+export type { MarketRow } from "./market-table.js";
+export declare const dataFamily: (typeof DuiKeyValue | typeof DuiMarketTable)[];

package/data/index.js

@@ -0,0 +1,4 @@
+import { DuiKeyValue } from "./key-value.js";
+import { DuiMarketTable } from "./market-table.js";
+export { DuiKeyValue, DuiMarketTable };
+export const dataFamily = [DuiKeyValue, DuiMarketTable];