@womp/kookie-ui 0.35.0 → 0.35.2

package/src/components/_internal/base-card.css

@@ -163,7 +163,7 @@
 
   /* Focus */
   &:where(:focus-visible) {
-    outline: 2px solid var(--v-focus-color);
+    outline: var(--focus-ring-width) solid var(--v-focus-color);
     outline-offset: var(--v-focus-offset);
 
     &::after {
@@ -273,7 +273,7 @@
 
   /* Focus */
   &:where(:focus-visible) {
-    outline: 2px solid var(--v-focus-color);
+    outline: var(--focus-ring-width) solid var(--v-focus-color);
     outline-offset: var(--v-focus-offset);
   }
 
@@ -338,7 +338,7 @@
   }
 
   &:where(:focus-visible) {
-    outline: 2px solid var(--focus-8);
+    outline: var(--focus-ring-width) solid var(--focus-8);
     outline-offset: 2px;
   }
 

package/src/components/_internal/base-menu.css

@@ -347,7 +347,7 @@
 /* Forced colors support */
 @media (forced-colors: active) {
   .kui-BaseMenuItem:where(:focus-visible) {
-    outline: 2px solid Highlight;
+    outline: var(--focus-ring-width) solid Highlight;
     outline-offset: 2px;
   }
 

package/src/components/_internal/base-sidebar-menu.css

@@ -66,7 +66,7 @@
 
   /* Focus state */
   &:where(:focus-visible) {
-    outline: 2px solid var(--focus-8);
+    outline: var(--focus-ring-width) solid var(--focus-8);
     outline-offset: 2px;
   }
 

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

@@ -228,7 +228,7 @@
   }
 
   .kui-BaseTabListTrigger:where(:focus-visible) :where(.kui-BaseTabListTriggerInner) {
-    outline: 2px solid Highlight;
+    outline: var(--focus-ring-width) solid Highlight;
     outline-offset: 2px;
   }
 }

package/src/components/accordion.css

@@ -190,7 +190,7 @@
 
 /* Trigger focus states */
 :where(.kui-AccordionTrigger:focus-visible) {
-  outline: var(--focus-outline-width) solid var(--focus-8);
+  outline: var(--focus-ring-width) solid var(--focus-8);
   outline-offset: var(--focus-outline-offset-inset);
 }
 
@@ -246,7 +246,7 @@
   }
 
   :where(.kui-AccordionTrigger:focus-visible) {
-    outline: 2px solid CanvasText;
+    outline: var(--focus-ring-width) solid CanvasText;
     outline-offset: 2px;
   }
 

package/src/components/alert-dialog.tsx

@@ -9,7 +9,7 @@ import { PortalTheme } from './_internal/portal-theme.js';
 import { extractProps } from '../helpers/extract-props.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';
+import { releaseBodyPointerEvents, useBodyPointerEventsCleanup } from '../hooks/use-body-pointer-events-cleanup.js';
 
 import type { AlertDialogContentOwnProps } from './alert-dialog.props.js';
 import type { ComponentPropsWithout, RemovedProps, ComponentPropsAs } from '../helpers/component-props.js';
@@ -61,7 +61,7 @@ const AlertDialogContent = React.forwardRef<AlertDialogContentElement, AlertDial
                   // Radix returns focus to the trigger unless the caller prevents it.
                   onCloseAutoFocus?.(event);
                   // Restore pointer-events to body (Radix UI fix for issue #1241)
-                  document.body.style.pointerEvents = '';
+                  releaseBodyPointerEvents();
                 }}
               />
             </div>

package/src/components/avatar.css

@@ -38,8 +38,8 @@
   cursor: pointer;
 
   &:where(:focus-visible) {
-    outline: var(--focus-outline-width) solid var(--focus-8);
-    outline-offset: var(--focus-outline-offset);
+    outline: var(--focus-ring-width) solid var(--focus-8);
+    outline-offset: var(--focus-ring-offset);
   }
 
   /* Disabled is a colour remap: the element still hit-tests, so the cursor stops promising a press. */

package/src/components/card.css

