scb-wc 0.1.78 → 0.1.80

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

@@ -1,45 +1,56 @@
-import{_ as v,b as S,g as m,h as i,m as g,y as h}from"../../vendor/vendor.js";import"../../vendor/vendor-lit.js";import"../../vendor/md-focus-ring.js";import{t as e}from"../../vendor/decorate.js";import{n as y,t as p}from"../../vendor/assertClassBrand.js";import"../scb-button/scb-button.js";import"../scb-icon-button/scb-icon-button.js";(function(){try{var n=typeof globalThis<"u"?globalThis:window;if(!n.__scb_ce_guard_installed__){n.__scb_ce_guard_installed__=!0;var l=customElements.define.bind(customElements);customElements.define=function(t,s,r){try{customElements.get(t)||l(t,s,r)}catch(a){var c=String(a||"");if(c.indexOf("already been used")===-1&&c.indexOf("NotSupportedError")===-1)throw a}}}}catch{}})();var d,b,o=(d=new WeakSet,b=class extends v{constructor(...l){super(...l),y(this,d),this.variant="standard",this.width="100%",this.showScrollbar=!1,this.rightScrollButtonLabel="Scrolla höger",this.leftScrollButtonLabel="Scrolla vänster",this.spacing=void 0,this.spacingTop=void 0,this.spacingBottom=void 0,this.spacingLeft=void 0,this.spacingRight=void 0,this.contentFlex=!1,this.internalGap="",this._canScrollLeft=!1,this._canScrollRight=!1,this.updateScrollButtons=()=>{const t=this.scrollerEl||this.shadowRoot?.querySelector(".scb-horizontal-scroller");if(!t){this._canScrollLeft&&(this._canScrollLeft=!1),this._canScrollRight&&(this._canScrollRight=!1),this.removeAttribute("data-scroll-left"),this.removeAttribute("data-scroll-right");return}const s=t.scrollLeft>0,r=t.scrollLeft+t.clientWidth<t.scrollWidth-1;this._canScrollLeft!==s&&(this._canScrollLeft=s),this._canScrollRight!==r&&(this._canScrollRight=r),s?this.setAttribute("data-scroll-left",""):this.removeAttribute("data-scroll-left"),r?this.setAttribute("data-scroll-right",""):this.removeAttribute("data-scroll-right")},this.lastScrollLeft=0,this.isScrolling=!1,this.scrollEndTimeout=null,this.scrollerEl=null,this.slotEl=null,this.sizeObserver=null,this.resizeRaf=null,this.handleScroll=()=>{const t=this.shadowRoot?.querySelector(".scb-horizontal-scroller");t&&(this.updateScrollButtons(),this.dispatchCustomEventWithAlias("scb-scroll",{scrollLeft:t.scrollLeft}),this.isScrolling||(this.isScrolling=!0,this.dispatchCustomEventWithAlias("scb-scroll-start",{scrollLeft:t.scrollLeft})),clearTimeout(this.scrollEndTimeout),this.scrollEndTimeout=setTimeout(()=>{this.isScrolling=!1,this.dispatchCustomEventWithAlias("scb-scroll-end",{scrollLeft:t.scrollLeft})},120),t.scrollLeft>this.lastScrollLeft?this.dispatchCustomEventWithAlias("scb-scroll-right",{scrollLeft:t.scrollLeft}):t.scrollLeft<this.lastScrollLeft&&this.dispatchCustomEventWithAlias("scb-scroll-left",{scrollLeft:t.scrollLeft}),this.lastScrollLeft=t.scrollLeft)},this.handleWheel=t=>{const s=this.scrollerEl||this.shadowRoot?.querySelector(".scb-horizontal-scroller");if(!s||t.deltaY===0)return;const r=s.scrollLeft,c=r>0,a=r+s.clientWidth<s.scrollWidth-1;!c&&!a||(s.scrollLeft+=t.deltaY,s.scrollLeft!==r&&t.preventDefault())}}getScrollStep(){const l=this.scrollerEl||this.shadowRoot?.querySelector(".scb-horizontal-scroller");return l?Math.max(Math.round(l.clientWidth*.8),120):200}doScrollBy(l){const t=this.shadowRoot?.querySelector(".scb-horizontal-scroller");t&&t.scrollBy({left:l,behavior:"smooth"})}connectedCallback(){super.connectedCallback(),this.style.setProperty("--scb-horizontal-scroller-width",this.width)}disconnectedCallback(){super.disconnectedCallback(),this.scrollerEl&&(this.scrollerEl.removeEventListener("scroll",this.handleScroll),this.scrollerEl.removeEventListener("wheel",this.handleWheel)),this.sizeObserver&&(this.sizeObserver.disconnect(),this.sizeObserver=null),this.resizeRaf!==null&&(cancelAnimationFrame(this.resizeRaf),this.resizeRaf=null),this.scrollEndTimeout&&(clearTimeout(this.scrollEndTimeout),this.scrollEndTimeout=null),this.scrollerEl=null,this.slotEl=null}dispatchCustomEvent(l,t={}){this.dispatchEvent(new CustomEvent(l,{detail:t,bubbles:!0,composed:!0}))}dispatchCustomEventWithAlias(l,t={}){if(this.dispatchCustomEvent(l,t),l.includes("-")){const s=l.replace(/-/g,"");this.dispatchCustomEvent(s,t)}}firstUpdated(){this.scrollerEl=this.shadowRoot?.querySelector(".scb-horizontal-scroller"),this.slotEl=this.shadowRoot?.querySelector("slot");const l=this.shadowRoot?.querySelector(".scroll-shadow-left"),t=this.shadowRoot?.querySelector(".scroll-shadow-right");this.scrollerEl&&(this.scrollerEl.addEventListener("scroll",this.handleScroll),this.scrollerEl.addEventListener("wheel",this.handleWheel,{passive:!1}));const s=()=>{if(this.slotEl&&l&&t){const a=this.slotEl.getBoundingClientRect();l.style.height=`${a.height}px`,t.style.height=`${a.height}px`}},r=()=>{s(),this.updateScrollButtons()},c=()=>{this.resizeRaf===null&&(this.resizeRaf=requestAnimationFrame(()=>{this.resizeRaf=null,r()}))};requestAnimationFrame(()=>{r()}),this.slotEl&&this.slotEl.addEventListener("slotchange",()=>{c()}),this.sizeObserver=new ResizeObserver(()=>{c()}),this.scrollerEl&&this.sizeObserver.observe(this.scrollerEl),this.slotEl&&this.sizeObserver.observe(this.slotEl),p(d,this,u).call(this),p(d,this,f).call(this)}updated(l){l.has("width")&&this.style.setProperty("--scb-horizontal-scroller-width",this.width),(l.has("spacing")||l.has("spacingTop")||l.has("spacingBottom")||l.has("spacingLeft")||l.has("spacingRight"))&&p(d,this,u).call(this),(l.has("internalGap")||l.has("contentFlex"))&&p(d,this,f).call(this)}mapSpacingToken(l){if(!l)return;const t=String(l).trim();if(t)return/^\d+$/.test(t)?`var(--spacing-${Math.max(0,Math.min(14,parseInt(t,10)))})`:t}render(){const l=this.variant,t=this._canScrollLeft||this._canScrollRight;return l==="inline"?h`
+const __vite__mapDeps=(i,m=__vite__mapDeps,d=(m.f||(m.f=["../../vendor/lazy-focus-ring.js","../../vendor/rolldown-runtime.js","../../vendor/preload-helper.js"])))=>i.map(i=>d[i]);
+import{_ as m,f as g,g as f,h as y,m as _,p as i,v as h,y as S}from"../../vendor/vendor.js";import"../../vendor/vendor-lit.js";import{t as w}from"../../vendor/preload-helper.js";import{t as s}from"../../vendor/decorate.js";(function(){try{var n=typeof globalThis<"u"?globalThis:window;if(!n.__scb_ce_guard_installed__){n.__scb_ce_guard_installed__=!0;var o=customElements.define.bind(customElements);customElements.define=function(t,l,e){try{customElements.get(t)||o(t,l,e)}catch(c){var a=String(c||"");if(a.indexOf("already been used")===-1&&a.indexOf("NotSupportedError")===-1)throw c}}}}catch{}})();var x=new Map([["arrow_forward","M12 4l-1.41 1.41L15.17 10H4v2h11.17l-4.58 4.59L12 18l8-8-8-8Z"],["chevron_left","M15.41 7.41 14 6l-6 6 6 6 1.41-1.41L10.83 12l4.58-4.59Z"],["chevron_right","M8.59 16.59 10 18l6-6-6-6-1.41 1.41L13.17 12l-4.58 4.59Z"],["close","M18.3 5.71 16.89 4.3 12 9.17 7.11 4.3 5.7 5.71 10.59 10.6 5.7 15.49 7.11 16.9 12 12.01l4.89 4.89 1.41-1.41-4.89-4.89 4.89-4.89Z"],["menu","M3 6h18v2H3V6Zm0 5h18v2H3v-2Zm0 5h18v2H3v-2Z"],["open_in_new","M14 3h7v7h-2V6.41l-9.83 9.83-1.41-1.41L17.59 5H14V3ZM5 5h6v2H7v10h10v-4h2v6H5V5Z"],["payments","M3 6h18v12H3V6Zm2 2v8h14V8H5Zm7 2a2 2 0 1 1 0 4 2 2 0 0 1 0-4ZM7 9h2v2H7V9Zm8 4h2v2h-2v-2Z"],["person_4","M12 12a4 4 0 1 0 0-8 4 4 0 0 0 0 8Zm-8 8c0-3.31 3.58-6 8-6s8 2.69 8 6v1H4v-1Z"],["price_change","M12 2 3 6v6c0 5 3.84 9.74 9 10 5.16-.26 9-5 9-10V6l-9-4Zm1 15h-2v-2h2v2Zm0-4h-2V7h2v6Zm-7 6.5V15h2v2.6a9.1 9.1 0 0 1-2-3.1Zm12-1.9V15h2a9.1 9.1 0 0 1-2 3.1Z"],["search","M9.5 3a6.5 6.5 0 0 1 5.17 10.44l5.45 5.44-1.42 1.42-5.44-5.45A6.5 6.5 0 1 1 9.5 3Zm0 2a4.5 4.5 0 1 0 0 9 4.5 4.5 0 0 0 0-9Z"],["trending_up","M16 6h5v5h-2V9.41l-6.17 6.17-4-4L3.41 17 2 15.59l6.83-6.83 4 4L17.59 8H16V6Z"],["volume_up","M3 9v6h4l5 5V4L7 9H3Zm13.5 3a4.5 4.5 0 0 0-2.5-4.03v8.06A4.5 4.5 0 0 0 16.5 12Zm-2.5-8.7v2.06A7 7 0 0 1 18 12a7 7 0 0 1-4 6.64v2.06A9 9 0 0 0 20 12a9 9 0 0 0-6-8.7Z"],["work","M10 4h4a2 2 0 0 1 2 2v2h4a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2v-8a2 2 0 0 1 2-2h4V6a2 2 0 0 1 2-2Zm0 4h4V6h-4v2Zm-6 2v8h16v-8H4Zm6 3h4v2h-4v-2Z"]]);function p(n,o="material-icon",t){const l=(n||"").trim(),e=x.get(l);return e?m`
+    <svg
+      class=${`${o} scb-svg-icon`}
+      part=${t||f}
+      aria-hidden="true"
+      viewBox="0 0 24 24"
+      focusable="false"
+    >
+      <path d=${e}></path>
+    </svg>
+  `:f}var d,u;function v(){return u??(u=w(()=>import("../../vendor/lazy-focus-ring.js").then(n=>n.i),__vite__mapDeps([0,1,2]),import.meta.url)),u}var r=(d=class extends y{constructor(...o){super(...o),this.variant="standard",this.width="100%",this.showScrollbar=!1,this.rightScrollButtonLabel="Scrolla höger",this.leftScrollButtonLabel="Scrolla vänster",this.spacing=void 0,this.spacingTop=void 0,this.spacingBottom=void 0,this.spacingLeft=void 0,this.spacingRight=void 0,this.contentFlex=!1,this.internalGap="",this._canScrollLeft=!1,this._canScrollRight=!1,this.__scrollLeft=()=>{this.doScrollBy(-this.getScrollStep())},this.__scrollRight=()=>{this.doScrollBy(this.getScrollStep())},this.updateScrollButtons=()=>{const t=this.scrollerEl||this.shadowRoot?.querySelector(".scb-horizontal-scroller");if(!t){this._canScrollLeft=!1,this._canScrollRight=!1,this.toggleAttribute("data-scroll-left",!1),this.toggleAttribute("data-scroll-right",!1);return}const l=t.scrollLeft>0,e=t.scrollLeft+t.clientWidth<t.scrollWidth-1;this._canScrollLeft=l,this._canScrollRight=e,this.toggleAttribute("data-scroll-left",l),this.toggleAttribute("data-scroll-right",e)},this.lastScrollLeft=0,this.isScrolling=!1,this.scrollEndTimeout=null,this.scrollerEl=null,this.slotEl=null,this.sizeObserver=null,this.resizeRaf=null,this.__onFocusIn=()=>{v().then(({ensureFocusRingReady:t})=>t())},this.__onLazyFocusRingKeydown=t=>{!(t instanceof KeyboardEvent)||t.key!=="Tab"||v().then(({ensureFocusRingOnTab:l})=>l(t))},this.handleScroll=()=>{const t=this.scrollerEl;t&&(this.updateScrollButtons(),this.dispatchCustomEventWithAlias("scb-scroll",{scrollLeft:t.scrollLeft}),this.isScrolling||(this.isScrolling=!0,this.dispatchCustomEventWithAlias("scb-scroll-start",{scrollLeft:t.scrollLeft})),clearTimeout(this.scrollEndTimeout),this.scrollEndTimeout=setTimeout(()=>{this.isScrolling=!1,this.dispatchCustomEventWithAlias("scb-scroll-end",{scrollLeft:t.scrollLeft})},120),t.scrollLeft>this.lastScrollLeft?this.dispatchCustomEventWithAlias("scb-scroll-right",{scrollLeft:t.scrollLeft}):t.scrollLeft<this.lastScrollLeft&&this.dispatchCustomEventWithAlias("scb-scroll-left",{scrollLeft:t.scrollLeft}),this.lastScrollLeft=t.scrollLeft)},this.handleWheel=t=>{const l=this.scrollerEl||this.shadowRoot?.querySelector(".scb-horizontal-scroller");if(!l||t.deltaY===0)return;const e=l.scrollLeft,a=e>0,c=e+l.clientWidth<l.scrollWidth-1;!a&&!c||(l.scrollLeft+=t.deltaY,l.scrollLeft!==e&&t.preventDefault())}}getScrollStep(){const o=this.scrollerEl||this.shadowRoot?.querySelector(".scb-horizontal-scroller");return o?Math.max(Math.round(o.clientWidth*.8),120):200}doScrollBy(o){this.scrollerEl?.scrollBy({left:o,behavior:"smooth"})}connectedCallback(){super.connectedCallback(),this.addEventListener("focusin",this.__onFocusIn),this.addEventListener("keydown",this.__onLazyFocusRingKeydown),this.style.setProperty("--scb-horizontal-scroller-width",this.width)}disconnectedCallback(){this.removeEventListener("focusin",this.__onFocusIn),this.removeEventListener("keydown",this.__onLazyFocusRingKeydown),this.renderRoot.removeEventListener("focusin",this.__onFocusIn),this.renderRoot.removeEventListener("keydown",this.__onLazyFocusRingKeydown),super.disconnectedCallback(),this.scrollerEl&&(this.scrollerEl.removeEventListener("scroll",this.handleScroll),this.scrollerEl.removeEventListener("wheel",this.handleWheel)),this.sizeObserver&&(this.sizeObserver.disconnect(),this.sizeObserver=null),this.resizeRaf!==null&&(cancelAnimationFrame(this.resizeRaf),this.resizeRaf=null),this.scrollEndTimeout&&(clearTimeout(this.scrollEndTimeout),this.scrollEndTimeout=null),this.scrollerEl=null,this.slotEl=null}dispatchCustomEvent(o,t={}){this.dispatchEvent(new CustomEvent(o,{detail:t,bubbles:!0,composed:!0}))}dispatchCustomEventWithAlias(o,t={}){if(this.dispatchCustomEvent(o,t),o.includes("-")){const l=o.replace(/-/g,"");this.dispatchCustomEvent(l,t)}}firstUpdated(){this.renderRoot.addEventListener("focusin",this.__onFocusIn),this.renderRoot.addEventListener("keydown",this.__onLazyFocusRingKeydown),this.scrollerEl=this.shadowRoot?.querySelector(".scb-horizontal-scroller"),this.slotEl=this.shadowRoot?.querySelector("slot"),this.scrollerEl&&(this.scrollerEl.addEventListener("scroll",this.handleScroll),this.scrollerEl.addEventListener("wheel",this.handleWheel,{passive:!1}));const o=()=>{this.resizeRaf===null&&(this.resizeRaf=requestAnimationFrame(()=>{this.resizeRaf=null,this.updateScrollButtons()}))};requestAnimationFrame(()=>{this.updateScrollButtons()}),this.slotEl&&this.slotEl.addEventListener("slotchange",()=>{o()}),this.sizeObserver=new ResizeObserver(()=>{o()}),this.scrollerEl&&this.sizeObserver.observe(this.scrollerEl),this.slotEl&&this.sizeObserver.observe(this.slotEl),this.__applySpacing(),this.__applyInternalGap()}updated(o){o.has("width")&&this.style.setProperty("--scb-horizontal-scroller-width",this.width),(o.has("spacing")||o.has("spacingTop")||o.has("spacingBottom")||o.has("spacingLeft")||o.has("spacingRight"))&&this.__applySpacing(),(o.has("internalGap")||o.has("contentFlex"))&&this.__applyInternalGap()}mapSpacingToken(o){if(!o)return;const t=String(o).trim();if(t)return/^\d+$/.test(t)?`var(--spacing-${Math.max(0,Math.min(14,parseInt(t,10)))})`:t}__applySpacing(){const o=this.mapSpacingToken(this.spacing),t=this.mapSpacingToken(this.spacingTop),l=this.mapSpacingToken(this.spacingBottom),e=this.mapSpacingToken(this.spacingLeft),a=this.mapSpacingToken(this.spacingRight),c=t??o,b=l??o;c?this.style.setProperty("--scb-horizontal-scroller-spacing-block-start",c):this.style.removeProperty("--scb-horizontal-scroller-spacing-block-start"),b?this.style.setProperty("--scb-horizontal-scroller-spacing-block-end",b):this.style.removeProperty("--scb-horizontal-scroller-spacing-block-end"),e?this.style.setProperty("--scb-horizontal-scroller-spacing-inline-start",e):this.style.removeProperty("--scb-horizontal-scroller-spacing-inline-start"),a?this.style.setProperty("--scb-horizontal-scroller-spacing-inline-end",a):this.style.removeProperty("--scb-horizontal-scroller-spacing-inline-end")}__applyInternalGap(){const o=this.mapSpacingToken(this.internalGap);this.contentFlex&&o?this.style.setProperty("--scb-horizontal-scroller-internal-gap",o):this.style.removeProperty("--scb-horizontal-scroller-internal-gap")}render(){const o=this.variant,t=this._canScrollLeft||this._canScrollRight;return o==="inline"?h`
           <div class="scb-horizontal-scroller ${t?"canScroll":""}" tabindex="0">
-            ${this.variant!="inline"?h`<div class="scroll-shadow-left"></div>`:""}
             <slot></slot>
             <md-focus-ring inward></md-focus-ring>
-            ${this.variant!="inline"?h`<div class="scroll-shadow-right"></div>`:""}
           </div>
           ${t?h`
                 <div class="scroll-buttons">
                   ${this._canScrollLeft?h`
-                        <scb-button
-                          class="scroll-button-left"
-                          variant="text"
-                          label="${this.leftScrollButtonLabel}"
+                        <button
+                          class="scroll-text-button scroll-button-left"
+                          type="button"
                           aria-label="Scrolla vänster"
-                          icon="chevron_left"
-                          @click="${()=>this.doScrollBy(-this.getScrollStep())}"
-                        ></scb-button>
+                          @click=${this.__scrollLeft}
+                        >
+                          ${p("chevron_left","scroll-control-icon")}
+                          <span>${this.leftScrollButtonLabel}</span>
+                        </button>
                       `:""}
 
                   ${this._canScrollRight?h`
-                        <scb-button
-                          class="scroll-button-right"
-                          variant="text"
-                          label="${this.rightScrollButtonLabel}"
+                        <button
+                          class="scroll-text-button scroll-button-right"
+                          type="button"
                           aria-label="Scrolla höger"
-                          icon="chevron_right"
-                          trailing-icon
-                          @click="${()=>this.doScrollBy(this.getScrollStep())}"
-                        ></scb-button>
+                          @click=${this.__scrollRight}
+                        >
+                          <span>${this.rightScrollButtonLabel}</span>
+                          ${p("chevron_right","scroll-control-icon")}
+                        </button>
                       `:""}
                 </div>
               `:""}
         `:h`
           ${this._canScrollLeft?h`
-                <scb-icon-button
-                  class="scroll-button-left"
-                  icon="chevron_left"
+                <button
+                  class="scroll-control scroll-button-left"
+                  type="button"
                   aria-label="Scrolla vänster"
-                  variant="filled-tonal"
-                  @click="${()=>this.doScrollBy(-this.getScrollStep())}"
-                ></scb-icon-button>
+                  @click=${this.__scrollLeft}
+                >
+                  ${p("chevron_left","scroll-control-icon")}
+                </button>
               `:""}
           <div class="scroll-shadow-left"></div>
           <div class="scb-horizontal-scroller ${t?"canScroll":""}">
@@ -48,149 +59,13 @@ import{_ as v,b as S,g as m,h as i,m as g,y as h}from"../../vendor/vendor.js";im
           </div>
           <div class="scroll-shadow-right"></div>
           ${this._canScrollRight?h`
-                <scb-icon-button
-                  class="scroll-button-right"
-                  icon="chevron_right"
+                <button
+                  class="scroll-control scroll-button-right"
+                  type="button"
                   aria-label="Scrolla höger"
-                  variant="filled-tonal"
-                  @click="${()=>this.doScrollBy(this.getScrollStep())}"
-                ></scb-icon-button>
+                  @click=${this.__scrollRight}
+                >
+                  ${p("chevron_right","scroll-control-icon")}
+                </button>
               `:""}
-        `}},b.styles=S`
-    :host {
-      display: flex;
-      position: relative;
-      align-items: center;
-      gap: var(--spacing-3);
-      padding: 0;
-      overflow: hidden;
-      margin-block-start: var(--scb-horizontal-scroller-spacing-block-start, 0);
-      margin-block-end: var(--scb-horizontal-scroller-spacing-block-end, 0);
-      margin-inline-start: var(--scb-horizontal-scroller-spacing-inline-start, 0);
-      margin-inline-end: var(--scb-horizontal-scroller-spacing-inline-end, 0);
-    }
-    .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;
-      flex: 1 1 auto;
-    }
-
-    .scb-horizontal-scroller::-webkit-scrollbar {
-      border-radius: var(--md-sys-shape-corner-large);
-      height: 4px;
-      width: 10px;
-    }
-    .scb-horizontal-scroller::-webkit-scrollbar-thumb {
-      background: var(--md-sys-color-on-surface);
-      border-radius: var(--md-sys-shape-corner-large);
-      cursor: pointer;
-    }
-    .scb-horizontal-scroller::-webkit-scrollbar-track {
-      background: var(--md-sys-color-secondary-container);
-      border-radius: var(--md-sys-shape-corner-large);
-    }
-    .scb-horizontal-scroller:focus {
-      outline: none;
-    }
-    md-focus-ring {
-      border-radius: var(--scb-card-focus-ring-radius, var(--md-sys-shape-corner-large));
-    }
-
-    :host([show-scrollbar]) .scb-horizontal-scroller.canScroll {
-      padding-bottom: var(--spacing-5);
-    }
-    slot {
-      display: block;
-      box-sizing: border-box;
-      padding-block: var(--spacing-3);
-      padding-inline: 2px;
-      min-width: var(--scb-horizontal-scroller-width, auto);
-    }
-    :host([content-flex]) .scb-horizontal-scroller slot {
-      display: flex;
-      gap: var(--scb-horizontal-scroller-internal-gap);
-    }
-    .scroll-button-left {
-      left: 0px;
-      position: absolute;
-      z-index: 3;
-    }
-    .scroll-button-right {
-      right: 2px;
-      position: absolute;
-      z-index: 3;
-    }
-    .scroll-shadow-left,
-    .scroll-shadow-right {
-      position: absolute;
-      top: 0;
-      width: 5px;
-      bottom: 0;
-      pointer-events: none;
-      background: none;
-      box-shadow: none;
-      transition: box-shadow 0.2s;
-      z-index: 2;
-    }
-    .scroll-shadow-left {
-      left: 0;
-    }
-    .scroll-shadow-right {
-      right: 0;
-    }
-    :host([data-scroll-left]) .scroll-shadow-left {
-      background: var(--md-sys-color-surface-container-lowest);
-      box-shadow:
-        12px 0 30px rgba(0, 0, 0, 0.24),
-        4px 0 12px rgba(78, 5, 5, 0.14);
-    }
-    :host([data-scroll-left]) .scroll-shadow-left::after {
-      content: '';
-      position: absolute;
-      inset-block: 0;
-    }
-    :host([data-scroll-right]) .scroll-shadow-right {
-      background: var(--md-sys-color-surface-container-lowest);
-      box-shadow:
-        -12px 0 30px rgba(0, 0, 0, 0.24),
-        -4px 0 12px rgba(0, 0, 0, 0.14);      
-    }
-    :host([data-scroll-right]) .scroll-shadow-right::after {
-      content: '';
-      position: absolute;
-      inset-block: 0;
-    }
-    :host([variant='inline']) {
-      flex-direction: column;
-      align-items: unset;
-      padding: 0;
-      .scroll-buttons {
-        display: flex;
-        gap: var(--spacing-3);
-      }
-      .scroll-button-right {
-        position: relative;
-        right: unset;
-        z-index: auto;
-        margin-left: auto;
-      }
-      .scroll-button-left {
-        position: relative;
-        left: unset;
-        z-index: auto;
-      }
-    }
-    :host([variant='inline'][show-scrollbar]) {
-      gap: var(--spacing-5);
-    }
-  `,b);function u(){const n=this.mapSpacingToken(this.spacing),l=this.mapSpacingToken(this.spacingTop),t=this.mapSpacingToken(this.spacingBottom),s=this.mapSpacingToken(this.spacingLeft),r=this.mapSpacingToken(this.spacingRight),c=l??n,a=t??n;c?this.style.setProperty("--scb-horizontal-scroller-spacing-block-start",c):this.style.removeProperty("--scb-horizontal-scroller-spacing-block-start"),a?this.style.setProperty("--scb-horizontal-scroller-spacing-block-end",a):this.style.removeProperty("--scb-horizontal-scroller-spacing-block-end"),s?this.style.setProperty("--scb-horizontal-scroller-spacing-inline-start",s):this.style.removeProperty("--scb-horizontal-scroller-spacing-inline-start"),r?this.style.setProperty("--scb-horizontal-scroller-spacing-inline-end",r):this.style.removeProperty("--scb-horizontal-scroller-spacing-inline-end")}function f(){const n=this.mapSpacingToken(this.internalGap);this.contentFlex&&n?this.style.setProperty("--scb-horizontal-scroller-internal-gap",n):this.style.removeProperty("--scb-horizontal-scroller-internal-gap")}e([i({type:String,reflect:!0})],o.prototype,"variant",void 0);e([i({type:String,reflect:!0})],o.prototype,"width",void 0);e([i({type:Boolean,reflect:!0,attribute:"show-scrollbar"})],o.prototype,"showScrollbar",void 0);e([i({type:String,reflect:!0,attribute:"right-scroll-button-label"})],o.prototype,"rightScrollButtonLabel",void 0);e([i({type:String,reflect:!0,attribute:"left-scroll-button-label"})],o.prototype,"leftScrollButtonLabel",void 0);e([i({type:String,reflect:!0})],o.prototype,"spacing",void 0);e([i({type:String,reflect:!0,attribute:"spacing-top"})],o.prototype,"spacingTop",void 0);e([i({type:String,reflect:!0,attribute:"spacing-bottom"})],o.prototype,"spacingBottom",void 0);e([i({type:String,reflect:!0,attribute:"spacing-left"})],o.prototype,"spacingLeft",void 0);e([i({type:String,reflect:!0,attribute:"spacing-right"})],o.prototype,"spacingRight",void 0);e([i({type:Boolean,reflect:!0,attribute:"content-flex"})],o.prototype,"contentFlex",void 0);e([i({type:String,reflect:!0,attribute:"internal-gap"})],o.prototype,"internalGap",void 0);e([g()],o.prototype,"_canScrollLeft",void 0);e([g()],o.prototype,"_canScrollRight",void 0);o=e([m("scb-horizontal-scroller")],o);
+        `}},d.styles=S`:host{display:flex;position:relative;align-items:center;gap:var(--spacing-3);padding:0;overflow:hidden;margin-block-start:var(--scb-horizontal-scroller-spacing-block-start, 0);margin-block-end:var(--scb-horizontal-scroller-spacing-block-end, 0);margin-inline-start:var(--scb-horizontal-scroller-spacing-inline-start, 0);margin-inline-end:var(--scb-horizontal-scroller-spacing-inline-end, 0)}.scb-horizontal-scroller{overflow-x:auto;-ms-overflow-style:none;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;flex:1 1 auto}.scb-horizontal-scroller::-webkit-scrollbar{border-radius:var(--md-sys-shape-corner-large);height:4px;width:10px}.scb-horizontal-scroller::-webkit-scrollbar-thumb{background:var(--md-sys-color-on-surface);border-radius:var(--md-sys-shape-corner-large);cursor:pointer}.scb-horizontal-scroller::-webkit-scrollbar-track{background:var(--md-sys-color-secondary-container);border-radius:var(--md-sys-shape-corner-large)}.scb-horizontal-scroller:focus,.scroll-control:focus,.scroll-text-button:focus{outline:0}md-focus-ring{border-radius:var(--scb-card-focus-ring-radius, var(--md-sys-shape-corner-large))}:host([show-scrollbar]) .scb-horizontal-scroller.canScroll{padding-bottom:var(--spacing-5)}slot{display:block;box-sizing:border-box;padding-block:var(--spacing-3);padding-inline:2px;min-width:var(--scb-horizontal-scroller-width, auto)}:host([content-flex]) .scb-horizontal-scroller slot{display:flex;gap:var(--scb-horizontal-scroller-internal-gap)}.scroll-button-left{left:0;position:absolute;z-index:3}.scroll-button-right{right:2px;position:absolute;z-index:3}.scroll-control,.scroll-text-button{display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;border:0;font-family:var(--brand-font, var(--brand, "Inter"), sans-serif);font-weight:var(--weight-semibold, 600);cursor:pointer;appearance:none;-webkit-appearance:none;-webkit-tap-highlight-color:transparent;touch-action:manipulation;border-radius:var(--radius-full, 1000px)}.scroll-control{inline-size:var(--scb-icon-button-container-size, 40px);block-size:var(--scb-icon-button-container-size, 40px);padding:0;overflow:hidden;background:var(--md-filled-tonal-icon-button-container-color, var(--md-sys-color-secondary-container, var(--p-90, #d6f1ff)));color:var(--md-filled-tonal-icon-button-icon-color, var(--md-sys-color-on-secondary-container, var(--p-30, #1e00be)))}.scroll-text-button{position:relative;min-block-size:calc(var(--md-sys-typescale-label-small-line-height, 20px) + calc(var(--spacing-4, 12px) - var(--spacing-1, 2px)) + calc(var(--spacing-4, 12px) - var(--spacing-1, 2px)));gap:var(--spacing-3, 8px);padding-block:calc(var(--spacing-4, 12px) - var(--spacing-1, 2px));padding-inline:var(--spacing-5, 16px);background:0 0;color:var(--md-text-button-label-text-color, var(--md-sys-color-primary, var(--p-40, #1f44ff)));font-size:var(--md-sys-typescale-label-small-size, 16px);line-height:var(--md-sys-typescale-label-small-line-height, 20px);letter-spacing:var(--md-sys-typescale-label-small-tracking, 0)}.scroll-control::before,.scroll-text-button::before{content:"";position:absolute;inset:0;border-radius:inherit;background:currentColor;opacity:0;pointer-events:none;transition:opacity var(--motion-duration-short, 150ms) var(--motion-easing-standard, ease)}.scroll-control:hover::before,.scroll-text-button:hover::before{opacity:var(--md-sys-state-hover-state-layer-opacity, 0.08)}.scroll-control:active::before,.scroll-text-button:active::before{opacity:var(--md-sys-state-pressed-state-layer-opacity, 0.12)}.scroll-control:focus-visible,.scroll-text-button:focus-visible{outline:var(--stroke-border-m, 2px) solid var(--md-focus-ring-color, var(--md-sys-color-primary, var(--p-40, #1f44ff)));outline-offset:var(--spacing-1, 2px)}.scroll-control-icon{position:relative;display:inline-block;inline-size:var(--icon-size-medium, 24px);block-size:var(--icon-size-medium, 24px);overflow:hidden;font-family:"Material Symbols Outlined";font-size:var(--icon-size-medium, 24px);line-height:1;text-align:center;white-space:nowrap;text-transform:none;word-wrap:normal;direction:ltr;font-feature-settings:"liga"1;font-variation-settings:"FILL"0,"wght"400,"GRAD"0,"opsz"24;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.scroll-control-icon.scb-svg-icon{fill:currentColor;font:inherit}.scroll-shadow-left,.scroll-shadow-right{position:absolute;top:0;width:5px;bottom:0;pointer-events:none;background:0 0;box-shadow:none;transition:box-shadow .2s;z-index:2}.scroll-shadow-left{left:0}.scroll-shadow-right{right:0}:host([data-scroll-left]) .scroll-shadow-left,:host([data-scroll-right]) .scroll-shadow-right{background:var(--md-sys-color-surface-container-lowest);box-shadow:12px 0 30px rgba(0,0,0,.24),4px 0 12px rgba(78,5,5,.14)}:host([data-scroll-left]) .scroll-shadow-left::after,:host([data-scroll-right]) .scroll-shadow-right::after{content:"";position:absolute;inset-block:0}:host([data-scroll-right]) .scroll-shadow-right{box-shadow:-12px 0 30px rgba(0,0,0,.24),-4px 0 12px rgba(0,0,0,.14)}:host([variant='inline']){flex-direction:column;align-items:unset;padding:0}:host([variant='inline'][show-scrollbar]){gap:var(--spacing-5)}`,d);s([i({type:String,reflect:!0})],r.prototype,"variant",void 0);s([i({type:String,reflect:!0})],r.prototype,"width",void 0);s([i({type:Boolean,reflect:!0,attribute:"show-scrollbar"})],r.prototype,"showScrollbar",void 0);s([i({type:String,reflect:!0,attribute:"right-scroll-button-label"})],r.prototype,"rightScrollButtonLabel",void 0);s([i({type:String,reflect:!0,attribute:"left-scroll-button-label"})],r.prototype,"leftScrollButtonLabel",void 0);s([i({type:String,reflect:!0})],r.prototype,"spacing",void 0);s([i({type:String,reflect:!0,attribute:"spacing-top"})],r.prototype,"spacingTop",void 0);s([i({type:String,reflect:!0,attribute:"spacing-bottom"})],r.prototype,"spacingBottom",void 0);s([i({type:String,reflect:!0,attribute:"spacing-left"})],r.prototype,"spacingLeft",void 0);s([i({type:String,reflect:!0,attribute:"spacing-right"})],r.prototype,"spacingRight",void 0);s([i({type:Boolean,reflect:!0,attribute:"content-flex"})],r.prototype,"contentFlex",void 0);s([i({type:String,reflect:!0,attribute:"internal-gap"})],r.prototype,"internalGap",void 0);s([g()],r.prototype,"_canScrollLeft",void 0);s([g()],r.prototype,"_canScrollRight",void 0);r=s([_("scb-horizontal-scroller")],r);

