@refineui/react 0.2.1 → 0.3.0

package/dist/index.js

@@ -1201,10 +1201,10 @@ function resolveSlotClasses(recipe, slot, variants = {}) {
 
 // src/recipes/button.recipe.ts
 var buttonVariantClass = {
-  primary: "border-refineui-none border border-transparent bg-refineui-alias-background-brand text-refineui-alias-foreground-inversed",
-  secondary: "border-refineui-none border border-transparent bg-refineui-alias-background-surface-hover text-refineui-alias-foreground-primary",
-  outline: "border-refineui-thin border-refineui-alias-border-default bg-transparent text-refineui-alias-foreground-primary",
-  ghost: "border-refineui-none border border-transparent bg-transparent text-refineui-alias-foreground-primary"
+  primary: "border-refineui-none border border-transparent bg-refineui-alias-background-brand text-refineui-alias-foreground-inversed hover:bg-refineui-alias-background-brand-hover active:bg-refineui-alias-background-brand-active data-[inactive=true]:border-transparent data-[inactive=true]:bg-refineui-alias-background-brand-disabled data-[inactive=true]:text-refineui-alias-foreground-disabled",
+  secondary: "border-refineui-none border border-transparent bg-refineui-alias-background-surface-hover text-refineui-alias-foreground-primary hover:bg-refineui-alias-background-surface-active hover:text-refineui-alias-foreground-primary-hover active:bg-refineui-alias-background-surface-active active:text-refineui-alias-foreground-primary data-[inactive=true]:border-transparent data-[inactive=true]:bg-refineui-alias-background-surface-disabled data-[inactive=true]:text-refineui-alias-foreground-disabled",
+  outline: "border-refineui-thin border-refineui-alias-border-default bg-transparent text-refineui-alias-foreground-primary hover:border-refineui-alias-border-strong hover:text-refineui-alias-foreground-primary-hover active:border-refineui-alias-border-strong data-[inactive=true]:border-refineui-alias-border-disabled data-[inactive=true]:text-refineui-alias-foreground-disabled",
+  ghost: "border-refineui-none border border-transparent bg-transparent text-refineui-alias-foreground-primary hover:bg-refineui-alias-background-primary-hover hover:text-refineui-alias-foreground-primary-hover active:bg-refineui-alias-background-primary-active active:text-refineui-alias-foreground-primary data-[inactive=true]:border-transparent data-[inactive=true]:text-refineui-alias-foreground-disabled"
 };
 var buttonLabelSizeClass = {
   sm: `min-h-refineui-button-min-height-sm gap-refineui-size-xx-small rounded-refineui-large px-refineui-size-medium py-refineui-size-xx-small ${sizedComponentTextClass(componentTypographyTokens.button, "sm")}`,
@@ -1218,7 +1218,7 @@ var buttonIconSizeClass = {
 };
 var buttonRecipe = defineRecipe({
   name: "button",
-  base: "box-border inline-flex cursor-pointer items-center justify-center border transition-[opacity,background-color,border-color,color,transform] duration-[var(--refineui-motion-duration-fast)] ease-[var(--refineui-motion-easing-ease-out)]",
+  base: "box-border inline-flex cursor-pointer items-center justify-center border transition-[opacity,background-color,border-color,color,transform] duration-[var(--refineui-motion-duration-fast)] ease-[var(--refineui-motion-easing-ease-out)] focus-visible:outline-none active:scale-[var(--refineui-motion-scale-press)] data-[inactive=true]:opacity-100 data-[inactive=true]:transform-none data-[inactive=true]:active:scale-100",
   variants: {
     variant: buttonVariantClass,
     layout: {
@@ -1234,7 +1234,7 @@ var buttonRecipe = defineRecipe({
   compoundVariants: [
     {
       match: { variant: "ghost", layout: "icon" },
-      className: "border-refineui-none border border-transparent bg-transparent text-refineui-alias-foreground-secondary hover:text-refineui-alias-foreground-primary-hover"
+      className: "border-refineui-none border border-transparent bg-transparent text-refineui-alias-foreground-secondary hover:bg-refineui-alias-background-primary-hover hover:text-refineui-alias-foreground-primary-hover active:bg-refineui-alias-background-primary-active active:text-refineui-alias-foreground-primary data-[inactive=true]:border-transparent data-[inactive=true]:text-refineui-alias-foreground-disabled"
     },
     {
       match: { layout: "icon", variant: "primary" },
@@ -1368,7 +1368,7 @@ var formControlShellHeightClass = {
 
 // src/components/Input/style.ts
 var inputStyles = {
-  base: "box-border appearance-none outline-none transition-[border-color,box-shadow,background-color] duration-[var(--refineui-motion-duration-fast)]",
+  base: "box-border appearance-none outline-none transition-[border-color,box-shadow,background-color] duration-[var(--refineui-motion-duration-fast)] ease-[var(--refineui-motion-easing-ease-out)] hover:border-refineui-alias-border-hover focus:border-refineui-alias-border-focus focus:shadow-[0_0_0_0.5px_var(--refineui-color-alias-border-focus)] data-[error=true]:focus:border-refineui-alias-background-error-hover data-[error=true]:focus:shadow-[0_0_0_0.5px_var(--refineui-color-alias-background-error-hover)] data-[success=true]:focus:border-refineui-alias-background-success-hover data-[success=true]:focus:shadow-[0_0_0_0.5px_var(--refineui-color-alias-background-success-hover)] disabled:cursor-not-allowed disabled:opacity-100",
   text: "text-refineui-alias-foreground-primary placeholder:text-refineui-alias-foreground-placeholder",
   disabledText: "disabled:text-refineui-alias-foreground-disabled",
   disabledBg: "bg-refineui-alias-background-surface-disabled",
@@ -1455,6 +1455,13 @@ var inputOtpStyles = {
     "transition-[background-color,border-color]",
     "duration-[var(--refineui-motion-duration-fast)]",
     "ease-[var(--refineui-motion-easing-emphasized)]",
+    // Empty slots retain the staggered soft pulse until they receive focus or a digit.
+    "[&:not(:disabled):not(:focus):not([data-filled])]:animate-pulse",
+    "[&:not(:disabled):not(:focus):not([data-filled])]:[animation-duration:var(--refineui-motion-duration-skeleton)]",
+    "[&:not(:disabled):not(:focus):not([data-filled])]:[animation-timing-function:var(--refineui-motion-easing-ease-in-out)]",
+    "[&:not(:disabled):not(:focus):not([data-filled])]:[animation-delay:calc(var(--refineui-input-otp-slot-index,0)*var(--refineui-motion-duration-fast)*-1)]",
+    "motion-reduce:animate-none",
+    "caret-refineui-alias-foreground-primary hover:bg-refineui-alias-background-surface-active focus:border-refineui-alias-border-default",
     "disabled:cursor-not-allowed",
     "disabled:border-refineui-alias-border-disabled",
     "disabled:bg-refineui-alias-background-surface-disabled",
@@ -1462,9 +1469,9 @@ var inputOtpStyles = {
   )
 };
 var inputOtpSlotSizeClass = {
-  sm: "size-refineui-control-height-sm rounded-refineui-large p-0",
-  md: "size-refineui-control-height-md rounded-refineui-x-large p-0",
-  lg: "size-refineui-control-height-lg rounded-refineui-xx-large p-0"
+  sm: "size-refineui-control-height-sm rounded-refineui-large p-0 [font-family:var(--refineui-typography-sub-title-1-font-family)] text-[length:var(--refineui-typography-sub-title-1-font-size)] font-[var(--refineui-typography-sub-title-1-font-weight)] leading-[var(--refineui-typography-sub-title-1-line-height)]",
+  md: "size-refineui-control-height-md rounded-refineui-x-large p-0 [font-family:var(--refineui-typography-title-3-font-family)] text-[length:var(--refineui-typography-title-3-font-size)] font-[var(--refineui-typography-title-3-font-weight)] leading-[var(--refineui-typography-title-3-line-height)]",
+  lg: "size-refineui-control-height-lg rounded-refineui-xx-large p-0 [font-family:var(--refineui-typography-title-2-font-family)] text-[length:var(--refineui-typography-title-2-font-size)] font-[var(--refineui-typography-title-2-font-weight)] leading-[var(--refineui-typography-title-2-line-height)]"
 };
 
 // src/components/InputOTP/InputOTP.tsx
@@ -1754,7 +1761,7 @@ var searchFieldStyles = {
     "box-border flex w-full min-w-0 items-center gap-refineui-size-x-small overflow-hidden outline-none",
     "transition-[background-color,border-color]",
     "duration-[var(--refineui-motion-duration-fast)]",
-    "ease-[var(--refineui-motion-easing-emphasized)]"
+    "ease-[var(--refineui-motion-easing-emphasized)] caret-refineui-alias-foreground-primary hover:bg-refineui-alias-background-surface-active focus-within:border-refineui-alias-border-default data-[disabled=true]:cursor-not-allowed data-[disabled=true]:border-refineui-alias-border-disabled data-[disabled=true]:bg-refineui-alias-background-surface-disabled"
   ].join(" "),
   rootFilled: [
     "border-refineui-thin border-transparent",
@@ -1762,14 +1769,14 @@ var searchFieldStyles = {
     "bg-refineui-alias-background-surface-hover"
   ].join(" "),
   rootPlain: [
-    "h-auto min-h-0 rounded-none border-none bg-transparent px-0 py-0"
+    "h-auto min-h-0 rounded-none border-none bg-transparent px-0 py-0 hover:bg-transparent focus-within:border-transparent"
   ].join(" "),
   rootDisabled: "border-refineui-alias-border-disabled bg-refineui-alias-background-surface-disabled",
   rootPlainDisabled: "bg-transparent",
   icon: "inline-flex shrink-0 items-center justify-center text-refineui-alias-foreground-tertiary",
   iconDisabled: "text-refineui-alias-foreground-disabled",
-  input: "min-w-0 flex-1 appearance-none border-none bg-transparent p-0 text-refineui-alias-foreground-primary outline-none placeholder:text-refineui-alias-foreground-placeholder disabled:cursor-not-allowed disabled:text-refineui-alias-foreground-disabled",
-  clear: "inline-flex shrink-0 cursor-pointer items-center justify-center border-none bg-transparent p-0 leading-none text-refineui-alias-foreground-tertiary",
+  input: "min-w-0 flex-1 appearance-none border-none bg-transparent p-0 text-refineui-alias-foreground-primary outline-none placeholder:text-refineui-alias-foreground-placeholder disabled:cursor-not-allowed disabled:text-refineui-alias-foreground-disabled [&::-webkit-search-decoration]:appearance-none [&::-webkit-search-cancel-button]:appearance-none [&::-webkit-search-results-button]:appearance-none [&::-webkit-search-results-decoration]:appearance-none",
+  clear: "inline-flex shrink-0 cursor-pointer items-center justify-center border-none bg-transparent p-0 leading-none text-refineui-alias-foreground-tertiary hover:text-refineui-alias-foreground-primary active:transform-none",
   clearDisabled: "cursor-not-allowed text-refineui-alias-foreground-disabled"
 };
 var searchFieldFilledSizeClass = formControlRowShellSizeClass;
@@ -2000,7 +2007,7 @@ import { clsx as clsx9 } from "clsx";
 // src/components/Textarea/style.ts
 import { clsx as clsx8 } from "clsx";
 var textareaStyles = {
-  base: "box-border appearance-none outline-none transition-[border-color,box-shadow,background-color] duration-[var(--refineui-motion-duration-fast)]",
+  base: "box-border appearance-none outline-none transition-[border-color,box-shadow,background-color] duration-[var(--refineui-motion-duration-fast)] hover:border-refineui-alias-border-hover focus:border-refineui-alias-border-focus focus:shadow-[0_0_0_0.5px_var(--refineui-color-alias-border-focus)] data-[error=true]:focus:border-refineui-alias-background-error-hover data-[error=true]:focus:shadow-[0_0_0_0.5px_var(--refineui-color-alias-background-error-hover)] data-[success=true]:focus:border-refineui-alias-background-success-hover data-[success=true]:focus:shadow-[0_0_0_0.5px_var(--refineui-color-alias-background-success-hover)] disabled:cursor-not-allowed disabled:opacity-100",
   field: clsx8(
     componentTextClass(componentTypographyTokens.textarea),
     "min-h-refineui-control-textarea-min resize-y rounded-refineui-large px-refineui-size-x-small py-refineui-size-medium"
@@ -2057,18 +2064,18 @@ import { clsx as clsx11 } from "clsx";
 // src/recipes/badge.recipe.ts
 import { clsx as clsx10 } from "clsx";
 var badgeVariantClass = {
-  default: "bg-refineui-alias-background-brand text-refineui-alias-foreground-inversed",
-  neutral: "bg-refineui-alias-background-brand-subtle text-refineui-alias-foreground-brand-strong",
-  outline: "border-refineui-thin border-refineui-alias-border-default border bg-transparent text-refineui-alias-foreground-primary box-border",
-  success: "bg-refineui-alias-background-success text-refineui-alias-foreground-inversed",
-  warning: "bg-refineui-alias-background-warning text-refineui-alias-foreground-inversed",
-  danger: "bg-refineui-alias-background-error text-refineui-alias-foreground-inversed"
+  default: "bg-refineui-alias-background-brand text-refineui-alias-foreground-inversed hover:bg-refineui-alias-background-brand-hover active:bg-refineui-alias-background-brand-active",
+  neutral: "bg-refineui-alias-background-brand-subtle text-refineui-alias-foreground-brand-strong hover:bg-refineui-alias-background-primary-hover active:bg-refineui-alias-background-primary-active",
+  outline: "border-refineui-thin border-refineui-alias-border-default border bg-transparent text-refineui-alias-foreground-primary box-border active:border-refineui-alias-border-strong",
+  success: "bg-refineui-alias-background-success text-refineui-alias-foreground-inversed hover:bg-refineui-alias-background-success-hover active:bg-refineui-alias-background-success-subtle",
+  warning: "bg-refineui-alias-background-warning text-refineui-alias-foreground-inversed hover:bg-refineui-alias-background-warning-hover active:bg-refineui-alias-background-warning-subtle",
+  danger: "bg-refineui-alias-background-error text-refineui-alias-foreground-inversed hover:bg-refineui-alias-background-error-hover active:bg-refineui-alias-background-error-subtle"
 };
 var badgeRecipe = defineRecipe({
   name: "badge",
   base: clsx10(
     componentTextClass(componentTypographyTokens.badge),
-    "inline-flex items-center justify-center py-refineui-size-xxsmall px-refineui-size-small"
+    "inline-flex items-center justify-center py-refineui-size-xxsmall px-refineui-size-small transition-[background-color,border-color] duration-[var(--refineui-motion-duration-fast)]"
   ),
   variants: {
     variant: badgeVariantClass,
@@ -2114,26 +2121,27 @@ import { clsx as clsx13 } from "clsx";
 // src/components/Card/style.ts
 import { clsx as clsx12 } from "clsx";
 var cardStyles = {
-  root: "box-border flex h-full flex-col gap-refineui-size-none overflow-hidden rounded-refineui-xx-large bg-refineui-alias-background-primary",
-  elevated: "border-refineui-none shadow-refineui-4",
+  root: "group box-border flex h-full flex-col gap-refineui-size-none overflow-hidden rounded-[var(--refineui-radius-rounded-xx-large)] bg-refineui-alias-background-primary data-[selected=true]:shadow-[inset_0_0_0_var(--refineui-stroke-width-thick)_var(--refineui-color-alias-border-focus)]",
+  elevated: "border-refineui-none shadow-refineui-4 data-[selected=true]:shadow-[var(--refineui-elevation-4),inset_0_0_0_var(--refineui-stroke-width-thick)_var(--refineui-color-alias-border-focus)]",
   outlined: "border-refineui-thin border-refineui-alias-border-default shadow-none",
   stateDefault: "bg-refineui-alias-background-primary",
   stateHover: "bg-refineui-alias-background-primary-hover",
   statePressed: "bg-refineui-alias-background-surface-active",
   stateDisabled: "bg-refineui-alias-background-surface-disabled",
-  interactive: "cursor-pointer transition-[background-color,border-color,box-shadow,outline-color] duration-[var(--refineui-motion-duration-fast)] ease-[var(--refineui-motion-easing-ease-out)]",
+  interactive: "cursor-pointer transition-[background-color,border-color,box-shadow,outline-color] duration-[var(--refineui-motion-duration-fast)] ease-[var(--refineui-motion-easing-ease-out)] hover:bg-refineui-alias-background-primary-hover active:bg-refineui-alias-background-surface-selected",
+  interactiveOutlined: "hover:border-refineui-alias-border-default active:border-refineui-alias-border-strong",
   headerMain: "flex min-w-0 flex-1 flex-col gap-refineui-size-xx-small",
   header: "flex flex-row flex-wrap items-start justify-between gap-refineui-size-medium px-refineui-size-x-large py-refineui-size-large",
   title: clsx12(
     componentTextClass(componentTypographyTokens.card.title),
-    "text-refineui-alias-foreground-primary"
+    "text-refineui-alias-foreground-primary group-aria-disabled:text-refineui-alias-foreground-disabled"
   ),
   description: clsx12(
     componentTextClass(componentTypographyTokens.card.description),
-    "text-refineui-alias-foreground-tertiary"
+    "text-refineui-alias-foreground-tertiary group-aria-disabled:text-refineui-alias-foreground-disabled"
   ),
   action: "flex shrink-0 items-center justify-end",
-  content: "flex flex-1 flex-col px-refineui-size-x-large pb-refineui-size-large",
+  content: "flex flex-1 flex-col px-refineui-size-x-large pb-refineui-size-large group-aria-disabled:text-refineui-alias-foreground-disabled",
   footer: "mt-auto flex shrink-0 items-center justify-end gap-refineui-size-x-small px-refineui-size-x-large py-refineui-size-medium"
 };
 
@@ -2163,6 +2171,7 @@ function Card({
         state === "pressed" && cardStyles.statePressed,
         state === "disabled" && cardStyles.stateDisabled,
         interactive && !isDisabled && cardStyles.interactive,
+        interactive && !isDisabled && variant === "outlined" && cardStyles.interactiveOutlined,
         className
       ),
       ...props
@@ -2247,16 +2256,16 @@ var labelCompanionStyles = {
 
 // src/components/Checkbox/style.ts
 var checkboxStyles = {
-  root: "inline-flex gap-refineui-size-x-small",
+  root: "group inline-flex gap-refineui-size-x-small",
   textTop: "items-start",
   textCenter: "items-center",
   disabledCursor: "cursor-not-allowed",
   enabledCursor: "cursor-pointer",
   controlWrap: "relative h-[var(--refineui-size-control-checkbox,20px)] w-[var(--refineui-size-control-checkbox,20px)] shrink-0",
   controlWrapDesc: "mt-refineui-size-xxx-small",
-  input: "absolute inset-0 z-1 m-0 h-full w-full cursor-pointer opacity-0 outline-none",
+  input: "peer absolute inset-0 z-1 m-0 h-full w-full cursor-pointer opacity-0 outline-none",
   inputDisabled: "cursor-not-allowed",
-  visual: "pointer-events-none absolute inset-0 box-border flex items-center justify-center overflow-hidden",
+  visual: "pointer-events-none absolute inset-0 box-border flex size-[var(--refineui-size-control-checkbox,20px)] min-h-[var(--refineui-size-control-checkbox,20px)] min-w-[var(--refineui-size-control-checkbox,20px)] items-center justify-center overflow-hidden rounded-[var(--refineui-radius-rounded-large)] border border-refineui-alias-border-default bg-refineui-alias-background-primary transition-[background-color,border-color,border-width] duration-[var(--refineui-motion-duration-fast)] data-[variant=circular]:rounded-refineui-circle data-[checked=true]:border-refineui-alias-background-brand data-[checked=true]:bg-refineui-alias-background-brand group-hover:data-[checked=false]:border-refineui-alias-border-subtle group-active:data-[checked=false]:border-refineui-alias-border-strong group-hover:data-[checked=true]:border-refineui-alias-background-brand-hover group-hover:data-[checked=true]:bg-refineui-alias-background-brand-hover group-active:data-[checked=true]:border-refineui-alias-background-brand-active group-active:data-[checked=true]:bg-refineui-alias-background-brand-active peer-focus-visible:border-2 peer-focus-visible:border-refineui-alias-border-strong peer-focus-visible:bg-refineui-alias-background-primary peer-focus-visible:data-[checked=true]:border-refineui-alias-border-focus peer-focus-visible:data-[checked=true]:bg-refineui-alias-background-brand-active data-[disabled=true]:border-refineui-alias-border-disabled data-[disabled=true]:bg-refineui-alias-background-primary-hover [&[data-disabled=true][data-checked=true]]:border-refineui-alias-background-surface-selected [&[data-disabled=true][data-checked=true]]:bg-refineui-alias-background-surface-selected",
   textCol: "flex min-w-0 flex-col gap-refineui-size-x-small",
   label: labelCompanionStyles.label,
   desc: labelCompanionStyles.description,
@@ -2390,7 +2399,7 @@ var radioStyles = {
   rootWithoutDescription: "items-center",
   rootDisabled: "cursor-not-allowed",
   rootEnabled: "cursor-pointer",
-  input: "h-[var(--refineui-size-control-checkbox-radio,20px)] w-[var(--refineui-size-control-checkbox-radio,20px)] shrink-0 cursor-pointer",
+  input: "relative m-0 inline-grid size-[var(--refineui-size-control-checkbox-radio,20px)] min-h-[var(--refineui-size-control-checkbox-radio,20px)] min-w-[var(--refineui-size-control-checkbox-radio,20px)] shrink-0 cursor-pointer appearance-none place-content-center rounded-full border border-refineui-alias-border-default bg-refineui-alias-background-primary shadow-none outline-none transition-[border-color,background-color,box-shadow,opacity] duration-[var(--refineui-motion-duration-fast)] after:size-refineui-size-medium after:scale-0 after:rounded-full after:bg-refineui-alias-background-primary after:content-[''] after:transition-transform after:duration-[var(--refineui-motion-duration-fast)] after:ease-[var(--refineui-motion-easing-ease-out)] focus-visible:shadow-[0_0_0_var(--refineui-stroke-width-thick)_var(--refineui-color-alias-border-strong)] checked:border-refineui-alias-foreground-primary checked:bg-refineui-alias-foreground-primary checked:after:scale-100 checked:focus-visible:shadow-[0_0_0_var(--refineui-stroke-width-thick)_var(--refineui-color-alias-border-strong)] disabled:cursor-not-allowed disabled:border-refineui-alias-border-disabled disabled:opacity-100 disabled:checked:border-refineui-alias-foreground-disabled disabled:checked:bg-refineui-alias-foreground-disabled disabled:checked:after:scale-100",
   inputWithDescriptionOffset: "mt-refineui-size-xxx-small",
   textWrap: "flex min-w-0 flex-col gap-refineui-size-x-small",
   label: labelCompanionStyles.label,
@@ -2512,7 +2521,7 @@ import {
 } from "react";
 import { createPortal } from "react-dom";
 import { iconSizes as iconSizes4 } from "@refineui/tokens";
-import { acquireBodyScrollLock, composeRefs } from "@refineui/utilities/react";
+import { composeRefs } from "@refineui/utilities/react";
 
 // src/components/ScrollArea/ScrollAreaRegion.tsx
 import { clsx as clsx26 } from "clsx";
@@ -2539,7 +2548,7 @@ import { spacings } from "@refineui/tokens";
 var SCROLL_AREA_THUMB_MIN_PX = Number.parseFloat(spacings.sizeXLarge);
 var SCROLL_EDGE_FALLOFF_RATIO = 0.25;
 var scrollAreaStyles = {
-  root: "box-border min-h-0 min-w-0 overflow-hidden outline-none",
+  root: "relative box-border min-h-0 min-w-0 overflow-hidden outline-none",
   /**
    * Overflow and scroll chaining are per axis: an axis only becomes scrollable
    * when its scrollbar is declared, so a horizontal-only area lets vertical
@@ -2548,26 +2557,31 @@ var scrollAreaStyles = {
   viewport: clsx24(
     "size-full min-h-0 min-w-0 rounded-[inherit]",
     "overflow-hidden",
-    "outline-none",
+    "outline-none [scrollbar-width:none] [&::-webkit-scrollbar]:hidden",
     "data-[overflow-x=true]:overflow-x-auto data-[overflow-x=true]:overscroll-x-contain",
     "data-[overflow-y=true]:overflow-y-auto data-[overflow-y=true]:overscroll-y-contain"
   ),
   scrollbar: clsx24(
     "z-refineui-content box-border touch-none select-none",
-    "transition-opacity duration-[var(--refineui-motion-duration-fast)]",
-    "ease-[var(--refineui-motion-easing-ease-out)]"
+    "transition-opacity duration-[var(--refineui-motion-duration-normal)]",
+    "ease-[var(--refineui-motion-easing-ease-out)]",
+    "data-[state=hidden]:pointer-events-none data-[state=hidden]:opacity-0",
+    "data-[visibility=always]:data-[state=visible]:opacity-100",
+    "data-[visibility=hover]:data-[state=visible]:pointer-events-none data-[visibility=hover]:data-[state=visible]:opacity-0",
+    "data-[visibility=scroll]:data-[state=visible]:pointer-events-none data-[visibility=scroll]:data-[state=visible]:opacity-0",
+    "data-[active=true]:!pointer-events-auto data-[active=true]:!opacity-100"
   ),
-  scrollbarVertical: "",
-  scrollbarHorizontal: "",
+  scrollbarVertical: "absolute inset-y-refineui-size-xxx-small end-refineui-size-xxx-small w-refineui-size-medium overflow-hidden",
+  scrollbarHorizontal: "absolute inset-x-refineui-size-xxx-small bottom-refineui-size-xxx-small h-refineui-size-medium overflow-hidden",
   /** Inner rail — thumb is absolutely positioned here (padding lives on the outer scrollbar). */
-  track: "relative size-full min-h-0 min-w-0 overflow-hidden rounded-refineui-circle",
+  track: "relative size-full min-h-0 min-w-0 overflow-hidden rounded-refineui-circle bg-refineui-alias-background-surface-selected",
   thumb: clsx24(
     "absolute rounded-refineui-circle",
     "bg-refineui-alias-border-strong",
     "transition-[background-color] duration-[var(--refineui-motion-duration-fast)]",
     "ease-[var(--refineui-motion-easing-ease-out)]",
     "hover:bg-refineui-alias-foreground-secondary",
-    "data-[dragging=true]:bg-refineui-alias-foreground-secondary"
+    "data-[dragging=true]:bg-refineui-alias-foreground-secondary data-[orientation=vertical]:start-0 data-[orientation=vertical]:w-full data-[orientation=horizontal]:top-0 data-[orientation=horizontal]:h-full"
   )
 };
 var scrollAreaScrollbarOrientationClass = {
@@ -2649,6 +2663,8 @@ var ScrollArea = forwardRef4(function ScrollArea2({
   const [vertical, setVertical] = useState4(EMPTY_METRICS);
   const [horizontal, setHorizontal] = useState4(EMPTY_METRICS);
   const [scrolling, setScrolling] = useState4(false);
+  const [hovering, setHovering] = useState4(false);
+  const [focused, setFocused] = useState4(false);
   const [interacting, setInteracting] = useState4(false);
   const [axes, setAxes] = useState4(NO_AXES);
   const hideTimerRef = useRef4(null);
@@ -2716,6 +2732,14 @@ var ScrollArea = forwardRef4(function ScrollArea2({
       if (hideTimerRef.current != null) window.clearTimeout(hideTimerRef.current);
     };
   }, [sync, markScrolling, viewportEpoch]);
+  useEffect(() => {
+    if (!hovering) return;
+    const clearHoverAfterAncestorScroll = (event) => {
+      if (event.target !== viewportRef.current) setHovering(false);
+    };
+    window.addEventListener("scroll", clearHoverAfterAncestorScroll, true);
+    return () => window.removeEventListener("scroll", clearHoverAfterAncestorScroll, true);
+  }, [hovering]);
   const ctx = useMemo3(
     () => ({
       type,
@@ -2726,6 +2750,10 @@ var ScrollArea = forwardRef4(function ScrollArea2({
       vertical,
       horizontal,
       scrolling,
+      hovering,
+      setHovering,
+      focused,
+      setFocused,
       interacting,
       setInteracting
     }),
@@ -2737,6 +2765,8 @@ var ScrollArea = forwardRef4(function ScrollArea2({
       vertical,
       horizontal,
       scrolling,
+      hovering,
+      focused,
       interacting
     ]
   );
@@ -2747,6 +2777,7 @@ var ScrollArea = forwardRef4(function ScrollArea2({
       "data-refineui": "scroll-area",
       "data-type": type,
       "data-scrolling": scrolling || void 0,
+      "data-hovering": hovering || void 0,
       "data-interacting": interacting || void 0,
       className: clsx25(scrollAreaStyles.root, className),
       ...props,
@@ -2755,8 +2786,8 @@ var ScrollArea = forwardRef4(function ScrollArea2({
   ) });
 });
 var ScrollAreaViewport = forwardRef4(
-  function ScrollAreaViewport2({ className, children, ...props }, forwardedRef) {
-    const { setViewportNode, axes, vertical, horizontal } = useScrollAreaContext("ScrollAreaViewport");
+  function ScrollAreaViewport2({ className, children, onPointerEnter, onPointerLeave, onFocus, onBlur, ...props }, forwardedRef) {
+    const { setViewportNode, axes, vertical, horizontal, setHovering, setFocused } = useScrollAreaContext("ScrollAreaViewport");
     const composedRef = useComposedRefs(setViewportNode, forwardedRef);
     const scrollable = isScrollable(vertical) || isScrollable(horizontal);
     return /* @__PURE__ */ jsx20(
@@ -2768,6 +2799,23 @@ var ScrollAreaViewport = forwardRef4(
         "data-overflow-y": axes.vertical ? "true" : void 0,
         tabIndex: scrollable ? 0 : void 0,
         className: clsx25(scrollAreaStyles.viewport, className),
+        onPointerEnter: (event) => {
+          onPointerEnter?.(event);
+          setHovering(true);
+        },
+        onPointerLeave: (event) => {
+          onPointerLeave?.(event);
+          setHovering(false);
+        },
+        onFocus: (event) => {
+          onFocus?.(event);
+          setFocused(true);
+        },
+        onBlur: (event) => {
+          onBlur?.(event);
+          const next = event.relatedTarget;
+          if (!next || !event.currentTarget.contains(next)) setFocused(false);
+        },
         ...props,
         children
       }
@@ -2779,6 +2827,8 @@ function ScrollAreaScrollbar({
   className,
   children,
   onPointerDown,
+  onPointerEnter,
+  onPointerLeave,
   ...props
 }) {
   const {
@@ -2788,12 +2838,15 @@ function ScrollAreaScrollbar({
     vertical,
     horizontal,
     scrolling,
-    interacting
+    hovering,
+    focused,
+    interacting,
+    setHovering
   } = useScrollAreaContext("ScrollAreaScrollbar");
   const trackRef = useRef4(null);
   const metrics = orientation === "vertical" ? vertical : horizontal;
   const visible = isScrollable(metrics);
-  const active = scrolling || interacting;
+  const active = type === "hover" ? hovering || focused || scrolling || interacting : type === "scroll" ? focused || scrolling || interacting : false;
   useLayoutEffect(() => {
     setAxisEnabled(orientation, true);
     return () => setAxisEnabled(orientation, false);
@@ -2843,6 +2896,14 @@ function ScrollAreaScrollbar({
         className
       ),
       onPointerDown: onTrackPointerDown,
+      onPointerEnter: (event) => {
+        onPointerEnter?.(event);
+        setHovering(true);
+      },
+      onPointerLeave: (event) => {
+        onPointerLeave?.(event);
+        setHovering(false);
+      },
       ...props,
       children: /* @__PURE__ */ jsx20(
         "div",
@@ -2991,7 +3052,7 @@ var selectStyles = {
     "border-refineui-hairline border-refineui-alias-border-default",
     "bg-refineui-alias-background-primary px-refineui-size-medium py-refineui-size-x-small",
     "text-refineui-alias-foreground-primary outline-none",
-    "transition-[color,background-color,border-color,transform] duration-[var(--refineui-motion-duration-fast)] ease-[var(--refineui-motion-easing-ease-out)]"
+    "transition-[color,background-color,border-color,transform] duration-[var(--refineui-motion-duration-fast)] ease-[var(--refineui-motion-easing-ease-out)] hover:!bg-refineui-alias-background-primary-hover hover:!text-refineui-alias-foreground-primary-hover active:!bg-refineui-alias-background-primary-active active:!text-refineui-alias-foreground-primary data-[state=open]:!bg-refineui-alias-background-primary-hover data-[state=open]:!text-refineui-alias-foreground-primary-hover data-[pressed]:!bg-refineui-alias-background-primary-active data-[pressed]:!text-refineui-alias-foreground-primary focus-visible:!bg-refineui-alias-background-primary-hover focus-visible:!text-refineui-alias-foreground-primary-hover"
   ),
   /** Ghost plate — same gap/radius as filled, no field border (Button ghost-like). */
   triggerGhost: clsx27(
@@ -3000,7 +3061,7 @@ var selectStyles = {
     "border-refineui-none border-transparent bg-transparent",
     "px-refineui-size-x-small py-refineui-size-xx-small",
     "text-refineui-alias-foreground-primary outline-none",
-    "transition-[color,background-color,transform] duration-[var(--refineui-motion-duration-fast)] ease-[var(--refineui-motion-easing-ease-out)]"
+    "transition-[color,background-color,transform] duration-[var(--refineui-motion-duration-fast)] ease-[var(--refineui-motion-easing-ease-out)] hover:bg-refineui-alias-background-primary-hover hover:text-refineui-alias-foreground-primary-hover active:bg-refineui-alias-background-primary-active active:text-refineui-alias-foreground-primary data-[state=open]:bg-refineui-alias-background-primary-hover data-[state=open]:text-refineui-alias-foreground-primary-hover data-[pressed]:bg-refineui-alias-background-primary-active data-[pressed]:text-refineui-alias-foreground-primary focus-visible:bg-refineui-alias-background-primary-hover focus-visible:text-refineui-alias-foreground-primary-hover"
   ),
   /** Flush shell — consumer / parent owns padding, radius, surface. */
   triggerPlain: clsx27(
@@ -3018,13 +3079,14 @@ var selectStyles = {
   chevronOpen: "rotate-180",
   /* No overflow-hidden — it isolates descendants and kills panel `backdrop-filter`. */
   positioner: "z-refineui-popup flex flex-col",
-  contentShell: "box-border flex w-full min-h-0 flex-col overflow-hidden rounded-refineui-xx-large border-refineui-hairline border-refineui-alias-border-default p-refineui-size-xx-small shadow-refineui-2 outline-none",
+  contentShell: "box-border flex w-full min-h-0 flex-col overflow-hidden rounded-refineui-xx-large border-refineui-hairline border-refineui-alias-border-default bg-refineui-alias-surface-frosted p-refineui-size-xx-small shadow-refineui-2 outline-none backdrop-blur-refineui-surface-frost",
   contentPopper: "h-auto max-h-[var(--refineui-select-content-available-height,100dvh)]",
-  contentItemAligned: "max-h-full",
+  /** The positioner owns alignment height; the frosted surface only covers its content. */
+  contentItemAligned: "h-fit max-h-full self-start",
   viewportPopper: "relative flex max-h-full min-h-0 min-w-full w-full flex-col",
-  viewportItemAligned: "relative flex min-h-0 min-w-full w-full max-h-full flex-1 flex-col",
+  viewportItemAligned: "relative flex h-auto min-h-0 min-w-full w-full max-h-full flex-none flex-col",
   scrollAreaRootPopper: "relative flex max-h-full min-h-0 flex-col",
-  scrollAreaRootItemAligned: "relative flex h-full min-h-0 flex-1 flex-col",
+  scrollAreaRootItemAligned: "relative flex h-auto min-h-0 max-h-full flex-none flex-col",
   group: "flex flex-col gap-px",
   label: clsx27(
     componentTextClass(componentTypographyTokens.select.label),
@@ -3033,7 +3095,7 @@ var selectStyles = {
   separator: "my-refineui-size-x-small h-px bg-refineui-alias-border-default",
   item: clsx27(
     componentTextClass(componentTypographyTokens.select.item),
-    "relative flex cursor-pointer items-center gap-refineui-size-x-small rounded-refineui-large border-refineui-none bg-transparent p-refineui-size-x-small text-refineui-alias-foreground-primary outline-none transition-colors data-[disabled]:cursor-not-allowed data-[disabled]:text-refineui-alias-foreground-disabled"
+    "relative flex cursor-pointer items-center gap-refineui-size-x-small rounded-refineui-large border-refineui-none bg-transparent p-refineui-size-x-small text-refineui-alias-foreground-primary outline-none transition-[background-color,transform] duration-[var(--refineui-motion-duration-fast)] ease-[var(--refineui-motion-easing-ease-out)] hover:bg-refineui-alias-background-primary-hover hover:text-refineui-alias-foreground-primary-hover active:bg-refineui-alias-background-primary-active active:text-refineui-alias-foreground-primary data-[selected=true]:bg-refineui-alias-background-primary-hover data-[selected=true]:text-refineui-alias-foreground-primary data-[state=selected]:bg-refineui-alias-background-primary-hover data-[state=selected]:text-refineui-alias-foreground-primary data-[state=hover]:bg-refineui-alias-background-primary-hover data-[state=hover]:text-refineui-alias-foreground-primary-hover data-[state=pressed]:bg-refineui-alias-background-primary-active data-[state=pressed]:text-refineui-alias-foreground-primary aria-disabled:cursor-not-allowed aria-disabled:bg-refineui-alias-background-surface-disabled aria-disabled:!text-refineui-alias-foreground-disabled aria-disabled:transform-none"
   ),
   itemActive: "bg-refineui-alias-background-primary-hover",
   itemDisabled: "cursor-not-allowed text-refineui-alias-foreground-disabled",
@@ -3166,32 +3228,6 @@ function Select({
     document.addEventListener("mousedown", onOutside);
     return () => document.removeEventListener("mousedown", onOutside);
   }, [open, setOpen]);
-  useEffect2(() => {
-    if (!open) return;
-    const releaseBodyLock = acquireBodyScrollLock();
-    const ancestors = getScrollableAncestors(triggerRef.current).filter(
-      (el) => el !== document.body && el !== document.documentElement
-    );
-    const prevStyles = ancestors.map((el) => ({
-      el,
-      overflow: el.style.overflow,
-      overflowX: el.style.overflowX,
-      overflowY: el.style.overflowY
-    }));
-    for (const { el } of prevStyles) {
-      el.style.overflow = "hidden";
-      el.style.overflowX = "hidden";
-      el.style.overflowY = "hidden";
-    }
-    return () => {
-      for (const { el, overflow, overflowX, overflowY } of prevStyles) {
-        el.style.overflow = overflow;
-        el.style.overflowX = overflowX;
-        el.style.overflowY = overflowY;
-      }
-      releaseBodyLock();
-    };
-  }, [open]);
   const onKeyDown = useCallback4(
     (event) => {
       if (disabled) return;
@@ -3379,7 +3415,7 @@ function SelectValue({ placeholder, className, ...props }) {
         className
       ),
       ...props,
-      children: label || placeholder || rootPlaceholder || "Select..."
+      children: label || placeholder || rootPlaceholder || value || "Select..."
     }
   );
 }
@@ -3735,7 +3771,7 @@ function SelectItem({
   const [pressed, setPressed] = useState5(false);
   const isSelected = value === itemValue;
   const label = (textValue || (typeof children === "string" ? children : String(itemValue))).trim();
-  useEffect2(() => {
+  useIsomorphicLayoutEffect(() => {
     return registerItem({ value: itemValue, label, disabled, ref });
   }, [registerItem, itemValue, label, disabled]);
   const enabledItems = itemsRef.current.filter((item) => !item.disabled);
@@ -3853,16 +3889,17 @@ import { clsx as clsx29 } from "clsx";
 
 // src/components/Toggle/style.ts
 var toggleStyles = {
-  root: "box-border flex w-refineui-switch-width items-center rounded-refineui-x-large border-none p-refineui-switch-padding transition-colors duration-[var(--refineui-motion-duration-medium)]",
+  root: "box-border flex w-refineui-switch-width items-center rounded-refineui-x-large border-none p-refineui-switch-padding transition-colors duration-[var(--refineui-motion-duration-medium)] focus-visible:outline-[length:var(--refineui-stroke-width-thick)] focus-visible:outline-refineui-alias-border-focus focus-visible:outline-offset-refineui-size-xxx-small",
   /** OFF rest — Web Kit track fill off */
-  unchecked: "cursor-pointer bg-refineui-alias-background-primary-active",
+  unchecked: "cursor-pointer bg-refineui-alias-background-primary-active hover:bg-refineui-alias-background-surface-selected active:bg-refineui-alias-background-brand-subtle",
   /** ON rest */
-  checked: "cursor-pointer bg-refineui-alias-background-brand",
+  checked: "cursor-pointer bg-refineui-alias-background-brand hover:bg-refineui-alias-background-brand-hover active:bg-refineui-alias-background-brand-active",
   /** Disabled OFF — muted empty track */
   disabledUnchecked: "cursor-not-allowed bg-refineui-alias-background-surface-disabled",
   /** Disabled ON — muted brand so on/off stay distinguishable */
   disabledChecked: "cursor-not-allowed bg-refineui-alias-background-brand-subtle",
-  thumb: "block h-refineui-switch-thumb w-refineui-switch-thumb rounded-refineui-x-large shadow-refineui-2 transition-[transform,background-color] duration-[var(--refineui-motion-duration-medium)]",
+  thumb: "block h-refineui-switch-thumb w-refineui-switch-thumb rounded-refineui-x-large shadow-refineui-2 transition-[translate,background-color] duration-[var(--refineui-motion-duration-medium)] ease-[var(--refineui-motion-easing-ease-out)]",
+  thumbChecked: "translate-x-refineui-switch-thumb rtl:-translate-x-refineui-switch-thumb",
   thumbDefault: "bg-refineui-alias-background-primary",
   /** Disabled OFF thumb — slightly darker than track */
   thumbDisabledUnchecked: "bg-refineui-alias-background-brand-subtle shadow-none",
@@ -3897,7 +3934,7 @@ function Toggle({
       },
       disabled,
       ...props,
-      children: /* @__PURE__ */ jsx23("span", { className: clsx29(toggleStyles.thumb, thumbClass) })
+      children: /* @__PURE__ */ jsx23("span", { className: clsx29(toggleStyles.thumb, checked && toggleStyles.thumbChecked, thumbClass) })
     }
   );
 }
@@ -3908,14 +3945,14 @@ import { clsx as clsx30 } from "clsx";
 // src/recipes/chip.recipe.ts
 import { iconSizes as iconSizes5 } from "@refineui/tokens";
 var chipVariantClass = {
-  default: "border-none bg-refineui-alias-background-surface-selected text-refineui-alias-foreground-brand",
-  outline: "border border-refineui-thin border-refineui-alias-border-default box-border bg-transparent text-refineui-alias-foreground-brand",
-  filled: "border-none bg-refineui-alias-background-brand text-refineui-alias-foreground-inversed"
+  default: "border-none bg-refineui-alias-background-surface-selected text-refineui-alias-foreground-brand hover:bg-refineui-alias-background-primary-hover active:bg-refineui-alias-background-primary-active",
+  outline: "border border-refineui-thin border-refineui-alias-border-default box-border bg-transparent text-refineui-alias-foreground-brand hover:border-refineui-alias-border-hover active:border-refineui-alias-border-focus",
+  filled: "border-none bg-refineui-alias-background-brand text-refineui-alias-foreground-inversed hover:bg-refineui-alias-background-brand-hover active:bg-refineui-alias-background-brand-active"
 };
 var chipDisabledVariantClass = {
-  default: "border-none bg-refineui-alias-background-surface-disabled text-refineui-alias-foreground-disabled",
-  outline: "border border-refineui-thin border-refineui-alias-border-disabled box-border bg-transparent text-refineui-alias-foreground-disabled",
-  filled: "border-none bg-refineui-alias-background-surface-disabled text-refineui-alias-foreground-disabled"
+  default: "pointer-events-none cursor-not-allowed border-none bg-refineui-alias-background-surface-disabled text-refineui-alias-foreground-disabled",
+  outline: "pointer-events-none cursor-not-allowed border border-refineui-thin border-refineui-alias-border-disabled box-border bg-transparent text-refineui-alias-foreground-disabled",
+  filled: "pointer-events-none cursor-not-allowed border-none bg-refineui-alias-background-surface-disabled text-refineui-alias-foreground-disabled"
 };
 var chipSizeClass = {
   sm: "min-h-refineui-chip-min-height-sm px-refineui-size-x-small",
@@ -3930,7 +3967,7 @@ var chipSizeIcon = {
 };
 var chipRecipe = defineRecipe({
   name: "chip",
-  base: "box-border inline-flex max-w-full items-center gap-refineui-size-xx-small rounded-refineui-medium",
+  base: "box-border inline-flex max-w-full items-center gap-refineui-size-xx-small rounded-refineui-medium transition-[background-color,border-color] duration-[var(--refineui-motion-duration-fast)]",
   variants: {
     variant: chipVariantClass,
     size: chipSizeClass
@@ -4096,7 +4133,7 @@ var dialogRecipe = defineSlotRecipe({
   slots: ["root", "scrim", "panel", "panelScrollWrap", "header", "headerMain", "title", "description"],
   base: {
     root: "fixed inset-0 z-refineui-messages flex items-center justify-center p-refineui-size-large",
-    scrim: "absolute inset-0 cursor-pointer transition-opacity",
+    scrim: "absolute inset-0 cursor-pointer transition-opacity backdrop-blur-[var(--refineui-blur-overlay-scrim)]",
     panel: "relative box-border flex max-h-refineui-dialog-max-height-viewport w-full flex-col overflow-hidden rounded-refineui-xx-large bg-refineui-alias-background-primary p-refineui-size-xx-large shadow-refineui-8 outline-none",
     panelScrollWrap: "flex min-h-0 min-w-0 flex-1 flex-col",
     header: "flex shrink-0 items-start justify-between gap-refineui-size-x-small",
@@ -4357,7 +4394,7 @@ import { foundationSizes as foundationSizes2, iconSizes as iconSizes7 } from "@r
 var COMMAND_LIST_MAX_HEIGHT = `min(60vh, ${foundationSizes2.foundationSize3200})`;
 var commandStyles = {
   /** Detached layout: the search field and the results panel are separate surfaces, so the root has none. */
-  root: "flex w-full flex-col gap-refineui-size-small text-refineui-alias-foreground-primary outline-none",
+  root: "flex w-full flex-col gap-refineui-size-small text-refineui-alias-foreground-primary outline-none [--refineui-command-list-radius:var(--refineui-radius-rounded-x-large)] data-[size=sm]:[--refineui-command-list-radius:var(--refineui-radius-rounded-large)] data-[size=lg]:[--refineui-command-list-radius:var(--refineui-radius-rounded-xx-large)]",
   rootInDialog: "min-h-0 w-full",
   /** Dialog panel stays transparent — the field and results panel float on the scrim themselves. */
   dialogContentPanel: {
@@ -4374,21 +4411,21 @@ var commandStyles = {
    * Radius comes from `--refineui-command-list-radius` (per size, refineui.css) so the scrollbar inset can share it.
    */
   listShell: clsx33(
-    "box-border w-full overflow-hidden",
+    "box-border w-full overflow-hidden rounded-[var(--refineui-command-list-radius)] data-[animate=true]:transition-[height] data-[animate=true]:duration-[var(--refineui-motion-duration-medium)] data-[animate=true]:ease-[var(--refineui-motion-easing-emphasized)] motion-reduce:data-[animate=true]:transition-none",
     "border-refineui-hairline border-refineui-alias-border-default",
     "bg-refineui-alias-background-primary shadow-refineui-2"
   ),
-  list: "h-full min-h-0 w-full",
+  list: "h-full min-h-0 w-full [&>[data-refineui=scroll-area]]:h-full [&>[data-refineui=scroll-area]]:min-h-0 [&>[data-refineui=scroll-area]>[data-refineui=scroll-area-scrollbar][data-orientation=vertical]]:inset-y-[calc(var(--refineui-command-list-radius)/2)]",
   listShellMaxHeight: {
     maxHeight: COMMAND_LIST_MAX_HEIGHT
   },
   listViewport: "outline-none",
   listInner: "relative flex flex-col gap-refineui-size-xxx-small px-refineui-size-medium py-refineui-size-small",
   /** Sliding highlight behind the selected item; geometry is measured, so physical `left`/`top` (inline) are intentional. */
-  indicator: "pointer-events-none absolute rounded-refineui-large bg-refineui-alias-background-surface-hover",
+  indicator: "pointer-events-none absolute rounded-refineui-large bg-refineui-alias-background-surface-hover opacity-0 transition-none data-[ready=true]:opacity-100 data-[animate=true]:transition-[top,left,height,width,opacity,background-color] data-[animate=true]:duration-[var(--refineui-motion-duration-medium)] data-[animate=true]:ease-[var(--refineui-motion-easing-emphasized)] motion-reduce:transition-none",
   empty: clsx33(
     componentTextClass(componentTypographyTokens.command.empty),
-    "px-refineui-size-medium py-refineui-size-xx-large text-center text-refineui-alias-foreground-tertiary"
+    "px-refineui-size-medium py-refineui-size-xx-large text-center text-refineui-alias-foreground-tertiary [animation:refineui-fade-enter_var(--refineui-motion-duration-normal)_var(--refineui-motion-easing-standard)] motion-reduce:animation-none"
   ),
   /** `overflow-clip`, not hidden: a hidden group would become the scroll container the edge effect tracks. */
   group: "flex flex-col gap-refineui-size-xxx-small overflow-clip",
@@ -4400,7 +4437,7 @@ var commandStyles = {
   separatorLine: "h-px w-full shrink-0 bg-refineui-alias-border-default",
   itemBase: clsx33(
     "relative flex w-full items-center gap-refineui-size-x-small rounded-refineui-large border-none bg-transparent",
-    "px-refineui-size-x-small text-start outline-none"
+    "px-refineui-size-x-small text-start outline-none transition-[background-color,transform] duration-[var(--refineui-motion-duration-fast)] hover:bg-refineui-alias-background-surface-hover hover:text-refineui-alias-foreground-primary-hover active:bg-refineui-alias-background-surface-active active:text-refineui-alias-foreground-primary active:scale-[var(--refineui-motion-scale-press)] data-[selected=true]:bg-refineui-alias-background-surface-hover data-[selected=true]:text-refineui-alias-foreground-primary-hover data-[state=hover]:bg-refineui-alias-background-surface-hover data-[state=hover]:text-refineui-alias-foreground-primary-hover data-[state=pressed]:bg-refineui-alias-background-surface-active data-[state=pressed]:text-refineui-alias-foreground-primary data-[state=active]:bg-refineui-alias-background-surface-hover data-[state=active]:text-refineui-alias-foreground-primary data-[state=disabled]:bg-transparent data-[state=disabled]:text-refineui-alias-foreground-disabled"
   ),
   itemDisabled: "cursor-not-allowed text-refineui-alias-foreground-disabled",
   itemEnabled: "cursor-pointer text-refineui-alias-foreground-primary",
@@ -5507,7 +5544,7 @@ function AvatarGroup({
       "data-avatar-stack-size": normalizedSize,
       className: clsx36(
         avatarStyles.groupRoot,
-        layout === "stack" ? "gap-0" : avatarSpreadGap[normalizedSize],
+        layout === "stack" ? "gap-0 pe-[var(--avatar-stack-overlap)]" : avatarSpreadGap[normalizedSize],
         className
       ),
       style: {
@@ -5518,9 +5555,9 @@ function AvatarGroup({
         const isCount = isValidElement3(child) && child.type === AvatarGroupCount;
         const z = layout === "stack" ? index : void 0;
         if (isCount) {
-          return /* @__PURE__ */ jsx28("div", { className: avatarStyles.groupCountWrap, style: { zIndex: z }, children: child }, `count-${index}`);
+          return /* @__PURE__ */ jsx28("div", { className: clsx36(avatarStyles.groupCountWrap, layout === "stack" && index > 0 && "-ms-[var(--avatar-stack-overlap)]"), style: { zIndex: z }, children: child }, `count-${index}`);
         }
-        return /* @__PURE__ */ jsx28("div", { className: avatarStyles.groupAvatarWrap, style: { zIndex: z }, children: child }, `avatar-${index}`);
+        return /* @__PURE__ */ jsx28("div", { className: clsx36(avatarStyles.groupAvatarWrap, layout === "stack" && index > 0 && "-ms-[var(--avatar-stack-overlap)]"), style: { zIndex: z }, children: child }, `avatar-${index}`);
       })
     }
   ) });
@@ -5591,14 +5628,23 @@ function Avatars({
         ...style
       },
       children: [
-        display.map((a, i) => /* @__PURE__ */ jsx29("div", { className: avatarsStyles.avatarWrap, style: isStack ? { zIndex: i } : void 0, children: /* @__PURE__ */ jsx29(Avatar, { src: a.src, alt: a.alt, size }) }, i)),
+        display.map((a, i) => /* @__PURE__ */ jsx29(
+          "div",
+          {
+            className: clsx37(avatarsStyles.avatarWrap, isStack && i > 0 && "-ms-[var(--avatar-stack-overlap)]"),
+            style: isStack ? { zIndex: i } : void 0,
+            children: /* @__PURE__ */ jsx29(Avatar, { src: a.src, alt: a.alt, size })
+          },
+          i
+        )),
         remainder > 0 && /* @__PURE__ */ jsxs10(
           "div",
           {
             className: clsx37(
               avatarsStyles.overflowCount,
               avatarsCountSizeBySize[normalizedSize],
-              avatarsCountTypoBySize[normalizedSize]
+              avatarsCountTypoBySize[normalizedSize],
+              isStack && display.length > 0 && "-ms-[var(--avatar-stack-overlap)]"
             ),
             style: isStack ? { zIndex: display.length } : void 0,
             children: [
@@ -5679,7 +5725,7 @@ var alertRecipe = defineSlotRecipe({
     "close"
   ],
   base: {
-    root: "box-border flex items-start border-refineui-thin border-refineui-alias-border-default px-refineui-size-large py-refineui-size-medium",
+    root: "box-border flex items-start rounded-[var(--refineui-radius-rounded-x-large)] border-refineui-thin border-refineui-alias-border-default px-refineui-size-large py-refineui-size-medium",
     icon: "relative box-border flex size-refineui-size-xx-large min-w-refineui-size-xx-large shrink-0 items-center justify-center overflow-hidden rounded-refineui-circle",
     content: "flex min-w-0 flex-1 flex-col gap-refineui-size-medium",
     row: "flex w-full flex-row items-start gap-refineui-size-medium",
@@ -6226,7 +6272,7 @@ import { clsx as clsx44 } from "clsx";
 
 // src/components/Spinner/style.ts
 var spinnerStyles = {
-  ringBase: "box-border rounded-refineui-circle border-solid border-refineui-alias-background-brand-subtle border-t-refineui-alias-background-brand",
+  ringBase: "box-border shrink-0 animate-spin rounded-refineui-circle border-solid border-refineui-alias-background-brand-subtle border-t-refineui-alias-background-brand [animation-duration:var(--refineui-motion-duration-spinner)] [animation-timing-function:var(--refineui-motion-easing-linear)]",
   label: "text-refineui-alias-foreground-primary",
   withLabel: "inline-flex items-center justify-center gap-refineui-size-x-small"
 };
@@ -6314,23 +6360,23 @@ var tabsStyles = {
   list: clsx45(
     "relative flex w-full min-w-0 flex-nowrap items-stretch overflow-x-auto",
     "after:pointer-events-none after:absolute after:inset-inline-0 after:bottom-0",
-    "after:h-(--refineui-stroke-width-thin) after:bg-refineui-alias-border-default"
+    "after:h-(--refineui-stroke-width-thin) after:bg-refineui-alias-border-default data-[ready=false]:[&_[data-refineui=tab][data-selected=true]]:after:block data-[ready=false]:[&_[data-refineui=tab][data-selected=true]]:after:h-(--refineui-stroke-width-thick) data-[ready=false]:[&_[data-refineui=tab][data-selected=true]]:after:bg-refineui-alias-background-brand"
   ),
   indicator: clsx45(
     "pointer-events-none absolute bottom-0 start-0 z-[1] block",
     "h-(--refineui-stroke-width-thick) bg-refineui-alias-background-brand",
-    "will-change-[transform,width]"
+    "will-change-[transform,width] opacity-0 data-[ready=true]:opacity-100 transition-none data-[animate=true]:transition-[transform,width] data-[animate=true]:duration-[var(--refineui-motion-duration-medium)] data-[animate=true]:ease-[var(--refineui-motion-easing-emphasized)] motion-reduce:transition-none"
   ),
   trigger: clsx45(
     componentTextClass(componentTypographyTokens.tabs),
     "relative z-[1] box-border inline-flex min-h-0 min-w-0 shrink-0 items-center justify-center",
     "gap-refineui-size-x-small border-none bg-transparent",
     "px-refineui-size-medium py-refineui-size-x-small outline-none",
-    "transition-colors duration-[var(--refineui-motion-duration-fast)] ease-[var(--refineui-motion-easing-ease-out)]"
+    "transition-colors duration-[var(--refineui-motion-duration-fast)] ease-[var(--refineui-motion-easing-ease-out)] active:transform-none"
   ),
   triggerDisabled: "cursor-not-allowed text-refineui-alias-foreground-disabled",
-  triggerEnabled: "cursor-pointer",
-  triggerSelectedEnabled: "text-refineui-alias-foreground-primary",
+  triggerEnabled: "cursor-pointer hover:text-refineui-alias-foreground-primary-hover",
+  triggerSelectedEnabled: "text-refineui-alias-foreground-primary hover:text-refineui-alias-foreground-primary",
   triggerSelectedDisabled: "text-refineui-alias-foreground-disabled",
   triggerUnselected: "text-refineui-alias-foreground-tertiary"
 };
@@ -6444,6 +6490,7 @@ function TabsList({ className, children, ...props }) {
     {
       ref: tabListRef,
       "data-refineui": "tabs-list",
+      "data-ready": indicator.ready ? "true" : "false",
       role: "tablist",
       "aria-orientation": "horizontal",
       className: clsx46(tabsStyles.list, className),
@@ -6603,19 +6650,19 @@ var segmentedControlRecipe = defineSlotRecipe({
        * so at narrow widths `overflow-hidden` would make trailing options
        * unreachable. Scrollbar chrome is suppressed in `refineui.css`.
        */
-      "overflow-x-auto overflow-y-hidden rounded-refineui-circle border-refineui-thin border-refineui-alias-border-default",
-      "bg-refineui-alias-background-brand-subtle"
+      "overflow-x-auto overflow-y-hidden rounded-refineui-circle border-refineui-thin border-refineui-alias-border-default [scrollbar-width:none] [&::-webkit-scrollbar]:hidden",
+      "bg-refineui-alias-background-brand-subtle data-[ready=false]:[&_[data-refineui=segmented-control-item][data-selected=true]]:bg-refineui-alias-background-brand data-[ready=false]:[&_[data-refineui=segmented-control-item][data-selected=true]]:shadow-refineui-2"
     ),
     indicator: clsx47(
-      "pointer-events-none absolute inset-y-0 start-0 z-0 block h-full",
+      "pointer-events-none absolute inset-y-0 start-0 z-0 block h-full opacity-0 data-[ready=true]:opacity-100",
       "rounded-refineui-circle bg-refineui-alias-background-brand shadow-refineui-2",
-      "will-change-[transform,width]"
+      "will-change-[transform,width] transition-none data-[animate=true]:transition-[transform,width] data-[animate=true]:duration-[var(--refineui-motion-duration-medium)] data-[animate=true]:ease-[var(--refineui-motion-easing-emphasized)] motion-reduce:transition-none"
     ),
     item: clsx47(
       componentTextClass(componentTypographyTokens.segmentedControl),
       "relative z-[1] box-border inline-flex min-h-0 min-w-0 shrink-0 items-center justify-center gap-refineui-size-xx-small",
       "rounded-refineui-circle border-none bg-transparent px-refineui-size-medium py-refineui-size-x-small outline-none",
-      "transition-colors duration-[var(--refineui-motion-duration-fast)] ease-[var(--refineui-motion-easing-ease-out)]"
+      "transition-colors duration-[var(--refineui-motion-duration-fast)] ease-[var(--refineui-motion-easing-ease-out)] active:transform-none"
     )
   }
 });
@@ -6624,7 +6671,7 @@ var segmentedControlStyles = {
   indicator: segmentedControlRecipe.base.indicator,
   item: segmentedControlRecipe.base.item,
   itemDisabled: "cursor-not-allowed text-refineui-alias-foreground-disabled",
-  itemEnabled: "cursor-pointer",
+  itemEnabled: "cursor-pointer hover:text-refineui-alias-foreground-primary",
   itemSelectedEnabled: "text-refineui-alias-foreground-on-brand",
   itemSelectedDisabled: "text-refineui-alias-foreground-disabled",
   itemUnselected: "text-refineui-alias-foreground-secondary"
@@ -6732,6 +6779,7 @@ function SegmentedControl({
     {
       ref: groupRef,
       "data-refineui": "segmented-control",
+      "data-ready": indicator.ready ? "true" : "false",
       role: "radiogroup",
       "aria-orientation": "horizontal",
       className: clsx48(segmentedControlStyles.root, className),
@@ -6854,14 +6902,14 @@ var tableStyles = {
     "relative box-border w-full min-w-0",
     "px-refineui-size-small pb-refineui-size-small"
   ),
-  table: "w-full caption-bottom border-separate text-start",
-  header: "",
+  table: "w-full border-separate border-spacing-y-refineui-size-xx-small caption-bottom text-start",
+  header: "[&_th]:bg-refineui-alias-background-surface-active [&_th]:shadow-[inset_0_calc(-1*var(--refineui-stroke-width-thin))_0_0_var(--refineui-color-alias-border-subtle)] [&_th:first-child]:rounded-s-refineui-large [&_th:last-child]:rounded-e-refineui-large",
   body: "",
-  footer: "",
+  footer: "[&_td]:bg-refineui-alias-background-surface-active [&_td]:font-medium [&_td]:text-refineui-alias-foreground-secondary [&_td:first-child]:rounded-s-refineui-large [&_td:last-child]:rounded-e-refineui-large",
   row: clsx49(
     "transition-[background-color,box-shadow,border-radius]",
     "duration-[var(--refineui-motion-duration-fast)]",
-    "ease-[var(--refineui-motion-easing-ease-out)]"
+    "ease-[var(--refineui-motion-easing-ease-out)] hover:[&>td]:bg-refineui-alias-background-surface-hover hover:[&>td:first-child]:rounded-s-refineui-large hover:[&>td:last-child]:rounded-e-refineui-large data-[state=selected]:[&>td]:bg-refineui-alias-background-surface-selected data-[state=selected]:[&>td:first-child]:rounded-s-refineui-large data-[state=selected]:[&>td:last-child]:rounded-e-refineui-large"
   ),
   head: clsx49(
     componentTextClass(componentTypographyTokens.table.head),
@@ -6947,7 +6995,7 @@ var accordionRecipe = defineSlotRecipe({
   base: {
     root: "flex flex-col gap-refineui-size-x-small",
     item: "overflow-hidden rounded-refineui-x-large transition-[background-color] duration-[var(--refineui-motion-duration-fast)]",
-    trigger: "flex min-h-refineui-control-touch-min w-full cursor-pointer items-center justify-between gap-refineui-size-medium rounded-refineui-x-large border-none bg-transparent px-refineui-size-medium py-refineui-size-x-small text-start text-refineui-alias-foreground-primary outline-none transition-[background-color,transform] duration-[var(--refineui-motion-duration-fast)]",
+    trigger: "flex min-h-refineui-control-touch-min w-full cursor-pointer items-center justify-between gap-refineui-size-medium rounded-refineui-x-large border-none bg-transparent px-refineui-size-medium py-refineui-size-x-small text-start text-refineui-alias-foreground-primary outline-none transition-[background-color,transform] duration-[var(--refineui-motion-duration-fast)] active:bg-refineui-alias-background-primary-active active:scale-[var(--refineui-motion-scale-press)]",
     triggerRow: "flex min-w-0 flex-1 items-center gap-refineui-size-medium",
     chevron: "shrink-0 transition-transform duration-[var(--refineui-motion-duration-fast)] ease-[var(--refineui-motion-easing-ease-out)]",
     panel: "min-h-0 overflow-hidden",
@@ -7224,13 +7272,13 @@ var breadcrumbStyles = {
   root: "py-refineui-size-x-small",
   list: "m-0 flex flex-wrap list-none items-center gap-refineui-size-medium p-0",
   item: "inline-flex items-center",
-  link: "box-border inline-flex min-h-refineui-button-min-height-sm items-center justify-center rounded-refineui-large px-refineui-size-medium py-refineui-size-x-small text-refineui-alias-foreground-tertiary no-underline outline-none transition-[color,background-color] duration-[var(--refineui-motion-duration-fast)]",
+  link: "box-border inline-flex min-h-refineui-button-min-height-sm items-center justify-center rounded-refineui-large px-refineui-size-medium py-refineui-size-x-small text-refineui-alias-foreground-tertiary no-underline outline-none transition-[color,background-color] duration-[var(--refineui-motion-duration-fast)] hover:bg-refineui-alias-background-primary-hover hover:text-refineui-alias-foreground-primary-hover active:bg-refineui-alias-background-primary-active focus-visible:outline-[length:var(--refineui-stroke-width-thick)] focus-visible:[outline-color:var(--refineui-focus-color)] focus-visible:[outline-offset:var(--refineui-focus-offset)]",
   page: "inline-flex items-center px-refineui-size-medium py-refineui-size-x-small font-medium text-refineui-alias-foreground-primary",
   separator: "inline-flex shrink-0 items-center",
   separatorText: "inline-flex items-center text-refineui-alias-foreground-tertiary select-none",
   ellipsis: `${ellipsisChip} text-refineui-alias-foreground-tertiary`,
   /** Color only — size/layout come from Button `layout="icon" size="sm"`. */
-  ellipsisTrigger: "text-refineui-alias-foreground-tertiary"
+  ellipsisTrigger: "text-refineui-alias-foreground-tertiary hover:bg-refineui-alias-background-primary-hover hover:text-refineui-alias-foreground-primary-hover active:bg-refineui-alias-background-primary-active focus-visible:outline-[length:var(--refineui-stroke-width-thick)] focus-visible:[outline-color:var(--refineui-focus-color)] focus-visible:[outline-offset:var(--refineui-focus-offset)]"
 };
 
 // src/components/Breadcrumb/Breadcrumb.tsx
@@ -7374,7 +7422,7 @@ var footerStyles = {
     "m-0 text-refineui-alias-foreground-tertiary"
   ),
   nav: clsx56(
-    "grid w-full items-start",
+    "grid w-full grid-cols-[repeat(auto-fit,minmax(var(--refineui-size-foundation-size-2000),1fr))] items-start",
     "gap-x-refineui-size-xxx-large gap-y-refineui-size-xx-large"
   ),
   group: "flex min-w-0 flex-col gap-refineui-size-large",
@@ -7386,7 +7434,7 @@ var footerStyles = {
     componentTextClass(componentTypographyTokens.footer.link),
     /** `min-h` carries the WCAG 2.2 Target Size (Minimum) 24px floor — the 20px line box alone is under it. */
     "box-border inline-flex w-fit min-h-refineui-foundation-size-240 cursor-pointer items-center",
-    "text-refineui-alias-foreground-tertiary no-underline outline-none",
+    "text-refineui-alias-foreground-tertiary no-underline outline-none hover:text-refineui-alias-foreground-primary focus-visible:outline-[length:var(--refineui-stroke-width-thick)] focus-visible:[outline-color:var(--refineui-focus-color)] focus-visible:[outline-offset:var(--refineui-focus-offset)] aria-disabled:pointer-events-none aria-disabled:cursor-not-allowed aria-disabled:!text-refineui-alias-foreground-disabled",
     "transition-[color] duration-[var(--refineui-motion-duration-fast)] ease-[var(--refineui-motion-easing-ease-out)]"
   ),
   meta: clsx56(
@@ -7395,11 +7443,15 @@ var footerStyles = {
     "md:grid-cols-[1fr_auto_1fr] md:justify-items-stretch md:gap-refineui-size-x-large"
   ),
   metaEnd: "flex shrink-0 items-center md:col-start-3 md:justify-self-end",
-  locale: "flex shrink-0 items-center",
+  locale: clsx56(
+    "flex shrink-0 items-center",
+    "[&_[data-refineui-select-trigger-value]]:inline-flex [&_[data-refineui-select-trigger-value]]:flex-none [&_[data-refineui-select-trigger-value]]:items-center [&_[data-refineui-select-trigger-value]]:gap-refineui-size-xx-small",
+    "[&_[data-refineui=select-trigger]]:hover:border-refineui-alias-border-strong [&_[data-refineui=select-trigger]]:active:border-refineui-alias-border-strong [&_[data-refineui=select-trigger][data-state=open]]:border-refineui-alias-border-strong"
+  ),
   localeLink: clsx56(
     componentTextClass(componentTypographyTokens.footer.copyright),
     "box-border inline-flex w-fit cursor-pointer items-center",
-    "text-refineui-alias-foreground-tertiary no-underline outline-none",
+    "text-refineui-alias-foreground-tertiary no-underline outline-none hover:text-refineui-alias-foreground-primary aria-[current]:text-refineui-alias-foreground-primary focus-visible:outline-[length:var(--refineui-stroke-width-thick)] focus-visible:[outline-color:var(--refineui-focus-color)] focus-visible:[outline-offset:var(--refineui-focus-offset)] aria-disabled:pointer-events-none aria-disabled:cursor-not-allowed aria-disabled:!text-refineui-alias-foreground-disabled",
     "transition-[color] duration-[var(--refineui-motion-duration-fast)] ease-[var(--refineui-motion-easing-ease-out)]"
   ),
   /** Select trigger chrome — Button `outline` / `sm` recipe (plain Select). */
@@ -7420,7 +7472,7 @@ var footerStyles = {
   /** Box is the 24px tap target; the glyph inside stays 16px (see `refineui.css`). */
   socialLink: clsx56(
     "box-border inline-flex size-refineui-foundation-size-240 shrink-0 cursor-pointer items-center justify-center",
-    "text-refineui-alias-foreground-tertiary no-underline outline-none",
+    "text-refineui-alias-foreground-tertiary no-underline outline-none hover:text-refineui-alias-foreground-primary focus-visible:outline-[length:var(--refineui-stroke-width-thick)] focus-visible:[outline-color:var(--refineui-focus-color)] focus-visible:[outline-offset:var(--refineui-focus-offset)] aria-disabled:pointer-events-none aria-disabled:cursor-not-allowed aria-disabled:!text-refineui-alias-foreground-disabled [&_svg]:block [&_svg]:size-refineui-foundation-size-160",
     "transition-[color] duration-[var(--refineui-motion-duration-fast)] ease-[var(--refineui-motion-easing-ease-out)]"
   )
 };
@@ -7602,7 +7654,7 @@ var calendarStyles = {
   grid7: "[grid-template-columns:repeat(7,var(--refineui-size-calendar-day-size))]",
   dayBase: clsx58(
     componentTextClass(componentTypographyTokens.calendar.day),
-    "box-border inline-flex size-refineui-calendar-day-size min-h-refineui-calendar-day-size min-w-refineui-calendar-day-size cursor-pointer items-center justify-center border-none p-0"
+    "box-border inline-flex size-refineui-calendar-day-size min-h-refineui-calendar-day-size min-w-refineui-calendar-day-size cursor-pointer items-center justify-center border-none p-0 hover:bg-refineui-alias-background-primary-hover hover:text-refineui-alias-foreground-primary-hover active:bg-refineui-alias-background-primary-active active:text-refineui-alias-foreground-primary active:scale-[var(--refineui-motion-scale-press)] disabled:cursor-not-allowed disabled:hover:bg-transparent disabled:hover:text-refineui-alias-foreground-disabled data-[inactive=true]:cursor-default data-[inactive=true]:hover:bg-transparent data-[inactive=true]:hover:text-refineui-alias-foreground-disabled"
   ),
   daySelected: "rounded-refineui-large bg-refineui-alias-background-brand text-refineui-alias-foreground-inversed",
   dayRangeMiddle: "rounded-refineui-none bg-refineui-alias-background-primary-hover text-refineui-alias-foreground-primary",
@@ -8411,7 +8463,7 @@ import { createPortal as createPortal3 } from "react-dom";
 import { semanticInteraction as semanticInteraction4 } from "@refineui/tokens";
 import { motionMsToNumber as motionMsToNumber2 } from "@refineui/utilities/animation";
 import { resolveColorTokenValue as resolveColorTokenValue6 } from "@refineui/utilities/color";
-import { acquireBodyScrollLock as acquireBodyScrollLock2 } from "@refineui/utilities/react";
+import { acquireBodyScrollLock } from "@refineui/utilities/react";
 
 // src/components/Drawer/style.ts
 import { clsx as clsx67 } from "clsx";
@@ -8420,7 +8472,7 @@ var drawerStyles = {
   inlineRoot: "relative z-auto flex",
   rootLeft: "justify-start",
   rootRight: "justify-end",
-  scrim: "absolute inset-0 cursor-pointer transition-opacity",
+  scrim: "absolute inset-0 cursor-pointer transition-opacity backdrop-blur-[var(--refineui-blur-overlay-scrim)]",
   panel: "relative box-border flex h-full flex-col overflow-hidden bg-refineui-alias-background-primary outline-none",
   panelOverlay: "shadow-refineui-16",
   panelInline: "shadow-none",
@@ -8585,7 +8637,7 @@ function DrawerContent({
   }, [open]);
   useEffect9(() => {
     if (!isOverlay || !rendering) return;
-    return acquireBodyScrollLock2();
+    return acquireBodyScrollLock();
   }, [isOverlay, rendering]);
   useEffect9(() => {
     if (!isOverlay || !rendering || !entered) return;
@@ -8775,13 +8827,16 @@ import { resolveColorTokenValue as resolveColorTokenValue7 } from "@refineui/uti
 
 // src/components/Dropdown/style.ts
 import { clsx as clsx69 } from "clsx";
-var dropdownPanelChrome = "box-border flex w-refineui-dropdown-menu-width min-w-refineui-dropdown-menu-width flex-col overflow-hidden rounded-refineui-xx-large border-refineui-hairline border-refineui-alias-border-default shadow-refineui-2 outline-none";
+var dropdownPanelChrome = "box-border flex w-refineui-dropdown-menu-width min-w-refineui-dropdown-menu-width flex-col overflow-hidden rounded-refineui-xx-large border-refineui-hairline border-refineui-alias-border-default bg-refineui-alias-surface-frosted shadow-refineui-2 outline-none backdrop-blur-refineui-surface-frost";
 var dropdownStyles = {
   menuShell: clsx69(
     dropdownPanelChrome,
     "max-w-[min(100vw-16px,calc(100vw-2rem))]"
   ),
-  submenuShell: dropdownPanelChrome,
+  submenuShell: clsx69(
+    dropdownPanelChrome,
+    "data-[state=open]:[animation:refineui-fade-enter_var(--refineui-motion-duration-fast)_var(--refineui-motion-easing-standard)] motion-reduce:animation-none"
+  ),
   menuViewport: "box-border flex flex-col gap-px p-refineui-size-xx-small",
   label: clsx69(
     componentTextClass(componentTypographyTokens.dropdown.label),
@@ -8789,7 +8844,7 @@ var dropdownStyles = {
   ),
   item: clsx69(
     componentTextClass(componentTypographyTokens.dropdown.item),
-    "flex w-full cursor-pointer items-center justify-between gap-refineui-size-x-small rounded-refineui-large border-none bg-transparent p-refineui-size-x-small text-start text-refineui-alias-foreground-primary outline-none disabled:cursor-not-allowed disabled:text-refineui-alias-foreground-disabled"
+    "flex w-full cursor-pointer items-center justify-between gap-refineui-size-x-small rounded-refineui-large border-none bg-transparent p-refineui-size-x-small text-start text-refineui-alias-foreground-primary outline-none transition-[background-color,transform] duration-[var(--refineui-motion-duration-fast)] hover:bg-refineui-alias-background-primary-hover hover:text-refineui-alias-foreground-primary-hover active:bg-refineui-alias-background-primary-active active:text-refineui-alias-foreground-primary data-[selected=true]:bg-refineui-alias-background-primary-hover data-[selected=true]:text-refineui-alias-foreground-primary data-[state=selected]:bg-refineui-alias-background-primary-hover data-[state=selected]:text-refineui-alias-foreground-primary data-[state=pressed]:bg-refineui-alias-background-primary-active data-[state=pressed]:text-refineui-alias-foreground-primary disabled:cursor-not-allowed disabled:text-refineui-alias-foreground-disabled"
   ),
   shortcut: clsx69(
     componentTextClass(componentTypographyTokens.dropdown.shortcut),
@@ -8798,7 +8853,7 @@ var dropdownStyles = {
 };
 
 // src/components/Dropdown/Dropdown.tsx
-import { Slot, acquireBodyScrollLock as acquireBodyScrollLock3, getMergeableTriggerChild } from "@refineui/utilities/react";
+import { Slot, acquireBodyScrollLock as acquireBodyScrollLock2, getMergeableTriggerChild } from "@refineui/utilities/react";
 
 // src/components/Dropdown/positioning.ts
 import { useEffect as useEffect10, useLayoutEffect as useLayoutEffect6 } from "react";
@@ -8954,7 +9009,7 @@ function Dropdown({
   }, [open]);
   useEffect11(() => {
     if (!open) return;
-    return acquireBodyScrollLock3();
+    return acquireBodyScrollLock2();
   }, [open]);
   return /* @__PURE__ */ jsx53(DropdownCtx.Provider, { value: ctx, children: /* @__PURE__ */ jsx53(
     "div",
@@ -9608,10 +9663,10 @@ import { iconSizes as iconSizes14 } from "@refineui/tokens";
 
 // src/components/Link/style.ts
 var linkStyles = {
-  base: componentTextClass(componentTypographyTokens.link),
+  base: `${componentTextClass(componentTypographyTokens.link)} text-refineui-alias-foreground-link no-underline transition-[color,text-decoration-color] duration-[var(--refineui-motion-duration-fast)] ease-[var(--refineui-motion-easing-ease-out)] visited:text-refineui-alias-foreground-link-visited hover:text-refineui-alias-foreground-link-hover hover:underline hover:decoration-current hover:underline-offset-refineui-size-xx-small focus-visible:text-refineui-alias-foreground-link-active focus-visible:underline focus-visible:decoration-current focus-visible:underline-offset-refineui-size-xx-small active:text-refineui-alias-foreground-link-visited active:underline active:decoration-current active:underline-offset-refineui-size-xx-small focus-visible:outline-[length:var(--refineui-stroke-width-thick)] focus-visible:[outline-color:var(--refineui-focus-color)] focus-visible:[outline-offset:var(--refineui-focus-offset)]`,
   withIcon: "inline-flex items-center gap-refineui-size-xx-small",
   inline: "inline",
-  disabled: "cursor-not-allowed"
+  disabled: "pointer-events-none cursor-not-allowed !text-refineui-alias-foreground-disabled !no-underline"
 };
 
 // src/components/Link/Link.tsx
@@ -9667,18 +9722,18 @@ import { Slot as Slot2, getMergeableTriggerChild as getMergeableTriggerChild2 }
 
 // src/components/Menu/style.ts
 import { clsx as clsx75 } from "clsx";
-var menuPanelChrome = "box-border flex flex-col gap-px overflow-hidden rounded-refineui-xx-large border-refineui-hairline border-refineui-alias-border-default p-refineui-size-xx-small shadow-refineui-2";
+var menuPanelChrome = "box-border flex flex-col gap-px overflow-hidden rounded-refineui-xx-large border-refineui-hairline border-refineui-alias-border-default bg-refineui-alias-surface-frosted p-refineui-size-xx-small shadow-refineui-2 backdrop-blur-refineui-surface-frost";
 var menuStyles = {
   /** Panel chrome — Web Kit Menu `633:4268` (fill/blur: `surfaceFrosted` + `surfaceFrost`) */
   panel: clsx75(menuPanelChrome, "w-refineui-menu-panel-width"),
   root: "relative inline-flex items-center leading-none",
   triggerFallback: "cursor-pointer border-none bg-transparent p-0 font-inherit text-inherit",
   /** Portal shell — position/z-index from `MenuPopover` fixed style */
-  popover: "z-refineui-messages",
+  popover: "z-refineui-messages data-[state=open]:[animation:refineui-fade-enter_var(--refineui-motion-duration-normal)_var(--refineui-motion-easing-standard)] data-[state=closed]:pointer-events-none data-[state=closed]:[animation:refineui-fade-exit_var(--refineui-motion-duration-normal)_var(--refineui-motion-easing-standard)] motion-reduce:animation-none",
   list: clsx75(menuPanelChrome, "w-full min-w-refineui-menu-panel-width outline-none"),
   subPanel: clsx75(
     menuPanelChrome,
-    "w-refineui-menu-panel-width min-w-refineui-menu-panel-width outline-none"
+    "w-refineui-menu-panel-width min-w-refineui-menu-panel-width outline-none data-[state=open]:[animation:refineui-fade-enter_var(--refineui-motion-duration-fast)_var(--refineui-motion-easing-standard)] motion-reduce:animation-none"
   ),
   /** Vertical density matches Sidebar `groupLabel` (`py-xxx-small`). */
   section: "flex w-full items-center overflow-hidden px-refineui-size-x-small py-refineui-size-xxx-small",
@@ -9688,7 +9743,7 @@ var menuStyles = {
   ),
   dividerWrap: "flex w-full items-center px-refineui-size-x-small py-refineui-size-xxx-small",
   dividerLine: "h-px w-full shrink-0 bg-refineui-alias-border-default",
-  itemBase: "block w-full rounded-refineui-large border-none bg-transparent p-refineui-size-x-small text-start outline-none",
+  itemBase: "block w-full rounded-refineui-large border-none bg-transparent p-refineui-size-x-small text-start outline-none transition-[background-color,transform] duration-[var(--refineui-motion-duration-fast)] hover:bg-refineui-alias-background-primary-hover hover:text-refineui-alias-foreground-primary-hover active:bg-refineui-alias-background-primary-active active:text-refineui-alias-foreground-primary active:scale-[var(--refineui-motion-scale-press)] data-[state=hover]:bg-refineui-alias-background-primary-hover data-[state=hover]:text-refineui-alias-foreground-primary-hover data-[state=pressed]:bg-refineui-alias-background-primary-active data-[state=pressed]:text-refineui-alias-foreground-primary data-[state=active]:bg-refineui-alias-background-primary-hover data-[state=active]:text-refineui-alias-foreground-primary data-[state=disabled]:bg-transparent data-[state=disabled]:text-refineui-alias-foreground-disabled",
   itemDisabled: "cursor-not-allowed text-refineui-alias-foreground-disabled",
   itemEnabled: "cursor-pointer text-refineui-alias-foreground-primary",
   row: "flex items-center gap-refineui-size-x-small",
@@ -10290,7 +10345,7 @@ var topLevelItem = clsx77(
   componentTextClass(componentTypographyTokens.navigationMenu.trigger),
   "box-border inline-flex h-refineui-button-min-height-md min-w-refineui-navigation-menu-item-min-width cursor-pointer items-center justify-center gap-refineui-size-x-small",
   "rounded-refineui-x-large border-none bg-transparent px-refineui-size-medium py-refineui-size-x-small",
-  "text-refineui-alias-foreground-tertiary outline-none leading-none",
+  "text-refineui-alias-foreground-primary outline-none leading-none",
   "transition-[color,background-color,box-shadow] duration-[var(--refineui-motion-duration-fast)] ease-[var(--refineui-motion-easing-ease-out)]"
 );
 var chevron = clsx77(
@@ -10300,22 +10355,52 @@ var navigationMenuStyles = {
   root: "relative isolate z-refineui-messages flex w-full max-w-max items-center",
   list: "relative m-0 flex list-none flex-wrap items-center gap-refineui-size-xxx-small p-0",
   item: "relative inline-flex items-center",
-  trigger: clsx77(topLevelItem, "m-0 appearance-none font-inherit"),
+  trigger: clsx77(topLevelItem, "m-0 appearance-none font-inherit hover:bg-refineui-alias-background-primary-hover hover:text-refineui-alias-foreground-primary-hover active:bg-refineui-alias-background-primary-active active:text-refineui-alias-foreground-primary focus-visible:outline-[length:var(--refineui-stroke-width-thick)] focus-visible:[outline-color:var(--refineui-focus-color)] focus-visible:[outline-offset:var(--refineui-focus-offset)]"),
   triggerOpen: "bg-refineui-alias-background-primary-hover text-refineui-alias-foreground-primary",
   triggerDisabled: "cursor-not-allowed text-refineui-alias-foreground-disabled",
   chevron,
   chevronOpen: "rotate-180",
   content: clsx77(
-    /** Flush under trigger so pointer does not leave the item while moving into the panel. */
-    "absolute start-0 top-full z-refineui-messages pt-refineui-size-xx-small",
-    "box-border min-w-refineui-navigation-menu-panel-width",
-    "outline-none"
+    "box-border outline-none",
+    "transition-opacity duration-[var(--refineui-motion-duration-fast)] ease-[var(--refineui-motion-easing-ease-out)]"
+  ),
+  /** Default compact panel, anchored to the triggering navigation item. */
+  contentDropdown: "min-w-refineui-dropdown-menu-width",
+  /**
+   * Wide, viewport-aware panel. Width and inner composition stay with the
+   * consuming navigation so this remains a content-agnostic primitive.
+   */
+  contentFloating: clsx77(
+    "max-w-full origin-top will-change-[opacity,translate]",
+    "transition-[opacity,translate] duration-[var(--refineui-motion-duration-normal)] ease-[var(--refineui-motion-easing-emphasized)]"
+  ),
+  /** Header-connected, full-width product navigation surface. */
+  contentOverlay: clsx77(
+    "fixed inset-x-0 bottom-0 origin-top"
   ),
-  contentPanel: clsx77(
-    "box-border flex flex-col gap-px overflow-hidden rounded-refineui-xx-large border-refineui-hairline border-refineui-alias-border-default",
-    "p-refineui-size-xx-small shadow-refineui-2"
+  /** Optional boundary for demos and embedded navigation experiences. */
+  contentContained: "absolute",
+  contentOverlayContained: "absolute inset-x-0 bottom-0",
+  overlayBackdrop: clsx77(
+    "absolute inset-0 bg-refineui-alias-surface-overlay",
+    "transition-[opacity,backdrop-filter] duration-[var(--refineui-motion-duration-panel)] ease-[var(--refineui-motion-easing-panel)]"
   ),
-  link: clsx77(topLevelItem, "no-underline"),
+  overlayBackdropEnter: "[animation:refineui-navigation-overlay-backdrop-enter_var(--refineui-motion-duration-panel)_var(--refineui-motion-easing-panel)_both] motion-reduce:animation-none",
+  overlayBackdropExit: "[animation:refineui-navigation-overlay-backdrop-exit_var(--refineui-motion-duration-panel)_var(--refineui-motion-easing-panel)_both] motion-reduce:animation-none",
+  contentPanel: "box-border flex flex-col gap-px overflow-hidden rounded-refineui-xx-large border-refineui-hairline border-refineui-alias-border-default p-refineui-size-xx-small shadow-refineui-2",
+  /** Compact dropdowns retain the Menu's translucent frosted material. */
+  contentPanelDropdown: "bg-refineui-alias-surface-frosted backdrop-blur-refineui-surface-frost",
+  /** Wide panels prioritize readable product navigation over glass transparency. */
+  contentPanelFloating: clsx77(
+    "bg-refineui-alias-background-primary backdrop-blur-refineui-surface-frost"
+  ),
+  contentPanelOverlay: clsx77(
+    "relative flex w-full justify-center overflow-hidden rounded-none border-x-0 border-b-refineui-hairline border-t-0 p-0 border-refineui-alias-border-default bg-refineui-alias-background-primary shadow-refineui-2",
+    "transition-[height,opacity] duration-[var(--refineui-motion-duration-panel)] ease-[var(--refineui-motion-easing-panel)]",
+    "data-[state=open]:[animation:refineui-navigation-overlay-enter_var(--refineui-motion-duration-panel)_var(--refineui-motion-easing-panel)_both] motion-reduce:animation-none"
+  ),
+  contentPanelOverlayExit: "[animation:refineui-navigation-overlay-exit_var(--refineui-motion-duration-panel)_var(--refineui-motion-easing-panel)_both] motion-reduce:animation-none",
+  link: clsx77(topLevelItem, "no-underline hover:bg-refineui-alias-background-primary-hover hover:text-refineui-alias-foreground-primary-hover active:bg-refineui-alias-background-primary-active active:text-refineui-alias-foreground-primary focus-visible:outline-[length:var(--refineui-stroke-width-thick)] focus-visible:[outline-color:var(--refineui-focus-color)] focus-visible:[outline-offset:var(--refineui-focus-offset)] aria-disabled:pointer-events-none"),
   linkActive: "bg-refineui-alias-background-primary-hover text-refineui-alias-foreground-primary",
   linkDisabled: "cursor-not-allowed text-refineui-alias-foreground-disabled",
   /** Dense row inside a content panel — same density as Menu item. */
@@ -10324,7 +10409,7 @@ var navigationMenuStyles = {
     "box-border flex w-full cursor-pointer items-center gap-refineui-size-x-small",
     "rounded-refineui-large border-none bg-transparent p-refineui-size-x-small text-start no-underline outline-none",
     "text-refineui-alias-foreground-primary",
-    "transition-[background-color,color] duration-[var(--refineui-motion-duration-fast)] ease-[var(--refineui-motion-easing-ease-out)]"
+    "transition-[background-color,color] duration-[var(--refineui-motion-duration-fast)] ease-[var(--refineui-motion-easing-ease-out)] hover:bg-refineui-alias-background-primary-hover hover:text-refineui-alias-foreground-primary-hover active:bg-refineui-alias-background-primary-active active:text-refineui-alias-foreground-primary aria-disabled:pointer-events-none"
   ),
   /** Optional — prefer omitting; kept for API compatibility. */
   indicator: "hidden"
@@ -10374,12 +10459,17 @@ function NavigationMenu({
   ...props
 }) {
   const [value, setValue] = useControllableOpen(valueControlled, defaultValue, onValueChange);
+  const idPrefix = `refineui-nav-menu-${useId12().replaceAll(":", "")}`;
   const listRef = useRef15(null);
   const triggerMapRef = useRef15(/* @__PURE__ */ new Map());
   const contentMapRef = useRef15(/* @__PURE__ */ new Map());
   const openTimerRef = useRef15(null);
   const closeTimerRef = useRef15(null);
+  const switchTimerRef = useRef15(null);
   const rootRef = useRef15(null);
+  const [isSwitching, setIsSwitching] = useState18(false);
+  const overlayContentRef = useRef15(/* @__PURE__ */ new Map());
+  const [overlayVersion, setOverlayVersion] = useState18(0);
   const delayDuration = delayDurationProp ?? motionMsToNumber4(semanticInteraction6.duration.normal);
   const skipDelayDuration = skipDelayDurationProp ?? motionMsToNumber4(semanticInteraction6.duration.fast);
   const clearTimers = useCallback14(() => {
@@ -10395,24 +10485,36 @@ function NavigationMenu({
   const setValueSafe = useCallback14(
     (next) => {
       clearTimers();
+      if (switchTimerRef.current != null) {
+        window.clearTimeout(switchTimerRef.current);
+        switchTimerRef.current = null;
+      }
+      const switching = Boolean(value && next && value !== next);
+      setIsSwitching(switching);
+      if (switching) {
+        switchTimerRef.current = window.setTimeout(() => {
+          setIsSwitching(false);
+          switchTimerRef.current = null;
+        }, motionMsToNumber4(semanticInteraction6.duration.normal));
+      }
       setValue(next);
     },
-    [clearTimers, setValue]
+    [clearTimers, setValue, value]
   );
   const openItem = useCallback14(
     (itemValue, options) => {
       clearTimers();
       const delay = options?.immediate || value !== "" ? skipDelayDuration : delayDuration;
       if (delay <= 0 || options?.immediate) {
-        setValue(itemValue);
+        setValueSafe(itemValue);
         return;
       }
       openTimerRef.current = window.setTimeout(() => {
-        setValue(itemValue);
+        setValueSafe(itemValue);
         openTimerRef.current = null;
       }, delay);
     },
-    [clearTimers, delayDuration, setValue, skipDelayDuration, value]
+    [clearTimers, delayDuration, setValueSafe, skipDelayDuration, value]
   );
   const close = useCallback14(
     (options) => {
@@ -10442,6 +10544,36 @@ function NavigationMenu({
       contentMapRef.current.delete(itemValue);
     }
   }, []);
+  const registerOverlayContent = useCallback14((itemValue, content) => {
+    overlayContentRef.current.set(itemValue, content);
+    setOverlayVersion((version) => version + 1);
+  }, []);
+  const unregisterOverlayContent = useCallback14((itemValue) => {
+    if (!overlayContentRef.current.delete(itemValue)) return;
+    setOverlayVersion((version) => version + 1);
+  }, []);
+  const getOverlayContent = useCallback14(
+    (itemValue) => overlayContentRef.current.get(itemValue),
+    []
+  );
+  const focusFirstContent = useCallback14((itemValue) => {
+    const focus = () => {
+      const content = contentMapRef.current.get(itemValue);
+      const firstFocusable = content?.querySelector(
+        'a[href]:not([aria-disabled="true"]), button:not(:disabled), [tabindex]:not([tabindex="-1"])'
+      );
+      if (firstFocusable) {
+        firstFocusable.focus();
+        return;
+      }
+      requestAnimationFrame(() => {
+        contentMapRef.current.get(itemValue)?.querySelector(
+          'a[href]:not([aria-disabled="true"]), button:not(:disabled), [tabindex]:not([tabindex="-1"])'
+        )?.focus();
+      });
+    };
+    requestAnimationFrame(focus);
+  }, []);
   const isContentTarget = useCallback14((itemValue, target) => {
     return target instanceof Node && contentMapRef.current.get(itemValue)?.contains(target) === true;
   }, []);
@@ -10449,7 +10581,10 @@ function NavigationMenu({
     if (!(target instanceof Node)) return false;
     return rootRef.current?.contains(target) === true || Array.from(contentMapRef.current.values()).some((content) => content.contains(target));
   }, []);
-  useEffect13(() => () => clearTimers(), [clearTimers]);
+  useEffect13(() => () => {
+    clearTimers();
+    if (switchTimerRef.current != null) window.clearTimeout(switchTimerRef.current);
+  }, [clearTimers]);
   useEffect13(() => {
     if (!value) return;
     const onPointerDown = (event) => {
@@ -10478,19 +10613,31 @@ function NavigationMenu({
       close,
       delayDuration,
       skipDelayDuration,
+      idPrefix,
       listRef,
       registerTrigger,
       registerContent,
+      focusFirstContent,
       isContentTarget,
       isMenuTarget,
-      isInsideContent: false
+      isInsideContent: false,
+      isSwitching,
+      registerOverlayContent,
+      unregisterOverlayContent,
+      getOverlayContent
     }),
     [
       close,
       delayDuration,
       isContentTarget,
       isMenuTarget,
+      isSwitching,
+      registerOverlayContent,
+      unregisterOverlayContent,
+      getOverlayContent,
+      idPrefix,
       openItem,
+      focusFirstContent,
       registerContent,
       registerTrigger,
       setValueSafe,
@@ -10498,7 +10645,7 @@ function NavigationMenu({
       value
     ]
   );
-  return /* @__PURE__ */ jsx59(NavigationMenuContext.Provider, { value: ctx, children: /* @__PURE__ */ jsx59(
+  return /* @__PURE__ */ jsx59(NavigationMenuContext.Provider, { value: ctx, children: /* @__PURE__ */ jsxs23(
     "nav",
     {
       ref: rootRef,
@@ -10506,7 +10653,10 @@ function NavigationMenu({
       "aria-label": ariaLabel,
       className: clsx78(navigationMenuStyles.root, className),
       ...props,
-      children
+      children: [
+        children,
+        /* @__PURE__ */ jsx59(NavigationMenuOverlayViewport, { version: overlayVersion })
+      ]
     }
   ) });
 }
@@ -10558,8 +10708,8 @@ function NavigationMenuItem({
   const reactId = useId12();
   const value = valueProp ?? reactId;
   const open = menu.value === value;
-  const triggerId = `refineui-nav-menu-trigger-${value}`;
-  const contentId = `refineui-nav-menu-content-${value}`;
+  const triggerId = `${menu.idPrefix}-trigger-${value}`;
+  const contentId = `${menu.idPrefix}-content-${value}`;
   const itemCtx = useMemo14(
     () => ({ value, open, triggerId, contentId }),
     [contentId, open, triggerId, value]
@@ -10646,9 +10796,10 @@ function NavigationMenuTrigger({
           } else {
             menu.openItem(item.value, { immediate: true });
           }
-        } else if (event.key === "ArrowDown" && !item.open) {
+        } else if (event.key === "ArrowDown") {
           event.preventDefault();
           menu.openItem(item.value, { immediate: true });
+          menu.focusFirstContent(item.value);
         }
       },
       ...props,
@@ -10670,9 +10821,44 @@ function NavigationMenuTrigger({
     }
   );
 }
-function NavigationMenuContent({
+function NavigationMenuContent(props) {
+  return props.layout === "overlay" ? /* @__PURE__ */ jsx59(NavigationMenuOverlayContent, { ...props }) : /* @__PURE__ */ jsx59(NavigationMenuContentPanel, { ...props });
+}
+function NavigationMenuOverlayContent({
+  children,
+  className,
+  portalContainer,
+  onKeyDown,
+  style
+}) {
+  const menu = useNavigationMenu("NavigationMenuContent");
+  const item = useNavigationMenuItem("NavigationMenuContent");
+  const { registerOverlayContent, unregisterOverlayContent } = menu;
+  const registrationRef = useRef15({
+    children,
+    className,
+    portalContainer,
+    onKeyDown,
+    style
+  });
+  registrationRef.current = {
+    children,
+    className,
+    portalContainer,
+    onKeyDown,
+    style
+  };
+  useEffect13(() => {
+    registerOverlayContent(item.value, registrationRef.current);
+    return () => unregisterOverlayContent(item.value);
+  }, [item.value, registerOverlayContent, unregisterOverlayContent]);
+  return null;
+}
+function NavigationMenuContentPanel({
   children,
   className,
+  layout = "dropdown",
+  portalContainer,
   onKeyDown,
   style,
   ...props
@@ -10701,9 +10887,11 @@ function NavigationMenuContent({
     const timeout = window.setTimeout(() => {
       setShouldRender(false);
       setIsClosing(false);
-    }, motionMsToNumber4(semanticInteraction6.duration.fast));
+    }, motionMsToNumber4(
+      layout === "overlay" ? semanticInteraction6.duration.normal : semanticInteraction6.duration.fast
+    ));
     return () => window.clearTimeout(timeout);
-  }, [item.open, shouldRender]);
+  }, [item.open, layout, menu.isSwitching]);
   useIsomorphicLayoutEffect5(() => {
     if (!shouldRender || !item.open || typeof document === "undefined") return;
     const trigger = document.getElementById(item.triggerId);
@@ -10713,14 +10901,21 @@ function NavigationMenuContent({
       if (!content2) return;
       const triggerRect = trigger.getBoundingClientRect();
       const contentWidth = content2.offsetWidth;
+      const portalRect = portalContainer?.getBoundingClientRect();
+      const boundaryWidth = portalRect?.width ?? window.innerWidth;
       const edge = Number.parseFloat(spacings4.sizeMedium) || 8;
-      const left = Math.max(
-        edge,
-        Math.min(triggerRect.left, window.innerWidth - contentWidth - edge)
-      );
+      const floatingOffset = Number.parseFloat(spacings4.sizeXXSmall) || 4;
+      const left = layout === "floating" ? Math.max(edge, Math.min((boundaryWidth - contentWidth) / 2, boundaryWidth - contentWidth - edge)) : Math.max(edge, Math.min(triggerRect.left - (portalRect?.left ?? 0), boundaryWidth - contentWidth - edge));
+      if (layout === "overlay") {
+        setPositionStyle({
+          top: portalRect ? triggerRect.bottom - portalRect.top : triggerRect.bottom,
+          zIndex: Number.parseInt(String(zIndex3.zIndexMessages), 10) || 1e4
+        });
+        return;
+      }
       setPositionStyle({
-        position: "fixed",
-        top: triggerRect.bottom,
+        position: portalRect ? "absolute" : "fixed",
+        top: triggerRect.bottom + (layout === "floating" ? floatingOffset : 0) - (portalRect?.top ?? 0),
         left,
         zIndex: Number.parseInt(String(zIndex3.zIndexMessages), 10) || 1e4
       });
@@ -10734,13 +10929,13 @@ function NavigationMenuContent({
       window.removeEventListener("resize", updatePosition);
       unsubscribe();
     };
-  }, [item.open, item.triggerId, shouldRender]);
+  }, [item.open, item.triggerId, layout, portalContainer, shouldRender]);
   const contentCtx = useMemo14(
     () => ({ ...menu, isInsideContent: true }),
     [menu]
   );
   if (!shouldRender) return null;
-  const content = /* @__PURE__ */ jsx59(NavigationMenuContext.Provider, { value: contentCtx, children: /* @__PURE__ */ jsx59(
+  const content = /* @__PURE__ */ jsx59(NavigationMenuContext.Provider, { value: contentCtx, children: /* @__PURE__ */ jsxs23(
     "div",
     {
       ref: setContentRef,
@@ -10748,8 +10943,15 @@ function NavigationMenuContent({
       role: "region",
       "aria-labelledby": item.triggerId,
       "data-refineui": "navigation-menu-content",
+      "data-layout": layout,
       "data-state": isClosing || !item.open ? "closed" : "open",
-      className: clsx78(navigationMenuStyles.content, className),
+      className: clsx78(
+        navigationMenuStyles.content,
+        layout === "overlay" ? portalContainer ? navigationMenuStyles.contentOverlayContained : navigationMenuStyles.contentOverlay : layout === "floating" ? navigationMenuStyles.contentFloating : navigationMenuStyles.contentDropdown,
+        layout !== "overlay" && portalContainer && navigationMenuStyles.contentContained,
+        isClosing || !item.open ? layout === "overlay" ? "pointer-events-none" : layout === "floating" ? "pointer-events-none translate-y-refineui-size-x-small opacity-0" : "pointer-events-none opacity-0" : layout === "floating" ? "translate-y-0 opacity-100" : "opacity-100",
+        className
+      ),
       style: { ...positionStyle, ...style },
       onPointerEnter: () => menu.openItem(item.value, { immediate: true }),
       onPointerLeave: (event) => {
@@ -10762,13 +10964,226 @@ function NavigationMenuContent({
         if (event.key === "Escape") {
           event.preventDefault();
           menu.setValue("");
+          document.getElementById(item.triggerId)?.focus();
         }
       },
       ...props,
-      children: /* @__PURE__ */ jsx59("div", { "data-refineui": "navigation-menu-content-panel", className: navigationMenuStyles.contentPanel, children })
+      children: [
+        layout === "overlay" ? /* @__PURE__ */ jsx59(
+          "div",
+          {
+            "aria-hidden": true,
+            "data-state": isClosing || !item.open ? "closed" : "open",
+            className: clsx78(
+              navigationMenuStyles.overlayBackdrop,
+              isClosing || !item.open ? "backdrop-blur-none opacity-0" : "backdrop-blur-[var(--refineui-blur-overlay-scrim)] opacity-100",
+              !menu.isSwitching && item.open ? navigationMenuStyles.overlayBackdropEnter : void 0,
+              isClosing && !menu.isSwitching ? navigationMenuStyles.overlayBackdropExit : void 0
+            ),
+            onPointerDown: (event) => {
+              event.preventDefault();
+              menu.setValue("");
+            },
+            onPointerEnter: () => menu.close()
+          }
+        ) : null,
+        /* @__PURE__ */ jsx59(
+          "div",
+          {
+            "data-refineui": "navigation-menu-content-panel",
+            "data-layout": layout,
+            "data-state": isClosing || !item.open ? "closed" : "open",
+            className: clsx78(
+              layout === "overlay" ? navigationMenuStyles.contentPanelOverlay : navigationMenuStyles.contentPanel,
+              layout === "overlay" ? void 0 : layout === "floating" ? navigationMenuStyles.contentPanelFloating : navigationMenuStyles.contentPanelDropdown,
+              layout === "overlay" && (isClosing || !item.open) ? "translate-y-refineui-size-xxx-small opacity-0" : void 0,
+              layout === "overlay" && isClosing && !menu.isSwitching ? navigationMenuStyles.contentPanelOverlayExit : void 0
+            ),
+            children
+          }
+        )
+      ]
+    }
+  ) });
+  return typeof document === "undefined" ? content : createPortal6(content, portalContainer ?? document.body);
+}
+function NavigationMenuOverlayViewport({ version: _version }) {
+  const menu = useNavigationMenu("NavigationMenuContent");
+  const [presentValue, setPresentValue] = useState18(menu.value);
+  const [isClosing, setIsClosing] = useState18(false);
+  const [positionStyle, setPositionStyle] = useState18(null);
+  const [panelHeight, setPanelHeight] = useState18(null);
+  const rootRef = useRef15(null);
+  const innerRef = useRef15(null);
+  const heightRef = useRef15(null);
+  const heightTimerRef = useRef15(null);
+  const isClosingRef = useRef15(false);
+  const registration = presentValue ? menu.getOverlayContent(presentValue) : void 0;
+  useIsomorphicLayoutEffect5(() => {
+    if (menu.value) {
+      isClosingRef.current = false;
+      setPresentValue(menu.value);
+      setIsClosing(false);
+      return;
+    }
+    if (!presentValue) return;
+    isClosingRef.current = true;
+    setIsClosing(true);
+    if (heightTimerRef.current != null) {
+      window.clearTimeout(heightTimerRef.current);
+      heightTimerRef.current = null;
+    }
+    const currentHeight = innerRef.current?.scrollHeight ?? heightRef.current;
+    let frame;
+    let settleFrame;
+    if (currentHeight != null) {
+      setPanelHeight(currentHeight);
+      frame = requestAnimationFrame(() => {
+        settleFrame = requestAnimationFrame(() => setPanelHeight(0));
+      });
+    }
+    const timeout = window.setTimeout(() => {
+      setPresentValue("");
+      setIsClosing(false);
+      setPanelHeight(null);
+      heightRef.current = null;
+      isClosingRef.current = false;
+    }, motionMsToNumber4(semanticInteraction6.duration.panel));
+    return () => {
+      if (frame != null) cancelAnimationFrame(frame);
+      if (settleFrame != null) cancelAnimationFrame(settleFrame);
+      window.clearTimeout(timeout);
+    };
+  }, [menu.value, presentValue]);
+  useIsomorphicLayoutEffect5(() => {
+    if (!presentValue || !registration || typeof document === "undefined") return;
+    const trigger = document.getElementById(`${menu.idPrefix}-trigger-${CSS.escape(presentValue)}`);
+    if (!trigger) return;
+    const updatePosition = () => {
+      const triggerRect = trigger.getBoundingClientRect();
+      const portalRect = registration.portalContainer?.getBoundingClientRect();
+      const headerBottom = trigger.closest("header")?.getBoundingClientRect().bottom;
+      const overlayTop = headerBottom ?? triggerRect.bottom;
+      setPositionStyle({
+        top: portalRect ? overlayTop - portalRect.top : overlayTop,
+        zIndex: Number.parseInt(String(zIndex3.zIndexMessages), 10) || 1e4
+      });
+    };
+    updatePosition();
+    window.addEventListener("resize", updatePosition);
+    const unsubscribe = subscribeScrollAndScrollableAncestors2(trigger, updatePosition);
+    return () => {
+      window.removeEventListener("resize", updatePosition);
+      unsubscribe();
+    };
+  }, [presentValue, registration]);
+  useIsomorphicLayoutEffect5(() => {
+    if (!presentValue || !innerRef.current) return;
+    const nextHeight = innerRef.current.scrollHeight;
+    const previousHeight = heightRef.current;
+    heightRef.current = nextHeight;
+    if (previousHeight === nextHeight) {
+      setPanelHeight(null);
+      return;
+    }
+    if (heightTimerRef.current != null) window.clearTimeout(heightTimerRef.current);
+    setPanelHeight(previousHeight ?? 0);
+    let settleFrame;
+    const frame = requestAnimationFrame(() => {
+      settleFrame = requestAnimationFrame(() => setPanelHeight(nextHeight));
+    });
+    heightTimerRef.current = window.setTimeout(
+      () => {
+        if (!isClosingRef.current) setPanelHeight(null);
+      },
+      motionMsToNumber4(semanticInteraction6.duration.panel)
+    );
+    return () => {
+      cancelAnimationFrame(frame);
+      if (settleFrame != null) cancelAnimationFrame(settleFrame);
+      if (heightTimerRef.current != null) window.clearTimeout(heightTimerRef.current);
+    };
+  }, [presentValue, registration?.children]);
+  useEffect13(() => {
+    menu.registerContent(presentValue, rootRef.current);
+    return () => menu.registerContent(presentValue, null);
+  }, [menu, presentValue]);
+  useEffect13(() => {
+    if (!presentValue || typeof document === "undefined") return;
+    const trigger = document.getElementById(`${menu.idPrefix}-trigger-${CSS.escape(presentValue)}`);
+    const header = trigger?.closest("header");
+    if (!header) return;
+    header.setAttribute("data-refineui-navigation-menu-overlay-open", "");
+    return () => header.removeAttribute("data-refineui-navigation-menu-overlay-open");
+  }, [presentValue]);
+  if (!presentValue || !registration) return null;
+  const state = isClosing ? "closed" : "open";
+  const contentCtx = { ...menu, isInsideContent: true };
+  const root = /* @__PURE__ */ jsx59(NavigationMenuContext.Provider, { value: contentCtx, children: /* @__PURE__ */ jsxs23(
+    "div",
+    {
+      ref: rootRef,
+      id: `${menu.idPrefix}-content-${presentValue}`,
+      role: "region",
+      "aria-labelledby": `${menu.idPrefix}-trigger-${presentValue}`,
+      "data-refineui": "navigation-menu-content",
+      "data-layout": "overlay",
+      "data-state": state,
+      className: clsx78(
+        registration.portalContainer ? navigationMenuStyles.contentOverlayContained : navigationMenuStyles.contentOverlay,
+        isClosing && "pointer-events-none",
+        registration.className
+      ),
+      style: { ...positionStyle, ...registration.style },
+      onPointerEnter: () => menu.openItem(presentValue, { immediate: true }),
+      onPointerLeave: (event) => {
+        if (menu.isMenuTarget(event.relatedTarget)) return;
+        menu.close();
+      },
+      onKeyDown: (event) => {
+        registration.onKeyDown?.(event);
+        if (event.defaultPrevented || event.key !== "Escape") return;
+        event.preventDefault();
+        menu.setValue("");
+        document.getElementById(`${menu.idPrefix}-trigger-${presentValue}`)?.focus();
+      },
+      children: [
+        /* @__PURE__ */ jsx59(
+          "div",
+          {
+            "aria-hidden": true,
+            "data-state": state,
+            className: clsx78(
+              navigationMenuStyles.overlayBackdrop,
+              isClosing ? "backdrop-blur-none opacity-0" : "backdrop-blur-[var(--refineui-blur-overlay-scrim)] opacity-100",
+              !isClosing && navigationMenuStyles.overlayBackdropEnter,
+              isClosing && navigationMenuStyles.overlayBackdropExit
+            ),
+            onPointerDown: (event) => {
+              event.preventDefault();
+              menu.setValue("");
+            },
+            onPointerEnter: () => menu.close()
+          }
+        ),
+        /* @__PURE__ */ jsx59(
+          "div",
+          {
+            "data-refineui": "navigation-menu-content-panel",
+            "data-layout": "overlay",
+            "data-state": state,
+            className: clsx78(
+              navigationMenuStyles.contentPanelOverlay,
+              isClosing && navigationMenuStyles.contentPanelOverlayExit
+            ),
+            style: panelHeight == null ? void 0 : { height: panelHeight },
+            children: /* @__PURE__ */ jsx59("div", { ref: innerRef, className: "w-full", children: registration.children })
+          }
+        )
+      ]
     }
   ) });
-  return typeof document === "undefined" ? content : createPortal6(content, document.body);
+  return typeof document === "undefined" ? root : createPortal6(root, registration.portalContainer ?? document.body);
 }
 function NavigationMenuLink({
   children,
@@ -10817,7 +11232,7 @@ function NavigationMenuLink({
   );
 }
 function NavigationMenuIndicator({ className, style, ...props }) {
-  const { value, listRef } = useNavigationMenu("NavigationMenuIndicator");
+  const { value, listRef, idPrefix } = useNavigationMenu("NavigationMenuIndicator");
   const [box, setBox] = useState18(null);
   const measure = useCallback14(() => {
     const list = listRef.current;
@@ -10826,7 +11241,7 @@ function NavigationMenuIndicator({ className, style, ...props }) {
       return;
     }
     const trigger = list.querySelector(
-      `[data-refineui="navigation-menu-trigger"][id="refineui-nav-menu-trigger-${CSS.escape(value)}"]`
+      `[data-refineui="navigation-menu-trigger"][id="${CSS.escape(idPrefix)}-trigger-${CSS.escape(value)}"]`
     );
     if (!trigger) {
       setBox(null);
@@ -10897,9 +11312,9 @@ var sidebarStyles = {
     "box-border flex w-full min-w-0 cursor-pointer items-center gap-refineui-size-x-small",
     "rounded-refineui-large border-none bg-transparent px-refineui-size-medium py-refineui-size-x-small",
     "text-refineui-alias-foreground-tertiary no-underline outline-none",
-    "transition-[color,background-color] duration-[var(--refineui-motion-duration-fast)] ease-[var(--refineui-motion-easing-ease-out)]"
+    "transition-[color,background-color] duration-[var(--refineui-motion-duration-fast)] ease-[var(--refineui-motion-easing-ease-out)] hover:bg-refineui-alias-background-primary-hover hover:text-refineui-alias-foreground-primary-hover active:bg-refineui-alias-background-primary-active active:text-refineui-alias-foreground-primary focus-visible:outline-[length:var(--refineui-stroke-width-thick)] focus-visible:[outline-color:var(--refineui-focus-color)] focus-visible:[outline-offset:var(--refineui-focus-offset)] aria-disabled:pointer-events-none aria-disabled:cursor-not-allowed aria-disabled:!text-refineui-alias-foreground-disabled"
   ),
-  linkActive: "font-medium text-refineui-alias-foreground-primary",
+  linkActive: "font-medium bg-refineui-alias-background-primary-hover text-refineui-alias-foreground-primary",
   linkDisabled: "cursor-not-allowed text-refineui-alias-foreground-disabled",
   footer: clsx79(
     "mt-auto flex shrink-0 flex-col",
@@ -11042,17 +11457,43 @@ import { clsx as clsx81 } from "clsx";
 var sidebarPeekStyles = {
   root: "relative h-full w-full min-h-0 min-w-0",
   edgeContained: clsx81(
-    "absolute inset-y-0 inset-inline-start-0 z-[calc(var(--refineui-z-floating)-1)]",
+    "absolute inset-y-0 inset-inline-start-0 z-[calc(var(--refineui-z-floating)-1)] data-[sidebar-peek-edge-suspended]:pointer-events-none",
     "w-refineui-foundation-size-120"
   ),
   edgeViewport: clsx81(
-    "fixed inset-inline-start-0 inset-block-end-0 z-[calc(var(--refineui-z-floating)-1)]",
+    "fixed inset-inline-start-0 inset-block-end-0 z-[calc(var(--refineui-z-floating)-1)] data-[sidebar-peek-edge-suspended]:pointer-events-none",
     "w-refineui-foundation-size-120",
     "top-[var(--refineui-sidebar-peek-viewport-offset,0px)]"
   ),
-  surfaceContained: clsx81("absolute z-refineui-floating flex min-h-0"),
-  surfaceViewport: clsx81("fixed z-refineui-floating flex min-h-0"),
-  panel: clsx81("box-border flex min-h-0 w-full flex-1 flex-col overflow-hidden"),
+  surfaceContained: clsx81(
+    "group/sidebar-peek-surface absolute z-refineui-floating flex min-h-0 box-border pointer-events-none invisible",
+    "inset-y-[calc(var(--refineui-spacing-size-small)-var(--refineui-spacing-size-x-small))]",
+    "start-[calc(var(--refineui-size-foundation-size-120)-var(--refineui-spacing-size-x-small))]",
+    "w-[calc(var(--refineui-sidebar-peek-panel-width)+2*var(--refineui-spacing-size-x-small))]",
+    "p-refineui-size-x-small",
+    "translate-x-[calc(-100%-var(--refineui-size-foundation-size-120)+var(--refineui-spacing-size-x-small))]",
+    "transition-[translate,visibility] duration-refineui-overlay ease-refineui-standard motion-reduce:transition-none",
+    "data-[sidebar-peek-panel-open]:pointer-events-auto data-[sidebar-peek-panel-open]:visible data-[sidebar-peek-panel-open]:translate-x-0"
+  ),
+  surfaceViewport: clsx81(
+    "group/sidebar-peek-surface fixed z-refineui-floating flex min-h-0 box-border pointer-events-none invisible",
+    "bottom-[calc(var(--refineui-spacing-size-small)-var(--refineui-spacing-size-x-small))]",
+    "start-[calc(var(--refineui-size-foundation-size-120)-var(--refineui-spacing-size-x-small))]",
+    "top-[calc(var(--refineui-sidebar-peek-viewport-offset,0px)+var(--refineui-spacing-size-small)-var(--refineui-spacing-size-x-small))]",
+    "w-[calc(var(--refineui-sidebar-peek-panel-width)+2*var(--refineui-spacing-size-x-small))]",
+    "p-refineui-size-x-small",
+    "translate-x-[calc(-100%-var(--refineui-size-foundation-size-120)+var(--refineui-spacing-size-x-small))]",
+    "transition-[translate,visibility] duration-refineui-overlay ease-refineui-standard motion-reduce:transition-none",
+    "data-[sidebar-peek-panel-open]:pointer-events-auto data-[sidebar-peek-panel-open]:visible data-[sidebar-peek-panel-open]:translate-x-0"
+  ),
+  panel: clsx81(
+    "box-border flex h-full min-h-0 w-full flex-1 flex-col overflow-hidden pointer-events-auto",
+    "rounded-refineui-xx-large border-refineui-hairline border-refineui-alias-border-default",
+    "bg-refineui-alias-surface-frosted backdrop-blur-refineui-surface-frost",
+    "shadow-refineui-16 transition-shadow duration-refineui-overlay ease-refineui-standard motion-reduce:transition-none",
+    "group-data-[sidebar-peek-panel-open]/sidebar-peek-surface:shadow-refineui-24",
+    "[&_[data-refineui=sidebar]]:h-full [&_[data-refineui=sidebar]]:border-e-0 [&_[data-refineui=sidebar]]:rounded-inherit [&_[data-refineui=sidebar]]:bg-transparent"
+  ),
   toolbar: "flex shrink-0 justify-end px-refineui-size-x-small pt-refineui-size-x-small",
   panelBody: "flex min-h-0 w-full flex-1 flex-col",
   inset: "relative flex min-h-0 min-w-0 flex-1 flex-col"
@@ -11405,7 +11846,7 @@ import { clsx as clsx83 } from "clsx";
 var paginationStyles = {
   root: "flex flex-wrap items-center gap-refineui-size-medium",
   listWrap: "flex flex-wrap items-center gap-refineui-size-medium",
-  itemShell: "box-border inline-flex h-refineui-pagination-button-min-width min-h-refineui-pagination-button-min-width w-refineui-pagination-button-min-width min-w-refineui-pagination-button-min-width shrink-0 items-center justify-center rounded-refineui-x-large border-refineui-thin p-refineui-size-x-small outline-none transition-[background-color,border-color,box-shadow,transform,color] duration-[var(--refineui-motion-duration-fast)]",
+  itemShell: "box-border inline-flex h-refineui-pagination-button-min-width min-h-refineui-pagination-button-min-width w-refineui-pagination-button-min-width min-w-refineui-pagination-button-min-width shrink-0 items-center justify-center rounded-refineui-x-large border-refineui-thin p-refineui-size-x-small outline-none transition-[background-color,border-color,box-shadow,transform,color] duration-[var(--refineui-motion-duration-fast)] hover:bg-refineui-alias-background-surface-hover hover:border-refineui-alias-border-hover active:scale-[var(--refineui-motion-scale-press)] [&[data-page=true][data-selected=true]]:border-2 [&[data-page=true][data-selected=true]]:border-refineui-alias-border-focus [&[data-page=true][data-selected=true]]:bg-refineui-alias-background-surface-selected [&[data-page=true][data-selected=true]]:font-semibold disabled:cursor-not-allowed disabled:border-refineui-alias-border-disabled disabled:bg-refineui-alias-background-surface-disabled disabled:text-refineui-alias-foreground-disabled disabled:opacity-100 disabled:transform-none",
   page: clsx83(
     componentTextClass(componentTypographyTokens.pagination),
     "border-refineui-alias-border-default bg-refineui-alias-background-primary font-medium text-refineui-alias-foreground-primary no-underline"
@@ -11709,8 +12150,8 @@ function FloatingSurface({
   };
   const clip = `path("${shape}")`;
   return /* @__PURE__ */ jsxs24("div", { "data-refineui": "floating-chrome", "aria-hidden": true, className: "pointer-events-none absolute -z-1", style: rootStyle, children: [
-    /* @__PURE__ */ jsx64("div", { className: "absolute", style: shadowStyle, children: /* @__PURE__ */ jsx64("div", { "data-refineui": "floating-shadow", className: "absolute", style: { inset: SHADOW_BLEED }, children: /* @__PURE__ */ jsx64("div", { className: "absolute inset-0", style: { clipPath: clip, backgroundColor: borderColor } }) }) }),
-    /* @__PURE__ */ jsx64("div", { "data-refineui": "floating-surface", className: "absolute inset-0", style: surfaceStyle }),
+    /* @__PURE__ */ jsx64("div", { className: "absolute", style: shadowStyle, children: /* @__PURE__ */ jsx64("div", { "data-refineui": "floating-shadow", className: "absolute [filter:var(--refineui-elevation-floating-filter)]", style: { inset: SHADOW_BLEED }, children: /* @__PURE__ */ jsx64("div", { className: "absolute inset-0", style: { clipPath: clip, backgroundColor: borderColor } }) }) }),
+    /* @__PURE__ */ jsx64("div", { "data-refineui": "floating-surface", className: "absolute inset-0 bg-refineui-alias-surface-frosted backdrop-blur-refineui-surface-frost", style: surfaceStyle }),
     /* @__PURE__ */ jsx64(
       "svg",
       {
@@ -11981,9 +12422,9 @@ import { clsx as clsx86 } from "clsx";
 // src/components/Skeleton/style.ts
 var skeletonStyles = {
   /** Line / block placeholder */
-  rectangle: "block rounded-refineui-large",
+  rectangle: "block animate-pulse rounded-refineui-large bg-refineui-alias-background-surface-selected motion-reduce:animate-none motion-reduce:opacity-100 [animation-duration:var(--refineui-motion-duration-skeleton)] [animation-timing-function:var(--refineui-motion-easing-ease-in-out)]",
   /** Avatar-style placeholder */
-  circle: "block shrink-0 rounded-refineui-circle"
+  circle: "block shrink-0 animate-pulse rounded-refineui-circle bg-refineui-alias-background-surface-selected motion-reduce:animate-none motion-reduce:opacity-100 [animation-duration:var(--refineui-motion-duration-skeleton)] [animation-timing-function:var(--refineui-motion-easing-ease-in-out)]"
 };
 
 // src/components/Skeleton/Skeleton.tsx
@@ -12041,7 +12482,7 @@ import { useState as useState23 } from "react";
 
 // src/components/Slider/style.ts
 var sliderStyles = {
-  root: "h-refineui-slider-interaction-height w-full cursor-pointer"
+  root: "h-refineui-slider-interaction-height w-full cursor-grab appearance-none bg-transparent outline-none touch-none [--refineui-slider-rail:var(--refineui-color-alias-background-brand-subtle)] [--refineui-slider-fill-color:var(--refineui-color-alias-background-brand)] [--refineui-slider-thumb-size:var(--refineui-size-foundation-size-200)] active:cursor-grabbing disabled:cursor-not-allowed disabled:[--refineui-slider-rail:var(--refineui-color-alias-background-surface-disabled)] disabled:[--refineui-slider-fill-color:var(--refineui-color-alias-foreground-disabled)] data-[size=md]:[&::-webkit-slider-runnable-track]:h-refineui-slider-track-height-md data-[size=sm]:[&::-webkit-slider-runnable-track]:h-refineui-slider-track-height-sm data-[size=md]:[&::-moz-range-track]:h-refineui-slider-track-height-md data-[size=sm]:[&::-moz-range-track]:h-refineui-slider-track-height-sm data-[size=md]:[&::-moz-range-progress]:h-refineui-slider-track-height-md data-[size=sm]:[&::-moz-range-progress]:h-refineui-slider-track-height-sm [&::-webkit-slider-runnable-track]:rounded-full [&::-webkit-slider-runnable-track]:[background:linear-gradient(to_right,var(--refineui-slider-fill-color)_0%,var(--refineui-slider-fill-color)_var(--refineui-slider-fill,0%),var(--refineui-slider-rail)_var(--refineui-slider-fill,0%),var(--refineui-slider-rail)_100%)] [&::-moz-range-track]:rounded-full [&::-moz-range-track]:bg-[var(--refineui-slider-rail)] [&::-moz-range-progress]:rounded-full [&::-moz-range-progress]:bg-[var(--refineui-slider-fill-color)] [&::-webkit-slider-thumb]:appearance-none [&::-webkit-slider-thumb]:size-[var(--refineui-slider-thumb-size)] [&::-webkit-slider-thumb]:rounded-full [&::-webkit-slider-thumb]:border [&::-webkit-slider-thumb]:border-refineui-alias-border-default [&::-webkit-slider-thumb]:bg-refineui-alias-background-primary [&::-webkit-slider-thumb]:shadow-refineui-2lighter [&::-webkit-slider-thumb]:transition-[transform,box-shadow,border-color,background-color] data-[size=md]:[&::-webkit-slider-thumb]:mt-[calc((var(--refineui-slider-thumb-size)-var(--refineui-size-slider-track-height-md))/-2)] data-[size=sm]:[&::-webkit-slider-thumb]:mt-[calc((var(--refineui-slider-thumb-size)-var(--refineui-size-slider-track-height-sm))/-2)] [&::-moz-range-thumb]:size-[var(--refineui-slider-thumb-size)] [&::-moz-range-thumb]:rounded-full [&::-moz-range-thumb]:border [&::-moz-range-thumb]:border-refineui-alias-border-default [&::-moz-range-thumb]:bg-refineui-alias-background-primary [&::-moz-range-thumb]:shadow-refineui-2lighter [&::-moz-range-thumb]:transition-[transform,box-shadow,border-color,background-color] hover:[&::-webkit-slider-thumb]:border-refineui-alias-border-strong hover:[&::-webkit-slider-thumb]:shadow-refineui-2 hover:[&::-webkit-slider-thumb]:scale-[var(--refineui-motion-scale-hover-grow)] hover:[&::-moz-range-thumb]:border-refineui-alias-border-strong hover:[&::-moz-range-thumb]:shadow-refineui-2 hover:[&::-moz-range-thumb]:scale-[var(--refineui-motion-scale-hover-grow)] active:[&::-webkit-slider-thumb]:border-refineui-alias-border-strong active:[&::-webkit-slider-thumb]:shadow-refineui-2lighter active:[&::-webkit-slider-thumb]:scale-[var(--refineui-motion-scale-press)] active:[&::-moz-range-thumb]:border-refineui-alias-border-strong active:[&::-moz-range-thumb]:shadow-refineui-2lighter active:[&::-moz-range-thumb]:scale-[var(--refineui-motion-scale-press)] focus-visible:[&::-webkit-slider-thumb]:border-refineui-alias-border-focus focus-visible:[&::-webkit-slider-thumb]:shadow-[0_0_0_var(--refineui-stroke-width-thick)_var(--refineui-color-alias-border-focus),var(--refineui-elevation-2lighter)] focus-visible:[&::-moz-range-thumb]:border-refineui-alias-border-focus focus-visible:[&::-moz-range-thumb]:shadow-[0_0_0_var(--refineui-stroke-width-thick)_var(--refineui-color-alias-border-focus),var(--refineui-elevation-2lighter)] disabled:[&::-webkit-slider-thumb]:bg-refineui-alias-background-surface-disabled disabled:[&::-webkit-slider-thumb]:border-refineui-alias-border-disabled disabled:[&::-webkit-slider-thumb]:shadow-none disabled:[&::-webkit-slider-thumb]:transform-none disabled:[&::-moz-range-thumb]:bg-refineui-alias-background-surface-disabled disabled:[&::-moz-range-thumb]:border-refineui-alias-border-disabled disabled:[&::-moz-range-thumb]:shadow-none disabled:[&::-moz-range-thumb]:transform-none"
 };
 
 // src/components/Slider/Slider.tsx
@@ -12123,15 +12564,16 @@ import {
 // src/components/Carousel/style.ts
 import { clsx as clsx88 } from "clsx";
 var carouselStyles = {
-  root: "box-border flex w-full flex-col gap-refineui-size-large outline-none",
+  root: "box-border flex w-full flex-col gap-refineui-size-large outline-none focus-visible:outline-[length:var(--refineui-stroke-width-thick)] focus-visible:[outline-color:var(--refineui-focus-color)] focus-visible:[outline-offset:var(--refineui-focus-offset)]",
   viewport: clsx88(
     "relative w-full cursor-grab overflow-hidden rounded-refineui-xx-large",
     "border-refineui-thin border-refineui-alias-border-default bg-refineui-alias-background-primary",
     "shadow-refineui-2 select-none",
-    "active:cursor-grabbing"
+    "touch-pan-y active:cursor-grabbing data-[dragging=true]:cursor-grabbing"
   ),
   track: "flex will-change-transform",
-  trackAnimated: "transition-transform duration-[var(--refineui-motion-duration-panel)] ease-[var(--refineui-motion-easing-emphasized)]",
+  trackAnimated: "transition-transform duration-[var(--refineui-motion-duration-panel)] ease-[var(--refineui-motion-easing-emphasized)] motion-reduce:transition-none",
+  navFocus: "focus-visible:outline-[length:var(--refineui-stroke-width-thick)] focus-visible:[outline-color:var(--refineui-focus-color)] focus-visible:[outline-offset:var(--refineui-focus-offset)]",
   item: "box-border min-w-0 shrink-0 grow-0 basis-full",
   controls: "flex w-full items-center justify-center gap-refineui-size-medium",
   /** Sliding-pill meter (SegmentedControl-like), not a row of dots */
@@ -12142,11 +12584,10 @@ var carouselStyles = {
   ),
   indicatorThumb: clsx88(
     "pointer-events-none absolute top-refineui-size-xxx-small bottom-refineui-size-xxx-small start-refineui-size-xxx-small z-0",
-    /* Motion lives in refineui.css, gated by `data-animate`. */
-    "rounded-refineui-circle bg-refineui-alias-background-brand shadow-refineui-2"
+    "rounded-refineui-circle bg-refineui-alias-background-brand shadow-refineui-2 transition-none data-[animate=true]:transition-[transform,width] data-[animate=true]:duration-[var(--refineui-motion-duration-medium)] data-[animate=true]:ease-[var(--refineui-motion-easing-emphasized)] motion-reduce:transition-none"
   ),
   indicatorHitRow: "relative z-[1] flex h-full w-full",
-  indicatorHit: "h-full min-w-0 flex-1 cursor-pointer border-none bg-transparent p-0 outline-none"
+  indicatorHit: "h-full min-w-0 flex-1 cursor-pointer border-none bg-transparent p-0 outline-none focus-visible:outline-[length:var(--refineui-stroke-width-thick)] focus-visible:[outline-color:var(--refineui-focus-color)] focus-visible:[outline-offset:var(--refineui-focus-offset)]"
 };
 
 // src/components/Carousel/Carousel.tsx
@@ -12162,6 +12603,14 @@ function clampIndex(i, count) {
   if (count <= 0) return 0;
   return Math.min(count - 1, Math.max(0, i));
 }
+function getInitialSlideCount(children) {
+  let slideCount = 0;
+  Children6.forEach(children, (child) => {
+    if (!isValidElement5(child) || child.type !== CarouselContent) return;
+    slideCount = Children6.toArray(child.props.children).filter(isValidElement5).length;
+  });
+  return slideCount;
+}
 function Carousel({
   children,
   className,
@@ -12174,7 +12623,7 @@ function Carousel({
 }) {
   const isControlled = indexControlled !== void 0;
   const [internalIndex, setInternalIndex] = useState24(defaultIndex);
-  const [count, setCount] = useState24(0);
+  const [count, setCount] = useState24(() => getInitialSlideCount(children));
   const [trackIndex, setTrackIndex] = useState24(defaultIndex);
   const [instant, setInstant] = useState24(false);
   const index = isControlled ? indexControlled : internalIndex;
@@ -12454,7 +12903,7 @@ function CarouselPrevious({ className, disabled, onClick, ...props }) {
       "data-dir": "prev",
       "aria-label": "Previous slide",
       disabled: isDisabled,
-      className,
+      className: clsx89(carouselStyles.navFocus, className),
       ...props,
       onClick: (e) => {
         onClick?.(e);
@@ -12486,7 +12935,7 @@ function CarouselNext({ className, disabled, onClick, ...props }) {
       "data-dir": "next",
       "aria-label": "Next slide",
       disabled: isDisabled,
-      className,
+      className: clsx89(carouselStyles.navFocus, className),
       ...props,
       onClick: (e) => {
         onClick?.(e);
@@ -12507,33 +12956,10 @@ function CarouselNext({ className, disabled, onClick, ...props }) {
 }
 function CarouselIndicators({ className, ...props }) {
   const { count, index, scrollTo } = useCarouselContext("CarouselIndicators");
-  const trackRef = useRef18(null);
-  const [thumb, setThumb] = useState24({ width: 0, x: 0, ready: false });
   const [animate, setAnimate] = useState24(false);
-  const updateThumb = useCallback18(() => {
-    const el = trackRef.current;
-    if (!el || count <= 0) {
-      setThumb({ width: 0, x: 0, ready: false });
-      return;
-    }
-    const hits = el.querySelector("[data-refineui='carousel-indicator-hits']");
-    const inner = hits?.clientWidth ?? el.clientWidth;
-    const width = inner / count;
-    setThumb({
-      width,
-      x: width * index,
-      ready: true
-    });
-  }, [count, index]);
-  useLayoutEffect10(() => {
-    updateThumb();
-  }, [updateThumb]);
   useEffect17(() => {
-    if (!thumb.ready) {
-      setAnimate(false);
-      return;
-    }
-    if (animate) return;
+    setAnimate(false);
+    if (count <= 0) return;
     let raf2 = 0;
     const raf1 = requestAnimationFrame(() => {
       raf2 = requestAnimationFrame(() => setAnimate(true));
@@ -12542,23 +12968,16 @@ function CarouselIndicators({ className, ...props }) {
       cancelAnimationFrame(raf1);
       cancelAnimationFrame(raf2);
     };
-  }, [thumb.ready, animate]);
-  useEffect17(() => {
-    const el = trackRef.current;
-    if (!el) return;
-    const ro = new ResizeObserver(() => updateThumb());
-    ro.observe(el);
-    return () => ro.disconnect();
-  }, [updateThumb]);
+  }, [count]);
   if (count <= 0) return null;
+  const selectedIndex = clampIndex(index, count);
   const thumbStyle = {
-    width: thumb.width,
-    transform: `translate3d(${thumb.x}px, 0, 0)`
+    width: `${100 / count}%`,
+    transform: `translate3d(${selectedIndex * 100}%, 0, 0)`
   };
   return /* @__PURE__ */ jsxs26(
     "div",
     {
-      ref: trackRef,
       "data-refineui": "carousel-indicators",
       role: "tablist",
       "aria-label": "Slides",
@@ -12569,7 +12988,6 @@ function CarouselIndicators({ className, ...props }) {
           "span",
           {
             "data-refineui": "carousel-indicator-thumb",
-            "data-ready": thumb.ready ? "true" : void 0,
             "data-animate": animate ? "true" : void 0,
             "aria-hidden": true,
             className: carouselStyles.indicatorThumb,
@@ -12610,10 +13028,14 @@ var BUBBLE_MAX_WIDTH = "80%";
 var bubbleStyles = {
   group: clsx90(
     "flex min-w-0 flex-col gap-refineui-size-xx-small",
-    // Connected corners for consecutive bubbles
-    "[&>[data-refineui=bubble]:first-child:not(:only-child)_[data-refineui=bubble-content]]:rounded-b-[var(--refineui-radius-rounded-medium)]",
-    "[&>[data-refineui=bubble]:last-child:not(:only-child)_[data-refineui=bubble-content]]:rounded-t-[var(--refineui-radius-rounded-medium)]",
-    "[&>[data-refineui=bubble]:not(:first-child):not(:last-child)_[data-refineui=bubble-content]]:rounded-[var(--refineui-radius-rounded-medium)]",
+    // Connected corners only flatten along the sender edge. The opposite
+    // edge keeps the outer bubble radius, including in RTL layouts.
+    "[&>[data-refineui=bubble][data-align=start]:first-child:not(:only-child)_[data-refineui=bubble-content]]:[border-end-start-radius:var(--refineui-radius-rounded-medium)]",
+    "[&>[data-refineui=bubble][data-align=end]:first-child:not(:only-child)_[data-refineui=bubble-content]]:[border-end-end-radius:var(--refineui-radius-rounded-medium)]",
+    "[&>[data-refineui=bubble][data-align=start]:last-child:not(:only-child)_[data-refineui=bubble-content]]:[border-start-start-radius:var(--refineui-radius-rounded-medium)]",
+    "[&>[data-refineui=bubble][data-align=end]:last-child:not(:only-child)_[data-refineui=bubble-content]]:[border-start-end-radius:var(--refineui-radius-rounded-medium)]",
+    "[&>[data-refineui=bubble][data-align=start]:not(:first-child):not(:last-child)_[data-refineui=bubble-content]]:[border-start-start-radius:var(--refineui-radius-rounded-medium)] [&>[data-refineui=bubble][data-align=start]:not(:first-child):not(:last-child)_[data-refineui=bubble-content]]:[border-end-start-radius:var(--refineui-radius-rounded-medium)]",
+    "[&>[data-refineui=bubble][data-align=end]:not(:first-child):not(:last-child)_[data-refineui=bubble-content]]:[border-start-end-radius:var(--refineui-radius-rounded-medium)] [&>[data-refineui=bubble][data-align=end]:not(:first-child):not(:last-child)_[data-refineui=bubble-content]]:[border-end-end-radius:var(--refineui-radius-rounded-medium)]",
     // Room for overlapping reactions on the last bubble in a group
     "[&>[data-refineui=bubble][data-has-reactions-bottom]:not(:last-child)]:mb-refineui-size-xx-large"
   ),
@@ -12816,7 +13238,10 @@ var stepperStyles = {
     "hover:[&_[data-refineui=stepper-indicator][data-state=upcoming]]:bg-refineui-alias-background-primary-hover",
     "hover:[&_[data-refineui=stepper-indicator][data-state=upcoming]]:border-refineui-alias-border-strong",
     "hover:[&_[data-refineui=stepper-indicator][data-state=upcoming]]:text-refineui-alias-foreground-primary-hover",
-    "hover:[&_[data-refineui=stepper-title][data-state=upcoming]]:text-refineui-alias-foreground-primary"
+    "hover:[&_[data-refineui=stepper-title][data-state=upcoming]]:text-refineui-alias-foreground-primary",
+    "active:[&_[data-refineui=stepper-indicator][data-state=upcoming]]:bg-refineui-alias-background-primary-active",
+    "active:[&_[data-refineui=stepper-indicator][data-state=upcoming]]:border-refineui-alias-border-strong",
+    "active:[&_[data-refineui=stepper-indicator][data-state=upcoming]]:text-refineui-alias-foreground-primary"
   ),
   itemDisabled: "cursor-not-allowed opacity-50",
   indicator: clsx92(
@@ -13676,7 +14101,7 @@ import { iconSizes as iconSizes20 } from "@refineui/tokens";
 
 // src/components/SpinButton/style.ts
 var spinButtonStyles = {
-  root: "box-border flex w-full min-w-0 items-stretch overflow-hidden outline-none",
+  root: "box-border flex w-full min-w-0 items-stretch overflow-hidden outline-none transition-[border-color,background-color] duration-[var(--refineui-motion-duration-fast)] focus-within:border-refineui-alias-border-focus active:transform-none",
   borderDisabled: "border-refineui-thin border-refineui-alias-border-disabled",
   borderDefault: "border-refineui-thin border-refineui-alias-border-default",
   bgDisabled: "bg-refineui-alias-background-surface-disabled",
@@ -13687,9 +14112,9 @@ var spinButtonStyles = {
   valueTextDefault: "text-refineui-alias-foreground-primary",
   stepper: "flex h-full min-h-0 w-refineui-spin-stepper-width shrink-0 flex-col",
   /** Split column evenly inside shared `controlHeight*` shell */
-  stepButtonBase: "box-border flex min-h-0 w-full flex-1 items-center justify-center border-none p-0 text-refineui-alias-foreground-secondary",
-  stepButtonDisabled: "cursor-not-allowed bg-refineui-alias-background-surface-disabled opacity-50",
-  stepButtonEnabled: "cursor-pointer bg-refineui-alias-background-primary opacity-100"
+  stepButtonBase: "box-border flex min-h-0 w-full flex-1 items-center justify-center border-none p-0 text-refineui-alias-foreground-secondary outline-none transition-[background-color,color,opacity] duration-[var(--refineui-motion-duration-fast)] active:transform-none focus-visible:outline-none",
+  stepButtonDisabled: "cursor-not-allowed bg-refineui-alias-background-surface-disabled opacity-50 text-refineui-alias-foreground-disabled",
+  stepButtonEnabled: "cursor-pointer bg-refineui-alias-background-primary opacity-100 hover:bg-refineui-alias-background-surface-hover hover:text-refineui-alias-foreground-primary active:bg-refineui-alias-background-surface-active active:text-refineui-alias-foreground-primary"
 };
 var spinButtonShellClass = formControlShellHeightClass;
 var spinButtonValueTypo = formControlTypoClass;
@@ -13956,7 +14381,7 @@ var toastRecipe = defineRecipe({
   dataStates: ["default"]
 });
 var toastStyles = {
-  card: toastRecipe.base,
+  card: `${toastRecipe.base} touch-none [--refineui-toast-swipe-x:0] [--refineui-toast-swipe-y:0] [--refineui-toast-motion-duration:var(--refineui-motion-duration-toast-enter)] [--refineui-toast-motion-easing:var(--refineui-motion-easing-emphasized)] [transform:translate3d(var(--refineui-toast-swipe-x),var(--refineui-toast-swipe-y),0)] transition-[opacity,transform] duration-[var(--refineui-toast-motion-duration)] ease-[var(--refineui-toast-motion-easing)] shadow-refineui-toast will-change-[transform,opacity] motion-reduce:duration-[var(--refineui-motion-duration-instant)] motion-reduce:data-[stack-state=entering]:transform-none motion-reduce:[&[data-stack-state=leaving]:not([data-swipe-out])]:transform-none data-[swiping=true]:cursor-grabbing data-[swiping=true]:transition-none data-[swipe-out=left]:[--refineui-toast-swipe-x:-120%] data-[swipe-out=left]:opacity-0 data-[swipe-out=right]:[--refineui-toast-swipe-x:120%] data-[swipe-out=right]:opacity-0 data-[swipe-out=top]:[--refineui-toast-swipe-y:-120%] data-[swipe-out=top]:opacity-0 data-[swipe-out=bottom]:[--refineui-toast-swipe-y:120%] data-[swipe-out=bottom]:opacity-0 data-[stack-state=entering]:opacity-0 data-[stack-state=entering]:[transform:translate3d(var(--refineui-toast-swipe-x),var(--refineui-toast-slide-in-y,-100%),0)] data-[stack-state=leaving]:[--refineui-toast-motion-duration:var(--refineui-motion-duration-toast-leave)] data-[stack-state=leaving]:[--refineui-toast-motion-easing:var(--refineui-motion-easing-standard)] [&[data-stack-state=leaving]:not([data-swipe-out])]:opacity-0 [&[data-stack-state=leaving]:not([data-swipe-out])]:[transform:translate3d(var(--refineui-toast-swipe-x),var(--refineui-toast-slide-out-y,-100%),0)]`,
   iconWrap: "flex shrink-0 items-center justify-center self-center",
   contentWrap: "flex min-h-px min-w-0 flex-1 items-center",
   message: clsx97(
@@ -13964,7 +14389,9 @@ var toastStyles = {
     "text-refineui-alias-foreground-primary"
   ),
   actionButton: "shrink-0 whitespace-nowrap",
-  toasterRoot: "refineui-toaster group"
+  toasterRoot: "group/toaster fixed start-1/2 top-[calc(var(--refineui-spacing-size-xxx-large)+var(--refineui-spacing-size-large)+env(safe-area-inset-top,0px))] z-refineui-messages box-border min-h-[var(--refineui-toast-collapsed-stack-height,var(--refineui-toast-front-height,0))] w-[min(calc(100%-env(safe-area-inset-left,0px)-env(safe-area-inset-right,0px)-2*var(--refineui-spacing-size-large)),var(--refineui-size-toast-max-width))] max-w-refineui-toast-max-width -translate-x-1/2 list-none p-0 pointer-events-none transition-[min-height] duration-[var(--refineui-motion-duration-panel)] ease-[var(--refineui-motion-easing-emphasized)] motion-reduce:duration-[var(--refineui-motion-duration-instant)] before:absolute before:inset-0 before:z-0 before:content-[''] before:pointer-events-auto group-hover/toaster:min-h-[var(--refineui-toast-expanded-stack-height,var(--refineui-toast-collapsed-stack-height,0))] max-[480px]:top-[calc(var(--refineui-spacing-size-xxx-large)+env(safe-area-inset-top,0px))] max-[480px]:w-[min(calc(100%-env(safe-area-inset-left,0px)-env(safe-area-inset-right,0px)-2*var(--refineui-spacing-size-medium)),var(--refineui-size-toast-max-width))]",
+  stackItem: "absolute inset-x-0 top-0 z-[var(--refineui-toast-z-index,100)] flex justify-center overflow-visible pointer-events-auto translate-y-[var(--refineui-toast-offset-collapsed,0)] transition-[transform,height] duration-[var(--refineui-motion-duration-panel)] ease-[var(--refineui-motion-easing-emphasized)] group-hover/toaster:translate-y-[var(--refineui-toast-offset-expanded,0)]",
+  scaleLayer: "relative box-border w-fit max-w-full origin-top scale-[calc(1-(var(--refineui-toast-stack-index,0)*0.018))] opacity-[calc(1-(var(--refineui-toast-stack-index,0)*0.12))] transition-[transform,opacity] duration-[var(--refineui-motion-duration-panel)] ease-[var(--refineui-motion-easing-emphasized)] group-hover/toaster:scale-100 group-hover/toaster:opacity-100"
 };
 
 // src/components/Toast/Toast.tsx
@@ -14195,7 +14622,20 @@ var Toast = forwardRef16(function Toast2(props, ref) {
       style: { ...tokenStyle, ...style },
       className: clsx98(toastStyles.card, className),
       children: [
-        /* @__PURE__ */ jsx73("div", { "data-refineui": "toast-icon", className: toastStyles.iconWrap, children: iconContent }),
+        /* @__PURE__ */ jsx73(
+          "div",
+          {
+            "data-refineui": "toast-icon",
+            className: clsx98(
+              toastStyles.iconWrap,
+              variant === "success" && "text-refineui-alias-foreground-success",
+              variant === "error" && "text-refineui-alias-foreground-error",
+              variant === "warning" && "text-refineui-alias-foreground-warning",
+              variant === "default" && "text-refineui-alias-foreground-primary"
+            ),
+            children: iconContent
+          }
+        ),
         /* @__PURE__ */ jsx73("div", { className: toastStyles.contentWrap, children: message != null && message !== "" ? /* @__PURE__ */ jsx73("div", { className: toastStyles.message, children: message }) : null }),
         action != null && actionEl
       ]
@@ -14446,11 +14886,12 @@ function Toaster({
             "data-toast-id": rec.id,
             "data-index": index,
             "data-front": index === 0 ? "true" : "false",
+            className: toastStyles.stackItem,
             style: {
               ["--refineui-toast-z-index"]: String(STACK_Z_BASE - index),
               ["--refineui-toast-stack-index"]: String(index)
             },
-            children: /* @__PURE__ */ jsx73("div", { "data-refineui": "toast-scale-layer", children: /* @__PURE__ */ jsx73(
+            children: /* @__PURE__ */ jsx73("div", { "data-refineui": "toast-scale-layer", className: toastStyles.scaleLayer, children: /* @__PURE__ */ jsx73(
               SwipeableToast,
               {
                 record: rec,
@@ -14518,9 +14959,9 @@ var treeStyles = {
     "rounded-refineui-large border-none bg-transparent",
     "px-refineui-size-medium py-refineui-size-x-small",
     "text-refineui-alias-foreground-tertiary outline-none",
-    "transition-[color,background-color] duration-[var(--refineui-motion-duration-fast)] ease-[var(--refineui-motion-easing-ease-out)]"
+    "transition-[color,background-color] duration-[var(--refineui-motion-duration-fast)] ease-[var(--refineui-motion-easing-ease-out)] hover:bg-refineui-alias-background-primary-hover hover:text-refineui-alias-foreground-primary-hover active:bg-refineui-alias-background-primary-active active:text-refineui-alias-foreground-primary focus-visible:outline-[length:var(--refineui-stroke-width-thick)] focus-visible:[outline-color:var(--refineui-focus-color)] focus-visible:[outline-offset:var(--refineui-focus-offset)] aria-disabled:pointer-events-none"
   ),
-  rowSelected: "font-medium text-refineui-alias-foreground-primary",
+  rowSelected: "font-medium bg-refineui-alias-background-primary-hover text-refineui-alias-foreground-primary",
   rowDisabled: "cursor-not-allowed",
   rowMain: "flex min-w-0 flex-1 items-center gap-refineui-size-x-small",
   chevronButton: clsx99(
@@ -15157,7 +15598,7 @@ var chartStyles = {
   root: "flex w-full min-w-0 flex-col gap-refineui-size-medium",
   body: "grid w-full min-w-0 grid-cols-[auto_minmax(0,1fr)] grid-rows-[minmax(0,1fr)_auto_auto] items-stretch gap-x-refineui-size-medium",
   plotColumn: "contents",
-  plotFrame: "relative col-start-2 row-start-1 min-w-0",
+  plotFrame: "group/chart-plot relative col-start-2 row-start-1 min-w-0",
   plot: "block h-auto w-full min-w-0 aspect-[5/2] overflow-visible",
   yAxis: "relative col-start-1 row-start-1 min-w-refineui-foundation-size-400 pe-refineui-size-x-small",
   yAxisTick: clsx106(
@@ -15189,7 +15630,12 @@ var chartStyles = {
     componentTextClass(componentTypographyTokens.chart.legendLabel),
     "flex items-center gap-refineui-size-x-small text-refineui-alias-foreground-secondary"
   ),
-  legendSwatch: "size-refineui-foundation-size-80 shrink-0 rounded-refineui-small"
+  legendSwatch: "size-refineui-foundation-size-80 shrink-0 rounded-refineui-small",
+  bar: "[transform-box:fill-box] origin-bottom [animation:refineui-chart-bar-enter_var(--refineui-motion-duration-panel)_var(--refineui-motion-easing-emphasized)_both] transition-opacity duration-[var(--refineui-motion-duration-fast)] ease-[var(--refineui-motion-easing-ease-out)] group-data-[hover]/chart-plot:data-[state=default]:opacity-[var(--refineui-opacity-disabled)] data-[state=hover]:opacity-[var(--refineui-opacity-full)] data-[state=selected]:opacity-[var(--refineui-opacity-full)]",
+  barTrack: "pointer-events-none",
+  lineStroke: "[stroke-dasharray:1] [stroke-dashoffset:1] [animation:refineui-chart-line-enter_var(--refineui-motion-duration-panel)_var(--refineui-motion-easing-emphasized)_both]",
+  lineArea: "[animation:refineui-chart-point-enter_var(--refineui-motion-duration-panel)_var(--refineui-motion-easing-emphasized)_both]",
+  point: "[animation:refineui-chart-point-enter_var(--refineui-motion-duration-fast)_var(--refineui-motion-easing-emphasized)_both]"
 };
 
 // src/components/Chart/utils.ts
@@ -15666,7 +16112,8 @@ function ChartBars({
             trackHeight,
             barRadius
           ),
-          fill: track
+          fill: track,
+          className: chartStyles.barTrack
         },
         `track-${index}`
       );
@@ -15683,7 +16130,8 @@ function ChartBars({
           "data-refineui": "chart-bar",
           "data-state": state,
           d: barPathTopRounded(x, y, barWidth, height, barRadius),
-          fill
+          fill,
+          className: chartStyles.bar
         },
         index
       );
@@ -15728,7 +16176,8 @@ function ChartLine({
         {
           "data-refineui": "chart-line-area",
           d: monotoneAreaPath(coords, baselineY),
-          fill: `url(#${gradientId})`
+          fill: `url(#${gradientId})`,
+          className: chartStyles.lineArea
         }
       )
     ] }) : null,
@@ -15743,7 +16192,8 @@ function ChartLine({
         strokeWidth: "var(--refineui-stroke-width-thick)",
         vectorEffect: "non-scaling-stroke",
         strokeLinejoin: "round",
-        strokeLinecap: "round"
+        strokeLinecap: "round",
+        className: chartStyles.lineStroke
       }
     ),
     coords.map(({ x, y }, index) => {
@@ -15760,7 +16210,8 @@ function ChartLine({
           r: CHART_POINT_RADIUS,
           fill: stroke,
           stroke: pointRing,
-          strokeWidth: CHART_POINT_STROKE
+          strokeWidth: CHART_POINT_STROKE,
+          className: chartStyles.point
         },
         index
       );