scb-wc-test 0.1.113 → 0.1.115
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-accordion/scb-accordion-item.js +43 -7
- package/mvc/components/scb-toc/scb-toc-item.js +163 -44
- package/mvc/components/scb-toc/scb-toc.js +1 -1
- package/mvc/scb-wc-test.css +1 -1
- package/package.json +2 -2
- package/scb-accordion/scb-accordion-item.js +70 -34
- package/scb-toc/scb-toc-item.d.ts +15 -5
- package/scb-toc/scb-toc-item.js +302 -134
- package/scb-wc-test.bundle.js +340 -185
- package/scb-wc-test.css +1 -1
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import{a as g,n as s,i as
|
|
1
|
+
import{a as g,n as s,i as v,E as p,x as l,t as u}from"../../vendor/vendor.js";import"../../vendor/vendor-material.js";(function(){try{var t=typeof globalThis<"u"?globalThis:window;if(!t.__scb_ce_guard_installed__){t.__scb_ce_guard_installed__=!0;var e=customElements.define.bind(customElements);customElements.define=function(o,a,n){try{customElements.get(o)||e(o,a,n)}catch(d){var c=String(d||"");if(c.indexOf("already been used")===-1&&c.indexOf("NotSupportedError")===-1)throw d}}}}catch{}})();var h=Object.defineProperty,m=Object.getOwnPropertyDescriptor,r=(t,e,o,a)=>{for(var n=a>1?void 0:a?m(e,o):e,c=t.length-1,d;c>=0;c--)(d=t[c])&&(n=(a?d(e,o,n):d(n))||n);return a&&n&&h(e,o,n),n};let i=class extends v{constructor(){super(...arguments),this.open=!1,this.title="",this.content="",this.overline="",this.supportingText="",this.leading=!1,this.leadingVariant="",this.leadingIcon="",this.imgHrefImage="",this.avatarLabel="",this.avatarAlt="",this.avatarVariant="icon",this.avatarSrc="",this.density=0,this._unique=i._uid(),this._onToggle=t=>{const e=t.currentTarget;this.open=!!e.open;const o=this.closest("scb-accordion");this.open&&o&&!o.hasAttribute("detached")&&o.querySelectorAll("scb-accordion-item").forEach(n=>{n!==this&&n.setOpen(!1)}),this._applyInertByOpen()}}static _uid(){return globalThis.crypto?.randomUUID?.()??`${i._uidPrefix}-${++i._uidSeq}`}firstUpdated(){this._applyInertByOpen()}_applyInertByOpen(){const t=this.renderRoot.querySelector(".scb-accordion-bottom"),e=this.renderRoot.querySelector("details");!t||!e||(e.open?(t.removeAttribute("inert"),t.setAttribute("aria-hidden","false")):(t.setAttribute("inert",""),t.setAttribute("aria-hidden","true")))}_onKeyDown(t){const e=this.closest("scb-accordion"),a=Array.from(e?.querySelectorAll("scb-accordion-item")||[]).map(d=>d.renderRoot.querySelector("details")?.querySelector(".scb-accordion-top")||null).filter(d=>!!d),n=t.currentTarget,c=a.indexOf(n);switch(t.key){case"ArrowDown":t.preventDefault(),c<a.length-1&&a[c+1].focus();break;case"ArrowUp":t.preventDefault(),c>0&&a[c-1].focus();break;case"Home":t.preventDefault(),a.length&&a[0].focus();break;case"End":t.preventDefault(),a.length&&a[a.length-1].focus();break}}setOpen(t){this.open=!!t;const e=this.renderRoot.querySelector("details");e&&(e.open=this.open),this._applyInertByOpen()}updated(t){if(t.has("open")){const e=this.renderRoot.querySelector("details");e&&e.open!==this.open&&(e.open=this.open),this._applyInertByOpen(),this.dispatchEvent(new CustomEvent("open-changed",{detail:{open:this.open,title:this.title},bubbles:!0,composed:!0}))}}render(){const t=`bottom-${this._unique}`,e=`header-${this._unique}`,o=this.leading?this.leadingVariant==="image"&&this.imgHrefImage?l`<img part="leading-image" class="img" src="${this.imgHrefImage}" alt="" />`:this.leadingVariant==="avatar"?l`
|
|
2
2
|
<scb-avatar
|
|
3
3
|
label=${this.avatarLabel}
|
|
4
4
|
alt=${this.avatarAlt}
|
|
@@ -42,8 +42,8 @@ import{a as g,n as s,i as u,E as p,x as l,t as v}from"../../vendor/vendor.js";im
|
|
|
42
42
|
position: relative;
|
|
43
43
|
--scb-accordion-hover-radius: var(--radius-none, 0px);
|
|
44
44
|
--scb-accordion-chevron-nudge-y: 3px;
|
|
45
|
-
--scb-accordion-transition-duration: 150ms;
|
|
46
|
-
--scb-accordion-transition-easing: cubic-bezier(.69,.16,.2,.98);
|
|
45
|
+
--scb-accordion-transition-duration: var(--motion-duration-medium, 150ms);
|
|
46
|
+
--scb-accordion-transition-easing: var(--motion-easing-emphasized-accelerate, var(--motion-easing-emphasized, cubic-bezier(.69,.16,.2,.98)));
|
|
47
47
|
--scb-accordion-panel-padding-closed: var(--spacing-0, 0px);
|
|
48
48
|
}
|
|
49
49
|
|
|
@@ -90,7 +90,10 @@ import{a as g,n as s,i as u,E as p,x as l,t as v}from"../../vendor/vendor.js";im
|
|
|
90
90
|
padding-block: var(--spacing-4, 12px);
|
|
91
91
|
}
|
|
92
92
|
|
|
93
|
-
|
|
93
|
+
details[open] {
|
|
94
|
+
--scb-accordion-transition-easing: var(--motion-easing-emphasized-decelerate, var(--motion-easing-standard, cubic-bezier(.69,.16,.2,.98)));
|
|
95
|
+
}
|
|
96
|
+
|
|
94
97
|
.scb-accordion-bottom {
|
|
95
98
|
display: grid;
|
|
96
99
|
grid-template-rows: 0fr;
|
|
@@ -113,6 +116,40 @@ import{a as g,n as s,i as u,E as p,x as l,t as v}from"../../vendor/vendor.js";im
|
|
|
113
116
|
}
|
|
114
117
|
.bottom-inner { overflow: hidden; }
|
|
115
118
|
|
|
119
|
+
/* Browsers med stöd för ::details-content och interpolate-size kan animera höjd till auto. */
|
|
120
|
+
@supports selector(::details-content) and (interpolate-size: allow-keywords) {
|
|
121
|
+
:host {
|
|
122
|
+
interpolate-size: allow-keywords;
|
|
123
|
+
}
|
|
124
|
+
|
|
125
|
+
details {
|
|
126
|
+
interpolate-size: allow-keywords;
|
|
127
|
+
}
|
|
128
|
+
|
|
129
|
+
details::details-content {
|
|
130
|
+
height: 0;
|
|
131
|
+
overflow: clip;
|
|
132
|
+
content-visibility: hidden;
|
|
133
|
+
transition:
|
|
134
|
+
height var(--scb-accordion-transition-duration) var(--scb-accordion-transition-easing),
|
|
135
|
+
content-visibility var(--scb-accordion-transition-duration) var(--scb-accordion-transition-easing)
|
|
136
|
+
allow-discrete;
|
|
137
|
+
}
|
|
138
|
+
|
|
139
|
+
details[open]::details-content {
|
|
140
|
+
height: auto;
|
|
141
|
+
content-visibility: visible;
|
|
142
|
+
}
|
|
143
|
+
|
|
144
|
+
.scb-accordion-bottom {
|
|
145
|
+
display: block;
|
|
146
|
+
grid-template-rows: unset;
|
|
147
|
+
transition:
|
|
148
|
+
opacity var(--scb-accordion-transition-duration) var(--scb-accordion-transition-easing),
|
|
149
|
+
padding var(--scb-accordion-transition-duration) var(--scb-accordion-transition-easing);
|
|
150
|
+
}
|
|
151
|
+
}
|
|
152
|
+
|
|
116
153
|
.title {
|
|
117
154
|
font-family: var(--brand-font);
|
|
118
155
|
font-size: var(--md-sys-typescale-title-large-size);
|
|
@@ -151,8 +188,7 @@ import{a as g,n as s,i as u,E as p,x as l,t as v}from"../../vendor/vendor.js";im
|
|
|
151
188
|
.chevron {
|
|
152
189
|
margin-left: auto;
|
|
153
190
|
padding-top: var(--scb-accordion-chevron-nudge-y, 3px);
|
|
154
|
-
|
|
155
|
-
transition: transform var(--scb-accordion-transition-duration) var(--scb-accordion-transition-easing);
|
|
191
|
+
transition: transform var(--motion-duration-medium, var(--scb-accordion-transition-duration)) var(--motion-easing-standard, var(--scb-accordion-transition-easing));
|
|
156
192
|
}
|
|
157
193
|
details[open] .chevron { transform: rotate(180deg); }
|
|
158
194
|
|
|
@@ -166,4 +202,4 @@ import{a as g,n as s,i as u,E as p,x as l,t as v}from"../../vendor/vendor.js";im
|
|
|
166
202
|
@media (prefers-reduced-motion: reduce) {
|
|
167
203
|
md-ripple { display: none; }
|
|
168
204
|
}
|
|
169
|
-
`];
|
|
205
|
+
`];r([s({type:Boolean,reflect:!0})],i.prototype,"open",2);r([s({type:String,reflect:!0})],i.prototype,"title",2);r([s({type:String})],i.prototype,"content",2);r([s({type:String,attribute:"overline"})],i.prototype,"overline",2);r([s({type:String,attribute:"supporting-text"})],i.prototype,"supportingText",2);r([s({type:Boolean})],i.prototype,"leading",2);r([s({type:String,attribute:"leading-variant",reflect:!0})],i.prototype,"leadingVariant",2);r([s({type:String,attribute:"leading-icon"})],i.prototype,"leadingIcon",2);r([s({type:String,attribute:"img-href-image",reflect:!0})],i.prototype,"imgHrefImage",2);r([s({type:String,attribute:"avatar-label"})],i.prototype,"avatarLabel",2);r([s({type:String,attribute:"avatar-alt"})],i.prototype,"avatarAlt",2);r([s({type:String,attribute:"avatar-variant"})],i.prototype,"avatarVariant",2);r([s({type:String,attribute:"avatar-src"})],i.prototype,"avatarSrc",2);r([s({type:Number,reflect:!0})],i.prototype,"density",2);i=r([u("scb-accordion-item")],i);
|
|
@@ -1,47 +1,82 @@
|
|
|
1
|
-
import{a as
|
|
2
|
-
<div
|
|
3
|
-
class="scb-toc-item"
|
|
4
|
-
role="listitem"
|
|
5
|
-
aria-expanded=${this.expanded}
|
|
6
|
-
aria-controls=${e}
|
|
7
|
-
>
|
|
1
|
+
import{a as h,n as p,i as m,x as u,t as f}from"../../vendor/vendor.js";import"../scb-divider/scb-divider.js";import"../../vendor/vendor-material.js";(function(){try{var t=typeof globalThis<"u"?globalThis:window;if(!t.__scb_ce_guard_installed__){t.__scb_ce_guard_installed__=!0;var e=customElements.define.bind(customElements);customElements.define=function(i,s,o){try{customElements.get(i)||e(i,s,o)}catch(a){var d=String(a||"");if(d.indexOf("already been used")===-1&&d.indexOf("NotSupportedError")===-1)throw a}}}}catch{}})();var v=Object.defineProperty,g=Object.getOwnPropertyDescriptor,c=(t,e,i,s)=>{for(var o=s>1?void 0:s?g(e,i):e,d=t.length-1,a;d>=0;d--)(a=t[d])&&(o=(s?a(e,i,o):a(o))||o);return s&&o&&v(e,i,o),o};let n=class extends m{constructor(){super(...arguments),this.expanded=!1,this.label="",this.supportingText="",this.itemHref="#",this.divider=!0,this._unique=n._uid(),this._overflowVisibleTimer=null,this._slotHasContent=!1,this._onSlotChange=()=>{const t=this.renderRoot.querySelector("slot"),e=!!t&&t.assignedElements({flatten:!0}).length>0;this._slotHasContent!==e&&(this._slotHasContent=e,this.requestUpdate()),!this._slotHasContent&&this.expanded&&(this.expanded=!1),this._applyInertByExpanded()},this._toggleAccordion=()=>{if(!this._slotHasContent)return;const t=!this.expanded;t&&this._collapseSiblingsIfNeeded(),this.expanded=t},this._onKeyDown=t=>{const e=this.closest("scb-toc"),s=Array.from(e?.querySelectorAll("scb-toc-item")||[]).map(r=>({host:r,label:r.renderRoot.querySelector(".toc-item-label")||null})).filter(r=>!!r.label),o=s.findIndex(r=>r.host===this);if(o<0)return;const a=t.currentTarget?.classList?.contains("toc-chevron-button")??!1;switch(t.key){case"Enter":case" ":if(!a)return;t.preventDefault(),this._toggleAccordion();break;case"ArrowDown":t.preventDefault(),o<s.length-1&&s[o+1].label.focus();break;case"ArrowUp":t.preventDefault(),o>0&&s[o-1].label.focus();break;case"Home":t.preventDefault(),s.length&&s[0].label.focus();break;case"End":t.preventDefault(),s.length&&s[s.length-1].label.focus();break}}}static _uid(){return globalThis.crypto?.randomUUID?.()??`${n._uidPrefix}-${++n._uidSeq}`}firstUpdated(){this._onSlotChange(),this._applyInertByExpanded(),this._syncOverflowVisibilityByExpanded()}updated(t){t.has("expanded")&&(this._applyInertByExpanded(),this._syncOverflowVisibilityByExpanded(),this.dispatchEvent(new CustomEvent("expanded-changed",{detail:{expanded:this.expanded,label:this.label},bubbles:!0,composed:!0})))}disconnectedCallback(){super.disconnectedCallback(),this._overflowVisibleTimer!==null&&(window.clearTimeout(this._overflowVisibleTimer),this._overflowVisibleTimer=null)}_applyInertByExpanded(){const t=this.renderRoot.querySelector(".scb-toc-item-bottom");t&&(this.expanded?(t.removeAttribute("inert"),t.setAttribute("aria-hidden","false"),this._restoreTabIndexesIfNeeded()):(t.setAttribute("inert",""),t.setAttribute("aria-hidden","true"),this._removeTabIndexesIfNeeded()))}_syncOverflowVisibilityByExpanded(){if(this._overflowVisibleTimer!==null&&(window.clearTimeout(this._overflowVisibleTimer),this._overflowVisibleTimer=null),this.removeAttribute("data-expanded-settled"),!this.expanded)return;const t=this.renderRoot.querySelector(".scb-toc-item-bottom");if(!t){this.setAttribute("data-expanded-settled","");return}const e=this._getTransitionMs(t);if(e<=0){this.setAttribute("data-expanded-settled","");return}this._overflowVisibleTimer=window.setTimeout(()=>{this._overflowVisibleTimer=null,this.expanded&&this.setAttribute("data-expanded-settled","")},e)}_getTransitionMs(t){const e=getComputedStyle(t),i=e.transitionDuration.split(",").map(r=>r.trim()),s=e.transitionDelay.split(",").map(r=>r.trim()),o=r=>{const l=parseFloat(r);return Number.isFinite(l)?r.endsWith("ms")?l:r.endsWith("s")?l*1e3:l:0},d=Math.max(i.length,s.length);let a=0;for(let r=0;r<d;r+=1){const l=o(i[r]??i[i.length-1]??"0s"),b=o(s[r]??s[s.length-1]??"0s");a=Math.max(a,l+b)}return Math.ceil(a)}_supportsInert(){return"inert"in HTMLElement.prototype}_collectFocusableFromSlot(){const t=this.renderRoot.querySelector("slot");if(!t)return[];const e=t.assignedElements({flatten:!0}),i=[],s=o=>{o instanceof HTMLElement&&o.matches("a,button,input,select,textarea,[tabindex]")&&i.push(o)};return e.forEach(o=>{s(o),o.querySelectorAll?.("a,button,input,select,textarea,[tabindex]").forEach(d=>s(d))}),i}_removeTabIndexesIfNeeded(){if(this._supportsInert())return;this._collectFocusableFromSlot().forEach(e=>{const i=e.getAttribute("tabindex");i!==null&&e.setAttribute("data-scb-prev-tabindex",i),e.setAttribute("tabindex","-1")})}_restoreTabIndexesIfNeeded(){if(this._supportsInert())return;this._collectFocusableFromSlot().forEach(e=>{const i=e.getAttribute("data-scb-prev-tabindex");i!==null?(e.setAttribute("tabindex",i),e.removeAttribute("data-scb-prev-tabindex")):e.removeAttribute("tabindex")})}_collapseSiblingsIfNeeded(){const t=this.closest("scb-toc");if(!t||t.hasAttribute("detached"))return;t.querySelectorAll("scb-toc-item").forEach(i=>{i!==this&&i.expanded&&(i.expanded=!1)})}render(){const t=`bottom-${this._unique}`,e=`toc-label-${this._unique}`,i=`toc-chevron-${this._unique}`;return u`
|
|
2
|
+
<div class="scb-toc-item" role="listitem">
|
|
8
3
|
<div class="scb-toc-item-top">
|
|
9
4
|
<div>
|
|
10
5
|
<div class="toc-item-label-wrapper">
|
|
11
|
-
<a
|
|
12
|
-
|
|
6
|
+
<a
|
|
7
|
+
id=${e}
|
|
8
|
+
class="toc-item-label"
|
|
9
|
+
href=${this.itemHref}
|
|
10
|
+
@keydown=${this._onKeyDown}
|
|
11
|
+
>
|
|
12
|
+
${this.label}
|
|
13
|
+
</a>
|
|
14
|
+
<md-focus-ring for=${e} inward></md-focus-ring>
|
|
13
15
|
</div>
|
|
14
16
|
<div class="supporting-text">${this.supportingText}</div>
|
|
15
17
|
</div>
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
18
|
+
|
|
19
|
+
${this._slotHasContent?u`
|
|
20
|
+
<div class="toc-chevron-button-wrapper">
|
|
21
|
+
<button
|
|
22
|
+
id=${i}
|
|
23
|
+
class="toc-chevron-button"
|
|
24
|
+
type="button"
|
|
25
|
+
aria-label=${this.expanded?"Fäll ihop avsnitt":"Fäll ut avsnitt"}
|
|
26
|
+
aria-expanded=${this.expanded?"true":"false"}
|
|
27
|
+
aria-controls=${t}
|
|
28
|
+
@click=${this._toggleAccordion}
|
|
29
|
+
@keydown=${this._onKeyDown}
|
|
30
|
+
>
|
|
31
|
+
<md-ripple></md-ripple>
|
|
32
|
+
<md-icon class="toc-chevron-icon" aria-hidden="true">expand_more</md-icon>
|
|
33
|
+
</button>
|
|
34
|
+
<md-focus-ring for=${i} inward></md-focus-ring>
|
|
35
|
+
</div>
|
|
23
36
|
`:""}
|
|
24
37
|
</div>
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
class="
|
|
28
|
-
|
|
29
|
-
|
|
38
|
+
|
|
39
|
+
<div id=${t} class="scb-toc-item-bottom" role="region" aria-labelledby=${e}>
|
|
40
|
+
<div class="bottom-inner">
|
|
41
|
+
<slot @slotchange=${this._onSlotChange}></slot>
|
|
42
|
+
</div>
|
|
30
43
|
</div>
|
|
31
|
-
|
|
44
|
+
|
|
45
|
+
${this.divider?u`<scb-divider></scb-divider>`:""}
|
|
32
46
|
</div>
|
|
33
|
-
`}};
|
|
47
|
+
`}};n._uidPrefix=`uid-${Math.random().toString(36).slice(2)}`;n._uidSeq=0;n.styles=[h`
|
|
48
|
+
:host {
|
|
49
|
+
display: block;
|
|
50
|
+
--scb-toc-transition-duration: var(--motion-duration-medium, 150ms);
|
|
51
|
+
--scb-toc-transition-easing: var(
|
|
52
|
+
--motion-easing-emphasized-accelerate,
|
|
53
|
+
var(--motion-easing-emphasized, cubic-bezier(.69,.16,.2,.98))
|
|
54
|
+
);
|
|
55
|
+
--scb-toc-panel-padding-closed: var(--spacing-0, 0px);
|
|
56
|
+
color: var(--md-sys-color-on-surface);
|
|
57
|
+
font-family: var(--brand-font, 'Inter', sans-serif);
|
|
58
|
+
}
|
|
59
|
+
|
|
60
|
+
:host([expanded]) {
|
|
61
|
+
--scb-toc-transition-easing: var(
|
|
62
|
+
--motion-easing-emphasized-decelerate,
|
|
63
|
+
var(--motion-easing-emphasized, cubic-bezier(.69,.16,.2,.98))
|
|
64
|
+
);
|
|
65
|
+
}
|
|
66
|
+
|
|
34
67
|
.scb-toc-item-top {
|
|
35
|
-
padding: var(--spacing-5) var(--spacing-3);
|
|
68
|
+
padding: var(--spacing-5, 16px) var(--spacing-3, 8px);
|
|
36
69
|
display: flex;
|
|
37
|
-
gap: var(--spacing-5);
|
|
70
|
+
gap: var(--spacing-5, 16px);
|
|
38
71
|
flex-direction: row;
|
|
39
72
|
}
|
|
73
|
+
|
|
40
74
|
.toc-item-label-wrapper {
|
|
41
75
|
position: relative;
|
|
42
76
|
display: block;
|
|
43
77
|
width: fit-content;
|
|
44
78
|
}
|
|
79
|
+
|
|
45
80
|
.toc-item-label {
|
|
46
81
|
display: block;
|
|
47
82
|
width: fit-content;
|
|
@@ -52,49 +87,133 @@ import{a as p,n as d,i as b,x as l,t as h}from"../../vendor/vendor.js";import"..
|
|
|
52
87
|
letter-spacing: var(--md-sys-typescale-body-large-tracking);
|
|
53
88
|
text-decoration: underline;
|
|
54
89
|
text-decoration-thickness: 1px;
|
|
55
|
-
text-underline-offset: .1578em;
|
|
56
|
-
margin-bottom: var(--spacing-3);
|
|
90
|
+
text-underline-offset: 0.1578em;
|
|
91
|
+
margin-bottom: var(--spacing-3, 8px);
|
|
57
92
|
}
|
|
93
|
+
|
|
58
94
|
.toc-item-label:hover {
|
|
59
95
|
color: var(--md-sys-color-on-surface);
|
|
60
96
|
text-decoration-thickness: 2px;
|
|
61
97
|
}
|
|
98
|
+
|
|
62
99
|
.toc-item-label:focus {
|
|
63
100
|
color: var(--md-sys-color-on-surface);
|
|
64
101
|
outline: none;
|
|
65
|
-
|
|
66
102
|
}
|
|
103
|
+
|
|
67
104
|
.toc-item-label-wrapper md-focus-ring {
|
|
68
105
|
position: absolute;
|
|
69
106
|
pointer-events: none;
|
|
70
|
-
border-radius: var(--md-sys-shape-corner-small);
|
|
107
|
+
border-radius: var(--md-sys-shape-corner-small, 8px);
|
|
71
108
|
--md-focus-ring-inward-offset: -7px;
|
|
72
109
|
}
|
|
73
|
-
|
|
110
|
+
|
|
111
|
+
.supporting-text {
|
|
112
|
+
font-size: var(--md-sys-typescale-body-medium-size);
|
|
113
|
+
line-height: var(--md-sys-typescale-body-medium-line-height);
|
|
114
|
+
letter-spacing: var(--md-sys-typescale-body-medium-tracking);
|
|
115
|
+
color: var(--md-sys-color-on-surface-variant);
|
|
116
|
+
}
|
|
117
|
+
|
|
118
|
+
.toc-chevron-button-wrapper {
|
|
119
|
+
position: relative;
|
|
74
120
|
margin-left: auto;
|
|
121
|
+
display: flex;
|
|
122
|
+
align-items: flex-start;
|
|
75
123
|
}
|
|
124
|
+
|
|
125
|
+
.toc-chevron-button {
|
|
126
|
+
position: relative;
|
|
127
|
+
display: inline-flex;
|
|
128
|
+
align-items: center;
|
|
129
|
+
justify-content: center;
|
|
130
|
+
inline-size: 40px;
|
|
131
|
+
block-size: 40px;
|
|
132
|
+
padding: 0;
|
|
133
|
+
border: 0;
|
|
134
|
+
background: transparent;
|
|
135
|
+
border-radius: 999px;
|
|
136
|
+
cursor: pointer;
|
|
137
|
+
color: inherit;
|
|
138
|
+
-webkit-tap-highlight-color: transparent;
|
|
139
|
+
}
|
|
140
|
+
|
|
141
|
+
.toc-chevron-button:focus {
|
|
142
|
+
outline: none;
|
|
143
|
+
}
|
|
144
|
+
|
|
145
|
+
.toc-chevron-button md-ripple {
|
|
146
|
+
border-radius: inherit;
|
|
147
|
+
}
|
|
148
|
+
|
|
149
|
+
.toc-chevron-button-wrapper md-focus-ring {
|
|
150
|
+
position: absolute;
|
|
151
|
+
inset: 0;
|
|
152
|
+
pointer-events: none;
|
|
153
|
+
border-radius: 999px;
|
|
154
|
+
--md-focus-ring-inward-offset: -7px;
|
|
155
|
+
height: var(--icon-size-large, 40px);
|
|
156
|
+
}
|
|
157
|
+
|
|
158
|
+
.toc-chevron-icon {
|
|
159
|
+
transform: rotate(0deg);
|
|
160
|
+
transition: transform var(--motion-duration-medium, var(--scb-toc-transition-duration))
|
|
161
|
+
var(--motion-easing-standard, var(--scb-toc-transition-easing));
|
|
162
|
+
}
|
|
163
|
+
|
|
164
|
+
:host([expanded]) .toc-chevron-icon {
|
|
165
|
+
transform: rotate(180deg);
|
|
166
|
+
}
|
|
167
|
+
|
|
76
168
|
scb-divider {
|
|
77
|
-
margin: var(--spacing-0) var(--spacing-3);
|
|
169
|
+
margin: var(--spacing-0, 0px) var(--spacing-3, 8px);
|
|
78
170
|
}
|
|
171
|
+
|
|
172
|
+
/* Animerar panelen utan JS genom grid-template-rows 0fr till 1fr */
|
|
79
173
|
.scb-toc-item-bottom {
|
|
174
|
+
display: grid;
|
|
175
|
+
grid-template-rows: 0fr;
|
|
176
|
+
transition:
|
|
177
|
+
grid-template-rows var(--scb-toc-transition-duration) var(--scb-toc-transition-easing),
|
|
178
|
+
opacity var(--scb-toc-transition-duration) var(--scb-toc-transition-easing),
|
|
179
|
+
padding var(--scb-toc-transition-duration) var(--scb-toc-transition-easing);
|
|
180
|
+
opacity: 0;
|
|
181
|
+
overflow: hidden;
|
|
182
|
+
padding-top: var(--spacing-0, 0px);
|
|
183
|
+
padding-right: var(--spacing-5, 16px);
|
|
184
|
+
padding-bottom: var(--scb-toc-panel-padding-closed);
|
|
185
|
+
padding-left: var(--spacing-9, 32px);
|
|
80
186
|
font-size: var(--md-sys-typescale-body-medium-size);
|
|
81
187
|
line-height: var(--md-sys-typescale-body-medium-line-height); /* 150% */
|
|
82
188
|
letter-spacing: var(--md-sys-typescale-body-medium-tracking);
|
|
83
189
|
}
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
190
|
+
|
|
191
|
+
:host([expanded]) .scb-toc-item-bottom {
|
|
192
|
+
grid-template-rows: 1fr;
|
|
193
|
+
opacity: 1;
|
|
194
|
+
padding-bottom: var(--spacing-5, 16px);
|
|
195
|
+
}
|
|
196
|
+
|
|
197
|
+
.bottom-inner {
|
|
87
198
|
overflow: hidden;
|
|
88
|
-
transition: .15s cubic-bezier(.69,.16,.2,.98);
|
|
89
|
-
opacity: var(--spacing-0);
|
|
90
199
|
}
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
max-height: 100%;
|
|
200
|
+
|
|
201
|
+
:host([expanded][data-expanded-settled]) .scb-toc-item-bottom {
|
|
202
|
+
overflow: visible;
|
|
95
203
|
}
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
204
|
+
|
|
205
|
+
:host([expanded][data-expanded-settled]) .bottom-inner {
|
|
206
|
+
overflow: visible;
|
|
207
|
+
}
|
|
208
|
+
|
|
209
|
+
@media (prefers-reduced-motion: reduce) {
|
|
210
|
+
.scb-toc-item-bottom,
|
|
211
|
+
.toc-chevron-icon {
|
|
212
|
+
transition: none;
|
|
213
|
+
}
|
|
214
|
+
|
|
215
|
+
md-ripple {
|
|
216
|
+
display: none;
|
|
217
|
+
}
|
|
99
218
|
}
|
|
100
|
-
`];c([
|
|
219
|
+
`];c([p({type:Boolean,reflect:!0})],n.prototype,"expanded",2);c([p({type:String,reflect:!0})],n.prototype,"label",2);c([p({type:String,attribute:"supporting-text"})],n.prototype,"supportingText",2);c([p({type:String,attribute:"item-href"})],n.prototype,"itemHref",2);c([p({type:Boolean,attribute:"divider"})],n.prototype,"divider",2);n=c([f("scb-toc-item")],n);
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import{a as _,n as h,i as g,x as b,t as v}from"../../vendor/vendor.js";import"./scb-toc-item.js";import"../scb-
|
|
1
|
+
import{a as _,n as h,i as g,x as b,t as v}from"../../vendor/vendor.js";import"./scb-toc-item.js";import"../scb-divider/scb-divider.js";import"../../vendor/vendor-material.js";(function(){try{var t=typeof globalThis<"u"?globalThis:window;if(!t.__scb_ce_guard_installed__){t.__scb_ce_guard_installed__=!0;var s=customElements.define.bind(customElements);customElements.define=function(e,c,i){try{customElements.get(e)||s(e,c,i)}catch(n){var o=String(n||"");if(o.indexOf("already been used")===-1&&o.indexOf("NotSupportedError")===-1)throw n}}}}catch{}})();var y=Object.defineProperty,m=Object.getOwnPropertyDescriptor,u=t=>{throw TypeError(t)},l=(t,s,e,c)=>{for(var i=c>1?void 0:c?m(s,e):s,o=t.length-1,n;o>=0;o--)(n=t[o])&&(i=(c?n(s,e,i):n(i))||i);return c&&i&&y(s,e,i),i},S=(t,s,e)=>s.has(t)||u("Cannot "+e),k=(t,s,e)=>s.has(t)?u("Cannot add the same private member more than once"):s instanceof WeakSet?s.add(t):s.set(t,e),p=(t,s,e)=>(S(t,s,"access private method"),e),r,f,d;let a=class extends g{constructor(){super(...arguments),k(this,r),this.detached=!1,this.spacing="",this.spacingTop="",this.spacingBottom=""}firstUpdated(t){p(this,r,f).call(this)}updated(t){super.updated(t),(t.has("spacing")||t.has("spacingTop")||t.has("spacingBottom"))&&p(this,r,f).call(this)}render(){return b`
|
|
2
2
|
<div class="scb-toc-list" role="list">
|
|
3
3
|
<slot></slot>
|
|
4
4
|
</div>
|
package/mvc/scb-wc-test.css
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
1
|
@import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined&display=swap&icon_names=add,add_circle,apartment,arrow_back,arrow_back_ios,arrow_downward,arrow_drop_down,arrow_forward,arrow_forward_ios,arrow_outward,arrow_right,arrow_upward,article,assistant_direction,auto_stories,ballot,bar_chart,bid_landscape,book,book_2,border_color,breaking_news,bubble_chart,build,calendar_month,calendar_today,call_made,cancel,check,check_box,check_box_outline_blank,check_circle,check_small,checklist,chevron_left,chevron_right,close,code,code_blocks,colors,comment,compare_arrows,contact_support,content_copy,data_info_alert,data_table,database,database_search,deceased,delete,deployed_code,description,download,eco,edit,edit_square,error,event_note,expand_less,expand_more,explore,face,favorite,female,fiber_manual_record,filter_alt,filter_list,filter_vintage,folder,format_align_left,format_bold,format_color_text,format_list_bulleted,fullscreen,fullscreen_exit,grain,graph_7,grid_on,group,hearing,help,home,image,import_contacts,indeterminate_check_box,info,insert_chart,insert_chart_filled,inventory,keyboard_arrow_down,keyboard_arrow_up,label,language,laptop_windows,leaderboard,lightbulb,link,list,list_alt,location_on,location_searching,mail,male,manufacturing,menu,menu_book,mic,mobile,mobile_arrow_down,mode_comment,more_horiz,more_vert,mouse,nature,near_me,open_in_new,payment,percent,person,person_4,person_add,person_play,pin,play_arrow,preview,price_change,print,progress_activity,public,radio_button_checked,radio_button_unchecked,refresh,release_alert,remove,remove_circle,reorder,repeat,reply,restore,save,search,sell,settings,share,shopping_cart,shoppingmode,show_chart,sort,spa,space_bar,ssid_chart,straighten,style,subject,support,swap_horiz,table_chart,tablet,texture,thumb_up,toggle_off,toggle_on,touch_app,tune,unfold_less,unfold_more,upload,verified,view_list,view_module,visibility,visibility_off,volume_up,warning,work');
|
|
2
|
-
@import url(https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap);:root{color-scheme:light dark;--p-100:#FFFFFF;--p-99:#FAFDFF;--p-95:#EBF8FF;--p-90:#D6F1FF;--p-80:#B8E7FF;--p-70:#99D1FF;--p-60:#75AFFF;--p-50:#477EFF;--p-40:#1F44FF;--p-30:#1E00BE;--p-20:#0F0865;--p-10:#0B0544;--p-0:#000000;--s-100:#FFFFFF;--s-99:#FFFAFF;--s-95:#FFEBFF;--s-90:#FFDBFF;--s-80:#FFC2FF;--s-70:#FA9EFA;--s-60:#EC75F0;--s-50:#D850E2;--s-40:#B633C1;--s-30:#91219C;--s-20:#6A1471;--s-10:#430449;--s-0:#000000;--t-100:#FFFFFF;--t-99:#FAFFFA;--t-95:#E7FEE9;--t-90:#C1FAC9;--t-80:#91EDAD;--t-70:#50E294;--t-60:#00CC7B;--t-50:#00A865;--t-40:#008A53;--t-30:#007041;--t-20:#004D2D;--t-10:#00331E;--t-0:#000000;--e-100:#FFFFFF;--e-99:#FFFBFA;--e-95:#FFFEEB;--e-90:#FFD7C7;--e-80:#FFB699;--e-70:#FA9269;--e-60:#ED7140;--e-50:#DB490F;--e-40:#BF3600;--e-30:#942500;--e-20:#631900;--e-10:#3D0C00;--e-0:#000000;--w-100:#FFFFFF;--w-99:#FFFCEB;--w-95:#FFF7D1;--w-90:#FEEEA0;--w-80:#FCE369;--w-70:#F3D53F;--w-60:#E6C10A;--w-50:#D1A400;--w-40:#B28C00;--w-30:#8F7200;--w-20:#6B5600;--w-10:#473800;--w-0:#000000;--n-100:#FFFFFF;--n-99:#FAFAFA;--n-95:#F0F0F0;--n-90:#DBDBDB;--n-80:#CCCCCC;--n-70:#B3B3B3;--n-60:#999999;--n-50:#808080;--n-40:#666666;--n-30:#4D4D4D;--n-20:#333333;--n-10:#1A1A1A;--n-0:#000000;--nv-100:#FFFFFF;--nv-99:#FDFCF7;--nv-95:#F9F8EF;--nv-90:#EAE7D7;--nv-80:#D7D4BC;--nv-70:#BEB39D;--nv-60:#A69D8C;--nv-50:#726F65;--nv-40:#504F49;--nv-30:#3B3A35;--nv-20:#2B2A27;--nv-10:#1B1A18;--nv-0:#000000;--brand-font:"Inter", sans-serif;--weight-regular:400;--weight-semibold:600;--weight-bold:700;--scale-01:12px;--scale-02:14px;--scale-03:16px;--scale-04:18px;--scale-05:20px;--scale-06:24px;--scale-07:28px;--scale-08:32px;--scale-09:36px;--scale-10:40px;--scale-11:48px;--scale-12:64px;--scale-13:80px;--spacing-neg-4:-12px;--spacing-neg-3:-8px;--spacing-neg-2:-4px;--spacing-neg-1:-2px;--spacing-0:0px;--spacing-1:2px;--spacing-2:4px;--spacing-3:8px;--spacing-4:12px;--spacing-5:16px;--spacing-6:20px;--spacing-7:24px;--spacing-8:32px;--spacing-9:40px;--spacing-10:48px;--spacing-11:64px;--spacing-12:80px;--spacing-13:96px;--spacing-14:120px;--line-height-01:18px;--line-height-02:20px;--line-height-03:24px;--line-height-04:26px;--line-height-05:28px;--line-height-06:32px;--line-height-07:34px;--line-height-08:38px;--line-height-09:42px;--line-height-10:56px;--line-height-11:76px;--tracking-01:0px;--tracking-02:-0.1px;--tracking-03:-0.15px;--tracking-04:-0.3px;--tracking-05:-0.4px;--tracking-06:-0.6px;--tracking-07:-0.7px;--md-sys-typescale-display-large-font:var(--brand-font);--md-sys-typescale-display-large-size:40px;--md-sys-typescale-display-large-line-height:46px;--md-sys-typescale-display-large-weight:var(--weight-bold);--md-sys-typescale-display-large-tracking:-0.7px;--md-sys-typescale-display-medium-font:var(--brand-font);--md-sys-typescale-display-medium-size:36px;--md-sys-typescale-display-medium-line-height:42px;--md-sys-typescale-display-medium-weight:var(--weight-bold);--md-sys-typescale-display-medium-tracking:-0.6px;--md-sys-typescale-display-small-font:var(--brand-font);--md-sys-typescale-display-small-size:32px;--md-sys-typescale-display-small-line-height:38px;--md-sys-typescale-display-small-weight:var(--weight-bold);--md-sys-typescale-display-small-tracking:-0.6px;--md-sys-typescale-headline-large-font:var(--brand-font);--md-sys-typescale-headline-large-size:28px;--md-sys-typescale-headline-large-line-height:34px;--md-sys-typescale-headline-large-weight:var(--weight-bold);--md-sys-typescale-headline-large-tracking:-0.6px;--md-sys-typescale-headline-medium-font:var(--brand-font);--md-sys-typescale-headline-medium-size:24px;--md-sys-typescale-headline-medium-line-height:30px;--md-sys-typescale-headline-medium-weight:var(--weight-bold);--md-sys-typescale-headline-medium-tracking:-0.6px;--md-sys-typescale-headline-small-font:var(--brand-font);--md-sys-typescale-headline-small-size:22px;--md-sys-typescale-headline-small-line-height:28px;--md-sys-typescale-headline-small-weight:var(--weight-bold);--md-sys-typescale-headline-small-tracking:-0.5px;--md-sys-typescale-title-large-font:var(--brand-font);--md-sys-typescale-title-large-size:20px;--md-sys-typescale-title-large-line-height:28px;--md-sys-typescale-title-large-weight:var(--weight-semibold);--md-sys-typescale-title-large-tracking:-0.4px;--md-sys-typescale-title-medium-font:var(--brand-font);--md-sys-typescale-title-medium-size:18px;--md-sys-typescale-title-medium-line-height:26px;--md-sys-typescale-title-medium-weight:var(--weight-semibold);--md-sys-typescale-title-medium-tracking:-0.3px;--md-sys-typescale-title-small-font:var(--brand-font);--md-sys-typescale-title-small-size:16px;--md-sys-typescale-title-small-line-height:24px;--md-sys-typescale-title-small-weight:var(--weight-semibold);--md-sys-typescale-title-small-tracking:-0.15px;--md-sys-typescale-label-large-font:var(--brand-font);--md-sys-typescale-label-large-size:18px;--md-sys-typescale-label-large-line-height:26px;--md-sys-typescale-label-large-weight:var(--weight-semibold);--md-sys-typescale-label-large-tracking:-0.3px;--md-sys-typescale-label-medium-font:var(--brand-font);--md-sys-typescale-label-medium-size:16px;--md-sys-typescale-label-medium-line-height:24px;--md-sys-typescale-label-medium-weight:var(--weight-semibold);--md-sys-typescale-label-medium-tracking:-0.15px;--md-sys-typescale-label-small-font:var(--brand-font);--md-sys-typescale-label-small-size:14px;--md-sys-typescale-label-small-line-height:20px;--md-sys-typescale-label-small-weight:var(--weight-semibold);--md-sys-typescale-label-small-tracking:0.1px;--md-sys-typescale-body-large-font:var(--brand-font);--md-sys-typescale-body-large-size:18px;--md-sys-typescale-body-large-line-height:26px;--md-sys-typescale-body-large-weight:var(--weight-regular);--md-sys-typescale-body-large-tracking:-0.3px;--md-sys-typescale-body-medium-font:var(--brand-font);--md-sys-typescale-body-medium-size:16px;--md-sys-typescale-body-medium-line-height:24px;--md-sys-typescale-body-medium-weight:var(--weight-regular);--md-sys-typescale-body-medium-tracking:-0.15px;--md-sys-typescale-body-small-font:var(--brand-font);--md-sys-typescale-body-small-size:14px;--md-sys-typescale-body-small-line-height:20px;--md-sys-typescale-body-small-weight:var(--weight-regular);--md-sys-typescale-body-small-tracking:-0.1px;--md-sys-color-primary:light-dark(var(--p-40), var(--p-70));--md-sys-color-on-primary:light-dark(var(--p-100), var(--p-20));--md-sys-color-primary-container:light-dark(var(--p-80), var(--p-30));--md-sys-color-on-primary-container:light-dark(var(--p-30), var(--p-100));--md-sys-color-primary-fixed:light-dark(var(--p-90), var(--p-90));--md-sys-color-primary-fixed-dim:light-dark(var(--p-80), var(--p-80));--md-sys-color-on-primary-fixed:light-dark(var(--p-20), var(--p-20));--md-sys-color-on-primary-fixed-variant:light-dark(var(--p-30), var(--p-30));--md-sys-color-secondary:light-dark(var(--p-20), var(--p-80));--md-sys-color-on-secondary:light-dark(var(--p-100), var(--p-20));--md-sys-color-secondary-container:light-dark(var(--p-90), var(--p-30));--md-sys-color-on-secondary-container:light-dark(var(--p-30), var(--p-100));--md-sys-color-secondary-fixed:light-dark(var(--p-90), var(--p-90));--md-sys-color-secondary-fixed-dim:light-dark(var(--p-80), var(--p-80));--md-sys-color-on-secondary-fixed:light-dark(var(--p-20), var(--p-20));--md-sys-color-on-secondary-fixed-variant:light-dark(var(--p-30), var(--p-30));--md-sys-color-tertiary:light-dark(var(--s-40), var(--s-80));--md-sys-color-on-tertiary:light-dark(var(--t-100), var(--s-20));--md-sys-color-tertiary-container:light-dark(var(--s-90), var(--s-10));--md-sys-color-on-tertiary-container:light-dark(var(--s-20), var(--s-100));--md-sys-color-tertiary-fixed:light-dark(var(--s-90), var(--s-90));--md-sys-color-tertiary-fixed-dim:light-dark(var(--s-80), var(--s-80));--md-sys-color-on-tertiary-fixed:light-dark(var(--s-10), var(--s-10));--md-sys-color-on-tertiary-fixed-variant:light-dark(var(--s-30), var(--s-30));--md-sys-color-background:light-dark(var(--p-100), var(--p-0));--md-sys-color-on-background:light-dark(var(--p-20), var(--p-100));--md-sys-color-surface:light-dark(var(--nv-100), var(--nv-20));--md-sys-color-surface-variant:light-dark(var(--nv-99), var(--n-10));--md-sys-color-surface-bright:light-dark(var(--nv-99), var(--nv-20));--md-sys-color-surface-dim:light-dark(var(--nv-95), var(--nv-10));--md-sys-color-surface-container-lowest:light-dark(var(--p-100), var(--nv-0));--md-sys-color-surface-container-low:light-dark(var(--p-99), var(--nv-10));--md-sys-color-surface-container:light-dark(var(--p-95), var(--nv-20));--md-sys-color-surface-container-high:light-dark(var(--p-90), var(--nv-20));--md-sys-color-surface-container-highest:light-dark(var(--p-80), var(--nv-20));--md-sys-color-surface-tint:light-dark(var(--p-40), var(--p-70));--md-sys-color-on-surface:light-dark(var(--p-20), var(--p-100));--md-sys-color-on-surface-variant:light-dark(var(--p-20), var(--p-100));--md-sys-color-inverse-surface:light-dark(var(--p-20), var(--p-90));--md-sys-color-inverse-on-surface:light-dark(var(--p-95), var(--p-20));--md-sys-color-inverse-primary:light-dark(var(--p-80), var(--p-40));--md-sys-color-outline:light-dark(var(--n-50), var(--n-30));--md-sys-color-outline-variant:light-dark(var(--n-80), var(--n-30));--md-sys-color-scrim:light-dark(var(--n-0), var(--n-0));--md-sys-color-shadow:light-dark(var(--n-0), var(--n-0));--md-sys-color-error:light-dark(var(--e-40), var(--e-80));--md-sys-color-on-error:light-dark(var(--e-100), var(--e-20));--md-sys-color-error-container:light-dark(var(--e-90), var(--e-20));--md-sys-color-on-error-container:light-dark(var(--e-30), var(--e-95));--md-sys-color-warning:light-dark(var(--w-40), var(--w-80));--md-sys-color-on-warning:light-dark(var(--w-100), var(--w-20));--md-sys-color-warning-container:light-dark(var(--w-90), var(--w-20));--md-sys-color-on-warning-container:light-dark(var(--w-20), var(--w-95));--md-sys-color-info:light-dark(var(--p-40), var(--p-80));--md-sys-color-on-info:light-dark(var(--p-100), var(--p-20));--md-sys-color-info-container:light-dark(var(--p-90), var(--p-20));--md-sys-color-on-info-container:light-dark(var(--p-30), var(--p-95));--md-sys-color-success:light-dark(var(--t-40), var(--t-80));--md-sys-color-on-success:light-dark(var(--t-100), var(--t-20));--md-sys-color-success-container:light-dark(var(--t-95), var(--t-20));--md-sys-color-on-success-container:light-dark(var(--t-30), var(--t-95));--radius-none:0px;--radius-xs:4px;--radius-s:8px;--radius-m:12px;--radius-l:16px;--radius-xl:24px;--radius-full:1000px;--md-sys-shape-corner-none:var(--radius-none);--md-sys-shape-corner-extra-small:var(--radius-xs);--md-sys-shape-corner-small:var(--radius-s);--md-sys-shape-corner-medium:var(--radius-m);--md-sys-shape-corner-large:var(--radius-l);--md-sys-shape-corner-extra-large:var(--radius-xl);--md-sys-shape-corner-full:var(--radius-full);--stroke-border:1px;--stroke-focus-ring:3px;--md-focus-ring-color:light-dark(var(--p-40), var(--p-80));--md-focus-ring-width:var(--stroke-focus-ring);--md-outlined-button-outline-width:var(--stroke-border);--md-outlined-field-outline-width:var(--stroke-border);--icon-size-small:24px;--icon-size-medium:32px;--icon-size-large:40px;--icon-size-number:0px}:root[data-density="-2"],[data-density="-2"]{--spacing-0:0px;--spacing-1:0px;--spacing-2:2px;--spacing-3:6px;--spacing-4:10px;--spacing-5:14px;--spacing-6:18px;--spacing-7:20px;--spacing-8:28px;--spacing-9:36px;--spacing-10:42px;--spacing-11:56px;--spacing-12:72px;--spacing-13:88px;--spacing-14:112px}:root[data-density="-4"],[data-density="-4"]{--spacing-0:0px;--spacing-1:0px;--spacing-2:0px;--spacing-3:4px;--spacing-4:8px;--spacing-5:12px;--spacing-6:16px;--spacing-7:16px;--spacing-8:24px;--spacing-9:36px;--spacing-10:36px;--spacing-11:50px;--spacing-12:64px;--spacing-13:80px;--spacing-14:104px}@media (min-width:600px){:root{--md-sys-typescale-display-large-size:64px;--md-sys-typescale-display-large-line-height:70px;--md-sys-typescale-display-large-tracking:-0.9px;--md-sys-typescale-display-medium-size:48px;--md-sys-typescale-display-medium-line-height:54px;--md-sys-typescale-display-medium-tracking:-0.7px;--md-sys-typescale-display-small-size:36px;--md-sys-typescale-display-small-line-height:42px;--md-sys-typescale-display-small-tracking:-0.6px;--md-sys-typescale-headline-large-size:32px;--md-sys-typescale-headline-large-line-height:38px;--md-sys-typescale-headline-large-tracking:-0.6px;--md-sys-typescale-headline-medium-size:28px;--md-sys-typescale-headline-medium-line-height:34px;--md-sys-typescale-headline-medium-tracking:-0.6px;--md-sys-typescale-headline-small-size:24px;--md-sys-typescale-headline-small-line-height:30px;--md-sys-typescale-headline-small-tracking:-0.6px}}label{color:light-dark(var(--p-10),var(--p-100))}fieldset.scb-fieldset{border:0;padding:0;margin:0}fieldset.scb-fieldset+fieldset.scb-fieldset{margin-block-start:var(--spacing-8, 32px)}legend.scb-legend{display:block;margin:0 0 var(--spacing-6, 20px)0;font-family:var(--brand-font);font-size:var(--md-sys-typescale-title-small-size);line-height:var(--md-sys-typescale-title-small-line-height);font-weight:var(--weight-semibold);letter-spacing:var(--md-sys-typescale-title-small-tracking);color:var(--md-sys-color-on-surface)}fieldset.scb-fieldset[disabled]{opacity:.7}
|
|
2
|
+
@import url(https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap);@keyframes scb-kf-fade-in{0%{opacity:0}to{opacity:1}}@keyframes scb-kf-fade-out{0%{opacity:1}to{opacity:0}}@keyframes scb-kf-slide-in{0%{opacity:0;transform:translate(var(--scb-kf-slide-from-x, -16px),var(--scb-kf-slide-from-y, 0px))}to{opacity:1;transform:translate(0,0)}}@keyframes scb-kf-slide-out{0%{opacity:1;transform:translate(0,0)}to{opacity:0;transform:translate(var(--scb-kf-slide-to-x, 16px),var(--scb-kf-slide-to-y, 0px))}}@keyframes scb-kf-scale-in{0%{opacity:0;transform:scale(var(--scb-kf-scale-from, 0.96))}to{opacity:1;transform:scale(1)}}@keyframes scb-kf-scale-out{0%{opacity:1;transform:scale(1)}to{opacity:0;transform:scale(var(--scb-kf-scale-to, 0.98))}}@keyframes scb-kf-pulse{0%,to{transform:scale(1)}50%{transform:scale(var(--scb-kf-pulse-scale, 1.04))}}:root{color-scheme:light dark;--p-100:#FFFFFF;--p-99:#FAFDFF;--p-95:#EBF8FF;--p-90:#D6F1FF;--p-80:#B8E7FF;--p-70:#99D1FF;--p-60:#75AFFF;--p-50:#477EFF;--p-40:#1F44FF;--p-30:#1E00BE;--p-20:#0F0865;--p-10:#0B0544;--p-0:#000000;--s-100:#FFFFFF;--s-99:#FFFAFF;--s-95:#FFEBFF;--s-90:#FFDBFF;--s-80:#FFC2FF;--s-70:#FA9EFA;--s-60:#EC75F0;--s-50:#D850E2;--s-40:#B633C1;--s-30:#91219C;--s-20:#6A1471;--s-10:#430449;--s-0:#000000;--t-100:#FFFFFF;--t-99:#FAFFFA;--t-95:#E7FEE9;--t-90:#C1FAC9;--t-80:#91EDAD;--t-70:#50E294;--t-60:#00CC7B;--t-50:#00A865;--t-40:#008A53;--t-30:#007041;--t-20:#004D2D;--t-10:#00331E;--t-0:#000000;--e-100:#FFFFFF;--e-99:#FFFBFA;--e-95:#FFFEEB;--e-90:#FFD7C7;--e-80:#FFB699;--e-70:#FA9269;--e-60:#ED7140;--e-50:#DB490F;--e-40:#BF3600;--e-30:#942500;--e-20:#631900;--e-10:#3D0C00;--e-0:#000000;--w-100:#FFFFFF;--w-99:#FFFCEB;--w-95:#FFF7D1;--w-90:#FEEEA0;--w-80:#FCE369;--w-70:#F3D53F;--w-60:#E6C10A;--w-50:#D1A400;--w-40:#B28C00;--w-30:#8F7200;--w-20:#6B5600;--w-10:#473800;--w-0:#000000;--n-100:#FFFFFF;--n-99:#FAFAFA;--n-95:#F0F0F0;--n-90:#DBDBDB;--n-80:#CCCCCC;--n-70:#B3B3B3;--n-60:#999999;--n-50:#808080;--n-40:#666666;--n-30:#4D4D4D;--n-20:#333333;--n-10:#1A1A1A;--n-0:#000000;--nv-100:#FFFFFF;--nv-99:#FDFCF7;--nv-95:#F9F8EF;--nv-90:#EAE7D7;--nv-80:#D7D4BC;--nv-70:#BEB39D;--nv-60:#A69D8C;--nv-50:#726F65;--nv-40:#504F49;--nv-30:#3B3A35;--nv-20:#2B2A27;--nv-10:#1B1A18;--nv-0:#000000;--brand-font:"Inter", sans-serif;--weight-regular:400;--weight-semibold:600;--weight-bold:700;--scale-01:12px;--scale-02:14px;--scale-03:16px;--scale-04:18px;--scale-05:20px;--scale-06:24px;--scale-07:28px;--scale-08:32px;--scale-09:36px;--scale-10:40px;--scale-11:48px;--scale-12:64px;--scale-13:80px;--spacing-neg-4:-12px;--spacing-neg-3:-8px;--spacing-neg-2:-4px;--spacing-neg-1:-2px;--spacing-0:0px;--spacing-1:2px;--spacing-2:4px;--spacing-3:8px;--spacing-4:12px;--spacing-5:16px;--spacing-6:20px;--spacing-7:24px;--spacing-8:32px;--spacing-9:40px;--spacing-10:48px;--spacing-11:64px;--spacing-12:80px;--spacing-13:96px;--spacing-14:120px;--line-height-01:18px;--line-height-02:20px;--line-height-03:24px;--line-height-04:26px;--line-height-05:28px;--line-height-06:32px;--line-height-07:34px;--line-height-08:38px;--line-height-09:42px;--line-height-10:56px;--line-height-11:76px;--tracking-01:0px;--tracking-02:-0.1px;--tracking-03:-0.15px;--tracking-04:-0.3px;--tracking-05:-0.4px;--tracking-06:-0.6px;--tracking-07:-0.7px;--md-sys-typescale-display-large-font:var(--brand-font);--md-sys-typescale-display-large-size:40px;--md-sys-typescale-display-large-line-height:46px;--md-sys-typescale-display-large-weight:var(--weight-bold);--md-sys-typescale-display-large-tracking:-0.7px;--md-sys-typescale-display-medium-font:var(--brand-font);--md-sys-typescale-display-medium-size:36px;--md-sys-typescale-display-medium-line-height:42px;--md-sys-typescale-display-medium-weight:var(--weight-bold);--md-sys-typescale-display-medium-tracking:-0.6px;--md-sys-typescale-display-small-font:var(--brand-font);--md-sys-typescale-display-small-size:32px;--md-sys-typescale-display-small-line-height:38px;--md-sys-typescale-display-small-weight:var(--weight-bold);--md-sys-typescale-display-small-tracking:-0.6px;--md-sys-typescale-headline-large-font:var(--brand-font);--md-sys-typescale-headline-large-size:28px;--md-sys-typescale-headline-large-line-height:34px;--md-sys-typescale-headline-large-weight:var(--weight-bold);--md-sys-typescale-headline-large-tracking:-0.6px;--md-sys-typescale-headline-medium-font:var(--brand-font);--md-sys-typescale-headline-medium-size:24px;--md-sys-typescale-headline-medium-line-height:30px;--md-sys-typescale-headline-medium-weight:var(--weight-bold);--md-sys-typescale-headline-medium-tracking:-0.6px;--md-sys-typescale-headline-small-font:var(--brand-font);--md-sys-typescale-headline-small-size:22px;--md-sys-typescale-headline-small-line-height:28px;--md-sys-typescale-headline-small-weight:var(--weight-bold);--md-sys-typescale-headline-small-tracking:-0.5px;--md-sys-typescale-title-large-font:var(--brand-font);--md-sys-typescale-title-large-size:20px;--md-sys-typescale-title-large-line-height:28px;--md-sys-typescale-title-large-weight:var(--weight-semibold);--md-sys-typescale-title-large-tracking:-0.4px;--md-sys-typescale-title-medium-font:var(--brand-font);--md-sys-typescale-title-medium-size:18px;--md-sys-typescale-title-medium-line-height:26px;--md-sys-typescale-title-medium-weight:var(--weight-semibold);--md-sys-typescale-title-medium-tracking:-0.3px;--md-sys-typescale-title-small-font:var(--brand-font);--md-sys-typescale-title-small-size:16px;--md-sys-typescale-title-small-line-height:24px;--md-sys-typescale-title-small-weight:var(--weight-semibold);--md-sys-typescale-title-small-tracking:-0.15px;--md-sys-typescale-label-large-font:var(--brand-font);--md-sys-typescale-label-large-size:18px;--md-sys-typescale-label-large-line-height:26px;--md-sys-typescale-label-large-weight:var(--weight-semibold);--md-sys-typescale-label-large-tracking:-0.3px;--md-sys-typescale-label-medium-font:var(--brand-font);--md-sys-typescale-label-medium-size:16px;--md-sys-typescale-label-medium-line-height:24px;--md-sys-typescale-label-medium-weight:var(--weight-semibold);--md-sys-typescale-label-medium-tracking:-0.15px;--md-sys-typescale-label-small-font:var(--brand-font);--md-sys-typescale-label-small-size:14px;--md-sys-typescale-label-small-line-height:20px;--md-sys-typescale-label-small-weight:var(--weight-semibold);--md-sys-typescale-label-small-tracking:0.1px;--md-sys-typescale-body-large-font:var(--brand-font);--md-sys-typescale-body-large-size:18px;--md-sys-typescale-body-large-line-height:26px;--md-sys-typescale-body-large-weight:var(--weight-regular);--md-sys-typescale-body-large-tracking:-0.3px;--md-sys-typescale-body-medium-font:var(--brand-font);--md-sys-typescale-body-medium-size:16px;--md-sys-typescale-body-medium-line-height:24px;--md-sys-typescale-body-medium-weight:var(--weight-regular);--md-sys-typescale-body-medium-tracking:-0.15px;--md-sys-typescale-body-small-font:var(--brand-font);--md-sys-typescale-body-small-size:14px;--md-sys-typescale-body-small-line-height:20px;--md-sys-typescale-body-small-weight:var(--weight-regular);--md-sys-typescale-body-small-tracking:-0.1px;--md-sys-color-primary:light-dark(var(--p-40), var(--p-70));--md-sys-color-on-primary:light-dark(var(--p-100), var(--p-20));--md-sys-color-primary-container:light-dark(var(--p-80), var(--p-30));--md-sys-color-on-primary-container:light-dark(var(--p-30), var(--p-100));--md-sys-color-primary-fixed:light-dark(var(--p-90), var(--p-90));--md-sys-color-primary-fixed-dim:light-dark(var(--p-80), var(--p-80));--md-sys-color-on-primary-fixed:light-dark(var(--p-20), var(--p-20));--md-sys-color-on-primary-fixed-variant:light-dark(var(--p-30), var(--p-30));--md-sys-color-secondary:light-dark(var(--p-20), var(--p-80));--md-sys-color-on-secondary:light-dark(var(--p-100), var(--p-20));--md-sys-color-secondary-container:light-dark(var(--p-90), var(--p-30));--md-sys-color-on-secondary-container:light-dark(var(--p-30), var(--p-100));--md-sys-color-secondary-fixed:light-dark(var(--p-90), var(--p-90));--md-sys-color-secondary-fixed-dim:light-dark(var(--p-80), var(--p-80));--md-sys-color-on-secondary-fixed:light-dark(var(--p-20), var(--p-20));--md-sys-color-on-secondary-fixed-variant:light-dark(var(--p-30), var(--p-30));--md-sys-color-tertiary:light-dark(var(--s-40), var(--s-80));--md-sys-color-on-tertiary:light-dark(var(--t-100), var(--s-20));--md-sys-color-tertiary-container:light-dark(var(--s-90), var(--s-10));--md-sys-color-on-tertiary-container:light-dark(var(--s-20), var(--s-100));--md-sys-color-tertiary-fixed:light-dark(var(--s-90), var(--s-90));--md-sys-color-tertiary-fixed-dim:light-dark(var(--s-80), var(--s-80));--md-sys-color-on-tertiary-fixed:light-dark(var(--s-10), var(--s-10));--md-sys-color-on-tertiary-fixed-variant:light-dark(var(--s-30), var(--s-30));--md-sys-color-background:light-dark(var(--p-100), var(--p-0));--md-sys-color-on-background:light-dark(var(--p-20), var(--p-100));--md-sys-color-surface:light-dark(var(--nv-100), var(--nv-20));--md-sys-color-surface-variant:light-dark(var(--nv-99), var(--n-10));--md-sys-color-surface-bright:light-dark(var(--nv-99), var(--nv-20));--md-sys-color-surface-dim:light-dark(var(--nv-95), var(--nv-10));--md-sys-color-surface-container-lowest:light-dark(var(--p-100), var(--nv-0));--md-sys-color-surface-container-low:light-dark(var(--p-99), var(--nv-10));--md-sys-color-surface-container:light-dark(var(--p-95), var(--nv-20));--md-sys-color-surface-container-high:light-dark(var(--p-90), var(--nv-20));--md-sys-color-surface-container-highest:light-dark(var(--p-80), var(--nv-20));--md-sys-color-surface-tint:light-dark(var(--p-40), var(--p-70));--md-sys-color-on-surface:light-dark(var(--p-20), var(--p-100));--md-sys-color-on-surface-variant:light-dark(var(--p-20), var(--p-100));--md-sys-color-inverse-surface:light-dark(var(--p-20), var(--p-90));--md-sys-color-inverse-on-surface:light-dark(var(--p-95), var(--p-20));--md-sys-color-inverse-primary:light-dark(var(--p-80), var(--p-40));--md-sys-color-outline:light-dark(var(--n-50), var(--n-30));--md-sys-color-outline-variant:light-dark(var(--n-80), var(--n-30));--md-sys-color-scrim:light-dark(var(--n-0), var(--n-0));--md-sys-color-shadow:light-dark(var(--n-0), var(--n-0));--md-sys-color-error:light-dark(var(--e-40), var(--e-80));--md-sys-color-on-error:light-dark(var(--e-100), var(--e-20));--md-sys-color-error-container:light-dark(var(--e-90), var(--e-20));--md-sys-color-on-error-container:light-dark(var(--e-30), var(--e-95));--md-sys-color-warning:light-dark(var(--w-40), var(--w-80));--md-sys-color-on-warning:light-dark(var(--w-100), var(--w-20));--md-sys-color-warning-container:light-dark(var(--w-90), var(--w-20));--md-sys-color-on-warning-container:light-dark(var(--w-20), var(--w-95));--md-sys-color-info:light-dark(var(--p-40), var(--p-80));--md-sys-color-on-info:light-dark(var(--p-100), var(--p-20));--md-sys-color-info-container:light-dark(var(--p-90), var(--p-20));--md-sys-color-on-info-container:light-dark(var(--p-30), var(--p-95));--md-sys-color-success:light-dark(var(--t-40), var(--t-80));--md-sys-color-on-success:light-dark(var(--t-100), var(--t-20));--md-sys-color-success-container:light-dark(var(--t-95), var(--t-20));--md-sys-color-on-success-container:light-dark(var(--t-30), var(--t-95));--radius-none:0px;--radius-xs:4px;--radius-s:8px;--radius-m:12px;--radius-l:16px;--radius-xl:24px;--radius-full:1000px;--md-sys-shape-corner-none:var(--radius-none);--md-sys-shape-corner-extra-small:var(--radius-xs);--md-sys-shape-corner-small:var(--radius-s);--md-sys-shape-corner-medium:var(--radius-m);--md-sys-shape-corner-large:var(--radius-l);--md-sys-shape-corner-extra-large:var(--radius-xl);--md-sys-shape-corner-full:var(--radius-full);--stroke-border:1px;--stroke-focus-ring:3px;--md-focus-ring-color:light-dark(var(--p-40), var(--p-80));--md-focus-ring-width:var(--stroke-focus-ring);--md-outlined-button-outline-width:var(--stroke-border);--md-outlined-field-outline-width:var(--stroke-border);--icon-size-small:24px;--icon-size-medium:32px;--icon-size-large:40px;--icon-size-number:0px}:root[data-density="-2"],[data-density="-2"]{--spacing-0:0px;--spacing-1:0px;--spacing-2:2px;--spacing-3:6px;--spacing-4:10px;--spacing-5:14px;--spacing-6:18px;--spacing-7:20px;--spacing-8:28px;--spacing-9:36px;--spacing-10:42px;--spacing-11:56px;--spacing-12:72px;--spacing-13:88px;--spacing-14:112px}:root[data-density="-4"],[data-density="-4"]{--spacing-0:0px;--spacing-1:0px;--spacing-2:0px;--spacing-3:4px;--spacing-4:8px;--spacing-5:12px;--spacing-6:16px;--spacing-7:16px;--spacing-8:24px;--spacing-9:30px;--spacing-10:36px;--spacing-11:50px;--spacing-12:64px;--spacing-13:80px;--spacing-14:104px}@media (min-width:600px){:root{--md-sys-typescale-display-large-size:64px;--md-sys-typescale-display-large-line-height:70px;--md-sys-typescale-display-large-tracking:-0.9px;--md-sys-typescale-display-medium-size:48px;--md-sys-typescale-display-medium-line-height:54px;--md-sys-typescale-display-medium-tracking:-0.7px;--md-sys-typescale-display-small-size:36px;--md-sys-typescale-display-small-line-height:42px;--md-sys-typescale-display-small-tracking:-0.6px;--md-sys-typescale-headline-large-size:32px;--md-sys-typescale-headline-large-line-height:38px;--md-sys-typescale-headline-large-tracking:-0.6px;--md-sys-typescale-headline-medium-size:28px;--md-sys-typescale-headline-medium-line-height:34px;--md-sys-typescale-headline-medium-tracking:-0.6px;--md-sys-typescale-headline-small-size:24px;--md-sys-typescale-headline-small-line-height:30px;--md-sys-typescale-headline-small-tracking:-0.6px}}:root{--motion-scale-1:0.98;--motion-scale-2:0.96;--motion-scale-3:0.94;--motion-scale-4:0.92;--motion-scale-5:0.90;--motion-distance-0:0px;--motion-distance-1:4px;--motion-distance-2:8px;--motion-distance-3:12px;--motion-distance-4:16px;--motion-scale:var(--motion-scale-3);--motion-easing-linear:cubic-bezier(0, 0, 1, 1);--motion-easing-standard:cubic-bezier(0.2, 0, 0, 1);--motion-easing-standard-accelerate:cubic-bezier(0.3, 0, 1, 1);--motion-easing-standard-decelerate:cubic-bezier(0, 0, 0, 1);--motion-easing-emphasized:var(--motion-easing-emphasized-decelerate);--motion-easing-emphasized-accelerate:cubic-bezier(0.3, 0, 0.8, 0.15);--motion-easing-emphasized-decelerate:cubic-bezier(0.05, 0.7, 0.1, 1);--motion-duration-short:calc(200ms * var(--motion-scale));--motion-duration-medium:calc(300ms * var(--motion-scale));--motion-duration-long:calc(500ms * var(--motion-scale));--motion-duration-extra-long:calc(700ms * var(--motion-scale));--motion-keyframe-fade-in:scb-kf-fade-in;--motion-keyframe-fade-out:scb-kf-fade-out;--motion-keyframe-slide-in:scb-kf-slide-in;--motion-keyframe-slide-out:scb-kf-slide-out;--motion-keyframe-scale-in:scb-kf-scale-in;--motion-keyframe-scale-out:scb-kf-scale-out;--motion-keyframe-pulse:scb-kf-pulse}:root[data-motion-scale="1"],[data-motion-scale="1"]{--motion-scale:var(--motion-scale-1)}:root[data-motion-scale="2"],[data-motion-scale="2"]{--motion-scale:var(--motion-scale-2)}:root[data-motion-scale="3"],[data-motion-scale="3"]{--motion-scale:var(--motion-scale-3)}:root[data-motion-scale="4"],[data-motion-scale="4"]{--motion-scale:var(--motion-scale-4)}:root[data-motion-scale="5"],[data-motion-scale="5"]{--motion-scale:var(--motion-scale-5)}@media (prefers-reduced-motion:reduce){:root{--motion-scale:var(--motion-scale-1)}}label{color:light-dark(var(--p-10),var(--p-100))}fieldset.scb-fieldset{border:0;padding:0;margin:0}fieldset.scb-fieldset+fieldset.scb-fieldset{margin-block-start:var(--spacing-8, 32px)}legend.scb-legend{display:block;margin:0 0 var(--spacing-6, 20px)0;font-family:var(--brand-font);font-size:var(--md-sys-typescale-title-small-size);line-height:var(--md-sys-typescale-title-small-line-height);font-weight:var(--weight-semibold);letter-spacing:var(--md-sys-typescale-title-small-tracking);color:var(--md-sys-color-on-surface)}fieldset.scb-fieldset[disabled]{opacity:.7}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "scb-wc-test",
|
|
3
|
-
"version": "0.1.
|
|
3
|
+
"version": "0.1.115",
|
|
4
4
|
"type": "module",
|
|
5
5
|
"main": "index.js",
|
|
6
6
|
"module": "index.js",
|
|
@@ -345,5 +345,5 @@
|
|
|
345
345
|
},
|
|
346
346
|
"./mvc/*": "./mvc/*"
|
|
347
347
|
},
|
|
348
|
-
"buildHash": "
|
|
348
|
+
"buildHash": "5280B566602038551107484C2861902B88628F01ED032DDCA25F777E945D869F"
|
|
349
349
|
}
|