highsoft-ui 1.0.163 → 1.0.165

package/CLAUDE.md

@@ -510,6 +510,7 @@ Browser-window chrome around embedded content — a real `<iframe>` via `src`, o
 - **`explainer`** / **`explainerHref`** (mini), **`actions`** — external-link soft buttons
 - **`dots`:** `color` | `muted` — defaults per variant (colored traffic lights on `full`, muted on `mini`/`plain`); override to force either
 - **`aspectRatio`** (default `'3 / 2'`, `'auto'` = children flow naturally), **`width`**, **`height`** (fixed height overrides `aspectRatio`), **`radius`** (default `8`)
+- **`background`:** the surface behind the embed — `0` | `50` | `100` (`--HS-surface-ui-background-*`), `'common'` (page background), `'transparent'` (default: the frame shell shows through, background-50 or background-0 on `plain`), or any raw CSS background. It's painted on the body, under the iframe/children, so it covers an `src` iframe while it loads, the letterbox left by `aspectRatio`/`height`, and a transparent embed — in both modes. Match it to the embed's own surface (Highcharts samples are white: `background={0}`) so loading and letterboxed states are seamless.
 - **Bar geometry:** the bar is 40px (`plain` 34px) — 8px padding around 24px controls (size-100 `Button`s and the URL pill). Dots are 11px (`plain` 10px).
 - **Theming:** the shell uses `--HS-*` tokens, so dark mode is automatic. The colored dots are the one sanctioned primitive use (`--primitives-danger/attention/success-400`) — decorative window realism with no semantic token, identical in both modes like macOS's own. **The site theme propagates into cross-origin embeds:** `[data-theme]` on the root maps to `color-scheme` on the iframe element, which is what `prefers-color-scheme` resolves from inside a frame — an embed that supports dark mode flips with the site, no JS involved. The default (no `data-theme`) is `light`, matching the tokens' own light-by-default behavior — the embed follows the chrome around it, never the OS directly. `ThemeLoader` resolves even the "system" preference to a concrete `data-theme`, so themed pages always drive it explicitly; nested `[data-theme='light']` sections inside a dark page are honored like the tokens honor them.
 
@@ -517,6 +518,7 @@ Browser-window chrome around embedded content — a real `<iframe>` via `src`, o
 - The window dots are decorative (`aria-hidden`); the embedded `<iframe>` carries `title` as its accessible name — describe what it shows.
 - The URL text, explainer, and action buttons are real links/`Button`s: keyboard reachable, brand `:focus-visible` ring, `target="_blank"` with `rel="noreferrer"`. The Fullscreen button's label switches to "Exit fullscreen" while active.
 - The frame itself is a non-interactive `<div>` — nothing in the tab order beyond its controls; no authored motion, so there's nothing to gate on `prefers-reduced-motion` beyond the shared Button tokens.
