scb-wc 0.1.144 → 0.1.146

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (8) hide show
  1. package/mvc/components/scb-stepper/scb-step.js +40 -25
  2. package/mvc/components/scb-stepper/scb-stepper.js +24 -2
  3. package/package.json +2 -2
  4. package/scb-components/scb-stepper/scb-step.d.ts +7 -0
  5. package/scb-components/scb-stepper/scb-stepper.d.ts +2 -0
  6. package/scb-stepper/scb-step.js +142 -44
  7. package/scb-stepper/scb-stepper.js +91 -13
  8. package/scb-wc.bundle.js +206 -50
package/mvc/components/scb-stepper/scb-step.js CHANGED
@@ -1,61 +1,76 @@
1
- import{h as p,m as h,p as a,v as s,y as u}from"../../vendor/vendor.js";import"../../vendor/vendor-lit.js";import"../../vendor/icon.js";import"../../vendor/ripple.js";import{ensureFocusRingOnFocusVisible as n}from"../shared/lazy-focus-ring.js";import{t as i}from"../../vendor/decorate.js";(function(){try{var l=typeof globalThis<"u"?globalThis:window;if(!l.__scb_ce_guard_installed__){l.__scb_ce_guard_installed__=!0;var e=customElements.define.bind(customElements);customElements.define=function(o,b,m){try{customElements.get(o)||e(o,b,m)}catch(d){var c=String(d||"");if(c.indexOf("already been used")===-1&&c.indexOf("NotSupportedError")===-1)throw d}}}}catch{}})();var r,t=(r=class extends p{constructor(...e){super(...e),this.label="",this.subLabel="",this.symbolVariant="number",this.number=0,this.active=!1,this.completed=!1,this.changeOnCompleted=!1,this.islast=!1,this.variant="horizontal",this.widthWeight=1,this.icon=""}updated(){!this.subLabel||this.subLabel.trim()===""?this.setAttribute("no-content",""):this.removeAttribute("no-content"),this.widthWeight>0?this.style.setProperty("--scb-step-width-weight",String(this.widthWeight)):this.style.removeProperty("--scb-step-width-weight")}handleKeyDown(e){e.key==="Enter"||e.key===" "?(e.preventDefault(),this.dispatchEvent(new MouseEvent("click",{bubbles:!0,composed:!0}))):["ArrowRight","ArrowLeft","ArrowDown","ArrowUp","Home","End"].includes(e.key)&&(this.dispatchEvent(new CustomEvent("scb-stepper-keynav",{detail:{key:e.key},bubbles:!0,composed:!0})),e.preventDefault())}render(){const e=this.active?"step":void 0,o=this.label?`${this.label}${this.subLabel?": "+this.subLabel:""}`:`Steg ${this.number||""}`.trim();switch(this.symbolVariant){case"icon":return s`
1
+ import{h as d,m,p as a,v as o,y as u}from"../../vendor/vendor.js";import"../../vendor/vendor-lit.js";import"../../vendor/icon.js";import"../../vendor/ripple.js";import{ensureFocusRingReady as v}from"../shared/lazy-focus-ring.js";import{t as i}from"../../vendor/decorate.js";(function(){try{var l=typeof globalThis<"u"?globalThis:window;if(!l.__scb_ce_guard_installed__){l.__scb_ce_guard_installed__=!0;var e=customElements.define.bind(customElements);customElements.define=function(s,n,r){try{customElements.get(s)||e(s,n,r)}catch(p){var b=String(p||"");if(b.indexOf("already been used")===-1&&b.indexOf("NotSupportedError")===-1)throw p}}}}catch{}})();var c,t=(c=class extends d{constructor(...e){super(...e),this.label="",this.subLabel="",this.symbolVariant="number",this.number=0,this.active=!1,this.completed=!1,this.changeOnCompleted=!1,this.islast=!1,this.variant="horizontal",this.widthWeight=1,this.icon="",this.__nativeFocusRingReady=!1,this.__nativeFocusRingPending=!1,this.__onFocusIn=s=>{const n=s.composedPath()[0];n instanceof HTMLElement&&n.matches(":focus-visible")&&this.__ensureNativeFocusRing()},this.__onFocusOut=()=>{this.__syncInteractiveParts()}}updated(){!this.subLabel||this.subLabel.trim()===""?this.setAttribute("no-content",""):this.removeAttribute("no-content"),this.widthWeight>0?this.style.setProperty("--scb-step-width-weight",String(this.widthWeight)):this.style.removeProperty("--scb-step-width-weight"),this.__syncInteractiveParts()}__getControl(){return this.renderRoot.querySelector(".scb-step-content")}__syncInteractiveParts(){const e=this.__getControl(),s=this.renderRoot.querySelector(".symbol-target"),n=this.renderRoot.querySelector("md-focus-ring"),r=this.renderRoot.querySelector("md-ripple");n&&e&&(n.control=e,n.visible=e.matches(":focus-visible")),r&&s&&(r.control=s)}__ensureNativeFocusRing(){this.__nativeFocusRingReady||this.__nativeFocusRingPending||(this.__nativeFocusRingPending=!0,v(),customElements.whenDefined("md-focus-ring").then(()=>{this.__nativeFocusRingPending=!1,this.__nativeFocusRingReady=!0,this.toggleAttribute("data-native-focus-ring-ready",!0),this.requestUpdate(),this.updateComplete.then(()=>this.__syncInteractiveParts())}))}handleKeyDown(e){e.key==="Enter"||e.key===" "?(e.preventDefault(),this.dispatchEvent(new MouseEvent("click",{bubbles:!0,composed:!0}))):["ArrowRight","ArrowLeft","ArrowDown","ArrowUp","Home","End"].includes(e.key)&&(this.dispatchEvent(new CustomEvent("scb-stepper-keynav",{detail:{key:e.key},bubbles:!0,composed:!0})),e.preventDefault())}render(){const e=this.active?"step":void 0,s=this.label?`${this.label}${this.subLabel?": "+this.subLabel:""}`:`Steg ${this.number||""}`.trim();switch(this.symbolVariant){case"icon":return o`
2
2
  <div
3
3
  class="scb-step-content"
4
4
  tabindex="0"
5
5
  role="button"
6
6
  aria-current=${e}
7
- aria-label=${o}
7
+ aria-label=${s}
8
8
  @keydown=${this.handleKeyDown}
9
- @focusin=${n}
9
+ @focusin=${this.__onFocusIn}
10
+ @focusout=${this.__onFocusOut}
10
11
  >
11
- <md-ripple></md-ripple>
12
- <div class="symbol">
13
- ${this.completed&&this.changeOnCompleted?s`<md-icon>check</md-icon>`:s`<md-icon>${this.icon}</md-icon>`}
14
- </div>
12
+ <span class="symbol-target">
13
+ <md-ripple></md-ripple>
14
+ <div class="symbol">
15
+ ${this.completed&&this.changeOnCompleted?o`<md-icon>check</md-icon>`:o`<md-icon>${this.icon}</md-icon>`}
16
+ </div>
17
+ <md-focus-ring></md-focus-ring>
18
+ </span>
15
19
  <div class="content">
16
20
  <div class="label" data-label="${this.label}"><span class="label-text">${this.label}</span></div>
17
21
  <div class="sub-label" data-label="${this.subLabel}"><span class="sub-label-text">${this.subLabel}</span></div>
18
22
  </div>
19
- <md-focus-ring></md-focus-ring>
20
23
  </div>
21
- `;case"marker":return s`
24
+ `;case"marker":return o`
22
25
  <div
23
26
  class="scb-step-content"
24
27
  tabindex="0"
25
28
  role="button"
26
29
  aria-current=${e}
27
- aria-label=${o}
30
+ aria-label=${s}
28
31
  @keydown=${this.handleKeyDown}
29
- @focusin=${n}
32
+ @focusin=${this.__onFocusIn}
33
+ @focusout=${this.__onFocusOut}
30
34
  >
31
- <md-ripple></md-ripple>
32
- <div class="symbol">
33
- ${this.completed&&this.changeOnCompleted?s`<md-icon>check</md-icon>`:s``}
34
- </div>
35
+ <span class="symbol-target">
36
+ <md-ripple></md-ripple>
37
+ <div class="symbol">
38
+ ${this.completed&&this.changeOnCompleted?o`<md-icon>check</md-icon>`:o``}
39
+ </div>
40
+ <md-focus-ring></md-focus-ring>
41
+ </span>
35
42
  <div class="content">
36
43
  <div class="label" data-label="${this.label}"><span class="label-text">${this.label}</span></div>
37
44
  <div class="sub-label" data-label="${this.subLabel}"><span class="sub-label-text">${this.subLabel}</span></div>
38
45
  </div>
39
- <md-focus-ring></md-focus-ring>
40
46
  </div>
41
- `;default:return s`
47
+ `;default:return o`
42
48
  <div
43
49
  class="scb-step-content"
44
50
  tabindex="0"
45
51
  role="button"
46
52
  aria-current=${e}
47
- aria-label=${o}
53
+ aria-label=${s}
48
54
  @keydown=${this.handleKeyDown}
49
- @focusin=${n}
55
+ @focusin=${this.__onFocusIn}
56
+ @focusout=${this.__onFocusOut}
50
57
  >
51
- <md-ripple></md-ripple>
52
- <div class="symbol">
53
- ${this.completed&&this.changeOnCompleted?s`<md-icon>check</md-icon>`:s`<span>${this.number}</span>`}
54
- </div>
58
+ <span class="symbol-target">
59
+ <md-ripple></md-ripple>
60
+ <div class="symbol">
61
+ ${this.completed&&this.changeOnCompleted?o`<md-icon>check</md-icon>`:o`<span>${this.number}</span>`}
62
+ </div>
63
+ <md-focus-ring></md-focus-ring>
64
+ </span>
55
65
  <div class="content">
56
66
  <div class="label" data-label="${this.label}"><span class="label-text">${this.label}</span></div>
57
67
  <div class="sub-label" data-label="${this.subLabel}"><span class="sub-label-text">${this.subLabel}</span></div>
58
68
  </div>
59
- <md-focus-ring></md-focus-ring>
60
69
  </div>
61
- `}}},r.styles=u`:host{font-family:var(--brand-font);--scb-step-slide-from-x:0px;--scb-step-slide-from-y:0px;--scb-step-label-active-weight:600}.scb-step-content{width:fit-content;max-width:100%;min-width:0;min-height:100%;display:flex;flex-direction:column;align-items:center;position:relative;margin-inline:auto;cursor:pointer;background:0 0;box-sizing:border-box;user-select:none;padding-block:var(--spacing-1);padding-inline:var(--spacing-4)}.scb-step-content:focus,.scb-step-content:focus-visible{outline:0;box-shadow:none}.symbol{background-color:var(--md-sys-color-outline-variant);color:var(--md-sys-color-on-primary);border-radius:var(--md-sys-shape-corner-full);min-width:var(--icon-size-medium);height:var(--icon-size-medium);display:flex;align-items:center;justify-content:center;font-weight:var(--md-sys-typescale-label-small-weight);font-size:var(--md-sys-typescale-label-small-size);line-height:var(--md-sys-typescale-label-small-line-height);letter-spacing:var(--md-sys-typescale-label-small-tracking);position:relative;z-index:1;will-change:transform,opacity;transition:background-color var(--motion-duration-short) var(--motion-easing-standard),color var(--motion-duration-short) var(--motion-easing-standard),transform var(--motion-duration-short) var(--motion-easing-emphasized);padding:var(--spacing-3)}md-focus-ring{border-radius:var(--md-sys-shape-corner-small)}md-icon{font-size:20px}:host([active]) .symbol,:host([completed]) .symbol{background-color:var(--md-sys-color-primary);color:var(--md-sys-color-on-primary)}.label{margin-top:var(--spacing-3);text-align:center;font-size:var(--md-sys-typescale-label-medium-size);line-height:var(--md-sys-typescale-label-medium-line-height);letter-spacing:var(--md-sys-typescale-label-medium-tracking);color:var(--md-sys-color-on-surface);max-width:90px;word-break:break-word;margin-bottom:var(--spacing-3);display:grid;justify-items:center}.label::before,.sub-label::before{content:attr(data-label);font-weight:var(--scb-step-label-active-weight);grid-area:1/1;height:0;overflow:hidden;visibility:hidden;white-space:inherit}.label-text{grid-area:1/1}.sub-label{text-align:center;display:grid;justify-items:center}.sub-label-text{grid-area:1/1}:host([active]) .label,:host([active]) .sub-label{font-weight:var(--scb-step-label-active-weight)}.content{display:flex;flex-direction:column;align-items:center;min-width:0;will-change:transform,opacity}:host([variant="vertical"]) .label{margin-top:0;max-width:none}:host([variant="vertical"]) .label,:host([variant="vertical"]) .sub-label{text-align:left;justify-items:start;word-break:normal}:host([variant="vertical"]) .content{align-items:flex-start;min-width:0}:host([symbol-variant="marker"]) .symbol{min-width:16px;height:16px}:host([symbol-variant="marker"][completed][change-on-completed]) .symbol{background-color:transparent;color:var(--md-sys-color-primary)}:host([active]) .symbol,:host([completed]:not([active])) .symbol{animation-iteration-count:1;animation-fill-mode:both;animation-name:var(--motion-keyframe-pulse, scb-kf-pulse)}:host([active]) .symbol{--scb-kf-pulse-scale:1.08;animation-duration:var(--motion-duration-medium);animation-timing-function:var(--motion-easing-emphasized)}:host([completed]:not([active])) .symbol{--scb-kf-pulse-scale:1.04;animation-duration:var(--motion-duration-short);animation-timing-function:var(--motion-easing-standard)}`,r);i([a({type:String,reflect:!0})],t.prototype,"label",void 0);i([a({type:String,reflect:!0,attribute:"sub-label"})],t.prototype,"subLabel",void 0);i([a({type:String,reflect:!0,attribute:"symbol-variant"})],t.prototype,"symbolVariant",void 0);i([a({type:Number,reflect:!0})],t.prototype,"number",void 0);i([a({type:Boolean,reflect:!0})],t.prototype,"active",void 0);i([a({type:Boolean,reflect:!0})],t.prototype,"completed",void 0);i([a({type:Boolean,reflect:!0,attribute:"change-on-completed"})],t.prototype,"changeOnCompleted",void 0);i([a({type:Boolean,reflect:!0})],t.prototype,"islast",void 0);i([a({type:String,reflect:!0})],t.prototype,"variant",void 0);i([a({type:Number,reflect:!0,attribute:"width-weight"})],t.prototype,"widthWeight",void 0);i([a({type:String})],t.prototype,"icon",void 0);t=i([h("scb-step")],t);
70
+ `}}},c.styles=u`:host{font-family:var(--brand-font);--scb-step-slide-from-x:0px;--scb-step-slide-from-y:0px;--scb-step-label-active-weight:600;--scb-stepper-step-padding-block:var(--spacing-2);--scb-stepper-step-padding-inline:var(--spacing-4);--scb-stepper-vertical-step-padding:var(--spacing-4);--scb-stepper-focus-offset:var(--spacing-1, 2px);--scb-step-local-symbol-size:calc(
71
+ var(--md-sys-typescale-label-small-line-height) +
72
+ var(--spacing-5) -
73
+ var(--spacing-1) +
74
+ var(--spacing-5) -
75
+ var(--spacing-1)
76
+ );--scb-step-local-symbol-state-size:calc(var(--scb-step-local-symbol-size) + var(--spacing-3) + var(--spacing-3));--scb-step-local-symbol-icon-size:var(--icon-size-small, 20px)}.scb-step-content{width:fit-content;max-width:100%;min-width:0;min-height:100%;display:flex;flex-direction:column;align-items:center;position:relative;z-index:0;margin-inline:auto;cursor:pointer;background:0 0;box-sizing:border-box;user-select:none;padding-block:var(--scb-stepper-step-padding-block);padding-inline:var(--scb-stepper-step-padding-inline)}.scb-step-content:focus{outline:0;box-shadow:none}:host(:not([data-native-focus-ring-ready])) .scb-step-content:focus-visible{outline:0}:host(:not([data-native-focus-ring-ready])) .scb-step-content:focus-visible .symbol-target{outline:var(--stroke-border-m, 2px) solid var(--md-sys-color-primary);outline-offset:var(--scb-stepper-focus-offset)}.symbol,.symbol-target{border-radius:var(--md-sys-shape-corner-full);display:flex;align-items:center;justify-content:center;position:relative;z-index:1}.symbol-target{inline-size:var(--scb-stepper-symbol-state-size, var(--scb-step-local-symbol-state-size));block-size:var(--scb-stepper-symbol-state-size, var(--scb-step-local-symbol-state-size));flex:0 0 auto}.symbol-target::before{content:"";z-index:-1;background:currentColor;opacity:0;transition:opacity var(--motion-duration-short, 150ms) var(--motion-easing-standard, ease)}.scb-step-content:hover .symbol-target::before{opacity:var(--md-sys-state-hover-state-layer-opacity, 0.08)}.scb-step-content:active .symbol-target::before{opacity:var(--md-sys-state-pressed-state-layer-opacity, 0.12)}.symbol{background-color:var(--md-sys-color-outline-variant);color:var(--md-sys-color-on-primary);inline-size:var(--scb-stepper-symbol-size, var(--scb-step-local-symbol-size));block-size:var(--scb-stepper-symbol-size, var(--scb-step-local-symbol-size));min-inline-size:var(--scb-stepper-symbol-size, var(--scb-step-local-symbol-size));font-weight:var(--md-sys-typescale-label-small-weight);font-size:var(--md-sys-typescale-label-small-size);line-height:var(--md-sys-typescale-label-small-line-height);letter-spacing:var(--md-sys-typescale-label-small-tracking);will-change:transform,opacity;transition:background-color var(--motion-duration-short) var(--motion-easing-standard),color var(--motion-duration-short) var(--motion-easing-standard),transform var(--motion-duration-short) var(--motion-easing-emphasized)}.symbol-target md-focus-ring{position:absolute;pointer-events:none;--md-focus-ring-color:var(--md-sys-color-primary);--md-focus-ring-outward-offset:var(--scb-stepper-focus-offset);--md-focus-ring-shape:var(--md-sys-shape-corner-full)}.symbol-target md-ripple,.symbol-target::before{position:absolute;inset:0;border-radius:inherit;pointer-events:none}md-icon{inline-size:var(--scb-stepper-symbol-icon-size, var(--scb-step-local-symbol-icon-size));block-size:var(--scb-stepper-symbol-icon-size, var(--scb-step-local-symbol-icon-size));font-size:var(--scb-stepper-symbol-icon-size, var(--scb-step-local-symbol-icon-size));line-height:1}:host([active]) .symbol,:host([completed]) .symbol{background-color:var(--md-sys-color-primary);color:var(--md-sys-color-on-primary)}.label{margin-top:var(--spacing-3);text-align:center;font-size:var(--md-sys-typescale-label-medium-size);line-height:var(--md-sys-typescale-label-medium-line-height);letter-spacing:var(--md-sys-typescale-label-medium-tracking);color:var(--md-sys-color-on-surface);max-width:90px;word-break:break-word;margin-bottom:var(--spacing-3);display:grid;justify-items:center}.label::before,.sub-label::before{content:attr(data-label);font-weight:var(--scb-step-label-active-weight);grid-area:1/1;height:0;overflow:hidden;visibility:hidden;white-space:inherit}.label-text{grid-area:1/1}.sub-label{text-align:center;display:grid;justify-items:center}.sub-label-text{grid-area:1/1}:host([active]) .label,:host([active]) .sub-label{font-weight:var(--scb-step-label-active-weight)}.content{display:flex;flex-direction:column;align-items:center;min-width:0;position:relative;z-index:1;will-change:transform,opacity}:host([variant="vertical"]) .label{margin-top:0;max-width:none}:host([variant="vertical"]) .label,:host([variant="vertical"]) .sub-label{text-align:left;justify-items:start;word-break:normal}:host([variant="vertical"]) .content{align-items:flex-start;min-width:0}:host([symbol-variant="marker"]){--scb-step-local-symbol-size:16px;--scb-step-local-symbol-state-size:calc(16px + var(--spacing-3) + var(--spacing-3));--scb-step-local-symbol-icon-size:16px}:host([symbol-variant="marker"]) .symbol{inline-size:var(--scb-stepper-symbol-size, 16px);block-size:var(--scb-stepper-symbol-size, 16px);min-inline-size:var(--scb-stepper-symbol-size, 16px)}:host([symbol-variant="marker"][completed][change-on-completed]) .symbol{background-color:transparent;color:var(--md-sys-color-primary)}:host([active]) .symbol,:host([completed]:not([active])) .symbol{animation-iteration-count:1;animation-fill-mode:both;animation-name:var(--motion-keyframe-pulse, scb-kf-pulse)}:host([active]) .symbol{--scb-kf-pulse-scale:1.08;animation-duration:var(--motion-duration-medium);animation-timing-function:var(--motion-easing-emphasized)}:host([completed]:not([active])) .symbol{--scb-kf-pulse-scale:1.04;animation-duration:var(--motion-duration-short);animation-timing-function:var(--motion-easing-standard)}`,c);i([a({type:String,reflect:!0})],t.prototype,"label",void 0);i([a({type:String,reflect:!0,attribute:"sub-label"})],t.prototype,"subLabel",void 0);i([a({type:String,reflect:!0,attribute:"symbol-variant"})],t.prototype,"symbolVariant",void 0);i([a({type:Number,reflect:!0})],t.prototype,"number",void 0);i([a({type:Boolean,reflect:!0})],t.prototype,"active",void 0);i([a({type:Boolean,reflect:!0})],t.prototype,"completed",void 0);i([a({type:Boolean,reflect:!0,attribute:"change-on-completed"})],t.prototype,"changeOnCompleted",void 0);i([a({type:Boolean,reflect:!0})],t.prototype,"islast",void 0);i([a({type:String,reflect:!0})],t.prototype,"variant",void 0);i([a({type:Number,reflect:!0,attribute:"width-weight"})],t.prototype,"widthWeight",void 0);i([a({type:String})],t.prototype,"icon",void 0);t=i([m("scb-step")],t);
package/mvc/components/scb-stepper/scb-stepper.js CHANGED
@@ -1,4 +1,4 @@
1
- import{h as _,m as k,p as l,v as x,y as w}from"../../vendor/vendor.js";import"../../vendor/vendor-lit.js";import{t as p}from"../../vendor/decorate.js";import{n as I,t as c}from"../../vendor/assertClassBrand.js";import{n as g,r as y,t as b}from"../../vendor/classPrivateFieldGet2.js";import"./scb-step.js";(function(){try{var n=typeof globalThis<"u"?globalThis:window;if(!n.__scb_ce_guard_installed__){n.__scb_ce_guard_installed__=!0;var t=customElements.define.bind(customElements);customElements.define=function(e,s,r){try{customElements.get(e)||t(e,s,r)}catch(h){var i=String(h||"");if(i.indexOf("already been used")===-1&&i.indexOf("NotSupportedError")===-1)throw h}}}}catch{}})();var v,d,a,u,o=(v=new WeakMap,d=new WeakMap,a=new WeakSet,u=class extends _{constructor(...t){super(...t),I(this,a),y(this,v,void 0),y(this,d,void 0),this.type="",this.label="",this.changeOnCompleted=!1,this.variant="horizontal",this.symbolVariant="number",this.spacing=void 0,this.spacingTop=void 0,this.spacingBottom=void 0,this.spacingLeft=void 0,this.spacingRight=void 0,this.activeIndex=0,g(d,this,0),this._onKeyNav=e=>{const s=this._getSteps(),r=this.activeIndex;let i=r;e.detail.key==="ArrowRight"||e.detail.key==="ArrowDown"?r<s.length-1?i=r+1:i=0:e.detail.key==="ArrowLeft"||e.detail.key==="ArrowUp"?r>0?i=r-1:i=s.length-1:e.detail.key==="Home"?i=0:e.detail.key==="End"&&(i=s.length-1),i!==r&&(this._onStepClick(i),setTimeout(()=>{const h=s[i].shadowRoot?.querySelector(".scb-step-content");h&&"focus"in h&&typeof h.focus=="function"&&h.focus()},0))},this._onStepContainerClick=e=>{const s=this._getSteps(),r=e.composedPath(),i=s.findIndex(h=>r.includes(h));i!==-1&&this._onStepClick(i)},this._onSlotChange=()=>{const e=this._getSteps();if(e.length===0){this.activeIndex=0;return}this.activeIndex>e.length-1?this.activeIndex=e.length-1:this.activeIndex<0&&(this.activeIndex=0),this._updateSteps(),c(a,this,m).call(this)}}_onStepClick(t){const e=this.activeIndex;this.activeIndex=t,this._updateSteps(),this.dispatchEvent(new CustomEvent("step-change",{detail:{index:this.activeIndex,step:this._getSteps()[this.activeIndex]},bubbles:!0,composed:!0})),this.dispatchEvent(new CustomEvent("stepchange",{detail:{index:this.activeIndex,step:this._getSteps()[this.activeIndex]},bubbles:!0,composed:!0})),t>e?(this.dispatchEvent(new CustomEvent("step-next",{detail:{from:e,to:t,step:this._getSteps()[t]},bubbles:!0,composed:!0})),this.dispatchEvent(new CustomEvent("stepnext",{detail:{from:e,to:t,step:this._getSteps()[t]},bubbles:!0,composed:!0}))):t<e&&(this.dispatchEvent(new CustomEvent("step-prev",{detail:{from:e,to:t,step:this._getSteps()[t]},bubbles:!0,composed:!0})),this.dispatchEvent(new CustomEvent("stepprev",{detail:{from:e,to:t,step:this._getSteps()[t]},bubbles:!0,composed:!0})))}nextStep(){const t=this._getSteps();this.activeIndex<t.length-1&&this._onStepClick(this.activeIndex+1)}prevStep(){this.activeIndex>0&&this._onStepClick(this.activeIndex-1)}getActiveIndex(){return this.activeIndex}_updateSteps(){const t=this._getSteps();this.style.setProperty("--scb-stepper-step-count",String(Math.max(1,t.length))),t.forEach((e,s)=>{e.active=s===this.activeIndex,e.completed=s<this.activeIndex,e.islast=!1,e.changeOnCompleted=this.changeOnCompleted,e.number=s+1,e.variant=this.variant,e.symbolVariant=this.symbolVariant,e.setAttribute("role","listitem"),e.setAttribute("aria-posinset",String(s+1)),e.setAttribute("aria-setsize",String(t.length))}),t.length>0&&(t[t.length-1].islast=!0)}_getSteps(){return Array.from(this.querySelectorAll("scb-step"))}firstUpdated(t){this._updateSteps(),c(a,this,S).call(this),c(a,this,m).call(this)}updated(t){this._updateSteps(),(t.has("variant")||t.has("symbolVariant"))&&c(a,this,m).call(this),(t.has("spacing")||t.has("spacingTop")||t.has("spacingBottom")||t.has("spacingLeft")||t.has("spacingRight"))&&c(a,this,S).call(this)}render(){return x`
1
+ import{h as _,m as z,p as l,v as x,y as k}from"../../vendor/vendor.js";import"../../vendor/vendor-lit.js";import{t as n}from"../../vendor/decorate.js";import{n as w,t as c}from"../../vendor/assertClassBrand.js";import{n as g,r as u,t as b}from"../../vendor/classPrivateFieldGet2.js";import"./scb-step.js";(function(){try{var p=typeof globalThis<"u"?globalThis:window;if(!p.__scb_ce_guard_installed__){p.__scb_ce_guard_installed__=!0;var t=customElements.define.bind(customElements);customElements.define=function(e,s,a){try{customElements.get(e)||t(e,s,a)}catch(h){var i=String(h||"");if(i.indexOf("already been used")===-1&&i.indexOf("NotSupportedError")===-1)throw h}}}}catch{}})();var v,d,r,f,o=(v=new WeakMap,d=new WeakMap,r=new WeakSet,f=class extends _{constructor(...t){super(...t),w(this,r),u(this,v,void 0),u(this,d,void 0),this.type="",this.label="",this.changeOnCompleted=!1,this.variant="horizontal",this.symbolVariant="number",this.size="medium",this.spacing=void 0,this.spacingTop=void 0,this.spacingBottom=void 0,this.spacingLeft=void 0,this.spacingRight=void 0,this.activeIndex=0,g(d,this,0),this._onKeyNav=e=>{const s=this._getSteps(),a=this.activeIndex;let i=a;e.detail.key==="ArrowRight"||e.detail.key==="ArrowDown"?a<s.length-1?i=a+1:i=0:e.detail.key==="ArrowLeft"||e.detail.key==="ArrowUp"?a>0?i=a-1:i=s.length-1:e.detail.key==="Home"?i=0:e.detail.key==="End"&&(i=s.length-1),i!==a&&(this._onStepClick(i),setTimeout(()=>{const h=s[i].shadowRoot?.querySelector(".scb-step-content");h&&"focus"in h&&typeof h.focus=="function"&&h.focus()},0))},this._onStepContainerClick=e=>{const s=this._getSteps(),a=e.composedPath(),i=s.findIndex(h=>a.includes(h));i!==-1&&this._onStepClick(i)},this._onSlotChange=()=>{const e=this._getSteps();if(e.length===0){this.activeIndex=0;return}this.activeIndex>e.length-1?this.activeIndex=e.length-1:this.activeIndex<0&&(this.activeIndex=0),this._updateSteps(),c(r,this,y).call(this)}}_onStepClick(t){const e=this.activeIndex;this.activeIndex=t,this._updateSteps(),this.dispatchEvent(new CustomEvent("step-change",{detail:{index:this.activeIndex,step:this._getSteps()[this.activeIndex]},bubbles:!0,composed:!0})),this.dispatchEvent(new CustomEvent("stepchange",{detail:{index:this.activeIndex,step:this._getSteps()[this.activeIndex]},bubbles:!0,composed:!0})),t>e?(this.dispatchEvent(new CustomEvent("step-next",{detail:{from:e,to:t,step:this._getSteps()[t]},bubbles:!0,composed:!0})),this.dispatchEvent(new CustomEvent("stepnext",{detail:{from:e,to:t,step:this._getSteps()[t]},bubbles:!0,composed:!0}))):t<e&&(this.dispatchEvent(new CustomEvent("step-prev",{detail:{from:e,to:t,step:this._getSteps()[t]},bubbles:!0,composed:!0})),this.dispatchEvent(new CustomEvent("stepprev",{detail:{from:e,to:t,step:this._getSteps()[t]},bubbles:!0,composed:!0})))}nextStep(){const t=this._getSteps();this.activeIndex<t.length-1&&this._onStepClick(this.activeIndex+1)}prevStep(){this.activeIndex>0&&this._onStepClick(this.activeIndex-1)}getActiveIndex(){return this.activeIndex}_updateSteps(){const t=this._getSteps();this.style.setProperty("--scb-stepper-step-count",String(Math.max(1,t.length))),t.forEach((e,s)=>{e.active=s===this.activeIndex,e.completed=s<this.activeIndex,e.islast=!1,e.changeOnCompleted=this.changeOnCompleted,e.number=s+1,e.variant=this.variant,e.symbolVariant=this.symbolVariant,e.setAttribute("role","listitem"),e.setAttribute("aria-posinset",String(s+1)),e.setAttribute("aria-setsize",String(t.length))}),t.length>0&&(t[t.length-1].islast=!0)}_getSteps(){return Array.from(this.querySelectorAll("scb-step"))}firstUpdated(t){this._updateSteps(),c(r,this,S).call(this),c(r,this,y).call(this)}updated(t){this._updateSteps(),(t.has("variant")||t.has("symbolVariant")||t.has("size"))&&c(r,this,y).call(this),(t.has("spacing")||t.has("spacingTop")||t.has("spacingBottom")||t.has("spacingLeft")||t.has("spacingRight"))&&c(r,this,S).call(this)}render(){return x`
2
2
  <div
3
3
  class="steps"
4
4
  role="list"
@@ -8,4 +8,26 @@ import{h as _,m as k,p as l,v as x,y as w}from"../../vendor/vendor.js";import"..
8
8
  >
9
9
  <slot @slotchange=${this._onSlotChange}></slot>
10
10
  </div>
11
- `}connectedCallback(){super.connectedCallback(),typeof ResizeObserver<"u"&&(g(v,this,new ResizeObserver(()=>{c(a,this,m).call(this)})),b(v,this).observe(this))}disconnectedCallback(){b(v,this)&&(b(v,this).disconnect(),g(v,this,void 0)),b(d,this)&&(cancelAnimationFrame(b(d,this)),g(d,this,0)),super.disconnectedCallback()}},u.styles=w`:host{--scb-stepper-width:100%;--scb-stepper-height:100%;--scb-stepper-step-count:1;--scb-stepper-connector-gap:var(--spacing-2);--scb-stepper-symbol-size:var(--icon-size-medium);display:block;padding:var(--spacing-5)0;width:100%;color:var(--md-sys-color-on-surface);font-family:var(--brand-font);max-width:var(--scb-stepper-width);height:var(--scb-stepper-height);margin-block-start:var(--scb-stepper-spacing-block-start, 0);margin-block-end:var(--scb-stepper-spacing-block-end, 0);margin-inline-start:var(--scb-stepper-spacing-inline-start, 0);margin-inline-end:var(--scb-stepper-spacing-inline-end, 0)}.steps{display:flex;flex-direction:row;align-items:stretch;justify-content:center;position:relative;width:100%;gap:0;height:100%}:host([variant='vertical']) .steps{flex-direction:column;gap:var(--spacing-8)}:host([symbol-variant='marker']){--scb-stepper-symbol-size:16px}::slotted(scb-step){position:relative;z-index:1;width:100%;min-width:0}:host([variant='horizontal']) ::slotted(scb-step){flex:var(--scb-step-width-weight, 1)1 0}:host([variant='horizontal']) ::slotted(scb-step)::after,:host([variant='horizontal']) ::slotted(scb-step)::before{content:"";position:absolute;top:calc(var(--spacing-4) + (var(--scb-stepper-symbol-size)/2));height:1px;background-color:var(--n-70);transition:background-color var(--motion-duration-medium) var(--motion-easing-standard);z-index:0;pointer-events:none}:host([variant='horizontal']) ::slotted(scb-step)::before{left:0;right:calc(50% + (var(--scb-stepper-symbol-size)/2) + var(--scb-stepper-connector-gap))}:host([variant='horizontal']) ::slotted(scb-step)::after{left:calc(50% + (var(--scb-stepper-symbol-size)/2) + var(--scb-stepper-connector-gap));right:0}:host([variant='horizontal']) ::slotted(scb-step:first-child)::before,:host([variant='horizontal']) ::slotted(scb-step:last-child)::after{display:none}:host([variant='horizontal']) ::slotted(scb-step[active])::before,:host([variant='horizontal']) ::slotted(scb-step[completed])::after,:host([variant='horizontal']) ::slotted(scb-step[completed])::before{background-color:var(--md-sys-color-primary)}::slotted(scb-step[variant=vertical][completed]:not(:last-child))::after,::slotted(scb-step[variant=vertical][symbol-variant=marker][completed]:not(:last-child))::after{background-color:var(--md-sys-color-primary)}::slotted(scb-step[variant=vertical]:not(:first-child))::before{display:none}::slotted(scb-step[variant=vertical]:not(:last-child))::after,::slotted(scb-step[variant=vertical][symbol-variant=marker]:not(:last-child))::after{content:"";position:absolute;left:28px;top:52px;width:1px;height:calc(100% - 16px);background-color:var(--n-70);transition:background-color var(--motion-duration-medium) var(--motion-easing-standard);z-index:0;transform:translateX(-50%)}::slotted(scb-step[variant=vertical][symbol-variant=marker]:not(:last-child))::after{left:20px;top:38px;height:calc(100% - 2px)}::slotted(scb-step[symbol-variant=marker]:not(:first-child))::before{top:20px}`,u);function S(){const n=c(a,this,f).call(this,this.spacing),t=c(a,this,f).call(this,this.spacingTop)??n,e=c(a,this,f).call(this,this.spacingBottom)??n,s=c(a,this,f).call(this,this.spacingLeft),r=c(a,this,f).call(this,this.spacingRight);t?this.style.setProperty("--scb-stepper-spacing-block-start",t):this.style.removeProperty("--scb-stepper-spacing-block-start"),e?this.style.setProperty("--scb-stepper-spacing-block-end",e):this.style.removeProperty("--scb-stepper-spacing-block-end"),s?this.style.setProperty("--scb-stepper-spacing-inline-start",s):this.style.removeProperty("--scb-stepper-spacing-inline-start"),r?this.style.setProperty("--scb-stepper-spacing-inline-end",r):this.style.removeProperty("--scb-stepper-spacing-inline-end")}function f(n){if(!n)return;const t=String(n).trim();if(t)return/^\d+$/.test(t)?`var(--spacing-${Math.max(0,Math.min(14,parseInt(t,10)))})`:t}function m(){b(d,this)||g(d,this,requestAnimationFrame(()=>{g(d,this,0),c(a,this,C).call(this)}))}function C(){const n=this._getSteps();n.length!==0&&n.forEach(t=>{const e=t.shadowRoot;if(!e)return;const s=e.querySelector(".label"),r=e.querySelector(".scb-step-content");if(!s)return;if(this.variant!=="horizontal"){s.style.removeProperty("max-width"),s.style.removeProperty("white-space"),s.style.removeProperty("word-break"),s.style.removeProperty("overflow-wrap");return}s.style.maxWidth="none",s.style.whiteSpace="nowrap",s.style.wordBreak="normal",s.style.overflowWrap="normal";const i=r?.clientWidth??t.clientWidth;i>0&&s.scrollWidth>i&&(s.style.maxWidth="100%",s.style.whiteSpace="normal",s.style.wordBreak="break-word",s.style.overflowWrap="anywhere")})}p([l({type:String,reflect:!0})],o.prototype,"type",void 0);p([l({type:String,reflect:!0})],o.prototype,"label",void 0);p([l({type:Boolean,reflect:!0,attribute:"change-on-completed"})],o.prototype,"changeOnCompleted",void 0);p([l({type:String,reflect:!0})],o.prototype,"variant",void 0);p([l({type:String,reflect:!0,attribute:"symbol-variant"})],o.prototype,"symbolVariant",void 0);p([l({type:String,reflect:!0})],o.prototype,"spacing",void 0);p([l({type:String,attribute:"spacing-top",reflect:!0})],o.prototype,"spacingTop",void 0);p([l({type:String,attribute:"spacing-bottom",reflect:!0})],o.prototype,"spacingBottom",void 0);p([l({type:String,attribute:"spacing-left",reflect:!0})],o.prototype,"spacingLeft",void 0);p([l({type:String,attribute:"spacing-right",reflect:!0})],o.prototype,"spacingRight",void 0);p([l({type:Number,reflect:!0,attribute:"active-index"})],o.prototype,"activeIndex",void 0);o=p([k("scb-stepper")],o);
11
+ `}connectedCallback(){super.connectedCallback(),typeof ResizeObserver<"u"&&(g(v,this,new ResizeObserver(()=>{c(r,this,y).call(this)})),b(v,this).observe(this))}disconnectedCallback(){b(v,this)&&(b(v,this).disconnect(),g(v,this,void 0)),b(d,this)&&(cancelAnimationFrame(b(d,this)),g(d,this,0)),super.disconnectedCallback()}},f.styles=k`:host,:host([size='extra-small']){--scb-stepper-symbol-icon-size:var(--icon-size-small, 20px)}:host{--scb-stepper-width:100%;--scb-stepper-height:100%;--scb-stepper-step-count:1;--scb-stepper-connector-gap:var(--spacing-2);--scb-stepper-step-padding-block:var(--spacing-2);--scb-stepper-step-padding-inline:var(--spacing-4);--scb-stepper-vertical-step-padding:var(--spacing-4);--scb-stepper-vertical-gap:var(--spacing-8);--scb-stepper-symbol-size:calc(
12
+ var(--md-sys-typescale-label-small-line-height) +
13
+ var(--spacing-5) -
14
+ var(--spacing-1) +
15
+ var(--spacing-5) -
16
+ var(--spacing-1)
17
+ );--scb-stepper-symbol-state-size:calc(var(--scb-stepper-symbol-size) + var(--spacing-3) + var(--spacing-3));display:block;padding:var(--spacing-5)0;width:100%;color:var(--md-sys-color-on-surface);font-family:var(--brand-font);max-width:var(--scb-stepper-width);height:var(--scb-stepper-height);margin-block-start:var(--scb-stepper-spacing-block-start, 0);margin-block-end:var(--scb-stepper-spacing-block-end, 0);margin-inline-start:var(--scb-stepper-spacing-inline-start, 0);margin-inline-end:var(--scb-stepper-spacing-inline-end, 0)}:host([size='extra-small']){--scb-stepper-symbol-size:calc(
18
+ var(--md-sys-typescale-label-small-line-height) +
19
+ var(--spacing-3) -
20
+ var(--spacing-1) +
21
+ var(--spacing-3) -
22
+ var(--spacing-1)
23
+ )}:host([size='extra-small']),:host([size='large']),:host([size='small']){--scb-stepper-symbol-state-size:calc(var(--scb-stepper-symbol-size) + var(--spacing-3) + var(--spacing-3))}:host([size='small']){--scb-stepper-symbol-size:calc(
24
+ var(--md-sys-typescale-label-small-line-height) +
25
+ var(--spacing-4) -
26
+ var(--spacing-1) +
27
+ var(--spacing-4) -
28
+ var(--spacing-1)
29
+ );--scb-stepper-symbol-icon-size:var(--icon-size-small, 20px)}:host([size='large']){--scb-stepper-symbol-size:calc(
30
+ var(--md-sys-typescale-label-medium-line-height) +
31
+ var(--spacing-5) +
32
+ var(--spacing-5)
33
+ );--scb-stepper-symbol-icon-size:var(--icon-size-medium, 24px)}.steps{display:flex;flex-direction:row;align-items:stretch;justify-content:center;position:relative;width:100%;gap:0;height:100%}:host([variant='vertical']) .steps{flex-direction:column;gap:var(--scb-stepper-vertical-gap)}:host([symbol-variant='marker']){--scb-stepper-symbol-size:16px;--scb-stepper-symbol-state-size:calc(16px + var(--spacing-3) + var(--spacing-3));--scb-stepper-symbol-icon-size:16px}::slotted(scb-step){position:relative;z-index:1;width:100%;min-width:0}:host([variant='horizontal']) ::slotted(scb-step){flex:var(--scb-step-width-weight, 1)1 0}:host([variant='horizontal']) ::slotted(scb-step)::after,:host([variant='horizontal']) ::slotted(scb-step)::before{content:"";position:absolute;top:calc(var(--scb-stepper-step-padding-block) + (var(--scb-stepper-symbol-state-size)/2));height:1px;background-color:var(--n-70);transition:background-color var(--motion-duration-medium) var(--motion-easing-standard);z-index:0;pointer-events:none}:host([variant='horizontal']) ::slotted(scb-step)::before{left:0;right:calc(50% + (var(--scb-stepper-symbol-state-size)/2) + var(--scb-stepper-connector-gap))}:host([variant='horizontal']) ::slotted(scb-step)::after{left:calc(50% + (var(--scb-stepper-symbol-state-size)/2) + var(--scb-stepper-connector-gap));right:0}:host([variant='horizontal']) ::slotted(scb-step:first-child)::before,:host([variant='horizontal']) ::slotted(scb-step:last-child)::after{display:none}:host([variant='horizontal']) ::slotted(scb-step[active])::before,:host([variant='horizontal']) ::slotted(scb-step[completed])::after,:host([variant='horizontal']) ::slotted(scb-step[completed])::before{background-color:var(--md-sys-color-primary)}::slotted(scb-step[variant=vertical][completed]:not(:last-child))::after,::slotted(scb-step[variant=vertical][symbol-variant=marker][completed]:not(:last-child))::after{background-color:var(--md-sys-color-primary)}::slotted(scb-step[variant=vertical]:not(:first-child))::before{display:none}::slotted(scb-step[variant=vertical]:not(:last-child))::after,::slotted(scb-step[variant=vertical][symbol-variant=marker]:not(:last-child))::after{content:"";position:absolute;left:calc(var(--scb-stepper-vertical-step-padding) + (var(--scb-stepper-symbol-state-size)/2));top:calc(var(--scb-stepper-vertical-step-padding) + var(--scb-stepper-symbol-state-size) + var(--scb-stepper-connector-gap));width:1px;height:max(0px,calc(100% + var(--scb-stepper-vertical-gap) - var(--scb-stepper-symbol-state-size) - var(--scb-stepper-connector-gap) - var(--scb-stepper-connector-gap)));background-color:var(--n-70);transition:background-color var(--motion-duration-medium) var(--motion-easing-standard);z-index:0;transform:translateX(-50%)}::slotted(scb-step[symbol-variant=marker]:not(:first-child))::before{top:20px}`,f);function S(){const p=c(r,this,m).call(this,this.spacing),t=c(r,this,m).call(this,this.spacingTop)??p,e=c(r,this,m).call(this,this.spacingBottom)??p,s=c(r,this,m).call(this,this.spacingLeft),a=c(r,this,m).call(this,this.spacingRight);t?this.style.setProperty("--scb-stepper-spacing-block-start",t):this.style.removeProperty("--scb-stepper-spacing-block-start"),e?this.style.setProperty("--scb-stepper-spacing-block-end",e):this.style.removeProperty("--scb-stepper-spacing-block-end"),s?this.style.setProperty("--scb-stepper-spacing-inline-start",s):this.style.removeProperty("--scb-stepper-spacing-inline-start"),a?this.style.setProperty("--scb-stepper-spacing-inline-end",a):this.style.removeProperty("--scb-stepper-spacing-inline-end")}function m(p){if(!p)return;const t=String(p).trim();if(t)return/^\d+$/.test(t)?`var(--spacing-${Math.max(0,Math.min(14,parseInt(t,10)))})`:t}function y(){b(d,this)||g(d,this,requestAnimationFrame(()=>{g(d,this,0),c(r,this,I).call(this)}))}function I(){const p=this._getSteps();p.length!==0&&p.forEach(t=>{const e=t.shadowRoot;if(!e)return;const s=e.querySelector(".label"),a=e.querySelector(".scb-step-content");if(!s)return;if(this.variant!=="horizontal"){s.style.removeProperty("max-width"),s.style.removeProperty("white-space"),s.style.removeProperty("word-break"),s.style.removeProperty("overflow-wrap");return}s.style.maxWidth="none",s.style.whiteSpace="nowrap",s.style.wordBreak="normal",s.style.overflowWrap="normal";const i=a?.clientWidth??t.clientWidth;i>0&&s.scrollWidth>i&&(s.style.maxWidth="100%",s.style.whiteSpace="normal",s.style.wordBreak="break-word",s.style.overflowWrap="anywhere")})}n([l({type:String,reflect:!0})],o.prototype,"type",void 0);n([l({type:String,reflect:!0})],o.prototype,"label",void 0);n([l({type:Boolean,reflect:!0,attribute:"change-on-completed"})],o.prototype,"changeOnCompleted",void 0);n([l({type:String,reflect:!0})],o.prototype,"variant",void 0);n([l({type:String,reflect:!0,attribute:"symbol-variant"})],o.prototype,"symbolVariant",void 0);n([l({type:String,reflect:!0})],o.prototype,"size",void 0);n([l({type:String,reflect:!0})],o.prototype,"spacing",void 0);n([l({type:String,attribute:"spacing-top",reflect:!0})],o.prototype,"spacingTop",void 0);n([l({type:String,attribute:"spacing-bottom",reflect:!0})],o.prototype,"spacingBottom",void 0);n([l({type:String,attribute:"spacing-left",reflect:!0})],o.prototype,"spacingLeft",void 0);n([l({type:String,attribute:"spacing-right",reflect:!0})],o.prototype,"spacingRight",void 0);n([l({type:Number,reflect:!0,attribute:"active-index"})],o.prototype,"activeIndex",void 0);o=n([z("scb-stepper")],o);
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "scb-wc",
3
- "version": "0.1.144",
3
+ "version": "0.1.146",
4
4
  "type": "module",
