@womp/kookie-ui 0.14.5 → 0.15.1

package/src/components/sidebar.tsx

@@ -7,20 +7,13 @@ import * as Accordion from '@radix-ui/react-accordion';
 import * as DropdownMenu from './dropdown-menu.js';
 import * as Popover from './popover.js';
 
-import { sidebarPropDefs } from './sidebar.props.js';
-import { useThemeContext } from './theme.js';
-// import { IconButton } from './icon-button.js';
-import { ScrollArea } from './scroll-area.js';
 import { Separator } from './separator.js';
 import { ThickChevronRightIcon } from './icons.js';
-import { extractProps } from '../helpers/extract-props.js';
 import { Kbd } from './kbd.js';
 import { Badge } from './badge.js';
-import { SidebarVisualContext, useSidebarVisual } from './_internal/pane-chrome.js';
-import { warnDeprecated } from '../helpers/warn-deprecated.js';
+import { useSidebarVisual } from './_internal/pane-chrome.js';
 
 import type { ComponentPropsWithout, RemovedProps } from '../helpers/component-props.js';
-import type { GetPropDefTypes } from '../props/prop-def.js';
 import type { BadgeProps } from './badge.js';
 
 // Badge configuration type for sidebar menu buttons
@@ -32,183 +25,6 @@ type BadgeConfig = {
   radius?: BadgeProps['radius'];
 };
 
