scb-wc 0.1.145 → 0.1.147
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.
- package/mvc/components/scb-stepper/scb-step.js +40 -25
- package/mvc/components/scb-stepper/scb-stepper.js +24 -2
- package/mvc/scb-logo.svg +20 -20
- package/mvc/scb.svg +13 -13
- package/package.json +2 -2
- package/scb-components/scb-stepper/scb-step.d.ts +7 -0
- package/scb-components/scb-stepper/scb-stepper.d.ts +2 -0
- package/scb-stepper/scb-step.js +142 -44
- package/scb-stepper/scb-stepper.js +91 -13
- package/scb-wc.bundle.js +206 -50
|
@@ -1,61 +1,76 @@
|
|
|
1
|
-
import{h as
|
|
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{r as v}from"../../vendor/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=${
|
|
7
|
+
aria-label=${s}
|
|
8
8
|
@keydown=${this.handleKeyDown}
|
|
9
|
-
@focusin=${
|
|
9
|
+
@focusin=${this.__onFocusIn}
|
|
10
|
+
@focusout=${this.__onFocusOut}
|
|
10
11
|
>
|
|
11
|
-
<
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
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
|
|
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=${
|
|
30
|
+
aria-label=${s}
|
|
28
31
|
@keydown=${this.handleKeyDown}
|
|
29
|
-
@focusin=${
|
|
32
|
+
@focusin=${this.__onFocusIn}
|
|
33
|
+
@focusout=${this.__onFocusOut}
|
|
30
34
|
>
|
|
31
|
-
<
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
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
|
|
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=${
|
|
53
|
+
aria-label=${s}
|
|
48
54
|
@keydown=${this.handleKeyDown}
|
|
49
|
-
@focusin=${
|
|
55
|
+
@focusin=${this.__onFocusIn}
|
|
56
|
+
@focusout=${this.__onFocusOut}
|
|
50
57
|
>
|
|
51
|
-
<
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
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
|
-
`}}},
|
|
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);
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import{h as _,m as
|
|
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(
|
|
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/mvc/scb-logo.svg
CHANGED
|
@@ -1,21 +1,21 @@
|
|
|
1
|
-
<?xml version="1.0" encoding="utf-8"?>
|
|
2
|
-
<svg viewBox="-0.0002 -0.0066 1344.9076 377.9532" xmlns="http://www.w3.org/2000/svg">
|
|
3
|
-
<defs>
|
|
4
|
-
<style type="text/css">
|
|
5
|
-
g {
|
|
6
|
-
fill: #100f0d;
|
|
7
|
-
}
|
|
8
|
-
g:target {
|
|
9
|
-
fill: #fff;
|
|
10
|
-
}
|
|
11
|
-
</style>
|
|
12
|
-
</defs>
|
|
13
|
-
<g transform="matrix(1.3333330154418945, 0, 0, -1.3333330154418945, 0, 377.9466552734375)" id="g10">
|
|
14
|
-
<g transform="scale(0.1)" id="inverted">
|
|
15
|
-
<path id="path14" d="m 1346.6,2515.59 c 0,48.24 -39.11,87.31 -87.4,87.31 -48.29,0 -87.4,-39.07 -87.4,-87.31 V 312.898 c 0,-48.339 39.11,-87.5 87.4,-87.5 48.29,0 87.4,39.161 87.4,87.5 V 1106.8 c 0,5.77 4.79,10.45 10.51,10.45 h 287.22 c 5.76,0 10.5,-4.68 10.5,-10.45 V 305.969 C 1654.83,137.02 1477.67,0 1259.2,0 1040.63,0 863.523,137.02 863.523,305.969 V 2528.77 c 0,168.86 177.107,305.88 395.677,305.88 218.47,0 395.63,-137.02 395.63,-305.88 V 1738.1 c 0,-5.86 -4.74,-10.45 -10.5,-10.45 h -287.22 c -5.72,0 -10.51,4.59 -10.51,10.45 v 777.49"/>
|
|
16
|
-
<path id="path16" d="M 10.4414,2265.38 C -8.01563,2136.85 -1.52734,1926.1 26.1172,1807.73 56.4922,1678.71 231.645,1417.96 310.555,1296.86 389.566,1175.85 494.949,1049.49 493.375,880.922 V 477.18 c 0,-48.25 -39.109,-87.41 -87.406,-87.41 -48.145,0 -87.254,39.16 -87.254,87.41 v 618.79 c 0,5.76 -4.785,10.55 -10.645,10.55 H 20.9453 c -5.8711,0 -10.5039,-4.79 -10.5039,-10.55 V 458.719 c 0,-168.957 177.1056,-305.969 395.5276,-305.969 218.574,0 395.683,137.012 395.683,305.969 v 422.203 c -1.324,289.568 -80.332,331.748 -182.867,505.398 -73.445,124.71 -254.121,381.95 -284.398,510.97 -27.735,118.36 -26.516,255.39 -15.672,379.9 0,48.25 39.109,87.41 87.254,87.41 48.297,0 87.406,-39.16 87.406,-87.41 v -550.32 c 0,-5.77 4.746,-10.45 10.645,-10.45 h 287.085 c 5.911,0 10.547,4.68 10.547,10.45 v 538.51 c 0,169.06 -177.109,305.97 -395.683,305.97 -218.422,0 -395.5276,-136.91 -395.5276,-305.97"/>
|
|
17
|
-
<path id="path18" d="m 1726.57,2547.82 h 440.8 c 182.04,0 329.61,-147.57 329.61,-329.52 v -462.24 c 0,-129.59 -84.97,-238.98 -202.16,-276.48 v -6.24 c 117.19,-37.4 202.16,-146.89 202.16,-276.58 V 491.148 c 0,-160.367 -130.2,-290.457 -290.45,-290.457 l -479.96,-0.293 c -5.91,0 -10.6,4.793 -10.6,10.454 V 2537.37 c 0,5.66 4.69,10.45 10.6,10.45 m 308.27,-229.22 c -5.97,0 -10.65,-4.78 -10.65,-10.55 v -729.33 c 0,-5.97 4.68,-10.65 10.65,-10.65 h 43.36 c 58.01,0 105.08,47.16 105.08,105.18 v 540.18 c 0,58 -47.07,105.17 -105.08,105.17 z m 0,-982.29 c -5.97,0 -10.65,-4.69 -10.65,-10.45 V 430.59 c 0,-5.86 4.68,-10.649 10.65,-10.649 h 51.85 c 58.12,0 105.09,47.18 105.09,105.188 v 706.011 c 0,58.19 -46.97,105.17 -105.09,105.17 h -51.85"/>
|
|
18
|
-
</g>
|
|
19
|
-
</g>
|
|
20
|
-
<text style="fill: rgb(1, 1, 1); font-family: Roboto; font-size: 139.2px; font-weight: 500; stroke: rgb(0, 0, 0); white-space: pre;" x="455.182" y="234.25">Designsystem</text>
|
|
1
|
+
<?xml version="1.0" encoding="utf-8"?>
|
|
2
|
+
<svg viewBox="-0.0002 -0.0066 1344.9076 377.9532" xmlns="http://www.w3.org/2000/svg">
|
|
3
|
+
<defs>
|
|
4
|
+
<style type="text/css">
|
|
5
|
+
g {
|
|
6
|
+
fill: #100f0d;
|
|
7
|
+
}
|
|
8
|
+
g:target {
|
|
9
|
+
fill: #fff;
|
|
10
|
+
}
|
|
11
|
+
</style>
|
|
12
|
+
</defs>
|
|
13
|
+
<g transform="matrix(1.3333330154418945, 0, 0, -1.3333330154418945, 0, 377.9466552734375)" id="g10">
|
|
14
|
+
<g transform="scale(0.1)" id="inverted">
|
|
15
|
+
<path id="path14" d="m 1346.6,2515.59 c 0,48.24 -39.11,87.31 -87.4,87.31 -48.29,0 -87.4,-39.07 -87.4,-87.31 V 312.898 c 0,-48.339 39.11,-87.5 87.4,-87.5 48.29,0 87.4,39.161 87.4,87.5 V 1106.8 c 0,5.77 4.79,10.45 10.51,10.45 h 287.22 c 5.76,0 10.5,-4.68 10.5,-10.45 V 305.969 C 1654.83,137.02 1477.67,0 1259.2,0 1040.63,0 863.523,137.02 863.523,305.969 V 2528.77 c 0,168.86 177.107,305.88 395.677,305.88 218.47,0 395.63,-137.02 395.63,-305.88 V 1738.1 c 0,-5.86 -4.74,-10.45 -10.5,-10.45 h -287.22 c -5.72,0 -10.51,4.59 -10.51,10.45 v 777.49"/>
|
|
16
|
+
<path id="path16" d="M 10.4414,2265.38 C -8.01563,2136.85 -1.52734,1926.1 26.1172,1807.73 56.4922,1678.71 231.645,1417.96 310.555,1296.86 389.566,1175.85 494.949,1049.49 493.375,880.922 V 477.18 c 0,-48.25 -39.109,-87.41 -87.406,-87.41 -48.145,0 -87.254,39.16 -87.254,87.41 v 618.79 c 0,5.76 -4.785,10.55 -10.645,10.55 H 20.9453 c -5.8711,0 -10.5039,-4.79 -10.5039,-10.55 V 458.719 c 0,-168.957 177.1056,-305.969 395.5276,-305.969 218.574,0 395.683,137.012 395.683,305.969 v 422.203 c -1.324,289.568 -80.332,331.748 -182.867,505.398 -73.445,124.71 -254.121,381.95 -284.398,510.97 -27.735,118.36 -26.516,255.39 -15.672,379.9 0,48.25 39.109,87.41 87.254,87.41 48.297,0 87.406,-39.16 87.406,-87.41 v -550.32 c 0,-5.77 4.746,-10.45 10.645,-10.45 h 287.085 c 5.911,0 10.547,4.68 10.547,10.45 v 538.51 c 0,169.06 -177.109,305.97 -395.683,305.97 -218.422,0 -395.5276,-136.91 -395.5276,-305.97"/>
|
|
17
|
+
<path id="path18" d="m 1726.57,2547.82 h 440.8 c 182.04,0 329.61,-147.57 329.61,-329.52 v -462.24 c 0,-129.59 -84.97,-238.98 -202.16,-276.48 v -6.24 c 117.19,-37.4 202.16,-146.89 202.16,-276.58 V 491.148 c 0,-160.367 -130.2,-290.457 -290.45,-290.457 l -479.96,-0.293 c -5.91,0 -10.6,4.793 -10.6,10.454 V 2537.37 c 0,5.66 4.69,10.45 10.6,10.45 m 308.27,-229.22 c -5.97,0 -10.65,-4.78 -10.65,-10.55 v -729.33 c 0,-5.97 4.68,-10.65 10.65,-10.65 h 43.36 c 58.01,0 105.08,47.16 105.08,105.18 v 540.18 c 0,58 -47.07,105.17 -105.08,105.17 z m 0,-982.29 c -5.97,0 -10.65,-4.69 -10.65,-10.45 V 430.59 c 0,-5.86 4.68,-10.649 10.65,-10.649 h 51.85 c 58.12,0 105.09,47.18 105.09,105.188 v 706.011 c 0,58.19 -46.97,105.17 -105.09,105.17 h -51.85"/>
|
|
18
|
+
</g>
|
|
19
|
+
</g>
|
|
20
|
+
<text style="fill: rgb(1, 1, 1); font-family: Roboto; font-size: 139.2px; font-weight: 500; stroke: rgb(0, 0, 0); white-space: pre;" x="455.182" y="234.25">Designsystem</text>
|
|
21
21
|
</svg>
|
package/mvc/scb.svg
CHANGED
|
@@ -1,14 +1,14 @@
|
|
|
1
|
-
<svg
|
|
2
|
-
xmlns="http://www.w3.org/2000/svg"
|
|
3
|
-
xmlns:xlink="http://www.w3.org/1999/xlink"
|
|
4
|
-
aria-hidden="true"
|
|
5
|
-
role="img"
|
|
6
|
-
width="48"
|
|
7
|
-
height="48"
|
|
8
|
-
preserveAspectRatio="xMidYMid meet"
|
|
9
|
-
viewBox="0 0 1300 1300"
|
|
10
|
-
>
|
|
11
|
-
<path d="M539.3,128.2c0-19.3-15.7-35-35-35c-19.3,0-35,15.6-35,35v882.1c0,19.4,15.7,35,35,35c19.3,0,35-15.7,35-35V692.4 c0-2.3,1.9-4.2,4.2-4.2h115c2.3,0,4.2,1.9,4.2,4.2v320.7c0,67.7-71,122.5-158.4,122.5c-87.5,0-158.5-54.9-158.5-122.5V122.9 c0-67.6,70.9-122.5,158.5-122.5c87.5,0,158.4,54.9,158.4,122.5v316.6c0,2.3-1.9,4.2-4.2,4.2h-115c-2.3,0-4.2-1.8-4.2-4.2V128.2z" />
|
|
12
|
-
<path d="M4.2,228.4c-7.4,51.5-4.8,135.9,6.3,183.3c12.2,51.7,82.3,156.1,113.9,204.6c31.6,48.5,73.8,99.1,73.2,166.6v161.7 c0,19.3-15.7,35-35,35c-19.3,0-34.9-15.7-34.9-35V696.7c0-2.3-1.9-4.2-4.3-4.2H8.4c-2.4,0-4.2,1.9-4.2,4.2v255.2 c0,67.7,70.9,122.5,158.4,122.5c87.5,0,158.5-54.9,158.5-122.5V782.8c-0.5-116-32.2-132.9-73.2-202.4 c-29.4-49.9-101.8-153-113.9-204.6c-11.1-47.4-10.6-102.3-6.3-152.1c0-19.3,15.7-35,34.9-35c19.3,0,35,15.7,35,35V444 c0,2.3,1.9,4.2,4.3,4.2h115c2.4,0,4.2-1.9,4.2-4.2V228.4c0-67.7-70.9-122.5-158.5-122.5C75.1,105.8,4.2,160.7,4.2,228.4" />
|
|
13
|
-
<path d="M814.9,600.4c-2.4,0-4.3,1.9-4.3,4.2v358.5c0,2.3,1.9,4.3,4.3,4.3h20.8c23.3,0,42.1-18.9,42.1-42.1V642.6 c0-23.3-18.8-42.1-42.1-42.1H814.9z M814.9,207.1c-2.4,0-4.3,1.9-4.3,4.2v292.1c0,2.4,1.9,4.3,4.3,4.3h17.4 c23.2,0,42.1-18.9,42.1-42.1V249.2c0-23.2-18.9-42.1-42.1-42.1H814.9z M691.5,115.3H868c72.9,0,132,59.1,132,132v185.1 c0,51.9-34,95.7-81,110.7v2.5c46.9,15,81,58.8,81,110.8v282.6c0,64.2-52.1,116.3-116.3,116.3l-192.2,0.1c-2.4,0-4.2-1.9-4.2-4.2 V119.4C687.2,117.2,689.1,115.3,691.5,115.3" />
|
|
1
|
+
<svg
|
|
2
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
3
|
+
xmlns:xlink="http://www.w3.org/1999/xlink"
|
|
4
|
+
aria-hidden="true"
|
|
5
|
+
role="img"
|
|
6
|
+
width="48"
|
|
7
|
+
height="48"
|
|
8
|
+
preserveAspectRatio="xMidYMid meet"
|
|
9
|
+
viewBox="0 0 1300 1300"
|
|
10
|
+
>
|
|
11
|
+
<path d="M539.3,128.2c0-19.3-15.7-35-35-35c-19.3,0-35,15.6-35,35v882.1c0,19.4,15.7,35,35,35c19.3,0,35-15.7,35-35V692.4 c0-2.3,1.9-4.2,4.2-4.2h115c2.3,0,4.2,1.9,4.2,4.2v320.7c0,67.7-71,122.5-158.4,122.5c-87.5,0-158.5-54.9-158.5-122.5V122.9 c0-67.6,70.9-122.5,158.5-122.5c87.5,0,158.4,54.9,158.4,122.5v316.6c0,2.3-1.9,4.2-4.2,4.2h-115c-2.3,0-4.2-1.8-4.2-4.2V128.2z" />
|
|
12
|
+
<path d="M4.2,228.4c-7.4,51.5-4.8,135.9,6.3,183.3c12.2,51.7,82.3,156.1,113.9,204.6c31.6,48.5,73.8,99.1,73.2,166.6v161.7 c0,19.3-15.7,35-35,35c-19.3,0-34.9-15.7-34.9-35V696.7c0-2.3-1.9-4.2-4.3-4.2H8.4c-2.4,0-4.2,1.9-4.2,4.2v255.2 c0,67.7,70.9,122.5,158.4,122.5c87.5,0,158.5-54.9,158.5-122.5V782.8c-0.5-116-32.2-132.9-73.2-202.4 c-29.4-49.9-101.8-153-113.9-204.6c-11.1-47.4-10.6-102.3-6.3-152.1c0-19.3,15.7-35,34.9-35c19.3,0,35,15.7,35,35V444 c0,2.3,1.9,4.2,4.3,4.2h115c2.4,0,4.2-1.9,4.2-4.2V228.4c0-67.7-70.9-122.5-158.5-122.5C75.1,105.8,4.2,160.7,4.2,228.4" />
|
|
13
|
+
<path d="M814.9,600.4c-2.4,0-4.3,1.9-4.3,4.2v358.5c0,2.3,1.9,4.3,4.3,4.3h20.8c23.3,0,42.1-18.9,42.1-42.1V642.6 c0-23.3-18.8-42.1-42.1-42.1H814.9z M814.9,207.1c-2.4,0-4.3,1.9-4.3,4.2v292.1c0,2.4,1.9,4.3,4.3,4.3h17.4 c23.2,0,42.1-18.9,42.1-42.1V249.2c0-23.2-18.9-42.1-42.1-42.1H814.9z M691.5,115.3H868c72.9,0,132,59.1,132,132v185.1 c0,51.9-34,95.7-81,110.7v2.5c46.9,15,81,58.8,81,110.8v282.6c0,64.2-52.1,116.3-116.3,116.3l-192.2,0.1c-2.4,0-4.2-1.9-4.2-4.2 V119.4C687.2,117.2,689.1,115.3,691.5,115.3" />
|
|
14
14
|
</svg>
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "scb-wc",
|
|
3
|
-
"version": "0.1.
|
|
3
|
+
"version": "0.1.147",
|
|
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": "
|
|
475
|
+
"buildHash": "F070E974D4EE75BCA8107E19FCD628BC56BAFEDD77DA9CF97DC5252FB58F196C"
|
|
476
476
|
}
|
|
@@ -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
|
}
|
|
@@ -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.
|