scb-wc-test 0.1.344 → 0.1.345

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.
@@ -1,6 +1,6 @@
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"../scb-chevron/scb-chevron.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,o,s){try{customElements.get(i)||e(i,o,s)}catch(a){var l=String(a||"");if(l.indexOf("already been used")===-1&&l.indexOf("NotSupportedError")===-1)throw a}}}}catch{}})();var v=Object.defineProperty,g=Object.getOwnPropertyDescriptor,c=(t,e,i,o)=>{for(var s=o>1?void 0:o?g(e,i):e,l=t.length-1,a;l>=0;l--)(a=t[l])&&(s=(o?a(e,i,s):a(s))||s);return o&&s&&v(e,i,s),s};let r=class extends m{constructor(){super(...arguments),this.expanded=!1,this.label="",this.supportingText="",this.itemHref="#",this.noDivider=!1,this._unique=r._uid(),this._overflowVisibleTimer=null,this._slotHasContent=!1,this._trailingSlotHasContent=!1,this._onSlotChange=()=>{const t=this.renderRoot.querySelector("slot:not([name])"),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;this.setExpanded(t)},this._onKeyDown=t=>{const e=this.closest("scb-toc"),o=Array.from(e?.querySelectorAll("scb-toc-item")||[]).map(n=>({host:n,label:n.renderRoot.querySelector(".toc-item-label")||null})).filter(n=>!!n.label),s=o.findIndex(n=>n.host===this);if(s<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(),s<o.length-1&&o[s+1].label.focus();break;case"ArrowUp":t.preventDefault(),s>0&&o[s-1].label.focus();break;case"Home":t.preventDefault(),o.length&&o[0].label.focus();break;case"End":t.preventDefault(),o.length&&o[o.length-1].label.focus();break}}}setExpanded(t){this.expanded!==t&&(this.expanded=t)}static _uid(){return globalThis.crypto?.randomUUID?.()??`${r._uidPrefix}-${++r._uidSeq}`}firstUpdated(){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})),this.dispatchEvent(new CustomEvent("expandedchanged",{detail:{expanded:this.expanded,label:this.label},bubbles:!0,composed:!0})))}connectedCallback(){super.connectedCallback(),this._slotHasContent=Array.from(this.children).some(t=>{const e=t.getAttribute("slot");return e===null||e===""}),this._trailingSlotHasContent=Array.from(this.children).some(t=>t.getAttribute("slot")==="trailing"),!this._slotHasContent&&this.expanded&&(this.expanded=!1)}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(n=>n.trim()),o=e.transitionDelay.split(",").map(n=>n.trim()),s=n=>{const d=parseFloat(n);return Number.isFinite(d)?n.endsWith("ms")?d:n.endsWith("s")?d*1e3:d:0},l=Math.max(i.length,o.length);let a=0;for(let n=0;n<l;n+=1){const d=s(i[n]??i[i.length-1]??"0s"),b=s(o[n]??o[o.length-1]??"0s");a=Math.max(a,d+b)}return Math.ceil(a)}_supportsInert(){return"inert"in HTMLElement.prototype}_collectFocusableFromSlot(){const t=this.renderRoot.querySelector("slot:not([name])");if(!t)return[];const e=t.assignedElements({flatten:!0}),i=[],o=s=>{s instanceof HTMLElement&&s.matches("a,button,input,select,textarea,[tabindex]")&&i.push(s)};return e.forEach(s=>{o(s),s.querySelectorAll?.("a,button,input,select,textarea,[tabindex]").forEach(l=>o(l))}),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")})}render(){const t=`bottom-${this._unique}`,e=`toc-label-${this._unique}`,i=`toc-chevron-${this._unique}`;return u`
1
+ import{a as g,n as p,i as h,x as b,t as u}from"../../vendor/vendor.js";import"../scb-divider/scb-divider.js";import"../scb-chevron/scb-chevron.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(s,i,o){try{customElements.get(s)||e(s,i,o)}catch(r){var c=String(r||"");if(c.indexOf("already been used")===-1&&c.indexOf("NotSupportedError")===-1)throw r}}}}catch{}})();var v=Object.defineProperty,y=Object.getOwnPropertyDescriptor,l=(t,e,s,i)=>{for(var o=i>1?void 0:i?y(e,s):e,c=t.length-1,r;c>=0;c--)(r=t[c])&&(o=(i?r(e,s,o):r(o))||o);return i&&o&&v(e,s,o),o};let n=class extends h{constructor(){super(...arguments),this.expanded=!1,this.size="medium",this.label="",this.supportingText="",this.itemHref="#",this.noDivider=!1,this._unique=n._uid(),this._overflowVisibleTimer=null,this._slotHasContent=!1,this._trailingSlotHasContent=!1,this._onSlotChange=()=>{const t=this.renderRoot.querySelector("slot:not([name])"),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;this.setExpanded(t)},this._onKeyDown=t=>{const e=this.closest("scb-toc"),i=Array.from(e?.querySelectorAll("scb-toc-item")||[]).map(a=>({host:a,label:a.renderRoot.querySelector(".toc-item-label")||null})).filter(a=>!!a.label),o=i.findIndex(a=>a.host===this);if(o<0)return;const r=t.currentTarget?.classList?.contains("toc-chevron-button")??!1;switch(t.key){case"Enter":case" ":if(!r)return;t.preventDefault(),this._toggleAccordion();break;case"ArrowDown":t.preventDefault(),o<i.length-1&&i[o+1].label.focus();break;case"ArrowUp":t.preventDefault(),o>0&&i[o-1].label.focus();break;case"Home":t.preventDefault(),i.length&&i[0].label.focus();break;case"End":t.preventDefault(),i.length&&i[i.length-1].label.focus();break}}}setExpanded(t){this.expanded!==t&&(this.expanded=t)}static _uid(){return globalThis.crypto?.randomUUID?.()??`${n._uidPrefix}-${++n._uidSeq}`}firstUpdated(){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})),this.dispatchEvent(new CustomEvent("expandedchanged",{detail:{expanded:this.expanded,label:this.label},bubbles:!0,composed:!0})))}connectedCallback(){super.connectedCallback(),this._slotHasContent=Array.from(this.children).some(t=>{const e=t.getAttribute("slot");return e===null||e===""}),this._trailingSlotHasContent=Array.from(this.children).some(t=>t.getAttribute("slot")==="trailing"),!this._slotHasContent&&this.expanded&&(this.expanded=!1)}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),s=e.transitionDuration.split(",").map(a=>a.trim()),i=e.transitionDelay.split(",").map(a=>a.trim()),o=a=>{const d=parseFloat(a);return Number.isFinite(d)?a.endsWith("ms")?d:a.endsWith("s")?d*1e3:d:0},c=Math.max(s.length,i.length);let r=0;for(let a=0;a<c;a+=1){const d=o(s[a]??s[s.length-1]??"0s"),m=o(i[a]??i[i.length-1]??"0s");r=Math.max(r,d+m)}return Math.ceil(r)}_supportsInert(){return"inert"in HTMLElement.prototype}_collectFocusableFromSlot(){const t=this.renderRoot.querySelector("slot:not([name])");if(!t)return[];const e=t.assignedElements({flatten:!0}),s=[],i=o=>{o instanceof HTMLElement&&o.matches("a,button,input,select,textarea,[tabindex]")&&s.push(o)};return e.forEach(o=>{i(o),o.querySelectorAll?.("a,button,input,select,textarea,[tabindex]").forEach(c=>i(c))}),s}_removeTabIndexesIfNeeded(){if(this._supportsInert())return;this._collectFocusableFromSlot().forEach(e=>{const s=e.getAttribute("tabindex");s!==null&&e.setAttribute("data-scb-prev-tabindex",s),e.setAttribute("tabindex","-1")})}_restoreTabIndexesIfNeeded(){if(this._supportsInert())return;this._collectFocusableFromSlot().forEach(e=>{const s=e.getAttribute("data-scb-prev-tabindex");s!==null?(e.setAttribute("tabindex",s),e.removeAttribute("data-scb-prev-tabindex")):e.removeAttribute("tabindex")})}render(){const t=`bottom-${this._unique}`,e=`toc-label-${this._unique}`,s=`toc-chevron-${this._unique}`,i=this.supportingText.trim().length>0;return b`
2
2
  <div class="scb-toc-item" role="listitem">
