scb-wc 0.1.84 → 0.1.85

package/scb-wc.bundle.js

@@ -8369,6 +8369,50 @@
       scrollbar-width: none;
       width: 100%;
     }
+    :host([data-scroll-left]:not([variant='inline'])) .scb-horizontal-scroller {
+      -webkit-mask-image: linear-gradient(
+        to right,
+        transparent 0,
+        black var(--scb-horizontal-scroller-edge-fade-size, 56px),
+        black 100%
+      );
+      mask-image: linear-gradient(
+        to right,
+        transparent 0,
+        black var(--scb-horizontal-scroller-edge-fade-size, 56px),
+        black 100%
+      );
+    }
+    :host([data-scroll-right]:not([variant='inline'])) .scb-horizontal-scroller {
+      -webkit-mask-image: linear-gradient(
+        to right,
+        black 0,
+        black calc(100% - var(--scb-horizontal-scroller-edge-fade-size, 56px)),
+        transparent 100%
+      );
+      mask-image: linear-gradient(
+        to right,
+        black 0,
+        black calc(100% - var(--scb-horizontal-scroller-edge-fade-size, 56px)),
+        transparent 100%
+      );
+    }
+    :host([data-scroll-left][data-scroll-right]:not([variant='inline'])) .scb-horizontal-scroller {
+      -webkit-mask-image: linear-gradient(
+        to right,
+        transparent 0,
+        black var(--scb-horizontal-scroller-edge-fade-size, 56px),
+        black calc(100% - var(--scb-horizontal-scroller-edge-fade-size, 56px)),
+        transparent 100%
+      );
+      mask-image: linear-gradient(
+        to right,
+        transparent 0,
+        black var(--scb-horizontal-scroller-edge-fade-size, 56px),
+        black calc(100% - var(--scb-horizontal-scroller-edge-fade-size, 56px)),
+        transparent 100%
+      );
+    }
     :host([show-scrollbar]) .scb-horizontal-scroller {
       scrollbar-width: auto;
     }
