@ctrl-ui/react 0.9.3 → 0.9.5

package/README.md

@@ -26,6 +26,33 @@ import { Button } from "@ctrl-ui/react/ui/button";
 
 Import paths mirror the registry tree. To ship less CSS, import `styles/theme.css` and only the recipes and effects your components use.
 
+## Text and class names
+
+Render text with `Text` and `Heading`. Size, tone, and weight are props; `className` carries layout only:
+
+```tsx
+import { Text } from "@ctrl-ui/react/ui/typography";
+
+<Text size="caption" tone="muted">Saved</Text>
+```
+
+Merge class names with the package's `cn`. A bare `twMerge` reads `text-micro` as a text color and silently drops it next to `text-muted-foreground`. Add your own type rungs on top of `withControlUiMerge` instead of starting a second merger:
+
+```ts
+import { withControlUiMerge } from "@ctrl-ui/react/lib/cn";
+import { extendTailwindMerge } from "tailwind-merge";
+
+const twMerge = extendTailwindMerge({ extend: { classGroups: { "font-size": [{ text: ["hero"] }] } } }, withControlUiMerge);
+```
+
+Controls size their own text: pick the control's `size`, or set its `--cui-*-font-size` knob in your theme, rather than wrapping the label in a `text-*` span.
+
+With Biome, the shipped GritQL plugin warns on type rungs in `className`:
+
+```json
+{ "plugins": ["./node_modules/@ctrl-ui/react/lint/no-raw-type-classes.grit"] }
+```
+
 ## Customize
 
 Your application owns its theme. Override the library's neutral defaults in your CSS:

package/dist/blocks/coding-agent.d.ts

@@ -1,4 +1,6 @@
 import { ChatLayout } from "../chat-layout.js";
+import { SidebarProviderProps } from "../ui/sidebar-provider.js";
+import "../ui/sidebar.js";
 import { ComponentProps, ReactNode } from "react";
 //#region src/blocks/coding-agent.d.ts
 export type CodingAgentNavigationItem = {
@@ -19,7 +21,7 @@ export type CodingAgentProject = {
   tasks: readonly CodingAgentTask[];
   open?: boolean;
 };
-export type CodingAgentBlockProps = Omit<ComponentProps<"div">, "children"> & {
+export type CodingAgentBlockProps = Omit<ComponentProps<"div">, "children"> & Pick<SidebarProviderProps, "persistOpen" | "keyboardShortcut"> & {
   appName?: string;
   brand?: ReactNode;
   sidebarTop?: ReactNode;

package/dist/blocks/coding-agent.js

@@ -182,10 +182,7 @@ function CodingAgentSidebar({ appName, brand, sidebarTop, navigation, projects,
 					}, project.id))
 				})]
 			})] }),
-			sidebarFooter ? /* @__PURE__ */ jsx(SidebarFooter, {
-				className: "border-t border-sidebar-border",
-				children: sidebarFooter
-			}) : null,
+			sidebarFooter ? /* @__PURE__ */ jsx(SidebarFooter, { children: sidebarFooter }) : null,
 			/* @__PURE__ */ jsx(SidebarRail, {})
 		]
 	});

package/dist/blocks/file-explorer.d.ts

@@ -1,7 +1,9 @@
+import { SidebarProviderProps } from "../ui/sidebar-provider.js";
+import "../ui/sidebar.js";
 import { FileExplorerBreadcrumb, FileExplorerColumn, FileExplorerEntry, FileExplorerEntryDetail, FileExplorerLocation, FileExplorerResolution, FileExplorerSearchResult } from "./file-explorer-data.js";
 import { ComponentProps, ReactNode } from "react";
 //#region src/blocks/file-explorer.d.ts