3
- <div class="scb-toc-item-top">
3
+ <div class=${`scb-toc-item-top${i?"":" no-supporting-text"}`}>
4
4
  <div>
5
5
  <div class="toc-item-label-wrapper">
6
6
  <a
@@ -13,17 +13,17 @@ import{a as h,n as p,i as m,x as u,t as f}from"../../vendor/vendor.js";import"..
13
13
  </a>
14
14
  <md-focus-ring for=${e} inward></md-focus-ring>
15
15
  </div>
16
- <div class="supporting-text">${this.supportingText}</div>
16
+ ${i?b`<div class="supporting-text">${this.supportingText}</div>`:""}
17
17
  </div>
18
18
 
19
- ${this._trailingSlotHasContent?u`
19
+ ${this._trailingSlotHasContent?b`
20
20
  <div class="toc-chevron-button-wrapper">
21
21
  <slot name="trailing"></slot>
22
22
  </div>
23
- `:this._slotHasContent?u`
23
+ `:this._slotHasContent?b`
24
24
  <div class="toc-chevron-button-wrapper">
25
25
  <button
26
- id=${i}
26
+ id=${s}
27
27
  class="toc-chevron-button"
28
28
  type="button"
29
29
  aria-label=${this.expanded?"Fäll ihop avsnitt":"Fäll ut avsnitt"}
@@ -34,7 +34,7 @@ import{a as h,n as p,i as m,x as u,t as f}from"../../vendor/vendor.js";import"..
34
34
  >
35
35
  <md-ripple></md-ripple>
36
36
  <scb-chevron class="toc-chevron-icon" .open=${this.expanded}></scb-chevron>
37
- <md-focus-ring for=${i} inward></md-focus-ring>
37
+ <md-focus-ring for=${s} inward></md-focus-ring>
38
38
  </button>
39
39
  </div>
40
40
  `:""}
@@ -47,18 +47,97 @@ import{a as h,n as p,i as m,x as u,t as f}from"../../vendor/vendor.js";import"..
47
47
  </div>
48
48
  </div>
49
49
 
50
- ${this.noDivider?"":u`<scb-divider></scb-divider>`}
50
+ ${this.noDivider?"":b`<scb-divider></scb-divider>`}
51
51
  </div>
52
- `}};r._uidPrefix=`uid-${Math.random().toString(36).slice(2)}`;r._uidSeq=0;r.styles=[h`
52
+ `}};n._uidPrefix=`uid-${Math.random().toString(36).slice(2)}`;n._uidSeq=0;n.styles=[g`
53
53
  :host {
54
54
  display: block;
55
55
  --scb-toc-transition-duration: var(--motion-duration-short, 150ms);
56
56
  --scb-toc-transition-easing: var(--motion-easing-emphasized-accelerate, var(--motion-easing-emphasized, cubic-bezier(.69,.16,.2,.98)));
57
57
  --scb-toc-panel-padding-closed: var(--spacing-0, 0px);
58
+ --scb-toc-item-top-padding-y: var(--spacing-5, 16px);
59
+ --scb-toc-item-top-padding-x: var(--spacing-3, 8px);
60
+ --scb-toc-item-top-gap: var(--spacing-5, 16px);
61
+ --scb-toc-item-label-margin-bottom: var(--spacing-3, 8px);
62
+ --scb-toc-item-label-font-size: var(--md-sys-typescale-body-large-size);
63
+ --scb-toc-item-label-line-height: var(--md-sys-typescale-body-large-line-height);
64
+ --scb-toc-item-label-tracking: var(--md-sys-typescale-body-large-tracking);
65
+ --scb-toc-item-supporting-font-size: var(--md-sys-typescale-body-medium-size);
66
+ --scb-toc-item-supporting-line-height: var(--md-sys-typescale-body-medium-line-height);
67
+ --scb-toc-item-supporting-tracking: var(--md-sys-typescale-body-medium-tracking);
68
+ --scb-toc-item-panel-padding-right: var(--spacing-5, 16px);
69
+ --scb-toc-item-panel-padding-left: var(--spacing-9, 32px);
70
+ --scb-toc-item-panel-padding-open: var(--spacing-5, 16px);
71
+ --scb-toc-item-panel-font-size: var(--md-sys-typescale-body-medium-size);
72
+ --scb-toc-item-panel-line-height: var(--md-sys-typescale-body-medium-line-height);
73
+ --scb-toc-item-panel-tracking: var(--md-sys-typescale-body-medium-tracking);
74
+ --scb-toc-item-chevron-size: 40px;
75
+ --scb-toc-item-icon-size: var(--icon-size-medium, 24px);
58
76
  color: var(--md-sys-color-on-surface);
59
77
  font-family: var(--brand-font, 'Inter', sans-serif);
60
78
  }
61
79
 
80
+ :host([size='small']) {
81
+ --scb-toc-item-top-padding-y: var(--spacing-4, 12px);
82
+ --scb-toc-item-top-gap: var(--spacing-4, 12px);
83
+ --scb-toc-item-label-margin-bottom: var(--spacing-2, 4px);
84
+ --scb-toc-item-label-font-size: var(--md-sys-typescale-body-small-size);
85
+ --scb-toc-item-label-line-height: var(--md-sys-typescale-body-small-line-height);
86
+ --scb-toc-item-label-tracking: var(--md-sys-typescale-body-small-tracking);
87
+ --scb-toc-item-supporting-font-size: var(--md-sys-typescale-body-small-size);
88
+ --scb-toc-item-supporting-line-height: var(--md-sys-typescale-body-small-line-height);
89
+ --scb-toc-item-supporting-tracking: var(--md-sys-typescale-body-small-tracking);
90
+ --scb-toc-item-panel-padding-right: var(--spacing-4, 12px);
91
+ --scb-toc-item-panel-padding-left: var(--spacing-7, 24px);
92
+ --scb-toc-item-panel-padding-open: var(--spacing-4, 12px);
93
+ --scb-toc-item-panel-font-size: var(--md-sys-typescale-body-small-size);
94
+ --scb-toc-item-panel-line-height: var(--md-sys-typescale-body-small-line-height);
95
+ --scb-toc-item-panel-tracking: var(--md-sys-typescale-body-small-tracking);
96
+ --scb-toc-item-chevron-size: 36px;
97
+ --scb-toc-item-icon-size: var(--icon-size-small, 20px);
98
+ }
99
+
100
+ :host([size='extra-small']) {
101
+ --scb-toc-item-top-padding-y: var(--spacing-3, 8px);
102
+ --scb-toc-item-top-padding-x: var(--spacing-2, 4px);
103
+ --scb-toc-item-top-gap: var(--spacing-3, 8px);
104
+ --scb-toc-item-label-margin-bottom: var(--spacing-1, 2px);
105
+ --scb-toc-item-label-font-size: var(--md-sys-typescale-body-small-size);
106
+ --scb-toc-item-label-line-height: var(--md-sys-typescale-body-small-line-height);
107
+ --scb-toc-item-label-tracking: var(--md-sys-typescale-body-small-tracking);
108
+ --scb-toc-item-supporting-font-size: var(--md-sys-typescale-body-small-size);
109
+ --scb-toc-item-supporting-line-height: var(--md-sys-typescale-body-small-line-height);
110
+ --scb-toc-item-supporting-tracking: var(--md-sys-typescale-body-small-tracking);
111
+ --scb-toc-item-panel-padding-right: var(--spacing-3, 8px);
112
+ --scb-toc-item-panel-padding-left: var(--spacing-6, 20px);
113
+ --scb-toc-item-panel-padding-open: var(--spacing-3, 8px);
114
+ --scb-toc-item-panel-font-size: var(--md-sys-typescale-body-small-size);
115
+ --scb-toc-item-panel-line-height: var(--md-sys-typescale-body-small-line-height);
116
+ --scb-toc-item-panel-tracking: var(--md-sys-typescale-body-small-tracking);
117
+ --scb-toc-item-chevron-size: 32px;
118
+ --scb-toc-item-icon-size: var(--icon-size-small, 20px);
119
+ }
120
+
121
+ :host([size='large']) {
122
+ --scb-toc-item-top-padding-y: var(--spacing-6, 20px);
123
+ --scb-toc-item-top-gap: var(--spacing-6, 20px);
124
+ --scb-toc-item-label-margin-bottom: var(--spacing-4, 12px);
125
+ --scb-toc-item-label-font-size: var(--md-sys-typescale-title-small-size);
126
+ --scb-toc-item-label-line-height: var(--md-sys-typescale-title-small-line-height);
127
+ --scb-toc-item-label-tracking: var(--md-sys-typescale-title-small-tracking);
128
+ --scb-toc-item-supporting-font-size: var(--md-sys-typescale-body-large-size);
129
+ --scb-toc-item-supporting-line-height: var(--md-sys-typescale-body-large-line-height);
130
+ --scb-toc-item-supporting-tracking: var(--md-sys-typescale-body-large-tracking);
131
+ --scb-toc-item-panel-padding-right: var(--spacing-6, 20px);
132
+ --scb-toc-item-panel-padding-left: var(--spacing-10, 40px);
133
+ --scb-toc-item-panel-padding-open: var(--spacing-6, 20px);
134
+ --scb-toc-item-panel-font-size: var(--md-sys-typescale-body-large-size);
135
+ --scb-toc-item-panel-line-height: var(--md-sys-typescale-body-large-line-height);
136
+ --scb-toc-item-panel-tracking: var(--md-sys-typescale-body-large-tracking);
137
+ --scb-toc-item-chevron-size: 48px;
138
+ --scb-toc-item-icon-size: var(--icon-size-medium, 24px);
139
+ }
140
+
62
141
  :host([expanded]) {
63
142
  --scb-toc-transition-easing: var(
64
143
  --motion-easing-emphasized-decelerate,
@@ -67,10 +146,19 @@ import{a as h,n as p,i as m,x as u,t as f}from"../../vendor/vendor.js";import"..
67
146
  }
68
147
 
69
148
  .scb-toc-item-top {
70
- padding: var(--spacing-5, 16px) var(--spacing-3, 8px);
149
+ padding: var(--scb-toc-item-top-padding-y) var(--scb-toc-item-top-padding-x);
71
150
  display: flex;
72
- gap: var(--spacing-5, 16px);
151
+ gap: var(--scb-toc-item-top-gap);
73
152
  flex-direction: row;
153
+ align-items: flex-start;
154
+ }
155
+
156
+ .scb-toc-item-top.no-supporting-text {
157
+ align-items: center;
158
+ }
159
+
160
+ .scb-toc-item-top.no-supporting-text .toc-item-label {
161
+ margin-bottom: 0;
74
162
  }
75
163
 
76
164
  .toc-item-label-wrapper {
@@ -83,14 +171,14 @@ import{a as h,n as p,i as m,x as u,t as f}from"../../vendor/vendor.js";import"..
83
171
  display: block;
84
172
  width: fit-content;
85
173
  color: var(--md-sys-color-primary);
86
- font-size: var(--md-sys-typescale-body-large-size);
174
+ font-size: var(--scb-toc-item-label-font-size);
87
175
  font-weight: var(--weight-semibold);
88
- line-height: var(--md-sys-typescale-body-large-line-height);
89
- letter-spacing: var(--md-sys-typescale-body-large-tracking);
176
+ line-height: var(--scb-toc-item-label-line-height);
177
+ letter-spacing: var(--scb-toc-item-label-tracking);
90
178
  text-decoration: underline;
91
179
  text-decoration-thickness: 1px;
92
180
  text-underline-offset: 0.1578em;
93
- margin-bottom: var(--spacing-3, 8px);
181
+ margin-bottom: var(--scb-toc-item-label-margin-bottom);
94
182
  }
95
183
 
96
184
  .toc-item-label:hover {
@@ -111,9 +199,9 @@ import{a as h,n as p,i as m,x as u,t as f}from"../../vendor/vendor.js";import"..
111
199
  }
112
200
 
113
201
  .supporting-text {
114
- font-size: var(--md-sys-typescale-body-medium-size);
115
- line-height: var(--md-sys-typescale-body-medium-line-height);
116
- letter-spacing: var(--md-sys-typescale-body-medium-tracking);
202
+ font-size: var(--scb-toc-item-supporting-font-size);
203
+ line-height: var(--scb-toc-item-supporting-line-height);
204
+ letter-spacing: var(--scb-toc-item-supporting-tracking);
117
205
  color: var(--md-sys-color-on-surface-variant);
118
206
  }
119
207
 
@@ -129,8 +217,8 @@ import{a as h,n as p,i as m,x as u,t as f}from"../../vendor/vendor.js";import"..
129
217
  display: inline-flex;
130
218
  align-items: center;
131
219
  justify-content: center;
132
- inline-size: 40px;
133
- block-size: 40px;
220
+ inline-size: var(--scb-toc-item-chevron-size);
221
+ block-size: var(--scb-toc-item-chevron-size);
134
222
  padding: 0;
135
223
  border: 0;
136
224
  background: transparent;
@@ -157,7 +245,7 @@ import{a as h,n as p,i as m,x as u,t as f}from"../../vendor/vendor.js";import"..
157
245
  }
158
246
 
159
247
  .toc-chevron-icon {
160
- --scb-chevron-size: var(--icon-size-medium, 24px);
248
+ --scb-chevron-size: var(--scb-toc-item-icon-size);
161
249
  --chevron-offset-down: 2.8px;
162
250
  --chevron-offset-up: -2.8px;
163
251
  }
@@ -177,18 +265,18 @@ import{a as h,n as p,i as m,x as u,t as f}from"../../vendor/vendor.js";import"..
177
265
  opacity: 0;
178
266
  overflow: hidden;
179
267
  padding-top: var(--spacing-0, 0px);
180
- padding-right: var(--spacing-5, 16px);
268
+ padding-right: var(--scb-toc-item-panel-padding-right);
181
269
  padding-bottom: var(--scb-toc-panel-padding-closed);
182
- padding-left: var(--spacing-9, 32px);
183
- font-size: var(--md-sys-typescale-body-medium-size);
184
- line-height: var(--md-sys-typescale-body-medium-line-height); /* 150% */
185
- letter-spacing: var(--md-sys-typescale-body-medium-tracking);
270
+ padding-left: var(--scb-toc-item-panel-padding-left);
271
+ font-size: var(--scb-toc-item-panel-font-size);
272
+ line-height: var(--scb-toc-item-panel-line-height); /* 150% */
273
+ letter-spacing: var(--scb-toc-item-panel-tracking);
186
274
  }
187
275
 
188
276
  :host([expanded]) .scb-toc-item-bottom {
189
277
  grid-template-rows: 1fr;
190
278
  opacity: 1;
191
- padding-bottom: var(--spacing-5, 16px);
279
+ padding-bottom: var(--scb-toc-item-panel-padding-open);
192
280
  }
193
281
 
194
282
  .bottom-inner {
@@ -212,4 +300,4 @@ import{a as h,n as p,i as m,x as u,t as f}from"../../vendor/vendor.js";import"..
212
300
  display: none;
213
301
  }
214
302
  }
215
- `];c([p({type:Boolean,reflect:!0})],r.prototype,"expanded",2);c([p({type:String,reflect:!0})],r.prototype,"label",2);c([p({type:String,attribute:"supporting-text"})],r.prototype,"supportingText",2);c([p({type:String,attribute:"item-href"})],r.prototype,"itemHref",2);c([p({type:Boolean,attribute:"no-divider"})],r.prototype,"noDivider",2);r=c([f("scb-toc-item")],r);
303
+ `];l([p({type:Boolean,reflect:!0})],n.prototype,"expanded",2);l([p({type:String,reflect:!0})],n.prototype,"size",2);l([p({type:String,reflect:!0})],n.prototype,"label",2);l([p({type:String,attribute:"supporting-text"})],n.prototype,"supportingText",2);l([p({type:String,attribute:"item-href"})],n.prototype,"itemHref",2);l([p({type:Boolean,attribute:"no-divider"})],n.prototype,"noDivider",2);n=l([u("scb-toc-item")],n);
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "scb-wc-test",
3
- "version": "0.1.344",
3
+ "version": "0.1.345",
4
4
  "type": "module",
5
5
  "main": "index.js",
6
6
  "module": "index.js",
@@ -398,5 +398,5 @@
398
398
  },
399
399
  "./mvc/*": "./mvc/*"
400
400
  },
401
- "buildHash": "90D92BED653E0E8FA3C426900FAA914DC2EFE03A7720E35DF85A8C15143B0F8A"
401
+ "buildHash": "4EE5B0D11A342C3F881983A967E5E73A00F2A8BCDCEDF7ED968014AE382A230D"
402
402
  }
@@ -1,6 +1,7 @@
1
1
  import { LitElement } from 'lit';
2
2
  export declare class ScbTocItem extends LitElement {
3
3
  expanded: boolean;
4
+ size: 'extra-small' | 'small' | 'medium' | 'large';
4
5
  label: string;
5
6
  supportingText: string;
6
7
  itemHref: string;