@womp/kookie-ui 0.16.0 → 0.17.0

package/src/components/_internal/base-tab-list.css

@@ -82,9 +82,9 @@
       line-height: var(--line-height-1);
       letter-spacing: var(--letter-spacing-1);
       --tab-height: var(--control-height-1);
-      --tab-padding-x: var(--space-1);
-      --tab-inner-padding-x: var(--space-1);
-      --tab-inner-padding-y: calc(var(--space-1) * var(--spacing-multiplier-small));
+      --tab-padding-x: var(--space-2);
+      --tab-inner-padding-x: var(--space-2);
+      --tab-inner-padding-y: calc(var(--space-2) * var(--spacing-multiplier-small));
       --tab-inner-border-radius: var(--radius-1);
 
       /* Icon sizing for size 1 */
@@ -103,9 +103,9 @@
       line-height: var(--line-height-2);
       letter-spacing: var(--letter-spacing-2);
       --tab-height: var(--control-height-2);
-      --tab-padding-x: var(--space-2);
-      --tab-inner-padding-x: var(--space-2);
-      --tab-inner-padding-y: var(--space-1);
+      --tab-padding-x: var(--space-3);
+      --tab-inner-padding-x: var(--space-3);
+      --tab-inner-padding-y: var(--space-2);
       --tab-inner-border-radius: var(--radius-2);
 
       /* Icon sizing for size 2 */
@@ -124,9 +124,9 @@
       line-height: var(--line-height-3);
       letter-spacing: var(--letter-spacing-3);
       --tab-height: var(--control-height-3);
-      --tab-padding-x: var(--space-3);
-      --tab-inner-padding-x: var(--space-3);
-      --tab-inner-padding-y: var(--space-2);
+      --tab-padding-x: var(--space-4);
+      --tab-inner-padding-x: var(--space-4);
+      --tab-inner-padding-y: var(--space-3);
       --tab-inner-border-radius: var(--radius-3);
 
       /* Icon sizing for size 3 */
@@ -145,9 +145,9 @@
       line-height: var(--line-height-4);
       letter-spacing: var(--letter-spacing-4);
       --tab-height: var(--control-height-4);
-      --tab-padding-x: var(--space-3);
-      --tab-inner-padding-x: var(--space-4);
-      --tab-inner-padding-y: var(--space-2);
+      --tab-padding-x: var(--space-4);
+      --tab-inner-padding-x: var(--space-5);
+      --tab-inner-padding-y: var(--space-3);
       --tab-inner-border-radius: var(--radius-4);
 
       /* Icon sizing for size 4 */