@@ -19,7 +19,7 @@
   --base-card-border-radius: var(--kui-sf-r);
 
   &:where(:focus-visible) {
-    outline: 2px solid var(--focus-8);
+    outline: var(--focus-ring-width) solid var(--focus-8);
     outline-offset: -1px;
 
     &::after {

package/src/components/chatbar.css

@@ -341,7 +341,7 @@
 
   /* Focus state - outline ring (raised has its own box-shadow ring) */
   &:where(:focus-within) {
-    outline: 2px solid var(--v-focus-color, var(--focus-8));
+    outline: var(--focus-ring-width) solid var(--v-focus-color, var(--focus-8));
     outline-offset: -1px;
   }
 }
@@ -417,7 +417,7 @@
     border: 1px solid CanvasText;
   }
   .kui-ChatbarBox:where(.kui-variant-raised):where(:focus-within) {
-    outline: 2px solid Highlight;
+    outline: var(--focus-ring-width) solid Highlight;
     outline-offset: -1px;
   }
   .kui-ChatbarRoot:where([data-disabled]) .kui-ChatbarBox {

package/src/components/combobox.css

@@ -124,7 +124,7 @@
 /* Items never take DOM focus, so the base menu :focus-visible rule never matches. */
 @media (forced-colors: active) {
   .kui-ComboboxItem:where([data-selected='true']) {
-    outline: 2px solid Highlight;
+    outline: var(--focus-ring-width) solid Highlight;
     outline-offset: -2px;
   }
 }

package/src/components/command.css

@@ -187,7 +187,7 @@
 
 @media (forced-colors: active) {
   .kui-CommandItem:where([data-selected='true']) {
-    outline: 2px solid Highlight;
+    outline: var(--focus-ring-width) solid Highlight;
     outline-offset: -2px;
   }
 

package/src/components/command.tsx

@@ -23,7 +23,7 @@ import { Command as CommandPrimitive } from 'cmdk';
 import { Dialog as DialogPrimitive } from 'radix-ui';
 
 import { PortalTheme } from './_internal/portal-theme.js';
-import { useBodyPointerEventsCleanup } from '../hooks/use-body-pointer-events-cleanup.js';
+import { releaseBodyPointerEvents, useBodyPointerEventsCleanup } from '../hooks/use-body-pointer-events-cleanup.js';
 import { useThemeSize } from '../hooks/theme-size.js';
 
 type Size = '1' | '2' | '3' | '4';
@@ -194,7 +194,7 @@ function CommandContent({ 'aria-label': label, filter = defaultFilter, itemToStr
             className={classNames('kui-CommandContent', `kui-r-size-${size}`, className)}
             style={style}
             onCloseAutoFocus={() => {
-              document.body.style.pointerEvents = '';
+              releaseBodyPointerEvents();
             }}
           >
             <DialogPrimitive.Title className="kui-sr-only">{label}</DialogPrimitive.Title>
@@ -304,8 +304,21 @@ interface CommandGroupLabelProps {
 
 /** The group's name, above its rows. */
 function CommandGroupLabel({ children, className }: CommandGroupLabelProps) {
+  const id = React.useId();
+  const ref = React.useRef<HTMLDivElement>(null);
+  // cmdk renders the group's `role="group"` element itself and gives no way to name it from a
+  // child, so the label names it here, as Combobox.Label does. The label stays out of the
+  // reading order: a screen reader hears it as the group's name, not as a row.
+  React.useLayoutEffect(() => {
+    const group = ref.current?.closest('[cmdk-group-items]');
+    if (!group || group.hasAttribute('aria-labelledby')) return;
+    group.setAttribute('aria-labelledby', id);
+    return () => {
+      if (group.getAttribute('aria-labelledby') === id) group.removeAttribute('aria-labelledby');
+    };
+  }, [id]);
   return (
-    <div className={classNames('kui-BaseMenuLabel', 'kui-CommandGroupLabel', className)} aria-hidden>
+    <div ref={ref} id={id} className={classNames('kui-BaseMenuLabel', 'kui-CommandGroupLabel', className)} aria-hidden>
       {children}
     </div>
   );

package/src/components/dialog.tsx

@@ -10,7 +10,7 @@ import { NavigatorHostContext, type NavigatorHost } from './_internal/navigator-
 import { extractProps } from '../helpers/extract-props.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';
+import { releaseBodyPointerEvents, useBodyPointerEventsCleanup } from '../hooks/use-body-pointer-events-cleanup.js';
 
 import type { DialogContentOwnProps } from './dialog.props.js';
 import type { ComponentPropsWithout, RemovedProps, ComponentPropsAs } from '../helpers/component-props.js';
@@ -69,7 +69,7 @@ const DialogContent = React.forwardRef<DialogContentElement, DialogContentProps>
                   // Radix returns focus to the trigger unless the caller prevents it.
                   onCloseAutoFocus?.(event);
                   // Restore pointer-events to body (Radix UI fix for issue #1241)
-                  document.body.style.pointerEvents = '';
+                  releaseBodyPointerEvents();
                 }}
               />
             </div>

package/src/components/kbd.css

@@ -103,7 +103,7 @@
       box-shadow: inset 0 var(--raised-border-width) var(--black-a3), 0 0 0 var(--raised-border-width) var(--neutral-a7);
     }
     &:where(:focus-visible) {
-      outline: 2px solid var(--focus-8);
+      outline: var(--focus-ring-width) solid var(--focus-8);
     }
   }
 }
@@ -124,7 +124,7 @@
       background-color: var(--neutral-a5);
     }
     &:where(:focus-visible) {
-      outline: 2px solid var(--focus-8);
+      outline: var(--focus-ring-width) solid var(--focus-8);
     }
   }
 }