+- `background` is a static surface with no state, so it changes nothing for keyboard or AT. The named values are semantic tokens and remap in dark mode; a raw CSS value does not, so prefer the tokens unless the embed is a fixed colour in both themes.
 
 ### Layout
 ```tsx
@@ -755,6 +757,42 @@ A page that has a site `<Header>` already spends the top of a phone screen on th
 - The grab handle is `aria-hidden` — it's the touch affordance, and the labelled close button is the control. Under `prefers-reduced-motion: reduce` the sheet arrives and leaves instantly; dragging it still tracks the finger, since that's direct manipulation rather than authored motion.
 - Widening past 760px retires the sheet without moving focus — a resize isn't a dismissal.
 
+### PrevNextNav
+Previous / next footer navigation — two link cards in a three-slot grid (`1fr auto 1fr`) with an optional centered back-to-overview button. For sequential content: docs articles, changelog versions, API option pages.
+
+```tsx
+import NextLink from 'next/link'
+
+<PrevNextNav
+  as={NextLink}
+  aria-label="Article navigation"
+  prev={{ href: '/docs/install', title: 'Installation' }}
+  next={{ href: '/docs/first-chart', title: 'Your first chart' }}
+  back={{ href: '/docs', label: 'All Highcharts Core articles' }}
+/>
+
+// At an edge, omit the missing side — a disabled "—" card keeps the grid balanced
+<PrevNextNav
+  prev={undefined}
+  next={{ href: '/core/v1.1.0/', title: 'v1.1.0' }}
+  back={{ href: '/core/', label: 'All Highcharts Core versions' }}
+  aria-label="Version navigation"
+/>
+```
+
+- **`prev` / `next`:** `{ href?, title, linkProps? }` — the link cards (chevron + small "Previous"/"Next" overline + title, ellipsized). Omit one at an edge: it renders as a bordered, non-interactive "—" card at 0.4 opacity so the grid keeps its shape. Omit **both** and the component renders nothing.
+- **`back`:** `{ href?, label, linkProps? }` — the centered overview button (e.g. "All {product} versions"). Optional; without it the cards keep their outer columns.
+- **`as`:** link component for all three slots — `'a'` default, `as={NextLink}` for SPA navigation (like NavItem). `linkProps` forwards per-link extras (`target`, `onClick`, router `to`, …).
+- **`prevLabel` / `nextLabel`:** the overlines, default `'Previous'` / `'Next'` (customizable for localization).
+- **≤850px:** the cards pair up side by side and the back button spans underneath; titles drop to size-75.
+- Hover stays neutral: a `--HS-surface-ui-background-0` wash, card text stepping up to `--HS-text-primary-default`, and the border strengthening to `--HS-surface-ui-border-300` — no brand tint (the brand color is reserved for the focus ring). The background wash is what keeps hover legible in dark mode, where border-300 remaps to the same value as border-200 and the border step alone nearly disappears. Everything uses `--HS-*` tokens, so dark mode is automatic.
+
+**Accessibility:**
+- The wrapper is a real `<nav>` — pass `aria-label` to name it ("Article navigation", "Version navigation"); it defaults to `'Previous and next'`.
+- The cards and back button are real links: keyboard reachable, with the shared `a11y-focus-ring` mixin on `:focus-visible` — the two-tone ring (background-colored gap + brand outer) animating on `--animations-bounce-default`, same as InputSolo/Checkbox/RadioBox. Hover colors transition on `--animations-fade-fast`.
+- The disabled edge card is a non-interactive `aria-disabled` span — not focusable, so keyboard users skip straight to the real links, while AT can still read "Previous —" as "there is no previous page".
+- DOM order is prev → back → next, matching the desktop visual order, so focus moves left-to-right across the row.
+
 ## Hooks
 
 ### useSuccessFlash

package/dist/BrowserFrame-BWKH-jYq.js

@@ -0,0 +1,147 @@
+import { t as e } from "./clsx-BWCAbrjV.js";
+import { G as t, L as n, R as r, k as i } from "./esm-u0DqOC56.js";
+import { t as a } from "./Button-Ckhn8DSF.js";
+import { forwardRef as o, useCallback as s, useEffect as c, useRef as l, useState as u } from "react";
+import { jsx as d, jsxs as f } from "react/jsx-runtime";
+var p = {
+	actions: "VfGqmW_actions",
+	body: "VfGqmW_body",
+	bodyAspect: "VfGqmW_bodyAspect",
+	bodyFill: "VfGqmW_bodyFill",
+	content: "VfGqmW_content",
+	dot: "VfGqmW_dot",
+	dots: "VfGqmW_dots",
+	dotsColor: "VfGqmW_dotsColor",
+	explainer: "VfGqmW_explainer",
+	frame: "VfGqmW_frame",
+	iframe: "VfGqmW_iframe",
+	mini: "VfGqmW_mini",
+	plain: "VfGqmW_plain",
+	topBar: "VfGqmW_topBar",
+	url: "VfGqmW_url",
+	urlBar: "VfGqmW_urlBar"
+};
+//#endregion
+//#region lib/components/BrowserFrame/index.tsx
+function m(e) {
+	switch (e) {
+		case "transparent": return;
+		case "common": return "var(--HS-common-background)";
+		case 0:
+		case 50:
+		case 100: return `var(--HS-surface-ui-background-${e})`;
+		default: return e;
+	}
+}
+var h = o(({ variant: o = "full", src: h, displayUrl: g, href: _, action: v = "view", actionLabel: y, explainer: b, explainerHref: x, actions: S, dots: C, aspectRatio: w = "3 / 2", width: T, height: E, radius: D = 8, background: O = "transparent", title: k, loading: A = "lazy", sandbox: j, allow: M, allowFullScreen: N = !0, referrerPolicy: P, children: F, className: I, style: L, ...R }, z) => {
+	let B = l(null), [V, H] = u(!1), U = s((e) => {
+		B.current = e, typeof z == "function" ? z(e) : z && (z.current = e);
+	}, [z]);
+	c(() => {
+		let e = () => H(document.fullscreenElement === B.current);
+		return document.addEventListener("fullscreenchange", e), () => document.removeEventListener("fullscreenchange", e);
+	}, []), h && !k && console.warn("BrowserFrame: `title` is required with `src` — it names the iframe for assistive tech. Falling back to \"Embedded content\".");
+	let W = g ?? h, G = _ ?? W, K = C ?? (o === "full" ? "color" : "muted"), q = E === void 0 && w !== "auto", J = m(O), Y = s(() => {
+		let e = B.current;
+		if (!e) return;
+		let t = () => {
+			G && window.open(G, "_blank", "noopener,noreferrer");
+		};
+		document.fullscreenElement === e ? document.exitFullscreen().catch(() => {}) : e.requestFullscreen ? e.requestFullscreen().catch(t) : t();
+	}, [G]), X = o === "full" && v !== "none" ? v === "fullscreen" ? /* @__PURE__ */ d(a, {
+		variant: "soft",
+		size: 100,
+		iconRight: d(V ? i : t, {}),
+		onClick: Y,
+		children: y ?? (V ? "Exit fullscreen" : "Fullscreen")
+	}) : G ? /* @__PURE__ */ d(a, {
+		variant: "soft",
+		size: 100,
+		iconRight: /* @__PURE__ */ d(r, {}),
+		href: G,
+		target: "_blank",
+		rel: "noreferrer",
+		children: y ?? "View"
+	}) : null : null, Z = o === "mini" && b ? x ? /* @__PURE__ */ d("a", {
+		className: p.explainer,
+		href: x,
+		target: "_blank",
+		rel: "noreferrer",
+		children: b
+	}) : /* @__PURE__ */ d("span", {
+		className: p.explainer,
+		children: b
+	}) : null;
+	return /* @__PURE__ */ f("div", {
+		ref: U,
+		className: e(p.frame, o === "plain" && p.plain, o === "mini" && p.mini, I),
+		style: {
+			"--hsbf-radius": `${D}px`,
+			"--hsbf-aspect": q ? w : void 0,
+			"--hsbf-body-bg": J,
+			width: T,
+			height: E,
+			...L
+		},
+		...R,
+		children: [/* @__PURE__ */ f("div", {
+			className: p.topBar,
+			children: [
+				/* @__PURE__ */ f("span", {
+					className: e(p.dots, K === "color" && p.dotsColor),
+					"aria-hidden": "true",
+					children: [
+						/* @__PURE__ */ d("span", { className: p.dot }),
+						/* @__PURE__ */ d("span", { className: p.dot }),
+						/* @__PURE__ */ d("span", { className: p.dot })
+					]
+				}),
+				o === "full" && W && /* @__PURE__ */ d("span", {
+					className: p.urlBar,
+					children: G ? /* @__PURE__ */ d("a", {
+						className: p.url,
+						href: G,
+						target: "_blank",
+						rel: "noreferrer",
+						children: W
+					}) : /* @__PURE__ */ d("span", {
+						className: p.url,
+						children: W
+					})
+				}),
+				X,
+				Z,
+				S && S.length > 0 && /* @__PURE__ */ d("span", {
+					className: p.actions,
+					children: S.map((e) => /* @__PURE__ */ d(a, {
+						variant: "soft",
+						size: 100,
+						iconRight: /* @__PURE__ */ d(n, {}),
+						href: e.href,
+						target: "_blank",
+						rel: "noreferrer",
+						children: e.label
+					}, `${e.label}-${e.href}`))
+				})
+			]
+		}), /* @__PURE__ */ f("div", {
+			className: e(p.body, q && p.bodyAspect, (q || E !== void 0) && p.bodyFill),
+			children: [h && !F && /* @__PURE__ */ d("iframe", {
+				className: p.iframe,
+				src: h,
+				title: k ?? "Embedded content",
+				loading: A,
+				sandbox: j,
+				allow: M,
+				allowFullScreen: N,
+				referrerPolicy: P
+			}), F && /* @__PURE__ */ d("div", {
+				className: p.content,
+				children: F
+			})]
+		})]
+	});
+});
+h.displayName = "BrowserFrame";
+//#endregion
+export { h as t };

package/dist/{Button-BCbWIPg1.js → Button-Ckhn8DSF.js}

@@ -1,5 +1,5 @@
 import { t as e } from "./clsx-BWCAbrjV.js";
-import { F as t } from "./esm-CUgR2iUX.js";
+import { F as t } from "./esm-u0DqOC56.js";
 import { forwardRef as n } from "react";
 import { jsx as r, jsxs as i } from "react/jsx-runtime";
 var a = {

package/dist/{ButtonGroup-DGEDf4ic.js → ButtonGroup-DJ9-E38n.js}

@@ -1,5 +1,5 @@
 import { t as e } from "./clsx-BWCAbrjV.js";
-import { t } from "./Button-BCbWIPg1.js";
+import { t } from "./Button-Ckhn8DSF.js";
 import { useEffect as n, useState as r } from "react";
 import { jsx as i } from "react/jsx-runtime";
 var a = {

package/dist/{Checkbox-CO0SRaAZ.js → Checkbox-D1mlWTmw.js}

@@ -1,5 +1,5 @@
 import { t as e } from "./clsx-BWCAbrjV.js";
-import { P as t } from "./esm-CUgR2iUX.js";
+import { P as t } from "./esm-u0DqOC56.js";
 import { createContext as n, useCallback as r, useContext as i, useEffect as a, useId as o, useRef as s, useState as c } from "react";
 import { jsx as l, jsxs as u } from "react/jsx-runtime";
 var d = {

package/dist/{CodeBlock-Ugik4xMM.js → CodeBlock-C2W0T4RT.js}

@@ -1,7 +1,7 @@
 import { r as e, s as t } from "./utils-K9S_6_Eq.js";
 import { t as n } from "./clsx-BWCAbrjV.js";
-import { et as r, q as i } from "./esm-CUgR2iUX.js";
-import { t as a } from "./Button-BCbWIPg1.js";
+import { q as r, tt as i } from "./esm-u0DqOC56.js";
+import { t as a } from "./Button-Ckhn8DSF.js";
 import { t as o } from "./FrameworkIcon-B8GmMx0r.js";
 import { Fragment as s, forwardRef as c, useCallback as l, useEffect as u, useMemo as d, useState as f } from "react";
 import { jsx as p, jsxs as m } from "react/jsx-runtime";
@@ -22,8 +22,8 @@ var h = {
 }, g = null;
 function _() {
 	return g ||= Promise.all([
-		import("./prism-light-Czk1yGD_.js"),
-		import("./create-element-DxkdwAGs.js").then((e) => e.n),
+		import("./prism-light-CAkriFcS.js"),
+		import("./create-element-BNkLOXrc.js").then((e) => e.n),
 		import("./jsx-B57trbk8.js"),
 		import("./tsx-CJFgwLf7.js"),
 		import("./json-Bfzk2Msc.js"),
@@ -195,7 +195,7 @@ var C = {}, w = ({ children: e }) => /* @__PURE__ */ p("pre", {
 			}), /* @__PURE__ */ p(a, {
 				variant: B ? "success" : "transparent",
 				size: 100,
-				iconRight: p(B ? r : i, {}),
+				iconRight: p(B ? i : r, {}),
 				onClick: U,
 				"aria-label": B ? "Copied" : A,
 				className: h.copyBtn,

package/dist/{CookiePolicyModal-TdrVbP_E.js → CookiePolicyModal-CPNTKMHc.js}

@@ -1,5 +1,5 @@
-import { t as e } from "./esm-CUgR2iUX.js";
-import { t } from "./Button-BCbWIPg1.js";
+import { t as e } from "./esm-u0DqOC56.js";
+import { t } from "./Button-Ckhn8DSF.js";
 import { a as n, i as r, n as i, o as a, r as o, s, t as c } from "./dist-f0z6DapB.js";
 import { useEffect as l, useRef as u, useState as d } from "react";
 import { jsx as f, jsxs as p } from "react/jsx-runtime";

package/dist/{CopyCode-_sKjpGqB.js → CopyCode-BOehQAZN.js}

@@ -1,7 +1,7 @@
 import { r as e, s as t } from "./utils-K9S_6_Eq.js";
 import { t as n } from "./clsx-BWCAbrjV.js";
-import { et as r, q as i } from "./esm-CUgR2iUX.js";
-import { t as a } from "./Button-BCbWIPg1.js";
+import { q as r, tt as i } from "./esm-u0DqOC56.js";
+import { t as a } from "./Button-Ckhn8DSF.js";
 import { forwardRef as o, useCallback as s } from "react";
 import { jsx as c, jsxs as l } from "react/jsx-runtime";
 var u = {
@@ -26,7 +26,7 @@ var u = {
 		}), /* @__PURE__ */ c(a, {
 			variant: x ? "success" : "soft",
 			size: 200,
-			iconLeft: c(x ? r : i, {}),
+			iconLeft: c(x ? i : r, {}),
 			onClick: (e) => {
 				e.stopPropagation(), S();
 			},

package/dist/{Dropdown-LiG-JAoo.js → Dropdown-Cjl8RQ5Y.js}

@@ -1,5 +1,5 @@
 import { t as e } from "./clsx-BWCAbrjV.js";
-import { et as t } from "./esm-CUgR2iUX.js";
+import { tt as t } from "./esm-u0DqOC56.js";
 import { t as n } from "./Icon-DJTgdvsG.js";
 import { _ as r, a as i, c as a, d as o, g as s, h as c, i as l, l as u, m as d, n as f, o as p, p as m, r as h, t as g, u as _, v, y } from "./es2015-DWa0ZZ7A.js";
 import { a as b, i as x, n as S, r as C, t as w } from "./dist-CE9LFbij.js";

package/dist/{Footer-DzIGLnEz.js → Footer-DLMNyBXC.js}

@@ -1,14 +1,14 @@
 import { r as e } from "./utils-K9S_6_Eq.js";
-import { J as t, et as n } from "./esm-CUgR2iUX.js";
-import { t as r } from "./Button-BCbWIPg1.js";
+import { J as t, tt as n } from "./esm-u0DqOC56.js";
+import { t as r } from "./Button-Ckhn8DSF.js";
 import { t as i } from "./Container-BDssaLig.js";
 import { t as a } from "./DiscordInvite-CLYxexdH.js";
 import { t as o } from "./Logo-Bz0G2G-k.js";
-import { t as s } from "./NewsletterSignup-BrmQ7pXZ.js";
-import { t as c } from "./FooterBottom-CRe2Mvjd.js";
-import { t as l } from "./FooterHelp-CTSvficW.js";
-import { t as u } from "./FooterLinks-BoDdQUWb.js";
-import { t as d } from "./YoutubeModal-BOnH866s.js";
+import { t as s } from "./NewsletterSignup-g8wPQ7NZ.js";
+import { t as c } from "./FooterBottom-ZK9F7wLx.js";
+import { t as l } from "./FooterHelp-Csfq-quf.js";
+import { t as u } from "./FooterLinks-CGoBeReu.js";
+import { t as d } from "./YoutubeModal-D_pHHwxa.js";
 import { jsx as f, jsxs as p } from "react/jsx-runtime";
 var m = {
 	discordCard: "_4W4F3q_discordCard",

package/dist/{FooterBottom-CRe2Mvjd.js → FooterBottom-ZK9F7wLx.js}

@@ -1,7 +1,7 @@
 import { a as e, t } from "./utils-K9S_6_Eq.js";
 import { a as n, c as r, i, n as a, o, r as s, s as c, t as l } from "./fa-B95RwBpz.js";
 import { t as u } from "./Typography-AvvBRu-u.js";
-import { t as d } from "./CookiePolicyModal-TdrVbP_E.js";
+import { t as d } from "./CookiePolicyModal-CPNTKMHc.js";
 import { Fragment as f, jsx as p, jsxs as m } from "react/jsx-runtime";
 //#region node_modules/react-icons/fa6/index.mjs
 function h(e) {

package/dist/{FooterHelp-CTSvficW.js → FooterHelp-Csfq-quf.js}

@@ -1,5 +1,5 @@
 import { a as e, t } from "./utils-K9S_6_Eq.js";
-import { d as n, g as r } from "./esm-CUgR2iUX.js";
+import { d as n, g as r } from "./esm-u0DqOC56.js";
 import { t as i } from "./Icon-DJTgdvsG.js";
 import { o as a, r as o } from "./fa-B95RwBpz.js";
 import { t as s } from "./Typography-AvvBRu-u.js";

package/dist/{FooterLinks-BoDdQUWb.js → FooterLinks-CGoBeReu.js}

@@ -1,8 +1,8 @@
 import { t as e } from "./clsx-BWCAbrjV.js";
-import { I as t } from "./esm-CUgR2iUX.js";
+import { I as t } from "./esm-u0DqOC56.js";
 import { t as n } from "./Icon-DJTgdvsG.js";
 import { t as r } from "./Typography-AvvBRu-u.js";
-import { t as i } from "./Label-k6e4Rqb-.js";
+import { t as i } from "./Label-KDdBAgyD.js";
 import a from "./components/icons/MadeInNorway.js";
 import { jsx as o, jsxs as s } from "react/jsx-runtime";
 var c = {

package/dist/{Header-CTO6Y6oH.js → Header-Pe6siDNx.js}

@@ -1,13 +1,13 @@
 import { a as e, d as t, i as n, o as r, u as i } from "./utils-K9S_6_Eq.js";
 import { t as a } from "./clsx-BWCAbrjV.js";
-import { A as o, V as s, b as c, f as l, j as u, ot as d, p as f, rt as p, s as m, t as h, tt as g } from "./esm-CUgR2iUX.js";
-import { t as _ } from "./Button-BCbWIPg1.js";
+import { A as o, V as s, b as c, f as l, it as u, j as d, nt as f, p, s as m, st as h, t as g } from "./esm-u0DqOC56.js";
+import { t as _ } from "./Button-Ckhn8DSF.js";
 import { t as v } from "./Container-BDssaLig.js";
 import { t as y } from "./Logo-Bz0G2G-k.js";
-import { t as b } from "./PrefPanel-CHkc6r6b.js";
-import { t as x } from "./Search-D29JM1a_.js";
-import { t as S } from "./Label-k6e4Rqb-.js";
-import { t as C } from "./Notification-BFLAktZo.js";
+import { t as b } from "./PrefPanel-Cf-xZ261.js";
+import { t as x } from "./Search-Cy79c2sN.js";
+import { t as S } from "./Label-KDdBAgyD.js";
+import { t as C } from "./Notification-DQostuW6.js";
 import { useEffect as w, useRef as T, useState as E } from "react";
 import { Fragment as D, jsx as O, jsxs as k } from "react/jsx-runtime";
 var A = {
@@ -75,7 +75,7 @@ var A = {
 	{
 		title: "Products",
 		url: "https://www.highcharts.com/products/",
-		icon: /* @__PURE__ */ O(g, {})
+		icon: /* @__PURE__ */ O(f, {})
 	},
 	{
 		title: "Demos",
@@ -95,12 +95,12 @@ var A = {
 	{
 		title: "Pricing",
 		url: "https://shop.highcharts.com/",
-		icon: /* @__PURE__ */ O(p, {})
+		icon: /* @__PURE__ */ O(u, {})
 	},
 	{
 		title: "Blog",
 		url: "https://www.highcharts.com/blog/home/",
-		icon: /* @__PURE__ */ O(d, {})
+		icon: /* @__PURE__ */ O(h, {})
 	}
 ];
 function B(e, t) {
@@ -193,17 +193,17 @@ function Y() {
 		e && R(M, e);
 	}, [e]), null;
 }
-function X({ subItems: t, children: r, notifications: o = J, link: s = "a", host: c = "https://www.highcharts.com", pathname: d, cssVariable: p, position: g = "sticky" }) {
+function X({ subItems: t, children: r, notifications: o = J, link: s = "a", host: c = "https://www.highcharts.com", pathname: u, cssVariable: f, position: h = "sticky" }) {
 	let S = e("(max-width: 374px)"), w = e("(max-width: 849px)"), M = e("(max-width: 1300px)"), N = G(t), P = T(null), [F, L] = E(!1), [V, H] = E([]);
 	n(() => {
 		let e = P.current;
 		if (!e) return;
 		let n = t?.length ? N ? U : W : 0, r = 82 + V.length * 48 + n, i = -(82 + V.length * 48);
-		if (g === "static") return e.style.transform = "", p && document.documentElement.style.setProperty("--header-bottom", `${r}px`), () => {
-			e.style.transform = "", p && document.documentElement.style.removeProperty("--header-bottom");
+		if (h === "static") return e.style.transform = "", f && document.documentElement.style.setProperty("--header-bottom", `${r}px`), () => {
+			e.style.transform = "", f && document.documentElement.style.removeProperty("--header-bottom");
 		};
 		let a = window.scrollY, o = 0, s = null, c = null, l = () => {
-			c = null, !(!e || s === o) && (e.style.transform = `translate3d(0, ${o}px, 0)`, p && document.documentElement.style.setProperty("--header-bottom", `${r + o}px`), s = o);
+			c = null, !(!e || s === o) && (e.style.transform = `translate3d(0, ${o}px, 0)`, f && document.documentElement.style.setProperty("--header-bottom", `${r + o}px`), s = o);
 		};
 		l();
 		let u = () => {
@@ -211,13 +211,13 @@ function X({ subItems: t, children: r, notifications: o = J, link: s = "a", host
 			a = e, o = Math.min(0, Math.max(i, o - t)), c === null && (c = window.requestAnimationFrame(l));
 		};
 		return window.addEventListener("scroll", u, { passive: !0 }), () => {
-			window.removeEventListener("scroll", u), c !== null && cancelAnimationFrame(c), e.style.transform = "", p && document.documentElement.style.removeProperty("--header-bottom");
+			window.removeEventListener("scroll", u), c !== null && cancelAnimationFrame(c), e.style.transform = "", f && document.documentElement.style.removeProperty("--header-bottom");
 		};
 	}, [
-		p,
+		f,
 		N,
 		V.length,
-		g,
+		h,
 		t?.length
 	]), n(() => {
 		if (!o.length) return;
@@ -299,7 +299,7 @@ function X({ subItems: t, children: r, notifications: o = J, link: s = "a", host
 										as: s,
 										href: B("https://shop.highcharts.com/", c),
 										"aria-label": "Buy Now",
-										children: [/* @__PURE__ */ O(f, {}), "Buy Now"]
+										children: [/* @__PURE__ */ O(p, {}), "Buy Now"]
 									}) }),
 									/* @__PURE__ */ O("li", { children: /* @__PURE__ */ k(_, {
 										className: A.cta,
@@ -312,7 +312,7 @@ function X({ subItems: t, children: r, notifications: o = J, link: s = "a", host
 										variant: F ? "soft" : "transparent",
 										className: A.menu,
 										onClick: X,
-										children: [F ? "Close" : "Menu", O(F ? h : u, {})]
+										children: [F ? "Close" : "Menu", O(F ? g : d, {})]
 									}) })
 								]
 							})
@@ -323,7 +323,7 @@ function X({ subItems: t, children: r, notifications: o = J, link: s = "a", host
 					items: t,
 					link: s,
 					host: c,
-					pathname: d
+					pathname: u
 				}),
 				r
 			]
@@ -363,7 +363,7 @@ function X({ subItems: t, children: r, notifications: o = J, link: s = "a", host
 						fullWidth: !0,
 						as: s,
 						href: B("https://shop.highcharts.com/", c),
-						children: [/* @__PURE__ */ O(f, {}), "Buy Now"]
+						children: [/* @__PURE__ */ O(p, {}), "Buy Now"]
 					}) }), /* @__PURE__ */ O("li", { children: /* @__PURE__ */ k(_, {
 						variant: "success",
 						fullWidth: !0,

package/dist/{InputGrouped-y0JyshpR.js → InputGrouped-BLtnqxWc.js}

@@ -1,6 +1,6 @@
 import { t as e } from "./clsx-BWCAbrjV.js";
-import { Q as t, U as n, W as r } from "./esm-CUgR2iUX.js";
-import { t as i } from "./Button-BCbWIPg1.js";
+import { $ as t, U as n, W as r } from "./esm-u0DqOC56.js";
+import { t as i } from "./Button-Ckhn8DSF.js";
 import { forwardRef as a, useCallback as o, useEffect as s, useRef as c, useState as l } from "react";
 import { jsx as u, jsxs as d } from "react/jsx-runtime";
 var f = {

package/dist/{Label-k6e4Rqb-.js → Label-KDdBAgyD.js}

@@ -1,5 +1,5 @@
 import { t as e } from "./clsx-BWCAbrjV.js";
-import { u as t } from "./esm-CUgR2iUX.js";
+import { u as t } from "./esm-u0DqOC56.js";
 import { jsx as n, jsxs as r } from "react/jsx-runtime";
 var i = {
 	attention: "UwHMOW_attention",

package/dist/{LogoCarousel-pRYdmphl.js → LogoCarousel-CJShpLJo.js}

@@ -1,7 +1,7 @@
 import { a as e } from "./utils-K9S_6_Eq.js";
 import { t } from "./clsx-BWCAbrjV.js";
-import { T as n, x as r } from "./esm-CUgR2iUX.js";
-import { t as i } from "./Button-BCbWIPg1.js";
+import { T as n, x as r } from "./esm-u0DqOC56.js";
+import { t as i } from "./Button-Ckhn8DSF.js";
 import { n as a, t as o } from "./ClientLogo-Dj7K48YL.js";
 import { useEffect as s, useRef as c, useState as l } from "react";
 import { Fragment as u, jsx as d, jsxs as f } from "react/jsx-runtime";

package/dist/{NewsletterSignup-BrmQ7pXZ.js → NewsletterSignup-g8wPQ7NZ.js}

@@ -1,7 +1,7 @@
 import { l as e } from "./utils-K9S_6_Eq.js";
 import { t } from "./clsx-BWCAbrjV.js";
-import { $ as n, B as r, ot as i } from "./esm-CUgR2iUX.js";
-import { t as a } from "./Button-BCbWIPg1.js";
+import { B as n, et as r, st as i } from "./esm-u0DqOC56.js";
+import { t as a } from "./Button-Ckhn8DSF.js";
 import { t as o } from "./Icon-DJTgdvsG.js";
 import { t as s } from "./Link-CYR92_U0.js";
 import { t as c } from "./InputSolo-DUdKtZjX.js";
@@ -78,7 +78,7 @@ function g({ link: g = "a", privacyUrl: _ = "https://www.highcharts.com/privacy/
 			L ? /* @__PURE__ */ m("div", {
 				className: h.content,
 				children: [/* @__PURE__ */ p(o, {
-					name: r,
+					name: n,
 					size: 16
 				}), E ? "Check your inbox and confirm your email to finish signing up." : "You’re already subscribed to our newsletter."]
 			}) : /* @__PURE__ */ m("form", {
@@ -104,7 +104,7 @@ function g({ link: g = "a", privacyUrl: _ = "https://www.highcharts.com/privacy/
 						variant: "success",
 						disabled: !0,
 						children: [/* @__PURE__ */ p(o, {
-							name: n,
+							name: r,
 							size: 16
 						}), "You’re in"]
 					}) : /* @__PURE__ */ p(a, {

package/dist/{Notification-BFLAktZo.js → Notification-DQostuW6.js}

@@ -1,8 +1,8 @@
 import { t as e } from "./clsx-BWCAbrjV.js";
-import { t } from "./esm-CUgR2iUX.js";
-import { t as n } from "./Button-BCbWIPg1.js";
+import { t } from "./esm-u0DqOC56.js";
+import { t as n } from "./Button-Ckhn8DSF.js";
 import { t as r } from "./Container-BDssaLig.js";
-import { t as i } from "./Label-k6e4Rqb-.js";
+import { t as i } from "./Label-KDdBAgyD.js";
 import { useEffect as a, useState as o } from "react";
 import { Fragment as s, jsx as c, jsxs as l } from "react/jsx-runtime";
 var u = {

package/dist/{PrefPanel-CHkc6r6b.js → PrefPanel-Cf-xZ261.js}

@@ -1,7 +1,7 @@
 import { d as e, o as t } from "./utils-K9S_6_Eq.js";
 import { t as n } from "./clsx-BWCAbrjV.js";
-import { D as r, E as i, et as a, h as o, l as s } from "./esm-CUgR2iUX.js";
-import { t as c } from "./Button-BCbWIPg1.js";
+import { D as r, E as i, h as a, l as o, tt as s } from "./esm-u0DqOC56.js";
+import { t as c } from "./Button-Ckhn8DSF.js";
 import { _ as l, a as u, d, h as f, i as p, l as m, m as h, n as ee, o as g, p as _, r as v, t as y, u as b, y as x } from "./es2015-DWa0ZZ7A.js";
 import { a as S, i as te, n as C, r as w, t as T } from "./dist-B04QoImH.js";
 import * as E from "react";
@@ -203,17 +203,17 @@ function $({ children: e, id: t, ...r }) {
 	}), /* @__PURE__ */ k("label", {
 		htmlFor: t,
 		className: Q.radio,
-		children: [e, /* @__PURE__ */ O(a, { className: Q.check })]
+		children: [e, /* @__PURE__ */ O(s, { className: Q.check })]
 	})] });
 }
 function de() {
-	let { theme: n, systemTheme: a, setTheme: l } = e(), u = t();
+	let { theme: n, systemTheme: s, setTheme: l } = e(), u = t();
 	return /* @__PURE__ */ k(oe, { children: [/* @__PURE__ */ O(ce, {
 		asChild: !0,
 		children: /* @__PURE__ */ k(c, {
 			variant: "transparent",
 			"aria-label": "Preferences",
-			children: [/* @__PURE__ */ O(o, {}), /* @__PURE__ */ O(se, { className: Q.anchor })]
+			children: [/* @__PURE__ */ O(a, {}), /* @__PURE__ */ O(se, { className: Q.anchor })]
 		})
 	}), /* @__PURE__ */ O(le, { children: /* @__PURE__ */ O(ue, {
 		sideOffset: 8,
@@ -229,7 +229,7 @@ function de() {
 				children: [
 					/* @__PURE__ */ O(r, {}),
 					"Auto (",
-					a,
+					s,
 					")"
 				]
 			}),
@@ -238,7 +238,7 @@ function de() {
 				name: "theme",
 				checked: n === "light",
 				onChange: () => l("light"),
-				children: [/* @__PURE__ */ O(s, {}), "Light"]
+				children: [/* @__PURE__ */ O(o, {}), "Light"]
 			}),
 			/* @__PURE__ */ k($, {
 				id: "dark",