@stll/ui 0.34.5 → 0.36.0

package/dist/components/application-rail.js

@@ -32,7 +32,7 @@ const ApplicationRailMenu = ({ className, ...props }) => /* @__PURE__ */ jsx("di
 	...props
 });
 const ApplicationRailButton = ({ className, ...props }) => /* @__PURE__ */ jsx("button", {
-	className: cn("text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground active:bg-sidebar-accent active:text-sidebar-accent-foreground flex shrink-0 items-center justify-center rounded-md outline-hidden transition-colors focus-visible:ring-2 disabled:pointer-events-none disabled:opacity-50", APPLICATION_RAIL_BUTTON_SIZE, className),
+	className: cn("text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground active:bg-sidebar-accent active:text-sidebar-accent-foreground flex shrink-0 items-center justify-center rounded-md outline-hidden focus-visible:ring-2 disabled:pointer-events-none disabled:opacity-50", APPLICATION_RAIL_BUTTON_SIZE, className),
 	"data-slot": "application-rail-button",
 	type: "button",
 	...props

package/dist/components/breadcrumb.js

@@ -23,7 +23,7 @@ const BreadcrumbItem = ({ className, ...props }) => /* @__PURE__ */ jsx("li", {
 });
 function BreadcrumbLink({ className, render, ...props }) {
 	const defaultProps = {
-		className: cn("hover:text-foreground transition-colors", className),
+		className: cn("hover:text-foreground", className),
 		"data-slot": "breadcrumb-link"
 	};
 	return useRender({

package/dist/components/button.d.ts

@@ -13,7 +13,7 @@ import { VariantProps } from "class-variance-authority";
  */
 declare const buttonAccessibleDisabledClass = "cursor-not-allowed opacity-64";
 declare const buttonVariants: (props?: ({
-  size?: "default" | "sm" | "lg" | "row" | "chip" | "icon" | "icon-lg" | "icon-sm" | "icon-xl" | "icon-xs" | "xl" | "xs" | null | undefined;
+  size?: "default" | "chip" | "icon" | "icon-lg" | "icon-sm" | "icon-xl" | "icon-xs" | "lg" | "row" | "sm" | "xl" | "xs" | null | undefined;
   variant?: "link" | "default" | "destructive" | "destructive-outline" | "destructive-ghost" | "ghost" | "muted" | "outline" | "secondary" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 type ButtonProps = {

package/dist/components/button.js

@@ -19,7 +19,7 @@ import { cva } from "class-variance-authority";
 * swaps the cursor so the control still reads as unavailable on hover.
 */
 const buttonAccessibleDisabledClass = "cursor-not-allowed opacity-64";
-const buttonVariants = cva("focus-visible:ring-ring focus-visible:ring-offset-background relative inline-flex shrink-0 cursor-pointer items-center justify-center gap-2 rounded-lg border text-base font-medium whitespace-nowrap transition-shadow outline-none before:pointer-events-none before:absolute before:inset-0 before:rounded-[calc(var(--radius-lg)-1px)] focus-visible:ring-2 focus-visible:ring-offset-1 disabled:pointer-events-none disabled:opacity-64 sm:text-sm pointer-coarse:after:absolute pointer-coarse:after:size-full pointer-coarse:after:min-h-11 pointer-coarse:after:min-w-11 [&_svg]:pointer-events-none [&_svg]:-mx-0.5 [&_svg]:shrink-0 [&_svg:not([class*='opacity-'])]:opacity-80 [&_svg:not([class*='size-'])]:size-4.5 sm:[&_svg:not([class*='size-'])]:size-4", {
+const buttonVariants = cva("focus-visible:ring-ring focus-visible:ring-offset-background relative inline-flex shrink-0 cursor-pointer items-center justify-center gap-2 rounded-lg border text-base font-medium whitespace-nowrap outline-none before:pointer-events-none before:absolute before:inset-0 before:rounded-[calc(var(--radius-lg)-1px)] focus-visible:ring-2 focus-visible:ring-offset-1 disabled:pointer-events-none disabled:opacity-64 sm:text-sm pointer-coarse:after:absolute pointer-coarse:after:size-full pointer-coarse:after:min-h-11 pointer-coarse:after:min-w-11 [&_svg]:pointer-events-none [&_svg]:-mx-0.5 [&_svg]:shrink-0 [&_svg:not([class*='opacity-'])]:opacity-80 [&_svg:not([class*='size-'])]:size-4.5 sm:[&_svg:not([class*='size-'])]:size-4", {
 	defaultVariants: {
 		size: "default",
 		variant: "default"
@@ -63,7 +63,7 @@ function Button({ className, variant, size, render, loading, children, disabled,
 	const isAccessibleDisabled = disposition === BUTTON_DISPOSITION.accessibleDisabled;
 	const defaultProps = {
 		children: loading ? /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(LoaderIcon, {
-			className: "animate-spin",
+			className: "animate-spin [transition:opacity_150ms_ease-out,scale_320ms_var(--ease-spring)] motion-reduce:transition-none starting:scale-50 starting:opacity-0",
 			"data-slot": "button-loader"
 		}), children] }) : children,
 		className: cn(buttonVariants({

package/dist/components/checkbox.js

@@ -4,7 +4,7 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import { Checkbox as Checkbox$1 } from "@base-ui/react/checkbox";
 //#region src/components/checkbox.tsx
 const Checkbox = ({ className, ...props }) => /* @__PURE__ */ jsx(Checkbox$1.Root, {
-	className: cn("border-input bg-background ring-ring focus-visible:ring-offset-background aria-invalid:border-destructive/36 focus-visible:aria-invalid:border-destructive/64 focus-visible:aria-invalid:ring-destructive/48 dark:not-data-checked:bg-input/32 dark:aria-invalid:ring-destructive/24 relative inline-flex size-4.5 shrink-0 items-center justify-center rounded-[4px] border shadow-xs/5 transition-shadow outline-none not-dark:bg-clip-padding before:pointer-events-none before:absolute before:inset-0 before:rounded-[3px] not-data-disabled:not-data-checked:not-aria-invalid:before:shadow-[0_1px_--theme(--color-black/4%)] focus-visible:ring-2 focus-visible:ring-offset-1 data-disabled:opacity-64 sm:size-4 dark:not-data-disabled:not-data-checked:not-aria-invalid:before:shadow-[0_-1px_--theme(--color-white/6%)] [[data-disabled],[data-checked],[aria-invalid]]:shadow-none", className),
+	className: cn("border-input bg-background ring-ring focus-visible:ring-offset-background aria-invalid:border-destructive/36 focus-visible:aria-invalid:border-destructive/64 focus-visible:aria-invalid:ring-destructive/48 dark:not-data-checked:bg-input/32 dark:aria-invalid:ring-destructive/24 relative inline-flex size-4.5 shrink-0 items-center justify-center rounded-[4px] border shadow-xs/5 outline-none not-dark:bg-clip-padding before:pointer-events-none before:absolute before:inset-0 before:rounded-[3px] not-data-disabled:not-data-checked:not-aria-invalid:before:shadow-[0_1px_--theme(--color-black/4%)] focus-visible:ring-2 focus-visible:ring-offset-1 data-disabled:opacity-64 sm:size-4 dark:not-data-disabled:not-data-checked:not-aria-invalid:before:shadow-[0_-1px_--theme(--color-white/6%)] [[data-disabled],[data-checked],[aria-invalid]]:shadow-none", className),
 	"data-slot": "checkbox",
 	...props,
 	children: /* @__PURE__ */ jsx(Checkbox$1.Indicator, {

package/dist/components/color-picker.js

@@ -125,7 +125,7 @@ const ColorSwatch = ({ cssColor, selected, label, isLight, onClick, presentation
 	const swatch = /* @__PURE__ */ jsx("button", {
 		"aria-label": label,
 		"aria-pressed": selected,
-		className: cn(presentation === "inline" ? "ring-offset-popover relative grid size-11 shrink-0 place-items-center rounded-full border ring-offset-2 transition-transform outline-none hover:scale-105 focus-visible:ring-2" : "hover:border-foreground relative flex size-6 items-center justify-center rounded-md border transition-[transform,border-color] hover:scale-115 sm:size-5", selectionClassName, isLight && !selected && "border-border"),
+		className: cn(presentation === "inline" ? "ring-offset-popover relative grid size-11 shrink-0 place-items-center rounded-full border ring-offset-2 transition-transform outline-none hover:scale-105 focus-visible:ring-2" : "hover:border-foreground relative flex size-6 items-center justify-center rounded-md border transition-transform hover:scale-115 sm:size-5", selectionClassName, isLight && !selected && "border-border"),
 		onClick,
 		style: { backgroundColor: cssColor },
 		type: "button",
@@ -248,7 +248,7 @@ const ColorPickerContent = ({ value, onSelect, onClear, presets, columns, defaul
 			onClear && /* @__PURE__ */ jsxs(Popover.Close, {
 				render: /* @__PURE__ */ jsx("button", {
 					"aria-label": "No color",
-					className: "text-muted-foreground hover:bg-accent hover:text-accent-foreground text-2xs flex h-6 w-full items-center gap-1.5 rounded px-1 transition-colors",
+					className: "text-muted-foreground hover:bg-accent hover:text-accent-foreground text-2xs flex h-6 w-full items-center gap-1.5 rounded px-1",
 					onClick: onClear,
 					type: "button"
 				}),
@@ -271,7 +271,7 @@ const ColorPickerContent = ({ value, onSelect, onClear, presets, columns, defaul
 				}, preset.value))
 			}),
 			!expanded ? /* @__PURE__ */ jsxs("button", {
-				className: "text-muted-foreground hover:text-foreground text-2xs flex items-center justify-center gap-1 py-0.5 transition-colors",
+				className: "text-muted-foreground hover:text-foreground text-2xs flex items-center justify-center gap-1 py-0.5",
 				onClick: () => setExpanded(true),
 				type: "button",
 				children: [moreLabel, /* @__PURE__ */ jsx(ChevronDownIcon, { className: "size-3" })]

package/dist/components/combobox.js

@@ -198,7 +198,7 @@ const ComboboxCollection = (props) => /* @__PURE__ */ jsx(Combobox$1.Collection,
 const ComboboxChips = ({ className, children, startAddon, ...props }) => {
 	const { chipsRef } = React$1.use(ComboboxContext);
 	return /* @__PURE__ */ jsxs(Combobox$1.Chips, {
-		className: cn("border-input bg-background ring-ring/24 focus-within:border-ring has-autofill:bg-foreground/4 has-aria-invalid:border-destructive/36 focus-within:has-aria-invalid:border-destructive/64 focus-within:has-aria-invalid:ring-destructive/16 dark:not-has-disabled:bg-input/32 dark:has-autofill:bg-foreground/8 dark:has-aria-invalid:ring-destructive/24 relative inline-flex min-h-9 w-full flex-wrap gap-1 rounded-lg border p-[calc(--spacing(1)-1px)] text-base shadow-xs/5 transition-shadow outline-none *:min-h-7 not-dark:bg-clip-padding before:pointer-events-none before:absolute before:inset-0 before:rounded-[calc(var(--radius-lg)-1px)] not-has-disabled:not-focus-within:not-aria-invalid:before:shadow-[0_1px_--theme(--color-black/4%)] focus-within:ring-[3px] has-disabled:pointer-events-none has-disabled:opacity-64 has-data-[size=lg]:min-h-10 has-data-[size=lg]:*:min-h-8 has-data-[size=sm]:min-h-8 has-data-[size=sm]:*:min-h-6 has-[:disabled,:focus-within,[aria-invalid]]:shadow-none sm:min-h-8 sm:text-sm sm:*:min-h-6 sm:has-data-[size=lg]:min-h-9 sm:has-data-[size=lg]:*:min-h-7 sm:has-data-[size=sm]:min-h-7 sm:has-data-[size=sm]:*:min-h-5 dark:not-has-disabled:not-focus-within:not-aria-invalid:before:shadow-[0_-1px_--theme(--color-white/6%)]", className),
+		className: cn("border-input bg-background ring-ring/24 focus-within:border-ring has-autofill:bg-foreground/4 has-aria-invalid:border-destructive/36 focus-within:has-aria-invalid:border-destructive/64 focus-within:has-aria-invalid:ring-destructive/16 dark:not-has-disabled:bg-input/32 dark:has-autofill:bg-foreground/8 dark:has-aria-invalid:ring-destructive/24 relative inline-flex min-h-9 w-full flex-wrap gap-1 rounded-lg border p-[calc(--spacing(1)-1px)] text-base shadow-xs/5 outline-none *:min-h-7 not-dark:bg-clip-padding before:pointer-events-none before:absolute before:inset-0 before:rounded-[calc(var(--radius-lg)-1px)] not-has-disabled:not-focus-within:not-aria-invalid:before:shadow-[0_1px_--theme(--color-black/4%)] focus-within:ring-[3px] has-disabled:pointer-events-none has-disabled:opacity-64 has-data-[size=lg]:min-h-10 has-data-[size=lg]:*:min-h-8 has-data-[size=sm]:min-h-8 has-data-[size=sm]:*:min-h-6 has-[:disabled,:focus-within,[aria-invalid]]:shadow-none sm:min-h-8 sm:text-sm sm:*:min-h-6 sm:has-data-[size=lg]:min-h-9 sm:has-data-[size=lg]:*:min-h-7 sm:has-data-[size=sm]:min-h-7 sm:has-data-[size=sm]:*:min-h-5 dark:not-has-disabled:not-focus-within:not-aria-invalid:before:shadow-[0_-1px_--theme(--color-white/6%)]", className),
 		"data-slot": "combobox-chips",
 		onMouseDown: containedHandler(chipsRef, (e) => {
 			const { target } = e;

package/dist/components/composer.d.ts

@@ -15,7 +15,7 @@ export declare const COMPOSER_CONTROL_BUTTON_SIZE: "icon-sm";
  *  radius is the docked bar's original `rounded-2xl`: at the compact row's
  *  stature it reads as a soft pill, which is the shape the composers were
  *  meant to unify on. */
-export declare const COMPOSER_BOX_CLASS = "bg-background rounded-2xl border transition-colors";
+export declare const COMPOSER_BOX_CLASS = "bg-background rounded-2xl border";
 /** The box's focus ring in its default (non-anonymized) treatment. */
 export declare const COMPOSER_BOX_FOCUS_CLASS = "focus-within:border-ring";
 /**
@@ -69,7 +69,7 @@ export declare const COMPOSER_SEND_BUTTON_CLASS = "bg-foreground text-background
  * law home's scope and jurisdiction): quiet text with a hover surface, so
  * the row stays subordinate to the box above it.
  */
-export declare const COMPOSER_PICKER_TRIGGER_CLASS = "text-muted-foreground hover:text-foreground hover:bg-accent inline-flex min-w-0 shrink items-center gap-1 rounded-md px-1.5 py-0.5 text-2xs transition-colors";
+export declare const COMPOSER_PICKER_TRIGGER_CLASS = "text-muted-foreground hover:text-foreground hover:bg-accent inline-flex min-w-0 shrink items-center gap-1 rounded-md px-1.5 py-0.5 text-2xs";
 type ComposerStatusRowProps = {
   /** Left cluster: matter picker, web-search / anonymize toggles, ... */
   start?: ReactNode | undefined;

package/dist/components/composer.js

@@ -19,7 +19,7 @@ const COMPOSER_CONTROL_BUTTON_SIZE = "icon-sm";
 *  radius is the docked bar's original `rounded-2xl`: at the compact row's
 *  stature it reads as a soft pill, which is the shape the composers were
 *  meant to unify on. */
-const COMPOSER_BOX_CLASS = "bg-background rounded-2xl border transition-colors";
+const COMPOSER_BOX_CLASS = "bg-background rounded-2xl border";
 /** The box's focus ring in its default (non-anonymized) treatment. */
 const COMPOSER_BOX_FOCUS_CLASS = "focus-within:border-ring";
 /**
@@ -73,7 +73,7 @@ const COMPOSER_SEND_BUTTON_CLASS = "bg-foreground text-background hover:bg-foreg
 * law home's scope and jurisdiction): quiet text with a hover surface, so
 * the row stays subordinate to the box above it.
 */
-const COMPOSER_PICKER_TRIGGER_CLASS = "text-muted-foreground hover:text-foreground hover:bg-accent inline-flex min-w-0 shrink items-center gap-1 rounded-md px-1.5 py-0.5 text-2xs transition-colors";
+const COMPOSER_PICKER_TRIGGER_CLASS = "text-muted-foreground hover:text-foreground hover:bg-accent inline-flex min-w-0 shrink items-center gap-1 rounded-md px-1.5 py-0.5 text-2xs";
 /**
 * The slim status row rendered beneath a composer box: a `text-xs` row with
 * a start cluster and an end slot pinned to the far edge. Shared by every

package/dist/components/date-picker-popover.js

@@ -334,7 +334,7 @@ const DatePickerPopoverContent = ({ id, labelledBy, value: rawValue, onChange, l
 			render: /* @__PURE__ */ jsx("button", {
 				"aria-label": !labelledBy && value ? displayLabel : void 0,
 				"aria-labelledby": labelledBy ? `${labelledBy} ${displayValueId}` : void 0,
-				className: cn("flex h-auto min-h-7 w-full min-w-0 items-center gap-1.5", "rounded-md px-1.5 text-sm", "hover:bg-muted transition-colors", (() => {
+				className: cn("flex h-auto min-h-7 w-full min-w-0 items-center gap-1.5", "rounded-md px-1.5 text-sm", "hover:bg-muted", (() => {
 					if (isOverdue) return "text-destructive";
 					if (value) return "text-foreground";
 					return "text-muted-foreground";
@@ -379,7 +379,7 @@ const DatePickerPopoverContent = ({ id, labelledBy, value: rawValue, onChange, l
 								children: /* @__PURE__ */ jsx(DirectionalIcon, { icon: ChevronLeftIcon })
 							}),
 							/* @__PURE__ */ jsx("button", {
-								className: cn("text-xs font-medium transition-colors", view !== "years" && "hover:bg-muted cursor-pointer rounded-md px-2 py-0.5", view === "years" && "cursor-default"),
+								className: cn("text-xs font-medium", view !== "years" && "hover:bg-muted cursor-pointer rounded-md px-2 py-0.5", view === "years" && "cursor-default"),
 								onClick: handleHeaderClick,
 								tabIndex: view === "years" ? -1 : 0,
 								type: "button",
@@ -422,7 +422,7 @@ const DatePickerPopoverContent = ({ id, labelledBy, value: rawValue, onChange, l
 								"aria-disabled": disabled || void 0,
 								"aria-label": formatDayLabel(day.date),
 								"aria-selected": isSelected || void 0,
-								className: cn("flex size-8 items-center justify-center", "rounded-full text-xs transition-colors", "focus-visible:ring-ring focus-visible:ring-1 focus-visible:outline-none", disabled ? "text-foreground-disabled cursor-not-allowed" : "hover:bg-muted cursor-pointer", !day.isCurrentMonth && !disabled && "text-foreground-disabled", day.isWeekend && day.isCurrentMonth && !disabled && !isSelected && "text-foreground-label", day.isToday && !isSelected && !disabled && "ring-foreground font-medium ring-1", isSelected && "bg-primary text-primary-foreground hover:bg-primary/90"),
+								className: cn("flex size-8 items-center justify-center", "rounded-full text-xs", "focus-visible:ring-ring focus-visible:ring-1 focus-visible:outline-none", disabled ? "text-foreground-disabled cursor-not-allowed" : "hover:bg-muted cursor-pointer", !day.isCurrentMonth && !disabled && "text-foreground-disabled", day.isWeekend && day.isCurrentMonth && !disabled && !isSelected && "text-foreground-label", day.isToday && !isSelected && !disabled && "ring-foreground font-medium ring-1", isSelected && "bg-primary text-primary-foreground hover:bg-primary/90"),
 								"data-date": day.date,
 								onClick: () => {
 									if (!disabled) onChange(day.date);
@@ -504,7 +504,7 @@ const MonthGrid = ({ locale, viewYear, currentMonth, currentYear, onSelect, toda
 				const isSelected = currentMonth !== null && currentYear !== null && month === currentMonth && viewYear === currentYear;
 				return /* @__PURE__ */ jsxs("button", {
 					"aria-selected": isSelected || void 0,
-					className: cn("rounded-md px-2 py-1.5 text-xs transition-colors", "hover:bg-muted cursor-pointer", "focus-visible:ring-ring focus-visible:ring-1 focus-visible:outline-none", month === todayMonth && viewYear === todayYear && !isSelected && "ring-foreground font-medium ring-1", isSelected && "bg-primary text-primary-foreground hover:bg-primary/90"),
+					className: cn("rounded-md px-2 py-1.5 text-xs", "hover:bg-muted cursor-pointer", "focus-visible:ring-ring focus-visible:ring-1 focus-visible:outline-none", month === todayMonth && viewYear === todayYear && !isSelected && "ring-foreground font-medium ring-1", isSelected && "bg-primary text-primary-foreground hover:bg-primary/90"),
 					onClick: () => onSelect(month),
 					role: "gridcell",
 					type: "button",
@@ -536,7 +536,7 @@ const YearGrid = ({ decadeBase, currentYear, onSelect, today }) => {
 				const isSelected = currentYear !== null && year === currentYear;
 				return /* @__PURE__ */ jsx("button", {
 					"aria-selected": isSelected || void 0,
-					className: cn("rounded-md px-2 py-1.5 text-xs transition-colors", "hover:bg-muted cursor-pointer", "focus-visible:ring-ring focus-visible:ring-1 focus-visible:outline-none", isOutside && !isSelected && "text-foreground-subtle", year === todayYear && !isSelected && "ring-foreground font-medium ring-1", isSelected && "bg-primary text-primary-foreground hover:bg-primary/90"),
+					className: cn("rounded-md px-2 py-1.5 text-xs", "hover:bg-muted cursor-pointer", "focus-visible:ring-ring focus-visible:ring-1 focus-visible:outline-none", isOutside && !isSelected && "text-foreground-subtle", year === todayYear && !isSelected && "ring-foreground font-medium ring-1", isSelected && "bg-primary text-primary-foreground hover:bg-primary/90"),
 					onClick: () => onSelect(year),
 					role: "gridcell",
 					type: "button",

package/dist/components/input-control.d.ts

@@ -9,7 +9,7 @@
  * two boxes drift apart the moment a caller sizes the wrapper: the text sits
  * at the top of the control while the icon stays centred.
  */
-export declare const INPUT_CONTROL_CLASS_NAME = "border-input bg-background text-foreground ring-ring/24 has-autofill:bg-foreground/4 has-focus-visible:border-ring has-aria-invalid:border-destructive/36 has-focus-visible:has-aria-invalid:border-destructive/64 has-focus-visible:has-aria-invalid:ring-destructive/16 dark:bg-input/32 dark:has-autofill:bg-foreground/8 dark:has-aria-invalid:ring-destructive/24 relative inline-flex w-full rounded-lg border text-base shadow-xs/5 transition-shadow not-dark:bg-clip-padding before:pointer-events-none before:absolute before:inset-0 before:rounded-[calc(var(--radius-lg)-1px)] not-has-disabled:not-has-focus-visible:not-has-aria-invalid:before:shadow-[0_1px_--theme(--color-black/4%)] has-focus-visible:ring-[3px] has-disabled:opacity-64 has-[:disabled,:focus-visible,[aria-invalid]]:shadow-none sm:text-sm dark:not-has-disabled:not-has-focus-visible:not-has-aria-invalid:before:shadow-[0_-1px_--theme(--color-white/6%)] pointer-coarse:min-h-11";
+export declare const INPUT_CONTROL_CLASS_NAME = "border-input bg-background text-foreground ring-ring/24 has-autofill:bg-foreground/4 has-focus-visible:border-ring has-aria-invalid:border-destructive/36 has-focus-visible:has-aria-invalid:border-destructive/64 has-focus-visible:has-aria-invalid:ring-destructive/16 dark:bg-input/32 dark:has-autofill:bg-foreground/8 dark:has-aria-invalid:ring-destructive/24 relative inline-flex w-full rounded-lg border text-base shadow-xs/5 not-dark:bg-clip-padding before:pointer-events-none before:absolute before:inset-0 before:rounded-[calc(var(--radius-lg)-1px)] not-has-disabled:not-has-focus-visible:not-has-aria-invalid:before:shadow-[0_1px_--theme(--color-black/4%)] has-focus-visible:ring-[3px] has-disabled:opacity-64 has-[:disabled,:focus-visible,[aria-invalid]]:shadow-none sm:text-sm dark:not-has-disabled:not-has-focus-visible:not-has-aria-invalid:before:shadow-[0_-1px_--theme(--color-white/6%)] pointer-coarse:min-h-11";
 export declare const INPUT_ELEMENT_CLASS_NAME = "placeholder:text-foreground-placeholder h-full min-h-8.5 w-full min-w-0 rounded-[inherit] px-[calc(--spacing(3)-1px)] leading-8.5 outline-none [transition:background-color_5000000s_ease-in-out_0s] sm:min-h-7.5 sm:leading-7.5";
 export declare const INPUT_SIZE_CLASS_NAMES: {
   readonly sm: "min-h-7.5 px-[calc(--spacing(2.5)-1px)] leading-7.5 sm:min-h-6.5 sm:leading-6.5";

package/dist/components/input-control.js

@@ -10,7 +10,7 @@ import { CONTROL_SIZE } from "../lib/control-size.js";
 * two boxes drift apart the moment a caller sizes the wrapper: the text sits
 * at the top of the control while the icon stays centred.
 */
-const INPUT_CONTROL_CLASS_NAME = "border-input bg-background text-foreground ring-ring/24 has-autofill:bg-foreground/4 has-focus-visible:border-ring has-aria-invalid:border-destructive/36 has-focus-visible:has-aria-invalid:border-destructive/64 has-focus-visible:has-aria-invalid:ring-destructive/16 dark:bg-input/32 dark:has-autofill:bg-foreground/8 dark:has-aria-invalid:ring-destructive/24 relative inline-flex w-full rounded-lg border text-base shadow-xs/5 transition-shadow not-dark:bg-clip-padding before:pointer-events-none before:absolute before:inset-0 before:rounded-[calc(var(--radius-lg)-1px)] not-has-disabled:not-has-focus-visible:not-has-aria-invalid:before:shadow-[0_1px_--theme(--color-black/4%)] has-focus-visible:ring-[3px] has-disabled:opacity-64 has-[:disabled,:focus-visible,[aria-invalid]]:shadow-none sm:text-sm dark:not-has-disabled:not-has-focus-visible:not-has-aria-invalid:before:shadow-[0_-1px_--theme(--color-white/6%)] pointer-coarse:min-h-11";
+const INPUT_CONTROL_CLASS_NAME = "border-input bg-background text-foreground ring-ring/24 has-autofill:bg-foreground/4 has-focus-visible:border-ring has-aria-invalid:border-destructive/36 has-focus-visible:has-aria-invalid:border-destructive/64 has-focus-visible:has-aria-invalid:ring-destructive/16 dark:bg-input/32 dark:has-autofill:bg-foreground/8 dark:has-aria-invalid:ring-destructive/24 relative inline-flex w-full rounded-lg border text-base shadow-xs/5 not-dark:bg-clip-padding before:pointer-events-none before:absolute before:inset-0 before:rounded-[calc(var(--radius-lg)-1px)] not-has-disabled:not-has-focus-visible:not-has-aria-invalid:before:shadow-[0_1px_--theme(--color-black/4%)] has-focus-visible:ring-[3px] has-disabled:opacity-64 has-[:disabled,:focus-visible,[aria-invalid]]:shadow-none sm:text-sm dark:not-has-disabled:not-has-focus-visible:not-has-aria-invalid:before:shadow-[0_-1px_--theme(--color-white/6%)] pointer-coarse:min-h-11";
 const INPUT_ELEMENT_CLASS_NAME = "placeholder:text-foreground-placeholder h-full min-h-8.5 w-full min-w-0 rounded-[inherit] px-[calc(--spacing(3)-1px)] leading-8.5 outline-none [transition:background-color_5000000s_ease-in-out_0s] sm:min-h-7.5 sm:leading-7.5";
 const INPUT_SIZE_CLASS_NAMES = {
 	[CONTROL_SIZE.sm]: "min-h-7.5 px-[calc(--spacing(2.5)-1px)] leading-7.5 sm:min-h-6.5 sm:leading-6.5",

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

@@ -5,7 +5,7 @@ import { VariantProps } from "class-variance-authority";
 //#region src/components/input-group.d.ts
 declare const InputGroup: ({ className, ...props }: React$1.ComponentProps<"div">) => React$1.JSX.Element;
 declare const inputGroupAddonVariants: (props?: ({
-  align?: "inline-start" | "block-end" | "block-start" | "inline-end" | null | undefined;
+  align?: "inline-end" | "inline-start" | "block-end" | "block-start" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 declare const InputGroupAddon: ({ className, align, ...props }: React$1.ComponentProps<"div"> & VariantProps<typeof inputGroupAddonVariants>) => React$1.JSX.Element;
 declare const InputGroupText: ({ className, ...props }: React$1.ComponentProps<"span">) => React$1.JSX.Element;

package/dist/components/input-group.js

@@ -6,7 +6,7 @@ import { jsx } from "react/jsx-runtime";
 import { cva } from "class-variance-authority";
 //#region src/components/input-group.tsx
 const InputGroup = ({ className, ...props }) => /* @__PURE__ */ jsx("div", {
-	className: cn("border-input bg-background text-foreground ring-ring/24 has-autofill:bg-foreground/4 has-[input:focus-visible,textarea:focus-visible]:border-ring has-[input[aria-invalid],textarea[aria-invalid]]:border-destructive/36 has-[input:focus-visible,textarea:focus-visible]:has-[input[aria-invalid],textarea[aria-invalid]]:border-destructive/64 has-[input:focus-visible,textarea:focus-visible]:has-[input[aria-invalid],textarea[aria-invalid]]:ring-destructive/16 dark:bg-input/32 dark:has-autofill:bg-foreground/8 dark:has-[input[aria-invalid],textarea[aria-invalid]]:ring-destructive/24 relative inline-flex w-full min-w-0 items-center rounded-lg border text-base shadow-xs/5 transition-shadow not-dark:bg-clip-padding before:pointer-events-none before:absolute before:inset-0 before:rounded-[calc(var(--radius-lg)-1px)] not-has-[input:disabled,textarea:disabled]:not-has-[input:focus-visible,textarea:focus-visible]:not-has-[input[aria-invalid],textarea[aria-invalid]]:before:shadow-[0_1px_--theme(--color-black/4%)] has-data-[align=block-end]:h-auto has-data-[align=block-end]:flex-col has-data-[align=block-start]:h-auto has-data-[align=block-start]:flex-col has-[input:disabled,textarea:disabled]:opacity-64 has-[input:disabled,textarea:disabled,input:focus-visible,textarea:focus-visible,input[aria-invalid],textarea[aria-invalid]]:shadow-none has-[input:focus-visible,textarea:focus-visible]:ring-[3px] has-[textarea]:h-auto sm:text-sm dark:not-has-[input:disabled,textarea:disabled]:not-has-[input:focus-visible,textarea:focus-visible]:not-has-[input[aria-invalid],textarea[aria-invalid]]:before:shadow-[0_-1px_--theme(--color-white/6%)] has-data-[align=inline-end]:**:[[data-size=sm]_input]:pe-1.5 has-data-[align=inline-start]:**:[[data-size=sm]_input]:ps-1.5 *:[[data-slot=input-control],[data-slot=textarea-control]]:contents *:[[data-slot=input-control],[data-slot=textarea-control]]:before:hidden has-data-[align=block-end]:**:[input]:pt-1.5 has-data-[align=block-start]:**:[input]:pb-1.5 has-data-[align=inline-end]:**:[input]:pe-2 has-data-[align=inline-start]:**:[input]:ps-2 has-[[data-align=block-start],[data-align=block-end]]:**:[input]:h-auto **:[textarea_button]:rounded-[calc(var(--radius-md)-1px)] **:[textarea]:min-h-20.5 **:[textarea]:resize-none **:[textarea]:py-[calc(--spacing(3)-1px)] **:[textarea]:max-sm:min-h-23.5", className),
+	className: cn("border-input bg-background text-foreground ring-ring/24 has-autofill:bg-foreground/4 has-[input:focus-visible,textarea:focus-visible]:border-ring has-[input[aria-invalid],textarea[aria-invalid]]:border-destructive/36 has-[input:focus-visible,textarea:focus-visible]:has-[input[aria-invalid],textarea[aria-invalid]]:border-destructive/64 has-[input:focus-visible,textarea:focus-visible]:has-[input[aria-invalid],textarea[aria-invalid]]:ring-destructive/16 dark:bg-input/32 dark:has-autofill:bg-foreground/8 dark:has-[input[aria-invalid],textarea[aria-invalid]]:ring-destructive/24 relative inline-flex w-full min-w-0 items-center rounded-lg border text-base shadow-xs/5 not-dark:bg-clip-padding before:pointer-events-none before:absolute before:inset-0 before:rounded-[calc(var(--radius-lg)-1px)] not-has-[input:disabled,textarea:disabled]:not-has-[input:focus-visible,textarea:focus-visible]:not-has-[input[aria-invalid],textarea[aria-invalid]]:before:shadow-[0_1px_--theme(--color-black/4%)] has-data-[align=block-end]:h-auto has-data-[align=block-end]:flex-col has-data-[align=block-start]:h-auto has-data-[align=block-start]:flex-col has-[input:disabled,textarea:disabled]:opacity-64 has-[input:disabled,textarea:disabled,input:focus-visible,textarea:focus-visible,input[aria-invalid],textarea[aria-invalid]]:shadow-none has-[input:focus-visible,textarea:focus-visible]:ring-[3px] has-[textarea]:h-auto sm:text-sm dark:not-has-[input:disabled,textarea:disabled]:not-has-[input:focus-visible,textarea:focus-visible]:not-has-[input[aria-invalid],textarea[aria-invalid]]:before:shadow-[0_-1px_--theme(--color-white/6%)] has-data-[align=inline-end]:**:[[data-size=sm]_input]:pe-1.5 has-data-[align=inline-start]:**:[[data-size=sm]_input]:ps-1.5 *:[[data-slot=input-control],[data-slot=textarea-control]]:contents *:[[data-slot=input-control],[data-slot=textarea-control]]:before:hidden has-data-[align=block-end]:**:[input]:pt-1.5 has-data-[align=block-start]:**:[input]:pb-1.5 has-data-[align=inline-end]:**:[input]:pe-2 has-data-[align=inline-start]:**:[input]:ps-2 has-[[data-align=block-start],[data-align=block-end]]:**:[input]:h-auto **:[textarea_button]:rounded-[calc(var(--radius-md)-1px)] **:[textarea]:min-h-20.5 **:[textarea]:resize-none **:[textarea]:py-[calc(--spacing(3)-1px)] **:[textarea]:max-sm:min-h-23.5", className),
 	"data-slot": "input-group",
 	role: "group",
 	...props

package/dist/components/input-otp.js

@@ -19,7 +19,7 @@ const InputOTPGroup = ({ className, ...props }) => /* @__PURE__ */ jsx("div", {
 const InputOTPSlot = ({ index, className, ...props }) => {
 	const { char, hasFakeCaret, isActive } = React$1.use(OTPInputContext).slots[index] ?? {};
 	return /* @__PURE__ */ jsxs("div", {
-		className: cn("border-input aria-invalid:border-destructive data-[active=true]:border-ring data-[active=true]:ring-ring/50 data-[active=true]:aria-invalid:border-destructive data-[active=true]:aria-invalid:ring-destructive/20 dark:bg-input/30 dark:data-[active=true]:aria-invalid:ring-destructive/40 relative flex h-9 w-9 items-center justify-center border-y border-e text-sm shadow-xs transition-[border-color,outline] outline-none first:rounded-s-md first:border-s last:rounded-e-md data-[active=true]:z-10 data-[active=true]:ring-[3px]", className),
+		className: cn("border-input aria-invalid:border-destructive data-[active=true]:border-ring data-[active=true]:ring-ring/50 data-[active=true]:aria-invalid:border-destructive data-[active=true]:aria-invalid:ring-destructive/20 dark:bg-input/30 dark:data-[active=true]:aria-invalid:ring-destructive/40 relative flex h-9 w-9 items-center justify-center border-y border-e text-sm shadow-xs outline-none first:rounded-s-md first:border-s last:rounded-e-md data-[active=true]:z-10 data-[active=true]:ring-[3px]", className),
 		"data-active": isActive,
 		"data-slot": "input-otp-slot",
 		...props,

package/dist/components/input.js

@@ -20,7 +20,7 @@ const Input = ({ className, size = CONTROL_SIZE.default, unstyled = false, nativ
 	};
 	const inputClassName = cn(INPUT_ELEMENT_CLASS_NAME, INPUT_SIZE_CLASS_NAMES[controlSize], props.type === "search" && "ps-8 [&::-webkit-search-cancel-button]:appearance-none [&::-webkit-search-decoration]:appearance-none [&::-webkit-search-results-button]:appearance-none [&::-webkit-search-results-decoration]:appearance-none");
 	return /* @__PURE__ */ jsxs("span", {
-		className: cn(!unstyled && "border-input bg-background text-foreground ring-ring/24 has-autofill:bg-foreground/4 has-focus-visible:border-ring has-aria-invalid:border-destructive/36 has-focus-visible:has-aria-invalid:border-destructive/64 has-focus-visible:has-aria-invalid:ring-destructive/16 dark:bg-input/32 dark:has-autofill:bg-foreground/8 dark:has-aria-invalid:ring-destructive/24 relative inline-flex w-full rounded-lg border text-base shadow-xs/5 transition-shadow not-dark:bg-clip-padding before:pointer-events-none before:absolute before:inset-0 before:rounded-[calc(var(--radius-lg)-1px)] not-has-disabled:not-has-focus-visible:not-has-aria-invalid:before:shadow-[0_1px_--theme(--color-black/4%)] has-focus-visible:ring-[3px] has-disabled:opacity-64 has-[:disabled,:focus-visible,[aria-invalid]]:shadow-none sm:text-sm dark:not-has-disabled:not-has-focus-visible:not-has-aria-invalid:before:shadow-[0_-1px_--theme(--color-white/6%)] pointer-coarse:min-h-11", className) || void 0,
+		className: cn(!unstyled && "border-input bg-background text-foreground ring-ring/24 has-autofill:bg-foreground/4 has-focus-visible:border-ring has-aria-invalid:border-destructive/36 has-focus-visible:has-aria-invalid:border-destructive/64 has-focus-visible:has-aria-invalid:ring-destructive/16 dark:bg-input/32 dark:has-autofill:bg-foreground/8 dark:has-aria-invalid:ring-destructive/24 relative inline-flex w-full rounded-lg border text-base shadow-xs/5 not-dark:bg-clip-padding before:pointer-events-none before:absolute before:inset-0 before:rounded-[calc(var(--radius-lg)-1px)] not-has-disabled:not-has-focus-visible:not-has-aria-invalid:before:shadow-[0_1px_--theme(--color-black/4%)] has-focus-visible:ring-[3px] has-disabled:opacity-64 has-[:disabled,:focus-visible,[aria-invalid]]:shadow-none sm:text-sm dark:not-has-disabled:not-has-focus-visible:not-has-aria-invalid:before:shadow-[0_-1px_--theme(--color-white/6%)] pointer-coarse:min-h-11", className) || void 0,
 		"data-size": size,
 		"data-slot": "input-control",
 		dir: contentDir.dir,

package/dist/components/landing.d.ts

@@ -25,9 +25,9 @@ type LandingGreetingProps = {
 };
 export declare const LandingGreeting: ({ icon, children }: LandingGreetingProps) => import("react").JSX.Element;
 /** A column's heading: an icon and an uppercase label, as a link or a trigger. */
-export declare const LANDING_SECTION_HEADING_CLASS = "text-muted-foreground hover:text-foreground focus-visible:ring-ring flex items-center gap-2 rounded-md px-1 text-xs font-semibold tracking-widest uppercase transition-colors outline-none focus-visible:ring-2";
+export declare const LANDING_SECTION_HEADING_CLASS = "text-muted-foreground hover:text-foreground focus-visible:ring-ring flex items-center gap-2 rounded-md px-1 text-xs font-semibold tracking-widest uppercase outline-none focus-visible:ring-2";
 /** A row of a column, as a link or a button. */
-export declare const LANDING_ROW_CLASS = "group hover:bg-accent/50 focus-visible:ring-ring rounded-md px-2 py-1.5 text-start transition-colors outline-none focus-visible:ring-2";
+export declare const LANDING_ROW_CLASS = "group hover:bg-accent/50 focus-visible:ring-ring rounded-md px-2 py-1.5 text-start outline-none focus-visible:ring-2";
 type LandingSectionProps = {
   children: ReactNode;
   heading: ReactNode;

package/dist/components/landing.js

@@ -40,9 +40,9 @@ const LandingGreeting = ({ icon, children }) => /* @__PURE__ */ jsxs("div", {
 	})]
 });
 /** A column's heading: an icon and an uppercase label, as a link or a trigger. */
-const LANDING_SECTION_HEADING_CLASS = "text-muted-foreground hover:text-foreground focus-visible:ring-ring flex items-center gap-2 rounded-md px-1 text-xs font-semibold tracking-widest uppercase transition-colors outline-none focus-visible:ring-2";
+const LANDING_SECTION_HEADING_CLASS = "text-muted-foreground hover:text-foreground focus-visible:ring-ring flex items-center gap-2 rounded-md px-1 text-xs font-semibold tracking-widest uppercase outline-none focus-visible:ring-2";
 /** A row of a column, as a link or a button. */
-const LANDING_ROW_CLASS = "group hover:bg-accent/50 focus-visible:ring-ring rounded-md px-2 py-1.5 text-start transition-colors outline-none focus-visible:ring-2";
+const LANDING_ROW_CLASS = "group hover:bg-accent/50 focus-visible:ring-ring rounded-md px-2 py-1.5 text-start outline-none focus-visible:ring-2";
 /** A column: its heading stays put, its rows scroll beneath it. */
 const LandingSection = ({ children, heading }) => /* @__PURE__ */ jsxs("section", {
 	className: "flex min-h-0 min-w-0 flex-col",
@@ -86,7 +86,7 @@ const LandingItemText = ({ icon, iconTone = "muted", meta, title }) => /* @__PUR
 	})]
 });
 const LandingRowIcon = ({ children, tone = "muted" }) => /* @__PURE__ */ jsx("span", {
-	className: cn("mt-0.5 flex size-4 shrink-0 items-center justify-center transition-colors", tone === "muted" && "text-foreground-muted group-hover:text-muted-foreground"),
+	className: cn("mt-0.5 flex size-4 shrink-0 items-center justify-center", tone === "muted" && "text-foreground-muted group-hover:text-muted-foreground"),
 	children
 });
 const LandingEmpty = ({ children }) => /* @__PURE__ */ jsx("div", {

package/dist/components/menu.js

@@ -58,9 +58,9 @@ const MenuCheckboxItem = ({ className, children, checked, variant = "default", .
 		className: "col-start-1",
 		children
 	}), /* @__PURE__ */ jsx(Menu$1.CheckboxItemIndicator, {
-		className: "focus-visible:ring-ring focus-visible:ring-offset-background data-checked:bg-primary data-unchecked:bg-input inline-flex h-[calc(var(--thumb-size)+2px)] w-[calc(var(--thumb-size)*2-2px)] shrink-0 items-center rounded-full p-px inset-shadow-[0_1px_--theme(--color-black/4%)] transition-[background-color,box-shadow] duration-200 outline-none [--thumb-size:--spacing(4)] focus-visible:ring-2 focus-visible:ring-offset-1 data-disabled:opacity-64 sm:[--thumb-size:--spacing(3)]",
+		className: "focus-visible:ring-ring focus-visible:ring-offset-background data-checked:bg-primary data-unchecked:bg-input inline-flex h-[calc(var(--thumb-size)+2px)] w-[calc(var(--thumb-size)*2-2px)] shrink-0 items-center rounded-full p-px inset-shadow-[0_1px_--theme(--color-black/4%)] outline-none [--thumb-size:--spacing(4)] focus-visible:ring-2 focus-visible:ring-offset-1 data-disabled:opacity-64 sm:[--thumb-size:--spacing(3)]",
 		keepMounted: true,
-		children: /* @__PURE__ */ jsx("span", { className: "bg-background pointer-events-none block aspect-square h-full origin-left rounded-(--thumb-size) shadow-sm/5 will-change-transform [transition:translate_.15s,border-radius_.15s,scale_.1s_.1s,transform-origin_.15s] in-[[data-slot=menu-checkbox-item]:active]:rounded-[var(--thumb-size)/calc(var(--thumb-size)*1.10)] in-[[data-slot=menu-checkbox-item]:active]:not-data-disabled:scale-x-110 in-[[data-slot=menu-checkbox-item][data-checked]]:origin-[var(--thumb-size)_50%] in-[[data-slot=menu-checkbox-item][data-checked]]:translate-x-[calc(var(--thumb-size)-4px)]" })
+		children: /* @__PURE__ */ jsx("span", { className: "bg-background pointer-events-none block aspect-square h-full origin-left rounded-(--thumb-size) shadow-sm/5 will-change-transform [transition:translate_.15s,scale_.1s_.1s,transform-origin_.15s] in-[[data-slot=menu-checkbox-item]:active]:rounded-[var(--thumb-size)/calc(var(--thumb-size)*1.10)] in-[[data-slot=menu-checkbox-item]:active]:not-data-disabled:scale-x-110 in-[[data-slot=menu-checkbox-item][data-checked]]:origin-[var(--thumb-size)_50%] in-[[data-slot=menu-checkbox-item][data-checked]]:translate-x-[calc(var(--thumb-size)-4px)]" })
 	})] }) : /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(Menu$1.CheckboxItemIndicator, {
 		className: "col-start-1",
 		children: /* @__PURE__ */ jsxs("svg", {

package/dist/components/scroll-area.js

@@ -13,7 +13,7 @@ const ScrollArea = ({ axis = "both", className, children, scrollFade = false, sc
 	children: [
 		/* @__PURE__ */ jsx(ScrollArea$1.Viewport, {
 			ref: viewportRef,
-			className: cn("focus-visible:ring-ring focus-visible:ring-offset-background h-full overscroll-contain rounded-[inherit] transition-shadow outline-none focus-visible:ring-2 focus-visible:ring-offset-1 data-has-overflow-x:overscroll-x-contain", scrollFade && "mask-t-from-[calc(100%-min(var(--fade-size),var(--scroll-area-overflow-y-start)))] mask-r-from-[calc(100%-min(var(--fade-size),var(--scroll-area-overflow-x-end)))] mask-b-from-[calc(100%-min(var(--fade-size),var(--scroll-area-overflow-y-end)))] mask-l-from-[calc(100%-min(var(--fade-size),var(--scroll-area-overflow-x-start)))] [--fade-size:1.5rem]", scrollbarGutter && "data-has-overflow-x:pb-2.5 data-has-overflow-y:pe-2.5", AXIS_VIEWPORT_CLASS[axis]),
+			className: cn("focus-visible:ring-ring focus-visible:ring-offset-background h-full overscroll-contain rounded-[inherit] outline-none focus-visible:ring-2 focus-visible:ring-offset-1 data-has-overflow-x:overscroll-x-contain", scrollFade && "mask-t-from-[calc(100%-min(var(--fade-size),var(--scroll-area-overflow-y-start)))] mask-r-from-[calc(100%-min(var(--fade-size),var(--scroll-area-overflow-x-end)))] mask-b-from-[calc(100%-min(var(--fade-size),var(--scroll-area-overflow-y-end)))] mask-l-from-[calc(100%-min(var(--fade-size),var(--scroll-area-overflow-x-start)))] [--fade-size:1.5rem]", scrollbarGutter && "data-has-overflow-x:pb-2.5 data-has-overflow-y:pe-2.5", AXIS_VIEWPORT_CLASS[axis]),
 			"data-slot": "scroll-area-viewport",
 			children
 		}),

package/dist/components/select.js

@@ -31,7 +31,7 @@ const Select = ({ children, isItemEqualToValue, itemToStringLabel, itemToStringV
 	});
 };
 const SelectTrigger = ({ className, size = CONTROL_SIZE.default, children, ...props }) => /* @__PURE__ */ jsxs(Select$1.Trigger, {
-	className: cn("border-input bg-background text-foreground ring-ring/24 focus-visible:border-ring aria-invalid:border-destructive/36 focus-visible:aria-invalid:border-destructive/64 focus-visible:aria-invalid:ring-destructive/16 dark:bg-input/32 dark:aria-invalid:ring-destructive/24 relative inline-flex min-h-9 w-full min-w-36 items-center justify-center gap-2 rounded-lg border px-[calc(--spacing(3)-1px)] text-start text-base shadow-xs/5 transition-shadow outline-none select-none not-dark:bg-clip-padding before:pointer-events-none before:absolute before:inset-0 before:rounded-[calc(var(--radius-lg)-1px)] not-data-disabled:not-focus-visible:not-aria-invalid:not-data-pressed:before:shadow-[0_1px_--theme(--color-black/4%)] focus-visible:ring-[3px] data-disabled:pointer-events-none data-disabled:opacity-64 sm:min-h-8 sm:text-sm dark:not-data-disabled:not-focus-visible:not-aria-invalid:not-data-pressed:before:shadow-[0_-1px_--theme(--color-white/6%)] pointer-coarse:after:absolute pointer-coarse:after:size-full pointer-coarse:after:min-h-11 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='opacity-'])]:opacity-80 [&_svg:not([class*='size-'])]:size-4.5 sm:[&_svg:not([class*='size-'])]:size-4 [[data-disabled],:focus-visible,[aria-invalid],[data-pressed]]:shadow-none", SELECT_TRIGGER_SIZE_CLASS_NAMES[size], className),
+	className: cn("border-input bg-background text-foreground ring-ring/24 focus-visible:border-ring aria-invalid:border-destructive/36 focus-visible:aria-invalid:border-destructive/64 focus-visible:aria-invalid:ring-destructive/16 dark:bg-input/32 dark:aria-invalid:ring-destructive/24 relative inline-flex min-h-9 w-full min-w-36 items-center justify-center gap-2 rounded-lg border px-[calc(--spacing(3)-1px)] text-start text-base shadow-xs/5 outline-none select-none not-dark:bg-clip-padding before:pointer-events-none before:absolute before:inset-0 before:rounded-[calc(var(--radius-lg)-1px)] not-data-disabled:not-focus-visible:not-aria-invalid:not-data-pressed:before:shadow-[0_1px_--theme(--color-black/4%)] focus-visible:ring-[3px] data-disabled:pointer-events-none data-disabled:opacity-64 sm:min-h-8 sm:text-sm dark:not-data-disabled:not-focus-visible:not-aria-invalid:not-data-pressed:before:shadow-[0_-1px_--theme(--color-white/6%)] pointer-coarse:after:absolute pointer-coarse:after:size-full pointer-coarse:after:min-h-11 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='opacity-'])]:opacity-80 [&_svg:not([class*='size-'])]:size-4.5 sm:[&_svg:not([class*='size-'])]:size-4 [[data-disabled],:focus-visible,[aria-invalid],[data-pressed]]:shadow-none", SELECT_TRIGGER_SIZE_CLASS_NAMES[size], className),
 	"data-slot": "select-trigger",
 	...props,
 	children: [children, /* @__PURE__ */ jsx(Select$1.Icon, {

package/dist/components/sidebar.d.ts

@@ -30,7 +30,7 @@ declare function useSidebar(): SidebarContextProps;
  * left for the content column. Mobile reports 0: there the sidebar is an
  * overlay sheet and occupies no layout width.
  */
-declare function useSidebarInlineSize(): 0 | 48 | 256;
+declare function useSidebarInlineSize(): 0 | 256 | 48;
 declare const SidebarProvider: ({ defaultOpen, forceCollapsed, open: openProp, onOpenChange: setOpenProp, className, style, children, ...props }: React.ComponentProps<"div"> & {
   defaultOpen?: boolean;
   forceCollapsed?: boolean;
@@ -83,7 +83,7 @@ declare const SidebarMenu: ({ className, ...props }: React.ComponentProps<"ul">)
 declare const SidebarMenuItem: ({ className, ...props }: React.ComponentProps<"li">) => import("react").JSX.Element;
 declare const sidebarMenuButtonVariants: (props?: ({
   variant?: "default" | "outline" | null | undefined;
-  size?: "default" | "sm" | "lg" | "rail" | null | undefined;
+  size?: "default" | "lg" | "sm" | "rail" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 declare const SidebarMenuButton: ({ asChild, isActive, variant, size, tooltip, className, ...props }: React.ComponentProps<"button"> & {
   asChild?: boolean;

package/dist/components/table.js

@@ -27,7 +27,7 @@ const TableFooter = ({ className, ...props }) => /* @__PURE__ */ jsx("tfoot", {
 	...props
 });
 const TableRow = ({ className, ...props }) => /* @__PURE__ */ jsx("tr", {
-	className: cn("hover:bg-muted/72 data-[state=selected]:bg-muted/72 border-b transition-colors in-data-[slot=frame]:hover:bg-transparent in-data-[slot=frame]:data-[state=selected]:bg-transparent", className),
+	className: cn("hover:bg-muted/72 data-[state=selected]:bg-muted/72 border-b in-data-[slot=frame]:hover:bg-transparent in-data-[slot=frame]:data-[state=selected]:bg-transparent", className),
 	"data-slot": "table-row",
 	...props
 });

package/dist/components/textarea.js

@@ -18,7 +18,7 @@ const Textarea = ({ className, size = CONTROL_SIZE.default, unstyled = false, di
 		onChange?.(event);
 	};
 	return /* @__PURE__ */ jsx("span", {
-		className: cn(!unstyled && "border-input bg-background text-foreground ring-ring/24 has-focus-visible:border-ring has-aria-invalid:border-destructive/36 has-focus-visible:has-aria-invalid:border-destructive/64 has-focus-visible:has-aria-invalid:ring-destructive/16 dark:bg-input/32 dark:has-aria-invalid:ring-destructive/24 relative inline-flex w-full rounded-lg border text-base shadow-xs/5 transition-shadow not-dark:bg-clip-padding before:pointer-events-none before:absolute before:inset-0 before:rounded-[calc(var(--radius-lg)-1px)] not-has-disabled:has-not-focus-visible:not-has-aria-invalid:before:shadow-[0_1px_--theme(--color-black/4%)] has-focus-visible:ring-[3px] has-disabled:opacity-64 has-[:disabled,:focus-visible,[aria-invalid]]:shadow-none sm:text-sm dark:not-has-disabled:has-not-focus-visible:not-has-aria-invalid:before:shadow-[0_-1px_--theme(--color-white/6%)]", className) || void 0,
+		className: cn(!unstyled && "border-input bg-background text-foreground ring-ring/24 has-focus-visible:border-ring has-aria-invalid:border-destructive/36 has-focus-visible:has-aria-invalid:border-destructive/64 has-focus-visible:has-aria-invalid:ring-destructive/16 dark:bg-input/32 dark:has-aria-invalid:ring-destructive/24 relative inline-flex w-full rounded-lg border text-base shadow-xs/5 not-dark:bg-clip-padding before:pointer-events-none before:absolute before:inset-0 before:rounded-[calc(var(--radius-lg)-1px)] not-has-disabled:has-not-focus-visible:not-has-aria-invalid:before:shadow-[0_1px_--theme(--color-black/4%)] has-focus-visible:ring-[3px] has-disabled:opacity-64 has-[:disabled,:focus-visible,[aria-invalid]]:shadow-none sm:text-sm dark:not-has-disabled:has-not-focus-visible:not-has-aria-invalid:before:shadow-[0_-1px_--theme(--color-white/6%)]", className) || void 0,
 		"data-size": size,
 		"data-slot": "textarea-control",
 		children: /* @__PURE__ */ jsx(Field.Control, { render: (defaultProps) => /* @__PURE__ */ jsx("textarea", {

package/dist/components/toast.js

@@ -66,7 +66,7 @@ const Toasts = ({ position }) => {
 			children: toasts.map((toastItem) => {
 				const Icon = getToastIcon(toastItem.type);
 				return /* @__PURE__ */ jsx(Toast.Root, {
-					className: cn("bg-popover text-popover-foreground absolute z-[calc(9999-var(--toast-index))] h-(--toast-calc-height) w-full rounded-lg border shadow-lg/5 [transition:transform_.5s_cubic-bezier(.22,1,.36,1),opacity_.5s,height_.15s] not-dark:bg-clip-padding before:pointer-events-none before:absolute before:inset-0 before:rounded-[calc(var(--radius-lg)-1px)] before:shadow-[0_1px_--theme(--color-black/4%)] dark:before:shadow-[0_-1px_--theme(--color-white/6%)]", "data-[position*=right]:start-auto data-[position*=right]:end-0", "data-[position*=left]:start-0 data-[position*=left]:end-auto", "data-[position*=center]:start-0 data-[position*=center]:end-0", "data-[position*=top]:top-0 data-[position*=top]:bottom-auto data-[position*=top]:origin-top", "data-[position*=bottom]:top-auto data-[position*=bottom]:bottom-0 data-[position*=bottom]:origin-bottom", "after:absolute after:start-0 after:h-[calc(var(--toast-gap)+1px)] after:w-full", "data-[position*=top]:after:top-full", "data-[position*=bottom]:after:bottom-full", "[--toast-calc-height:var(--toast-frontmost-height,var(--toast-height))] [--toast-gap:--spacing(3)] [--toast-peek:--spacing(3)] [--toast-scale:calc(max(0,1-(var(--toast-index)*.1)))] [--toast-shrink:calc(1-var(--toast-scale))]", "data-[position*=top]:[--toast-calc-offset-y:calc(var(--toast-offset-y)+var(--toast-index)*var(--toast-gap)+var(--toast-swipe-movement-y))]", "data-[position*=bottom]:[--toast-calc-offset-y:calc(var(--toast-offset-y)*-1+var(--toast-index)*var(--toast-gap)*-1+var(--toast-swipe-movement-y))]", "data-[position*=top]:transform-[translateX(var(--toast-swipe-movement-x))_translateY(calc(var(--toast-swipe-movement-y)+(var(--toast-index)*var(--toast-peek))+(var(--toast-shrink)*var(--toast-calc-height))))_scale(var(--toast-scale))]", "data-[position*=bottom]:transform-[translateX(var(--toast-swipe-movement-x))_translateY(calc(var(--toast-swipe-movement-y)-(var(--toast-index)*var(--toast-peek))-(var(--toast-shrink)*var(--toast-calc-height))))_scale(var(--toast-scale))]", "data-limited:opacity-0", "data-expanded:h-(--toast-height)", "data-position:data-expanded:transform-[translateX(var(--toast-swipe-movement-x))_translateY(var(--toast-calc-offset-y))]", "data-[position*=top]:data-starting-style:transform-[translateY(calc(-100%-var(--toast-inset)))]", "data-[position*=bottom]:data-starting-style:transform-[translateY(calc(100%+var(--toast-inset)))]", "data-ending-style:opacity-0", "data-ending-style:not-data-limited:not-data-swipe-direction:transform-[translateY(calc(100%+var(--toast-inset)))]", "data-ending-style:data-[swipe-direction=left]:transform-[translateX(calc(var(--toast-swipe-movement-x)-100%-var(--toast-inset)))_translateY(var(--toast-calc-offset-y))]", "data-ending-style:data-[swipe-direction=right]:transform-[translateX(calc(var(--toast-swipe-movement-x)+100%+var(--toast-inset)))_translateY(var(--toast-calc-offset-y))]", "data-ending-style:data-[swipe-direction=up]:transform-[translateY(calc(var(--toast-swipe-movement-y)-100%-var(--toast-inset)))]", "data-ending-style:data-[swipe-direction=down]:transform-[translateY(calc(var(--toast-swipe-movement-y)+100%+var(--toast-inset)))]", "data-expanded:data-ending-style:data-[swipe-direction=left]:transform-[translateX(calc(var(--toast-swipe-movement-x)-100%-var(--toast-inset)))_translateY(var(--toast-calc-offset-y))]", "data-expanded:data-ending-style:data-[swipe-direction=right]:transform-[translateX(calc(var(--toast-swipe-movement-x)+100%+var(--toast-inset)))_translateY(var(--toast-calc-offset-y))]", "data-expanded:data-ending-style:data-[swipe-direction=up]:transform-[translateY(calc(var(--toast-swipe-movement-y)-100%-var(--toast-inset)))]", "data-expanded:data-ending-style:data-[swipe-direction=down]:transform-[translateY(calc(var(--toast-swipe-movement-y)+100%+var(--toast-inset)))]"),
+					className: cn("bg-popover text-popover-foreground absolute z-[calc(9999-var(--toast-index))] h-(--toast-calc-height) w-full rounded-lg border shadow-lg/5 [transition:transform_.5s_var(--ease-smooth),opacity_.5s,height_.15s] not-dark:bg-clip-padding before:pointer-events-none before:absolute before:inset-0 before:rounded-[calc(var(--radius-lg)-1px)] before:shadow-[0_1px_--theme(--color-black/4%)] motion-reduce:transition-none dark:before:shadow-[0_-1px_--theme(--color-white/6%)]", "data-[position*=right]:start-auto data-[position*=right]:end-0", "data-[position*=left]:start-0 data-[position*=left]:end-auto", "data-[position*=center]:start-0 data-[position*=center]:end-0", "data-[position*=top]:top-0 data-[position*=top]:bottom-auto data-[position*=top]:origin-top", "data-[position*=bottom]:top-auto data-[position*=bottom]:bottom-0 data-[position*=bottom]:origin-bottom", "after:absolute after:start-0 after:h-[calc(var(--toast-gap)+1px)] after:w-full", "data-[position*=top]:after:top-full", "data-[position*=bottom]:after:bottom-full", "[--toast-calc-height:var(--toast-frontmost-height,var(--toast-height))] [--toast-gap:--spacing(3)] [--toast-peek:--spacing(3)] [--toast-scale:calc(max(0,1-(var(--toast-index)*.1)))] [--toast-shrink:calc(1-var(--toast-scale))]", "data-[position*=top]:[--toast-calc-offset-y:calc(var(--toast-offset-y)+var(--toast-index)*var(--toast-gap)+var(--toast-swipe-movement-y))]", "data-[position*=bottom]:[--toast-calc-offset-y:calc(var(--toast-offset-y)*-1+var(--toast-index)*var(--toast-gap)*-1+var(--toast-swipe-movement-y))]", "data-[position*=top]:transform-[translateX(var(--toast-swipe-movement-x))_translateY(calc(var(--toast-swipe-movement-y)+(var(--toast-index)*var(--toast-peek))+(var(--toast-shrink)*var(--toast-calc-height))))_scale(var(--toast-scale))]", "data-[position*=bottom]:transform-[translateX(var(--toast-swipe-movement-x))_translateY(calc(var(--toast-swipe-movement-y)-(var(--toast-index)*var(--toast-peek))-(var(--toast-shrink)*var(--toast-calc-height))))_scale(var(--toast-scale))]", "data-limited:opacity-0", "data-expanded:h-(--toast-height)", "data-position:data-expanded:transform-[translateX(var(--toast-swipe-movement-x))_translateY(var(--toast-calc-offset-y))]", "data-[position*=top]:data-starting-style:transform-[translateY(calc(-100%-var(--toast-inset)))]", "data-[position*=bottom]:data-starting-style:transform-[translateY(calc(100%+var(--toast-inset)))]", "data-ending-style:opacity-0", "data-ending-style:not-data-limited:not-data-swipe-direction:transform-[translateY(calc(100%+var(--toast-inset)))]", "data-ending-style:data-[swipe-direction=left]:transform-[translateX(calc(var(--toast-swipe-movement-x)-100%-var(--toast-inset)))_translateY(var(--toast-calc-offset-y))]", "data-ending-style:data-[swipe-direction=right]:transform-[translateX(calc(var(--toast-swipe-movement-x)+100%+var(--toast-inset)))_translateY(var(--toast-calc-offset-y))]", "data-ending-style:data-[swipe-direction=up]:transform-[translateY(calc(var(--toast-swipe-movement-y)-100%-var(--toast-inset)))]", "data-ending-style:data-[swipe-direction=down]:transform-[translateY(calc(var(--toast-swipe-movement-y)+100%+var(--toast-inset)))]", "data-expanded:data-ending-style:data-[swipe-direction=left]:transform-[translateX(calc(var(--toast-swipe-movement-x)-100%-var(--toast-inset)))_translateY(var(--toast-calc-offset-y))]", "data-expanded:data-ending-style:data-[swipe-direction=right]:transform-[translateX(calc(var(--toast-swipe-movement-x)+100%+var(--toast-inset)))_translateY(var(--toast-calc-offset-y))]", "data-expanded:data-ending-style:data-[swipe-direction=up]:transform-[translateY(calc(var(--toast-swipe-movement-y)-100%-var(--toast-inset)))]", "data-expanded:data-ending-style:data-[swipe-direction=down]:transform-[translateY(calc(var(--toast-swipe-movement-y)+100%+var(--toast-inset)))]"),
 					"data-position": position,
 					swipeDirection: (() => {
 						if (position.includes("center")) return [isTop ? "up" : "down"];
@@ -99,7 +99,7 @@ const Toasts = ({ position }) => {
 								"data-slot": "toast-action",
 								children: toastItem.actionProps.children
 							}), /* @__PURE__ */ jsx(Toast.Close, {
-								className: "text-muted-foreground hover:text-foreground shrink-0 cursor-pointer rounded p-0.5 transition-colors select-none",
+								className: "text-muted-foreground hover:text-foreground shrink-0 cursor-pointer rounded p-0.5 select-none",
 								"data-slot": "toast-close",
 								"aria-label": "Close notification",
 								children: /* @__PURE__ */ jsx(XIcon, { className: "size-4" })

package/dist/inspector/chrome.js

@@ -56,7 +56,7 @@ const InspectorRailFooter = ({ className, ...props }) => /* @__PURE__ */ jsx("di
 	...props
 });
 const InspectorRailIconButton = ({ className, ...props }) => /* @__PURE__ */ jsx("button", {
-	className: cn("text-muted-foreground hover:bg-accent hover:text-foreground flex items-center justify-center rounded-md outline-hidden transition-colors focus-visible:ring-2 disabled:pointer-events-none disabled:opacity-50", SIDE_RAIL_ICON_BUTTON_SIZE, className),
+	className: cn("text-muted-foreground hover:bg-accent hover:text-foreground flex items-center justify-center rounded-md outline-hidden focus-visible:ring-2 disabled:pointer-events-none disabled:opacity-50", SIDE_RAIL_ICON_BUTTON_SIZE, className),
 	"data-slot": "inspector-rail-icon-button",
 	type: "button",
 	...props
@@ -69,7 +69,7 @@ const InspectorRailIconButton = ({ className, ...props }) => /* @__PURE__ */ jsx
 */
 const InspectorRailTab = ({ active = false, className, ...props }) => /* @__PURE__ */ jsx("button", {
 	"aria-current": active ? "true" : void 0,
-	className: cn("group/tab relative flex w-full shrink-0 items-center justify-center border-b transition-colors", TOOLBAR_ROW_HEIGHT, active ? "bg-background text-foreground before:bg-primary before:absolute before:inset-y-0 before:inset-s-0 before:w-0.5" : "text-muted-foreground hover:bg-accent hover:text-foreground", className),
+	className: cn("group/tab relative flex w-full shrink-0 items-center justify-center border-b", TOOLBAR_ROW_HEIGHT, active ? "bg-background text-foreground before:bg-primary before:absolute before:inset-y-0 before:inset-s-0 before:w-0.5" : "text-muted-foreground hover:bg-accent hover:text-foreground", className),
 	"data-active": active ? "" : void 0,
 	"data-slot": "inspector-rail-tab",
 	type: "button",

package/dist/inspector/dock.js

@@ -37,7 +37,7 @@ const InspectorDock = ({ children, className, mount = "shell-end", onResetWidth,
 					className: "bg-border group-hover:bg-primary group-active:bg-primary absolute inset-y-0 start-1/2 w-px -translate-x-1/2"
 				}), /* @__PURE__ */ jsx("span", {
 					"aria-hidden": "true",
-					className: "bg-background/80 text-foreground-placeholder ring-border/60 group-hover:bg-accent group-hover:text-foreground group-focus-visible:bg-accent group-focus-visible:text-foreground relative flex h-5 w-3 items-center justify-center rounded-full opacity-0 shadow-xs ring-1 backdrop-blur-sm transition-[color,background-color,opacity] group-hover:opacity-100 group-focus-visible:opacity-100 group-active:opacity-100",
+					className: "bg-background/80 text-foreground-placeholder ring-border/60 group-hover:bg-accent group-hover:text-foreground group-focus-visible:bg-accent group-focus-visible:text-foreground relative flex h-5 w-3 items-center justify-center rounded-full opacity-0 shadow-xs ring-1 backdrop-blur-sm transition-opacity group-hover:opacity-100 group-focus-visible:opacity-100 group-active:opacity-100",
 					"data-slot": "inspector-resize-grip",
 					children: /* @__PURE__ */ jsx(EllipsisIcon, { className: "size-3 rotate-90" })
 				})]

package/dist/inspector/facet-bar.js

@@ -157,7 +157,7 @@ const flashFacetChip = (el) => {
 		easing: "ease-in-out"
 	});
 };
-const CHIP_CLASS = "shrink-0 rounded-md px-1.5 py-1 text-xs font-medium whitespace-nowrap transition-colors";
+const CHIP_CLASS = "shrink-0 rounded-md px-1.5 py-1 text-xs font-medium whitespace-nowrap";
 const INACTIVE_CHIP_CLASS = "text-muted-foreground hover:bg-muted hover:text-foreground";
 const FacetChip = ({ label, value, isActive, disabled, activeBadge, onSelect }) => /* @__PURE__ */ jsxs(Tooltip, { children: [/* @__PURE__ */ jsx(TooltipTrigger, {
 	render: /* @__PURE__ */ jsx("button", {

package/dist/kanban/card-shell.js

@@ -44,7 +44,7 @@ const KanbanCardShell = ({ children, appearance = "standard", actions, actionsVi
 		"data-active": active ? "true" : void 0,
 		ref: dragRef,
 		children: /* @__PURE__ */ jsx("div", {
-			className: cn(CARD_CLASS, appearance === "proposal" && "border-dashed", "cursor-pointer transition-shadow hover:shadow-md", active && ACTIVE_CLASS, className),
+			className: cn(CARD_CLASS, appearance === "proposal" && "border-dashed", "cursor-pointer hover:shadow-md", active && ACTIVE_CLASS, className),
 			onClick: containedEventHandler(onOpen),
 			onKeyDown: (event) => {
 				if (event.key !== "Enter" && event.key !== " ") return;

package/dist/kanban/column-band-header.js

@@ -22,7 +22,7 @@ const KanbanColumnBandHeader = ({ title, swatch, meta, collapsed, compact = coll
 	children: [/* @__PURE__ */ jsx("button", {
 		"aria-expanded": !collapsed,
 		"aria-label": toggleLabel,
-		className: cn("hover:bg-muted/60 text-muted-foreground hover:text-foreground flex size-7 shrink-0 items-center justify-center rounded-md transition-[background-color]", KANBAN_CHROME_TOGGLE_COARSE_TARGET_CLASS),
+		className: cn("hover:bg-muted/60 text-muted-foreground hover:text-foreground flex size-7 shrink-0 items-center justify-center rounded-md", KANBAN_CHROME_TOGGLE_COARSE_TARGET_CLASS),
 		onClick: (event) => onCollapsedChange(!collapsed, { viaPointer: event.detail > 0 }),
 		title: toggleLabel,
 		type: "button",

package/dist/kanban/subgroup-board.js

@@ -359,7 +359,7 @@ const KanbanSubgroupBoard = ({ scrollRef, matrix, renderColumnHeader, renderLane
 								"data-kanban-lane-identity": "",
 								children: /* @__PURE__ */ jsxs("button", {
 									"aria-expanded": !collapsed,
-									className: cn("hover:bg-muted/60 flex items-center gap-2 rounded-lg px-2 text-start text-sm font-medium transition-[background-color]", "h-9", KANBAN_CHROME_TOGGLE_COARSE_TARGET_CLASS),
+									className: cn("hover:bg-muted/60 flex items-center gap-2 rounded-lg px-2 text-start text-sm font-medium", "h-9", KANBAN_CHROME_TOGGLE_COARSE_TARGET_CLASS),
 									onClick: () => setLaneCollapsed(group, count, !collapsed),
 									type: "button",
 									children: [

package/dist/kanban/virtual-cell.js

@@ -128,7 +128,7 @@ const KanbanVirtualCell = ({ rows, getRowKey, renderRow, pagination, sortable, c
 		})
 	}) : null;
 	const content = /* @__PURE__ */ jsxs("div", {
-		className: cn(KANBAN_CELL_SURFACE_CLASS, "min-h-20 rounded-xl p-2 transition-[background-color,outline-color]", rows.length === 0 ? "overflow-visible" : "max-h-[min(60vh,40rem)] overflow-y-auto overscroll-y-contain", active && accentVariants === void 0 && "bg-primary/5 ring-primary/50 ring-2", className),
+		className: cn(KANBAN_CELL_SURFACE_CLASS, "min-h-20 rounded-xl p-2", rows.length === 0 ? "overflow-visible" : "max-h-[min(60vh,40rem)] overflow-y-auto overscroll-y-contain", active && accentVariants === void 0 && "bg-primary/5 ring-primary/50 ring-2", className),
 		"data-kanban-cell": sortable?.dropTarget.id,
 		"data-kanban-cell-accent": accentVariants === void 0 ? void 0 : "true",
 		onScroll: handleScroll,

package/dist/lib/control-size.d.ts

@@ -5,6 +5,6 @@ declare const CONTROL_SIZE: Readonly<{
   readonly lg: "lg";
 }>;
 type ControlSize = (typeof CONTROL_SIZE)[keyof typeof CONTROL_SIZE];
-declare const CONTROL_SIZES: readonly ("default" | "sm" | "lg")[];
+declare const CONTROL_SIZES: readonly ("default" | "lg" | "sm")[];
 //#endregion
 export { CONTROL_SIZE, CONTROL_SIZES, type ControlSize };

package/dist/review/text-mark.d.ts

@@ -0,0 +1,75 @@
+import { ComponentProps } from "react";
+//#region src/review/text-mark.d.ts
+/**
+ * One mark for words in running text: a search or find hit, a reader's own
+ * highlight, a verdict under a claim. Every surface that points at words
+ * draws them this way, so a found word, a note and a finding differ only in
+ * hue and line, never in shape.
+ *
+ * Marks stay inline with no padding or rounding: a mark over several lines or
+ * inline runs is several boxes, and only a flat, cloned background reads as
+ * one continuous mark. The hue travels as the `--text-mark` custom property,
+ * so each variant and state is spelled once and every tone reuses it.
+ */
+export declare const TextMark: ({ variant, tone, state, weight, className, ...props }: TextMarkProps) => import("react").JSX.Element;
+export type TextMarkVariant = "fill" | "underline" | "dotted" | "wavy" | "strike";
+export type TextMarkTone = "warning" | "success" | "destructive" | "muted" | "option-yellow" | "option-green" | "option-sky" | "option-violet" | "option-red" | "option-purple";
+/**
+ * `matched` is a line mark picked out by a filter: it gains a faint wash of
+ * its hue. A fill mark is already a wash, so it looks the same at rest and
+ * matched. `active` is the one mark being pointed at (the current find hit,
+ * the selected claim): a stronger wash of the same hue and a ring of it.
+ */
+export type TextMarkState = "rest" | "matched" | "active";
+/** Search hits read a touch heavier than the words around them. */
+export type TextMarkWeight = "inherit" | "medium";
+export type TextMarkOptions = {
+  variant: TextMarkVariant;
+  tone: TextMarkTone;
+  state?: TextMarkState | undefined;
+  weight?: TextMarkWeight | undefined;
+};
+type TextMarkProps = ComponentProps<"mark"> & TextMarkOptions;
+/** The CSS value of each tone's hue. */
+export declare const TEXT_MARK_TONE_COLOR: {
+  readonly warning: "var(--warning)";
+  readonly success: "var(--success)";
+  readonly destructive: "var(--destructive)";
+  readonly muted: "var(--muted-foreground)";
+  readonly "option-yellow": "var(--option-yellow)";
+  readonly "option-green": "var(--option-green)";
+  readonly "option-sky": "var(--option-sky)";
+  readonly "option-violet": "var(--option-violet)";
+  readonly "option-red": "var(--option-red)";
+  readonly "option-purple": "var(--option-purple)";
+};
+/** How a found word is marked everywhere: readers, snippets, PDFs, tables. */
+export declare const SEARCH_HIT_MARK: {
+  readonly variant: "fill";
+  readonly tone: "warning";
+  readonly weight: "medium";
+};
+/** The classes of one mark, for markup that is not a `<TextMark>` (a claim
+ *  button, a PDF text-layer box, an element a DOM walker creates). */
+export declare const textMarkClass: ({ variant, tone, state, weight }: TextMarkOptions) => string;
+/**
+ * The search-hit mark reached through a descendant selector, for markup that
+ * arrives already highlighted (the search endpoints' `<mark>` snippets).
+ * Spelled out because Tailwind emits only the classes it can read in the
+ * source; `text-mark.test.ts` holds it to `textMarkClass(SEARCH_HIT_MARK)`.
+ */
+export declare const SEARCH_HIT_DESCENDANT_MARK_CLASS = "[&_mark]:box-decoration-clone [&_mark]:text-foreground [&_mark]:[--text-mark:var(--warning)] [&_mark]:bg-(--text-mark)/30 [&_mark]:dark:bg-(--text-mark)/20 [&_mark]:font-medium";
+type TextMarkHighlightRuleOptions = {
+  /** The registered `CSS.highlights` name. */
+  name: string;
+  tone: TextMarkTone;
+  state: Exclude<TextMarkState, "matched">;
+};
+/**
+ * A fill mark for the CSS Custom Highlight API. `::highlight()` takes colours
+ * but no classes, custom properties or rings, so a find that marks ranges
+ * rather than elements gets the fill's wash as a rule; the active range is
+ * told apart by its stronger wash alone.
+ */
+export declare const textMarkHighlightRule: ({ name, tone, state }: TextMarkHighlightRuleOptions) => string;
+//#endregion

package/dist/review/text-mark.js

@@ -0,0 +1,120 @@
+import { cn } from "../lib/utils.js";
+import { jsx } from "react/jsx-runtime";
+//#region src/review/text-mark.tsx
+/**
+* One mark for words in running text: a search or find hit, a reader's own
+* highlight, a verdict under a claim. Every surface that points at words
+* draws them this way, so a found word, a note and a finding differ only in
+* hue and line, never in shape.
+*
+* Marks stay inline with no padding or rounding: a mark over several lines or
+* inline runs is several boxes, and only a flat, cloned background reads as
+* one continuous mark. The hue travels as the `--text-mark` custom property,
+* so each variant and state is spelled once and every tone reuses it.
+*/
+const TextMark = ({ variant, tone, state, weight, className, ...props }) => /* @__PURE__ */ jsx("mark", {
+	className: cn(textMarkClass({
+		variant,
+		tone,
+		state,
+		weight
+	}), className),
+	"data-slot": "text-mark",
+	...props
+});
+/** The CSS value of each tone's hue. */
+const TEXT_MARK_TONE_COLOR = {
+	warning: "var(--warning)",
+	success: "var(--success)",
+	destructive: "var(--destructive)",
+	muted: "var(--muted-foreground)",
+	"option-yellow": "var(--option-yellow)",
+	"option-green": "var(--option-green)",
+	"option-sky": "var(--option-sky)",
+	"option-violet": "var(--option-violet)",
+	"option-red": "var(--option-red)",
+	"option-purple": "var(--option-purple)"
+};
+/** How a found word is marked everywhere: readers, snippets, PDFs, tables. */
+const SEARCH_HIT_MARK = {
+	variant: "fill",
+	tone: "warning",
+	weight: "medium"
+};
+/** The classes of one mark, for markup that is not a `<TextMark>` (a claim
+*  button, a PDF text-layer box, an element a DOM walker creates). */
+const textMarkClass = ({ variant, tone, state = "rest", weight = "inherit" }) => [
+	TEXT_MARK_BASE_CLASS,
+	VARIANT_CLASS[variant],
+	TONE_CLASS[tone],
+	WASH_CLASS[variant === "fill" ? "fill" : "line"][state],
+	WEIGHT_CLASS[weight]
+].filter((part) => part !== "").join(" ");
+/**
+* The search-hit mark reached through a descendant selector, for markup that
+* arrives already highlighted (the search endpoints' `<mark>` snippets).
+* Spelled out because Tailwind emits only the classes it can read in the
+* source; `text-mark.test.ts` holds it to `textMarkClass(SEARCH_HIT_MARK)`.
+*/
+const SEARCH_HIT_DESCENDANT_MARK_CLASS = "[&_mark]:box-decoration-clone [&_mark]:text-foreground [&_mark]:[--text-mark:var(--warning)] [&_mark]:bg-(--text-mark)/30 [&_mark]:dark:bg-(--text-mark)/20 [&_mark]:font-medium";
+/**
+* A fill mark for the CSS Custom Highlight API. `::highlight()` takes colours
+* but no classes, custom properties or rings, so a find that marks ranges
+* rather than elements gets the fill's wash as a rule; the active range is
+* told apart by its stronger wash alone.
+*/
+const textMarkHighlightRule = ({ name, tone, state }) => {
+	const color = TEXT_MARK_TONE_COLOR[tone];
+	const { light, dark } = FILL_PERCENT[state];
+	return [`::highlight(${name}) { background-color: color-mix(in oklab, ${color} ${light}%, transparent); color: inherit; }`, `.dark ::highlight(${name}) { background-color: color-mix(in oklab, ${color} ${dark}%, transparent); }`].join("\n");
+};
+const TEXT_MARK_BASE_CLASS = "box-decoration-clone";
+const LINE_CLASS = "text-inherit underline decoration-2 underline-offset-3 decoration-[color:var(--text-mark)]";
+const VARIANT_CLASS = {
+	fill: "text-foreground",
+	underline: LINE_CLASS,
+	dotted: `${LINE_CLASS} decoration-dotted`,
+	wavy: `${LINE_CLASS} decoration-wavy`,
+	strike: "text-inherit line-through decoration-2 decoration-[color:var(--text-mark)]"
+};
+const TONE_CLASS = {
+	warning: "[--text-mark:var(--warning)]",
+	success: "[--text-mark:var(--success)]",
+	destructive: "[--text-mark:var(--destructive)]",
+	muted: "[--text-mark:var(--muted-foreground)]",
+	"option-yellow": "[--text-mark:var(--option-yellow)]",
+	"option-green": "[--text-mark:var(--option-green)]",
+	"option-sky": "[--text-mark:var(--option-sky)]",
+	"option-violet": "[--text-mark:var(--option-violet)]",
+	"option-red": "[--text-mark:var(--option-red)]",
+	"option-purple": "[--text-mark:var(--option-purple)]"
+};
+/** The fill's wash, in percent of the hue, for the highlight rule. */
+const FILL_PERCENT = {
+	rest: {
+		light: 30,
+		dark: 20
+	},
+	active: {
+		light: 45,
+		dark: 35
+	}
+};
+const WASH_CLASS = {
+	fill: {
+		rest: "bg-(--text-mark)/30 dark:bg-(--text-mark)/20",
+		matched: "bg-(--text-mark)/30 dark:bg-(--text-mark)/20",
+		active: "bg-(--text-mark)/45 dark:bg-(--text-mark)/35 ring-1 ring-(--text-mark)"
+	},
+	line: {
+		rest: "bg-transparent",
+		matched: "bg-(--text-mark)/15",
+		active: "bg-(--text-mark)/30 dark:bg-(--text-mark)/20 ring-1 ring-(--text-mark)"
+	}
+};
+const WEIGHT_CLASS = {
+	inherit: "",
+	medium: "font-medium"
+};
+//#endregion
+export { SEARCH_HIT_DESCENDANT_MARK_CLASS, SEARCH_HIT_MARK, TEXT_MARK_TONE_COLOR, TextMark, textMarkClass, textMarkHighlightRule };

package/dist/styles/theme.css

@@ -72,6 +72,62 @@
   --color-popover: var(--popover);
   --color-card-foreground: var(--card-foreground);
   --color-card: var(--card);
+  /* Closed-form spring step responses sampled into linear():
+     spring moves (damping 0.75, ~2.8% overshoot); smooth enters (critical damping, no overshoot). */
+  --ease-spring: linear(
+    0,
+    0.053,
+    0.177,
+    0.33,
+    0.486,
+    0.627,
+    0.746,
+    0.84,
+    0.911,
+    0.961,
+    0.995,
+    1.014,
+    1.025,
+    1.028,
+    1.028,
+    1.024,
+    1.02,
+    1.016,
+    1.012,
+    1.008,
+    1.005,
+    1.003,
+    1.001,
+    1,
+    1
+  );
+  --ease-smooth: linear(
+    0,
+    0.059,
+    0.185,
+    0.328,
+    0.464,
+    0.583,
+    0.681,
+    0.759,
+    0.82,
+    0.867,
+    0.902,
+    0.929,
+    0.948,
+    0.963,
+    0.973,
+    0.981,
+    0.986,
+    0.99,
+    0.993,
+    0.995,
+    0.997,
+    0.998,
+    0.998,
+    0.999,
+    1
+  );
   --animate-skeleton: skeleton 2s -1s infinite linear;
   --animate-caret-blink: caret-blink 1.25s ease-out infinite;
   /* One-shot tint pulse for a surface that just became relevant.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stll/ui",
-  "version": "0.34.5",
+  "version": "0.36.0",
   "description": "Stella's design system: bidi-aware React primitives built on Base UI, the dockable inspector pane, and the Tailwind v4 theme they are styled with.",
   "keywords": [
     "base-ui",
@@ -245,6 +245,10 @@
       "types": "./dist/review/review-status-badge.d.ts",
       "import": "./dist/review/review-status-badge.js"
     },
+    "./text-mark": {
+      "types": "./dist/review/text-mark.d.ts",
+      "import": "./dist/review/text-mark.js"
+    },
     "./scroll-area": {
       "types": "./dist/components/scroll-area.d.ts",
       "import": "./dist/components/scroll-area.js"
@@ -611,7 +615,7 @@
     "test:browser": "playwright test --config playwright.config.ts",
     "pack:check": "cd ../.. && bun scripts/check-published-exports.ts packages/ui",
     "typecheck": "bun ../../packages/scripts/src/tsc-native.ts --noEmit",
-    "lint": "cd ../.. && bun --bun oxlint -c oxlint.config.ts --report-unused-disable-directives-severity=error --type-aware packages/ui",
+    "lint": "cd ../.. && bun --bun oxlint -c oxlint.config.ts --report-unused-disable-directives-severity=error --type-aware --type-check packages/ui",
     "lint:fix": "cd ../.. && bun --bun oxlint -c oxlint.config.ts --type-aware --fix packages/ui",
     "format": "bun ../../scripts/run-oxfmt.ts .",
     "prepack": "bun run build"