highsoft-ui 1.0.154 → 1.0.155

package/CLAUDE.md

@@ -239,6 +239,29 @@ The `.tsx` icons are **generated** — edit the Figma exports in `lib/components
 - **Keyboard/focus:** the icon is a non-interactive `<span>` — it takes no focus and adds nothing to the tab order. `box` is purely presentational; focus styling belongs to the interactive ancestor.
 - **Reduced motion:** under `prefers-reduced-motion: reduce` the `box` tile drops the hover lift — the `translateY` is cancelled and the transition removed — while the `box-shadow` step stays, so the affordance survives as an instant depth change rather than a movement. The outer shell keeps its `background-color` fade: that's a colour change, not motion.
 
+### ProductIcon
+Highcharts product and feature icons in four themes.
+```tsx
+<ProductIcon icon="core" size={32} />                        // full color (multi)
+<ProductIcon icon="orbit" theme="monochrome" size={24} />    // brand duotone
+<ProductIcon icon="grid" theme="line" size={24} />           // single-line art
+<ProductIcon icon="stock" theme="grayscale" size={24} />     // neutral tones
+<ProductIcon icon="core" size={32} box />                    // layered box tile
+```
+- **`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`
+- **`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.
+
+The `.tsx` icons are **generated** — put Figma exports in `lib/components/ProductIcon/svg-export/` (`theme=<theme>, icon=<name>, alt bg=false.svg`; sources need a `viewBox` or the icon won't scale), add the name to the map in `scripts/convert-product-icons.cjs`, then run `npm run icons` and `npm run prettier`. Hand-editing a component under `icons/` is silently reverted on the next regeneration. New names also go in the `ProductIconName` type + `iconComponentMap` in `lib/components/ProductIcon/index.tsx`.
+
+**Accessibility:**
+- Icons are **decorative by default** — an inline `<svg>` with no `<title>` and no accessible name, so they add no noise to the AT tree. When an icon is the *only* content of a control, name it at the call site: `role="img"` + `aria-label` (props spread onto the `<svg>`), or label the wrapping control.
+- **Keyboard/focus:** the icon is a non-interactive `<span>` — no focus, nothing in the tab order. `box` is presentational; focus styling belongs to the interactive ancestor.
+- **Reduced motion:** under `prefers-reduced-motion: reduce` the `box` tile drops the hover lift but keeps the `box-shadow` step (instant depth change instead of movement); the shell keeps its `background-color` fade — a colour change, not motion.
+
 ### InputSolo
 Standalone, self-bordered text field with a floating label, help text, and error/success states.
 ```tsx

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

@@ -16,6 +16,7 @@ var o = {
 	gantt: "Gantt",
 	dashboards: "Dashboards",
 	grid: "Grid",
+	orbit: "Orbit",
 	demos: "Demos",
 	docs: "Docs",
 	API: "Api",

package/dist/components/ProductIcon/icons/grayscale/Orbit.js

@@ -0,0 +1,25 @@
+import { jsx as e, jsxs as t } from "react/jsx-runtime";
+//#region lib/components/ProductIcon/icons/grayscale/Orbit.tsx
+function n(n) {
+	return /* @__PURE__ */ t("svg", {
+		xmlns: "http://www.w3.org/2000/svg",
+		width: "24",
+		height: "25",
+		viewBox: "0 0 24 25",
+		fill: "none",
+		...n,
+		children: [/* @__PURE__ */ e("path", {
+			fill: "var(--icon-monotone-mono-key-600)",
+			fillRule: "evenodd",
+			d: "m20.606 11.438.319-.143a7 7 0 0 0 1.71-1.146Q23 11.568 23 13.153q0 4.76-3.331 8.071c-2.226 2.208-4.934 3.314-8.134 3.314s-5.967-1.102-8.193-3.299Q.002 17.942 0 13.259C0 11.175.507 9.25 1.521 7.47a11 11 0 0 1 4.153-4.174 11.2 11.2 0 0 1 5.684-1.509l.2.002a7 7 0 0 0-.637 1.838l-.05.29q-2.1.135-4.01 1.234-2.167 1.252-3.393 3.37-1.215 2.124-1.216 4.732-.002 3.856 2.697 6.512 2.701 2.661 6.505 2.66 2.548 0 4.706-1.222a8.77 8.77 0 0 0 3.377-3.344q1.21-2.118 1.212-4.712 0-.884-.143-1.71",
+			clipRule: "evenodd"
+		}), /* @__PURE__ */ e("path", {
+			fill: "var(--icon-monotone-mono-key-300)",
+			fillRule: "evenodd",
+			d: "M17.864 9.4a4.48 4.48 0 0 0 3.681-1.918c.497-.714.787-1.58.787-2.513 0-2.447-2-4.431-4.468-4.431a4.47 4.47 0 0 0-3.438 1.6 4.4 4.4 0 0 0-1.03 2.831c0 2.448 2 4.432 4.468 4.432m2.372-3.72a2.47 2.47 0 0 1-2.372 1.746 2.467 2.467 0 0 1-2.478-2.457l.009-.195a2.45 2.45 0 0 1 1.156-1.889c.38-.236.83-.373 1.313-.373 1.368 0 2.478 1.1 2.478 2.457q-.002.372-.105.71",
+			clipRule: "evenodd"
+		})]
+	});
+}
+//#endregion
+export { n as default };

package/dist/components/ProductIcon/icons/grayscale/index.js

@@ -20,12 +20,13 @@ import v from "./Hca.js";
 import y from "./Lab.js";
 import b from "./License.js";
 import x from "./Maps.js";
-import S from "./Python.js";
-import C from "./Roadmap.js";
-import w from "./Stock.js";
-import T from "./Support.js";
+import S from "./Orbit.js";
+import C from "./Python.js";
+import w from "./Roadmap.js";
+import T from "./Stock.js";
+import E from "./Support.js";
 //#region lib/components/ProductIcon/icons/grayscale/index.ts
-var E = /* @__PURE__ */ e({
+var D = /* @__PURE__ */ e({
 	Accessibility: () => t,
 	Advantageplus: () => n,
 	Api: () => r,
@@ -47,10 +48,11 @@ var E = /* @__PURE__ */ e({
 	Lab: () => y,
 	License: () => b,
 	Maps: () => x,
-	Python: () => S,
-	Roadmap: () => C,
-	Stock: () => w,
-	Support: () => T
+	Orbit: () => S,
+	Python: () => C,
+	Roadmap: () => w,
+	Stock: () => T,
+	Support: () => E
 });
 //#endregion
-export { t as Accessibility, n as Advantageplus, r as Api, i as CaseStudies, a as Changelog, o as ChartChooser, s as Core, c as CustomProjects, l as Dashboards, u as Demos, d as Docs, f as Editor, p as EduLicense, m as ExportServer, h as Gantt, g as Gpt, _ as Grid, v as Hca, y as Lab, b as License, x as Maps, S as Python, C as Roadmap, w as Stock, T as Support, E as t };
+export { t as Accessibility, n as Advantageplus, r as Api, i as CaseStudies, a as Changelog, o as ChartChooser, s as Core, c as CustomProjects, l as Dashboards, u as Demos, d as Docs, f as Editor, p as EduLicense, m as ExportServer, h as Gantt, g as Gpt, _ as Grid, v as Hca, y as Lab, b as License, x as Maps, S as Orbit, C as Python, w as Roadmap, T as Stock, E as Support, D as t };

package/dist/components/ProductIcon/icons/line/Orbit.js

@@ -0,0 +1,25 @@
+import { jsx as e, jsxs as t } from "react/jsx-runtime";
+//#region lib/components/ProductIcon/icons/line/Orbit.tsx
+function n(n) {
+	return /* @__PURE__ */ t("svg", {
+		xmlns: "http://www.w3.org/2000/svg",
+		width: "24",
+		height: "25",
+		viewBox: "0 0 24 25",
+		fill: "none",
+		...n,
+		children: [/* @__PURE__ */ e("path", {
+			fill: "var(--icon-single-line-color)",
+			fillRule: "evenodd",
+			d: "m20.606 11.438.319-.143a7 7 0 0 0 1.71-1.146Q23 11.568 23 13.152q0 4.76-3.331 8.072c-2.226 2.208-4.934 3.314-8.134 3.314s-5.967-1.102-8.193-3.3Q.002 17.944 0 13.259C0 11.176.507 9.25 1.521 7.47a11 11 0 0 1 4.153-4.174 11.2 11.2 0 0 1 5.684-1.509l.2.001a7 7 0 0 0-.637 1.839l-.05.29q-2.1.134-4.01 1.234-2.167 1.252-3.393 3.37-1.215 2.124-1.216 4.732-.002 3.856 2.697 6.512 2.701 2.661 6.505 2.66 2.548 0 4.706-1.222a8.77 8.77 0 0 0 3.377-3.344q1.21-2.118 1.212-4.712 0-.885-.143-1.71",
+			clipRule: "evenodd"
+		}), /* @__PURE__ */ e("path", {
+			fill: "var(--icon-single-line-color)",
+			fillRule: "evenodd",
+			d: "M17.864 9.4a4.48 4.48 0 0 0 3.681-1.918c.497-.714.787-1.58.787-2.513 0-2.447-2-4.431-4.468-4.431a4.47 4.47 0 0 0-3.438 1.6 4.4 4.4 0 0 0-1.03 2.831c0 2.448 2 4.432 4.468 4.432m2.372-3.721a2.47 2.47 0 0 1-2.372 1.747 2.467 2.467 0 0 1-2.478-2.457l.009-.195a2.45 2.45 0 0 1 1.156-1.889c.38-.236.83-.373 1.313-.373 1.368 0 2.478 1.1 2.478 2.457q-.002.372-.105.71",
+			clipRule: "evenodd"
+		})]
+	});
+}
+//#endregion
+export { n as default };

package/dist/components/ProductIcon/icons/line/index.js

@@ -20,12 +20,13 @@ import v from "./Hca.js";
 import y from "./Lab.js";
 import b from "./License.js";
 import x from "./Maps.js";
-import S from "./Python.js";
-import C from "./Roadmap.js";
-import w from "./Stock.js";
-import T from "./Support.js";
+import S from "./Orbit.js";
+import C from "./Python.js";
+import w from "./Roadmap.js";
+import T from "./Stock.js";
+import E from "./Support.js";
 //#region lib/components/ProductIcon/icons/line/index.ts
-var E = /* @__PURE__ */ e({
+var D = /* @__PURE__ */ e({
 	Accessibility: () => t,
 	Advantageplus: () => n,
 	Api: () => r,
@@ -47,10 +48,11 @@ var E = /* @__PURE__ */ e({
 	Lab: () => y,
 	License: () => b,
 	Maps: () => x,
-	Python: () => S,
-	Roadmap: () => C,
-	Stock: () => w,
-	Support: () => T
+	Orbit: () => S,
+	Python: () => C,
+	Roadmap: () => w,
+	Stock: () => T,
+	Support: () => E
 });
 //#endregion
-export { t as Accessibility, n as Advantageplus, r as Api, i as CaseStudies, a as Changelog, o as ChartChooser, s as Core, c as CustomProjects, l as Dashboards, u as Demos, d as Docs, f as Editor, p as EduLicense, m as ExportServer, h as Gantt, g as Gpt, _ as Grid, v as Hca, y as Lab, b as License, x as Maps, S as Python, C as Roadmap, w as Stock, T as Support, E as t };
+export { t as Accessibility, n as Advantageplus, r as Api, i as CaseStudies, a as Changelog, o as ChartChooser, s as Core, c as CustomProjects, l as Dashboards, u as Demos, d as Docs, f as Editor, p as EduLicense, m as ExportServer, h as Gantt, g as Gpt, _ as Grid, v as Hca, y as Lab, b as License, x as Maps, S as Orbit, C as Python, w as Roadmap, T as Stock, E as Support, D as t };

package/dist/components/ProductIcon/icons/monochrome/Orbit.js

@@ -0,0 +1,25 @@
+import { jsx as e, jsxs as t } from "react/jsx-runtime";
+//#region lib/components/ProductIcon/icons/monochrome/Orbit.tsx
+function n(n) {
+	return /* @__PURE__ */ t("svg", {
+		xmlns: "http://www.w3.org/2000/svg",
+		width: "23",
+		height: "24",
+		viewBox: "0 0 23 24",
+		fill: "none",
+		...n,
+		children: [/* @__PURE__ */ e("path", {
+			fill: "var(--icon-duotone-duotone-brand-key)",
+			fillRule: "evenodd",
+			d: "m20.606 10.9.319-.143a7 7 0 0 0 1.71-1.146Q23 11.03 23 12.615q0 4.76-3.331 8.071C17.443 22.894 14.735 24 11.535 24s-5.967-1.101-8.193-3.299Q.002 17.405 0 12.721 0 9.6 1.521 6.931a11 11 0 0 1 4.153-4.174 11.2 11.2 0 0 1 5.684-1.509l.2.002a7 7 0 0 0-.637 1.838l-.05.29q-2.1.135-4.01 1.234-2.167 1.252-3.393 3.37c-.81 1.418-1.216 2.992-1.216 4.732q-.002 3.856 2.697 6.512 2.701 2.661 6.505 2.66 2.548 0 4.706-1.222a8.77 8.77 0 0 0 3.377-3.344q1.21-2.118 1.212-4.712 0-.884-.143-1.71",
+			clipRule: "evenodd"
+		}), /* @__PURE__ */ e("path", {
+			fill: "var(--icon-duotone-duotone-brand-dark)",
+			fillRule: "evenodd",
+			d: "M17.864 8.863a4.48 4.48 0 0 0 3.681-1.919c.497-.714.787-1.58.787-2.512 0-2.448-2-4.432-4.468-4.432a4.47 4.47 0 0 0-3.438 1.6 4.4 4.4 0 0 0-1.03 2.831c0 2.448 2 4.432 4.468 4.432m2.372-3.722a2.47 2.47 0 0 1-2.372 1.747 2.467 2.467 0 0 1-2.478-2.457l.009-.195a2.45 2.45 0 0 1 1.156-1.889c.38-.236.83-.373 1.313-.373 1.368 0 2.478 1.1 2.478 2.457q-.002.372-.105.71",
+			clipRule: "evenodd"
+		})]
+	});
+}
+//#endregion
+export { n as default };

package/dist/components/ProductIcon/icons/monochrome/index.js

@@ -20,12 +20,13 @@ import v from "./Hca.js";
 import y from "./Lab.js";
 import b from "./License.js";
 import x from "./Maps.js";
-import S from "./Python.js";
-import C from "./Roadmap.js";
-import w from "./Stock.js";
-import T from "./Support.js";
+import S from "./Orbit.js";
+import C from "./Python.js";
+import w from "./Roadmap.js";
+import T from "./Stock.js";
+import E from "./Support.js";
 //#region lib/components/ProductIcon/icons/monochrome/index.ts
-var E = /* @__PURE__ */ e({
+var D = /* @__PURE__ */ e({
 	Accessibility: () => t,
 	Advantageplus: () => n,
 	Api: () => r,
@@ -47,10 +48,11 @@ var E = /* @__PURE__ */ e({
 	Lab: () => y,
 	License: () => b,
 	Maps: () => x,
-	Python: () => S,
-	Roadmap: () => C,
-	Stock: () => w,
-	Support: () => T
+	Orbit: () => S,
+	Python: () => C,
+	Roadmap: () => w,
+	Stock: () => T,
+	Support: () => E
 });
 //#endregion
-export { t as Accessibility, n as Advantageplus, r as Api, i as CaseStudies, a as Changelog, o as ChartChooser, s as Core, c as CustomProjects, l as Dashboards, u as Demos, d as Docs, f as Editor, p as EduLicense, m as ExportServer, h as Gantt, g as Gpt, _ as Grid, v as Hca, y as Lab, b as License, x as Maps, S as Python, C as Roadmap, w as Stock, T as Support, E as t };
+export { t as Accessibility, n as Advantageplus, r as Api, i as CaseStudies, a as Changelog, o as ChartChooser, s as Core, c as CustomProjects, l as Dashboards, u as Demos, d as Docs, f as Editor, p as EduLicense, m as ExportServer, h as Gantt, g as Gpt, _ as Grid, v as Hca, y as Lab, b as License, x as Maps, S as Orbit, C as Python, w as Roadmap, T as Stock, E as Support, D as t };

package/dist/components/ProductIcon/icons/multi/Orbit.js

@@ -0,0 +1,25 @@
+import { jsx as e, jsxs as t } from "react/jsx-runtime";
+//#region lib/components/ProductIcon/icons/multi/Orbit.tsx
+function n(n) {
+	return /* @__PURE__ */ t("svg", {
+		xmlns: "http://www.w3.org/2000/svg",
+		width: "24",
+		height: "25",
+		viewBox: "0 0 24 25",
+		fill: "none",
+		...n,
+		children: [/* @__PURE__ */ e("path", {
+			fill: "var(--icon-multicolor-multicolor-brand-brand)",
+			fillRule: "evenodd",
+			d: "m20.606 11.438.319-.143a7 7 0 0 0 1.71-1.146Q23 11.568 23 13.153q0 4.76-3.331 8.071c-2.226 2.208-4.934 3.314-8.134 3.314s-5.967-1.102-8.193-3.299Q.002 17.942 0 13.259C0 11.175.507 9.25 1.521 7.47a11 11 0 0 1 4.153-4.174 11.2 11.2 0 0 1 5.684-1.509l.2.002a7 7 0 0 0-.637 1.838l-.05.29q-2.1.135-4.01 1.234-2.167 1.252-3.393 3.37-1.215 2.124-1.216 4.732-.002 3.856 2.697 6.512 2.701 2.661 6.505 2.66 2.548 0 4.706-1.222a8.77 8.77 0 0 0 3.377-3.344q1.21-2.118 1.212-4.712 0-.884-.143-1.71",
+			clipRule: "evenodd"
+		}), /* @__PURE__ */ e("path", {
+			fill: "var(--icon-multicolor-multicolor-brand-accent)",
+			fillRule: "evenodd",
+			d: "M17.864 9.4a4.48 4.48 0 0 0 3.681-1.918c.497-.714.787-1.58.787-2.513 0-2.447-2-4.431-4.468-4.431a4.47 4.47 0 0 0-3.438 1.6 4.4 4.4 0 0 0-1.03 2.831c0 2.448 2 4.432 4.468 4.432m2.372-3.72a2.47 2.47 0 0 1-2.372 1.746 2.467 2.467 0 0 1-2.478-2.457l.009-.195a2.45 2.45 0 0 1 1.156-1.889c.38-.236.83-.373 1.313-.373 1.368 0 2.478 1.1 2.478 2.457q-.002.372-.105.71",
+			clipRule: "evenodd"
+		})]
+	});
+}
+//#endregion
+export { n as default };

package/dist/components/ProductIcon/icons/multi/index.js

@@ -20,12 +20,13 @@ import v from "./Hca.js";
 import y from "./Lab.js";
 import b from "./License.js";
 import x from "./Maps.js";
-import S from "./Python.js";
-import C from "./Roadmap.js";
-import w from "./Stock.js";
-import T from "./Support.js";
+import S from "./Orbit.js";
+import C from "./Python.js";
+import w from "./Roadmap.js";
+import T from "./Stock.js";
+import E from "./Support.js";
 //#region lib/components/ProductIcon/icons/multi/index.ts
-var E = /* @__PURE__ */ e({
+var D = /* @__PURE__ */ e({
 	Accessibility: () => t,
 	Advantageplus: () => n,
 	Api: () => r,
@@ -47,10 +48,11 @@ var E = /* @__PURE__ */ e({
 	Lab: () => y,
 	License: () => b,
 	Maps: () => x,
-	Python: () => S,
-	Roadmap: () => C,
-	Stock: () => w,
-	Support: () => T
+	Orbit: () => S,
+	Python: () => C,
+	Roadmap: () => w,
+	Stock: () => T,
+	Support: () => E
 });
 //#endregion
-export { t as Accessibility, n as Advantageplus, r as Api, i as CaseStudies, a as Changelog, o as ChartChooser, s as Core, c as CustomProjects, l as Dashboards, u as Demos, d as Docs, f as Editor, p as EduLicense, m as ExportServer, h as Gantt, g as Gpt, _ as Grid, v as Hca, y as Lab, b as License, x as Maps, S as Python, C as Roadmap, w as Stock, T as Support, E as t };
+export { t as Accessibility, n as Advantageplus, r as Api, i as CaseStudies, a as Changelog, o as ChartChooser, s as Core, c as CustomProjects, l as Dashboards, u as Demos, d as Docs, f as Editor, p as EduLicense, m as ExportServer, h as Gantt, g as Gpt, _ as Grid, v as Hca, y as Lab, b as License, x as Maps, S as Orbit, C as Python, w as Roadmap, T as Stock, E as Support, D as t };

package/dist/components/ProductIcon/index.js

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