scb-wc-test 0.1.81 → 0.1.83

package/all.js

@@ -62,6 +62,7 @@ import './mvc/components/scb-textfield/scb-textfield.js';
 import './mvc/components/scb-toc/scb-toc-item.js';
 import './mvc/components/scb-toc/scb-toc.js';
 import './mvc/components/scb-tooltip/scb-tooltip.js';
+import './mvc/components/scb-viz/scb-viz.js';
 import './mvc/vendor/preload-helper.js';
 import './mvc/vendor/vendor-lit.js';
 import './mvc/vendor/vendor-material.js';
@@ -127,3 +128,4 @@ import './scb-textfield/scb-textfield.js';
 import './scb-toc/scb-toc-item.js';
 import './scb-toc/scb-toc.js';
 import './scb-tooltip/scb-tooltip.js';
+import './scb-viz/scb-viz.js';

package/index.d.ts

@@ -59,3 +59,4 @@ export * from './scb-textfield/scb-textfield';
 export * from './scb-toc/scb-toc-item';
 export * from './scb-toc/scb-toc';
 export * from './scb-tooltip/scb-tooltip';
+export * from './scb-viz/scb-viz';

package/index.js

@@ -15,12 +15,12 @@ import { ScbDialog as k } from "./scb-dialog/scb-dialog.js";
 import { ScbDivider as y } from "./scb-divider/scb-divider.js";
 import { ScbDrawerItem as P } from "./scb-drawer/scb-drawer-item.js";
 import { ScbDrawerSection as M } from "./scb-drawer/scb-drawer-section.js";
-import { ScbDrawer as N } from "./scb-drawer/scb-drawer.js";
-import { ScbSubDrawer as z } from "./scb-drawer/scb-sub-drawer.js";
+import { ScbDrawer as z } from "./scb-drawer/scb-drawer.js";
+import { ScbSubDrawer as R } from "./scb-drawer/scb-sub-drawer.js";
 import { ScbFactCardContent as U } from "./scb-fact-card/scb-fact-card-content.js";
-import { ScbFactCard as q } from "./scb-fact-card/scb-fact-card.js";
-import { ScbFooterSection as J } from "./scb-footer/scb-footer-section.js";
-import { ScbFooter as Q } from "./scb-footer/scb-footer.js";
+import { ScbFactCard as j } from "./scb-fact-card/scb-fact-card.js";
+import { ScbFooterSection as E } from "./scb-footer/scb-footer-section.js";
+import { ScbFooter as O } from "./scb-footer/scb-footer.js";
 import { ScbGridItem as W } from "./scb-grid/scb-grid-item.js";
 import { ScbGrid as Y } from "./scb-grid/scb-grid.js";
 import { ScbStack as _ } from "./scb-grid/scb-stack.js";
@@ -42,12 +42,12 @@ import { ScbNotification as kr } from "./scb-notification/scb-notification.js";
 import { ScbNotificationCard as yr } from "./scb-notification-card/scb-notification-card.js";
 import { ScbPagination as Pr } from "./scb-pagination/scb-pagination.js";
 import { ScbProgressIndicator as Mr } from "./scb-progress-indicator/scb-progress-indicator.js";
-import { ScbRadioButton as Nr } from "./scb-radio-button/scb-radio-button.js";
-import { ScbRadioGroup as zr } from "./scb-radio-button/scb-radio-group.js";
+import { ScbRadioButton as zr } from "./scb-radio-button/scb-radio-button.js";
+import { ScbRadioGroup as Rr } from "./scb-radio-button/scb-radio-group.js";
 import { ScbSearch as Ur } from "./scb-search/scb-search.js";
-import { ScbSegmentedButton as qr } from "./scb-segmented-button/scb-segmented-button.js";
-import { ScbSegmentedItem as Jr } from "./scb-segmented-button/scb-segmented-item.js";
-import { ScbSnackbar as Qr } from "./scb-snackbar/scb-snackbar.js";
+import { ScbSegmentedButton as jr } from "./scb-segmented-button/scb-segmented-button.js";
+import { ScbSegmentedItem as Er } from "./scb-segmented-button/scb-segmented-item.js";
+import { ScbSnackbar as Or } from "./scb-snackbar/scb-snackbar.js";
 import { ScbStatusPill as Wr } from "./scb-status-pill/scb-status-pill.js";
 import { ScbStep as Yr } from "./scb-stepper/scb-step.js";
 import { ScbStepper as _r } from "./scb-stepper/scb-stepper.js";
@@ -55,10 +55,11 @@ import { ScbSwitch as ro } from "./scb-switch/scb-switch.js";
 import { ScbPrimaryTab as eo } from "./scb-tabs/scb-primary-tab.js";
 import { ScbSecondaryTab as co } from "./scb-tabs/scb-secondary-tab.js";
 import { ScbTabs as mo } from "./scb-tabs/scb-tabs.js";
-import { ScbTextField2 as bo } from "./scb-textfield/scb-textfield.js";
+import { ScbTextField as bo } from "./scb-textfield/scb-textfield.js";
 import { ScbTocItem as fo } from "./scb-toc/scb-toc-item.js";
 import { ScbToc as io } from "./scb-toc/scb-toc.js";
 import { ScbTooltip as uo } from "./scb-tooltip/scb-tooltip.js";
