@imfusion/web-ui 0.11.1-dev.75.g4f81d8fd → 0.11.1-dev.87.g55c5e1df

package/CHANGELOG.md

@@ -10,6 +10,15 @@
 
 ### Added
 
+- `RichLink` takes `size="sm"` for dense lists: 6px block padding, a 32px tile, and a closer gap between glyph and text. The default `md` is unchanged.
+  [RichLink](src/components/rich-link/rich-link.mdx) — Nikolaus Brunner <brunner@imfusion.com>
+- `Code.Inline` takes `concealable` to hide its content behind an eye button, hidden by default. `concealed` and
+  `onConcealedChange` control it, `defaultConcealed` sets its start, and `concealedLength` sets the placeholder width before a
+  value arrives. `copyConcealed` keeps copy working while hidden, `toggleLabel` names the eye button, and `size` (`sm`, `md`,
+  `lg`) sets the chip height.
+  [Code](src/components/code/code.mdx) — Nikolaus Brunner <brunner@imfusion.com>
+- `Avatar` takes `size="xs"`, 16px with smaller initials, to sit in the slot of a 16px icon or swatch in a list row.
+  [Avatar](src/components/avatar/avatar.mdx) — Nikolaus Brunner <brunner@imfusion.com>
 - `Input` takes `shortcut` to show a key such as `/` or `Ctrl K` at its end and set `aria-keyshortcuts`. The key hides before the
   text or placeholder reaches it, and while a search input shows its clear button. With a shortcut, `className` also reaches
   a wrapping element. `shortcut=""` keeps that wrapper with no key shown, so a hint that switches on with state does not
@@ -96,6 +105,23 @@
 
 ### Changed
 
+- `Menu`, `Popover`, `Select`, `Combobox` and `Autocomplete` positioners default to `sideOffset={8}`, so a popup sits clearly apart
+  from its trigger and all five open at the same distance. [Menu](src/components/menu/menu.mdx) — Nikolaus Brunner
+  <brunner@imfusion.com>
+- `Popover.Popup` draws its edge like `Menu`: a 1px outline over `shadow-4`, so the translucent `fg-minor` edge reads the same
+  on both. [Popover](src/components/popover/popover.mdx) — Nikolaus Brunner <brunner@imfusion.com>
+- A neutral `Popover.Popup` draws its edge and arrow in `fg-minor`, the quiet edge of `Card`, `Menu` and the `Select` popup;
+  its title stays `fg-main`. The primary, positive and negative variants keep their colour. [Popover](src/components/popover/popover.mdx)
+  — Nikolaus Brunner <brunner@imfusion.com>
+- `Typo.H1` is larger: it scales with the viewport up to a cap below `Typo.Hero`, so the H2, H1, and Hero steps read as one
+  ladder. It has its own `--imf-ui-font-size-h1` and `--imf-ui-font-lineheight-h1` tokens; `H2` through `H6` are unchanged.
+  [Typo](src/components/typo/typo.mdx) — Nikolaus Brunner <brunner@imfusion.com>
+- `--imf-ui-font-family-mono` defaults to CoFo Sans Mono and sets interface text in capitals: labels, buttons, eyebrows, and
+  table headers. Code has its own `--imf-ui-font-family-code`, which defaults to Paper Mono and sets code blocks and inline
+  code. The `Chip`, `Tabs`, `Callout`, `Popover`, `AccountCard`, `Typo.Eyebrow`, and `Code` language-tag labels moved from code
+  to mono. [Conventions](docs/conventions.md) — Nikolaus Brunner <brunner@imfusion.com>
+- `Select.Trigger` shows the chosen value in the body family and its own case, like the value in an `Input`. Labels and group
+  labels keep their mono capitals. [Select](src/components/select/select.mdx) — Nikolaus Brunner <brunner@imfusion.com>
 - In dark mode, primary fills are lighter and primary text darker, so a primary heading and a primary button read as one
   blue: `--imf-ui-color-primary-bg-luma-dark` defaults to 0.66 and `--imf-ui-color-primary-fg-luma-dark` to 0.72.
   [Color system](docs/color-system.md) — Nikolaus Brunner <brunner@imfusion.com>
