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

package/CHANGELOG.md

@@ -55,6 +55,12 @@ never changes the character width, so columns stay aligned. CoFo Sans Mono still
 
 ### Added
 
+- [`ColorSchemeToggle`](src/components/color-scheme-toggle/color-scheme-toggle.mdx) lets the user pick Light, System, or
+  Dark. It stores the choice through `useColorScheme` and needs no props; `label`, `lightLabel`, `systemLabel`, and
+  `darkLabel` replace the English text — Nikolaus Brunner <brunner@imfusion.com>
+- [`ToggleGroup`](src/components/toggle-group/toggle-group.mdx) and `Toggle` take a `size` of `sm` or `md`. A small group
+  has no inset or gap, a 1px border, and 1.5rem toggles; a toggle takes its group's size unless it sets its own
+  — Nikolaus Brunner <brunner@imfusion.com>
 - `Skeleton.Suspense` takes a `fallback` of bones, a `label`, and the content. It is a Suspense boundary whose fallback is a
   busy `Skeleton.Root`; when the content mounts after the fallback showed, it fades in, and content that was
   ready at mount appears without a fade. Use it for data loaded through Suspense, and `Skeleton.Root` for data loaded with
@@ -80,6 +86,9 @@ never changes the character width, so columns stay aligned. CoFo Sans Mono still
 - `--imf-ui-appshell-heading-*`, `--imf-ui-appshell-navitem-dim`, `--imf-ui-appshell-navitem-underline-thickness`, and `--imf-ui-appshell-navitem-underline-offset` tune the logo row's strut and the NavItem underline. [AppShell](src/components/app-shell/app-shell.mdx) — Nikolaus Brunner <brunner@imfusion.com>
 - `AppShell.Aside` shows a close button in its drawer below `lg`, labelled by `closeLabel` (`Close panel` by default). [AppShell](src/components/app-shell/app-shell.mdx) — Nikolaus Brunner <brunner@imfusion.com>
 - `AppShell.Burger` with no props opens and closes the navbar drawer, so the header needs no state wiring. [AppShell](src/components/app-shell/app-shell.mdx) — Nikolaus Brunner <brunner@imfusion.com>
+- `Select.Root` takes a `width` of `auto`, `wide`, or `full`: `auto` keeps the 10rem trigger minimum, `wide` raises it to
+  15rem, and `full` fills the parent. `--imf-ui-select-trigger-min-width` on `Select.Root` sets the minimum from CSS.
+  [Select](src/components/select/select.mdx) — Nikolaus Brunner <brunner@imfusion.com>
 
 ### Changed
 
@@ -106,9 +115,13 @@ never changes the character width, so columns stay aligned. CoFo Sans Mono still
     `git:config`.
   - `imf-web-ui-conventions` names the Skeleton part for each way data loads, and says a layout that reads suspending data
     needs its own boundary. `imf-web-ui-ux` points to that rule from its loading state.
+  - `imf-web-ui-conventions` lets a mutation name the sub-resource after its verb when a topic has more than one target,
+    as in `api.projects.removeMember(projectId)`; a name still never repeats its topic.
 - CI and verification — Nikolaus Brunner <brunner@imfusion.com>
   - The Git hooks live in `.vite-hooks/` and run through the Vite+ hook dispatcher, which `npm run git:config` installs.
     Existing clones and worktrees rerun `npm run git:config`; until then their hooks do not run.
