highsoft-ui 1.0.148 → 1.0.150

package/CLAUDE.md

@@ -209,6 +209,28 @@ The foundational layout component. Use it instead of raw `<div>` with inline sty
 <Icon name="chevron-right" size={200} />
 ```
 
+### FrameworkIcon
+Language, framework and platform brand icons in two themes.
+```tsx
+<FrameworkIcon icon="javascript" size={32} />                    // full brand color
+<FrameworkIcon icon="html" theme="monochrome" size={24} />       // follows text color
+<FrameworkIcon icon="react" size={32} box />                     // layered box tile
+```
+- **`icon`:** `javascript`, `typescript`, `react`, `vue`, `angular`, `python`, `swift`, `android`, `html`, `css`, `dotnet`, `figma`
+- **`theme`:** `multi` (default, full brand color) | `monochrome` (single tone via `currentColor`)
+- **`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 (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.
+
+The `.tsx` icons are **generated** — edit the Figma exports in `lib/components/FrameworkIcon/svg-export/` (`Property 1=<Name>, Color=<Yes|No>.svg`), then run `npm run icons:frameworks` and `npm run prettier`. Hand-editing a component under `icons/` is silently reverted on the next regeneration. `Color=No` sources use the brand neutrals `#18171C` / `#474554`, which the generator rewrites to `currentColor`.
+
+**Accessibility:**
+- Icons are **decorative by default** — they render as an inline `<svg>` with no `<title>` and carry no accessible name, so they add no noise to the AT tree. When an icon is the *only* content of a control, give it a name at the call site: pass `role="img"` + `aria-label` (props spread onto the `<svg>`), or label the wrapping button — never rely on the icon alone to name the control.
+- **Contrast:** monochrome inherits `currentColor` from its container, so it meets the same contrast as adjacent text. The single-knockout path above is what keeps the glyph legible against any surface (WCAG 1.4.11 non-text contrast) rather than depending on a white backdrop.
+- **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.
+
 ### InputSolo
 Standalone, self-bordered text field with a floating label, help text, and error/success states.
 ```tsx

package/dist/{CodeBlock-BeseY88j.js → CodeBlock-CeW4bP9I.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 { H as r, K as i } from "./esm-BnxclXHW.js";
 import { t as a } from "./Button-BGsqFCRW.js";
-import { t as o } from "./FrameworkIcon-Ds6WrxO0.js";
+import { t as o } from "./FrameworkIcon-BxNtPuYx.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/{FrameworkIcon-Ds6WrxO0.js → FrameworkIcon-BxNtPuYx.js}

@@ -18,7 +18,8 @@ var i = {
 	android: "Android",
 	html: "Html",
 	css: "Css",
-	dotnet: "Dotnet"
+	dotnet: "Dotnet",
+	figma: "Figma"
 }, o = {
 	multi: t,
 	monochrome: n

package/dist/components/CodeBlock/index.js

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

package/dist/components/FrameworkIcon/icons/monochrome/Angular.js

@@ -1,28 +1,18 @@
-import { jsx as e, jsxs as t } from "react/jsx-runtime";
+import { jsx as e } from "react/jsx-runtime";
 //#region lib/components/FrameworkIcon/icons/monochrome/Angular.tsx
-function n(n) {
-	return /* @__PURE__ */ t("svg", {
+function t(t) {
+	return /* @__PURE__ */ e("svg", {
 		width: "16",
 		height: "16",
 		viewBox: "0 0 16 16",
 		fill: "none",
 		xmlns: "http://www.w3.org/2000/svg",
-		...n,
-		children: [
-			/* @__PURE__ */ e("path", {
-				d: "M8.32032 0.543213L15.457 2.9128L14.3687 11.6984L8.32032 14.817L2.27197 11.6984L1.18361 2.9128L8.32032 0.543213Z",
-				fill: "currentColor"
-			}),
-			/* @__PURE__ */ e("path", {
-				d: "M8.31982 0.543213V2.1276V2.1206V9.35039V14.817L2.27147 11.6984L1.18311 2.9128L8.31982 0.543213Z",
-				fill: "currentColor"
-			}),
-			/* @__PURE__ */ e("path", {
-				d: "M8.31236 2.0459L12.8013 11.3614H11.1276L10.2251 9.27701H6.41498L5.51258 11.3614H3.83888L8.31236 2.0459ZM7.00105 7.99212H9.62342L8.31213 5.07254L7.00105 7.99212Z",
-				fill: "white"
-			})
-		]
+		...t,
+		children: /* @__PURE__ */ e("path", {
+			fill: "currentColor",
+			d: "m16 2.608-1.22 9.67L8 15.71l-6.78-3.433L0 2.608 8 0zM2.978 11.906h1.876l1.011-2.294h4.27l1.013 2.294h1.875L8.01 1.653zm6.5-3.708H6.54l1.47-3.214z"
+		})
 	});
 }
 //#endregion
-export { n as default };
+export { t as default };

package/dist/components/FrameworkIcon/icons/monochrome/Css.js

@@ -1,21 +1,18 @@
-import { jsx as e, jsxs as t } from "react/jsx-runtime";
+import { jsx as e } from "react/jsx-runtime";
 //#region lib/components/FrameworkIcon/icons/monochrome/Css.tsx
-function n(n) {
-	return /* @__PURE__ */ t("svg", {
+function t(t) {
+	return /* @__PURE__ */ e("svg", {
 		width: "16",
 		height: "16",
 		viewBox: "0 0 16 16",
 		fill: "none",
 		xmlns: "http://www.w3.org/2000/svg",
-		...n,
-		children: [/* @__PURE__ */ e("path", {
-			d: "M0 0H13.44C14.119 6.53481e-08 14.7701 0.269714 15.2502 0.749807C15.7303 1.2299 16 1.88105 16 2.56V13.44C16 14.119 15.7303 14.7701 15.2502 15.2502C14.7701 15.7303 14.119 16 13.44 16H2.56C1.88105 16 1.2299 15.7303 0.749807 15.2502C0.269714 14.7701 6.53481e-08 14.119 0 13.44V0Z",
-			fill: "currentColor"
-		}), /* @__PURE__ */ e("path", {
-			d: "M13.0648 14.7182C12.5466 14.7182 12.1503 14.5675 11.8728 14.2646C11.5984 13.9601 11.4555 13.5257 11.4427 12.9584H12.5595C12.5659 13.4601 12.7423 13.7116 13.0888 13.7116C13.2655 13.7116 13.3906 13.6556 13.4627 13.5449C13.5333 13.4345 13.5703 13.258 13.5703 13.0161C13.5703 12.8238 13.5221 12.6635 13.429 12.5369C13.3026 12.3864 13.1404 12.2701 12.9573 12.1987L12.5434 11.9998C12.1744 11.8235 11.9064 11.6152 11.7411 11.3715C11.5807 11.1294 11.5005 10.7897 11.5005 10.3555C11.5005 9.86971 11.6418 9.47547 11.9224 9.17243C12.2112 8.86955 12.6043 8.71899 13.1064 8.71899C13.5912 8.71899 13.9666 8.86795 14.2312 9.16443C14.5008 9.46267 14.6419 9.88891 14.6533 10.4467H13.5783C13.5847 10.2643 13.5479 10.0832 13.4707 9.91771C13.4099 9.79611 13.2911 9.73515 13.1146 9.73515C12.8002 9.73515 12.6429 9.92251 12.6429 10.296C12.6429 10.4852 12.6813 10.6326 12.7584 10.7448C12.8695 10.8688 13.0087 10.9645 13.1643 11.0238L13.5607 11.1985C13.9698 11.386 14.265 11.6153 14.4463 11.8926C14.6291 12.1683 14.7191 12.5369 14.7191 12.9985C14.7191 13.5515 14.5746 13.9761 14.281 14.2726C13.989 14.5691 13.5829 14.7182 13.0648 14.7182ZM9.45809 14.7182C8.93969 14.7182 8.54353 14.5675 8.26593 14.2646C7.99153 13.9601 7.84881 13.5257 7.83601 12.9584H8.95265C8.95905 13.4601 9.13553 13.7116 9.48225 13.7116C9.65857 13.7116 9.78369 13.6556 9.85425 13.5449C9.92657 13.4345 9.96177 13.258 9.96177 13.0161C9.96177 12.8238 9.91537 12.6635 9.82225 12.5369C9.6959 12.3864 9.53369 12.2701 9.35057 12.1987L8.93665 11.9998C8.56753 11.8235 8.29969 11.6152 8.13441 11.3715C7.97393 11.1294 7.89377 10.7897 7.89377 10.3555C7.89377 9.86971 8.03489 9.47547 8.31569 9.17243C8.60449 8.86955 8.99761 8.71899 9.49969 8.71899C9.98433 8.71899 10.3597 8.86795 10.6229 9.16443C10.8957 9.46267 11.0352 9.88891 11.0464 10.4467H9.97153C9.97793 10.2643 9.94113 10.0832 9.86401 9.91771C9.80305 9.79611 9.68433 9.73515 9.50785 9.73515C9.19329 9.73515 9.03601 9.92251 9.03601 10.296C9.03601 10.4852 9.07457 10.6326 9.15153 10.7448C9.26262 10.8688 9.4018 10.9645 9.55745 11.0238L9.95377 11.1985C10.3629 11.386 10.6581 11.6153 10.8395 11.8926C11.0208 12.1683 11.1122 12.5369 11.1122 12.9985C11.1122 13.5515 10.9663 13.9761 10.6743 14.2726C10.3823 14.5691 9.97633 14.7182 9.45809 14.7182ZM5.70209 14.7182C5.19489 14.7182 4.79233 14.5803 4.49393 14.3046C4.19553 14.0307 4.04785 13.6187 4.04785 13.0737V10.3811C4.04785 9.83947 4.20513 9.42907 4.51953 9.14699C4.83889 8.86811 5.25761 8.72715 5.77585 8.72715C6.27809 8.72715 6.67425 8.87131 6.96785 9.15659C7.26481 9.44347 7.41393 9.86987 7.41393 10.4388V10.652H6.23153V10.4452C6.23153 10.2257 6.18337 10.0638 6.09025 9.95803C6.04958 9.90515 5.99699 9.86263 5.93676 9.83394C5.87654 9.80524 5.81038 9.79119 5.74369 9.79291C5.55121 9.79291 5.41489 9.85851 5.33777 9.99163C5.25569 10.1758 5.21882 10.3769 5.23025 10.5782V12.9184C5.23025 13.4072 5.40209 13.6556 5.74385 13.6604C5.90417 13.6604 6.02449 13.6027 6.10801 13.4873C6.19871 13.3416 6.24188 13.1713 6.23153 13V12.8254H7.41393V13.0081C7.41393 13.388 7.34017 13.7052 7.19089 13.9585C7.049 14.2057 6.83604 14.4045 6.57969 14.5291C6.30593 14.6597 6.00538 14.7245 5.70209 14.7182Z",
-			fill: "white"
-		})]
+		...t,
+		children: /* @__PURE__ */ e("path", {
+			fill: "currentColor",
+			d: "M13.44 0A2.56 2.56 0 0 1 16 2.56v10.88A2.56 2.56 0 0 1 13.44 16H2.56A2.56 2.56 0 0 1 0 13.44V0zM5.776 8.726q-.777 0-1.256.42-.472.421-.472 1.234v2.694q0 .819.446 1.23.448.414 1.208.414c.303.006.604-.06.878-.19a1.4 1.4 0 0 0 .611-.571q.223-.38.223-.95v-.183H6.232V13a.83.83 0 0 1-.124.487.42.42 0 0 1-.364.173q-.514-.006-.514-.742v-2.34a1.3 1.3 0 0 1 .108-.586q.116-.198.406-.199a.42.42 0 0 1 .346.165q.142.158.142.487v.207h1.182v-.213q0-.852-.446-1.282-.44-.43-1.192-.43M9.5 8.719q-.753 0-1.184.453-.421.455-.422 1.183 0 .654.24 1.016.248.365.803.628l.414.2a1.2 1.2 0 0 1 .471.337.8.8 0 0 1 .14.48q0 .364-.108.529-.108.167-.37.167-.52 0-.53-.754H7.835q.02.85.43 1.307.416.453 1.192.453.777 0 1.216-.445t.438-1.275q0-.692-.273-1.105-.27-.415-.885-.694l-.397-.175a1.03 1.03 0 0 1-.405-.279.77.77 0 0 1-.116-.45q0-.56.472-.56.264.001.356.182c.077.166.114.348.108.53h1.074q-.015-.836-.423-1.283-.396-.445-1.123-.445m3.606 0q-.751 0-1.184.453-.42.455-.421 1.183 0 .654.24 1.016.249.365.802.628l.414.2a1.2 1.2 0 0 1 .472.337.8.8 0 0 1 .141.48q0 .364-.107.529-.109.167-.374.167-.52 0-.53-.754h-1.116q.02.85.43 1.307.415.453 1.192.453.778-.001 1.216-.445.441-.445.438-1.275 0-.692-.273-1.105-.272-.415-.886-.694l-.396-.175a1.05 1.05 0 0 1-.406-.279q-.115-.166-.115-.45 0-.56.472-.56.263.001.356.182c.077.166.114.348.107.53h1.075q-.017-.836-.422-1.283-.398-.445-1.125-.445"
+		})
 	});
 }
 //#endregion
-export { n as default };
+export { t as default };

package/dist/components/FrameworkIcon/icons/monochrome/Figma.js

@@ -0,0 +1,20 @@
+import { jsx as e } from "react/jsx-runtime";
+//#region lib/components/FrameworkIcon/icons/monochrome/Figma.tsx
+function t(t) {
+	return /* @__PURE__ */ e("svg", {
+		width: "16",
+		height: "16",
+		viewBox: "0 0 20 20",
+		fill: "none",
+		xmlns: "http://www.w3.org/2000/svg",
+		...t,
+		children: /* @__PURE__ */ e("path", {
+			fill: "currentColor",
+			fillRule: "evenodd",
+			clipRule: "evenodd",
+			d: "M4.763 6.868A3.736 3.736 0 0 1 6.8 0h6.4a3.736 3.736 0 0 1 2.037 6.868 3.736 3.736 0 0 1-2.037 6.868h-.068a3.72 3.72 0 0 1-2.528-.986v3.48c0 2.087-1.71 3.77-3.787 3.77-2.06 0-3.753-1.668-3.753-3.736 0-1.311.676-2.465 1.699-3.132A3.73 3.73 0 0 1 3.064 10c0-1.312.676-2.466 1.699-3.132M10.603 10a2.53 2.53 0 0 0 2.53 2.529h.067a2.529 2.529 0 0 0 0-5.058h-.068A2.53 2.53 0 0 0 10.604 10M9.397 7.471H6.8a2.529 2.529 0 0 0-.009 5.058h2.605zM6.8 13.736H6.79a2.53 2.53 0 0 0-2.52 2.528c0 1.393 1.145 2.529 2.546 2.529 1.42 0 2.58-1.152 2.58-2.563v-2.494zm2.596-7.472H6.8a2.529 2.529 0 1 1 0-5.057h2.596zm3.804 0h-2.596V1.207H13.2a2.528 2.528 0 1 1 0 5.057"
+		})
+	});
+}
+//#endregion
+export { t as default };

package/dist/components/FrameworkIcon/icons/monochrome/Html.js

@@ -1,32 +1,20 @@
-import { jsx as e, jsxs as t } from "react/jsx-runtime";
+import { jsx as e } from "react/jsx-runtime";
 //#region lib/components/FrameworkIcon/icons/monochrome/Html.tsx
-function n(n) {
-	return /* @__PURE__ */ t("svg", {
+function t(t) {
+	return /* @__PURE__ */ e("svg", {
 		width: "16",
 		height: "16",
 		viewBox: "0 0 16 16",
 		fill: "none",
 		xmlns: "http://www.w3.org/2000/svg",
-		...n,
-		children: [
-			/* @__PURE__ */ e("path", {
-				d: "M2.28342 14.4054L1 0H15.1099L13.8264 14.3977L8.04327 16",
-				fill: "currentColor"
-			}),
-			/* @__PURE__ */ e("path", {
-				d: "M8.05493 14.775V1.18237H13.8226L12.7219 13.4721",
-				fill: "currentColor"
-			}),
-			/* @__PURE__ */ e("path", {
-				d: "M3.62134 2.94409H8.05498V4.70977H5.55814L5.72148 6.51823H8.05498V8.28002H4.10359M4.18138 9.16674H5.95483L6.07929 10.5785L8.05498 11.1074V12.9509L4.43028 11.9397",
-				fill: "white"
-			}),
-			/* @__PURE__ */ e("path", {
-				d: "M12.473 2.94409H8.04712V4.70977H12.3096M12.1502 6.51823H8.04712V8.28391H10.225L10.0189 10.5785L8.04712 11.1074V12.9431L11.664 11.9397",
-				fill: "white"
-			})
-		]
+		...t,
+		children: /* @__PURE__ */ e("path", {
+			fill: "currentColor",
+			fillRule: "evenodd",
+			d: "M14.4 14.2 7.875 16 1.35 14.2 0 0h15.75zM3.492 8.315h4.436v.004h2.45l-.232 2.581-2.209.595-2.223-.594-.14-1.588H3.578l.28 3.12 4.079 1.137v-.012l4.06-1.126.547-6.1H5.31L5.128 4.3h7.596l.183-1.987H2.95z",
+			clipRule: "evenodd"
+		})
 	});
 }
 //#endregion
-export { n as default };
+export { t as default };

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

@@ -3,26 +3,28 @@ import t from "./Android.js";
 import n from "./Angular.js";
 import r from "./Css.js";
 import i from "./Dotnet.js";
-import a from "./Html.js";
-import o from "./Javascript.js";
-import s from "./Python.js";
-import c from "./React.js";
-import l from "./Swift.js";
-import u from "./Typescript.js";
-import d from "./Vue.js";
+import a from "./Figma.js";
+import o from "./Html.js";
+import s from "./Javascript.js";
+import c from "./Python.js";
+import l from "./React.js";
+import u from "./Swift.js";
+import d from "./Typescript.js";
+import f from "./Vue.js";
 //#region lib/components/FrameworkIcon/icons/monochrome/index.ts
-var f = /* @__PURE__ */ e({
+var p = /* @__PURE__ */ e({
 	Android: () => t,
 	Angular: () => n,
 	Css: () => r,
 	Dotnet: () => i,
-	Html: () => a,
-	Javascript: () => o,
-	Python: () => s,
-	React: () => c,
-	Swift: () => l,
-	Typescript: () => u,
-	Vue: () => d
+	Figma: () => a,
+	Html: () => o,
+	Javascript: () => s,
+	Python: () => c,
+	React: () => l,
+	Swift: () => u,
+	Typescript: () => d,
+	Vue: () => f
 });
 //#endregion
-export { t as Android, n as Angular, r as Css, i as Dotnet, a as Html, o as Javascript, s as Python, c as React, l as Swift, u as Typescript, d as Vue, f as t };
+export { t as Android, n as Angular, r as Css, i as Dotnet, a as Figma, o as Html, s as Javascript, c as Python, l as React, u as Swift, d as Typescript, f as Vue, p as t };

package/dist/components/FrameworkIcon/icons/multi/Figma.js

@@ -0,0 +1,36 @@
+import { jsx as e, jsxs as t } from "react/jsx-runtime";
+//#region lib/components/FrameworkIcon/icons/multi/Figma.tsx
+function n(n) {
+	return /* @__PURE__ */ t("svg", {
+		width: "16",
+		height: "16",
+		viewBox: "0 0 20 20",
+		fill: "none",
+		xmlns: "http://www.w3.org/2000/svg",
+		...n,
+		children: [
+			/* @__PURE__ */ e("path", {
+				fill: "#24cb71",
+				d: "M3.333 16.667a3.333 3.333 0 0 1 3.334-3.334H10v3.334a3.333 3.333 0 1 1-6.667 0"
+			}),
+			/* @__PURE__ */ e("path", {
+				fill: "#ff7237",
+				d: "M10 0v6.667h3.333a3.333 3.333 0 1 0 0-6.667z"
+			}),
+			/* @__PURE__ */ e("path", {
+				fill: "#00b6ff",
+				d: "M13.306 13.333a3.333 3.333 0 1 0 0-6.666 3.333 3.333 0 0 0 0 6.666"
+			}),
+			/* @__PURE__ */ e("path", {
+				fill: "#ff3737",
+				d: "M3.333 3.333a3.333 3.333 0 0 0 3.334 3.334H10V0H6.667a3.333 3.333 0 0 0-3.334 3.333"
+			}),
+			/* @__PURE__ */ e("path", {
+				fill: "#874fff",
+				d: "M3.333 10a3.333 3.333 0 0 0 3.334 3.333H10V6.667H6.667A3.333 3.333 0 0 0 3.333 10"
+			})
+		]
+	});
+}
+//#endregion
+export { n as default };

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

@@ -3,26 +3,28 @@ import t from "./Android.js";
 import n from "./Angular.js";
 import r from "./Css.js";
 import i from "./Dotnet.js";
-import a from "./Html.js";
-import o from "./Javascript.js";
-import s from "./Python.js";
-import c from "./React.js";
-import l from "./Swift.js";
-import u from "./Typescript.js";
-import d from "./Vue.js";
+import a from "./Figma.js";
+import o from "./Html.js";
+import s from "./Javascript.js";
+import c from "./Python.js";
+import l from "./React.js";
+import u from "./Swift.js";
+import d from "./Typescript.js";
+import f from "./Vue.js";
 //#region lib/components/FrameworkIcon/icons/multi/index.ts
-var f = /* @__PURE__ */ e({
+var p = /* @__PURE__ */ e({
 	Android: () => t,
 	Angular: () => n,
 	Css: () => r,
 	Dotnet: () => i,
-	Html: () => a,
-	Javascript: () => o,
-	Python: () => s,
-	React: () => c,
-	Swift: () => l,
-	Typescript: () => u,
-	Vue: () => d
+	Figma: () => a,
+	Html: () => o,
+	Javascript: () => s,
+	Python: () => c,
+	React: () => l,
+	Swift: () => u,
+	Typescript: () => d,
+	Vue: () => f
 });
 //#endregion
-export { t as Android, n as Angular, r as Css, i as Dotnet, a as Html, o as Javascript, s as Python, c as React, l as Swift, u as Typescript, d as Vue, f as t };
+export { t as Android, n as Angular, r as Css, i as Dotnet, a as Figma, o as Html, s as Javascript, c as Python, l as React, u as Swift, d as Typescript, f as Vue, p as t };

package/dist/components/FrameworkIcon/index.js

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