highsoft-ui 1.0.114 → 1.0.116

package/README.md

@@ -106,6 +106,59 @@ hydrate({
 });
 ```
 
+### Sub-navigation notes
+
+`Header` supports a single level of secondary navigation through `subItems`.
+
+Text-only items compact automatically:
+
+```tsx
+<Header
+  subItems={[
+    { title: 'Demos', url: '/demo' },
+    { title: 'Docs', url: '/docs', prefixMatch: true },
+    { title: 'API', url: '/api' },
+  ]}
+  pathname={pathname}
+/>
+```
+
+Icon-based items keep the taller icon layout:
+
+```tsx
+<Header
+  subItems={[
+    {
+      title: 'Demos',
+      url: '/demo',
+      icon: <ChartBreakoutSquare />,
+      selectedIcon: <PresentationChart02 />,
+    },
+    {
+      title: 'Docs',
+      url: '/docs',
+      prefixMatch: true,
+      icon: <File06 />,
+    },
+  ]}
+  pathname={pathname}
+/>
+```
+
+Supported:
+
+- One horizontal row of secondary navigation
+- Optional icons and selected icons
+- Optional short tags next to the title
+- Active-state matching with `pathname` and `prefixMatch`
+
+Not supported:
+
+- Nested submenus or flyout menus
+- Accordion or expand/collapse navigation behavior
+- Multi-line or highly custom item layouts
+- Perfect alignment when mixing icon and non-icon items in the same row
+
 ## Formatting and linting
 
 ### Prettier

package/dist/Button-9RIB8ZR0.js

@@ -0,0 +1,47 @@
+import { t as e } from "./clsx-ROFf4vs9.js";
+import { y as t } from "./esm-C1TDRARf.js";
+import { forwardRef as n } from "react";
+import { jsx as r, jsxs as i } from "react/jsx-runtime";
+var a = {
+	attention: "QF-Hta_attention",
+	brand: "QF-Hta_brand",
+	button: "QF-Hta_button",
+	content: "QF-Hta_content",
+	danger: "QF-Hta_danger",
+	full: "QF-Hta_full",
+	loader: "QF-Hta_loader",
+	loading: "QF-Hta_loading",
+	neutral: "QF-Hta_neutral",
+	plain: "QF-Hta_plain",
+	"size-100": "QF-Hta_size-100",
+	"size-200": "QF-Hta_size-200",
+	"size-300": "QF-Hta_size-300",
+	"size-400": "QF-Hta_size-400",
+	"size-50": "QF-Hta_size-50",
+	"size-500": "QF-Hta_size-500",
+	soft: "QF-Hta_soft",
+	spin: "QF-Hta_spin",
+	success: "QF-Hta_success",
+	transparent: "QF-Hta_transparent"
+}, o = n(({ children: n, variant: o = "neutral", size: s = 200, fullWidth: c = !1, loading: l, as: u = "button", disabled: d, className: f, ...p }, m) => {
+	let h = o === "white" ? "soft" : o;
+	return /* @__PURE__ */ i(u, {
+		className: e("hsui-button", f, a.button, a[h], a[`size-${s}`], {
+			[a.full]: c,
+			[a.loading]: l
+		}),
+		disabled: d || l,
+		type: "button",
+		ref: m,
+		...p,
+		children: [l && /* @__PURE__ */ r("span", {
+			className: a.loader,
+			children: /* @__PURE__ */ r(t, {})
+		}), /* @__PURE__ */ r("span", {
+			className: a.content,
+			children: n
+		})]
+	});
+});
+//#endregion
+export { o as t };

package/dist/{CookiePolicyModal-BH2uHybE.js → CookiePolicyModal-B2mvebvV.js}

@@ -1,5 +1,5 @@
 import { t as e } from "./esm-C1TDRARf.js";
-import { t } from "./Button-Bbc4vmW_.js";
+import { t } from "./Button-9RIB8ZR0.js";
 import { a as n, i as r, n as i, o as a, r as o, s, t as c } from "./dist-0f0-S8_q.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/{Footer-BpEGdu-G.js → Footer-COn-JnC7.js}

@@ -1,14 +1,14 @@
 import { i as e, n as t, s as n } from "./utils-C4QGLbxr.js";
 import { t as r } from "./clsx-ROFf4vs9.js";
 import { E as i, M as a, T as o, a as s, u as c, x as l } from "./esm-C1TDRARf.js";
-import { t as u } from "./Button-Bbc4vmW_.js";
+import { t as u } from "./Button-9RIB8ZR0.js";
 import { t as d } from "./Container-LAkF4ShX.js";
 import { t as f } from "./dist-CjrKJb_1.js";
 import { a as p, i as m, n as h, o as g, r as _, s as v } from "./dist-0f0-S8_q.js";
 import { t as y } from "./Logo-CZ5LYqub.js";
 import { t as b } from "./NewTag-C-3mRyvV.js";
 import x from "./components/icons/MadeInNorway.js";
-import { n as S, t as C } from "./CookiePolicyModal-BH2uHybE.js";
+import { n as S, t as C } from "./CookiePolicyModal-B2mvebvV.js";
 import w, { useEffect as T, useRef as E, useState as D } from "react";
 import { Fragment as O, jsx as k, jsxs as A } from "react/jsx-runtime";
 //#region node_modules/react-icons/lib/iconContext.mjs
@@ -414,7 +414,7 @@ var ee = [
 	],
 	"Data Connectors": [{
 		title: "Morningstar Data",
-		url: "https://www.highcharts.com/products/morningstar-data/"
+		url: "https://www.highcharts.com/products/data-connector-for-morningstar/"
 	}],
 	"Pro Services": [{
 		title: "Custom Projects",
@@ -666,6 +666,7 @@ function ie({ link: t = "a", host: i = "https://www.highcharts.com" }) {
 												ref: o
 											}),
 											/* @__PURE__ */ k(u, {
+												type: "submit",
 												variant: N ? "danger" : "brand",
 												loading: c,
 												children: "Sign up"

package/dist/{Header-DbSqXuvO.js → Header-BW8ilZxt.js}

@@ -1,17 +1,18 @@
-import { t as e } from "./Search-D_fsZ-hm.js";
+import { t as e } from "./Search-DAPCZo13.js";
 import { a as t, c as n, i as r, l as i, r as a } from "./utils-C4QGLbxr.js";
 import { t as o } from "./clsx-ROFf4vs9.js";
 import { D as s, M as c, S as l, _ as u, k as d, n as f, o as p, p as m, s as h, t as g, v as _ } from "./esm-C1TDRARf.js";
-import { t as v } from "./Button-Bbc4vmW_.js";
+import { t as v } from "./Button-9RIB8ZR0.js";
 import { t as y } from "./Container-LAkF4ShX.js";
-import { t as b } from "./PrefPanel-DmiRZs1n.js";
+import { t as b } from "./PrefPanel-BTX6RAo4.js";
 import { t as x } from "./Logo-CZ5LYqub.js";
 import { t as S } from "./NewTag-C-3mRyvV.js";
-import { t as C } from "./Notification-_vWBqFiA.js";
+import { t as C } from "./Notification-DHcQtd1k.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 = {
 	buttons: "m_QBtq_buttons",
+	compact: "m_QBtq_compact",
 	container: "m_QBtq_container",
 	content: "m_QBtq_content",
 	cta: "m_QBtq_cta",
@@ -35,7 +36,8 @@ var A = {
 	slideUp: "m_QBtq_slideUp",
 	sub: "m_QBtq_sub",
 	subContainer: "m_QBtq_subContainer",
-	subTitle: "m_QBtq_subTitle"
+	subTitle: "m_QBtq_subTitle",
+	withIcon: "m_QBtq_withIcon"
 }, j = "notifications", M = "theme", N = 365 * 20, P = (e) => /^\d{1,3}(?:\.\d{1,3}){3}$/.test(e), F = () => {
 	if (typeof window > "u") return;
 	let e = window.location.hostname;
@@ -112,22 +114,31 @@ function V(e) {
 function H(e, t) {
 	return `${e}-${V((Array.isArray(t) ? t : [t]).map(({ url: e = "" }) => e.trim()).join("|"))}`;
 }
-function U({ items: e, link: n = "a", host: r = "https://www.highcharts.com", pathname: i }) {
-	let a = t();
+var U = 72, W = 48;
+function G(e) {
+	return !!e?.some(({ icon: e, selectedIcon: t }) => !!(e || t));
+}
+function K({ items: e, link: n = "a", host: r = "https://www.highcharts.com", pathname: i }) {
+	let a = t(), s = G(e);
 	return /* @__PURE__ */ O("div", {
 		className: o(A.sub, A.outer),
 		children: /* @__PURE__ */ O(y, {
-			className: A.subContainer,
+			className: o(A.subContainer, { [A.compact]: !s }),
 			as: "ul",
 			children: e.map(({ title: e, url: t, prefixMatch: s, icon: c, selectedIcon: l, tag: u, tagVariant: d = "success" }, f) => {
-				let p = i || typeof window < "u" && window.location.pathname, m = typeof window < "u" && window.location.origin || "http://example.com", h = new URL(t, m), g = p && (!!i || a) && h.origin === m && (s ? p.startsWith(h.pathname) : h.pathname === p);
+				let p = i || typeof window < "u" && window.location.pathname, m = typeof window < "u" && window.location.origin || "http://example.com", h = new URL(t, m), g = p && (!!i || a) && h.origin === m && (s ? p.startsWith(h.pathname) : h.pathname === p), _ = !!(c || l), v = typeof u == "string" || typeof u == "number" ? /* @__PURE__ */ O(S, {
+					variant: d,
+					icon: !1,
+					children: u
+				}) : u;
 				return /* @__PURE__ */ O("li", { children: /* @__PURE__ */ k(n, {
 					href: B(t, r),
 					className: o({
+						[A.withIcon]: _,
 						[A.selectableIcon]: l,
 						[A.selected]: g
 					}),
-					children: [/* @__PURE__ */ k("span", {
+					children: [_ && /* @__PURE__ */ k("span", {
 						className: A.icons,
 						children: [/* @__PURE__ */ O("span", {
 							className: A.selectedIcon,
@@ -138,17 +149,14 @@ function U({ items: e, link: n = "a", host: r = "https://www.highcharts.com", pa
 						})]
 					}), /* @__PURE__ */ k("span", {
 						className: A.subTitle,
-						children: [e, u && /* @__PURE__ */ O(S, {
-							variant: d,
-							icon: !1
-						})]
+						children: [e, v]
 					})]
 				}) }, f);
 			})
 		})
 	});
 }
-var W = [
+var q = [
 	{
 		title: "Highcharts at CSUN 2026",
 		description: "See what we're presenting",
@@ -173,11 +181,11 @@ var W = [
 		url: "https://discord.com/invite/xHxxcyyy6K",
 		tag: "new"
 	}
-], G = [{
-	id: H("whats-new", W),
-	content: W
+], J = [{
+	id: H("whats-new", q),
+	content: q
 }];
-function K() {
+function Y() {
 	let { theme: e, setTheme: t } = i(), n = T(!1);
 	return w(() => {
 		if (n.current) return;
@@ -191,12 +199,12 @@ function K() {
 		e && R(M, e);
 	}, [e]), null;
 }
-function q({ subItems: t, children: i, notifications: s = G, link: c = "a", host: l = "https://www.highcharts.com", pathname: u, cssVariable: d }) {
-	let m = r("(max-width: 374px)"), S = r("(max-width: 849px)"), w = r("(max-width: 1300px)"), M = T(null), [N, P] = E(!1), [F, L] = E([]);
+function X({ subItems: t, children: i, notifications: s = J, link: c = "a", host: l = "https://www.highcharts.com", pathname: u, cssVariable: d }) {
+	let m = r("(max-width: 374px)"), S = r("(max-width: 849px)"), w = r("(max-width: 1300px)"), M = G(t), N = T(null), [P, F] = E(!1), [L, V] = E([]);
 	a(() => {
-		let e = M.current;
+		let e = N.current;
 		if (!e) return;
-		let n = t?.length ? 72 : 0, r = 82 + F.length * 48 + n, i = -(82 + F.length * 48), a = window.scrollY, o = 0, s = null, c = null, l = () => {
+		let n = t?.length ? M ? U : W : 0, r = 82 + L.length * 48 + n, i = -(82 + L.length * 48), a = window.scrollY, o = 0, s = null, c = null, l = () => {
 			c = null, !(!e || s === o) && (e.style.transform = `translate3d(0, ${o}px, 0)`, d && document.documentElement.style.setProperty("--header-bottom", `${r + o}px`), s = o);
 		};
 		l();
@@ -209,37 +217,38 @@ function q({ subItems: t, children: i, notifications: s = G, link: c = "a", host
 		};
 	}, [
 		d,
-		F.length,
+		M,
+		L.length,
 		t?.length
 	]), a(() => {
 		if (!s.length) return;
 		let e = I();
-		L(e ? s.filter((t) => !t.id || !e.closed.includes(t.id)) : s);
+		V(e ? s.filter((t) => !t.id || !e.closed.includes(t.id)) : s);
 	}, [l, s]);
-	let V = (e) => {
+	let H = (e) => {
 		if (e.preventDefault(), !(e.nativeEvent instanceof KeyboardEvent) || e.nativeEvent.code === "Enter" || e.nativeEvent.code === "Space") {
 			let e = document.querySelector("main");
 			e && (e.scrollIntoView(), e.getAttribute("tabindex") !== "-1" && e.setAttribute("tabindex", "-1"), e.focus());
 		}
-	}, H = () => {
-		P(!N);
-	}, W = (e) => {
-		if (L(F.filter((t) => !t.id || t.id !== e)), !e) return;
+	}, q = () => {
+		F(!P);
+	}, X = (e) => {
+		if (V(L.filter((t) => !t.id || t.id !== e)), !e) return;
 		let t = I() ?? { closed: [] };
 		t.closed.includes(e) || R(j, JSON.stringify({ closed: [...t.closed, e] }));
 	};
-	return /* @__PURE__ */ k(n, { children: [/* @__PURE__ */ O(K, {}), /* @__PURE__ */ k("header", {
+	return /* @__PURE__ */ k(n, { children: [/* @__PURE__ */ O(Y, {}), /* @__PURE__ */ k("header", {
 		className: A.header,
 		children: [/* @__PURE__ */ k("div", {
 			className: A.content,
-			ref: M,
+			ref: N,
 			children: [
-				F?.map(({ id: e, content: t, variant: n, closable: r }, i) => /* @__PURE__ */ O(C, {
+				L?.map(({ id: e, content: t, variant: n, closable: r }, i) => /* @__PURE__ */ O(C, {
 					id: e,
 					content: t,
 					variant: n,
 					closable: r,
-					onClose: () => W(e)
+					onClose: () => X(e)
 				}, i)),
 				/* @__PURE__ */ O("div", {
 					className: o(A.main, A.outer),
@@ -252,8 +261,8 @@ function q({ subItems: t, children: i, notifications: s = G, link: c = "a", host
 								className: A.skip,
 								size: 500,
 								tabIndex: "0",
-								onClick: V,
-								onKeyPress: V,
+								onClick: H,
+								onKeyPress: H,
 								children: "Skip to content"
 							}),
 							/* @__PURE__ */ O(c, {
@@ -301,17 +310,17 @@ function q({ subItems: t, children: i, notifications: s = G, link: c = "a", host
 										children: [/* @__PURE__ */ O(f, {}), "Try for Free"]
 									}) }),
 									/* @__PURE__ */ O("li", { children: /* @__PURE__ */ k(v, {
-										variant: N ? "white" : "transparent",
+										variant: P ? "soft" : "transparent",
 										className: A.menu,
-										onClick: H,
-										children: [N ? "Close" : "Menu", O(N ? g : _, {})]
+										onClick: q,
+										children: [P ? "Close" : "Menu", O(P ? g : _, {})]
 									}) })
 								]
 							})
 						]
 					})
 				}),
-				!!t?.length && /* @__PURE__ */ O(U, {
+				!!t?.length && /* @__PURE__ */ O(K, {
 					items: t,
 					link: c,
 					host: l,
@@ -320,10 +329,10 @@ function q({ subItems: t, children: i, notifications: s = G, link: c = "a", host
 				i
 			]
 		}), S && /* @__PURE__ */ k(D, { children: [/* @__PURE__ */ O("div", {
-			className: o(A.mobileOverlay, { [A.open]: N }),
-			onClick: H
+			className: o(A.mobileOverlay, { [A.open]: P }),
+			onClick: q
 		}), /* @__PURE__ */ k("nav", {
-			className: o(A.mobile, { [A.open]: N }),
+			className: o(A.mobile, { [A.open]: P }),
 			children: [
 				/* @__PURE__ */ k("div", {
 					className: A.container,
@@ -380,4 +389,4 @@ function q({ subItems: t, children: i, notifications: s = G, link: c = "a", host
 	})] });
 }
 //#endregion
-export { U as n, q as t };
+export { K as n, X as t };

package/dist/{Notification-_vWBqFiA.js → Notification-DHcQtd1k.js}

@@ -1,6 +1,6 @@
 import { t as e } from "./clsx-ROFf4vs9.js";
 import { t } from "./esm-C1TDRARf.js";
-import { t as n } from "./Button-Bbc4vmW_.js";
+import { t as n } from "./Button-9RIB8ZR0.js";
 import { t as r } from "./Container-LAkF4ShX.js";
 import { t as i } from "./NewTag-C-3mRyvV.js";
 import { useEffect as a, useState as o } from "react";

package/dist/{PrefPanel-DmiRZs1n.js → PrefPanel-BTX6RAo4.js}

@@ -1,7 +1,7 @@
 import { a as e, l as t } from "./utils-C4QGLbxr.js";
 import { t as n } from "./clsx-ROFf4vs9.js";
 import { E as r, g as i, h as a, l as o, r as s } from "./esm-C1TDRARf.js";
-import { t as c } from "./Button-Bbc4vmW_.js";
+import { t as c } from "./Button-9RIB8ZR0.js";
 import { _ as l, a as u, c as d, d as f, f as p, g as m, h, i as g, l as _, m as v, n as y, o as b, r as x, s as S, t as C, u as w } from "./es2015-CzBBLWyD.js";
 import * as T from "react";
 import { useLayoutEffect as ee } from "react";