@imfusion/web-ui 0.10.1-dev.51.gc342cd5f → 0.10.1-dev.53.gea04219d

package/CHANGELOG.md

@@ -60,10 +60,12 @@ never changes the character width, so columns stay aligned. CoFo Sans Mono still
 
 ### Added
 
+- `--imf-ui-size-backdrop-edge` (`38%`) and `--imf-ui-size-backdrop-band-height` (`30dvh`) are the public backdrop's geometry tokens. The `imf-web-ui-ux` skill describes the handover. — Nikolaus Brunner <brunner@imfusion.com>
 - `ProductLogo` renders the ImFusion Labels, Suite, and SDK product logos on the `Logo` sizes and color variants. The name is solid by default and cut out of the plate with `cutout`. [Product](src/components/logo/product/product.stories.tsx#Default) — Nikolaus Brunner <brunner@imfusion.com>
 - `imf-web-ui-update` proposes and `imf-web-ui-audit` reports aligning the core runtime packages (React, Base UI, Vite+) with the versions Web UI builds with. — Nikolaus Brunner <brunner@imfusion.com>
 - `localWebUILink()` and a `paths` block in `tsconfig.json` let an app run against a symlinked web-ui checkout with one React and one set of types. `imf-web-ui-setup` proposes both and `imf-web-ui-audit` reports a missing one. — Nikolaus Brunner <brunner@imfusion.com>
 - The shell's navigation toggle sets `aria-controls` from the navbar, and reads the `id` the navbar generates. A consumer `id` on the Navbar is what it points at. — Nikolaus Brunner <brunner@imfusion.com>
+- `Table.Root` takes `density` (`compact`, `comfortable`, `spacious`) for the cell padding. — Nikolaus Brunner <brunner@imfusion.com>
 - `Table.HeaderCell` and `Table.Cell` take `action` for a column of buttons: it shrinks to its content, so the data columns keep the width. — Nikolaus Brunner <brunner@imfusion.com>
 - [`useDisclosure`](src/hooks/use-disclosure.stories.tsx#UseDisclosure) keeps an open state that works controlled or uncontrolled, and returns `open`, `setOpen`, and `toggle`. — Nikolaus Brunner <brunner@imfusion.com>
 - `AppShell.Navbar` and `AppShell.Aside` take `defaultOpen` and keep their own open state when `open` is omitted, and close an uncontrolled drawer when they dock. A controlled `open` is never changed by docking. — Nikolaus Brunner <brunner@imfusion.com>
@@ -108,6 +110,8 @@ never changes the character width, so columns stay aligned. CoFo Sans Mono still
 
 ### Changed
 
+- The `Meter` track is translucent ink (8% `fg-main`), so it stays visible on tinted surfaces such as a selected table row. — Nikolaus Brunner <brunner@imfusion.com>
+- `Table` reads lighter: the header has no band, its mono labels are muted with a 1px rule under them, body rows have no rules, and cells get more vertical padding. A selected row sits one neutral step darker than a hovered row, in place of the primary tint. — Nikolaus Brunner <brunner@imfusion.com>
 - [`AppShell.Header`](src/components/app-shell/app-shell.mdx) is a page row that shows at every width, below the shell's bar on mobile. — Nikolaus Brunner <brunner@imfusion.com>
   - The header pads its inline sides with `--imf-ui-appshell-padding`, so its content lines up with Main's.
 - AppShell — Nikolaus Brunner <brunner@imfusion.com>

package/dist/components/table/table.d.ts

@@ -4,8 +4,12 @@ type CellActionProps = {
     action?: boolean;
 };
 type HeaderCellProps = React.ComponentProps<"th"> & CellActionProps;
+type RootProps = React.ComponentProps<"table"> & {
+    /** Cell padding: `compact` for dense data, `spacious` for a few rows at a glance. */
+    density?: "compact" | "comfortable" | "spacious";
+};
 /** Table.Root — the `<table>` element. */
-export declare function Root(props: React.ComponentProps<"table">): import("react/jsx-runtime").JSX.Element;
+export declare function Root({ density, ...props }: RootProps): import("react/jsx-runtime").JSX.Element;
 export declare namespace Root {
     var displayName: string;
 }

package/dist/index.js

@@ -3857,6 +3857,8 @@ var Rc = {
 	action: "imf-ui-table-module-action",
 	body: "imf-ui-table-module-body",
 	cell: "imf-ui-table-module-cell",
+	densityCompact: "imf-ui-table-module-densityCompact",
+	densitySpacious: "imf-ui-table-module-densitySpacious",
 	header: "imf-ui-table-module-header",
 	headerButton: "imf-ui-table-module-headerButton",
 	headerCell: "imf-ui-table-module-headerCell",
@@ -3874,15 +3876,22 @@ var Rc = {
 	Row: () => $c,
 	RowLink: () => nl,
 	SortableHeaderCell: () => ol
-}), Bc = g(Z.root), Vc = g(Z.header), Hc = g(Z.body), Uc = g(Z.row), Wc = { action: {
+}), Bc = g(Z.root, { variants: { density: {
+	compact: Z.densityCompact,
+	comfortable: null,
+	spacious: Z.densitySpacious
+} } }), Vc = g(Z.header), Hc = g(Z.body), Uc = g(Z.row), Wc = { action: {
 	false: null,
 	true: Z.action
 } }, Gc = g(Z.headerCell, { variants: Wc }), Kc = g(Z.cell, { variants: Wc }), qc = g(Z.rowLink), Jc = g(Z.headerButton), Yc = g(Z.sortIndicator);
-function Xc(e) {
+function Xc({ density: e = "comfortable", ...t }) {
 	return /* @__PURE__ */ v("table", {
-		...e,
+		...t,
 		"data-imf-ui-component": "Table.Root",
-		className: Bc({ className: e.className })
+		className: Bc({
+			density: e,
+			className: t.className
+		})
 	});
 }
 Xc.displayName = "Table.Root";