scb-wc-test 0.1.343 → 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,59 +1,143 @@
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 e=typeof globalThis<"u"?globalThis:window;if(!e.__scb_ce_guard_installed__){e.__scb_ce_guard_installed__=!0;var t=customElements.define.bind(customElements);customElements.define=function(i,o,s){try{customElements.get(i)||t(i,o,s)}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=(e,t,i,o)=>{for(var s=o>1?void 0:o?g(t,i):t,d=e.length-1,a;d>=0;d--)(a=e[d])&&(s=(o?a(t,i,s):a(s))||s);return o&&s&&v(t,i,s),s};let r=class extends m{constructor(){super(...arguments),this.expanded=!1,this.label="",this.supportingText="",this.itemHref="#",this.divider=!0,this._unique=r._uid(),this._overflowVisibleTimer=null,this._slotHasContent=!1,this._onSlotChange=()=>{const e=this.renderRoot.querySelector("slot"),t=!!e&&e.assignedElements({flatten:!0}).length>0;this._slotHasContent!==t&&(this._slotHasContent=t,this.requestUpdate()),!this._slotHasContent&&this.expanded&&(this.expanded=!1),this._applyInertByExpanded()},this._toggleAccordion=()=>{if(!this._slotHasContent)return;const e=!this.expanded;this.setExpanded(e)},this._onKeyDown=e=>{const t=this.closest("scb-toc"),o=Array.from(t?.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=e.currentTarget?.classList?.contains("toc-chevron-button")??!1;switch(e.key){case"Enter":case" ":if(!a)return;e.preventDefault(),this._toggleAccordion();break;case"ArrowDown":e.preventDefault(),s<o.length-1&&o[s+1].label.focus();break;case"ArrowUp":e.preventDefault(),s>0&&o[s-1].label.focus();break;case"Home":e.preventDefault(),o.length&&o[0].label.focus();break;case"End":e.preventDefault(),o.length&&o[o.length-1].label.focus();break}}}setExpanded(e){this.expanded!==e&&(this.expanded=e)}static _uid(){return globalThis.crypto?.randomUUID?.()??`${r._uidPrefix}-${++r._uidSeq}`}firstUpdated(){this._applyInertByExpanded(),this._syncOverflowVisibilityByExpanded()}updated(e){e.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=this.childElementCount>0,!this._slotHasContent&&this.expanded&&(this.expanded=!1)}disconnectedCallback(){super.disconnectedCallback(),this._overflowVisibleTimer!==null&&(window.clearTimeout(this._overflowVisibleTimer),this._overflowVisibleTimer=null)}_applyInertByExpanded(){const e=this.renderRoot.querySelector(".scb-toc-item-bottom");e&&(this.expanded?(e.removeAttribute("inert"),e.setAttribute("aria-hidden","false"),this._restoreTabIndexesIfNeeded()):(e.setAttribute("inert",""),e.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 e=this.renderRoot.querySelector(".scb-toc-item-bottom");if(!e){this.setAttribute("data-expanded-settled","");return}const t=this._getTransitionMs(e);if(t<=0){this.setAttribute("data-expanded-settled","");return}this._overflowVisibleTimer=window.setTimeout(()=>{this._overflowVisibleTimer=null,this.expanded&&this.setAttribute("data-expanded-settled","")},t)}_getTransitionMs(e){const t=getComputedStyle(e),i=t.transitionDuration.split(",").map(n=>n.trim()),o=t.transitionDelay.split(",").map(n=>n.trim()),s=n=>{const l=parseFloat(n);return Number.isFinite(l)?n.endsWith("ms")?l:n.endsWith("s")?l*1e3:l:0},d=Math.max(i.length,o.length);let a=0;for(let n=0;n<d;n+=1){const l=s(i[n]??i[i.length-1]??"0s"),b=s(o[n]??o[o.length-1]??"0s");a=Math.max(a,l+b)}return Math.ceil(a)}_supportsInert(){return"inert"in HTMLElement.prototype}_collectFocusableFromSlot(){const e=this.renderRoot.querySelector("slot");if(!e)return[];const t=e.assignedElements({flatten:!0}),i=[],o=s=>{s instanceof HTMLElement&&s.matches("a,button,input,select,textarea,[tabindex]")&&i.push(s)};return t.forEach(s=>{o(s),s.querySelectorAll?.("a,button,input,select,textarea,[tabindex]").forEach(d=>o(d))}),i}_removeTabIndexesIfNeeded(){if(this._supportsInert())return;this._collectFocusableFromSlot().forEach(t=>{const i=t.getAttribute("tabindex");i!==null&&t.setAttribute("data-scb-prev-tabindex",i),t.setAttribute("tabindex","-1")})}_restoreTabIndexesIfNeeded(){if(this._supportsInert())return;this._collectFocusableFromSlot().forEach(t=>{const i=t.getAttribute("data-scb-prev-tabindex");i!==null?(t.setAttribute("tabindex",i),t.removeAttribute("data-scb-prev-tabindex")):t.removeAttribute("tabindex")})}render(){const e=`bottom-${this._unique}`,t=`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
7
- id=${t}
7
+ id=${e}
8
8
  class="toc-item-label"
9
9
  href=${this.itemHref}
10
10
  @keydown=${this._onKeyDown}
11
11
  >
12
12
  ${this.label}
13
13
  </a>
14
- <md-focus-ring for=${t} inward></md-focus-ring>
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._slotHasContent?u`
19
+ ${this._trailingSlotHasContent?b`
20
+ <div class="toc-chevron-button-wrapper">
21
+ <slot name="trailing"></slot>
22
+ </div>
23
+ `:this._slotHasContent?b`
20
24
  <div class="toc-chevron-button-wrapper">
21
25
  <button
22
- id=${i}
26
+ id=${s}
23
27
  class="toc-chevron-button"
24
28
  type="button"
25
29
  aria-label=${this.expanded?"Fäll ihop avsnitt":"Fäll ut avsnitt"}
26
30
  aria-expanded=${this.expanded?"true":"false"}
27
- aria-controls=${e}
31
+ aria-controls=${t}
28
32
  @click=${this._toggleAccordion}
29
33
  @keydown=${this._onKeyDown}
30
34
  >
31
35
  <md-ripple></md-ripple>
32
36
  <scb-chevron class="toc-chevron-icon" .open=${this.expanded}></scb-chevron>
33
- <md-focus-ring for=${i} inward></md-focus-ring>
37
+ <md-focus-ring for=${s} inward></md-focus-ring>
34
38
  </button>
35
39
  </div>
36
40
  `:""}
41
+
37
42
  </div>
38
43
 
39
- <div id=${e} class="scb-toc-item-bottom" role="region" aria-labelledby=${t}>
44
+ <div id=${t} class="scb-toc-item-bottom" role="region" aria-labelledby=${e}>
40
45
  <div class="bottom-inner">
41
46
  <slot @slotchange=${this._onSlotChange}></slot>
42
47
  </div>
43
48
  </div>
44
49
 
45
- ${this.divider?u`<scb-divider></scb-divider>`:""}
50
+ ${this.noDivider?"":b`<scb-divider></scb-divider>`}
46
51
  </div>
47
- `}};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`
48
53
  :host {
49
54
  display: block;
50
55
  --scb-toc-transition-duration: var(--motion-duration-short, 150ms);
51
56
  --scb-toc-transition-easing: var(--motion-easing-emphasized-accelerate, var(--motion-easing-emphasized, cubic-bezier(.69,.16,.2,.98)));
52
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);
53
76
  color: var(--md-sys-color-on-surface);
54
77
  font-family: var(--brand-font, 'Inter', sans-serif);
55
78
  }
56
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
+
57
141
  :host([expanded]) {
58
142
  --scb-toc-transition-easing: var(
59
143
  --motion-easing-emphasized-decelerate,
@@ -62,10 +146,19 @@ import{a as h,n as p,i as m,x as u,t as f}from"../../vendor/vendor.js";import"..
62
146
  }
63
147
 
64
148
  .scb-toc-item-top {
65
- 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);
66
150
  display: flex;
67
- gap: var(--spacing-5, 16px);
151
+ gap: var(--scb-toc-item-top-gap);
68
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;
69
162
  }
70
163
 
71
164
  .toc-item-label-wrapper {
@@ -78,14 +171,14 @@ import{a as h,n as p,i as m,x as u,t as f}from"../../vendor/vendor.js";import"..
78
171
  display: block;
79
172
  width: fit-content;
80
173
  color: var(--md-sys-color-primary);
81
- font-size: var(--md-sys-typescale-body-large-size);
174
+ font-size: var(--scb-toc-item-label-font-size);
82
175
  font-weight: var(--weight-semibold);
83
- line-height: var(--md-sys-typescale-body-large-line-height);
84
- 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);
85
178
  text-decoration: underline;
86
179
  text-decoration-thickness: 1px;
87
180
  text-underline-offset: 0.1578em;
88
- margin-bottom: var(--spacing-3, 8px);
181
+ margin-bottom: var(--scb-toc-item-label-margin-bottom);
89
182
  }
90
183
 
91
184
  .toc-item-label:hover {
@@ -106,9 +199,9 @@ import{a as h,n as p,i as m,x as u,t as f}from"../../vendor/vendor.js";import"..
106
199
  }
107
200
 
108
201
  .supporting-text {
109
- font-size: var(--md-sys-typescale-body-medium-size);
110
- line-height: var(--md-sys-typescale-body-medium-line-height);
111
- 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);
112
205
  color: var(--md-sys-color-on-surface-variant);
113
206
  }
114
207
 
@@ -124,8 +217,8 @@ import{a as h,n as p,i as m,x as u,t as f}from"../../vendor/vendor.js";import"..
124
217
  display: inline-flex;
125
218
  align-items: center;
126
219
  justify-content: center;
127
- inline-size: 40px;
128
- block-size: 40px;
220
+ inline-size: var(--scb-toc-item-chevron-size);
221
+ block-size: var(--scb-toc-item-chevron-size);
129
222
  padding: 0;
130
223
  border: 0;
131
224
  background: transparent;
@@ -152,7 +245,7 @@ import{a as h,n as p,i as m,x as u,t as f}from"../../vendor/vendor.js";import"..
152
245
  }
153
246
 
154
247
  .toc-chevron-icon {
155
- --scb-chevron-size: var(--icon-size-medium, 24px);
248
+ --scb-chevron-size: var(--scb-toc-item-icon-size);
156
249
  --chevron-offset-down: 2.8px;
157
250
  --chevron-offset-up: -2.8px;
158
251
  }
@@ -172,18 +265,18 @@ import{a as h,n as p,i as m,x as u,t as f}from"../../vendor/vendor.js";import"..
172
265
  opacity: 0;
173
266
  overflow: hidden;
174
267
  padding-top: var(--spacing-0, 0px);
175
- padding-right: var(--spacing-5, 16px);
268
+ padding-right: var(--scb-toc-item-panel-padding-right);
176
269
  padding-bottom: var(--scb-toc-panel-padding-closed);
177
- padding-left: var(--spacing-9, 32px);
178
- font-size: var(--md-sys-typescale-body-medium-size);
179
- line-height: var(--md-sys-typescale-body-medium-line-height); /* 150% */
180
- 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);
181
274
  }
182
275
 
183
276
  :host([expanded]) .scb-toc-item-bottom {
184
277
  grid-template-rows: 1fr;
185
278
  opacity: 1;
186
- padding-bottom: var(--spacing-5, 16px);
279
+ padding-bottom: var(--scb-toc-item-panel-padding-open);
187
280
  }
188
281
 
189
282
  .bottom-inner {
@@ -207,4 +300,4 @@ import{a as h,n as p,i as m,x as u,t as f}from"../../vendor/vendor.js";import"..
207
300
  display: none;
208
301
  }
209
302
  }
210
- `];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:"divider"})],r.prototype,"divider",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.343",
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": "4B48DA93DF75F41ECBEB2F1BD1871BA4D44FF0EB20F6B5A5D3F54F85BEFF572F"
401
+ "buildHash": "4EE5B0D11A342C3F881983A967E5E73A00F2A8BCDCEDF7ED968014AE382A230D"
402
402
  }
@@ -1,10 +1,11 @@
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;
7
- divider: boolean;
8
+ noDivider: boolean;
8
9
  setExpanded(expanded: boolean): void;
9
10
  private static _uidPrefix;
10
11
  private static _uidSeq;
@@ -13,6 +14,7 @@ export declare class ScbTocItem extends LitElement {
13
14
  private _overflowVisibleTimer;
14
15
  static styles: import('lit').CSSResult[];
15
16
  private _slotHasContent;
17
+ private _trailingSlotHasContent;
16
18
  protected firstUpdated(): void;
17
19
  protected updated(changed: Map<string, unknown>): void;
18
20
  connectedCallback(): void;