@kushagradhawan/kookie-ui 0.3.21 → 0.3.23

package/src/components/dropdown-menu.tsx

@@ -30,6 +30,7 @@ import { Kbd } from './kbd.js';
 import type { IconProps } from './icons.js';
 import type { ComponentPropsWithout, RemovedProps } from '../helpers/component-props.js';
 import type { GetPropDefTypes, Responsive } from '../props/prop-def.js';
+import { useDeprecatedPanelBackgroundWarning } from '../helpers/use-deprecation-warning.js';
 
 interface DropdownMenuRootProps
   extends React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Root> {}
@@ -113,14 +114,7 @@ const DropdownMenuContent = React.forwardRef<DropdownMenuContentElement, Dropdow
   (props, forwardedRef) => {
     const themeContext = useThemeContext();
 
-    // Show deprecation warning for panelBackground when used
-    React.useEffect(() => {
-      if (props.panelBackground !== undefined) {
-        console.warn(
-          'Warning: The `panelBackground` prop is deprecated and will be removed in a future version. Use `material` prop instead.',
-        );
-      }
-    }, [props.panelBackground]);
+    useDeprecatedPanelBackgroundWarning(props.panelBackground);
 
     // Material takes precedence over panelBackground
     const effectiveMaterial =

package/src/components/popover.css

@@ -1,4 +1,11 @@
 .rt-PopoverContent {
+  /*
+   * This surface blurs its own backdrop, which makes it the backdrop root for
+   * everything inside it. A component nested here would re-blur an already
+   * blurred, already flat surface for the full cost of another blur pass, so
+   * switch the component filter off for the subtree. See tokens/blur.css.
+   */
+  --backdrop-filter-components-enabled: none;
   /* Base state: use --color-panel which adapts to theme context */
   background-color: var(--color-panel);
   backdrop-filter: var(--backdrop-filter-panel);

package/src/components/progress.css

@@ -15,7 +15,7 @@
    */
   :where([data-panel-background='translucent'], [data-material='translucent']) & {
     backdrop-filter: var(--backdrop-filter-components);
-    --backdrop-filter-components: blur(var(--backdrop-blur-components));
+    --backdrop-filter-components: var(--backdrop-filter-components-enabled);
   }
 
   /* Prevent backdrop-filter stacking with parent elements */
@@ -32,7 +32,7 @@
   
   &:where([data-panel-background='translucent'], [data-material='translucent']) {
     backdrop-filter: var(--backdrop-filter-components);
-    --backdrop-filter-components: blur(var(--backdrop-blur-components));
+    --backdrop-filter-components: var(--backdrop-filter-components-enabled);
   }
 }
 
@@ -40,8 +40,21 @@
 .rt-ProgressIndicator {
   display: block;
   height: var(--position-full);
-  width: max(calc(var(--progress-value) / var(--progress-max) * 100%), var(--progress-height));
+  width: var(--position-full);
   border-radius: var(--progress-indicator-radius);
+
+  /*
+   * The bar is full width and slid into place rather than grown. `width` is a
+   * layout property: animating it re-lays-out on every frame, and the
+   * indeterminate animation never stops, so a visible bar reflowed forever.
+   * `.rt-ProgressRoot` clips the overhang. `max()` keeps a sliver of the bar
+   * visible at very low values, as the width form did.
+   */
+  transform: translateX(
+    calc(
+      -100% + max(calc(var(--progress-value) / var(--progress-max) * 100%), var(--progress-height))
+    )
+  );
   transition: var(--transition-progress);
 
   &:where([data-state='indeterminate']) {
@@ -55,20 +68,20 @@
 
 @keyframes rt-progress-indicator-indeterminate-grow {
   0% {
-    width: calc(var(--progress-scale-initial) * 100%);
+    transform: translateX(calc(-100% + var(--progress-scale-initial) * 100%));
   }
   20% {
-    width: calc(var(--progress-scale-step-1) * 100%);
+    transform: translateX(calc(-100% + var(--progress-scale-step-1) * 100%));
   }
   30% {
-    width: calc(var(--progress-scale-step-2) * 100%);
+    transform: translateX(calc(-100% + var(--progress-scale-step-2) * 100%));
   }
   40%,
   50% {
-    width: calc(var(--progress-scale-step-3) * 100%);
+    transform: translateX(calc(-100% + var(--progress-scale-step-3) * 100%));
   }
   100% {
-    width: calc(var(--progress-scale-final) * 100%);
+    transform: translateX(calc(-100% + var(--progress-scale-final) * 100%));
   }
 }
 

package/src/components/segmented-control.css

@@ -32,7 +32,7 @@
    */
   :where([data-panel-background='translucent'], [data-material='translucent']) & {
     backdrop-filter: var(--backdrop-filter-components);
-    --backdrop-filter-components: blur(var(--backdrop-blur-components));
+    --backdrop-filter-components: var(--backdrop-filter-components-enabled);
   }
 
   /* 
@@ -46,7 +46,7 @@
   
   &:where([data-panel-background='translucent'], [data-material='translucent']) {
     backdrop-filter: var(--backdrop-filter-components);
-    --backdrop-filter-components: blur(var(--backdrop-blur-components));
+    --backdrop-filter-components: var(--backdrop-filter-components-enabled);
   }
 
   /* Disable backdrop-filter when inside elements that already have backdrop-filter */

package/src/components/select.css

@@ -16,7 +16,7 @@
   /* Theme-level translucent override */
   :where([data-panel-background='translucent'], [data-material='translucent']) & {
     backdrop-filter: var(--backdrop-filter-components);
-    --backdrop-filter-components: blur(var(--backdrop-blur-components));
+    --backdrop-filter-components: var(--backdrop-filter-components-enabled);
   }
 
   /* Prevent backdrop-filter stacking with parents */
@@ -30,7 +30,7 @@
   
   &:where([data-panel-background='translucent'], [data-material='translucent']) {
     backdrop-filter: var(--backdrop-filter-components);
-    --backdrop-filter-components: blur(var(--backdrop-blur-components));
+    --backdrop-filter-components: var(--backdrop-filter-components-enabled);
   }
 
   &:where(.rt-high-contrast) {
@@ -71,6 +71,13 @@
 }
 
 .rt-SelectContent {
+  /*
+   * This surface blurs its own backdrop, which makes it the backdrop root for
+   * everything inside it. A component nested here would re-blur an already
+   * blurred, already flat surface for the full cost of another blur pass, so
+   * switch the component filter off for the subtree. See tokens/blur.css.
+   */
+  --backdrop-filter-components-enabled: none;
   --scrollarea-scrollbar-vertical-margin-top: var(--select-content-padding);
   --scrollarea-scrollbar-vertical-margin-bottom: var(--select-content-padding);
   --scrollarea-scrollbar-horizontal-margin-left: var(--select-content-padding);

package/src/components/sheet.tsx

@@ -43,6 +43,7 @@ import { Theme } from './theme.js';
 import { Heading } from './heading.js';
 import { Text } from './text.js';
 import { extractProps } from '../helpers/extract-props.js';
+import { useDeprecatedPanelBackgroundWarning } from '../helpers/use-deprecation-warning.js';
 import { requireReactElement } from '../helpers/require-react-element.js';
 import { useBodyPointerEventsCleanup } from '../hooks/use-body-pointer-events-cleanup.js';
 
@@ -85,6 +86,30 @@ Trigger.displayName = 'Sheet.Trigger';
 
 // Content
 /** Element type for `Sheet.Content`. */
+// Reuse dialog content prop defs for size/width/height tokens, but handle
+// material/panelBackground explicitly to avoid forwarding unknown DOM props.
+// Built once at module scope: `extractProps` memoises on the identity of the
+// prop def objects it is handed, so rebuilding these per render would recompile
+// them every time a sheet renders.
+const {
+  align: _alignPropDef,
+  panelBackground: panelBackgroundPropDef,
+  material: materialPropDef,
+  ...dialogPropDefsForSheet
+} = dialogContentPropDefs;
+
+const materialPropDefs = {
+  panelBackground: panelBackgroundPropDef,
+  material: materialPropDef,
+};
+
+// Override dialog's default maxWidth (600px) to avoid clamping Sheet by default
+const { default: _mwDefault, ...maxWidthWithoutDefault } = dialogPropDefsForSheet.maxWidth;
+const sheetPropDefs = {
+  ...dialogPropDefsForSheet,
+  maxWidth: maxWidthWithoutDefault,
+} as typeof dialogPropDefsForSheet;
+
 type SheetContentElement = React.ElementRef<typeof DialogPrimitive.Content>;
 interface SheetContentProps
   extends ComponentPropsWithout<typeof DialogPrimitive.Content, RemovedProps>,
@@ -120,40 +145,18 @@ const Content = React.forwardRef<SheetContentElement, SheetContentProps>(
       bottom: 'bottom',
     };
     const normalizedSide = normalizedSideMap[side];
-    // Reuse dialog content prop defs for size/width/height tokens, but handle
-    // material/panelBackground explicitly to avoid forwarding unknown DOM props.
-    const {
-      align: _alignPropDef,
-      panelBackground: panelBackgroundPropDef,
-      material: materialPropDef,
-      ...propDefs
-    } = dialogContentPropDefs;
-
     // Extract panelBackground and material together (remove from DOM props)
     const { panelBackground: resolvedPanelBackground, material: resolvedMaterial } = extractProps(
       { panelBackground: panelBackgroundProp, material: materialProp },
-      { panelBackground: panelBackgroundPropDef, material: materialPropDef },
+      materialPropDefs,
     );
 
-    const materialValue = React.useMemo(() => {
-      if (resolvedPanelBackground !== undefined) {
-        if (process.env.NODE_ENV !== 'production') {
-          console.warn(
-            'Warning: The `panelBackground` prop is deprecated and will be removed in a future version. Use the `material` prop instead.',
-          );
-        }
-      }
-      return resolvedMaterial ?? resolvedPanelBackground;
-    }, [resolvedMaterial, resolvedPanelBackground]);
+    useDeprecatedPanelBackgroundWarning(panelBackgroundProp);
+
+    // Material takes precedence over the deprecated panelBackground
+    const materialValue = resolvedMaterial ?? resolvedPanelBackground;
 
-    // Now extract remaining props using dialog defs so size/width/height classnames are applied
-    // Override dialog's default maxWidth (600px) to avoid clamping Sheet by default
-    // Match dialog.tsx: extract once and avoid leaking panel/material
-    const { default: _mwDefault, ...maxWidthWithoutDefault } = propDefs.maxWidth;
-    const sheetPropDefs = {
-      ...propDefs,
-      maxWidth: maxWidthWithoutDefault,
-    } as typeof propDefs;
+    // Size/width/height class names come from the dialog defs — see `sheetPropDefs`.
     const { className: extractedClassName, ...contentProps } = extractProps(
       restProps,
       sheetPropDefs,

package/src/components/shell.css

@@ -70,47 +70,51 @@
   height: 100%;
   overflow: hidden;
 
-  /* Animation setup */
-  transition: width var(--motion-duration-small) var(--motion-ease-standard);
+  /* Above the panel, so a collapsing panel tucks behind it rather than across it. */
+  position: relative;
+  z-index: 2;
 }
 
+/* Steps to its width in one layout pass — see .rt-ShellPanel for why. */
 .rt-ShellRail[data-mode='expanded'] {
   width: var(--rail-size, 64px);
 }
 
-/* Collapsed rail: stay in flow during transition, then hide */
 .rt-ShellRail[data-mode='collapsed'] {
   width: 0px;
-  /* Delay container collapse until content fade completes */
-  transition-delay: var(--motion-duration-small);
+  transition: width 0s var(--motion-duration-small);
 }
 
 /* Peek overlay rules consolidated later to avoid duplication */
 
 .rt-ShellRailContent {
+  position: absolute;
+  inset-block: 0;
+  inset-inline-start: 0;
+
   display: flex;
   flex-direction: column;
-  width: var(--rail-size, 64px);
+  width: 100%;
   height: 100%;
   gap: var(--space-2);
 
-  /* Content animation: fade out first, then fade in after width settles */
+  /* Content animation */
   opacity: 0;
   pointer-events: none;
-  transition: opacity var(--motion-duration-small) var(--motion-ease-standard) var(--motion-duration-small);
+  transform: translateX(-100%);
+  transition:
+    transform var(--motion-duration-small) var(--motion-ease-standard),
+    opacity var(--motion-duration-small) var(--motion-ease-standard);
+}
+
+:where([dir='rtl']) .rt-ShellRailContent {
+  transform: translateX(100%);
 }
 
 .rt-ShellRailContent[data-visible] {
   opacity: 1;
   pointer-events: auto;
-}
-
-.rt-ShellRail[data-mode='collapsed'] .rt-ShellRailContent {
-  /* Exit animation: fade out content first, then collapse */
-  opacity: 0;
-  width: 0;
-  visibility: hidden;
-  transition: opacity var(--motion-duration-small) var(--motion-ease-standard);
+  transform: translateX(0);
 }
 
 /* Panel - sidebar content next to Rail */
@@ -122,46 +126,67 @@
   overflow: visible;
   position: relative;
   z-index: 1;
-
-  /* Animation setup */
-  transition: width var(--motion-duration-small) var(--motion-ease-standard);
 }
 
+/*
+ * The pane takes its width in one step rather than animating it. `width` is a
+ * layout property, so animating it re-lays-out everything in `.rt-ShellContent`
+ * on every frame of a collapse: measured on this stylesheet, that is 11 layout
+ * passes per toggle and 5.3ms per frame with 100 rows of content beside it,
+ * 10.1ms with 300 and 17.2ms with 800. Stepping to the final width costs one
+ * layout pass, and the pane's contents slide on `transform`, which the
+ * compositor handles without laying anything out.
+ *
+ * Expanding applies the width immediately, so the contents have somewhere to
+ * slide into. Collapsing holds the width until the slide has finished — a `0s`
+ * transition with a delay — so the contents are never sliding across
+ * `.rt-ShellContent`, and the content area widens once, at the end.
+ */
 .rt-ShellPanel[data-visible] {
   width: var(--panel-size, 288px);
 }
 
-/* Collapsed panel: stay in flow during transition, then hide */
 .rt-ShellPanel:not([data-visible]) {
   width: 0px;
-  /* Delay container collapse until content fade completes */
-  transition-delay: var(--motion-duration-small);
+  transition: width 0s var(--motion-duration-small);
 }
 
 .rt-ShellPanelContent {
+  /*
+   * Taken out of flow so it can slide across the space the pane no longer
+   * occupies. `.rt-ShellBody` clips it at the edge of the shell.
+   */
+  position: absolute;
+  inset-block: 0;
+  inset-inline-start: 0;
+
   display: flex;
   flex-direction: column;
-  width: var(--panel-size, 288px);
+  width: 100%;
   height: 100%;
   overflow: hidden;
 
   /* Content animation */
   opacity: 0;
   pointer-events: none;
-  transition: opacity var(--motion-duration-small) var(--motion-ease-standard) var(--motion-duration-small);
+  transform: translateX(-100%);
+  transition:
+    transform var(--motion-duration-small) var(--motion-ease-standard),
+    opacity var(--motion-duration-small) var(--motion-ease-standard);
+}
+
+:where([dir='rtl']) .rt-ShellPanelContent {
+  transform: translateX(100%);
 }
 
 .rt-ShellPanelContent[data-visible] {
   opacity: 1;
   pointer-events: auto;
+  transform: translateX(0);
 }
 
-.rt-ShellPanel:not([data-visible]) .rt-ShellPanelContent {
-  /* Exit animation: fade out content first, then collapse */
-  opacity: 0;
-  width: 0;
-  visibility: hidden;
-  transition: opacity var(--motion-duration-small) var(--motion-ease-standard);
+:where([dir='rtl']) .rt-ShellPanelContent[data-visible] {
+  transform: translateX(0);
 }
 
 /* Sidebar - alternative to Rail+Panel */
@@ -174,10 +199,17 @@
   position: relative;
   z-index: 1;
 
-  /* Animation setup */
-  transition: width var(--motion-duration-small) var(--motion-ease-standard);
 }
 
+/*
+ * Steps to its width in one layout pass — see .rt-ShellPanel for why.
+ *
+ * Sidebar has two open sizes, so expanded and thin both apply immediately and
+ * the switch between them is a step rather than a slide: there is no composited
+ * way to move a pane between two widths that both take space in the flow. The
+ * phase rules below already fade the contents out across that switch, so the
+ * step lands while they are not visible.
+ */
 .rt-ShellSidebar[data-mode='expanded'] {
   width: var(--sidebar-size, 288px);
 }
@@ -186,19 +218,16 @@
   width: var(--sidebar-thin-size, 64px);
 }
 
-/* Ensure content matches thin width in thin mode */
-.rt-ShellSidebar[data-mode='thin'] .rt-ShellSidebarContent {
-  width: var(--sidebar-thin-size, 64px);
-}
-
-/* Collapsed sidebar: stay in flow during transition, then hide */
 .rt-ShellSidebar[data-mode='collapsed'] {
   width: 0px;
-  /* Delay container collapse until content fade completes */
-  transition-delay: var(--motion-duration-small);
+  transition: width 0s var(--motion-duration-small);
 }
 
 .rt-ShellSidebarContent {
+  position: absolute;
+  inset-block: 0;
+  inset-inline-start: 0;
+
   display: flex;
   flex-direction: column;
   width: 100%;
@@ -208,7 +237,14 @@
   /* Content animation */
   opacity: 0;
   pointer-events: none;
-  transition: opacity var(--motion-duration-small) var(--motion-ease-standard) var(--motion-duration-small);
+  transform: translateX(-100%);
+  transition:
+    transform var(--motion-duration-small) var(--motion-ease-standard),
+    opacity var(--motion-duration-small) var(--motion-ease-standard);
+}
+
+:where([dir='rtl']) .rt-ShellSidebarContent {
+  transform: translateX(100%);
 }
 
 /* Hide resizer in thin mode */
@@ -219,6 +255,7 @@
 .rt-ShellSidebarContent[data-visible] {
   opacity: 1;
   pointer-events: auto;
+  transform: translateX(0);
 }
 
 /* Sidebar presentation switch sequencing (thin ↔ expanded) */
@@ -237,13 +274,6 @@
   transition: opacity var(--motion-duration-small) var(--motion-ease-standard);
 }
 
-.rt-ShellSidebar[data-mode='collapsed'] .rt-ShellSidebarContent {
-  /* Exit animation: fade out content first, then collapse */
-  opacity: 0;
-  width: 0;
-  visibility: hidden;
-  transition: opacity var(--motion-duration-small) var(--motion-ease-standard);
-}
 
 /* Stacked Sidebar: left side, floating without reflow */
 .rt-ShellSidebar[data-presentation='stacked'] {
@@ -291,10 +321,9 @@
   position: relative;
   z-index: 1;
 
-  /* Animation setup */
-  transition: width var(--motion-duration-small) var(--motion-ease-standard);
 }
 
+/* Steps to its width in one layout pass — see .rt-ShellPanel for why. */
 .rt-ShellInspector[data-mode='expanded'] {
   width: var(--inspector-size, 320px);
 }
@@ -302,34 +331,37 @@
 /* Collapsed inspector: stay in flow during transition, then hide */
 .rt-ShellInspector[data-mode='collapsed'] {
   width: 0px;
-  /* Delay container collapse until content fade completes */
-  transition-delay: var(--motion-duration-small);
+  transition: width 0s var(--motion-duration-small);
 }
 
 .rt-ShellInspectorContent {
+  position: absolute;
+  inset-block: 0;
+  inset-inline-end: 0;
+
   display: flex;
   flex-direction: column;
-  width: var(--inspector-size, 320px);
+  width: 100%;
   height: 100%;
   overflow: hidden;
 
   /* Content animation */
   opacity: 0;
   pointer-events: none;
-  transition: opacity var(--motion-duration-small) var(--motion-ease-standard) var(--motion-duration-small);
+  transform: translateX(100%);
+  transition:
+    transform var(--motion-duration-small) var(--motion-ease-standard),
+    opacity var(--motion-duration-small) var(--motion-ease-standard);
+}
+
+:where([dir='rtl']) .rt-ShellInspectorContent {
+  transform: translateX(-100%);
 }
 
 .rt-ShellInspectorContent[data-visible] {
   opacity: 1;
   pointer-events: auto;
-}
-
-.rt-ShellInspector[data-mode='collapsed'] .rt-ShellInspectorContent {
-  /* Exit animation: fade out content first, then collapse */
-  opacity: 0;
-  width: 0;
-  visibility: hidden;
-  transition: opacity var(--motion-duration-small) var(--motion-ease-standard);
+  transform: translateX(0);
 }
 
 /* Bottom - bottom panel */
@@ -342,37 +374,42 @@
   flex-shrink: 0;
   position: relative;
 
-  /* Animation setup */
-  transition: height var(--motion-duration-small) var(--motion-ease-standard);
 }
 
