@deepfuture/dui-templates 1.0.0

package/media/avatar-row.js

@@ -0,0 +1,164 @@
+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 } from "lit";
+import { property } from "lit/decorators.js";
+import { base } from "@deepfuture/dui-core/base";
+import "@deepfuture/dui-components/avatar";
+import "@deepfuture/dui-components/scroll-area";
+const styles = css `
+  :host {
+    display: block;
+  }
+
+  .row {
+    display: flex;
+    gap: var(--space-4);
+    padding: var(--space-1) var(--space-0_5);
+  }
+
+  .item {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: var(--space-1_5);
+    flex-shrink: 0;
+    min-width: 0;
+  }
+
+  .item dui-avatar {
+    --avatar-size: var(--avatar-row-size, 3rem);
+  }
+
+  .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-none);
+    color: var(--text-2);
+    text-align: center;
+    max-width: calc(var(--avatar-row-size, 3rem) + var(--space-4));
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .empty {
+    padding: var(--space-4);
+    text-align: center;
+    color: var(--text-3);
+    font-family: var(--font-sans);
+    font-size: var(--text-sm);
+  }
+`;
+/**
+ * `<dui-avatar-row>` — A horizontal scrollable row of circular avatars with labels.
+ *
+ * Ideal for displaying teams, participants, agents, or any list of people/entities
+ * in a compact horizontal strip. Scrolls horizontally when items overflow.
+ *
+ * @slot actions - Optional trailing action (e.g. an "Add" button).
+ * @csspart row - The flex container holding avatar items.
+ */
+let DuiAvatarRow = (() => {
+    let _classSuper = LitElement;
+    let _data_decorators;
+    let _data_initializers = [];
+    let _data_extraInitializers = [];
+    let _emptyText_decorators;
+    let _emptyText_initializers = [];
+    let _emptyText_extraInitializers = [];
+    return class DuiAvatarRow extends _classSuper {
+        static {
+            const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
+            _data_decorators = [property({ type: Array })];
+            _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, _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-avatar-row";
+        static styles = [base, styles];
+        #data_accessor_storage = __runInitializers(this, _data_initializers, []);
+        /** Array of avatar items to display. */
+        get data() { return this.#data_accessor_storage; }
+        set data(value) { this.#data_accessor_storage = value; }
+        #emptyText_accessor_storage = (__runInitializers(this, _data_extraInitializers), __runInitializers(this, _emptyText_initializers, "No items"));
+        /** Text shown when data is empty. */
+        get emptyText() { return this.#emptyText_accessor_storage; }
+        set emptyText(value) { this.#emptyText_accessor_storage = value; }
+        /** Extract 1–2 character initials from a name. */
+        #initials(name) {
+            const parts = name.trim().split(/\s+/);
+            if (parts.length === 1)
+                return parts[0].charAt(0).toUpperCase();
+            return (parts[0].charAt(0) + parts[parts.length - 1].charAt(0)).toUpperCase();
+        }
+        /** Toggle hidden on slot wrapper when slotted content changes. */
+        #onSlotChange(e) {
+            const slot = e.target;
+            slot.parentElement.hidden = slot.assignedElements().length === 0;
+        }
+        render() {
+            if (this.data.length === 0) {
+                return html `<div class="empty">${this.emptyText}</div>`;
+            }
+            return html `
+      <dui-scroll-area orientation="horizontal">
+        <div class="row" part="row">
+          ${this.data.map((item) => html `
+              <div class="item">
+                <dui-avatar
+                  .src=${item.src ?? undefined}
+                  alt=${item.name}
+                >${this.#initials(item.name)}</dui-avatar>
+                <span class="label">${item.label ?? item.name}</span>
+              </div>
+            `)}
+          <div hidden>
+            <slot name="actions" @slotchange=${this.#onSlotChange}></slot>
+          </div>
+        </div>
+      </dui-scroll-area>
+    `;
+        }
+        constructor() {
+            super(...arguments);
+            __runInitializers(this, _emptyText_extraInitializers);
+        }
+    };
+})();
+export { DuiAvatarRow };
+customElements.define(DuiAvatarRow.tagName, DuiAvatarRow);

package/media/index.d.ts

@@ -0,0 +1,7 @@
+import { DuiAvatarRow } from "./avatar-row.js";
+import { DuiMediaGrid } from "./media-grid.js";
+export { DuiAvatarRow } from "./avatar-row.js";
+export { DuiMediaGrid } from "./media-grid.js";
+export type { AvatarItem } from "./avatar-row.js";
+export type { MediaItem } from "./media-grid.js";
+export declare const mediaFamily: (typeof DuiAvatarRow | typeof DuiMediaGrid)[];

package/media/index.js

@@ -0,0 +1,5 @@
+import { DuiAvatarRow } from "./avatar-row.js";
+import { DuiMediaGrid } from "./media-grid.js";
+export { DuiAvatarRow } from "./avatar-row.js";
+export { DuiMediaGrid } from "./media-grid.js";
+export const mediaFamily = [DuiAvatarRow, DuiMediaGrid];

package/media/media-grid.d.ts

@@ -0,0 +1,32 @@
+import { LitElement, type TemplateResult } from "lit";
+import "@deepfuture/dui-components/badge";
+/** A single media item in the grid. */
+export interface MediaItem {
+    /** Image or video thumbnail URL. */
+    src: string;
+    /** Alt text for accessibility. */
+    alt?: string;
+    /** Optional label overlay (e.g. location name, camera ID). */
+    label?: string;
+    /** Optional timestamp overlay (e.g. "2 min ago", "14:23 UTC"). */
+    timestamp?: string;
+}
+/**
+ * `<dui-media-grid>` — A responsive grid of image/video thumbnails with label overlays.
+ *
+ * Ideal for camera feeds, location galleries, media libraries, or any visual monitoring
+ * grid. Each cell shows a thumbnail image with an optional label and timestamp overlay.
+ *
+ * @slot actions - Optional action buttons below the grid.
+ * @csspart grid - The CSS grid container.
+ */
+export declare class DuiMediaGrid extends LitElement {
+    #private;
+    static tagName: "dui-media-grid";
+    static styles: import("lit").CSSResult[];
+    /** Array of media items to display. */
+    accessor data: MediaItem[];
+    /** Text shown when data is empty. */
+    accessor emptyText: string;
+    render(): TemplateResult;
+}

package/media/media-grid.js

@@ -0,0 +1,199 @@
+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";
+const styles = css `
+  :host {
+    display: block;
+  }
+
+  .grid {
+    display: grid;
+    grid-template-columns: repeat(
+      auto-fill,
+      minmax(var(--media-grid-min-width, 10rem), 1fr)
+    );
+    gap: var(--space-3);
+  }
+
+  .cell {
+    position: relative;
+    border-radius: var(--radius-md);
+    overflow: hidden;
+    background: var(--sunken-2);
+    aspect-ratio: 16 / 10;
+  }
+
+  .cell img {
+    display: block;
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    transition: transform var(--duration-normal) ease;
+  }
+
+  .cell:hover img {
+    transform: scale(1.03);
+  }
+
+  .overlay {
+    position: absolute;
+    inset: auto 0 0 0;
+    display: flex;
+    align-items: flex-end;
+    justify-content: space-between;
+    gap: var(--space-1_5);
+    padding: var(--space-2) var(--space-2_5);
+    background: linear-gradient(to top, oklch(0 0 0 / 0.55), transparent);
+    pointer-events: none;
+  }
+
+  .overlay-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-none);
+    color: white;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    min-width: 0;
+  }
+
+  .overlay-timestamp {
+    font-family: var(--font-sans);
+    font-size: var(--text-2xs);
+    color: oklch(1 0 0 / 0.7);
+    white-space: nowrap;
+    flex-shrink: 0;
+  }
+
+  .empty {
+    padding: var(--space-6) var(--space-4);
+    text-align: center;
+    color: var(--text-3);
+    font-family: var(--font-sans);
+    font-size: var(--text-sm);
+  }
+
+  .actions[hidden] {
+    display: none;
+  }
+`;
+/**
+ * `<dui-media-grid>` — A responsive grid of image/video thumbnails with label overlays.
+ *
+ * Ideal for camera feeds, location galleries, media libraries, or any visual monitoring
+ * grid. Each cell shows a thumbnail image with an optional label and timestamp overlay.
+ *
+ * @slot actions - Optional action buttons below the grid.
+ * @csspart grid - The CSS grid container.
+ */
+let DuiMediaGrid = (() => {
+    let _classSuper = LitElement;
+    let _data_decorators;
+    let _data_initializers = [];
+    let _data_extraInitializers = [];
+    let _emptyText_decorators;
+    let _emptyText_initializers = [];
+    let _emptyText_extraInitializers = [];
+    return class DuiMediaGrid extends _classSuper {
+        static {
+            const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
+            _data_decorators = [property({ type: Array })];
+            _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, _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-media-grid";
+        static styles = [base, styles];
+        #data_accessor_storage = __runInitializers(this, _data_initializers, []);
+        /** Array of media items to display. */
+        get data() { return this.#data_accessor_storage; }
+        set data(value) { this.#data_accessor_storage = value; }
+        #emptyText_accessor_storage = (__runInitializers(this, _data_extraInitializers), __runInitializers(this, _emptyText_initializers, "No media"));
+        /** Text shown when data is empty. */
+        get emptyText() { return this.#emptyText_accessor_storage; }
+        set emptyText(value) { this.#emptyText_accessor_storage = value; }
+        /** Toggle hidden on slot wrapper when slotted content changes. */
+        #onSlotChange(e) {
+            const slot = e.target;
+            slot.parentElement.hidden = slot.assignedElements().length === 0;
+        }
+        render() {
+            if (this.data.length === 0) {
+                return html `<div class="empty">${this.emptyText}</div>`;
+            }
+            return html `
+      <div class="grid" part="grid">
+        ${this.data.map((item) => html `
+            <div class="cell">
+              <img
+                src=${item.src}
+                alt=${item.alt ?? item.label ?? ""}
+                loading="lazy"
+              />
+              ${item.label || item.timestamp
+                ? html `
+                    <div class="overlay">
+                      ${item.label
+                    ? html `<span class="overlay-label">${item.label}</span>`
+                    : nothing}
+                      ${item.timestamp
+                    ? html `<time class="overlay-timestamp">${item.timestamp}</time>`
+                    : nothing}
+                    </div>
+                  `
+                : nothing}
+            </div>
+          `)}
+      </div>
+      <div class="actions" hidden>
+        <slot name="actions" @slotchange=${this.#onSlotChange}></slot>
+      </div>
+    `;
+        }
+        constructor() {
+            super(...arguments);
+            __runInitializers(this, _emptyText_extraInitializers);
+        }
+    };
+})();
+export { DuiMediaGrid };
+customElements.define(DuiMediaGrid.tagName, DuiMediaGrid);

package/metrics/index.d.ts

@@ -0,0 +1,6 @@
+import { DuiStatCard } from "./stat-card.js";
+import { DuiScoreItem } from "./score-item.js";
+import { DuiRiskGauge } from "./risk-gauge.js";
+import { DuiProgressBar } from "./progress-bar.js";
+export { DuiStatCard, DuiScoreItem, DuiRiskGauge, DuiProgressBar };
+export declare const metricsFamily: (typeof DuiStatCard | typeof DuiScoreItem | typeof DuiRiskGauge | typeof DuiProgressBar)[];

package/metrics/index.js

@@ -0,0 +1,6 @@
+import { DuiStatCard } from "./stat-card.js";
+import { DuiScoreItem } from "./score-item.js";
+import { DuiRiskGauge } from "./risk-gauge.js";
+import { DuiProgressBar } from "./progress-bar.js";
+export { DuiStatCard, DuiScoreItem, DuiRiskGauge, DuiProgressBar };
+export const metricsFamily = [DuiStatCard, DuiScoreItem, DuiRiskGauge, DuiProgressBar];

package/metrics/progress-bar.d.ts

@@ -0,0 +1,31 @@
+import { LitElement, type TemplateResult } from "lit";
+import "@deepfuture/dui-components/progress";
+/**
+ * `<dui-progress-bar>` — A labeled capacity/completion indicator with a progress bar.
+ *
+ * Wraps `<dui-progress>` with a label row showing the metric name and value.
+ * Supports a description for extra context.
+ *
+ * @slot actions - Optional action buttons or links.
+ * @csspart article - The outer container.
+ * @csspart label - The metric label.
+ * @csspart value - The value/percentage text.
+ * @csspart progress - The progress bar element.
+ * @csspart description - The description text.
+ */
+export declare class DuiProgressBar extends LitElement {
+    #private;
+    static tagName: "dui-progress-bar";
+    static styles: import("lit").CSSResult[];
+    /** Metric label (e.g. "CPU Usage", "Storage", "Quota"). */
+    accessor label: string;
+    /** Current value (0–max). */
+    accessor value: number;
+    /** Maximum value. */
+    accessor max: number;
+    /** Custom display text (e.g. "12.4 GB / 50 GB"). Overrides auto percentage. */
+    accessor valueText: string;
+    /** Supporting description text. */
+    accessor description: string;
+    render(): TemplateResult;
+}

package/metrics/progress-bar.js

@@ -0,0 +1,212 @@
+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/progress";
+const styles = css `
+  :host {
+    display: block;
+  }
+
+  article {
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-1_5);
+    padding: var(--space-3);
+    border: var(--border-width-thin) solid var(--border);
+    border-radius: var(--radius-md);
+    background: var(--surface-1);
+  }
+
+  /* ── Top row: label + value ── */
+  .top {
+    display: flex;
+    align-items: baseline;
+    justify-content: space-between;
+    gap: var(--space-1_5);
+  }
+
+  .label {
+    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);
+    min-width: 0;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+  .value-text {
+    font-size: var(--text-sm);
+    font-weight: var(--font-weight-semibold);
+    letter-spacing: var(--letter-spacing-normal);
+    line-height: var(--line-height-snug);
+    color: var(--text-2);
+    flex-shrink: 0;
+  }
+
+  /* ── Description ── */
+  .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 ── */
+  .actions {
+    display: flex;
+    align-items: center;
+    gap: var(--space-2);
+    padding-top: var(--space-1);
+  }
+
+  .actions[hidden] {
+    display: none;
+  }
+`;
+/**
+ * `<dui-progress-bar>` — A labeled capacity/completion indicator with a progress bar.
+ *
+ * Wraps `<dui-progress>` with a label row showing the metric name and value.
+ * Supports a description for extra context.
+ *
+ * @slot actions - Optional action buttons or links.
+ * @csspart article - The outer container.
+ * @csspart label - The metric label.
+ * @csspart value - The value/percentage text.
+ * @csspart progress - The progress bar element.
+ * @csspart description - The description text.
+ */
+let DuiProgressBar = (() => {
+    let _classSuper = LitElement;
+    let _label_decorators;
+    let _label_initializers = [];
+    let _label_extraInitializers = [];
+    let _value_decorators;
+    let _value_initializers = [];
+    let _value_extraInitializers = [];
+    let _max_decorators;
+    let _max_initializers = [];
+    let _max_extraInitializers = [];
+    let _valueText_decorators;
+    let _valueText_initializers = [];
+    let _valueText_extraInitializers = [];
+    let _description_decorators;
+    let _description_initializers = [];
+    let _description_extraInitializers = [];
+    return class DuiProgressBar extends _classSuper {
+        static {
+            const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
+            _label_decorators = [property()];
+            _value_decorators = [property({ type: Number })];
+            _max_decorators = [property({ type: Number })];
+            _valueText_decorators = [property({ attribute: "value-text" })];
+            _description_decorators = [property()];
+            __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, _max_decorators, { kind: "accessor", name: "max", static: false, private: false, access: { has: obj => "max" in obj, get: obj => obj.max, set: (obj, value) => { obj.max = value; } }, metadata: _metadata }, _max_initializers, _max_extraInitializers);
+            __esDecorate(this, null, _valueText_decorators, { kind: "accessor", name: "valueText", static: false, private: false, access: { has: obj => "valueText" in obj, get: obj => obj.valueText, set: (obj, value) => { obj.valueText = value; } }, metadata: _metadata }, _valueText_initializers, _valueText_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-progress-bar";
+        static styles = [base, styles];
+        #label_accessor_storage = __runInitializers(this, _label_initializers, "");
+        /** Metric label (e.g. "CPU Usage", "Storage", "Quota"). */
+        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, 0));
+        /** Current value (0–max). */
+        get value() { return this.#value_accessor_storage; }
+        set value(value) { this.#value_accessor_storage = value; }
+        #max_accessor_storage = (__runInitializers(this, _value_extraInitializers), __runInitializers(this, _max_initializers, 100));
+        /** Maximum value. */
+        get max() { return this.#max_accessor_storage; }
+        set max(value) { this.#max_accessor_storage = value; }
+        #valueText_accessor_storage = (__runInitializers(this, _max_extraInitializers), __runInitializers(this, _valueText_initializers, ""));
+        /** Custom display text (e.g. "12.4 GB / 50 GB"). Overrides auto percentage. */
+        get valueText() { return this.#valueText_accessor_storage; }
+        set valueText(value) { this.#valueText_accessor_storage = value; }
+        #description_accessor_storage = (__runInitializers(this, _valueText_extraInitializers), __runInitializers(this, _description_initializers, ""));
+        /** Supporting description 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 pct = this.max > 0 ? Math.round((this.value / this.max) * 100) : 0;
+            const displayText = this.valueText || `${pct}%`;
+            return html `
+      <article part="article">
+        <div class="top">
+          ${this.label
+                ? html `<span class="label" part="label">${this.label}</span>`
+                : nothing}
+          <span class="value-text" part="value">${displayText}</span>
+        </div>
+
+        <dui-progress
+          part="progress"
+          .value=${this.value}
+          .max=${this.max}
+        ></dui-progress>
+
+        ${this.description
+                ? html `<p class="description" part="description">${this.description}</p>`
+                : nothing}
+
+        <div class="actions" hidden>
+          <slot name="actions" @slotchange=${this.#onSlotChange}></slot>
+        </div>
+      </article>
+    `;
+        }
+        constructor() {
+            super(...arguments);
+            __runInitializers(this, _description_extraInitializers);
+        }
+    };
+})();
+export { DuiProgressBar };
+customElements.define(DuiProgressBar.tagName, DuiProgressBar);