package/src/components/message-scroller.css

@@ -20,7 +20,7 @@
   outline: none;
 
   &:where(:focus-visible) {
-    outline: 2px solid var(--focus-8);
+    outline: var(--focus-ring-width) solid var(--focus-8);
     outline-offset: -2px;
   }
 }

package/src/components/navigator.css

@@ -80,6 +80,6 @@
 }
 
 .kui-NavigatorLink:where(:focus-visible) {
-  outline: 2px solid var(--focus-8);
+  outline: var(--focus-ring-width) solid var(--focus-8);
   outline-offset: -2px;
 }

package/src/components/navigator.tsx

@@ -85,7 +85,12 @@ function Level({ visible, children }: { visible: boolean; children: React.ReactN
 }
 
 interface NavigatorProps<T> {
-  /** The screens above the root, as values. Use it with `onPathChange` to control the path. */
+  /**
+   * The screens above the root, as values. Use it with `onPathChange` to control the path. Each
+   * value is a string or a number: a screen is told apart by its value, and every object reads the
+   * same, so an object here would hand one screen's state to the next. Keep an id in the path and
+   * look the record up in `screen`.
+   */
   path?: readonly T[];
   /** The path to start with when the navigator controls its own path. */
   defaultPath?: readonly T[];
@@ -125,6 +130,14 @@ function Navigator<T>({ path: pathProp, defaultPath, onPathChange, screen, root,
     direction = path.length < before.length ? 'pop' : path.length > before.length || !Object.is(path[path.length - 1], before[before.length - 1]) ? 'push' : seen.direction;
     setSeen({ path, direction });
   }
+  // A screen's key is its depth and its value as text, and every object is the same text.
+  React.useEffect(() => {
+    if (process.env.NODE_ENV === 'production') return;
+    if (path.some((value) => value !== null && typeof value === 'object')) {
+      console.error('Navigator: a value in `path` is an object. Path values must be strings or numbers; keep an id in the path and look the record up in `screen`.');
+    }
+  }, [path]);
+
   const titles = React.useRef<(string | undefined)[]>([]);
   const openers = React.useRef<(HTMLElement | null)[]>([]);
   const [version, setVersion] = React.useState(0);

package/src/components/scroll-area.css

@@ -60,7 +60,7 @@
     position: absolute;
     inset: 0;
     pointer-events: none;
-    outline: 2px solid var(--focus-8);
+    outline: var(--focus-ring-width) solid var(--focus-8);
     outline-offset: -2px;
   }
 }

package/src/components/select.css

@@ -21,7 +21,7 @@
   }
 
   &:where(:focus-visible) {
-    outline: var(--focus-outline-width) solid var(--focus-8);
+    outline: var(--focus-ring-width) solid var(--focus-8);
     outline-offset: var(--focus-outline-offset-inset);
   }
 }
@@ -203,7 +203,7 @@
   box-shadow: var(--field-chrome);
 
   &:where(:focus-visible) {
-    outline: 2px solid var(--focus-8);
+    outline: var(--focus-ring-width) solid var(--focus-8);
     outline-offset: 2px;
   }
 
@@ -240,7 +240,7 @@
   color: var(--accent-ink);
 
   &:where(:focus-visible) {
-    outline: 2px solid var(--accent-8);
+    outline: var(--focus-ring-width) solid var(--accent-8);
     outline-offset: -1px;
   }
 