-export type FileExplorerBlockProps = Omit<ComponentProps<"div">, "children" | "defaultValue" | "onChange"> & {
+export type FileExplorerBlockProps = Omit<ComponentProps<"div">, "children" | "defaultValue" | "onChange"> & Pick<SidebarProviderProps, "persistOpen" | "keyboardShortcut"> & {
   locations: readonly FileExplorerLocation[];
   activeLocationId?: string;
   defaultActiveLocationId?: string;
@@ -27,6 +29,6 @@ export type FileExplorerBlockProps = Omit<ComponentProps<"div">, "children" | "d
   detailsLabel?: string;
   layout?: "viewport" | "contained";
 };
-export declare function FileExplorerBlock({ locations, activeLocationId, defaultActiveLocationId, selectedPath, defaultSelectedPath, searchValue, defaultSearchValue, onActiveLocationChange, onSelectedPathChange, onSearchValueChange, onOpenEntry, sidebarTop, sidebarFooter, headerActions, headerMenuItems, searchPlaceholder, searchLabel, clearSearchLabel, searchResultsLabel, searchStatusLabel, backLabel, moreActionsLabel, detailsLabel, layout, className, style, ...props }: FileExplorerBlockProps): import("react").JSX.Element;
+export declare function FileExplorerBlock({ locations, activeLocationId, defaultActiveLocationId, selectedPath, defaultSelectedPath, searchValue, defaultSearchValue, onActiveLocationChange, onSelectedPathChange, onSearchValueChange, onOpenEntry, sidebarTop, sidebarFooter, headerActions, headerMenuItems, searchPlaceholder, searchLabel, clearSearchLabel, searchResultsLabel, searchStatusLabel, backLabel, moreActionsLabel, detailsLabel, layout, persistOpen, keyboardShortcut, className, style, ...props }: FileExplorerBlockProps): import("react").JSX.Element;
 //#endregion
 export type { FileExplorerBreadcrumb, FileExplorerColumn, FileExplorerEntry, FileExplorerEntryDetail, FileExplorerLocation, FileExplorerResolution, FileExplorerSearchResult };

package/dist/blocks/file-explorer.js

@@ -23,7 +23,7 @@ function defaultSearchStatusLabel(count, query) {
 	if (count === 0) return `No results for “${query}”`;
 	return count === 1 ? "1 result" : `${count} results`;
 }
-function FileExplorerBlock({ locations, activeLocationId, defaultActiveLocationId, selectedPath, defaultSelectedPath = [], searchValue, defaultSearchValue = "", onActiveLocationChange, onSelectedPathChange, onSearchValueChange, onOpenEntry, sidebarTop, sidebarFooter, headerActions, headerMenuItems, searchPlaceholder = "Search files", searchLabel = "Search files", clearSearchLabel = "Clear search", searchResultsLabel = "Search results", searchStatusLabel = defaultSearchStatusLabel, backLabel = "Go back", moreActionsLabel = "More actions", detailsLabel = "Details", layout = "viewport", className, style, ...props }) {
+function FileExplorerBlock({ locations, activeLocationId, defaultActiveLocationId, selectedPath, defaultSelectedPath = [], searchValue, defaultSearchValue = "", onActiveLocationChange, onSelectedPathChange, onSearchValueChange, onOpenEntry, sidebarTop, sidebarFooter, headerActions, headerMenuItems, searchPlaceholder = "Search files", searchLabel = "Search files", clearSearchLabel = "Clear search", searchResultsLabel = "Search results", searchStatusLabel = defaultSearchStatusLabel, backLabel = "Go back", moreActionsLabel = "More actions", detailsLabel = "Details", layout = "viewport", persistOpen, keyboardShortcut, className, style, ...props }) {
 	const [internalLocationId, setInternalLocationId] = useState(defaultActiveLocationId ?? locations[0]?.id);
 	const [internalSelectedPath, setInternalSelectedPath] = useState(defaultSelectedPath);
 	const [internalSearchValue, setInternalSearchValue] = useState(defaultSearchValue);
@@ -68,6 +68,8 @@ function FileExplorerBlock({ locations, activeLocationId, defaultActiveLocationI
 	};
 	return /* @__PURE__ */ jsxs(SidebarProvider, {
 		layout,
+		persistOpen,
+		keyboardShortcut,
 		className: cn("bg-background text-foreground", !contained && "h-svh overflow-hidden", className),
 		style: providerStyle,
 		...props,
@@ -145,7 +147,7 @@ function FileExplorerSidebar({ locations, activeLocationId, sidebarTop, sidebarF
 		collapsible: "offcanvas",
 		children: [
 			sidebarTop ? /* @__PURE__ */ jsx(SidebarHeader, {
-				className: "min-h-11 justify-center border-b border-sidebar-border px-3",
+				className: "min-h-11 justify-center px-3",
 				children: sidebarTop
 			}) : null,
 			/* @__PURE__ */ jsx(SidebarContent, { children: groups.map((group) => /* @__PURE__ */ jsxs(SidebarGroup, { children: [group.label ? /* @__PURE__ */ jsx(SidebarGroupLabel, { children: group.label }) : null, /* @__PURE__ */ jsx(SidebarMenu, { children: group.items.map((location) => /* @__PURE__ */ jsx(SidebarMenuItem, { children: /* @__PURE__ */ jsxs(SidebarMenuButton, {
@@ -157,24 +159,22 @@ function FileExplorerSidebar({ locations, activeLocationId, sidebarTop, sidebarF
 				},
 				children: [location.icon ?? /* @__PURE__ */ jsx(FolderIcon, {}), /* @__PURE__ */ jsx("span", { children: location.label })]
 			}) }, location.id)) })] }, group.label || "locations")) }),
-			sidebarFooter ? /* @__PURE__ */ jsx(SidebarFooter, {
-				className: "border-t border-sidebar-border",
-				children: sidebarFooter
-			}) : null,
+			sidebarFooter ? /* @__PURE__ */ jsx(SidebarFooter, { children: sidebarFooter }) : null,
 			/* @__PURE__ */ jsx(SidebarRail, {})
 		]
 	});
 }
 function FileExplorerHeader({ location, headingLevel, breadcrumbs, query, searchPlaceholder, searchLabel, clearSearchLabel, backLabel, moreActionsLabel, canGoBack, headerActions, headerMenuItems, onBack, onBreadcrumbSelect, onQueryChange }) {
 	return /* @__PURE__ */ jsxs("header", {
-		className: "shrink-0 border-b border-border/70 bg-card/35",
+		className: "shrink-0 border-b border-border/70",
 		children: [/* @__PURE__ */ jsxs("div", {
 			className: "flex h-12 items-center gap-2 px-3",
 			children: [
-				/* @__PURE__ */ jsx(SidebarTrigger, { size: "xs" }),
+				/* @__PURE__ */ jsx(SidebarTrigger, { size: "sm" }),
 				/* @__PURE__ */ jsx(Button, {
 					variant: "ghost",
-					size: "xs",
+					size: "sm",
+					iconOnly: true,
 					className: "hidden @xl/explorer:inline-flex",
 					disabled: !canGoBack,
 					"aria-label": backLabel,
@@ -198,7 +198,7 @@ function FileExplorerHeader({ location, headingLevel, breadcrumbs, query, search
 				}) : null,
 				headerMenuItems ? /* @__PURE__ */ jsxs(DropdownMenu, { children: [/* @__PURE__ */ jsx(DropdownMenuTrigger, {
 					variant: "ghost",
-					size: "xs",
+					size: "sm",
 					iconOnly: true,
 					"aria-label": moreActionsLabel,
 					className: headerActions ? "@2xl/explorer:hidden" : void 0,
@@ -212,7 +212,7 @@ function FileExplorerHeader({ location, headingLevel, breadcrumbs, query, search
 				})] }) : null,
 				searchPlaceholder ? /* @__PURE__ */ jsxs(InputGroup, {
 					size: "sm",
-					className: "flex-[0_1_9rem] bg-background/60 @xl/explorer:flex-[0_0_12rem]",
+					className: "flex-[0_1_9rem] @xl/explorer:flex-[0_0_12rem]",
 					children: [
 						/* @__PURE__ */ jsx(InputGroupAddon, {
 							className: "ps-2",
@@ -406,7 +406,7 @@ function FileExplorerColumns({ columns, selectedEntry, selectedPath, headingLeve
 					})
 				}) }) : null })] })]
 			}), /* @__PURE__ */ jsx("div", {
-				className: "min-h-0 flex-1 bg-card",
+				className: "min-h-0 flex-1",
 				children: activeColumn ? renderColumn(activeColumn, activeIndex, "narrow") : null
 			})] }) : null
 		}), /* @__PURE__ */ jsx("div", {
@@ -414,7 +414,7 @@ function FileExplorerColumns({ columns, selectedEntry, selectedPath, headingLeve
 			className: "hidden h-full min-h-0 @xl/explorer:block",
 			children: wideDisplayed ? /* @__PURE__ */ jsxs(ResizablePanelGroup, {
 				orientation: "horizontal",
-				className: "rounded-none border-0 bg-card shadow-none",
+				variant: "nested",
 				children: [columns.map((column, columnIndex) => /* @__PURE__ */ jsx(FileExplorerPanel, {
 					defaultSize: columnSize,
 					minSize: "16%",
@@ -529,7 +529,7 @@ function FileExplorerColumnView({ column, optionRef, onSelect, onOpen, onOptionK
 }
 function FileExplorerPreview({ entry, headingLevel }) {
 	if (!entry) return /* @__PURE__ */ jsx(Empty, {
-		className: "h-full rounded-none bg-background/45",
+		className: "h-full rounded-none",
 		children: /* @__PURE__ */ jsxs(EmptyHeader, { children: [
 			/* @__PURE__ */ jsx(EmptyMedia, { children: /* @__PURE__ */ jsx(FileIcon, {}) }),
 			/* @__PURE__ */ jsx(EmptyTitle, { children: "Select an item" }),
@@ -537,7 +537,7 @@ function FileExplorerPreview({ entry, headingLevel }) {
 		] })
 	});
 	return /* @__PURE__ */ jsx(ScrollArea, {
-		className: "h-full bg-background/45",
+		className: "h-full",
 		lockAxis: "x",
 		children: /* @__PURE__ */ jsx(FileExplorerPreviewContent, {
 			entry,
@@ -679,7 +679,7 @@ function FileExplorerStatusBar({ breadcrumbs, selectedEntry }) {
 	const itemCount = selectedEntry?.children?.length ?? 0;
 	const itemLabel = itemCount === 1 ? "1 item" : `${itemCount} items`;
 	return /* @__PURE__ */ jsxs("footer", {
-		className: "flex h-8 shrink-0 items-center gap-3 border-t border-border/70 bg-card/45 px-3 text-micro text-muted-foreground",
+		className: "flex h-8 shrink-0 items-center gap-3 border-t border-border/70 px-3 text-micro text-muted-foreground",
 		children: [/* @__PURE__ */ jsx("span", {
 			className: "min-w-0 flex-1 truncate",
 			title: path,
@@ -693,7 +693,7 @@ function FileExplorerStatusBar({ breadcrumbs, selectedEntry }) {
 function FileExplorerAddressBar({ breadcrumbs, onSelect }) {
 	return /* @__PURE__ */ jsx(Breadcrumb, {
 		"aria-label": "Current folder",
-		className: "min-w-0 overflow-hidden rounded-[var(--radius-control)] border bg-background/55 px-2 py-1 shadow-inner",
+		className: "min-w-0 overflow-hidden px-1",
 		children: /* @__PURE__ */ jsx(BreadcrumbList, {
 			className: "min-w-0 flex-nowrap overflow-hidden",
 			children: breadcrumbs.map((breadcrumb, index) => {

package/dist/blocks/settings.d.ts

@@ -1,8 +1,10 @@
 import { Button } from "../ui/button.js";
+import { SidebarProviderProps } from "../ui/sidebar-provider.js";
+import "../ui/sidebar.js";
 import { SettingDefinition, SettingsControlProps, SettingsPageDefinition, SettingsSectionDefinition } from "./settings-data.js";
 import { ComponentProps, ReactNode } from "react";
 //#region src/blocks/settings.d.ts
-export type SettingsBlockProps = Omit<ComponentProps<"div">, "children"> & {
+export type SettingsBlockProps = Omit<ComponentProps<"div">, "children"> & Pick<SidebarProviderProps, "persistOpen" | "keyboardShortcut"> & {
   pages: readonly SettingsPageDefinition[];
   activePageId?: string;
   defaultActivePageId?: string;

package/dist/knob-contracts/range-knobs.d.ts

@@ -1,4 +1,4 @@
 //#region src/knob-contracts/range-knobs.d.ts
-export declare const rangeKnobs: readonly ["--cui-range-level-warning-background", "--cui-range-level-clip-background", "--cui-range-level-size", "--cui-range-level-scale-foreground", "--cui-range-indeterminate-size", "--cui-range-track-radius", "--cui-range-track-background", "--cui-range-indicator-radius", "--cui-range-indicator-background", "--cui-range-thumb-radius", "--cui-range-thumb-background", "--cui-range-thumb-border-color", "--cui-range-thumb-shadow"];
+export declare const rangeKnobs: readonly ["--cui-range-level-warning-background", "--cui-range-level-clip-background", "--cui-range-level-muted-background", "--cui-range-level-size", "--cui-range-level-scale-foreground", "--cui-range-indeterminate-size", "--cui-range-track-radius", "--cui-range-track-background", "--cui-range-indicator-radius", "--cui-range-indicator-background", "--cui-range-thumb-radius", "--cui-range-thumb-background", "--cui-range-thumb-border-color", "--cui-range-thumb-shadow"];
 export type RangeKnobStyle = Partial<Record<(typeof rangeKnobs)[number], string>>;
 //#endregion

package/dist/knob-contracts/range-knobs.js

@@ -2,6 +2,7 @@
 const rangeKnobs = [
 	"--cui-range-level-warning-background",
 	"--cui-range-level-clip-background",
+	"--cui-range-level-muted-background",
 	"--cui-range-level-size",
 	"--cui-range-level-scale-foreground",
 	"--cui-range-indeterminate-size",

package/dist/lib/cn.d.ts

@@ -1,4 +1,6 @@
 import { ClassValue } from "clsx";
+import { Config } from "tailwind-merge";
 //#region src/lib/cn.d.ts
+export declare function withControlUiMerge(config: Config<string, string>): Config<string, string>;
 export declare function cn(...inputs: ClassValue[]): string;
 //#endregion

package/dist/lib/cn.js

@@ -1,30 +1,35 @@
 import { clsx } from "clsx";
-import { extendTailwindMerge } from "tailwind-merge";
+import { extendTailwindMerge, mergeConfigs } from "tailwind-merge";
 //#region src/lib/cn.ts
-const twMerge = extendTailwindMerge({
-	extend: { classGroups: {
-		"font-size": [{ text: [
-			"micro",
-			"caption",
-			"label",
-			"body",
-			"body-lg",
-			"heading-1",
-			"heading-2",
-			"heading-3",
-			"heading-4",
-			"display"
-		] }],
-		shadow: [{ shadow: [
-			"pop",
-			"soft",
-			"modal"
-		] }]
-	} },
-	override: { conflictingClassGroups: { "font-size": [] } }
-});
+const textScale = [
+	"micro",
+	"caption",
+	"label",
+	"body",
+	"body-lg",
+	"heading-1",
+	"heading-2",
+	"heading-3",
+	"heading-4",
+	"display"
+];
+const shadowScale = [
+	"pop",
+	"soft",
+	"modal"
+];
+function withControlUiMerge(config) {
+	return mergeConfigs(config, {
+		extend: { classGroups: {
+			"font-size": [{ text: textScale }],
+			shadow: [{ shadow: shadowScale }]
+		} },
+		override: { conflictingClassGroups: { "font-size": [] } }
+	});
+}
+const twMerge = extendTailwindMerge(withControlUiMerge);
 function cn(...inputs) {
 	return twMerge(clsx(inputs));
 }
 //#endregion
-export { cn };
+export { cn, withControlUiMerge };

package/dist/styles/recipes/button-states.css

@@ -63,4 +63,16 @@
     cursor: not-allowed;
     opacity: var(--disabled-opacity);
   }
+
+  @media (forced-colors: active) {
+    :where([data-control-family="button"][data-control="true"]:not(:focus-visible, :has(:focus-visible))) {
+      outline: 1px solid currentColor;
+      outline-offset: -1px;
+    }
+
+    :where([data-control-family="button"][data-control="true"][data-active="true"]:not(:focus-visible, :has(:focus-visible))) {
+      outline: var(--focus-ring-width) solid Highlight;
+      outline-offset: calc(var(--focus-ring-width) * -1);
+    }
+  }
 }

package/dist/styles/recipes/button.css

@@ -164,7 +164,7 @@
     --cui-button-shadow: inset 0 0 0 var(--control-rim-width) var(--control-rim), var(--shadow-sm);
     --cui-button-active-background: oklch(from var(--primary) l c h / 0.08);
     --cui-button-active-foreground: var(--primary-text);
-    --cui-button-active-shadow: inset 0 0 0 1px oklch(from var(--primary) l c h / 0.6), var(--shadow-sm);
+    --cui-button-active-shadow: inset 0 0 0 var(--control-rim-width) oklch(from var(--primary) l c h / 0.6), var(--shadow-sm);
     --cui-button-active-hover-background: oklch(from var(--primary) l c h / 0.1);
   }
 

package/dist/styles/recipes/chat-composer-attachment.css

@@ -25,6 +25,13 @@
     transition-timing-function: var(--ease-standard);
   }
 
+  @media (forced-colors: active) {
+    :where([data-control-family="chat-composer-attachment"][data-slot="root"][data-variant]:not(:focus-visible, :has(:focus-visible))) {
+      outline: 1px solid CanvasText;
+      outline-offset: -1px;
+    }
+  }
+
   :where([data-control-family="chat-composer-attachment"][data-slot="list"]) {
     gap: calc(var(--spacing) * 2);
     padding: var(--cui-chat-composer-attachment-list-padding);

package/dist/styles/recipes/color-picker-details.css

@@ -5,6 +5,13 @@
     box-shadow: var(--cui-color-picker-trigger-shadow);
   }
 
+  @media (forced-colors: active) {
+    :where([data-control-family="color-picker"][data-slot="trigger-color"]) {
+      outline: 1px solid CanvasText;
+      outline-offset: -1px;
+    }
+  }
+
   :where([data-control-family="color-picker"][data-slot="trigger"]) {
     border-radius: var(--cui-color-picker-trigger-radius);
     transition-property: transform, translate, scale, rotate;

package/dist/styles/recipes/field.css

@@ -25,6 +25,13 @@
     backdrop-filter: var(--cui-field-backdrop-filter);
   }
 
+  @media (forced-colors: active) {
+    :where([data-control-family="field"][data-control="true"]:not(:focus-visible, :has(:focus-visible))) {
+      outline: 1px solid CanvasText;
+      outline-offset: -1px;
+    }
+  }
+
   :where(
     [data-control-family="field"][data-control="true"]:not([data-control-family="field"][data-field-kind="autocomplete"]):not(
       [data-control-family="field"][data-field-kind="combobox"]

package/dist/styles/recipes/inline-attachment.css

@@ -52,6 +52,13 @@
     }
   }
 
+  @media (forced-colors: active) {
+    :where([data-control-family="inline-attachment"][data-slot="root"]:not(:focus-visible)) {
+      outline: 1px solid CanvasText;
+      outline-offset: -1px;
+    }
+  }
+
   :where([data-control-family="inline-attachment"][data-slot="image"]) {
     border-radius: inherit;
   }

package/dist/styles/recipes/kbd.css

@@ -28,6 +28,13 @@
     --cui-kbd-shadow: 0 0 transparent;
   }
 
+  @media (forced-colors: active) {
+    :where([data-control-family="kbd"][data-slot="root"]:not([data-variant="ghost"])) {
+      outline: 1px solid CanvasText;
+      outline-offset: -1px;
+    }
+  }
+
   :where([data-control-family="kbd"][data-slot="group"]) {
     gap: calc(var(--spacing) * 1);
   }

package/dist/styles/recipes/pagination.css

@@ -17,7 +17,7 @@
     border-radius: var(--cui-pagination-link-radius);
     background: var(--cui-pagination-link-background);
     box-shadow:
-      inset 0 0 0 1px var(--_pagination-link-border-color),
+      inset 0 0 0 var(--control-rim-width) var(--_pagination-link-border-color),
       var(--cui-pagination-link-shadow);
     color: var(--cui-pagination-link-foreground);
     font-variant-numeric: tabular-nums;
@@ -39,6 +39,13 @@
     opacity: var(--disabled-opacity);
   }
 
+  @media (forced-colors: active) {
+    :where([data-control-family="pagination"][data-slot="link"][data-active="true"]:not(:focus-visible)) {
+      outline: var(--focus-ring-width) solid Highlight;
+      outline-offset: calc(var(--focus-ring-width) * -1);
+    }
+  }
+
   :where([data-control-family="pagination"][data-slot="link"]:has(> svg:first-child)) {
     padding-inline-start: calc(var(--spacing) * 2);
   }

package/dist/styles/recipes/range-level-meter.css

@@ -2,6 +2,7 @@
   :where([data-control-family="range"][data-range-kind="level-meter"][data-slot="root"]) {
     --cui-range-level-warning-background: var(--warning);
     --cui-range-level-clip-background: var(--destructive);
+    --cui-range-level-muted-background: var(--muted-foreground);
     --cui-range-level-size: calc(var(--spacing) * 2);
     --cui-range-level-scale-foreground: var(--muted-foreground);
     --_range-level-peak-size: 2px;
@@ -96,6 +97,13 @@
     );
   }
 
+  :where(
+    [data-range-kind="level-meter"][data-slot="root"][data-muted]
+      [data-control-family="range"][data-range-kind="level-meter"]:is([data-slot="bar"], [data-slot="peak"])
+  ) {
+    background: var(--cui-range-level-muted-background);
+  }
+
   :where([data-control-family="range"][data-range-kind="level-meter"][data-slot="bar"]) {
     clip-path: inset(0 calc((1 - var(--_range-level, 0)) * 100%) 0 0 round var(--cui-range-indicator-radius));
   }
@@ -145,6 +153,12 @@
   initial-value: transparent;
 }
 
+@property --cui-range-level-muted-background {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: transparent;
+}
+
 @property --cui-range-level-size {
   syntax: "<length-percentage>";
   inherits: true;

package/dist/styles/recipes/scroll-area.css

@@ -39,14 +39,12 @@
   :where(
     [data-control-family="scroll-area"][data-slot="root"][data-scrollbar-gutter="stable"]
       > [data-slot="scrollbar"][data-orientation="vertical"]:not([data-has-overflow-y])
-      > [data-slot="thumb"]
   ),
   :where(
     [data-control-family="scroll-area"][data-slot="root"][data-scrollbar-gutter="stable"]
       > [data-slot="scrollbar"][data-orientation="horizontal"]:not([data-has-overflow-x])
-      > [data-slot="thumb"]
   ) {
-    display: none;
+    visibility: hidden;
   }
 
   @supports (corner-shape: squircle) {

package/dist/styles/recipes/tabs.css

@@ -114,6 +114,18 @@
     opacity: var(--disabled-opacity);
   }
 
+  @media (forced-colors: active) {
+    :where([data-control-family="tabs"][data-slot="list"]:not([data-variant="browser"], [data-single="true"])) {
+      outline: 1px solid CanvasText;
+      outline-offset: -1px;
+    }
+
+    :where([data-control-family="tabs"][data-slot="list"]:not([data-variant="browser"]) [data-slot="indicator"]) {
+      outline: var(--focus-ring-width) solid Highlight;
+      outline-offset: calc(var(--focus-ring-width) * -1);
+    }
+  }
+
   :where([data-control-family="tabs"][data-slot="list"][data-variant="browser"]) {
     --_tabs-browser-corner-double: calc(var(--_tabs-trigger-radius-fit) + var(--_tabs-trigger-radius-fit));
     --_tabs-browser-inset: calc(var(--_tabs-trigger-radius-fit) + var(--cui-tabs-surface-radius));

package/dist/styles/type-scale.css

@@ -65,7 +65,8 @@
 
 /*
  * History: fixed 3 competing type systems (Tailwind defaults + named rungs + raw text-[Npx]) into one rung/role; 14px = body.
- * Usage: apply the rung directly to the semantic element (no <Text> component), e.g. text-heading-1 on <h1>, text-body on <p>.
+ * Usage: React text goes through <Text>/<Heading> (ui/typography): size, tone and weight are props, className stays layout-only.
+ * A bare rung is for markup React doesn't render as components (MDX, markdown, email HTML), e.g. text-heading-1 on <h1>.
  * Heading LEVEL is the document outline; the RUNG is the look. They are decoupled on purpose: an <h3> may wear text-heading-2.
  * Control chrome text is sized by its recipe (`--cui-button-font-size`, `--cui-field-font-size`), not by these utilities.
  */

package/dist/ui/level-meter.d.ts

@@ -12,6 +12,7 @@ export type LevelMeterProps = Omit<ComponentProps<"div">, "style"> & {
   maxDb?: number;
   warningDb?: number;
   clipDb?: number;
+  muted?: boolean;
   orientation?: LevelMeterOrientation;
   style?: CSSProperties & RangeKnobStyle;
 };
@@ -28,7 +29,7 @@ export type LevelMeterScaleProps = Omit<ComponentProps<"div">, "style" | "childr
   ticks?: readonly number[];
   style?: CSSProperties & RangeKnobStyle;
 };
-export declare function LevelMeter({ value, source, minDb, maxDb, warningDb, clipDb, orientation, className, style, children, ref, ...props }: LevelMeterProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+export declare function LevelMeter({ value, source, minDb, maxDb, warningDb, clipDb, muted, orientation, className, style, children, ref, ...props }: LevelMeterProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
 export declare function LevelMeterTrack({ className, ...props }: LevelMeterTrackProps): import("react").JSX.Element;
 export declare function LevelMeterBar({ className, ...props }: LevelMeterBarProps): import("react").JSX.Element;
 export declare function LevelMeterPeak({ className, ...props }: LevelMeterPeakProps): import("react").JSX.Element;

package/dist/ui/level-meter.js

@@ -77,7 +77,7 @@ function createLevelMeterPainter() {
 		}
 	};
 }
-function LevelMeter({ value, source, minDb = -60, maxDb = 0, warningDb = -18, clipDb = -6, orientation = "horizontal", className, style, children, ref, ...props }) {
+function LevelMeter({ value, source, minDb = -60, maxDb = 0, warningDb = -18, clipDb = -6, muted = false, orientation = "horizontal", className, style, children, ref, ...props }) {
 	const [painter] = useState(createLevelMeterPainter);
 	const rootRef = useRef(null);
 	const labelled = Boolean(props["aria-label"] || props["aria-labelledby"]);
@@ -130,6 +130,7 @@ function LevelMeter({ value, source, minDb = -60, maxDb = 0, warningDb = -18, cl
 			"data-range-kind": "level-meter",
 			"data-slot": "root",
 			"data-orientation": orientation,
+			"data-muted": muted || void 0,
 			className: cn("grid", className),
 			style: zoneStyle,
 			children: /* @__PURE__ */ jsx(LevelMeterScaleContext, {

package/dist/ui/sidebar.js

@@ -309,7 +309,7 @@ function SidebarContent({ className, children, ...props }) {
 		className: cn("min-h-0 flex-1 group-data-[collapsible=icon]:overflow-hidden", className),
 		lockAxis: "x",
 		scrollbarGutter: iconOnly ? "auto" : void 0,
-		viewportClassName: "overscroll-y-contain",
+		viewportClassName: "data-has-overflow-y:overscroll-y-contain",
 		...props,
 		children: /* @__PURE__ */ jsx("div", {
 			"data-control-ui": "sidebar",

package/dist/ui/toggle.js

@@ -76,7 +76,7 @@ function ToggleGroup({ className, orientation = "horizontal", indicator, childre
 			"data-orientation": orientation,
 			"data-track": resolvedIndicator,
 			orientation,
-			className: cn(buttonTrackStructureClasses, "inline-flex items-center data-[track=hover]:gap-0", orientation === "vertical" && "flex-col", className),
+			className: cn(buttonTrackStructureClasses, "inline-flex items-center", orientation === "vertical" && "flex-col", className),
 			...props,
 			children: [children, tracksHover ? /* @__PURE__ */ jsx(TrackHighlight, { className: "z-0" }) : null]
 		})

package/dist/ui/typography.d.ts

@@ -17,6 +17,8 @@ declare const toneClassNames: {
   readonly foreground: "text-foreground";
   readonly muted: "text-muted-foreground";
   readonly primary: "text-primary-text";
+  readonly success: "text-success-text";
+  readonly warning: "text-warning-text";
   readonly destructive: "text-destructive-text";
 };
 declare const weightClassNames: {

package/dist/ui/typography.js

@@ -18,6 +18,8 @@ const toneClassNames = {
 	foreground: "text-foreground",
 	muted: "text-muted-foreground",
 	primary: "text-primary-text",
+	success: "text-success-text",
+	warning: "text-warning-text",
 	destructive: "text-destructive-text"
 };
 const weightClassNames = {

package/lint/no-raw-type-classes.grit

@@ -0,0 +1,7 @@
+language js(typescript, jsx)
+
+JsxAttribute(name=$name, initializer=$value) as $attr where {
+  $name <: `className`,
+  $value <: contains r".*\btext-(?:micro|caption|label|body|body-lg|heading-[1-4]|display)\b.*",
+  register_diagnostic(span=$attr, message="Type rung in className: render text through <Text>/<Heading>, or size the control with its size prop or --cui-*-font-size knob.", severity="warn")
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ctrl-ui/react",
-  "version": "0.9.3",
+  "version": "0.9.5",
   "description": "100+ React components for Tailwind CSS and shadcn/ui: pickers, trees, editors, canvases, app templates, and AI chat surfaces, with neutral defaults and consumer-owned themes.",
   "keywords": [
     "react",
@@ -32,7 +32,8 @@
     "**/*.css"
   ],
   "files": [
-    "dist"
+    "dist",
+    "lint/*.grit"
   ],
   "publishConfig": {
     "access": "public"