@awc-ui/core 1.0.0-beta.3 → 1.0.0-beta.4

package/dist/components/md-step.js

@@ -1,2 +1,2 @@
-import{p as t,H as e,c as s,h as a,d as i,t as r}from"./p-BR6gfOQH.js";import{t as o}from"./p-DYBUr7K_.js";import{d as n}from"./p-BADA63mI.js";import{d}from"./p-B-iHDK5h.js";import{d as l}from"./p-CTC8XAB6.js";const c=()=>`:host{--_size:var(--md-step-indicator-size, max(24px, calc(32px + var(--md-sys-density-scale, 0) * 2px)));--_indicator-h:var(--_size);--_indicator-ring:var(--md-step-indicator-ring, max(4px, calc(8px + var(--md-sys-density-scale, 0) * 1px)));--_color:var(--md-step-indicator-color, var(--md-sys-color-surface-container-highest, #E6E0E9));--_text:var(--md-step-indicator-text, var(--md-sys-color-on-surface-variant, #49454F));--_active-color:var(--md-step-active-color, var(--md-sys-color-primary, #6750A4));--_active-text:var(--md-step-active-text, var(--md-sys-color-on-primary, #FFFFFF));--_active-halo:var(--md-step-active-halo-color, var(--md-sys-color-primary, #6750A4));--_completed-color:var(--md-step-completed-color, var(--md-sys-color-primary, #6750A4));--_completed-text:var(--md-step-completed-text, var(--md-sys-color-on-primary, #FFFFFF));--_error-color:var(--md-step-error-color, var(--md-sys-color-error, #B3261E));--_error-text:var(--md-step-error-text, var(--md-sys-color-on-error, #FFFFFF));--_connector:var(--md-step-connector-color, var(--md-sys-color-outline-variant, #CAC4D0));--_connector-filled:var(--md-step-connector-filled-color, var(--md-sys-color-primary, #6750A4));--_connector-thickness:var(--md-step-connector-thickness, max(2px, calc(4px + var(--md-sys-density-scale, 0) * 0.5px)));--_label-color:var(--md-step-label-color, var(--md-sys-color-on-surface-variant, #49454F));--_label-active-color:var(--md-step-label-active-color, var(--md-sys-color-on-surface, #1C1B1F));--_description-color:var(--md-step-description-color, var(--md-sys-color-on-surface-variant, #49454F));--_state-layer-color:var(--md-step-state-layer-color, var(--md-sys-color-on-surface, #1C1B1F));--_spring-duration:var(--md-sys-motion-spring-spatial-default-duration, 500ms);--_spring-easing:var(--md-sys-motion-spring-spatial-default-easing, cubic-bezier(0.38, 1.21, 0.22, 1.00));--_state-duration:var(--md-sys-motion-spring-effects-default-duration, 200ms);--_state-easing:var(--md-sys-motion-spring-effects-default-easing, cubic-bezier(0.34, 0.80, 0.34, 1.00));--_expand-duration:var(--md-step-expand-duration, var(--md-sys-motion-spring-spatial-default-duration, 500ms));--_expand-easing:var(--md-sys-motion-spring-spatial-default-easing, cubic-bezier(0.38, 1.21, 0.22, 1.00));--_collapse-duration:var(--md-step-collapse-duration, var(--md-sys-motion-duration-short4, 200ms));--_collapse-easing:var(--md-sys-motion-easing-emphasized-accelerate, cubic-bezier(0.3, 0, 0.8, 0.15));--_connector-duration:var(--md-step-connector-duration, var(--md-sys-motion-duration-medium3, 350ms));--_connector-easing:linear;--_active-halo-size:3px;display:flex;box-sizing:border-box;position:relative;font-family:var(--md-sys-typescale-body-large-font-family, Roboto, sans-serif);animation:md-step-enter var(--md-sys-motion-spring-effects-slow-duration, 300ms) var(--_state-easing) backwards;animation-delay:calc(var(--md-step-idx, 0) * 40ms)}@keyframes md-step-enter{from{opacity:0}}:host(.md-step--indicator-dot){--_indicator-h:10px;--_color:var(--md-step-indicator-color, var(--md-sys-color-outline, #79747E))}:host(.md-step--horizontal){--_indicator-pad:max(0px, calc(4px + var(--md-sys-density-scale, 0) * 1px));--_connector-gap:max(4px, calc(10px + var(--md-sys-density-scale, 0) * 1px));flex:1 1 0;min-inline-size:0;justify-content:center;align-items:flex-start}:host(.md-step--horizontal.md-step--panel-step){display:contents}:host(.md-step--horizontal.md-step--panel-step) .md-step__header{grid-row:1;display:flex;flex:1 1 0;min-inline-size:0;justify-content:center;align-items:flex-start;position:relative}:host(.md-step--horizontal.md-step--panel-step) .md-step__content{grid-row:2;grid-column:1 / -1}:host(.md-step--vertical){flex:initial;flex-direction:row;align-items:flex-start;flex-wrap:wrap;--_connector-gap:6px;padding-block-end:var(--md-sys-spacing-inset-lg, 16px)}:host(.md-step--vertical.md-step--last){padding-block-end:0}.md-step__inner{position:relative;display:inline-flex;align-items:center;gap:var(--md-sys-spacing-gap-md, 12px);padding:0;background:transparent;border:none;cursor:pointer;text-align:start;color:inherit;font:inherit;-webkit-tap-highlight-color:transparent}:host(.md-step--horizontal) .md-step__inner{flex-direction:column;align-items:center;gap:max(2px, calc(6px + var(--md-sys-density-scale, 0) * 1px));padding-block-start:var(--_indicator-pad);padding-inline:var(--md-sys-spacing-inset-sm, 8px);max-inline-size:100%;min-inline-size:0;z-index:1}:host(.md-step--vertical) .md-step__inner{padding-inline-start:8px;z-index:1}.md-step__indicator{position:relative;display:inline-flex;align-items:center;justify-content:center;inline-size:calc(var(--_indicator-h) + 2 * var(--_indicator-ring));block-size:calc(var(--_indicator-h) + 2 * var(--_indicator-ring));border-radius:50%;flex-shrink:0;color:var(--_state-layer-color)}.md-step__indicator md-ripple{border-radius:50%}.md-step__state-layer{position:absolute;inset:0;border-radius:50%;background-color:var(--_state-layer-color);opacity:0;pointer-events:none;transition:opacity var(--_state-duration) var(--_state-easing)}.md-step__inner:hover:not([aria-disabled="true"]) .md-step__state-layer{opacity:var(--md-sys-state-hover-state-layer-opacity, 0.08)}.md-step__inner:focus-visible .md-step__state-layer{opacity:var(--md-sys-state-focus-state-layer-opacity, 0.12)}.md-step__inner:active:not([aria-disabled="true"]) .md-step__state-layer{opacity:var(--md-sys-state-pressed-state-layer-opacity, 0.12)}.md-step__inner:focus-visible{outline:none}.md-step__inner:focus-visible .md-step__indicator{box-shadow:0 0 0 2px var(--md-sys-color-surface, #FEF7FF),     0 0 0 5px var(--md-sys-color-secondary, #625B71)}:host(.md-step--disabled) .md-step__inner{cursor:not-allowed}:host(.md-step--disabled) .md-step__indicator{opacity:0.38}:host(.md-step--disabled) md-ripple,:host(.md-step--disabled) .md-step__state-layer{display:none}.md-step__bubble{position:relative;display:inline-flex;align-items:center;justify-content:center;inline-size:var(--_size);block-size:var(--_size);border-radius:var(--md-sys-shape-corner-full, 9999px);background-color:var(--_color);color:var(--_text);font-family:var(--md-sys-typescale-label-large-font-family, Roboto, sans-serif);font-size:var(--md-sys-typescale-label-large-font-size, 14px);font-weight:var(--md-sys-typescale-label-large-font-weight, 500);line-height:var(--md-sys-typescale-label-large-line-height, 20px);flex-shrink:0;transition:background-color var(--_state-duration) var(--_state-easing),     color var(--_state-duration) var(--_state-easing),     transform var(--_spring-duration) var(--_spring-easing),     box-shadow var(--_spring-duration) var(--_spring-easing)}.md-step__bubble .material-symbols-outlined{font-family:var(--md-sys-icon-font-family, 'Material Symbols Outlined', 'Material Icons');font-size:calc(var(--_size) * 0.56);line-height:1;font-weight:normal;font-style:normal;letter-spacing:normal;text-transform:none;white-space:nowrap;direction:ltr;-webkit-font-smoothing:antialiased;font-variation-settings:'FILL' 0, 'wght' 500, 'GRAD' 0, 'opsz' 24}:host(.md-step--active) .md-step__bubble .material-symbols-outlined,:host(.md-step--completed) .md-step__bubble .material-symbols-outlined,:host(.md-step--error) .md-step__bubble .material-symbols-outlined{font-variation-settings:'FILL' 1, 'wght' 600, 'GRAD' 0, 'opsz' 24}@keyframes md-step-glyph-in{0%{transform:scale(0);opacity:0}60%{transform:scale(1.18);opacity:1}100%{transform:scale(1);opacity:1}}:host(.md-step--completed) .md-step__bubble .material-symbols-outlined,:host(.md-step--error) .md-step__bubble .material-symbols-outlined{animation:md-step-glyph-in var(--_spring-duration) var(--_spring-easing) both}:host(.md-step--active) .md-step__bubble{background-color:var(--_active-color);color:var(--_active-text);transform:scale(1.12);box-shadow:0 0 0 var(--_active-halo-size) color-mix(in srgb, var(--_active-halo) 14%, transparent)}:host(.md-step--completed) .md-step__bubble{background-color:var(--_completed-color);color:var(--_completed-text)}:host(.md-step--error) .md-step__bubble{background-color:var(--_error-color);color:var(--_error-text);animation:md-step-error-pulse var(--md-sys-motion-duration-medium2, 300ms) var(--_state-easing) both}@keyframes md-step-error-pulse{0%{transform:scale(1)}40%{transform:scale(1.08)}100%{transform:scale(1)}}.md-step__dot{display:inline-block;inline-size:var(--_indicator-h);block-size:var(--_indicator-h);border-radius:var(--md-sys-shape-corner-full, 9999px);background-color:var(--_color);flex-shrink:0;transition:background-color var(--_state-duration) var(--_state-easing),     box-shadow var(--_spring-duration) var(--_spring-easing),     transform var(--_spring-duration) var(--_spring-easing)}:host(.md-step--active) .md-step__dot{background-color:var(--_active-color);transform:scale(1.4);box-shadow:0 0 0 var(--_active-halo-size) color-mix(in srgb, var(--_active-halo) 18%, transparent)}:host(.md-step--completed) .md-step__dot{background-color:var(--_completed-color)}:host(.md-step--error) .md-step__dot{background-color:var(--_error-color)}.md-step__text{display:flex;flex-direction:column;gap:2px;min-inline-size:0}:host(.md-step--horizontal) .md-step__text{align-items:center;text-align:center;max-inline-size:100%}.md-step__label{color:var(--_label-color);font-family:var(--md-sys-typescale-label-large-font-family, Roboto, sans-serif);font-size:max(11px, calc(14px + var(--md-sys-density-scale, 0) * 0.5px));font-weight:var(--md-sys-typescale-label-large-font-weight, 500);line-height:max(16px, calc(20px + var(--md-sys-density-scale, 0) * 1px));transition:color var(--_state-duration) var(--_state-easing),     font-variation-settings var(--_state-duration) var(--_state-easing)}:host(.md-step--horizontal) .md-step__label{white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}:host(.md-step--active) .md-step__label{color:var(--_label-active-color);font-weight:600;font-variation-settings:'wght' 600}:host(.md-step--error) .md-step__label{color:var(--_error-color)}:host(.md-step--disabled) .md-step__text{opacity:0.38}.md-step__optional,.md-step__description{color:var(--_description-color);font-family:var(--md-sys-typescale-body-small-font-family, Roboto, sans-serif);font-size:max(10px, calc(12px + var(--md-sys-density-scale, 0) * 0.5px));font-weight:var(--md-sys-typescale-body-small-font-weight, 400);line-height:max(14px, calc(16px + var(--md-sys-density-scale, 0) * 0.5px))}.md-step__optional{font-style:italic}:host(.md-step--error) .md-step__description{color:var(--_error-color)}.md-step__connector{position:relative;flex:1;align-self:center;background-color:var(--_connector);overflow:hidden;border-radius:var(--md-sys-shape-corner-full, 9999px)}.md-step__connector::after{content:'';position:absolute;inset:0;background-color:var(--_connector-filled);border-radius:inherit;transform-origin:left center;transform:scaleX(0);transition:transform var(--_connector-duration) var(--_connector-easing)}.md-step__connector--filled::after{transform:scaleX(1)}:host([dir="rtl"]) .md-step__connector::after,:host-context([dir="rtl"]) .md-step__connector::after{transform-origin:right center}:host(.md-step--horizontal) .md-step__connector--trailing{position:absolute;inset-block-start:calc(var(--_indicator-pad) + var(--_indicator-ring) + var(--_indicator-h) / 2);transform:translateY(-50%);block-size:var(--_connector-thickness);inset-inline-start:calc(50% + var(--_indicator-h) / 2 + var(--_connector-gap));inline-size:calc(100% - var(--_indicator-h) - 2 * var(--_connector-gap));flex:none;align-self:auto;z-index:0}:host(.md-step--vertical) .md-step__connector{position:absolute;flex:none;align-self:auto;z-index:0;inline-size:var(--_connector-thickness);inset-inline-start:calc(8px + var(--_indicator-ring) + (var(--_indicator-h) - var(--_connector-thickness)) / 2)}:host(.md-step--vertical) .md-step__connector--leading{display:none}:host(.md-step--vertical) .md-step__connector--trailing{inset-block-start:calc(var(--_indicator-ring) + var(--_indicator-h) + var(--_connector-gap));inset-block-end:calc(var(--_connector-gap) - var(--_indicator-ring))}:host(.md-step--vertical) .md-step__connector::after{transform-origin:center top;transform:scaleY(0)}:host(.md-step--vertical) .md-step__connector--filled::after{transform:scaleY(1)}.md-step__content{flex:1 1 100%;display:grid;grid-template-rows:0fr;opacity:0;visibility:hidden;margin-inline-start:calc(8px + var(--_indicator-h) + 2 * var(--_indicator-ring) + var(--md-sys-spacing-gap-md, 12px));color:var(--md-sys-color-on-surface, #1C1B1F);transition:grid-template-rows var(--_collapse-duration) var(--_collapse-easing),     opacity var(--_collapse-duration) var(--_collapse-easing),     visibility 0s linear var(--_collapse-duration)}.md-step__content--open{grid-template-rows:1fr;opacity:1;visibility:visible;transition:grid-template-rows var(--_expand-duration) var(--_expand-easing),     opacity var(--_state-duration) var(--_state-easing),     visibility 0s}.md-step__content-sizer{min-block-size:0;overflow:hidden}.md-step__content-inner{padding-block-start:var(--md-sys-spacing-inset-xs, 4px);padding-block-end:var(--md-sys-spacing-inset-lg, 16px)}.md-step__content--lazy{display:block;grid-template-rows:none;opacity:1;visibility:visible;transition:none;animation:md-step-content-enter var(--_expand-duration) var(--_expand-easing) both}.md-step__content--lazy .md-step__content-sizer{overflow:visible}@keyframes md-step-content-enter{from{opacity:0;transform:translateY(-6px)}}.md-step__actions{display:flex;gap:var(--md-sys-spacing-gap-sm, 8px);margin-block-start:var(--md-sys-spacing-gap-lg, 16px)}@media (max-width: 599px){:host(.md-step--horizontal){--_size:var(--md-step-indicator-size, 28px);--_connector-gap:8px}:host(.md-step--horizontal) .md-step__inner{gap:var(--md-sys-spacing-gap-xs, 4px);padding-inline:var(--md-sys-spacing-inset-xs, 4px)}:host(.md-step--horizontal) .md-step__label{font-size:var(--md-sys-typescale-label-medium-font-size, 12px);line-height:var(--md-sys-typescale-label-medium-line-height, 16px)}:host(.md-step--horizontal) .md-step__optional,:host(.md-step--horizontal) .md-step__description{display:none}}@media (prefers-reduced-motion: reduce){:host{animation:none !important}.md-step__bubble,.md-step__dot,.md-step__connector,.md-step__connector::after,.md-step__state-layer,.md-step__label,.md-step__content,.md-step__bubble .material-symbols-outlined{transition-duration:0.01ms !important;transition-delay:0s !important;animation:none !important}:host(.md-step--active) .md-step__bubble,:host(.md-step--active) .md-step__dot{transform:none;box-shadow:0 0 0 3px color-mix(in srgb, var(--_active-halo) 25%, transparent)}}@media (forced-colors: active){.md-step__bubble,.md-step__dot{background-color:Canvas;border:2px solid CanvasText;forced-color-adjust:none}:host(.md-step--active) .md-step__bubble,:host(.md-step--completed) .md-step__bubble{background-color:Highlight;color:HighlightText}.md-step__connector{background-color:GrayText;forced-color-adjust:none}.md-step__connector::after{background-color:Highlight}.md-step__state-layer{display:none}.md-step__inner:focus-visible .md-step__indicator{box-shadow:0 0 0 3px Highlight}}:host([density='-1']){--md-sys-density-scale:-1}:host([density='-2']){--md-sys-density-scale:-2}:host([density='-3']){--md-sys-density-scale:-3}:host([density='-4']){--md-sys-density-scale:-4}`;const p=t(class t extends e{constructor(t){super();if(t!==false){this.__registerHost()}this.__attachShadow();this.mdStepClick=s(this,"mdStepClick",5);this.mdStepNext=s(this,"mdStepNext",5);this.mdStepBack=s(this,"mdStepBack",5);this.label="";this.description="";this.completed=false;this.active=false;this.error=false;this.errorText="";this.disabled=false;this.optional=false;this.editable=false;this.icon="";this.completedIcon="check";this.errorIcon="priority_high";this.hideActions=false;this.density=0;this.hasSlottedContent=false;this.handleClick=t=>{if(this.effectivelyDisabled)return;t.preventDefault();this.mdStepClick.emit({index:this.index})};this.handleKeyDown=t=>{if(this.effectivelyDisabled)return;if(t.key==="Enter"||t.key===" "){t.preventDefault();o(this.el);this.mdStepClick.emit({index:this.index})}};this.emitNext=()=>this.mdStepNext.emit({index:this.index});this.emitBack=()=>this.mdStepBack.emit({index:this.index})}attr(t,e=""){const s=this.el.getAttribute(t);return s!=null&&s!==""?s:e}get index(){return Number(this.attr("data-index","0"))}get total(){return Number(this.attr("data-total","0"))}get activeIndex(){return Number(this.attr("data-active","0"))}get position(){return this.el.getAttribute("data-position")??"first"}get orientation(){return this.el.getAttribute("data-orientation")??"horizontal"}get indicatorKind(){return this.el.getAttribute("data-indicator")??"numbered"}get linearMode(){return this.el.getAttribute("data-mode")==="linear"}connectedCallback(){this.computeSlottedContent();if(typeof MutationObserver!=="undefined"){this.contentObserver=new MutationObserver((()=>this.computeSlottedContent()));this.contentObserver.observe(this.el,{childList:true})}}disconnectedCallback(){this.contentObserver?.disconnect();this.contentObserver=undefined}computeSlottedContent(){this.hasSlottedContent=Array.from(this.el.childNodes).some((t=>t.nodeType===Node.ELEMENT_NODE||t.nodeType===Node.TEXT_NODE&&(t.textContent??"").trim()!==""))}stepSiblings(){const t=this.el.parentElement;if(!t)return[];return Array.from(t.children).filter((t=>t.tagName.toLowerCase()==="md-step"))}allPriorPassable(){const t=this.stepSiblings();for(let e=0;e<this.index;e++){const s=t[e];if(!s?.completed&&!s?.optional)return false}return true}get reachable(){if(!this.linearMode)return true;return this.index<=this.activeIndex||this.completed||this.allPriorPassable()}get effectivelyDisabled(){return this.disabled||!this.reachable}onInternalMdClick(t){if(t.target===this.el)t.stopPropagation()}glyph(t){return a("span",{class:"md-step__bubble",part:"bubble","aria-hidden":"true"},a("span",{class:"material-symbols-outlined"},t))}renderIndicator(){if(this.indicatorKind==="dot"){return a("span",{class:"md-step__dot",part:"dot","aria-hidden":"true"})}if(this.error)return this.glyph(this.errorIcon);if(this.icon)return this.glyph(this.icon);if(this.completed)return this.glyph(this.editable?"edit":this.completedIcon);return a("span",{class:"md-step__bubble",part:"bubble","aria-hidden":"true"},this.index+1)}composeA11yLabel(){if(this.accessibleName?.trim())return this.accessibleName;const t=(t,e)=>this.attr(t,e);let e=`${t("data-step-word","Step")} ${this.index+1} ${t("data-of-word","of")} ${this.total}`;if(this.label)e+=`: ${this.label}`;if(this.optional)e+=`, ${t("data-optional-word","optional")}`;if(this.completed)e+=`, ${t("data-completed-word","completed")}`;if(this.active)e+=`, ${t("data-current-word","current")}`;if(this.error)e+=`, ${t("data-error-word","error")}${this.errorText?`: ${this.errorText}`:""}`;return e}render(){const t=this.position==="first";const e=this.position==="last";const s=this.orientation==="vertical";const r=this.effectivelyDisabled;const o=this.error&&this.errorText?this.errorText:this.description;const n=this.optional?this.attr("data-optional-word","Optional"):"";const d=this.attr("data-nav","true")!=="false"&&!this.hideActions;const l=this.attr("data-loading","false")==="true";const c=this.attr("data-next-disabled","false")==="true";const p=this.attr("data-lazy","false")==="true";const m=this.attr("data-panel-mode","shared");const _=s?this.hasSlottedContent||d:m==="step"&&this.hasSlottedContent;const h=_&&(!p||this.active);const b=[!t&&s&&a("span",{key:"b9c426379a0b93f5e11228abcf7e20b4e7747b55",class:{"md-step__connector":true,"md-step__connector--leading":true,"md-step__connector--filled":this.index<=this.activeIndex},part:"connector connector-leading","aria-hidden":"true"}),a("div",{key:"a1781fd31e21f529e0ae2fc2c89fb2d316ee4e95",class:"md-step__inner",part:"inner",tabindex:r?-1:0,role:"button","aria-label":this.composeA11yLabel(),"aria-disabled":r?"true":undefined,"aria-current":this.active?"step":undefined,"aria-expanded":_?this.active?"true":"false":undefined,"aria-controls":h?"md-step-panel":undefined,onClick:this.handleClick,onKeyDown:this.handleKeyDown},a("span",{key:"68e747e207d64017daf2f5a663a82f1313989ce7",class:"md-step__indicator",part:"indicator"},a("md-ripple",{key:"410fae4067b4580e504213a3c9ba55f0b7b426ef",disabled:r}),a("span",{key:"d9bc7670f045f59349ba02875da18207fb82960c",class:"md-step__state-layer",part:"state-layer","aria-hidden":"true"}),this.renderIndicator()),(this.label||o||n)&&a("span",{key:"cd9a62c315c5d9f52b004997c4c43cdbdcf91153",class:"md-step__text",part:"text"},this.label&&a("span",{key:"c9dbe5b735dca4223e7767552450032ed7ae3e25",class:"md-step__label",part:"label"},this.label),n&&a("span",{key:"cc8b6e152d85e5f89cff9fd50c13c46b8240e298",class:"md-step__optional",part:"optional"},n),o&&a("span",{key:"487a0ab33b8cb7d7460a90862bb28189d968d90d",class:"md-step__description",part:"description"},o))),!e&&a("span",{key:"a83514bed44e127955c50fb60e85806fa1f7f625",class:{"md-step__connector":true,"md-step__connector--trailing":true,"md-step__connector--filled":this.index<this.activeIndex},part:"connector connector-trailing","aria-hidden":"true"})];const v=!s&&_;return a(i,{key:"ca97c2c2fc69d2133107e123bd711c630b7defa3",class:{"md-step":true,[`md-step--${this.orientation}`]:true,[`md-step--indicator-${this.indicatorKind}`]:true,"md-step--active":this.active,"md-step--completed":this.completed,"md-step--error":this.error,"md-step--optional":this.optional,"md-step--editable":this.editable,"md-step--disabled":r,"md-step--first":t,"md-step--last":e,"md-step--panel-step":!s&&_},role:"listitem","aria-current":this.active?"step":undefined,"aria-disabled":r?"true":undefined},v?a("div",{class:"md-step__header"},b):b,h&&a("div",{key:"c426594775bec461d2c8625405bc499b9cc57e1c",id:"md-step-panel",class:{"md-step__content":true,"md-step__content--open":this.active,"md-step__content--lazy":p},part:"content",role:"region","aria-label":this.label||this.composeA11yLabel()},a("div",{key:"0824ab55aa7df5de067d243d56b8ab5dc650c845",class:"md-step__content-sizer"},a("div",{key:"4b8dd2c44d3a5ef871310745bdf3494636a444b6",class:"md-step__content-inner"},a("slot",{key:"24ac93aef3dd171fc921762535ac8c7ccde9e7f6"}),d&&s&&a("div",{key:"9e2e763ee01da8b936102dbd028c538dca347370",class:"md-step__actions",part:"actions"},a("md-button",{key:"808cfb7c0307404baa4714ad7a0968ea023ace21",variant:"text",size:"sm",disabled:t||l,onClick:this.emitBack},this.attr("data-back-label","Back")),a("md-button",{key:"66b958c5174cf1044a0b0e174146918cb061a675",variant:"filled",size:"sm",loading:l,disabled:c||l,onClick:this.emitNext},e?this.attr("data-finish-label","Finish"):this.attr("data-next-label","Continue")))))))}get el(){return this}static get style(){return c()}},[257,"md-step",{label:[1],description:[1],completed:[516],active:[1540],error:[516],errorText:[1,"error-text"],disabled:[516],optional:[516],editable:[516],icon:[1],completedIcon:[1,"completed-icon"],errorIcon:[1,"error-icon"],accessibleName:[1,"accessible-name"],hideActions:[516,"hide-actions"],density:[514],hasSlottedContent:[32]},[[0,"mdClick","onInternalMdClick"]]]);function m(){if(typeof customElements==="undefined"){return}const t=["md-step","md-button","md-loading-indicator","md-ripple"];t.forEach((t=>{switch(t){case"md-step":if(!customElements.get(r(t))){customElements.define(r(t),p)}break;case"md-button":if(!customElements.get(r(t))){n()}break;case"md-loading-indicator":if(!customElements.get(r(t))){d()}break;case"md-ripple":if(!customElements.get(r(t))){l()}break}}))}m();const _=p;const h=m;export{_ as MdStep,h as defineCustomElement};
+import{p as t,H as e,c as s,h as a,d as i,t as r}from"./p-BR6gfOQH.js";import{t as o}from"./p-DYBUr7K_.js";import{d as n}from"./p-B2fYoYe9.js";import{d}from"./p-De3E5Q8v.js";const l=()=>`:host{--_size:var(--md-step-indicator-size, max(24px, calc(32px + var(--md-sys-density-scale, 0) * 2px)));--_indicator-h:var(--_size);--_indicator-ring:var(--md-step-indicator-ring, max(4px, calc(8px + var(--md-sys-density-scale, 0) * 1px)));--_color:var(--md-step-indicator-color, var(--md-sys-color-surface-container-highest, #E6E0E9));--_text:var(--md-step-indicator-text, var(--md-sys-color-on-surface-variant, #49454F));--_active-color:var(--md-step-active-color, var(--md-sys-color-primary, #6750A4));--_active-text:var(--md-step-active-text, var(--md-sys-color-on-primary, #FFFFFF));--_active-halo:var(--md-step-active-halo-color, var(--md-sys-color-primary, #6750A4));--_completed-color:var(--md-step-completed-color, var(--md-sys-color-primary, #6750A4));--_completed-text:var(--md-step-completed-text, var(--md-sys-color-on-primary, #FFFFFF));--_error-color:var(--md-step-error-color, var(--md-sys-color-error, #B3261E));--_error-text:var(--md-step-error-text, var(--md-sys-color-on-error, #FFFFFF));--_connector:var(--md-step-connector-color, var(--md-sys-color-outline-variant, #CAC4D0));--_connector-filled:var(--md-step-connector-filled-color, var(--md-sys-color-primary, #6750A4));--_connector-thickness:var(--md-step-connector-thickness, max(2px, calc(4px + var(--md-sys-density-scale, 0) * 0.5px)));--_label-color:var(--md-step-label-color, var(--md-sys-color-on-surface-variant, #49454F));--_label-active-color:var(--md-step-label-active-color, var(--md-sys-color-on-surface, #1C1B1F));--_description-color:var(--md-step-description-color, var(--md-sys-color-on-surface-variant, #49454F));--_state-layer-color:var(--md-step-state-layer-color, var(--md-sys-color-on-surface, #1C1B1F));--_spring-duration:var(--md-sys-motion-spring-spatial-default-duration, 500ms);--_spring-easing:var(--md-sys-motion-spring-spatial-default-easing, cubic-bezier(0.38, 1.21, 0.22, 1.00));--_state-duration:var(--md-sys-motion-spring-effects-default-duration, 200ms);--_state-easing:var(--md-sys-motion-spring-effects-default-easing, cubic-bezier(0.34, 0.80, 0.34, 1.00));--_expand-duration:var(--md-step-expand-duration, var(--md-sys-motion-spring-spatial-default-duration, 500ms));--_expand-easing:var(--md-sys-motion-spring-spatial-default-easing, cubic-bezier(0.38, 1.21, 0.22, 1.00));--_collapse-duration:var(--md-step-collapse-duration, var(--md-sys-motion-duration-short4, 200ms));--_collapse-easing:var(--md-sys-motion-easing-emphasized-accelerate, cubic-bezier(0.3, 0, 0.8, 0.15));--_connector-duration:var(--md-step-connector-duration, var(--md-sys-motion-duration-medium3, 350ms));--_connector-easing:linear;--_active-halo-size:3px;display:flex;box-sizing:border-box;position:relative;font-family:var(--md-sys-typescale-body-large-font-family, Roboto, sans-serif);animation:md-step-enter var(--md-sys-motion-spring-effects-slow-duration, 300ms) var(--_state-easing) backwards;animation-delay:calc(var(--md-step-idx, 0) * 40ms)}@keyframes md-step-enter{from{opacity:0}}:host(.md-step--indicator-dot){--_indicator-h:10px;--_color:var(--md-step-indicator-color, var(--md-sys-color-outline, #79747E))}:host(.md-step--horizontal){--_indicator-pad:max(0px, calc(4px + var(--md-sys-density-scale, 0) * 1px));--_connector-gap:max(4px, calc(10px + var(--md-sys-density-scale, 0) * 1px));flex:1 1 0;min-inline-size:0;justify-content:center;align-items:flex-start}:host(.md-step--horizontal.md-step--panel-step){display:contents}:host(.md-step--horizontal.md-step--panel-step) .md-step__header{grid-row:1;display:flex;flex:1 1 0;min-inline-size:0;justify-content:center;align-items:flex-start;position:relative}:host(.md-step--horizontal.md-step--panel-step) .md-step__content{grid-row:2;grid-column:1 / -1}:host(.md-step--vertical){flex:initial;flex-direction:row;align-items:flex-start;flex-wrap:wrap;--_connector-gap:6px;padding-block-end:var(--md-sys-spacing-inset-lg, 16px)}:host(.md-step--vertical.md-step--last){padding-block-end:0}.md-step__inner{position:relative;display:inline-flex;align-items:center;gap:var(--md-sys-spacing-gap-md, 12px);padding:0;background:transparent;border:none;cursor:pointer;text-align:start;color:inherit;font:inherit;-webkit-tap-highlight-color:transparent}:host(.md-step--horizontal) .md-step__inner{flex-direction:column;align-items:center;gap:max(2px, calc(6px + var(--md-sys-density-scale, 0) * 1px));padding-block-start:var(--_indicator-pad);padding-inline:var(--md-sys-spacing-inset-sm, 8px);max-inline-size:100%;min-inline-size:0;z-index:1}:host(.md-step--vertical) .md-step__inner{padding-inline-start:8px;z-index:1}.md-step__indicator{position:relative;display:inline-flex;align-items:center;justify-content:center;inline-size:calc(var(--_indicator-h) + 2 * var(--_indicator-ring));block-size:calc(var(--_indicator-h) + 2 * var(--_indicator-ring));border-radius:50%;flex-shrink:0;color:var(--_state-layer-color)}.md-step__indicator md-ripple{border-radius:50%}.md-step__state-layer{position:absolute;inset:0;border-radius:50%;background-color:var(--_state-layer-color);opacity:0;pointer-events:none;transition:opacity var(--_state-duration) var(--_state-easing)}.md-step__inner:hover:not([aria-disabled="true"]) .md-step__state-layer{opacity:var(--md-sys-state-hover-state-layer-opacity, 0.08)}.md-step__inner:focus-visible .md-step__state-layer{opacity:var(--md-sys-state-focus-state-layer-opacity, 0.12)}.md-step__inner:active:not([aria-disabled="true"]) .md-step__state-layer{opacity:var(--md-sys-state-pressed-state-layer-opacity, 0.12)}.md-step__inner:focus-visible{outline:none}.md-step__inner:focus-visible .md-step__indicator{box-shadow:0 0 0 2px var(--md-sys-color-surface, #FEF7FF),     0 0 0 5px var(--md-sys-color-secondary, #625B71)}:host(.md-step--disabled) .md-step__inner{cursor:not-allowed}:host(.md-step--disabled) .md-step__indicator{opacity:0.38}:host(.md-step--disabled) md-ripple,:host(.md-step--disabled) .md-step__state-layer{display:none}.md-step__bubble{position:relative;display:inline-flex;align-items:center;justify-content:center;inline-size:var(--_size);block-size:var(--_size);border-radius:var(--md-sys-shape-corner-full, 9999px);background-color:var(--_color);color:var(--_text);font-family:var(--md-sys-typescale-label-large-font-family, Roboto, sans-serif);font-size:var(--md-sys-typescale-label-large-font-size, 14px);font-weight:var(--md-sys-typescale-label-large-font-weight, 500);line-height:var(--md-sys-typescale-label-large-line-height, 20px);flex-shrink:0;transition:background-color var(--_state-duration) var(--_state-easing),     color var(--_state-duration) var(--_state-easing),     transform var(--_spring-duration) var(--_spring-easing),     box-shadow var(--_spring-duration) var(--_spring-easing)}.md-step__bubble .material-symbols-outlined{font-family:var(--md-sys-icon-font-family, 'Material Symbols Outlined', 'Material Icons');font-size:calc(var(--_size) * 0.56);line-height:1;font-weight:normal;font-style:normal;letter-spacing:normal;text-transform:none;white-space:nowrap;direction:ltr;-webkit-font-smoothing:antialiased;font-variation-settings:'FILL' 0, 'wght' 500, 'GRAD' 0, 'opsz' 24}:host(.md-step--active) .md-step__bubble .material-symbols-outlined,:host(.md-step--completed) .md-step__bubble .material-symbols-outlined,:host(.md-step--error) .md-step__bubble .material-symbols-outlined{font-variation-settings:'FILL' 1, 'wght' 600, 'GRAD' 0, 'opsz' 24}@keyframes md-step-glyph-in{0%{transform:scale(0);opacity:0}60%{transform:scale(1.18);opacity:1}100%{transform:scale(1);opacity:1}}:host(.md-step--completed) .md-step__bubble .material-symbols-outlined,:host(.md-step--error) .md-step__bubble .material-symbols-outlined{animation:md-step-glyph-in var(--_spring-duration) var(--_spring-easing) both}:host(.md-step--active) .md-step__bubble{background-color:var(--_active-color);color:var(--_active-text);transform:scale(1.12);box-shadow:0 0 0 var(--_active-halo-size) color-mix(in srgb, var(--_active-halo) 14%, transparent)}:host(.md-step--completed) .md-step__bubble{background-color:var(--_completed-color);color:var(--_completed-text)}:host(.md-step--error) .md-step__bubble{background-color:var(--_error-color);color:var(--_error-text);animation:md-step-error-pulse var(--md-sys-motion-duration-medium2, 300ms) var(--_state-easing) both}@keyframes md-step-error-pulse{0%{transform:scale(1)}40%{transform:scale(1.08)}100%{transform:scale(1)}}.md-step__dot{display:inline-block;inline-size:var(--_indicator-h);block-size:var(--_indicator-h);border-radius:var(--md-sys-shape-corner-full, 9999px);background-color:var(--_color);flex-shrink:0;transition:background-color var(--_state-duration) var(--_state-easing),     box-shadow var(--_spring-duration) var(--_spring-easing),     transform var(--_spring-duration) var(--_spring-easing)}:host(.md-step--active) .md-step__dot{background-color:var(--_active-color);transform:scale(1.4);box-shadow:0 0 0 var(--_active-halo-size) color-mix(in srgb, var(--_active-halo) 18%, transparent)}:host(.md-step--completed) .md-step__dot{background-color:var(--_completed-color)}:host(.md-step--error) .md-step__dot{background-color:var(--_error-color)}.md-step__text{display:flex;flex-direction:column;gap:2px;min-inline-size:0}:host(.md-step--horizontal) .md-step__text{align-items:center;text-align:center;max-inline-size:100%}.md-step__label{color:var(--_label-color);font-family:var(--md-sys-typescale-label-large-font-family, Roboto, sans-serif);font-size:max(11px, calc(14px + var(--md-sys-density-scale, 0) * 0.5px));font-weight:var(--md-sys-typescale-label-large-font-weight, 500);line-height:max(16px, calc(20px + var(--md-sys-density-scale, 0) * 1px));transition:color var(--_state-duration) var(--_state-easing),     font-variation-settings var(--_state-duration) var(--_state-easing)}:host(.md-step--horizontal) .md-step__label{white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}:host(.md-step--active) .md-step__label{color:var(--_label-active-color);font-weight:600;font-variation-settings:'wght' 600}:host(.md-step--error) .md-step__label{color:var(--_error-color)}:host(.md-step--disabled) .md-step__text{opacity:0.38}.md-step__optional,.md-step__description{color:var(--_description-color);font-family:var(--md-sys-typescale-body-small-font-family, Roboto, sans-serif);font-size:max(10px, calc(12px + var(--md-sys-density-scale, 0) * 0.5px));font-weight:var(--md-sys-typescale-body-small-font-weight, 400);line-height:max(14px, calc(16px + var(--md-sys-density-scale, 0) * 0.5px))}.md-step__optional{font-style:italic}:host(.md-step--error) .md-step__description{color:var(--_error-color)}.md-step__connector{position:relative;flex:1;align-self:center;background-color:var(--_connector);overflow:hidden;border-radius:var(--md-sys-shape-corner-full, 9999px)}.md-step__connector::after{content:'';position:absolute;inset:0;background-color:var(--_connector-filled);border-radius:inherit;transform-origin:left center;transform:scaleX(0);transition:transform var(--_connector-duration) var(--_connector-easing)}.md-step__connector--filled::after{transform:scaleX(1)}:host([dir="rtl"]) .md-step__connector::after,:host-context([dir="rtl"]) .md-step__connector::after{transform-origin:right center}:host(.md-step--horizontal) .md-step__connector--trailing{position:absolute;inset-block-start:calc(var(--_indicator-pad) + var(--_indicator-ring) + var(--_indicator-h) / 2);transform:translateY(-50%);block-size:var(--_connector-thickness);inset-inline-start:calc(50% + var(--_indicator-h) / 2 + var(--_connector-gap));inline-size:calc(100% - var(--_indicator-h) - 2 * var(--_connector-gap));flex:none;align-self:auto;z-index:0}:host(.md-step--vertical) .md-step__connector{position:absolute;flex:none;align-self:auto;z-index:0;inline-size:var(--_connector-thickness);inset-inline-start:calc(8px + var(--_indicator-ring) + (var(--_indicator-h) - var(--_connector-thickness)) / 2)}:host(.md-step--vertical) .md-step__connector--leading{display:none}:host(.md-step--vertical) .md-step__connector--trailing{inset-block-start:calc(var(--_indicator-ring) + var(--_indicator-h) + var(--_connector-gap));inset-block-end:calc(var(--_connector-gap) - var(--_indicator-ring))}:host(.md-step--vertical) .md-step__connector::after{transform-origin:center top;transform:scaleY(0)}:host(.md-step--vertical) .md-step__connector--filled::after{transform:scaleY(1)}.md-step__content{flex:1 1 100%;display:grid;grid-template-rows:0fr;opacity:0;visibility:hidden;margin-inline-start:calc(8px + var(--_indicator-h) + 2 * var(--_indicator-ring) + var(--md-sys-spacing-gap-md, 12px));color:var(--md-sys-color-on-surface, #1C1B1F);transition:grid-template-rows var(--_collapse-duration) var(--_collapse-easing),     opacity var(--_collapse-duration) var(--_collapse-easing),     visibility 0s linear var(--_collapse-duration)}.md-step__content--open{grid-template-rows:1fr;opacity:1;visibility:visible;transition:grid-template-rows var(--_expand-duration) var(--_expand-easing),     opacity var(--_state-duration) var(--_state-easing),     visibility 0s}.md-step__content-sizer{min-block-size:0;overflow:hidden}.md-step__content-inner{padding-block-start:var(--md-sys-spacing-inset-xs, 4px);padding-block-end:var(--md-sys-spacing-inset-lg, 16px)}.md-step__content--lazy{display:block;grid-template-rows:none;opacity:1;visibility:visible;transition:none;animation:md-step-content-enter var(--_expand-duration) var(--_expand-easing) both}.md-step__content--lazy .md-step__content-sizer{overflow:visible}@keyframes md-step-content-enter{from{opacity:0;transform:translateY(-6px)}}.md-step__actions{display:flex;gap:var(--md-sys-spacing-gap-sm, 8px);margin-block-start:var(--md-sys-spacing-gap-lg, 16px)}@media (max-width: 599px){:host(.md-step--horizontal){--_size:var(--md-step-indicator-size, 28px);--_connector-gap:8px}:host(.md-step--horizontal) .md-step__inner{gap:var(--md-sys-spacing-gap-xs, 4px);padding-inline:var(--md-sys-spacing-inset-xs, 4px)}:host(.md-step--horizontal) .md-step__label{font-size:var(--md-sys-typescale-label-medium-font-size, 12px);line-height:var(--md-sys-typescale-label-medium-line-height, 16px)}:host(.md-step--horizontal) .md-step__optional,:host(.md-step--horizontal) .md-step__description{display:none}}@media (prefers-reduced-motion: reduce){:host{animation:none !important}.md-step__bubble,.md-step__dot,.md-step__connector,.md-step__connector::after,.md-step__state-layer,.md-step__label,.md-step__content,.md-step__bubble .material-symbols-outlined{transition-duration:0.01ms !important;transition-delay:0s !important;animation:none !important}:host(.md-step--active) .md-step__bubble,:host(.md-step--active) .md-step__dot{transform:none;box-shadow:0 0 0 3px color-mix(in srgb, var(--_active-halo) 25%, transparent)}}@media (forced-colors: active){.md-step__bubble,.md-step__dot{background-color:Canvas;border:2px solid CanvasText;forced-color-adjust:none}:host(.md-step--active) .md-step__bubble,:host(.md-step--completed) .md-step__bubble{background-color:Highlight;color:HighlightText}.md-step__connector{background-color:GrayText;forced-color-adjust:none}.md-step__connector::after{background-color:Highlight}.md-step__state-layer{display:none}.md-step__inner:focus-visible .md-step__indicator{box-shadow:0 0 0 3px Highlight}}:host([density='-1']){--md-sys-density-scale:-1}:host([density='-2']){--md-sys-density-scale:-2}:host([density='-3']){--md-sys-density-scale:-3}:host([density='-4']){--md-sys-density-scale:-4}`;const c=t(class t extends e{constructor(t){super();if(t!==false){this.__registerHost()}this.__attachShadow();this.mdStepClick=s(this,"mdStepClick",5);this.mdStepNext=s(this,"mdStepNext",5);this.mdStepBack=s(this,"mdStepBack",5);this.label="";this.description="";this.completed=false;this.active=false;this.error=false;this.errorText="";this.disabled=false;this.optional=false;this.editable=false;this.icon="";this.completedIcon="check";this.errorIcon="priority_high";this.hideActions=false;this.density=0;this.hasSlottedContent=false;this.handleClick=t=>{if(this.effectivelyDisabled)return;t.preventDefault();this.mdStepClick.emit({index:this.index})};this.handleKeyDown=t=>{if(this.effectivelyDisabled)return;if(t.key==="Enter"||t.key===" "){t.preventDefault();o(this.el);this.mdStepClick.emit({index:this.index})}};this.emitNext=()=>this.mdStepNext.emit({index:this.index});this.emitBack=()=>this.mdStepBack.emit({index:this.index})}attr(t,e=""){const s=this.el.getAttribute(t);return s!=null&&s!==""?s:e}get index(){return Number(this.attr("data-index","0"))}get total(){return Number(this.attr("data-total","0"))}get activeIndex(){return Number(this.attr("data-active","0"))}get position(){return this.el.getAttribute("data-position")??"first"}get orientation(){return this.el.getAttribute("data-orientation")??"horizontal"}get indicatorKind(){return this.el.getAttribute("data-indicator")??"numbered"}get linearMode(){return this.el.getAttribute("data-mode")==="linear"}connectedCallback(){this.computeSlottedContent();if(typeof MutationObserver!=="undefined"){this.contentObserver=new MutationObserver((()=>this.computeSlottedContent()));this.contentObserver.observe(this.el,{childList:true})}}disconnectedCallback(){this.contentObserver?.disconnect();this.contentObserver=undefined}computeSlottedContent(){this.hasSlottedContent=Array.from(this.el.childNodes).some((t=>t.nodeType===Node.ELEMENT_NODE||t.nodeType===Node.TEXT_NODE&&(t.textContent??"").trim()!==""))}stepSiblings(){const t=this.el.parentElement;if(!t)return[];return Array.from(t.children).filter((t=>t.tagName.toLowerCase()==="md-step"))}allPriorPassable(){const t=this.stepSiblings();for(let e=0;e<this.index;e++){const s=t[e];if(!s?.completed&&!s?.optional)return false}return true}get reachable(){if(!this.linearMode)return true;return this.index<=this.activeIndex||this.completed||this.allPriorPassable()}get effectivelyDisabled(){return this.disabled||!this.reachable}onInternalMdClick(t){if(t.target===this.el)t.stopPropagation()}glyph(t){return a("span",{class:"md-step__bubble",part:"bubble","aria-hidden":"true"},a("span",{class:"material-symbols-outlined"},t))}renderIndicator(){if(this.indicatorKind==="dot"){return a("span",{class:"md-step__dot",part:"dot","aria-hidden":"true"})}if(this.error)return this.glyph(this.errorIcon);if(this.icon)return this.glyph(this.icon);if(this.completed)return this.glyph(this.editable?"edit":this.completedIcon);return a("span",{class:"md-step__bubble",part:"bubble","aria-hidden":"true"},this.index+1)}composeA11yLabel(){if(this.accessibleName?.trim())return this.accessibleName;const t=(t,e)=>this.attr(t,e);let e=`${t("data-step-word","Step")} ${this.index+1} ${t("data-of-word","of")} ${this.total}`;if(this.label)e+=`: ${this.label}`;if(this.optional)e+=`, ${t("data-optional-word","optional")}`;if(this.completed)e+=`, ${t("data-completed-word","completed")}`;if(this.active)e+=`, ${t("data-current-word","current")}`;if(this.error)e+=`, ${t("data-error-word","error")}${this.errorText?`: ${this.errorText}`:""}`;return e}render(){const t=this.position==="first";const e=this.position==="last";const s=this.orientation==="vertical";const r=this.effectivelyDisabled;const o=this.error&&this.errorText?this.errorText:this.description;const n=this.optional?this.attr("data-optional-word","Optional"):"";const d=this.attr("data-nav","true")!=="false"&&!this.hideActions;const l=this.attr("data-loading","false")==="true";const c=this.attr("data-next-disabled","false")==="true";const p=this.attr("data-lazy","false")==="true";const m=this.attr("data-panel-mode","shared");const _=s?this.hasSlottedContent||d:m==="step"&&this.hasSlottedContent;const h=_&&(!p||this.active);const b=[!t&&s&&a("span",{key:"b9c426379a0b93f5e11228abcf7e20b4e7747b55",class:{"md-step__connector":true,"md-step__connector--leading":true,"md-step__connector--filled":this.index<=this.activeIndex},part:"connector connector-leading","aria-hidden":"true"}),a("div",{key:"a1781fd31e21f529e0ae2fc2c89fb2d316ee4e95",class:"md-step__inner",part:"inner",tabindex:r?-1:0,role:"button","aria-label":this.composeA11yLabel(),"aria-disabled":r?"true":undefined,"aria-current":this.active?"step":undefined,"aria-expanded":_?this.active?"true":"false":undefined,"aria-controls":h?"md-step-panel":undefined,onClick:this.handleClick,onKeyDown:this.handleKeyDown},a("span",{key:"68e747e207d64017daf2f5a663a82f1313989ce7",class:"md-step__indicator",part:"indicator"},a("md-ripple",{key:"410fae4067b4580e504213a3c9ba55f0b7b426ef",disabled:r}),a("span",{key:"d9bc7670f045f59349ba02875da18207fb82960c",class:"md-step__state-layer",part:"state-layer","aria-hidden":"true"}),this.renderIndicator()),(this.label||o||n)&&a("span",{key:"cd9a62c315c5d9f52b004997c4c43cdbdcf91153",class:"md-step__text",part:"text"},this.label&&a("span",{key:"c9dbe5b735dca4223e7767552450032ed7ae3e25",class:"md-step__label",part:"label"},this.label),n&&a("span",{key:"cc8b6e152d85e5f89cff9fd50c13c46b8240e298",class:"md-step__optional",part:"optional"},n),o&&a("span",{key:"487a0ab33b8cb7d7460a90862bb28189d968d90d",class:"md-step__description",part:"description"},o))),!e&&a("span",{key:"a83514bed44e127955c50fb60e85806fa1f7f625",class:{"md-step__connector":true,"md-step__connector--trailing":true,"md-step__connector--filled":this.index<this.activeIndex},part:"connector connector-trailing","aria-hidden":"true"})];const v=!s&&_;return a(i,{key:"ca97c2c2fc69d2133107e123bd711c630b7defa3",class:{"md-step":true,[`md-step--${this.orientation}`]:true,[`md-step--indicator-${this.indicatorKind}`]:true,"md-step--active":this.active,"md-step--completed":this.completed,"md-step--error":this.error,"md-step--optional":this.optional,"md-step--editable":this.editable,"md-step--disabled":r,"md-step--first":t,"md-step--last":e,"md-step--panel-step":!s&&_},role:"listitem","aria-current":this.active?"step":undefined,"aria-disabled":r?"true":undefined},v?a("div",{class:"md-step__header"},b):b,h&&a("div",{key:"c426594775bec461d2c8625405bc499b9cc57e1c",id:"md-step-panel",class:{"md-step__content":true,"md-step__content--open":this.active,"md-step__content--lazy":p},part:"content",role:"region","aria-label":this.label||this.composeA11yLabel()},a("div",{key:"0824ab55aa7df5de067d243d56b8ab5dc650c845",class:"md-step__content-sizer"},a("div",{key:"4b8dd2c44d3a5ef871310745bdf3494636a444b6",class:"md-step__content-inner"},a("slot",{key:"24ac93aef3dd171fc921762535ac8c7ccde9e7f6"}),d&&s&&a("div",{key:"9e2e763ee01da8b936102dbd028c538dca347370",class:"md-step__actions",part:"actions"},a("md-button",{key:"808cfb7c0307404baa4714ad7a0968ea023ace21",variant:"text",size:"sm",disabled:t||l,onClick:this.emitBack},this.attr("data-back-label","Back")),a("md-button",{key:"66b958c5174cf1044a0b0e174146918cb061a675",variant:"filled",size:"sm",loading:l,disabled:c||l,onClick:this.emitNext},e?this.attr("data-finish-label","Finish"):this.attr("data-next-label","Continue")))))))}get el(){return this}static get style(){return l()}},[257,"md-step",{label:[1],description:[1],completed:[516],active:[1540],error:[516],errorText:[1,"error-text"],disabled:[516],optional:[516],editable:[516],icon:[1],completedIcon:[1,"completed-icon"],errorIcon:[1,"error-icon"],accessibleName:[1,"accessible-name"],hideActions:[516,"hide-actions"],density:[514],hasSlottedContent:[32]},[[0,"mdClick","onInternalMdClick"]]]);function p(){if(typeof customElements==="undefined"){return}const t=["md-step","md-button","md-ripple"];t.forEach((t=>{switch(t){case"md-step":if(!customElements.get(r(t))){customElements.define(r(t),c)}break;case"md-button":if(!customElements.get(r(t))){n()}break;case"md-ripple":if(!customElements.get(r(t))){d()}break}}))}p();const m=c;const _=p;export{m as MdStep,_ as defineCustomElement};
 //# sourceMappingURL=md-step.js.map