@@ -293,7 +293,7 @@
   }
 
   &:where(:focus-visible) {
-    outline: 2px solid var(--focus-8);
+    outline: var(--focus-ring-width) solid var(--focus-8);
     outline-offset: -1px;
   }
 
@@ -336,7 +336,7 @@
   }
 
   &:where(:focus-visible) {
-    outline: 2px solid var(--focus-8);
+    outline: var(--focus-ring-width) solid var(--focus-8);
     outline-offset: -1px;
   }
 
@@ -380,7 +380,7 @@
   }
 
   &:where(:focus-visible) {
-    outline: 2px solid var(--focus-8);
+    outline: var(--focus-ring-width) solid var(--focus-8);
     outline-offset: -1px;
   }
 

package/src/components/sidebar.css

@@ -402,7 +402,7 @@
 
   /* Focus state */
   &:where(:focus-visible) {
-    outline: 2px solid var(--focus-8);
+    outline: var(--focus-ring-width) solid var(--focus-8);
     outline-offset: 2px;
   }
 
@@ -860,7 +860,7 @@
 /* Popover menu button focus (arrow-key navigation) */
 /* stylelint-disable-next-line selector-max-specificity */
 .kui-SidebarSearchPopover .kui-SidebarMenuButton:where(:focus-visible) {
-  outline: 2px solid var(--focus-8);
+  outline: var(--focus-ring-width) solid var(--focus-8);
   outline-offset: -2px;
 }
 

package/src/components/text-area.css

@@ -33,7 +33,7 @@
   isolation: isolate;
 
   &:where(:focus-within) {
-    outline: 2px solid var(--v-focus-color, var(--focus-8));
+    outline: var(--focus-ring-width) solid var(--v-focus-color, var(--focus-8));
     outline-offset: -1px;
   }
 

package/src/components/text-field.css

@@ -12,13 +12,13 @@
 
   @supports selector(:has(*)) {
     &:where(:has(.kui-TextFieldInput:focus)) {
-      outline: 2px solid var(--text-field-focus-color);
+      outline: var(--focus-ring-width) solid var(--text-field-focus-color);
       outline-offset: -1px;
     }
   }
   @supports not selector(:has(*)) {
     &:where(:focus-within) {
-      outline: 2px solid var(--text-field-focus-color);
+      outline: var(--focus-ring-width) solid var(--text-field-focus-color);
       outline-offset: -1px;
     }
   }
@@ -88,7 +88,7 @@
     }
   }
   &::-webkit-calendar-picker-indicator:where(:focus-visible) {
-    outline: 2px solid var(--text-field-focus-color);
+    outline: var(--focus-ring-width) solid var(--text-field-focus-color);
   }
 
   /* Remove focus ring from date fields and use the selection color */

package/src/components/virtual-menu.css

@@ -19,7 +19,7 @@
   outline: none;
 
   &:where(:focus-visible) {
-    outline: 2px solid var(--focus-8);
+    outline: var(--focus-ring-width) solid var(--focus-8);
     outline-offset: -2px;
   }
 }

package/src/hooks/use-body-pointer-events-cleanup.ts

@@ -114,6 +114,18 @@ function install(): () => void {
   };
 }
 
+/**
+ * Clears a `pointer-events: none` that Radix left on `document.body`, for a dialog that has just
+ * closed. Leaves it alone while another modal is still open: that modal needs the page behind it
+ * to stay blocked, and it clears the value itself when it closes.
+ */
+export function releaseBodyPointerEvents() {
+  if (typeof document === 'undefined') return;
+  const stillOpen = document.querySelector('[role="dialog"][data-state="open"], [role="alertdialog"][data-state="open"]');
+  if (stillOpen) return;
+  document.body.style.pointerEvents = '';
+}
+
 /**
  * Hook to cleanup stuck pointer-events: none on document.body
  *

package/src/styles/tokens/constants.css

@@ -100,9 +100,9 @@
   --component-gap-ghost-3: calc(var(--space-2) * 1.5);
   --component-gap-ghost-4: var(--space-3);
 
-  /* Focus outline constants */
-  --focus-outline-width: 2px;
-  --focus-outline-offset: 2px;
+  /* Older names for the focus ring, kept for apps that read them */
+  --focus-outline-width: var(--focus-ring-width);
+  --focus-outline-offset: var(--focus-ring-offset);
   --focus-outline-offset-inset: -1px;
 
   /* Component padding relationships */