+import { ScbViz as Io } from "./scb-viz/scb-viz.js";
 export {
   n as SCBBreadcrumb,
   i as SCBBreadcrumbItem,
@@ -75,13 +76,13 @@ export {
   H as ScbChip,
   k as ScbDialog,
   y as ScbDivider,
-  N as ScbDrawer,
+  z as ScbDrawer,
   P as ScbDrawerItem,
   M as ScbDrawerSection,
-  q as ScbFactCard,
+  j as ScbFactCard,
   U as ScbFactCardContent,
-  Q as ScbFooter,
-  J as ScbFooterSection,
+  O as ScbFooter,
+  E as ScbFooterSection,
   Y as ScbGrid,
   W as ScbGridItem,
   br as ScbHeader,
@@ -102,23 +103,24 @@ export {
   Pr as ScbPagination,
   eo as ScbPrimaryTab,
   Mr as ScbProgressIndicator,
-  Nr as ScbRadioButton,
-  zr as ScbRadioGroup,
+  zr as ScbRadioButton,
+  Rr as ScbRadioGroup,
   Ur as ScbSearch,
   co as ScbSecondaryTab,
-  qr as ScbSegmentedButton,
-  Jr as ScbSegmentedItem,
-  Qr as ScbSnackbar,
+  jr as ScbSegmentedButton,
+  Er as ScbSegmentedItem,
+  Or as ScbSnackbar,
   _ as ScbStack,
   Wr as ScbStatusPill,
   Yr as ScbStep,
   _r as ScbStepper,
-  z as ScbSubDrawer,
+  R as ScbSubDrawer,
   Hr as ScbSubMenu,
   ro as ScbSwitch,
   mo as ScbTabs,
-  bo as ScbTextField2,
+  bo as ScbTextField,
   io as ScbToc,
   fo as ScbTocItem,
-  uo as ScbTooltip
+  uo as ScbTooltip,
+  Io as ScbViz
 };

package/mvc/components/all.js

@@ -59,3 +59,4 @@ import './scb-textfield/scb-textfield.js';
 import './scb-toc/scb-toc.js';
 import './scb-toc/scb-toc-item.js';
 import './scb-tooltip/scb-tooltip.js';
+import './scb-viz/scb-viz.js';

package/mvc/components/scb-chip/scb-chip.js

@@ -37,12 +37,7 @@ import{_ as h}from"../../vendor/preload-helper.js";import{a as p,n as r,i as _,x
     }
 
     md-icon {
-      color: var(--p-20);
-      font-size: var(--scb-icon-size-large);
-    }
-    @media (prefers-color-scheme: dark) {
-      md-icon {
-        color: var(--md-sys-color-on-surface);
-      }
+      color: var(--md-sys-color-on-surface);
+      font-size: var(--md-sys-typescale-body-large-size);
     }
   `;s([r({type:String,reflect:!0})],t.prototype,"variant",2);s([r({type:String})],t.prototype,"label",2);s([r({type:String})],t.prototype,"icon",2);s([r({type:Boolean,reflect:!0})],t.prototype,"disabled",2);s([r({type:Boolean,reflect:!0})],t.prototype,"elevated",2);s([r({type:Boolean,reflect:!0})],t.prototype,"removable",2);s([r({type:Boolean,reflect:!0})],t.prototype,"selected",2);s([r({type:String})],t.prototype,"href",2);s([r({type:String})],t.prototype,"target",2);t=s([u("scb-chip")],t);export{t as ScbChip};

package/mvc/components/scb-horizontal-scroller/scb-horizontal-scroller.js

@@ -1,21 +1,23 @@
-import{a as d,n as h,i as u,x as a,t as b}from"../../vendor/vendor.js";import"../scb-icon-button/scb-icon-button.js";import"../scb-button/scb-button.js";import"../../vendor/vendor-material.js";import"../../vendor/preload-helper.js";import"../scb-tooltip/scb-tooltip.js";(function(){try{var t=typeof globalThis<"u"?globalThis:window;if(!t.__scb_ce_guard_installed__){t.__scb_ce_guard_installed__=!0;var l=customElements.define.bind(customElements);customElements.define=function(i,r,o){try{customElements.get(i)||l(i,r,o)}catch(e){var s=String(e||"");if(s.indexOf("already been used")===-1&&s.indexOf("NotSupportedError")===-1)throw e}}}}catch{}})();var f=Object.defineProperty,p=Object.getOwnPropertyDescriptor,n=(t,l,i,r)=>{for(var o=r>1?void 0:r?p(l,i):l,s=t.length-1,e;s>=0;s--)(e=t[s])&&(o=(r?e(l,i,o):e(o))||o);return r&&o&&f(l,i,o),o};let c=class extends u{constructor(){super(...arguments),this.variant="standard",this.width="100%",this.showScrollbar=!1,this.rightScrollButtonLabel="Scrolla höger",this.leftScrollButtonLabel="Scrolla vänster",this.updateScrollButtons=()=>{this.requestUpdate();const t=this.shadowRoot?.querySelector(".scb-horizontal-scroller");if(!t)return;t.scrollLeft>0?this.setAttribute("data-scroll-left",""):this.removeAttribute("data-scroll-left");const l=t;l.scrollLeft+l.clientWidth<l.scrollWidth-1?this.setAttribute("data-scroll-right",""):this.removeAttribute("data-scroll-right")},this.lastScrollLeft=0,this.isScrolling=!1,this.scrollEndTimeout=null,this.handleScroll=()=>{const t=this.shadowRoot?.querySelector(".scb-horizontal-scroller");t&&(this.updateScrollButtons(),this.dispatchCustomEvent("scb-scroll",{scrollLeft:t.scrollLeft}),this.isScrolling||(this.isScrolling=!0,this.dispatchCustomEvent("scb-scroll-start",{scrollLeft:t.scrollLeft})),clearTimeout(this.scrollEndTimeout),this.scrollEndTimeout=setTimeout(()=>{this.isScrolling=!1,this.dispatchCustomEvent("scb-scroll-end",{scrollLeft:t.scrollLeft})},120),t.scrollLeft>this.lastScrollLeft?this.dispatchCustomEvent("scb-scroll-right",{scrollLeft:t.scrollLeft}):t.scrollLeft<this.lastScrollLeft&&this.dispatchCustomEvent("scb-scroll-left",{scrollLeft:t.scrollLeft}),this.lastScrollLeft=t.scrollLeft)}}doScrollBy(t){const l=this.shadowRoot?.querySelector(".scb-horizontal-scroller");l&&l.scrollBy({left:t,behavior:"smooth"})}get canScrollLeft(){const t=this.shadowRoot?.querySelector(".scb-horizontal-scroller");return t?t.scrollLeft>0:!1}get canScrollRight(){const t=this.shadowRoot?.querySelector(".scb-horizontal-scroller");if(!t)return!1;const l=t;return l.scrollLeft+l.clientWidth<l.scrollWidth-1}connectedCallback(){super.connectedCallback(),this.addEventListener("scroll",this.updateScrollButtons,!0)}disconnectedCallback(){super.disconnectedCallback(),this.removeEventListener("scroll",this.updateScrollButtons,!0)}dispatchCustomEvent(t,l={}){this.dispatchEvent(new CustomEvent(t,{detail:l,bubbles:!0,composed:!0}))}firstUpdated(){const t=this.shadowRoot?.querySelector(".scb-horizontal-scroller"),l=this.shadowRoot?.querySelector(".scroll-shadow-left"),i=this.shadowRoot?.querySelector(".scroll-shadow-right"),r=this.shadowRoot?.querySelector("slot");t&&(t.addEventListener("scroll",this.handleScroll),t.addEventListener("wheel",function(s){s.deltaY!==0&&(s.preventDefault(),t.scrollLeft+=s.deltaY)},{passive:!1}));const o=()=>{if(r&&l&&i){const s=r.getBoundingClientRect();l.style.height=`${s.height}px`,i.style.height=`${s.height}px`}};o(),r&&new ResizeObserver(o).observe(r),this.updateScrollButtons()}updated(t){const l=this.shadowRoot?.querySelector(".scroll-shadow-left"),i=this.shadowRoot?.querySelector(".scroll-shadow-right"),r=this.shadowRoot?.querySelector("slot"),o=this.shadowRoot?.querySelector(".scb-horizontal-scroller");o&&(o.addEventListener("scroll",this.handleScroll),o.addEventListener("wheel",function(e){e.deltaY!==0&&(e.preventDefault(),o.scrollLeft+=e.deltaY)},{passive:!1})),t.has("width")&&this.style.setProperty("--scb-horizontal-scroller-width",this.width);const s=()=>{if(r&&l&&i){const e=r.getBoundingClientRect();l.style.height=`${e.height}px`,i.style.height=`${e.height}px`}};s(),r&&new ResizeObserver(s).observe(r)}render(){switch(this.variant){case"inline":return a`
-        <div class="scb-horizontal-scroller" tabindex="0">
-          <div class="scroll-shadow-left"></div>
+import{a as u,n as h,i as b,x as c,t as f}from"../../vendor/vendor.js";import"../scb-icon-button/scb-icon-button.js";import"../scb-button/scb-button.js";import"../../vendor/vendor-material.js";import"../../vendor/preload-helper.js";import"../scb-tooltip/scb-tooltip.js";(function(){try{var t=typeof globalThis<"u"?globalThis:window;if(!t.__scb_ce_guard_installed__){t.__scb_ce_guard_installed__=!0;var l=customElements.define.bind(customElements);customElements.define=function(i,s,o){try{customElements.get(i)||l(i,s,o)}catch(r){var e=String(r||"");if(e.indexOf("already been used")===-1&&e.indexOf("NotSupportedError")===-1)throw r}}}}catch{}})();var p=Object.defineProperty,g=Object.getOwnPropertyDescriptor,n=(t,l,i,s)=>{for(var o=s>1?void 0:s?g(l,i):l,e=t.length-1,r;e>=0;e--)(r=t[e])&&(o=(s?r(l,i,o):r(o))||o);return s&&o&&p(l,i,o),o};let a=class extends b{constructor(){super(...arguments),this.variant="standard",this.width="100%",this.showScrollbar=!0,this.rightScrollButtonLabel="Scrolla höger",this.leftScrollButtonLabel="Scrolla vänster",this.contentFlex=!1,this.updateScrollButtons=()=>{this.requestUpdate();const t=this.shadowRoot?.querySelector(".scb-horizontal-scroller");if(!t)return;t.scrollLeft>0?this.setAttribute("data-scroll-left",""):this.removeAttribute("data-scroll-left");const l=t;l.scrollLeft+l.clientWidth<l.scrollWidth-1?this.setAttribute("data-scroll-right",""):this.removeAttribute("data-scroll-right")},this.lastScrollLeft=0,this.isScrolling=!1,this.scrollEndTimeout=null,this.handleScroll=()=>{const t=this.shadowRoot?.querySelector(".scb-horizontal-scroller");t&&(this.updateScrollButtons(),this.dispatchCustomEvent("scb-scroll",{scrollLeft:t.scrollLeft}),this.isScrolling||(this.isScrolling=!0,this.dispatchCustomEvent("scb-scroll-start",{scrollLeft:t.scrollLeft})),clearTimeout(this.scrollEndTimeout),this.scrollEndTimeout=setTimeout(()=>{this.isScrolling=!1,this.dispatchCustomEvent("scb-scroll-end",{scrollLeft:t.scrollLeft})},120),t.scrollLeft>this.lastScrollLeft?this.dispatchCustomEvent("scb-scroll-right",{scrollLeft:t.scrollLeft}):t.scrollLeft<this.lastScrollLeft&&this.dispatchCustomEvent("scb-scroll-left",{scrollLeft:t.scrollLeft}),this.lastScrollLeft=t.scrollLeft)}}doScrollBy(t){const l=this.shadowRoot?.querySelector(".scb-horizontal-scroller");l&&l.scrollBy({left:t,behavior:"smooth"})}get canScrollLeft(){const t=this.shadowRoot?.querySelector(".scb-horizontal-scroller");return t?t.scrollLeft>0:!1}get canScrollRight(){const t=this.shadowRoot?.querySelector(".scb-horizontal-scroller");if(!t)return!1;const l=t;return l.scrollLeft+l.clientWidth<l.scrollWidth-1}connectedCallback(){super.connectedCallback(),this.addEventListener("scroll",this.updateScrollButtons,!0)}disconnectedCallback(){super.disconnectedCallback(),this.removeEventListener("scroll",this.updateScrollButtons,!0)}dispatchCustomEvent(t,l={}){this.dispatchEvent(new CustomEvent(t,{detail:l,bubbles:!0,composed:!0}))}firstUpdated(){const t=this.shadowRoot?.querySelector(".scb-horizontal-scroller"),l=this.shadowRoot?.querySelector(".scroll-shadow-left"),i=this.shadowRoot?.querySelector(".scroll-shadow-right"),s=this.shadowRoot?.querySelector("slot");t&&(t.addEventListener("scroll",this.handleScroll),t.addEventListener("wheel",function(e){e.deltaY!==0&&(e.preventDefault(),t.scrollLeft+=e.deltaY)},{passive:!1}));const o=()=>{if(s&&l&&i){const e=s.getBoundingClientRect();l.style.height=`${e.height}px`,i.style.height=`${e.height}px`}};o(),s&&new ResizeObserver(o).observe(s),this.updateComplete.then(()=>{this.updateScrollButtons()})}updated(t){const l=this.shadowRoot?.querySelector(".scroll-shadow-left"),i=this.shadowRoot?.querySelector(".scroll-shadow-right"),s=this.shadowRoot?.querySelector("slot"),o=this.shadowRoot?.querySelector(".scb-horizontal-scroller");if(o){o.addEventListener("scroll",this.handleScroll),o.addEventListener("wheel",function(d){d.deltaY!==0&&(d.preventDefault(),o.scrollLeft+=d.deltaY)},{passive:!1}),o.scrollLeft>0?this.setAttribute("data-scroll-left",""):this.removeAttribute("data-scroll-left");const r=o;r.scrollLeft+r.clientWidth<r.scrollWidth-1?this.setAttribute("data-scroll-right",""):this.removeAttribute("data-scroll-right")}t.has("width")&&this.style.setProperty("--scb-horizontal-scroller-width",this.width);const e=()=>{if(s&&l&&i){const r=s.getBoundingClientRect();l.style.height=`${r.height}px`,i.style.height=`${r.height}px`}};e(),s&&new ResizeObserver(e).observe(s)}render(){const t=this.variant;var l=!!(this.canScrollLeft||this.canScrollRight);switch(t){case"inline":return c`
+        <div class="scb-horizontal-scroller ${l?"canScroll":""}" tabindex="0">
+          ${this.variant!="inline"?c`<div class="scroll-shadow-left"></div>`:""}
               <slot></slot>
               <md-focus-ring inward></md-focus-ring>
-          <div class="scroll-shadow-right"></div>
+          ${this.variant!="inline"?c`<div class="scroll-shadow-right"></div>`:""}
         </div>
-        <div class="scroll-buttons">
-          ${this.canScrollLeft?a`
-            <scb-button class="scroll-button-left" variant="text" label="${this.leftScrollButtonLabel}" aria-label="Scrolla vänster" icon="chevron_left" @click="${()=>this.doScrollBy(-100)}"></scb-button>
-          `:""}
+        ${l?c`
+          <div class="scroll-buttons">
+            ${this.canScrollLeft?c`
+              <scb-button class="scroll-button-left" variant="text" label="${this.leftScrollButtonLabel}" aria-label="Scrolla vänster" icon="chevron_left" @click="${()=>this.doScrollBy(-100)}"></scb-button>
+            `:""}
 
-          ${this.canScrollRight?a`
-            <scb-button class="scroll-button-right" variant="text" label="${this.rightScrollButtonLabel}" aria-label="Scrolla höger" icon="chevron_right" trailing-icon @click="${()=>this.doScrollBy(100)}"></scb-button>
-          `:""}
-        </div>
-    `;default:return a`
-        ${this.canScrollLeft?a`
+            ${this.canScrollRight?c`
+              <scb-button class="scroll-button-right" variant="text" label="${this.rightScrollButtonLabel}" aria-label="Scrolla höger" icon="chevron_right" trailing-icon @click="${()=>this.doScrollBy(100)}"></scb-button>
+            `:""}
+          </div>
+        `:""}
+    `;default:return c`
+        ${this.canScrollLeft?c`
           <scb-icon-button class="scroll-button-left" icon="chevron_left" aria-label="Scrolla vänster" variant="filled-tonal" @click="${()=>this.doScrollBy(-100)}"></scb-icon-button>
         `:""}
         <div class="scroll-shadow-left"></div>
@@ -24,27 +26,33 @@ import{a as d,n as h,i as u,x as a,t as b}from"../../vendor/vendor.js";import"..
           <md-focus-ring inward></md-focus-ring>
         </div>
         <div class="scroll-shadow-right"></div>
-        ${this.canScrollRight?a`
+        ${this.canScrollRight?c`
           <scb-icon-button class="scroll-button-right" icon="chevron_right" aria-label="Scrolla höger" variant="filled-tonal" @click="${()=>this.doScrollBy(100)}"></scb-icon-button>
         `:""}
-    `}}};c.styles=d`
+    `}}};a.styles=u`
     :host {
-      position: relative;
-      max-width: var(--scb-horizontal-scroller-width, 100%);
       display: flex;
+      position: relative;
       align-items: center;
       gap: var(--spacing-3);
       padding: 0px var(--spacing-8);
     }
     .scb-horizontal-scroller {
+      overflow-x: auto;
+      -ms-overflow-style: none;  /* IE and Edge */
+      scrollbar-width: none;
+      width: 100%;
+    }
+    :host([show-scrollbar]) .scb-horizontal-scroller{
+     scrollbar-width: auto;
+    }
+
+    :host([content-flex]) .scb-horizontal-scroller{
       display: flex;
       flex-direction: row;
-      overflow-x: scroll;
       flex: 1 1 auto;
-      -ms-overflow-style: none;  /* IE and Edge */
-      scrollbar-width: none;
-      max-width: var(--scb-horizontal-scroller-width, 100%);
     }
+    
     .scb-horizontal-scroller::-webkit-scrollbar {
       border-radius: var(--md-sys-shape-corner-large);
       height: 4px;
@@ -66,14 +74,16 @@ import{a as d,n as h,i as u,x as a,t as b}from"../../vendor/vendor.js";import"..
       border-radius: var(--scb-card-focus-ring-radius, var(--md-sys-shape-corner-large));
     }
 
-    :host([show-scrollbar]) .scb-horizontal-scroller{
-      -ms-overflow-style: auto;  /* IE and Edge */
-      scrollbar-width: auto;
+    :host([show-scrollbar]) .scb-horizontal-scroller.canScroll{
       padding-bottom: var(--spacing-5);
     }
     slot {
-      display: flex;
+      display: block;
       padding: var(--spacing-3);
+      min-width: var(--scb-horizontal-scroller-width, auto);
+    }
+    :host([content-flex]) .scb-horizontal-scroller slot {
+      display: flex;
     }
     .scroll-button-left {
       left: var(--spacing-5);
@@ -111,6 +121,7 @@ import{a as d,n as h,i as u,x as a,t as b}from"../../vendor/vendor.js";import"..
     :host([variant="inline"]) {
       flex-direction: column;
       align-items: unset;
+      padding: 0;
       .scroll-buttons {
         display: flex;
         gap: var(--spacing-3);
@@ -131,4 +142,4 @@ import{a as d,n as h,i as u,x as a,t as b}from"../../vendor/vendor.js";import"..
       gap: var(--spacing-5);
     }
 
-  `;n([h({type:String,reflect:!0})],c.prototype,"variant",2);n([h({type:String,reflect:!0})],c.prototype,"width",2);n([h({type:Boolean,reflect:!0,attribute:"show-scrollbar"})],c.prototype,"showScrollbar",2);n([h({type:String,reflect:!0,attribute:"right-scroll-button-label"})],c.prototype,"rightScrollButtonLabel",2);n([h({type:String,reflect:!0,attribute:"left-scroll-button-label"})],c.prototype,"leftScrollButtonLabel",2);c=n([b("scb-horizontal-scroller")],c);
+  `;n([h({type:String,reflect:!0})],a.prototype,"variant",2);n([h({type:String,reflect:!0})],a.prototype,"width",2);n([h({type:Boolean,reflect:!0,attribute:"show-scrollbar"})],a.prototype,"showScrollbar",2);n([h({type:String,reflect:!0,attribute:"right-scroll-button-label"})],a.prototype,"rightScrollButtonLabel",2);n([h({type:String,reflect:!0,attribute:"left-scroll-button-label"})],a.prototype,"leftScrollButtonLabel",2);n([h({type:Boolean,reflect:!0,attribute:"content-flex"})],a.prototype,"contentFlex",2);a=n([f("scb-horizontal-scroller")],a);

package/mvc/components/scb-textfield/scb-textfield.js

@@ -169,4 +169,4 @@ import{_ as h}from"../../vendor/preload-helper.js";import{i as p,x as c,a as u,n
       .scb-textfield.has-error-icon {
         padding-right: 44px; /* Adjust as needed for icon size and spacing */
       }
-    `];s([a({type:String,reflect:!0})],i.prototype,"type",2);s([a({type:String})],i.prototype,"label",2);s([a({type:String,attribute:"supporting-text"})],i.prototype,"supportingText",2);s([a({type:String,attribute:"error-text"})],i.prototype,"errorText",2);s([a({type:String,attribute:"leading-icon"})],i.prototype,"leadingIcon",2);s([a({type:String})],i.prototype,"name",2);s([a({type:String})],i.prototype,"pattern",2);s([a({type:String,attribute:"value"})],i.prototype,"value",2);s([a({type:String})],i.prototype,"underLabel",2);s([a({type:Boolean,reflect:!0})],i.prototype,"error",2);s([a({type:Boolean,reflect:!0})],i.prototype,"disabled",2);s([a({type:Boolean,reflect:!0})],i.prototype,"required",2);i=s([b("scb-textfield")],i);export{i as ScbTextField2};
+    `];s([a({type:String,reflect:!0})],i.prototype,"type",2);s([a({type:String})],i.prototype,"label",2);s([a({type:String,attribute:"supporting-text"})],i.prototype,"supportingText",2);s([a({type:String,attribute:"error-text"})],i.prototype,"errorText",2);s([a({type:String,attribute:"leading-icon"})],i.prototype,"leadingIcon",2);s([a({type:String})],i.prototype,"name",2);s([a({type:String})],i.prototype,"pattern",2);s([a({type:String,attribute:"value"})],i.prototype,"value",2);s([a({type:String})],i.prototype,"underLabel",2);s([a({type:Boolean,reflect:!0})],i.prototype,"error",2);s([a({type:Boolean,reflect:!0})],i.prototype,"disabled",2);s([a({type:Boolean,reflect:!0})],i.prototype,"required",2);i=s([b("scb-textfield")],i);export{i as ScbTextField};

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

@@ -1,4 +1,4 @@
-import{a as p,n as d,i as h,x as l,t as b}from"../../vendor/vendor.js";import"../scb-icon-button/scb-icon-button.js";import"../scb-divider/scb-divider.js";import"../../vendor/preload-helper.js";import"../../vendor/vendor-material.js";import"../scb-tooltip/scb-tooltip.js";import"../scb-button/scb-button.js";(function(){try{var e=typeof globalThis<"u"?globalThis:window;if(!e.__scb_ce_guard_installed__){e.__scb_ce_guard_installed__=!0;var s=customElements.define.bind(customElements);customElements.define=function(o,t,i){try{customElements.get(o)||s(o,t,i)}catch(n){var a=String(n||"");if(a.indexOf("already been used")===-1&&a.indexOf("NotSupportedError")===-1)throw n}}}}catch{}})();var u=Object.defineProperty,m=Object.getOwnPropertyDescriptor,c=(e,s,o,t)=>{for(var i=t>1?void 0:t?m(s,o):s,a=e.length-1,n;a>=0;a--)(n=e[a])&&(i=(t?n(s,o,i):n(i))||i);return t&&i&&u(s,o,i),i};let r=class extends h{constructor(){super(...arguments),this.expanded=!1,this.label="",this.supportingText="",this.itemHref="#",this.divider=!0,this._unique=crypto.randomUUID(),this._slotHasContent=!1,this._onSlotChange=()=>{const e=this.renderRoot.querySelector("slot");this._slotHasContent=!!e&&e.assignedNodes().length>0,this.requestUpdate(),this._updateTabbable()},this.toggleAccordion=()=>{const e=this.closest("scb-toc");e?.hasAttribute("detached")||e.querySelectorAll("scb-toc-item").forEach(t=>{t!==this&&t.expanded&&(t.expanded=!1,this.toggleBottom(t),t.dispatchEvent(new CustomEvent("expanded-changed",{detail:{expanded:!1},bubbles:!0,composed:!0})))});const s=this.expanded;this.expanded=!this.expanded,this.toggleBottom(this),s!==this.expanded&&this.dispatchEvent(new CustomEvent("expanded-changed",{detail:{expanded:this.expanded},bubbles:!0,composed:!0}))}}connectedCallback(){super.connectedCallback(),this.addEventListener("slotchange",this._onSlotChange)}disconnectedCallback(){super.disconnectedCallback(),this.removeEventListener("slotchange",this._onSlotChange)}updated(e){e.has("expanded")&&this._updateTabbable()}_updateTabbable(){if(typeof window>"u")return;const e=this.renderRoot.querySelector("slot");if(!e)return;e.assignedElements({flatten:!0}).forEach(o=>{o.matches("a,button,input,select,textarea,[tabindex]")&&(this.expanded?o.removeAttribute("tabindex"):o.setAttribute("tabindex","-1")),o.querySelectorAll?.("a,button,input,select,textarea,[tabindex]").forEach(t=>{const i=t;this.expanded?i.removeAttribute("tabindex"):i.setAttribute("tabindex","-1")})})}toggleBottom(e){const s=e.renderRoot.querySelector(".scb-toc-item-bottom");s&&(e.expanded?(s.style.maxHeight=`${s.scrollHeight}px`,setTimeout(()=>s.style.maxHeight="unset",160)):(s.style.maxHeight=`${s.scrollHeight}px`,requestAnimationFrame(()=>s.style.maxHeight="0")))}_onKeyDown(e){const s=this.closest("scb-toc"),t=Array.from(s?.querySelectorAll("scb-toc-item")||[]).map(n=>n.renderRoot.querySelector(".scb-toc-item")).filter(n=>!!n),i=e.currentTarget,a=t.indexOf(i);switch(e.key){case"Enter":case" ":e.preventDefault(),this.toggleAccordion();break;case"ArrowDown":e.preventDefault(),a<t.length-1&&t[a+1].focus();break;case"ArrowUp":e.preventDefault(),a>0&&t[a-1].focus();break;case"Home":e.preventDefault(),t.length&&t[0].focus();break;case"End":e.preventDefault(),t.length&&t[t.length-1].focus();break}}render(){const e=`bottom-${this._unique}`;return l`
+import{a as p,n as d,i as h,x as l,t as b}from"../../vendor/vendor.js";import"../scb-icon-button/scb-icon-button.js";import"../scb-divider/scb-divider.js";import"../../vendor/vendor-material.js";import"../../vendor/preload-helper.js";import"../scb-tooltip/scb-tooltip.js";import"../scb-button/scb-button.js";(function(){try{var e=typeof globalThis<"u"?globalThis:window;if(!e.__scb_ce_guard_installed__){e.__scb_ce_guard_installed__=!0;var s=customElements.define.bind(customElements);customElements.define=function(i,t,o){try{customElements.get(i)||s(i,t,o)}catch(n){var a=String(n||"");if(a.indexOf("already been used")===-1&&a.indexOf("NotSupportedError")===-1)throw n}}}}catch{}})();var u=Object.defineProperty,m=Object.getOwnPropertyDescriptor,c=(e,s,i,t)=>{for(var o=t>1?void 0:t?m(s,i):s,a=e.length-1,n;a>=0;a--)(n=e[a])&&(o=(t?n(s,i,o):n(o))||o);return t&&o&&u(s,i,o),o};let r=class extends h{constructor(){super(...arguments),this.expanded=!1,this.label="",this.supportingText="",this.itemHref="#",this.divider=!0,this._unique=crypto.randomUUID(),this._slotHasContent=!1,this._onSlotChange=()=>{const e=this.renderRoot.querySelector("slot");this._slotHasContent=!!e&&e.assignedNodes().length>0,this.requestUpdate(),this._updateTabbable()},this.toggleAccordion=()=>{const e=this.closest("scb-toc");e?.hasAttribute("detached")||e.querySelectorAll("scb-toc-item").forEach(t=>{t!==this&&t.expanded&&(t.expanded=!1,this.toggleBottom(t),t.dispatchEvent(new CustomEvent("expanded-changed",{detail:{expanded:!1},bubbles:!0,composed:!0})))});const s=this.expanded;this.expanded=!this.expanded,this.toggleBottom(this),s!==this.expanded&&this.dispatchEvent(new CustomEvent("expanded-changed",{detail:{expanded:this.expanded},bubbles:!0,composed:!0}))}}connectedCallback(){super.connectedCallback(),this.addEventListener("slotchange",this._onSlotChange)}disconnectedCallback(){super.disconnectedCallback(),this.removeEventListener("slotchange",this._onSlotChange)}updated(e){e.has("expanded")&&this._updateTabbable()}_updateTabbable(){if(typeof window>"u")return;const e=this.renderRoot.querySelector("slot");if(!e)return;e.assignedElements({flatten:!0}).forEach(i=>{i.matches("a,button,input,select,textarea,[tabindex]")&&(this.expanded?i.removeAttribute("tabindex"):i.setAttribute("tabindex","-1")),i.querySelectorAll?.("a,button,input,select,textarea,[tabindex]").forEach(t=>{const o=t;this.expanded?o.removeAttribute("tabindex"):o.setAttribute("tabindex","-1")})})}toggleBottom(e){const s=e.renderRoot.querySelector(".scb-toc-item-bottom");s&&(e.expanded?(s.style.maxHeight=`${s.scrollHeight}px`,setTimeout(()=>s.style.maxHeight="unset",160)):(s.style.maxHeight=`${s.scrollHeight}px`,requestAnimationFrame(()=>s.style.maxHeight="0")))}_onKeyDown(e){const s=this.closest("scb-toc"),t=Array.from(s?.querySelectorAll("scb-toc-item")||[]).map(n=>n.renderRoot.querySelector(".scb-toc-item")).filter(n=>!!n),o=e.currentTarget,a=t.indexOf(o);switch(e.key){case"Enter":case" ":e.preventDefault(),this.toggleAccordion();break;case"ArrowDown":e.preventDefault(),a<t.length-1&&t[a+1].focus();break;case"ArrowUp":e.preventDefault(),a>0&&t[a-1].focus();break;case"Home":e.preventDefault(),t.length&&t[0].focus();break;case"End":e.preventDefault(),t.length&&t[t.length-1].focus();break}}render(){const e=`bottom-${this._unique}`,s=`toc-label-${this._unique}`;return l`
       <div
         class="scb-toc-item"
         role="listitem"
@@ -7,17 +7,20 @@ import{a as p,n as d,i as h,x as l,t as b}from"../../vendor/vendor.js";import"..
       >
         <div class="scb-toc-item-top">
           <div>
-            <a class="toc-item-label" href=${this.itemHref}>${this.label}</a>
+            <div class="toc-item-label-wrapper">
+              <a id=${s} class="toc-item-label" href=${this.itemHref}>${this.label}</a>
+              <md-focus-ring for=${s} inward></md-focus-ring>
+            </div>
             <div class="supporting-text">${this.supportingText}</div>
           </div>
           ${this._slotHasContent?l`
-            <scb-icon-button 
-              icon=${this.expanded?"keyboard_arrow_up":"keyboard_arrow_down"}
-              ariaLabel=${this.expanded?"Collapse section":"Expand section"}
-              @click=${this.toggleAccordion}
-              @keydown=${this._onKeyDown} 
-            ></scb-icon-button>
-          `:""}
+                <scb-icon-button
+                  icon=${this.expanded?"keyboard_arrow_up":"keyboard_arrow_down"}
+                  ariaLabel=${this.expanded?"Collapse section":"Expand section"}
+                  @click=${this.toggleAccordion}
+                  @keydown=${this._onKeyDown}
+                ></scb-icon-button>
+              `:""}
         </div>
         <div
           id=${e}
@@ -28,12 +31,17 @@ import{a as p,n as d,i as h,x as l,t as b}from"../../vendor/vendor.js";import"..
         ${this.divider?l`<scb-divider></scb-divider>`:""}
       </div>
     `}};r.styles=[p`
-      .scb-toc-item-top{ 
-        padding: var(--spacing-5) var(--spacing-3); 
+      .scb-toc-item-top {
+        padding: var(--spacing-5) var(--spacing-3);
         display: flex;
         gap: var(--spacing-5);
         flex-direction: row;
       }
+      .toc-item-label-wrapper {
+        position: relative;
+        display: block;
+        width: fit-content;
+      }
       .toc-item-label {
         display: block;
         width: fit-content;
@@ -46,23 +54,30 @@ import{a as p,n as d,i as h,x as l,t as b}from"../../vendor/vendor.js";import"..
         text-decoration-thickness: 1px;
         text-underline-offset: .1578em;
         margin-bottom: var(--spacing-3);
-        &:hover{
-            color: var(--md-sys-color-on-surface);
-            text-decoration-thickness: 2px;
-        }
-        &:focus{
-            color: var(--md-sys-color-on-surface);
-            outline-color: var(--md-sys-color-primary);
-        }
       }
-      scb-icon-button{
+      .toc-item-label:hover {
+        color: var(--md-sys-color-on-surface);
+        text-decoration-thickness: 2px;
+      }
+      .toc-item-label:focus {
+        color: var(--md-sys-color-on-surface);
+        outline: none;
+
+      }
+      .toc-item-label-wrapper md-focus-ring {
+        position: absolute;
+        pointer-events: none;
+        border-radius: var(--md-sys-shape-corner-small);
+        --md-focus-ring-inward-offset: -7px;
+      }
+      scb-icon-button {
         margin-left: auto;
       }
-      scb-divider{
+      scb-divider {
         margin: var(--spacing-0) var(--spacing-3);
       }
-      .scb-toc-item-bottom { 
-        font-size: var(--md-sys-typescale-body-medium-size); 
+      .scb-toc-item-bottom {
+        font-size: var(--md-sys-typescale-body-medium-size);
         line-height: var(--md-sys-typescale-body-medium-line-height); /* 150% */
         letter-spacing: var(--md-sys-typescale-body-medium-tracking);
       }
@@ -78,7 +93,7 @@ import{a as p,n as d,i as h,x as l,t as b}from"../../vendor/vendor.js";import"..
         padding: var(--spacing-0) var(--spacing-5) var(--spacing-5) var(--spacing-9);
         max-height: 100%;
       }
-      .scb-toc-item{
+      .scb-toc-item {
         color: var(--md-sys-color-on-surface);
       }
     `];c([d({type:Boolean})],r.prototype,"expanded",2);c([d({type:String,reflect:!0})],r.prototype,"label",2);c([d({type:String,attribute:"supporting-text"})],r.prototype,"supportingText",2);c([d({type:String,attribute:"item-href"})],r.prototype,"itemHref",2);c([d({type:Boolean,attribute:"divider"})],r.prototype,"divider",2);r=c([b("scb-toc-item")],r);

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

@@ -1,6 +1,13 @@
-import{a as c,i as a,x as _,t as d}from"../../vendor/vendor.js";import"./scb-toc-item.js";import"../scb-icon-button/scb-icon-button.js";import"../../vendor/preload-helper.js";import"../../vendor/vendor-material.js";import"../scb-tooltip/scb-tooltip.js";import"../scb-button/scb-button.js";import"../scb-divider/scb-divider.js";(function(){try{var r=typeof globalThis<"u"?globalThis:window;if(!r.__scb_ce_guard_installed__){r.__scb_ce_guard_installed__=!0;var s=customElements.define.bind(customElements);customElements.define=function(i,n,t){try{customElements.get(i)||s(i,n,t)}catch(o){var e=String(o||"");if(e.indexOf("already been used")===-1&&e.indexOf("NotSupportedError")===-1)throw o}}}}catch{}})();var m=Object.getOwnPropertyDescriptor,u=(r,s,i,n)=>{for(var t=n>1?void 0:n?m(s,i):s,e=r.length-1,o;e>=0;e--)(o=r[e])&&(t=o(t)||t);return t};let l=class extends a{render(){return _`
-      <div role="list">
+import{a,n as d,i as p,x as _,t as f}from"../../vendor/vendor.js";import"./scb-toc-item.js";import"../scb-icon-button/scb-icon-button.js";import"../../vendor/preload-helper.js";import"../../vendor/vendor-material.js";import"../scb-tooltip/scb-tooltip.js";import"../scb-button/scb-button.js";import"../scb-divider/scb-divider.js";(function(){try{var c=typeof globalThis<"u"?globalThis:window;if(!c.__scb_ce_guard_installed__){c.__scb_ce_guard_installed__=!0;var r=customElements.define.bind(customElements);customElements.define=function(e,s,t){try{customElements.get(e)||r(e,s,t)}catch(i){var o=String(i||"");if(o.indexOf("already been used")===-1&&o.indexOf("NotSupportedError")===-1)throw i}}}}catch{}})();var u=Object.defineProperty,m=Object.getOwnPropertyDescriptor,n=(c,r,e,s)=>{for(var t=s>1?void 0:s?m(r,e):r,o=c.length-1,i;o>=0;o--)(i=c[o])&&(t=(s?i(r,e,t):i(t))||t);return s&&t&&u(r,e,t),t};let l=class extends p{constructor(){super(...arguments),this.detached=!1}render(){return _`
+      <div class="scb-toc-list" role="list">
         <slot></slot>
       </div>
-    `}};l.styles=[c`
-    `];l=u([d("scb-toc")],l);
+    `}};l.styles=[a`
+      :host {
+        display: block;
+      }
+
+      .scb-toc-list {
+        display: block;
+      }
+    `];n([d({type:Boolean,reflect:!0})],l.prototype,"detached",2);l=n([f("scb-toc")],l);