@luzmo/lucero 2.2.1 → 2.4.0

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

@@ -1,148 +1,121 @@
-import { TemplateResult } from 'lit';
+import { CSSResultArray, nothing, PropertyValues, TemplateResult } from 'lit';
 import { LuzmoElement } from '../../utils/base';
-import type { ProgressStepsDisplayMode, ProgressStepsLabels, ProgressTreeNode } from './types';
+import { type ProgressStepsDisplayMode, type ProgressStepsLabels, type 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
+ * @summary Shows the progress of a multi-step process, such as an AI response,
+ * as a single line that expands into the full step history.
+ *
+ * While a run is in progress, the line shows the newest running step and its
+ * newest running substep. Once the run finishes, it shows how many steps ran.
+ * Activating the line opens the history.
  *
  * @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
+ * @attr collapsed - Signals the run has finished, so the line settles into its summary as soon as no step runs
+ * @attr condensed - Deprecated, no effect: every state is condensed into one line
+ * @attr display-mode - 'detailed' (default) lists substeps in the history, 'compact' lists main steps only
+ * @attr no-animate - Disables the shimmer and transitions
+ * @attr open - Whether the step history is shown
+ *
+ * @fires luzmo-step-expanded - The user opened the step history. `detail.nodeId` is the progress root id.
+ * @fires luzmo-step-collapsed - The user closed the step history. `detail.nodeId` is the progress root id.
  *
- * @fires luzmo-step-expanded - Fired when a step is expanded
- * @fires luzmo-step-collapsed - Fired when a step is collapsed
+ * @cssprop --luzmo-progress-steps-font-size - Font size of the summary line
+ * @cssprop --luzmo-progress-steps-font-size-small - Font size of the step history
+ * @cssprop --luzmo-progress-steps-font-color - Color of emphasized text
+ * @cssprop --luzmo-progress-steps-font-color-dimmed - Color of the summary line and substeps
+ * @cssprop --luzmo-progress-steps-error-color - Color of failed steps
+ * @cssprop --luzmo-progress-steps-warning-color - Color of the failure icon in the summary line
+ * @cssprop --luzmo-progress-steps-substep-connector-color - Color of the timeline rail in the history and the spinner track
  */
 export declare class LuzmoProgressSteps extends LuzmoProgressSteps_base {
-    static styles: import("lit").CSSResult[];
+    static get styles(): CSSResultArray;
     /**
-     * The progress tree from the backend.
-     * The root node's children are rendered as main steps.
+     * The progress tree. The root's children are the main steps.
+     * Replace the whole tree on every update; keep the root `id` for the same run.
      */
     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.
+     * Signals that the run has finished. The summary line then settles as soon
+     * as no step is running, instead of after a short quiet period.
      */
     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
+     * - 'detailed' (default): the history lists main steps with their substeps
+     * - 'compact': the history lists main steps only
      */
     displayMode: ProgressStepsDisplayMode;
     /**
-     * When true, hides all steps behind a single "{n} steps completed" toggle line.
-     * Clicking the toggle expands/collapses the full step list.
+     * @deprecated Has no effect. Every state is condensed into one line.
      */
     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.
+     * Visible and announced copy. Partial overrides are merged over the
+     * English defaults. `{{count}}` is replaced in the count labels.
      */
-    labels: ProgressStepsLabels;
+    labels: Partial<ProgressStepsLabels>;
     /**
-     * When true, disables all entry animations (stepFadeIn, substepFadeIn).
-     * @default false
+     * Disables the shimmer and transitions.
      */
     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 */
+     * Whether the step history is shown. Closes when a run with another root
+     * `id` starts.
+     */
+    open: boolean;
+    private _phase;
+    private _current;
+    private _leaving;
+    private _subStepTransition;
+    private _announcement;
+    private _languageResolver;
+    private _numberFormatter?;
+    private _pending;
+    private _shownAt;
+    private _dwellTimer?;
+    private _settleTimer?;
+    private _leaveTimer?;
+    private _announceTimer?;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    protected willUpdate(changes: PropertyValues): void;
+    private get _labels();
+    /** Moves between running and finished based on the latest tree. */
+    private _syncPhase;
+    private _queue;
+    private _showPending;
+    private _finish;
+    private _show;
+    private _announce;
+    private _resetRun;
+    private _clearDwellTimer;
+    private _clearSettleTimer;
+    private _clearTimers;
+    private _formatCount;
+    /** Formats counts for the resolved page language; cached until it changes. */
+    private get _numberFormat();
+    private _summaryText;
+    private _setOpen;
+    private handleToggle;
+    private handleKeydown;
+    private _statusLabel;
+    private _renderStatusIcon;
+    private _renderContent;
+    /** A dot on the timeline rail; only a failed step gets an icon. */
+    private _renderStepMarker;
     private _renderSubstep;
-    /** @internal */
+    private _renderSubsteps;
     private _renderStep;
-    /** @internal */
-    private _toggleCondensed;
-    /** @internal */
-    private _handleCondensedKeydown;
-    /** @internal */
-    private _renderCondensed;
-    /** @internal */
-    private _renderSteps;
-    render(): TemplateResult;
+    private _renderDetails;
+    render(): TemplateResult | typeof nothing;
 }
 export {};

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

@@ -1,16 +1,26 @@
+/**
+ * Visible and announced copy. `{{count}}` is replaced in the count labels.
+ */
 export interface ProgressStepsLabels {
+    /** Summary once a run with one main step has finished. */
     condensedSingular: string;
+    /** Summary once a run with several main steps has finished. */
     condensedPlural: string;
+    /** Failure count when exactly one step failed. */
+    failedSingular: string;
+    /** Failure count when several steps failed. */
+    failedPlural: string;
     stepInProgress: string;
     stepPending: string;
     stepCompleted: string;
     stepFailed: string;
 }
+export declare const DEFAULT_PROGRESS_STEPS_LABELS: ProgressStepsLabels;
 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
+ * Display mode for the step history
+ * - 'detailed': Lists main steps with their substeps
+ * - 'compact': Lists main steps only
  */
 export type ProgressStepsDisplayMode = 'detailed' | 'compact';
 export type LocalizedString = Record<string, string>;
@@ -30,3 +40,8 @@ export type ProgressTreeNode = {
     description?: string;
     descriptionMetadata?: ProgressTreeNodeDescriptionMetadata;
 };
+/** Detail of `luzmo-step-expanded` and `luzmo-step-collapsed`. */
+export type ProgressStepsToggleDetail = {
+    /** Id of the progress tree root. */
+    nodeId: string;
+};

package/components/progress-steps-Y-Tgh_fQ.cjs

@@ -0,0 +1,98 @@
+/*! * Lucero - The design system for Luzmo.
+ * 
+ * Copyright © 2026 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("./tokens.cjs");const e=require("./decorate-Dq34MBGe.cjs"),t=require("./sized-mixin-BT7cv-fT.cjs"),n=require("./language-resolution-CSjktYg5.cjs");let r=require("lit"),i=require("lit/decorators.js"),a=require("@luzmo/icons"),o=require("lit/directives/class-map.js"),s=require("lit/directives/repeat.js"),c=require("lit/directives/keyed.js");function l(e){for(let t=(e?.length??0)-1;t>=0;t--)if(e[t].status===`inProgress`)return e[t];return null}function u(e){let t=l(e.children);return t?u(t)??t:null}function d(e,t){return typeof e==`object`?e[t]??e.en??Object.values(e)[0]??``:String(e)}function f(e){return!!e?.children?.length}function p(e){let t=l(e?.children);return t?{mainStep:t,subStep:u(t)}:null}function m(e){let t=0;for(let n of e?.children??[])t+=+(n.status===`error`)+m(n);return t}function h(e){return!!e?.children?.some(e=>e.status===`success`||e.status===`error`)}function g(e){return e?.status===`success`||e?.status===`error`}function _(e,t){return e.description?e.description.replaceAll(/\{\{(\w+)\}\}/g,(n,r)=>{let i=e.descriptionMetadata?.[r];return i==null?n:Array.isArray(i)?i.map(e=>d(e,t)).join(`, `):d(i,t)}):e.step}var v=`:host{box-sizing:border-box;font-family:var(--luzmo-font-family);font-size:var(--luzmo-progress-steps-font-size,var(--progress-steps-font-size));line-height:var(--progress-steps-line-height);color:var(--luzmo-progress-steps-font-color-dimmed,var(--progress-steps-font-color-dimmed));display:block}.summary{box-sizing:border-box;align-items:center;gap:var(--progress-steps-gap);max-inline-size:100%;min-block-size:var(--progress-steps-min-height);padding-block:0;padding-inline:var(--progress-steps-padding-inline);border-radius:var(--progress-steps-border-radius);color:inherit;font:inherit;text-align:start;cursor:pointer;appearance:none;background:0 0;border:0;margin:0;display:inline-flex}.summary:hover{background-color:var(--progress-steps-hover-background)}.summary:focus-visible{outline:var(--progress-steps-focus-ring-width) solid var(--highcontrast-progress-steps-focus-ring-color,var(--progress-steps-focus-ring-color));outline-offset:var(--progress-steps-focus-ring-gap)}.status-icon{inline-size:var(--progress-steps-icon-size);block-size:var(--progress-steps-icon-size);flex:none;justify-content:center;align-items:center;display:inline-flex;position:relative;inset-block-start:var(--progress-steps-icon-offset)}.status-icon svg{block-size:100%;inline-size:100%}.status-icon-failed{color:var(--luzmo-progress-steps-warning-color,var(--progress-steps-warning-color))}.spinner{box-sizing:border-box;border:calc(var(--luzmo-border-width) * 1.5) solid var(--highcontrast-progress-steps-spinner-track-color,var(--luzmo-progress-steps-substep-connector-color,var(--progress-steps-substep-connector-color)));border-block-start-color:var(--highcontrast-progress-steps-spinner-color,currentcolor);block-size:70%;inline-size:70%;animation:progress-steps-spin var(--progress-steps-spinner-duration) linear infinite;border-radius:50%}.headline{flex:0 auto;min-inline-size:0;display:block;position:relative;overflow:hidden}.headline-text{white-space:nowrap;min-inline-size:0;display:flex}.headline-text.entering{animation:progress-steps-enter var(--progress-steps-transition-duration) ease-out}.headline-text.leaving{inline-size:100%;animation:progress-steps-leave var(--progress-steps-transition-duration) ease-in forwards;position:absolute;inset-block-start:0;inset-inline-start:0}.main-step{text-overflow:ellipsis;min-inline-size:0;color:var(--luzmo-progress-steps-font-color,var(--progress-steps-font-color));flex:0 auto;overflow:hidden}.main-step:not(:last-child){max-inline-size:var(--progress-steps-main-step-max-width);flex-shrink:0}.sub-step{flex:0 auto;min-inline-size:0;display:flex}.sub-step-texts{min-inline-size:0;display:block;position:relative;overflow:hidden}.sub-step-text{text-overflow:ellipsis;display:block;overflow:hidden}.sub-step-text.entering{animation:progress-steps-enter var(--progress-steps-transition-duration) ease-out}.sub-step-text.leaving{animation:progress-steps-leave var(--progress-steps-transition-duration) ease-in forwards;position:absolute;inset-block-start:0;inset-inline-start:0}.summary[data-state=done] .main-step{color:inherit}.summary:hover .main-step{color:var(--luzmo-progress-steps-font-color,var(--progress-steps-font-color))}.sub-step:before,.failed-count:before{content:"·"/"";flex:none;padding-inline:.35em}.failed-count:before{padding-inline-start:0}.failed-count{white-space:nowrap;flex:none}.shimmer{-webkit-mask-image:linear-gradient(to right, currentcolor 35%, color-mix(in srgb, currentcolor 35%, transparent) 50%, currentcolor 65%);mask-image:linear-gradient(to right, currentcolor 35%, color-mix(in srgb, currentcolor 35%, transparent) 50%, currentcolor 65%);animation:progress-steps-shimmer var(--progress-steps-shimmer-duration) linear infinite;-webkit-mask-size:300% 100%;mask-size:300% 100%}.chevron{inline-size:calc(var(--progress-steps-icon-size) * .8);block-size:calc(var(--progress-steps-icon-size) * .8);transition:transform var(--progress-steps-transition-duration) ease;flex:none;display:inline-flex}.chevron svg{block-size:100%;inline-size:100%}:host([open]) .chevron{transform:rotate(90deg)}:host([dir=rtl]) .chevron svg{transform:scaleX(-1)}:host([dir=rtl][open]) .chevron{transform:rotate(-90deg)}:host([dir=rtl]) .shimmer{animation-direction:reverse}.details{padding-block:var(--progress-steps-step-spacing);padding-inline:var(--progress-steps-padding-inline);font-size:var(--luzmo-progress-steps-font-size-small,var(--progress-steps-font-size-small));line-height:var(--progress-steps-details-line-height);animation:progress-steps-details-in var(--progress-steps-transition-duration) ease-out}.steps,.substeps{margin:0;padding:0;list-style:none}.step{grid-template-columns:var(--progress-steps-icon-size) minmax(0, 1fr);column-gap:var(--progress-steps-gap);padding-block:var(--progress-steps-step-spacing);display:grid;position:relative}.step:before,.step:after{content:"";border-inline-start:var(--luzmo-border-width) solid var(--luzmo-progress-steps-substep-connector-color,var(--progress-steps-substep-connector-color));position:absolute;inset-inline-start:calc(var(--progress-steps-icon-size) / 2 - var(--luzmo-border-width) / 2)}.step:before{block-size:calc(var(--progress-steps-marker-center) - var(--progress-steps-marker-radius));inset-block-start:0}.step:after{inset-block:calc(var(--progress-steps-marker-center) + var(--progress-steps-marker-radius)) 0}.step:first-child:before{display:none}.step:last-child:not(:has(>.substeps)):after{display:none}.step-marker{block-size:calc(1em * var(--progress-steps-details-line-height));color:var(--luzmo-progress-steps-font-color-dimmed,var(--progress-steps-font-color-dimmed));justify-content:center;align-items:center;display:inline-flex}.step-marker svg{inline-size:var(--progress-steps-marker-size);block-size:var(--progress-steps-marker-size)}.step-dot{box-sizing:border-box;inline-size:var(--progress-steps-dot-size);block-size:var(--progress-steps-dot-size);border:calc(var(--progress-steps-dot-size) / 2) solid currentcolor;border-radius:50%}.step-inProgress .step-marker{color:var(--luzmo-progress-steps-font-color,var(--progress-steps-font-color))}.step-inProgress .step-marker .step-dot{animation:1.2s ease-in-out infinite progress-steps-pulse}.step-pending .step-dot{border-width:var(--luzmo-border-width)}.step-error .step-marker{color:var(--luzmo-progress-steps-error-color,var(--progress-steps-error-color))}.step-label{color:var(--luzmo-progress-steps-font-color,var(--progress-steps-font-color));overflow-wrap:anywhere}.step>.substeps{grid-column:2}.substep>.substeps{padding-inline-start:var(--progress-steps-substep-indent)}.substep{padding-block:calc(var(--progress-steps-step-spacing) / 2);overflow-wrap:anywhere}.substep-inProgress{color:var(--luzmo-progress-steps-font-color,var(--progress-steps-font-color))}.substep-error{color:var(--luzmo-progress-steps-error-color,var(--progress-steps-error-color))}.substep-icon{vertical-align:-.1em;block-size:.85em;inline-size:.85em;margin-inline-end:.3em;display:inline-flex}.substep-icon svg{block-size:100%;inline-size:100%}.visually-hidden{clip-path:inset(50%);white-space:nowrap;border:0;block-size:1px;inline-size:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}:host([no-animate]) .headline-text,:host([no-animate]) .sub-step-text,:host([no-animate]) .details,:host([no-animate]) .chevron,:host([no-animate]) .spinner,:host([no-animate]) .step-dot{transition:none;animation:none}:host([no-animate]) .leaving{display:none}@keyframes progress-steps-shimmer{0%{-webkit-mask-position:100% 0;mask-position:100% 0}to{-webkit-mask-position:0 0;mask-position:0 0}}@keyframes progress-steps-enter{0%{opacity:0;transform:translateY(60%)}}@keyframes progress-steps-leave{to{opacity:0;transform:translateY(-60%)}}@keyframes progress-steps-details-in{0%{opacity:0;transform:translateY(calc(-1 * var(--luzmo-spacing-2)))}}@keyframes progress-steps-spin{to{transform:rotate(360deg)}}@keyframes progress-steps-pulse{50%{opacity:.35}}@media (prefers-reduced-motion:reduce){.shimmer,.headline-text,.sub-step-text,.details,.chevron,.spinner,.step-dot{transition:none;animation:none}.leaving{display:none}}@media (forced-colors:active){.shimmer{animation:none;-webkit-mask-image:none;mask-image:none}.spinner{forced-color-adjust:none}}:host{--progress-steps-font-size:var(--luzmo-font-size);--progress-steps-line-height:1.5;--progress-steps-font-color:color-mix(in oklch, var(--luzmo-font-color) 65%, var(--luzmo-font-color-extra-dimmed));--progress-steps-font-color-dimmed:color-mix(in oklch, var(--luzmo-font-color) 35%, var(--luzmo-font-color-extra-dimmed));--progress-steps-error-color:var(--luzmo-negative-color);--progress-steps-warning-color:var(--luzmo-notice-color);--progress-steps-substep-connector-color:var(--luzmo-border-color-down);--progress-steps-hover-background:var(--luzmo-background-color-hover);--progress-steps-border-radius:var(--luzmo-border-radius);--progress-steps-focus-ring-width:var(--luzmo-indicator-width);--progress-steps-focus-ring-gap:var(--luzmo-indicator-gap);--progress-steps-focus-ring-color:var(--luzmo-indicator-color);--progress-steps-min-height:var(--luzmo-component-height-xs);--progress-steps-gap:calc(var(--luzmo-spacing-2) + var(--luzmo-spacing-1));--progress-steps-padding-inline:var(--luzmo-spacing-2);--progress-steps-step-spacing:var(--luzmo-spacing-1);--progress-steps-icon-size:var(--luzmo-icon-size-m);--progress-steps-icon-offset:.04em;--progress-steps-main-step-max-width:65%;--progress-steps-font-size-small:.93em;--progress-steps-details-line-height:1.4;--progress-steps-marker-size:.8em;--progress-steps-dot-size:calc(var(--luzmo-spacing-2) + var(--luzmo-spacing-1));--progress-steps-substep-indent:var(--luzmo-spacing-4);--progress-steps-transition-duration:.25s;--progress-steps-shimmer-duration:1.8s;--progress-steps-spinner-duration:.9s}:host([size=s]){--progress-steps-font-size:var(--luzmo-font-size-s);--progress-steps-icon-size:var(--luzmo-icon-size-s);--progress-steps-gap:var(--luzmo-spacing-2)}:host([size=l]){--progress-steps-font-size:var(--luzmo-font-size-l);--progress-steps-icon-size:var(--luzmo-icon-size-l);--progress-steps-min-height:var(--luzmo-component-height-s);--progress-steps-step-spacing:var(--luzmo-spacing-2)}:host([size=xl]){--progress-steps-font-size:var(--luzmo-font-size-xl);--progress-steps-icon-size:var(--luzmo-icon-size-xl);--progress-steps-min-height:var(--luzmo-component-height-s);--progress-steps-gap:var(--luzmo-spacing-3);--progress-steps-step-spacing:var(--luzmo-spacing-2)}.step{--progress-steps-marker-center:calc(var(--progress-steps-step-spacing) + .5em * var(--progress-steps-details-line-height));--progress-steps-marker-radius:calc(var(--progress-steps-dot-size) / 2)}.step-error{--progress-steps-marker-radius:calc(var(--progress-steps-marker-size) / 2)}@media (forced-colors:active){:host{--highcontrast-progress-steps-focus-ring-color:Highlight;--highcontrast-progress-steps-spinner-track-color:GrayText;--highcontrast-progress-steps-spinner-color:CanvasText}}`,y={condensedSingular:`Worked through {{count}} step`,condensedPlural:`Worked through {{count}} steps`,failedSingular:`{{count}} failed`,failedPlural:`{{count}} failed`,stepInProgress:`Step in progress`,stepPending:`Step pending`,stepCompleted:`Step completed`,stepFailed:`Step failed`},b=500,x=800,S=1e3,C=250,w={mainStep:null,subStep:null},T=(e,t)=>e?.mainStep===t.mainStep&&e?.subStep===t.subStep,E=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={...y},this.noAnimate=!1,this.open=!1,this._phase=`idle`,this._current=null,this._leaving=null,this._subStepTransition=null,this._announcement=``,this._languageResolver=new n.t(this),this._pending=null,this._shownAt=0}static get styles(){let e=super.styles;return[...Array.isArray(e)?e:e?[e]:[],(0,r.unsafeCSS)(v)]}connectedCallback(){super.connectedCallback(),this.hasUpdated&&this._syncPhase()}disconnectedCallback(){super.disconnectedCallback(),this._clearTimers(),this._leaving=null,this._subStepTransition=null}willUpdate(e){super.willUpdate(e),e.has(n.r)&&(this._numberFormatter=void 0),e.has(`progress`)?(e.get(`progress`)?.id!==this.progress?.id&&(this._resetRun(),this.hasUpdated&&(this.open=!1)),this._syncPhase()):(e.has(`collapsed`)&&this.collapsed||e.has(`locale`))&&this._syncPhase()}get _labels(){return{...y,...this.labels}}_syncPhase(){if(!f(this.progress)){this._resetRun();return}let e=g(this.progress)?null:p(this.progress);if(e){this._clearSettleTimer(),this._phase=`running`,this._queue(e);return}if(this._phase===`done`)return;let t=this.collapsed||g(this.progress);if(this._phase===`idle`){(t||h(this.progress))&&this._finish();return}if(t){this._finish();return}this._settleTimer??=setTimeout(()=>{this._settleTimer=void 0,this._finish()},x)}_queue(e){let t={mainStep:_(e.mainStep,this.locale),subStep:e.subStep?_(e.subStep,this.locale):null};if(T(this._current,t)){this._pending=null,this._clearDwellTimer();return}this._pending=t;let n=this._current?this._shownAt+b-Date.now():0;this.noAnimate||n<=0?this._showPending():this._dwellTimer??=setTimeout(()=>{this._dwellTimer=void 0,this._showPending()},n)}_showPending(){let e=this._pending;this._pending=null,e&&this._phase===`running`&&(this._show(e),this._announce(e.mainStep))}_finish(){let e=this._phase===`running`;this._clearDwellTimer(),this._clearSettleTimer(),this._pending=null,this._phase=`done`,this._show(w),e&&this._announce(this._summaryText())}_show(e){let t=this._current;t&&!this.noAnimate&&(t.mainStep!==null&&t.mainStep===e.mainStep?this._subStepTransition={leaving:t.subStep}:(this._leaving=t,this._subStepTransition=null),clearTimeout(this._leaveTimer),this._leaveTimer=setTimeout(()=>{this._leaving=null,this._subStepTransition=null},C)),this._current=e,this._shownAt=Date.now()}_announce(e){clearTimeout(this._announceTimer),this._announceTimer=setTimeout(()=>{this._announcement=e},S)}_resetRun(){this._clearTimers(),this._phase=`idle`,this._current=null,this._leaving=null,this._subStepTransition=null,this._pending=null,this._announcement=``}_clearDwellTimer(){clearTimeout(this._dwellTimer),this._dwellTimer=void 0}_clearSettleTimer(){clearTimeout(this._settleTimer),this._settleTimer=void 0}_clearTimers(){this._clearDwellTimer(),this._clearSettleTimer(),clearTimeout(this._leaveTimer),clearTimeout(this._announceTimer)}_formatCount(e,t){return e.replaceAll(`{{count}}`,this._numberFormat.format(t))}get _numberFormat(){if(!this._numberFormatter)try{this._numberFormatter=new Intl.NumberFormat(this._languageResolver.language)}catch{this._numberFormatter=new Intl.NumberFormat}return this._numberFormatter}_summaryText(){let e=this.progress?.children?.length??0,t=this._labels;return this._formatCount(e===1?t.condensedSingular:t.condensedPlural,e)}_setOpen(e){this.open=e,this.dispatchEvent(new CustomEvent(e?`luzmo-step-expanded`:`luzmo-step-collapsed`,{bubbles:!0,composed:!0,detail:{nodeId:this.progress?.id??``}}))}handleToggle(){this._setOpen(!this.open)}handleKeydown(e){e.key===`Escape`&&this.open&&(e.preventDefault(),this._setOpen(!1))}_statusLabel(e){let t=this._labels;switch(e){case`inProgress`:return t.stepInProgress;case`success`:return t.stepCompleted;case`error`:return t.stepFailed;default:return t.stepPending}}_renderStatusIcon(e){return e?r.html`<span
+        class="status-icon status-icon-failed"
+        aria-hidden="true"
+        >${(0,a.luzmoIcon)(a.luzmoAlert)}</span
+      >`:this._phase===`running`?r.html`<span class="status-icon" aria-hidden="true"
+        ><span class="spinner"></span
+      ></span>`:r.html`<span
+      class="status-icon status-icon-finished"
+      aria-hidden="true"
+      >${(0,a.luzmoIcon)(a.luzmoCheckCircleOutline)}</span
+    >`}_renderContent({mainStep:e,subStep:t},n=null){if(e===null)return r.html`<span class="main-step">${this._summaryText()}</span>`;let i=n?.leaving??null;return t===null&&i===null?r.html`<span class="main-step">${e}</span>`:r.html`<span class="main-step">${e}</span>
+      <span class="sub-step"
+        ><span class="sub-step-texts"
+          >${i===null?r.nothing:r.html`<span class="sub-step-text leaving" aria-hidden="true"
+                  >${i}</span
+                >`}${t===null?r.nothing:(0,c.keyed)(t,r.html`<span
+                    class=${(0,o.classMap)({"sub-step-text":!0,entering:n!==null})}
+                    >${t}</span
+                  >`)}</span
+        ></span
+      >`}_renderStepMarker(e){return r.html`<span
+      class="step-marker"
+      role="img"
+      aria-label=${this._statusLabel(e)}
+      >${e===`error`?(0,a.luzmoIcon)(a.luzmoClose14):r.html`<span class="step-dot"></span>`}</span
+    >`}_renderSubstep(e){return r.html`<li
+      class=${(0,o.classMap)({substep:!0,[`substep-${e.status}`]:!0})}
+    >
+      ${e.status===`error`?r.html`<span
+              class="substep-icon"
+              role="img"
+              aria-label=${this._labels.stepFailed}
+              >${(0,a.luzmoIcon)(a.luzmoClose14)}</span
+            >`:r.nothing}<span class="substep-label"
+        >${_(e,this.locale)}</span
+      >
+      ${e.children?.length?this._renderSubsteps(e.children):r.nothing}
+    </li>`}_renderSubsteps(e){return r.html`<ul class="substeps">
+      ${(0,s.repeat)(e,e=>e.id,e=>this._renderSubstep(e))}
+    </ul>`}_renderStep(e,t){return r.html`<li
+      class=${(0,o.classMap)({step:!0,[`step-${e.status}`]:!0})}
+    >
+      ${this._renderStepMarker(e.status)}
+      <span class="step-label"
+        >${_(e,this.locale)}</span
+      >
+      ${t&&e.children?.length?this._renderSubsteps(e.children):r.nothing}
+    </li>`}_renderDetails(){let e=this.displayMode!==`compact`;return r.html`<div id="details" class="details">
+      <ol class="steps">
+        ${(0,s.repeat)(this.progress?.children??[],e=>e.id,t=>this._renderStep(t,e))}
+      </ol>
+    </div>`}render(){if(this._phase===`idle`||!this._current)return r.nothing;let e=m(this.progress),t=this._labels,n=this._phase===`running`&&!this.noAnimate;return r.html`
+      <button
+        type="button"
+        class="summary"
+        data-state=${this._phase}
+        aria-expanded=${this.open?`true`:`false`}
+        aria-controls=${this.open?`details`:r.nothing}
+        @click=${this.handleToggle}
+        @keydown=${this.handleKeydown}
+      >
+        ${this._renderStatusIcon(e>0||this.progress?.status===`error`)}
+        <span class=${(0,o.classMap)({headline:!0,shimmer:n})}>
+          ${this._leaving?r.html`<span class="headline-text leaving" aria-hidden="true"
+                  >${this._renderContent(this._leaving)}</span
+                >`:r.nothing}
+          ${(0,c.keyed)(this._current.mainStep??w,r.html`<span
+              class=${(0,o.classMap)({"headline-text":!0,entering:this._leaving!==null})}
+              >${this._renderContent(this._current,this._subStepTransition)}</span
+            >`)}
+        </span>
+        ${e>0?r.html`<span class="failed-count"
+                >${this._formatCount(e===1?t.failedSingular:t.failedPlural,e)}</span
+              >`:r.nothing}
+        <span class="chevron" aria-hidden="true"
+          >${(0,a.luzmoIcon)(a.luzmoAngleRight)}</span
+        >
+      </button>
+      ${this.open?this._renderDetails():r.nothing}
+      <span class="visually-hidden" role="status">${this._announcement}</span>
+    `}};e.t([(0,i.property)({attribute:!1})],E.prototype,`progress`,void 0),e.t([(0,i.property)({type:String,reflect:!0})],E.prototype,`locale`,void 0),e.t([(0,i.property)({type:Boolean,reflect:!0})],E.prototype,`collapsed`,void 0),e.t([(0,i.property)({type:String,attribute:`display-mode`,reflect:!0})],E.prototype,`displayMode`,void 0),e.t([(0,i.property)({type:Boolean,reflect:!0})],E.prototype,`condensed`,void 0),e.t([(0,i.property)({attribute:!1})],E.prototype,`labels`,void 0),e.t([(0,i.property)({type:Boolean,attribute:`no-animate`,reflect:!0})],E.prototype,`noAnimate`,void 0),e.t([(0,i.property)({type:Boolean,reflect:!0})],E.prototype,`open`,void 0),e.t([(0,i.state)()],E.prototype,`_phase`,void 0),e.t([(0,i.state)()],E.prototype,`_current`,void 0),e.t([(0,i.state)()],E.prototype,`_leaving`,void 0),e.t([(0,i.state)()],E.prototype,`_subStepTransition`,void 0),e.t([(0,i.state)()],E.prototype,`_announcement`,void 0),typeof customElements<`u`&&!customElements.get(`luzmo-progress-steps`)&&customElements.define(`luzmo-progress-steps`,E),Object.defineProperty(exports,"n",{enumerable:!0,get:function(){return y}}),Object.defineProperty(exports,"t",{enumerable:!0,get:function(){return E}});