@selvajs/ui 6.5.1-beta.1 → 6.6.0-beta.3

package/dist/components/primitives/toggle-group/toggle-group-item.svelte.d.ts

@@ -0,0 +1,6 @@
+import { ToggleGroup as ToggleGroupPrimitive } from 'bits-ui';
+import { type ToggleVariants } from '../toggle/index.js';
+type $$ComponentProps = ToggleGroupPrimitive.ItemProps & ToggleVariants;
+declare const ToggleGroupItem: import("svelte").Component<$$ComponentProps, {}, "ref" | "value">;
+type ToggleGroupItem = ReturnType<typeof ToggleGroupItem>;
+export default ToggleGroupItem;

package/dist/components/primitives/toggle-group/toggle-group.svelte

@@ -0,0 +1,75 @@
+<script lang="ts" module>
+	import { getContext, setContext } from 'svelte';
+	import { toggleVariants } from '../toggle/index.js';
+	import type { VariantProps } from 'tailwind-variants';
+
+	type ToggleVariants = VariantProps<typeof toggleVariants>;
+
+	interface ToggleGroupContext extends ToggleVariants {
+		spacing?: number;
+		orientation?: 'horizontal' | 'vertical';
+	}
+
+	export function setToggleGroupCtx(props: ToggleGroupContext) {
+		setContext('toggleGroup', props);
+	}
+
+	export function getToggleGroupCtx() {
+		return getContext<Required<ToggleGroupContext>>('toggleGroup');
+	}
+</script>
+
+<script lang="ts">
+	import { ToggleGroup as ToggleGroupPrimitive } from 'bits-ui';
+	import { cn } from '../../../utils.js';
+
+	let {
+		ref = $bindable(null),
+		value = $bindable(),
+		class: className,
+		size = 'default',
+		spacing = 0,
+		orientation = 'horizontal',
+		variant = 'default',
+		...restProps
+	}: ToggleGroupPrimitive.RootProps &
+		ToggleVariants & {
+			spacing?: number;
+			orientation?: 'horizontal' | 'vertical';
+		} = $props();
+
+	setToggleGroupCtx({
+		get variant() {
+			return variant;
+		},
+		get size() {
+			return size;
+		},
+		get spacing() {
+			return spacing;
+		},
+		get orientation() {
+			return orientation;
+		}
+	});
+</script>
+
+<!--
+Discriminated Unions + Destructing (required for bindable) do not
+get along, so we shut typescript up by casting `value` to `never`.
+-->
+<ToggleGroupPrimitive.Root
+	bind:value={value as never}
+	bind:ref
+	{orientation}
+	data-slot="toggle-group"
+	data-variant={variant}
+	data-size={size}
+	data-spacing={spacing}
+	style="--gap: calc(var(--spacing) * {spacing})"
+	class={cn(
+		'group/toggle-group flex w-fit flex-row items-center gap-(--gap) rounded-lg data-vertical:flex-col data-vertical:items-stretch data-[size=sm]:rounded-md',
+		className
+	)}
+	{...restProps}
+/>

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

@@ -0,0 +1,17 @@
+import { toggleVariants } from '../toggle/index.js';
+import type { VariantProps } from 'tailwind-variants';
+type ToggleVariants = VariantProps<typeof toggleVariants>;
+interface ToggleGroupContext extends ToggleVariants {
+    spacing?: number;
+    orientation?: 'horizontal' | 'vertical';
+}
+export declare function setToggleGroupCtx(props: ToggleGroupContext): void;
+export declare function getToggleGroupCtx(): Required<ToggleGroupContext>;
+import { ToggleGroup as ToggleGroupPrimitive } from 'bits-ui';
+type $$ComponentProps = ToggleGroupPrimitive.RootProps & ToggleVariants & {
+    spacing?: number;
+    orientation?: 'horizontal' | 'vertical';
+};
+declare const ToggleGroup: import("svelte").Component<$$ComponentProps, {}, "ref" | "value">;
+type ToggleGroup = ReturnType<typeof ToggleGroup>;
+export default ToggleGroup;

package/dist/components/viewer/MeshMetadataDialog.svelte

@@ -48,10 +48,10 @@
 </script>
 
 <Dialog.Root bind:open {onOpenChange}>
