@womp/kookie-ui 0.29.2 → 0.30.0

package/src/components/navigator.css

@@ -0,0 +1,85 @@
+/* Navigator (from v2, 2026-11-03): a stack of screens. It paints nothing; the host is the region.
+ * No motion: v1 has none, so a screen changes at once. */
+.kui-Navigator,
+.kui-NavigatorLevel,
+.kui-NavigatorScreen {
+  display: flex;
+  flex-direction: column;
+  min-block-size: 0;
+}
+
+/* A screen outside a pane: the band, holding Back, the title and Close, then the body. The band
+   sits one step closer to the panel's edge than the content, stated against the panel's own
+   padding so it moves with the panel's size; the body starts a section's distance under it. */
+.kui-NavigatorBar {
+  margin-block-start: calc(-1 * var(--layout-space-2));
+  margin-inline: calc(-1 * var(--layout-space-2));
+  margin-block-end: var(--layout-space-6);
+}
+
+/* The title stays beside Back at the leading edge, and Close goes to the far end. This sheet
+   loads after the toolbar's, so the same specificity wins. */
+.kui-NavigatorBarTitle {
+  margin-inline-end: auto;
+  min-inline-size: 0;
+}
+
+/* With no Back before it, the title lines up with the content under it. */
+.kui-NavigatorBarTitle:where(:first-child) {
+  padding-inline-start: var(--layout-space-2);
+}
+
+.kui-NavigatorBackGlyph,
+.kui-NavigatorLinkGlyph {
+  inline-size: 1em;
+  block-size: 1em;
+}
+
+.kui-NavigatorBackGlyph:where(:dir(rtl)),
+.kui-NavigatorLinkGlyph:where(:dir(rtl)) {
+  transform: scaleX(-1);
+}
+
+/* A row that opens the next screen: its label, and a quiet chevron at the end. */
+.kui-NavigatorLink {
+  display: flex;
+  align-items: center;
+  gap: var(--layout-space-3);
+  inline-size: 100%;
+  min-block-size: var(--control-height-3);
+  padding-inline: var(--layout-space-3);
+  border-radius: var(--radius-control-3);
+  color: var(--gray-12);
+  font-size: var(--font-size-3);
+  line-height: var(--line-height-3);
+  text-align: start;
+  cursor: var(--cursor-button);
+}
+
+.kui-NavigatorLinkLabel {
+  display: flex;
+  align-items: center;
+  gap: var(--layout-space-3);
+  flex: 1;
+  min-inline-size: 0;
+}
+
+.kui-NavigatorLinkGlyph {
+  flex-shrink: 0;
+  color: var(--gray-a10);
+}
+
+@media (hover: hover) {
+  .kui-NavigatorLink:where(:hover) {
+    background-color: var(--gray-a3);
+  }
+}
+
+.kui-NavigatorLink:where(:active) {
+  background-color: var(--gray-a4);
+}
+
+.kui-NavigatorLink:where(:focus-visible) {
+  outline: 2px solid var(--focus-8);
+  outline-offset: -2px;
+}

package/src/components/navigator.tsx