package/dist/components/md-step.js.map

@@ -1 +1 @@
-{"version":3,"names":["mdStepCss","MdStep","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","label","description","completed","active","error","errorText","disabled","optional","editable","icon","completedIcon","errorIcon","hideActions","density","hasSlottedContent","handleClick","e","effectivelyDisabled","preventDefault","mdStepClick","emit","index","handleKeyDown","key","triggerRipple","el","emitNext","mdStepNext","emitBack","mdStepBack","attr","name","fallback","v","getAttribute","Number","total","activeIndex","position","orientation","indicatorKind","linearMode","connectedCallback","computeSlottedContent","MutationObserver","contentObserver","observe","childList","disconnectedCallback","disconnect","undefined","Array","from","childNodes","some","n","nodeType","Node","ELEMENT_NODE","TEXT_NODE","textContent","trim","stepSiblings","parent","parentElement","children","filter","c","tagName","toLowerCase","allPriorPassable","siblings","i","s","reachable","onInternalMdClick","target","stopPropagation","glyph","h","class","part","renderIndicator","composeA11yLabel","accessibleName","w","f","render","isFirst","isLast","isVertical","supporting","optionalCaption","navActions","loading","nextDisabled","lazy","panelMode","hasPanel","renderPanel","headerNodes","tabindex","role","onClick","onKeyDown","panelStep","Host","id","variant","size"],"sources":["src/components/md-step/md-step.css?tag=md-step&encapsulation=shadow","src/components/md-step/md-step.tsx"],"sourcesContent":["/* ==========================================================\n   md-step — one step inside <md-stepper>\n   MD3 Expressive: spring bubble on the active step, a rounded expressive\n   progress connector, spring-animated (grid-rows 0fr↔1fr) vertical content\n   panels, staggered entrance, a hover/ripple disc kept proportional to each\n   indicator variant, and a fixed indicator baseline so connectors stay\n   aligned regardless of label/description height.\n\n   Motion vocabulary (house idiom — see md-fab / md-accordion-item):\n     spatial springs  → transform, box-shadow, border-radius, sizes (overshoot ok)\n     effects springs  → background-color, color, opacity (never overshoot)\n\n   PUBLIC CSS CUSTOM PROPERTIES:\n     --md-step-indicator-size           Bubble diameter (32px; 28px compact)\n     --md-step-indicator-ring           Hover / ripple ring thickness around the\n                                        indicator (8px).\n     --md-step-indicator-color          Pending bubble background\n     --md-step-indicator-text           Pending bubble text\n     --md-step-active-color             Active bubble background\n     --md-step-active-text              Active bubble text\n     --md-step-active-halo-color        Soft halo around the active bubble\n     --md-step-completed-color          Completed bubble background\n     --md-step-completed-text           Completed bubble text\n     --md-step-error-color              Error bubble background\n     --md-step-error-text               Error bubble text\n     --md-step-connector-color          Inactive connector track\n     --md-step-connector-filled-color   Filled connector\n     --md-step-connector-thickness      Connector thickness (4px)\n     --md-step-connector-duration       Connector fill duration\n     --md-step-label-color              Resting label colour\n     --md-step-label-active-color       Active label colour\n     --md-step-description-color        Supporting / optional caption colour\n     --md-step-state-layer-color        Hover / focus / press overlay\n     --md-step-expand-duration          Vertical panel expand duration\n     --md-step-collapse-duration        Vertical panel collapse duration\n\n   PARTS: inner · indicator · bubble · dot · state-layer · text · label ·\n          optional · description · connector · connector-leading ·\n          connector-trailing · content · actions\n   ========================================================== */\n\n:host {\n  --_size: var(--md-step-indicator-size, max(24px, calc(32px + var(--md-sys-density-scale, 0) * 2px)));\n  --_indicator-h: var(--_size);\n  --_indicator-ring: var(--md-step-indicator-ring, max(4px, calc(8px + var(--md-sys-density-scale, 0) * 1px)));\n  --_color: var(--md-step-indicator-color, var(--md-sys-color-surface-container-highest, #E6E0E9));\n  --_text: var(--md-step-indicator-text, var(--md-sys-color-on-surface-variant, #49454F));\n  --_active-color: var(--md-step-active-color, var(--md-sys-color-primary, #6750A4));\n  --_active-text: var(--md-step-active-text, var(--md-sys-color-on-primary, #FFFFFF));\n  --_active-halo: var(--md-step-active-halo-color, var(--md-sys-color-primary, #6750A4));\n  --_completed-color: var(--md-step-completed-color, var(--md-sys-color-primary, #6750A4));\n  --_completed-text: var(--md-step-completed-text, var(--md-sys-color-on-primary, #FFFFFF));\n  --_error-color: var(--md-step-error-color, var(--md-sys-color-error, #B3261E));\n  --_error-text: var(--md-step-error-text, var(--md-sys-color-on-error, #FFFFFF));\n  --_connector: var(--md-step-connector-color, var(--md-sys-color-outline-variant, #CAC4D0));\n  --_connector-filled: var(--md-step-connector-filled-color, var(--md-sys-color-primary, #6750A4));\n  --_connector-thickness: var(--md-step-connector-thickness, max(2px, calc(4px + var(--md-sys-density-scale, 0) * 0.5px)));\n  --_label-color: var(--md-step-label-color, var(--md-sys-color-on-surface-variant, #49454F));\n  --_label-active-color: var(--md-step-label-active-color, var(--md-sys-color-on-surface, #1C1B1F));\n  --_description-color: var(--md-step-description-color, var(--md-sys-color-on-surface-variant, #49454F));\n  --_state-layer-color: var(--md-step-state-layer-color, var(--md-sys-color-on-surface, #1C1B1F));\n\n  /* Motion: spatial spring for movement/shape; effects spring for color;\n     LINEAR for the connector so it visibly \"progresses\" toward the next step\n     like a determinate indicator. Panel expand rides the spatial spring,\n     collapse accelerates out (asymmetric, like md-accordion-item). */\n  --_spring-duration: var(--md-sys-motion-spring-spatial-default-duration, 500ms);\n  --_spring-easing: var(--md-sys-motion-spring-spatial-default-easing, cubic-bezier(0.38, 1.21, 0.22, 1.00));\n  --_state-duration: var(--md-sys-motion-spring-effects-default-duration, 200ms);\n  --_state-easing: var(--md-sys-motion-spring-effects-default-easing, cubic-bezier(0.34, 0.80, 0.34, 1.00));\n  --_expand-duration: var(--md-step-expand-duration, var(--md-sys-motion-spring-spatial-default-duration, 500ms));\n  --_expand-easing: var(--md-sys-motion-spring-spatial-default-easing, cubic-bezier(0.38, 1.21, 0.22, 1.00));\n  --_collapse-duration: var(--md-step-collapse-duration, var(--md-sys-motion-duration-short4, 200ms));\n  --_collapse-easing: var(--md-sys-motion-easing-emphasized-accelerate, cubic-bezier(0.3, 0, 0.8, 0.15));\n  --_connector-duration: var(--md-step-connector-duration, var(--md-sys-motion-duration-medium3, 350ms));\n  --_connector-easing: linear;\n  /* Halo ring around the active indicator. Kept modest so the connector fill /\n     rail can clear it with a small --_connector-gap on every side (letting the\n     rail reach close enough to read as connected). */\n  --_active-halo-size: 3px;\n\n  display: flex;\n  box-sizing: border-box;\n  position: relative;\n  font-family: var(--md-sys-typescale-body-large-font-family, Roboto, sans-serif);\n  animation: md-step-enter var(--md-sys-motion-spring-effects-slow-duration, 300ms) var(--_state-easing) backwards;\n  animation-delay: calc(var(--md-step-idx, 0) * 40ms);\n}\n\n/* Staggered entrance — opacity only, so measured geometry is stable from the\n   first frame. --md-step-idx is stamped by the parent stepper. */\n@keyframes md-step-enter {\n  from { opacity: 0; }\n}\n\n/* ── Orientation / indicator variants ─────────────────────── */\n:host(.md-step--indicator-dot) {\n  --_indicator-h: 10px;\n  /* Dots carry no glyph: the pending fill alone must clear 3:1 against\n     surface, so default to outline instead of surface-container-highest. */\n  --_color: var(--md-step-indicator-color, var(--md-sys-color-outline, #79747E));\n}\n\n:host(.md-step--horizontal) {\n  --_indicator-pad: max(0px, calc(4px + var(--md-sys-density-scale, 0) * 1px));\n  --_connector-gap: max(4px, calc(10px + var(--md-sys-density-scale, 0) * 1px));\n  flex: 1 1 0;\n  min-inline-size: 0;\n  justify-content: center;\n  align-items: flex-start;\n}\n\n/* ── Horizontal panel mode (opt-in) ──────────────────────────────────────────\n   The host dissolves so its two boxes become grid items of the stepper's row:\n   the header keeps every flex property the host used to carry (so the\n   indicator, labels and connectors lay out exactly as before), and the panel\n   spans the full row underneath. Only reached via .md-step--panel-step, which\n   md-step sets solely in this mode — the plain horizontal step is untouched. */\n:host(.md-step--horizontal.md-step--panel-step) {\n  display: contents;\n}\n\n:host(.md-step--horizontal.md-step--panel-step) .md-step__header {\n  grid-row: 1;\n  display: flex;\n  flex: 1 1 0;\n  min-inline-size: 0;\n  justify-content: center;\n  align-items: flex-start;\n  position: relative;\n}\n\n:host(.md-step--horizontal.md-step--panel-step) .md-step__content {\n  grid-row: 2;\n  grid-column: 1 / -1;\n}\n\n:host(.md-step--vertical) {\n  flex: initial;\n  flex-direction: row;\n  align-items: flex-start;\n  flex-wrap: wrap;\n  /* Small gap around the indicator (rounded caps like the horizontal\n     connector) — kept tight so the rail reaches close to both bubbles and\n     reads as connected, not a floating pill, even between adjacent steps. */\n  --_connector-gap: 6px;\n  /* Rhythm between stacked headers — gives the rail real length between\n     collapsed steps so it connects rather than showing a stub. On-grid 16px\n     tracks global density via --md-sys-spacing-inset-lg (byte-for-byte at 0). */\n  padding-block-end: var(--md-sys-spacing-inset-lg, 16px);\n}\n:host(.md-step--vertical.md-step--last) { padding-block-end: 0; }\n\n/* ==========================================================\n   1. INNER (clickable header — layout only; affordance lives on the indicator)\n   ========================================================== */\n.md-step__inner {\n  position: relative;\n  display: inline-flex;\n  align-items: center;\n  /* Global density: indicator↔label gap tracks --md-sys-spacing-gap-md. The\n     vertical content panel's margin-inline-start mirrors this same token so the\n     panel stays aligned under the label at every density rung. */\n  gap: var(--md-sys-spacing-gap-md, 12px);\n  padding: 0;\n  background: transparent;\n  border: none;\n  cursor: pointer;\n  text-align: start;\n  color: inherit;\n  font: inherit;\n  -webkit-tap-highlight-color: transparent;\n}\n\n:host(.md-step--horizontal) .md-step__inner {\n  flex-direction: column;\n  align-items: center;\n  gap: max(2px, calc(6px + var(--md-sys-density-scale, 0) * 1px));\n  padding-block-start: var(--_indicator-pad);\n  padding-inline: var(--md-sys-spacing-inset-sm, 8px);\n  max-inline-size: 100%;\n  min-inline-size: 0;\n  z-index: 1;\n}\n\n:host(.md-step--vertical) .md-step__inner {\n  padding-inline-start: 8px;\n  z-index: 1;\n}\n\n/* ==========================================================\n   2. INDICATOR — circular affordance wrapper (hover / focus / ripple)\n   ========================================================== */\n.md-step__indicator {\n  position: relative;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  inline-size: calc(var(--_indicator-h) + 2 * var(--_indicator-ring));\n  block-size: calc(var(--_indicator-h) + 2 * var(--_indicator-ring));\n  border-radius: 50%;\n  flex-shrink: 0;\n  /* md-ripple's wave uses currentColor (library convention — see md-radio):\n     this `color` is inherited into the ripple only, since the bubble/number\n     and dot set their own colours. */\n  color: var(--_state-layer-color);\n}\n\n/* md-ripple is display:contents; its clip uses border-radius: inherit which\n   resolves against the ripple HOST — give it the round shape so the wave is a\n   disc, not a square. */\n.md-step__indicator md-ripple {\n  border-radius: 50%;\n}\n\n.md-step__state-layer {\n  position: absolute;\n  inset: 0;\n  border-radius: 50%;\n  background-color: var(--_state-layer-color);\n  opacity: 0;\n  pointer-events: none;\n  transition: opacity var(--_state-duration) var(--_state-easing);\n}\n.md-step__inner:hover:not([aria-disabled=\"true\"]) .md-step__state-layer {\n  opacity: var(--md-sys-state-hover-state-layer-opacity, 0.08);\n}\n.md-step__inner:focus-visible .md-step__state-layer {\n  opacity: var(--md-sys-state-focus-state-layer-opacity, 0.12);\n}\n.md-step__inner:active:not([aria-disabled=\"true\"]) .md-step__state-layer {\n  opacity: var(--md-sys-state-pressed-state-layer-opacity, 0.12);\n}\n\n/* Circular focus ring on the indicator (box-shadow follows the 50% radius on\n   every engine — unlike outline). */\n.md-step__inner:focus-visible { outline: none; }\n.md-step__inner:focus-visible .md-step__indicator {\n  box-shadow:\n    0 0 0 2px var(--md-sys-color-surface, #FEF7FF),\n    0 0 0 5px var(--md-sys-color-secondary, #625B71);\n}\n\n:host(.md-step--disabled) .md-step__inner { cursor: not-allowed; }\n:host(.md-step--disabled) .md-step__indicator { opacity: 0.38; }\n:host(.md-step--disabled) md-ripple,\n:host(.md-step--disabled) .md-step__state-layer { display: none; }\n\n/* ==========================================================\n   3. BUBBLE + DOT\n   ========================================================== */\n.md-step__bubble {\n  position: relative;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  inline-size: var(--_size);\n  block-size: var(--_size);\n  border-radius: var(--md-sys-shape-corner-full, 9999px);\n  background-color: var(--_color);\n  color: var(--_text);\n  font-family: var(--md-sys-typescale-label-large-font-family, Roboto, sans-serif);\n  font-size: var(--md-sys-typescale-label-large-font-size, 14px);\n  font-weight: var(--md-sys-typescale-label-large-font-weight, 500);\n  line-height: var(--md-sys-typescale-label-large-line-height, 20px);\n  flex-shrink: 0;\n  /* Spatial spring for movement; effects spring for paint. */\n  transition:\n    background-color var(--_state-duration) var(--_state-easing),\n    color var(--_state-duration) var(--_state-easing),\n    transform var(--_spring-duration) var(--_spring-easing),\n    box-shadow var(--_spring-duration) var(--_spring-easing);\n}\n\n.md-step__bubble .material-symbols-outlined {\n  font-family: var(--md-sys-icon-font-family, 'Material Symbols Outlined', 'Material Icons');\n  font-size: calc(var(--_size) * 0.56);\n  line-height: 1;\n  font-weight: normal;\n  font-style: normal;\n  letter-spacing: normal;\n  text-transform: none;\n  white-space: nowrap;\n  direction: ltr;\n  -webkit-font-smoothing: antialiased;\n  font-variation-settings: 'FILL' 0, 'wght' 500, 'GRAD' 0, 'opsz' 24;\n}\n:host(.md-step--active) .md-step__bubble .material-symbols-outlined,\n:host(.md-step--completed) .md-step__bubble .material-symbols-outlined,\n:host(.md-step--error) .md-step__bubble .material-symbols-outlined {\n  font-variation-settings: 'FILL' 1, 'wght' 600, 'GRAD' 0, 'opsz' 24;\n}\n\n/* Scale-in the glyph when it appears (check / edit / error). */\n@keyframes md-step-glyph-in {\n  0% { transform: scale(0); opacity: 0; }\n  60% { transform: scale(1.18); opacity: 1; }\n  100% { transform: scale(1); opacity: 1; }\n}\n:host(.md-step--completed) .md-step__bubble .material-symbols-outlined,\n:host(.md-step--error) .md-step__bubble .material-symbols-outlined {\n  animation: md-step-glyph-in var(--_spring-duration) var(--_spring-easing) both;\n}\n\n/* Active: spring up (stays circular) + a single soft halo. No elevation drop\n   shadow — its grey key/ambient layers stacked with the halo read as several\n   concentric grey rings around the bubble. */\n:host(.md-step--active) .md-step__bubble {\n  background-color: var(--_active-color);\n  color: var(--_active-text);\n  transform: scale(1.12);\n  box-shadow: 0 0 0 var(--_active-halo-size) color-mix(in srgb, var(--_active-halo) 14%, transparent);\n}\n:host(.md-step--completed) .md-step__bubble {\n  background-color: var(--_completed-color);\n  color: var(--_completed-text);\n}\n:host(.md-step--error) .md-step__bubble {\n  background-color: var(--_error-color);\n  color: var(--_error-text);\n  animation: md-step-error-pulse var(--md-sys-motion-duration-medium2, 300ms) var(--_state-easing) both;\n}\n@keyframes md-step-error-pulse {\n  0% { transform: scale(1); }\n  40% { transform: scale(1.08); }\n  100% { transform: scale(1); }\n}\n\n.md-step__dot {\n  display: inline-block;\n  inline-size: var(--_indicator-h);\n  block-size: var(--_indicator-h);\n  border-radius: var(--md-sys-shape-corner-full, 9999px);\n  background-color: var(--_color);\n  flex-shrink: 0;\n  transition:\n    background-color var(--_state-duration) var(--_state-easing),\n    box-shadow var(--_spring-duration) var(--_spring-easing),\n    transform var(--_spring-duration) var(--_spring-easing);\n}\n/* Active dot springs up but stays a circle — same pattern as the numbered\n   bubble (scale, not shape-morph). */\n:host(.md-step--active) .md-step__dot {\n  background-color: var(--_active-color);\n  transform: scale(1.4);\n  box-shadow: 0 0 0 var(--_active-halo-size) color-mix(in srgb, var(--_active-halo) 18%, transparent);\n}\n:host(.md-step--completed) .md-step__dot { background-color: var(--_completed-color); }\n:host(.md-step--error) .md-step__dot { background-color: var(--_error-color); }\n\n/* ==========================================================\n   4. TEXT — label, optional caption, supporting / error text\n   ========================================================== */\n.md-step__text {\n  display: flex;\n  flex-direction: column;\n  gap: 2px;\n  min-inline-size: 0;\n}\n:host(.md-step--horizontal) .md-step__text {\n  align-items: center;\n  text-align: center;\n  max-inline-size: 100%;\n}\n\n.md-step__label {\n  color: var(--_label-color);\n  font-family: var(--md-sys-typescale-label-large-font-family, Roboto, sans-serif);\n  font-size: max(11px, calc(14px + var(--md-sys-density-scale, 0) * 0.5px));\n  font-weight: var(--md-sys-typescale-label-large-font-weight, 500);\n  line-height: max(16px, calc(20px + var(--md-sys-density-scale, 0) * 1px));\n  transition:\n    color var(--_state-duration) var(--_state-easing),\n    font-variation-settings var(--_state-duration) var(--_state-easing);\n}\n:host(.md-step--horizontal) .md-step__label {\n  white-space: normal;\n  display: -webkit-box;\n  -webkit-line-clamp: 2;\n  -webkit-box-orient: vertical;\n  overflow: hidden;\n}\n:host(.md-step--active) .md-step__label {\n  color: var(--_label-active-color);\n  font-weight: 600;\n  font-variation-settings: 'wght' 600;\n}\n:host(.md-step--error) .md-step__label { color: var(--_error-color); }\n:host(.md-step--disabled) .md-step__text { opacity: 0.38; }\n\n.md-step__optional,\n.md-step__description {\n  color: var(--_description-color);\n  font-family: var(--md-sys-typescale-body-small-font-family, Roboto, sans-serif);\n  font-size: max(10px, calc(12px + var(--md-sys-density-scale, 0) * 0.5px));\n  font-weight: var(--md-sys-typescale-body-small-font-weight, 400);\n  line-height: max(14px, calc(16px + var(--md-sys-density-scale, 0) * 0.5px));\n}\n.md-step__optional { font-style: italic; }\n:host(.md-step--error) .md-step__description { color: var(--_error-color); }\n\n/* ==========================================================\n   5. CONNECTORS — expressive determinate-progress styling: a rounded 4px\n   track whose fill sweeps linearly toward the next step.\n   ========================================================== */\n.md-step__connector {\n  position: relative;\n  flex: 1;\n  align-self: center;\n  background-color: var(--_connector);\n  overflow: hidden;\n  border-radius: var(--md-sys-shape-corner-full, 9999px);\n}\n.md-step__connector::after {\n  content: '';\n  position: absolute;\n  inset: 0;\n  background-color: var(--_connector-filled);\n  border-radius: inherit;\n  transform-origin: left center;\n  transform: scaleX(0);\n  transition: transform var(--_connector-duration) var(--_connector-easing);\n}\n.md-step__connector--filled::after { transform: scaleX(1); }\n\n:host([dir=\"rtl\"]) .md-step__connector::after,\n:host-context([dir=\"rtl\"]) .md-step__connector::after { transform-origin: right center; }\n\n/* Horizontal: ONE connector per gap, spanning from this indicator's edge to\n   the NEXT indicator's edge (overflowing into the next step's box). A single\n   element means the fill sweeps continuously across the whole gap — not two\n   half segments meeting at the midpoint. Pinned to the indicator's fixed\n   centre line (sized off --_indicator-h so the dot variant aligns too), so it\n   stays put regardless of label height. */\n:host(.md-step--horizontal) .md-step__connector--trailing {\n  position: absolute;\n  inset-block-start: calc(var(--_indicator-pad) + var(--_indicator-ring) + var(--_indicator-h) / 2);\n  transform: translateY(-50%);\n  block-size: var(--_connector-thickness);\n  inset-inline-start: calc(50% + var(--_indicator-h) / 2 + var(--_connector-gap));\n  inline-size: calc(100% - var(--_indicator-h) - 2 * var(--_connector-gap));\n  flex: none;\n  align-self: auto;\n  z-index: 0;\n}\n\n/* Vertical rail — ONE rounded connector per gap, exactly like the horizontal\n   connector: same rounded caps and same --_connector-gap clearance around the\n   indicators. A single element per gap (no leading/trailing halves) means no\n   mid-gap junction and no stray cap nub, and the uniform gap clears the active\n   bubble's scaled halo on both sides regardless of which step is active. The\n   span is pinned to the bubble centre (a FIXED `ring + h/2` from the box top),\n   never a percentage of the box, so a tall (active) content step doesn't\n   stretch the line through its content: the trailing runs from `gap` below THIS\n   bubble to `gap` above the NEXT one (crossing the box boundary via the\n   negative block-end). The half-thickness offset centres the rail without\n   transforms, so RTL mirrors purely via the logical inset. */\n:host(.md-step--vertical) .md-step__connector {\n  position: absolute;\n  flex: none;\n  align-self: auto;\n  z-index: 0; /* stays behind the bubble (the inner is z-index: 1) */\n  inline-size: var(--_connector-thickness);\n  inset-inline-start: calc(8px + var(--_indicator-ring) + (var(--_indicator-h) - var(--_connector-thickness)) / 2);\n}\n:host(.md-step--vertical) .md-step__connector--leading { display: none; }\n:host(.md-step--vertical) .md-step__connector--trailing {\n  inset-block-start: calc(var(--_indicator-ring) + var(--_indicator-h) + var(--_connector-gap));\n  inset-block-end: calc(var(--_connector-gap) - var(--_indicator-ring));\n}\n:host(.md-step--vertical) .md-step__connector::after {\n  transform-origin: center top;\n  transform: scaleY(0);\n}\n:host(.md-step--vertical) .md-step__connector--filled::after { transform: scaleY(1); }\n\n/* ==========================================================\n   6. VERTICAL CONTENT PANEL + ACTIONS — spring expand / accelerate collapse\n   via the modern grid-rows 0fr↔1fr height trick (same pattern as\n   md-accordion-item): no measurement JS, RTL-safe, reduced-motion safe.\n   Closed panels stay in the tree (so closing animates too) but flip to\n   visibility:hidden after the collapse, leaving the a11y tree + tab order.\n   ========================================================== */\n.md-step__content {\n  flex: 1 1 100%;\n  display: grid;\n  grid-template-rows: 0fr;\n  opacity: 0;\n  visibility: hidden;\n  /* Aligns the panel under the label: the leading 8px matches the vertical\n     inner's padding-inline-start (positional — kept literal in lockstep with the\n     connector inset), and the trailing gap mirrors the inner's gap token so the\n     indent follows global density. */\n  margin-inline-start: calc(8px + var(--_indicator-h) + 2 * var(--_indicator-ring) + var(--md-sys-spacing-gap-md, 12px));\n  color: var(--md-sys-color-on-surface, #1C1B1F);\n  transition:\n    grid-template-rows var(--_collapse-duration) var(--_collapse-easing),\n    opacity var(--_collapse-duration) var(--_collapse-easing),\n    visibility 0s linear var(--_collapse-duration);\n}\n.md-step__content--open {\n  grid-template-rows: 1fr;\n  opacity: 1;\n  visibility: visible;\n  transition:\n    grid-template-rows var(--_expand-duration) var(--_expand-easing),\n    opacity var(--_state-duration) var(--_state-easing),\n    visibility 0s;\n}\n.md-step__content-sizer {\n  /* The grid item must have NO block padding/border, or its intrinsic\n     min-size defeats the 0fr collapse — spacing lives on the inner wrapper. */\n  min-block-size: 0;\n  overflow: hidden;\n}\n.md-step__content-inner {\n  /* On-grid panel padding tracks global density (4/16 = inset-xs/lg). */\n  padding-block-start: var(--md-sys-spacing-inset-xs, 4px);\n  padding-block-end: var(--md-sys-spacing-inset-lg, 16px);\n}\n\n/* Lazy panel — only the active step's panel is mounted, so there is no collapse\n   to animate: drop the grid-rows trick and just fade+slide it in on mount. */\n.md-step__content--lazy {\n  display: block;\n  grid-template-rows: none;\n  opacity: 1;\n  visibility: visible;\n  transition: none;\n  animation: md-step-content-enter var(--_expand-duration) var(--_expand-easing) both;\n}\n.md-step__content--lazy .md-step__content-sizer { overflow: visible; }\n@keyframes md-step-content-enter {\n  from { opacity: 0; transform: translateY(-6px); }\n}\n.md-step__actions {\n  display: flex;\n  gap: var(--md-sys-spacing-gap-sm, 8px);\n  margin-block-start: var(--md-sys-spacing-gap-lg, 16px);\n}\n\n/* ==========================================================\n   7. COMPACT / RESPONSIVE (horizontal)\n   ========================================================== */\n@media (max-width: 599px) {\n  :host(.md-step--horizontal) {\n    --_size: var(--md-step-indicator-size, 28px);\n    --_connector-gap: 8px;\n  }\n  :host(.md-step--horizontal) .md-step__inner { gap: var(--md-sys-spacing-gap-xs, 4px); padding-inline: var(--md-sys-spacing-inset-xs, 4px); }\n  :host(.md-step--horizontal) .md-step__label {\n    font-size: var(--md-sys-typescale-label-medium-font-size, 12px);\n    line-height: var(--md-sys-typescale-label-medium-line-height, 16px);\n  }\n  :host(.md-step--horizontal) .md-step__optional,\n  :host(.md-step--horizontal) .md-step__description { display: none; }\n}\n\n/* ==========================================================\n   8. REDUCED MOTION\n   ========================================================== */\n@media (prefers-reduced-motion: reduce) {\n  :host { animation: none !important; }\n  .md-step__bubble,\n  .md-step__dot,\n  .md-step__connector,\n  .md-step__connector::after,\n  .md-step__state-layer,\n  .md-step__label,\n  .md-step__content,\n  .md-step__bubble .material-symbols-outlined {\n    transition-duration: 0.01ms !important;\n    transition-delay: 0s !important;\n    animation: none !important;\n  }\n  :host(.md-step--active) .md-step__bubble,\n  :host(.md-step--active) .md-step__dot {\n    transform: none;\n    box-shadow: 0 0 0 3px color-mix(in srgb, var(--_active-halo) 25%, transparent);\n  }\n}\n\n/* ==========================================================\n   9. FORCED COLORS\n   ========================================================== */\n@media (forced-colors: active) {\n  .md-step__bubble,\n  .md-step__dot {\n    background-color: Canvas;\n    border: 2px solid CanvasText;\n    forced-color-adjust: none;\n  }\n  :host(.md-step--active) .md-step__bubble,\n  :host(.md-step--completed) .md-step__bubble { background-color: Highlight; color: HighlightText; }\n  /* The rail is pure background paint — without this it vanishes in WHC. */\n  .md-step__connector {\n    background-color: GrayText;\n    forced-color-adjust: none;\n  }\n  .md-step__connector::after { background-color: Highlight; }\n  .md-step__state-layer { display: none; }\n  .md-step__inner:focus-visible .md-step__indicator { box-shadow: 0 0 0 3px Highlight; }\n}\n\n/* ==========================================================\n   DENSITY (local override)\n   Maps the local `density` prop onto the same --md-sys-density-scale signal a\n   global `data-density` ancestor sets. Declared on :host, so a local rung wins\n   over the inherited global one. Every density-sensitive value in this file\n   derives from that single signal by calc — never add a fixed per-rung ladder.\n   ========================================================== */\n:host([density='-1']) { --md-sys-density-scale: -1; }\n:host([density='-2']) { --md-sys-density-scale: -2; }\n:host([density='-3']) { --md-sys-density-scale: -3; }\n:host([density='-4']) { --md-sys-density-scale: -4; }\n","import {\n  Component,\n  Host,\n  h,\n  Prop,\n  Element,\n  Event,\n  EventEmitter,\n  Listen,\n  State,\n} from '@stencil/core';\nimport { triggerRipple } from '../../utils/ripple';\n\n/**\n * `md-step` — one step inside an `<md-stepper>`.\n *\n * Layout, position and i18n are pushed down from the parent stepper via\n * `data-*` attributes, so a step is almost always authored declaratively:\n *\n * ```html\n * <md-stepper active=\"1\">\n *   <md-step label=\"Account\" completed></md-step>\n *   <md-step label=\"Shipping\" description=\"Address & method\"></md-step>\n *   <md-step label=\"Payment\" optional></md-step>\n * </md-stepper>\n * ```\n *\n * @slot - Step content. Rendered as an expanding panel in **vertical**\n * orientation, and — since the horizontal per-step panel mode — as a\n * full-width panel under the step row in **horizontal** orientation too. The\n * parent opts the row in automatically the moment any step has content; a\n * horizontal stepper whose steps are all empty is unaffected and keeps taking\n * one shared panel through `md-stepper`'s own `content` slot.\n *\n * @part inner             - The clickable step header (indicator + text).\n * @part indicator         - Circular wrapper around the bubble/dot (hover/ripple).\n * @part bubble            - Numbered / icon indicator.\n * @part dot               - Dot indicator (dot variant).\n * @part state-layer       - Hover / focus / press overlay inside the indicator.\n * @part text              - Label + supporting text wrapper.\n * @part label             - Step label.\n * @part optional          - The \"Optional\" caption.\n * @part description       - Supporting / helper text (or error / optional caption).\n * @part connector         - Connector line (leading or trailing).\n * @part connector-leading - The rail segment above the bubble (vertical).\n * @part connector-trailing- The rail/line segment after the bubble.\n * @part content           - Vertical content panel.\n * @part actions           - Back / Continue action row in the content panel.\n */\n@Component({\n  tag: 'md-step',\n  styleUrl: 'md-step.css',\n  shadow: true,\n})\nexport class MdStep {\n  @Element() el!: HTMLElement;\n\n  /** Step caption (\"Account info\", \"Shipping\", …). */\n  @Prop() label: string = '';\n\n  /** Supporting text beneath the label. */\n  @Prop() description: string = '';\n\n  /** Whether this step is completed (shows a check / fills its connector). */\n  @Prop({ reflect: true }) completed: boolean = false;\n\n  /** Whether this step is the active one. Usually managed by the parent. */\n  @Prop({ mutable: true, reflect: true }) active: boolean = false;\n\n  /** Whether this step is in an error state. */\n  @Prop({ reflect: true }) error: boolean = false;\n\n  /** Error message shown beneath the label (overrides `description` on error). */\n  @Prop({ attribute: 'error-text' }) errorText: string = '';\n\n  /** Manually disable the step (parent's `mode=\"linear\"` also gates reachability). */\n  @Prop({ reflect: true }) disabled: boolean = false;\n\n  /** Mark the step optional — shows an \"Optional\" caption and may be skipped. */\n  @Prop({ reflect: true }) optional: boolean = false;\n\n  /**\n   * Editable: a completed step shows an edit (pencil) affordance, and — with\n   * `auto-complete` on — revisiting it preserves downstream completion\n   * (review/edit in place). Revisiting a non-editable step restarts progress\n   * from there.\n   */\n  @Prop({ reflect: true }) editable: boolean = false;\n\n  /** Override the indicator glyph (Material Symbols name), e.g. \"lock\". */\n  @Prop() icon: string = '';\n\n  /** Glyph shown when completed (Material Symbols name). */\n  @Prop({ attribute: 'completed-icon' }) completedIcon: string = 'check';\n\n  /** Glyph shown when in error (Material Symbols name). */\n  @Prop({ attribute: 'error-icon' }) errorIcon: string = 'priority_high';\n\n  /** Full override for the announced accessible name (i18n escape hatch). */\n  @Prop({ attribute: 'accessible-name' }) accessibleName?: string;\n\n  /** Hide the built-in Back / Continue actions in the vertical content panel. */\n  @Prop({ attribute: 'hide-actions', reflect: true }) hideActions: boolean = false;\n\n  /**\n   * Local density rung. Drives the same `--md-sys-density-scale` signal that a\n   * global `data-density` ancestor sets, so a local value simply overrides the\n   * inherited one. 0 = default, -4 = ultra-compact.\n   */\n  @Prop({ reflect: true }) density: 0 | -1 | -2 | -3 | -4 = 0;\n\n  /** Bubbled to the parent stepper, which decides whether the move is allowed.\n   *  Internal coordination event — consumed (and stopped) by `md-stepper`. */\n  @Event({ bubbles: true, composed: false }) mdStepClick: EventEmitter<{ index: number }>;\n\n  /** Continue pressed in this step's content panel. Consumed by `md-stepper`. */\n  @Event({ bubbles: true, composed: false }) mdStepNext: EventEmitter<{ index: number }>;\n\n  /** Back pressed in this step's content panel. Consumed by `md-stepper`. */\n  @Event({ bubbles: true, composed: false }) mdStepBack: EventEmitter<{ index: number }>;\n\n  @State() private hasSlottedContent = false;\n\n  private contentObserver?: MutationObserver;\n\n  // ─── Parent-pushed layout / i18n (read from data-* attributes) ────────────\n  private attr(name: string, fallback = ''): string {\n    const v = this.el.getAttribute(name);\n    return v != null && v !== '' ? v : fallback;\n  }\n  private get index(): number { return Number(this.attr('data-index', '0')); }\n  private get total(): number { return Number(this.attr('data-total', '0')); }\n  private get activeIndex(): number { return Number(this.attr('data-active', '0')); }\n  private get position(): 'first' | 'middle' | 'last' {\n    return (this.el.getAttribute('data-position') as 'first' | 'middle' | 'last') ?? 'first';\n  }\n  private get orientation(): 'horizontal' | 'vertical' {\n    return (this.el.getAttribute('data-orientation') as 'horizontal' | 'vertical') ?? 'horizontal';\n  }\n  private get indicatorKind(): 'numbered' | 'dot' {\n    return (this.el.getAttribute('data-indicator') as 'numbered' | 'dot') ?? 'numbered';\n  }\n  private get linearMode(): boolean { return this.el.getAttribute('data-mode') === 'linear'; }\n\n  connectedCallback() {\n    this.computeSlottedContent();\n    // Slot-based `slotchange` can't be used here: the default slot is only\n    // rendered while the panel exists, so content appended when there is no\n    // panel would never re-trigger it. Watch the light DOM instead.\n    if (typeof MutationObserver !== 'undefined') {\n      this.contentObserver = new MutationObserver(() => this.computeSlottedContent());\n      this.contentObserver.observe(this.el, { childList: true });\n    }\n  }\n\n  disconnectedCallback() {\n    this.contentObserver?.disconnect();\n    this.contentObserver = undefined;\n  }\n\n  private computeSlottedContent() {\n    // Whitespace-only text nodes (pretty-printed markup) are not content.\n    this.hasSlottedContent = Array.from(this.el.childNodes).some(\n      (n) =>\n        n.nodeType === Node.ELEMENT_NODE ||\n        (n.nodeType === Node.TEXT_NODE && (n.textContent ?? '').trim() !== ''),\n    );\n  }\n\n  // ─── Reachability (linear gating) ─────────────────────────────────────────\n  private stepSiblings(): HTMLMdStepElement[] {\n    const parent = this.el.parentElement;\n    if (!parent) return [];\n    return (Array.from(parent.children) as HTMLElement[]).filter(\n      (c) => c.tagName.toLowerCase() === 'md-step',\n    ) as HTMLMdStepElement[];\n  }\n\n  /** Every prior step completed — or optional, which may be skipped. Mirrors\n   *  the parent stepper's `canNavigateTo` so header affordance and actual\n   *  navigability never disagree. */\n  private allPriorPassable(): boolean {\n    const siblings = this.stepSiblings();\n    for (let i = 0; i < this.index; i++) {\n      const s = siblings[i];\n      if (!s?.completed && !s?.optional) return false;\n    }\n    return true;\n  }\n\n  /** Can the user navigate to this step right now? */\n  private get reachable(): boolean {\n    if (!this.linearMode) return true;\n    return this.index <= this.activeIndex || this.completed || this.allPriorPassable();\n  }\n\n  private get effectivelyDisabled(): boolean {\n    return this.disabled || !this.reachable;\n  }\n\n  // ─── Handlers ─────────────────────────────────────────────────────────────\n  private handleClick = (e: Event) => {\n    if (this.effectivelyDisabled) return;\n    e.preventDefault();\n    this.mdStepClick.emit({ index: this.index });\n  };\n\n  private handleKeyDown = (e: KeyboardEvent) => {\n    if (this.effectivelyDisabled) return;\n    if (e.key === 'Enter' || e.key === ' ') {\n      e.preventDefault();\n      // Shared library helper — md-ripple only listens to pointerdown, so\n      // keyboard activations trigger a centered wave the same way every other\n      // interactive component does (radio, checkbox, icon-button, …).\n      triggerRipple(this.el);\n      this.mdStepClick.emit({ index: this.index });\n    }\n  };\n\n  private emitNext = () => this.mdStepNext.emit({ index: this.index });\n  private emitBack = () => this.mdStepBack.emit({ index: this.index });\n\n  /** The built-in action buttons are internal chrome — their composed\n   *  `mdClick` retargets to this host; stop it there so it never masquerades\n   *  as an app-level button event. Slotted user buttons (target ≠ host) are\n   *  left alone. */\n  @Listen('mdClick')\n  onInternalMdClick(e: Event) {\n    if (e.target === this.el) e.stopPropagation();\n  }\n\n  // ─── Render helpers ───────────────────────────────────────────────────────\n  private glyph(name: string) {\n    return (\n      <span class=\"md-step__bubble\" part=\"bubble\" aria-hidden=\"true\">\n        <span class=\"material-symbols-outlined\">{name}</span>\n      </span>\n    );\n  }\n\n  private renderIndicator() {\n    if (this.indicatorKind === 'dot') {\n      return <span class=\"md-step__dot\" part=\"dot\" aria-hidden=\"true\"></span>;\n    }\n    if (this.error) return this.glyph(this.errorIcon);\n    if (this.icon) return this.glyph(this.icon);\n    if (this.completed) return this.glyph(this.editable ? 'edit' : this.completedIcon);\n    return (\n      <span class=\"md-step__bubble\" part=\"bubble\" aria-hidden=\"true\">\n        {this.index + 1}\n      </span>\n    );\n  }\n\n  private composeA11yLabel(): string {\n    if (this.accessibleName?.trim()) return this.accessibleName;\n    const w = (n: string, f: string) => this.attr(n, f);\n    let s = `${w('data-step-word', 'Step')} ${this.index + 1} ${w('data-of-word', 'of')} ${this.total}`;\n    if (this.label) s += `: ${this.label}`;\n    if (this.optional) s += `, ${w('data-optional-word', 'optional')}`;\n    if (this.completed) s += `, ${w('data-completed-word', 'completed')}`;\n    if (this.active) s += `, ${w('data-current-word', 'current')}`;\n    if (this.error) s += `, ${w('data-error-word', 'error')}${this.errorText ? `: ${this.errorText}` : ''}`;\n    return s;\n  }\n\n  render() {\n    const isFirst = this.position === 'first';\n    const isLast = this.position === 'last';\n    const isVertical = this.orientation === 'vertical';\n    const disabled = this.effectivelyDisabled;\n    const supporting = this.error && this.errorText ? this.errorText : this.description;\n    const optionalCaption = this.optional ? this.attr('data-optional-word', 'Optional') : '';\n    // Built-in Back/Continue: on unless the stepper disabled nav (data-nav)\n    // or this step opted out (hide-actions).\n    const navActions = this.attr('data-nav', 'true') !== 'false' && !this.hideActions;\n    // Loading / continue-gating pushed down from the parent stepper.\n    const loading = this.attr('data-loading', 'false') === 'true';\n    const nextDisabled = this.attr('data-next-disabled', 'false') === 'true';\n    // Lazy: only the active step's panel is mounted (no collapse animation).\n    const lazy = this.attr('data-lazy', 'false') === 'true';\n    // Vertical always panels (built-in Back/Continue live there too). Horizontal\n    // panels only when the parent opted the row into the grid AND this step has\n    // its own content — the horizontal nav bar is the stepper's, not the step's,\n    // so navActions alone must never conjure a panel here.\n    const panelMode = this.attr('data-panel-mode', 'shared');\n    const hasPanel = isVertical\n      ? this.hasSlottedContent || navActions\n      : panelMode === 'step' && this.hasSlottedContent;\n    const renderPanel = hasPanel && (!lazy || this.active);\n\n    // Header = [leading connector?, inner, trailing connector?]. In the\n    // horizontal panel mode the host goes `display: contents`, so these three\n    // must be wrapped in ONE box to stay a single grid item (the wrapper\n    // inherits the flex properties the host used to carry). Every other mode\n    // renders them bare, exactly as before — no extra box, no layout change.\n    const headerNodes = [\n      !isFirst && isVertical && (\n        <span\n          class={{\n            'md-step__connector': true,\n            'md-step__connector--leading': true,\n            'md-step__connector--filled': this.index <= this.activeIndex,\n          }}\n          part=\"connector connector-leading\"\n          aria-hidden=\"true\"\n        ></span>\n      ),\n      <div\n        class=\"md-step__inner\"\n        part=\"inner\"\n        tabindex={disabled ? -1 : 0}\n        role=\"button\"\n        aria-label={this.composeA11yLabel()}\n        aria-disabled={disabled ? 'true' : undefined}\n        aria-current={this.active ? 'step' : undefined}\n        aria-expanded={hasPanel ? (this.active ? 'true' : 'false') : undefined}\n        aria-controls={renderPanel ? 'md-step-panel' : undefined}\n        onClick={this.handleClick}\n        onKeyDown={this.handleKeyDown}\n      >\n        <span class=\"md-step__indicator\" part=\"indicator\">\n          <md-ripple disabled={disabled}></md-ripple>\n          <span class=\"md-step__state-layer\" part=\"state-layer\" aria-hidden=\"true\"></span>\n          {this.renderIndicator()}\n        </span>\n\n        {(this.label || supporting || optionalCaption) && (\n          <span class=\"md-step__text\" part=\"text\">\n            {this.label && <span class=\"md-step__label\" part=\"label\">{this.label}</span>}\n            {optionalCaption && (\n              <span class=\"md-step__optional\" part=\"optional\">{optionalCaption}</span>\n            )}\n            {supporting && (\n              <span class=\"md-step__description\" part=\"description\">{supporting}</span>\n            )}\n          </span>\n        )}\n      </div>,\n      !isLast && (\n        <span\n          class={{\n            'md-step__connector': true,\n            'md-step__connector--trailing': true,\n            'md-step__connector--filled': this.index < this.activeIndex,\n          }}\n          part=\"connector connector-trailing\"\n          aria-hidden=\"true\"\n        ></span>\n      ),\n    ];\n    const panelStep = !isVertical && hasPanel;\n\n    return (\n      <Host\n        class={{\n          'md-step': true,\n          [`md-step--${this.orientation}`]: true,\n          [`md-step--indicator-${this.indicatorKind}`]: true,\n          'md-step--active': this.active,\n          'md-step--completed': this.completed,\n          'md-step--error': this.error,\n          'md-step--optional': this.optional,\n          'md-step--editable': this.editable,\n          'md-step--disabled': disabled,\n          'md-step--first': isFirst,\n          'md-step--last': isLast,\n          'md-step--panel-step': !isVertical && hasPanel,\n        }}\n        role=\"listitem\"\n        aria-current={this.active ? 'step' : undefined}\n        aria-disabled={disabled ? 'true' : undefined}\n      >\n        {panelStep ? <div class=\"md-step__header\">{headerNodes}</div> : headerNodes}\n\n        {/* Vertical content panel — always in the tree so both expand AND\n            collapse animate (grid-rows 0fr↔1fr spring); closed panels are\n            visibility:hidden, keeping them out of the a11y tree + tab order. */}\n        {renderPanel && (\n          <div\n            id=\"md-step-panel\"\n            class={{\n              'md-step__content': true,\n              'md-step__content--open': this.active,\n              'md-step__content--lazy': lazy,\n            }}\n            part=\"content\"\n            role=\"region\"\n            aria-label={this.label || this.composeA11yLabel()}\n          >\n            <div class=\"md-step__content-sizer\">\n              <div class=\"md-step__content-inner\">\n                <slot></slot>\n                {navActions && isVertical && (\n                  <div class=\"md-step__actions\" part=\"actions\">\n                    <md-button variant=\"text\" size=\"sm\" disabled={isFirst || loading} onClick={this.emitBack}>\n                      {this.attr('data-back-label', 'Back')}\n                    </md-button>\n                    <md-button\n                      variant=\"filled\"\n                      size=\"sm\"\n                      loading={loading}\n                      disabled={nextDisabled || loading}\n                      onClick={this.emitNext}\n                    >\n                      {isLast ? this.attr('data-finish-label', 'Finish') : this.attr('data-next-label', 'Continue')}\n                    </md-button>\n                  </div>\n                )}\n              </div>\n            </div>\n          </div>\n        )}\n      </Host>\n    );\n  }\n}\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["mdStepCss","MdStep","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","label","description","completed","active","error","errorText","disabled","optional","editable","icon","completedIcon","errorIcon","hideActions","density","hasSlottedContent","handleClick","e","effectivelyDisabled","preventDefault","mdStepClick","emit","index","handleKeyDown","key","triggerRipple","el","emitNext","mdStepNext","emitBack","mdStepBack","attr","name","fallback","v","getAttribute","Number","total","activeIndex","position","orientation","indicatorKind","linearMode","connectedCallback","computeSlottedContent","MutationObserver","contentObserver","observe","childList","disconnectedCallback","disconnect","undefined","Array","from","childNodes","some","n","nodeType","Node","ELEMENT_NODE","TEXT_NODE","textContent","trim","stepSiblings","parent","parentElement","children","filter","c","tagName","toLowerCase","allPriorPassable","siblings","i","s","reachable","onInternalMdClick","target","stopPropagation","glyph","h","class","part","renderIndicator","composeA11yLabel","accessibleName","w","f","render","isFirst","isLast","isVertical","supporting","optionalCaption","navActions","loading","nextDisabled","lazy","panelMode","hasPanel","renderPanel","headerNodes","tabindex","role","onClick","onKeyDown","panelStep","Host","id","variant","size"],"sources":["src/components/md-step/md-step.css?tag=md-step&encapsulation=shadow","src/components/md-step/md-step.tsx"],"sourcesContent":["/* ==========================================================\n   md-step — one step inside <md-stepper>\n   MD3 Expressive: spring bubble on the active step, a rounded expressive\n   progress connector, spring-animated (grid-rows 0fr↔1fr) vertical content\n   panels, staggered entrance, a hover/ripple disc kept proportional to each\n   indicator variant, and a fixed indicator baseline so connectors stay\n   aligned regardless of label/description height.\n\n   Motion vocabulary (house idiom — see md-fab / md-accordion-item):\n     spatial springs  → transform, box-shadow, border-radius, sizes (overshoot ok)\n     effects springs  → background-color, color, opacity (never overshoot)\n\n   PUBLIC CSS CUSTOM PROPERTIES:\n     --md-step-indicator-size           Bubble diameter (32px; 28px compact)\n     --md-step-indicator-ring           Hover / ripple ring thickness around the\n                                        indicator (8px).\n     --md-step-indicator-color          Pending bubble background\n     --md-step-indicator-text           Pending bubble text\n     --md-step-active-color             Active bubble background\n     --md-step-active-text              Active bubble text\n     --md-step-active-halo-color        Soft halo around the active bubble\n     --md-step-completed-color          Completed bubble background\n     --md-step-completed-text           Completed bubble text\n     --md-step-error-color              Error bubble background\n     --md-step-error-text               Error bubble text\n     --md-step-connector-color          Inactive connector track\n     --md-step-connector-filled-color   Filled connector\n     --md-step-connector-thickness      Connector thickness (4px)\n     --md-step-connector-duration       Connector fill duration\n     --md-step-label-color              Resting label colour\n     --md-step-label-active-color       Active label colour\n     --md-step-description-color        Supporting / optional caption colour\n     --md-step-state-layer-color        Hover / focus / press overlay\n     --md-step-expand-duration          Vertical panel expand duration\n     --md-step-collapse-duration        Vertical panel collapse duration\n\n   PARTS: inner · indicator · bubble · dot · state-layer · text · label ·\n          optional · description · connector · connector-leading ·\n          connector-trailing · content · actions\n   ========================================================== */\n\n:host {\n  --_size: var(--md-step-indicator-size, max(24px, calc(32px + var(--md-sys-density-scale, 0) * 2px)));\n  --_indicator-h: var(--_size);\n  --_indicator-ring: var(--md-step-indicator-ring, max(4px, calc(8px + var(--md-sys-density-scale, 0) * 1px)));\n  --_color: var(--md-step-indicator-color, var(--md-sys-color-surface-container-highest, #E6E0E9));\n  --_text: var(--md-step-indicator-text, var(--md-sys-color-on-surface-variant, #49454F));\n  --_active-color: var(--md-step-active-color, var(--md-sys-color-primary, #6750A4));\n  --_active-text: var(--md-step-active-text, var(--md-sys-color-on-primary, #FFFFFF));\n  --_active-halo: var(--md-step-active-halo-color, var(--md-sys-color-primary, #6750A4));\n  --_completed-color: var(--md-step-completed-color, var(--md-sys-color-primary, #6750A4));\n  --_completed-text: var(--md-step-completed-text, var(--md-sys-color-on-primary, #FFFFFF));\n  --_error-color: var(--md-step-error-color, var(--md-sys-color-error, #B3261E));\n  --_error-text: var(--md-step-error-text, var(--md-sys-color-on-error, #FFFFFF));\n  --_connector: var(--md-step-connector-color, var(--md-sys-color-outline-variant, #CAC4D0));\n  --_connector-filled: var(--md-step-connector-filled-color, var(--md-sys-color-primary, #6750A4));\n  --_connector-thickness: var(--md-step-connector-thickness, max(2px, calc(4px + var(--md-sys-density-scale, 0) * 0.5px)));\n  --_label-color: var(--md-step-label-color, var(--md-sys-color-on-surface-variant, #49454F));\n  --_label-active-color: var(--md-step-label-active-color, var(--md-sys-color-on-surface, #1C1B1F));\n  --_description-color: var(--md-step-description-color, var(--md-sys-color-on-surface-variant, #49454F));\n  --_state-layer-color: var(--md-step-state-layer-color, var(--md-sys-color-on-surface, #1C1B1F));\n\n  /* Motion: spatial spring for movement/shape; effects spring for color;\n     LINEAR for the connector so it visibly \"progresses\" toward the next step\n     like a determinate indicator. Panel expand rides the spatial spring,\n     collapse accelerates out (asymmetric, like md-accordion-item). */\n  --_spring-duration: var(--md-sys-motion-spring-spatial-default-duration, 500ms);\n  --_spring-easing: var(--md-sys-motion-spring-spatial-default-easing, cubic-bezier(0.38, 1.21, 0.22, 1.00));\n  --_state-duration: var(--md-sys-motion-spring-effects-default-duration, 200ms);\n  --_state-easing: var(--md-sys-motion-spring-effects-default-easing, cubic-bezier(0.34, 0.80, 0.34, 1.00));\n  --_expand-duration: var(--md-step-expand-duration, var(--md-sys-motion-spring-spatial-default-duration, 500ms));\n  --_expand-easing: var(--md-sys-motion-spring-spatial-default-easing, cubic-bezier(0.38, 1.21, 0.22, 1.00));\n  --_collapse-duration: var(--md-step-collapse-duration, var(--md-sys-motion-duration-short4, 200ms));\n  --_collapse-easing: var(--md-sys-motion-easing-emphasized-accelerate, cubic-bezier(0.3, 0, 0.8, 0.15));\n  --_connector-duration: var(--md-step-connector-duration, var(--md-sys-motion-duration-medium3, 350ms));\n  --_connector-easing: linear;\n  /* Halo ring around the active indicator. Kept modest so the connector fill /\n     rail can clear it with a small --_connector-gap on every side (letting the\n     rail reach close enough to read as connected). */\n  --_active-halo-size: 3px;\n\n  display: flex;\n  box-sizing: border-box;\n  position: relative;\n  font-family: var(--md-sys-typescale-body-large-font-family, Roboto, sans-serif);\n  animation: md-step-enter var(--md-sys-motion-spring-effects-slow-duration, 300ms) var(--_state-easing) backwards;\n  animation-delay: calc(var(--md-step-idx, 0) * 40ms);\n}\n\n/* Staggered entrance — opacity only, so measured geometry is stable from the\n   first frame. --md-step-idx is stamped by the parent stepper. */\n@keyframes md-step-enter {\n  from { opacity: 0; }\n}\n\n/* ── Orientation / indicator variants ─────────────────────── */\n:host(.md-step--indicator-dot) {\n  --_indicator-h: 10px;\n  /* Dots carry no glyph: the pending fill alone must clear 3:1 against\n     surface, so default to outline instead of surface-container-highest. */\n  --_color: var(--md-step-indicator-color, var(--md-sys-color-outline, #79747E));\n}\n\n:host(.md-step--horizontal) {\n  --_indicator-pad: max(0px, calc(4px + var(--md-sys-density-scale, 0) * 1px));\n  --_connector-gap: max(4px, calc(10px + var(--md-sys-density-scale, 0) * 1px));\n  flex: 1 1 0;\n  min-inline-size: 0;\n  justify-content: center;\n  align-items: flex-start;\n}\n\n/* ── Horizontal panel mode (opt-in) ──────────────────────────────────────────\n   The host dissolves so its two boxes become grid items of the stepper's row:\n   the header keeps every flex property the host used to carry (so the\n   indicator, labels and connectors lay out exactly as before), and the panel\n   spans the full row underneath. Only reached via .md-step--panel-step, which\n   md-step sets solely in this mode — the plain horizontal step is untouched. */\n:host(.md-step--horizontal.md-step--panel-step) {\n  display: contents;\n}\n\n:host(.md-step--horizontal.md-step--panel-step) .md-step__header {\n  grid-row: 1;\n  display: flex;\n  flex: 1 1 0;\n  min-inline-size: 0;\n  justify-content: center;\n  align-items: flex-start;\n  position: relative;\n}\n\n:host(.md-step--horizontal.md-step--panel-step) .md-step__content {\n  grid-row: 2;\n  grid-column: 1 / -1;\n}\n\n:host(.md-step--vertical) {\n  flex: initial;\n  flex-direction: row;\n  align-items: flex-start;\n  flex-wrap: wrap;\n  /* Small gap around the indicator (rounded caps like the horizontal\n     connector) — kept tight so the rail reaches close to both bubbles and\n     reads as connected, not a floating pill, even between adjacent steps. */\n  --_connector-gap: 6px;\n  /* Rhythm between stacked headers — gives the rail real length between\n     collapsed steps so it connects rather than showing a stub. On-grid 16px\n     tracks global density via --md-sys-spacing-inset-lg (byte-for-byte at 0). */\n  padding-block-end: var(--md-sys-spacing-inset-lg, 16px);\n}\n:host(.md-step--vertical.md-step--last) { padding-block-end: 0; }\n\n/* ==========================================================\n   1. INNER (clickable header — layout only; affordance lives on the indicator)\n   ========================================================== */\n.md-step__inner {\n  position: relative;\n  display: inline-flex;\n  align-items: center;\n  /* Global density: indicator↔label gap tracks --md-sys-spacing-gap-md. The\n     vertical content panel's margin-inline-start mirrors this same token so the\n     panel stays aligned under the label at every density rung. */\n  gap: var(--md-sys-spacing-gap-md, 12px);\n  padding: 0;\n  background: transparent;\n  border: none;\n  cursor: pointer;\n  text-align: start;\n  color: inherit;\n  font: inherit;\n  -webkit-tap-highlight-color: transparent;\n}\n\n:host(.md-step--horizontal) .md-step__inner {\n  flex-direction: column;\n  align-items: center;\n  gap: max(2px, calc(6px + var(--md-sys-density-scale, 0) * 1px));\n  padding-block-start: var(--_indicator-pad);\n  padding-inline: var(--md-sys-spacing-inset-sm, 8px);\n  max-inline-size: 100%;\n  min-inline-size: 0;\n  z-index: 1;\n}\n\n:host(.md-step--vertical) .md-step__inner {\n  padding-inline-start: 8px;\n  z-index: 1;\n}\n\n/* ==========================================================\n   2. INDICATOR — circular affordance wrapper (hover / focus / ripple)\n   ========================================================== */\n.md-step__indicator {\n  position: relative;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  inline-size: calc(var(--_indicator-h) + 2 * var(--_indicator-ring));\n  block-size: calc(var(--_indicator-h) + 2 * var(--_indicator-ring));\n  border-radius: 50%;\n  flex-shrink: 0;\n  /* md-ripple's wave uses currentColor (library convention — see md-radio):\n     this `color` is inherited into the ripple only, since the bubble/number\n     and dot set their own colours. */\n  color: var(--_state-layer-color);\n}\n\n/* md-ripple is display:contents; its clip uses border-radius: inherit which\n   resolves against the ripple HOST — give it the round shape so the wave is a\n   disc, not a square. */\n.md-step__indicator md-ripple {\n  border-radius: 50%;\n}\n\n.md-step__state-layer {\n  position: absolute;\n  inset: 0;\n  border-radius: 50%;\n  background-color: var(--_state-layer-color);\n  opacity: 0;\n  pointer-events: none;\n  transition: opacity var(--_state-duration) var(--_state-easing);\n}\n.md-step__inner:hover:not([aria-disabled=\"true\"]) .md-step__state-layer {\n  opacity: var(--md-sys-state-hover-state-layer-opacity, 0.08);\n}\n.md-step__inner:focus-visible .md-step__state-layer {\n  opacity: var(--md-sys-state-focus-state-layer-opacity, 0.12);\n}\n.md-step__inner:active:not([aria-disabled=\"true\"]) .md-step__state-layer {\n  opacity: var(--md-sys-state-pressed-state-layer-opacity, 0.12);\n}\n\n/* Circular focus ring on the indicator (box-shadow follows the 50% radius on\n   every engine — unlike outline). */\n.md-step__inner:focus-visible { outline: none; }\n.md-step__inner:focus-visible .md-step__indicator {\n  box-shadow:\n    0 0 0 2px var(--md-sys-color-surface, #FEF7FF),\n    0 0 0 5px var(--md-sys-color-secondary, #625B71);\n}\n\n:host(.md-step--disabled) .md-step__inner { cursor: not-allowed; }\n:host(.md-step--disabled) .md-step__indicator { opacity: 0.38; }\n:host(.md-step--disabled) md-ripple,\n:host(.md-step--disabled) .md-step__state-layer { display: none; }\n\n/* ==========================================================\n   3. BUBBLE + DOT\n   ========================================================== */\n.md-step__bubble {\n  position: relative;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  inline-size: var(--_size);\n  block-size: var(--_size);\n  border-radius: var(--md-sys-shape-corner-full, 9999px);\n  background-color: var(--_color);\n  color: var(--_text);\n  font-family: var(--md-sys-typescale-label-large-font-family, Roboto, sans-serif);\n  font-size: var(--md-sys-typescale-label-large-font-size, 14px);\n  font-weight: var(--md-sys-typescale-label-large-font-weight, 500);\n  line-height: var(--md-sys-typescale-label-large-line-height, 20px);\n  flex-shrink: 0;\n  /* Spatial spring for movement; effects spring for paint. */\n  transition:\n    background-color var(--_state-duration) var(--_state-easing),\n    color var(--_state-duration) var(--_state-easing),\n    transform var(--_spring-duration) var(--_spring-easing),\n    box-shadow var(--_spring-duration) var(--_spring-easing);\n}\n\n.md-step__bubble .material-symbols-outlined {\n  font-family: var(--md-sys-icon-font-family, 'Material Symbols Outlined', 'Material Icons');\n  font-size: calc(var(--_size) * 0.56);\n  line-height: 1;\n  font-weight: normal;\n  font-style: normal;\n  letter-spacing: normal;\n  text-transform: none;\n  white-space: nowrap;\n  direction: ltr;\n  -webkit-font-smoothing: antialiased;\n  font-variation-settings: 'FILL' 0, 'wght' 500, 'GRAD' 0, 'opsz' 24;\n}\n:host(.md-step--active) .md-step__bubble .material-symbols-outlined,\n:host(.md-step--completed) .md-step__bubble .material-symbols-outlined,\n:host(.md-step--error) .md-step__bubble .material-symbols-outlined {\n  font-variation-settings: 'FILL' 1, 'wght' 600, 'GRAD' 0, 'opsz' 24;\n}\n\n/* Scale-in the glyph when it appears (check / edit / error). */\n@keyframes md-step-glyph-in {\n  0% { transform: scale(0); opacity: 0; }\n  60% { transform: scale(1.18); opacity: 1; }\n  100% { transform: scale(1); opacity: 1; }\n}\n:host(.md-step--completed) .md-step__bubble .material-symbols-outlined,\n:host(.md-step--error) .md-step__bubble .material-symbols-outlined {\n  animation: md-step-glyph-in var(--_spring-duration) var(--_spring-easing) both;\n}\n\n/* Active: spring up (stays circular) + a single soft halo. No elevation drop\n   shadow — its grey key/ambient layers stacked with the halo read as several\n   concentric grey rings around the bubble. */\n:host(.md-step--active) .md-step__bubble {\n  background-color: var(--_active-color);\n  color: var(--_active-text);\n  transform: scale(1.12);\n  box-shadow: 0 0 0 var(--_active-halo-size) color-mix(in srgb, var(--_active-halo) 14%, transparent);\n}\n:host(.md-step--completed) .md-step__bubble {\n  background-color: var(--_completed-color);\n  color: var(--_completed-text);\n}\n:host(.md-step--error) .md-step__bubble {\n  background-color: var(--_error-color);\n  color: var(--_error-text);\n  animation: md-step-error-pulse var(--md-sys-motion-duration-medium2, 300ms) var(--_state-easing) both;\n}\n@keyframes md-step-error-pulse {\n  0% { transform: scale(1); }\n  40% { transform: scale(1.08); }\n  100% { transform: scale(1); }\n}\n\n.md-step__dot {\n  display: inline-block;\n  inline-size: var(--_indicator-h);\n  block-size: var(--_indicator-h);\n  border-radius: var(--md-sys-shape-corner-full, 9999px);\n  background-color: var(--_color);\n  flex-shrink: 0;\n  transition:\n    background-color var(--_state-duration) var(--_state-easing),\n    box-shadow var(--_spring-duration) var(--_spring-easing),\n    transform var(--_spring-duration) var(--_spring-easing);\n}\n/* Active dot springs up but stays a circle — same pattern as the numbered\n   bubble (scale, not shape-morph). */\n:host(.md-step--active) .md-step__dot {\n  background-color: var(--_active-color);\n  transform: scale(1.4);\n  box-shadow: 0 0 0 var(--_active-halo-size) color-mix(in srgb, var(--_active-halo) 18%, transparent);\n}\n:host(.md-step--completed) .md-step__dot { background-color: var(--_completed-color); }\n:host(.md-step--error) .md-step__dot { background-color: var(--_error-color); }\n\n/* ==========================================================\n   4. TEXT — label, optional caption, supporting / error text\n   ========================================================== */\n.md-step__text {\n  display: flex;\n  flex-direction: column;\n  gap: 2px;\n  min-inline-size: 0;\n}\n:host(.md-step--horizontal) .md-step__text {\n  align-items: center;\n  text-align: center;\n  max-inline-size: 100%;\n}\n\n.md-step__label {\n  color: var(--_label-color);\n  font-family: var(--md-sys-typescale-label-large-font-family, Roboto, sans-serif);\n  font-size: max(11px, calc(14px + var(--md-sys-density-scale, 0) * 0.5px));\n  font-weight: var(--md-sys-typescale-label-large-font-weight, 500);\n  line-height: max(16px, calc(20px + var(--md-sys-density-scale, 0) * 1px));\n  transition:\n    color var(--_state-duration) var(--_state-easing),\n    font-variation-settings var(--_state-duration) var(--_state-easing);\n}\n:host(.md-step--horizontal) .md-step__label {\n  white-space: normal;\n  display: -webkit-box;\n  -webkit-line-clamp: 2;\n  -webkit-box-orient: vertical;\n  overflow: hidden;\n}\n:host(.md-step--active) .md-step__label {\n  color: var(--_label-active-color);\n  font-weight: 600;\n  font-variation-settings: 'wght' 600;\n}\n:host(.md-step--error) .md-step__label { color: var(--_error-color); }\n:host(.md-step--disabled) .md-step__text { opacity: 0.38; }\n\n.md-step__optional,\n.md-step__description {\n  color: var(--_description-color);\n  font-family: var(--md-sys-typescale-body-small-font-family, Roboto, sans-serif);\n  font-size: max(10px, calc(12px + var(--md-sys-density-scale, 0) * 0.5px));\n  font-weight: var(--md-sys-typescale-body-small-font-weight, 400);\n  line-height: max(14px, calc(16px + var(--md-sys-density-scale, 0) * 0.5px));\n}\n.md-step__optional { font-style: italic; }\n:host(.md-step--error) .md-step__description { color: var(--_error-color); }\n\n/* ==========================================================\n   5. CONNECTORS — expressive determinate-progress styling: a rounded 4px\n   track whose fill sweeps linearly toward the next step.\n   ========================================================== */\n.md-step__connector {\n  position: relative;\n  flex: 1;\n  align-self: center;\n  background-color: var(--_connector);\n  overflow: hidden;\n  border-radius: var(--md-sys-shape-corner-full, 9999px);\n}\n.md-step__connector::after {\n  content: '';\n  position: absolute;\n  inset: 0;\n  background-color: var(--_connector-filled);\n  border-radius: inherit;\n  transform-origin: left center;\n  transform: scaleX(0);\n  transition: transform var(--_connector-duration) var(--_connector-easing);\n}\n.md-step__connector--filled::after { transform: scaleX(1); }\n\n:host([dir=\"rtl\"]) .md-step__connector::after,\n:host-context([dir=\"rtl\"]) .md-step__connector::after { transform-origin: right center; }\n\n/* Horizontal: ONE connector per gap, spanning from this indicator's edge to\n   the NEXT indicator's edge (overflowing into the next step's box). A single\n   element means the fill sweeps continuously across the whole gap — not two\n   half segments meeting at the midpoint. Pinned to the indicator's fixed\n   centre line (sized off --_indicator-h so the dot variant aligns too), so it\n   stays put regardless of label height. */\n:host(.md-step--horizontal) .md-step__connector--trailing {\n  position: absolute;\n  inset-block-start: calc(var(--_indicator-pad) + var(--_indicator-ring) + var(--_indicator-h) / 2);\n  transform: translateY(-50%);\n  block-size: var(--_connector-thickness);\n  inset-inline-start: calc(50% + var(--_indicator-h) / 2 + var(--_connector-gap));\n  inline-size: calc(100% - var(--_indicator-h) - 2 * var(--_connector-gap));\n  flex: none;\n  align-self: auto;\n  z-index: 0;\n}\n\n/* Vertical rail — ONE rounded connector per gap, exactly like the horizontal\n   connector: same rounded caps and same --_connector-gap clearance around the\n   indicators. A single element per gap (no leading/trailing halves) means no\n   mid-gap junction and no stray cap nub, and the uniform gap clears the active\n   bubble's scaled halo on both sides regardless of which step is active. The\n   span is pinned to the bubble centre (a FIXED `ring + h/2` from the box top),\n   never a percentage of the box, so a tall (active) content step doesn't\n   stretch the line through its content: the trailing runs from `gap` below THIS\n   bubble to `gap` above the NEXT one (crossing the box boundary via the\n   negative block-end). The half-thickness offset centres the rail without\n   transforms, so RTL mirrors purely via the logical inset. */\n:host(.md-step--vertical) .md-step__connector {\n  position: absolute;\n  flex: none;\n  align-self: auto;\n  z-index: 0; /* stays behind the bubble (the inner is z-index: 1) */\n  inline-size: var(--_connector-thickness);\n  inset-inline-start: calc(8px + var(--_indicator-ring) + (var(--_indicator-h) - var(--_connector-thickness)) / 2);\n}\n:host(.md-step--vertical) .md-step__connector--leading { display: none; }\n:host(.md-step--vertical) .md-step__connector--trailing {\n  inset-block-start: calc(var(--_indicator-ring) + var(--_indicator-h) + var(--_connector-gap));\n  inset-block-end: calc(var(--_connector-gap) - var(--_indicator-ring));\n}\n:host(.md-step--vertical) .md-step__connector::after {\n  transform-origin: center top;\n  transform: scaleY(0);\n}\n:host(.md-step--vertical) .md-step__connector--filled::after { transform: scaleY(1); }\n\n/* ==========================================================\n   6. VERTICAL CONTENT PANEL + ACTIONS — spring expand / accelerate collapse\n   via the modern grid-rows 0fr↔1fr height trick (same pattern as\n   md-accordion-item): no measurement JS, RTL-safe, reduced-motion safe.\n   Closed panels stay in the tree (so closing animates too) but flip to\n   visibility:hidden after the collapse, leaving the a11y tree + tab order.\n   ========================================================== */\n.md-step__content {\n  flex: 1 1 100%;\n  display: grid;\n  grid-template-rows: 0fr;\n  opacity: 0;\n  visibility: hidden;\n  /* Aligns the panel under the label: the leading 8px matches the vertical\n     inner's padding-inline-start (positional — kept literal in lockstep with the\n     connector inset), and the trailing gap mirrors the inner's gap token so the\n     indent follows global density. */\n  margin-inline-start: calc(8px + var(--_indicator-h) + 2 * var(--_indicator-ring) + var(--md-sys-spacing-gap-md, 12px));\n  color: var(--md-sys-color-on-surface, #1C1B1F);\n  transition:\n    grid-template-rows var(--_collapse-duration) var(--_collapse-easing),\n    opacity var(--_collapse-duration) var(--_collapse-easing),\n    visibility 0s linear var(--_collapse-duration);\n}\n.md-step__content--open {\n  grid-template-rows: 1fr;\n  opacity: 1;\n  visibility: visible;\n  transition:\n    grid-template-rows var(--_expand-duration) var(--_expand-easing),\n    opacity var(--_state-duration) var(--_state-easing),\n    visibility 0s;\n}\n.md-step__content-sizer {\n  /* The grid item must have NO block padding/border, or its intrinsic\n     min-size defeats the 0fr collapse — spacing lives on the inner wrapper. */\n  min-block-size: 0;\n  overflow: hidden;\n}\n.md-step__content-inner {\n  /* On-grid panel padding tracks global density (4/16 = inset-xs/lg). */\n  padding-block-start: var(--md-sys-spacing-inset-xs, 4px);\n  padding-block-end: var(--md-sys-spacing-inset-lg, 16px);\n}\n\n/* Lazy panel — only the active step's panel is mounted, so there is no collapse\n   to animate: drop the grid-rows trick and just fade+slide it in on mount. */\n.md-step__content--lazy {\n  display: block;\n  grid-template-rows: none;\n  opacity: 1;\n  visibility: visible;\n  transition: none;\n  animation: md-step-content-enter var(--_expand-duration) var(--_expand-easing) both;\n}\n.md-step__content--lazy .md-step__content-sizer { overflow: visible; }\n@keyframes md-step-content-enter {\n  from { opacity: 0; transform: translateY(-6px); }\n}\n.md-step__actions {\n  display: flex;\n  gap: var(--md-sys-spacing-gap-sm, 8px);\n  margin-block-start: var(--md-sys-spacing-gap-lg, 16px);\n}\n\n/* ==========================================================\n   7. COMPACT / RESPONSIVE (horizontal)\n   ========================================================== */\n@media (max-width: 599px) {\n  :host(.md-step--horizontal) {\n    --_size: var(--md-step-indicator-size, 28px);\n    --_connector-gap: 8px;\n  }\n  :host(.md-step--horizontal) .md-step__inner { gap: var(--md-sys-spacing-gap-xs, 4px); padding-inline: var(--md-sys-spacing-inset-xs, 4px); }\n  :host(.md-step--horizontal) .md-step__label {\n    font-size: var(--md-sys-typescale-label-medium-font-size, 12px);\n    line-height: var(--md-sys-typescale-label-medium-line-height, 16px);\n  }\n  :host(.md-step--horizontal) .md-step__optional,\n  :host(.md-step--horizontal) .md-step__description { display: none; }\n}\n\n/* ==========================================================\n   8. REDUCED MOTION\n   ========================================================== */\n@media (prefers-reduced-motion: reduce) {\n  :host { animation: none !important; }\n  .md-step__bubble,\n  .md-step__dot,\n  .md-step__connector,\n  .md-step__connector::after,\n  .md-step__state-layer,\n  .md-step__label,\n  .md-step__content,\n  .md-step__bubble .material-symbols-outlined {\n    transition-duration: 0.01ms !important;\n    transition-delay: 0s !important;\n    animation: none !important;\n  }\n  :host(.md-step--active) .md-step__bubble,\n  :host(.md-step--active) .md-step__dot {\n    transform: none;\n    box-shadow: 0 0 0 3px color-mix(in srgb, var(--_active-halo) 25%, transparent);\n  }\n}\n\n/* ==========================================================\n   9. FORCED COLORS\n   ========================================================== */\n@media (forced-colors: active) {\n  .md-step__bubble,\n  .md-step__dot {\n    background-color: Canvas;\n    border: 2px solid CanvasText;\n    forced-color-adjust: none;\n  }\n  :host(.md-step--active) .md-step__bubble,\n  :host(.md-step--completed) .md-step__bubble { background-color: Highlight; color: HighlightText; }\n  /* The rail is pure background paint — without this it vanishes in WHC. */\n  .md-step__connector {\n    background-color: GrayText;\n    forced-color-adjust: none;\n  }\n  .md-step__connector::after { background-color: Highlight; }\n  .md-step__state-layer { display: none; }\n  .md-step__inner:focus-visible .md-step__indicator { box-shadow: 0 0 0 3px Highlight; }\n}\n\n/* ==========================================================\n   DENSITY (local override)\n   Maps the local `density` prop onto the same --md-sys-density-scale signal a\n   global `data-density` ancestor sets. Declared on :host, so a local rung wins\n   over the inherited global one. Every density-sensitive value in this file\n   derives from that single signal by calc — never add a fixed per-rung ladder.\n   ========================================================== */\n:host([density='-1']) { --md-sys-density-scale: -1; }\n:host([density='-2']) { --md-sys-density-scale: -2; }\n:host([density='-3']) { --md-sys-density-scale: -3; }\n:host([density='-4']) { --md-sys-density-scale: -4; }\n","import {\n  Component,\n  Host,\n  h,\n  Prop,\n  Element,\n  Event,\n  EventEmitter,\n  Listen,\n  State,\n} from '@stencil/core';\nimport { triggerRipple } from '../../utils/ripple';\n\n/**\n * `md-step` — one step inside an `<md-stepper>`.\n *\n * Layout, position and i18n are pushed down from the parent stepper via\n * `data-*` attributes, so a step is almost always authored declaratively:\n *\n * ```html\n * <md-stepper active=\"1\">\n *   <md-step label=\"Account\" completed></md-step>\n *   <md-step label=\"Shipping\" description=\"Address & method\"></md-step>\n *   <md-step label=\"Payment\" optional></md-step>\n * </md-stepper>\n * ```\n *\n * @slot - Step content. Rendered as an expanding panel in **vertical**\n * orientation, and — since the horizontal per-step panel mode — as a\n * full-width panel under the step row in **horizontal** orientation too. The\n * parent opts the row in automatically the moment any step has content; a\n * horizontal stepper whose steps are all empty is unaffected and keeps taking\n * one shared panel through `md-stepper`'s own `content` slot.\n *\n * @part inner             - The clickable step header (indicator + text).\n * @part indicator         - Circular wrapper around the bubble/dot (hover/ripple).\n * @part bubble            - Numbered / icon indicator.\n * @part dot               - Dot indicator (dot variant).\n * @part state-layer       - Hover / focus / press overlay inside the indicator.\n * @part text              - Label + supporting text wrapper.\n * @part label             - Step label.\n * @part optional          - The \"Optional\" caption.\n * @part description       - Supporting / helper text (or error / optional caption).\n * @part connector         - Connector line (leading or trailing).\n * @part connector-leading - The rail segment above the bubble (vertical).\n * @part connector-trailing- The rail/line segment after the bubble.\n * @part content           - Vertical content panel.\n * @part actions           - Back / Continue action row in the content panel.\n */\n@Component({\n  tag: 'md-step',\n  styleUrl: 'md-step.css',\n  shadow: true,\n})\nexport class MdStep {\n  @Element() el!: HTMLElement;\n\n  /** Step caption (\"Account info\", \"Shipping\", …). */\n  @Prop() label: string = '';\n\n  /** Supporting text beneath the label. */\n  @Prop() description: string = '';\n\n  /** Whether this step is completed (shows a check / fills its connector). */\n  @Prop({ reflect: true }) completed: boolean = false;\n\n  /** Whether this step is the active one. Usually managed by the parent. */\n  @Prop({ mutable: true, reflect: true }) active: boolean = false;\n\n  /** Whether this step is in an error state. */\n  @Prop({ reflect: true }) error: boolean = false;\n\n  /** Error message shown beneath the label (overrides `description` on error). */\n  @Prop({ attribute: 'error-text' }) errorText: string = '';\n\n  /** Manually disable the step (parent's `mode=\"linear\"` also gates reachability). */\n  @Prop({ reflect: true }) disabled: boolean = false;\n\n  /** Mark the step optional — shows an \"Optional\" caption and may be skipped. */\n  @Prop({ reflect: true }) optional: boolean = false;\n\n  /**\n   * Editable: a completed step shows an edit (pencil) affordance, and — with\n   * `auto-complete` on — revisiting it preserves downstream completion\n   * (review/edit in place). Revisiting a non-editable step restarts progress\n   * from there.\n   */\n  @Prop({ reflect: true }) editable: boolean = false;\n\n  /** Override the indicator glyph (Material Symbols name), e.g. \"lock\". */\n  @Prop() icon: string = '';\n\n  /** Glyph shown when completed (Material Symbols name). */\n  @Prop({ attribute: 'completed-icon' }) completedIcon: string = 'check';\n\n  /** Glyph shown when in error (Material Symbols name). */\n  @Prop({ attribute: 'error-icon' }) errorIcon: string = 'priority_high';\n\n  /** Full override for the announced accessible name (i18n escape hatch). */\n  @Prop({ attribute: 'accessible-name' }) accessibleName?: string;\n\n  /** Hide the built-in Back / Continue actions in the vertical content panel. */\n  @Prop({ attribute: 'hide-actions', reflect: true }) hideActions: boolean = false;\n\n  /**\n   * Local density rung. Drives the same `--md-sys-density-scale` signal that a\n   * global `data-density` ancestor sets, so a local value simply overrides the\n   * inherited one. 0 = default, -4 = ultra-compact.\n   */\n  @Prop({ reflect: true }) density: 0 | -1 | -2 | -3 | -4 = 0;\n\n  /** Bubbled to the parent stepper, which decides whether the move is allowed.\n   *  Internal coordination event — consumed (and stopped) by `md-stepper`. */\n  @Event({ bubbles: true, composed: false }) mdStepClick: EventEmitter<{ index: number }>;\n\n  /** Continue pressed in this step's content panel. Consumed by `md-stepper`. */\n  @Event({ bubbles: true, composed: false }) mdStepNext: EventEmitter<{ index: number }>;\n\n  /** Back pressed in this step's content panel. Consumed by `md-stepper`. */\n  @Event({ bubbles: true, composed: false }) mdStepBack: EventEmitter<{ index: number }>;\n\n  @State() private hasSlottedContent = false;\n\n  private contentObserver?: MutationObserver;\n\n  // ─── Parent-pushed layout / i18n (read from data-* attributes) ────────────\n  private attr(name: string, fallback = ''): string {\n    const v = this.el.getAttribute(name);\n    return v != null && v !== '' ? v : fallback;\n  }\n  private get index(): number { return Number(this.attr('data-index', '0')); }\n  private get total(): number { return Number(this.attr('data-total', '0')); }\n  private get activeIndex(): number { return Number(this.attr('data-active', '0')); }\n  private get position(): 'first' | 'middle' | 'last' {\n    return (this.el.getAttribute('data-position') as 'first' | 'middle' | 'last') ?? 'first';\n  }\n  private get orientation(): 'horizontal' | 'vertical' {\n    return (this.el.getAttribute('data-orientation') as 'horizontal' | 'vertical') ?? 'horizontal';\n  }\n  private get indicatorKind(): 'numbered' | 'dot' {\n    return (this.el.getAttribute('data-indicator') as 'numbered' | 'dot') ?? 'numbered';\n  }\n  private get linearMode(): boolean { return this.el.getAttribute('data-mode') === 'linear'; }\n\n  connectedCallback() {\n    this.computeSlottedContent();\n    // Slot-based `slotchange` can't be used here: the default slot is only\n    // rendered while the panel exists, so content appended when there is no\n    // panel would never re-trigger it. Watch the light DOM instead.\n    if (typeof MutationObserver !== 'undefined') {\n      this.contentObserver = new MutationObserver(() => this.computeSlottedContent());\n      this.contentObserver.observe(this.el, { childList: true });\n    }\n  }\n\n  disconnectedCallback() {\n    this.contentObserver?.disconnect();\n    this.contentObserver = undefined;\n  }\n\n  private computeSlottedContent() {\n    // Whitespace-only text nodes (pretty-printed markup) are not content.\n    this.hasSlottedContent = Array.from(this.el.childNodes).some(\n      (n) =>\n        n.nodeType === Node.ELEMENT_NODE ||\n        (n.nodeType === Node.TEXT_NODE && (n.textContent ?? '').trim() !== ''),\n    );\n  }\n\n  // ─── Reachability (linear gating) ─────────────────────────────────────────\n  private stepSiblings(): HTMLMdStepElement[] {\n    const parent = this.el.parentElement;\n    if (!parent) return [];\n    return (Array.from(parent.children) as HTMLElement[]).filter(\n      (c) => c.tagName.toLowerCase() === 'md-step',\n    ) as HTMLMdStepElement[];\n  }\n\n  /** Every prior step completed — or optional, which may be skipped. Mirrors\n   *  the parent stepper's `canNavigateTo` so header affordance and actual\n   *  navigability never disagree. */\n  private allPriorPassable(): boolean {\n    const siblings = this.stepSiblings();\n    for (let i = 0; i < this.index; i++) {\n      const s = siblings[i];\n      if (!s?.completed && !s?.optional) return false;\n    }\n    return true;\n  }\n\n  /** Can the user navigate to this step right now? */\n  private get reachable(): boolean {\n    if (!this.linearMode) return true;\n    return this.index <= this.activeIndex || this.completed || this.allPriorPassable();\n  }\n\n  private get effectivelyDisabled(): boolean {\n    return this.disabled || !this.reachable;\n  }\n\n  // ─── Handlers ─────────────────────────────────────────────────────────────\n  private handleClick = (e: Event) => {\n    if (this.effectivelyDisabled) return;\n    e.preventDefault();\n    this.mdStepClick.emit({ index: this.index });\n  };\n\n  private handleKeyDown = (e: KeyboardEvent) => {\n    if (this.effectivelyDisabled) return;\n    if (e.key === 'Enter' || e.key === ' ') {\n      e.preventDefault();\n      // Shared library helper — md-ripple only listens to pointerdown, so\n      // keyboard activations trigger a centered wave the same way every other\n      // interactive component does (radio, checkbox, icon-button, …).\n      triggerRipple(this.el);\n      this.mdStepClick.emit({ index: this.index });\n    }\n  };\n\n  private emitNext = () => this.mdStepNext.emit({ index: this.index });\n  private emitBack = () => this.mdStepBack.emit({ index: this.index });\n\n  /** The built-in action buttons are internal chrome — their composed\n   *  `mdClick` retargets to this host; stop it there so it never masquerades\n   *  as an app-level button event. Slotted user buttons (target ≠ host) are\n   *  left alone. */\n  @Listen('mdClick')\n  onInternalMdClick(e: Event) {\n    if (e.target === this.el) e.stopPropagation();\n  }\n\n  // ─── Render helpers ───────────────────────────────────────────────────────\n  private glyph(name: string) {\n    return (\n      <span class=\"md-step__bubble\" part=\"bubble\" aria-hidden=\"true\">\n        <span class=\"material-symbols-outlined\">{name}</span>\n      </span>\n    );\n  }\n\n  private renderIndicator() {\n    if (this.indicatorKind === 'dot') {\n      return <span class=\"md-step__dot\" part=\"dot\" aria-hidden=\"true\"></span>;\n    }\n    if (this.error) return this.glyph(this.errorIcon);\n    if (this.icon) return this.glyph(this.icon);\n    if (this.completed) return this.glyph(this.editable ? 'edit' : this.completedIcon);\n    return (\n      <span class=\"md-step__bubble\" part=\"bubble\" aria-hidden=\"true\">\n        {this.index + 1}\n      </span>\n    );\n  }\n\n  private composeA11yLabel(): string {\n    if (this.accessibleName?.trim()) return this.accessibleName;\n    const w = (n: string, f: string) => this.attr(n, f);\n    let s = `${w('data-step-word', 'Step')} ${this.index + 1} ${w('data-of-word', 'of')} ${this.total}`;\n    if (this.label) s += `: ${this.label}`;\n    if (this.optional) s += `, ${w('data-optional-word', 'optional')}`;\n    if (this.completed) s += `, ${w('data-completed-word', 'completed')}`;\n    if (this.active) s += `, ${w('data-current-word', 'current')}`;\n    if (this.error) s += `, ${w('data-error-word', 'error')}${this.errorText ? `: ${this.errorText}` : ''}`;\n    return s;\n  }\n\n  render() {\n    const isFirst = this.position === 'first';\n    const isLast = this.position === 'last';\n    const isVertical = this.orientation === 'vertical';\n    const disabled = this.effectivelyDisabled;\n    const supporting = this.error && this.errorText ? this.errorText : this.description;\n    const optionalCaption = this.optional ? this.attr('data-optional-word', 'Optional') : '';\n    // Built-in Back/Continue: on unless the stepper disabled nav (data-nav)\n    // or this step opted out (hide-actions).\n    const navActions = this.attr('data-nav', 'true') !== 'false' && !this.hideActions;\n    // Loading / continue-gating pushed down from the parent stepper.\n    const loading = this.attr('data-loading', 'false') === 'true';\n    const nextDisabled = this.attr('data-next-disabled', 'false') === 'true';\n    // Lazy: only the active step's panel is mounted (no collapse animation).\n    const lazy = this.attr('data-lazy', 'false') === 'true';\n    // Vertical always panels (built-in Back/Continue live there too). Horizontal\n    // panels only when the parent opted the row into the grid AND this step has\n    // its own content — the horizontal nav bar is the stepper's, not the step's,\n    // so navActions alone must never conjure a panel here.\n    const panelMode = this.attr('data-panel-mode', 'shared');\n    const hasPanel = isVertical\n      ? this.hasSlottedContent || navActions\n      : panelMode === 'step' && this.hasSlottedContent;\n    const renderPanel = hasPanel && (!lazy || this.active);\n\n    // Header = [leading connector?, inner, trailing connector?]. In the\n    // horizontal panel mode the host goes `display: contents`, so these three\n    // must be wrapped in ONE box to stay a single grid item (the wrapper\n    // inherits the flex properties the host used to carry). Every other mode\n    // renders them bare, exactly as before — no extra box, no layout change.\n    const headerNodes = [\n      !isFirst && isVertical && (\n        <span\n          class={{\n            'md-step__connector': true,\n            'md-step__connector--leading': true,\n            'md-step__connector--filled': this.index <= this.activeIndex,\n          }}\n          part=\"connector connector-leading\"\n          aria-hidden=\"true\"\n        ></span>\n      ),\n      <div\n        class=\"md-step__inner\"\n        part=\"inner\"\n        tabindex={disabled ? -1 : 0}\n        role=\"button\"\n        aria-label={this.composeA11yLabel()}\n        aria-disabled={disabled ? 'true' : undefined}\n        aria-current={this.active ? 'step' : undefined}\n        aria-expanded={hasPanel ? (this.active ? 'true' : 'false') : undefined}\n        aria-controls={renderPanel ? 'md-step-panel' : undefined}\n        onClick={this.handleClick}\n        onKeyDown={this.handleKeyDown}\n      >\n        <span class=\"md-step__indicator\" part=\"indicator\">\n          <md-ripple disabled={disabled}></md-ripple>\n          <span class=\"md-step__state-layer\" part=\"state-layer\" aria-hidden=\"true\"></span>\n          {this.renderIndicator()}\n        </span>\n\n        {(this.label || supporting || optionalCaption) && (\n          <span class=\"md-step__text\" part=\"text\">\n            {this.label && <span class=\"md-step__label\" part=\"label\">{this.label}</span>}\n            {optionalCaption && (\n              <span class=\"md-step__optional\" part=\"optional\">{optionalCaption}</span>\n            )}\n            {supporting && (\n              <span class=\"md-step__description\" part=\"description\">{supporting}</span>\n            )}\n          </span>\n        )}\n      </div>,\n      !isLast && (\n        <span\n          class={{\n            'md-step__connector': true,\n            'md-step__connector--trailing': true,\n            'md-step__connector--filled': this.index < this.activeIndex,\n          }}\n          part=\"connector connector-trailing\"\n          aria-hidden=\"true\"\n        ></span>\n      ),\n    ];\n    const panelStep = !isVertical && hasPanel;\n\n    return (\n      <Host\n        class={{\n          'md-step': true,\n          [`md-step--${this.orientation}`]: true,\n          [`md-step--indicator-${this.indicatorKind}`]: true,\n          'md-step--active': this.active,\n          'md-step--completed': this.completed,\n          'md-step--error': this.error,\n          'md-step--optional': this.optional,\n          'md-step--editable': this.editable,\n          'md-step--disabled': disabled,\n          'md-step--first': isFirst,\n          'md-step--last': isLast,\n          'md-step--panel-step': !isVertical && hasPanel,\n        }}\n        role=\"listitem\"\n        aria-current={this.active ? 'step' : undefined}\n        aria-disabled={disabled ? 'true' : undefined}\n      >\n        {panelStep ? <div class=\"md-step__header\">{headerNodes}</div> : headerNodes}\n\n        {/* Vertical content panel — always in the tree so both expand AND\n            collapse animate (grid-rows 0fr↔1fr spring); closed panels are\n            visibility:hidden, keeping them out of the a11y tree + tab order. */}\n        {renderPanel && (\n          <div\n            id=\"md-step-panel\"\n            class={{\n              'md-step__content': true,\n              'md-step__content--open': this.active,\n              'md-step__content--lazy': lazy,\n            }}\n            part=\"content\"\n            role=\"region\"\n            aria-label={this.label || this.composeA11yLabel()}\n          >\n            <div class=\"md-step__content-sizer\">\n              <div class=\"md-step__content-inner\">\n                <slot></slot>\n                {navActions && isVertical && (\n                  <div class=\"md-step__actions\" part=\"actions\">\n                    <md-button variant=\"text\" size=\"sm\" disabled={isFirst || loading} onClick={this.emitBack}>\n                      {this.attr('data-back-label', 'Back')}\n                    </md-button>\n                    <md-button\n                      variant=\"filled\"\n                      size=\"sm\"\n                      loading={loading}\n                      disabled={nextDisabled || loading}\n                      onClick={this.emitNext}\n                    >\n                      {isLast ? this.attr('data-finish-label', 'Finish') : this.attr('data-next-label', 'Continue')}\n                    </md-button>\n                  </div>\n                )}\n              </div>\n            </div>\n          </div>\n        )}\n      </Host>\n    );\n  }\n}\n"],"mappings":"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","ignoreList":[]}

package/dist/components/md-stepper.js

@@ -1,2 +1,2 @@
-import{p as t,H as e,c as i,f as s,h as a,d as n,t as o}from"./p-BR6gfOQH.js";import{d as r}from"./p-BADA63mI.js";import{d}from"./p-B-iHDK5h.js";import{d as h}from"./p-CTC8XAB6.js";const l=()=>`:host{display:block;inline-size:100%;box-sizing:border-box;font-family:var(--md-sys-typescale-body-large-font-family, Roboto, sans-serif);color:var(--md-sys-color-on-surface, #1C1B1F)}.md-stepper__live{position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}.md-stepper__list{list-style:none;margin:0;padding:0;display:flex}:host(.md-stepper--horizontal[data-panel-mode='step']) .md-stepper__list{display:grid;grid-template-columns:repeat(var(--md-stepper-step-count, 1), 1fr);align-items:start}:host(.md-stepper--horizontal) .md-stepper__list{flex-direction:row;align-items:flex-start}:host(.md-stepper--vertical) .md-stepper__list{flex-direction:column;gap:var(--md-stepper-gap, 0)}.md-stepper__content ::slotted(*){display:block;margin-block-start:var(--md-sys-spacing-inset-xl, 24px)}.md-stepper__nav{display:flex;gap:var(--md-sys-spacing-gap-sm, 8px);justify-content:flex-end;margin-block-start:max(4px, calc(20px + var(--md-sys-density-scale, 0) * 2px))}:host(.md-stepper--mobile) .md-stepper__list{display:none}.md-stepper__mobile{display:flex;align-items:center;gap:var(--md-sys-spacing-gap-sm, 8px);margin-block-start:var(--md-sys-spacing-gap-lg, 16px)}.md-stepper__mobile-progress{flex:1;display:flex;align-items:center;justify-content:center;gap:var(--md-sys-spacing-gap-sm, 8px);min-inline-size:0}.md-stepper__mobile-text{font-family:var(--md-sys-typescale-label-large-font-family, Roboto, sans-serif);font-size:var(--md-sys-typescale-label-large-font-size, 14px);font-weight:var(--md-sys-typescale-label-large-font-weight, 500);line-height:var(--md-sys-typescale-label-large-line-height, 20px);color:var(--md-sys-color-on-surface-variant, #49454F)}.md-stepper__mobile-dot{inline-size:8px;block-size:8px;border-radius:var(--md-sys-shape-corner-full, 9999px);background-color:var(--md-step-connector-color, var(--md-sys-color-outline, #79747E));transition:background-color var(--md-sys-motion-spring-effects-default-duration, 200ms) var(--md-sys-motion-spring-effects-default-easing, cubic-bezier(0.34, 0.80, 0.34, 1.00)),     transform var(--md-sys-motion-spring-spatial-default-duration, 500ms) var(--md-sys-motion-spring-spatial-default-easing, cubic-bezier(0.38, 1.21, 0.22, 1.00))}.md-stepper__mobile-dot.is-done{background-color:var(--md-step-active-color, var(--md-sys-color-primary, #6750A4))}.md-stepper__mobile-dot.is-active{background-color:var(--md-step-active-color, var(--md-sys-color-primary, #6750A4));transform:scale(1.5)}@media (prefers-reduced-motion: reduce){.md-stepper__mobile-dot{transition-duration:0.01ms}.md-stepper__mobile-dot.is-active{transform:none}}@media (forced-colors: active){.md-stepper__mobile-dot{background-color:GrayText;forced-color-adjust:none}.md-stepper__mobile-dot.is-done,.md-stepper__mobile-dot.is-active{background-color:Highlight}}:host([density='-1']){--md-sys-density-scale:-1}:host([density='-2']){--md-sys-density-scale:-2}:host([density='-3']){--md-sys-density-scale:-3}:host([density='-4']){--md-sys-density-scale:-4}`;const c=t(class t extends e{constructor(t){super();if(t!==false){this.__registerHost()}this.__attachShadow();this.mdBeforeChange=i(this,"mdBeforeChange",7);this.mdStepChange=i(this,"mdStepChange",7);this.mdComplete=i(this,"mdComplete",7);this.orientation="horizontal";this.indicator="numbered";this.variant="default";this.mode="linear";this.active=0;this.autoComplete=true;this.nav=true;this.nextDisabled=false;this.loading=false;this.lazy=false;this.label="Progress";this.stepWord="Step";this.ofWord="of";this.completedWord="completed";this.currentWord="current";this.errorWord="error";this.optionalWord="Optional";this.nextLabel="Continue";this.backLabel="Back";this.finishLabel="Finish";this.density=0;this.stepCount=0;this.liveMessage="";this.errorMessage="";this.steps=[];this.lastActive=0;this.handleSlotChange=()=>{this.collectSteps();const t=this.clampToValidStep(this.active);if(t!==this.active){this.active=t}else{this.syncSteps()}};this.handleFooterBack=async()=>{await this.prev();if(this.active===0)this.focusActiveStep()}}componentWillLoad(){this.collectSteps();this.active=this.clampToValidStep(this.active);this.lastActive=this.active;this.syncSteps()}componentDidLoad(){this.syncSteps();this.observeStepState()}disconnectedCallback(){this.stepObserver?.disconnect();this.stepObserver=undefined}onActiveChange(t){this.collectSteps();const e=this.clampToValidStep(t);if(e!==t){this.active=e;return}const i=this.lastActive;if(e===i)return;this.lastActive=e;if(this.autoComplete){this.mutatingSelf((()=>{if(e>i){this.steps.forEach(((t,s)=>{if(s>=i&&s<e&&!t.disabled){t.completed=true;t.error=false}}))}else{const t=this.steps[e];if(!(t?.editable&&t?.completed)){this.steps.forEach(((t,i)=>{if(i>=e)t.completed=false}))}}}))}this.syncSteps();this.mdStepChange.emit({index:e,previous:i});this.announceStep(e)}onConfigChange(){this.syncSteps()}ownsStepEvent(t){const e=t.target;return!!e&&e.parentElement===this.el&&e.tagName.toLowerCase()==="md-step"}onStepClick(t){if(!this.ownsStepEvent(t))return;t.stopPropagation();const e=t.detail.index;if(e===this.active)return;if(this.canNavigateTo(e))this.commitChange(e)}async onStepNext(t){if(!this.ownsStepEvent(t))return;t.stopPropagation();const e=this.active;await this.next();if(this.active!==e)this.focusActiveStep()}async onStepBack(t){if(!this.ownsStepEvent(t))return;t.stopPropagation();const e=this.active;await this.prev();if(this.active!==e)this.focusActiveStep()}onInternalMdClick(t){if(t.target===this.el)t.stopPropagation()}async next(){this.collectSteps();if(this.steps.length===0)return;let t=this.active+1;while(t<this.steps.length&&this.steps[t].disabled)t++;if(t>=this.steps.length){const t=this.steps[this.active];if(this.autoComplete&&t&&!t.disabled){this.mutatingSelf((()=>{t.completed=true;t.error=false}))}this.syncSteps();this.mdComplete.emit();return}this.commitChange(t)}async prev(){this.collectSteps();let t=this.active-1;while(t>=0&&this.steps[t]?.disabled)t--;if(t<0)return;this.commitChange(t)}async goTo(t){this.collectSteps();const e=this.clampToValidStep(t);if(this.canNavigateTo(e))this.commitChange(e)}async reset(){this.collectSteps();this.mutatingSelf((()=>{this.steps.forEach((t=>{t.completed=false;t.error=false}))}));this.active=0;this.syncSteps()}commitChange(t){if(t===this.active)return false;const e=this.mdBeforeChange.emit({index:t,previous:this.active});if(e.defaultPrevented)return false;this.active=t;return true}observeStepState(){if(typeof MutationObserver==="undefined")return;this.stepObserver=new MutationObserver((t=>{let e=null;for(const i of t){if(i.attributeName==="error"){const t=i.target;if(t.error&&t.tagName.toLowerCase()==="md-step")e=t}}this.syncSteps();if(e)this.announceError(e)}));this.attachObserver()}attachObserver(){this.stepObserver?.observe(this.el,{subtree:true,attributes:true,attributeFilter:["completed","error","optional","disabled"]})}mutatingSelf(t){this.stepObserver?.disconnect();try{t()}finally{this.attachObserver()}}announceStep(t){const e=this.steps[t];if(!e)return;let i=`${this.stepWord} ${t+1} ${this.ofWord} ${this.stepCount}`;if(e.label)i+=`: ${e.label}`;if(e.optional)i+=`, ${this.optionalWord}`;if(e.completed)i+=`, ${this.completedWord}`;i+=`, ${this.currentWord}`;this.liveMessage=i}announceError(t){const e=this.steps.indexOf(t);let i=`${this.stepWord} ${e+1} ${this.ofWord} ${this.stepCount}`;if(t.label)i+=`: ${t.label}`;i+=`, ${this.errorWord}`;if(t.errorText)i+=`: ${t.errorText}`;this.errorMessage=i}canNavigateTo(t){this.collectSteps();const e=this.steps[t];if(!e||e.disabled)return false;if(this.mode!=="linear")return true;if(t<=this.active)return true;if(e.completed)return true;return this.steps.slice(0,t).every((t=>t.completed||t.optional))}clampToValidStep(t){if(this.steps.length===0)return 0;return Math.max(0,Math.min(this.steps.length-1,t|0))}collectSteps(){this.steps=Array.from(this.el.children).filter((t=>t.tagName.toLowerCase()==="md-step"))}focusActiveStep(){const t=this.steps[this.active];t?.shadowRoot?.querySelector(".md-step__inner")?.focus()}static hasOwnContent(t){return Array.from(t.childNodes).some((t=>t.nodeType===Node.ELEMENT_NODE||t.nodeType===Node.TEXT_NODE&&(t.textContent??"").trim()!==""))}syncSteps(){this.collectSteps();const e=this.steps.length;this.stepCount=e;const i=this.orientation==="horizontal"&&this.steps.some((e=>t.hasOwnContent(e)))?"step":"shared";if(this.el.getAttribute("data-panel-mode")!==i){this.el.setAttribute("data-panel-mode",i)}this.el.style.setProperty("--md-stepper-step-count",String(e));this.steps.forEach(((t,a)=>{const n=(e,i)=>{if(t.getAttribute(e)!==i)t.setAttribute(e,i)};n("data-index",String(a));n("data-total",String(e));n("data-active",String(this.active));n("data-orientation",this.orientation);n("data-indicator",this.indicator);n("data-mode",this.mode);n("data-position",a===0?"first":a===e-1?"last":"middle");n("data-step-word",this.stepWord);n("data-of-word",this.ofWord);n("data-completed-word",this.completedWord);n("data-current-word",this.currentWord);n("data-error-word",this.errorWord);n("data-optional-word",this.optionalWord);n("data-next-label",this.nextLabel);n("data-back-label",this.backLabel);n("data-finish-label",this.finishLabel);n("data-nav",String(this.nav));n("data-loading",String(this.loading));n("data-next-disabled",String(this.nextDisabled));n("data-lazy",String(this.lazy));n("data-panel-mode",i);t.style.setProperty("--md-step-idx",String(a));const o=a===this.active;if(t.active!==o)t.active=o;s(t)}))}render(){const t=this.variant==="mobile";return a(n,{key:"f262d0d6456f196ef4939993ea94c145d25f709f",class:{"md-stepper":true,[`md-stepper--${this.orientation}`]:true,[`md-stepper--indicator-${this.indicator}`]:true,[`md-stepper--mode-${this.mode}`]:true,"md-stepper--mobile":t},role:"navigation","aria-label":this.label},a("div",{key:"1b5ac3b5db4bc01994fc90089527dada88dda4fc",class:"md-stepper__live","aria-live":"polite",role:"status"},this.liveMessage),a("div",{key:"51033869784248679172b2539f13d19de6d05e30",class:"md-stepper__live","aria-live":"assertive",role:"alert"},this.errorMessage),a("ol",{key:"534ad2c08f8b1be04cac9f25ba0dcbf0b0ac1003",class:"md-stepper__list",part:"list"},a("slot",{key:"3147ff529153becb54dc100e0e056fd7fbeda21e",onSlotchange:this.handleSlotChange})),a("div",{key:"9c24bf8efb543ba374cb5c2f288494adb96cf5ac",class:"md-stepper__content",part:"content"},a("slot",{key:"f7c966282165179aff377306a3de5f26c872f8ba",name:"content"})),this.nav&&!t&&this.orientation==="horizontal"&&this.stepCount>0&&a("div",{key:"db1e1f2b08f9814c3736a8a47b3d7b2858013e20",class:"md-stepper__nav",part:"nav"},a("md-button",{key:"c1fa1eff5aa71903f658a9e562dce6131629c266",variant:"text",size:"sm",disabled:this.active<=0||this.loading,onClick:this.handleFooterBack},this.backLabel),a("md-button",{key:"8ccf92329a8bf33bee88c41962ba126d11ff2ba7",variant:"filled",size:"sm",loading:this.loading,disabled:this.nextDisabled||this.loading,onClick:()=>this.next()},this.active>=this.stepCount-1?this.finishLabel:this.nextLabel)),this.nav&&t&&this.stepCount>0&&a("div",{key:"5c4680d09916f63df029de1578174ebddaeeb6f1",class:"md-stepper__mobile",part:"mobile-nav"},a("md-button",{key:"315e488fb091d6e44e6b15a7535c0005e77916fd",variant:"text",size:"sm",disabled:this.active<=0||this.loading,onClick:this.handleFooterBack},this.backLabel),a("div",{key:"9074d0df2e5144056403f2bc0d5ae8efab7c838e",class:"md-stepper__mobile-progress",part:"mobile-progress","aria-hidden":this.indicator==="dot"?"true":undefined},this.indicator==="dot"?this.steps.map(((t,e)=>a("span",{class:{"md-stepper__mobile-dot":true,"is-active":e===this.active,"is-done":e<this.active||!!t.completed}}))):a("span",{class:"md-stepper__mobile-text"},`${this.stepWord} ${this.active+1} ${this.ofWord} ${this.stepCount}`)),a("md-button",{key:"098af16e63e402e038201daf3e9448e9291d3dce",variant:"filled",size:"sm",loading:this.loading,disabled:this.nextDisabled||this.loading,onClick:()=>this.next()},this.active>=this.stepCount-1?this.finishLabel:this.nextLabel)))}get el(){return this}static get watchers(){return{active:[{onActiveChange:0}],orientation:[{onConfigChange:0}],indicator:[{onConfigChange:0}],mode:[{onConfigChange:0}],nav:[{onConfigChange:0}],variant:[{onConfigChange:0}],lazy:[{onConfigChange:0}],loading:[{onConfigChange:0}],nextDisabled:[{onConfigChange:0}],stepWord:[{onConfigChange:0}],ofWord:[{onConfigChange:0}],completedWord:[{onConfigChange:0}],currentWord:[{onConfigChange:0}],errorWord:[{onConfigChange:0}],optionalWord:[{onConfigChange:0}],nextLabel:[{onConfigChange:0}],backLabel:[{onConfigChange:0}],finishLabel:[{onConfigChange:0}]}}static get style(){return l()}},[257,"md-stepper",{orientation:[513],indicator:[513],variant:[513],mode:[513],active:[1538],autoComplete:[4,"auto-complete"],nav:[4],nextDisabled:[4,"next-disabled"],loading:[4],lazy:[4],label:[1],stepWord:[1,"step-word"],ofWord:[1,"of-word"],completedWord:[1,"completed-word"],currentWord:[1,"current-word"],errorWord:[1,"error-word"],optionalWord:[1,"optional-word"],nextLabel:[1,"next-label"],backLabel:[1,"back-label"],finishLabel:[1,"finish-label"],density:[514],stepCount:[32],liveMessage:[32],errorMessage:[32],next:[64],prev:[64],goTo:[64],reset:[64]},[[0,"mdStepClick","onStepClick"],[0,"mdStepNext","onStepNext"],[0,"mdStepBack","onStepBack"],[0,"mdClick","onInternalMdClick"]],{active:[{onActiveChange:0}],orientation:[{onConfigChange:0}],indicator:[{onConfigChange:0}],mode:[{onConfigChange:0}],nav:[{onConfigChange:0}],variant:[{onConfigChange:0}],lazy:[{onConfigChange:0}],loading:[{onConfigChange:0}],nextDisabled:[{onConfigChange:0}],stepWord:[{onConfigChange:0}],ofWord:[{onConfigChange:0}],completedWord:[{onConfigChange:0}],currentWord:[{onConfigChange:0}],errorWord:[{onConfigChange:0}],optionalWord:[{onConfigChange:0}],nextLabel:[{onConfigChange:0}],backLabel:[{onConfigChange:0}],finishLabel:[{onConfigChange:0}]}]);function p(){if(typeof customElements==="undefined"){return}const t=["md-stepper","md-button","md-loading-indicator","md-ripple"];t.forEach((t=>{switch(t){case"md-stepper":if(!customElements.get(o(t))){customElements.define(o(t),c)}break;case"md-button":if(!customElements.get(o(t))){r()}break;case"md-loading-indicator":if(!customElements.get(o(t))){d()}break;case"md-ripple":if(!customElements.get(o(t))){h()}break}}))}p();const f=c;const m=p;export{f as MdStepper,m as defineCustomElement};
+import{p as t,H as e,c as i,f as s,h as a,d as n,t as o}from"./p-BR6gfOQH.js";import{d as r}from"./p-B2fYoYe9.js";import{d}from"./p-De3E5Q8v.js";const h=()=>`:host{display:block;inline-size:100%;box-sizing:border-box;font-family:var(--md-sys-typescale-body-large-font-family, Roboto, sans-serif);color:var(--md-sys-color-on-surface, #1C1B1F)}.md-stepper__live{position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}.md-stepper__list{list-style:none;margin:0;padding:0;display:flex}:host(.md-stepper--horizontal[data-panel-mode='step']) .md-stepper__list{display:grid;grid-template-columns:repeat(var(--md-stepper-step-count, 1), 1fr);align-items:start}:host(.md-stepper--horizontal) .md-stepper__list{flex-direction:row;align-items:flex-start}:host(.md-stepper--vertical) .md-stepper__list{flex-direction:column;gap:var(--md-stepper-gap, 0)}.md-stepper__content ::slotted(*){display:block;margin-block-start:var(--md-sys-spacing-inset-xl, 24px)}.md-stepper__nav{display:flex;gap:var(--md-sys-spacing-gap-sm, 8px);justify-content:flex-end;margin-block-start:max(4px, calc(20px + var(--md-sys-density-scale, 0) * 2px))}:host(.md-stepper--mobile) .md-stepper__list{display:none}.md-stepper__mobile{display:flex;align-items:center;gap:var(--md-sys-spacing-gap-sm, 8px);margin-block-start:var(--md-sys-spacing-gap-lg, 16px)}.md-stepper__mobile-progress{flex:1;display:flex;align-items:center;justify-content:center;gap:var(--md-sys-spacing-gap-sm, 8px);min-inline-size:0}.md-stepper__mobile-text{font-family:var(--md-sys-typescale-label-large-font-family, Roboto, sans-serif);font-size:var(--md-sys-typescale-label-large-font-size, 14px);font-weight:var(--md-sys-typescale-label-large-font-weight, 500);line-height:var(--md-sys-typescale-label-large-line-height, 20px);color:var(--md-sys-color-on-surface-variant, #49454F)}.md-stepper__mobile-dot{inline-size:8px;block-size:8px;border-radius:var(--md-sys-shape-corner-full, 9999px);background-color:var(--md-step-connector-color, var(--md-sys-color-outline, #79747E));transition:background-color var(--md-sys-motion-spring-effects-default-duration, 200ms) var(--md-sys-motion-spring-effects-default-easing, cubic-bezier(0.34, 0.80, 0.34, 1.00)),     transform var(--md-sys-motion-spring-spatial-default-duration, 500ms) var(--md-sys-motion-spring-spatial-default-easing, cubic-bezier(0.38, 1.21, 0.22, 1.00))}.md-stepper__mobile-dot.is-done{background-color:var(--md-step-active-color, var(--md-sys-color-primary, #6750A4))}.md-stepper__mobile-dot.is-active{background-color:var(--md-step-active-color, var(--md-sys-color-primary, #6750A4));transform:scale(1.5)}@media (prefers-reduced-motion: reduce){.md-stepper__mobile-dot{transition-duration:0.01ms}.md-stepper__mobile-dot.is-active{transform:none}}@media (forced-colors: active){.md-stepper__mobile-dot{background-color:GrayText;forced-color-adjust:none}.md-stepper__mobile-dot.is-done,.md-stepper__mobile-dot.is-active{background-color:Highlight}}:host([density='-1']){--md-sys-density-scale:-1}:host([density='-2']){--md-sys-density-scale:-2}:host([density='-3']){--md-sys-density-scale:-3}:host([density='-4']){--md-sys-density-scale:-4}`;const l=t(class t extends e{constructor(t){super();if(t!==false){this.__registerHost()}this.__attachShadow();this.mdBeforeChange=i(this,"mdBeforeChange",7);this.mdStepChange=i(this,"mdStepChange",7);this.mdComplete=i(this,"mdComplete",7);this.orientation="horizontal";this.indicator="numbered";this.variant="default";this.mode="linear";this.active=0;this.autoComplete=true;this.nav=true;this.nextDisabled=false;this.loading=false;this.lazy=false;this.label="Progress";this.stepWord="Step";this.ofWord="of";this.completedWord="completed";this.currentWord="current";this.errorWord="error";this.optionalWord="Optional";this.nextLabel="Continue";this.backLabel="Back";this.finishLabel="Finish";this.density=0;this.stepCount=0;this.liveMessage="";this.errorMessage="";this.steps=[];this.lastActive=0;this.handleSlotChange=()=>{this.collectSteps();const t=this.clampToValidStep(this.active);if(t!==this.active){this.active=t}else{this.syncSteps()}};this.handleFooterBack=async()=>{await this.prev();if(this.active===0)this.focusActiveStep()}}componentWillLoad(){this.collectSteps();this.active=this.clampToValidStep(this.active);this.lastActive=this.active;this.syncSteps()}componentDidLoad(){this.syncSteps();this.observeStepState()}disconnectedCallback(){this.stepObserver?.disconnect();this.stepObserver=undefined}onActiveChange(t){this.collectSteps();const e=this.clampToValidStep(t);if(e!==t){this.active=e;return}const i=this.lastActive;if(e===i)return;this.lastActive=e;if(this.autoComplete){this.mutatingSelf((()=>{if(e>i){this.steps.forEach(((t,s)=>{if(s>=i&&s<e&&!t.disabled){t.completed=true;t.error=false}}))}else{const t=this.steps[e];if(!(t?.editable&&t?.completed)){this.steps.forEach(((t,i)=>{if(i>=e)t.completed=false}))}}}))}this.syncSteps();this.mdStepChange.emit({index:e,previous:i});this.announceStep(e)}onConfigChange(){this.syncSteps()}ownsStepEvent(t){const e=t.target;return!!e&&e.parentElement===this.el&&e.tagName.toLowerCase()==="md-step"}onStepClick(t){if(!this.ownsStepEvent(t))return;t.stopPropagation();const e=t.detail.index;if(e===this.active)return;if(this.canNavigateTo(e))this.commitChange(e)}async onStepNext(t){if(!this.ownsStepEvent(t))return;t.stopPropagation();const e=this.active;await this.next();if(this.active!==e)this.focusActiveStep()}async onStepBack(t){if(!this.ownsStepEvent(t))return;t.stopPropagation();const e=this.active;await this.prev();if(this.active!==e)this.focusActiveStep()}onInternalMdClick(t){if(t.target===this.el)t.stopPropagation()}async next(){this.collectSteps();if(this.steps.length===0)return;let t=this.active+1;while(t<this.steps.length&&this.steps[t].disabled)t++;if(t>=this.steps.length){const t=this.steps[this.active];if(this.autoComplete&&t&&!t.disabled){this.mutatingSelf((()=>{t.completed=true;t.error=false}))}this.syncSteps();this.mdComplete.emit();return}this.commitChange(t)}async prev(){this.collectSteps();let t=this.active-1;while(t>=0&&this.steps[t]?.disabled)t--;if(t<0)return;this.commitChange(t)}async goTo(t){this.collectSteps();const e=this.clampToValidStep(t);if(this.canNavigateTo(e))this.commitChange(e)}async reset(){this.collectSteps();this.mutatingSelf((()=>{this.steps.forEach((t=>{t.completed=false;t.error=false}))}));this.active=0;this.syncSteps()}commitChange(t){if(t===this.active)return false;const e=this.mdBeforeChange.emit({index:t,previous:this.active});if(e.defaultPrevented)return false;this.active=t;return true}observeStepState(){if(typeof MutationObserver==="undefined")return;this.stepObserver=new MutationObserver((t=>{let e=null;for(const i of t){if(i.attributeName==="error"){const t=i.target;if(t.error&&t.tagName.toLowerCase()==="md-step")e=t}}this.syncSteps();if(e)this.announceError(e)}));this.attachObserver()}attachObserver(){this.stepObserver?.observe(this.el,{subtree:true,attributes:true,attributeFilter:["completed","error","optional","disabled"]})}mutatingSelf(t){this.stepObserver?.disconnect();try{t()}finally{this.attachObserver()}}announceStep(t){const e=this.steps[t];if(!e)return;let i=`${this.stepWord} ${t+1} ${this.ofWord} ${this.stepCount}`;if(e.label)i+=`: ${e.label}`;if(e.optional)i+=`, ${this.optionalWord}`;if(e.completed)i+=`, ${this.completedWord}`;i+=`, ${this.currentWord}`;this.liveMessage=i}announceError(t){const e=this.steps.indexOf(t);let i=`${this.stepWord} ${e+1} ${this.ofWord} ${this.stepCount}`;if(t.label)i+=`: ${t.label}`;i+=`, ${this.errorWord}`;if(t.errorText)i+=`: ${t.errorText}`;this.errorMessage=i}canNavigateTo(t){this.collectSteps();const e=this.steps[t];if(!e||e.disabled)return false;if(this.mode!=="linear")return true;if(t<=this.active)return true;if(e.completed)return true;return this.steps.slice(0,t).every((t=>t.completed||t.optional))}clampToValidStep(t){if(this.steps.length===0)return 0;return Math.max(0,Math.min(this.steps.length-1,t|0))}collectSteps(){this.steps=Array.from(this.el.children).filter((t=>t.tagName.toLowerCase()==="md-step"))}focusActiveStep(){const t=this.steps[this.active];t?.shadowRoot?.querySelector(".md-step__inner")?.focus()}static hasOwnContent(t){return Array.from(t.childNodes).some((t=>t.nodeType===Node.ELEMENT_NODE||t.nodeType===Node.TEXT_NODE&&(t.textContent??"").trim()!==""))}syncSteps(){this.collectSteps();const e=this.steps.length;this.stepCount=e;const i=this.orientation==="horizontal"&&this.steps.some((e=>t.hasOwnContent(e)))?"step":"shared";if(this.el.getAttribute("data-panel-mode")!==i){this.el.setAttribute("data-panel-mode",i)}this.el.style.setProperty("--md-stepper-step-count",String(e));this.steps.forEach(((t,a)=>{const n=(e,i)=>{if(t.getAttribute(e)!==i)t.setAttribute(e,i)};n("data-index",String(a));n("data-total",String(e));n("data-active",String(this.active));n("data-orientation",this.orientation);n("data-indicator",this.indicator);n("data-mode",this.mode);n("data-position",a===0?"first":a===e-1?"last":"middle");n("data-step-word",this.stepWord);n("data-of-word",this.ofWord);n("data-completed-word",this.completedWord);n("data-current-word",this.currentWord);n("data-error-word",this.errorWord);n("data-optional-word",this.optionalWord);n("data-next-label",this.nextLabel);n("data-back-label",this.backLabel);n("data-finish-label",this.finishLabel);n("data-nav",String(this.nav));n("data-loading",String(this.loading));n("data-next-disabled",String(this.nextDisabled));n("data-lazy",String(this.lazy));n("data-panel-mode",i);t.style.setProperty("--md-step-idx",String(a));const o=a===this.active;if(t.active!==o)t.active=o;s(t)}))}render(){const t=this.variant==="mobile";return a(n,{key:"f262d0d6456f196ef4939993ea94c145d25f709f",class:{"md-stepper":true,[`md-stepper--${this.orientation}`]:true,[`md-stepper--indicator-${this.indicator}`]:true,[`md-stepper--mode-${this.mode}`]:true,"md-stepper--mobile":t},role:"navigation","aria-label":this.label},a("div",{key:"1b5ac3b5db4bc01994fc90089527dada88dda4fc",class:"md-stepper__live","aria-live":"polite",role:"status"},this.liveMessage),a("div",{key:"51033869784248679172b2539f13d19de6d05e30",class:"md-stepper__live","aria-live":"assertive",role:"alert"},this.errorMessage),a("ol",{key:"534ad2c08f8b1be04cac9f25ba0dcbf0b0ac1003",class:"md-stepper__list",part:"list"},a("slot",{key:"3147ff529153becb54dc100e0e056fd7fbeda21e",onSlotchange:this.handleSlotChange})),a("div",{key:"9c24bf8efb543ba374cb5c2f288494adb96cf5ac",class:"md-stepper__content",part:"content"},a("slot",{key:"f7c966282165179aff377306a3de5f26c872f8ba",name:"content"})),this.nav&&!t&&this.orientation==="horizontal"&&this.stepCount>0&&a("div",{key:"db1e1f2b08f9814c3736a8a47b3d7b2858013e20",class:"md-stepper__nav",part:"nav"},a("md-button",{key:"c1fa1eff5aa71903f658a9e562dce6131629c266",variant:"text",size:"sm",disabled:this.active<=0||this.loading,onClick:this.handleFooterBack},this.backLabel),a("md-button",{key:"8ccf92329a8bf33bee88c41962ba126d11ff2ba7",variant:"filled",size:"sm",loading:this.loading,disabled:this.nextDisabled||this.loading,onClick:()=>this.next()},this.active>=this.stepCount-1?this.finishLabel:this.nextLabel)),this.nav&&t&&this.stepCount>0&&a("div",{key:"5c4680d09916f63df029de1578174ebddaeeb6f1",class:"md-stepper__mobile",part:"mobile-nav"},a("md-button",{key:"315e488fb091d6e44e6b15a7535c0005e77916fd",variant:"text",size:"sm",disabled:this.active<=0||this.loading,onClick:this.handleFooterBack},this.backLabel),a("div",{key:"9074d0df2e5144056403f2bc0d5ae8efab7c838e",class:"md-stepper__mobile-progress",part:"mobile-progress","aria-hidden":this.indicator==="dot"?"true":undefined},this.indicator==="dot"?this.steps.map(((t,e)=>a("span",{class:{"md-stepper__mobile-dot":true,"is-active":e===this.active,"is-done":e<this.active||!!t.completed}}))):a("span",{class:"md-stepper__mobile-text"},`${this.stepWord} ${this.active+1} ${this.ofWord} ${this.stepCount}`)),a("md-button",{key:"098af16e63e402e038201daf3e9448e9291d3dce",variant:"filled",size:"sm",loading:this.loading,disabled:this.nextDisabled||this.loading,onClick:()=>this.next()},this.active>=this.stepCount-1?this.finishLabel:this.nextLabel)))}get el(){return this}static get watchers(){return{active:[{onActiveChange:0}],orientation:[{onConfigChange:0}],indicator:[{onConfigChange:0}],mode:[{onConfigChange:0}],nav:[{onConfigChange:0}],variant:[{onConfigChange:0}],lazy:[{onConfigChange:0}],loading:[{onConfigChange:0}],nextDisabled:[{onConfigChange:0}],stepWord:[{onConfigChange:0}],ofWord:[{onConfigChange:0}],completedWord:[{onConfigChange:0}],currentWord:[{onConfigChange:0}],errorWord:[{onConfigChange:0}],optionalWord:[{onConfigChange:0}],nextLabel:[{onConfigChange:0}],backLabel:[{onConfigChange:0}],finishLabel:[{onConfigChange:0}]}}static get style(){return h()}},[257,"md-stepper",{orientation:[513],indicator:[513],variant:[513],mode:[513],active:[1538],autoComplete:[4,"auto-complete"],nav:[4],nextDisabled:[4,"next-disabled"],loading:[4],lazy:[4],label:[1],stepWord:[1,"step-word"],ofWord:[1,"of-word"],completedWord:[1,"completed-word"],currentWord:[1,"current-word"],errorWord:[1,"error-word"],optionalWord:[1,"optional-word"],nextLabel:[1,"next-label"],backLabel:[1,"back-label"],finishLabel:[1,"finish-label"],density:[514],stepCount:[32],liveMessage:[32],errorMessage:[32],next:[64],prev:[64],goTo:[64],reset:[64]},[[0,"mdStepClick","onStepClick"],[0,"mdStepNext","onStepNext"],[0,"mdStepBack","onStepBack"],[0,"mdClick","onInternalMdClick"]],{active:[{onActiveChange:0}],orientation:[{onConfigChange:0}],indicator:[{onConfigChange:0}],mode:[{onConfigChange:0}],nav:[{onConfigChange:0}],variant:[{onConfigChange:0}],lazy:[{onConfigChange:0}],loading:[{onConfigChange:0}],nextDisabled:[{onConfigChange:0}],stepWord:[{onConfigChange:0}],ofWord:[{onConfigChange:0}],completedWord:[{onConfigChange:0}],currentWord:[{onConfigChange:0}],errorWord:[{onConfigChange:0}],optionalWord:[{onConfigChange:0}],nextLabel:[{onConfigChange:0}],backLabel:[{onConfigChange:0}],finishLabel:[{onConfigChange:0}]}]);function c(){if(typeof customElements==="undefined"){return}const t=["md-stepper","md-button","md-ripple"];t.forEach((t=>{switch(t){case"md-stepper":if(!customElements.get(o(t))){customElements.define(o(t),l)}break;case"md-button":if(!customElements.get(o(t))){r()}break;case"md-ripple":if(!customElements.get(o(t))){d()}break}}))}c();const p=l;const f=c;export{p as MdStepper,f as defineCustomElement};
 //# sourceMappingURL=md-stepper.js.map