@ctrl-ui/react 0.8.11 → 0.8.13

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/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/styles/index.css

@@ -60,6 +60,7 @@
 @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";

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,18 @@
     padding-inline: 0;
   }
 
+  :where([data-control-family="button"][data-layout="tile"]) {
+    --cui-button-radius: var(--nest-radius, min(var(--radius-control), var(--radius-field)));
+    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="tile"] > [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/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);
   }

package/dist/styles/recipes/resizable.css

@@ -37,32 +37,6 @@
     cursor: row-resize;
   }
 
-  /* biome-ignore-start lint/complexity/noImportantStyles: Resize drag cursor must beat every cursor under the pointer. */
-  :where(
-    :root:has(
-        [data-control-family="resizable"][data-slot="handle"][data-axis="vertical"]:not([data-cursor="none"]):is(
-            [data-separator="hover"],
-            [data-separator="active"]
-          )
-      )
-      *
-  ) {
-    cursor: col-resize !important;
-  }
-
-  :where(
-    :root:has(
-        [data-control-family="resizable"][data-slot="handle"][data-axis="horizontal"]:not([data-cursor="none"]):is(
-            [data-separator="hover"],
-            [data-separator="active"]
-          )
-      )
-      *
-  ) {
-    cursor: row-resize !important;
-  }
-  /* biome-ignore-end lint/complexity/noImportantStyles: Resize drag cursor must beat every cursor under the pointer. */
-
   :where([data-control-family="resizable"][data-slot="handle"][data-variant="solid"]) {
     background-color: var(--border);
   }

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

@@ -11,10 +11,8 @@
     grid-template-rows: minmax(0, 1fr) auto;
   }
 
