@imfusion/web-ui 0.6.4-dev.84.gbfc0d437 → 0.7.0

package/dist/{tabs-By5ir2pt.js → tabs-BS6rqrrA.js}

@@ -1,23 +1,23 @@
 import { t as e } from "./chunk-DmhlhrBa.js";
 import { cva as t } from "class-variance-authority";
 import { jsx as n } from "react/jsx-runtime";
-import { Children as r } from "react";
-import { Slider as i } from "@base-ui/react/slider";
-import { Switch as a } from "@base-ui/react/switch";
-import { Toggle as o } from "@base-ui/react/toggle";
-import { ToggleGroup as s } from "@base-ui/react/toggle-group";
-import { Tabs as c } from "@base-ui/react/tabs";
+import { Children as r, useCallback as i } from "react";
+import { Slider as a } from "@base-ui/react/slider";
+import { Switch as o } from "@base-ui/react/switch";
+import { Toggle as s } from "@base-ui/react/toggle";
+import { ToggleGroup as c } from "@base-ui/react/toggle-group";
+import { Tabs as l } from "@base-ui/react/tabs";
 //#region src/utils/resolve-state-props.ts
-function l(e, t) {
-	return e instanceof Function ? e(t) : e;
-}
 function u(e, t) {
-	return l(e, t);
+	return e instanceof Function ? e(t) : e;
 }
 function d(e, t) {
-	return l(e, t);
+	return u(e, t);
 }
