scb-wc 0.1.2 → 0.1.4

package/scb-scrollspy/scb-scrollspy.js

@@ -0,0 +1,670 @@
+import { __decorate as e } from "../_virtual/_@oxc-project_runtime@0.126.0/helpers/decorate.js";
+import { LitElement as t, css as n, html as r } from "lit";
+import { customElement as i } from "lit/decorators.js";
+//#region src/scb-test-components/scb-scrollspy/scb-scrollspy.ts
+var a = class extends t {
+	constructor(...e) {
+		super(...e), this.navSelector = "", this.offsetTop = 0, this.offsetBottom = 0, this.updateHash = !0, this.activeId = "", this.layout = "", this.sidebarNavWidth = "320px", this.sidebarHeight = "560px", this.stackHeight = "", this.sidebarNavTop = "0px", this.contentPadding = "0px", this.spacing = void 0, this.spacingTop = void 0, this.spacingBottom = void 0, this.spacingLeft = void 0, this.spacingRight = void 0, this.__navEl = null, this.__contentEl = null, this.__contentShellEl = null, this.__links = [], this.__observer = null, this.__fallbackScrollRoot = null, this.__entries = /* @__PURE__ */ new Map(), this.__rafId = null, this.__scrollRafId = null, this.__hashAllowUpdates = !1, this.__hashBaselineReady = !1, this.__hashBaselinePos = 0, this.__hashBaselineRafId = null, this.__hashScrollRoot = null, this.__hashSuspend = !1, this.__hashInitialApplied = !1, this.__onHashScrollBound = () => this.__onHashScroll(), this.__scrollAnimSeq = 0, this.__syncingActiveId = !1, this.__slotsResolvedOnce = !1, this.__motionMeasureEl = null, this.__focusableRafId = null, this.__autoOffsetTop = 0, this.__autoOffsetRafId = null, this.__navResizeObserver = null, this.__onNavClickBound = (e) => this.__onNavClick(e), this.__onScrollFallbackBound = () => this.__updateActiveFromRects(), this.__onResizeBound = () => {
+			this.__requestActiveRecalc(), this.__requestAutoOffsetMeasure();
+		}, this.__onSlotChange = () => {
+			let e = this.__navEl;
+			this.__teardown(), this.__resolveSlots(), this.__requestEnsureContentFocusable(), this.__navEl && this.__navEl.addEventListener("click", this.__onNavClickBound, !0), (e !== this.__navEl || !this.__links.length) && this.__collectLinks(), this.__requestAutoOffsetMeasure(), this.__rebuildObserver(), this.__attachHashScrollRoot(), this.__applyInitialHashIfAny(), !this.__hashInitialApplied && this.activeId && this.__applyActiveId(this.activeId, {
+				updateHash: !1,
+				scrollToTarget: !1
+			}), this.__slotsResolvedOnce = !0;
+		};
+	}
+	static {
+		this.properties = {
+			navSelector: {
+				type: String,
+				attribute: "nav-selector"
+			},
+			offsetTop: {
+				type: Number,
+				attribute: "offset-top"
+			},
+			offsetBottom: {
+				type: Number,
+				attribute: "offset-bottom"
+			},
+			updateHash: {
+				type: Boolean,
+				attribute: "update-hash",
+				converter: {
+					fromAttribute: (e) => {
+						if (e === null) return !0;
+						let t = e.trim().toLowerCase();
+						return !(t === "false" || t === "0" || t === "no");
+					},
+					toAttribute: (e) => e ? "" : null
+				}
+			},
+			activeId: {
+				type: String,
+				attribute: "active-id",
+				reflect: !0
+			},
+			layout: {
+				type: String,
+				reflect: !0
+			},
+			sidebarNavWidth: {
+				type: String,
+				attribute: "sidebar-nav-width"
+			},
+			sidebarHeight: {
+				type: String,
+				attribute: "sidebar-height"
+			},
+			stackHeight: {
+				type: String,
+				attribute: "stack-height"
+			},
+			sidebarNavTop: {
+				type: String,
+				attribute: "sidebar-nav-top"
+			},
+			contentPadding: {
+				type: String,
+				attribute: "content-padding"
+			},
+			spacing: {
+				type: String,
+				reflect: !0
+			},
+			spacingTop: {
+				type: String,
+				attribute: "spacing-top",
+				reflect: !0
+			},
+			spacingBottom: {
+				type: String,
+				attribute: "spacing-bottom",
+				reflect: !0
+			},
+			spacingLeft: {
+				type: String,
+				attribute: "spacing-left",
+				reflect: !0
+			},
+			spacingRight: {
+				type: String,
+				attribute: "spacing-right",
+				reflect: !0
+			}
+		};
+	}
+	static {
+		this.styles = n`
+    :host {
+      display: contents;
+    }
+
+    :host([layout='sidebar']) {
+      display: block;
+      margin-block-start: var(--scb-scrollspy-spacing-block-start, 0);
+      margin-block-end: var(--scb-scrollspy-spacing-block-end, 0);
+      margin-inline-start: var(--scb-scrollspy-spacing-inline-start, 0);
+      margin-inline-end: var(--scb-scrollspy-spacing-inline-end, 0);
+    }
+
+    :host([layout='stack']) {
+      display: block;
+      margin-block-start: var(--scb-scrollspy-spacing-block-start, 0);
+      margin-block-end: var(--scb-scrollspy-spacing-block-end, 0);
+      margin-inline-start: var(--scb-scrollspy-spacing-inline-start, 0);
+      margin-inline-end: var(--scb-scrollspy-spacing-inline-end, 0);
+    }
+
+    .stack-shell {
+      max-height: var(--_scb-scrollspy-stack-height, none);
+      overflow: auto;
+      border-radius: 16px;
+      font-family: var(--brand-font);
+      box-sizing: border-box;
+    }
+
+    .stack-content {
+      padding: var(--_scb-scrollspy-content-padding, 0px);
+      box-sizing: border-box;
+    }
+    .sidebar-layout {
+      display: grid;
+      grid-template-columns: var(--_scb-scrollspy-sidebar-nav-width, 320px) minmax(0, 1fr);
+      gap: var(--spacing-6, 20px);
+      align-items: start;
+    }
+
+    .sidebar-nav {
+      height: var(--_scb-scrollspy-sidebar-height, 560px);
+      overflow: auto;
+      position: sticky;
+      top: var(--_scb-scrollspy-sidebar-nav-top, 0px);
+    }
+
+    .sidebar-content {
+      height: var(--_scb-scrollspy-sidebar-height, 560px);
+      overflow: auto;
+      border-radius: 16px;
+      font-family: var(--brand-font);
+      padding: var(--_scb-scrollspy-content-padding, 0px);
+      box-sizing: border-box;
+    }
+
+    :host([layout='sidebar']) ::slotted(scb-menu) {
+      border-radius: var(--scb-menu-surface-radius, 16px);
+    }
+  `;
+	}
+	connectedCallback() {
+		super.connectedCallback(), window.addEventListener("resize", this.__onResizeBound, { passive: !0 });
+	}
+	firstUpdated() {
+		this.__ensureMotionMeasureEl(), this.__resolveInternals(), this.__requestEnsureContentFocusable(), this.__requestAutoOffsetMeasure(), this.__applySpacing();
+	}
+	disconnectedCallback() {
+		window.removeEventListener("resize", this.__onResizeBound), this.__teardown(), super.disconnectedCallback();
+	}
+	updated(e) {
+		if ((e.has("spacing") || e.has("spacingTop") || e.has("spacingBottom") || e.has("spacingLeft") || e.has("spacingRight")) && this.__applySpacing(), e.has("navSelector")) {
+			this.__onSlotChange();
+			return;
+		}
+		if (e.has("layout")) {
+			this.__onSlotChange();
+			return;
+		}
+		(e.has("offsetTop") || e.has("offsetBottom")) && (this.__rebuildObserver(), this.__attachHashScrollRoot()), (e.has("sidebarNavWidth") || e.has("sidebarHeight") || e.has("stackHeight") || e.has("sidebarNavTop") || e.has("contentPadding")) && (this.__resolveInternals(), this.__requestEnsureContentFocusable(), this.__rebuildObserver()), e.has("activeId") && (this.__syncingActiveId ? this.__syncingActiveId = !1 : this.__applyExternalActiveId());
+	}
+	__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-scrollspy-spacing-block-start", t) : this.style.removeProperty("--scb-scrollspy-spacing-block-start"), n ? this.style.setProperty("--scb-scrollspy-spacing-block-end", n) : this.style.removeProperty("--scb-scrollspy-spacing-block-end"), r ? this.style.setProperty("--scb-scrollspy-spacing-inline-start", r) : this.style.removeProperty("--scb-scrollspy-spacing-inline-start"), i ? this.style.setProperty("--scb-scrollspy-spacing-inline-end", i) : this.style.removeProperty("--scb-scrollspy-spacing-inline-end");
+	}
+	__teardown() {
+		this.__cancelScrollAnimation(), this.__cancelEnsureContentFocusable(), this.__cancelAutoOffsetMeasure(), this.__disconnectAutoOffsetObserver(), this.__disconnectObserver(), this.__navEl && this.__navEl.removeEventListener("click", this.__onNavClickBound, !0), this.__fallbackScrollRoot && this.__fallbackScrollRoot.removeEventListener?.("scroll", this.__onScrollFallbackBound), this.__fallbackScrollRoot = null, this.__entries.clear(), this.__links = [], this.__detachHashScrollRoot(), this.__cancelHashBaseline();
+	}
+	__cancelScrollAnimation() {
+		this.__scrollAnimSeq++, this.__scrollRafId !== null && (window.cancelAnimationFrame(this.__scrollRafId), this.__scrollRafId = null);
+	}
+	__cancelEnsureContentFocusable() {
+		this.__focusableRafId !== null && (window.cancelAnimationFrame(this.__focusableRafId), this.__focusableRafId = null);
+	}
+	__requestEnsureContentFocusable() {
+		typeof window > "u" || (this.__cancelEnsureContentFocusable(), this.__focusableRafId = window.requestAnimationFrame(() => {
+			this.__focusableRafId = null, this.__ensureScrollableContentFocusable();
+		}));
+	}
+	__ensureScrollableContentFocusable() {
+		let e = this.__getScrollContainerEl();
+		e instanceof HTMLElement && (e.hasAttribute("tabindex") || (e.scrollHeight > e.clientHeight + 1 || e.scrollWidth > e.clientWidth + 1) && (e.querySelector("a[href], button:not([disabled]), input:not([disabled]), select:not([disabled]), textarea:not([disabled]), summary, [tabindex]:not([tabindex=\"-1\"]), [contenteditable=\"\"], [contenteditable=\"true\"]") || e.setAttribute("tabindex", "0")));
+	}
+	__ensureMotionMeasureEl() {
+		if (this.__motionMeasureEl) return;
+		let e = document.createElement("span");
+		e.setAttribute("aria-hidden", "true"), e.style.position = "fixed", e.style.width = "0", e.style.height = "0", e.style.overflow = "hidden", e.style.pointerEvents = "none", e.style.visibility = "hidden", this.__motionMeasureEl = e, this.renderRoot.appendChild(e);
+	}
+	__disconnectObserver() {
+		this.__observer &&= (this.__observer.disconnect(), null);
+	}
+	__resolveInternals() {
+		this.__contentShellEl = this.layout === "sidebar" ? this.renderRoot.querySelector(".sidebar-content") : this.layout === "stack" ? this.renderRoot.querySelector(".stack-shell") : null;
+	}
+	__resolveSlots() {
+		let e = this.renderRoot.querySelector("slot[name=\"nav\"]"), t = this.renderRoot.querySelector("slot[name=\"content\"]"), n = e?.assignedElements({ flatten: !0 }) ?? [], r = t?.assignedElements({ flatten: !0 }) ?? [], i = (this.navSelector || "").trim(), a = i ? this.__queryExternalNav(i) : n[0], o = r[0];
+		this.__navEl = a instanceof HTMLElement ? a : null, this.__contentEl = o instanceof HTMLElement ? o : null, this.__resolveInternals();
+	}
+	__queryExternalNav(e) {
+		try {
+			return (this.getRootNode?.())?.querySelector?.(e) ?? document.querySelector(e);
+		} catch {
+			return null;
+		}
+	}
+	__getScrollContainerEl() {
+		return this.layout === "sidebar" || this.layout === "stack" ? this.__contentShellEl : this.__contentEl;
+	}
+	__isOffsetTopExplicit() {
+		return this.hasAttribute("offset-top");
+	}
+	__getEffectiveOffsetTop() {
+		let e = this.__isOffsetTopExplicit() ? this.offsetTop : this.__autoOffsetTop;
+		return Math.max(0, e);
+	}
+	__cancelAutoOffsetMeasure() {
+		this.__autoOffsetRafId !== null && (window.cancelAnimationFrame(this.__autoOffsetRafId), this.__autoOffsetRafId = null);
+	}
+	__disconnectAutoOffsetObserver() {
+		this.__navResizeObserver &&= (this.__navResizeObserver.disconnect(), null);
+	}
+	__requestAutoOffsetMeasure() {
+		if (!(typeof window > "u")) {
+			if (this.__isOffsetTopExplicit()) {
+				this.__setAutoOffsetTop(0), this.__disconnectAutoOffsetObserver();
+				return;
+			}
+			this.__autoOffsetRafId === null && (this.__autoOffsetRafId = window.requestAnimationFrame(() => {
+				this.__autoOffsetRafId = null, this.__measureAutoOffset();
+			}));
+		}
+	}
+	__measureAutoOffset() {
+		let e = this.__navEl;
+		if (this.__isOffsetTopExplicit()) {
+			this.__setAutoOffsetTop(0), this.__disconnectAutoOffsetObserver();
+			return;
+		}
+		if (!(e?.tagName === "SCB-NAV" && (e.hasAttribute("sticky") || e.sticky === !0))) {
+			this.__setAutoOffsetTop(0), this.__disconnectAutoOffsetObserver();
+			return;
+		}
+		let t = Math.max(0, Math.round(e.getBoundingClientRect().height));
+		this.__setAutoOffsetTop(t), !this.__navResizeObserver && "ResizeObserver" in window && (this.__navResizeObserver = new ResizeObserver(() => {
+			this.__requestAutoOffsetMeasure();
+		}), this.__navResizeObserver.observe(e));
+	}
+	__setAutoOffsetTop(e) {
+		let t = Math.max(0, e);
+		Math.abs(t - this.__autoOffsetTop) < 1 || (this.__autoOffsetTop = t, this.__rebuildObserver(), this.__requestActiveRecalc());
+	}
+	__rebuildObserver() {
+		this.__disconnectObserver(), this.__entries.clear();
+		let e = this.__getObserverRoot(), t = `-${Math.max(0, this.__getEffectiveOffsetTop())}px 0px -${Math.max(0, this.offsetBottom)}px 0px`;
+		if (!(typeof window > "u")) {
+			if ("IntersectionObserver" in window) {
+				this.__observer = new IntersectionObserver((e) => this.__onIntersect(e), {
+					root: e,
+					rootMargin: t,
+					threshold: [
+						0,
+						.1,
+						.25,
+						.5,
+						.75,
+						1
+					]
+				});
+				for (let e of this.__links) this.__observer.observe(e.targetEl);
+				this.__requestActiveRecalc();
+				return;
+			}
+			this.__enableFallbackScrollSpy();
+		}
+	}
+	__enableFallbackScrollSpy() {
+		let e = this.__getObserverRoot() ?? window;
+		this.__fallbackScrollRoot = e, e.addEventListener?.("scroll", this.__onScrollFallbackBound, { passive: !0 }), this.__requestActiveRecalc();
+	}
+	__getObserverRoot() {
+		let e = this.__getScrollContainerEl();
+		return e instanceof HTMLElement && (e.scrollHeight > e.clientHeight + 1 || e.scrollWidth > e.clientWidth + 1) ? e : null;
+	}
+	__collectLinks() {
+		let e = this.__navEl, t = this.__contentEl;
+		if (!e || !t) {
+			this.__links = [];
+			return;
+		}
+		let n = Array.from(e.querySelectorAll("scb-menu-item[item-href^=\"#\"], scb-nav-item[href^=\"#\"], scb-nav-item[data-href^=\"#\"], a[href^=\"#\"], button[data-href^=\"#\"]")), r = [];
+		for (let e of n) {
+			let n = this.__getHref(e);
+			if (!n || !n.startsWith("#")) continue;
+			let i = n.slice(1);
+			if (!i) continue;
+			let a = t.querySelector(`#${CSS.escape(i)}`);
+			a && r.push({
+				id: i,
+				navEl: e,
+				targetEl: a
+			});
+		}
+		this.__links = r;
+	}
+	__getHref(e) {
+		return e.tagName === "A" ? e.getAttribute("href") ?? "" : e.tagName === "SCB-MENU-ITEM" ? e.itemHref ?? e.getAttribute("item-href") ?? "" : e.tagName === "BUTTON" ? e.getAttribute("data-href") ?? "" : e.tagName === "SCB-NAV-ITEM" ? e.href || e.dataHref || e.getAttribute("href") || e.getAttribute("data-href") || "" : e.getAttribute("href") ?? "";
+	}
+	__onIntersect(e) {
+		for (let t of e) {
+			let e = t.target.id;
+			e && this.__entries.set(e, {
+				id: e,
+				isIntersecting: t.isIntersecting,
+				top: t.boundingClientRect.top,
+				ratio: t.intersectionRatio
+			});
+		}
+		this.__requestActiveRecalc();
+	}
+	__requestActiveRecalc() {
+		this.__rafId === null && (this.__rafId = window.requestAnimationFrame(() => {
+			this.__rafId = null, this.__updateActiveFromEntries();
+		}));
+	}
+	__updateActiveFromEntries() {
+		if (this.__entries.size === 0) {
+			this.__updateActiveFromRects();
+			return;
+		}
+		let e = Array.from(this.__entries.values()).filter((e) => e.isIntersecting);
+		if (e.length === 0) return;
+		let t = this.__getObserverRoot(), n = ((t ? t.getBoundingClientRect() : null)?.top ?? 0) + Math.max(0, this.__getEffectiveOffsetTop()), r = e.filter((e) => e.top >= n).sort((e, t) => e.top - t.top)[0] ?? e.sort((e, t) => t.top - e.top)[0];
+		r?.id && this.__setActiveId(r.id, { updateHash: this.updateHash });
+	}
+	__updateActiveFromRects() {
+		if (!this.__contentEl) return;
+		let e = this.__getObserverRoot(), t = ((e ? e.getBoundingClientRect() : null)?.top ?? 0) + Math.max(0, this.__getEffectiveOffsetTop()), n = this.__links.map((e) => {
+			let n = e.targetEl.getBoundingClientRect();
+			return {
+				id: e.id,
+				top: n.top - t
+			};
+		}).filter((e) => Number.isFinite(e.top));
+		if (n.length === 0) return;
+		let r = n.filter((e) => e.top >= 0).sort((e, t) => e.top - t.top)[0] ?? n.sort((e, t) => t.top - e.top)[0];
+		r?.id && this.__setActiveId(r.id, { updateHash: this.updateHash });
+	}
+	__applyActiveId(e, t) {
+		let n = this.__links.find((t) => t.id === e);
+		if (this.__navEl?.tagName === "SCB-NAV" ? this.__navEl.activeHref = `#${e}` : n && (this.__applyActiveToNav(n.navEl), this.__expandAncestors(n.navEl)), t.scrollToTarget) {
+			let t = n?.targetEl ?? null;
+			if (!t) {
+				let n = this.__contentEl ?? this;
+				try {
+					t = n.querySelector(`#${CSS.escape(e)}`);
+				} catch {
+					t = n.querySelector(`[id="${e}"]`);
+				}
+				!t && typeof document < "u" && (t = document.getElementById(e));
+			}
+			t && this.__scrollToTarget(t);
+		}
+		if (t.updateHash && this.__hashAllowUpdates && typeof history < "u") try {
+			history.replaceState(null, "", `#${encodeURIComponent(e)}`);
+		} catch {}
+		this.dispatchEvent(new CustomEvent("scb-scrollspy-active-changed", {
+			bubbles: !0,
+			composed: !0,
+			detail: { id: e }
+		})), this.dispatchEvent(new CustomEvent("scbscrollspyactivechanged", {
+			bubbles: !0,
+			composed: !0,
+			detail: { id: e }
+		}));
+	}
+	__applyExternalActiveId() {
+		let e = (this.activeId || "").trim();
+		e && (this.__links.length || this.__collectLinks(), this.__applyActiveId(e, {
+			updateHash: this.updateHash,
+			scrollToTarget: this.__slotsResolvedOnce
+		}));
+	}
+	__setActiveId(e, t) {
+		!e || e === this.activeId || (this.__syncingActiveId = !0, this.activeId = e, this.__applyActiveId(e, {
+			updateHash: t.updateHash,
+			scrollToTarget: !1
+		}));
+	}
+	__applyActiveToNav(e) {
+		let t = this.__navEl;
+		if (!t) return;
+		let n = Array.from(t.querySelectorAll("scb-menu-item[item-href^=\"#\"], scb-nav-item[href^=\"#\"], scb-nav-item[data-href^=\"#\"], a[href^=\"#\"], button[data-href^=\"#\"]"));
+		for (let t of n) {
+			let n = t === e;
+			if (t.tagName === "SCB-MENU-ITEM") {
+				let e = t;
+				typeof e.selected == "boolean" && (e.selected = n), n && t.dispatchEvent(new CustomEvent("scb-menu-select", {
+					bubbles: !0,
+					composed: !0,
+					detail: { item: t }
+				}));
+			} else t.tagName === "A" || t.tagName === "BUTTON" ? n ? t.setAttribute("aria-current", "location") : t.removeAttribute("aria-current") : t.tagName === "SCB-NAV-ITEM" && (n ? (t.setAttribute("aria-current", "location"), t.setAttribute("data-active", "true")) : (t.removeAttribute("aria-current"), t.removeAttribute("data-active")));
+		}
+	}
+	__expandAncestors(e) {
+		let t = e;
+		for (; t;) {
+			if (t.tagName === "SCB-MENU-ITEM") {
+				let e = t;
+				typeof e.expanded == "boolean" && (e.expanded = !0);
+			}
+			t = t.parentElement;
+		}
+	}
+	__scrollToTarget(e) {
+		let t = typeof window < "u" && window.matchMedia?.("(prefers-reduced-motion: reduce)")?.matches, n = this.__getScrollContainerEl();
+		if (n instanceof HTMLElement && n.scrollHeight > n.clientHeight + 1) {
+			let r = this.__getScrollTopInContainer(e, n) - this.__getEffectiveOffsetTop(), i = Math.max(0, n.scrollHeight - n.clientHeight), a = Math.min(i, Math.max(0, r));
+			if (t) {
+				n.scrollTop = a;
+				return;
+			}
+			this.__animateScroll({
+				get: () => n.scrollTop,
+				set: (e) => {
+					n.scrollTop = e;
+				},
+				max: i,
+				to: a
+			});
+			return;
+		}
+		if (!(e instanceof HTMLElement)) return;
+		let r = e.getBoundingClientRect(), i = (window.scrollY || window.pageYOffset || 0) + r.top - this.__getEffectiveOffsetTop(), a = document.documentElement, o = Math.max(0, a.scrollHeight - window.innerHeight), s = Math.min(o, Math.max(0, i));
+		if (t) {
+			window.scrollTo(0, s);
+			return;
+		}
+		this.__animateScroll({
+			get: () => window.scrollY || window.pageYOffset || 0,
+			set: (e) => window.scrollTo(0, e),
+			max: o,
+			to: s
+		});
+	}
+	__getScrollTopInContainer(e, t) {
+		let n = t.getBoundingClientRect(), r = e.getBoundingClientRect();
+		return t.scrollTop + (r.top - n.top);
+	}
+	__animateScroll(e) {
+		let t = e.get(), n = Math.min(e.max, Math.max(0, e.to));
+		if (!Number.isFinite(t) || !Number.isFinite(n)) return;
+		if (Math.abs(n - t) < 1) {
+			e.set(n);
+			return;
+		}
+		this.__cancelScrollAnimation(), this.__ensureMotionMeasureEl();
+		let r = ++this.__scrollAnimSeq, i = Math.abs(n - t), a = this.__getScrollDurationMs(i), o = this.__getScrollEasingFn(), s = performance.now(), c = (i) => {
+			if (r !== this.__scrollAnimSeq) return;
+			let l = a <= 0 ? 1 : Math.min(1, (i - s) / a), u = o(l);
+			e.set(t + (n - t) * u), l < 1 ? this.__scrollRafId = window.requestAnimationFrame(c) : this.__scrollRafId = null;
+		};
+		this.__scrollRafId = window.requestAnimationFrame(c);
+	}
+	__getScrollDurationMs(e) {
+		let t = this.__resolveTimeMs("var(--motion-duration-medium, 300ms)") ?? 300, n = this.__resolveTimeMs("var(--motion-duration-long, 500ms)") ?? 500, r = this.__resolveTimeMs("var(--motion-duration-extra-long, 700ms)") ?? 700, i = Math.min(1, Math.max(0, e / 1800)), a = t + (n - t) * i;
+		return Math.min(r, Math.max(t, a));
+	}
+	__getScrollEasingFn() {
+		let e = this.__resolveTimingFunction("var(--motion-easing-emphasized-decelerate, var(--motion-easing-emphasized, cubic-bezier(.69,.16,.2,.98)))") ?? "cubic-bezier(0.05, 0.7, 0.1, 1)";
+		return this.__parseEasingFunction(e) ?? ((e) => e);
+	}
+	__resolveTimeMs(e) {
+		let t = this.__motionMeasureEl;
+		if (!t) return null;
+		t.style.transitionDuration = e;
+		let n = getComputedStyle(t).transitionDuration.split(",")[0]?.trim() ?? "";
+		return this.__parseTimeToMs(n);
+	}
+	__resolveTimingFunction(e) {
+		let t = this.__motionMeasureEl;
+		return t ? (t.style.transitionTimingFunction = e, getComputedStyle(t).transitionTimingFunction.split(",")[0]?.trim() ?? null) : null;
+	}
+	__parseTimeToMs(e) {
+		let t = e.trim();
+		if (!t) return null;
+		let n = parseFloat(t);
+		return Number.isFinite(n) ? t.endsWith("ms") ? n : t.endsWith("s") ? n * 1e3 : null : null;
+	}
+	__parseEasingFunction(e) {
+		let t = e.trim();
+		if (!t) return null;
+		if (t === "linear") return (e) => e;
+		let n = t.match(/cubic-bezier\(([^)]+)\)/i);
+		if (!n) return null;
+		let r = n[1].split(",").map((e) => parseFloat(e.trim())).filter((e) => Number.isFinite(e));
+		if (r.length !== 4) return null;
+		let [i, a, o, s] = r;
+		return this.__cubicBezier(i, a, o, s);
+	}
+	__cubicBezier(e, t, n, r) {
+		let i = 3 * e, a = 3 * (n - e) - i, o = 1 - i - a, s = 3 * t, c = 3 * (r - t) - s, l = 1 - s - c, u = (e) => ((o * e + a) * e + i) * e, d = (e) => ((l * e + c) * e + s) * e, f = (e) => (3 * o * e + 2 * a) * e + i, p = (e) => {
+			let t = e;
+			for (let n = 0; n < 8; n++) {
+				let n = u(t) - e;
+				if (Math.abs(n) < 1e-6) return t;
+				let r = f(t);
+				if (Math.abs(r) < 1e-6) break;
+				t -= n / r;
+			}
+			let n = 0, r = 1;
+			for (t = e; n < r;) {
+				let i = u(t) - e;
+				if (Math.abs(i) < 1e-6) return t;
+				i > 0 ? r = t : n = t, t = (r + n) / 2;
+			}
+			return t;
+		};
+		return (e) => d(p(Math.min(1, Math.max(0, e))));
+	}
+	__detachHashScrollRoot() {
+		if (!this.__hashScrollRoot) return;
+		let e = this.__hashScrollRoot;
+		try {
+			e instanceof Window, e.removeEventListener("scroll", this.__onHashScrollBound);
+		} catch {}
+		this.__hashScrollRoot = null;
+	}
+	__cancelHashBaseline() {
+		this.__hashBaselineRafId !== null && (window.cancelAnimationFrame(this.__hashBaselineRafId), this.__hashBaselineRafId = null), this.__hashBaselineReady = !1;
+	}
+	__attachHashScrollRoot() {
+		this.__detachHashScrollRoot();
+		let e = this.__getObserverRoot() ?? window;
+		this.__hashScrollRoot = e;
+		try {
+			e.addEventListener("scroll", this.__onHashScrollBound, { passive: !0 });
+		} catch {}
+		this.__hashAllowUpdates = !1, this.__scheduleHashBaseline();
+	}
+	__scheduleHashBaseline() {
+		this.__cancelHashBaseline();
+		let e = () => {
+			this.__hashBaselinePos = this.__getHashScrollPos(), this.__hashBaselineReady = !0, this.__hashBaselineRafId = null;
+		};
+		this.__hashBaselineRafId = window.requestAnimationFrame(() => {
+			this.__hashBaselineRafId = window.requestAnimationFrame(e);
+		});
+	}
+	__getHashScrollPos() {
+		let e = this.__hashScrollRoot;
+		if (e instanceof Window) return e.scrollY || e.pageYOffset || 0;
+		if (e && "scrollTop" in e) {
+			let t = e;
+			return typeof t.scrollTop == "number" ? t.scrollTop : 0;
+		}
+		return 0;
+	}
+	__onHashScroll() {
+		if (!this.updateHash || this.__hashSuspend || this.__hashAllowUpdates || !this.__hashBaselineReady) return;
+		let e = this.__getHashScrollPos();
+		Math.abs(e - this.__hashBaselinePos) > 2 && (this.__hashAllowUpdates = !0);
+	}
+	__jumpToTarget(e) {
+		let t = this.__getScrollContainerEl();
+		if (t instanceof HTMLElement && t.scrollHeight > t.clientHeight + 1) {
+			let n = this.__getScrollTopInContainer(e, t) - this.__getEffectiveOffsetTop(), r = Math.max(0, t.scrollHeight - t.clientHeight);
+			t.scrollTop = Math.min(r, Math.max(0, n));
+			return;
+		}
+		if (!(e instanceof HTMLElement)) return;
+		let n = e.getBoundingClientRect(), r = (window.scrollY || window.pageYOffset || 0) + n.top - this.__getEffectiveOffsetTop(), i = document.documentElement, a = Math.max(0, i.scrollHeight - window.innerHeight), o = Math.min(a, Math.max(0, r));
+		window.scrollTo(0, o);
+	}
+	__applyInitialHashIfAny() {
+		if (this.__hashInitialApplied) return;
+		let e = typeof window < "u" ? window.location.hash : "";
+		if (!e || e.length < 2) return;
+		let t = "";
+		try {
+			t = decodeURIComponent(e.slice(1));
+		} catch {
+			t = e.slice(1);
+		}
+		if (!t) return;
+		let n = this.__links.find((e) => e.id === t);
+		if (n?.targetEl) {
+			this.__hashInitialApplied = !0, this.__hashSuspend = !0;
+			try {
+				this.__jumpToTarget(n.targetEl), this.__setActiveId(t, { updateHash: !1 });
+			} finally {
+				window.requestAnimationFrame(() => {
+					window.requestAnimationFrame(() => {
+						this.__hashSuspend = !1;
+					});
+				});
+			}
+		}
+	}
+	__onNavClick(e) {
+		let t = this.__navEl, n = this.__contentEl;
+		if (!t || !n) return;
+		let r = e.composedPath().find((e) => e instanceof Element && (e.tagName === "SCB-MENU-ITEM" || e.tagName === "SCB-NAV-ITEM" || e.tagName === "A" || e.tagName === "BUTTON"));
+		if (!r) return;
+		let i = this.__getHref(r);
+		if (!i || !i.startsWith("#")) return;
+		let a = i.slice(1);
+		if (!a) return;
+		let o = n.querySelector(`#${CSS.escape(a)}`);
+		o && (e.preventDefault(), this.__hashAllowUpdates = !0, this.__scrollToTarget(o), this.__setActiveId(a, { updateHash: this.updateHash }));
+	}
+	render() {
+		if (this.layout === "sidebar") return r`
+        <div class="sidebar-layout" style=${[
+			`--_scb-scrollspy-sidebar-nav-width: ${this.sidebarNavWidth}`,
+			`--_scb-scrollspy-sidebar-height: ${this.sidebarHeight}`,
+			`--_scb-scrollspy-sidebar-nav-top: ${this.sidebarNavTop}`,
+			`--_scb-scrollspy-content-padding: ${this.contentPadding}`
+		].join("; ")}>
+          <div class="sidebar-nav">
+            <slot name="nav" @slotchange=${this.__onSlotChange}></slot>
+          </div>
+          <div class="sidebar-content">
+            <slot name="content" @slotchange=${this.__onSlotChange}></slot>
+          </div>
+        </div>
+      `;
+		if (this.layout === "stack") {
+			let e = [`--_scb-scrollspy-content-padding: ${this.contentPadding}`], t = (this.stackHeight || "").trim();
+			return t && e.unshift(`--_scb-scrollspy-stack-height: ${t}`), r`
+        <div class="stack-shell" style=${e.join("; ")}>
+          <slot name="nav" @slotchange=${this.__onSlotChange}></slot>
+          <div class="stack-content">
+            <slot name="content" @slotchange=${this.__onSlotChange}></slot>
+          </div>
+        </div>
+      `;
+		}
+		return r`
+      <slot name="nav" @slotchange=${this.__onSlotChange}></slot>
+      <slot name="content" @slotchange=${this.__onSlotChange}></slot>
+    `;
+	}
+};
+a = e([i("scb-scrollspy")], a);
+//#endregion
+export { a as ScbScrollspy };