-// Sidebar is now independent of Shell - no integration needed
-
-// Main Sidebar component
-type SidebarOwnProps = GetPropDefTypes<typeof sidebarPropDefs>;
-interface SidebarProps extends ComponentPropsWithout<'div', RemovedProps>, SidebarOwnProps {
-  /**
-   * Presentational mode independent of Shell.
-   * 'thin' renders a rail-style sidebar, 'expanded' renders a panel-style sidebar.
-   * If both `presentation` and `layout` are provided, `presentation` takes precedence.
-   */
-  presentation?: 'thin' | 'expanded';
-}
-
-/** @deprecated Removed in 0.15.0. Put the menu parts in `Shell.Sidebar`. */
-const Sidebar = React.forwardRef<HTMLDivElement, SidebarProps>((props, forwardedRef) => {
-  const themeContext = useThemeContext();
-  warnDeprecated(
-    'Sidebar.Root is deprecated and will be removed in 0.15.0. Put the Sidebar menu parts in Shell.Sidebar, between Shell.PaneHeader, Shell.Scroll and Shell.PaneFooter.',
-  );
-  if (props.menuVariant !== undefined) {
-    warnDeprecated('`menuVariant` on Sidebar.Root is deprecated and will be removed in 0.15.0. Rows use the soft highlight, and the solid one under prefers-contrast: more.');
-  }
-  if (props.presentation === 'thin' || props.layout === 'rail') {
-    warnDeprecated('Sidebar thin mode is deprecated and will be removed in 0.15.0. Put the rows in Shell.Rail, which draws them as tiles.');
-  }
-
-  const {
-    size = sidebarPropDefs.size.default,
-    variant = sidebarPropDefs.variant.default,
-    menuVariant = sidebarPropDefs.menuVariant.default,
-    layout = sidebarPropDefs.layout.default,
-    presentation,
-    // type = sidebarPropDefs.type.default,
-    // side = sidebarPropDefs.side.default,
-    // collapsible = sidebarPropDefs.collapsible.default,
-    panelBackground,
-    color,
-  } = props;
-
-  const { className, children, ...rootProps } = extractProps(props, sidebarPropDefs);
-  // Remove internal-only props from DOM
-  const { asChild: _, panelBackground: __, presentation: ___, ...safeRootProps } = rootProps;
-  const resolvedColor = color || themeContext.accentColor;
-
-  // Resolve layout (default to 'panel'). `presentation` takes precedence over `layout`.
-  const resolvedLayout = presentation === 'thin' ? 'rail' : presentation === 'expanded' ? 'panel' : layout || 'panel';
-
-  // Update context with current props - we'll pass the resolved values
-  const resolvedSize = typeof size === 'object' ? size.initial || '2' : size;
-  const visualContextValue = React.useMemo(
-    () => ({ size: resolvedSize, menuVariant, presentation, color: resolvedColor }),
-    [resolvedSize, menuVariant, presentation, resolvedColor],
-  );
-  return (
-    <div {...safeRootProps} ref={forwardedRef} data-accent-color={resolvedColor} className={classNames('rt-SidebarRoot', className)}>
-      <SidebarVisualContext.Provider value={visualContextValue}>
-        <div
-          className={classNames('rt-SidebarContainer', `rt-variant-${variant}`, `rt-r-size-${resolvedSize}`, `rt-menu-variant-${menuVariant}`, resolvedLayout && `rt-layout-${resolvedLayout}`)}
-          data-accent-color={resolvedColor}
-          data-panel-background={panelBackground}
-          data-presentation={presentation}
-          data-layout={resolvedLayout}
-        >
-          {children}
-        </div>
-      </SidebarVisualContext.Provider>
-    </div>
-  );
-});
-Sidebar.displayName = 'Sidebar.Root';
-
-// Sidebar content area
-interface SidebarContentProps extends React.ComponentPropsWithoutRef<'div'> {
-  id?: string;
-  role?: 'navigation' | 'none';
-  'aria-label'?: string;
-}
-
-/** @deprecated Removed in 0.15.0. Use `Shell.Scroll`. */
-const SidebarContent = React.forwardRef<HTMLDivElement, SidebarContentProps>(
-  ({ className, children, role = 'navigation', 'aria-label': ariaLabel = 'Main navigation', id, ...props }, forwardedRef) => {
-    warnDeprecated('Sidebar.Content is deprecated and will be removed in 0.15.0. Use Shell.Scroll inside Shell.Sidebar.');
-    const visual = useSidebarVisual();
-    const size = visual?.size ?? '2';
-    const menuVariant = visual?.menuVariant ?? 'soft';
-
-    return (
-      <ScrollArea type="hover">
-        <div
-          {...props}
-          ref={forwardedRef}
-          id={id}
-          role={role}
-          aria-label={ariaLabel}
-          className={classNames('rt-BaseMenuContent', 'rt-SidebarContent', `rt-r-size-${size}`, `rt-menu-variant-${menuVariant}`, className)}
-        >
-          <div className="rt-BaseMenuViewport">{children}</div>
-        </div>
-      </ScrollArea>
-    );
-  },
-);
-SidebarContent.displayName = 'Sidebar.Content';
-
-// Sidebar header
-interface SidebarHeaderProps extends React.ComponentPropsWithoutRef<'div'> {
-  /**
-   * Whether to use the default flex container layout.
-   * @default true
-   */
-  asContainer?: boolean;
-}
-
-/** @deprecated Removed in 0.15.0. Use `Shell.PaneHeader`. */
-const SidebarHeader = React.forwardRef<HTMLDivElement, SidebarHeaderProps>(({ className, asContainer = true, ...props }, forwardedRef) => {
-    warnDeprecated('Sidebar.Header is deprecated and will be removed in 0.15.0. Use Shell.PaneHeader inside Shell.Sidebar.');
-  const visual = useSidebarVisual();
-  const size = visual?.size ?? '2';
-  const menuVariant = visual?.menuVariant ?? 'soft';
-
-  return (
-    <div
-      {...props}
-      ref={forwardedRef}
-      className={classNames(
-        'rt-SidebarHeader',
-        `rt-r-size-${size}`,
-        `rt-menu-variant-${menuVariant}`,
-        {
-          'rt-SidebarHeader--container': asContainer,
-        },
-        className,
-      )}
-    />
-  );
-});
-SidebarHeader.displayName = 'Sidebar.Header';
-
-// Sidebar footer
-interface SidebarFooterProps extends React.ComponentPropsWithoutRef<'div'> {
-  /**
-   * Whether to use the default flex container layout.
-   * @default true
-   */
-  asContainer?: boolean;
-}
-
-/** @deprecated Removed in 0.15.0. Use `Shell.PaneFooter`. */
-const SidebarFooter = React.forwardRef<HTMLDivElement, SidebarFooterProps>(({ className, asContainer = true, ...props }, forwardedRef) => {
-    warnDeprecated('Sidebar.Footer is deprecated and will be removed in 0.15.0. Use Shell.PaneFooter inside Shell.Sidebar.');
-  const visual = useSidebarVisual();
-  const size = visual?.size ?? '2';
-  const menuVariant = visual?.menuVariant ?? 'soft';
-
-  return (
-    <div
-      {...props}
-      ref={forwardedRef}
-      className={classNames(
-        'rt-SidebarFooter',
-        `rt-r-size-${size}`,
-        `rt-menu-variant-${menuVariant}`,
-        {
-          'rt-SidebarFooter--container': asContainer,
-        },
-        className,
-      )}
-    />
-  );
-});
-SidebarFooter.displayName = 'Sidebar.Footer';
-
-// Sidebar trigger button
-// removed Trigger in presentational-only Sidebar
-
-// Removed SidebarInset - not needed
-
 // Sidebar separator
 interface SidebarSeparatorProps extends ComponentPropsWithout<typeof Separator, RemovedProps> {}
 
