scb-wc 0.1.84 → 0.1.85

package/package.json

@@ -1,6 +1,6 @@
 {
     "name":  "scb-wc",
-    "version":  "0.1.84",
+    "version":  "0.1.85",
     "type":  "module",
     "main":  "index.js",
     "module":  "index.js",
@@ -460,5 +460,5 @@
                                                         },
                     "./mvc/*":  "./mvc/*"
                 },
-    "buildHash":  "7E0A3EA2430B08C40D8103A73CB1A9CE009E5EB17F2F79CDF407B982E9CA52F5"
+    "buildHash":  "7E093C4E18AA9C904CFA5A86818505F4696ABD4F84BE76B47D2A36FB76D2157C"
 }

package/scb-components/scb-nav/scb-nav.d.ts

@@ -1,6 +1,11 @@
 import { LitElement, TemplateResult } from 'lit';
 export declare class ScbNav extends LitElement {
     private __removeLazyFocusRingListeners?;
+    private __itemsEl;
+    private __resizeObserver;
+    private __resizeRaf;
+    private __canScrollLeft;
+    private __canScrollRight;
     /** Aria-label för navigeringen (används om hosten saknar aria-label). */
     label: string;
     /** Matchar href-attributet på en item i slotten och markerar den som aktiv. */
@@ -42,6 +47,15 @@ export declare class ScbNav extends LitElement {
     private __getItemHref;
     private __applyActiveHref;
     private __onSlotChange;
+    private __getScrollStep;
+    private __scrollBy;
+    private __scrollLeft;
+    private __scrollRight;
+    private __normalizeWheelDelta;
+    private __onWheel;
+    private __onItemsScroll;
+    private __scheduleScrollControlUpdate;
+    private __updateScrollControls;
     private __onClick;
     render(): TemplateResult;
 }

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

@@ -57,6 +57,50 @@ var u = class extends n {
       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;
     }
@@ -223,10 +267,10 @@ var u = class extends n {
       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: '';
@@ -234,10 +278,10 @@ var u = class extends n {
       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: '';

package/scb-nav/scb-nav.js

@@ -1,16 +1,33 @@
 import { addLazyFocusRingListeners as e } from "../shared/lazy-focus-ring.js";
 import { __decorate as t } from "../_virtual/_@oxc-project_runtime@0.126.0/helpers/decorate.js";
+import { renderScbIcon as n } from "../shared/scb-icon-svg.js";
 import "./scb-nav-item.js";
-import { LitElement as n, css as r, html as i } from "lit";
-import { customElement as a, property as o } from "lit/decorators.js";
+import { LitElement as r, css as i, html as a } from "lit";
+import { customElement as o, property as s, state as c } from "lit/decorators.js";
 import "@material/web/ripple/ripple.js";
 //#region src/scb-components/scb-nav/scb-nav.ts
-var s = { fromAttribute(e) {
+var l = { fromAttribute(e) {
 	return e === null ? !1 : e.toLowerCase() !== "false";
-} }, c = class extends n {
+} }, u = class extends r {
 	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();
+		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;
@@ -33,17 +50,28 @@ var s = { fromAttribute(e) {
 		};
 	}
 	static {
-		this.styles = r`
+		this.styles = i`
     :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;
@@ -57,28 +85,84 @@ var s = { fromAttribute(e) {
       );
       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 {
@@ -89,6 +173,7 @@ var s = { fromAttribute(e) {
     ::slotted(button),
     ::slotted(scb-nav-item) {
       display: inline-flex;
+      flex: 0 0 auto;
       align-items: center;
       justify-content: center;
 
@@ -132,6 +217,125 @@ var s = { fromAttribute(e) {
       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: 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) {
@@ -164,10 +368,14 @@ var s = { fromAttribute(e) {
 		super.connectedCallback(), this.__removeLazyFocusRingListeners = e(this, this.renderRoot), this.hasAttribute("role") || this.setAttribute("role", "navigation"), this.__syncStickyStyles(), this.__syncAriaLabel();
 	}
 	disconnectedCallback() {
-		this.__removeLazyFocusRingListeners?.(), this.__removeLazyFocusRingListeners = void 0, super.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() {
-		await this.__decorateItems(), this.__applyActiveHref(), this.__applySpacing();
+		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();
@@ -218,54 +426,104 @@ var s = { fromAttribute(e) {
 			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 i`
+		return a`
       <div class="scb-nav">
-        <div class="scb-nav__items" @click=${this.__onClick}>
+        ${this.__canScrollLeft ? a`
+              <button
+                class="scb-nav__scroll-control scb-nav__scroll-control--left"
+                type="button"
+                aria-label="Scrolla vänster"
+                @click=${this.__scrollLeft}
+              >
+                ${n("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 ? a`
+              <button
+                class="scb-nav__scroll-control scb-nav__scroll-control--right"
+                type="button"
+                aria-label="Scrolla höger"
+                @click=${this.__scrollRight}
+              >
+                ${n("chevron_right", "scb-nav__scroll-control-icon")}
+              </button>
+            ` : ""}
       </div>
     `;
 	}
 };
-t([o({ type: String })], c.prototype, "label", void 0), t([o({
+t([c()], u.prototype, "__canScrollLeft", void 0), t([c()], u.prototype, "__canScrollRight", void 0), t([s({ type: String })], u.prototype, "label", void 0), t([s({
 	type: String,
 	attribute: "active-href"
-})], c.prototype, "activeHref", void 0), t([o({
+})], u.prototype, "activeHref", void 0), t([s({
 	type: Boolean,
 	attribute: "activate-on-click",
-	converter: s
-})], c.prototype, "activateOnClick", void 0), t([o({
+	converter: l
+})], u.prototype, "activateOnClick", void 0), t([s({
 	type: Boolean,
 	reflect: !0
-})], c.prototype, "sticky", void 0), t([o({
+})], u.prototype, "sticky", void 0), t([s({
 	type: String,
 	attribute: "sticky-top"
-})], c.prototype, "stickyTop", void 0), t([o({
+})], u.prototype, "stickyTop", void 0), t([s({
 	type: Number,
 	attribute: "sticky-z-index"
-})], c.prototype, "stickyZIndex", void 0), t([o({
+})], u.prototype, "stickyZIndex", void 0), t([s({
 	type: String,
 	attribute: "sticky-background"
-})], c.prototype, "stickyBackground", void 0), t([o({
+})], u.prototype, "stickyBackground", void 0), t([s({
 	type: String,
 	reflect: !0
-})], c.prototype, "spacing", void 0), t([o({
+})], u.prototype, "spacing", void 0), t([s({
 	type: String,
 	attribute: "spacing-top",
 	reflect: !0
-})], c.prototype, "spacingTop", void 0), t([o({
+})], u.prototype, "spacingTop", void 0), t([s({
 	type: String,
 	attribute: "spacing-bottom",
 	reflect: !0
-})], c.prototype, "spacingBottom", void 0), t([o({
+})], u.prototype, "spacingBottom", void 0), t([s({
 	type: String,
 	attribute: "spacing-left",
 	reflect: !0
-})], c.prototype, "spacingLeft", void 0), t([o({
+})], u.prototype, "spacingLeft", void 0), t([s({
 	type: String,
 	attribute: "spacing-right",
 	reflect: !0
-})], c.prototype, "spacingRight", void 0), c = t([a("scb-nav")], c);
+})], u.prototype, "spacingRight", void 0), u = t([o("scb-nav")], u);
 //#endregion
-export { c as ScbNav };
+export { u as ScbNav };