@ctrl-ui/react 0.8.10 → 0.8.12

package/dist/action-bar.js

@@ -1,11 +1,11 @@
 "use client";
+import { useCopyToClipboard } from "./hooks/use-copy-to-clipboard.js";
 import { cn } from "./lib/cn.js";
 import { Button } from "./ui/button.js";
 import { LiveStatus } from "./ui/live-status.js";
-import { useCopyToClipboard } from "./hooks/use-copy-to-clipboard.js";
+import { Toolbar } from "@base-ui/react/toolbar";
 import { createContext, useContext } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
-import { Toolbar } from "@base-ui/react/toolbar";
 //#region src/action-bar.tsx
 const ActionBarContext = createContext({});
 async function resolveCopyValue(value) {

package/dist/activity.js

@@ -1,8 +1,8 @@
 "use client";
 import { cn } from "./lib/cn.js";
 import { LiveStatus } from "./ui/live-status.js";
-import { ScrollArea } from "./ui/scroll-area.js";
 import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "./ui/collapsible.js";
+import { ScrollArea } from "./ui/scroll-area.js";
 import { createContext, useContext } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Check, ChevronRight, CircleAlert, CircleDashed, LoaderCircle } from "lucide-react";

package/dist/blocks/design-canvas-inspector.js

@@ -1,11 +1,11 @@
 "use client";
 import { Button } from "../ui/button.js";
 import { InputGroup, InputGroupAddon } from "../ui/input-group.js";
-import { Empty, EmptyDescription, EmptyHeader, EmptyTitle } from "../ui/empty.js";
-import { Separator } from "../ui/separator.js";
 import { resizeDesignCanvasLayer } from "./design-canvas-data.js";
 import { NumberField, NumberFieldGroup, NumberFieldInput, NumberFieldScrubArea } from "../ui/number-field.js";
 import { ColorPicker, ColorPickerArea, ColorPickerContent, ColorPickerEyeDropper, ColorPickerHue, ColorPickerInput, ColorPickerTrigger } from "../ui/color-picker.js";
+import { Empty, EmptyDescription, EmptyHeader, EmptyTitle } from "../ui/empty.js";
+import { Separator } from "../ui/separator.js";
 import { Toggle } from "../ui/toggle.js";
 import { useState } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";

package/dist/blocks/design-canvas.js

@@ -3,12 +3,12 @@ import { cn } from "../lib/cn.js";
 import { Button } from "../ui/button.js";
 import { ScrollArea } from "../ui/scroll-area.js";
 import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "../ui/tooltip.js";
+import { createDesignCanvasLayer, designCanvasFillColor, drawnDesignCanvasBounds } from "./design-canvas-data.js";
+import { DesignCanvasInspector } from "./design-canvas-inspector.js";
 import { Drawer, DrawerContent, DrawerTitle } from "../ui/drawer.js";
 import { InfiniteCanvas, InfiniteCanvasContent, InfiniteCanvasControls, InfiniteCanvasItem } from "../ui/infinite-canvas.js";
 import { ResizableFloatingPanel } from "../ui/resizable.js";
 import { Toolbar, ToolbarButton, ToolbarGroup, ToolbarSeparator } from "../ui/toolbar.js";