@@ -8535,10 +8579,10 @@
       right: 0;
     }
     :host([data-scroll-left]) .scroll-shadow-left {
-      background: var(--md-sys-color-surface-container-lowest);
+      background: transparent;
       box-shadow:
-        12px 0 30px rgba(0, 0, 0, 0.24),
-        4px 0 12px rgba(78, 5, 5, 0.14);
+        12px 0 30px color-mix(in srgb, currentColor 18%, transparent),
+        4px 0 12px color-mix(in srgb, currentColor 12%, transparent);
     }
     :host([data-scroll-left]) .scroll-shadow-left::after {
       content: '';
@@ -8546,10 +8590,10 @@
       inset-block: 0;
     }
     :host([data-scroll-right]) .scroll-shadow-right {
-      background: var(--md-sys-color-surface-container-lowest);
+      background: transparent;
       box-shadow:
-        -12px 0 30px rgba(0, 0, 0, 0.24),
-        -4px 0 12px rgba(0, 0, 0, 0.14);      
+        -12px 0 30px color-mix(in srgb, currentColor 18%, transparent),
+        -4px 0 12px color-mix(in srgb, currentColor 12%, transparent);
     }
     :host([data-scroll-right]) .scroll-shadow-right::after {
       content: '';
@@ -10724,17 +10768,28 @@
     .label {
       pointer-events: none;
     }
-  `}connectedCallback(){super.connectedCallback(),this.addEventListener(`click`,this.__onClick),this.addEventListener(`keydown`,this.__onKeyDown),this.addEventListener(`keyup`,this.__onKeyUp),this.__syncA11y()}disconnectedCallback(){this.removeEventListener(`click`,this.__onClick),this.removeEventListener(`keydown`,this.__onKeyDown),this.removeEventListener(`keyup`,this.__onKeyUp),super.disconnectedCallback()}updated(){this.__syncA11y()}__syncA11y(){let e=!!(this.href||``).trim();if(this.disabled){this.setAttribute(`aria-disabled`,`true`),this.tabIndex=-1,this.removeAttribute(`role`);return}this.removeAttribute(`aria-disabled`),this.tabIndex=0,this.setAttribute(`role`,e?`link`:`button`)}render(){return x`<span class="label"><slot></slot></span>`}};P([_({type:String})],rf.prototype,`href`,void 0),P([_({type:String,attribute:`data-href`})],rf.prototype,`dataHref`,void 0),P([_({type:Boolean,reflect:!0})],rf.prototype,`disabled`,void 0),rf=P([a(`scb-nav-item`)],rf),w(),b(),E(),N(),F();var af={fromAttribute(e){return e===null?!1:e.toLowerCase()!==`false`}},of=class extends C{constructor(...e){super(...e),this.label=``,this.activeHref=``,this.activateOnClick=!0,this.sticky=!1,this.stickyTop=`0px`,this.stickyZIndex=5,this.stickyBackground=``,this.spacing=void 0,this.spacingTop=void 0,this.spacingBottom=void 0,this.spacingLeft=void 0,this.spacingRight=void 0,this.__autoAriaLabel=!1,this.__itemIdPrefix=`scb-nav-${Math.random().toString(36).slice(2)}`,this.__itemIdCounter=0,this.__onSlotChange=async()=>{await this.__decorateItems(),this.__applyActiveHref()},this.__onClick=e=>{let t=e.composedPath().find(e=>e instanceof HTMLElement&&(e.tagName===`A`||e.tagName===`BUTTON`||e.tagName===`SCB-NAV-ITEM`));if(!t)return;let n=this.__getItemHref(t);this.dispatchEvent(new CustomEvent(`scb-nav-select`,{bubbles:!0,composed:!0,detail:{item:t,href:n}})),this.dispatchEvent(new CustomEvent(`scbnavselect`,{bubbles:!0,composed:!0,detail:{item:t,href:n}})),this.activateOnClick&&n&&(this.activeHref=n)}}static{this.styles=p`
+  `}connectedCallback(){super.connectedCallback(),this.addEventListener(`click`,this.__onClick),this.addEventListener(`keydown`,this.__onKeyDown),this.addEventListener(`keyup`,this.__onKeyUp),this.__syncA11y()}disconnectedCallback(){this.removeEventListener(`click`,this.__onClick),this.removeEventListener(`keydown`,this.__onKeyDown),this.removeEventListener(`keyup`,this.__onKeyUp),super.disconnectedCallback()}updated(){this.__syncA11y()}__syncA11y(){let e=!!(this.href||``).trim();if(this.disabled){this.setAttribute(`aria-disabled`,`true`),this.tabIndex=-1,this.removeAttribute(`role`);return}this.removeAttribute(`aria-disabled`),this.tabIndex=0,this.setAttribute(`role`,e?`link`:`button`)}render(){return x`<span class="label"><slot></slot></span>`}};P([_({type:String})],rf.prototype,`href`,void 0),P([_({type:String,attribute:`data-href`})],rf.prototype,`dataHref`,void 0),P([_({type:Boolean,reflect:!0})],rf.prototype,`disabled`,void 0),rf=P([a(`scb-nav-item`)],rf),w(),b(),E(),N(),F();var af={fromAttribute(e){return e===null?!1:e.toLowerCase()!==`false`}},of=class extends C{constructor(...e){super(...e),this.__itemsEl=null,this.__resizeObserver=null,this.__resizeRaf=null,this.__canScrollLeft=!1,this.__canScrollRight=!1,this.label=``,this.activeHref=``,this.activateOnClick=!0,this.sticky=!1,this.stickyTop=`0px`,this.stickyZIndex=5,this.stickyBackground=``,this.spacing=void 0,this.spacingTop=void 0,this.spacingBottom=void 0,this.spacingLeft=void 0,this.spacingRight=void 0,this.__autoAriaLabel=!1,this.__itemIdPrefix=`scb-nav-${Math.random().toString(36).slice(2)}`,this.__itemIdCounter=0,this.__onSlotChange=async()=>{await this.__decorateItems(),this.__applyActiveHref(),this.__scheduleScrollControlUpdate()},this.__scrollLeft=()=>{this.__scrollBy(-this.__getScrollStep())},this.__scrollRight=()=>{this.__scrollBy(this.__getScrollStep())},this.__onWheel=e=>{if(e.ctrlKey)return;let t=this.__itemsEl;if(!t)return;let n=t.scrollWidth-t.clientWidth;if(n<=1)return;let r=this.__normalizeWheelDelta(e);if(r===0)return;let i=Math.max(0,Math.min(n,t.scrollLeft+r));i!==t.scrollLeft&&(e.preventDefault(),t.scrollLeft=i,this.__updateScrollControls())},this.__onItemsScroll=()=>{this.__updateScrollControls()},this.__onClick=e=>{let t=e.composedPath().find(e=>e instanceof HTMLElement&&(e.tagName===`A`||e.tagName===`BUTTON`||e.tagName===`SCB-NAV-ITEM`));if(!t)return;let n=this.__getItemHref(t);this.dispatchEvent(new CustomEvent(`scb-nav-select`,{bubbles:!0,composed:!0,detail:{item:t,href:n}})),this.dispatchEvent(new CustomEvent(`scbnavselect`,{bubbles:!0,composed:!0,detail:{item:t,href:n}})),this.activateOnClick&&n&&(this.activeHref=n)}}static{this.styles=p`
     :host {
+      --_scb-nav-scroll-shadow-color: rgba(0, 0, 0, 0.24);
+      --_scb-nav-scroll-shadow-soft-color: rgba(0, 0, 0, 0.14);
+
       display: block;
       color: var(--md-sys-color-on-surface);
-      font-family: var(--brand-font, Inter);  
+      font-family: var(--brand-font, Inter);
       margin-block-start: var(--scb-nav-spacing-block-start, 0);
       margin-block-end: var(--scb-nav-spacing-block-end, 0);
       margin-inline-start: var(--scb-nav-spacing-inline-start, 0);
       margin-inline-end: var(--scb-nav-spacing-inline-end, 0);
-      overflow-x: auto;
-     }
+      min-inline-size: 0;
+      overflow-x: hidden;
+    }
+
+    @supports (color: color-mix(in srgb, black, white)) {
+      :host {
+        --_scb-nav-scroll-shadow-color: color-mix(in srgb, currentColor 24%, transparent);
+        --_scb-nav-scroll-shadow-soft-color: color-mix(in srgb, currentColor 14%, transparent);
+      }
+    }
 
     :host([sticky]) {
       position: sticky;
@@ -10748,28 +10803,84 @@
       );
       background: var(
         --_scb-nav-sticky-background,
-        var(--scb-nav-sticky-background, var(--md-sys-color-surface-container-lowest))
+        var(--scb-nav-sticky-background, transparent)
       );
     }
 
     .scb-nav {
+      display: flex;
+      align-items: center;
+      position: relative;
       max-inline-size: var(--scb-nav-max-width, 1400px);
       margin-inline: auto;
       padding-block: var(--scb-nav-padding-block, var(--spacing-5, 16px));
       padding-inline: var(--scb-nav-padding-inline, var(--spacing-0, 0px));
       box-sizing: border-box;
+      min-inline-size: 0;
+      overflow-x: hidden;
     }
 
     .scb-nav__items {
       display: flex;
+      flex: 1 1 auto;
       align-items: center;
       gap: var(--scb-nav-gap, var(--spacing-3, 8px));
+      min-inline-size: 0;
 
       overflow-x: auto;
-      overflow-y: visible;
+      overflow-y: hidden;
       -webkit-overflow-scrolling: touch;
       scrollbar-width: none;
-      width: fit-content;
+      inline-size: 100%;
+      max-inline-size: 100%;
+      --_scb-nav-edge-fade-size: var(--scb-nav-edge-fade-size, 64px);
+    }
+
+    :host([data-scroll-left]) .scb-nav__items {
+      -webkit-mask-image: linear-gradient(
+        to right,
+        transparent 0,
+        #000 var(--_scb-nav-edge-fade-size),
+        #000 100%
+      );
+      mask-image: linear-gradient(
+        to right,
+        transparent 0,
+        #000 var(--_scb-nav-edge-fade-size),
+        #000 100%
+      );
+    }
+
+    :host([data-scroll-right]) .scb-nav__items {
+      -webkit-mask-image: linear-gradient(
+        to right,
+        #000 0,
+        #000 calc(100% - var(--_scb-nav-edge-fade-size)),
+        transparent 100%
+      );
+      mask-image: linear-gradient(
+        to right,
+        #000 0,
+        #000 calc(100% - var(--_scb-nav-edge-fade-size)),
+        transparent 100%
+      );
+    }
+
+    :host([data-scroll-left][data-scroll-right]) .scb-nav__items {
+      -webkit-mask-image: linear-gradient(
+        to right,
+        transparent 0,
+        #000 var(--_scb-nav-edge-fade-size),
+        #000 calc(100% - var(--_scb-nav-edge-fade-size)),
+        transparent 100%
+      );
+      mask-image: linear-gradient(
+        to right,
+        transparent 0,
+        #000 var(--_scb-nav-edge-fade-size),
+        #000 calc(100% - var(--_scb-nav-edge-fade-size)),
+        transparent 100%
+      );
     }
 
     .scb-nav__items::-webkit-scrollbar {
@@ -10780,6 +10891,7 @@
     ::slotted(button),
     ::slotted(scb-nav-item) {
       display: inline-flex;
+      flex: 0 0 auto;
       align-items: center;
       justify-content: center;
 
@@ -10823,13 +10935,154 @@
       color: var(--md-sys-color-on-secondary-container);
       font-weight: 600;
     }
-  `}mapSpacingToken(e){if(!e)return;let t=String(e).trim();if(t)return/^\d+$/.test(t)?`var(--spacing-${Math.max(0,Math.min(14,parseInt(t,10)))})`:t}__applySpacing(){let e=this.mapSpacingToken(this.spacing),t=this.mapSpacingToken(this.spacingTop)??e,n=this.mapSpacingToken(this.spacingBottom)??e,r=this.mapSpacingToken(this.spacingLeft),i=this.mapSpacingToken(this.spacingRight);t?this.style.setProperty(`--scb-nav-spacing-block-start`,t):this.style.removeProperty(`--scb-nav-spacing-block-start`),n?this.style.setProperty(`--scb-nav-spacing-block-end`,n):this.style.removeProperty(`--scb-nav-spacing-block-end`),r?this.style.setProperty(`--scb-nav-spacing-inline-start`,r):this.style.removeProperty(`--scb-nav-spacing-inline-start`),i?this.style.setProperty(`--scb-nav-spacing-inline-end`,i):this.style.removeProperty(`--scb-nav-spacing-inline-end`)}__syncStickyStyles(){if(!this.sticky){this.style.removeProperty(`--_scb-nav-sticky-top`),this.style.removeProperty(`--_scb-nav-sticky-z-index`),this.style.removeProperty(`--_scb-nav-sticky-background`);return}let e=(this.stickyTop||``).trim()||`0px`;this.style.setProperty(`--_scb-nav-sticky-top`,e);let t=Number.isFinite(this.stickyZIndex)?this.stickyZIndex:5;this.style.setProperty(`--_scb-nav-sticky-z-index`,String(t));let n=(this.stickyBackground||``).trim();if(!n){this.style.removeProperty(`--_scb-nav-sticky-background`);return}let r=n.startsWith(`--`)?`var(${n})`:n;this.style.setProperty(`--_scb-nav-sticky-background`,r)}connectedCallback(){super.connectedCallback(),this.__removeLazyFocusRingListeners=ac(this,this.renderRoot),this.hasAttribute(`role`)||this.setAttribute(`role`,`navigation`),this.__syncStickyStyles(),this.__syncAriaLabel()}disconnectedCallback(){this.__removeLazyFocusRingListeners?.(),this.__removeLazyFocusRingListeners=void 0,super.disconnectedCallback()}async firstUpdated(){await this.__decorateItems(),this.__applyActiveHref(),this.__applySpacing()}updated(e){e.has(`label`)&&this.__syncAriaLabel(),(e.has(`sticky`)||e.has(`stickyTop`)||e.has(`stickyZIndex`)||e.has(`stickyBackground`))&&this.__syncStickyStyles(),e.has(`activeHref`)&&this.__applyActiveHref(),(e.has(`spacing`)||e.has(`spacingTop`)||e.has(`spacingBottom`)||e.has(`spacingLeft`)||e.has(`spacingRight`))&&this.__applySpacing()}__syncAriaLabel(){if(this.hasAttribute(`aria-label`)){this.__autoAriaLabel=!1;return}let e=(this.label||``).trim();if(!e){this.__autoAriaLabel&&=(this.removeAttribute(`aria-label`),!1);return}this.setAttribute(`aria-label`,e),this.__autoAriaLabel=!0}async __decorateItems(){let e=this.__getSlottedItems();if(e.some(e=>e.tagName===`A`||e.tagName===`BUTTON`||e.tagName===`SCB-NAV-ITEM`))for(let t of e){let e=t instanceof HTMLAnchorElement,n=t instanceof HTMLButtonElement,r=t.tagName===`SCB-NAV-ITEM`;if(!e&&!n&&!r||(n&&!t.hasAttribute(`type`)&&t.setAttribute(`type`,`button`),t.getAttribute(`data-scb-nav-decorated`)===`true`))continue;t.id||=(this.__itemIdCounter+=1,`${this.__itemIdPrefix}-${this.__itemIdCounter}`);let i=e=>{let n=t.querySelector(e);if(n instanceof HTMLElement)return n;let r=document.createElement(e);return t.appendChild(r),r},a=i(`md-ripple`);a&&a.style.setProperty(`--md-ripple-focus-opacity`,`0`);let o=i(`md-focus-ring`);o&&(o.setAttribute(`inward`,``),o.setAttribute(`for`,t.id),o.style.position=`absolute`,o.style.inset=`0`,o.style.pointerEvents=`none`,o.style.borderRadius=`24px`),t.setAttribute(`data-scb-nav-decorated`,`true`)}}__getSlottedItems(){let e=this.renderRoot.querySelector(`slot`);return e?e.assignedElements({flatten:!0}).filter(e=>e instanceof HTMLElement):[]}__getItemHref(e){return e instanceof HTMLAnchorElement?(e.getAttribute(`href`)||``).trim():e.tagName===`SCB-NAV-ITEM`?(e.getAttribute(`href`)||e.getAttribute(`data-href`)||e.href||e.dataHref||``).trim():(e.getAttribute(`data-href`)||``).trim()}__applyActiveHref(){let e=(this.activeHref||``).trim(),t=this.__getSlottedItems();for(let n of t){let t=n instanceof HTMLAnchorElement,r=n instanceof HTMLButtonElement,i=n.tagName===`SCB-NAV-ITEM`;if(!t&&!r&&!i)continue;r&&!n.hasAttribute(`type`)&&n.setAttribute(`type`,`button`);let a=this.__getItemHref(n);e&&a===e?(n.setAttribute(`aria-current`,`location`),n.setAttribute(`data-scb-nav-managed`,`true`),n.setAttribute(`data-active`,`true`)):(n.getAttribute(`data-scb-nav-managed`)===`true`&&(n.removeAttribute(`aria-current`),n.removeAttribute(`data-scb-nav-managed`)),n.removeAttribute(`data-active`))}}render(){return x`
+
+    .scb-nav__scroll-control {
+      position: absolute;
+      z-index: 3;
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      box-sizing: border-box;
+      inline-size: var(--scb-icon-button-container-size, 40px);
+      block-size: var(--scb-icon-button-container-size, 40px);
+      padding: 0;
+      border: 0;
+      border-radius: var(--radius-full, 1000px);
+      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)));
+      cursor: pointer;
+      font-family: var(--brand-font, var(--brand, "Inter"), sans-serif);
+      font-weight: var(--weight-semibold, 600);
+      overflow: hidden;
+      appearance: none;
+      -webkit-appearance: none;
+      -webkit-tap-highlight-color: transparent;
+      touch-action: manipulation;
+    }
+
+    .scb-nav__scroll-control::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);
+    }
+
+    .scb-nav__scroll-control:hover::before {
+      opacity: var(--md-sys-state-hover-state-layer-opacity, 0.08);
+    }
+
+    .scb-nav__scroll-control:active::before {
+      opacity: var(--md-sys-state-pressed-state-layer-opacity, 0.12);
+    }
+
+    .scb-nav__scroll-control:focus {
+      outline: none;
+    }
+
+    .scb-nav__scroll-control: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);
+    }
+
+    .scb-nav__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;
+    }
+
+    .scb-nav__scroll-control-icon.scb-svg-icon {
+      fill: currentColor;
+      font: inherit;
+    }
+
+    .scb-nav__scroll-control--left {
+      inset-inline-start: 0;
+    }
+
+    .scb-nav__scroll-control--right {
+      inset-inline-end: 2px;
+    }
+
+    .scb-nav__scroll-shadow-left,
+    .scb-nav__scroll-shadow-right {
+      position: absolute;
+      inset-block: 0;
+      z-index: 2;
+      inline-size: 5px;
+      pointer-events: none;
+      background: none;
+      box-shadow: none;
+      transition: box-shadow 0.2s;
+    }
+
+    .scb-nav__scroll-shadow-left {
+      inset-inline-start: 0;
+    }
+
+    .scb-nav__scroll-shadow-right {
+      inset-inline-end: 0;
+    }
+
+    :host([data-scroll-left]) .scb-nav__scroll-shadow-left {
+      background: transparent;
+      box-shadow:
+        12px 0 30px var(--scb-nav-scroll-shadow-color, var(--_scb-nav-scroll-shadow-color)),
+        4px 0 12px var(--scb-nav-scroll-shadow-soft-color, var(--_scb-nav-scroll-shadow-soft-color));
+    }
+
+    :host([data-scroll-right]) .scb-nav__scroll-shadow-right {
+      background: transparent;
+      box-shadow:
+        -12px 0 30px var(--scb-nav-scroll-shadow-color, var(--_scb-nav-scroll-shadow-color)),
+        -4px 0 12px var(--scb-nav-scroll-shadow-soft-color, var(--_scb-nav-scroll-shadow-soft-color));
+    }
+  `}mapSpacingToken(e){if(!e)return;let t=String(e).trim();if(t)return/^\d+$/.test(t)?`var(--spacing-${Math.max(0,Math.min(14,parseInt(t,10)))})`:t}__applySpacing(){let e=this.mapSpacingToken(this.spacing),t=this.mapSpacingToken(this.spacingTop)??e,n=this.mapSpacingToken(this.spacingBottom)??e,r=this.mapSpacingToken(this.spacingLeft),i=this.mapSpacingToken(this.spacingRight);t?this.style.setProperty(`--scb-nav-spacing-block-start`,t):this.style.removeProperty(`--scb-nav-spacing-block-start`),n?this.style.setProperty(`--scb-nav-spacing-block-end`,n):this.style.removeProperty(`--scb-nav-spacing-block-end`),r?this.style.setProperty(`--scb-nav-spacing-inline-start`,r):this.style.removeProperty(`--scb-nav-spacing-inline-start`),i?this.style.setProperty(`--scb-nav-spacing-inline-end`,i):this.style.removeProperty(`--scb-nav-spacing-inline-end`)}__syncStickyStyles(){if(!this.sticky){this.style.removeProperty(`--_scb-nav-sticky-top`),this.style.removeProperty(`--_scb-nav-sticky-z-index`),this.style.removeProperty(`--_scb-nav-sticky-background`);return}let e=(this.stickyTop||``).trim()||`0px`;this.style.setProperty(`--_scb-nav-sticky-top`,e);let t=Number.isFinite(this.stickyZIndex)?this.stickyZIndex:5;this.style.setProperty(`--_scb-nav-sticky-z-index`,String(t));let n=(this.stickyBackground||``).trim();if(!n){this.style.removeProperty(`--_scb-nav-sticky-background`);return}let r=n.startsWith(`--`)?`var(${n})`:n;this.style.setProperty(`--_scb-nav-sticky-background`,r)}connectedCallback(){super.connectedCallback(),this.__removeLazyFocusRingListeners=ac(this,this.renderRoot),this.hasAttribute(`role`)||this.setAttribute(`role`,`navigation`),this.__syncStickyStyles(),this.__syncAriaLabel()}disconnectedCallback(){this.__removeLazyFocusRingListeners?.(),this.__removeLazyFocusRingListeners=void 0,this.__itemsEl?.removeEventListener(`scroll`,this.__onItemsScroll),this.__itemsEl=null,this.__resizeObserver?.disconnect(),this.__resizeObserver=null,this.__resizeRaf!==null&&(cancelAnimationFrame(this.__resizeRaf),this.__resizeRaf=null),super.disconnectedCallback()}async firstUpdated(){this.__itemsEl=this.renderRoot.querySelector(`.scb-nav__items`),this.__itemsEl&&this.__itemsEl.addEventListener(`scroll`,this.__onItemsScroll,{passive:!0}),this.__resizeObserver=new ResizeObserver(()=>{this.__scheduleScrollControlUpdate()}),this.__resizeObserver.observe(this),this.__itemsEl&&this.__resizeObserver.observe(this.__itemsEl),await this.__decorateItems(),this.__applyActiveHref(),this.__applySpacing(),this.__scheduleScrollControlUpdate(),document.fonts?.ready?.then(()=>{this.isConnected&&this.__scheduleScrollControlUpdate()})}updated(e){e.has(`label`)&&this.__syncAriaLabel(),(e.has(`sticky`)||e.has(`stickyTop`)||e.has(`stickyZIndex`)||e.has(`stickyBackground`))&&this.__syncStickyStyles(),e.has(`activeHref`)&&this.__applyActiveHref(),(e.has(`spacing`)||e.has(`spacingTop`)||e.has(`spacingBottom`)||e.has(`spacingLeft`)||e.has(`spacingRight`))&&this.__applySpacing()}__syncAriaLabel(){if(this.hasAttribute(`aria-label`)){this.__autoAriaLabel=!1;return}let e=(this.label||``).trim();if(!e){this.__autoAriaLabel&&=(this.removeAttribute(`aria-label`),!1);return}this.setAttribute(`aria-label`,e),this.__autoAriaLabel=!0}async __decorateItems(){let e=this.__getSlottedItems();if(e.some(e=>e.tagName===`A`||e.tagName===`BUTTON`||e.tagName===`SCB-NAV-ITEM`))for(let t of e){let e=t instanceof HTMLAnchorElement,n=t instanceof HTMLButtonElement,r=t.tagName===`SCB-NAV-ITEM`;if(!e&&!n&&!r||(n&&!t.hasAttribute(`type`)&&t.setAttribute(`type`,`button`),t.getAttribute(`data-scb-nav-decorated`)===`true`))continue;t.id||=(this.__itemIdCounter+=1,`${this.__itemIdPrefix}-${this.__itemIdCounter}`);let i=e=>{let n=t.querySelector(e);if(n instanceof HTMLElement)return n;let r=document.createElement(e);return t.appendChild(r),r},a=i(`md-ripple`);a&&a.style.setProperty(`--md-ripple-focus-opacity`,`0`);let o=i(`md-focus-ring`);o&&(o.setAttribute(`inward`,``),o.setAttribute(`for`,t.id),o.style.position=`absolute`,o.style.inset=`0`,o.style.pointerEvents=`none`,o.style.borderRadius=`24px`),t.setAttribute(`data-scb-nav-decorated`,`true`)}}__getSlottedItems(){let e=this.renderRoot.querySelector(`slot`);return e?e.assignedElements({flatten:!0}).filter(e=>e instanceof HTMLElement):[]}__getItemHref(e){return e instanceof HTMLAnchorElement?(e.getAttribute(`href`)||``).trim():e.tagName===`SCB-NAV-ITEM`?(e.getAttribute(`href`)||e.getAttribute(`data-href`)||e.href||e.dataHref||``).trim():(e.getAttribute(`data-href`)||``).trim()}__applyActiveHref(){let e=(this.activeHref||``).trim(),t=this.__getSlottedItems();for(let n of t){let t=n instanceof HTMLAnchorElement,r=n instanceof HTMLButtonElement,i=n.tagName===`SCB-NAV-ITEM`;if(!t&&!r&&!i)continue;r&&!n.hasAttribute(`type`)&&n.setAttribute(`type`,`button`);let a=this.__getItemHref(n);e&&a===e?(n.setAttribute(`aria-current`,`location`),n.setAttribute(`data-scb-nav-managed`,`true`),n.setAttribute(`data-active`,`true`)):(n.getAttribute(`data-scb-nav-managed`)===`true`&&(n.removeAttribute(`aria-current`),n.removeAttribute(`data-scb-nav-managed`)),n.removeAttribute(`data-active`))}}__getScrollStep(){let e=this.__itemsEl;return e?Math.max(Math.round(e.clientWidth*.8),120):200}__scrollBy(e){this.__itemsEl?.scrollBy({left:e,behavior:`smooth`})}__normalizeWheelDelta(e){let t=this.__itemsEl,n=Math.abs(e.deltaX)>Math.abs(e.deltaY)?e.deltaX:e.deltaY;return t?e.deltaMode===WheelEvent.DOM_DELTA_LINE?n*16:e.deltaMode===WheelEvent.DOM_DELTA_PAGE?n*t.clientWidth:n:n}__scheduleScrollControlUpdate(){this.__resizeRaf===null&&(this.__resizeRaf=requestAnimationFrame(()=>{this.__resizeRaf=null,this.__updateScrollControls()}))}__updateScrollControls(){let e=this.__itemsEl;if(!e){this.__canScrollLeft=!1,this.__canScrollRight=!1,this.toggleAttribute(`data-scroll-left`,!1),this.toggleAttribute(`data-scroll-right`,!1);return}let t=e.scrollLeft>0,n=e.scrollLeft+e.clientWidth<e.scrollWidth-1;this.__canScrollLeft=t,this.__canScrollRight=n,this.toggleAttribute(`data-scroll-left`,t),this.toggleAttribute(`data-scroll-right`,n)}render(){return x`
       <div class="scb-nav">
