@luzmo/lucero 1.0.1-alpha.9 → 1.0.2

package/components/progress-steps/progress-steps.d.ts

@@ -0,0 +1,148 @@
+import { TemplateResult } from 'lit';
+import { LuzmoElement } from '../../utils/base';
+import type { ProgressStepsDisplayMode, ProgressStepsLabels, ProgressTreeNode } from './types';
+declare const LuzmoProgressSteps_base: typeof LuzmoElement & {
+    new (...args: any[]): import("../..").SizedElementInterface;
+    prototype: import("../..").SizedElementInterface;
+};
+/**
+ * @element luzmo-progress-steps
+ * @summary A component for displaying real-time Progress status steps with substeps
+ *
+ * @attr size - The size of the component: s, m, l or xl
+ * @attr locale - Locale for resolving localized strings (default: 'en')
+ * @attr collapsed - When true, collapses all auto-expanded steps
+ * @attr condensed - When true, hides all steps behind a single "{n} steps completed" toggle line
+ * @attr display-mode - Display mode: 'detailed' (default) shows substeps and descriptions, 'compact' shows only step names
+ *
+ * @fires luzmo-step-expanded - Fired when a step is expanded
+ * @fires luzmo-step-collapsed - Fired when a step is collapsed
+ */
+export declare class LuzmoProgressSteps extends LuzmoProgressSteps_base {
+    static styles: import("lit").CSSResult[];
+    /**
+     * The progress tree from the backend.
+     * The root node's children are rendered as main steps.
+     */
+    progress: ProgressTreeNode | null;
+    /**
+     * Locale for resolving localized strings in description metadata.
+     * Defaults to 'en'.
+     */
+    locale: string;
+    /**
+     * When true, collapses all auto-expanded steps.
+     * Manually expanded steps remain open.
+     */
+    collapsed: boolean;
+    /**
+     * Display mode for the progress steps.
+     * - 'detailed' (default): Shows full descriptions and substeps with expand/collapse
+     * - 'compact': Shows only step names without substeps or expand/collapse
+     */
+    displayMode: ProgressStepsDisplayMode;
+    /**
+     * When true, hides all steps behind a single "{n} steps completed" toggle line.
+     * Clicking the toggle expands/collapses the full step list.
+     */
+    condensed: boolean;
+    /**
+     * Labels used for visible text and screen readers.
+     * The default values are in English and can be overridden to localize the content.
+     * Use `{{count}}` in `stepCompleted` / `stepsCompleted` as a placeholder for the step count.
+     */
+    labels: ProgressStepsLabels;
+    /**
+     * When true, disables all entry animations (stepFadeIn, substepFadeIn).
+     * @default false
+     */
+    noAnimate: boolean;
+    /**
+     * Whether the condensed toggle has been expanded by the user.
+     * @internal
+     */
+    private _condensedExpanded;
+    /**
+     * Set of node IDs that are manually expanded by the user
+     * @internal
+     */
+    private _expandedNodes;
+    /**
+     * Nodes that were auto-expanded because they were in-progress.
+     * @internal
+     */
+    private _autoExpandedNodes;
+    /**
+     * Nodes explicitly expanded by the user.
+     * @internal
+     */
+    private _manuallyExpandedNodes;
+    willUpdate(changedProperties: Map<string, unknown>): void;
+    /**
+     * Handles progress changes, clearing state when progress is reset or root changes
+     * @internal
+     */
+    private _handleProgressChange;
+    /**
+     * Clears all expansion state for a fresh progress tree
+     * @internal
+     */
+    private _clearExpansionState;
+    /**
+     * Handle auto-expand for in-progress nodes
+     * @internal
+     */
+    private _handleAutoExpandCollapse;
+    /**
+     * Collapse all auto-expanded nodes that weren't manually expanded
+     * @internal
+     */
+    private _collapseAutoExpandedNodes;
+    /**
+     * Re-expand in-progress nodes when collapsed changes to false
+     * @internal
+     */
+    private _reExpandInProgressNodes;
+    /** @internal */
+    private _reExpandInProgressNodesRecursive;
+    /**
+     * Map backend status to CSS-friendly status
+     * @internal
+     */
+    private _mapStatus;
+    /**
+     * Resolve a localized string to the current locale
+     * @internal
+     */
+    private _resolveLocalizedString;
+    /**
+     * Interpolate description with metadata values
+     * Replaces {{key}} placeholders with values from descriptionMetadata
+     * @internal
+     */
+    private _interpolateDescription;
+    /** @internal */
+    private _toggleNodeExpansion;
+    /** @internal */
+    private _isNodeExpanded;
+    /** @internal */
+    private _renderStepIcon;
+    /** @internal */
+    private _renderChevron;
+    /** @internal */
+    private _renderSubsteps;
+    /** @internal */
+    private _renderSubstep;
+    /** @internal */
+    private _renderStep;
+    /** @internal */
+    private _toggleCondensed;
+    /** @internal */
+    private _handleCondensedKeydown;
+    /** @internal */
+    private _renderCondensed;
+    /** @internal */
+    private _renderSteps;
+    render(): TemplateResult;
+}
+export {};

package/components/progress-steps/types.d.ts

@@ -0,0 +1,32 @@
+export interface ProgressStepsLabels {
+    condensedSingular: string;
+    condensedPlural: string;
+    stepInProgress: string;
+    stepPending: string;
+    stepCompleted: string;
+    stepFailed: string;
+}
+export type ProgressStepsStatuses = 'pending' | 'inProgress' | 'success' | 'error';
+/**
+ * Display mode for progress steps
+ * - 'detailed': Shows full descriptions and substeps with expand/collapse
+ * - 'compact': Shows only step names without substeps
+ */
+export type ProgressStepsDisplayMode = 'detailed' | 'compact';
+export type LocalizedString = Record<string, string>;
+/**
+ * Metadata for description template interpolation
+ */
+export type ProgressTreeNodeDescriptionMetadata = Record<string, number | string | boolean | LocalizedString | (number | string | boolean | LocalizedString)[]>;
+/**
+ * A node in the progress tree structure
+ */
+export type ProgressTreeNode = {
+    id: string;
+    /** Step identifier (e.g., 'iqDatasets', 'iqQuery.creatingQuery') */
+    step: string;
+    status: ProgressStepsStatuses;
+    children?: ProgressTreeNode[];
+    description?: string;
+    descriptionMetadata?: ProgressTreeNodeDescriptionMetadata;
+};

package/components/progress-steps-Da8aZWx3.js

