highsoft-ui 1.0.168 → 1.0.170

package/CLAUDE.md

@@ -274,6 +274,55 @@ import { ShoppingCart01, Check, XClose } from '@untitled-ui/icons-react'
 - The icon marker is `aria-hidden` and the numeral is a CSS counter, so neither is read as content — the ordinal comes from the `<ol>` itself. Don't put meaning in the icon alone: a check/cross per row needs the words to say included or not.
 - Colors are `--HS-text-*` tokens at body-text contrast and remap in dark mode. Nothing is interactive or focusable, and nothing animates, so there is no keyboard, focus or reduced-motion behaviour to account for.
 
+### Features
+Icon-led feature items: an icon, then a semibold run-in title and its description in one paragraph. `Features` lays them out in a responsive grid.
+```tsx
+import { PieChart02, Code02, Globe02 } from '@untitled-ui/icons-react'
+
+<FeatureItem icon={PieChart02} title="Vast chart collection.">
+  Line, spline, area, column, bar, pie and more — see{' '}
+  <Link href="/demo">all chart types</Link>.
+</FeatureItem>
+
+// A grid of up to 3 columns (default)
+<Features>
+  <FeatureItem icon={PieChart02} title="Vast chart collection.">…</FeatureItem>
+  <FeatureItem icon={Code02} title="Works with your stack.">…</FeatureItem>
+  <FeatureItem icon={Globe02} title="Built for any locale.">…</FeatureItem>
+</Features>
+
+// Features that are page sections: the title becomes a run-in <h3>
+<FeatureItem icon={PieChart02} title="Vast chart collection." headingLevel={3}>…</FeatureItem>
+
+// Brand icons for the whole grid; one item overrides it
+<Features iconColor="brandAlt">
+  <FeatureItem icon={PieChart02} title="Vast chart collection.">…</FeatureItem>
+  <FeatureItem icon={Code02} title="Works with your stack." iconColor="successPrimary">…</FeatureItem>
+</Features>
+
+// The lighter tertiary description — on a white background-0 surface only
+<Box background={0}>
+  <Features descriptionColor="tertiary">…</Features>
+</Box>
+```
+- **`icon`** (required): an `@untitled-ui/icons-react` component. Its size is fixed (20px via `Icon`); its color is `iconColor`.
+- **`title`** / **`children`**: the title and the description. They run together in **one paragraph with one font and size** (`--typography-size-100` — 14px, `--typography-lineHeight-text` — 130%) and differ **only in weight and color**: title 600 (`--typography-weight-semi`) in `--HS-text-primary-default`, description 400 in `--HS-text-secondary-default` by default. The description takes inline content such as a `Link`.
+- **`iconColor`:** any text color token, a `TypographyColor` (`primary` default, `secondary`, `tertiary`, `brand`, `brandAlt`, `successPrimary`, …) — the same prop and list as `List`.
+- **`descriptionColor`:** `secondary` (default) | `tertiary` (lighter, **white/background-0 surfaces only** — see Accessibility).
+- Both color props work on `Features` and on `FeatureItem`: set on the grid they reach every item, set on an item they override the grid for that item. Unset, an element inherits from its ancestors (primary icon, secondary description if none sets them). They travel as the inherited custom properties `--hsui-feature-icon-color` / `--hsui-feature-description-color`, not React context, so they cascade the same way in server-rendered or static (WordPress) markup.
+- **`headingLevel`:** `2`–`6` renders the title as a run-in `<hN>` and the description as its own `<p>`, both `display: inline`, so the look is unchanged. Default is a `<strong>` inside a single `<p>`.
+- 16px between icon and text (`--item-spacing-700`). Figma draws 18px text, a bold title and a 32px gap; that read too large, so the component steps down to 14px, semibold and 16px.
+- **`Features`** — `<ul>` grid; `columns` `1`–`4` (default `3`) is the maximum. Columns drop out as the **container** narrows (each keeps ≥256px), so it collapses inside narrow parents too, not just at viewport breakpoints. 48px between rows, 32px between columns. At a 1312px container, 3 columns are 416px — the Figma item width. `FeatureItem` renders `<li>` inside `Features` and `<div>` on its own.
+
+**Accessibility:**
+- `Features` is a real `<ul>` of `<li>`s with an explicit `role="list"` (Safari/VoiceOver drops list semantics from a `list-style: none` list without it); AT announces "list, 6 items".
+- The icon is `aria-hidden` — decorative; the title carries the meaning, so never rely on the glyph (or its `iconColor`) alone. Being decorative, it isn't held to WCAG 1.4.11's 3:1 for graphics, but pale tokens weaken the layout — prefer the stronger ones.
+- By default the title is `<strong>` in the paragraph, so each feature reads as one sentence. Pass `headingLevel` when features are sections of the page so screen-reader users can jump between them by heading; pick the level that fits the surrounding outline.
+- **Contrast:** WCAG 1.4.3 needs 4.5:1 for the 14px regular description — 14px isn't "large" text (that starts at 24px, or 18.66px bold). The default secondary description passes on every surface in both themes (6.67:1 or more). `descriptionColor="tertiary"` only gets there on `--HS-surface-ui-background-0` (4.58:1 light, 5.65:1 dark) and the dark page background (6.3:1); it fails on the light page background and background-50 (4.07:1), dark background-50 (4.25:1) and background-100 (about 3.5:1 in both themes). The component can't see its background, so tertiary is the caller's call — on white only.
+- Nothing is interactive or focusable (beyond links you put in the description) and nothing animates.
+- **Link text must make sense on its own.** Screen-reader users often jump through a page's links out of context (the VoiceOver rotor, NVDA's links list), where six "much more" or "read more" links are indistinguishable. Name the destination — "all chart types", not "much more". The sentence around a vague link satisfies WCAG 2.4.4 (AA), but not the links list.
+- Don't pass `title` (the HTML attribute) to `Features`: it names the whole list, so AT reads it before "list, 6 items" and it shows as a tooltip over the grid.
+
 ### Link
 ```tsx
 <Link href="/page">Default link</Link>
@@ -1005,6 +1054,13 @@ All components use the same `iconLeft` / `iconRight` naming:
 - **Do** pass an icon component to `icon` for a custom bullet
 - **Don't** write bullets or numbers into the item text (`•`, `1.`) — the component draws them
 
+### Features
+- **Do** swap the icon per feature, and color it with `iconColor` when the section calls for it
+- **Do** keep `descriptionColor="tertiary"` for white/background-0 surfaces — on the page background or any grey it fails contrast
+- **Don't** resize the icon or restyle the text through `className`/`style` — colors go through `iconColor`/`descriptionColor`; size and weight are the design
+- **Do** end the title with a full stop, as in the design, so the run-in reads as a sentence
+- **Don't** put a `Heading` or `Typography` inside `title`/`children` — title and description share the paragraph's font and size
+
 ### Label
 - **Do** use `iconLeft={false}` for plain text labels like version numbers
 - **Don't** use Label for long text — it's designed for short status/category tags

package/LICENSE.txt

@@ -0,0 +1,11 @@
+Commercial use of this software is governed by the Highsoft Standard License Agreement
+found at:
+
+https://www.highcharts.com/license
+
+Non-commercial use of this software is governed by the Highsoft End-User License Agreement (EULA)
+found at:
+
+https://www.highcharts.com/license-eula
+
+By installing or using this software, you agree to these terms.

package/README.md

@@ -254,3 +254,7 @@ Not supported:
 ### Husky
 
 - Automatically lint your commit messages, code, and run tests upon committing or pushing.
+
+## License
+
+Highsoft UI is **not** open source. Commercial use is governed by the [Highsoft Standard License Agreement](https://www.highcharts.com/license); non-commercial use by the [Highsoft End-User License Agreement](https://www.highcharts.com/license-eula). See [`LICENSE.txt`](./LICENSE.txt).

package/dist/Features-BS-_cksu.js

@@ -0,0 +1,93 @@
+"use client";
+import { t as e } from "./clsx-BWCAbrjV.js";
+import { t } from "./Icon-DJTgdvsG.js";
+import { t as n } from "./Typography-DI1AkqiO.js";
+import { createContext as r, forwardRef as i, useContext as a } from "react";
+import { jsx as o, jsxs as s } from "react/jsx-runtime";
+var c = {
+	description: "T9BqNG_description",
+	features: "T9BqNG_features",
+	icon: "T9BqNG_icon",
+	item: "T9BqNG_item",
+	text: "T9BqNG_text",
+	title: "T9BqNG_title"
+};
+//#endregion
+//#region lib/components/Features/index.tsx
+function l({ iconColor: e, descriptionColor: t }) {
+	return {
+		...e && { "--hsui-feature-icon-color": n[e] },
+		...t && { "--hsui-feature-description-color": n[t] }
+	};
+}
+var u = r(!1), d = i(({ columns: t = 3, iconColor: n, descriptionColor: r, className: i, style: a, children: s, ...d }, f) => /* @__PURE__ */ o(u.Provider, {
+	value: !0,
+	children: /* @__PURE__ */ o("ul", {
+		className: e("hsui-features", i, c.features),
+		ref: f,
+		role: "list",
+		style: {
+			"--hsui-features-columns": t,
+			...l({
+				iconColor: n,
+				descriptionColor: r
+			}),
+			...a
+		},
+		...d,
+		children: s
+	})
+}));
+d.displayName = "Features";
+var f = i(({ icon: n, title: r, headingLevel: i, iconColor: d, descriptionColor: f, className: p, style: m, children: h, ...g }, _) => {
+	let v = a(u) ? "li" : "div", y = i ? `h${i}` : null;
+	return /* @__PURE__ */ s(v, {
+		className: e("hsui-feature-item", p, c.item),
+		ref: _,
+		style: {
+			...l({
+				iconColor: d,
+				descriptionColor: f
+			}),
+			...m
+		},
+		...g,
+		children: [/* @__PURE__ */ o("span", {
+			className: c.icon,
+			"aria-hidden": "true",
+			children: /* @__PURE__ */ o(t, {
+				name: n,
+				size: 20
+			})
+		}), y ? /* @__PURE__ */ s("div", {
+			className: c.text,
+			children: [
+				/* @__PURE__ */ o(y, {
+					className: c.title,
+					children: r
+				}),
+				" ",
+				/* @__PURE__ */ o("p", {
+					className: c.description,
+					children: h
+				})
+			]
+		}) : /* @__PURE__ */ s("p", {
+			className: c.text,
+			children: [
+				/* @__PURE__ */ o("strong", {
+					className: c.title,
+					children: r
+				}),
+				" ",
+				/* @__PURE__ */ o("span", {
+					className: c.description,
+					children: h
+				})
+			]
+		})]
+	});
+});
+f.displayName = "FeatureItem";
+//#endregion
+export { d as n, f as t };

package/dist/components/Features/index.js

@@ -0,0 +1,2 @@
+import { n as e, t } from "../../Features-BS-_cksu.js";
+export { t as FeatureItem, e as Features };