@@ -205,6 +231,11 @@
 
 ### Fixed
 
+- `Toggle` sets its capitals in the mono family, like every other uppercase label.
+  [Toggle](src/components/toggle/toggle.mdx) — Nikolaus Brunner <brunner@imfusion.com>
+- An md `ToggleGroup` is as tall as an md `Input` or `Button` (40px): its toggles shrink to 28px inside the frame, so a group
+  beside a field lines up with it. A standalone `Toggle` keeps its height. [ToggleGroup](src/components/toggle-group/toggle-group.mdx)
+  — Nikolaus Brunner <brunner@imfusion.com>
 - `Drawer.Title` wraps a long title instead of running past the panel edge.
   [Drawer](src/components/drawer/drawer.stories.tsx#LongTitle) — Nikolaus Brunner <brunner@imfusion.com>
 - `Card` describes its coloured fills correctly: they set the background, and their content takes `oncolor` variants. —

package/dist/code-BtxeEf9P.js

@@ -0,0 +1,185 @@
+import { t as e } from "./rolldown-runtime-Dy4uBu1J.js";
+import { Hu as t, Vu as n, Xo as r, ja as i, vM as a } from "./icons-CMetKl2x.js";
+import { t as o } from "./meta-V_KyLeGn.js";
+import { a as s, i as c, n as l, o as u, s as d } from "./scroll-area-CXQ_SxPX.js";
+import { cva as f, cx as p } from "class-variance-authority";
+import { Fragment as m, jsx as h, jsxs as g } from "react/jsx-runtime";
+import { Children as _, isValidElement as v, useCallback as y, useEffect as b, useRef as x, useState as S } from "react";
+import { Toggle as C } from "@base-ui/react/toggle";
+import { useRender as w } from "@base-ui/react/use-render";
+import { mergeProps as T } from "@base-ui/react/merge-props";
+//#region src/hooks/use-clipboard.ts
+function E({ timeout: e = 1500 } = {}) {
+	let [t, n] = S(!1), r = x(void 0);
+	return b(() => () => clearTimeout(r.current), []), {
+		copied: t,
+		copy: y((t) => {
+			navigator.clipboard.writeText(t).then(() => {
+				n(!0), clearTimeout(r.current), r.current = setTimeout(() => n(!1), e);
+			});
+		}, [e])
+	};
+}
+var D = {
+	block: "imf-ui-code-module-block",
+	copy: "imf-ui-code-module-copy",
+	inline: "imf-ui-code-module-inline",
+	inlineCopy: "imf-ui-code-module-inlineCopy",
+	inlineEye: "imf-ui-code-module-inlineEye",
+	inlineLink: "imf-ui-code-module-inlineLink",
+	language: "imf-ui-code-module-language",
+	pending: "imf-ui-code-module-pending",
+	placeholder: "imf-ui-code-module-placeholder",
+	pre: "imf-ui-code-module-pre",
+	pulse: "imf-ui-code-module-pulse",
+	separator: "imf-ui-code-module-separator",
+	sizeLg: "imf-ui-code-module-sizeLg",
+	sizeMd: "imf-ui-code-module-sizeMd"
+};
+//#endregion
+//#region src/components/code/text-of.ts
+function O(e) {
+	let t = "";
+	return _.forEach(e, (e) => {
+		typeof e == "string" || typeof e == "number" ? t += String(e) : v(e) && (t += O(e.props.children));
+	}), t;
+}
+//#endregion
+//#region src/components/code/code.tsx
+var k = /* @__PURE__ */ e({
+	Block: () => N,
+	Inline: () => j,
+	InlineLink: () => M
+}), A = f(D.inline, { variants: { size: {
+	sm: null,
+	md: D.sizeMd,
+	lg: D.sizeLg
+} } });
+function j({ copyable: e = !1, concealable: o = !1, concealed: s, onConcealedChange: c, defaultConcealed: l = !0, concealedLength: u = 8, copyConcealed: d = !1, size: f = "sm", toggleLabel: v = "Show", children: y, render: b, ...k }) {
+	let [j, M] = S(l), N = o && (s ?? j), { copied: P, copy: F } = E(), I = x(null), L = P ? i : r, R = O(y), z = _.toArray(y).length === 0, B = o && (N || z), V = { "--conceal-length": R.length || u }, H = o && (z || N && !d);
+	function U(e) {
+		s === void 0 && M(e), c?.(e);
+	}
+	return w({
+		defaultTagName: "code",
+		render: b,
+		props: {
+			...T(k, {
+				className: A({ size: f }),
+				children: /* @__PURE__ */ g(m, { children: [
+					o && /* @__PURE__ */ h(C, {
+						className: D.inlineEye,
+						pressed: !N,
+						onPressedChange: (e) => U(!e),
+						"aria-label": v,
+						children: /* @__PURE__ */ h(a, {
+							glyph: N ? n : t,
+							size: 12,
+							strokeWidth: 2,
+							"aria-hidden": !0
+						})
+					}),
+					o && /* @__PURE__ */ h("span", { className: D.separator }),
+					B ? /* @__PURE__ */ h("span", {
+						role: "img",
+						"aria-label": "Hidden",
+						className: p(D.placeholder, !N && D.pending),
+						style: V
+					}) : /* @__PURE__ */ h("span", {
+						ref: I,
+						children: y
+					}),
+					e && /* @__PURE__ */ h("span", { className: D.separator }),
+					e && /* @__PURE__ */ h("button", {
+						type: "button",
+						className: D.inlineCopy,
+						"data-copied": P || void 0,
+						"aria-label": P ? "Copied" : "Copy",
+						disabled: H,
+						onClick: () => F(I.current?.textContent ?? R),
+						children: /* @__PURE__ */ h(a, {
+							glyph: L,
+							size: 12,
+							strokeWidth: 2,
+							"aria-hidden": !0
+						})
+					})
+				] })
+			}),
+			"data-imf-ui-component": "Code.Inline",
+			"data-concealed": N || void 0,
+			"data-size": f
+		}
+	});
+}
+j.displayName = "Code.Inline";
+function M({ kind: e = "external", ...t }) {
+	let n = e === "external" ? {
+		target: "_blank",
+		rel: "noreferrer"
+	} : {};
+	return w({
+		defaultTagName: "a",
+		render: t.render,
+		props: {
+			...T(n, t, {
+				className: p(D.inline, D.inlineLink, t.className),
+				children: t.children
+			}),
+			"data-imf-ui-component": "Code.InlineLink",
+			"data-kind": e
+		}
+	});
+}
+M.displayName = "Code.InlineLink";
+function N({ className: e, language: t, hideCopy: n = !1, children: o, ...f }) {
+	let { copied: m, copy: _ } = E(), v = x(null), y = m ? i : r;
+	return /* @__PURE__ */ g("div", {
+		"data-imf-ui-component": "Code.Block",
+		className: p(D.block, e),
+		children: [
+			t != null && /* @__PURE__ */ h("span", {
+				className: D.language,
+				children: t
+			}),
+			!n && /* @__PURE__ */ h("button", {
+				type: "button",
+				className: D.copy,
+				"data-copied": m || void 0,
+				"aria-label": m ? "Copied" : "Copy",
+				onClick: () => _(v.current?.textContent ?? ""),
+				children: /* @__PURE__ */ h(a, {
+					glyph: y,
+					size: 12,
+					strokeWidth: 2,
+					"aria-hidden": !0
+				})
+			}),
+			/* @__PURE__ */ g(c, { children: [/* @__PURE__ */ h(d, { children: /* @__PURE__ */ h(l, { children: /* @__PURE__ */ h("pre", {
+				...f,
+				className: D.pre,
+				children: /* @__PURE__ */ h("code", {
+					ref: v,
+					children: o
+				})
+			}) }) }), /* @__PURE__ */ h(s, {
+				orientation: "horizontal",
+				children: /* @__PURE__ */ h(u, {})
+			})] })
+		]
+	});
+}
+N.displayName = "Code.Block";
+//#endregion
+//#region src/components/code/code.meta.ts
+var P = {
+	name: "Code",
+	category: o.display,
+	status: "stable",
+	namespace: !0,
+	description: "Displays source code inline or in a block, with optional language labels and copying. Also called a code snippet or code block.",
+	origin: "native",
+	internalDependencies: ["ScrollArea"]
+};
+//#endregion
+export { k as a, M as i, N as n, E as o, j as r, P as t };

package/dist/components/avatar/avatar.d.ts

@@ -1,7 +1,7 @@
 import { Avatar as AvatarPrimitive } from '@base-ui/react/avatar';
 import { VariantProps } from 'class-variance-authority';
 declare const root: (props?: ({
-    size?: "sm" | "md" | "lg" | null | undefined;
+    size?: "sm" | "md" | "lg" | "xs" | null | undefined;
     context?: "oncolor" | "default" | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;
 interface RootProps extends React.ComponentProps<typeof AvatarPrimitive.Root>, VariantProps<typeof root> {

package/dist/components/code/code.d.ts

@@ -1,16 +1,39 @@
 import { useRender } from '@base-ui/react/use-render';
 type InlineProps = Omit<useRender.ComponentProps<"code">, "children"> & {
     /** Code content shown in the chip. The copy button copies its rendered text. */
-    children: React.ReactNode;
+    children?: React.ReactNode;
     /** Show a small copy button on the right, behind a hairline separator. @default false */
     copyable?: boolean;
+    /** Show an eye button at the start that hides the content until it is pressed. @default false */
+    concealable?: boolean;
+    /** Whether the content is hidden. Needs `concealable`. Pass it with `onConcealedChange` to control the chip. */
+    concealed?: boolean;
+    /** Called with the new value when the eye button is pressed. */
+    onConcealedChange?: (concealed: boolean) => void;
+    /** Starting value of an uncontrolled chip. @default true */
+    defaultConcealed?: boolean;
+    /** Width in characters of the hidden placeholder when there is no text to measure. @default 8 */
+    concealedLength?: number;
+    /**
+     * Keep the copy button enabled while the content is hidden. It copies the text read from `children` without revealing it,
+     * so it needs text children: a component child copies nothing until revealed. @default false
+     */
+    copyConcealed?: boolean;
+    /** Height and type scale of the chip. @default "sm" */
+    size?: "sm" | "md" | "lg";
+    /** Accessible name of the eye button; `aria-pressed` tells whether the content is shown. @default "Show" */
+    toggleLabel?: string;
 };
 /**
  * Code.Inline — an inline code fragment (a `<code>` chip) for use inside running
  * text. `Typo.InlineCode` renders this under the hood so inline-code chrome is
  * defined in one place. The copy button copies the rendered text.
+ *
+ * With `concealable`, the content is replaced by a hatched placeholder until the
+ * eye button reveals it. A chip without content shows the placeholder with a
+ * pulse, so a consumer can reveal before the value has loaded.
  */
-export declare function Inline({ copyable, children, render, ...props }: InlineProps): import('react').ReactElement<unknown, string | import('react').JSXElementConstructor<any>>;
+export declare function Inline({ copyable, concealable, concealed: concealedProp, onConcealedChange, defaultConcealed, concealedLength, copyConcealed, size, toggleLabel, children, render, ...props }: InlineProps): import('react').ReactElement<unknown, string | import('react').JSXElementConstructor<any>>;
 export declare namespace Inline {
     var displayName: string;
 }

package/dist/components/code/text-of.d.ts

@@ -0,0 +1,3 @@
+import { ReactNode } from 'react';
+/** The text a node renders, read from the element tree so nothing has to be in the DOM. */
+export declare function textOf(node: ReactNode): string;

package/dist/components/rich-link/rich-link.d.ts

@@ -8,11 +8,13 @@ type Props = React.ComponentProps<"a"> & {
     kind?: "external" | "internal";
     /** Trailing icon from `@imfusion/web-ui/icons`, replacing the arrow `kind` picks, such as `Download` for a file. */
     endGlyph?: IconComponent;
+    /** Row density. `"md"` is the default row; `"sm"` tightens the padding, tile, and gap for dense lists. @default "md" */
+    size?: "sm" | "md";
 };
 /**
  * RichLink — a link as a whole row: an optional leading icon on a tinted tile, the label with an optional description
  * line, and a trailing icon for where it leads. Draws no divider; stacked links get their spacing from the layout. Wrap it
  * with TanStack Router's `createLink` to use it as a router link.
  */
-export declare function RichLink({ glyph, description, kind, endGlyph, children, ...props }: Props): import("react/jsx-runtime").JSX.Element;
+export declare function RichLink({ glyph, description, kind, endGlyph, size, children, ...props }: Props): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/index.js

@@ -4,8 +4,8 @@ import { t as v } from "./meta-V_KyLeGn.js";
 import { a as le, i as ue, n as de, r as fe, t as pe } from "./toggle-group-CVQzM3lQ.js";
 import { a as y, i as me, n as he, o as ge, r as _e, t as ve } from "./utils-J6vbjIt1.js";
 import { a as ye, i as be, n as xe, o as Se, r as Ce, t as we } from "./row-CaeE5pqs.js";
-import { a as Te, o as Ee, r as De, t as Oe } from "./code-72NzL5Cp.js";
-import { A as ke, D as Ae, M as je, N as Me, O as Ne, c as Pe, j as Fe, k as Ie, l as Le, m as Re, p as ze, s as Be, u as Ve } from "./tabs-Bl3YlG5t.js";
+import { a as Te, o as Ee, r as De, t as Oe } from "./code-BtxeEf9P.js";
+import { A as ke, D as Ae, M as je, N as Me, O as Ne, c as Pe, j as Fe, k as Ie, l as Le, m as Re, p as ze, s as Be, u as Ve } from "./tabs-BNz_OiWn.js";
 import { n as He, t as Ue } from "./toggle-group-ghJtINie.js";
 import { a as We, c as Ge, i as Ke, n as qe, o as Je, r as Ye, s as Xe, t as Ze } from "./scroll-area-CXQ_SxPX.js";
 import { l as Qe, t as $e } from "./separator-BxUMVvFE.js";
@@ -156,16 +156,17 @@ var Lt = {
 	tile: "imf-ui-rich-link-module-tile",
 	tileGlyph: "imf-ui-rich-link-module-tileGlyph"
 }, zt = b(Rt.root);
-function Bt({ glyph: e, description: t, kind: n = "external", endGlyph: r, children: i, ...a }) {
+function Bt({ glyph: e, description: t, kind: n = "external", endGlyph: r, size: i = "md", children: a, ...o }) {
 	return /* @__PURE__ */ C("a", {
 		...n === "external" ? {
 			target: "_blank",
 			rel: "noreferrer"
 		} : {},
-		...a,
+		...o,
 		"data-imf-ui-component": "RichLink",
 		"data-kind": n,
-		className: zt({ className: a.className }),
+		"data-size": i,
+		className: zt({ className: o.className }),
 		children: [
 			e && /* @__PURE__ */ S("span", {
 				className: Rt.tile,
@@ -179,7 +180,7 @@ function Bt({ glyph: e, description: t, kind: n = "external", endGlyph: r, child
 				className: Rt.text,
 				children: [/* @__PURE__ */ S("span", {
 					className: Rt.label,
-					children: i
+					children: a
 				}), t && /* @__PURE__ */ S("span", {
 					className: Rt.description,
 					children: t
@@ -351,7 +352,7 @@ function Mn(e) {
 	});
 }
 Mn.displayName = "Autocomplete.Backdrop";
-function Nn({ align: e = "start", sideOffset: t = 4, ...n }) {
+function Nn({ align: e = "start", sideOffset: t = 8, ...n }) {
 	return /* @__PURE__ */ S(E.Positioner, {
 		...n,
 		align: e,
@@ -797,7 +798,7 @@ function Ar(e) {
 	});
 }
 Ar.displayName = "Combobox.Backdrop";
-function jr({ align: e = "start", sideOffset: t = 4, ...n }) {
+function jr({ align: e = "start", sideOffset: t = 8, ...n }) {
 	return /* @__PURE__ */ S(D.Positioner, {
 		...n,
 		align: e,
@@ -4079,7 +4080,7 @@ function il(e) {
 	});
 }
 il.displayName = "Popover.Backdrop";
-function al({ sideOffset: e = 4, ...t }) {
+function al({ sideOffset: e = 8, ...t }) {
 	return /* @__PURE__ */ S(Tt.Positioner, {
 		...t,
 		sideOffset: e,
@@ -4216,13 +4217,15 @@ var _l = {
 	root: "imf-ui-avatar-module-root",
 	sizeLg: "imf-ui-avatar-module-sizeLg",
 	sizeMd: "imf-ui-avatar-module-sizeMd",
-	sizeSm: "imf-ui-avatar-module-sizeSm"
+	sizeSm: "imf-ui-avatar-module-sizeSm",
+	sizeXs: "imf-ui-avatar-module-sizeXs"
 }, xl = /* @__PURE__ */ e({
 	Fallback: () => wl,
 	Image: () => Tl,
 	Root: () => Cl
 }), Sl = b(bl.root, { variants: {
 	size: {
+		xs: bl.sizeXs,
 		sm: bl.sizeSm,
 		md: bl.sizeMd,
 		lg: bl.sizeLg
@@ -4782,7 +4785,7 @@ function Mu(e) {
 	});
 }
 Mu.displayName = "Menu.Backdrop";
-function Nu({ sideOffset: e = 4, alignOffset: t = 0, ...n }) {
+function Nu({ sideOffset: e = 8, alignOffset: t = 0, ...n }) {
 	return /* @__PURE__ */ S(j.Positioner, {
 		...n,
 		sideOffset: e,

package/dist/integrations/code-highlight.js

@@ -1,6 +1,6 @@
 import { t as e } from "../rolldown-runtime-Dy4uBu1J.js";
 import { t } from "../meta-V_KyLeGn.js";
-import { i as n, n as r, r as i } from "../code-72NzL5Cp.js";
+import { i as n, n as r, r as i } from "../code-BtxeEf9P.js";
 import { jsx as a } from "react/jsx-runtime";
 import { cloneElement as o, useMemo as s } from "react";
 import { createHighlighter as c, defineLanguage as l, renderNodesToHtml as u, renderTokens as d } from "@tanstack/highlight/core";

package/dist/integrations/image-display-options.js

@@ -2,7 +2,7 @@ import { sy as e, vM as t, yC as n } from "../icons-CMetKl2x.js";
 import { t as r } from "../meta-V_KyLeGn.js";
 import { n as i, t as a } from "../toggle-group-CVQzM3lQ.js";
 import { i as o, n as s, o as c, t as l } from "../row-CaeE5pqs.js";
-import { C as u, E as d, S as f, T as p, _ as m, a as h, b as g, d as _, f as v, g as y, h as b, i as x, n as S, o as C, r as w, t as T, v as E, w as D, x as ee, y as O } from "../tabs-Bl3YlG5t.js";
+import { C as u, E as d, S as f, T as p, _ as m, a as h, b as g, d as _, f as v, g as y, h as b, i as x, n as S, o as C, r as w, t as T, v as E, w as D, x as ee, y as O } from "../tabs-BNz_OiWn.js";
 import { t as k } from "../scroll-area-CXQ_SxPX.js";
 import { a as A, c as j, i as M, n as te, o as ne, r as re, s as ie, t as N } from "../separator-BxUMVvFE.js";
 import { cva as ae } from "class-variance-authority";