@@ -0,0 +1,262 @@
+/*! * Lucero - The design system for Luzmo.
+ * 
+ * Copyright © 2025 Luzmo
+ * All rights reserved.
+ * Lucero (“Luzmo Design System”) must be used according to the Luzmo Terms of Service.
+ * This license allows users with a current active Luzmo account to use Lucero.
+ * This license terminates automatically if a user no longer has an active Luzmo account.
+ * Please view the Luzmo Terms of Service at: https://www.luzmo.com/information-pages/terms-of-use.
+ * 
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ * */
+import { n as e, t } from "./decorate-aGxJUVxg.js";
+import { n } from "./sized-mixin-DaBoZkVS.js";
+import { html as r, nothing as i, unsafeCSS as a } from "lit";
+import { property as o, state as s } from "lit/decorators.js";
+import { luzmoAngleDown as c, luzmoAngleUp as l, luzmoCheckCircleOutline as u, luzmoCircle as d, luzmoClose14 as f, luzmoIcon as p } from "@luzmo/icons";
+//#region src/components/progress-steps/progress-steps.module.scss?inline
+var m = ":host{font-family:var(--luzmo-font-family);font-size:var(--luzmo-progress-steps-font-size,var(--progress-steps-font-size));color:var(--luzmo-progress-steps-font-color,var(--progress-steps-font-color));display:block}.progress-steps-container{gap:var(--luzmo-progress-steps-gap,var(--progress-steps-gap));flex-direction:column;display:flex}.step{grid-template-columns:var(--luzmo-progress-steps-icon-size,var(--progress-steps-icon-size)) auto;column-gap:var(--luzmo-progress-steps-gap,var(--progress-steps-gap));animation:.3s ease-out forwards stepFadeIn;display:grid;position:relative}.step:not(:last-child):after{content:\"\";left:calc(var(--luzmo-progress-steps-icon-size,var(--progress-steps-icon-size)) / 2);top:var(--luzmo-progress-steps-icon-size,var(--progress-steps-icon-size));bottom:calc(-1 * var(--luzmo-progress-steps-gap,var(--progress-steps-gap)));background-color:var(--luzmo-progress-steps-substep-connector-color,var(--progress-steps-substep-connector-color));z-index:0;pointer-events:none;width:1px;position:absolute;transform:translate(-.5px)}.step:not(:last-child):has(.substeps-container.expanded):after{height:var(--luzmo-progress-steps-gap,var(--progress-steps-gap));top:auto}.step-header{-webkit-user-select:none;user-select:none;display:contents}.step-header.has-substeps{cursor:pointer}.step-icon{width:var(--luzmo-progress-steps-icon-size,var(--progress-steps-icon-size));height:var(--luzmo-progress-steps-icon-size,var(--progress-steps-icon-size));border-radius:var(--luzmo-progress-steps-icon-radius,var(--progress-steps-icon-radius,var(--luzmo-border-radius-l)));flex-shrink:0;grid-column:1;justify-content:center;align-self:center;align-items:center;display:flex;position:relative}.step-icon svg{width:100%;height:100%}.step-header.has-substeps .step-icon{cursor:pointer}.step-icon-pending{color:var(--luzmo-progress-steps-font-color-dimmed,var(--progress-steps-font-color-dimmed))}.step-icon-in-progress{position:relative}.step-dot{width:calc(var(--luzmo-progress-steps-icon-size,var(--progress-steps-icon-size)) * .4);height:calc(var(--luzmo-progress-steps-icon-size,var(--progress-steps-icon-size)) * .4);background-color:var(--luzmo-progress-steps-primary-color,var(--progress-steps-primary-color));border-radius:var(--luzmo-progress-steps-icon-radius,var(--progress-steps-icon-radius,var(--luzmo-border-radius-l)));position:relative}.step-dot:after{--progress-steps-pulse-offset-calc:var(--luzmo-progress-steps-pulse-offset,var(--progress-steps-pulse-offset,6px));content:\"\";top:calc(-1 * var(--progress-steps-pulse-offset-calc));left:calc(-1 * var(--progress-steps-pulse-offset-calc));right:calc(-1 * var(--progress-steps-pulse-offset-calc));bottom:calc(-1 * var(--progress-steps-pulse-offset-calc));border-radius:var(--luzmo-progress-steps-icon-radius,var(--progress-steps-icon-radius,var(--luzmo-border-radius-l)));background-color:var(--luzmo-progress-steps-pulse-color,var(--progress-steps-pulse-color));opacity:0;animation:2s cubic-bezier(.4,0,.6,1) infinite mainStepPulse;position:absolute}.step-icon-completed{color:var(--luzmo-progress-steps-completed-color,var(--progress-steps-completed-color))}.step-icon-error{color:var(--luzmo-progress-steps-error-color,var(--progress-steps-error-color))}.step-content{align-items:center;gap:var(--luzmo-progress-steps-gap,var(--progress-steps-gap));border-radius:var(--luzmo-progress-steps-border-radius,var(--progress-steps-border-radius));flex-direction:row;grid-column:2;align-self:center;min-width:0;display:flex}.step-header.has-substeps .step-content{cursor:pointer}.step-name{font-weight:var(--luzmo-font-weight-semibold);color:var(--luzmo-progress-steps-font-color,var(--progress-steps-font-color))}.step-chevron{width:var(--luzmo-progress-steps-chevron-size,var(--progress-steps-chevron-size));height:var(--luzmo-progress-steps-chevron-size,var(--progress-steps-chevron-size));color:var(--luzmo-progress-steps-font-color-dimmed,var(--progress-steps-font-color-dimmed));flex-shrink:0;justify-content:center;align-items:end;display:flex}.step-chevron svg{width:100%;height:100%}.step-chevron.hidden{visibility:hidden;cursor:default}.substeps-container{grid-column:1/-1;grid-template-columns:var(--luzmo-progress-steps-icon-size,var(--progress-steps-icon-size)) 1fr;column-gap:var(--luzmo-progress-steps-gap,var(--progress-steps-gap));max-height:0;transition:none;display:grid;position:relative;overflow:clip}.substeps-container.expanded{max-height:var(--luzmo-progress-steps-substeps-max-height,var(--progress-steps-substeps-max-height,1000px));transition:max-height .3s cubic-bezier(.4,0,.2,1)}.substeps{gap:var(--luzmo-progress-steps-substep-gap,var(--progress-steps-substep-gap));padding-top:var(--luzmo-progress-steps-substep-gap,var(--progress-steps-substep-gap));flex-direction:column;grid-column:2;display:flex;position:relative}.substep{font-size:var(--luzmo-progress-steps-font-size-small,var(--progress-steps-font-size-small));--progress-steps-substep-line-height:1.4;--progress-steps-substep-bullet-center-offset:calc(var(--progress-steps-substep-line-height) * .5em);line-height:var(--progress-steps-substep-line-height);opacity:0;animation:.25s ease-out forwards substepFadeIn;position:relative}.substep:first-child{animation-delay:50ms}.substep:nth-child(2){animation-delay:.1s}.substep:nth-child(3){animation-delay:.15s}.substep:nth-child(4){animation-delay:.2s}.substep:nth-child(5){animation-delay:.25s}.substep:nth-child(6){animation-delay:.3s}.substep:nth-child(n+7){animation-delay:.35s}.substep-bullet{left:calc(-1 * var(--luzmo-progress-steps-gap,var(--progress-steps-gap)) - var(--luzmo-progress-steps-icon-size,var(--progress-steps-icon-size)) / 2 - var(--luzmo-progress-steps-substep-bullet-size,var(--progress-steps-substep-bullet-size)) / 2);top:calc(var(--progress-steps-substep-bullet-center-offset) - var(--luzmo-progress-steps-substep-bullet-size,var(--progress-steps-substep-bullet-size)) / 2);width:var(--luzmo-progress-steps-substep-bullet-size,var(--progress-steps-substep-bullet-size));height:var(--luzmo-progress-steps-substep-bullet-size,var(--progress-steps-substep-bullet-size));z-index:2;background-color:var(--luzmo-background-color,#fff);--progress-steps-substep-bullet-base:var(--luzmo-progress-steps-substep-bullet-color,var(--progress-steps-substep-bullet-color));--progress-steps-substep-bullet-fill:var(--luzmo-progress-steps-substep-bullet-color,var(--progress-steps-substep-bullet-color));border-radius:50%;position:absolute}.substep-bullet:before,.substep-bullet:after{content:\"\";border-radius:50%;position:absolute}.substep-bullet:before{background-color:var(--progress-steps-substep-bullet-base);z-index:0;inset:0}.substep-bullet:after{background-color:var(--progress-steps-substep-bullet-fill);z-index:1;inset:0}.substep:before,.substep:after{content:\"\";left:calc(-1 * var(--luzmo-progress-steps-gap,var(--progress-steps-gap)) - var(--luzmo-progress-steps-icon-size,var(--progress-steps-icon-size)) / 2);background-color:var(--luzmo-progress-steps-substep-connector-color,var(--progress-steps-substep-connector-color));z-index:0;width:1px;position:absolute;transform:translate(-.5px)}.substep.is-first:before{top:calc(-1 * var(--luzmo-progress-steps-substep-gap,var(--progress-steps-substep-gap)));height:calc(var(--progress-steps-substep-bullet-center-offset) + var(--luzmo-progress-steps-substep-gap,var(--progress-steps-substep-gap)))}.substep:not(.is-last):after{top:var(--progress-steps-substep-bullet-center-offset);height:calc(100% + var(--luzmo-progress-steps-substep-gap,var(--progress-steps-substep-gap)))}.substep.is-last:after{display:none}.step:not(:last-child) .substep.is-last:after{top:var(--progress-steps-substep-bullet-center-offset);height:calc(100% - var(--progress-steps-substep-bullet-center-offset));display:block}.substep.is-first:has(.substep-bullet-in-progress):before{background:linear-gradient(to bottom, var(--luzmo-progress-steps-substep-connector-color,var(--progress-steps-substep-connector-color)), var(--luzmo-progress-steps-primary-color,var(--progress-steps-primary-color)))}.substep:has(+.substep .substep-bullet-in-progress):after{background:linear-gradient(to bottom, var(--luzmo-progress-steps-substep-connector-color,var(--progress-steps-substep-connector-color)), var(--luzmo-progress-steps-primary-color,var(--progress-steps-primary-color)))}.substep-bullet-pending,.substep-bullet-completed,.substep-bullet-error{--progress-steps-substep-bullet-base:var(--luzmo-progress-steps-substep-bullet-color,var(--progress-steps-substep-bullet-color));--progress-steps-substep-bullet-fill:var(--luzmo-progress-steps-substep-bullet-color,var(--progress-steps-substep-bullet-color))}.substep-bullet-in-progress{--progress-steps-substep-bullet-base:var(--luzmo-progress-steps-font-color-dimmed,var(--progress-steps-font-color-dimmed));--progress-steps-substep-bullet-fill:var(--luzmo-progress-steps-primary-color,var(--progress-steps-primary-color));box-shadow:0 0 5px 0 color-mix(in srgb, var(--luzmo-progress-steps-primary-color,var(--progress-steps-primary-color)) 30%, transparent);animation:2s cubic-bezier(.4,0,.6,1) infinite substepBulletGlow}.substep-bullet-in-progress:after{animation:2s cubic-bezier(.4,0,.6,1) infinite substepBulletPulse}.substep-text,.substep-text-pending,.substep-text-completed,.substep-text-error{color:var(--luzmo-progress-steps-font-color-dimmed,var(--progress-steps-font-color-dimmed))}.substep-text-completed{color:var(--luzmo-progress-steps-font-color,var(--progress-steps-font-color))}.substep-text-error{color:var(--luzmo-progress-steps-error-color,var(--progress-steps-error-color))}.condensed-toggle{align-items:center;gap:var(--luzmo-progress-steps-gap,var(--progress-steps-gap));cursor:pointer;-webkit-user-select:none;user-select:none;color:var(--luzmo-progress-steps-font-color-dimmed,var(--progress-steps-font-color-dimmed));transition:color .2s;display:flex}.condensed-toggle:hover{color:var(--luzmo-progress-steps-font-color,var(--progress-steps-font-color))}.condensed-toggle-text{font-weight:var(--luzmo-font-weight-semibold)}.condensed-toggle-chevron{width:var(--luzmo-progress-steps-chevron-size,var(--progress-steps-chevron-size));height:var(--luzmo-progress-steps-chevron-size,var(--progress-steps-chevron-size));flex-shrink:0;justify-content:center;align-items:center;transition:transform .2s;display:flex}.condensed-toggle-chevron svg{width:100%;height:100%}.condensed-toggle-chevron.expanded{transform:rotate(180deg)}.condensed-steps{gap:var(--luzmo-progress-steps-gap,var(--progress-steps-gap));margin-top:var(--luzmo-progress-steps-gap,var(--progress-steps-gap));flex-direction:column;display:flex}@keyframes mainStepPulse{0%{opacity:.6;transform:scale(.8)}50%{opacity:.3;transform:scale(1.25)}to{opacity:.6;transform:scale(.8)}}@keyframes substepBulletPulse{0%,to{opacity:.55;transform:scale(.95)}50%{opacity:.4;transform:scale(1.05)}}@keyframes substepBulletGlow{0%,to{box-shadow:0 0 4px 0 color-mix(in srgb, var(--luzmo-progress-steps-primary-color,var(--progress-steps-primary-color)) 25%, transparent)}50%{box-shadow:0 0 6px 1px color-mix(in srgb, var(--luzmo-progress-steps-primary-color,var(--progress-steps-primary-color)) 35%, transparent)}}@keyframes stepFadeIn{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}@keyframes substepFadeIn{0%{opacity:0;transform:translate(-4px)}to{opacity:1;transform:translate(0)}}:host([no-animate]) .step{animation:none}:host([no-animate]) .substep{opacity:1;animation:none}:host([no-animate]) .substep-bullet-in-progress,:host([no-animate]) .substep-bullet-in-progress:after{animation:none}:host([no-animate]) .condensed-toggle-chevron{transition:none}:host{--progress-steps-primary-color:var(--luzmo-primary);--progress-steps-pulse-color:rgba(var(--luzmo-primary-rgb), .4);--progress-steps-font-color:var(--luzmo-font-color);--progress-steps-font-color-dimmed:var(--luzmo-font-color-extra-dimmed);--progress-steps-completed-color:var(--luzmo-positive-color);--progress-steps-error-color:var(--luzmo-negative-color);--progress-steps-gap:calc(var(--luzmo-spacing-3) + var(--luzmo-spacing-1));--progress-steps-substep-gap:var(--luzmo-spacing-3);--progress-steps-border-radius:var(--luzmo-border-radius);--progress-steps-font-size:var(--luzmo-font-size);--progress-steps-font-size-small:var(--luzmo-font-size-s);--progress-steps-icon-size:var(--luzmo-icon-size-xl);--progress-steps-icon-radius:var(--luzmo-border-radius-s);--progress-steps-chevron-size:var(--luzmo-icon-size-m);--progress-steps-substep-bullet-size:6px;--progress-steps-pulse-offset:6px;--progress-steps-substeps-max-height:1000px;--progress-steps-substep-connector-color:var(--luzmo-border-color);--progress-steps-substep-bullet-color:var(--luzmo-border-color)}:host([size=s]){--progress-steps-font-size:var(--luzmo-font-size-s);--progress-steps-font-size-small:var(--luzmo-font-size-xs);--progress-steps-gap:var(--luzmo-spacing-3);--progress-steps-substep-gap:calc(var(--luzmo-spacing-2) + var(--luzmo-spacing-1));--progress-steps-icon-size:var(--luzmo-icon-size-m);--progress-steps-chevron-size:var(--luzmo-icon-size-s);--progress-steps-substep-bullet-size:5px}:host([size=l]){--progress-steps-font-size:var(--luzmo-font-size-l);--progress-steps-font-size-small:var(--luzmo-font-size);--progress-steps-gap:var(--luzmo-spacing-4);--progress-steps-substep-gap:calc(var(--luzmo-spacing-3) + var(--luzmo-spacing-1));--progress-steps-icon-size:calc(var(--luzmo-icon-size-xl) + var(--luzmo-spacing-1));--progress-steps-chevron-size:var(--luzmo-icon-size-l);--progress-steps-substep-bullet-size:6px}:host([size=xl]){--progress-steps-font-size:var(--luzmo-font-size-xl);--progress-steps-font-size-small:var(--luzmo-font-size-l);--progress-steps-gap:calc(var(--luzmo-spacing-4) + var(--luzmo-spacing-1));--progress-steps-substep-gap:var(--luzmo-spacing-4);--progress-steps-icon-size:calc(var(--luzmo-icon-size-xl) + var(--luzmo-spacing-2));--progress-steps-chevron-size:var(--luzmo-icon-size-xl);--progress-steps-substep-bullet-size:7px}:host{box-sizing:border-box}", h = {
+	condensedSingular: "{{count}} step completed",
+	condensedPlural: "{{count}} steps completed",
+	stepInProgress: "Step in progress",
+	stepPending: "Step pending",
+	stepCompleted: "Step completed",
+	stepFailed: "Step failed"
+}, g = class extends n(e, {
+	defaultSize: "m",
+	validSizes: [
+		"s",
+		"m",
+		"l",
+		"xl"
+	]
+}) {
+	constructor(...e) {
+		super(...e), this.progress = null, this.locale = "en", this.collapsed = !1, this.displayMode = "detailed", this.condensed = !1, this.labels = { ...h }, this.noAnimate = !1, this._condensedExpanded = !1, this._expandedNodes = /* @__PURE__ */ new Set(), this._autoExpandedNodes = /* @__PURE__ */ new Set(), this._manuallyExpandedNodes = /* @__PURE__ */ new Set();
+	}
+	static {
+		this.styles = [a(m)];
+	}
+	willUpdate(e) {
+		if (super.willUpdate(e), e.has("progress")) {
+			let t = e.get("progress");
+			this._handleProgressChange(t), (!this.progress || !t || this.progress.id !== t.id) && (this._condensedExpanded = !1);
+		}
+		e.has("condensed") && (this._condensedExpanded = !1), e.has("collapsed") && (this.collapsed ? this._collapseAutoExpandedNodes() : this._reExpandInProgressNodes());
+	}
+	_handleProgressChange(e) {
+		(!this.progress || !e || this.progress.id !== e.id) && this._clearExpansionState(), this.progress?.children && (this._handleAutoExpandCollapse(this.progress.children), this.collapsed && this._collapseAutoExpandedNodes());
+	}
+	_clearExpansionState() {
+		this._expandedNodes.clear(), this._autoExpandedNodes.clear(), this._manuallyExpandedNodes.clear();
+	}
+	_handleAutoExpandCollapse(e) {
+		for (let t of e) {
+			let e = t.id;
+			t.status === "inProgress" && !this._autoExpandedNodes.has(e) && (this._autoExpandedNodes.add(e), this._expandedNodes.add(e)), t.children && this._handleAutoExpandCollapse(t.children);
+		}
+	}
+	_collapseAutoExpandedNodes() {
+		for (let e of this._autoExpandedNodes) this._manuallyExpandedNodes.has(e) || this._expandedNodes.delete(e);
+	}
+	_reExpandInProgressNodes() {
+		this.progress?.children && this._reExpandInProgressNodesRecursive(this.progress.children);
+	}
+	_reExpandInProgressNodesRecursive(e) {
+		for (let t of e) t.status === "inProgress" && this._autoExpandedNodes.has(t.id) && this._expandedNodes.add(t.id), t.children && this._reExpandInProgressNodesRecursive(t.children);
+	}
+	_mapStatus(e) {
+		switch (e) {
+			case "inProgress": return "in-progress";
+			case "success": return "completed";
+			case "pending": return "pending";
+			case "error": return "error";
+			default: return "pending";
+		}
+	}
+	_resolveLocalizedString(e) {
+		return e[this.locale] ?? e.en ?? Object.values(e)[0] ?? "";
+	}
+	_interpolateDescription(e) {
+		return e.description ? e.descriptionMetadata ? e.description.replaceAll(/\{\{(\w+)\}\}/g, (t, n) => {
+			let r = e.descriptionMetadata?.[n];
+			return r == null ? `{{${n}}}` : Array.isArray(r) ? r.map((e) => typeof e == "object" && e ? this._resolveLocalizedString(e) : String(e)).join(", ") : typeof r == "object" ? this._resolveLocalizedString(r) : String(r);
+		}) : e.description : "";
+	}
+	_toggleNodeExpansion(e) {
+		this._expandedNodes.has(e) ? (this._expandedNodes.delete(e), this._manuallyExpandedNodes.delete(e), this.dispatchEvent(new CustomEvent("luzmo-step-collapsed", {
+			bubbles: !0,
+			composed: !0,
+			detail: { nodeId: e }
+		}))) : (this._expandedNodes.add(e), this._manuallyExpandedNodes.add(e), this.dispatchEvent(new CustomEvent("luzmo-step-expanded", {
+			bubbles: !0,
+			composed: !0,
+			detail: { nodeId: e }
+		}))), this.requestUpdate();
+	}
+	_isNodeExpanded(e) {
+		return this._expandedNodes.has(e);
+	}
+	_renderStepIcon(e) {
+		let t;
+		switch (e) {
+			case "in-progress":
+				t = this.labels.stepInProgress;
+				break;
+			case "pending":
+				t = this.labels.stepPending;
+				break;
+			case "completed":
+				t = this.labels.stepCompleted;
+				break;
+			case "error":
+				t = this.labels.stepFailed;
+				break;
+			default: t = this.labels.stepPending;
+		}
+		if (e === "in-progress") return r`
+        <div
+          class="step-icon step-icon-in-progress"
+          aria-label=${t}
+          role="img"
+        >
+          <div class="step-dot"></div>
+        </div>
+      `;
+		let n;
+		switch (e) {
+			case "pending":
+				n = d;
+				break;
+			case "completed":
+				n = u;
+				break;
+			case "error":
+				n = f;
+				break;
+			default: n = d;
+		}
+		return r`
+      <div
+        class="step-icon step-icon-${e}"
+        aria-label=${t}
+        role="img"
+      >
+        ${p(n)}
+      </div>
+    `;
+	}
+	_renderChevron(e, t) {
+		return r`<div class="step-chevron ${t ? "" : "hidden"}">
+      ${p(e ? l : c)}
+    </div>`;
+	}
+	_renderSubsteps(e) {
+		let t = e.length - 1;
+		return e.map((e, n) => this._renderSubstep(e, n === 0, n === t));
+	}
+	_renderSubstep(e, t, n) {
+		let i = this._mapStatus(e.status), a = this._interpolateDescription(e), o = ["substep"];
+		return t && o.push("is-first"), n && o.push("is-last"), r`
+      <div class=${o.join(" ")}>
+        <div class="substep-bullet substep-bullet-${i}"></div>
+        <div class="substep-text substep-text-${i}">${a}</div>
+      </div>
+    `;
+	}
+	_renderStep(e) {
+		let t = this._mapStatus(e.status), n = this.displayMode === "compact", a = this._interpolateDescription(e) || e.step, o = !n && e.children && e.children.length > 0, s = this._isNodeExpanded(e.id), c = `substeps-${e.id}`;
+		return r`
+      <div class="step">
+        <div
+          class="step-header ${o ? "has-substeps" : ""}"
+          role=${o ? "button" : "status"}
+          aria-expanded=${o ? s : i}
+          aria-controls=${o ? c : i}
+          tabindex=${o ? 0 : i}
+          @click=${o ? () => this._toggleNodeExpansion(e.id) : i}
+          @keydown=${o ? (t) => {
+			(t.key === "Enter" || t.key === " ") && (t.preventDefault(), this._toggleNodeExpansion(e.id));
+		} : i}
+        >
+          ${this._renderStepIcon(t)}
+          <div class="step-content">
+            <div class="step-name">${a}</div>
+            ${n ? i : this._renderChevron(s, !!o)}
+          </div>
+        </div>
+        ${o ? r`
+              <div
+                id=${c}
+                class="substeps-container ${s ? "expanded" : ""}"
+              >
+                <div class="substeps">
+                  ${this._renderSubsteps(e.children ?? [])}
+                </div>
+              </div>
+            ` : i}
+      </div>
+    `;
+	}
+	_toggleCondensed() {
+		this._condensedExpanded = !this._condensedExpanded, this.requestUpdate();
+	}
+	_handleCondensedKeydown(e) {
+		(e.key === "Enter" || e.key === " ") && (e.preventDefault(), this._toggleCondensed());
+	}
+	_renderCondensed() {
+		let e = this.progress?.children?.filter((e) => e.status === "success").length ?? 0, t = (e === 1 ? this.labels.condensedSingular : this.labels.condensedPlural).replace("{{count}}", String(e));
+		return r`
+      <div class="condensed-container">
+        <div
+          class="condensed-toggle"
+          role="button"
+          tabindex="0"
+          aria-expanded=${this._condensedExpanded}
+          @click=${this._toggleCondensed}
+          @keydown=${this._handleCondensedKeydown}
+        >
+          <span class="condensed-toggle-text">${t}</span>
+          <span
+            class="condensed-toggle-chevron ${this._condensedExpanded ? "expanded" : ""}"
+          >
+            ${p(c)}
+          </span>
+        </div>
+        ${this._condensedExpanded ? r`<div class="condensed-steps">${this._renderSteps()}</div>` : i}
+      </div>
+    `;
+	}
+	_renderSteps() {
+		return (this.progress?.children ?? []).map((e) => this._renderStep(e));
+	}
+	render() {
+		return this.condensed ? r`
+        <div class="progress-steps-container" role="status" aria-live="polite">
+          ${this._renderCondensed()}
+        </div>
+      ` : r`
+      <div class="progress-steps-container" role="status" aria-live="polite">
+        ${this._renderSteps()}
+      </div>
+    `;
+	}
+};
+//#endregion
+//#region src/components/progress-steps/index.ts
+t([o({ type: Object })], g.prototype, "progress", void 0), t([o({ type: String })], g.prototype, "locale", void 0), t([o({ type: Boolean })], g.prototype, "collapsed", void 0), t([o({
+	type: String,
+	attribute: "display-mode"
+})], g.prototype, "displayMode", void 0), t([o({ type: Boolean })], g.prototype, "condensed", void 0), t([o({ type: Object })], g.prototype, "labels", void 0), t([o({
+	type: Boolean,
+	attribute: "no-animate",
+	reflect: !0
+})], g.prototype, "noAnimate", void 0), t([s()], g.prototype, "_condensedExpanded", void 0), t([s()], g.prototype, "_expandedNodes", void 0), t([s()], g.prototype, "_autoExpandedNodes", void 0), t([s()], g.prototype, "_manuallyExpandedNodes", void 0), customElements.get("luzmo-progress-steps") || customElements.define("luzmo-progress-steps", g);
+//#endregion
+export { g as t };