-        <div class="scb-nav__items" @click=${this.__onClick}>
+        ${this.__canScrollLeft?x`
+              <button
+                class="scb-nav__scroll-control scb-nav__scroll-control--left"
+                type="button"
+                aria-label="Scrolla vänster"
+                @click=${this.__scrollLeft}
+              >
+                ${md(`chevron_left`,`scb-nav__scroll-control-icon`)}
+              </button>
+            `:``}
+        <div class="scb-nav__scroll-shadow-left"></div>
+        <div class="scb-nav__items" @click=${this.__onClick} @wheel=${this.__onWheel}>
           <slot @slotchange=${this.__onSlotChange}></slot>
         </div>
+        <div class="scb-nav__scroll-shadow-right"></div>
+        ${this.__canScrollRight?x`
+              <button
+                class="scb-nav__scroll-control scb-nav__scroll-control--right"
+                type="button"
+                aria-label="Scrolla höger"
+                @click=${this.__scrollRight}
+              >
+                ${md(`chevron_right`,`scb-nav__scroll-control-icon`)}
+              </button>
+            `:``}
       </div>
-    `}};P([_({type:String})],of.prototype,`label`,void 0),P([_({type:String,attribute:`active-href`})],of.prototype,`activeHref`,void 0),P([_({type:Boolean,attribute:`activate-on-click`,converter:af})],of.prototype,`activateOnClick`,void 0),P([_({type:Boolean,reflect:!0})],of.prototype,`sticky`,void 0),P([_({type:String,attribute:`sticky-top`})],of.prototype,`stickyTop`,void 0),P([_({type:Number,attribute:`sticky-z-index`})],of.prototype,`stickyZIndex`,void 0),P([_({type:String,attribute:`sticky-background`})],of.prototype,`stickyBackground`,void 0),P([_({type:String,reflect:!0})],of.prototype,`spacing`,void 0),P([_({type:String,attribute:`spacing-top`,reflect:!0})],of.prototype,`spacingTop`,void 0),P([_({type:String,attribute:`spacing-bottom`,reflect:!0})],of.prototype,`spacingBottom`,void 0),P([_({type:String,attribute:`spacing-left`,reflect:!0})],of.prototype,`spacingLeft`,void 0),P([_({type:String,attribute:`spacing-right`,reflect:!0})],of.prototype,`spacingRight`,void 0),of=P([a(`scb-nav`)],of),w(),b(),k(),Yc(),F();var sf={fromAttribute:e=>e??``,toAttribute:e=>typeof e==`string`?e.trim()===``?null:e:null},Z=class extends C{constructor(...e){super(...e),this.variant=`success`,this.direction=`horizontal`,this.size=`large`,this.title=``,this.notificationCardTitle=``,this.subtitle=``,this.supportingText=``,this.open=!1,this.linkText=``,this.linkHref=`#`,this.href=``,this.showIcon=!1,this.showCloseButton=!1,this.sizing=``,this.width=``,this.maxWidth=``,this.height=``,this.maxHeight=``,this.fullHeight=!1,this.fullWidth=!1,this.spacing=void 0,this.spacingTop=void 0,this.spacingBottom=void 0,this.spacingLeft=void 0,this.spacingRight=void 0,this.__hasHeading=!1,this.__hasSubtitle=!1,this.__hasSupportingText=!1,this.__hasFooter=!1,this.__hasIcon=!1,this._closeNotification=()=>{this.open=!1;let e=new CustomEvent(`openchange`,{detail:{open:this.open},bubbles:!0,composed:!0});this.dispatchEvent(e);let t=new CustomEvent(`notification-close`,{detail:{open:this.open},bubbles:!0,composed:!0});this.dispatchEvent(t);let n=new CustomEvent(`close`,{detail:{open:this.open},bubbles:!0,composed:!0});this.dispatchEvent(n);let r=new CustomEvent(`Close`,{detail:{open:this.open},bubbles:!0,composed:!0});this.dispatchEvent(r)},this.__syncSlots=()=>{this.__hasHeading=this.__slotHasContent(`heading`),this.__hasSubtitle=this.__slotHasContent(`subtitle`),this.__hasSupportingText=this.__slotHasContent(`supporting-text`),this.__hasFooter=this.__slotHasContent(`footer`),this.__hasIcon=this.__slotHasContent(`icon`)}}get#e(){return this.notificationCardTitle||this.title}static{this.styles=[p`
+    `}};P([v()],of.prototype,`__canScrollLeft`,void 0),P([v()],of.prototype,`__canScrollRight`,void 0),P([_({type:String})],of.prototype,`label`,void 0),P([_({type:String,attribute:`active-href`})],of.prototype,`activeHref`,void 0),P([_({type:Boolean,attribute:`activate-on-click`,converter:af})],of.prototype,`activateOnClick`,void 0),P([_({type:Boolean,reflect:!0})],of.prototype,`sticky`,void 0),P([_({type:String,attribute:`sticky-top`})],of.prototype,`stickyTop`,void 0),P([_({type:Number,attribute:`sticky-z-index`})],of.prototype,`stickyZIndex`,void 0),P([_({type:String,attribute:`sticky-background`})],of.prototype,`stickyBackground`,void 0),P([_({type:String,reflect:!0})],of.prototype,`spacing`,void 0),P([_({type:String,attribute:`spacing-top`,reflect:!0})],of.prototype,`spacingTop`,void 0),P([_({type:String,attribute:`spacing-bottom`,reflect:!0})],of.prototype,`spacingBottom`,void 0),P([_({type:String,attribute:`spacing-left`,reflect:!0})],of.prototype,`spacingLeft`,void 0),P([_({type:String,attribute:`spacing-right`,reflect:!0})],of.prototype,`spacingRight`,void 0),of=P([a(`scb-nav`)],of),w(),b(),k(),Yc(),F();var sf={fromAttribute:e=>e??``,toAttribute:e=>typeof e==`string`?e.trim()===``?null:e:null},Z=class extends C{constructor(...e){super(...e),this.variant=`success`,this.direction=`horizontal`,this.size=`large`,this.title=``,this.notificationCardTitle=``,this.subtitle=``,this.supportingText=``,this.open=!1,this.linkText=``,this.linkHref=`#`,this.href=``,this.showIcon=!1,this.showCloseButton=!1,this.sizing=``,this.width=``,this.maxWidth=``,this.height=``,this.maxHeight=``,this.fullHeight=!1,this.fullWidth=!1,this.spacing=void 0,this.spacingTop=void 0,this.spacingBottom=void 0,this.spacingLeft=void 0,this.spacingRight=void 0,this.__hasHeading=!1,this.__hasSubtitle=!1,this.__hasSupportingText=!1,this.__hasFooter=!1,this.__hasIcon=!1,this._closeNotification=()=>{this.open=!1;let e=new CustomEvent(`openchange`,{detail:{open:this.open},bubbles:!0,composed:!0});this.dispatchEvent(e);let t=new CustomEvent(`notification-close`,{detail:{open:this.open},bubbles:!0,composed:!0});this.dispatchEvent(t);let n=new CustomEvent(`close`,{detail:{open:this.open},bubbles:!0,composed:!0});this.dispatchEvent(n);let r=new CustomEvent(`Close`,{detail:{open:this.open},bubbles:!0,composed:!0});this.dispatchEvent(r)},this.__syncSlots=()=>{this.__hasHeading=this.__slotHasContent(`heading`),this.__hasSubtitle=this.__slotHasContent(`subtitle`),this.__hasSupportingText=this.__slotHasContent(`supporting-text`),this.__hasFooter=this.__slotHasContent(`footer`),this.__hasIcon=this.__slotHasContent(`icon`)}}get#e(){return this.notificationCardTitle||this.title}static{this.styles=[p`
       :host {
         display: block;
         position: relative;