scb-wc 0.1.87 → 0.1.89

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -1,4 +1,4 @@
1
- import{f as g,h as m,m as y,p as n,v as _,y as k}from"../../vendor/vendor.js";import"../../vendor/vendor-lit.js";import"../../vendor/ripple.js";import{addLazyFocusRingListeners as x}from"../shared/lazy-focus-ring.js";import{t as a}from"../../vendor/decorate.js";import{renderScbIcon as f}from"../shared/scb-icon-svg.js";import"./scb-nav-item.js";(function(){try{var d=typeof globalThis<"u"?globalThis:window;if(!d.__scb_ce_guard_installed__){d.__scb_ce_guard_installed__=!0;var t=customElements.define.bind(customElements);customElements.define=function(e,s,i){try{customElements.get(e)||t(e,s,i)}catch(c){var r=String(c||"");if(r.indexOf("already been used")===-1&&r.indexOf("NotSupportedError")===-1)throw c}}}}catch{}})();var b,S={fromAttribute(d){return d===null?!1:d.toLowerCase()!=="false"}},o=(b=class extends m{constructor(...t){super(...t),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;const s=this.__itemsEl;if(!s)return;const i=s.scrollWidth-s.clientWidth;if(i<=1)return;const r=this.__normalizeWheelDelta(e);if(r===0)return;const c=Math.max(0,Math.min(i,s.scrollLeft+r));c!==s.scrollLeft&&(e.preventDefault(),s.scrollLeft=c,this.__updateScrollControls())},this.__onItemsScroll=()=>{this.__updateScrollControls()},this.__onClick=e=>{const s=e.composedPath().find(r=>r instanceof HTMLElement&&(r.tagName==="A"||r.tagName==="BUTTON"||r.tagName==="SCB-NAV-ITEM"));if(!s)return;const i=this.__getItemHref(s);this.dispatchEvent(new CustomEvent("scb-nav-select",{bubbles:!0,composed:!0,detail:{item:s,href:i}})),this.dispatchEvent(new CustomEvent("scbnavselect",{bubbles:!0,composed:!0,detail:{item:s,href:i}})),this.activateOnClick&&i&&(this.activeHref=i)}}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}__applySpacing(){const t=this.mapSpacingToken(this.spacing),e=this.mapSpacingToken(this.spacingTop)??t,s=this.mapSpacingToken(this.spacingBottom)??t,i=this.mapSpacingToken(this.spacingLeft),r=this.mapSpacingToken(this.spacingRight);e?this.style.setProperty("--scb-nav-spacing-block-start",e):this.style.removeProperty("--scb-nav-spacing-block-start"),s?this.style.setProperty("--scb-nav-spacing-block-end",s):this.style.removeProperty("--scb-nav-spacing-block-end"),i?this.style.setProperty("--scb-nav-spacing-inline-start",i):this.style.removeProperty("--scb-nav-spacing-inline-start"),r?this.style.setProperty("--scb-nav-spacing-inline-end",r):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}const t=(this.stickyTop||"").trim()||"0px";this.style.setProperty("--_scb-nav-sticky-top",t);const e=Number.isFinite(this.stickyZIndex)?this.stickyZIndex:5;this.style.setProperty("--_scb-nav-sticky-z-index",String(e));const s=(this.stickyBackground||"").trim();if(!s){this.style.removeProperty("--_scb-nav-sticky-background");return}const i=s.startsWith("--")?`var(${s})`:s;this.style.setProperty("--_scb-nav-sticky-background",i)}connectedCallback(){super.connectedCallback(),this.__removeLazyFocusRingListeners=x(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(t){t.has("label")&&this.__syncAriaLabel(),(t.has("sticky")||t.has("stickyTop")||t.has("stickyZIndex")||t.has("stickyBackground"))&&this.__syncStickyStyles(),t.has("activeHref")&&this.__applyActiveHref(),(t.has("spacing")||t.has("spacingTop")||t.has("spacingBottom")||t.has("spacingLeft")||t.has("spacingRight"))&&this.__applySpacing()}__syncAriaLabel(){if(this.hasAttribute("aria-label")){this.__autoAriaLabel=!1;return}const t=(this.label||"").trim();if(!t){this.__autoAriaLabel&&(this.removeAttribute("aria-label"),this.__autoAriaLabel=!1);return}this.setAttribute("aria-label",t),this.__autoAriaLabel=!0}async __decorateItems(){const t=this.__getSlottedItems();if(t.some(e=>e.tagName==="A"||e.tagName==="BUTTON"||e.tagName==="SCB-NAV-ITEM"))for(const e of t){const s=e instanceof HTMLAnchorElement,i=e instanceof HTMLButtonElement,r=e.tagName==="SCB-NAV-ITEM";if(!s&&!i&&!r||(i&&!e.hasAttribute("type")&&e.setAttribute("type","button"),e.getAttribute("data-scb-nav-decorated")==="true"))continue;e.id||(this.__itemIdCounter+=1,e.id=`${this.__itemIdPrefix}-${this.__itemIdCounter}`);const c=p=>{const v=e.querySelector(p);if(v instanceof HTMLElement)return v;const u=document.createElement(p);return e.appendChild(u),u},h=c("md-ripple");h&&h.style.setProperty("--md-ripple-focus-opacity","0");const l=c("md-focus-ring");l&&(l.setAttribute("inward",""),l.setAttribute("for",e.id),l.style.position="absolute",l.style.inset="0",l.style.pointerEvents="none",l.style.borderRadius="24px"),e.setAttribute("data-scb-nav-decorated","true")}}__getSlottedItems(){const t=this.renderRoot.querySelector("slot");return t?t.assignedElements({flatten:!0}).filter(e=>e instanceof HTMLElement):[]}__getItemHref(t){return t instanceof HTMLAnchorElement?(t.getAttribute("href")||"").trim():t.tagName==="SCB-NAV-ITEM"?(t.getAttribute("href")||t.getAttribute("data-href")||t.href||t.dataHref||"").trim():(t.getAttribute("data-href")||"").trim()}__applyActiveHref(){const t=(this.activeHref||"").trim(),e=this.__getSlottedItems();for(const s of e){const i=s instanceof HTMLAnchorElement,r=s instanceof HTMLButtonElement,c=s.tagName==="SCB-NAV-ITEM";if(!i&&!r&&!c)continue;r&&!s.hasAttribute("type")&&s.setAttribute("type","button");const h=this.__getItemHref(s);t&&h===t?(s.setAttribute("aria-current","location"),s.setAttribute("data-scb-nav-managed","true"),s.setAttribute("data-active","true")):(s.getAttribute("data-scb-nav-managed")==="true"&&(s.removeAttribute("aria-current"),s.removeAttribute("data-scb-nav-managed")),s.removeAttribute("data-active"))}}__getScrollStep(){const t=this.__itemsEl;return t?Math.max(Math.round(t.clientWidth*.8),120):200}__scrollBy(t){this.__itemsEl?.scrollBy({left:t,behavior:"smooth"})}__normalizeWheelDelta(t){const e=this.__itemsEl,s=Math.abs(t.deltaX)>Math.abs(t.deltaY)?t.deltaX:t.deltaY;return e?t.deltaMode===WheelEvent.DOM_DELTA_LINE?s*16:t.deltaMode===WheelEvent.DOM_DELTA_PAGE?s*e.clientWidth:s:s}__scheduleScrollControlUpdate(){this.__resizeRaf===null&&(this.__resizeRaf=requestAnimationFrame(()=>{this.__resizeRaf=null,this.__updateScrollControls()}))}__updateScrollControls(){const t=this.__itemsEl;if(!t){this.__canScrollLeft=!1,this.__canScrollRight=!1,this.toggleAttribute("data-scroll-left",!1),this.toggleAttribute("data-scroll-right",!1);return}const e=t.scrollLeft>0,s=t.scrollLeft+t.clientWidth<t.scrollWidth-1;this.__canScrollLeft=e,this.__canScrollRight=s,this.toggleAttribute("data-scroll-left",e),this.toggleAttribute("data-scroll-right",s)}render(){return _`
1
+ import{f as g,h as m,m as y,p as n,v as _,y as k}from"../../vendor/vendor.js";import"../../vendor/vendor-lit.js";import"../../vendor/ripple.js";import{addLazyFocusRingListeners as x}from"../shared/lazy-focus-ring.js";import{t as o}from"../../vendor/decorate.js";import{renderScbIcon as f}from"../shared/scb-icon-svg.js";import"./scb-nav-item.js";(function(){try{var d=typeof globalThis<"u"?globalThis:window;if(!d.__scb_ce_guard_installed__){d.__scb_ce_guard_installed__=!0;var t=customElements.define.bind(customElements);customElements.define=function(e,s,i){try{customElements.get(e)||t(e,s,i)}catch(c){var r=String(c||"");if(r.indexOf("already been used")===-1&&r.indexOf("NotSupportedError")===-1)throw c}}}}catch{}})();var p,S={fromAttribute(d){return d===null?!1:d.toLowerCase()!=="false"}},a=(p=class extends m{constructor(...t){super(...t),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;const s=this.__itemsEl;if(!s)return;const i=s.scrollWidth-s.clientWidth;if(i<=1)return;const r=this.__normalizeWheelDelta(e);if(r===0)return;const c=Math.max(0,Math.min(i,s.scrollLeft+r));c!==s.scrollLeft&&(e.preventDefault(),s.scrollLeft=c,this.__updateScrollControls())},this.__onItemsScroll=()=>{this.__updateScrollControls()},this.__onClick=e=>{const s=e.composedPath().find(r=>r instanceof HTMLElement&&(r.tagName==="A"||r.tagName==="BUTTON"||r.tagName==="SCB-NAV-ITEM"));if(!s)return;const i=this.__getItemHref(s);this.dispatchEvent(new CustomEvent("scb-nav-select",{bubbles:!0,composed:!0,detail:{item:s,href:i}})),this.dispatchEvent(new CustomEvent("scbnavselect",{bubbles:!0,composed:!0,detail:{item:s,href:i}})),this.activateOnClick&&i&&(this.activeHref=i)}}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}__applySpacing(){const t=this.mapSpacingToken(this.spacing),e=this.mapSpacingToken(this.spacingTop)??t,s=this.mapSpacingToken(this.spacingBottom)??t,i=this.mapSpacingToken(this.spacingLeft),r=this.mapSpacingToken(this.spacingRight);e?this.style.setProperty("--scb-nav-spacing-block-start",e):this.style.removeProperty("--scb-nav-spacing-block-start"),s?this.style.setProperty("--scb-nav-spacing-block-end",s):this.style.removeProperty("--scb-nav-spacing-block-end"),i?this.style.setProperty("--scb-nav-spacing-inline-start",i):this.style.removeProperty("--scb-nav-spacing-inline-start"),r?this.style.setProperty("--scb-nav-spacing-inline-end",r):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}const t=(this.stickyTop||"").trim()||"0px";this.style.setProperty("--_scb-nav-sticky-top",t);const e=Number.isFinite(this.stickyZIndex)?this.stickyZIndex:5;this.style.setProperty("--_scb-nav-sticky-z-index",String(e));const s=(this.stickyBackground||"").trim();if(!s){this.style.removeProperty("--_scb-nav-sticky-background");return}const i=s.startsWith("--")?`var(${s})`:s;this.style.setProperty("--_scb-nav-sticky-background",i)}connectedCallback(){super.connectedCallback(),this.__removeLazyFocusRingListeners=x(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(t){t.has("label")&&this.__syncAriaLabel(),(t.has("sticky")||t.has("stickyTop")||t.has("stickyZIndex")||t.has("stickyBackground"))&&this.__syncStickyStyles(),t.has("activeHref")&&this.__applyActiveHref(),(t.has("spacing")||t.has("spacingTop")||t.has("spacingBottom")||t.has("spacingLeft")||t.has("spacingRight"))&&this.__applySpacing()}__syncAriaLabel(){if(this.hasAttribute("aria-label")){this.__autoAriaLabel=!1;return}const t=(this.label||"").trim();if(!t){this.__autoAriaLabel&&(this.removeAttribute("aria-label"),this.__autoAriaLabel=!1);return}this.setAttribute("aria-label",t),this.__autoAriaLabel=!0}async __decorateItems(){const t=this.__getSlottedItems();if(t.some(e=>e.tagName==="A"||e.tagName==="BUTTON"||e.tagName==="SCB-NAV-ITEM"))for(const e of t){const s=e instanceof HTMLAnchorElement,i=e instanceof HTMLButtonElement,r=e.tagName==="SCB-NAV-ITEM";if(!s&&!i&&!r||(i&&!e.hasAttribute("type")&&e.setAttribute("type","button"),e.getAttribute("data-scb-nav-decorated")==="true"))continue;e.id||(this.__itemIdCounter+=1,e.id=`${this.__itemIdPrefix}-${this.__itemIdCounter}`);const c=b=>{const v=e.querySelector(b);if(v instanceof HTMLElement)return v;const u=document.createElement(b);return e.appendChild(u),u},h=c("md-ripple");h&&h.style.setProperty("--md-ripple-focus-opacity","0");const l=c("md-focus-ring");l&&(l.setAttribute("inward",""),l.setAttribute("for",e.id),l.style.position="absolute",l.style.inset="0",l.style.pointerEvents="none",l.style.borderRadius="24px"),e.setAttribute("data-scb-nav-decorated","true")}}__getSlottedItems(){const t=this.renderRoot.querySelector("slot");return t?t.assignedElements({flatten:!0}).filter(e=>e instanceof HTMLElement):[]}__getItemHref(t){return t instanceof HTMLAnchorElement?(t.getAttribute("href")||"").trim():t.tagName==="SCB-NAV-ITEM"?(t.getAttribute("href")||t.getAttribute("data-href")||t.href||t.dataHref||"").trim():(t.getAttribute("data-href")||"").trim()}__applyActiveHref(){const t=(this.activeHref||"").trim(),e=this.__getSlottedItems();for(const s of e){const i=s instanceof HTMLAnchorElement,r=s instanceof HTMLButtonElement,c=s.tagName==="SCB-NAV-ITEM";if(!i&&!r&&!c)continue;r&&!s.hasAttribute("type")&&s.setAttribute("type","button");const h=this.__getItemHref(s);t&&h===t?(s.setAttribute("aria-current","location"),s.setAttribute("data-scb-nav-managed","true"),s.setAttribute("data-active","true")):(s.getAttribute("data-scb-nav-managed")==="true"&&(s.removeAttribute("aria-current"),s.removeAttribute("data-scb-nav-managed")),s.removeAttribute("data-active"))}}__getScrollStep(){const t=this.__itemsEl;return t?Math.max(Math.round(t.clientWidth*.8),120):200}__scrollBy(t){this.__itemsEl?.scrollBy({left:t,behavior:"smooth"})}__normalizeWheelDelta(t){const e=this.__itemsEl,s=Math.abs(t.deltaX)>Math.abs(t.deltaY)?t.deltaX:t.deltaY;return e?t.deltaMode===WheelEvent.DOM_DELTA_LINE?s*16:t.deltaMode===WheelEvent.DOM_DELTA_PAGE?s*e.clientWidth:s:s}__scheduleScrollControlUpdate(){this.__resizeRaf===null&&(this.__resizeRaf=requestAnimationFrame(()=>{this.__resizeRaf=null,this.__updateScrollControls()}))}__updateScrollControls(){const t=this.__itemsEl;if(!t){this.__canScrollLeft=!1,this.__canScrollRight=!1,this.toggleAttribute("data-scroll-left",!1),this.toggleAttribute("data-scroll-right",!1);return}const e=t.scrollLeft>0,s=t.scrollLeft+t.clientWidth<t.scrollWidth-1;this.__canScrollLeft=e,this.__canScrollRight=s,this.toggleAttribute("data-scroll-left",e),this.toggleAttribute("data-scroll-right",s)}render(){return _`
2
2
  <div class="scb-nav">
3
3
  ${this.__canScrollLeft?_`
4
4
  <button
@@ -26,10 +26,14 @@ import{f as g,h as m,m as y,p as n,v as _,y as k}from"../../vendor/vendor.js";im
26
26
  </button>
27
27
  `:""}
28
28
  </div>
29
- `}},b.styles=k`: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);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);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;inset-block-start:var(--_scb-nav-sticky-top,
29
+ `}},p.styles=k`: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);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);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;inset-block-start:var(--_scb-nav-sticky-top,
30
30
  var(--scb-nav-sticky-top, 0px)
31
31
  );z-index:var(--_scb-nav-sticky-z-index,
32
32
  var(--scb-nav-sticky-z-index, 5)
33
33
  );background:var(--_scb-nav-sticky-background,
34
- var(--scb-nav-sticky-background, transparent)
35
- )}.scb-nav,.scb-nav__items{display:flex;align-items:center;min-inline-size:0}.scb-nav{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;overflow-x:hidden}.scb-nav__items{flex:1 1 auto;gap:var(--scb-nav-gap, var(--spacing-3, 8px));overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;scrollbar-width:none;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{display:none}::slotted(a),::slotted(button),::slotted(scb-nav-item){display:inline-flex;flex:0 0 auto;align-items:center;justify-content:center;padding-block:var(--scb-nav-item-padding-block, var(--spacing-3, 8px));padding-inline:var(--scb-nav-item-padding-inline, var(--spacing-5, 16px));border-radius:var(--scb-nav-item-radius, var(--radius-full, 1000px));background:0 0;color:var(--md-sys-color-on-surface);text-decoration:none;border:0;font-family:inherit;font-size:var(--md-sys-typescale-label-large-size);line-height:var(--md-sys-typescale-label-large-line-height);font-weight:var(--md-sys-typescale-label-large-weight);cursor:pointer;white-space:nowrap;user-select:none;-webkit-tap-highlight-color:transparent;box-sizing:border-box;outline:0;position:relative;overflow:hidden}::slotted(a:focus),::slotted(button:focus),::slotted(scb-nav-item:focus){outline:0}::slotted([data-active=true]),::slotted(a[aria-current]),::slotted(button[aria-current]),::slotted(scb-nav-item[aria-current]){background:var(--md-sys-color-secondary-container);color:var(--md-sys-color-on-secondary-container);font-weight:600}.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:0}.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:0 0;box-shadow:none;transition:box-shadow .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:0 0;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:0 0;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))}`,b);a([g()],o.prototype,"__canScrollLeft",void 0);a([g()],o.prototype,"__canScrollRight",void 0);a([n({type:String})],o.prototype,"label",void 0);a([n({type:String,attribute:"active-href"})],o.prototype,"activeHref",void 0);a([n({type:Boolean,attribute:"activate-on-click",converter:S})],o.prototype,"activateOnClick",void 0);a([n({type:Boolean,reflect:!0})],o.prototype,"sticky",void 0);a([n({type:String,attribute:"sticky-top"})],o.prototype,"stickyTop",void 0);a([n({type:Number,attribute:"sticky-z-index"})],o.prototype,"stickyZIndex",void 0);a([n({type:String,attribute:"sticky-background"})],o.prototype,"stickyBackground",void 0);a([n({type:String,reflect:!0})],o.prototype,"spacing",void 0);a([n({type:String,attribute:"spacing-top",reflect:!0})],o.prototype,"spacingTop",void 0);a([n({type:String,attribute:"spacing-bottom",reflect:!0})],o.prototype,"spacingBottom",void 0);a([n({type:String,attribute:"spacing-left",reflect:!0})],o.prototype,"spacingLeft",void 0);a([n({type:String,attribute:"spacing-right",reflect:!0})],o.prototype,"spacingRight",void 0);o=a([y("scb-nav")],o);
34
+ var(--scb-nav-sticky-background, var(--md-sys-color-surface-container-lowest))
35
+ )}.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}:host([sticky]) .scb-nav{padding-block:var(--scb-nav-sticky-padding-block,
36
+ var(--scb-nav-padding-block, var(--spacing-5, 16px))
37
+ );padding-inline:var(--scb-nav-sticky-padding-inline,
38
+ var(--scb-nav-padding-inline, var(--spacing-5, 16px))
39
+ )}.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:hidden;-webkit-overflow-scrolling:touch;scrollbar-width:none;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{display:none}::slotted(a),::slotted(button),::slotted(scb-nav-item){display:inline-flex;flex:0 0 auto;align-items:center;justify-content:center;padding-block:var(--scb-nav-item-padding-block, var(--spacing-3, 8px));padding-inline:var(--scb-nav-item-padding-inline, var(--spacing-5, 16px));border-radius:var(--scb-nav-item-radius, var(--radius-full, 1000px));background:0 0;color:var(--md-sys-color-on-surface);text-decoration:none;border:0;font-family:inherit;font-size:var(--md-sys-typescale-label-large-size);line-height:var(--md-sys-typescale-label-large-line-height);font-weight:var(--md-sys-typescale-label-large-weight);cursor:pointer;white-space:nowrap;user-select:none;-webkit-tap-highlight-color:transparent;box-sizing:border-box;outline:0;position:relative;overflow:hidden}::slotted(a:focus),::slotted(button:focus),::slotted(scb-nav-item:focus){outline:0}::slotted([data-active=true]),::slotted(a[aria-current]),::slotted(button[aria-current]),::slotted(scb-nav-item[aria-current]){background:var(--md-sys-color-secondary-container);color:var(--md-sys-color-on-secondary-container);font-weight:600}.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:0}.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:0 0;box-shadow:none;transition:box-shadow .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:0 0;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:0 0;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))}`,p);o([g()],a.prototype,"__canScrollLeft",void 0);o([g()],a.prototype,"__canScrollRight",void 0);o([n({type:String})],a.prototype,"label",void 0);o([n({type:String,attribute:"active-href"})],a.prototype,"activeHref",void 0);o([n({type:Boolean,attribute:"activate-on-click",converter:S})],a.prototype,"activateOnClick",void 0);o([n({type:Boolean,reflect:!0})],a.prototype,"sticky",void 0);o([n({type:String,attribute:"sticky-top"})],a.prototype,"stickyTop",void 0);o([n({type:Number,attribute:"sticky-z-index"})],a.prototype,"stickyZIndex",void 0);o([n({type:String,attribute:"sticky-background"})],a.prototype,"stickyBackground",void 0);o([n({type:String,reflect:!0})],a.prototype,"spacing",void 0);o([n({type:String,attribute:"spacing-top",reflect:!0})],a.prototype,"spacingTop",void 0);o([n({type:String,attribute:"spacing-bottom",reflect:!0})],a.prototype,"spacingBottom",void 0);o([n({type:String,attribute:"spacing-left",reflect:!0})],a.prototype,"spacingLeft",void 0);o([n({type:String,attribute:"spacing-right",reflect:!0})],a.prototype,"spacingRight",void 0);a=o([y("scb-nav")],a);
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "scb-wc",
3
- "version": "0.1.87",
3
+ "version": "0.1.89",
4
4
  "type": "module",