@@ -535,7 +351,7 @@ const SidebarMenuSubContent = React.forwardRef<React.ElementRef<typeof Accordion
     // DropdownMenu only supports sizes 1 and 2, so map size 3 to 2
     const dropdownSize = visual?.size === '3' ? '2' : visual?.size;
     return (
-      <DropdownMenu.Content size={dropdownSize} variant={visual?.menuVariant} className={classNames(className)}>
+      <DropdownMenu.Content size={dropdownSize} className={classNames(className)}>
         <DropdownMenu.Group>{normalized}</DropdownMenu.Group>
       </DropdownMenu.Content>
     );
@@ -799,10 +615,6 @@ SidebarSearch.displayName = 'Sidebar.Search';
 
 // Export all components following shadcn's pattern
 export {
-  Sidebar as Root,
-  SidebarContent as Content,
-  SidebarHeader as Header,
-  SidebarFooter as Footer,
   SidebarSeparator as Separator,
   SidebarMenu as Menu,
   SidebarMenuItem as MenuItem,
@@ -816,57 +628,4 @@ export {
   SidebarSearch as Search,
 };
 
-/**
- * Enhanced Sidebar Header and Footer Usage Examples:
- *
- * 1. Simple default container (backwards compatible):
- * <Sidebar.Header>
- *   <Logo />
- *   <span>App Name</span>
- * </Sidebar.Header>
- *
- * 2. Custom flex layout:
- * <Sidebar.Header className="rt-justify-between rt-gap-3">
- *   <Logo />
- *   <Sidebar.MenuButton>
- *     <SettingsIcon />
- *   </Sidebar.MenuButton>
- * </Sidebar.Header>
- *
- * 3. Column layout for multiple rows:
- * <Sidebar.Header className="rt-flex-col rt-gap-2" asContainer={false}>
- *   <div className="rt-flex rt-items-center rt-gap-2">
- *     <Logo />
- *     <span>App Name</span>
- *   </div>
- *   <Sidebar.MenuButton>
- *     <UserAvatar />
- *     <span>John Doe</span>
- *   </Sidebar.MenuButton>
- * </Sidebar.Header>
- *
- * 4. Interactive footer with menu button:
- * <Sidebar.Footer>
- *   <Sidebar.MenuButton>
- *     <UserIcon />
- *     <span>Settings</span>
- *     <ChevronUpIcon />
- *   </Sidebar.MenuButton>
- * </Sidebar.Footer>
- *
- * 5. Custom footer layout:
- * <Sidebar.Footer className="rt-justify-between">
- *   <span>v1.0.0</span>
- *   <Sidebar.MenuButton>
- *     <HelpIcon />
- *   </Sidebar.MenuButton>
- * </Sidebar.Footer>
- *
- * Available utility classes:
- * - Layout: rt-flex-row, rt-flex-col
- * - Alignment: rt-items-center, rt-items-start, rt-items-end
- * - Justification: rt-justify-between, rt-justify-center, rt-justify-start, rt-justify-end
- * - Gap: rt-gap-1, rt-gap-2, rt-gap-3, rt-gap-4
- */
-
-export type { SidebarProps as RootProps, SidebarContentProps as ContentProps, SidebarHeaderProps as HeaderProps, SidebarFooterProps as FooterProps, BadgeConfig };
+export type { BadgeConfig };

package/src/components/slider.css

@@ -18,7 +18,7 @@
    * Theme-level translucent override
    * Applies backdrop filter for elevated visual effects
    */
-  :where([data-panel-background='translucent'], [data-material='translucent']) & {
+  :where([data-material='translucent']) & {
     backdrop-filter: var(--backdrop-filter-components);
     --backdrop-filter-components: var(--backdrop-filter-components-enabled);
   }
@@ -30,12 +30,12 @@
    * Component-level material overrides
    * These ensure proper rendering based on material setting
    */
-  &:where([data-panel-background='solid'], [data-material='solid']) {
+  &:where([data-material='solid']) {
     backdrop-filter: none;
     --backdrop-filter-components: none;
   }
   
-  &:where([data-panel-background='translucent'], [data-material='translucent']) {
+  &:where([data-material='translucent']) {
     backdrop-filter: var(--backdrop-filter-components);
     --backdrop-filter-components: var(--backdrop-filter-components-enabled);
   }
@@ -171,18 +171,18 @@
     box-shadow: inset 0 0 0 1px var(--gray-6);
 
     /* Theme-level translucent override */
-    :where([data-panel-background='translucent'], [data-material='translucent']) & {
+    :where([data-material='translucent']) & {
       background-color: color-mix(in srgb, var(--gray-a2), var(--gray-2) 60%);
       box-shadow: inset 0 0 0 1px var(--gray-a6);
     }
 
     /* Component-level overrides */
-    &:where([data-panel-background='solid'], [data-material='solid']) {
+    &:where([data-material='solid']) {
       background-color: var(--gray-2);
       box-shadow: inset 0 0 0 1px var(--gray-6);
     }
 
-    &:where([data-panel-background='translucent'], [data-material='translucent']) {
+    &:where([data-material='translucent']) {
       background-color: color-mix(in srgb, var(--gray-a2), var(--gray-2) 60%);
       box-shadow: inset 0 0 0 1px var(--gray-a6);
     }
@@ -206,16 +206,16 @@
     background-color: var(--gray-3);
 
     /* Theme-level translucent override */
-    :where([data-panel-background='translucent'], [data-material='translucent']) & {
+    :where([data-material='translucent']) & {
       background-color: color-mix(in srgb, var(--gray-a3), var(--gray-3) 60%);
     }
 
     /* Component-level overrides */
-    &:where([data-panel-background='solid'], [data-material='solid']) {
+    &:where([data-material='solid']) {
       background-color: var(--gray-3);
     }
 
-    &:where([data-panel-background='translucent'], [data-material='translucent']) {
+    &:where([data-material='translucent']) {
       background-color: color-mix(in srgb, var(--gray-a3), var(--gray-3) 60%);
     }
   }
@@ -237,16 +237,16 @@
     box-shadow: inset 0 0 0 1px var(--gray-6);
 
     /* Theme-level translucent override */
-    :where([data-panel-background='translucent'], [data-material='translucent']) & {
+    :where([data-material='translucent']) & {
       box-shadow: inset 0 0 0 1px var(--gray-a6);
     }
 
     /* Component-level overrides */
-    &:where([data-panel-background='solid'], [data-material='solid']) {
+    &:where([data-material='solid']) {
       box-shadow: inset 0 0 0 1px var(--gray-6);
     }
 
-    &:where([data-panel-background='translucent'], [data-material='translucent']) {
+    &:where([data-material='translucent']) {
       box-shadow: inset 0 0 0 1px var(--gray-a6);
     }
   }
@@ -316,7 +316,6 @@
   min-height: 44px;
   min-width: 44px;
   border-radius: var(--radius-2);
-  transition: background-color var(--transition-standard);
   z-index: 1;
   pointer-events: auto;
 }
@@ -355,7 +354,6 @@
   height: var(--space-2);
   background-color: var(--gray-6);
   border-radius: 1px;
-  transition: background-color var(--transition-standard);
 }
 
 .rt-SliderTickLabel {
@@ -368,5 +366,4 @@
   text-overflow: ellipsis;
   max-width: 60px;
   text-align: center;
-  transition: color var(--transition-standard), font-weight var(--transition-standard);
 }

package/src/components/spinner.css

@@ -69,10 +69,10 @@
   }
 }
 
-/* Enhanced reduced motion support */
+/* A busy indicator keeps moving when motion is reduced, more slowly. */
 @media (prefers-reduced-motion: reduce) {
   .rt-Spinner {
-    animation: none;
+    animation-duration: calc(var(--spinner-animation-duration) * 3);
   }
 }
 

package/src/components/switch.css

@@ -18,10 +18,6 @@
    * Theme-level translucent override
    * Applies backdrop filter for elevated visual effects
    */
-  :where([data-panel-background='translucent'], [data-material='translucent']) & {
-    backdrop-filter: var(--backdrop-filter-components);
-    --backdrop-filter-components: var(--backdrop-filter-components-enabled);
-  }
 
   /* Prevent backdrop-filter stacking with parent elements */
   isolation: isolate;
@@ -30,15 +26,6 @@
    * Component-level material overrides
    * These ensure proper rendering based on material setting
    */
-  &:where([data-panel-background='solid'], [data-material='solid']) {
-    backdrop-filter: none;
-    --backdrop-filter-components: none;
-  }
-  
-  &:where([data-panel-background='translucent'], [data-material='translucent']) {
-    backdrop-filter: var(--backdrop-filter-components);
-    --backdrop-filter-components: var(--backdrop-filter-components-enabled);
-  }
 
   &::before {
     content: '';
@@ -46,7 +33,6 @@
     width: var(--switch-width);
     height: var(--switch-height);
     border-radius: 9999px;
-    transition: background-color var(--transition-standard), box-shadow var(--transition-standard);
     cursor: var(--cursor-switch);
   }
 
@@ -68,7 +54,6 @@
   height: var(--switch-thumb-size);
   border-radius: 9999px;
   box-shadow: var(--shadow-2);
-  transition: transform var(--transition-standard), box-shadow var(--transition-standard);
 
   &:where([data-state='checked']) {
     background-color: var(--accent-solid-thumb);
@@ -110,24 +95,11 @@
 .rt-SwitchRoot:where(.rt-variant-surface) {
   &::before {
     background-color: var(--gray-2);
-    box-shadow: inset 0 0 0 1px var(--gray-6);
+    box-shadow: inset 0 0 0 1px var(--gray-6)
 
     /* Theme-level translucent override */
-    :where([data-panel-background='translucent'], [data-material='translucent']) & {
-      background-color: color-mix(in srgb, var(--gray-a2), var(--gray-2) 60%);
-      box-shadow: inset 0 0 0 1px var(--gray-a6);
-    }
 
     /* Component-level overrides */
-    &:where([data-panel-background='solid'], [data-material='solid']) {
-      background-color: var(--gray-2);
-      box-shadow: inset 0 0 0 1px var(--gray-6);
-    }
-
-    &:where([data-panel-background='translucent'], [data-material='translucent']) {
-      background-color: color-mix(in srgb, var(--gray-a2), var(--gray-2) 60%);
-      box-shadow: inset 0 0 0 1px var(--gray-a6);
-    }
   }
   
   &:where([data-state='checked'])::before {
@@ -136,29 +108,17 @@
   }
   
 
-
-
 }
 
 /* soft */
 
 .rt-SwitchRoot:where(.rt-variant-soft) {
   &::before {
-    background-color: var(--gray-3);
+    background-color: var(--gray-3)
 
     /* Theme-level translucent override */
-    :where([data-panel-background='translucent'], [data-material='translucent']) & {
-      background-color: color-mix(in srgb, var(--gray-a3), var(--gray-3) 60%);
-    }
 
     /* Component-level overrides */
-    &:where([data-panel-background='solid'], [data-material='solid']) {
-      background-color: var(--gray-3);
-    }
-
-    &:where([data-panel-background='translucent'], [data-material='translucent']) {
-      background-color: color-mix(in srgb, var(--gray-a3), var(--gray-3) 60%);
-    }
   }
   
   &:where([data-state='checked'])::before {
@@ -171,21 +131,11 @@
 .rt-SwitchRoot:where(.rt-variant-outline) {
   &::before {
     /* Base state: no background, just border */
-    box-shadow: inset 0 0 0 1px var(--gray-6);
+    box-shadow: inset 0 0 0 1px var(--gray-6)
 
     /* Theme-level translucent override */
-    :where([data-panel-background='translucent'], [data-material='translucent']) & {
-      box-shadow: inset 0 0 0 1px var(--gray-a6);
-    }
 
     /* Component-level overrides */
-    &:where([data-panel-background='solid'], [data-material='solid']) {
-      box-shadow: inset 0 0 0 1px var(--gray-6);
-    }
-
-    &:where([data-panel-background='translucent'], [data-material='translucent']) {
-      box-shadow: inset 0 0 0 1px var(--gray-a6);
-    }
   }
   
   &:where([data-state='checked'])::before {
@@ -194,8 +144,6 @@
   }
   
 
-
-
 }
 
 /* all disabled Switches */

package/src/components/switch.props.tsx

@@ -4,8 +4,6 @@ import type { PropDef } from '../props/prop-def.js';
 
 const sizes = ['1', '2', '3', '4'] as const;
 const variants = ['surface', 'soft', 'outline'] as const;
-const panelBackgrounds = ['solid', 'translucent'] as const;
-const materials = ['solid', 'translucent'] as const;
 
 const switchPropDefs = {
   size: { type: 'enum', className: 'rt-r-size', values: sizes, default: '2', responsive: true },
@@ -15,17 +13,13 @@ const switchPropDefs = {
    * Material type for visual rendering and depth effects
    * Controls how the switch renders its visual elements
    */
-  material: { type: 'enum', values: materials, default: undefined },
   /**
    * Panel background type (deprecated)
    * @deprecated Use `material` prop instead. This prop will be removed in a future version.
    */
-  panelBackground: { type: 'enum', values: panelBackgrounds, default: undefined },
 } satisfies {
   size: PropDef<(typeof sizes)[number]>;
   variant: PropDef<(typeof variants)[number]>;
-  material: PropDef<(typeof materials)[number] | undefined>;
-  panelBackground: PropDef<(typeof panelBackgrounds)[number] | undefined>;
 };
 
 export { switchPropDefs };

package/src/components/switch.tsx

@@ -20,17 +20,14 @@ interface SwitchProps
     MarginProps,
     SwitchOwnProps {}
 const Switch = React.forwardRef<SwitchElement, SwitchProps>((props, forwardedRef) => {
-  const { className, color, panelBackground, material, ...switchProps } = extractProps(
+  const { className, color, ...switchProps } = extractProps(
     props,
     switchPropDefs,
     marginPropDefs,
   );
-  const effectiveMaterial = material || panelBackground;
   return (
     <SwitchPrimitive.Root
       data-accent-color={color}
-      data-panel-background={effectiveMaterial}
-      data-material={effectiveMaterial}
       {...switchProps}
       asChild={false}
       ref={forwardedRef}

package/src/components/tab-nav.tsx

@@ -1,4 +1,3 @@
-import { useDeprecatedPanelBackgroundWarning } from '../helpers/use-deprecation-warning.js';
 import * as React from 'react';
 import classNames from 'classnames';
 import { NavigationMenu } from 'radix-ui';
@@ -21,13 +20,12 @@ interface TabNavRootProps
     MarginProps,
     TabNavOwnProps {}
 const TabNavRoot = React.forwardRef<TabNavRootElement, TabNavRootProps>((props, forwardedRef) => {
-  const { children, className, color, material: materialProp, panelBackground, ...rootProps } = extractProps(
+  const { children, className, color, material: materialProp, ...rootProps } = extractProps(
     props,
     tabNavRootPropDefs,
     marginPropDefs,
   );
-  useDeprecatedPanelBackgroundWarning(props.panelBackground);
-  const material = materialProp ?? panelBackground;
+  const material = materialProp;
   return (
     <NavigationMenu.Root
       className="rt-TabNavRoot"
@@ -38,7 +36,6 @@ const TabNavRoot = React.forwardRef<TabNavRootElement, TabNavRootProps>((props,
     >
       <NavigationMenu.List
         className={classNames('rt-reset', 'rt-BaseTabList', 'rt-TabNavList', className)}
-        data-panel-background={material}
         data-material={material}
       >
         {children}

package/src/components/tabs.css

@@ -3,10 +3,8 @@
 .rt-TabsContent {
   position: relative;
   outline: 0;
-  transition: var(--transition-fast);
 }
 
 .rt-TabsContent:where(:focus-visible) {
       outline: var(--focus-outline-width) solid var(--focus-8);
-  transition: var(--transition-focus);
 }

package/src/components/tabs.tsx

@@ -1,4 +1,3 @@
-import { useDeprecatedPanelBackgroundWarning } from '../helpers/use-deprecation-warning.js';
 import * as React from 'react';
 import classNames from 'classnames';
 import { Tabs as TabsPrimitive } from 'radix-ui';
@@ -37,17 +36,15 @@ interface TabsListProps
     MarginProps,
     TabsListOwnProps {}
 const TabsList = React.forwardRef<TabsListElement, TabsListProps>((props, forwardedRef) => {
-  const { className, color, material: materialProp, panelBackground, ...listProps } = extractProps(
+  const { className, color, material: materialProp, ...listProps } = extractProps(
     props,
     tabsListPropDefs,
     marginPropDefs,
   );
-  useDeprecatedPanelBackgroundWarning(props.panelBackground);
-  const material = materialProp ?? panelBackground;
+  const material = materialProp;
   return (
     <TabsPrimitive.List
       data-accent-color={color}
-      data-panel-background={material}
       data-material={material}
       {...listProps}
       asChild={false}