5
5
  "main": "index.js",
6
6
  "module": "index.js",
@@ -472,5 +472,5 @@
472
472
  },
473
473
  "./mvc/*": "./mvc/*"
474
474
  },
475
- "buildHash": "001519ABA8CBB6978F6316C69F44A152AFB27D049CEB642411CFFF6CD8D2F4E6"
475
+ "buildHash": "1DE6F544E78777D3BFB5C41D0AE20666C57B533DD0A1DBDD55CED605A08CA8CD"
476
476
  }
package/scb-components/scb-stepper/scb-step.d.ts CHANGED
@@ -15,8 +15,15 @@ export declare class ScbStep extends LitElement {
15
15
  variant: 'horizontal' | 'vertical';
16
16
  widthWeight: number;
17
17
  icon: string;
18
+ private __nativeFocusRingReady;
19
+ private __nativeFocusRingPending;
18
20
  static styles: import('lit').CSSResult;
19
21
  updated(): void;
22
+ private __getControl;
23
+ private __syncInteractiveParts;
24
+ private __ensureNativeFocusRing;
25
+ private __onFocusIn;
26
+ private __onFocusOut;
20
27
  private handleKeyDown;
21
28
  render(): import('lit-html').TemplateResult<1>;
22
29
  }
package/scb-components/scb-stepper/scb-stepper.d.ts CHANGED
@@ -1,4 +1,5 @@
1
1
  import { LitElement, PropertyValues } from 'lit';