-import { createDesignCanvasLayer, designCanvasFillColor, drawnDesignCanvasBounds } from "./design-canvas-data.js";
-import { DesignCanvasInspector } from "./design-canvas-inspector.js";
 import { useRef, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { CircleIcon, FrameIcon, LayersIcon, MousePointer2Icon, SlidersHorizontalIcon, SquareIcon, TypeIcon } from "lucide-react";

package/dist/blocks/discussion.js

@@ -1,9 +1,9 @@
 "use client";
 import { Button } from "../ui/button.js";
-import { Kbd, KbdGroup } from "../ui/kbd.js";
 import { ChatComposer, ChatComposerShell, ChatComposerSubmit, ChatComposerTextarea, ChatComposerToolbar } from "../chat-composer.js";
 import { ChatMessageReplies } from "../chat-message/social.js";
 import { ChatMessage, ChatMessageActions, ChatMessageAuthor, ChatMessageAvatar, ChatMessageBody, ChatMessageContent, ChatMessageFooter, ChatMessageHeader, ChatMessageRow, ChatMessageTime } from "../chat-message.js";
+import { Kbd, KbdGroup } from "../ui/kbd.js";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { CornerDownRightIcon } from "lucide-react";
 //#region src/blocks/discussion.tsx

package/dist/blocks/file-explorer.js

@@ -5,15 +5,15 @@ import { LiveStatus } from "../ui/live-status.js";
 import { ScrollArea } from "../ui/scroll-area.js";
 import { InputGroup, InputGroupAddon } from "../ui/input-group.js";
 import { Input } from "../ui/input.js";
-import { Empty, EmptyContent, EmptyDescription, EmptyHeader, EmptyMedia, EmptyTitle } from "../ui/empty.js";
 import { SidebarProvider, useSidebar } from "../ui/sidebar-provider.js";
 import { SidebarGroup, SidebarGroupLabel, SidebarMenu, SidebarMenuButton, SidebarMenuItem } from "../ui/sidebar-menu.js";
 import { Sidebar, SidebarContent, SidebarFooter, SidebarHeader, SidebarInset, SidebarRail, SidebarTrigger } from "../ui/sidebar.js";
+import { Empty, EmptyContent, EmptyDescription, EmptyHeader, EmptyMedia, EmptyTitle } from "../ui/empty.js";
 import { Drawer, DrawerBody, DrawerContent, DrawerTitle, DrawerTrigger } from "../ui/drawer.js";
 import { ResizableHandle, ResizablePanel, ResizablePanelGroup } from "../ui/resizable.js";
 import { groupFileExplorerItems, orderFileExplorerEntries, resolveFileExplorer, searchFileExplorer } from "./file-explorer-data.js";
-import { DropdownMenu, DropdownMenuContent, DropdownMenuTrigger } from "../ui/dropdown-menu.js";
 import { Breadcrumb, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator } from "../ui/breadcrumb.js";
+import { DropdownMenu, DropdownMenuContent, DropdownMenuTrigger } from "../ui/dropdown-menu.js";
 import { Fragment, useEffect, useId, useRef, useState } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import { ChevronLeftIcon, ChevronRightIcon, FileIcon, FolderIcon, MoreHorizontalIcon, SearchIcon, XIcon } from "lucide-react";

package/dist/blocks/settings.js

@@ -2,16 +2,16 @@
 import { cn } from "../lib/cn.js";
 import { Button } from "../ui/button.js";
 import { LiveStatus } from "../ui/live-status.js";
-import { prefersReducedMotion } from "../lib/motion.js";
 import { ScrollArea } from "../ui/scroll-area.js";
+import { prefersReducedMotion } from "../lib/motion.js";
 import { InputGroup, InputGroupAddon } from "../ui/input-group.js";
 import { Input } from "../ui/input.js";
-import { Empty, EmptyContent, EmptyDescription, EmptyHeader, EmptyMedia, EmptyTitle } from "../ui/empty.js";
-import { Field, FieldContent, FieldDescription, FieldGroup, FieldLabel, FieldLegend, FieldSeparator, FieldSet } from "../ui/field.js";
 import { SidebarProvider, useSidebar } from "../ui/sidebar-provider.js";
 import { SidebarGroup, SidebarGroupLabel, SidebarMenu, SidebarMenuButton, SidebarMenuItem } from "../ui/sidebar-menu.js";
 import { Sidebar, SidebarContent, SidebarHeader, SidebarInset, SidebarTrigger } from "../ui/sidebar.js";
+import { Empty, EmptyContent, EmptyDescription, EmptyHeader, EmptyMedia, EmptyTitle } from "../ui/empty.js";
 import { searchSettings } from "./settings-data.js";
+import { Field, FieldContent, FieldDescription, FieldGroup, FieldLabel, FieldLegend, FieldSeparator, FieldSet } from "../ui/field.js";
 import { useEffect, useId, useState } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import { ArrowLeftIcon, SearchIcon, XIcon } from "lucide-react";

package/dist/chat-composer-editor/extensions/mention.js

@@ -2,8 +2,8 @@
 import { LiveStatus } from "../../ui/live-status.js";
 import { isComposingKey, useTriggerMenu } from "../../hooks/use-trigger-menu.js";
 import { spawnExitGhost } from "../ghost.js";
-import { TriggerMenu, TriggerMenuEmpty, TriggerMenuIcon, TriggerMenuItem, TriggerMenuList } from "../../ui/trigger-menu.js";
 import { detectTrigger } from "../../lib/trigger-detect.js";
+import { TriggerMenu, TriggerMenuEmpty, TriggerMenuIcon, TriggerMenuItem, TriggerMenuList } from "../../ui/trigger-menu.js";
 import { useEffect } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 //#region src/chat-composer-editor/extensions/mention.tsx

package/dist/chat-composer.js

@@ -1,6 +1,6 @@
 "use client";
-import { hasSkinAdornment, skinAdornment } from "./skin.js";
 import { cn } from "./lib/cn.js";
+import { hasSkinAdornment, skinAdornment } from "./skin.js";
 import { useSkin } from "./skin-provider.js";
 import { Button } from "./ui/button.js";
 import { Spinner } from "./ui/spinner.js";

package/dist/chat-layout.js

@@ -7,9 +7,9 @@ import { ScrollArea } from "./ui/scroll-area.js";
 import { ChatThreadAnnounceContext } from "./hooks/use-chat-message.js";
 import { useChatThreadScroll } from "./hooks/use-chat-thread-scroll.js";
 import { createContext, useContext, useState } from "react";
+import { useRender } from "@base-ui/react/use-render";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { ArrowDown } from "lucide-react";
-import { useRender } from "@base-ui/react/use-render";
 //#region src/chat-layout.tsx
 const chromeSizing = {
 	panel: "mx-auto min-h-[640px] max-w-3xl",

package/dist/context.js

@@ -1,9 +1,9 @@
 "use client";
 import { cn } from "./lib/cn.js";
 import { Button } from "./ui/button.js";
-import { Popover, PopoverClose, PopoverContent, PopoverDescription, PopoverTitle, PopoverTrigger } from "./ui/popover.js";
 import { ScrollArea } from "./ui/scroll-area.js";
 import { deriveContextModel } from "./context-model.js";
+import { Popover, PopoverClose, PopoverContent, PopoverDescription, PopoverTitle, PopoverTrigger } from "./ui/popover.js";
 import { createContext, useContext, useId, useMemo } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import { X } from "lucide-react";

package/dist/dynamic-notification.js

@@ -2,8 +2,8 @@
 import { cn } from "./lib/cn.js";
 import { Button } from "./ui/button.js";
 import { LiveStatus } from "./ui/live-status.js";
-import { createDynamicNotificationLiquid } from "./dynamic-notification-liquid.js";
 import { createDynamicNotificationGlass } from "./dynamic-notification-glass.js";
+import { createDynamicNotificationLiquid } from "./dynamic-notification-liquid.js";
 import { useDynamicNotification } from "./hooks/use-dynamic-notification.js";
 import { createContext, useContext, useEffect, useId, useLayoutEffect, useMemo, useRef, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";

package/dist/email/theme.js

@@ -1,5 +1,5 @@
-import { composite, resolveColor, tokenMaps } from "../scripts/contrast-eval.js";
 import { emailLengthPixels } from "./length.js";
+import { composite, resolveColor, tokenMaps } from "../scripts/contrast-eval.js";
 //#region src/email/theme.ts
 function resolveVariables(value, tokens, chain = []) {
 	if (chain.length > 16) throw new Error(`Email theme: token chain exceeds 16 references (${chain.join(" → ")}).`);

package/dist/filter-bar/parts.js

@@ -5,9 +5,9 @@ import { useFilterBarContext } from "./context.js";
 import { describeFilter, formatFilterValue } from "./model.js";
 import { FilterBarEditor, FilterBarInlineInput } from "./editor.js";
 import { useEffect, useId, useRef } from "react";
+import { useRender } from "@base-ui/react/use-render";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import { PlusIcon, XIcon } from "lucide-react";
-import { useRender } from "@base-ui/react/use-render";
 //#region src/filter-bar/parts.tsx
 function chipSegments(item, field, operator, draft) {
 	const segments = [{

package/dist/filter-bar.js

@@ -6,8 +6,8 @@ import { describeFilter, fieldOperators, filterNavigationKeys } from "./filter-b
 import { filterMotionEnabled, useFilterBarMotion } from "./filter-bar/motion.js";
 import { FilterBarAddButton, FilterBarChip, FilterBarChips, FilterBarClear, FilterBarInput } from "./filter-bar/parts.js";
 import { useState } from "react";
-import { jsx, jsxs } from "react/jsx-runtime";
 import { useRender } from "@base-ui/react/use-render";
+import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/filter-bar.tsx
 function valueStatusMessage(field) {
 	if (field?.error) return typeof field.error === "string" ? field.error : "Couldn’t load values.";

package/dist/inline-citation.js

@@ -2,8 +2,8 @@
 import { cn } from "./lib/cn.js";
 import { Button } from "./ui/button.js";
 import { LiveStatus } from "./ui/live-status.js";
-import { SourceFavicon, sourceHostname } from "./source-badge.js";
 import { Popover, PopoverContent, PopoverTrigger } from "./ui/popover.js";
+import { SourceFavicon, sourceHostname } from "./source-badge.js";
 import { createContext, useContext, useRef, useState } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import { ArrowLeft, ArrowRight, ExternalLink } from "lucide-react";

package/dist/knob-contracts/emoji-picker-knobs.d.ts

@@ -1,4 +1,4 @@
 //#region src/knob-contracts/emoji-picker-knobs.d.ts
-export declare const emojiPickerKnobs: readonly ["--cui-emoji-picker-cell-size", "--cui-emoji-picker-cell-radius", "--cui-emoji-picker-active-background", "--cui-emoji-picker-header-background", "--cui-emoji-picker-header-foreground"];
+export declare const emojiPickerKnobs: readonly ["--cui-emoji-picker-cell-size", "--cui-emoji-picker-height", "--cui-emoji-picker-cell-radius", "--cui-emoji-picker-active-background", "--cui-emoji-picker-header-background", "--cui-emoji-picker-header-foreground"];
 export type EmojiPickerKnobStyle = Partial<Record<(typeof emojiPickerKnobs)[number], string>>;
 //#endregion

package/dist/knob-contracts/emoji-picker-knobs.js

@@ -1,6 +1,7 @@
 //#region src/knob-contracts/emoji-picker-knobs.ts
 const emojiPickerKnobs = [
 	"--cui-emoji-picker-cell-size",
+	"--cui-emoji-picker-height",
 	"--cui-emoji-picker-cell-radius",
 	"--cui-emoji-picker-active-background",
 	"--cui-emoji-picker-header-background",

package/dist/knob-contracts/icon-picker-knobs.d.ts

@@ -0,0 +1,4 @@
+//#region src/knob-contracts/icon-picker-knobs.d.ts
+export declare const iconPickerKnobs: readonly ["--cui-icon-picker-cell-size", "--cui-icon-picker-cell-radius", "--cui-icon-picker-foreground", "--cui-icon-picker-active-background"];
+export type IconPickerKnobStyle = Partial<Record<(typeof iconPickerKnobs)[number], string>>;
+//#endregion

package/dist/knob-contracts/icon-picker-knobs.js

@@ -0,0 +1,9 @@
+//#region src/knob-contracts/icon-picker-knobs.ts
+const iconPickerKnobs = [
+	"--cui-icon-picker-cell-size",
+	"--cui-icon-picker-cell-radius",
+	"--cui-icon-picker-foreground",
+	"--cui-icon-picker-active-background"
+];
+//#endregion
+export { iconPickerKnobs };

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

@@ -1,4 +1,4 @@
 //#region src/knob-contracts/markdown-knobs.d.ts
-export declare const markdownKnobs: readonly ["--cui-markdown-foreground", "--cui-markdown-blockquote-border-color", "--cui-markdown-blockquote-foreground", "--cui-markdown-inline-code-background", "--cui-markdown-inline-code-foreground", "--cui-markdown-inline-code-radius", "--cui-markdown-link-foreground", "--cui-markdown-image-outline-color", "--cui-markdown-table-cell-border-color", "--cui-markdown-table-header-background", "--cui-markdown-font-size", "--cui-markdown-line-height"];
+export declare const markdownKnobs: readonly ["--cui-markdown-foreground", "--cui-markdown-blockquote-border-color", "--cui-markdown-blockquote-foreground", "--cui-markdown-inline-code-background", "--cui-markdown-inline-code-foreground", "--cui-markdown-inline-code-radius", "--cui-markdown-link-foreground", "--cui-markdown-image-outline-color", "--cui-markdown-table-cell-border-color", "--cui-markdown-table-header-background", "--cui-markdown-font-size", "--cui-markdown-line-height", "--cui-markdown-flow-gap", "--cui-markdown-heading-gap"];
 export type MarkdownKnobStyle = Partial<Record<(typeof markdownKnobs)[number], string>>;
 //#endregion

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

@@ -11,7 +11,9 @@ const markdownKnobs = [
 	"--cui-markdown-table-cell-border-color",
 	"--cui-markdown-table-header-background",
 	"--cui-markdown-font-size",
-	"--cui-markdown-line-height"
+	"--cui-markdown-line-height",
+	"--cui-markdown-flow-gap",
+	"--cui-markdown-heading-gap"
 ];
 //#endregion
 export { markdownKnobs };

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

@@ -1,4 +1,4 @@
 //#region src/knob-contracts/tabs-knobs.d.ts
-export declare const tabsKnobs: readonly ["--cui-tabs-trigger-radius", "--cui-tabs-list-padding", "--cui-tabs-list-radius", "--cui-tabs-list-background", "--cui-tabs-list-backdrop-filter", "--cui-tabs-indicator-background", "--cui-tabs-foreground", "--cui-tabs-active-foreground", "--cui-tabs-hover-foreground", "--cui-tabs-indicator-shadow", "--cui-tabs-list-shadow", "--cui-tabs-border-color", "--cui-tabs-border-width"];
+export declare const tabsKnobs: readonly ["--cui-tabs-surface-background", "--cui-tabs-surface-radius", "--cui-tabs-trigger-radius", "--cui-tabs-list-padding", "--cui-tabs-list-radius", "--cui-tabs-list-background", "--cui-tabs-list-backdrop-filter", "--cui-tabs-indicator-background", "--cui-tabs-foreground", "--cui-tabs-active-foreground", "--cui-tabs-hover-foreground", "--cui-tabs-indicator-shadow", "--cui-tabs-list-shadow", "--cui-tabs-border-color", "--cui-tabs-border-width"];
 export type TabsKnobStyle = Partial<Record<(typeof tabsKnobs)[number], string>>;
 //#endregion

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

@@ -1,5 +1,7 @@
 //#region src/knob-contracts/tabs-knobs.ts
 const tabsKnobs = [
+	"--cui-tabs-surface-background",
+	"--cui-tabs-surface-radius",
 	"--cui-tabs-trigger-radius",
 	"--cui-tabs-list-padding",
 	"--cui-tabs-list-radius",

package/dist/lib/phone-input-format.js

@@ -1,5 +1,5 @@
-import { getCountryCallingCode } from "react-phone-number-input/max";
 import { AsYouType } from "libphonenumber-js/max";
+import { getCountryCallingCode } from "react-phone-number-input/max";
 //#region src/lib/phone-input-format.ts
 function normalizePhoneInputText(value, country) {
 	if (!country) return value;

package/dist/skin.d.ts

@@ -38,6 +38,8 @@ export type ControlUiSkin = {
   colorScheme?: "light" | "dark";
   sidebarLayout?: SidebarLayout;
   scrollAreaBlur?: boolean;
+  scrollAreaScrollbarVisibility?: "scroll" | "hover" | "always";
+  scrollAreaScrollbarGutter?: "auto" | "stable";
   indicators?: SkinIndicators;
   sidebarWidth?: string;
   effects?: ControlEffect[];

package/dist/styles/index.css

@@ -58,6 +58,9 @@
 @import "./recipes/dynamic-notification-input.css";
 @import "./recipes/dynamic-notification-motion.css";
 @import "./recipes/emoji-picker.css";
+@import "./recipes/icon-picker.css";
+@import "./recipes/tabs.css";
+@import "./recipes/tabs-motion.css";
 @import "./recipes/environment-variables.css";
 @import "./recipes/filter-bar.css";
 @import "./recipes/gradient-editor.css";
@@ -76,7 +79,6 @@
 @import "./recipes/switch.css";
 @import "./recipes/table.css";
 @import "./recipes/table-of-contents.css";
-@import "./recipes/tabs.css";
 @import "./recipes/task-list.css";
 @import "./recipes/thread-rail.css";
 @import "./recipes/timeline.css";

package/dist/styles/recipes/accordion.css

@@ -55,13 +55,25 @@
     font-size: var(--text-body);
     text-wrap: pretty;
     height: var(--accordion-panel-height);
-    overflow: hidden;
     transition: height var(--duration-base) var(--ease-emphasized);
   }
 
   :where([data-control-family="accordion"][data-slot="panel"][data-starting-style]),
   :where([data-control-family="accordion"][data-slot="panel"][data-ending-style]) {
     height: 0;
+    overflow: clip;
+  }
+
+  @supports (transition-behavior: allow-discrete) {
+    :where([data-control-family="accordion"][data-slot="panel"]) {
+      transition-property: height, overflow;
+      transition-timing-function: var(--ease-emphasized), step-end;
+      transition-behavior: normal, allow-discrete;
+    }
+
+    :where([data-control-family="accordion"][data-slot="panel"][data-ending-style]) {
+      transition-timing-function: var(--ease-emphasized), step-start;
+    }
   }
 }
 

package/dist/styles/recipes/badge.css

@@ -17,6 +17,7 @@
     background: var(--cui-badge-background);
     color: var(--cui-badge-foreground);
     font-size: var(--cui-badge-font-size);
+    font-variant-numeric: tabular-nums;
   }
 
   :where([data-control-family="badge"][data-slot="root"][data-size="sm"]) {

package/dist/styles/recipes/button.css

@@ -9,17 +9,22 @@
   }
 
   @media (pointer: coarse) {
-    :where([data-control-family="button"][data-size="xs"])::after {
+    :where([data-control-family="button"][data-size])::after {
+      content: "";
+      position: absolute;
+      inset: 50%;
+      translate: -50% -50%;
+      inline-size: 100%;
       block-size: max(100%, var(--touch-target));
     }
 
-    :where([data-control-family="button"][data-size="xs"][data-icon-only="true"])::after {
+    :where([data-control-family="button"][data-size][data-icon-only="true"])::after {
       inline-size: max(100%, var(--touch-target));
     }
   }
 
   :where([data-control-family="button"][data-control="true"]) {
-    --cui-button-radius: var(--radius-control);
+    --cui-button-radius: var(--nest-radius, var(--radius-control));
     --cui-button-gap: calc(var(--spacing) * 1.5);
     --cui-button-icon: 1rem;
     --cui-button-height: var(--control-h-md);
@@ -44,7 +49,7 @@
     --cui-button-open-background: var(--cui-button-hover-background);
     --cui-button-open-foreground: var(--cui-button-hover-foreground);
     --cui-button-open-shadow: var(--cui-button-shadow);
-    border-radius: var(--nest-radius, var(--cui-button-radius));
+    border-radius: var(--cui-button-radius);
     background-color: var(--cui-button-background);
     background-image: var(--cui-button-background-image);
     box-shadow: var(--cui-button-shadow);
@@ -110,6 +115,17 @@
     padding-inline: 0;
   }
 
+  :where([data-control-family="button"][data-layout="stacked"]) {
+    flex-direction: column;
+    block-size: auto;
+    padding-block: calc(var(--spacing) * 1.5);
+    padding-inline: var(--cui-button-padding-inline);
+  }
+
+  :where([data-control-family="button"][data-layout="stacked"] > [data-slot="content"]) {
+    flex-direction: column;
+  }
+
   :where([data-control-family="button"][data-control="true"] svg) {
     pointer-events: none;
     flex-shrink: 0;

package/dist/styles/recipes/code.css

@@ -137,21 +137,6 @@
     :where(:is([data-control-family="code"], [data-control-family="code-diff"])[data-slot="header"]) {
       min-block-size: var(--touch-target);
     }
-
-    :where(:is([data-control-family="code"], [data-control-family="code-diff"])[data-slot="actions"] [data-control-family="button"]),
-    :where([data-control-family="button"][data-code-copy="true"]) {
-      position: relative;
-    }
-
-    :where(:is([data-control-family="code"], [data-control-family="code-diff"])[data-slot="actions"] [data-control-family="button"])::after,
-    :where([data-control-family="button"][data-code-copy="true"])::after {
-      content: "";
-      position: absolute;
-      inset: 50% 50%;
-      translate: -50% -50%;
-      inline-size: 100%;
-      block-size: max(100%, var(--touch-target));
-    }
   }
 }
 

package/dist/styles/recipes/collapsible.css

@@ -38,6 +38,7 @@
   }
 
   :where([data-control-family="collapsible"][data-slot="content"]) {
+    height: var(--collapsible-panel-height);
     transition-property: height, opacity;
     transition-duration: var(--duration-slow);
     transition-timing-function: var(--ease-standard);
@@ -45,9 +46,23 @@
 
   :where([data-control-family="collapsible"][data-slot="content"][data-starting-style]),
   :where([data-control-family="collapsible"][data-slot="content"][data-ending-style]) {
+    height: 0;
+    overflow: clip;
     opacity: 0;
   }
 
+  @supports (transition-behavior: allow-discrete) {
+    :where([data-control-family="collapsible"][data-slot="content"]) {
+      transition-property: height, opacity, overflow;
+      transition-timing-function: var(--ease-standard), var(--ease-standard), step-end;
+      transition-behavior: normal, normal, allow-discrete;
+    }
+
+    :where([data-control-family="collapsible"][data-slot="content"][data-ending-style]) {
+      transition-timing-function: var(--ease-standard), var(--ease-standard), step-start;
+    }
+  }
+
   :where([data-control-family="collapsible"][data-slot="trigger"][data-state="open"] > svg) {
     rotate: 90deg;
   }

package/dist/styles/recipes/emoji-picker.css

@@ -1,14 +1,78 @@
 @layer components {
   :where([data-control-family="emoji-picker"][data-slot="root"]) {
-    --cui-emoji-picker-cell-size: calc(var(--spacing) * 8);
+    --cui-emoji-picker-cell-size: calc(var(--spacing) * 10);
     --cui-emoji-picker-cell-radius: var(--radius-control);
     --cui-emoji-picker-active-background: var(--accent);
     --cui-emoji-picker-header-background: var(--popover);
     --cui-emoji-picker-header-foreground: var(--muted-foreground);
+    --cui-emoji-picker-height: 22rem;
+  }
+  :where([data-control-family="emoji-picker"][data-slot="root"]:not([data-variant="reactions"])) {
+    inline-size: calc(var(--_emoji-picker-columns) * var(--cui-emoji-picker-cell-size) + var(--spacing) * 4);
+    max-inline-size: 100%;
+    block-size: var(--cui-emoji-picker-height);
     color: var(--foreground);
     font-family: var(--font-sans);
   }
 
+  :where([data-control-family="emoji-picker"][data-slot="categories"]) {
+    display: flex;
+    justify-content: space-between;
+    flex-shrink: 0;
+    overflow-x: auto;
+    padding-inline: calc(var(--spacing) * 1.5);
+  }
+  :where([data-control-family="emoji-picker"][data-slot="category"]) {
+    display: grid;
+    place-items: center;
+    flex: 0 0 calc(var(--spacing) * 9);
+    block-size: calc(var(--spacing) * 9);
+    border-radius: var(--cui-emoji-picker-cell-radius);
+    color: var(--muted-foreground);
+    cursor: pointer;
+  }
+  :where([data-control-family="emoji-picker"][data-slot="category"]:hover) {
+    color: var(--foreground);
+    background: var(--cui-emoji-picker-active-background);
+  }
+  :where([data-control-family="emoji-picker"][data-slot="category"] svg) {
+    inline-size: calc(var(--spacing) * 4);
+    block-size: calc(var(--spacing) * 4);
+  }
+  :where([data-control-family="emoji-picker"][data-slot="recent"]) {
+    padding-inline: calc(var(--spacing) * 2);
+    padding-block: calc(var(--spacing) * 1);
+  }
+  :where([data-control-family="emoji-picker"][data-slot="recent-label"]) {
+    color: var(--muted-foreground);
+    font-size: var(--text-caption);
+    padding-inline: calc(var(--spacing) * 1);
+  }
+  :where([data-control-family="emoji-picker"]:is([data-slot="recent-grid"], [data-variant="reactions"])) {
+    display: flex;
+  }
+  :where(
+    [data-control-family="emoji-picker"][data-slot="root"]:has(input:not(:placeholder-shown))
+      :is([data-slot="categories"], [data-slot="recent"])
+  ) {
+    display: none;
+  }
+  :where([data-control-family="emoji-picker"][data-slot="error"]) {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    gap: calc(var(--spacing) * 2);
+    block-size: 100%;
+    color: var(--muted-foreground);
+    font-size: var(--text-label);
+  }
+  :where([data-control-family="emoji-picker"][data-slot="error"] button) {
+    color: var(--foreground);
+    text-decoration: underline;
+    min-block-size: 44px;
+    cursor: pointer;
+  }
   :where([data-control-family="emoji-picker"][data-slot="search"]) {
     position: relative;
     margin: calc(var(--spacing) * 2);
@@ -99,6 +163,19 @@
   :where([data-control-family="emoji-picker"][data-slot="footer-label"]) {
     color: var(--foreground);
   }
+
+  @media (pointer: coarse) {
+    :where([data-control-family="emoji-picker"][data-slot="root"]) {
+      --cui-emoji-picker-cell-size: 44px;
+    }
+    :where([data-control-family="emoji-picker"][data-slot="category"]) {
+      flex-basis: 44px;
+      block-size: 44px;
+    }
+    :where([data-control-family="emoji-picker"][data-slot="search-input"]) {
+      font-size: 16px;
+    }
+  }
 }
 
 @property --cui-emoji-picker-cell-size {
@@ -107,6 +184,12 @@
   initial-value: 0px;
 }
 
+@property --cui-emoji-picker-height {
+  syntax: "<length>";
+  inherits: true;
+  initial-value: 0px;
+}
+
 @property --cui-emoji-picker-cell-radius {
   syntax: "<length-percentage>";
   inherits: true;

package/dist/styles/recipes/field.css

@@ -1,7 +1,7 @@
 @layer components {
   :where([data-control-family="field"][data-control="true"]) {
     gap: calc(var(--spacing) * 1.5);
-    --cui-field-radius: var(--radius-control);
+    --cui-field-radius: var(--nest-radius, var(--radius-control));
     --cui-field-background: var(--control-fill);
     --cui-field-hover-background: var(--hover-fill);
     --cui-field-affordance-background: transparent;
@@ -18,7 +18,7 @@
     --cui-field-padding-inline: var(--padding-x);
     --cui-field-font-size: var(--text-body);
     border: var(--cui-field-border-width) solid var(--cui-field-border-color);
-    border-radius: var(--nest-radius, var(--cui-field-radius));
+    border-radius: var(--cui-field-radius);
     background: var(--cui-field-background);
     box-shadow: var(--cui-field-shadow);
     color: var(--cui-field-foreground);
@@ -58,6 +58,19 @@
     font-size: var(--cui-field-font-size);
   }
 
+  :where(
+    input[data-control-family="field"]:is(
+      [type="number"],
+      [type="date"],
+      [type="time"],
+      [type="datetime-local"],
+      [inputmode="numeric"],
+      [inputmode="decimal"]
+    )
+  ) {
+    font-variant-numeric: tabular-nums;
+  }
+
   :where([data-control-family="field"][data-control="true"])::placeholder {
     color: var(--muted-foreground);
   }