package/mvc/components/scb-icon-button/scb-icon-button.js

@@ -1,171 +1,59 @@
-const __vite__mapDeps=(i,m=__vite__mapDeps,d=(m.f||(m.f=["../../vendor/filled-icon-button.js","../../vendor/vendor.js","../../vendor/shared-styles2.js","../../vendor/md-focus-ring.js","../../vendor/rolldown-runtime.js","../../vendor/attachable-controller.js","../../vendor/vendor-lit.js","../../vendor/delegate.js","../../vendor/form-submitter.js","../../vendor/element-internals.js","../../vendor/ripple.js","../../vendor/outlined-icon-button.js","../../vendor/filled-tonal-icon-button.js","../../vendor/icon-button.js","../../vendor/icon.js"])))=>i.map(i=>d[i]);
-import{_ as m,b as _,g as v,h as s,v as i,y as r}from"../../vendor/vendor.js";import"../../vendor/vendor-lit.js";import"../../vendor/icon.js";import{t as o}from"../../vendor/decorate.js";import{n as y,t as g}from"../../vendor/assertClassBrand.js";import{t as b}from"../../vendor/preload-helper.js";(function(){try{var l=typeof globalThis<"u"?globalThis:window;if(!l.__scb_ce_guard_installed__){l.__scb_ce_guard_installed__=!0;var t=customElements.define.bind(customElements);customElements.define=function(e,a,c){try{customElements.get(e)||t(e,a,c)}catch(u){var d=String(u||"");if(d.indexOf("already been used")===-1&&d.indexOf("NotSupportedError")===-1)throw u}}}}catch{}})();var h,p,n=(h=new WeakSet,p=class extends m{constructor(...t){super(...t),y(this,h),this.icon="home",this.ariaLabel="",this.variant="standard",this.size="medium",this.shape="round",this.toggle=!1,this.selected=!1,this.toggleofficon="add",this.toggleonicon="remove",this.disabled=!1,this.spacing=void 0,this.spacingTop=void 0,this.spacingBottom=void 0,this.spacingLeft=void 0,this.spacingRight=void 0,this.href="",this.target="",this.rel="",this.__filledValue=!1,this.__loadedVariants=new Set,this.__iconLoaded=!1,this.__lastMdHost=null,this.__onInnerChange=()=>{const e=!!this.__getMdHost()?.selected;this.toggle&&(this.selected=e),this.dispatchEvent(new CustomEvent("change",{detail:{selected:e},bubbles:!0,composed:!0}))}}get filled(){return this.__filledValue}set filled(t){const e=!!t,a=this.__filledValue;a!==e&&(this.__filledValue=e,this.requestUpdate("filled",a),this.requestUpdate("iconFilled",a))}get iconFilled(){return this.__filledValue}set iconFilled(t){const e=!!t,a=this.__filledValue;a!==e&&(this.__filledValue=e,this.requestUpdate("iconFilled",a),this.requestUpdate("filled",a))}async firstUpdated(){await this.__ensureDepsLoaded(),await this.updateComplete,this.__attachChangeListener(),this.__syncTitleAndAria(),g(h,this,f).call(this)}updated(t){if(super.updated(t),(t.has("spacing")||t.has("spacingTop")||t.has("spacingBottom")||t.has("spacingLeft")||t.has("spacingRight"))&&g(h,this,f).call(this),t.has("variant")){this.__ensureDepsLoaded().then(()=>{queueMicrotask(()=>{this.__attachChangeListener(),this.__syncTitleAndAria()})});return}(t.has("toggle")||t.has("icon")||t.has("toggleofficon")||t.has("toggleonicon")||t.has("selected")||t.has("disabled")||t.has("ariaLabel"))&&queueMicrotask(()=>{this.__attachChangeListener(),this.__syncTitleAndAria()})}disconnectedCallback(){this.__lastMdHost?.removeEventListener?.("change",this.__onInnerChange),this.__lastMdHost=null,super.disconnectedCallback()}async __ensureDepsLoaded(){if(!this.__loadedVariants.has(this.variant)){switch(this.variant){case"filled":await b(()=>import("../../vendor/filled-icon-button.js"),__vite__mapDeps([0,1,2,3,4,5,6,7,8,9,10]),import.meta.url);break;case"outlined":await b(()=>import("../../vendor/outlined-icon-button.js"),__vite__mapDeps([11,1,2,3,4,5,6,7,8,9,10]),import.meta.url);break;case"filled-tonal":await b(()=>import("../../vendor/filled-tonal-icon-button.js"),__vite__mapDeps([12,1,2,3,4,5,6,7,8,9,10]),import.meta.url);break;default:await b(()=>import("../../vendor/icon-button.js"),__vite__mapDeps([13,1,2,3,4,5,6,7,8,9,10]),import.meta.url);break}this.__loadedVariants.add(this.variant)}this.__iconLoaded||(await b(()=>import("../../vendor/icon.js").then(t=>t.t),__vite__mapDeps([14,4,1,6]),import.meta.url),this.__iconLoaded=!0)}__getMdHost(){return this.renderRoot.querySelector("md-filled-icon-button, md-outlined-icon-button, md-filled-tonal-icon-button, md-icon-button")}__attachChangeListener(){const t=this.__getMdHost();t&&t!==this.__lastMdHost&&(this.__lastMdHost?.removeEventListener?.("change",this.__onInnerChange),t.addEventListener("change",this.__onInnerChange),this.__lastMdHost=t),this.toggle&&t&&"selected"in t&&(t.selected=this.selected)}__syncTitleAndAria(){const t=this.__getMdHost();if(!t)return;const e=(this.getAttribute("title")||"").trim(),a=(this.ariaLabel||this.getAttribute("aria-label")||"").trim(),c=this.getAttribute("aria-controls"),d=this.getAttribute("aria-expanded"),u=a||e||this.icon.trim()||void 0;u?t.setAttribute("aria-label",u):t.removeAttribute("aria-label"),c!==null?t.setAttribute("aria-controls",c):t.removeAttribute("aria-controls"),d!==null?t.setAttribute("aria-expanded",d):t.removeAttribute("aria-expanded")}mapSpacingToken(t){if(!t)return;const e=String(t).trim();if(e)return/^\d+$/.test(e)?`var(--spacing-${Math.max(0,Math.min(14,parseInt(e,10)))})`:e}__renderToggleIcons(){return r`
-      <md-icon ?filled=${this.iconFilled||this.filled} aria-hidden="true">${this.toggleofficon}</md-icon>
-      <md-icon ?filled=${this.iconFilled||this.filled} slot="selected" aria-hidden="true">${this.toggleonicon}</md-icon>
-    `}__renderSingleIcon(){return r`<md-icon ?filled=${this.iconFilled||this.filled} aria-hidden="true">${this.icon}</md-icon>`}__renderMd(){const t=this.toggle?this.__renderToggleIcons():this.__renderSingleIcon();if(this.toggle)switch(this.variant){case"filled":return r`
-            <md-filled-icon-button
-              toggle
-              ?selected=${this.selected}
-              ?disabled=${this.disabled}
-              href=${this.href||i}
-              target=${this.target||i}
-              rel=${this.rel||i}
-            >
-              ${t}
-            </md-filled-icon-button>
-          `;case"outlined":return r`
-            <md-outlined-icon-button
-              toggle
-              ?selected=${this.selected}
-              ?disabled=${this.disabled}
-              href=${this.href||i}
-              target=${this.target||i}
-              rel=${this.rel||i}
-            >
-              ${t}
-            </md-outlined-icon-button>
-          `;case"filled-tonal":return r`
-            <md-filled-tonal-icon-button
-              toggle
-              ?selected=${this.selected}
-              ?disabled=${this.disabled}
-              href=${this.href||i}
-              target=${this.target||i}
-              rel=${this.rel||i}
-            >
-              ${t}
-            </md-filled-tonal-icon-button>
-          `;default:return r`
-            <md-icon-button toggle ?selected=${this.selected} ?disabled=${this.disabled} href=${this.href||i} target=${this.target||i} rel=${this.rel||i}>
-              ${t}
-            </md-icon-button>
-          `}switch(this.variant){case"filled":return r`
-          <md-filled-icon-button ?disabled=${this.disabled} href=${this.href||i} target=${this.target||i} rel=${this.rel||i}>
-            ${t}
-          </md-filled-icon-button>
-        `;case"outlined":return r`
-          <md-outlined-icon-button ?disabled=${this.disabled} href=${this.href||i} target=${this.target||i} rel=${this.rel||i}>
-            ${t}
-          </md-outlined-icon-button>
-        `;case"filled-tonal":return r`
-          <md-filled-tonal-icon-button ?disabled=${this.disabled} href=${this.href||i} target=${this.target||i} rel=${this.rel||i}>
-            ${t}
-          </md-filled-tonal-icon-button>
-        `;default:return r`
-          <md-icon-button ?disabled=${this.disabled} href=${this.href||i} target=${this.target||i} rel=${this.rel||i}>
-            ${t}
-          </md-icon-button>
-        `}}render(){return this.__renderMd()}},p.styles=_`
-    :host {
-      display: inline-flex;
-      margin-block-start: var(--scb-icon-button-spacing-block-start, 0);
-      margin-block-end: var(--scb-icon-button-spacing-block-end, 0);
-      margin-inline-start: var(--scb-icon-button-spacing-inline-start, 0);
-      margin-inline-end: var(--scb-icon-button-spacing-inline-end, 0);
-      --scb-icon-button-font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
-      --scb-icon-button-shape-radius: var(--radius-full, 1000px);
-
-      --scb-icon-button-shape-square-radius: var(--radius-m, 12px);
-      --scb-icon-button-shape-square-radius-large: var(--radius-l, 16px);
-
-      --scb-icon-button-icon-size: var(--icon-size-medium, 24px);
-      --scb-icon-button-padding: var(--spacing-3, 12px);
-      --scb-icon-button-container-size: calc(
-        var(--scb-icon-button-icon-size) + (var(--scb-icon-button-padding) * 2)
-      );
-    }
-
-    :host([size="tiny"]) {
-      --scb-icon-button-icon-size: var(--icon-size-tiny, 12px);
-      --scb-icon-button-padding: var(--spacing-1, 4px);
-    }
-
-    :host([size="extra-small"]) {
-      --scb-icon-button-icon-size: var(--icon-size-extra-small, 16px);
-      --scb-icon-button-padding: var(--spacing-2, 8px);
-    }
-
-    :host([size="small"]) {
-      --scb-icon-button-icon-size: var(--icon-size-small, 20px);
-      --scb-icon-button-padding: calc(var(--spacing-3, 12px) - var(--spacing-1, 4px));
-    }
-
-    :host([size="medium"]) {
-      --scb-icon-button-icon-size: var(--icon-size-medium, 24px);
-      --scb-icon-button-padding: var(--spacing-3, 12px);
-    }
-
-    :host([size="large"]) {
-      --scb-icon-button-icon-size: var(--icon-size-medium, 24px);
-      --scb-icon-button-padding: var(--spacing-5, 20px);
-    }
-
-    :host([shape="square"]) {
-      --scb-icon-button-shape-radius: var(--scb-icon-button-shape-square-radius);
-    }
-
-    :host([shape="square"][size="large"]) {
-      --scb-icon-button-shape-radius: var(--scb-icon-button-shape-square-radius-large);
-    }
-
-    :host([filled]),
-    :host([icon-filled]) {
-      --scb-icon-button-font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24;
-    }
-
-    md-icon {
-      --md-icon-size: var(--scb-icon-button-icon-size);
-      font-size: var(--scb-icon-button-icon-size) !important;
-      --md-icon-font-variation-settings: var(--scb-icon-button-font-variation-settings) !important;
-      font-variation-settings: var(--scb-icon-button-font-variation-settings) !important;
-    }
-
-    md-icon-button {
-      --md-icon-button-icon-size: var(--scb-icon-button-icon-size);
-      --md-icon-button-container-size: var(--scb-icon-button-container-size);
-      --md-icon-button-state-layer-size: var(--scb-icon-button-container-size);
-      --md-icon-button-container-width: var(--scb-icon-button-container-size);
-      --md-icon-button-container-height: var(--scb-icon-button-container-size);
-      --md-icon-button-state-layer-width: var(--scb-icon-button-container-size);
-      --md-icon-button-state-layer-height: var(--scb-icon-button-container-size);
-      --md-icon-button-container-shape: var(--scb-icon-button-shape-radius);
-      border-radius: var(--scb-icon-button-shape-radius) !important;
-    }
-
-    md-filled-icon-button {
-      --md-filled-icon-button-icon-size: var(--scb-icon-button-icon-size);
-      --md-filled-icon-button-container-width: var(--scb-icon-button-container-size);
-      --md-filled-icon-button-container-height: var(--scb-icon-button-container-size);
-    }
-
-    md-filled-tonal-icon-button {
-      --md-filled-tonal-icon-button-icon-size: var(--scb-icon-button-icon-size);
-      --md-filled-tonal-icon-button-container-width: var(--scb-icon-button-container-size);
-      --md-filled-tonal-icon-button-container-height: var(--scb-icon-button-container-size);
-    }
-
-    md-outlined-icon-button {
-      --md-outlined-icon-button-icon-size: var(--scb-icon-button-icon-size);
-      --md-outlined-icon-button-container-width: var(--scb-icon-button-container-size);
-      --md-outlined-icon-button-container-height: var(--scb-icon-button-container-size);
-    }
-
-    md-icon-button,
-    md-filled-icon-button,
-    md-outlined-icon-button,
-    md-filled-tonal-icon-button {
-      --md-icon-button-container-shape: var(--scb-icon-button-shape-radius);
-      --md-filled-icon-button-container-shape: var(--scb-icon-button-shape-radius);
-      --md-outlined-icon-button-container-shape: var(--scb-icon-button-shape-radius);
-      --md-filled-tonal-icon-button-container-shape: var(--scb-icon-button-shape-radius);
-      --md-icon-font-variation-settings: var(--scb-icon-button-font-variation-settings);
-      border-radius: var(--scb-icon-button-shape-radius) !important;
-    }
-
-    md-icon-button::part(button),
-    md-filled-icon-button::part(button),
-    md-outlined-icon-button::part(button),
-    md-filled-tonal-icon-button::part(button) {
-      border-radius: var(--scb-icon-button-shape-radius) !important;
-    }
-`,p);function f(){const l=this.mapSpacingToken(this.spacing),t=this.mapSpacingToken(this.spacingTop)??l,e=this.mapSpacingToken(this.spacingBottom)??l,a=this.mapSpacingToken(this.spacingLeft),c=this.mapSpacingToken(this.spacingRight);t?this.style.setProperty("--scb-icon-button-spacing-block-start",t):this.style.removeProperty("--scb-icon-button-spacing-block-start"),e?this.style.setProperty("--scb-icon-button-spacing-block-end",e):this.style.removeProperty("--scb-icon-button-spacing-block-end"),a?this.style.setProperty("--scb-icon-button-spacing-inline-start",a):this.style.removeProperty("--scb-icon-button-spacing-inline-start"),c?this.style.setProperty("--scb-icon-button-spacing-inline-end",c):this.style.removeProperty("--scb-icon-button-spacing-inline-end")}o([s({type:String})],n.prototype,"icon",void 0);o([s({type:Boolean,reflect:!0})],n.prototype,"filled",null);o([s({type:Boolean,attribute:"icon-filled",reflect:!0})],n.prototype,"iconFilled",null);o([s({type:String,attribute:"aria-label"})],n.prototype,"ariaLabel",void 0);o([s({type:String})],n.prototype,"variant",void 0);o([s({type:String,reflect:!0})],n.prototype,"size",void 0);o([s({type:String,reflect:!0})],n.prototype,"shape",void 0);o([s({type:Boolean,reflect:!0})],n.prototype,"toggle",void 0);o([s({type:Boolean,reflect:!0})],n.prototype,"selected",void 0);o([s({type:String})],n.prototype,"toggleofficon",void 0);o([s({type:String})],n.prototype,"toggleonicon",void 0);o([s({type:Boolean,reflect:!0})],n.prototype,"disabled",void 0);o([s({type:String,reflect:!0})],n.prototype,"spacing",void 0);o([s({type:String,attribute:"spacing-top",reflect:!0})],n.prototype,"spacingTop",void 0);o([s({type:String,attribute:"spacing-bottom",reflect:!0})],n.prototype,"spacingBottom",void 0);o([s({type:String,attribute:"spacing-left",reflect:!0})],n.prototype,"spacingLeft",void 0);o([s({type:String,attribute:"spacing-right",reflect:!0})],n.prototype,"spacingRight",void 0);o([s({type:String})],n.prototype,"href",void 0);o([s({type:String})],n.prototype,"target",void 0);o([s({type:String})],n.prototype,"rel",void 0);n=o([v("scb-icon-button")],n);export{n as ScbIconButton};
+const __vite__mapDeps=(i,m=__vite__mapDeps,d=(m.f||(m.f=["../../vendor/lazy-focus-ring.js","../../vendor/rolldown-runtime.js","../../vendor/preload-helper.js","../../vendor/lazy-ripple.js"])))=>i.map(i=>d[i]);
+import{g as s,h as y,m as R,p as r,v as d,y as x}from"../../vendor/vendor.js";import"../../vendor/vendor-lit.js";import{t as m}from"../../vendor/preload-helper.js";import{t as n}from"../../vendor/decorate.js";import{n as z,t as v}from"../../vendor/assertClassBrand.js";(function(){try{var c=typeof globalThis<"u"?globalThis:window;if(!c.__scb_ce_guard_installed__){c.__scb_ce_guard_installed__=!0;var e=customElements.define.bind(customElements);customElements.define=function(t,i,a){try{customElements.get(t)||e(t,i,a)}catch(p){var l=String(p||"");if(l.indexOf("already been used")===-1&&l.indexOf("NotSupportedError")===-1)throw p}}}}catch{}})();var u,b,h,f;function S(){return h??(h=m(()=>import("../../vendor/lazy-focus-ring.js").then(c=>c.i),__vite__mapDeps([0,1,2]),import.meta.url)),h}function g(){return f??(f=m(()=>import("../../vendor/lazy-ripple.js"),__vite__mapDeps([3,2]),import.meta.url)),f}var o=(u=new WeakSet,b=class extends y{constructor(...e){super(...e),z(this,u),this.icon="home",this.ariaLabel="",this.variant="standard",this.size="medium",this.shape="round",this.toggle=!1,this.selected=!1,this.toggleofficon="add",this.toggleonicon="remove",this.disabled=!1,this.href="",this.target="",this.rel="",this.__filledValue=!1,this.__focusRingReady=!1,this.__focusRingImportRequested=!1,this.__rippleReady=!1,this.__pendingRippleClick=!1,this.__ensureFocusRing=()=>{this.__focusRingReady||this.__focusRingImportRequested||(this.__focusRingImportRequested=!0,S().then(({ensureFocusRingReady:t})=>(t(),customElements.whenDefined("md-focus-ring"))).then(()=>{this.__focusRingReady=!0,this.toggleAttribute("data-native-focus-ring-ready",!0),this.requestUpdate(),this.updateComplete.then(()=>this.__syncInteractiveState())}))},this.__onFocusIn=t=>{const i=t.composedPath()[0];i instanceof HTMLElement&&i.matches(":focus-visible")&&this.__ensureFocusRing()},this.__ensureRipple=(t,i=!1)=>{this.__rippleReady||this.disabled||(t&&(this.__pendingRippleEvent=t),i&&(this.__pendingRippleClick=!0),g().then(({ensureRippleReady:a})=>a()).then(()=>{this.disabled||(this.__rippleReady=!0,this.toggleAttribute("data-native-ripple-ready",!0),this.requestUpdate(),this.updateComplete.then(()=>this.__replayRippleState()))}))},this.__onPointerInteraction=t=>{this.__ensureRipple(t)},this.__onClick=t=>{if(this.disabled){t.preventDefault(),t.stopPropagation();return}this.toggle&&(this.selected=!this.selected,this.dispatchEvent(new CustomEvent("change",{detail:{selected:this.selected},bubbles:!0,composed:!0}))),this.__ensureRipple(void 0,!0)}}get filled(){return this.__filledValue}set filled(e){const t=!!e,i=this.__filledValue;i!==t&&(this.__filledValue=t,this.requestUpdate("filled",i),this.requestUpdate("iconFilled",i))}get iconFilled(){return this.__filledValue}set iconFilled(e){const t=!!e,i=this.__filledValue;i!==t&&(this.__filledValue=t,this.requestUpdate("iconFilled",i),this.requestUpdate("filled",i))}firstUpdated(){v(u,this,_).call(this),this.__syncInteractiveState()}updated(e){super.updated(e),(e.has("spacing")||e.has("spacingTop")||e.has("spacingBottom")||e.has("spacingLeft")||e.has("spacingRight"))&&v(u,this,_).call(this),(this.__focusRingReady||this.__rippleReady)&&this.updateComplete.then(()=>this.__syncInteractiveState())}focus(e){const t=this.__getNativeControl();if(t){t.focus(e);return}super.focus(e)}__getNativeControl(){return this.renderRoot.querySelector(".native-icon-button")}__syncInteractiveState(){const e=this.__getNativeControl(),t=this.renderRoot.querySelector("md-focus-ring");t&&e&&(t.control=e,t.visible=e.matches(":focus-visible"));const i=this.renderRoot.querySelector("md-ripple");i&&e&&(i.control=e)}async __replayRippleState(){const e=this.renderRoot.querySelector("md-ripple"),t=this.__getNativeControl(),i=this.__pendingRippleEvent,a=this.__pendingRippleClick;this.__pendingRippleEvent=void 0,this.__pendingRippleClick=!1;const{syncRippleToControl:l}=await g();await l(e,t,i,a),this.__syncInteractiveState()}__effectiveLabel(){return(this.ariaLabel||this.getAttribute("aria-label")||"").trim()||this.__currentIcon()||s}__currentIcon(){return this.toggle?this.selected?this.toggleonicon:this.toggleofficon:this.icon}mapSpacingToken(e){if(!e)return;const t=String(e).trim();if(t)return/^\d+$/.test(t)?`var(--spacing-${Math.max(0,Math.min(14,parseInt(t,10)))})`:t}__renderControl(e){const t=this.__effectiveLabel(),i=this.getAttribute("aria-controls")??s,a=this.getAttribute("aria-expanded")??s,l=this.toggle?String(this.selected):s,p=this.getAttribute("title")??s;return this.href?d`
+        <a
+          class="native-icon-button"
+          part="button"
+          href=${this.disabled?s:this.href}
+          target=${this.target||s}
+          rel=${this.rel||s}
+          title=${p}
+          aria-label=${t}
+          aria-controls=${i}
+          aria-expanded=${a}
+          aria-pressed=${l}
+          aria-disabled=${this.disabled?"true":s}
+          tabindex=${this.disabled?"-1":s}
+          @click=${this.__onClick}
+          @focusin=${this.__onFocusIn}
+          @pointerenter=${this.__onPointerInteraction}
+          @pointerdown=${this.__onPointerInteraction}
+        >
+          ${e}
+        </a>
+      `:d`
+      <button
+        class="native-icon-button"
+        part="button"
+        type="button"
+        title=${p}
+        ?disabled=${this.disabled}
+        aria-label=${t}
+        aria-controls=${i}
+        aria-expanded=${a}
+        aria-pressed=${l}
+        @click=${this.__onClick}
+        @focusin=${this.__onFocusIn}
+        @pointerenter=${this.__onPointerInteraction}
+        @pointerdown=${this.__onPointerInteraction}
+      >
+        ${e}
+      </button>
+    `}render(){const e=d`<span class="native-icon" part="icon" aria-hidden="true">${this.__currentIcon()}</span>`;return d`
+      <span class="native-icon-button-wrap">
+        ${this.__renderControl(e)}
+        ${this.__rippleReady?d`<md-ripple aria-hidden="true"></md-ripple>`:s}
+        ${this.__focusRingReady?d`<md-focus-ring aria-hidden="true"></md-focus-ring>`:s}
+      </span>
+    `}},b.styles=x`:host{display:inline-flex;margin-block-start:var(--scb-icon-button-spacing-block-start, 0);margin-block-end:var(--scb-icon-button-spacing-block-end, 0);margin-inline-start:var(--scb-icon-button-spacing-inline-start, 0);margin-inline-end:var(--scb-icon-button-spacing-inline-end, 0);--scb-icon-button-font-variation-settings:'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;--scb-icon-button-shape-radius:var(--radius-full, 1000px);--scb-icon-button-icon-size:var(--icon-size-medium, 24px);--scb-icon-button-container-size:40px}:host([size='tiny']){--scb-icon-button-icon-size:var(--icon-size-tiny, 12px);--scb-icon-button-container-size:16px}:host([size='extra-small']){--scb-icon-button-icon-size:var(--icon-size-extra-small, 16px);--scb-icon-button-container-size:24px}:host([size='small']){--scb-icon-button-icon-size:var(--icon-size-small, 20px);--scb-icon-button-container-size:32px}:host([size='large']),:host([size='medium']){--scb-icon-button-icon-size:var(--icon-size-medium, 24px)}:host([size='medium']){--scb-icon-button-container-size:40px}:host([size='large']){--scb-icon-button-container-size:56px}:host([shape='square']){--scb-icon-button-shape-radius:var(--radius-m, 12px)}:host([shape='square'][size='large']){--scb-icon-button-shape-radius:var(--radius-l, 16px)}:host([filled]),:host([icon-filled]){--scb-icon-button-font-variation-settings:'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24}.native-icon-button-wrap{position:relative;display:inline-flex;inline-size:var(--scb-icon-button-container-size);block-size:var(--scb-icon-button-container-size);border-radius:var(--scb-icon-button-shape-radius)}.native-icon-button{position:relative;z-index:0;box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;inline-size:100%;block-size:100%;min-inline-size:0;min-block-size:0;padding:0;overflow:hidden;border:0;border-radius:inherit;background:0 0;color:var(--md-icon-button-icon-color,
+        var(--md-sys-color-on-surface-variant, var(--p-20, #0f0865))
+      );cursor:pointer;text-decoration:none;appearance:none;-webkit-appearance:none;touch-action:manipulation}.native-icon-button::before{content:"";position:absolute;inset:0;z-index:-1;background:currentColor;opacity:0;pointer-events:none;transition:opacity var(--motion-duration-short, 150ms) var(--motion-easing-standard, ease)}:host(:not([data-native-ripple-ready])) .native-icon-button:hover::before{opacity:var(--md-sys-state-hover-state-layer-opacity, 0.08)}:host(:not([data-native-ripple-ready])) .native-icon-button:active::before{opacity:var(--md-sys-state-pressed-state-layer-opacity, 0.12)}.native-icon-button:focus{outline:0}:host(:not([data-native-focus-ring-ready])) .native-icon-button:focus-visible{outline:var(--stroke-border-m, 2px) solid var(--md-focus-ring-color, var(--md-sys-color-primary, var(--p-40, #1f44ff)));outline-offset:var(--spacing-1, 2px)}.native-icon{flex:0 0 auto;display:inline-block;inline-size:var(--scb-icon-button-icon-size);block-size:var(--scb-icon-button-icon-size);overflow:hidden;font-family:"Material Symbols Outlined";font-size:var(--scb-icon-button-icon-size);line-height:1;text-align:center;white-space:nowrap;text-transform:none;word-wrap:normal;direction:ltr;font-feature-settings:"liga"1;font-variation-settings:var(--scb-icon-button-font-variation-settings);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}:host([variant='filled']) .native-icon-button{background:var(--md-filled-icon-button-container-color, var(--md-sys-color-primary, var(--p-40, #1f44ff)));color:var(--md-filled-icon-button-icon-color, var(--md-sys-color-on-primary, #ffffff))}:host([variant='filled-tonal']) .native-icon-button{background:var(--md-filled-tonal-icon-button-container-color,
+        var(--md-sys-color-secondary-container, var(--p-90, #d6f1ff))
+      );color:var(--md-filled-tonal-icon-button-icon-color,
+        var(--md-sys-color-on-secondary-container, var(--p-30, #1e00be))
+      )}:host([variant='outlined']) .native-icon-button{color:var(--md-outlined-icon-button-icon-color,
+        var(--md-sys-color-on-surface-variant, var(--p-20, #0f0865))
+      );box-shadow:inset 0 0 0 var(--stroke-border, 1px) var(--md-outlined-icon-button-outline-color, var(--md-sys-color-outline, var(--p-20, #0f0865)))}:host([toggle][selected]) .native-icon-button{color:var(--md-icon-button-selected-icon-color, var(--md-sys-color-primary, var(--p-40, #1f44ff)))}:host([variant='filled'][toggle][selected]) .native-icon-button{background:var(--md-filled-icon-button-selected-container-color, var(--md-sys-color-primary, var(--p-40, #1f44ff)));color:var(--md-filled-icon-button-selected-icon-color, var(--md-sys-color-on-primary, #ffffff))}:host([variant='filled-tonal'][toggle][selected]) .native-icon-button{background:var(--md-filled-tonal-icon-button-selected-container-color,
+        var(--md-sys-color-secondary-container, var(--p-90, #d6f1ff))
+      );color:var(--md-filled-tonal-icon-button-selected-icon-color,
+        var(--md-sys-color-on-secondary-container, var(--p-30, #1e00be))
+      )}:host([variant='outlined'][toggle][selected]) .native-icon-button{color:var(--md-outlined-icon-button-selected-icon-color, var(--md-sys-color-primary, var(--p-40, #1f44ff)));box-shadow:inset 0 0 0 var(--stroke-border, 1px) var(--md-outlined-icon-button-selected-outline-color, var(--md-sys-color-outline, var(--p-20, #0f0865)))}.native-icon-button:disabled,.native-icon-button[aria-disabled=true]{color:var(--md-icon-button-disabled-icon-color, rgb(15 8 101 / 38%));cursor:default;pointer-events:none}:host([variant='filled']) .native-icon-button:disabled,:host([variant='filled']) .native-icon-button[aria-disabled=true],:host([variant='filled-tonal']) .native-icon-button:disabled,:host([variant='filled-tonal']) .native-icon-button[aria-disabled=true]{background:var(--md-filled-icon-button-disabled-container-color, rgb(15 8 101 / 12%));color:var(--md-filled-icon-button-disabled-icon-color, rgb(15 8 101 / 38%))}:host([variant='outlined']) .native-icon-button:disabled,:host([variant='outlined']) .native-icon-button[aria-disabled=true]{color:var(--md-outlined-icon-button-disabled-icon-color, rgb(15 8 101 / 38%));box-shadow:inset 0 0 0 var(--stroke-border, 1px) var(--md-outlined-icon-button-disabled-outline-color, rgb(15 8 101 / 12%))}.native-icon-button-wrap md-ripple{position:absolute;inset:0;--md-ripple-hover-color:var(--scb-icon-button-state-layer-color, currentColor);--md-ripple-pressed-color:var(--scb-icon-button-state-layer-color, currentColor)}.native-icon-button-wrap md-focus-ring,.native-icon-button-wrap md-ripple{pointer-events:none;border-radius:inherit}`,b);function _(){const c=this.mapSpacingToken(this.spacing),e=this.mapSpacingToken(this.spacingTop)??c,t=this.mapSpacingToken(this.spacingBottom)??c,i=this.mapSpacingToken(this.spacingLeft),a=this.mapSpacingToken(this.spacingRight);e?this.style.setProperty("--scb-icon-button-spacing-block-start",e):this.style.removeProperty("--scb-icon-button-spacing-block-start"),t?this.style.setProperty("--scb-icon-button-spacing-block-end",t):this.style.removeProperty("--scb-icon-button-spacing-block-end"),i?this.style.setProperty("--scb-icon-button-spacing-inline-start",i):this.style.removeProperty("--scb-icon-button-spacing-inline-start"),a?this.style.setProperty("--scb-icon-button-spacing-inline-end",a):this.style.removeProperty("--scb-icon-button-spacing-inline-end")}n([r({type:String})],o.prototype,"icon",void 0);n([r({type:Boolean,reflect:!0})],o.prototype,"filled",null);n([r({type:Boolean,attribute:"icon-filled",reflect:!0})],o.prototype,"iconFilled",null);n([r({type:String,attribute:"aria-label"})],o.prototype,"ariaLabel",void 0);n([r({type:String,reflect:!0})],o.prototype,"variant",void 0);n([r({type:String,reflect:!0})],o.prototype,"size",void 0);n([r({type:String,reflect:!0})],o.prototype,"shape",void 0);n([r({type:Boolean,reflect:!0})],o.prototype,"toggle",void 0);n([r({type:Boolean,reflect:!0})],o.prototype,"selected",void 0);n([r({type:String})],o.prototype,"toggleofficon",void 0);n([r({type:String})],o.prototype,"toggleonicon",void 0);n([r({type:Boolean,reflect:!0})],o.prototype,"disabled",void 0);n([r({type:String,reflect:!0})],o.prototype,"spacing",void 0);n([r({type:String,attribute:"spacing-top",reflect:!0})],o.prototype,"spacingTop",void 0);n([r({type:String,attribute:"spacing-bottom",reflect:!0})],o.prototype,"spacingBottom",void 0);n([r({type:String,attribute:"spacing-left",reflect:!0})],o.prototype,"spacingLeft",void 0);n([r({type:String,attribute:"spacing-right",reflect:!0})],o.prototype,"spacingRight",void 0);n([r({type:String})],o.prototype,"href",void 0);n([r({type:String})],o.prototype,"target",void 0);n([r({type:String})],o.prototype,"rel",void 0);o=n([R("scb-icon-button")],o);export{o as ScbIconButton};