scb-wc 0.1.37 → 0.1.38

package/mvc/components/scb-toc/scb-toc-item.js

@@ -1,6 +1,6 @@
-import"../../vendor/vendor-material.js";import{_ as v,b as y,g as f,h as m,y as b}from"../../vendor/vendor.js";import"../../vendor/vendor-lit.js";import{t as l}from"../../vendor/decorate.js";import"../scb-chevron/scb-chevron.js";import"../scb-divider/scb-divider.js";(function(){try{var h=typeof globalThis<"u"?globalThis:window;if(!h.__scb_ce_guard_installed__){h.__scb_ce_guard_installed__=!0;var t=customElements.define.bind(customElements);customElements.define=function(e,o,i){try{customElements.get(e)||t(e,o,i)}catch(r){var s=String(r||"");if(s.indexOf("already been used")===-1&&s.indexOf("NotSupportedError")===-1)throw r}}}}catch{}})();var p,g,c=(p=class extends v{constructor(...t){super(...t),this.expanded=!1,this.size="medium",this.label="",this.supportingText="",this.itemHref="#",this.noDivider=!1,this._unique=g._uid(),this._overflowVisibleTimer=null,this._slotHasContent=!1,this._trailingSlotHasContent=!1,this._onSlotChange=()=>{const e=this.renderRoot.querySelector("slot:not([name])"),o=!!e&&e.assignedElements({flatten:!0}).length>0;this._slotHasContent!==o&&(this._slotHasContent=o,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 o=this.closest("scb-toc"),i=Array.from(o?.querySelectorAll("scb-toc-item")||[]).map(n=>({host:n,label:n.renderRoot.querySelector(".toc-item-label")||null})).filter(n=>!!n.label),s=i.findIndex(n=>n.host===this);if(s<0)return;const r=e.currentTarget?.classList?.contains("toc-chevron-button")??!1;switch(e.key){case"Enter":case" ":if(!r)return;e.preventDefault(),this._toggleAccordion();break;case"ArrowDown":e.preventDefault(),s<i.length-1&&i[s+1].label.focus();break;case"ArrowUp":e.preventDefault(),s>0&&i[s-1].label.focus();break;case"Home":e.preventDefault(),i.length&&i[0].label.focus();break;case"End":e.preventDefault(),i.length&&i[i.length-1].label.focus();break}}}setExpanded(t){this.expanded!==t&&(this.expanded=t)}static _uid(){return globalThis.crypto?.randomUUID?.()??`${g._uidPrefix}-${++g._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),o=e.transitionDuration.split(",").map(a=>a.trim()),i=e.transitionDelay.split(",").map(a=>a.trim()),s=a=>{const d=parseFloat(a);return Number.isFinite(d)?a.endsWith("ms")?d:a.endsWith("s")?d*1e3:d:0},r=Math.max(o.length,i.length);let n=0;for(let a=0;a<r;a+=1){const d=s(o[a]??o[o.length-1]??"0s"),u=s(i[a]??i[i.length-1]??"0s");n=Math.max(n,d+u)}return Math.ceil(n)}_supportsInert(){return"inert"in HTMLElement.prototype}_collectFocusableFromSlot(){const t=this.renderRoot.querySelector("slot:not([name])");if(!t)return[];const e=t.assignedElements({flatten:!0}),o=[],i=s=>{s instanceof HTMLElement&&s.matches("a,button,input,select,textarea,[tabindex]")&&o.push(s)};return e.forEach(s=>{i(s),s.querySelectorAll?.("a,button,input,select,textarea,[tabindex]").forEach(r=>i(r))}),o}_removeTabIndexesIfNeeded(){this._supportsInert()||this._collectFocusableFromSlot().forEach(t=>{const e=t.getAttribute("tabindex");e!==null&&t.setAttribute("data-scb-prev-tabindex",e),t.setAttribute("tabindex","-1")})}_restoreTabIndexesIfNeeded(){this._supportsInert()||this._collectFocusableFromSlot().forEach(t=>{const e=t.getAttribute("data-scb-prev-tabindex");e!==null?(t.setAttribute("tabindex",e),t.removeAttribute("data-scb-prev-tabindex")):t.removeAttribute("tabindex")})}render(){const t=`bottom-${this._unique}`,e=`toc-label-${this._unique}`,o=`toc-chevron-${this._unique}`,i=this.supportingText.trim().length>0;return b`
+import"../../vendor/vendor-material.js";import{_ as v,b as y,g as f,h as m,y as b}from"../../vendor/vendor.js";import"../../vendor/vendor-lit.js";import{t as l}from"../../vendor/decorate.js";import"../scb-chevron/scb-chevron.js";import"../scb-divider/scb-divider.js";import"../scb-chip/scb-chip.js";(function(){try{var h=typeof globalThis<"u"?globalThis:window;if(!h.__scb_ce_guard_installed__){h.__scb_ce_guard_installed__=!0;var t=customElements.define.bind(customElements);customElements.define=function(e,o,i){try{customElements.get(e)||t(e,o,i)}catch(r){var s=String(r||"");if(s.indexOf("already been used")===-1&&s.indexOf("NotSupportedError")===-1)throw r}}}}catch{}})();var p,g,c=(p=class extends v{constructor(...t){super(...t),this.expanded=!1,this.size="medium",this.label="",this.supportingText="",this.itemHref="#",this.noDivider=!1,this._unique=g._uid(),this._overflowVisibleTimer=null,this._slotHasContent=!1,this._trailingSlotHasContent=!1,this._onSlotChange=()=>{const e=this.renderRoot.querySelector("slot:not([name])"),o=!!e&&e.assignedElements({flatten:!0}).length>0;this._slotHasContent!==o&&(this._slotHasContent=o,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 o=this.closest("scb-toc"),i=Array.from(o?.querySelectorAll("scb-toc-item")||[]).map(n=>({host:n,label:n.renderRoot.querySelector(".toc-item-label")||null})).filter(n=>!!n.label),s=i.findIndex(n=>n.host===this);if(s<0)return;const r=e.currentTarget?.classList?.contains("toc-chevron-button")??!1;switch(e.key){case"Enter":case" ":if(!r)return;e.preventDefault(),this._toggleAccordion();break;case"ArrowDown":e.preventDefault(),s<i.length-1&&i[s+1].label.focus();break;case"ArrowUp":e.preventDefault(),s>0&&i[s-1].label.focus();break;case"Home":e.preventDefault(),i.length&&i[0].label.focus();break;case"End":e.preventDefault(),i.length&&i[i.length-1].label.focus();break}}}setExpanded(t){this.expanded!==t&&(this.expanded=t)}static _uid(){return globalThis.crypto?.randomUUID?.()??`${g._uidPrefix}-${++g._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),o=e.transitionDuration.split(",").map(a=>a.trim()),i=e.transitionDelay.split(",").map(a=>a.trim()),s=a=>{const d=parseFloat(a);return Number.isFinite(d)?a.endsWith("ms")?d:a.endsWith("s")?d*1e3:d:0},r=Math.max(o.length,i.length);let n=0;for(let a=0;a<r;a+=1){const d=s(o[a]??o[o.length-1]??"0s"),u=s(i[a]??i[i.length-1]??"0s");n=Math.max(n,d+u)}return Math.ceil(n)}_supportsInert(){return"inert"in HTMLElement.prototype}_collectFocusableFromSlot(){const t=this.renderRoot.querySelector("slot:not([name])");if(!t)return[];const e=t.assignedElements({flatten:!0}),o=[],i=s=>{s instanceof HTMLElement&&s.matches("a,button,input,select,textarea,[tabindex]")&&o.push(s)};return e.forEach(s=>{i(s),s.querySelectorAll?.("a,button,input,select,textarea,[tabindex]").forEach(r=>i(r))}),o}_removeTabIndexesIfNeeded(){this._supportsInert()||this._collectFocusableFromSlot().forEach(t=>{const e=t.getAttribute("tabindex");e!==null&&t.setAttribute("data-scb-prev-tabindex",e),t.setAttribute("tabindex","-1")})}_restoreTabIndexesIfNeeded(){this._supportsInert()||this._collectFocusableFromSlot().forEach(t=>{const e=t.getAttribute("data-scb-prev-tabindex");e!==null?(t.setAttribute("tabindex",e),t.removeAttribute("data-scb-prev-tabindex")):t.removeAttribute("tabindex")})}render(){const t=`bottom-${this._unique}`,e=`toc-label-${this._unique}`,o=`toc-chevron-${this._unique}`,i=this.supportingText.trim().length>0;return b`
       <div class="scb-toc-item" role="listitem">
-        <div class=${`scb-toc-item-top${i?"":" no-supporting-text"}`}>
+        <div class=${`scb-toc-item-top${i?"":" no-supporting-text"}${this._trailingSlotHasContent?" has-trailing":""}`}>
           <div>
             <div class="toc-item-label-wrapper">
               <a
@@ -17,7 +17,7 @@ import"../../vendor/vendor-material.js";import{_ as v,b as y,g as f,h as m,y as
           </div>
 
           ${this._trailingSlotHasContent?b`
-                <div class="toc-chevron-button-wrapper">
+                <div class="toc-chevron-button-wrapper trailing-slot">
                   <slot name="trailing"></slot>
                 </div>
               `:this._slotHasContent?b`
@@ -147,12 +147,21 @@ import"../../vendor/vendor-material.js";import{_ as v,b as y,g as f,h as m,y as
 
       .scb-toc-item-top {
         padding: var(--scb-toc-item-top-padding-y) var(--scb-toc-item-top-padding-x);
+        position: relative;
         display: flex;
         gap: var(--scb-toc-item-top-gap);
         flex-direction: row;
         align-items: flex-start;
       }
 
+      .scb-toc-item-top.has-trailing {
+        padding-right: calc(
+          var(--scb-toc-item-top-padding-x) +
+          var(--scb-toc-item-chevron-size) +
+          var(--scb-toc-item-top-gap)
+        );
+      }
+
       .scb-toc-item-top.no-supporting-text {
         align-items: center;
       }
@@ -212,6 +221,15 @@ import"../../vendor/vendor-material.js";import{_ as v,b as y,g as f,h as m,y as
         align-items: flex-start;
       }
 
+      .toc-chevron-button-wrapper.trailing-slot {
+        position: absolute;
+        top: 50%;
+        right: var(--scb-toc-item-top-padding-x);
+        margin-left: 0;
+        align-items: center;
+        transform: translateY(-50%);
+      }
+
       .toc-chevron-button {
         position: relative;
         display: inline-flex;

package/mvc/scb-logo.svg

@@ -1,21 +1,21 @@
-<?xml version="1.0" encoding="utf-8"?>
-<svg viewBox="-0.0002 -0.0066 1344.9076 377.9532" xmlns="http://www.w3.org/2000/svg">
-  <defs>
-    <style type="text/css">
-  g {
-  fill: #100f0d;
-  }
-  g:target {
-  fill: #fff;
-  }
- </style>
-  </defs>
-  <g transform="matrix(1.3333330154418945, 0, 0, -1.3333330154418945, 0, 377.9466552734375)" id="g10">
-    <g transform="scale(0.1)" id="inverted">
-      <path id="path14" d="m 1346.6,2515.59 c 0,48.24 -39.11,87.31 -87.4,87.31 -48.29,0 -87.4,-39.07 -87.4,-87.31 V 312.898 c 0,-48.339 39.11,-87.5 87.4,-87.5 48.29,0 87.4,39.161 87.4,87.5 V 1106.8 c 0,5.77 4.79,10.45 10.51,10.45 h 287.22 c 5.76,0 10.5,-4.68 10.5,-10.45 V 305.969 C 1654.83,137.02 1477.67,0 1259.2,0 1040.63,0 863.523,137.02 863.523,305.969 V 2528.77 c 0,168.86 177.107,305.88 395.677,305.88 218.47,0 395.63,-137.02 395.63,-305.88 V 1738.1 c 0,-5.86 -4.74,-10.45 -10.5,-10.45 h -287.22 c -5.72,0 -10.51,4.59 -10.51,10.45 v 777.49"/>
-      <path id="path16" d="M 10.4414,2265.38 C -8.01563,2136.85 -1.52734,1926.1 26.1172,1807.73 56.4922,1678.71 231.645,1417.96 310.555,1296.86 389.566,1175.85 494.949,1049.49 493.375,880.922 V 477.18 c 0,-48.25 -39.109,-87.41 -87.406,-87.41 -48.145,0 -87.254,39.16 -87.254,87.41 v 618.79 c 0,5.76 -4.785,10.55 -10.645,10.55 H 20.9453 c -5.8711,0 -10.5039,-4.79 -10.5039,-10.55 V 458.719 c 0,-168.957 177.1056,-305.969 395.5276,-305.969 218.574,0 395.683,137.012 395.683,305.969 v 422.203 c -1.324,289.568 -80.332,331.748 -182.867,505.398 -73.445,124.71 -254.121,381.95 -284.398,510.97 -27.735,118.36 -26.516,255.39 -15.672,379.9 0,48.25 39.109,87.41 87.254,87.41 48.297,0 87.406,-39.16 87.406,-87.41 v -550.32 c 0,-5.77 4.746,-10.45 10.645,-10.45 h 287.085 c 5.911,0 10.547,4.68 10.547,10.45 v 538.51 c 0,169.06 -177.109,305.97 -395.683,305.97 -218.422,0 -395.5276,-136.91 -395.5276,-305.97"/>
-      <path id="path18" d="m 1726.57,2547.82 h 440.8 c 182.04,0 329.61,-147.57 329.61,-329.52 v -462.24 c 0,-129.59 -84.97,-238.98 -202.16,-276.48 v -6.24 c 117.19,-37.4 202.16,-146.89 202.16,-276.58 V 491.148 c 0,-160.367 -130.2,-290.457 -290.45,-290.457 l -479.96,-0.293 c -5.91,0 -10.6,4.793 -10.6,10.454 V 2537.37 c 0,5.66 4.69,10.45 10.6,10.45 m 308.27,-229.22 c -5.97,0 -10.65,-4.78 -10.65,-10.55 v -729.33 c 0,-5.97 4.68,-10.65 10.65,-10.65 h 43.36 c 58.01,0 105.08,47.16 105.08,105.18 v 540.18 c 0,58 -47.07,105.17 -105.08,105.17 z m 0,-982.29 c -5.97,0 -10.65,-4.69 -10.65,-10.45 V 430.59 c 0,-5.86 4.68,-10.649 10.65,-10.649 h 51.85 c 58.12,0 105.09,47.18 105.09,105.188 v 706.011 c 0,58.19 -46.97,105.17 -105.09,105.17 h -51.85"/>
-    </g>
-  </g>
-  <text style="fill: rgb(1, 1, 1); font-family: Roboto; font-size: 139.2px; font-weight: 500; stroke: rgb(0, 0, 0); white-space: pre;" x="455.182" y="234.25">Designsystem</text>
+<?xml version="1.0" encoding="utf-8"?>
+<svg viewBox="-0.0002 -0.0066 1344.9076 377.9532" xmlns="http://www.w3.org/2000/svg">
+  <defs>
+    <style type="text/css">
+  g {
+  fill: #100f0d;
+  }
+  g:target {
+  fill: #fff;
+  }
+ </style>
+  </defs>
+  <g transform="matrix(1.3333330154418945, 0, 0, -1.3333330154418945, 0, 377.9466552734375)" id="g10">
+    <g transform="scale(0.1)" id="inverted">
+      <path id="path14" d="m 1346.6,2515.59 c 0,48.24 -39.11,87.31 -87.4,87.31 -48.29,0 -87.4,-39.07 -87.4,-87.31 V 312.898 c 0,-48.339 39.11,-87.5 87.4,-87.5 48.29,0 87.4,39.161 87.4,87.5 V 1106.8 c 0,5.77 4.79,10.45 10.51,10.45 h 287.22 c 5.76,0 10.5,-4.68 10.5,-10.45 V 305.969 C 1654.83,137.02 1477.67,0 1259.2,0 1040.63,0 863.523,137.02 863.523,305.969 V 2528.77 c 0,168.86 177.107,305.88 395.677,305.88 218.47,0 395.63,-137.02 395.63,-305.88 V 1738.1 c 0,-5.86 -4.74,-10.45 -10.5,-10.45 h -287.22 c -5.72,0 -10.51,4.59 -10.51,10.45 v 777.49"/>
+      <path id="path16" d="M 10.4414,2265.38 C -8.01563,2136.85 -1.52734,1926.1 26.1172,1807.73 56.4922,1678.71 231.645,1417.96 310.555,1296.86 389.566,1175.85 494.949,1049.49 493.375,880.922 V 477.18 c 0,-48.25 -39.109,-87.41 -87.406,-87.41 -48.145,0 -87.254,39.16 -87.254,87.41 v 618.79 c 0,5.76 -4.785,10.55 -10.645,10.55 H 20.9453 c -5.8711,0 -10.5039,-4.79 -10.5039,-10.55 V 458.719 c 0,-168.957 177.1056,-305.969 395.5276,-305.969 218.574,0 395.683,137.012 395.683,305.969 v 422.203 c -1.324,289.568 -80.332,331.748 -182.867,505.398 -73.445,124.71 -254.121,381.95 -284.398,510.97 -27.735,118.36 -26.516,255.39 -15.672,379.9 0,48.25 39.109,87.41 87.254,87.41 48.297,0 87.406,-39.16 87.406,-87.41 v -550.32 c 0,-5.77 4.746,-10.45 10.645,-10.45 h 287.085 c 5.911,0 10.547,4.68 10.547,10.45 v 538.51 c 0,169.06 -177.109,305.97 -395.683,305.97 -218.422,0 -395.5276,-136.91 -395.5276,-305.97"/>
+      <path id="path18" d="m 1726.57,2547.82 h 440.8 c 182.04,0 329.61,-147.57 329.61,-329.52 v -462.24 c 0,-129.59 -84.97,-238.98 -202.16,-276.48 v -6.24 c 117.19,-37.4 202.16,-146.89 202.16,-276.58 V 491.148 c 0,-160.367 -130.2,-290.457 -290.45,-290.457 l -479.96,-0.293 c -5.91,0 -10.6,4.793 -10.6,10.454 V 2537.37 c 0,5.66 4.69,10.45 10.6,10.45 m 308.27,-229.22 c -5.97,0 -10.65,-4.78 -10.65,-10.55 v -729.33 c 0,-5.97 4.68,-10.65 10.65,-10.65 h 43.36 c 58.01,0 105.08,47.16 105.08,105.18 v 540.18 c 0,58 -47.07,105.17 -105.08,105.17 z m 0,-982.29 c -5.97,0 -10.65,-4.69 -10.65,-10.45 V 430.59 c 0,-5.86 4.68,-10.649 10.65,-10.649 h 51.85 c 58.12,0 105.09,47.18 105.09,105.188 v 706.011 c 0,58.19 -46.97,105.17 -105.09,105.17 h -51.85"/>
+    </g>
+  </g>
+  <text style="fill: rgb(1, 1, 1); font-family: Roboto; font-size: 139.2px; font-weight: 500; stroke: rgb(0, 0, 0); white-space: pre;" x="455.182" y="234.25">Designsystem</text>
 </svg>

package/mvc/scb.svg

@@ -1,14 +1,14 @@
-<svg 
-    xmlns="http://www.w3.org/2000/svg" 
-    xmlns:xlink="http://www.w3.org/1999/xlink" 
-    aria-hidden="true" 
-    role="img"
-    width="48" 
-    height="48" 
-    preserveAspectRatio="xMidYMid meet" 
-    viewBox="0 0 1300 1300"
->
-    <path d="M539.3,128.2c0-19.3-15.7-35-35-35c-19.3,0-35,15.6-35,35v882.1c0,19.4,15.7,35,35,35c19.3,0,35-15.7,35-35V692.4   c0-2.3,1.9-4.2,4.2-4.2h115c2.3,0,4.2,1.9,4.2,4.2v320.7c0,67.7-71,122.5-158.4,122.5c-87.5,0-158.5-54.9-158.5-122.5V122.9   c0-67.6,70.9-122.5,158.5-122.5c87.5,0,158.4,54.9,158.4,122.5v316.6c0,2.3-1.9,4.2-4.2,4.2h-115c-2.3,0-4.2-1.8-4.2-4.2V128.2z" />
-    <path d="M4.2,228.4c-7.4,51.5-4.8,135.9,6.3,183.3c12.2,51.7,82.3,156.1,113.9,204.6c31.6,48.5,73.8,99.1,73.2,166.6v161.7   c0,19.3-15.7,35-35,35c-19.3,0-34.9-15.7-34.9-35V696.7c0-2.3-1.9-4.2-4.3-4.2H8.4c-2.4,0-4.2,1.9-4.2,4.2v255.2   c0,67.7,70.9,122.5,158.4,122.5c87.5,0,158.5-54.9,158.5-122.5V782.8c-0.5-116-32.2-132.9-73.2-202.4   c-29.4-49.9-101.8-153-113.9-204.6c-11.1-47.4-10.6-102.3-6.3-152.1c0-19.3,15.7-35,34.9-35c19.3,0,35,15.7,35,35V444   c0,2.3,1.9,4.2,4.3,4.2h115c2.4,0,4.2-1.9,4.2-4.2V228.4c0-67.7-70.9-122.5-158.5-122.5C75.1,105.8,4.2,160.7,4.2,228.4" />
-    <path d="M814.9,600.4c-2.4,0-4.3,1.9-4.3,4.2v358.5c0,2.3,1.9,4.3,4.3,4.3h20.8c23.3,0,42.1-18.9,42.1-42.1V642.6   c0-23.3-18.8-42.1-42.1-42.1H814.9z M814.9,207.1c-2.4,0-4.3,1.9-4.3,4.2v292.1c0,2.4,1.9,4.3,4.3,4.3h17.4   c23.2,0,42.1-18.9,42.1-42.1V249.2c0-23.2-18.9-42.1-42.1-42.1H814.9z M691.5,115.3H868c72.9,0,132,59.1,132,132v185.1   c0,51.9-34,95.7-81,110.7v2.5c46.9,15,81,58.8,81,110.8v282.6c0,64.2-52.1,116.3-116.3,116.3l-192.2,0.1c-2.4,0-4.2-1.9-4.2-4.2   V119.4C687.2,117.2,689.1,115.3,691.5,115.3" />
+<svg 
+    xmlns="http://www.w3.org/2000/svg" 
+    xmlns:xlink="http://www.w3.org/1999/xlink" 
+    aria-hidden="true" 
+    role="img"
+    width="48" 
+    height="48" 
+    preserveAspectRatio="xMidYMid meet" 
+    viewBox="0 0 1300 1300"
+>
+    <path d="M539.3,128.2c0-19.3-15.7-35-35-35c-19.3,0-35,15.6-35,35v882.1c0,19.4,15.7,35,35,35c19.3,0,35-15.7,35-35V692.4   c0-2.3,1.9-4.2,4.2-4.2h115c2.3,0,4.2,1.9,4.2,4.2v320.7c0,67.7-71,122.5-158.4,122.5c-87.5,0-158.5-54.9-158.5-122.5V122.9   c0-67.6,70.9-122.5,158.5-122.5c87.5,0,158.4,54.9,158.4,122.5v316.6c0,2.3-1.9,4.2-4.2,4.2h-115c-2.3,0-4.2-1.8-4.2-4.2V128.2z" />
+    <path d="M4.2,228.4c-7.4,51.5-4.8,135.9,6.3,183.3c12.2,51.7,82.3,156.1,113.9,204.6c31.6,48.5,73.8,99.1,73.2,166.6v161.7   c0,19.3-15.7,35-35,35c-19.3,0-34.9-15.7-34.9-35V696.7c0-2.3-1.9-4.2-4.3-4.2H8.4c-2.4,0-4.2,1.9-4.2,4.2v255.2   c0,67.7,70.9,122.5,158.4,122.5c87.5,0,158.5-54.9,158.5-122.5V782.8c-0.5-116-32.2-132.9-73.2-202.4   c-29.4-49.9-101.8-153-113.9-204.6c-11.1-47.4-10.6-102.3-6.3-152.1c0-19.3,15.7-35,34.9-35c19.3,0,35,15.7,35,35V444   c0,2.3,1.9,4.2,4.3,4.2h115c2.4,0,4.2-1.9,4.2-4.2V228.4c0-67.7-70.9-122.5-158.5-122.5C75.1,105.8,4.2,160.7,4.2,228.4" />
+    <path d="M814.9,600.4c-2.4,0-4.3,1.9-4.3,4.2v358.5c0,2.3,1.9,4.3,4.3,4.3h20.8c23.3,0,42.1-18.9,42.1-42.1V642.6   c0-23.3-18.8-42.1-42.1-42.1H814.9z M814.9,207.1c-2.4,0-4.3,1.9-4.3,4.2v292.1c0,2.4,1.9,4.3,4.3,4.3h17.4   c23.2,0,42.1-18.9,42.1-42.1V249.2c0-23.2-18.9-42.1-42.1-42.1H814.9z M691.5,115.3H868c72.9,0,132,59.1,132,132v185.1   c0,51.9-34,95.7-81,110.7v2.5c46.9,15,81,58.8,81,110.8v282.6c0,64.2-52.1,116.3-116.3,116.3l-192.2,0.1c-2.4,0-4.2-1.9-4.2-4.2   V119.4C687.2,117.2,689.1,115.3,691.5,115.3" />
 </svg>

package/package.json

@@ -1,6 +1,6 @@
 {
     "name":  "scb-wc",
-    "version":  "0.1.37",
+    "version":  "0.1.38",
     "type":  "module",
     "main":  "index.js",
     "module":  "index.js",
@@ -437,5 +437,5 @@
                                                         },
                     "./mvc/*":  "./mvc/*"
                 },
-    "buildHash":  "A736CB22BEE93ECAB39C59E23238853E3C131C3CD0CBFA7354910EE85F08FF0B"
+    "buildHash":  "7BA2245B4918B4B1BACCC43E13EBC7883278A7CE2D622D2F573F24ECCC58AC72"
 }

package/scb-toc/scb-toc-item.js

@@ -1,6 +1,7 @@
 import { __decorate as e } from "../_virtual/_@oxc-project_runtime@0.126.0/helpers/decorate.js";
 import "../scb-chevron/scb-chevron.js";
 import "../scb-divider/scb-divider.js";
+import "../scb-chip/scb-chip.js";
 import { LitElement as t, css as n, html as r } from "lit";
 import { customElement as i, property as a } from "lit/decorators.js";
 import "@material/web/focus/md-focus-ring.js";
@@ -158,12 +159,21 @@ var o, s = class extends t {
 
       .scb-toc-item-top {
         padding: var(--scb-toc-item-top-padding-y) var(--scb-toc-item-top-padding-x);
+        position: relative;
         display: flex;
         gap: var(--scb-toc-item-top-gap);
         flex-direction: row;
         align-items: flex-start;
       }
 
+      .scb-toc-item-top.has-trailing {
+        padding-right: calc(
+          var(--scb-toc-item-top-padding-x) +
+          var(--scb-toc-item-chevron-size) +
+          var(--scb-toc-item-top-gap)
+        );
+      }
+
       .scb-toc-item-top.no-supporting-text {
         align-items: center;
       }
@@ -223,6 +233,15 @@ var o, s = class extends t {
         align-items: flex-start;
       }
 
+      .toc-chevron-button-wrapper.trailing-slot {
+        position: absolute;
+        top: 50%;
+        right: var(--scb-toc-item-top-padding-x);
+        margin-left: 0;
+        align-items: center;
+        transform: translateY(-50%);
+      }
+
       .toc-chevron-button {
         position: relative;
         display: inline-flex;
@@ -402,7 +421,7 @@ var o, s = class extends t {
 		let e = `bottom-${this._unique}`, t = `toc-label-${this._unique}`, n = `toc-chevron-${this._unique}`, i = this.supportingText.trim().length > 0;
 		return r`
       <div class="scb-toc-item" role="listitem">
-        <div class=${`scb-toc-item-top${i ? "" : " no-supporting-text"}`}>
+        <div class=${`scb-toc-item-top${i ? "" : " no-supporting-text"}${this._trailingSlotHasContent ? " has-trailing" : ""}`}>
           <div>
             <div class="toc-item-label-wrapper">
               <a
@@ -419,7 +438,7 @@ var o, s = class extends t {
           </div>
 
           ${this._trailingSlotHasContent ? r`
-                <div class="toc-chevron-button-wrapper">
+                <div class="toc-chevron-button-wrapper trailing-slot">
                   <slot name="trailing"></slot>
                 </div>
               ` : this._slotHasContent ? r`

package/scb-wc.bundle.js

@@ -12245,12 +12245,21 @@
 
       .scb-toc-item-top {
         padding: var(--scb-toc-item-top-padding-y) var(--scb-toc-item-top-padding-x);
+        position: relative;
         display: flex;
         gap: var(--scb-toc-item-top-gap);
         flex-direction: row;
         align-items: flex-start;
       }
 
+      .scb-toc-item-top.has-trailing {
+        padding-right: calc(
+          var(--scb-toc-item-top-padding-x) +
+          var(--scb-toc-item-chevron-size) +
+          var(--scb-toc-item-top-gap)
+        );
+      }
+
       .scb-toc-item-top.no-supporting-text {
         align-items: center;
       }
@@ -12310,6 +12319,15 @@
         align-items: flex-start;
       }
 
+      .toc-chevron-button-wrapper.trailing-slot {
+        position: absolute;
+        top: 50%;
+        right: var(--scb-toc-item-top-padding-x);
+        margin-left: 0;
+        align-items: center;
+        transform: translateY(-50%);
+      }
+
       .toc-chevron-button {
         position: relative;
         display: inline-flex;
@@ -12400,7 +12418,7 @@
       }
     `]}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=Array.from(this.children).some(e=>{let t=e.getAttribute(`slot`);return t===null||t===``}),this._trailingSlotHasContent=Array.from(this.children).some(e=>e.getAttribute(`slot`)===`trailing`),!this._slotHasContent&&this.expanded&&(this.expanded=!1)}disconnectedCallback(){super.disconnectedCallback(),this._overflowVisibleTimer!==null&&(window.clearTimeout(this._overflowVisibleTimer),this._overflowVisibleTimer=null)}_applyInertByExpanded(){let 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;let e=this.renderRoot.querySelector(`.scb-toc-item-bottom`);if(!e){this.setAttribute(`data-expanded-settled`,``);return}let 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){let t=getComputedStyle(e),n=t.transitionDuration.split(`,`).map(e=>e.trim()),r=t.transitionDelay.split(`,`).map(e=>e.trim()),i=e=>{let t=parseFloat(e);return Number.isFinite(t)?e.endsWith(`ms`)?t:e.endsWith(`s`)?t*1e3:t:0},a=Math.max(n.length,r.length),o=0;for(let e=0;e<a;e+=1){let t=i(n[e]??n[n.length-1]??`0s`),a=i(r[e]??r[r.length-1]??`0s`);o=Math.max(o,t+a)}return Math.ceil(o)}_supportsInert(){return`inert`in HTMLElement.prototype}_collectFocusableFromSlot(){let e=this.renderRoot.querySelector(`slot:not([name])`);if(!e)return[];let t=e.assignedElements({flatten:!0}),n=[],r=e=>{e instanceof HTMLElement&&e.matches(`a,button,input,select,textarea,[tabindex]`)&&n.push(e)};return t.forEach(e=>{r(e),e.querySelectorAll?.(`a,button,input,select,textarea,[tabindex]`).forEach(e=>r(e))}),n}_removeTabIndexesIfNeeded(){this._supportsInert()||this._collectFocusableFromSlot().forEach(e=>{let t=e.getAttribute(`tabindex`);t!==null&&e.setAttribute(`data-scb-prev-tabindex`,t),e.setAttribute(`tabindex`,`-1`)})}_restoreTabIndexesIfNeeded(){this._supportsInert()||this._collectFocusableFromSlot().forEach(e=>{let t=e.getAttribute(`data-scb-prev-tabindex`);t===null?e.removeAttribute(`tabindex`):(e.setAttribute(`tabindex`,t),e.removeAttribute(`data-scb-prev-tabindex`))})}render(){let e=`bottom-${this._unique}`,t=`toc-label-${this._unique}`,n=`toc-chevron-${this._unique}`,r=this.supportingText.trim().length>0;return b`
       <div class="scb-toc-item" role="listitem">
-        <div class=${`scb-toc-item-top${r?``:` no-supporting-text`}`}>
+        <div class=${`scb-toc-item-top${r?``:` no-supporting-text`}${this._trailingSlotHasContent?` has-trailing`:``}`}>
           <div>
             <div class="toc-item-label-wrapper">
               <a
@@ -12417,7 +12435,7 @@
           </div>
 
           ${this._trailingSlotHasContent?b`
-                <div class="toc-chevron-button-wrapper">
+                <div class="toc-chevron-button-wrapper trailing-slot">
                   <slot name="trailing"></slot>
                 </div>
               `:this._slotHasContent?b`