2
+ export type ScbStepperSize = 'extra-small' | 'small' | 'medium' | 'large';
2
3
  /**
3
4
  * En stepper-komponent enligt SCB-standard.
4
5
  * @slot - Innehåll för stegen
@@ -10,6 +11,7 @@ export declare class ScbStepper extends LitElement {
10
11
  changeOnCompleted: boolean;
11
12
  variant: 'horizontal' | 'vertical';
12
13
  symbolVariant: 'number' | 'icon' | 'marker';
14
+ size: ScbStepperSize;
13
15
  /**
14
16
  * Vertikalt avstånd mot omgivande innehåll.
15
17
  * spacing sätter både top och bottom om spacing-top / spacing-bottom inte är satta.
package/scb-stepper/scb-step.js CHANGED
@@ -1,4 +1,4 @@
1
- import { ensureFocusRingOnFocusVisible as e } from "../shared/lazy-focus-ring.js";
1
+ import { ensureFocusRingReady as e } from "../shared/lazy-focus-ring.js";
2
2
  import { __decorate as t } from "../_virtual/_@oxc-project_runtime@0.126.0/helpers/decorate.js";
3
3
  import { LitElement as n, css as r, html as i } from "lit";
4
4
  import { customElement as a, property as o } from "lit/decorators.js";
@@ -7,7 +7,12 @@ import "@material/web/ripple/ripple.js";
7
7
  //#region src/scb-components/scb-stepper/scb-step.ts
8
8
  var s = class extends n {
9
9
  constructor(...e) {
10
- super(...e), this.label = "", this.subLabel = "", this.symbolVariant = "number", this.number = 0, this.active = !1, this.completed = !1, this.changeOnCompleted = !1, this.islast = !1, this.variant = "horizontal", this.widthWeight = 1, this.icon = "";
10
+ super(...e), this.label = "", this.subLabel = "", this.symbolVariant = "number", this.number = 0, this.active = !1, this.completed = !1, this.changeOnCompleted = !1, this.islast = !1, this.variant = "horizontal", this.widthWeight = 1, this.icon = "", this.__nativeFocusRingReady = !1, this.__nativeFocusRingPending = !1, this.__onFocusIn = (e) => {
11
+ let t = e.composedPath()[0];
12
+ t instanceof HTMLElement && t.matches(":focus-visible") && this.__ensureNativeFocusRing();
13
+ }, this.__onFocusOut = () => {
14
+ this.__syncInteractiveParts();
15
+ };
11
16
  }
12
17
  static {
13
18
  this.styles = r`
@@ -16,6 +21,19 @@ var s = class extends n {
16
21
  --scb-step-slide-from-x: 0px;
17
22
  --scb-step-slide-from-y: 0px;
18
23
  --scb-step-label-active-weight: 600;
24
+ --scb-stepper-step-padding-block: var(--spacing-2);
25
+ --scb-stepper-step-padding-inline: var(--spacing-4);
26
+ --scb-stepper-vertical-step-padding: var(--spacing-4);
27
+ --scb-stepper-focus-offset: var(--spacing-1, 2px);
28
+ --scb-step-local-symbol-size: calc(
29
+ var(--md-sys-typescale-label-small-line-height) +
30
+ var(--spacing-5) -
31
+ var(--spacing-1) +
32
+ var(--spacing-5) -
33
+ var(--spacing-1)
34
+ );
35
+ --scb-step-local-symbol-state-size: calc(var(--scb-step-local-symbol-size) + var(--spacing-3) + var(--spacing-3));
36
+ --scb-step-local-symbol-icon-size: var(--icon-size-small, 20px);
19
37
  }
20
38
  .scb-step-content {
21
39
  width: fit-content;
@@ -26,25 +44,64 @@ var s = class extends n {
26
44
  flex-direction: column;
27
45
  align-items: center;
28
46
  position: relative;
47
+ z-index: 0;
29
48
  margin-inline: auto;
30
49
  cursor: pointer;
31
50
  background: none;
32
51
  box-sizing: border-box;
33
52
  user-select: none;
34
- padding-block: var(--spacing-1);
35
- padding-inline: var(--spacing-4);
53
+ padding-block: var(--scb-stepper-step-padding-block);
54
+ padding-inline: var(--scb-stepper-step-padding-inline);
36
55
  }
37
- .scb-step-content:focus,
38
- .scb-step-content:focus-visible {
39
- outline: none ;
40
- box-shadow: none ;
56
+
57
+ .scb-step-content:focus {
58
+ outline: none;
59
+ box-shadow: none;
60
+ }
61
+
62
+ :host(:not([data-native-focus-ring-ready])) .scb-step-content:focus-visible {
63
+ outline: none;
64
+ }
65
+
66
+ :host(:not([data-native-focus-ring-ready])) .scb-step-content:focus-visible .symbol-target {
67
+ outline: var(--stroke-border-m, 2px) solid var(--md-sys-color-primary);
68
+ outline-offset: var(--scb-stepper-focus-offset);
69
+ }
70
+ .symbol-target {
71
+ inline-size: var(--scb-stepper-symbol-state-size, var(--scb-step-local-symbol-state-size));
72
+ block-size: var(--scb-stepper-symbol-state-size, var(--scb-step-local-symbol-state-size));
73
+ flex: 0 0 auto;
74
+ display: flex;
75
+ align-items: center;
76
+ justify-content: center;
77
+ position: relative;
78
+ z-index: 1;
79
+ border-radius: var(--md-sys-shape-corner-full);
80
+ }
81
+ .symbol-target::before {
82
+ content: '';
83
+ position: absolute;
84
+ inset: 0;
85
+ z-index: -1;
86
+ border-radius: inherit;
87
+ background: currentColor;
88
+ opacity: 0;
89
+ pointer-events: none;
90
+ transition: opacity var(--motion-duration-short, 150ms) var(--motion-easing-standard, ease);
91
+ }
92
+ .scb-step-content:hover .symbol-target::before {
93
+ opacity: var(--md-sys-state-hover-state-layer-opacity, 0.08);
94
+ }
95
+ .scb-step-content:active .symbol-target::before {
96
+ opacity: var(--md-sys-state-pressed-state-layer-opacity, 0.12);
41
97
  }
42
98
  .symbol {
43
99
  background-color: var(--md-sys-color-outline-variant);
44
100
  color: var(--md-sys-color-on-primary);
45
101
  border-radius: var(--md-sys-shape-corner-full);
46
- min-width: var(--icon-size-medium);
47
- height: var(--icon-size-medium);
102
+ inline-size: var(--scb-stepper-symbol-size, var(--scb-step-local-symbol-size));
103
+ block-size: var(--scb-stepper-symbol-size, var(--scb-step-local-symbol-size));
104
+ min-inline-size: var(--scb-stepper-symbol-size, var(--scb-step-local-symbol-size));
48
105
  display: flex;
49
106
  align-items: center;
50
107
  justify-content: center;
@@ -59,13 +116,25 @@ var s = class extends n {
59
116
  background-color var(--motion-duration-short) var(--motion-easing-standard),
60
117
  color var(--motion-duration-short) var(--motion-easing-standard),
61
118
  transform var(--motion-duration-short) var(--motion-easing-emphasized);
62
- padding: var(--spacing-3);
63
119
  }
64
- md-focus-ring {
65
- border-radius: var(--md-sys-shape-corner-small);
120
+ .symbol-target md-focus-ring {
121
+ position: absolute;
122
+ pointer-events: none;
123
+ --md-focus-ring-color: var(--md-sys-color-primary);
124
+ --md-focus-ring-outward-offset: var(--scb-stepper-focus-offset);
125
+ --md-focus-ring-shape: var(--md-sys-shape-corner-full);
126
+ }
127
+ .symbol-target md-ripple {
128
+ position: absolute;
129
+ inset: 0;
130
+ border-radius: inherit;
131
+ pointer-events: none;
66
132
  }
67
133
  md-icon {
68
- font-size: 20px;
134
+ inline-size: var(--scb-stepper-symbol-icon-size, var(--scb-step-local-symbol-icon-size));
135
+ block-size: var(--scb-stepper-symbol-icon-size, var(--scb-step-local-symbol-icon-size));
136
+ font-size: var(--scb-stepper-symbol-icon-size, var(--scb-step-local-symbol-icon-size));
137
+ line-height: 1;
69
138
  }
70
139
  :host([active]) .symbol {
71
140
  background-color: var(--md-sys-color-primary);
@@ -125,6 +194,8 @@ var s = class extends n {
125
194
  flex-direction: column;
126
195
  align-items: center;
127
196
  min-width: 0;
197
+ position: relative;
198
+ z-index: 1;
128
199
  will-change: transform, opacity;
129
200
  }
130
201
  :host([variant="vertical"]) {
@@ -134,7 +205,7 @@ var s = class extends n {
134
205
  align-items: flex-start;
135
206
  gap: var(--spacing-5);
136
207
  margin-inline: 0;
137
- padding: var(--spacing-4);
208
+ padding: var(--scb-stepper-vertical-step-padding);
138
209
  }
139
210
  }
140
211
  :host([no-content]) {
@@ -161,15 +232,21 @@ var s = class extends n {
161
232
  align-items: flex-start;
162
233
  min-width: 0;
163
234
  }
235
+ :host([symbol-variant="marker"]) {
236
+ --scb-step-local-symbol-size: 16px;
237
+ --scb-step-local-symbol-state-size: calc(16px + var(--spacing-3) + var(--spacing-3));
238
+ --scb-step-local-symbol-icon-size: 16px;
239
+ }
164
240
  :host([symbol-variant="marker"]) .symbol {
165
- min-width: 16px;
166
- height: 16px;
241
+ inline-size: var(--scb-stepper-symbol-size, 16px);
242
+ block-size: var(--scb-stepper-symbol-size, 16px);
243
+ min-inline-size: var(--scb-stepper-symbol-size, 16px);
167
244
  }
168
245
  :host([symbol-variant="marker"][completed][change-on-completed]) .symbol {
169
246
  background-color: transparent;
170
247
  color: var(--md-sys-color-primary);
171
248
  md-icon{
172
- font-size: var(--icon-size-small);
249
+ font-size: var(--scb-stepper-symbol-icon-size, 16px);
173
250
  }
174
251
  }
175
252
 
@@ -194,7 +271,19 @@ var s = class extends n {
194
271
  `;
195
272
  }
196
273
  updated() {
197
- !this.subLabel || this.subLabel.trim() === "" ? this.setAttribute("no-content", "") : this.removeAttribute("no-content"), this.widthWeight > 0 ? this.style.setProperty("--scb-step-width-weight", String(this.widthWeight)) : this.style.removeProperty("--scb-step-width-weight");
274
+ !this.subLabel || this.subLabel.trim() === "" ? this.setAttribute("no-content", "") : this.removeAttribute("no-content"), this.widthWeight > 0 ? this.style.setProperty("--scb-step-width-weight", String(this.widthWeight)) : this.style.removeProperty("--scb-step-width-weight"), this.__syncInteractiveParts();
275
+ }
276
+ __getControl() {
277
+ return this.renderRoot.querySelector(".scb-step-content");
278
+ }
279
+ __syncInteractiveParts() {
280
+ let e = this.__getControl(), t = this.renderRoot.querySelector(".symbol-target"), n = this.renderRoot.querySelector("md-focus-ring"), r = this.renderRoot.querySelector("md-ripple");
281
+ n && e && (n.control = e, n.visible = e.matches(":focus-visible")), r && t && (r.control = t);
282
+ }
283
+ __ensureNativeFocusRing() {
284
+ this.__nativeFocusRingReady || this.__nativeFocusRingPending || (this.__nativeFocusRingPending = !0, e(), customElements.whenDefined("md-focus-ring").then(() => {
285
+ this.__nativeFocusRingPending = !1, this.__nativeFocusRingReady = !0, this.toggleAttribute("data-native-focus-ring-ready", !0), this.requestUpdate(), this.updateComplete.then(() => this.__syncInteractiveParts());
286
+ }));
198
287
  }
199
288
  handleKeyDown(e) {
200
289
  e.key === "Enter" || e.key === " " ? (e.preventDefault(), this.dispatchEvent(new MouseEvent("click", {
@@ -214,27 +303,30 @@ var s = class extends n {
214
303
  })), e.preventDefault());
215
304
  }
216
305
  render() {
217
- let t = this.active ? "step" : void 0, n = this.label ? `${this.label}${this.subLabel ? ": " + this.subLabel : ""}` : `Steg ${this.number || ""}`.trim();
306
+ let e = this.active ? "step" : void 0, t = this.label ? `${this.label}${this.subLabel ? ": " + this.subLabel : ""}` : `Steg ${this.number || ""}`.trim();
218
307
  switch (this.symbolVariant) {
219
308
  case "icon": return i`
220
309
  <div
221
310
  class="scb-step-content"
222
311
  tabindex="0"
223
312
  role="button"
224
- aria-current=${t}
225
- aria-label=${n}
313
+ aria-current=${e}
314
+ aria-label=${t}
226
315
  @keydown=${this.handleKeyDown}
227
- @focusin=${e}
316
+ @focusin=${this.__onFocusIn}
317
+ @focusout=${this.__onFocusOut}
228
318
  >
229
- <md-ripple></md-ripple>
230
- <div class="symbol">
231
- ${this.completed && this.changeOnCompleted ? i`<md-icon>check</md-icon>` : i`<md-icon>${this.icon}</md-icon>`}
232
- </div>
319
+ <span class="symbol-target">
320
+ <md-ripple></md-ripple>
321
+ <div class="symbol">
322
+ ${this.completed && this.changeOnCompleted ? i`<md-icon>check</md-icon>` : i`<md-icon>${this.icon}</md-icon>`}
323
+ </div>
324
+ <md-focus-ring></md-focus-ring>
325
+ </span>
233
326
  <div class="content">
234
327
  <div class="label" data-label="${this.label}"><span class="label-text">${this.label}</span></div>
235
328
  <div class="sub-label" data-label="${this.subLabel}"><span class="sub-label-text">${this.subLabel}</span></div>
236
329
  </div>
237
- <md-focus-ring></md-focus-ring>
238
330
  </div>
239
331
  `;
240
332
  case "marker": return i`
@@ -242,20 +334,23 @@ var s = class extends n {
242
334
  class="scb-step-content"
243
335
  tabindex="0"
244
336
  role="button"
245
- aria-current=${t}
246
- aria-label=${n}
337
+ aria-current=${e}
338
+ aria-label=${t}
247
339
  @keydown=${this.handleKeyDown}
248
- @focusin=${e}
340
+ @focusin=${this.__onFocusIn}
341
+ @focusout=${this.__onFocusOut}
249
342
  >
250
- <md-ripple></md-ripple>
251
- <div class="symbol">
252
- ${this.completed && this.changeOnCompleted ? i`<md-icon>check</md-icon>` : i``}
253
- </div>
343
+ <span class="symbol-target">
344
+ <md-ripple></md-ripple>
345
+ <div class="symbol">
346
+ ${this.completed && this.changeOnCompleted ? i`<md-icon>check</md-icon>` : i``}
347
+ </div>
348
+ <md-focus-ring></md-focus-ring>
349
+ </span>
254
350
  <div class="content">
255
351
  <div class="label" data-label="${this.label}"><span class="label-text">${this.label}</span></div>
256
352
  <div class="sub-label" data-label="${this.subLabel}"><span class="sub-label-text">${this.subLabel}</span></div>
257
353
  </div>
258
- <md-focus-ring></md-focus-ring>
259
354
  </div>
260
355
  `;
261
356
  default: return i`
@@ -263,20 +358,23 @@ var s = class extends n {
263
358
  class="scb-step-content"
264
359
  tabindex="0"
265
360
  role="button"
266
- aria-current=${t}
267
- aria-label=${n}
361
+ aria-current=${e}
362
+ aria-label=${t}
268
363
  @keydown=${this.handleKeyDown}
269
- @focusin=${e}
364
+ @focusin=${this.__onFocusIn}
365
+ @focusout=${this.__onFocusOut}
270
366
  >
271
- <md-ripple></md-ripple>
272
- <div class="symbol">
273
- ${this.completed && this.changeOnCompleted ? i`<md-icon>check</md-icon>` : i`<span>${this.number}</span>`}
274
- </div>
367
+ <span class="symbol-target">
368
+ <md-ripple></md-ripple>
369
+ <div class="symbol">
370
+ ${this.completed && this.changeOnCompleted ? i`<md-icon>check</md-icon>` : i`<span>${this.number}</span>`}
371
+ </div>
372
+ <md-focus-ring></md-focus-ring>
373
+ </span>
275
374
  <div class="content">
276
375
  <div class="label" data-label="${this.label}"><span class="label-text">${this.label}</span></div>
277
376
  <div class="sub-label" data-label="${this.subLabel}"><span class="sub-label-text">${this.subLabel}</span></div>
278
377
  </div>
279
- <md-focus-ring></md-focus-ring>
280
378
  </div>
281
379
  `;
282
380
  }
package/scb-stepper/scb-stepper.js CHANGED
@@ -5,7 +5,7 @@ import { customElement as i, property as a } from "lit/decorators.js";
5
5
  //#region src/scb-components/scb-stepper/scb-stepper.ts
6
6
  var o = class extends t {
7
7
  constructor(...e) {
8
- super(...e), this.type = "", this.label = "", this.changeOnCompleted = !1, this.variant = "horizontal", this.symbolVariant = "number", this.spacing = void 0, this.spacingTop = void 0, this.spacingBottom = void 0, this.spacingLeft = void 0, this.spacingRight = void 0, this.activeIndex = 0, this.#t = 0, this._onKeyNav = (e) => {
8
+ super(...e), this.type = "", this.label = "", this.changeOnCompleted = !1, this.variant = "horizontal", this.symbolVariant = "number", this.size = "medium", this.spacing = void 0, this.spacingTop = void 0, this.spacingBottom = void 0, this.spacingLeft = void 0, this.spacingRight = void 0, this.activeIndex = 0, this.#t = 0, this._onKeyNav = (e) => {
9
9
  let t = this._getSteps(), n = this.activeIndex, r = n;
10
10
  e.detail.key === "ArrowRight" || e.detail.key === "ArrowDown" ? r = n < t.length - 1 ? n + 1 : 0 : e.detail.key === "ArrowLeft" || e.detail.key === "ArrowUp" ? r = n > 0 ? n - 1 : t.length - 1 : e.detail.key === "Home" ? r = 0 : e.detail.key === "End" && (r = t.length - 1), r !== n && (this._onStepClick(r), setTimeout(() => {
11
11
  let e = t[r].shadowRoot?.querySelector(".scb-step-content");
@@ -32,7 +32,19 @@ var o = class extends t {
32
32
  --scb-stepper-height: 100%;
33
33
  --scb-stepper-step-count: 1;
34
34
  --scb-stepper-connector-gap: var(--spacing-2);
35
- --scb-stepper-symbol-size: var(--icon-size-medium);
35
+ --scb-stepper-step-padding-block: var(--spacing-2);
36
+ --scb-stepper-step-padding-inline: var(--spacing-4);
37
+ --scb-stepper-vertical-step-padding: var(--spacing-4);
38
+ --scb-stepper-vertical-gap: var(--spacing-8);
39
+ --scb-stepper-symbol-size: calc(
40
+ var(--md-sys-typescale-label-small-line-height) +
41
+ var(--spacing-5) -
42
+ var(--spacing-1) +
43
+ var(--spacing-5) -
44
+ var(--spacing-1)
45
+ );
46
+ --scb-stepper-symbol-state-size: calc(var(--scb-stepper-symbol-size) + var(--spacing-3) + var(--spacing-3));
47
+ --scb-stepper-symbol-icon-size: var(--icon-size-small, 20px);
36
48
  display: block;
37
49
  padding: var(--spacing-5) 0;
38
50
  width: 100%;
@@ -46,6 +58,41 @@ var o = class extends t {
46
58
  margin-inline-start: var(--scb-stepper-spacing-inline-start, 0);
47
59
  margin-inline-end: var(--scb-stepper-spacing-inline-end, 0);
48
60
  }
61
+
62
+ :host([size='extra-small']) {
63
+ --scb-stepper-symbol-size: calc(
64
+ var(--md-sys-typescale-label-small-line-height) +
65
+ var(--spacing-3) -
66
+ var(--spacing-1) +
67
+ var(--spacing-3) -
68
+ var(--spacing-1)
69
+ );
70
+ --scb-stepper-symbol-state-size: calc(var(--scb-stepper-symbol-size) + var(--spacing-3) + var(--spacing-3));
71
+ --scb-stepper-symbol-icon-size: var(--icon-size-small, 20px);
72
+ }
73
+
74
+ :host([size='small']) {
75
+ --scb-stepper-symbol-size: calc(
76
+ var(--md-sys-typescale-label-small-line-height) +
77
+ var(--spacing-4) -
78
+ var(--spacing-1) +
79
+ var(--spacing-4) -
80
+ var(--spacing-1)
81
+ );
82
+ --scb-stepper-symbol-state-size: calc(var(--scb-stepper-symbol-size) + var(--spacing-3) + var(--spacing-3));
83
+ --scb-stepper-symbol-icon-size: var(--icon-size-small, 20px);
84
+ }
85
+
86
+ :host([size='large']) {
87
+ --scb-stepper-symbol-size: calc(
88
+ var(--md-sys-typescale-label-medium-line-height) +
89
+ var(--spacing-5) +
90
+ var(--spacing-5)
91
+ );
92
+ --scb-stepper-symbol-state-size: calc(var(--scb-stepper-symbol-size) + var(--spacing-3) + var(--spacing-3));
93
+ --scb-stepper-symbol-icon-size: var(--icon-size-medium, 24px);
94
+ }
95
+
49
96
  .steps {
50
97
  display: flex;
51
98
  flex-direction: row;
@@ -58,11 +105,13 @@ var o = class extends t {
58
105
  }
59
106
  :host([variant='vertical']) .steps {
60
107
  flex-direction: column;
61
- gap: var(--spacing-8);
108
+ gap: var(--scb-stepper-vertical-gap);
62
109
  }
63
110
 
64
111
  :host([symbol-variant='marker']) {
65
112
  --scb-stepper-symbol-size: 16px;
113
+ --scb-stepper-symbol-state-size: calc(16px + var(--spacing-3) + var(--spacing-3));
114
+ --scb-stepper-symbol-icon-size: 16px;
66
115
  }
67
116
  ::slotted(scb-step) {
68
117
  position: relative;
@@ -83,7 +132,7 @@ var o = class extends t {
83
132
  :host([variant='horizontal']) ::slotted(scb-step)::after {
84
133
  content: '';
85
134
  position: absolute;
86
- top: calc(var(--spacing-4) + (var(--scb-stepper-symbol-size) / 2));
135
+ top: calc(var(--scb-stepper-step-padding-block) + (var(--scb-stepper-symbol-state-size) / 2));
87
136
  height: 1px;
88
137
  background-color: var(--n-70);
89
138
  transition: background-color var(--motion-duration-medium) var(--motion-easing-standard);
@@ -93,11 +142,11 @@ var o = class extends t {
93
142
 
94
143
  :host([variant='horizontal']) ::slotted(scb-step)::before {
95
144
  left: 0;
96
- right: calc(50% + (var(--scb-stepper-symbol-size) / 2) + var(--scb-stepper-connector-gap));
145
+ right: calc(50% + (var(--scb-stepper-symbol-state-size) / 2) + var(--scb-stepper-connector-gap));
97
146
  }
98
147
 
99
148
  :host([variant='horizontal']) ::slotted(scb-step)::after {
100
- left: calc(50% + (var(--scb-stepper-symbol-size) / 2) + var(--scb-stepper-connector-gap));
149
+ left: calc(50% + (var(--scb-stepper-symbol-state-size) / 2) + var(--scb-stepper-connector-gap));
101
150
  right: 0;
102
151
  }
103
152
 
@@ -130,10 +179,23 @@ var o = class extends t {
130
179
  ::slotted(scb-step[variant='vertical']:not(:last-child))::after {
131
180
  content: '';
132
181
  position: absolute;
133
- left: 28px;
134
- top: 52px;
182
+ left: calc(var(--scb-stepper-vertical-step-padding) + (var(--scb-stepper-symbol-state-size) / 2));
183
+ top: calc(
184
+ var(--scb-stepper-vertical-step-padding) +
185
+ var(--scb-stepper-symbol-state-size) +
186
+ var(--scb-stepper-connector-gap)
187
+ );
135
188
  width: 1px;
136
- height: calc(100% - 16px);
189
+ height: max(
190
+ 0px,
191
+ calc(
192
+ 100% +
193
+ var(--scb-stepper-vertical-gap) -
194
+ var(--scb-stepper-symbol-state-size) -
195
+ var(--scb-stepper-connector-gap) -
196
+ var(--scb-stepper-connector-gap)
197
+ )
198
+ );
137
199
  background-color: var(--n-70);
138
200
  transition: background-color var(--motion-duration-medium) var(--motion-easing-standard);
139
201
  z-index: 0;
@@ -142,10 +204,23 @@ var o = class extends t {
142
204
  ::slotted(scb-step[variant='vertical'][symbol-variant='marker']:not(:last-child))::after {
143
205
  content: '';
144
206
  position: absolute;
145
- left: 20px;
146
- top: 38px;
207
+ left: calc(var(--scb-stepper-vertical-step-padding) + (var(--scb-stepper-symbol-state-size) / 2));
208
+ top: calc(
209
+ var(--scb-stepper-vertical-step-padding) +
210
+ var(--scb-stepper-symbol-state-size) +
211
+ var(--scb-stepper-connector-gap)
212
+ );
147
213
  width: 1px;
148
- height: calc(100% - 2px);
214
+ height: max(
215
+ 0px,
216
+ calc(
217
+ 100% +
218
+ var(--scb-stepper-vertical-gap) -
219
+ var(--scb-stepper-symbol-state-size) -
220
+ var(--scb-stepper-connector-gap) -
221
+ var(--scb-stepper-connector-gap)
222
+ )
223
+ );
149
224
  background-color: var(--n-70);
150
225
  transition: background-color var(--motion-duration-medium) var(--motion-easing-standard);
151
226
  z-index: 0;
@@ -229,7 +304,7 @@ var o = class extends t {
229
304
  this._updateSteps(), this.#n(), this.#i();
230
305
  }
231
306
  updated(e) {
232
- this._updateSteps(), (e.has("variant") || e.has("symbolVariant")) && this.#i(), (e.has("spacing") || e.has("spacingTop") || e.has("spacingBottom") || e.has("spacingLeft") || e.has("spacingRight")) && this.#n();
307
+ this._updateSteps(), (e.has("variant") || e.has("symbolVariant") || e.has("size")) && this.#i(), (e.has("spacing") || e.has("spacingTop") || e.has("spacingBottom") || e.has("spacingLeft") || e.has("spacingRight")) && this.#n();
233
308
  }
234
309
  render() {
235
310
  return r`
@@ -303,6 +378,9 @@ e([a({
303
378
  })], o.prototype, "symbolVariant", void 0), e([a({
304
379
  type: String,
305
380
  reflect: !0
381
+ })], o.prototype, "size", void 0), e([a({
382
+ type: String,
383
+ reflect: !0
306
384
  })], o.prototype, "spacing", void 0), e([a({
307
385
  type: String,
308
386
  attribute: "spacing-top",
package/scb-wc.bundle.js CHANGED
@@ -13953,12 +13953,25 @@
13953
13953
  `}mapSpacingToken(e){if(!e)return;let t=String(e).trim();if(t)return/^\d+$/.test(t)?`var(--spacing-${Math.max(0,Math.min(14,parseInt(t,10)))})`:t}applySpacing(){let e=this.mapSpacingToken(this.spacing),t=this.mapSpacingToken(this.spacingTop)??e,n=this.mapSpacingToken(this.spacingBottom)??e,r=this.mapSpacingToken(this.spacingLeft),i=this.mapSpacingToken(this.spacingRight);t?this.style.setProperty(`--scb-status-pill-spacing-block-start`,t):this.style.removeProperty(`--scb-status-pill-spacing-block-start`),n?this.style.setProperty(`--scb-status-pill-spacing-block-end`,n):this.style.removeProperty(`--scb-status-pill-spacing-block-end`),r?this.style.setProperty(`--scb-status-pill-spacing-inline-start`,r):this.style.removeProperty(`--scb-status-pill-spacing-inline-start`),i?this.style.setProperty(`--scb-status-pill-spacing-inline-end`,i):this.style.removeProperty(`--scb-status-pill-spacing-inline-end`)}connectedCallback(){super.connectedCallback(),this.applySpacing()}updated(e){super.updated(e),(e.has(`spacing`)||e.has(`spacingTop`)||e.has(`spacingBottom`)||e.has(`spacingLeft`)||e.has(`spacingRight`))&&this.applySpacing()}render(){return b`
13954
13954
  ${this.showIcon?this.status===`success`?b`<md-icon>check_circle</md-icon>`:this.status===`warning`?b`<md-icon>warning</md-icon>`:this.status===`error`?b`<md-icon>error</md-icon>`:``:``}
13955
13955
  <span class="label">${this.label}</span>
13956
- `}};N([g({type:String,reflect:!0})],Ef.prototype,`status`,void 0),N([g({type:String,reflect:!0})],Ef.prototype,`label`,void 0),N([g({type:Boolean,attribute:`show-icon`,reflect:!0})],Ef.prototype,`showIcon`,void 0),N([g({type:String,reflect:!0})],Ef.prototype,`spacing`,void 0),N([g({type:String,attribute:`spacing-top`,reflect:!0})],Ef.prototype,`spacingTop`,void 0),N([g({type:String,attribute:`spacing-bottom`,reflect:!0})],Ef.prototype,`spacingBottom`,void 0),N([g({type:String,attribute:`spacing-left`,reflect:!0})],Ef.prototype,`spacingLeft`,void 0),N([g({type:String,attribute:`spacing-right`,reflect:!0})],Ef.prototype,`spacingRight`,void 0),Ef=N([a(`scb-status-pill`)],Ef),C(),y(),O(),T(),M(),P();var Df=class extends S{constructor(...e){super(...e),this.label=``,this.subLabel=``,this.symbolVariant=`number`,this.number=0,this.active=!1,this.completed=!1,this.changeOnCompleted=!1,this.islast=!1,this.variant=`horizontal`,this.widthWeight=1,this.icon=``}static{this.styles=p`
13956
+ `}};N([g({type:String,reflect:!0})],Ef.prototype,`status`,void 0),N([g({type:String,reflect:!0})],Ef.prototype,`label`,void 0),N([g({type:Boolean,attribute:`show-icon`,reflect:!0})],Ef.prototype,`showIcon`,void 0),N([g({type:String,reflect:!0})],Ef.prototype,`spacing`,void 0),N([g({type:String,attribute:`spacing-top`,reflect:!0})],Ef.prototype,`spacingTop`,void 0),N([g({type:String,attribute:`spacing-bottom`,reflect:!0})],Ef.prototype,`spacingBottom`,void 0),N([g({type:String,attribute:`spacing-left`,reflect:!0})],Ef.prototype,`spacingLeft`,void 0),N([g({type:String,attribute:`spacing-right`,reflect:!0})],Ef.prototype,`spacingRight`,void 0),Ef=N([a(`scb-status-pill`)],Ef),C(),y(),O(),T(),M(),P();var Df=class extends S{constructor(...e){super(...e),this.label=``,this.subLabel=``,this.symbolVariant=`number`,this.number=0,this.active=!1,this.completed=!1,this.changeOnCompleted=!1,this.islast=!1,this.variant=`horizontal`,this.widthWeight=1,this.icon=``,this.__nativeFocusRingReady=!1,this.__nativeFocusRingPending=!1,this.__onFocusIn=e=>{let t=e.composedPath()[0];t instanceof HTMLElement&&t.matches(`:focus-visible`)&&this.__ensureNativeFocusRing()},this.__onFocusOut=()=>{this.__syncInteractiveParts()}}static{this.styles=p`
13957
13957
  :host {
13958
13958
  font-family: var(--brand-font);
13959
13959
  --scb-step-slide-from-x: 0px;
13960
13960
  --scb-step-slide-from-y: 0px;
13961
13961
  --scb-step-label-active-weight: 600;
13962
+ --scb-stepper-step-padding-block: var(--spacing-2);
13963
+ --scb-stepper-step-padding-inline: var(--spacing-4);
13964
+ --scb-stepper-vertical-step-padding: var(--spacing-4);
13965
+ --scb-stepper-focus-offset: var(--spacing-1, 2px);
13966
+ --scb-step-local-symbol-size: calc(
13967
+ var(--md-sys-typescale-label-small-line-height) +
13968
+ var(--spacing-5) -
13969
+ var(--spacing-1) +
13970
+ var(--spacing-5) -
13971
+ var(--spacing-1)
13972
+ );
13973
+ --scb-step-local-symbol-state-size: calc(var(--scb-step-local-symbol-size) + var(--spacing-3) + var(--spacing-3));
13974
+ --scb-step-local-symbol-icon-size: var(--icon-size-small, 20px);
13962
13975
  }
13963
13976
  .scb-step-content {
13964
13977
  width: fit-content;
@@ -13969,25 +13982,64 @@
13969
13982
  flex-direction: column;
13970
13983
  align-items: center;
13971
13984
  position: relative;
13985
+ z-index: 0;
13972
13986
  margin-inline: auto;
13973
13987
  cursor: pointer;
13974
13988
  background: none;
13975
13989
  box-sizing: border-box;
13976
13990
  user-select: none;
13977
- padding-block: var(--spacing-1);
13978
- padding-inline: var(--spacing-4);
13991
+ padding-block: var(--scb-stepper-step-padding-block);
13992
+ padding-inline: var(--scb-stepper-step-padding-inline);
13993
+ }
13994
+
13995
+ .scb-step-content:focus {
13996
+ outline: none;
13997
+ box-shadow: none;
13979
13998
  }
13980
- .scb-step-content:focus,
13981
- .scb-step-content:focus-visible {
13982
- outline: none ;
13983
- box-shadow: none ;
13999
+
14000
+ :host(:not([data-native-focus-ring-ready])) .scb-step-content:focus-visible {
14001
+ outline: none;
14002
+ }
14003
+
14004
+ :host(:not([data-native-focus-ring-ready])) .scb-step-content:focus-visible .symbol-target {
14005
+ outline: var(--stroke-border-m, 2px) solid var(--md-sys-color-primary);
14006
+ outline-offset: var(--scb-stepper-focus-offset);
14007
+ }
14008
+ .symbol-target {
14009
+ inline-size: var(--scb-stepper-symbol-state-size, var(--scb-step-local-symbol-state-size));
14010
+ block-size: var(--scb-stepper-symbol-state-size, var(--scb-step-local-symbol-state-size));
14011
+ flex: 0 0 auto;
14012
+ display: flex;
14013
+ align-items: center;
14014
+ justify-content: center;
14015
+ position: relative;
14016
+ z-index: 1;
14017
+ border-radius: var(--md-sys-shape-corner-full);
14018
+ }
14019
+ .symbol-target::before {
14020
+ content: '';
14021
+ position: absolute;
14022
+ inset: 0;
14023
+ z-index: -1;
14024
+ border-radius: inherit;
14025
+ background: currentColor;
14026
+ opacity: 0;
14027
+ pointer-events: none;
14028
+ transition: opacity var(--motion-duration-short, 150ms) var(--motion-easing-standard, ease);
14029
+ }
14030
+ .scb-step-content:hover .symbol-target::before {
14031
+ opacity: var(--md-sys-state-hover-state-layer-opacity, 0.08);
14032
+ }
14033
+ .scb-step-content:active .symbol-target::before {
14034
+ opacity: var(--md-sys-state-pressed-state-layer-opacity, 0.12);
13984
14035
  }
13985
14036
  .symbol {
13986
14037
  background-color: var(--md-sys-color-outline-variant);
13987
14038
  color: var(--md-sys-color-on-primary);
13988
14039
  border-radius: var(--md-sys-shape-corner-full);
13989
- min-width: var(--icon-size-medium);
13990
- height: var(--icon-size-medium);
14040
+ inline-size: var(--scb-stepper-symbol-size, var(--scb-step-local-symbol-size));
14041
+ block-size: var(--scb-stepper-symbol-size, var(--scb-step-local-symbol-size));
14042
+ min-inline-size: var(--scb-stepper-symbol-size, var(--scb-step-local-symbol-size));
13991
14043
  display: flex;
13992
14044
  align-items: center;
13993
14045
  justify-content: center;
@@ -14002,13 +14054,25 @@
14002
14054
  background-color var(--motion-duration-short) var(--motion-easing-standard),
14003
14055
  color var(--motion-duration-short) var(--motion-easing-standard),
14004
14056
  transform var(--motion-duration-short) var(--motion-easing-emphasized);
14005
- padding: var(--spacing-3);
14006
14057
  }
14007
- md-focus-ring {
14008
- border-radius: var(--md-sys-shape-corner-small);
14058
+ .symbol-target md-focus-ring {
14059
+ position: absolute;
14060
+ pointer-events: none;
14061
+ --md-focus-ring-color: var(--md-sys-color-primary);
14062
+ --md-focus-ring-outward-offset: var(--scb-stepper-focus-offset);
14063
+ --md-focus-ring-shape: var(--md-sys-shape-corner-full);
14064
+ }
14065
+ .symbol-target md-ripple {
14066
+ position: absolute;
14067
+ inset: 0;
14068
+ border-radius: inherit;
14069
+ pointer-events: none;
14009
14070
  }
14010
14071
  md-icon {
14011
- font-size: 20px;
14072
+ inline-size: var(--scb-stepper-symbol-icon-size, var(--scb-step-local-symbol-icon-size));
14073
+ block-size: var(--scb-stepper-symbol-icon-size, var(--scb-step-local-symbol-icon-size));
14074
+ font-size: var(--scb-stepper-symbol-icon-size, var(--scb-step-local-symbol-icon-size));
14075
+ line-height: 1;
14012
14076
  }
14013
14077
  :host([active]) .symbol {
14014
14078
  background-color: var(--md-sys-color-primary);
@@ -14068,6 +14132,8 @@
14068
14132
  flex-direction: column;
14069
14133
  align-items: center;
14070
14134
  min-width: 0;
14135
+ position: relative;
14136
+ z-index: 1;
14071
14137
  will-change: transform, opacity;
14072
14138
  }
14073
14139
  :host([variant="vertical"]) {
@@ -14077,7 +14143,7 @@
14077
14143
  align-items: flex-start;
14078
14144
  gap: var(--spacing-5);
14079
14145
  margin-inline: 0;
14080
- padding: var(--spacing-4);
14146
+ padding: var(--scb-stepper-vertical-step-padding);
14081
14147
  }
14082
14148
  }
14083
14149
  :host([no-content]) {
@@ -14104,15 +14170,21 @@
14104
14170
  align-items: flex-start;
14105
14171
  min-width: 0;
14106
14172
  }
14173
+ :host([symbol-variant="marker"]) {
14174
+ --scb-step-local-symbol-size: 16px;
14175
+ --scb-step-local-symbol-state-size: calc(16px + var(--spacing-3) + var(--spacing-3));
14176
+ --scb-step-local-symbol-icon-size: 16px;
14177
+ }
14107
14178
  :host([symbol-variant="marker"]) .symbol {
14108
- min-width: 16px;
14109
- height: 16px;
14179
+ inline-size: var(--scb-stepper-symbol-size, 16px);
14180
+ block-size: var(--scb-stepper-symbol-size, 16px);
14181
+ min-inline-size: var(--scb-stepper-symbol-size, 16px);
14110
14182
  }
14111
14183
  :host([symbol-variant="marker"][completed][change-on-completed]) .symbol {
14112
14184
  background-color: transparent;
14113
14185
  color: var(--md-sys-color-primary);
14114
14186
  md-icon{
14115
- font-size: var(--icon-size-small);
14187
+ font-size: var(--scb-stepper-symbol-icon-size, 16px);
14116
14188
  }
14117
14189
  }
14118
14190
 
@@ -14134,7 +14206,7 @@
14134
14206
  animation-name: var(--motion-keyframe-pulse, scb-kf-pulse);
14135
14207
  }
14136
14208
 
14137
- `}updated(){!this.subLabel||this.subLabel.trim()===``?this.setAttribute(`no-content`,``):this.removeAttribute(`no-content`),this.widthWeight>0?this.style.setProperty(`--scb-step-width-weight`,String(this.widthWeight)):this.style.removeProperty(`--scb-step-width-weight`)}handleKeyDown(e){e.key===`Enter`||e.key===` `?(e.preventDefault(),this.dispatchEvent(new MouseEvent(`click`,{bubbles:!0,composed:!0}))):[`ArrowRight`,`ArrowLeft`,`ArrowDown`,`ArrowUp`,`Home`,`End`].includes(e.key)&&(this.dispatchEvent(new CustomEvent(`scb-stepper-keynav`,{detail:{key:e.key},bubbles:!0,composed:!0})),e.preventDefault())}render(){let e=this.active?`step`:void 0,t=this.label?`${this.label}${this.subLabel?`: `+this.subLabel:``}`:`Steg ${this.number||``}`.trim();switch(this.symbolVariant){case`icon`:return b`
14209
+ `}updated(){!this.subLabel||this.subLabel.trim()===``?this.setAttribute(`no-content`,``):this.removeAttribute(`no-content`),this.widthWeight>0?this.style.setProperty(`--scb-step-width-weight`,String(this.widthWeight)):this.style.removeProperty(`--scb-step-width-weight`),this.__syncInteractiveParts()}__getControl(){return this.renderRoot.querySelector(`.scb-step-content`)}__syncInteractiveParts(){let e=this.__getControl(),t=this.renderRoot.querySelector(`.symbol-target`),n=this.renderRoot.querySelector(`md-focus-ring`),r=this.renderRoot.querySelector(`md-ripple`);n&&e&&(n.control=e,n.visible=e.matches(`:focus-visible`)),r&&t&&(r.control=t)}__ensureNativeFocusRing(){this.__nativeFocusRingReady||this.__nativeFocusRingPending||(this.__nativeFocusRingPending=!0,rc(),customElements.whenDefined(`md-focus-ring`).then(()=>{this.__nativeFocusRingPending=!1,this.__nativeFocusRingReady=!0,this.toggleAttribute(`data-native-focus-ring-ready`,!0),this.requestUpdate(),this.updateComplete.then(()=>this.__syncInteractiveParts())}))}handleKeyDown(e){e.key===`Enter`||e.key===` `?(e.preventDefault(),this.dispatchEvent(new MouseEvent(`click`,{bubbles:!0,composed:!0}))):[`ArrowRight`,`ArrowLeft`,`ArrowDown`,`ArrowUp`,`Home`,`End`].includes(e.key)&&(this.dispatchEvent(new CustomEvent(`scb-stepper-keynav`,{detail:{key:e.key},bubbles:!0,composed:!0})),e.preventDefault())}render(){let e=this.active?`step`:void 0,t=this.label?`${this.label}${this.subLabel?`: `+this.subLabel:``}`:`Steg ${this.number||``}`.trim();switch(this.symbolVariant){case`icon`:return b`
14138
14210
  <div
14139
14211
  class="scb-step-content"
14140
14212
  tabindex="0"
@@ -14142,17 +14214,20 @@
14142
14214
  aria-current=${e}
14143
14215
  aria-label=${t}
14144
14216
  @keydown=${this.handleKeyDown}
14145
- @focusin=${ic}
14217
+ @focusin=${this.__onFocusIn}
14218
+ @focusout=${this.__onFocusOut}
14146
14219
  >
14147
- <md-ripple></md-ripple>
14148
- <div class="symbol">
14149
- ${this.completed&&this.changeOnCompleted?b`<md-icon>check</md-icon>`:b`<md-icon>${this.icon}</md-icon>`}
14150
- </div>
14220
+ <span class="symbol-target">
14221
+ <md-ripple></md-ripple>
14222
+ <div class="symbol">
14223
+ ${this.completed&&this.changeOnCompleted?b`<md-icon>check</md-icon>`:b`<md-icon>${this.icon}</md-icon>`}
14224
+ </div>
14225
+ <md-focus-ring></md-focus-ring>
14226
+ </span>
14151
14227
  <div class="content">
14152
14228
  <div class="label" data-label="${this.label}"><span class="label-text">${this.label}</span></div>
14153
14229
  <div class="sub-label" data-label="${this.subLabel}"><span class="sub-label-text">${this.subLabel}</span></div>
14154
14230
  </div>
14155
- <md-focus-ring></md-focus-ring>
14156
14231
  </div>
14157
14232
  `;case`marker`:return b`
14158
14233
  <div
@@ -14162,17 +14237,20 @@
14162
14237
  aria-current=${e}
14163
14238
  aria-label=${t}
14164
14239
  @keydown=${this.handleKeyDown}
14165
- @focusin=${ic}
14240
+ @focusin=${this.__onFocusIn}
14241
+ @focusout=${this.__onFocusOut}
14166
14242
  >
14167
- <md-ripple></md-ripple>
14168
- <div class="symbol">
14169
- ${this.completed&&this.changeOnCompleted?b`<md-icon>check</md-icon>`:b``}
14170
- </div>
14243
+ <span class="symbol-target">
14244
+ <md-ripple></md-ripple>
14245
+ <div class="symbol">
14246
+ ${this.completed&&this.changeOnCompleted?b`<md-icon>check</md-icon>`:b``}
14247
+ </div>
14248
+ <md-focus-ring></md-focus-ring>
14249
+ </span>
14171
14250
  <div class="content">
14172
14251
  <div class="label" data-label="${this.label}"><span class="label-text">${this.label}</span></div>
14173
14252
  <div class="sub-label" data-label="${this.subLabel}"><span class="sub-label-text">${this.subLabel}</span></div>
14174
14253
  </div>
14175
- <md-focus-ring></md-focus-ring>
14176
14254
  </div>
14177
14255
  `;default:return b`
14178
14256
  <div
@@ -14182,25 +14260,40 @@
14182
14260
  aria-current=${e}
14183
14261
  aria-label=${t}
14184
14262
  @keydown=${this.handleKeyDown}
14185
- @focusin=${ic}
14263
+ @focusin=${this.__onFocusIn}
14264
+ @focusout=${this.__onFocusOut}
14186
14265
  >
14187
- <md-ripple></md-ripple>
14188
- <div class="symbol">
14189
- ${this.completed&&this.changeOnCompleted?b`<md-icon>check</md-icon>`:b`<span>${this.number}</span>`}
14190
- </div>
14266
+ <span class="symbol-target">
14267
+ <md-ripple></md-ripple>
14268
+ <div class="symbol">
14269
+ ${this.completed&&this.changeOnCompleted?b`<md-icon>check</md-icon>`:b`<span>${this.number}</span>`}
14270
+ </div>
14271
+ <md-focus-ring></md-focus-ring>
14272
+ </span>
14191
14273
  <div class="content">
14192
14274
  <div class="label" data-label="${this.label}"><span class="label-text">${this.label}</span></div>
14193
14275
  <div class="sub-label" data-label="${this.subLabel}"><span class="sub-label-text">${this.subLabel}</span></div>
14194
14276
  </div>
14195
- <md-focus-ring></md-focus-ring>
14196
14277
  </div>
14197
- `}}};N([g({type:String,reflect:!0})],Df.prototype,`label`,void 0),N([g({type:String,reflect:!0,attribute:`sub-label`})],Df.prototype,`subLabel`,void 0),N([g({type:String,reflect:!0,attribute:`symbol-variant`})],Df.prototype,`symbolVariant`,void 0),N([g({type:Number,reflect:!0})],Df.prototype,`number`,void 0),N([g({type:Boolean,reflect:!0})],Df.prototype,`active`,void 0),N([g({type:Boolean,reflect:!0})],Df.prototype,`completed`,void 0),N([g({type:Boolean,reflect:!0,attribute:`change-on-completed`})],Df.prototype,`changeOnCompleted`,void 0),N([g({type:Boolean,reflect:!0})],Df.prototype,`islast`,void 0),N([g({type:String,reflect:!0})],Df.prototype,`variant`,void 0),N([g({type:Number,reflect:!0,attribute:`width-weight`})],Df.prototype,`widthWeight`,void 0),N([g({type:String})],Df.prototype,`icon`,void 0),Df=N([a(`scb-step`)],Df),C(),y(),P();var Of=class extends S{constructor(...e){super(...e),this.type=``,this.label=``,this.changeOnCompleted=!1,this.variant=`horizontal`,this.symbolVariant=`number`,this.spacing=void 0,this.spacingTop=void 0,this.spacingBottom=void 0,this.spacingLeft=void 0,this.spacingRight=void 0,this.activeIndex=0,this.#t=0,this._onKeyNav=e=>{let t=this._getSteps(),n=this.activeIndex,r=n;e.detail.key===`ArrowRight`||e.detail.key===`ArrowDown`?r=n<t.length-1?n+1:0:e.detail.key===`ArrowLeft`||e.detail.key===`ArrowUp`?r=n>0?n-1:t.length-1:e.detail.key===`Home`?r=0:e.detail.key===`End`&&(r=t.length-1),r!==n&&(this._onStepClick(r),setTimeout(()=>{let e=t[r].shadowRoot?.querySelector(`.scb-step-content`);e&&`focus`in e&&typeof e.focus==`function`&&e.focus()},0))},this._onStepContainerClick=e=>{let t=this._getSteps(),n=e.composedPath(),r=t.findIndex(e=>n.includes(e));r!==-1&&this._onStepClick(r)},this._onSlotChange=()=>{let e=this._getSteps();if(e.length===0){this.activeIndex=0;return}this.activeIndex>e.length-1?this.activeIndex=e.length-1:this.activeIndex<0&&(this.activeIndex=0),this._updateSteps(),this.#i()}}#e;#t;static{this.styles=p`
14278
+ `}}};N([g({type:String,reflect:!0})],Df.prototype,`label`,void 0),N([g({type:String,reflect:!0,attribute:`sub-label`})],Df.prototype,`subLabel`,void 0),N([g({type:String,reflect:!0,attribute:`symbol-variant`})],Df.prototype,`symbolVariant`,void 0),N([g({type:Number,reflect:!0})],Df.prototype,`number`,void 0),N([g({type:Boolean,reflect:!0})],Df.prototype,`active`,void 0),N([g({type:Boolean,reflect:!0})],Df.prototype,`completed`,void 0),N([g({type:Boolean,reflect:!0,attribute:`change-on-completed`})],Df.prototype,`changeOnCompleted`,void 0),N([g({type:Boolean,reflect:!0})],Df.prototype,`islast`,void 0),N([g({type:String,reflect:!0})],Df.prototype,`variant`,void 0),N([g({type:Number,reflect:!0,attribute:`width-weight`})],Df.prototype,`widthWeight`,void 0),N([g({type:String})],Df.prototype,`icon`,void 0),Df=N([a(`scb-step`)],Df),C(),y(),P();var Of=class extends S{constructor(...e){super(...e),this.type=``,this.label=``,this.changeOnCompleted=!1,this.variant=`horizontal`,this.symbolVariant=`number`,this.size=`medium`,this.spacing=void 0,this.spacingTop=void 0,this.spacingBottom=void 0,this.spacingLeft=void 0,this.spacingRight=void 0,this.activeIndex=0,this.#t=0,this._onKeyNav=e=>{let t=this._getSteps(),n=this.activeIndex,r=n;e.detail.key===`ArrowRight`||e.detail.key===`ArrowDown`?r=n<t.length-1?n+1:0:e.detail.key===`ArrowLeft`||e.detail.key===`ArrowUp`?r=n>0?n-1:t.length-1:e.detail.key===`Home`?r=0:e.detail.key===`End`&&(r=t.length-1),r!==n&&(this._onStepClick(r),setTimeout(()=>{let e=t[r].shadowRoot?.querySelector(`.scb-step-content`);e&&`focus`in e&&typeof e.focus==`function`&&e.focus()},0))},this._onStepContainerClick=e=>{let t=this._getSteps(),n=e.composedPath(),r=t.findIndex(e=>n.includes(e));r!==-1&&this._onStepClick(r)},this._onSlotChange=()=>{let e=this._getSteps();if(e.length===0){this.activeIndex=0;return}this.activeIndex>e.length-1?this.activeIndex=e.length-1:this.activeIndex<0&&(this.activeIndex=0),this._updateSteps(),this.#i()}}#e;#t;static{this.styles=p`
14198
14279
  :host {
14199
14280
  --scb-stepper-width: 100%;
14200
14281
  --scb-stepper-height: 100%;
14201
14282
  --scb-stepper-step-count: 1;
14202
14283
  --scb-stepper-connector-gap: var(--spacing-2);
14203
- --scb-stepper-symbol-size: var(--icon-size-medium);
14284
+ --scb-stepper-step-padding-block: var(--spacing-2);
14285
+ --scb-stepper-step-padding-inline: var(--spacing-4);
14286
+ --scb-stepper-vertical-step-padding: var(--spacing-4);
14287
+ --scb-stepper-vertical-gap: var(--spacing-8);
14288
+ --scb-stepper-symbol-size: calc(
14289
+ var(--md-sys-typescale-label-small-line-height) +
14290
+ var(--spacing-5) -
14291
+ var(--spacing-1) +
14292
+ var(--spacing-5) -
14293
+ var(--spacing-1)
14294
+ );
14295
+ --scb-stepper-symbol-state-size: calc(var(--scb-stepper-symbol-size) + var(--spacing-3) + var(--spacing-3));
14296
+ --scb-stepper-symbol-icon-size: var(--icon-size-small, 20px);
14204
14297
  display: block;
14205
14298
  padding: var(--spacing-5) 0;
14206
14299
  width: 100%;
@@ -14214,6 +14307,41 @@
14214
14307
  margin-inline-start: var(--scb-stepper-spacing-inline-start, 0);
14215
14308
  margin-inline-end: var(--scb-stepper-spacing-inline-end, 0);
14216
14309
  }
14310
+
14311
+ :host([size='extra-small']) {
14312
+ --scb-stepper-symbol-size: calc(
14313
+ var(--md-sys-typescale-label-small-line-height) +
14314
+ var(--spacing-3) -
14315
+ var(--spacing-1) +
14316
+ var(--spacing-3) -
14317
+ var(--spacing-1)
14318
+ );
14319
+ --scb-stepper-symbol-state-size: calc(var(--scb-stepper-symbol-size) + var(--spacing-3) + var(--spacing-3));
14320
+ --scb-stepper-symbol-icon-size: var(--icon-size-small, 20px);
14321
+ }
14322
+
14323
+ :host([size='small']) {
14324
+ --scb-stepper-symbol-size: calc(
14325
+ var(--md-sys-typescale-label-small-line-height) +
14326
+ var(--spacing-4) -
14327
+ var(--spacing-1) +
14328
+ var(--spacing-4) -
14329
+ var(--spacing-1)
14330
+ );
14331
+ --scb-stepper-symbol-state-size: calc(var(--scb-stepper-symbol-size) + var(--spacing-3) + var(--spacing-3));
14332
+ --scb-stepper-symbol-icon-size: var(--icon-size-small, 20px);
14333
+ }
14334
+
14335
+ :host([size='large']) {
14336
+ --scb-stepper-symbol-size: calc(
14337
+ var(--md-sys-typescale-label-medium-line-height) +
14338
+ var(--spacing-5) +
14339
+ var(--spacing-5)
14340
+ );
14341
+ --scb-stepper-symbol-state-size: calc(var(--scb-stepper-symbol-size) + var(--spacing-3) + var(--spacing-3));
14342
+ --scb-stepper-symbol-icon-size: var(--icon-size-medium, 24px);
14343
+ }
14344
+
14217
14345
  .steps {
14218
14346
  display: flex;
14219
14347
  flex-direction: row;
@@ -14226,11 +14354,13 @@
14226
14354
  }
14227
14355
  :host([variant='vertical']) .steps {
14228
14356
  flex-direction: column;
14229
- gap: var(--spacing-8);
14357
+ gap: var(--scb-stepper-vertical-gap);
14230
14358
  }
14231
14359
 
14232
14360
  :host([symbol-variant='marker']) {
14233
14361
  --scb-stepper-symbol-size: 16px;
14362
+ --scb-stepper-symbol-state-size: calc(16px + var(--spacing-3) + var(--spacing-3));
14363
+ --scb-stepper-symbol-icon-size: 16px;
14234
14364
  }
14235
14365
  ::slotted(scb-step) {
14236
14366
  position: relative;
@@ -14251,7 +14381,7 @@
14251
14381
  :host([variant='horizontal']) ::slotted(scb-step)::after {
14252
14382
  content: '';
14253
14383
  position: absolute;
14254
- top: calc(var(--spacing-4) + (var(--scb-stepper-symbol-size) / 2));
14384
+ top: calc(var(--scb-stepper-step-padding-block) + (var(--scb-stepper-symbol-state-size) / 2));
14255
14385
  height: 1px;
14256
14386
  background-color: var(--n-70);
14257
14387
  transition: background-color var(--motion-duration-medium) var(--motion-easing-standard);
@@ -14261,11 +14391,11 @@
14261
14391
 
14262
14392
  :host([variant='horizontal']) ::slotted(scb-step)::before {
14263
14393
  left: 0;
14264
- right: calc(50% + (var(--scb-stepper-symbol-size) / 2) + var(--scb-stepper-connector-gap));
14394
+ right: calc(50% + (var(--scb-stepper-symbol-state-size) / 2) + var(--scb-stepper-connector-gap));
14265
14395
  }
14266
14396
 
14267
14397
  :host([variant='horizontal']) ::slotted(scb-step)::after {
14268
- left: calc(50% + (var(--scb-stepper-symbol-size) / 2) + var(--scb-stepper-connector-gap));
14398
+ left: calc(50% + (var(--scb-stepper-symbol-state-size) / 2) + var(--scb-stepper-connector-gap));
14269
14399
  right: 0;
14270
14400
  }
14271
14401
 
@@ -14298,10 +14428,23 @@
14298
14428
  ::slotted(scb-step[variant='vertical']:not(:last-child))::after {
14299
14429
  content: '';
14300
14430
  position: absolute;
14301
- left: 28px;
14302
- top: 52px;
14431
+ left: calc(var(--scb-stepper-vertical-step-padding) + (var(--scb-stepper-symbol-state-size) / 2));
14432
+ top: calc(
14433
+ var(--scb-stepper-vertical-step-padding) +
14434
+ var(--scb-stepper-symbol-state-size) +
14435
+ var(--scb-stepper-connector-gap)
14436
+ );
14303
14437
  width: 1px;
14304
- height: calc(100% - 16px);
14438
+ height: max(
14439
+ 0px,
14440
+ calc(
14441
+ 100% +
14442
+ var(--scb-stepper-vertical-gap) -
14443
+ var(--scb-stepper-symbol-state-size) -
14444
+ var(--scb-stepper-connector-gap) -
14445
+ var(--scb-stepper-connector-gap)
14446
+ )
14447
+ );
14305
14448
  background-color: var(--n-70);
14306
14449
  transition: background-color var(--motion-duration-medium) var(--motion-easing-standard);
14307
14450
  z-index: 0;
@@ -14310,10 +14453,23 @@
14310
14453
  ::slotted(scb-step[variant='vertical'][symbol-variant='marker']:not(:last-child))::after {
14311
14454
  content: '';
14312
14455
  position: absolute;
14313
- left: 20px;
14314
- top: 38px;
14456
+ left: calc(var(--scb-stepper-vertical-step-padding) + (var(--scb-stepper-symbol-state-size) / 2));
14457
+ top: calc(
14458
+ var(--scb-stepper-vertical-step-padding) +
14459
+ var(--scb-stepper-symbol-state-size) +
14460
+ var(--scb-stepper-connector-gap)
14461
+ );
14315
14462
  width: 1px;
14316
- height: calc(100% - 2px);
14463
+ height: max(
14464
+ 0px,
14465
+ calc(
14466
+ 100% +
14467
+ var(--scb-stepper-vertical-gap) -
14468
+ var(--scb-stepper-symbol-state-size) -
14469
+ var(--scb-stepper-connector-gap) -
14470
+ var(--scb-stepper-connector-gap)
14471
+ )
14472
+ );
14317
14473
  background-color: var(--n-70);
14318
14474
  transition: background-color var(--motion-duration-medium) var(--motion-easing-standard);
14319
14475
  z-index: 0;
@@ -14322,7 +14478,7 @@
14322
14478
  ::slotted(scb-step[symbol-variant='marker']:not(:first-child))::before {
14323
14479
  top: 20px;
14324
14480
  }
14325
- `}_onStepClick(e){let t=this.activeIndex;this.activeIndex=e,this._updateSteps(),this.dispatchEvent(new CustomEvent(`step-change`,{detail:{index:this.activeIndex,step:this._getSteps()[this.activeIndex]},bubbles:!0,composed:!0})),this.dispatchEvent(new CustomEvent(`stepchange`,{detail:{index:this.activeIndex,step:this._getSteps()[this.activeIndex]},bubbles:!0,composed:!0})),e>t?(this.dispatchEvent(new CustomEvent(`step-next`,{detail:{from:t,to:e,step:this._getSteps()[e]},bubbles:!0,composed:!0})),this.dispatchEvent(new CustomEvent(`stepnext`,{detail:{from:t,to:e,step:this._getSteps()[e]},bubbles:!0,composed:!0}))):e<t&&(this.dispatchEvent(new CustomEvent(`step-prev`,{detail:{from:t,to:e,step:this._getSteps()[e]},bubbles:!0,composed:!0})),this.dispatchEvent(new CustomEvent(`stepprev`,{detail:{from:t,to:e,step:this._getSteps()[e]},bubbles:!0,composed:!0})))}nextStep(){let e=this._getSteps();this.activeIndex<e.length-1&&this._onStepClick(this.activeIndex+1)}prevStep(){this.activeIndex>0&&this._onStepClick(this.activeIndex-1)}getActiveIndex(){return this.activeIndex}_updateSteps(){let e=this._getSteps();this.style.setProperty(`--scb-stepper-step-count`,String(Math.max(1,e.length))),e.forEach((t,n)=>{t.active=n===this.activeIndex,t.completed=n<this.activeIndex,t.islast=!1,t.changeOnCompleted=this.changeOnCompleted,t.number=n+1,t.variant=this.variant,t.symbolVariant=this.symbolVariant,t.setAttribute(`role`,`listitem`),t.setAttribute(`aria-posinset`,String(n+1)),t.setAttribute(`aria-setsize`,String(e.length))}),e.length>0&&(e[e.length-1].islast=!0)}_getSteps(){return Array.from(this.querySelectorAll(`scb-step`))}firstUpdated(e){this._updateSteps(),this.#n(),this.#i()}updated(e){this._updateSteps(),(e.has(`variant`)||e.has(`symbolVariant`))&&this.#i(),(e.has(`spacing`)||e.has(`spacingTop`)||e.has(`spacingBottom`)||e.has(`spacingLeft`)||e.has(`spacingRight`))&&this.#n()}render(){return b`
14481
+ `}_onStepClick(e){let t=this.activeIndex;this.activeIndex=e,this._updateSteps(),this.dispatchEvent(new CustomEvent(`step-change`,{detail:{index:this.activeIndex,step:this._getSteps()[this.activeIndex]},bubbles:!0,composed:!0})),this.dispatchEvent(new CustomEvent(`stepchange`,{detail:{index:this.activeIndex,step:this._getSteps()[this.activeIndex]},bubbles:!0,composed:!0})),e>t?(this.dispatchEvent(new CustomEvent(`step-next`,{detail:{from:t,to:e,step:this._getSteps()[e]},bubbles:!0,composed:!0})),this.dispatchEvent(new CustomEvent(`stepnext`,{detail:{from:t,to:e,step:this._getSteps()[e]},bubbles:!0,composed:!0}))):e<t&&(this.dispatchEvent(new CustomEvent(`step-prev`,{detail:{from:t,to:e,step:this._getSteps()[e]},bubbles:!0,composed:!0})),this.dispatchEvent(new CustomEvent(`stepprev`,{detail:{from:t,to:e,step:this._getSteps()[e]},bubbles:!0,composed:!0})))}nextStep(){let e=this._getSteps();this.activeIndex<e.length-1&&this._onStepClick(this.activeIndex+1)}prevStep(){this.activeIndex>0&&this._onStepClick(this.activeIndex-1)}getActiveIndex(){return this.activeIndex}_updateSteps(){let e=this._getSteps();this.style.setProperty(`--scb-stepper-step-count`,String(Math.max(1,e.length))),e.forEach((t,n)=>{t.active=n===this.activeIndex,t.completed=n<this.activeIndex,t.islast=!1,t.changeOnCompleted=this.changeOnCompleted,t.number=n+1,t.variant=this.variant,t.symbolVariant=this.symbolVariant,t.setAttribute(`role`,`listitem`),t.setAttribute(`aria-posinset`,String(n+1)),t.setAttribute(`aria-setsize`,String(e.length))}),e.length>0&&(e[e.length-1].islast=!0)}_getSteps(){return Array.from(this.querySelectorAll(`scb-step`))}firstUpdated(e){this._updateSteps(),this.#n(),this.#i()}updated(e){this._updateSteps(),(e.has(`variant`)||e.has(`symbolVariant`)||e.has(`size`))&&this.#i(),(e.has(`spacing`)||e.has(`spacingTop`)||e.has(`spacingBottom`)||e.has(`spacingLeft`)||e.has(`spacingRight`))&&this.#n()}render(){return b`
14326
14482
  <div
14327
14483
  class="steps"
14328
14484
  role="list"
@@ -14332,7 +14488,7 @@
14332
14488
  >
14333
14489
  <slot @slotchange=${this._onSlotChange}></slot>
14334
14490
  </div>
14335
- `}connectedCallback(){super.connectedCallback(),typeof ResizeObserver<`u`&&(this.#e=new ResizeObserver(()=>{this.#i()}),this.#e.observe(this))}disconnectedCallback(){this.#e&&=(this.#e.disconnect(),void 0),this.#t&&=(cancelAnimationFrame(this.#t),0),super.disconnectedCallback()}#n(){let e=this.#r(this.spacing),t=this.#r(this.spacingTop)??e,n=this.#r(this.spacingBottom)??e,r=this.#r(this.spacingLeft),i=this.#r(this.spacingRight);t?this.style.setProperty(`--scb-stepper-spacing-block-start`,t):this.style.removeProperty(`--scb-stepper-spacing-block-start`),n?this.style.setProperty(`--scb-stepper-spacing-block-end`,n):this.style.removeProperty(`--scb-stepper-spacing-block-end`),r?this.style.setProperty(`--scb-stepper-spacing-inline-start`,r):this.style.removeProperty(`--scb-stepper-spacing-inline-start`),i?this.style.setProperty(`--scb-stepper-spacing-inline-end`,i):this.style.removeProperty(`--scb-stepper-spacing-inline-end`)}#r(e){if(!e)return;let t=String(e).trim();if(t)return/^\d+$/.test(t)?`var(--spacing-${Math.max(0,Math.min(14,parseInt(t,10)))})`:t}#i(){this.#t||=requestAnimationFrame(()=>{this.#t=0,this.#a()})}#a(){let e=this._getSteps();e.length!==0&&e.forEach(e=>{let t=e.shadowRoot;if(!t)return;let n=t.querySelector(`.label`),r=t.querySelector(`.scb-step-content`);if(!n)return;if(this.variant!==`horizontal`){n.style.removeProperty(`max-width`),n.style.removeProperty(`white-space`),n.style.removeProperty(`word-break`),n.style.removeProperty(`overflow-wrap`);return}n.style.maxWidth=`none`,n.style.whiteSpace=`nowrap`,n.style.wordBreak=`normal`,n.style.overflowWrap=`normal`;let i=r?.clientWidth??e.clientWidth;i>0&&n.scrollWidth>i&&(n.style.maxWidth=`100%`,n.style.whiteSpace=`normal`,n.style.wordBreak=`break-word`,n.style.overflowWrap=`anywhere`)})}};N([g({type:String,reflect:!0})],Of.prototype,`type`,void 0),N([g({type:String,reflect:!0})],Of.prototype,`label`,void 0),N([g({type:Boolean,reflect:!0,attribute:`change-on-completed`})],Of.prototype,`changeOnCompleted`,void 0),N([g({type:String,reflect:!0})],Of.prototype,`variant`,void 0),N([g({type:String,reflect:!0,attribute:`symbol-variant`})],Of.prototype,`symbolVariant`,void 0),N([g({type:String,reflect:!0})],Of.prototype,`spacing`,void 0),N([g({type:String,attribute:`spacing-top`,reflect:!0})],Of.prototype,`spacingTop`,void 0),N([g({type:String,attribute:`spacing-bottom`,reflect:!0})],Of.prototype,`spacingBottom`,void 0),N([g({type:String,attribute:`spacing-left`,reflect:!0})],Of.prototype,`spacingLeft`,void 0),N([g({type:String,attribute:`spacing-right`,reflect:!0})],Of.prototype,`spacingRight`,void 0),N([g({type:Number,reflect:!0,attribute:`active-index`})],Of.prototype,`activeIndex`,void 0),Of=N([a(`scb-stepper`)],Of),C(),y(),Qc(),P();var kf=96,Af=32,jf=class extends S{constructor(...e){super(...e),this.dataSorting=!1,this.columnWidthMode=`auto`,this._sortedColumn=null,this._sortDirection=`asc`,this._columnWidthFrame=null,this._onSlotChange=()=>{this._attachThListeners()}}static{this.styles=p`
14491
+ `}connectedCallback(){super.connectedCallback(),typeof ResizeObserver<`u`&&(this.#e=new ResizeObserver(()=>{this.#i()}),this.#e.observe(this))}disconnectedCallback(){this.#e&&=(this.#e.disconnect(),void 0),this.#t&&=(cancelAnimationFrame(this.#t),0),super.disconnectedCallback()}#n(){let e=this.#r(this.spacing),t=this.#r(this.spacingTop)??e,n=this.#r(this.spacingBottom)??e,r=this.#r(this.spacingLeft),i=this.#r(this.spacingRight);t?this.style.setProperty(`--scb-stepper-spacing-block-start`,t):this.style.removeProperty(`--scb-stepper-spacing-block-start`),n?this.style.setProperty(`--scb-stepper-spacing-block-end`,n):this.style.removeProperty(`--scb-stepper-spacing-block-end`),r?this.style.setProperty(`--scb-stepper-spacing-inline-start`,r):this.style.removeProperty(`--scb-stepper-spacing-inline-start`),i?this.style.setProperty(`--scb-stepper-spacing-inline-end`,i):this.style.removeProperty(`--scb-stepper-spacing-inline-end`)}#r(e){if(!e)return;let t=String(e).trim();if(t)return/^\d+$/.test(t)?`var(--spacing-${Math.max(0,Math.min(14,parseInt(t,10)))})`:t}#i(){this.#t||=requestAnimationFrame(()=>{this.#t=0,this.#a()})}#a(){let e=this._getSteps();e.length!==0&&e.forEach(e=>{let t=e.shadowRoot;if(!t)return;let n=t.querySelector(`.label`),r=t.querySelector(`.scb-step-content`);if(!n)return;if(this.variant!==`horizontal`){n.style.removeProperty(`max-width`),n.style.removeProperty(`white-space`),n.style.removeProperty(`word-break`),n.style.removeProperty(`overflow-wrap`);return}n.style.maxWidth=`none`,n.style.whiteSpace=`nowrap`,n.style.wordBreak=`normal`,n.style.overflowWrap=`normal`;let i=r?.clientWidth??e.clientWidth;i>0&&n.scrollWidth>i&&(n.style.maxWidth=`100%`,n.style.whiteSpace=`normal`,n.style.wordBreak=`break-word`,n.style.overflowWrap=`anywhere`)})}};N([g({type:String,reflect:!0})],Of.prototype,`type`,void 0),N([g({type:String,reflect:!0})],Of.prototype,`label`,void 0),N([g({type:Boolean,reflect:!0,attribute:`change-on-completed`})],Of.prototype,`changeOnCompleted`,void 0),N([g({type:String,reflect:!0})],Of.prototype,`variant`,void 0),N([g({type:String,reflect:!0,attribute:`symbol-variant`})],Of.prototype,`symbolVariant`,void 0),N([g({type:String,reflect:!0})],Of.prototype,`size`,void 0),N([g({type:String,reflect:!0})],Of.prototype,`spacing`,void 0),N([g({type:String,attribute:`spacing-top`,reflect:!0})],Of.prototype,`spacingTop`,void 0),N([g({type:String,attribute:`spacing-bottom`,reflect:!0})],Of.prototype,`spacingBottom`,void 0),N([g({type:String,attribute:`spacing-left`,reflect:!0})],Of.prototype,`spacingLeft`,void 0),N([g({type:String,attribute:`spacing-right`,reflect:!0})],Of.prototype,`spacingRight`,void 0),N([g({type:Number,reflect:!0,attribute:`active-index`})],Of.prototype,`activeIndex`,void 0),Of=N([a(`scb-stepper`)],Of),C(),y(),Qc(),P();var kf=96,Af=32,jf=class extends S{constructor(...e){super(...e),this.dataSorting=!1,this.columnWidthMode=`auto`,this._sortedColumn=null,this._sortDirection=`asc`,this._columnWidthFrame=null,this._onSlotChange=()=>{this._attachThListeners()}}static{this.styles=p`
14336
14492
  :host {
14337
14493
  display: block;
14338
14494
  color: var(--md-sys-color-on-surface);