@womp/kookie-ui 0.25.0 → 0.25.2

package/src/components/notice.tsx

@@ -23,7 +23,7 @@ import classNames from 'classnames';
 
 import { Button } from './button.js';
 import { Text } from './text.js';
-import { ThemeSizeContext, useThemeSize } from '../helpers/theme-size.js';
+import { ThemeSizeContext, useThemeSize } from '../hooks/theme-size.js';
 import { accentColorPropDef } from '../props/color.prop.js';
 
 type NoticeSize = '1' | '2' | '3' | '4';

package/src/components/popover.css

@@ -35,16 +35,18 @@
 }
 
 .kui-PopoverToolbarSection {
+  /* Each section owns a column on the one row, whichever sections are present and in any order. */
+  grid-row: 1;
   display: flex;
   align-items: center;
   gap: var(--space-3);
 }
 
-.kui-PopoverToolbarLeft { justify-self: start; }
+.kui-PopoverToolbarLeft { grid-column: 1; justify-self: start; }
 
 .kui-PopoverToolbarCenter { grid-column: 2; justify-self: center; min-width: 0; text-align: center; }
 
-.kui-PopoverToolbarRight { justify-self: end; }
+.kui-PopoverToolbarRight { grid-column: 3; justify-self: end; }
 
 .kui-PopoverToolbarTitle {
   display: inline-block;

package/src/components/popover.tsx

@@ -3,7 +3,7 @@ import classNames from 'classnames';
 import { Popover as PopoverPrimitive } from 'radix-ui';
 
 import { extractProps } from '../helpers/extract-props.js';
-import { useThemeSizeProps } from '../helpers/theme-size.js';
+import { useThemeSizeProps } from '../hooks/theme-size.js';
 import { requireReactElement } from '../helpers/require-react-element.js';
 import { popoverContentPropDefs } from './popover.props.js';
 import { Theme } from './theme.js';

package/src/components/radio-group.tsx

@@ -8,7 +8,7 @@ import { RadioGroup as RadioGroupPrimitive } from 'radix-ui';
 import { radioGroupRootPropDefs } from './radio-group.props.js';
 import { Text } from './text.js';
 import { extractProps } from '../helpers/extract-props.js';
-import { useThemeSize } from '../helpers/theme-size.js';
+import { useThemeSize } from '../hooks/theme-size.js';
 
 import type { ComponentPropsWithout, RemovedProps } from '../helpers/component-props.js';
 import type { GetPropDefTypes } from '../props/prop-def.js';

package/src/components/radio.tsx

@@ -6,7 +6,7 @@ import { composeEventHandlers } from 'radix-ui/internal';
 
 import { radioPropDefs } from './radio.props.js';
 import { extractProps } from '../helpers/extract-props.js';
-import { useThemeSizeProps } from '../helpers/theme-size.js';
+import { useThemeSizeProps } from '../hooks/theme-size.js';
 
 import type { ComponentPropsWithout } from '../helpers/component-props.js';
 import type { NotInputRadioAttributes } from '../helpers/input-attributes.js';

package/src/components/segmented-control.tsx

@@ -7,7 +7,7 @@ import { useComposedRefs, useControllableState, useLayoutEffect } from 'radix-ui
 
 import { segmentedControlRootPropDefs } from './segmented-control.props.js';
 import { extractProps } from '../helpers/extract-props.js';
-import { useThemeSizeProps } from '../helpers/theme-size.js';
+import { useThemeSizeProps } from '../hooks/theme-size.js';
 
 import type { ComponentPropsWithout, RemovedProps } from '../helpers/component-props.js';
 import type { GetPropDefTypes } from '../props/prop-def.js';

package/src/components/select.tsx

@@ -5,7 +5,7 @@ import classNames from 'classnames';
 import { Select as SelectPrimitive, ScrollArea as ScrollAreaPrimitive } from 'radix-ui';
 
 import { extractProps } from '../helpers/extract-props.js';
-import { useThemeSize } from '../helpers/theme-size.js';
+import { useThemeSize } from '../hooks/theme-size.js';
 import { ChevronDownIcon, ThickCheckIcon } from './icons.js';
 import { Spinner } from './spinner.js';
 import {

package/src/components/sheet.css

@@ -1,4 +1,6 @@
-:where(.kui-SheetContent) {
+/* The class sits outside :where() so the 90vw default outranks the dialog's width: 100% in
+   base-dialog.css (same weight, later in the cascade). The width prop sets --width. */
+.kui-SheetContent {
   position: fixed !important;
   /* Use physical properties to integrate with width/height responsive utilities */
   width: var(--width, 90vw);
@@ -11,7 +13,7 @@
 
 /* iOS dynamic viewport height - accounts for browser chrome */
 @supports (height: 100dvh) {
-  :where(.kui-SheetContent) {
+  .kui-SheetContent {
     height: 100dvh;
     max-height: 100dvh;
   }

package/src/components/sheet.tsx

@@ -42,7 +42,7 @@ import { Theme } from './theme.js';
 import { Heading } from './heading.js';
 import { Text } from './text.js';
 import { extractProps } from '../helpers/extract-props.js';
-import { useThemeSizeProps } from '../helpers/theme-size.js';
+import { useThemeSizeProps } from '../hooks/theme-size.js';
 import { requireReactElement } from '../helpers/require-react-element.js';
 import { useBodyPointerEventsCleanup } from '../hooks/use-body-pointer-events-cleanup.js';
 

package/src/components/shell.css

@@ -249,13 +249,18 @@
   z-index: 1;
   pointer-events: none;
 
-  & > :where(*),
-  & > :where(.kui-Toolbar) > :where(*) {
+  & > :where(*) {
     pointer-events: auto;
   }
+  /* A Toolbar spans the row, and so may a cluster inside it. pointer-events inherits, so the
+     Toolbar passes clicks through and only its controls and groups take them back: the empty
+     stretch between them lets clicks reach the content. */
   & > :where(.kui-Toolbar) {
     pointer-events: none;
   }
+  & > :where(.kui-Toolbar) :where(.kui-ToolbarGroup, .kui-BaseButton, .kui-TextFieldRoot, .kui-SelectTrigger, .kui-SegmentedControlRoot, [href], [tabindex]) {
+    pointer-events: auto;
+  }
 }
 .kui-ShellPaneHeader[data-float] {
   top: 0;

package/src/components/shell.tsx

@@ -51,7 +51,7 @@ import { navigationRest, detailRest, toPaneValue, startAnchoredGrowth, withoutRe
 import { useShell, useSidebarMode } from './shell.context.js';
 import { useResponsivePresentation } from './shell.hooks.js';
 import { readBreakpoint } from '../hooks/use-breakpoint.js';
-import { useThemeSize } from '../helpers/theme-size.js';
+import { useThemeSize } from '../hooks/theme-size.js';
 import { PaneChromeScope, PaneFooter, PaneHeader, Scroll, ShellContentContext, ShellSizeContext } from './_internal/pane-chrome.js';
 import type { PaneSize, PaneHeaderProps, PaneFooterProps, ScrollProps } from './_internal/pane-chrome.js';
 import type { Breakpoint, CSSPropertiesWithVars, PaneBaseProps, PaneMode, PaneName, PaneTarget, ResponsivePresentation, SidebarMode } from './shell.types.js';

package/src/components/sidebar.css

@@ -337,6 +337,11 @@
   & :where(.kui-SidebarMenuButton) {
     flex: 1;
   }
+
+  /* A Toolbar fills the header, so its leading and trailing groups sit at the two ends. */
+  & > :where(.kui-Toolbar) {
+    flex: 1;
+  }
 }
 
 .kui-SidebarFooter:where(.kui-SidebarFooter--container) {
@@ -351,6 +356,11 @@
   & :where(.kui-SidebarMenuButton) {
     flex: 1;
   }
+
+  /* A Toolbar fills the footer, so its leading and trailing groups sit at the two ends. */
+  & > :where(.kui-Toolbar) {
+    flex: 1;
+  }
 }
 
 /* Header/Footer Menu Button Support */

package/src/components/sidebar.tsx

@@ -333,6 +333,18 @@ function toDropdownItem(node: React.ReactNode, key: React.Key): React.ReactNode
   return <DropdownMenu.Item key={key}>{node}</DropdownMenu.Item>;
 }
 
+// The sub-list is a <ul>, so each row needs its own <li>. A MenuButton written straight into
+// MenuSubContent gets a MenuItem around it, rather than leaving an <a> or <button> in the list.
+function wrapBareMenuButtons(children: React.ReactNode): React.ReactNode {
+  return React.Children.map(children, (child, index) =>
+    React.isValidElement(child) && child.type === SidebarMenuButton ? (
+      <SidebarMenuItem key={child.key ?? index}>{child}</SidebarMenuItem>
+    ) : (
+      child
+    ),
+  );
+}
+
 const SidebarMenuSubContent = React.forwardRef<React.ElementRef<typeof Accordion.Content>, SidebarMenuSubContentProps>(({ className, children, ...props }, forwardedRef) => {
   const visual = useSidebarVisual();
   const mode = React.useContext(SidebarSubMenuModeContext);
@@ -360,7 +372,7 @@ const SidebarMenuSubContent = React.forwardRef<React.ElementRef<typeof Accordion
 
   return (
     <Accordion.Content {...props} ref={forwardedRef} className={classNames('kui-SidebarMenuSubContent', className)}>
-      <ul className="kui-SidebarMenuSubList">{children}</ul>
+      <ul className="kui-SidebarMenuSubList">{wrapBareMenuButtons(children)}</ul>
     </Accordion.Content>
   );
 });
@@ -473,6 +485,9 @@ const SidebarSearch = React.forwardRef<HTMLDivElement, SidebarSearchProps>(
     // Arrow key navigation within the popover (input ↔ results)
     const handlePopoverKeyDown = React.useCallback(
       (e: React.KeyboardEvent<HTMLDivElement>) => {
+        // A result row already moved focus with its own arrow handling (focusAdjacentSidebarButton
+        // scopes to this popover); moving again would skip a row.
+        if (e.defaultPrevented) return;
         const container = popoverRef.current;
         if (!container) return;
 

package/src/components/slider.tsx

@@ -4,7 +4,7 @@ import { Direction, Slider as SliderPrimitive } from 'radix-ui';
 
 import { sliderPropDefs } from './slider.props.js';
 import { extractProps } from '../helpers/extract-props.js';
-import { useThemeSizeProps } from '../helpers/theme-size.js';
+import { useThemeSizeProps } from '../hooks/theme-size.js';
 
 import type { ComponentPropsWithout } from '../helpers/component-props.js';
 import type { GetPropDefTypes } from '../props/prop-def.js';

package/src/components/switch.tsx

@@ -3,7 +3,7 @@ import classNames from 'classnames';
 import { Switch as SwitchPrimitive } from 'radix-ui';
 
 import { extractProps } from '../helpers/extract-props.js';
-import { useThemeSizeProps } from '../helpers/theme-size.js';
+import { useThemeSizeProps } from '../hooks/theme-size.js';
 import { switchPropDefs } from './switch.props.js';
 
 import type { GetPropDefTypes } from '../props/prop-def.js';

package/src/components/table.tsx

@@ -3,7 +3,7 @@ import classNames from 'classnames';
 
 import { tableRootPropDefs, tableRowPropDefs, tableCellPropDefs } from './table.props.js';
 import { extractProps } from '../helpers/extract-props.js';
-import { useThemeSizeProps } from '../helpers/theme-size.js';
+import { useThemeSizeProps } from '../hooks/theme-size.js';
 import { getResponsiveClassNames } from '../helpers/get-responsive-styles.js';
 import { ScrollArea } from './scroll-area.js';
 

package/src/components/tabs.tsx

@@ -4,7 +4,7 @@ import { Tabs as TabsPrimitive } from 'radix-ui';
 
 import { tabsListPropDefs } from './tabs.props.js';
 import { extractProps } from '../helpers/extract-props.js';
-import { useThemeSizeProps } from '../helpers/theme-size.js';
+import { useThemeSizeProps } from '../hooks/theme-size.js';
 
 import type { tabsContentPropDefs, tabsRootPropDefs } from './tabs.props.js';
 import type { ComponentPropsWithout, RemovedProps } from '../helpers/component-props.js';

package/src/components/text-area.tsx

@@ -3,7 +3,7 @@ import classNames from 'classnames';
 
 import { textAreaPropDefs } from './text-area.props.js';
 import { extractProps } from '../helpers/extract-props.js';
-import { useThemeSizeProps } from '../helpers/theme-size.js';
+import { useThemeSizeProps } from '../hooks/theme-size.js';
 
 import type { ComponentPropsWithout, RemovedProps } from '../helpers/component-props.js';
 import type { GetPropDefTypes } from '../props/prop-def.js';

package/src/components/text-field.tsx

@@ -7,7 +7,7 @@ import { composeEventHandlers, composeRefs } from 'radix-ui/internal';
 
 import { textFieldRootPropDefs, textFieldSlotPropDefs, type TextFieldSlotScrubProps } from './text-field.props.js';
 import { extractProps } from '../helpers/extract-props.js';
-import { useThemeSizeProps } from '../helpers/theme-size.js';
+import { useThemeSizeProps } from '../hooks/theme-size.js';
 
 import type { ComponentPropsWithout, RemovedProps } from '../helpers/component-props.js';
 import type { NotInputTextualAttributes } from '../helpers/input-attributes.js';

package/src/components/theme.tsx

@@ -5,7 +5,7 @@ import classNames from 'classnames';
 import { Direction, Slot } from 'radix-ui';
 
 import { getMatchingGrayColor } from '../helpers/get-matching-gray-color.js';
-import { ThemeSizeContext } from '../helpers/theme-size.js';
+import { ThemeSizeContext } from '../hooks/theme-size.js';
 import { usePropSyncedState } from '../hooks/use-prop-synced-state.js';
 import { themePropDefs } from './theme.props.js';
 

package/src/components/toolbar.tsx

@@ -10,7 +10,7 @@ import { Button } from './button.js';
 import * as DropdownMenu from './dropdown-menu.js';
 import { Text } from './text.js';
 import { extractProps } from '../helpers/extract-props.js';
-import { useThemeSize } from '../helpers/theme-size.js';
+import { useThemeSize } from '../hooks/theme-size.js';
 import { layoutPropDefs } from '../props/layout.props.js';
 import { usePaneBandSize } from './_internal/pane-chrome.js';
 
@@ -197,6 +197,9 @@ type ToolbarIconButtonProps = Omit<ToolbarButtonBaseProps, 'aria-label' | 'aria-
 
 type ToolbarButtonProps = ToolbarTextButtonProps | ToolbarIconButtonProps;
 
+/** The plain DOM props, besides handlers, ARIA and data attributes, a menu row takes from a ToolbarButton. */
+const OVERFLOW_ITEM_KEYS = new Set(['id', 'className', 'style', 'title']);
+
 function isPressed(value: React.AriaAttributes['aria-pressed']) {
   return value === true || value === 'true';
 }
@@ -231,15 +234,21 @@ const ToolbarButton = React.forwardRef<HTMLButtonElement, ToolbarButtonProps>((p
   const off = disabled || group?.disabled || undefined;
 
   if (overflow) {
+    // Only what a menu row means comes across: handlers, ARIA, data attributes, id, class and
+    // style. Button's box props (size, loading, tooltip, fullWidth and the rest) would land on the
+    // DOM as unknown attributes. A wrapping menu trigger hands its open handlers (onPointerDown,
+    // onKeyDown), aria-expanded/haspopup/controls and data-state in through these, so it still
+    // opens from the row.
+    const passed: Record<string, unknown> = {};
+    for (const key of Object.keys(rest)) {
+      if (/^on[A-Z]/.test(key) || key.startsWith('aria-') || key.startsWith('data-') || OVERFLOW_ITEM_KEYS.has(key)) {
+        passed[key] = (rest as Record<string, unknown>)[key];
+      }
+    }
+    if (onKeyDown) passed.onKeyDown = onKeyDown;
     return (
       <ToolbarOverflowItem
-        // Only what a menu row means comes across; Button's box props (size, loading,
-        // tooltip, fullWidth and the rest) would land on the DOM as unknown attributes.
-        id={rest.id}
-        className={rest.className}
-        style={rest.style}
-        onClick={rest.onClick as React.MouseEventHandler<HTMLDivElement> | undefined}
-        aria-label={rest['aria-label']}
+        {...(passed as React.ComponentPropsWithoutRef<'div'>)}
         ref={forwardedRef as unknown as React.Ref<HTMLDivElement>}
         asChild={asChild}
         iconOnly={iconOnly}

package/src/helpers/index.ts

@@ -14,3 +14,6 @@ export * from './merge-styles.js';
 export * from './normalize-to-px.js';
 export * from './require-react-element.js';
 export * from './theme-size.js';
+// The context and its hooks are client code. The server-safe build keeps this import external, so
+// `/helpers` shares the one context the components read and stays loadable from a server component.
+export { ThemeSizeContext, useThemeSize, useThemeSizeProps } from '../hooks/theme-size.js';

package/src/helpers/theme-size.ts

@@ -1,26 +1,16 @@
-'use client';
-
-import * as React from 'react';
+/**
+ * The pure half of the theme size: the type, the default and the clamp. Server-safe.
+ *
+ * The context and the hooks that read it live in `hooks/theme-size.ts`, a client module, so there
+ * is one `ThemeSizeContext` and importing `/helpers` from a server component does not call
+ * `createContext`.
+ */
 
 type ThemeSize = '1' | '2' | '3' | '4';
 
 /** The rest of the 1-4 index when no Theme states a size. */
 const THEME_SIZE_DEFAULT: ThemeSize = '2';
 
-/**
- * The app-wide size index, provided by `Theme` beside `ThemeContext`.
- *
- * It is its own context, holding one string, so a component that only needs
- * the size does not re-render when the accent colour or appearance changes.
- */
-const ThemeSizeContext = React.createContext<ThemeSize>(THEME_SIZE_DEFAULT);
-ThemeSizeContext.displayName = 'ThemeSizeContext';
-
-interface SizePropDef {
-  values: readonly string[];
-  default?: string;
-}
-
 /**
  * Maps the theme size onto a component's own range: the value itself when the
  * component has it, otherwise the nearest end of the range (`4` on a 1-3 scale
@@ -41,33 +31,5 @@ function clampSize(size: ThemeSize, values: readonly string[]): string {
   return nearest;
 }
 
-/**
- * The size a component on the 1-4 index takes: what the caller said, else the
- * nearest Theme's size, mapped into the component's range.
- */
-function useThemeSize<V>(explicit: V | undefined, propDef: SizePropDef): V {
-  const themeSize = React.useContext(ThemeSizeContext);
-  if (explicit !== undefined) return explicit;
-  // The clamped value is one of `propDef.values`, which is what `V` ranges over.
-  return clampSize(themeSize, propDef.values) as V;
-}
-
-/**
- * Fills `size` from the nearest Theme when the caller left it unset, so the
- * result can go straight into `extractProps`. An explicit size, responsive
- * object included, wins.
- *
- * Returns the same props object when there is nothing to fill: when a size is
- * set, or when the theme size resolves to the prop def's own default (the
- * common case, a Theme with no size), so `extractProps` applies it as before.
- */
-function useThemeSizeProps<P extends { size?: unknown }>(props: P, propDef: SizePropDef): P {
-  const themeSize = React.useContext(ThemeSizeContext);
-  if (props.size !== undefined) return props;
-  const size = clampSize(themeSize, propDef.values);
-  if (size === propDef.default) return props;
-  return { ...props, size };
-}
-
-export { ThemeSizeContext, THEME_SIZE_DEFAULT, clampSize, useThemeSize, useThemeSizeProps };
+export { THEME_SIZE_DEFAULT, clampSize };
 export type { ThemeSize };

package/src/hooks/theme-size.ts

@@ -0,0 +1,50 @@
+'use client';
+
+import * as React from 'react';
+
+import { THEME_SIZE_DEFAULT, clampSize } from '../helpers/theme-size.js';
+import type { ThemeSize } from '../helpers/theme-size.js';
+
+/**
+ * The app-wide size index, provided by `Theme` beside `ThemeContext`.
+ *
+ * It is its own context, holding one string, so a component that only needs
+ * the size does not re-render when the accent colour or appearance changes.
+ */
+const ThemeSizeContext = React.createContext<ThemeSize>(THEME_SIZE_DEFAULT);
+ThemeSizeContext.displayName = 'ThemeSizeContext';
+
+interface SizePropDef {
+  values: readonly string[];
+  default?: string;
+}
+
+/**
+ * The size a component on the 1-4 index takes: what the caller said, else the
+ * nearest Theme's size, mapped into the component's range.
+ */
+function useThemeSize<V>(explicit: V | undefined, propDef: SizePropDef): V {
+  const themeSize = React.useContext(ThemeSizeContext);
+  if (explicit !== undefined) return explicit;
+  // The clamped value is one of `propDef.values`, which is what `V` ranges over.
+  return clampSize(themeSize, propDef.values) as V;
+}
+
+/**
+ * Fills `size` from the nearest Theme when the caller left it unset, so the
+ * result can go straight into `extractProps`. An explicit size, responsive
+ * object included, wins.
+ *
+ * Returns the same props object when there is nothing to fill: when a size is
+ * set, or when the theme size resolves to the prop def's own default (the
+ * common case, a Theme with no size), so `extractProps` applies it as before.
+ */
+function useThemeSizeProps<P extends { size?: unknown }>(props: P, propDef: SizePropDef): P {
+  const themeSize = React.useContext(ThemeSizeContext);
+  if (props.size !== undefined) return props;
+  const size = clampSize(themeSize, propDef.values);
+  if (size === propDef.default) return props;
+  return { ...props, size };
+}
+
+export { ThemeSizeContext, useThemeSize, useThemeSizeProps };

package/src/styles/tokens/color.css

@@ -8,6 +8,8 @@
   --color-page: white;
   --color-overlay: var(--black-a6);
   --color-surface: white;
+  /* The ground a raised surface sits on: one step below it, so a white card reads as lifted. */
+  --color-ground: var(--neutral-1, var(--gray-1));
 
   /*
    * The neutral scale, named as in v2. It defaults to the plain gray palette; a Theme grayColor
@@ -49,6 +51,7 @@
   --color-page: var(--neutral-1, var(--gray-1));
   --color-overlay: var(--black-a8);
   --color-surface: var(--neutral-2, var(--gray-2));
+  --color-ground: var(--neutral-1, var(--gray-1));
 }
 
 /*                                     */

package/styles.css

@@ -3377,6 +3377,7 @@
   --color-page: white;
   --color-overlay: var(--black-a6);
   --color-surface: white;
+  --color-ground: var(--neutral-1, var(--gray-1));
   --color-text: var(--neutral-12);
   --neutral-1: var(--gray-1);
   --neutral-2: var(--gray-2);
@@ -3457,6 +3458,7 @@
   --color-page: var(--neutral-1, var(--gray-1));
   --color-overlay: var(--black-a8);
   --color-surface: var(--neutral-2, var(--gray-2));
+  --color-ground: var(--neutral-1, var(--gray-1));
   --solid-chroma-hover-filter: none;
   --solid-chroma-active-filter: brightness(0.88) contrast(1.03);
   --solid-chroma-open-filter: brightness(0.95) contrast(1.02);
@@ -12628,6 +12630,7 @@
   background-color: var(--color-surface);
 }
 .kui-PopoverToolbarSection {
+  grid-row: 1;
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
@@ -12637,6 +12640,7 @@
   gap: var(--space-3);
 }
 .kui-PopoverToolbarLeft {
+  grid-column: 1;
   justify-self: start;
 }
 .kui-PopoverToolbarCenter {
@@ -12646,6 +12650,7 @@
   text-align: center;
 }
 .kui-PopoverToolbarRight {
+  grid-column: 3;
   justify-self: end;
 }
 .kui-PopoverToolbarTitle {
@@ -13235,7 +13240,7 @@
     background-color: GrayText;
   }
 }
-:where(.kui-SheetContent) {
+.kui-SheetContent {
   position: fixed !important;
   width: var(--width, 90vw);
   max-width: min(var(--overlay-w), 100vw);
@@ -13244,7 +13249,7 @@
   margin: 0 !important;
 }
 @supports (height: 100dvh) {
-  :where(.kui-SheetContent) {
+  .kui-SheetContent {
     height: 100dvh;
     max-height: 100dvh;
   }
@@ -16039,6 +16044,11 @@
       -ms-flex: 1;
           flex: 1;
 }
+.kui-SidebarHeader:where(.kui-SidebarHeader--container) > :where(.kui-Toolbar) {
+  -webkit-box-flex: 1;
+      -ms-flex: 1;
+          flex: 1;
+}
 .kui-SidebarFooter:where(.kui-SidebarFooter--container) {
   display: -webkit-box;
   display: -ms-flexbox;
@@ -16059,6 +16069,11 @@
       -ms-flex: 1;
           flex: 1;
 }
+.kui-SidebarFooter:where(.kui-SidebarFooter--container) > :where(.kui-Toolbar) {
+  -webkit-box-flex: 1;
+      -ms-flex: 1;
+          flex: 1;
+}
 .kui-SidebarHeader :where(.kui-SidebarMenuButton),
 .kui-SidebarFooter :where(.kui-SidebarMenuButton) {
   display: -webkit-box;
@@ -17113,12 +17128,15 @@
   z-index: 1;
   pointer-events: none;
 }
-:is(.kui-ShellPaneHeader[data-float],.kui-ShellPaneFooter[data-float]) > :where(*),:is(.kui-ShellPaneHeader[data-float],.kui-ShellPaneFooter[data-float]) > :where(.kui-Toolbar) > :where(*) {
+:is(.kui-ShellPaneHeader[data-float],.kui-ShellPaneFooter[data-float]) > :where(*) {
   pointer-events: auto;
 }
 :is(.kui-ShellPaneHeader[data-float],.kui-ShellPaneFooter[data-float]) > :where(.kui-Toolbar) {
   pointer-events: none;
 }
+:is(.kui-ShellPaneHeader[data-float],.kui-ShellPaneFooter[data-float]) > :where(.kui-Toolbar) :where(.kui-ToolbarGroup,.kui-BaseButton,.kui-TextFieldRoot,.kui-SelectTrigger,.kui-SegmentedControlRoot,[href],[tabindex]) {
+  pointer-events: auto;
+}
 .kui-ShellPaneHeader[data-float] {
   top: 0;
 }

package/tokens/base.css

@@ -61,6 +61,7 @@
   --color-page: white;
   --color-overlay: var(--black-a6);
   --color-surface: white;
+  --color-ground: var(--neutral-1, var(--gray-1));
   --color-text: var(--neutral-12);
   --neutral-1: var(--gray-1);
   --neutral-2: var(--gray-2);
@@ -108,6 +109,7 @@
   --color-page: var(--neutral-1, var(--gray-1));
   --color-overlay: var(--black-a8);
   --color-surface: var(--neutral-2, var(--gray-2));
+  --color-ground: var(--neutral-1, var(--gray-1));
   --solid-chroma-hover-filter: none;
   --solid-chroma-active-filter: brightness(0.88) contrast(1.03);
   --solid-chroma-open-filter: brightness(0.95) contrast(1.02);

package/tokens.css

@@ -3377,6 +3377,7 @@
   --color-page: white;
   --color-overlay: var(--black-a6);
   --color-surface: white;
+  --color-ground: var(--neutral-1, var(--gray-1));
   --color-text: var(--neutral-12);
   --neutral-1: var(--gray-1);
   --neutral-2: var(--gray-2);
@@ -3454,6 +3455,7 @@
   --color-page: var(--neutral-1, var(--gray-1));
   --color-overlay: var(--black-a8);
   --color-surface: var(--neutral-2, var(--gray-2));
+  --color-ground: var(--neutral-1, var(--gray-1));
   --solid-chroma-hover-filter: none;
   --solid-chroma-active-filter: brightness(0.88) contrast(1.03);
   --solid-chroma-open-filter: brightness(0.95) contrast(1.02);