@@ -0,0 +1,385 @@
+'use client';
+
+/**
+ * Navigator, from v2 (2026-11-03): a stack of screens, any depth. Any screen can open another on
+ * top of it, and Back removes the top one. The first screen is the root and never goes.
+ *
+ * THE PATH IS DATA. The screens above the root are a list of values the app owns, and `screen`
+ * turns a value into a screen, so an app can keep the path in its URL, restore it, or open three
+ * levels deep from a link.
+ *
+ * IT HAS NO REGION OF ITS OWN. The host decides how a screen carries its title. In a Shell pane
+ * (Sidebar, Panel, Inspector, Bottom), the pane's band holds Back and the title, and the screens
+ * go in the pane's scroller. Anywhere else (a card, a Dialog, a Sheet, a Popover, `Shell.Content`)
+ * each screen draws its own band: Back, the title, and the overlay's close when it has one.
+ *
+ * SCREENS UNDER THE TOP STAY MOUNTED, hidden, so a list keeps its scroll and a field its draft.
+ *
+ * Focus: a pushed screen takes focus at its top; on pop, focus returns to the control that opened
+ * the screen. Escape never goes back; it belongs to whatever overlay holds this.
+ *
+ * Differs from v2 in look only: no motion, since v1 has none. v1 has no Page or Row yet, so a pane
+ * screen's title lives in the band from the start, and `NavigatorLink` is its own row.
+ */
+
+import * as React from 'react';
+import classNames from 'classnames';
+
+import { NavigatorHostContext } from './_internal/navigator-host.js';
+import { PaneHeader, Scroll, ShellContentContext } from './_internal/pane-chrome.js';
+import { ShellStoreContext } from './_internal/shell-store.js';
+import { Flex } from './flex.js';
+import { Heading } from './heading.js';
+import { Toolbar, ToolbarButton, ToolbarTitle } from './toolbar.js';
+
+type NavigatorApi<T> = {
+  /** The values above the root, bottom first. Empty at the root. */
+  path: readonly T[];
+  /** Open a screen on top. */
+  push: (value: T) => void;
+  /** Close the top screen. Does nothing at the root. */
+  pop: () => void;
+  /** Close every screen above `depth`, where 0 is the root. */
+  popTo: (depth: number) => void;
+  /** Whether there is a screen to go back to. */
+  canGoBack: boolean;
+};
+
+type NavigatorState = NavigatorApi<unknown> & {
+  /** Each level's title, so Back can name the screen it returns to and a pane's band can show it. */
+  titles: React.MutableRefObject<(string | undefined)[]>;
+  setTitle: (depth: number, title: string) => void;
+  /** The control that opened each level, so focus can go back to it. */
+  openers: React.MutableRefObject<(HTMLElement | null)[]>;
+  direction: 'push' | 'pop' | null;
+  inPane: boolean;
+};
+
+const NavigatorContext = React.createContext<NavigatorState | null>(null);
+const LevelContext = React.createContext<number>(0);
+const OutletContext = React.createContext<React.ReactNode>(null);
+
+/**
+ * True in a Shell pane, not in `Shell.Content` and not in an overlay opened from the pane: there
+ * the pane's band carries the title. Overlays set the host context, which is how they opt out.
+ */
+function useInPane() {
+  const store = React.useContext(ShellStoreContext);
+  const inContent = React.useContext(ShellContentContext);
+  const host = React.useContext(NavigatorHostContext);
+  return store !== null && !inContent && host === null;
+}
+
+// Activity keeps a hidden screen's state and cleans up its effects (React 19.2). On an older
+// React, the screen is kept in a hidden element instead, with its effects still running.
+const Activity = (React as { Activity?: React.ComponentType<{ mode: 'visible' | 'hidden'; children: React.ReactNode }> }).Activity;
+
+function Level({ visible, children }: { visible: boolean; children: React.ReactNode }) {
+  if (Activity) return <Activity mode={visible ? 'visible' : 'hidden'}>{children}</Activity>;
+  return (
+    <div hidden={!visible} style={{ display: visible ? 'contents' : 'none' }}>
+      {children}
+    </div>
+  );
+}
+
+interface NavigatorProps<T> {
+  /** The screens above the root, as values. Use it with `onPathChange` to control the path. */
+  path?: readonly T[];
+  /** The path to start with when the navigator controls its own path. */
+  defaultPath?: readonly T[];
+  /** Called with the new path whenever a screen opens or closes. */
+  onPathChange?: (path: T[]) => void;
+  /** Turns a value from the path into its screen, usually a `NavigatorScreen`. */
+  screen: (value: T) => React.ReactNode;
+  /** The root screen, usually a `NavigatorScreen`. It is always at the bottom and never closes. */
+  root: React.ReactNode;
+  /**
+   * The frame around the screens, when you need your own: a `Shell.PaneHeader` with actions, and
+   * a `Shell.Scroll` holding `NavigatorOutlet`. Leave it out and the navigator draws the frame: in
+   * a Shell pane, the pane's band with Back and the title, and its scroller; anywhere else, the
+   * screens on their own.
+   */
+  children?: React.ReactNode;
+  className?: string;
+  style?: React.CSSProperties;
+}
+
+/**
+ * A stack of screens: any screen can open another on top, and Back returns to the one below.
+ * `root` is the first screen, `screen` turns each value in the path into its screen, and
+ * `children`, when given, is the frame the screens go into through `NavigatorOutlet`.
+ */
+function Navigator<T>({ path: pathProp, defaultPath, onPathChange, screen, root, children, className, style }: NavigatorProps<T>) {
+  const inPane = useInPane();
+  const [own, setOwn] = React.useState<readonly T[]>(defaultPath ?? []);
+  const path = pathProp ?? own;
+  // The direction comes from the path itself, so a path the app sets moves focus the same way as
+  // one changed by push and pop. Equal length with a new top value is a new screen arriving.
+  const [seen, setSeen] = React.useState<{ path: readonly T[]; direction: 'push' | 'pop' | null }>({ path, direction: null });
+  let direction = seen.direction;
+  // Compared by content, not identity: a controlled `path` may be a new array every render.
+  if (seen.path.length !== path.length || seen.path.some((value, i) => !Object.is(value, path[i]))) {
+    const before = seen.path;
+    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 });
+  }
+  const titles = React.useRef<(string | undefined)[]>([]);
+  const openers = React.useRef<(HTMLElement | null)[]>([]);
+  const [version, setVersion] = React.useState(0);
+
+  const change = React.useCallback(
+    (next: T[]) => {
+      if (pathProp === undefined) setOwn(next);
+      onPathChange?.(next);
+    },
+    [pathProp, onPathChange],
+  );
+
+  const api = React.useMemo<NavigatorState>(
+    () => ({
+      path,
+      canGoBack: path.length > 0,
+      push: (value) => {
+        openers.current[path.length + 1] = typeof document === 'undefined' ? null : (document.activeElement as HTMLElement | null);
+        change([...path, value as T]);
+      },
+      pop: () => {
+        if (path.length > 0) change(path.slice(0, -1));
+      },
+      popTo: (depth) => {
+        if (depth < path.length) change(path.slice(0, Math.max(0, depth)));
+      },
+      titles,
+      openers,
+      setTitle: (depth, title) => {
+        if (titles.current[depth] === title) return;
+        titles.current[depth] = title;
+        setVersion((v) => v + 1);
+      },
+      direction,
+      inPane,
+    }),
+    // `version` is read through `titles`; it is here so a new title reaches the band and Back.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [path, change, version, direction, inPane],
+  );
+
+  // On pop, focus goes back to the control that opened the screen that just closed.
+  const previousDepth = React.useRef(path.length);
+  React.useEffect(() => {
+    const before = previousDepth.current;
+    previousDepth.current = path.length;
+    if (path.length < before) {
+      const opener = openers.current[before];
+      openers.current.length = path.length + 1;
+      if (opener && opener.isConnected) opener.focus();
+    }
+  }, [path.length]);
+
+  const levels = [root, ...path.map((value) => screen(value))];
+  const top = levels.length - 1;
+  const outlet = (
+    <div className={classNames('kui-Navigator', className)} style={style}>
+      {levels.map((level, depth) => (
+        // Keyed by depth AND value, so a path that replaces the screen at a depth mounts a new
+        // screen instead of handing it the old one's state.
+        <Level key={depth === 0 ? 'root' : `${depth}:${String(path[depth - 1])}`} visible={depth === top}>
+          <LevelContext.Provider value={depth}>
+            <div className="kui-NavigatorLevel">{level}</div>
+          </LevelContext.Provider>
+        </Level>
+      ))}
+    </div>
+  );
+
+  return (
+    <NavigatorContext.Provider value={api}>
+      <OutletContext.Provider value={outlet}>{children ?? (inPane ? <PaneFrame /> : outlet)}</OutletContext.Provider>
+    </NavigatorContext.Provider>
+  );
+}
+
+/**
+ * The pane's frame: Back and the top screen's title as one cluster at the start of the pane's
+ * band, and the screens in the pane's scroller. Pass children to the Navigator instead when the
+ * band needs actions of its own, and put `NavigatorBack` and `NavigatorTitle` in it, together in
+ * a `Flex`.
+ */
+function PaneFrame() {
+  return (
+    <>
+      <PaneHeader>
+        <Toolbar>
+          {/* One cluster: as two loose toolbar children, the band splits them to its two ends. */}
+          <Flex align="center">
+            <NavigatorBack />
+            <NavigatorTitle />
+          </Flex>
+        </Toolbar>
+      </PaneHeader>
+      <Scroll>
+        <NavigatorOutlet />
+      </Scroll>
+    </>
+  );
+}
+
+/** Where the screens go, inside a frame passed as the navigator's children. */
+function NavigatorOutlet() {
+  return <>{React.useContext(OutletContext)}</>;
+}
+
+function useNavigatorState(): NavigatorState {
+  const state = React.useContext(NavigatorContext);
+  if (!state) throw new Error('Kookie: this part must be inside a <Navigator>.');
+  return state;
+}
+
+/** The navigator around this component: its path, and `push`, `pop` and `popTo`. */
+function useNavigator<T = unknown>(): NavigatorApi<T> {
+  return useNavigatorState() as NavigatorApi<T>;
+}
+
+function BackGlyph() {
+  return (
+    <svg className="kui-NavigatorBackGlyph" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden>
+      <path d="m15 18-6-6 6-6" stroke="currentColor" strokeWidth={1.75} strokeLinecap="round" strokeLinejoin="round" />
+    </svg>
+  );
+}
+
+function CloseGlyph() {
+  return (
+    <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden>
+      <path d="M18 6 6 18M6 6l12 12" stroke="currentColor" strokeWidth={1.75} strokeLinecap="round" />
+    </svg>
+  );
+}
+
+function backLabel(state: NavigatorState, depth: number) {
+  const previous = depth > 0 ? state.titles.current[depth - 1] : undefined;
+  return previous ? `Back to ${previous}` : 'Back';
+}
+
+interface NavigatorBackProps {
+  /** The accessible name. The default is "Back to" and the previous screen's title. */
+  'aria-label'?: string;
+}
+
+/**
+ * Back, for a toolbar: a chevron that closes the top screen. It is absent at the root rather than
+ * disabled, because there is nowhere to go back to. It names the screen it returns to, so a screen
+ * reader hears "Back to Settings".
+ */
+function NavigatorBack(props: NavigatorBackProps) {
+  const state = useNavigatorState();
+  if (!state.canGoBack) return null;
+  return (
+    <ToolbarButton iconOnly aria-label={props['aria-label'] ?? backLabel(state, state.path.length)} onClick={state.pop}>
+      <BackGlyph />
+    </ToolbarButton>
+  );
+}
+
+/** The top screen's title, for a toolbar in a frame of your own. */
+function NavigatorTitle() {
+  const state = useNavigatorState();
+  return <ToolbarTitle>{state.titles.current[state.path.length]}</ToolbarTitle>;
+}
+
+interface NavigatorScreenProps {
+  /** The screen's title. In a pane it shows in the pane's band; elsewhere in the screen's own. */
+  title: string;
+  /** The screen's content, under its title. */
+  children?: React.ReactNode;
+  className?: string;
+}
+
+/**
+ * One screen in a navigator. In a Shell pane the pane's band carries Back and its title, so the
+ * screen is only its content. Anywhere else it draws its own band: Back, the title, and the
+ * overlay's close when it sits in one. In a Dialog, Sheet or Popover the title names the panel.
+ */
+function NavigatorScreen({ title, children, className }: NavigatorScreenProps) {
+  const state = useNavigatorState();
+  const depth = React.useContext(LevelContext);
+  const Host = React.useContext(NavigatorHostContext);
+  const node = React.useRef<HTMLDivElement>(null);
+
+  React.useEffect(() => {
+    state.setTitle(depth, title);
+  }, [state, depth, title]);
+
+  // A pushed screen takes focus at its top, so a keyboard and a screen reader start there. In a
+  // pane the title is in the band, outside the screen, so the screen itself takes it.
+  React.useEffect(() => {
+    if (depth === 0 || state.direction !== 'push') return;
+    const target = node.current?.querySelector<HTMLElement>('.kui-NavigatorBar .kui-ToolbarTitle') ?? node.current;
+    if (target) {
+      target.tabIndex = -1;
+      target.focus({ preventScroll: true });
+    }
+    // Only on arrival: a later re-render must not pull focus back to the title.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  if (state.inPane) {
+    return (
+      <div ref={node} className={classNames('kui-NavigatorScreen', className)}>
+        {children}
+      </div>
+    );
+  }
+
+  const heading = (
+    <Heading as="h2" size="4" weight="medium" truncate>
+      {title}
+    </Heading>
+  );
+  return (
+    <div ref={node} className={classNames('kui-NavigatorScreen', className)}>
+      {/* One row: Back, the title, and the overlay's close. The band sits one step closer to the
+          panel's edge than the content does. */}
+      <div className="kui-NavigatorBar">
+        <Toolbar aria-label="Navigation">
+          {state.canGoBack && depth > 0 ? (
+            <ToolbarButton iconOnly aria-label={backLabel(state, depth)} onClick={state.pop}>
+              <BackGlyph />
+            </ToolbarButton>
+          ) : null}
+          <ToolbarTitle className="kui-NavigatorBarTitle">{Host ? <Host.Title>{heading}</Host.Title> : heading}</ToolbarTitle>
+          {Host ? (
+            <Host.Close>
+              <ToolbarButton iconOnly aria-label="Close">
+                <CloseGlyph />
+              </ToolbarButton>
+            </Host.Close>
+          ) : null}
+        </Toolbar>
+      </div>
+      <div className="kui-NavigatorBody">{children}</div>
+    </div>
+  );
+}
+
+interface NavigatorLinkProps<T> extends Omit<React.ComponentPropsWithoutRef<'button'>, 'value' | 'onClick'> {
+  /** The value pushed onto the path when the row is pressed. */
+  value: T;
+}
+
+/** A row that opens the next screen, with the chevron that says so. */
+function NavigatorLink<T>({ value, className, children, ...props }: NavigatorLinkProps<T>) {
+  const state = useNavigatorState();
+  return (
+    <button type="button" {...props} className={classNames('kui-reset', 'kui-NavigatorLink', className)} onClick={() => state.push(value)}>
+      <span className="kui-NavigatorLinkLabel">{children}</span>
+      <svg className="kui-NavigatorLinkGlyph" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden>
+        <path d="m9 18 6-6-6-6" stroke="currentColor" strokeWidth={1.75} strokeLinecap="round" strokeLinejoin="round" />
+      </svg>
+    </button>
+  );
+}
+
+export { Navigator, NavigatorOutlet, NavigatorBack, NavigatorTitle, NavigatorScreen, NavigatorLink, useNavigator };
+export type { NavigatorProps, NavigatorBackProps, NavigatorScreenProps, NavigatorLinkProps, NavigatorApi };

package/src/components/popover.tsx

@@ -7,6 +7,7 @@ import { useThemeSizeProps } from '../hooks/theme-size.js';
 import { requireReactElement } from '../helpers/require-react-element.js';
 import { popoverContentPropDefs } from './popover.props.js';
 import { PortalTheme } from './_internal/portal-theme.js';
+import { NavigatorHostContext, type NavigatorHost } from './_internal/navigator-host.js';
 
 import type { PopoverContentOwnProps } from './popover.props.js';
 import type { ComponentPropsWithout, RemovedProps } from '../helpers/component-props.js';
@@ -31,6 +32,22 @@ const usePopoverContentContext = (caller: string) => {
 };
 
 interface PopoverRootProps extends React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Root> {}
+/** A Navigator screen's title names the popover through the content's label. */
+function PopoverNavigatorTitle({ children }: { children: React.ReactElement<{ id?: string }> }) {
+  const setLabelId = usePopoverContentContext('Navigator')?.setLabelId;
+  const id = React.useId();
+  React.useEffect(() => {
+    setLabelId?.(id);
+    return () => setLabelId?.(undefined);
+  }, [id, setLabelId]);
+  return React.cloneElement(children, { id });
+}
+
+const popoverNavigatorHost: NavigatorHost = {
+  Title: PopoverNavigatorTitle,
+  Close: ({ children }) => <PopoverPrimitive.Close asChild>{children}</PopoverPrimitive.Close>,
+};
+
 const PopoverRoot: React.FC<PopoverRootProps> = (props: PopoverRootProps) => (
   <PopoverPrimitive.Root {...props} />
 );
@@ -81,7 +98,7 @@ const PopoverContent = React.forwardRef<PopoverContentElement, PopoverContentPro
             className={classNames('kui-PopperContent', 'kui-PopoverContent', className)}
           >
             <PopoverContentContext.Provider value={contextValue}>
-              {props.children}
+              <NavigatorHostContext.Provider value={popoverNavigatorHost}>{props.children}</NavigatorHostContext.Provider>
             </PopoverContentContext.Provider>
           </PopoverPrimitive.Content>
         </PortalTheme>

package/src/components/sheet.tsx

@@ -39,6 +39,7 @@ import { Dialog as DialogPrimitive } from 'radix-ui';
 import { dialogContentPropDefs } from './dialog.props.js';
 import type { DialogContentOwnProps } from './dialog.props.js';
 import { PortalTheme } from './_internal/portal-theme.js';
+import { NavigatorHostContext, type NavigatorHost } from './_internal/navigator-host.js';
 import { Heading } from './heading.js';
 import { Text } from './text.js';
 import { extractProps } from '../helpers/extract-props.js';
@@ -89,6 +90,12 @@ Trigger.displayName = 'Sheet.Trigger';
 const { align: _alignPropDef, ...dialogPropDefsForSheet } = dialogContentPropDefs;
 const sheetPropDefs = dialogPropDefsForSheet;
 
+/** What a Navigator screen in this panel uses: its title names the sheet, its close closes it. */
+const sheetNavigatorHost: NavigatorHost = {
+  Title: ({ children }) => <DialogPrimitive.Title asChild>{children}</DialogPrimitive.Title>,
+  Close: ({ children }) => <DialogPrimitive.Close asChild>{children}</DialogPrimitive.Close>,
+};
+
 /** Counts the Sheet.Title elements mounted inside a Sheet.Content, for the dev-only name check. */
 const SheetTitleCountContext = React.createContext<React.MutableRefObject<number> | null>(null);
 
@@ -155,6 +162,7 @@ const Content = React.forwardRef<SheetContentElement, SheetContentProps>((allPro
               className={classNames('kui-BaseDialogContent', 'kui-SheetContent', className, extractedClassName)}
               data-side={normalizedSide}
               aria-modal="true"
+              children={<NavigatorHostContext.Provider value={sheetNavigatorHost}>{contentProps.children}</NavigatorHostContext.Provider>}
             />
           </DialogPrimitive.Overlay>
         </PortalTheme>

package/styles.css

@@ -20496,6 +20496,92 @@
     border-style: none;
   }
 }
+.kui-Navigator,
+.kui-NavigatorLevel,
+.kui-NavigatorScreen {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-orient: vertical;
+  -webkit-box-direction: normal;
+      -ms-flex-direction: column;
+          flex-direction: column;
+  min-block-size: 0;
+}
+.kui-NavigatorBar {
+  -webkit-margin-before: calc(-1 * var(--layout-space-2));
+          margin-block-start: calc(-1 * var(--layout-space-2));
+  margin-inline: calc(-1 * var(--layout-space-2));
+  -webkit-margin-after: var(--layout-space-6);
+          margin-block-end: var(--layout-space-6);
+}
+.kui-NavigatorBarTitle {
+  -webkit-margin-end: auto;
+          margin-inline-end: auto;
+  min-inline-size: 0;
+}
+.kui-NavigatorBarTitle:where(:first-child) {
+  -webkit-padding-start: var(--layout-space-2);
+          padding-inline-start: var(--layout-space-2);
+}
+.kui-NavigatorBackGlyph,
+.kui-NavigatorLinkGlyph {
+  inline-size: 1em;
+  block-size: 1em;
+}
+.kui-NavigatorBackGlyph:where(:dir(rtl)),
+.kui-NavigatorLinkGlyph:where(:dir(rtl)) {
+  -webkit-transform: scaleX(-1);
+          transform: scaleX(-1);
+}
+.kui-NavigatorLink {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+  gap: var(--layout-space-3);
+  inline-size: 100%;
+  min-block-size: var(--control-height-3);
+  padding-inline: var(--layout-space-3);
+  border-radius: var(--radius-control-3);
+  color: var(--gray-12);
+  font-size: var(--font-size-3);
+  line-height: var(--line-height-3);
+  text-align: start;
+  cursor: var(--cursor-button);
+}
+.kui-NavigatorLinkLabel {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+  gap: var(--layout-space-3);
+  -webkit-box-flex: 1;
+      -ms-flex: 1;
+          flex: 1;
+  min-inline-size: 0;
+}
+.kui-NavigatorLinkGlyph {
+  -ms-flex-negative: 0;
+      flex-shrink: 0;
+  color: var(--gray-a10);
+}
+@media (hover: hover) {
+  .kui-NavigatorLink:where(:hover) {
+    background-color: var(--gray-a3);
+  }
+}
+.kui-NavigatorLink:where(:active) {
+  background-color: var(--gray-a4);
+}
+.kui-NavigatorLink:where(:focus-visible) {
+  outline: 2px solid var(--focus-8);
+  outline-offset: -2px;
+}
 .kui-TooltipContent {
   -webkit-box-sizing: border-box;
           box-sizing: border-box;

package/dist/esm/chunk-5BX2YZV6.js

@@ -1,3 +0,0 @@
-"use client";
-import{a as p}from"./chunk-FATCGZZE.js";import{a as D}from"./chunk-7VJF6EXN.js";import{a as g}from"./chunk-JP36JSNP.js";import{a as l}from"./chunk-TGRHRMQI.js";import{a as m}from"./chunk-4MNRLB57.js";import{c as r}from"./chunk-OKQAVYW4.js";import{a as n}from"./chunk-AQKSO3SW.js";import{c as s}from"./chunk-5ON3XLRD.js";import{a as w}from"./chunk-VQPANPMI.js";var S={};w(S,{Close:()=>y,Content:()=>C,Description:()=>R,Root:()=>c,Title:()=>d,Trigger:()=>f});import*as o from"react";import W from"classnames";import{Dialog as t}from"radix-ui";var c=e=>o.createElement(t.Root,{...e,modal:!0});c.displayName="Dialog.Root";var f=o.forwardRef(({children:e,...i},a)=>o.createElement(t.Trigger,{...i,ref:a,asChild:!0},l(e)));f.displayName="Dialog.Trigger";var{align:O,...P}=p,B={align:O},C=o.forwardRef(({align:e,...i},a)=>{let T=s(i,P.size),{className:v}=r({align:e},B),{className:u,forceMount:h,container:E,onCloseAutoFocus:N,...x}=r(T,P);return D(),o.createElement(t.Portal,{container:E,forceMount:h},o.createElement(n,{asChild:!0},o.createElement(t.Overlay,{className:"kui-BaseDialogOverlay kui-DialogOverlay"},o.createElement("div",{className:"kui-BaseDialogScroll kui-DialogScroll"},o.createElement("div",{className:`kui-BaseDialogScrollPadding kui-DialogScrollPadding ${v}`},o.createElement(t.Content,{...x,ref:a,className:W("kui-BaseDialogContent","kui-DialogContent",u),"aria-modal":"true",onCloseAutoFocus:k=>{N?.(k),document.body.style.pointerEvents=""}}))))))});C.displayName="Dialog.Content";var d=o.forwardRef((e,i)=>o.createElement(t.Title,{asChild:!0},o.createElement(g,{size:"5",trim:"start",...e,asChild:!1,ref:i})));d.displayName="Dialog.Title";var R=o.forwardRef((e,i)=>o.createElement(t.Description,{asChild:!0},o.createElement(m,{as:"p",size:"3",...e,asChild:!1,ref:i})));R.displayName="Dialog.Description";var y=o.forwardRef(({children:e,...i},a)=>o.createElement(t.Close,{...i,ref:a,asChild:!0},l(e)));y.displayName="Dialog.Close";export{c as a,f as b,C as c,d,R as e,y as f,S as g};
-//# sourceMappingURL=chunk-5BX2YZV6.js.map

package/dist/esm/chunk-5BX2YZV6.js.map

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../src/components/dialog.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nimport classNames from 'classnames';\nimport { Dialog as DialogPrimitive } from 'radix-ui';\n\nimport { dialogContentPropDefs } from './dialog.props.js';\nimport { Heading } from './heading.js';\nimport { Text } from './text.js';\nimport { PortalTheme } from './_internal/portal-theme.js';\nimport { extractProps } from '../helpers/extract-props.js';\nimport { useThemeSizeProps } from '../hooks/theme-size.js';\nimport { requireReactElement } from '../helpers/require-react-element.js';\nimport { useBodyPointerEventsCleanup } from '../hooks/use-body-pointer-events-cleanup.js';\n\nimport type { DialogContentOwnProps } from './dialog.props.js';\nimport type { ComponentPropsWithout, RemovedProps, ComponentPropsAs } from '../helpers/component-props.js';\n\ninterface DialogRootProps extends ComponentPropsWithout<typeof DialogPrimitive.Root, 'modal'> {}\nconst DialogRoot: React.FC<DialogRootProps> = (props) => <DialogPrimitive.Root {...props} modal />;\nDialogRoot.displayName = 'Dialog.Root';\n\ntype DialogTriggerElement = React.ElementRef<typeof DialogPrimitive.Trigger>;\ninterface DialogTriggerProps extends ComponentPropsWithout<typeof DialogPrimitive.Trigger, RemovedProps> {}\nconst DialogTrigger = React.forwardRef<DialogTriggerElement, DialogTriggerProps>(({ children, ...props }, forwardedRef) => (\n  <DialogPrimitive.Trigger {...props} ref={forwardedRef} asChild>\n    {requireReactElement(children)}\n  </DialogPrimitive.Trigger>\n));\nDialogTrigger.displayName = 'Dialog.Trigger';\n\n// Split once at module scope. `extractProps` memoises on the identity of the\n// prop def objects it is handed, so rebuilding these per render would recompile\n// them on every render.\nconst { align: alignPropDef, ...contentPropDefs } = dialogContentPropDefs;\nconst alignPropDefs = { align: alignPropDef };\n\ntype DialogContentElement = React.ElementRef<typeof DialogPrimitive.Content>;\ninterface DialogContentProps extends ComponentPropsWithout<typeof DialogPrimitive.Content, RemovedProps>, DialogContentOwnProps {\n  container?: React.ComponentPropsWithoutRef<typeof DialogPrimitive.Portal>['container'];\n}\nconst DialogContent = React.forwardRef<DialogContentElement, DialogContentProps>(({ align, ...ownProps }, forwardedRef) => {\n  const props = useThemeSizeProps(ownProps, contentPropDefs.size);\n  const { className: alignClassName } = extractProps({ align }, alignPropDefs);\n\n  const { className, forceMount, container, onCloseAutoFocus, ...contentProps } = extractProps(props, contentPropDefs);\n\n  // Cleanup stuck pointer-events on body\n  useBodyPointerEventsCleanup();\n\n  return (\n    <DialogPrimitive.Portal container={container} forceMount={forceMount}>\n      <PortalTheme asChild>\n        <DialogPrimitive.Overlay className=\"kui-BaseDialogOverlay kui-DialogOverlay\">\n          <div className=\"kui-BaseDialogScroll kui-DialogScroll\">\n            <div className={`kui-BaseDialogScrollPadding kui-DialogScrollPadding ${alignClassName}`}>\n              <DialogPrimitive.Content\n                {...contentProps}\n                ref={forwardedRef}\n                className={classNames('kui-BaseDialogContent', 'kui-DialogContent', className)}\n                aria-modal=\"true\"\n                onCloseAutoFocus={(event) => {\n                  // Radix returns focus to the trigger unless the caller prevents it.\n                  onCloseAutoFocus?.(event);\n                  // Restore pointer-events to body (Radix UI fix for issue #1241)\n                  document.body.style.pointerEvents = '';\n                }}\n              />\n            </div>\n          </div>\n        </DialogPrimitive.Overlay>\n      </PortalTheme>\n    </DialogPrimitive.Portal>\n  );\n});\nDialogContent.displayName = 'Dialog.Content';\n\ntype DialogTitleElement = React.ElementRef<typeof Heading>;\ntype DialogTitleProps = ComponentPropsWithout<typeof Heading, 'asChild'>;\nconst DialogTitle = React.forwardRef<DialogTitleElement, DialogTitleProps>((props, forwardedRef) => (\n  <DialogPrimitive.Title asChild>\n    <Heading size=\"5\" trim=\"start\" {...props} asChild={false} ref={forwardedRef} />\n  </DialogPrimitive.Title>\n));\nDialogTitle.displayName = 'Dialog.Title';\n\ntype DialogDescriptionElement = HTMLParagraphElement;\ntype DialogDescriptionProps = ComponentPropsAs<typeof Text, 'p'>;\nconst DialogDescription = React.forwardRef<DialogDescriptionElement, DialogDescriptionProps>((props, forwardedRef) => (\n  <DialogPrimitive.Description asChild>\n    <Text as=\"p\" size=\"3\" {...props} asChild={false} ref={forwardedRef} />\n  </DialogPrimitive.Description>\n));\nDialogDescription.displayName = 'Dialog.Description';\n\ntype DialogCloseElement = React.ElementRef<typeof DialogPrimitive.Close>;\ninterface DialogCloseProps extends ComponentPropsWithout<typeof DialogPrimitive.Close, RemovedProps> {}\nconst DialogClose = React.forwardRef<DialogCloseElement, DialogCloseProps>(({ children, ...props }, forwardedRef) => (\n  <DialogPrimitive.Close {...props} ref={forwardedRef} asChild>\n    {requireReactElement(children)}\n  </DialogPrimitive.Close>\n));\nDialogClose.displayName = 'Dialog.Close';\n\nexport { DialogRoot as Root, DialogTrigger as Trigger, DialogContent as Content, DialogTitle as Title, DialogDescription as Description, DialogClose as Close };\n\nexport type {\n  DialogRootProps as RootProps,\n  DialogTriggerProps as TriggerProps,\n  DialogContentProps as ContentProps,\n  DialogTitleProps as TitleProps,\n  DialogDescriptionProps as DescriptionProps,\n  DialogCloseProps as CloseProps,\n};\n"],
-  "mappings": ";wWAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,WAAAE,EAAA,YAAAC,EAAA,gBAAAC,EAAA,SAAAC,EAAA,UAAAC,EAAA,YAAAC,IAAA,UAAYC,MAAW,QACvB,OAAOC,MAAgB,aACvB,OAAS,UAAUC,MAAuB,WAe1C,IAAMC,EAAyCC,GAAU,gBAACC,EAAgB,KAAhB,CAAsB,GAAGD,EAAO,MAAK,GAAC,EAChGD,EAAW,YAAc,cAIzB,IAAMG,EAAsB,aAAqD,CAAC,CAAE,SAAAC,EAAU,GAAGH,CAAM,EAAGI,IACxG,gBAACH,EAAgB,QAAhB,CAAyB,GAAGD,EAAO,IAAKI,EAAc,QAAO,IAC3DC,EAAoBF,CAAQ,CAC/B,CACD,EACDD,EAAc,YAAc,iBAK5B,GAAM,CAAE,MAAOI,EAAc,GAAGC,CAAgB,EAAIC,EAC9CC,EAAgB,CAAE,MAAOH,CAAa,EAMtCI,EAAsB,aAAqD,CAAC,CAAE,MAAAC,EAAO,GAAGC,CAAS,EAAGR,IAAiB,CACzH,IAAMJ,EAAQa,EAAkBD,EAAUL,EAAgB,IAAI,EACxD,CAAE,UAAWO,CAAe,EAAIC,EAAa,CAAE,MAAAJ,CAAM,EAAGF,CAAa,EAErE,CAAE,UAAAO,EAAW,WAAAC,EAAY,UAAAC,EAAW,iBAAAC,EAAkB,GAAGC,CAAa,EAAIL,EAAaf,EAAOO,CAAe,EAGnH,OAAAc,EAA4B,EAG1B,gBAACpB,EAAgB,OAAhB,CAAuB,UAAWiB,EAAW,WAAYD,GACxD,gBAACK,EAAA,CAAY,QAAO,IAClB,gBAACrB,EAAgB,QAAhB,CAAwB,UAAU,2CACjC,gBAAC,OAAI,UAAU,yCACb,gBAAC,OAAI,UAAW,uDAAuDa,CAAc,IACnF,gBAACb,EAAgB,QAAhB,CACE,GAAGmB,EACJ,IAAKhB,EACL,UAAWmB,EAAW,wBAAyB,oBAAqBP,CAAS,EAC7E,aAAW,OACX,iBAAmBQ,GAAU,CAE3BL,IAAmBK,CAAK,EAExB,SAAS,KAAK,MAAM,cAAgB,EACtC,EACF,CACF,CACF,CACF,CACF,CACF,CAEJ,CAAC,EACDd,EAAc,YAAc,iBAI5B,IAAMe,EAAoB,aAAiD,CAACzB,EAAOI,IACjF,gBAACH,EAAgB,MAAhB,CAAsB,QAAO,IAC5B,gBAACyB,EAAA,CAAQ,KAAK,IAAI,KAAK,QAAS,GAAG1B,EAAO,QAAS,GAAO,IAAKI,EAAc,CAC/E,CACD,EACDqB,EAAY,YAAc,eAI1B,IAAME,EAA0B,aAA6D,CAAC3B,EAAOI,IACnG,gBAACH,EAAgB,YAAhB,CAA4B,QAAO,IAClC,gBAAC2B,EAAA,CAAK,GAAG,IAAI,KAAK,IAAK,GAAG5B,EAAO,QAAS,GAAO,IAAKI,EAAc,CACtE,CACD,EACDuB,EAAkB,YAAc,qBAIhC,IAAME,EAAoB,aAAiD,CAAC,CAAE,SAAA1B,EAAU,GAAGH,CAAM,EAAGI,IAClG,gBAACH,EAAgB,MAAhB,CAAuB,GAAGD,EAAO,IAAKI,EAAc,QAAO,IACzDC,EAAoBF,CAAQ,CAC/B,CACD,EACD0B,EAAY,YAAc",
-  "names": ["dialog_exports", "__export", "DialogClose", "DialogContent", "DialogDescription", "DialogRoot", "DialogTitle", "DialogTrigger", "React", "classNames", "DialogPrimitive", "DialogRoot", "props", "DialogPrimitive", "DialogTrigger", "children", "forwardedRef", "requireReactElement", "alignPropDef", "contentPropDefs", "dialogContentPropDefs", "alignPropDefs", "DialogContent", "align", "ownProps", "useThemeSizeProps", "alignClassName", "extractProps", "className", "forceMount", "container", "onCloseAutoFocus", "contentProps", "useBodyPointerEventsCleanup", "PortalTheme", "classNames", "event", "DialogTitle", "Heading", "DialogDescription", "Text", "DialogClose"]
-}

package/dist/esm/chunk-HR2VHGJ5.js

@@ -1,3 +0,0 @@
-"use client";
-import{a as P}from"./chunk-FATCGZZE.js";import{a as g}from"./chunk-7VJF6EXN.js";import{a as h}from"./chunk-JP36JSNP.js";import{a}from"./chunk-TGRHRMQI.js";import{a as f}from"./chunk-4MNRLB57.js";import{c as p}from"./chunk-OKQAVYW4.js";import{a as c}from"./chunk-AQKSO3SW.js";import{c as m}from"./chunk-5ON3XLRD.js";import{a as W}from"./chunk-VQPANPMI.js";var B={};W(B,{Close:()=>T,Content:()=>R,Description:()=>D,Root:()=>C,Title:()=>y,Trigger:()=>u});import*as e from"react";import k from"classnames";import{Dialog as r}from"radix-ui";var C=o=>e.createElement(r.Root,{...o,modal:!0});C.displayName="Sheet.Root";var u=e.forwardRef(({children:o,...t},i)=>e.createElement(r.Trigger,{...t,ref:i,asChild:!0},a(o)));u.displayName="Sheet.Trigger";var{align:Q,...w}=P,d=w,S=e.createContext(null),R=e.forwardRef((o,t)=>{let{side:i="start",forceMount:s,container:n,className:v,...E}=o,b=m(E,d.size),N={left:"start",right:"end",start:"start",end:"end",top:"top",bottom:"bottom"}[i],{className:x,...O}=p(b,d),z=e.useRef(0),M=e.useCallback(l=>{typeof t=="function"?t(l):t&&(t.current=l)},[t]);return g(),e.createElement(r.Portal,{container:n,forceMount:s},e.createElement(S.Provider,{value:z},e.createElement(c,{asChild:!0},e.createElement(r.Overlay,{className:"kui-BaseDialogOverlay kui-DialogOverlay kui-SheetOverlay"},e.createElement(r.Content,{...O,ref:M,className:k("kui-BaseDialogContent","kui-SheetContent",v,x),"data-side":N,"aria-modal":"true"})))))});R.displayName="Sheet.Content";var y=e.forwardRef(({size:o="4",weight:t="medium",...i},s)=>{let n=e.useContext(S);return e.useLayoutEffect(()=>{if(n)return n.current+=1,()=>{n.current-=1}},[n]),e.createElement(r.Title,{asChild:!0},e.createElement(h,{ref:s,size:o,weight:t,...i}))});y.displayName="Sheet.Title";var D=e.forwardRef(({size:o="2",emphasis:t="medium",...i},s)=>e.createElement(r.Description,{asChild:!0},e.createElement(f,{ref:s,size:o,emphasis:t,...i})));D.displayName="Sheet.Description";var T=e.forwardRef(({children:o,...t},i)=>e.createElement(r.Close,{...t,ref:i,asChild:!0},a(o)));T.displayName="Sheet.Close";export{C as a,u as b,R as c,y as d,D as e,T as f,B as g};
-//# sourceMappingURL=chunk-HR2VHGJ5.js.map