-	<Dialog.Content class="min-w-60 max-w-xs p-0 gap-0 w-auto overflow-hidden">
+	<Dialog.Content variant="flush" class="min-w-60 max-w-xs w-auto">
 		{#if meshName}
 			<div class="px-4 pt-3 pb-2 border-b">
-				<Dialog.Title class="text-sm font-semibold">{meshName}</Dialog.Title>
+				<Dialog.Title size="sm">{meshName}</Dialog.Title>
 			</div>
 		{:else}
 			<Dialog.Title class="sr-only">{t.objectFallbackName}</Dialog.Title>
@@ -102,7 +102,7 @@
 									{:else if typeof value === 'number'}
 										<span class="font-mono">{value}</span>
 									{:else if typeof value === 'boolean'}
-										<span class={value ? 'text-green-500' : 'text-muted-foreground'}
+										<span class={value ? 'text-success' : 'text-muted-foreground'}
 											>{value ? 'true' : 'false'}</span
 										>
 									{:else}

package/dist/components/viewer/SceneManager.svelte

@@ -256,9 +256,18 @@
 		<!-- Spacer sized to the full list; windowed rows are placed into it by offset. The listbox
 		     sits here rather than per layer: windowing renders one flat row list, so every option
 		     shares a single owner. -->
-		<div role="listbox" aria-multiselectable="true" class="relative" style:height="{totalHeight}px">
+		<div
+			role="listbox"
+			aria-multiselectable="true"
+			class="relative h-(--list-h)"
+			style:--list-h="{totalHeight}px"
+		>
 			{#each visibleRows as row (row.key)}
-				<div class="inset-x-0 absolute" style:top="{row.top}px" style:height="{row.height}px">
+				<div
+					class="inset-x-0 absolute top-(--row-top) h-(--row-h)"
+					style:--row-top="{row.top}px"
+					style:--row-h="{row.height}px"
+				>
 					{#if row.kind === 'layer'}
 						{@const entries = row.entries}
 						{@const numHidden = hiddenCount(entries)}
@@ -304,7 +313,7 @@
 								{row.layerName}
 							</span>
 
-							<span class="shrink-0 text-[10px] text-muted-foreground/50 tabular-nums">
+							<span class="shrink-0 text-2xs text-muted-foreground/50 tabular-nums">
 								{entries.length}
 							</span>
 						</div>
@@ -355,7 +364,7 @@
 								</span>
 
 								<span
-									class="rounded px-1 py-0.5 font-medium shrink-0 bg-muted text-[9px] text-muted-foreground/70"
+									class="rounded px-1 py-0.5 font-medium shrink-0 bg-muted text-2xs text-muted-foreground/70"
 								>
 									{getTypeLabel(entry.object)}
 								</span>
@@ -390,7 +399,7 @@
 		background: transparent;
 	}
 	div::-webkit-scrollbar-thumb {
-		background: hsl(var(--muted-foreground) / 0.15);
+		background: color-mix(in oklch, var(--muted-foreground) 15%, transparent);
 		border-radius: 2px;
 	}
 </style>

package/dist/components/viewer/Viewer.svelte

@@ -26,12 +26,9 @@
 		Frame,
 		Ruler,
 		Grid3x3,
-		Check,
-		ChevronRight,
 		Palette,
 		Spline
 	} from '@lucide/svelte';
-	import { DropdownMenu } from 'bits-ui';
 	import { SvelteSet } from 'svelte/reactivity';
 	import type * as THREE from 'three';
 	import type { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js';
@@ -39,6 +36,8 @@
 	import SceneManager from './SceneManager.svelte';
 	import MeshMetadataDialog from './MeshMetadataDialog.svelte';
 	import * as Resizable from '../primitives/resizable/index.js';
+	import * as DropdownMenu from '../primitives/dropdown-menu/index.js';
+	import { Button } from '../primitives/button/index.js';
 	import type { Locale } from '../../i18n/messages';
 	import { setLocaleContext, getLocaleContext } from '../../i18n/localeContext.svelte';
 
@@ -417,7 +416,7 @@
 <div
 	class="min-h-64 sm:min-h-96 lg:min-h-125 relative h-full flex-1 border {isFullscreen
 		? 'fullscreen-viewer'
-		: 'overflow-hidden rounded-[0.625rem]'}"
+		: 'overflow-hidden rounded-lg'}"
 >
 	<Resizable.PaneGroup direction="horizontal" class="h-full w-full">
 		<!-- `defaultSize` must sum to 100 across the live panes. Panes register a frame before the