package/components/progress-steps-WriXaZpE.cjs

@@ -0,0 +1,96 @@
+/*! * Lucero - The design system for Luzmo.
+ * 
+ * Copyright © 2025 Luzmo
+ * All rights reserved.
+ * Lucero (“Luzmo Design System”) must be used according to the Luzmo Terms of Service.
+ * This license allows users with a current active Luzmo account to use Lucero.
+ * This license terminates automatically if a user no longer has an active Luzmo account.
+ * Please view the Luzmo Terms of Service at: https://www.luzmo.com/information-pages/terms-of-use.
+ * 
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ * */
+require(`./chunk-D-qHiVGv.cjs`);const e=require(`./decorate-B2wePfNm.cjs`),t=require(`./sized-mixin-StFA4y0J.cjs`);let n=require(`lit`),r=require(`lit/decorators.js`),i=require(`@luzmo/icons`);var a=`:host{font-family:var(--luzmo-font-family);font-size:var(--luzmo-progress-steps-font-size,var(--progress-steps-font-size));color:var(--luzmo-progress-steps-font-color,var(--progress-steps-font-color));display:block}.progress-steps-container{gap:var(--luzmo-progress-steps-gap,var(--progress-steps-gap));flex-direction:column;display:flex}.step{grid-template-columns:var(--luzmo-progress-steps-icon-size,var(--progress-steps-icon-size)) auto;column-gap:var(--luzmo-progress-steps-gap,var(--progress-steps-gap));animation:.3s ease-out forwards stepFadeIn;display:grid;position:relative}.step:not(:last-child):after{content:"";left:calc(var(--luzmo-progress-steps-icon-size,var(--progress-steps-icon-size)) / 2);top:var(--luzmo-progress-steps-icon-size,var(--progress-steps-icon-size));bottom:calc(-1 * var(--luzmo-progress-steps-gap,var(--progress-steps-gap)));background-color:var(--luzmo-progress-steps-substep-connector-color,var(--progress-steps-substep-connector-color));z-index:0;pointer-events:none;width:1px;position:absolute;transform:translate(-.5px)}.step:not(:last-child):has(.substeps-container.expanded):after{height:var(--luzmo-progress-steps-gap,var(--progress-steps-gap));top:auto}.step-header{-webkit-user-select:none;user-select:none;display:contents}.step-header.has-substeps{cursor:pointer}.step-icon{width:var(--luzmo-progress-steps-icon-size,var(--progress-steps-icon-size));height:var(--luzmo-progress-steps-icon-size,var(--progress-steps-icon-size));border-radius:var(--luzmo-progress-steps-icon-radius,var(--progress-steps-icon-radius,var(--luzmo-border-radius-l)));flex-shrink:0;grid-column:1;justify-content:center;align-self:center;align-items:center;display:flex;position:relative}.step-icon svg{width:100%;height:100%}.step-header.has-substeps .step-icon{cursor:pointer}.step-icon-pending{color:var(--luzmo-progress-steps-font-color-dimmed,var(--progress-steps-font-color-dimmed))}.step-icon-in-progress{position:relative}.step-dot{width:calc(var(--luzmo-progress-steps-icon-size,var(--progress-steps-icon-size)) * .4);height:calc(var(--luzmo-progress-steps-icon-size,var(--progress-steps-icon-size)) * .4);background-color:var(--luzmo-progress-steps-primary-color,var(--progress-steps-primary-color));border-radius:var(--luzmo-progress-steps-icon-radius,var(--progress-steps-icon-radius,var(--luzmo-border-radius-l)));position:relative}.step-dot:after{--progress-steps-pulse-offset-calc:var(--luzmo-progress-steps-pulse-offset,var(--progress-steps-pulse-offset,6px));content:"";top:calc(-1 * var(--progress-steps-pulse-offset-calc));left:calc(-1 * var(--progress-steps-pulse-offset-calc));right:calc(-1 * var(--progress-steps-pulse-offset-calc));bottom:calc(-1 * var(--progress-steps-pulse-offset-calc));border-radius:var(--luzmo-progress-steps-icon-radius,var(--progress-steps-icon-radius,var(--luzmo-border-radius-l)));background-color:var(--luzmo-progress-steps-pulse-color,var(--progress-steps-pulse-color));opacity:0;animation:2s cubic-bezier(.4,0,.6,1) infinite mainStepPulse;position:absolute}.step-icon-completed{color:var(--luzmo-progress-steps-completed-color,var(--progress-steps-completed-color))}.step-icon-error{color:var(--luzmo-progress-steps-error-color,var(--progress-steps-error-color))}.step-content{align-items:center;gap:var(--luzmo-progress-steps-gap,var(--progress-steps-gap));border-radius:var(--luzmo-progress-steps-border-radius,var(--progress-steps-border-radius));flex-direction:row;grid-column:2;align-self:center;min-width:0;display:flex}.step-header.has-substeps .step-content{cursor:pointer}.step-name{font-weight:var(--luzmo-font-weight-semibold);color:var(--luzmo-progress-steps-font-color,var(--progress-steps-font-color))}.step-chevron{width:var(--luzmo-progress-steps-chevron-size,var(--progress-steps-chevron-size));height:var(--luzmo-progress-steps-chevron-size,var(--progress-steps-chevron-size));color:var(--luzmo-progress-steps-font-color-dimmed,var(--progress-steps-font-color-dimmed));flex-shrink:0;justify-content:center;align-items:end;display:flex}.step-chevron svg{width:100%;height:100%}.step-chevron.hidden{visibility:hidden;cursor:default}.substeps-container{grid-column:1/-1;grid-template-columns:var(--luzmo-progress-steps-icon-size,var(--progress-steps-icon-size)) 1fr;column-gap:var(--luzmo-progress-steps-gap,var(--progress-steps-gap));max-height:0;transition:none;display:grid;position:relative;overflow:clip}.substeps-container.expanded{max-height:var(--luzmo-progress-steps-substeps-max-height,var(--progress-steps-substeps-max-height,1000px));transition:max-height .3s cubic-bezier(.4,0,.2,1)}.substeps{gap:var(--luzmo-progress-steps-substep-gap,var(--progress-steps-substep-gap));padding-top:var(--luzmo-progress-steps-substep-gap,var(--progress-steps-substep-gap));flex-direction:column;grid-column:2;display:flex;position:relative}.substep{font-size:var(--luzmo-progress-steps-font-size-small,var(--progress-steps-font-size-small));--progress-steps-substep-line-height:1.4;--progress-steps-substep-bullet-center-offset:calc(var(--progress-steps-substep-line-height) * .5em);line-height:var(--progress-steps-substep-line-height);opacity:0;animation:.25s ease-out forwards substepFadeIn;position:relative}.substep:first-child{animation-delay:50ms}.substep:nth-child(2){animation-delay:.1s}.substep:nth-child(3){animation-delay:.15s}.substep:nth-child(4){animation-delay:.2s}.substep:nth-child(5){animation-delay:.25s}.substep:nth-child(6){animation-delay:.3s}.substep:nth-child(n+7){animation-delay:.35s}.substep-bullet{left:calc(-1 * var(--luzmo-progress-steps-gap,var(--progress-steps-gap)) - var(--luzmo-progress-steps-icon-size,var(--progress-steps-icon-size)) / 2 - var(--luzmo-progress-steps-substep-bullet-size,var(--progress-steps-substep-bullet-size)) / 2);top:calc(var(--progress-steps-substep-bullet-center-offset) - var(--luzmo-progress-steps-substep-bullet-size,var(--progress-steps-substep-bullet-size)) / 2);width:var(--luzmo-progress-steps-substep-bullet-size,var(--progress-steps-substep-bullet-size));height:var(--luzmo-progress-steps-substep-bullet-size,var(--progress-steps-substep-bullet-size));z-index:2;background-color:var(--luzmo-background-color,#fff);--progress-steps-substep-bullet-base:var(--luzmo-progress-steps-substep-bullet-color,var(--progress-steps-substep-bullet-color));--progress-steps-substep-bullet-fill:var(--luzmo-progress-steps-substep-bullet-color,var(--progress-steps-substep-bullet-color));border-radius:50%;position:absolute}.substep-bullet:before,.substep-bullet:after{content:"";border-radius:50%;position:absolute}.substep-bullet:before{background-color:var(--progress-steps-substep-bullet-base);z-index:0;inset:0}.substep-bullet:after{background-color:var(--progress-steps-substep-bullet-fill);z-index:1;inset:0}.substep:before,.substep:after{content:"";left:calc(-1 * var(--luzmo-progress-steps-gap,var(--progress-steps-gap)) - var(--luzmo-progress-steps-icon-size,var(--progress-steps-icon-size)) / 2);background-color:var(--luzmo-progress-steps-substep-connector-color,var(--progress-steps-substep-connector-color));z-index:0;width:1px;position:absolute;transform:translate(-.5px)}.substep.is-first:before{top:calc(-1 * var(--luzmo-progress-steps-substep-gap,var(--progress-steps-substep-gap)));height:calc(var(--progress-steps-substep-bullet-center-offset) + var(--luzmo-progress-steps-substep-gap,var(--progress-steps-substep-gap)))}.substep:not(.is-last):after{top:var(--progress-steps-substep-bullet-center-offset);height:calc(100% + var(--luzmo-progress-steps-substep-gap,var(--progress-steps-substep-gap)))}.substep.is-last:after{display:none}.step:not(:last-child) .substep.is-last:after{top:var(--progress-steps-substep-bullet-center-offset);height:calc(100% - var(--progress-steps-substep-bullet-center-offset));display:block}.substep.is-first:has(.substep-bullet-in-progress):before{background:linear-gradient(to bottom, var(--luzmo-progress-steps-substep-connector-color,var(--progress-steps-substep-connector-color)), var(--luzmo-progress-steps-primary-color,var(--progress-steps-primary-color)))}.substep:has(+.substep .substep-bullet-in-progress):after{background:linear-gradient(to bottom, var(--luzmo-progress-steps-substep-connector-color,var(--progress-steps-substep-connector-color)), var(--luzmo-progress-steps-primary-color,var(--progress-steps-primary-color)))}.substep-bullet-pending,.substep-bullet-completed,.substep-bullet-error{--progress-steps-substep-bullet-base:var(--luzmo-progress-steps-substep-bullet-color,var(--progress-steps-substep-bullet-color));--progress-steps-substep-bullet-fill:var(--luzmo-progress-steps-substep-bullet-color,var(--progress-steps-substep-bullet-color))}.substep-bullet-in-progress{--progress-steps-substep-bullet-base:var(--luzmo-progress-steps-font-color-dimmed,var(--progress-steps-font-color-dimmed));--progress-steps-substep-bullet-fill:var(--luzmo-progress-steps-primary-color,var(--progress-steps-primary-color));box-shadow:0 0 5px 0 color-mix(in srgb, var(--luzmo-progress-steps-primary-color,var(--progress-steps-primary-color)) 30%, transparent);animation:2s cubic-bezier(.4,0,.6,1) infinite substepBulletGlow}.substep-bullet-in-progress:after{animation:2s cubic-bezier(.4,0,.6,1) infinite substepBulletPulse}.substep-text,.substep-text-pending,.substep-text-completed,.substep-text-error{color:var(--luzmo-progress-steps-font-color-dimmed,var(--progress-steps-font-color-dimmed))}.substep-text-completed{color:var(--luzmo-progress-steps-font-color,var(--progress-steps-font-color))}.substep-text-error{color:var(--luzmo-progress-steps-error-color,var(--progress-steps-error-color))}.condensed-toggle{align-items:center;gap:var(--luzmo-progress-steps-gap,var(--progress-steps-gap));cursor:pointer;-webkit-user-select:none;user-select:none;color:var(--luzmo-progress-steps-font-color-dimmed,var(--progress-steps-font-color-dimmed));transition:color .2s;display:flex}.condensed-toggle:hover{color:var(--luzmo-progress-steps-font-color,var(--progress-steps-font-color))}.condensed-toggle-text{font-weight:var(--luzmo-font-weight-semibold)}.condensed-toggle-chevron{width:var(--luzmo-progress-steps-chevron-size,var(--progress-steps-chevron-size));height:var(--luzmo-progress-steps-chevron-size,var(--progress-steps-chevron-size));flex-shrink:0;justify-content:center;align-items:center;transition:transform .2s;display:flex}.condensed-toggle-chevron svg{width:100%;height:100%}.condensed-toggle-chevron.expanded{transform:rotate(180deg)}.condensed-steps{gap:var(--luzmo-progress-steps-gap,var(--progress-steps-gap));margin-top:var(--luzmo-progress-steps-gap,var(--progress-steps-gap));flex-direction:column;display:flex}@keyframes mainStepPulse{0%{opacity:.6;transform:scale(.8)}50%{opacity:.3;transform:scale(1.25)}to{opacity:.6;transform:scale(.8)}}@keyframes substepBulletPulse{0%,to{opacity:.55;transform:scale(.95)}50%{opacity:.4;transform:scale(1.05)}}@keyframes substepBulletGlow{0%,to{box-shadow:0 0 4px 0 color-mix(in srgb, var(--luzmo-progress-steps-primary-color,var(--progress-steps-primary-color)) 25%, transparent)}50%{box-shadow:0 0 6px 1px color-mix(in srgb, var(--luzmo-progress-steps-primary-color,var(--progress-steps-primary-color)) 35%, transparent)}}@keyframes stepFadeIn{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}@keyframes substepFadeIn{0%{opacity:0;transform:translate(-4px)}to{opacity:1;transform:translate(0)}}:host([no-animate]) .step{animation:none}:host([no-animate]) .substep{opacity:1;animation:none}:host([no-animate]) .substep-bullet-in-progress,:host([no-animate]) .substep-bullet-in-progress:after{animation:none}:host([no-animate]) .condensed-toggle-chevron{transition:none}:host{--progress-steps-primary-color:var(--luzmo-primary);--progress-steps-pulse-color:rgba(var(--luzmo-primary-rgb), .4);--progress-steps-font-color:var(--luzmo-font-color);--progress-steps-font-color-dimmed:var(--luzmo-font-color-extra-dimmed);--progress-steps-completed-color:var(--luzmo-positive-color);--progress-steps-error-color:var(--luzmo-negative-color);--progress-steps-gap:calc(var(--luzmo-spacing-3) + var(--luzmo-spacing-1));--progress-steps-substep-gap:var(--luzmo-spacing-3);--progress-steps-border-radius:var(--luzmo-border-radius);--progress-steps-font-size:var(--luzmo-font-size);--progress-steps-font-size-small:var(--luzmo-font-size-s);--progress-steps-icon-size:var(--luzmo-icon-size-xl);--progress-steps-icon-radius:var(--luzmo-border-radius-s);--progress-steps-chevron-size:var(--luzmo-icon-size-m);--progress-steps-substep-bullet-size:6px;--progress-steps-pulse-offset:6px;--progress-steps-substeps-max-height:1000px;--progress-steps-substep-connector-color:var(--luzmo-border-color);--progress-steps-substep-bullet-color:var(--luzmo-border-color)}:host([size=s]){--progress-steps-font-size:var(--luzmo-font-size-s);--progress-steps-font-size-small:var(--luzmo-font-size-xs);--progress-steps-gap:var(--luzmo-spacing-3);--progress-steps-substep-gap:calc(var(--luzmo-spacing-2) + var(--luzmo-spacing-1));--progress-steps-icon-size:var(--luzmo-icon-size-m);--progress-steps-chevron-size:var(--luzmo-icon-size-s);--progress-steps-substep-bullet-size:5px}:host([size=l]){--progress-steps-font-size:var(--luzmo-font-size-l);--progress-steps-font-size-small:var(--luzmo-font-size);--progress-steps-gap:var(--luzmo-spacing-4);--progress-steps-substep-gap:calc(var(--luzmo-spacing-3) + var(--luzmo-spacing-1));--progress-steps-icon-size:calc(var(--luzmo-icon-size-xl) + var(--luzmo-spacing-1));--progress-steps-chevron-size:var(--luzmo-icon-size-l);--progress-steps-substep-bullet-size:6px}:host([size=xl]){--progress-steps-font-size:var(--luzmo-font-size-xl);--progress-steps-font-size-small:var(--luzmo-font-size-l);--progress-steps-gap:calc(var(--luzmo-spacing-4) + var(--luzmo-spacing-1));--progress-steps-substep-gap:var(--luzmo-spacing-4);--progress-steps-icon-size:calc(var(--luzmo-icon-size-xl) + var(--luzmo-spacing-2));--progress-steps-chevron-size:var(--luzmo-icon-size-xl);--progress-steps-substep-bullet-size:7px}:host{box-sizing:border-box}`,o={condensedSingular:`{{count}} step completed`,condensedPlural:`{{count}} steps completed`,stepInProgress:`Step in progress`,stepPending:`Step pending`,stepCompleted:`Step completed`,stepFailed:`Step failed`},s=class extends t.n(e.n,{defaultSize:`m`,validSizes:[`s`,`m`,`l`,`xl`]}){constructor(...e){super(...e),this.progress=null,this.locale=`en`,this.collapsed=!1,this.displayMode=`detailed`,this.condensed=!1,this.labels={...o},this.noAnimate=!1,this._condensedExpanded=!1,this._expandedNodes=new Set,this._autoExpandedNodes=new Set,this._manuallyExpandedNodes=new Set}static{this.styles=[(0,n.unsafeCSS)(a)]}willUpdate(e){if(super.willUpdate(e),e.has(`progress`)){let t=e.get(`progress`);this._handleProgressChange(t),(!this.progress||!t||this.progress.id!==t.id)&&(this._condensedExpanded=!1)}e.has(`condensed`)&&(this._condensedExpanded=!1),e.has(`collapsed`)&&(this.collapsed?this._collapseAutoExpandedNodes():this._reExpandInProgressNodes())}_handleProgressChange(e){(!this.progress||!e||this.progress.id!==e.id)&&this._clearExpansionState(),this.progress?.children&&(this._handleAutoExpandCollapse(this.progress.children),this.collapsed&&this._collapseAutoExpandedNodes())}_clearExpansionState(){this._expandedNodes.clear(),this._autoExpandedNodes.clear(),this._manuallyExpandedNodes.clear()}_handleAutoExpandCollapse(e){for(let t of e){let e=t.id;t.status===`inProgress`&&!this._autoExpandedNodes.has(e)&&(this._autoExpandedNodes.add(e),this._expandedNodes.add(e)),t.children&&this._handleAutoExpandCollapse(t.children)}}_collapseAutoExpandedNodes(){for(let e of this._autoExpandedNodes)this._manuallyExpandedNodes.has(e)||this._expandedNodes.delete(e)}_reExpandInProgressNodes(){this.progress?.children&&this._reExpandInProgressNodesRecursive(this.progress.children)}_reExpandInProgressNodesRecursive(e){for(let t of e)t.status===`inProgress`&&this._autoExpandedNodes.has(t.id)&&this._expandedNodes.add(t.id),t.children&&this._reExpandInProgressNodesRecursive(t.children)}_mapStatus(e){switch(e){case`inProgress`:return`in-progress`;case`success`:return`completed`;case`pending`:return`pending`;case`error`:return`error`;default:return`pending`}}_resolveLocalizedString(e){return e[this.locale]??e.en??Object.values(e)[0]??``}_interpolateDescription(e){return e.description?e.descriptionMetadata?e.description.replaceAll(/\{\{(\w+)\}\}/g,(t,n)=>{let r=e.descriptionMetadata?.[n];return r==null?`{{${n}}}`:Array.isArray(r)?r.map(e=>typeof e==`object`&&e?this._resolveLocalizedString(e):String(e)).join(`, `):typeof r==`object`?this._resolveLocalizedString(r):String(r)}):e.description:``}_toggleNodeExpansion(e){this._expandedNodes.has(e)?(this._expandedNodes.delete(e),this._manuallyExpandedNodes.delete(e),this.dispatchEvent(new CustomEvent(`luzmo-step-collapsed`,{bubbles:!0,composed:!0,detail:{nodeId:e}}))):(this._expandedNodes.add(e),this._manuallyExpandedNodes.add(e),this.dispatchEvent(new CustomEvent(`luzmo-step-expanded`,{bubbles:!0,composed:!0,detail:{nodeId:e}}))),this.requestUpdate()}_isNodeExpanded(e){return this._expandedNodes.has(e)}_renderStepIcon(e){let t;switch(e){case`in-progress`:t=this.labels.stepInProgress;break;case`pending`:t=this.labels.stepPending;break;case`completed`:t=this.labels.stepCompleted;break;case`error`:t=this.labels.stepFailed;break;default:t=this.labels.stepPending}if(e===`in-progress`)return n.html`
+        <div
+          class="step-icon step-icon-in-progress"
+          aria-label=${t}
+          role="img"
+        >
+          <div class="step-dot"></div>
+        </div>
+      `;let r;switch(e){case`pending`:r=i.luzmoCircle;break;case`completed`:r=i.luzmoCheckCircleOutline;break;case`error`:r=i.luzmoClose14;break;default:r=i.luzmoCircle}return n.html`
+      <div
+        class="step-icon step-icon-${e}"
+        aria-label=${t}
+        role="img"
+      >
+        ${(0,i.luzmoIcon)(r)}
+      </div>
+    `}_renderChevron(e,t){return n.html`<div class="step-chevron ${t?``:`hidden`}">
+      ${(0,i.luzmoIcon)(e?i.luzmoAngleUp:i.luzmoAngleDown)}
+    </div>`}_renderSubsteps(e){let t=e.length-1;return e.map((e,n)=>this._renderSubstep(e,n===0,n===t))}_renderSubstep(e,t,r){let i=this._mapStatus(e.status),a=this._interpolateDescription(e),o=[`substep`];return t&&o.push(`is-first`),r&&o.push(`is-last`),n.html`
+      <div class=${o.join(` `)}>
+        <div class="substep-bullet substep-bullet-${i}"></div>
+        <div class="substep-text substep-text-${i}">${a}</div>
+      </div>
+    `}_renderStep(e){let t=this._mapStatus(e.status),r=this.displayMode===`compact`,i=this._interpolateDescription(e)||e.step,a=!r&&e.children&&e.children.length>0,o=this._isNodeExpanded(e.id),s=`substeps-${e.id}`;return n.html`
+      <div class="step">
+        <div
+          class="step-header ${a?`has-substeps`:``}"
+          role=${a?`button`:`status`}
+          aria-expanded=${a?o:n.nothing}
+          aria-controls=${a?s:n.nothing}
+          tabindex=${a?0:n.nothing}
+          @click=${a?()=>this._toggleNodeExpansion(e.id):n.nothing}
+          @keydown=${a?t=>{(t.key===`Enter`||t.key===` `)&&(t.preventDefault(),this._toggleNodeExpansion(e.id))}:n.nothing}
+        >
+          ${this._renderStepIcon(t)}
+          <div class="step-content">
+            <div class="step-name">${i}</div>
+            ${r?n.nothing:this._renderChevron(o,!!a)}
+          </div>
+        </div>
+        ${a?n.html`
+              <div
+                id=${s}
+                class="substeps-container ${o?`expanded`:``}"
+              >
+                <div class="substeps">
+                  ${this._renderSubsteps(e.children??[])}
+                </div>
+              </div>
+            `:n.nothing}
+      </div>
+    `}_toggleCondensed(){this._condensedExpanded=!this._condensedExpanded,this.requestUpdate()}_handleCondensedKeydown(e){(e.key===`Enter`||e.key===` `)&&(e.preventDefault(),this._toggleCondensed())}_renderCondensed(){let e=this.progress?.children?.filter(e=>e.status===`success`).length??0,t=(e===1?this.labels.condensedSingular:this.labels.condensedPlural).replace(`{{count}}`,String(e));return n.html`
+      <div class="condensed-container">
+        <div
+          class="condensed-toggle"
+          role="button"
+          tabindex="0"
+          aria-expanded=${this._condensedExpanded}
+          @click=${this._toggleCondensed}
+          @keydown=${this._handleCondensedKeydown}
+        >
+          <span class="condensed-toggle-text">${t}</span>
+          <span
+            class="condensed-toggle-chevron ${this._condensedExpanded?`expanded`:``}"
+          >
+            ${(0,i.luzmoIcon)(i.luzmoAngleDown)}
+          </span>
+        </div>
+        ${this._condensedExpanded?n.html`<div class="condensed-steps">${this._renderSteps()}</div>`:n.nothing}
+      </div>
+    `}_renderSteps(){return(this.progress?.children??[]).map(e=>this._renderStep(e))}render(){return this.condensed?n.html`
+        <div class="progress-steps-container" role="status" aria-live="polite">
+          ${this._renderCondensed()}
+        </div>
+      `:n.html`
+      <div class="progress-steps-container" role="status" aria-live="polite">
+        ${this._renderSteps()}
+      </div>
+    `}};e.t([(0,r.property)({type:Object})],s.prototype,`progress`,void 0),e.t([(0,r.property)({type:String})],s.prototype,`locale`,void 0),e.t([(0,r.property)({type:Boolean})],s.prototype,`collapsed`,void 0),e.t([(0,r.property)({type:String,attribute:`display-mode`})],s.prototype,`displayMode`,void 0),e.t([(0,r.property)({type:Boolean})],s.prototype,`condensed`,void 0),e.t([(0,r.property)({type:Object})],s.prototype,`labels`,void 0),e.t([(0,r.property)({type:Boolean,attribute:`no-animate`,reflect:!0})],s.prototype,`noAnimate`,void 0),e.t([(0,r.state)()],s.prototype,`_condensedExpanded`,void 0),e.t([(0,r.state)()],s.prototype,`_expandedNodes`,void 0),e.t([(0,r.state)()],s.prototype,`_autoExpandedNodes`,void 0),e.t([(0,r.state)()],s.prototype,`_manuallyExpandedNodes`,void 0),customElements.get(`luzmo-progress-steps`)||customElements.define(`luzmo-progress-steps`,s),Object.defineProperty(exports,`t`,{enumerable:!0,get:function(){return s}});