@@ -182,55 +182,10 @@
       color: var(--gray-12);
     }
     &:where(:hover) :where(.rt-BaseTabListTriggerInner) {
-      /* Base state: solid gray for solid panels */
       background-color: var(--gray-a3);
-
-      /* Theme-level translucent override for hover */
-      :where([data-material='translucent']) & {
-        background-color: var(--gray-a3);
-        backdrop-filter: var(--backdrop-filter-components);
-      }
-
-      /* Component-level overrides for hover */
-      :where(.rt-BaseTabList[data-material='solid']) & {
-        background-color: var(--gray-a3);
-        backdrop-filter: none;
-        --backdrop-filter-components: none;
-      }
-
-      :where(.rt-BaseTabList[data-material='translucent']) & {
-        background-color: var(--gray-a3);
-        backdrop-filter: var(--backdrop-filter-components);
-        --backdrop-filter-components: var(--backdrop-filter-components-enabled);
-      }
-
-      /* Disable backdrop-filter when inside elements that already have backdrop-filter */
-      :where(.rt-PopoverContent, .rt-BaseDialogContent, .rt-BaseMenuContent, .rt-DropdownMenuContent, .rt-ContextMenuContent, .rt-AlertDialogContent, .rt-HoverCardContent, .rt-TooltipContent, .rt-Card) & {
-        backdrop-filter: none !important;
-      }
     }
     &:where(:focus-visible:hover) :where(.rt-BaseTabListTriggerInner) {
-      /* Base state: solid accent for solid panels */
       background-color: var(--accent-a3);
-
-      /* Theme-level translucent override for focus+hover */
-      :where([data-material='translucent']) & {
-        background-color: var(--accent-a3);
-        backdrop-filter: var(--backdrop-filter-components);
-      }
-
-      /* Component-level overrides for focus+hover */
-      :where(.rt-BaseTabList[data-material='solid']) & {
-        background-color: var(--accent-a3);
-        backdrop-filter: none;
-        --backdrop-filter-components: none;
-      }
-
-      :where(.rt-BaseTabList[data-material='translucent']) & {
-        background-color: var(--accent-a3);
-        backdrop-filter: var(--backdrop-filter-components);
-        --backdrop-filter-components: var(--backdrop-filter-components-enabled);
-      }
     }
   }
   &:where([data-state='active'], [data-active]) {
@@ -239,7 +194,7 @@
   &:where(:focus-visible) :where(.rt-BaseTabListTriggerInner) {
     outline: var(--focus-outline-width) solid var(--focus-8);
     outline-offset: var(--focus-outline-offset-inset);
-    scroll-margin: var(--space-2);
+    scroll-margin: var(--space-3);
   }
   &:where([data-state='active'], [data-active])::before {
     box-sizing: border-box;
@@ -260,15 +215,13 @@
   .rt-TabNavLink:where([data-active])::before {
     background-color: Highlight;
   }
-  
+
   .rt-BaseTabListTrigger:where(:focus-visible) :where(.rt-BaseTabListTriggerInner) {
     outline: 2px solid Highlight;
     outline-offset: 2px;
   }
 }
 
-
-
 /* Disabled: the same treatment as a disabled menu item. It keeps no hover fill. */
 .rt-BaseTabListTrigger:where([data-disabled]) {
   color: var(--gray-a8);

package/src/components/_internal/base-tab-list.props.ts

@@ -5,7 +5,6 @@ import type { PropDef } from '../../props/prop-def.js';
 const sizes = ['1', '2', '3', '4'] as const;
 const wrapValues = ['nowrap', 'wrap', 'wrap-reverse'] as const;
 const justifyValues = ['start', 'center', 'end'] as const;
-const materials = ['solid', 'translucent'] as const;
 
 const baseTabListPropDefs = {
   size: { type: 'enum', className: 'rt-r-size', values: sizes, default: '2', responsive: true },
@@ -22,12 +21,10 @@ const baseTabListPropDefs = {
     responsive: true,
   },
   ...colorPropDef,
-  material: { type: 'enum', values: materials, default: undefined },
 } satisfies {
   size: PropDef<(typeof sizes)[number]>;
   wrap: PropDef<(typeof wrapValues)[number]>;
   justify: PropDef<(typeof justifyValues)[number]>;
-  material: PropDef<(typeof materials)[number] | undefined>;
 };
 
 export { baseTabListPropDefs };

package/src/components/_internal/menu-context.tsx

@@ -2,7 +2,6 @@
 
 import * as React from 'react';
 
-import { useThemeContext } from '../theme.js';
 import { useResolvedResponsiveValue } from './base-menu.utils.js';
 
 import type { Responsive } from '../../props/prop-def.js';
@@ -34,22 +33,19 @@ interface MenuProviderProps {
   size?: Responsive<MenuSize>;
 }
 
-/** Map menu size to item height in pixels at 100% scaling */
+/** Menu item height in pixels per size: the control height ladder (--control-height-N). */
 export const menuSizeToItemHeight: Record<MenuSize, number> = {
-  '1': 24, // --space-5
-  '2': 32, // --space-6
+  '1': 28,
+  '2': 32,
 };
 
-/** Item height in px for a size at the given theme scaling ("100%", "110%"…). */
-export function getMenuItemHeight(size: MenuSize, scaling: string | undefined): number {
-  const scale = scaling ? parseFloat(scaling) / 100 : 1;
-  return menuSizeToItemHeight[size] * (Number.isFinite(scale) ? scale : 1);
+export function getMenuItemHeight(size: MenuSize): number {
+  return menuSizeToItemHeight[size];
 }
 
 export function MenuProvider({ children, size }: MenuProviderProps) {
   const resolvedSize = useResolvedResponsiveValue<MenuSize | undefined>(size, undefined);
-  const { scaling } = useThemeContext();
-  const itemHeight = resolvedSize ? getMenuItemHeight(resolvedSize, scaling) : undefined;
+  const itemHeight = resolvedSize ? getMenuItemHeight(resolvedSize) : undefined;
   const value = React.useMemo(
     () => ({ isInsideMenu: true, size: resolvedSize, itemHeight }),
     [resolvedSize, itemHeight],

package/src/components/_internal/pane-chrome.tsx

@@ -45,11 +45,34 @@ function PaneChromeScope({ children, presentation }: { children: React.ReactNode
 
 function useChromeClasses() {
   const visual = useSidebarVisual();
-  const size = visual?.size ?? '2';
+  // A pane with no scope (Inspector, Bottom) still takes the Shell's index.
+  const shellSize = React.useContext(ShellSizeContext);
+  const size = visual?.size ?? shellSize;
   const menuVariant = visual?.menuVariant ?? 'soft';
   return ['rt-ShellPaneChrome', `rt-r-size-${size}`, `rt-menu-variant-${menuVariant}`];
 }
 
+type BandSize = '1' | '2' | '3' | '4';
+
+/**
+ * The index a Toolbar in a pane's header or footer rests at when it states none: one step above
+ * the Shell's, so the band reads as chrome over the rows (v2 BAND_STEP). 4 has no step above.
+ */
+const BAND_STEP = { '1': '2', '2': '3', '3': '4', '4': '4' } as const satisfies Record<BandSize, BandSize>;
+
+/** Set by `Shell.PaneHeader` and `Shell.PaneFooter`; read by Toolbar as its fallback size. Null elsewhere. */
+const PaneBandSizeContext = React.createContext<BandSize | null>(null);
+
+function usePaneBandSize() {
+  return React.useContext(PaneBandSizeContext);
+}
+
+function useBandSize(): BandSize {
+  const visual = useSidebarVisual();
+  const shellSize = React.useContext(ShellSizeContext);
+  return BAND_STEP[visual?.size ?? shellSize];
+}
+
 interface PaneHeaderProps extends React.ComponentPropsWithoutRef<'div'> {
   /**
    * Floats the row over the top of `Shell.Scroll`, so the list scrolls behind it. The list
@@ -61,15 +84,18 @@ interface PaneHeaderProps extends React.ComponentPropsWithoutRef<'div'> {
 }
 
 /** A pane's header row, pinned above its scrolling region. */
-const PaneHeader = React.forwardRef<HTMLDivElement, PaneHeaderProps>(({ className, float, ...props }, forwardedRef) => {
+const PaneHeader = React.forwardRef<HTMLDivElement, PaneHeaderProps>(({ className, float, children, ...props }, forwardedRef) => {
   const chrome = useChromeClasses();
+  const band = useBandSize();
   return (
     <div
       {...props}
       ref={forwardedRef}
       data-float={float || undefined}
       className={classNames('rt-ShellPaneHeader', 'rt-SidebarHeader', 'rt-SidebarHeader--container', ...chrome, className)}
-    />
+    >
+      <PaneBandSizeContext.Provider value={band}>{children}</PaneBandSizeContext.Provider>
+    </div>
   );
 });
 PaneHeader.displayName = 'Shell.PaneHeader';
@@ -80,15 +106,18 @@ interface PaneFooterProps extends React.ComponentPropsWithoutRef<'div'> {
 }
 
 /** A pane's footer row, pinned below its scrolling region. */
-const PaneFooter = React.forwardRef<HTMLDivElement, PaneFooterProps>(({ className, float, ...props }, forwardedRef) => {
+const PaneFooter = React.forwardRef<HTMLDivElement, PaneFooterProps>(({ className, float, children, ...props }, forwardedRef) => {
   const chrome = useChromeClasses();
+  const band = useBandSize();
   return (
     <div
       {...props}
       ref={forwardedRef}
       data-float={float || undefined}
       className={classNames('rt-ShellPaneFooter', 'rt-SidebarFooter', 'rt-SidebarFooter--container', ...chrome, className)}
-    />
+    >
+      <PaneBandSizeContext.Provider value={band}>{children}</PaneBandSizeContext.Provider>
+    </div>
   );
 });
 PaneFooter.displayName = 'Shell.PaneFooter';
@@ -107,12 +136,15 @@ const Scroll = React.forwardRef<HTMLDivElement, ScrollProps>(({ className, child
   return (
     <ScrollArea type="hover" fade={fade} className="rt-ShellScroll">
       <div {...props} ref={forwardedRef} className={classNames('rt-BaseMenuContent', 'rt-SidebarContent', ...chrome, className)}>
-        <div className="rt-BaseMenuViewport">{children}</div>
+        {/* A header's band does not reach a Toolbar in the scrolling list. */}
+        <PaneBandSizeContext.Provider value={null}>
+          <div className="rt-BaseMenuViewport">{children}</div>
+        </PaneBandSizeContext.Provider>
       </div>
     </ScrollArea>
   );
 });
 Scroll.displayName = 'Shell.Scroll';
 
-export { SidebarVisualContext, useSidebarVisual, ShellSizeContext, PaneChromeScope, PaneHeader, PaneFooter, Scroll };
-export type { SidebarVisualContextValue, PaneSize, PaneHeaderProps, PaneFooterProps, ScrollProps };
+export { SidebarVisualContext, useSidebarVisual, ShellSizeContext, PaneChromeScope, PaneHeader, PaneFooter, Scroll, BAND_STEP, usePaneBandSize };
+export type { SidebarVisualContextValue, PaneSize, BandSize, PaneHeaderProps, PaneFooterProps, ScrollProps };