@@ -426,7 +425,7 @@
 		     scene pane keeps a sliver of its intended width. Hence 85 + 15, and the explicit id/order
 		     so a conditionally-rendered pane keeps its slot. -->
 		<Resizable.Pane id="viewport" order={1} defaultSize={sceneManagerOpen ? 85 : 100} minSize={40}>
-			<div class="relative h-full w-full" style="touch-action: none;">
+			<div class="relative h-full w-full touch-none">
 				<!-- Mesh count of the geometry currently in the scene. The canvas itself is opaque to
 				     the DOM, so this is the only observable proof a solve's geometry decoded and
 				     rendered; e2e asserts on it. -->
@@ -444,19 +443,18 @@
 				></div>
 
 				{#if isSolving}
-					<div
-						class="inset-0 absolute z-10 animate-[selva-viewer-fade-in_0.2s_ease-out] backdrop-blur-[2px] transition-all duration-300"
-					></div>
+					<div class="inset-0 animate-in fade-in backdrop-blur-xs absolute z-10 duration-200"></div>
 				{/if}
 
 				{#if logoUrl}
 					<!-- Bottom offset matches the tools menu so it clears the mobile drawer handle.
 					     Always pointer-events:none so it never intercepts canvas drags. -->
 					<div
-						class="right-4 {isFullscreen ? 'bottom-4' : 'bottom-16 sm:bottom-4'} absolute z-20"
-						style={hideButton
-							? 'opacity: 0; pointer-events: none;'
-							: 'opacity: 1; pointer-events: none;'}
+						class="right-4 {isFullscreen
+							? 'bottom-4'
+							: 'bottom-16 sm:bottom-4'} pointer-events-none absolute z-20 {hideButton
+							? 'opacity-0'
+							: ''}"
 					>
 						<img
 							src={logoUrl}
@@ -467,171 +465,131 @@
 				{/if}
 
 				{#if config.showToolsMenu}
-					{@const itemClass =
-						'gap-2 px-2 py-1.5 text-sm flex cursor-pointer select-none items-center rounded-sm outline-none transition-colors hover:bg-muted focus:bg-muted'}
 					<div
 						class="left-4 {isFullscreen
 							? 'bottom-4'
-							: 'bottom-16 sm:bottom-4'} absolute z-50 flex items-center"
-						style={hideButton
-							? 'opacity: 0; pointer-events: none;'
-							: 'opacity: 1; pointer-events: auto;'}
+							: 'bottom-16 sm:bottom-4'} shadow-lg absolute z-50 flex items-center rounded-lg {hideButton
+							? 'pointer-events-none opacity-0'
+							: ''}"
 					>
 						<DropdownMenu.Root>