-  :where(
-    [data-control-family="scroll-area"][data-slot="root"][data-scrollbar-gutter="stable"] > [data-scroll-area-viewport],
-    [data-control-family="scroll-area"][data-slot="root"][data-scrollbar-gutter="stable"] > [data-control-family="progressive-blur"]
-  ) {
+  :where([data-control-family="scroll-area"][data-slot="root"][data-scrollbar-gutter="stable"] > [data-scroll-area-viewport]),
+  :where([data-control-family="scroll-area"][data-slot="root"][data-scrollbar-gutter="stable"] > [data-control-family="progressive-blur"]) {
     grid-area: 1 / 1;
     min-inline-size: 0;
     min-block-size: 0;
@@ -41,7 +39,9 @@
   :where(
     [data-control-family="scroll-area"][data-slot="root"][data-scrollbar-gutter="stable"]
       > [data-slot="scrollbar"][data-orientation="vertical"]:not([data-has-overflow-y])
-      > [data-slot="thumb"],
+      > [data-slot="thumb"]
+  ),
+  :where(
     [data-control-family="scroll-area"][data-slot="root"][data-scrollbar-gutter="stable"]
       > [data-slot="scrollbar"][data-orientation="horizontal"]:not([data-has-overflow-x])
       > [data-slot="thumb"]
@@ -170,7 +170,7 @@
   :where([data-control-family="scroll-area"][data-slot="scrollbar"][data-visibility="always"]),
   :where([data-control-family="scroll-area"][data-slot="scrollbar"][data-visibility="hover"]:is([data-hovering], [data-scrolling])),
   :where([data-control-family="scroll-area"][data-slot="scrollbar"][data-visibility="scroll"][data-scrolling]),
-  :where([data-control-family="scroll-area"][data-slot="root"]:has(> [data-scroll-area-viewport]:focus-visible) > [data-slot="scrollbar"]) {
+  :where([data-control-family="scroll-area"][data-slot="root"] > [data-scroll-area-viewport]:focus-visible ~ [data-slot="scrollbar"]) {
     opacity: 1;
   }
 

package/dist/styles/recipes/sidebar-menu.css

@@ -58,8 +58,7 @@
   }
 
   :where(
-    [data-control-family="sidebar"]:is([data-indicator="slide"], [data-indicator="hover"])
-      [data-control-family="sidebar"][data-slot="menu-button"][data-active]
+    [data-control-family="sidebar"][data-slot="menu-button"]:is([data-indicator="slide"], [data-indicator="hover"])[data-active]
       ~ [data-slot="menu-action"]
   ) {
     color: var(--cui-sidebar-menu-button-track-active-foreground);
@@ -134,21 +133,36 @@
   }
 
   :where(
-    [data-control-family="sidebar"][data-indicator="slide"]
-      [data-control-family="sidebar"][data-slot="menu-button"]:is(:hover, :active, [data-active], [data-popup-open])
+    [data-control-family="sidebar"][data-slot="menu-button"][data-indicator="slide"]:is(:hover, :active, [data-active], [data-popup-open])
   ) {
     background-color: transparent;
   }
 
+  :where([data-control-family="sidebar"][data-slot="menu-button"]:is([data-indicator="slide"], [data-indicator="hover"])[data-active]) {
+    color: var(--cui-sidebar-menu-button-track-active-foreground);
+  }
+
   :where(
-    [data-control-family="sidebar"]:is([data-indicator="slide"], [data-indicator="hover"])
-      [data-control-family="sidebar"][data-slot="menu-button"][data-active]
+    [data-control-family="sidebar"][data-slot="menu-button"][data-indicator="hover"]:focus-visible:not(
+      [data-active],
+      :disabled,
+      [data-disabled],
+      [aria-disabled="true"]
+    )
   ) {
-    color: var(--cui-sidebar-menu-button-track-active-foreground);
+    background-color: var(--cui-sidebar-menu-button-hover-background);
+    color: var(--cui-sidebar-menu-button-hover-foreground);
+    box-shadow: var(--cui-sidebar-menu-button-hover-shadow);
   }
 
   @media (hover: hover) {
-    :where([data-control-family="sidebar"][data-indicator="hover"] [data-slot="menu-button"]:hover:not([data-active])) {
+    :where(
+        [data-control-family="sidebar"][data-slot="menu"][data-indicator="hover"]:has(
+            > [data-slot="menu-item"] > [data-slot="menu-button"]:focus-visible
+          )
+          > [data-slot="menu-item"]
+          > [data-slot="menu-button"][data-indicator="hover"]:hover:not([data-active], :focus-visible)
+      ) {
       background-color: transparent;
       box-shadow: none;
     }

package/dist/styles/recipes/sidebar-parts.css

@@ -1,13 +1,21 @@
 @layer components {
+  :where([data-control-family="sidebar"][data-slot="root"]) {
+    --_sidebar-transition-duration: var(--duration-base);
+  }
+
+  :where([data-control-family="sidebar"][data-slot="root"]:has(> [data-slot="container"] > div > [data-slot="rail"]:focus-visible)) {
+    --_sidebar-transition-duration: 0s;
+  }
+
   :where([data-control-family="sidebar"][data-slot="container"]) {
     translate: 0;
     transition:
-      width var(--duration-base) var(--ease-standard),
-      translate var(--duration-base) var(--ease-standard);
+      width var(--_sidebar-transition-duration) var(--ease-standard),
+      translate var(--_sidebar-transition-duration) var(--ease-standard);
   }
 
   :where([data-control-family="sidebar"][data-slot="inner"]) {
-    transition: padding var(--duration-base) var(--ease-standard);
+    transition: padding var(--_sidebar-transition-duration) var(--ease-standard);
   }
 
   :where([data-control-family="sidebar"][data-collapsible="offcanvas"][data-side="left"]:dir(ltr) [data-slot="container"]),
@@ -23,10 +31,6 @@
   :where(
     [data-control-family="sidebar"][data-slot="wrapper"][data-resizing]
       [data-control-family="sidebar"]:is([data-slot="container"], [data-slot="gap"], [data-slot="inner"])
-  ),
-  :where(
-    [data-control-family="sidebar"][data-slot="wrapper"]:has([data-control-family="sidebar"][data-slot="rail"]:focus-visible)
-      [data-control-family="sidebar"]:is([data-slot="container"], [data-slot="gap"], [data-slot="inner"])
   ) {
     transition: none;
   }

package/dist/styles/recipes/sidebar.css

@@ -96,7 +96,7 @@
 
   :where([data-control-family="sidebar"][data-slot="gap"]) {
     background-color: transparent;
-    transition: width var(--duration-base) var(--ease-standard);
+    transition: width var(--_sidebar-transition-duration) var(--ease-standard);
   }
 
   :where([data-control-family="sidebar"][data-slot="root"][data-variant="sidebar"][data-side="left"] [data-slot="container"]) {

package/dist/styles/recipes/tabs-motion.css

@@ -0,0 +1,99 @@
+@layer components {
+  @supports ((anchor-name: --aui-slide-panel) and (anchor-scope: --aui-slide-panel)) {
+    :where([data-control-family="tabs"][data-slot="panel"][data-slide="panel"][inert][data-slide-exiting][data-ending-style]) {
+      display: block;
+      position: absolute;
+      top: var(--_tabs-panel-top);
+      left: var(--_tabs-panel-left);
+      right: auto;
+      bottom: auto;
+      width: var(--_tabs-panel-width);
+      height: var(--_tabs-panel-height);
+      margin: 0;
+      overflow: clip;
+      animation: aui-slide-exit-hold var(--duration-slow) var(--ease-emphasized) both;
+    }
+
+    @supports (height: anchor-size(height)) {
+      :where([data-control-family="tabs"][data-slot="panel"][data-slide="panel"][inert][data-slide-exiting][data-ending-style]) {
+        height: anchor-size(height);
+      }
+    }
+
+    :where(
+        [data-control-family="tabs"][data-slot="panel"][data-slide="panel"][inert][data-ending-style][data-activation-direction="right"]
+      ) {
+      translate: -100% 0;
+    }
+
+    :where(
+        [data-control-family="tabs"][data-slot="panel"][data-slide="panel"][inert][data-ending-style][data-activation-direction="left"]
+      ) {
+      translate: 100% 0;
+    }
+
+    :where(
+        [data-control-family="tabs"][data-slot="panel"][data-slide="panel"][inert][data-ending-style][data-activation-direction="down"]
+      ) {
+      translate: 0 -100%;
+    }
+
+    :where([data-control-family="tabs"][data-slot="panel"][data-slide="panel"][inert][data-ending-style][data-activation-direction="up"]) {
+      translate: 0 100%;
+    }
+
+    :where(
+        [data-control-family="tabs"][data-slot="root"]:has(> [data-slot="panel"][data-starting-style])
+          > [data-slot="panel"][inert][data-ending-style]
+      ) {
+      translate: 0 0;
+      transition: none;
+    }
+
+    :where([data-control-family="tabs"][data-slot="panel"][data-slide="panel"][data-starting-style]) {
+      transition: none;
+    }
+
+    :where([data-control-family="tabs"][data-slot="root"][data-slide-starting] > [data-slot="panel"][data-slide="panel"]) {
+      transition: none;
+    }
+
+    :where([data-control-family="tabs"][data-slot="root"][data-slide-starting] > [data-slot="panel"][inert]) {
+      translate: 0 0;
+    }
+
+    :where(
+        [data-control-family="tabs"][data-slot="root"][data-slide-starting]
+          > [data-slot="panel"]:not([inert])[data-activation-direction="right"]
+      ) {
+      translate: 100% 0;
+    }
+
+    :where(
+        [data-control-family="tabs"][data-slot="root"][data-slide-starting]
+          > [data-slot="panel"]:not([inert])[data-activation-direction="left"]
+      ) {
+      translate: -100% 0;
+    }
+
+    :where(
+        [data-control-family="tabs"][data-slot="root"][data-slide-starting]
+          > [data-slot="panel"]:not([inert])[data-activation-direction="down"]
+      ) {
+      translate: 0 100%;
+    }
+
+    :where(
+        [data-control-family="tabs"][data-slot="root"][data-slide-starting]
+          > [data-slot="panel"]:not([inert])[data-activation-direction="up"]
+      ) {
+      translate: 0 -100%;
+    }
+
+    @supports (height: calc-size(auto, size)) {
+      :where([data-control-family="tabs"][data-slot="root"][data-slide-starting] > [data-slot="panel"][data-slide="panel"]:not([inert])) {
+        height: var(--aui-slide-prev-height, calc-size(auto, size));
+      }
+    }
+  }
+}