+/* Steps to its height in one layout pass — see .rt-ShellPanel for why. */
 .rt-ShellBottom[data-mode='expanded'] {
   height: var(--bottom-size, 200px);
 }
 
-/* Collapsed bottom: stay in flow during transition, then hide */
 .rt-ShellBottom[data-mode='collapsed'] {
   height: 0px;
-  /* Delay container collapse until content fade completes */
-  transition-delay: var(--motion-duration-small);
+  transition: height 0s var(--motion-duration-small);
 }
 
 .rt-ShellBottomContent {
+  position: absolute;
+  inset-inline: 0;
+  inset-block-end: 0;
+
   display: flex;
   flex-direction: column;
   width: 100%;
-  height: var(--bottom-size, 200px);
+  height: 100%;
   overflow: hidden;
 
   /* Content animation */
   opacity: 0;
   pointer-events: none;
-  transition: opacity var(--motion-duration-small) var(--motion-ease-standard) var(--motion-duration-small);
+  transform: translateY(100%);
+  transition:
+    transform var(--motion-duration-small) var(--motion-ease-standard),
+    opacity var(--motion-duration-small) var(--motion-ease-standard);
 }
 
 .rt-ShellBottomContent[data-visible] {
   opacity: 1;
   pointer-events: auto;
+  transform: translateY(0);
 }
 
 /* Disable transitions during active resize */