-							<DropdownMenu.Trigger
-								class="h-10 w-10 shadow-lg hover:shadow-xl flex items-center justify-center rounded-lg border border-border bg-card/90 transition-all hover:bg-card active:scale-95 data-[state=open]:bg-secondary/60"
-								title={t.toolsMenu}
-								aria-label={t.toolsMenu}
-							>
-								<Settings2 class="h-5 w-5 text-card-foreground" />
+							<DropdownMenu.Trigger>
+								{#snippet child({ props })}
+									<Button
+										{...props}
+										variant="outline"
+										size="icon-lg"
+										title={t.toolsMenu}
+										aria-label={t.toolsMenu}
+									>
+										<Settings2 />
+									</Button>
+								{/snippet}
 							</DropdownMenu.Trigger>
-							<DropdownMenu.Portal>
-								<DropdownMenu.Content
-									sideOffset={6}
-									align="start"
-									class="data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 min-w-44 p-1 shadow-md z-10001 rounded-md border bg-popover text-popover-foreground"
-								>
-									<DropdownMenu.Item class={itemClass} onSelect={toggleProjection}>
-										{#if projection === 'perspective'}
-											<Square class="h-4 w-4" />
-											{t.switchToOrthographic}
-										{:else}
-											<Box class="h-4 w-4" />
-											{t.switchToPerspective}
-										{/if}
-									</DropdownMenu.Item>
-
-									<DropdownMenu.Item class={itemClass} onSelect={() => fitToView?.()}>
-										<Frame class="h-4 w-4" />
-										{t.fitToView}
-									</DropdownMenu.Item>
+							<!-- Above the fullscreen viewer, which sits at z-index 10000. -->
+							<DropdownMenu.Content sideOffset={6} class="min-w-44 z-10001 w-auto">
+								<DropdownMenu.Item onSelect={toggleProjection}>
+									{#if projection === 'perspective'}
+										<Square />
+										{t.switchToOrthographic}
+									{:else}
+										<Box />
+										{t.switchToPerspective}
+									{/if}
+								</DropdownMenu.Item>
+								<DropdownMenu.Item onSelect={() => fitToView?.()}>
+									<Frame />
+									{t.fitToView}
+								</DropdownMenu.Item>
+
+								<DropdownMenu.Sub>
+									<DropdownMenu.SubTrigger>
+										<Box />
+										{t.views}
+									</DropdownMenu.SubTrigger>
+									<DropdownMenu.SubContent class="z-10001">
+										{#each VIEW_PRESETS as { preset, label } (preset)}
+											<DropdownMenu.Item onSelect={() => setView(preset)}
+												>{label()}</DropdownMenu.Item
+											>
+										{/each}
+									</DropdownMenu.SubContent>
+								</DropdownMenu.Sub>
 
+								{#if config.showDisplayMenu}
 									<DropdownMenu.Sub>
-										<DropdownMenu.SubTrigger class="{itemClass} data-[state=open]:bg-muted">
-											<Box class="h-4 w-4" />
-											<span class="flex-1">{t.views}</span>
-											<ChevronRight class="h-4 w-4 text-muted-foreground" />
+										<DropdownMenu.SubTrigger>
+											<Palette />
+											{t.display}
 										</DropdownMenu.SubTrigger>
-										<DropdownMenu.SubContent
-											sideOffset={4}
-											class="min-w-32 p-1 shadow-md z-10001 rounded-md border bg-popover text-popover-foreground"
-										>
-											{#each VIEW_PRESETS as { preset, label } (preset)}
-												<DropdownMenu.Item
-													class="px-2 py-1.5 text-sm flex cursor-pointer items-center rounded-sm transition-colors outline-none select-none hover:bg-muted focus:bg-muted"
-													onSelect={() => setView(preset)}
-												>
-													{label()}
-												</DropdownMenu.Item>
-											{/each}
-										</DropdownMenu.SubContent>
-									</DropdownMenu.Sub>
-
-									{#if config.showDisplayMenu}
-										<DropdownMenu.Sub>
-											<DropdownMenu.SubTrigger class="{itemClass} data-[state=open]:bg-muted">
-												<Palette class="h-4 w-4" />
-												<span class="flex-1">{t.display}</span>
-												<ChevronRight class="h-4 w-4 text-muted-foreground" />
-											</DropdownMenu.SubTrigger>
-											<DropdownMenu.SubContent
-												sideOffset={4}
-												class="min-w-40 p-1 shadow-md z-10001 rounded-md border bg-popover text-popover-foreground"
+										<DropdownMenu.SubContent class="min-w-40 z-10001">
+											<DropdownMenu.RadioGroup
+												value={renderStyle}
+												onValueChange={(look) => setRenderStyle(look as typeof renderStyle)}
 											>
 												{#each STYLE_OPTIONS as { look, label } (look)}
-													<DropdownMenu.Item
-														closeOnSelect={false}
-														class="{itemClass} {renderStyle === look ? 'text-primary' : ''}"
-														onSelect={() => setRenderStyle(look)}
-													>
-														<span class="flex-1">{label}</span>
-														{#if renderStyle === look}
-															<Check class="h-4 w-4" />
-														{/if}
-													</DropdownMenu.Item>
+													<DropdownMenu.RadioItem value={look} closeOnSelect={false}>
+														{label}
+													</DropdownMenu.RadioItem>
 												{/each}
-
-												<DropdownMenu.Separator class="my-1 h-px bg-border" />
-
-												<DropdownMenu.Item
-													closeOnSelect={false}
-													class="{itemClass} {edgesVisible ? 'text-primary' : ''}"
-													onSelect={toggleEdges}
-												>
-													<Spline class="h-4 w-4" />
-													<span class="flex-1">{t.edges}</span>
-													{#if edgesVisible}
-														<Check class="h-4 w-4" />
-													{/if}
-												</DropdownMenu.Item>
-											</DropdownMenu.SubContent>
-										</DropdownMenu.Sub>
-									{/if}
-
-									<DropdownMenu.Item
-										closeOnSelect={false}
-										class="{itemClass} {measureActive ? 'text-primary' : ''}"
-										onSelect={toggleMeasure}
+											</DropdownMenu.RadioGroup>
+											<DropdownMenu.Separator />
+											<DropdownMenu.CheckboxItem
+												checked={edgesVisible}
+												onCheckedChange={toggleEdges}
+											>
+												<Spline />
+												{t.edges}
+											</DropdownMenu.CheckboxItem>
+										</DropdownMenu.SubContent>
+									</DropdownMenu.Sub>
+								{/if}
+
+								<DropdownMenu.CheckboxItem checked={measureActive} onCheckedChange={toggleMeasure}>
+									<Ruler />
+									{t.measure}
+								</DropdownMenu.CheckboxItem>
+
+								{#if config.showGridToggle}
+									<DropdownMenu.CheckboxItem checked={gridVisible} onCheckedChange={toggleGrid}>
+										<Grid3x3 />
+										{t.grid}
+									</DropdownMenu.CheckboxItem>
+								{/if}
+
+								{#if config.showSceneManager || config.showScreenshotButton || config.showFullscreenButton}
+									<DropdownMenu.Separator />
+								{/if}
+
+								{#if config.showSceneManager}
+									<DropdownMenu.CheckboxItem
+										checked={sceneManagerOpen}
+										onCheckedChange={() => (sceneManagerOpen = !sceneManagerOpen)}
 									>
-										<Ruler class="h-4 w-4" />
-										<span class="flex-1">{t.measure}</span>
-										{#if measureActive}
-											<Check class="h-4 w-4" />
-										{/if}
+										<Layers />
+										{t.sceneManager}
+									</DropdownMenu.CheckboxItem>
+								{/if}
+
+								{#if config.showScreenshotButton}
+									<DropdownMenu.Item onSelect={downloadScreenshot}>
+										<Camera />
+										{t.screenshot}
 									</DropdownMenu.Item>
+								{/if}
 
-									{#if config.showGridToggle}
-										<DropdownMenu.Item
-											closeOnSelect={false}
-											class="{itemClass} {gridVisible ? 'text-primary' : ''}"
-											onSelect={toggleGrid}
-										>
-											<Grid3x3 class="h-4 w-4" />
-											<span class="flex-1">{t.grid}</span>
-											{#if gridVisible}
-												<Check class="h-4 w-4" />
-											{/if}
-										</DropdownMenu.Item>
-									{/if}
-
-									{#if config.showSceneManager || config.showScreenshotButton || config.showFullscreenButton}
-										<DropdownMenu.Separator class="my-1 h-px bg-border" />
-									{/if}
-
-									{#if config.showSceneManager}
-										<DropdownMenu.Item
-											closeOnSelect={false}
-											class="{itemClass} {sceneManagerOpen ? 'text-primary' : ''}"
-											onSelect={() => (sceneManagerOpen = !sceneManagerOpen)}
-										>
-											<Layers class="h-4 w-4" />
-											<span class="flex-1">{t.sceneManager}</span>
-											{#if sceneManagerOpen}
-												<Check class="h-4 w-4" />
-											{/if}
-										</DropdownMenu.Item>
-									{/if}
-
-									{#if config.showScreenshotButton}
-										<DropdownMenu.Item class={itemClass} onSelect={downloadScreenshot}>
-											<Camera class="h-4 w-4" />
-											{t.screenshot}
-										</DropdownMenu.Item>
-									{/if}
-
-									{#if config.showFullscreenButton}
-										<DropdownMenu.Item class={itemClass} onSelect={toggleFullscreen}>
-											{#if isFullscreen}
-												<Minimize class="h-4 w-4" />
-												{t.exitFullscreen}
-											{:else}
-												<Maximize class="h-4 w-4" />
-												{t.fullscreen}
-											{/if}
-										</DropdownMenu.Item>
-									{/if}
-								</DropdownMenu.Content>
-							</DropdownMenu.Portal>
+								{#if config.showFullscreenButton}
+									<DropdownMenu.Item onSelect={toggleFullscreen}>
+										{#if isFullscreen}
+											<Minimize />
+											{t.exitFullscreen}
+										{:else}
+											<Maximize />
+											{t.fullscreen}
+										{/if}
+									</DropdownMenu.Item>
+								{/if}
+							</DropdownMenu.Content>
 						</DropdownMenu.Root>
 					</div>
 				{/if}
@@ -699,13 +657,4 @@
 			backdrop-filter: blur(0px);
 		}
 	}
-
-	@keyframes selva-viewer-fade-in {
-		from {
-			opacity: 0;
-		}
-		to {
-			opacity: 1;
-		}
-	}
 </style>

package/dist/i18n/messages.d.ts

@@ -47,6 +47,8 @@ export interface ViewerMessages {
     solveSolving: string;
     parametersTab: string;
     moreTab: string;
+    scrollTabsBack: string;
+    scrollTabsForward: string;
     expandPanel: string;
     collapsePanel: string;
     /** `{side}` is replaced with `panelSideLeft` / `panelSideRight`. */

package/dist/i18n/messages.js

@@ -52,6 +52,8 @@ const en = {
     solveSolving: 'Solving…',
     parametersTab: 'Parameters',
     moreTab: 'More',
+    scrollTabsBack: 'Previous tabs',
+    scrollTabsForward: 'More tabs',
     expandPanel: 'Expand panel',
     collapsePanel: 'Collapse panel',
     expandSidePanel: 'Expand {side} panel',
@@ -112,6 +114,8 @@ const de = {
     solveSolving: 'Berechnung läuft…',
     parametersTab: 'Parameter',
     moreTab: 'Mehr',
+    scrollTabsBack: 'Vorherige Tabs',
+    scrollTabsForward: 'Weitere Tabs',
     expandPanel: 'Bereich aufklappen',
     collapsePanel: 'Bereich zuklappen',
     expandSidePanel: '{side} Bereich aufklappen',

package/dist/styles/base.css

@@ -20,6 +20,7 @@
 	--accent: oklch(0.93 0 0);
 	--accent-foreground: oklch(0.3 0 0);
 	--destructive: oklch(0.6 0.18 27);
+	--destructive-foreground: oklch(0.985 0 0);
 	--border: oklch(0.86 0 0);
 	--input: oklch(0.91 0 0);
 	--ring: oklch(0.67 0 0);
@@ -44,6 +45,8 @@
 	--sidebar-ring: oklch(0.67 0 0);
 	--inputparam: oklch(1 0 0);
 	--outputparam: oklch(1 0 0);
+	/* Scrim behind modal dialogs and drawers. */
+	--overlay: oklch(0 0 0 / 50%);
 }
 
 .dark {
@@ -62,6 +65,7 @@
 	--accent: oklch(0.36 0 0);
 	--accent-foreground: oklch(0.92 0 0);
 	--destructive: oklch(0.7 0.17 22);
+	--destructive-foreground: oklch(0.985 0 0);
 	--border: oklch(1 0 0 / 14%);
 	--input: oklch(1 0 0 / 12%);
 	--ring: oklch(0.74 0 0);
@@ -108,6 +112,8 @@
 	--color-accent: var(--accent);
 	--color-accent-foreground: var(--accent-foreground);
 	--color-destructive: var(--destructive);
+	--color-destructive-foreground: var(--destructive-foreground);
+	--color-overlay: var(--overlay);
 	--color-border: var(--border);
 	--color-input: var(--input);
 	--color-ring: var(--ring);
@@ -134,6 +140,43 @@
 	--color-outputparam: var(--outputparam);
 }
 
+/* Design tokens beyond Tailwind's defaults. Reach for these before an arbitrary value: the
+   design-system lint rejects `text-[10px]`, `max-h-[85dvh]` and the like. */
+@theme {
+	/* Type tags, counters and other dense labels. */
+	--text-2xs: 0.625rem;
+	--text-2xs--line-height: calc(0.875 / 0.625);
+	/* Bottom sheets cast their shadow upward. */
+	--shadow-sheet: 0 -4px 24px oklch(0 0 0 / 12%);
+	/* Width of anything that must keep a 1rem gutter on each side of the viewport. */
+	--container-screen-inset: calc(100% - 2rem);
+}
+
+@utility max-h-dialog {
+	max-height: 85dvh;
+}
+
+@utility no-scrollbar {
+	scrollbar-width: none;
+	&::-webkit-scrollbar {
+		display: none;
+	}
+}
+
+/* Number fields whose value is set elsewhere (a slider, a stepper) drop the browser's spinner. */
+@utility no-spinner {
+	appearance: textfield;
+	&::-webkit-inner-spin-button,
+	&::-webkit-outer-spin-button {
+		appearance: none;
+		margin: 0;
+	}
+}
+
+@utility rounded-inherit {
+	border-radius: inherit;
+}
+
 @layer base {
 	* {
 		@apply border-border outline-ring/50;