highsoft-ui 1.0.158 → 1.0.160

package/CLAUDE.md

@@ -215,11 +215,12 @@ const viewItems: ButtonGroupItem[] = [
 - **`variant`:** `default` (filled container, for cards/panels) | `alt` (darker fill, for the page background) | `transparent` (no fill, the transparent Button's hairline border — use it when the group sits next to `variant="transparent"` buttons so the two read as siblings)
 - **`size`:** Button sizes `50`–`500` (default `200`), shared by all items; **`fullWidth`** stretches items evenly
 - The container can be retinted via `--button-group-container-*` custom properties (`default`/`alt` variants only; `transparent` reads the button tokens directly).
+- **Color changes are not transitioned — only `transform` animates** (on `--animations-bounce-fast`, matching Button). A CSS `transition` on `background-color`/`color` can't tell a hover apart from a `data-theme` flip, so it would make the whole group fade between light and dark ~300ms behind the rest of the page. Don't re-add color transitions to the container or items.
 
 **Accessibility:**
 - The wrapper is `role="group"` — always pass `aria-label` (or `aria-labelledby`) to name it.
 - In select mode each item exposes `aria-pressed` for its selected state; with `selectable={false}` the attribute is omitted entirely, so AT hears plain buttons, not toggles stuck "off".
-- Items are real `Button`s: native `disabled` semantics, brand `:focus-visible` ring, design-token transitions that respect `prefers-reduced-motion`. Icon-only items need `buttonProps={{ 'aria-label': … }}` — the icon alone names nothing.
+- Items are real `Button`s: native `disabled` semantics, brand `:focus-visible` ring, and a transform-only transition on the design tokens that respects `prefers-reduced-motion`. Icon-only items need `buttonProps={{ 'aria-label': … }}` — the icon alone names nothing.
 
 ### Heading
 ```tsx
@@ -257,6 +258,7 @@ import { ChevronRight } from '@untitled-ui/icons-react'
 ```
 - **`name`:** the icon component from `@untitled-ui/icons-react`
 - **`size`:** `12` | `16` | `20` | `24` (default) | `32` | `40` | `52` | `64` | `72` — each maps to a stroke width (16 → 1.33, 20 → 1.67, 24 → 2), which is what keeps icons visually consistent at different sizes
+- The size is applied as an **inline style on the `<svg>`**, not just attributes — so ancestor rules like Button/Label's `svg { width: … }` (or app-global svg CSS) can't shrink the icon out from under its wrapper.
 - Icons passed to `Button`/`Label` via `iconLeft`/`iconRight` don't need this — those components size raw SVG children themselves.
 
 ### FrameworkIcon
@@ -268,7 +270,7 @@ Language, framework and platform brand icons in two themes.
 ```
 - **`icon`:** `javascript`, `typescript`, `react`, `vue`, `angular`, `python`, `swift`, `android`, `html`, `css`, `dotnet`, `figma`, `flutter`
 - **`theme`:** `multi` (default, full brand color) | `monochrome` (single tone via `currentColor`)
-- **`size`:** `12` | `16` | `20` | `24` (default) | `32` | `40` | `52` | `64` | `72`
+- **`size`:** `12` | `16` | `20` | `24` (default) | `32` | `40` | `52` | `64` | `72` — applied as an inline style on the `<svg>` as well as the wrapper, so ancestor `svg { width: … }` rules (Button, Label, app CSS) can't override it
 - **`box`:** wraps the icon in a shell + inner tile with a hover lift; the shell background reads `--hsui-icon-box-bg` so a parent (e.g. a selected `RadioBox`) can retint it without a prop
 
 **Monochrome icons must be a single `currentColor` path with the glyph knocked out** — never a colored silhouette with a second `fill="white"` letterform on top. A hardcoded white letterform only survives on a white surface: it disappears on `--HS-surface-ui-background-50/100` and inverts wrongly in dark mode. Cutting the glyph out (reversed subpaths, or `fillRule="evenodd"`) lets whatever surface is behind the icon show through, so one path is correct on every background and in both themes.
@@ -292,7 +294,7 @@ Highcharts product and feature icons in four themes.
 ```
 - **`icon`:** products `core`, `stock`, `maps`, `gantt`, `dashboards`, `grid`, `orbit`; plus feature/resource names like `demos`, `docs`, `API`, `changelog`, `roadmap`, `gpt`, `editor`, `export server`, `python`, `lab`, `support`, `custom projects`, `case studies`, `chart chooser`, `hca`, `a11y`, `edu license`, `license`, `ADV+`
 - **`theme`:** `multi` (default, full color) | `monochrome` (brand duotone) | `grayscale` (neutral tones) | `line` (single-line art)
-- **`size`:** `12` | `16` | `20` | `24` (default) | `32` | `40` | `52` | `64` | `72`
+- **`size`:** `12` | `16` | `20` | `24` (default) | `32` | `40` | `52` | `64` | `72` — applied as an inline style on the `<svg>` as well as the wrapper, so ancestor `svg { width: … }` rules (Button, Label, app CSS) can't override it
 - **`box`:** wraps the icon in a shell + inner tile with a hover lift; the shell background reads `--hsui-icon-box-bg` so a parent can retint it without a prop
 
 **Every fill must be an `--icon-*` CSS variable, never a hex color** — `--icon-multicolor-*` (multi), `--icon-duotone-*` (monochrome), `--icon-monotone-mono-key-*` (grayscale), `--icon-single-line-color` (line), defined in `lib/scss/variables.scss` with a dark-mode remap. A hardcoded hex renders identically in both modes and breaks dark mode. Figma sometimes exports flattened hexes — swap them for the matching variable in the source SVG before generating.

package/dist/{CodeBlock-Ds79AzEX.js → CodeBlock-BkSyiiCb.js}

@@ -2,7 +2,7 @@ import { r as e, s as t } from "./utils-K9S_6_Eq.js";
 import { t as n } from "./clsx-BWCAbrjV.js";
 import { $ as r, q as i } from "./esm-LCYnNVvi.js";
 import { t as a } from "./Button-CjxX21gW.js";
-import { t as o } from "./FrameworkIcon-D7N3PjYr.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";
 var h = {

package/dist/{Dropdown-D3AnhPYO.js → Dropdown-8bjCO1Lx.js}

@@ -1,6 +1,6 @@
 import { t as e } from "./clsx-BWCAbrjV.js";
 import { $ as t } from "./esm-LCYnNVvi.js";
-import { t as n } from "./Icon-VeXJMj8Q.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 ee, i as b, n as te, r as x, t as S } from "./dist-CE9LFbij.js";
 import { a as C, i as w, n as T, r as ne, t as re } from "./dist-B04QoImH.js";

package/dist/{Footer-DDj7XStD.js → Footer-DVZIe2ax.js}

@@ -4,11 +4,11 @@ import { t as r } from "./Button-CjxX21gW.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-Bk0SU1NB.js";
+import { t as s } from "./NewsletterSignup-BP3AxNHH.js";
 import { t as c } from "./FooterBottom-BV9xJbRt.js";
-import { t as l } from "./FooterHelp-CnoweyYC.js";
-import { t as u } from "./FooterLinks-BCr9brR3.js";
-import { t as d } from "./YoutubeModal-CXwczXZa.js";
+import { t as l } from "./FooterHelp-Dlnj0dUF.js";
+import { t as u } from "./FooterLinks-BAdqoexV.js";
+import { t as d } from "./YoutubeModal-C3rfaDki.js";
 import { jsx as f, jsxs as p } from "react/jsx-runtime";
 var m = {
 	discordCard: "_4W4F3q_discordCard",

package/dist/{FooterHelp-CnoweyYC.js → FooterHelp-Dlnj0dUF.js}

@@ -1,6 +1,6 @@
 import { a as e, t } from "./utils-K9S_6_Eq.js";
 import { d as n, g as r } from "./esm-LCYnNVvi.js";
-import { t as i } from "./Icon-VeXJMj8Q.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";
 import { jsx as c, jsxs as l } from "react/jsx-runtime";

package/dist/{FooterLinks-BCr9brR3.js → FooterLinks-BAdqoexV.js}

@@ -1,6 +1,6 @@
 import { t as e } from "./clsx-BWCAbrjV.js";
 import { I as t } from "./esm-LCYnNVvi.js";
-import { t as n } from "./Icon-VeXJMj8Q.js";
+import { t as n } from "./Icon-DJTgdvsG.js";
 import { t as r } from "./Typography-AvvBRu-u.js";
 import { t as i } from "./Label-DgPVoDMR.js";
 import a from "./components/icons/MadeInNorway.js";

package/dist/{FrameworkIcon-D7N3PjYr.js → FrameworkIcon-B8GmMx0r.js}

@@ -25,28 +25,33 @@ var i = {
 	multi: t,
 	monochrome: n
 };
-function s({ icon: t, theme: n = "multi", size: s = 24, box: c = !1, className: l, ...u }) {
-	let d = a[t], f = o[n][d];
-	if (!f) return console.warn(`FrameworkIcon: No icon found for "${t}" with theme "${n}"`), null;
-	let p = /* @__PURE__ */ r("span", {
+function s({ icon: t, theme: n = "multi", size: s = 24, box: c = !1, className: l, style: u, ...d }) {
+	let f = a[t], p = o[n][f];
+	if (!p) return console.warn(`FrameworkIcon: No icon found for "${t}" with theme "${n}"`), null;
+	let m = /* @__PURE__ */ r("span", {
 		className: e("hsui-framework-icon", i.icon, l),
 		style: {
 			width: s,
 			height: s
 		},
-		children: /* @__PURE__ */ r(f, {
+		children: /* @__PURE__ */ r(p, {
 			width: s,
 			height: s,
-			...u
+			style: {
+				width: s,
+				height: s,
+				...u
+			},
+			...d
 		})
 	});
 	return c ? /* @__PURE__ */ r("span", {
 		className: i.boxOuter,
 		children: /* @__PURE__ */ r("span", {
 			className: i.boxInner,
-			children: p
+			children: m
 		})
-	}) : p;
+	}) : m;
 }
 //#endregion
 export { s as t };

package/dist/{Icon-VeXJMj8Q.js → Icon-DJTgdvsG.js}

@@ -11,8 +11,8 @@ var n = { icon: "_2G93rW_icon" }, r = {
 	64: 5.33,
 	72: 6
 };
-function i({ name: i, size: a = 24, className: o, strokeWidth: s, ...c }) {
-	let l = s ?? r[a];
+function i({ name: i, size: a = 24, className: o, strokeWidth: s, style: c, ...l }) {
+	let u = s ?? r[a];
 	return /* @__PURE__ */ t("span", {
 		className: e("hsui-icon", n.icon, o),
 		style: {
@@ -22,8 +22,13 @@ function i({ name: i, size: a = 24, className: o, strokeWidth: s, ...c }) {
 		children: /* @__PURE__ */ t(i, {
 			width: a,
 			height: a,
-			strokeWidth: l,
-			...c
+			strokeWidth: u,
+			style: {
+				width: a,
+				height: a,
+				...c
+			},
+			...l
 		})
 	});
 }

package/dist/{NewsletterSignup-Bk0SU1NB.js → NewsletterSignup-BP3AxNHH.js}

@@ -2,7 +2,7 @@ import { l as e } from "./utils-K9S_6_Eq.js";
 import { t } from "./clsx-BWCAbrjV.js";
 import { B as n, Q as r, at as i } from "./esm-LCYnNVvi.js";
 import { t as a } from "./Button-CjxX21gW.js";
-import { t as o } from "./Icon-VeXJMj8Q.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";
 import { t as l } from "./Typography-AvvBRu-u.js";

package/dist/{ProductIcon-CKtF7AWy.js → ProductIcon-C5yvnjHr.js}

@@ -42,28 +42,33 @@ var o = {
 	grayscale: r,
 	line: i
 };
-function l({ icon: t, theme: n = "multi", size: r = 24, box: i = !1, className: l, ...u }) {
-	let d = s[t], f = c[n][d];
-	if (!f) return console.warn(`ProductIcon: No icon found for "${t}" with theme "${n}"`), null;
-	let p = /* @__PURE__ */ a("span", {
+function l({ icon: t, theme: n = "multi", size: r = 24, box: i = !1, className: l, style: u, ...d }) {
+	let f = s[t], p = c[n][f];
+	if (!p) return console.warn(`ProductIcon: No icon found for "${t}" with theme "${n}"`), null;
+	let m = /* @__PURE__ */ a("span", {
 		className: e("hsui-product-icon", o.icon, l),
 		style: {
 			width: r,
 			height: r
 		},
-		children: /* @__PURE__ */ a(f, {
+		children: /* @__PURE__ */ a(p, {
 			width: r,
 			height: r,
-			...u
+			style: {
+				width: r,
+				height: r,
+				...u
+			},
+			...d
 		})
 	});
 	return i ? /* @__PURE__ */ a("span", {
 		className: o.boxOuter,
 		children: /* @__PURE__ */ a("span", {
 			className: o.boxInner,
-			children: p
+			children: m
 		})
-	}) : p;
+	}) : m;
 }
 //#endregion
 export { l as t };

package/dist/{SearchDropdown-BetSrTgQ.js → SearchDropdown-fcfDUjOp.js}

@@ -1,6 +1,6 @@
 import { t as e } from "./clsx-BWCAbrjV.js";
 import { _ as t } from "./esm-LCYnNVvi.js";
-import { t as n } from "./Icon-VeXJMj8Q.js";
+import { t as n } from "./Icon-DJTgdvsG.js";
 import { t as r } from "./InputSolo-DUdKtZjX.js";
 import { useCallback as i, useEffect as a, useId as o, useMemo 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/{VideoCover-B59ykzJi.js → VideoCover-BXIkxFuT.js}

@@ -1,6 +1,6 @@
 import { t as e } from "./clsx-BWCAbrjV.js";
 import { st as t } from "./esm-LCYnNVvi.js";
-import { t as n } from "./Icon-VeXJMj8Q.js";
+import { t as n } from "./Icon-DJTgdvsG.js";
 import { t as r } from "./Typography-AvvBRu-u.js";
 import { forwardRef as i, useCallback as a, useEffect as o, useRef as s, useState as c } from "react";
 import { jsx as l, jsxs as u } from "react/jsx-runtime";

package/dist/{VideoPlayer-ChyiZ0sK.js → VideoPlayer-BB8jVMa5.js}

@@ -1,6 +1,6 @@
 import { t as e } from "./clsx-BWCAbrjV.js";
 import { M as t, S as n, a as r, ct as i, i as a, k as o, o as s, r as ee, t as c, w as l } from "./esm-LCYnNVvi.js";
-import { t as u } from "./Icon-VeXJMj8Q.js";
+import { t as u } from "./Icon-DJTgdvsG.js";
 import { detectProvider as d, providerPosterUrl as f, useMediaEngine as p } from "./components/VideoPlayer/useMediaEngine.js";
 import { forwardRef as m, useCallback as h, useEffect as g, useId as _, useImperativeHandle as v, useRef as y, useState as b } from "react";
 import { jsx as x, jsxs as S } from "react/jsx-runtime";

package/dist/{VideoPlayerModal-D6ze_Evt.js → VideoPlayerModal-fnAUwVMI.js}

@@ -1,7 +1,7 @@
 import { n as e } from "./esm-LCYnNVvi.js";
 import { t } from "./dist-J9cXmrDi.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 { t as l } from "./VideoPlayer-ChyiZ0sK.js";
+import { t as l } from "./VideoPlayer-BB8jVMa5.js";
 import { jsx as u, jsxs as d } from "react/jsx-runtime";
 var f = {
 	close: "ig0T5q_close",

package/dist/{YoutubeModal-CXwczXZa.js → YoutubeModal-C3rfaDki.js}

@@ -1,6 +1,6 @@
 import { s as e } from "./fa-B95RwBpz.js";
-import { t } from "./VideoCover-B59ykzJi.js";
-import { t as n } from "./VideoPlayerModal-D6ze_Evt.js";
+import { t } from "./VideoCover-BXIkxFuT.js";
+import { t as n } from "./VideoPlayerModal-fnAUwVMI.js";
 import { jsx as r, jsxs as i } from "react/jsx-runtime";
 var a = {
 	youtube: "elwCNG_youtube",

package/dist/components/CodeBlock/index.js

@@ -1,2 +1,2 @@
-import { t as e } from "../../CodeBlock-Ds79AzEX.js";
+import { t as e } from "../../CodeBlock-BkSyiiCb.js";
 export { e as CodeBlock };

package/dist/components/Dropdown/index.js

@@ -1,2 +1,2 @@
-import { n as e, r as t, t as n } from "../../Dropdown-D3AnhPYO.js";
+import { n as e, r as t, t as n } from "../../Dropdown-8bjCO1Lx.js";
 export { n as Dropdown, e as DropdownItem, t as DropdownSeparator };

package/dist/components/Footer/FooterHelp.js

@@ -1,2 +1,2 @@
-import { t as e } from "../../FooterHelp-CnoweyYC.js";
+import { t as e } from "../../FooterHelp-Dlnj0dUF.js";
 export { e as default };

package/dist/components/Footer/FooterLinks.js

@@ -1,2 +1,2 @@
-import { t as e } from "../../FooterLinks-BCr9brR3.js";
+import { t as e } from "../../FooterLinks-BAdqoexV.js";
 export { e as default };

package/dist/components/Footer/YoutubeModal.js

@@ -1,2 +1,2 @@
-import { t as e } from "../../YoutubeModal-CXwczXZa.js";
+import { t as e } from "../../YoutubeModal-C3rfaDki.js";
 export { e as default };

package/dist/components/Footer/index.js

@@ -1,2 +1,2 @@
-import { t as e } from "../../Footer-DDj7XStD.js";
+import { t as e } from "../../Footer-DVZIe2ax.js";
 export { e as Footer };

package/dist/components/FrameworkIcon/index.js

@@ -1,2 +1,2 @@
-import { t as e } from "../../FrameworkIcon-D7N3PjYr.js";
+import { t as e } from "../../FrameworkIcon-B8GmMx0r.js";
 export { e as FrameworkIcon };

package/dist/components/Icon/index.js

@@ -1,2 +1,2 @@
-import { t as e } from "../../Icon-VeXJMj8Q.js";
+import { t as e } from "../../Icon-DJTgdvsG.js";
 export { e as Icon };

package/dist/components/NewsletterSignup/index.js

@@ -1,2 +1,2 @@
-import { t as e } from "../../NewsletterSignup-Bk0SU1NB.js";
+import { t as e } from "../../NewsletterSignup-BP3AxNHH.js";
 export { e as NewsletterSignup };

package/dist/components/ProductIcon/index.js

@@ -1,2 +1,2 @@
-import { t as e } from "../../ProductIcon-CKtF7AWy.js";
+import { t as e } from "../../ProductIcon-C5yvnjHr.js";
 export { e as ProductIcon };

package/dist/components/SearchDropdown/index.js

@@ -1,2 +1,2 @@
-import { t as e } from "../../SearchDropdown-BetSrTgQ.js";
+import { t as e } from "../../SearchDropdown-fcfDUjOp.js";
 export { e as SearchDropdown };

package/dist/components/Sidebar/NavDisclosure.js

@@ -1,7 +1,7 @@
 "use client";
 import { t as e } from "../../clsx-BWCAbrjV.js";
 import { X as t } from "../../esm-LCYnNVvi.js";
-import { t as n } from "../../Icon-VeXJMj8Q.js";
+import { t as n } from "../../Icon-DJTgdvsG.js";
 import { t as r } from "../../styles.module-DGKft2EO.js";
 import { useId as i, useState as a } from "react";
 import { jsx as o, jsxs as s } from "react/jsx-runtime";

package/dist/components/Sidebar/NavGroup.js

@@ -1,7 +1,7 @@
 "use client";
 import { t as e } from "../../clsx-BWCAbrjV.js";
 import { X as t } from "../../esm-LCYnNVvi.js";
-import { t as n } from "../../Icon-VeXJMj8Q.js";
+import { t as n } from "../../Icon-DJTgdvsG.js";
 import { useOptionalSidebarSection as r } from "./context.js";
 import { t as i } from "../../styles.module-DGKft2EO.js";
 import { NavPathContext as a, textOf as o, useNavPath as s } from "./navPath.js";

package/dist/components/Sidebar/Sidebar.js

@@ -2,7 +2,7 @@
 import { t as e } from "../../clsx-BWCAbrjV.js";
 import { O as t, t as n } from "../../esm-LCYnNVvi.js";
 import { t as r } from "../../Button-CjxX21gW.js";
-import { t as i } from "../../Icon-VeXJMj8Q.js";
+import { t as i } from "../../Icon-DJTgdvsG.js";
 import { t as a } from "../../Typography-AvvBRu-u.js";
 import { SidebarSectionContext as o, useSidebarLayout as s } from "./context.js";
 import { t as c } from "../../styles.module-DGKft2EO.js";

package/dist/components/VideoCover/index.js

@@ -1,2 +1,2 @@
-import { t as e } from "../../VideoCover-B59ykzJi.js";
+import { t as e } from "../../VideoCover-BXIkxFuT.js";
 export { e as VideoCover };

package/dist/components/VideoPlayer/VideoPlayerModal.js

@@ -1,2 +1,2 @@
-import { t as e } from "../../VideoPlayerModal-D6ze_Evt.js";
+import { t as e } from "../../VideoPlayerModal-fnAUwVMI.js";
 export { e as VideoPlayerModal };

package/dist/components/VideoPlayer/index.js

@@ -1,2 +1,2 @@
-import { t as e } from "../../VideoPlayer-ChyiZ0sK.js";
+import { t as e } from "../../VideoPlayer-BB8jVMa5.js";
 export { e as VideoPlayer };