-var f = {
+function f(e, t) {
+	return u(e, t);
+}
+var p = {
 	control: "imf-ui-slider-module-control",
 	indicator: "imf-ui-slider-module-indicator",
 	label: "imf-ui-slider-module-label",
@@ -25,30 +25,30 @@ var f = {
 	thumb: "imf-ui-slider-module-thumb",
 	track: "imf-ui-slider-module-track",
 	value: "imf-ui-slider-module-value"
-}, p = /* @__PURE__ */ e({
-	Control: () => C,
-	Indicator: () => T,
-	Label: () => x,
-	Root: () => b,
-	Thumb: () => E,
-	Track: () => w,
-	Value: () => S
-}), ee = t(f.root), m = t(f.label), h = t(f.value), g = t(f.control), _ = t(f.track), v = t(f.indicator), y = t(f.thumb);
-function b({ value: e, defaultValue: t, onValueChange: r, onValueCommitted: a, min: o = 0, max: s = 100, step: c = 1, largeStep: l = 10, minStepsBetweenValues: d = 0, disabled: f = !1, orientation: p = "horizontal", name: m, form: h, locale: g, thumbAlignment: _ = "edge", thumbCollisionBehavior: v = "push", format: y, ...b }) {
-	return /* @__PURE__ */ n(i.Root, {
+}, m = /* @__PURE__ */ e({
+	Control: () => w,
+	Indicator: () => E,
+	Label: () => S,
+	Root: () => x,
+	Thumb: () => D,
+	Track: () => T,
+	Value: () => C
+}), ee = t(p.root), h = t(p.label), g = t(p.value), _ = t(p.control), v = t(p.track), y = t(p.indicator), b = t(p.thumb);
+function x({ value: e, defaultValue: t, onValueChange: r, onValueCommitted: i, min: o = 0, max: s = 100, step: c = 1, largeStep: l = 10, minStepsBetweenValues: u = 0, disabled: f = !1, orientation: p = "horizontal", name: m, form: h, locale: g, thumbAlignment: _ = "edge", thumbCollisionBehavior: v = "push", format: y, ...b }) {
+	return /* @__PURE__ */ n(a.Root, {
 		...b,
 		"data-imf-ui-component": "Slider.Root",
 		"data-orientation": p,
-		className: (e) => ee({ className: u(b.className, e) }),
+		className: (e) => ee({ className: d(b.className, e) }),
 		value: e,
 		defaultValue: t,
 		onValueChange: r,
-		onValueCommitted: a,
+		onValueCommitted: i,
 		min: o,
 		max: s,
 		step: c,
 		largeStep: l,
-		minStepsBetweenValues: d,
+		minStepsBetweenValues: u,
 		disabled: f,
 		orientation: p,
 		name: m,
@@ -59,77 +59,77 @@ function b({ value: e, defaultValue: t, onValueChange: r, onValueCommitted: a, m
 		format: y
 	});
 }
-b.displayName = "Slider.Root";
-function x(e) {
-	return /* @__PURE__ */ n(i.Label, {
+x.displayName = "Slider.Root";
+function S(e) {
+	return /* @__PURE__ */ n(a.Label, {
 		...e,
 		"data-imf-ui-component": "Slider.Label",
-		className: (t) => m({ className: u(e.className, t) })
+		className: (t) => h({ className: d(e.className, t) })
 	});
 }
-x.displayName = "Slider.Label";
-function S({ children: e, ...t }) {
-	return /* @__PURE__ */ n(i.Value, {
+S.displayName = "Slider.Label";
+function C({ children: e, ...t }) {
+	return /* @__PURE__ */ n(a.Value, {
 		...t,
 		"data-imf-ui-component": "Slider.Value",
-		className: (e) => h({ className: u(t.className, e) }),
+		className: (e) => g({ className: d(t.className, e) }),
 		children: e
 	});
 }
-S.displayName = "Slider.Value";
-function C(e) {
-	return /* @__PURE__ */ n(i.Control, {
+C.displayName = "Slider.Value";
+function w(e) {
+	return /* @__PURE__ */ n(a.Control, {
 		...e,
 		"data-imf-ui-component": "Slider.Control",
-		className: (t) => g({ className: u(e.className, t) })
+		className: (t) => _({ className: d(e.className, t) })
 	});
 }
-C.displayName = "Slider.Control";
-function w(e) {
-	return /* @__PURE__ */ n(i.Track, {
+w.displayName = "Slider.Control";
+function T(e) {
+	return /* @__PURE__ */ n(a.Track, {
 		...e,
 		"data-imf-ui-component": "Slider.Track",
-		className: (t) => _({ className: u(e.className, t) })
+		className: (t) => v({ className: d(e.className, t) })
 	});
 }
-w.displayName = "Slider.Track";
-function T(e) {
-	return /* @__PURE__ */ n(i.Indicator, {
+T.displayName = "Slider.Track";
+function E(e) {
+	return /* @__PURE__ */ n(a.Indicator, {
 		...e,
 		"data-imf-ui-component": "Slider.Indicator",
-		className: (t) => v({ className: u(e.className, t) })
+		className: (t) => y({ className: d(e.className, t) })
 	});
 }
-T.displayName = "Slider.Indicator";
-function E({ index: e, ...t }) {
-	return /* @__PURE__ */ n(i.Thumb, {
+E.displayName = "Slider.Indicator";
+function D({ index: e, ...t }) {
+	return /* @__PURE__ */ n(a.Thumb, {
 		...t,
 		"data-imf-ui-component": "Slider.Thumb",
-		className: (e) => y({ className: u(t.className, e) }),
+		className: (e) => b({ className: d(t.className, e) }),
 		index: e
 	});
 }
-E.displayName = "Slider.Thumb";
-var D = {
+D.displayName = "Slider.Thumb";
+var O = {
 	root: "imf-ui-switch-module-root",
 	thumb: "imf-ui-switch-module-thumb"
 }, te = /* @__PURE__ */ e({
 	Root: () => A,
 	Thumb: () => j
-}), O = t(D.root), k = t(D.thumb);
+}), ne = t(O.root), k = t(O.thumb);
 function A(e) {
-	return /* @__PURE__ */ n(a.Root, {
+	return /* @__PURE__ */ n(o.Root, {
 		...e,
 		"data-imf-ui-component": "Switch.Root",
-		className: (t) => O({ className: u(e.className, t) })
+		className: (t) => ne({ className: d(e.className, t) })
 	});
 }
 A.displayName = "Switch.Root";
 function j(e) {
-	return /* @__PURE__ */ n(a.Thumb, {
+	return /* @__PURE__ */ n(o.Thumb, {
 		...e,
 		"data-imf-ui-component": "Switch.Thumb",
-		className: (t) => k({ className: u(e.className, t) })
+		className: (t) => k({ className: d(e.className, t) })
 	});
 }
 j.displayName = "Switch.Thumb";
@@ -147,14 +147,14 @@ function F({ style: e, children: t, ...r }) {
 		"--glyph-count": P(t),
 		"--max-glyphs": N
 	};
-	return /* @__PURE__ */ n(o, {
+	return /* @__PURE__ */ n(s, {
 		...r,
 		"data-imf-ui-component": "Toggle",
 		style: (t) => ({
 			...i,
-			...d(e, t)
+			...f(e, t)
 		}),
-		className: (e) => M({ className: u(r.className, e) }),
+		className: (e) => M({ className: d(r.className, e) }),
 		children: t
 	});
 }
@@ -162,10 +162,10 @@ function F({ style: e, children: t, ...r }) {
 //#region src/components/toggle-group/toggle-group.tsx
 var I = t({ root: "imf-ui-toggle-group-module-root" }.root);
 function L(e) {
-	return /* @__PURE__ */ n(s, {
+	return /* @__PURE__ */ n(c, {
 		...e,
 		"data-imf-ui-component": "ToggleGroup",
-		className: (t) => I({ className: u(e.className, t) })
+		className: (t) => I({ className: d(e.className, t) })
 	});
 }
 var R = {
@@ -318,39 +318,63 @@ var W = {
 }), K = t(W.list, { variants: { fill: {
 	true: W.listFill,
 	false: null
-} } }), q = t(W.root), ne = t(W.tab), re = t(W.indicator), ie = t(W.panelViewport), ae = t(W.panel);
+} } }), re = t(W.root), ie = t(W.tab), ae = t(W.indicator), oe = t(W.panelViewport), se = t(W.panel);
+function q(e, t) {
+	typeof e == "function" ? e(t) : e && (e.current = t);
+}
+function ce(e) {
+	let t = new ResizeObserver(() => {
+		let t = e.dataset.orientation === "vertical" ? e.scrollHeight > e.clientHeight : e.scrollWidth > e.clientWidth;
+		e.toggleAttribute("data-overflowing", t);
+	}), n = () => {
+		t.disconnect(), t.observe(e);
+		for (let n of e.children) t.observe(n);
+	}, r = new MutationObserver(n);
+	return r.observe(e, { childList: !0 }), n(), () => {
+		t.disconnect(), r.disconnect();
+	};
+}
 function J(e) {
-	return /* @__PURE__ */ n(c.Root, {
+	return /* @__PURE__ */ n(l.Root, {
 		...e,
 		"data-imf-ui-component": "Tabs.Root",
-		className: (t) => q({ className: u(e.className, t) })
+		className: (t) => re({ className: d(e.className, t) })
 	});
 }
 J.displayName = "Tabs.Root";
-function Y({ fill: e = !1, ...t }) {
-	return /* @__PURE__ */ n(c.List, {
-		...t,
+function Y({ fill: e = !1, ref: t, ...r }) {
+	let a = i((e) => {
+		if (!e) return;
+		q(t, e);
+		let n = ce(e);
+		return () => {
+			n(), q(t, null);
+		};
+	}, [t]);
+	return /* @__PURE__ */ n(l.List, {
+		...r,
+		ref: a,
 		"data-imf-ui-component": "Tabs.List",
-		className: (n) => K({
+		className: (t) => K({
 			fill: e,
-			className: u(t.className, n)
+			className: d(r.className, t)
 		})
 	});
 }
 Y.displayName = "Tabs.List";
 function X(e) {
-	return /* @__PURE__ */ n(c.Tab, {
+	return /* @__PURE__ */ n(l.Tab, {
 		...e,
 		"data-imf-ui-component": "Tabs.Tab",
-		className: (t) => ne({ className: u(e.className, t) })
+		className: (t) => ie({ className: d(e.className, t) })
 	});
 }
 X.displayName = "Tabs.Tab";
 function Z(e) {
-	return /* @__PURE__ */ n(c.Indicator, {
+	return /* @__PURE__ */ n(l.Indicator, {
 		...e,
 		"data-imf-ui-component": "Tabs.Indicator",
-		className: (t) => re({ className: u(e.className, t) })
+		className: (t) => ae({ className: d(e.className, t) })
 	});
 }
 Z.displayName = "Tabs.Indicator";
@@ -358,17 +382,17 @@ function Q(e) {
 	return /* @__PURE__ */ n("div", {
 		...e,
 		"data-imf-ui-component": "Tabs.PanelViewport",
-		className: ie({ className: e.className })
+		className: oe({ className: e.className })
 	});
 }
 Q.displayName = "Tabs.PanelViewport";
 function $(e) {
-	return /* @__PURE__ */ n(c.Panel, {
+	return /* @__PURE__ */ n(l.Panel, {
 		...e,
 		"data-imf-ui-component": "Tabs.Panel",
-		className: (t) => ae({ className: u(e.className, t) })
+		className: (t) => se({ className: d(e.className, t) })
 	});
 }
 $.displayName = "Tabs.Panel";
 //#endregion
-export { u as C, p as S, x as _, J as a, w as b, U as c, F as d, A as f, T as g, C as h, Q as i, B as l, te as m, Y as n, X as o, j as p, $ as r, G as s, Z as t, L as u, b as v, S as x, E as y };
+export { d as C, m as S, S as _, J as a, T as b, U as c, F as d, A as f, E as g, w as h, Q as i, B as l, te as m, Y as n, X as o, j as p, $ as r, G as s, Z as t, L as u, x as v, C as x, D as y };

package/docs/user-guide/AgentTooling.mdx

@@ -1,8 +1,9 @@
 import { Meta } from "@storybook/addon-docs/blocks";
+import { Typo } from "#/components/typo";
 
 <Meta title="User Guide/Agent Tooling" />
 
-# Agent tooling
+<Typo.Hero>Agent tooling</Typo.Hero>
 
 The package ships skills and lifecycle hooks for coding agents working in a project that uses `@imfusion/web-ui`. Both are
 optional, but highly recommended: the library is built to be set up and used through an agent.
@@ -53,12 +54,17 @@ reference just because the package is installed.
 With the hooks installed, the agent is pointed at the router at the start of every session. Without them, the agent usually
 picks it up from the skill's description; invoke it by name when it does not.
 
+The router answers library questions from the packaged user guides and hands other tasks to a skill. Setup, audit, and UX
+work from `imf-web-ui-conventions`, a knowledge skill that holds the ImFusion frontend conventions. Solid outlines are the
+skills you run; dashed boxes are knowledge the agent reads:
+
+<ConsumerLlmFrameworkDiagram />
+
 | Skill | Use it for |
 | --- | --- |
 | `/imf-web-ui` | The router: any UI task or library question. |
 | `/imf-web-ui-components` | Component props, parts, defaults, and icons. |
 | `/imf-web-ui-ux` | Choosing components and shaping screens or flows. |
-| `/imf-web-ui-conventions` | Code, styling, data, validation, and project conventions. |
 | `/imf-web-ui-setup` | First-time wiring and approved project setup. |
 | `/imf-web-ui-audit` | A read-only check of an existing project. |
 | `/imf-web-ui-update` | Updating the package and its installed tooling. |
@@ -124,4 +130,4 @@ The skills ship inside the package under `src/llms/skills/`, and `web-ui install
 also exposes generated component, token, and icon indexes for the lookup skill. User guides ship as readable MDX under
 `docs/user-guide/`; agents read them from the installed package without a running Storybook.
 
-<PageNav>Importing and composing components, then changing their look with tokens, CSS, and state attributes.</PageNav>
+<PageNav />

package/docs/user-guide/BrandAssets.mdx

@@ -1,10 +1,11 @@
 import { Meta } from "@storybook/addon-docs/blocks";
 import faviconUrl from "#/assets/public/favicon/favicon.svg";
 import ogUrl from "#/assets/public/favicon/og-image.png";
+import { Typo } from "#/components/typo";
 
 <Meta title="User Guide/Brand Assets" />
 
-# Brand assets
+<Typo.Hero>Brand assets</Typo.Hero>
 
 The package ships the ImFusion favicon set and a social sharing image as plain files. Import them through the `assets`
 subpath:
@@ -99,4 +100,4 @@ import iconUrl from "@imfusion/web-ui/assets/favicon/icon-512.png";
 The bundler returns the asset's URL for use in application code. Vite also processes `index.html` and rewrites supported
 asset references there. Use the plugin or the copy step when the files need stable public filenames.
 
-<PageNav>Where behavior comes from, what Web UI adds on top, and why components are split into parts.</PageNav>
+<PageNav />

package/docs/user-guide/Changelog.mdx

@@ -1,6 +1,7 @@
 import { Meta } from "@storybook/addon-docs/blocks";
 
 import { MarkdownDoc } from "#/storybook/docs/markdown-doc";
+import { DocParagraph } from "#/storybook/docs/screenshot-carousel/doc-paragraph";
 import { Separator } from "#/components/separator";
 import { Typo } from "#/components/typo";
 
@@ -8,16 +9,18 @@ import doc from "../../CHANGELOG.md?raw";
 
 <Meta title="User Guide/Changelog" />
 
-<MarkdownDoc sourcePath="CHANGELOG.md" components={{
-  h1: <Typo.Hero />,
-  h2: <Typo.H1 />,
-  h3: <Typo.H2 />,
-  h4: <Typo.H3 />,
-  p: <Typo.P variant="primary" />,
-  ul: <Typo.UnorderedList variant="primary" />,
-  hr: <Separator spacing="spacious" variant="dashed" />
-}}>
+<MarkdownDoc sourcePath="CHANGELOG.md" 
+  components={{
+    h1: <Typo.Hero />,
+    h2: <Typo.H1 />,
+    h3: <Typo.H2 />,
+    h4: <Typo.H3 variant="primary" />,
+    p: <DocParagraph variant="primary" />,
+    ul: <Typo.UnorderedList variant="primary" />,
+    hr: <Separator spacing="spacious" variant="dashed" />
+  }}
+>
   {doc}
 </MarkdownDoc>
 
-<PageNav>The token families, the control tokens that change them, and how to try them live.</PageNav>
+<PageNav />

package/docs/user-guide/GettingStarted.mdx

@@ -1,11 +1,12 @@
 import { Meta } from "@storybook/addon-docs/blocks";
+import { Typo } from "#/components/typo";
 
 <Meta title="User Guide/Getting Started" />
 
-# Getting started
+<Typo.Hero>Getting started</Typo.Hero>
 
-`@imfusion/web-ui` is the shared React UI library for ImFusion web apps. It provides accessible primitives, ImFusion tokens,
-and one public import surface.
+<Typo.Lead variant="primary">`@imfusion/web-ui` is the shared React UI library for ImFusion web apps. It provides accessible primitives, ImFusion tokens,
+and one public import surface.</Typo.Lead>
 
 The library is built to be set up and used through a coding agent. The recommended way to wire it up is to ask the agent,
 rather than follow a manual walkthrough.
@@ -67,4 +68,4 @@ you approve.
 
 Make the same two changes yourself: install the package, then add the stylesheet import and `WebUIProvider` shown above.
 
-<PageNav>Which agents the tooling supports, the skills it installs, and the hooks that point an agent at them.</PageNav>
+<PageNav />

package/docs/user-guide/HowItsBuilt.mdx

@@ -1,8 +1,9 @@
 import { Meta } from "@storybook/addon-docs/blocks";
+import { Typo } from "#/components/typo";
 
 <Meta title="User Guide/How It's Built" />
 
-# How it's built
+<Typo.Hero>How it's built</Typo.Hero>
 
 You can use the library without knowing its implementation. The snippets below are simplified from the library source.
 
@@ -110,4 +111,4 @@ The first form is pseudo-code; Web UI ships only the second. The
 [library-boundary topic](../../src/llms/skills/imf-web-ui-conventions/topics/library-boundary.md) has the consumer import and
 composition rules.
 
-<PageNav>What changed in each release, with migration steps for breaking changes.</PageNav>
+<PageNav />

package/docs/user-guide/Tokens.mdx

@@ -1,8 +1,9 @@
 import { Meta } from "@storybook/addon-docs/blocks";
+import { Typo } from "#/components/typo";
 
 <Meta title="Tokens/Docs" />
 
-# Tokens
+<Typo.Hero>Tokens</Typo.Hero>
 
 The library's theme is a set of CSS custom properties under `--imf-ui-*`.
 
@@ -69,7 +70,7 @@ brand shape axis. Shadow controls share one lighting model across components:
 - `--imf-ui-shadow-angle` sets the sun direction; the default `315deg` makes shadows fall down and right.
 - `--imf-ui-shadow-hardness` moves from diffuse (`0`) to crisp (`1`) edges without changing the elevation level.
 - `--imf-ui-shadow-spread` adds pixel spread to every shadow.
-- `--imf-ui-shadow-intensity` sets the lowest-level opacity; higher levels add one point each.
+- `--imf-ui-shadow-intensity` sets the opacity of every elevation level.
 - `--imf-ui-shadow-color` sets the cast color per scheme.
 
 Components consume these values through tokens. `node_modules/@imfusion/web-ui/src/llms/tokens.gen.json` lists the shipped
@@ -84,4 +85,4 @@ update the preview live; to keep a value, set that token in your application CSS
 - [Showcase](../../src/tokens/showcase.stories.tsx) applies the controls to real components.
 - [Reference](../../src/tokens/token-reference.stories.tsx) lists every generated token.
 
-<PageNav>What a primitive is, how compound parts compose, and what each component page shows.</PageNav>
+<PageNav />

package/docs/user-guide/UsagePatterns.mdx

@@ -1,8 +1,9 @@
 import { Meta } from "@storybook/addon-docs/blocks";
+import { Typo } from "#/components/typo";
 
 <Meta title="User Guide/Usage Patterns" />
 
-# Usage patterns
+<Typo.Hero>Usage patterns</Typo.Hero>
 
 ## Build with components
 
@@ -119,4 +120,4 @@ component colors cannot disagree with them:
 <WebUIProvider colorScheme="dark">{children}</WebUIProvider>
 ```
 
-<PageNav>The favicon set and social sharing image the package ships, and three ways to put them in an application.</PageNav>
+<PageNav />

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@imfusion/web-ui",
-  "version": "0.6.4-dev.84.gbfc0d437",
+  "version": "0.7.0",
   "description": "The official Web UI component library for ImFusion web apps",
   "author": "ImFusion GmbH",
   "homepage": "https://imfusion.com",
@@ -50,6 +50,7 @@
     "src/assets/public",
     "docs/assets/imfusion-banner.svg",
     "docs/user-guide",
+    "CHANGELOG.md",
     "THIRD_PARTY_NOTICES.md",
     "src/llms/install-templates",
     "src/docgen/doc.gen.json",

package/src/llms/skills/imf-web-ui-components/SKILL.md

@@ -13,13 +13,14 @@ Use the generated package indexes. They are smaller and more reliable than readi
 
 ## Component lookup
 
-1. Read the identity index:
+1. Read the identity index first, even when you already know the component's name: it gives the docgen key and the status.
 
    ```sh
    cat node_modules/@imfusion/web-ui/src/llms/llms.gen.txt
    ```
 
-   It lists each component's name, category, status, purpose, and docgen entry.
+   It lists each component's name, category, status, purpose, and docgen entry. The docgen entry is the prop source; the
+   `.d.ts` files in `dist/` carry no defaults and hide upstream props behind their base types.
 
 2. Read only the matching entry from docgen:
 

package/src/llms/skills/imf-web-ui-conventions/SKILL.md

@@ -4,6 +4,7 @@ description:
   "Apply the ImFusion frontend conventions to consumer code. Use this whenever a task writes a wrapper or custom UI, CSS,
   TypeScript, data fetching, validation, tests, project files, configuration, documentation, dependencies, or agent tooling
   in a project that uses @imfusion/web-ui. Read only the topic references that match the task."
+user-invocable: false
 ---
 
 # Frontend conventions

package/src/llms/skills/imf-web-ui-update/SKILL.md

@@ -94,14 +94,20 @@ commit workflow.
 
 ## Audit the consumer migration
 
-Start this phase only after the base update commit exists. Use the pre-update package metadata as the comparison baseline;
-don't assume a changelog exists. Compare the old and new package metadata, current generated docs, types, and examples. Run
-the full verification again.
+Start this phase only after the base update commit exists. Read `node_modules/@imfusion/web-ui/CHANGELOG.md`: every release
+section after the pre-update version, up to and including the new one. Each section's highlights, migration guide, and
+`Breaking` entries are the release's own account of what changed. Then compare the old and new package metadata, current
+generated docs, types, and examples, and run the full verification again.
 
-Report separately:
+This phase reads and reports: every file stays as it is until the person approves the migration. Open the report with the
+releases read, then report separately:
 
-- compatibility fixes required by changed imports or types;
+- migrations: every `Breaking` entry and migration step, mapped to the call sites it affects here and the fix the changelog
+  shows; a step with no matching code is reported as not applicable;
+- compatibility fixes required by changed imports or types that the changelog does not cover;
 - existing uses affected by a changed API or documented behavior;
+- suggestions: new features from the highlights and `Added` entries that fit what the project already builds, each with the
+  project code it would serve; a suggestion stays a proposal until the person asks for it;
 - custom components that overlap with a current Web UI primitive, with evidence and any behavior to preserve.
 
 Do not infer a replacement from a name. Inspect the implementation, styles, and call sites. If there are no findings, say so

package/src/llms/skills/imf-web-ui-ux/SKILL.md

@@ -25,7 +25,8 @@ no reason to reply. Ask one at a time, and stop once the choice is clear:
 4. What should users see when it is empty, loading, or failing?
 5. Is it a full page or part of another flow?
 
-If the prompt already answers a question, do not ask it again. Only when nobody is there to answer, or a question has gone
+A request that names the component, where it goes, and its initial state is specified: build it with no question. If the
+prompt already answers a question, do not ask it again. Only when nobody is there to answer, or a question has gone
 unanswered, make the conservative choice and state the assumption.
 
 ## Choose a surface

package/src/llms/tokens.gen.json

@@ -253,7 +253,7 @@
       },
       {
         "name": "--imf-ui-color-primary-bg-luma-dark",
-        "value": "0.65"
+        "value": "0.6"
       },
       {
         "name": "--imf-ui-color-primary-bg-luma-light",
@@ -265,7 +265,7 @@
       },
       {
         "name": "--imf-ui-color-primary-fg-luma-dark",
-        "value": "0.75"
+        "value": "0.8"
       },
       {
         "name": "--imf-ui-color-primary-fg-luma-light",
@@ -781,23 +781,23 @@
       },
       {
         "name": "--imf-ui-shadow-2",
-        "value": "calc(4px * var(--imf-ui-shadow-x)) calc(4px * var(--imf-ui-shadow-y)) calc(4px * var(--imf-ui-shadow-blur-scale)) var(--imf-ui-shadow-spread) color-mix(in oklch, var(--imf-ui-shadow-color) calc(var(--imf-ui-shadow-intensity) + 1%), transparent)"
+        "value": "calc(4px * var(--imf-ui-shadow-x)) calc(4px * var(--imf-ui-shadow-y)) calc(4px * var(--imf-ui-shadow-blur-scale)) var(--imf-ui-shadow-spread) color-mix(in oklch, var(--imf-ui-shadow-color) calc(var(--imf-ui-shadow-intensity)), transparent)"
       },
       {
         "name": "--imf-ui-shadow-3",
-        "value": "calc(6px * var(--imf-ui-shadow-x)) calc(6px * var(--imf-ui-shadow-y)) calc(6px * var(--imf-ui-shadow-blur-scale)) var(--imf-ui-shadow-spread) color-mix(in oklch, var(--imf-ui-shadow-color) calc(var(--imf-ui-shadow-intensity) + 2%), transparent)"
+        "value": "calc(6px * var(--imf-ui-shadow-x)) calc(6px * var(--imf-ui-shadow-y)) calc(6px * var(--imf-ui-shadow-blur-scale)) var(--imf-ui-shadow-spread) color-mix(in oklch, var(--imf-ui-shadow-color) calc(var(--imf-ui-shadow-intensity)), transparent)"
       },
       {
         "name": "--imf-ui-shadow-4",
-        "value": "calc(8px * var(--imf-ui-shadow-x)) calc(8px * var(--imf-ui-shadow-y)) calc(8px * var(--imf-ui-shadow-blur-scale)) var(--imf-ui-shadow-spread) color-mix(in oklch, var(--imf-ui-shadow-color) calc(var(--imf-ui-shadow-intensity) + 3%), transparent)"
+        "value": "calc(8px * var(--imf-ui-shadow-x)) calc(8px * var(--imf-ui-shadow-y)) calc(8px * var(--imf-ui-shadow-blur-scale)) var(--imf-ui-shadow-spread) color-mix(in oklch, var(--imf-ui-shadow-color) calc(var(--imf-ui-shadow-intensity)), transparent)"
       },
       {
         "name": "--imf-ui-shadow-5",
-        "value": "calc(12px * var(--imf-ui-shadow-x)) calc(12px * var(--imf-ui-shadow-y)) calc(12px * var(--imf-ui-shadow-blur-scale)) var(--imf-ui-shadow-spread) color-mix(in oklch, var(--imf-ui-shadow-color) calc(var(--imf-ui-shadow-intensity) + 4%), transparent)"
+        "value": "calc(12px * var(--imf-ui-shadow-x)) calc(12px * var(--imf-ui-shadow-y)) calc(12px * var(--imf-ui-shadow-blur-scale)) var(--imf-ui-shadow-spread) color-mix(in oklch, var(--imf-ui-shadow-color) calc(var(--imf-ui-shadow-intensity)), transparent)"
       },
       {
         "name": "--imf-ui-shadow-6",
-        "value": "calc(16px * var(--imf-ui-shadow-x)) calc(16px * var(--imf-ui-shadow-y)) calc(16px * var(--imf-ui-shadow-blur-scale)) var(--imf-ui-shadow-spread) color-mix(in oklch, var(--imf-ui-shadow-color) calc(var(--imf-ui-shadow-intensity) + 5%), transparent)"
+        "value": "calc(16px * var(--imf-ui-shadow-x)) calc(16px * var(--imf-ui-shadow-y)) calc(16px * var(--imf-ui-shadow-blur-scale)) var(--imf-ui-shadow-spread) color-mix(in oklch, var(--imf-ui-shadow-color) calc(var(--imf-ui-shadow-intensity)), transparent)"
       },
       {
         "name": "--imf-ui-shadow-angle",
@@ -817,7 +817,7 @@
       },
       {
         "name": "--imf-ui-shadow-intensity",
-        "value": "12%"
+        "value": "15%"
       },
       {
         "name": "--imf-ui-shadow-softness",