@imfusion/web-ui 0.10.1-dev.33.g8275f59f → 0.10.1-dev.37.g9147f90f

package/dist/{tabs-Do0BFL12.js → tabs-CU46aGud.js}

@@ -3,26 +3,26 @@ import { mh as r, pM as i } from "./icons-BsK_o-Cb.js";
 import { t as a } from "./meta-V_KyLeGn.js";
 import { cva as o } from "class-variance-authority";
 import { jsx as s, jsxs as c } from "react/jsx-runtime";
-import { Children as l, useCallback as u } from "react";
-import { Switch as d } from "@base-ui/react/switch";
-import { Toggle as f } from "@base-ui/react/toggle";
-import { ToggleGroup as p } from "@base-ui/react/toggle-group";
-import { Tabs as m } from "@base-ui/react/tabs";
-var h = {
+import { Children as l, createContext as u, useCallback as d, useContext as f } from "react";
+import { Toggle as p } from "@base-ui/react/toggle";
+import { ToggleGroup as ee } from "@base-ui/react/toggle-group";
+import { Switch as m } from "@base-ui/react/switch";
+import { Tabs as h } from "@base-ui/react/tabs";
+var g = {
 	flat: "imf-ui-kbd-module-flat",
 	icon: "imf-ui-kbd-module-icon",
 	primary: "imf-ui-kbd-module-primary",
 	root: "imf-ui-kbd-module-root"
-}, g = o(h.root, { variants: { variant: {
+}, _ = o(g.root, { variants: { variant: {
 	default: null,
-	primary: h.primary,
-	flat: h.flat
+	primary: g.primary,
+	flat: g.flat
 } } });
-function _({ variant: e = "default", icon: t = !1, children: n, ...a }) {
+function v({ variant: e = "default", icon: t = !1, children: n, ...a }) {
 	return /* @__PURE__ */ c("kbd", {
 		...a,
 		"data-imf-ui-component": "Kbd",
-		className: g({
+		className: _({
 			variant: e,
 			className: a.className
 		}),
@@ -30,20 +30,20 @@ function _({ variant: e = "default", icon: t = !1, children: n, ...a }) {
 			glyph: r,
 			strokeWidth: 2,
 			"aria-hidden": !0,
-			className: h.icon
+			className: g.icon
 		}), n]
 	});
 }
 //#endregion
 //#region src/components/kbd/kbd.meta.ts
-var ee = {
+var te = {
 	name: "Kbd",
 	category: a.display,
 	status: "experimental",
 	description: "Shows a keyboard key or shortcut, such as the letter that activates a button. Also called a key hint; Button and Toggle render it through their `shortcut` prop.",
 	origin: "native",
 	internalDependencies: ["Icon"]
-}, v = {
+}, y = {
 	ctrl: "Control",
 	control: "Control",
 	cmd: "Meta",
@@ -58,75 +58,94 @@ var ee = {
 	esc: "Escape",
 	escape: "Escape"
 };
-function y(e) {
+function b(e) {
 	let t = e.trim().split(/\s+/).filter(Boolean);
-	if (t.length !== 0) return t.map((e) => v[e.toLowerCase()] ?? (e.length === 1 ? e.toUpperCase() : e)).join("+");
+	if (t.length !== 0) return t.map((e) => y[e.toLowerCase()] ?? (e.length === 1 ? e.toUpperCase() : e)).join("+");
 }
-var b = {
-	root: "imf-ui-switch-module-root",
-	thumb: "imf-ui-switch-module-thumb"
-}, x = /* @__PURE__ */ t({
-	Root: () => w,
-	Thumb: () => T
-}), S = o(b.root), C = o(b.thumb);
-function w(e) {
-	return /* @__PURE__ */ s(d.Root, {
-		...e,
-		"data-imf-ui-component": "Switch.Root",
-		className: (t) => S({ className: n(e.className, t) })
-	});
-}
-w.displayName = "Switch.Root";
-function T(e) {
-	return /* @__PURE__ */ s(d.Thumb, {
-		...e,
-		"data-imf-ui-component": "Switch.Thumb",
-		className: (t) => C({ className: n(e.className, t) })
-	});
-}
-T.displayName = "Switch.Thumb";
-var E = {
+//#endregion
+//#region src/components/toggle-group/toggle-group-size.ts
+var x = u("md"), S = {
 	root: "imf-ui-toggle-module-root",
-	shortcut: "imf-ui-toggle-module-shortcut"
-}, te = o(E.root), D = 2;
-function O(e) {
+	shortcut: "imf-ui-toggle-module-shortcut",
+	sizeSm: "imf-ui-toggle-module-sizeSm"
+}, C = o(S.root, { variants: { size: {
+	sm: S.sizeSm,
+	md: null
+} } }), w = 2;
+function T(e) {
 	let t = 0;
 	return l.forEach(e, (e) => {
-		typeof e == "string" || typeof e == "number" ? t += String(e).trim().length : e != null && typeof e != "boolean" && (t += D);
+		typeof e == "string" || typeof e == "number" ? t += String(e).trim().length : e != null && typeof e != "boolean" && (t += w);
 	}), t;
 }
-function k({ style: t, shortcut: r, children: i, ...a }) {
-	let o = {
-		"--glyph-count": O(i),
-		"--max-glyphs": D
+function ne({ style: t, shortcut: r, size: i, children: a, ...o }) {
+	let l = f(x), u = {
+		"--glyph-count": T(a),
+		"--max-glyphs": w
 	};
-	return /* @__PURE__ */ c(f, {
-		"aria-keyshortcuts": r ? y(r) : void 0,
-		...a,
+	return /* @__PURE__ */ c(p, {
+		"aria-keyshortcuts": r ? b(r) : void 0,
+		...o,
 		"data-imf-ui-component": "Toggle",
 		style: (n) => ({
-			...o,
+			...u,
 			...e(t, n)
 		}),
-		className: (e) => te({ className: n(a.className, e) }),
-		children: [i, r && /* @__PURE__ */ s(_, {
+		className: (e) => C({
+			size: i ?? l,
+			className: n(o.className, e)
+		}),
+		children: [a, r && /* @__PURE__ */ s(v, {
 			variant: "flat",
-			className: E.shortcut,
+			className: S.shortcut,
 			"aria-hidden": !0,
 			children: r
 		})]
 	});
 }
-//#endregion
-//#region src/components/toggle-group/toggle-group.tsx
-var A = o({ root: "imf-ui-toggle-group-module-root" }.root);
+var E = {
+	root: "imf-ui-toggle-group-module-root",
+	sizeSm: "imf-ui-toggle-group-module-sizeSm"
+}, re = o(E.root, { variants: { size: {
+	sm: E.sizeSm,
+	md: null
+} } });
+function ie({ size: e = "md", ...t }) {
+	return /* @__PURE__ */ s(x.Provider, {
+		value: e ?? "md",
+		children: /* @__PURE__ */ s(ee, {
+			...t,
+			"data-imf-ui-component": "ToggleGroup",
+			className: (r) => re({
+				size: e,
+				className: n(t.className, r)
+			})
+		})
+	});
+}
+var D = {
+	root: "imf-ui-switch-module-root",
+	thumb: "imf-ui-switch-module-thumb"
+}, ae = /* @__PURE__ */ t({
+	Root: () => A,
+	Thumb: () => j
+}), O = o(D.root), k = o(D.thumb);
+function A(e) {
+	return /* @__PURE__ */ s(m.Root, {
+		...e,
+		"data-imf-ui-component": "Switch.Root",
+		className: (t) => O({ className: n(e.className, t) })
+	});
+}
+A.displayName = "Switch.Root";
 function j(e) {
-	return /* @__PURE__ */ s(p, {
+	return /* @__PURE__ */ s(m.Thumb, {
 		...e,
-		"data-imf-ui-component": "ToggleGroup",
-		className: (t) => A({ className: n(e.className, t) })
+		"data-imf-ui-component": "Switch.Thumb",
+		className: (t) => k({ className: n(e.className, t) })
 	});
 }
+j.displayName = "Switch.Thumb";
 var M = {
 	alignCenter: "imf-ui-row-module-alignCenter",
 	alignEnd: "imf-ui-row-module-alignEnd",
@@ -294,7 +313,7 @@ function q(e) {
 	};
 }
 function J(e) {
-	return /* @__PURE__ */ s(m.Root, {
+	return /* @__PURE__ */ s(h.Root, {
 		...e,
 		"data-imf-ui-component": "Tabs.Root",
 		className: (t) => V({ className: n(e.className, t) })
@@ -302,7 +321,7 @@ function J(e) {
 }
 J.displayName = "Tabs.Root";
 function Y({ fill: e = !1, ref: t, ...r }) {
-	let i = u((e) => {
+	let i = d((e) => {
 		if (!e) return;
 		K(t, e);
 		let n = q(e);
@@ -310,7 +329,7 @@ function Y({ fill: e = !1, ref: t, ...r }) {
 			n(), K(t, null);
 		};
 	}, [t]);
-	return /* @__PURE__ */ s(m.List, {
+	return /* @__PURE__ */ s(h.List, {
 		...r,
 		ref: i,
 		"data-imf-ui-component": "Tabs.List",
@@ -322,7 +341,7 @@ function Y({ fill: e = !1, ref: t, ...r }) {
 }
 Y.displayName = "Tabs.List";
 function X(e) {
-	return /* @__PURE__ */ s(m.Tab, {
+	return /* @__PURE__ */ s(h.Tab, {
 		...e,
 		"data-imf-ui-component": "Tabs.Tab",
 		className: (t) => H({ className: n(e.className, t) })
@@ -330,7 +349,7 @@ function X(e) {
 }
 X.displayName = "Tabs.Tab";
 function Z(e) {
-	return /* @__PURE__ */ s(m.Indicator, {
+	return /* @__PURE__ */ s(h.Indicator, {
 		...e,
 		"data-imf-ui-component": "Tabs.Indicator",
 		className: (t) => U({ className: n(e.className, t) })
@@ -346,7 +365,7 @@ function Q(e) {
 }
 Q.displayName = "Tabs.PanelViewport";
 function $(e) {
-	return /* @__PURE__ */ s(m.Panel, {
+	return /* @__PURE__ */ s(h.Panel, {
 		...e,
 		"data-imf-ui-component": "Tabs.Panel",
 		className: (t) => G({ className: n(e.className, t) })
@@ -354,4 +373,4 @@ function $(e) {
 }
 $.displayName = "Tabs.Panel";
 //#endregion
-export { _, J as a, L as c, k as d, w as f, ee as g, y as h, Q as i, P as l, x as m, Y as n, X as o, T as p, $ as r, z as s, Z as t, j as u };
+export { v as _, J as a, L as c, j as d, ae as f, te as g, b as h, Q as i, P as l, ne as m, Y as n, X as o, ie as p, $ as r, z as s, Z as t, A as u };

package/docs/user-guide/UsagePatterns.mdx

@@ -120,4 +120,8 @@ component colors cannot disagree with them:
 <WebUIProvider colorScheme="dark">{children}</WebUIProvider>
 ```
 
+To let the user pick Light, System, or Dark, place a
+[`ColorSchemeToggle`](?path=/docs/primitives-inputs-colorschemetoggle--docs). It stores the choice and works only while
+the provider's `colorScheme` is unset.
+
 <PageNav />

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@imfusion/web-ui",
-  "version": "0.10.1-dev.33.g8275f59f",
+  "version": "0.10.1-dev.37.g9147f90f",
   "description": "The official Web UI component library for ImFusion web apps",
   "author": "ImFusion GmbH",
   "homepage": "https://imfusion.com",
@@ -11,7 +11,7 @@
   },
   "type": "module",
   "engines": {
-    "node": ">=24"
+    "node": "^22.22.1 || ^24.11 || >=26"
   },
   "imports": {
     "#/*": "./src/*",

package/src/docgen/doc.gen.json

@@ -1377,6 +1377,99 @@
       }
     ]
   },
+  "color-scheme-toggle": {
+    "root": {
+      "name": "ColorSchemeToggle",
+      "description": "ColorSchemeToggle - lets the user pick Light, System, or Dark. It reads and stores the preference through\n`useColorScheme`, so placing it is enough. System stays pressed while the page follows the operating system.",
+      "props": [
+        {
+          "name": "className",
+          "required": false,
+          "type": "string | ((state: ToggleGroupState) => string)",
+          "defaultValue": null,
+          "description": "CSS class applied to the element, or a function that\nreturns a class based on the component's state."
+        },
+        {
+          "name": "darkLabel",
+          "required": false,
+          "type": "string",
+          "defaultValue": "Dark",
+          "description": "Text of the segment that picks the dark scheme."
+        },
+        {
+          "name": "disabled",
+          "required": false,
+          "type": "boolean",
+          "defaultValue": "false",
+          "description": "Whether the toggle group should ignore user interaction."
+        },
+        {
+          "name": "label",
+          "required": false,
+          "type": "string",
+          "defaultValue": "Color scheme",
+          "description": "Accessible name of the group."
+        },
+        {
+          "name": "lightLabel",
+          "required": false,
+          "type": "string",
+          "defaultValue": "Light",
+          "description": "Text of the segment that picks the light scheme."
+        },
+        {
+          "name": "loopFocus",
+          "required": false,
+          "type": "boolean",
+          "defaultValue": "true",
+          "description": "Whether to loop keyboard focus back to the first item\nwhen the end of the list is reached while using the arrow keys."
+        },
+        {
+          "name": "orientation",
+          "required": false,
+          "type": "Orientation",
+          "defaultValue": "horizontal",
+          "description": ""
+        },
+        {
+          "name": "ref",
+          "required": false,
+          "type": "Ref<HTMLDivElement>",
+          "defaultValue": null,
+          "description": "Allows getting a ref to the component instance.\nOnce the component unmounts, React will set `ref.current` to `null`\n(or call the ref with `null` if you passed a callback ref).\n@see {@link https://react.dev/learn/referencing-values-with-refs#refs-and-the-dom React Docs}"
+        },
+        {
+          "name": "render",
+          "required": false,
+          "type": "| ReactElement<\n    unknown,\n    string | JSXElementConstructor<any>\n  >\n| ComponentRenderFn<HTMLProps, ToggleGroupState>",
+          "defaultValue": null,
+          "description": "Allows you to replace the component's HTML element\nwith a different tag, or compose it with another component.\n\nAccepts a `ReactElement` or a function that returns the element to render."
+        },
+        {
+          "name": "size",
+          "required": false,
+          "type": "\"sm\" | \"md\" | null",
+          "defaultValue": null,
+          "description": ""
+        },
+        {
+          "name": "style",
+          "required": false,
+          "type": "| CSSProperties\n| ((state: ToggleGroupState) => CSSProperties)",
+          "defaultValue": null,
+          "description": "Style applied to the element, or a function that\nreturns a style object based on the component's state."
+        },
+        {
+          "name": "systemLabel",
+          "required": false,
+          "type": "string",
+          "defaultValue": "System",
+          "description": "Text of the segment that follows the operating system."
+        }
+      ]
+    },
+    "subComponents": []
+  },
   "copy-button": {
     "root": {
       "name": "CopyButton",
@@ -6622,6 +6715,13 @@
           "type": "SelectValueType<Value, Multiple> | null",
           "defaultValue": null,
           "description": "The value of the select. Use when controlled."
+        },
+        {
+          "name": "width",
+          "required": false,
+          "type": "\"auto\" | \"wide\" | \"full\" | null",
+          "defaultValue": "auto",
+          "description": "Trigger width: `auto` keeps the compact minimum; `wide` raises it; `full` fills the parent."
         }
       ]
     },
@@ -9290,6 +9390,13 @@
           "defaultValue": null,
           "description": "Key hint shown in the top corner at the end of the line, such as `\"P\"` or `\"Ctrl Z\"`. It also sets\n`aria-keyshortcuts` in its notation (`Control+Z`), which an explicit\n`aria-keyshortcuts` prop overrides. Display only: bind the key in the app, for example with `useHotkey` from TanStack Hotkeys."
         },
+        {
+          "name": "size",
+          "required": false,
+          "type": "\"sm\" | \"md\" | null",
+          "defaultValue": null,
+          "description": "Defaults to the enclosing `ToggleGroup`'s `size`, or `\"md\"` standalone."
+        },
         {
           "name": "style",
           "required": false,
@@ -9311,7 +9418,7 @@
   "toggle-group": {
     "root": {
       "name": "ToggleGroup",
-      "description": "ToggleGroup - a set of connected `Toggle`s sharing one value. Single-select by\ndefault (a segmented control); set `multiple` for multi-select. Compose one\n`Toggle` per segment, each with a `value`.",
+      "description": "ToggleGroup - a set of connected `Toggle`s sharing one value. Single-select by\ndefault (a segmented control); set `multiple` for multi-select. Compose one\n`Toggle` per segment, each with a `value`. `size` applies to every toggle in the group.",
       "props": [
         {
           "name": "className",
@@ -9376,6 +9483,13 @@
           "defaultValue": null,
           "description": "Allows you to replace the component's HTML element\nwith a different tag, or compose it with another component.\n\nAccepts a `ReactElement` or a function that returns the element to render."
         },
+        {
+          "name": "size",
+          "required": false,
+          "type": "\"sm\" | \"md\" | null",
+          "defaultValue": "md",
+          "description": ""
+        },
         {
           "name": "style",
           "required": false,

package/src/llms/llms.gen.txt

@@ -73,6 +73,11 @@ Show-and-hide region for secondary content such as FAQs, settings, or details. A
 - props: node_modules/@imfusion/web-ui/src/docgen/doc.gen.json -> .collapsible (jq: jq '.collapsible' node_modules/@imfusion/web-ui/src/docgen/doc.gen.json)
 - further reading (usage/anatomy, not props): https://base-ui.com/react/components/collapsible.md
 
+## ColorSchemeToggle
+- category: Inputs, status: experimental
+Light, System, and Dark segments that set and remember the page's color scheme. Also called an appearance or theme switch; built on ToggleGroup, which is the choice for any other segmented selection.
+- props: node_modules/@imfusion/web-ui/src/docgen/doc.gen.json -> .color-scheme-toggle (jq: jq '.color-scheme-toggle' node_modules/@imfusion/web-ui/src/docgen/doc.gen.json)
+
 ## CopyButton
 - category: Buttons, status: stable
 Copies a value to the clipboard and briefly shows confirmation. Also called a copy-to-clipboard button; commonly used with Code.Block.

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

@@ -70,8 +70,10 @@ Cross-topic invalidation can then use `keys.topic` instead of rebuilding a prefi
 
 ## Options factories and naming
 
-Queries use `get*` names such as `getAll`, `getById`, and `getDetails`. Mutations use bare verbs such as `update` or
-`delete`. Do not add a topic prefix or `Options` suffix; `context.api.user.getDetails()` already supplies the context.
+Queries use `get*` names such as `getAll`, `getById`, and `getDetails`. Mutations use verbs such as `update` or `delete`. A
+name never repeats its topic or adds an `Options` suffix; `context.api.user.getDetails()` already supplies the context. When
+a topic has more than one mutation target, add the sub-resource to the verb: `api.projects.removeMember(projectId)` and
+`api.projects.setMemberPermissions(projectId)`, where a bare `remove` would read as deleting the project.
 
 A query factory owns its key and parsing:
 

package/src/llms/skills/imf-web-ui-conventions/topics/library-setup.md

@@ -29,6 +29,9 @@ instead, so component colors cannot resolve against the opposite scheme:
 <WebUIProvider colorScheme="dark">
 ```
 
+To let the user pick Light, System, or Dark, place a `ColorSchemeToggle`. It stores the choice and works only while the
+provider's `colorScheme` is unset.
+
 ## Symptoms of broken setup
 
 - Unstyled components usually mean the `styles.css` import is missing.