@imfusion/web-ui 0.11.1-dev.75.g4f81d8fd → 0.11.1-dev.83.g3251cc92

package/CHANGELOG.md

@@ -10,6 +10,8 @@
 
 ### Added
 
+- `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 +98,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 +224,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/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/index.js

@@ -5,7 +5,7 @@ import { a as le, i as ue, n as de, r as fe, t as pe } from "./toggle-group-CVQz
 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 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";
@@ -351,7 +351,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 +797,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 +4079,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 +4216,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 +4784,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/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";