5
5
  "main": "index.js",
6
6
  "module": "index.js",
@@ -460,5 +460,5 @@
460
460
  },
461
461
  "./mvc/*": "./mvc/*"
462
462
  },
463
- "buildHash": "913BA60B0A4672C227A56068DB1B356A9F17049F611B6971D118E142357C0024"
463
+ "buildHash": "A8C61979652F9426A232934674E3C20C8EBE461998F0BC4995CF030335F443B7"
464
464
  }
@@ -85,7 +85,7 @@ var l = { fromAttribute(e) {
85
85
  );
86
86
  background: var(
87
87
  --_scb-nav-sticky-background,
88
- var(--scb-nav-sticky-background, transparent)
88
+ var(--scb-nav-sticky-background, var(--md-sys-color-surface-container-lowest))
89
89
  );
90
90
  }
91
91
 
@@ -102,6 +102,17 @@ var l = { fromAttribute(e) {
102
102
  overflow-x: hidden;
103
103
  }
104
104
 
105
+ :host([sticky]) .scb-nav {
106
+ padding-block: var(
107
+ --scb-nav-sticky-padding-block,
108
+ var(--scb-nav-padding-block, var(--spacing-5, 16px))
109
+ );
110
+ padding-inline: var(
111
+ --scb-nav-sticky-padding-inline,
112
+ var(--scb-nav-padding-inline, var(--spacing-5, 16px))
113
+ );
114
+ }
115
+
105
116
  .scb-nav__items {
106
117
  display: flex;
107
118
  flex: 1 1 auto;
package/scb-wc.bundle.js CHANGED
@@ -10803,7 +10803,7 @@
10803
10803
  );
10804
10804
  background: var(
10805
10805
  --_scb-nav-sticky-background,
10806
- var(--scb-nav-sticky-background, transparent)
10806
+ var(--scb-nav-sticky-background, var(--md-sys-color-surface-container-lowest))
10807
10807
  );
10808
10808
  }
10809
10809
 
@@ -10820,6 +10820,17 @@
10820
10820
  overflow-x: hidden;
10821
10821
  }
10822
10822
 
10823
+ :host([sticky]) .scb-nav {
10824
+ padding-block: var(
10825
+ --scb-nav-sticky-padding-block,
10826
+ var(--scb-nav-padding-block, var(--spacing-5, 16px))
10827
+ );
10828
+ padding-inline: var(
10829
+ --scb-nav-sticky-padding-inline,
10830
+ var(--scb-nav-padding-inline, var(--spacing-5, 16px))
10831
+ );
10832
+ }
10833
+
10823
10834
  .scb-nav__items {
10824
10835
  display: flex;
10825
10836
  flex: 1 1 auto;