+  - `engines.node` is `^22.22.1 || ^24.11 || >=26`, the range Vite+ supports. Node 24.0 to 24.10 and Node 25 fall
+    outside it.
 - The main column, header, and footer snap when the aside docks or undocks — Nikolaus Brunner <brunner@imfusion.com>
 - Components ([WEBSDK-247](https://imfusion.atlassian.net/browse/WEBSDK-247)) — Nikolaus Brunner <brunner@imfusion.com>
   - The AppShell navbar drawer, `Code`, and `ImageDisplayOptions` scroll in a `ScrollArea`, with its overlay thumb and edge

package/dist/components/color-scheme-toggle/color-scheme-preference.d.ts

@@ -0,0 +1,3 @@
+import { ColorSchemePreference } from '../../types/theme';
+/** Narrows a `ToggleGroup` value entry to a scheme preference. */
+export declare function isColorSchemePreference(value: unknown): value is ColorSchemePreference;

package/dist/components/color-scheme-toggle/color-scheme-toggle.d.ts

@@ -0,0 +1,17 @@
+import { ToggleGroup } from '../toggle-group';
+type Props = Omit<React.ComponentProps<typeof ToggleGroup>, "value" | "defaultValue" | "onValueChange" | "multiple" | "children"> & {
+    /** Accessible name of the group. */
+    label?: string;
+    /** Text of the segment that picks the light scheme. */
+    lightLabel?: string;
+    /** Text of the segment that follows the operating system. */
+    systemLabel?: string;
+    /** Text of the segment that picks the dark scheme. */
+    darkLabel?: string;
+};
+/**
+ * ColorSchemeToggle - lets the user pick Light, System, or Dark. It reads and stores the preference through
+ * `useColorScheme`, so placing it is enough. System stays pressed while the page follows the operating system.
+ */
+export declare function ColorSchemeToggle({ label, lightLabel, systemLabel, darkLabel, ...props }: Props): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/color-scheme-toggle/color-scheme-toggle.meta.d.ts

@@ -0,0 +1,2 @@
+import { ComponentMeta } from '../../types/meta';
+export declare const colorSchemeToggleMeta: ComponentMeta;

package/dist/components/color-scheme-toggle/index.d.ts

@@ -0,0 +1,2 @@
+export { ColorSchemeToggle } from './color-scheme-toggle';
+export { colorSchemeToggleMeta } from './color-scheme-toggle.meta';

package/dist/components/select/select.d.ts

@@ -1,6 +1,12 @@
 import { Select as SelectPrimitive } from '@base-ui/react/select';
+import { VariantProps } from 'class-variance-authority';
 type UpstreamItem = React.ComponentProps<typeof SelectPrimitive.Item>;
+declare const selectRoot: (props?: ({
+    width?: "auto" | "full" | "wide" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
 interface RootProps<Value = unknown, Multiple extends boolean | undefined = false> extends React.ComponentProps<typeof SelectPrimitive.Root<Value, Multiple>> {
+    /** Trigger width: `auto` keeps the compact minimum; `wide` raises it; `full` fills the parent. @default "auto" */
+    width?: VariantProps<typeof selectRoot>["width"];
 }
 /**
  * Select.Root — accessible select / listbox primitive.
@@ -12,7 +18,7 @@ interface RootProps<Value = unknown, Multiple extends boolean | undefined = fals
  * @doc https://base-ui.com/react/components/select
  * @llm https://base-ui.com/react/components/select.md
  */
-export declare function Root<Value = unknown, Multiple extends boolean | undefined = false>({ className, style, ...props }: RootProps<Value, Multiple> & {
+export declare function Root<Value = unknown, Multiple extends boolean | undefined = false>({ width, className, style, ...props }: RootProps<Value, Multiple> & {
     className?: string;
     style?: React.CSSProperties;
 }): import("react/jsx-runtime").JSX.Element;

package/dist/components/toggle/toggle.d.ts

@@ -1,11 +1,17 @@
 import { Toggle as TogglePrimitive } from '@base-ui/react/toggle';
-interface Props extends React.ComponentProps<typeof TogglePrimitive> {
+import { VariantProps } from 'class-variance-authority';
+declare const toggle: (props?: ({
+    size?: "sm" | "md" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+interface Props extends React.ComponentProps<typeof TogglePrimitive>, VariantProps<typeof toggle> {
     /**
      * Key hint shown in the top corner at the end of the line, such as `"P"` or `"Ctrl Z"`. It also sets
      * `aria-keyshortcuts` in its notation (`Control+Z`), which an explicit
      * `aria-keyshortcuts` prop overrides. Display only: bind the key in the app, for example with `useHotkey` from TanStack Hotkeys.
      */
     shortcut?: string;
+    /** Defaults to the enclosing `ToggleGroup`'s `size`, or `"md"` standalone. */
+    size?: VariantProps<typeof toggle>["size"];
 }
 /**
  * Toggle - a two-state button. Use standalone for a
@@ -15,5 +21,5 @@ interface Props extends React.ComponentProps<typeof TogglePrimitive> {
  * @doc https://base-ui.com/react/components/toggle
  * @llm https://base-ui.com/react/components/toggle.md
  */
-export declare function Toggle({ style, shortcut, children, ...props }: Props): import("react/jsx-runtime").JSX.Element;
+export declare function Toggle({ style, shortcut, size, children, ...props }: Props): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/toggle-group/toggle-group-size.d.ts

@@ -0,0 +1,3 @@
+export type ToggleGroupSize = "sm" | "md";
+/** The size a `ToggleGroup` hands to its toggles; a standalone `Toggle` reads the default. */
+export declare const ToggleGroupSizeContext: import('react').Context<ToggleGroupSize>;

package/dist/components/toggle-group/toggle-group.d.ts

@@ -1,13 +1,17 @@
 import { ToggleGroup as ToggleGroupPrimitive } from '@base-ui/react/toggle-group';
-interface Props extends React.ComponentProps<typeof ToggleGroupPrimitive> {
+import { VariantProps } from 'class-variance-authority';
+declare const toggleGroup: (props?: ({
+    size?: "sm" | "md" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+interface Props extends React.ComponentProps<typeof ToggleGroupPrimitive>, VariantProps<typeof toggleGroup> {
 }
 /**
  * ToggleGroup - a set of connected `Toggle`s sharing one value. Single-select by
  * default (a segmented control); set `multiple` for multi-select. Compose one
- * `Toggle` per segment, each with a `value`.
+ * `Toggle` per segment, each with a `value`. `size` applies to every toggle in the group.
  *
  * @doc https://base-ui.com/react/components/toggle-group
  * @llm https://base-ui.com/react/components/toggle-group.md
  */
-export declare function ToggleGroup(props: Props): import("react/jsx-runtime").JSX.Element;
+export declare function ToggleGroup({ size, ...props }: Props): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/index.d.ts

@@ -4,6 +4,7 @@ export { CopyButton, copyButtonMeta } from './components/copy-button';
 export { IconButton, iconButtonMeta } from './components/icon-button';
 export { RichLink, richLinkMeta } from './components/rich-link';
 export { Checkbox, checkboxMeta } from './components/checkbox';
+export { ColorSchemeToggle, colorSchemeToggleMeta } from './components/color-scheme-toggle';
 export { Field, fieldMeta } from './components/field';
 export { Fieldset, fieldsetMeta } from './components/fieldset';
 export { Input, inputMeta } from './components/input';