package/components/prompt-box/controllers/attachments-controller.d.ts

@@ -0,0 +1,35 @@
+import { ReactiveController, ReactiveControllerHost } from 'lit';
+import type { PromptBoxAttachment } from '../types';
+export interface AttachmentsHost extends ReactiveControllerHost {
+    allowImages: boolean;
+    allowFiles: boolean;
+    acceptedFileTypes: string[];
+    disabled: boolean;
+    readonly: boolean;
+    pending: boolean;
+    dispatchEvent(event: Event): boolean;
+}
+export declare class AttachmentsController implements ReactiveController {
+    private _host;
+    private _attachments;
+    private _idCounter;
+    constructor(host: AttachmentsHost);
+    hostConnected(): void;
+    hostDisconnected(): void;
+    get attachments(): PromptBoxAttachment[];
+    get hasAttachments(): boolean;
+    get imageAttachments(): PromptBoxAttachment[];
+    get fileAttachments(): PromptBoxAttachment[];
+    addFiles(files: File[]): string[];
+    removeAttachment(id: string): void;
+    clearAttachments(): void;
+    getAttachments(): PromptBoxAttachment[];
+    handlePastedImages(clipboardData: DataTransfer | null): boolean;
+    getAcceptAttribute(): string;
+    isImageFile(file: File): boolean;
+    private _isImageFile;
+    private _isFileTypeAccepted;
+    private _generateId;
+    private _revokeAllPreviewUrls;
+    private _dispatchChange;
+}

package/components/prompt-box/controllers/recording-controller.d.ts

@@ -0,0 +1,23 @@
+import { ReactiveController, ReactiveControllerHost } from 'lit';
+export interface RecordingHost extends ReactiveControllerHost {
+    disabled: boolean;
+    dispatchEvent(event: Event): boolean;
+}
+export declare class RecordingController implements ReactiveController {
+    private _host;
+    private _voiceRecorder;
+    isRecording: boolean;
+    duration: number;
+    audioLevel: number;
+    shouldFocusFinishButton: boolean;
+    constructor(host: RecordingHost);
+    hostConnected(): void;
+    hostDisconnected(): void;
+    start(fromKeyboard: boolean): Promise<void>;
+    stop(): void;
+    cancel(): void;
+    formatDuration(): string;
+    static isSupported(): boolean;
+    private _init;
+    private _destroy;
+}