@womp/kookie-ui 0.30.0 → 0.32.0

package/src/components/link.css

@@ -12,9 +12,12 @@
   &:where(:focus-visible) {
     border-radius: calc(0.07em * var(--radius-factor));
     outline-color: var(--focus-8);
-    outline-width: 2px;
+    outline-width: var(--focus-ring-width);
     outline-style: solid;
-    outline-offset: 2px;
+    outline-offset: var(--focus-ring-offset);
+    /* A wrapped link rings each line's fragment whole, not with square ends mid-word. */
+    -webkit-box-decoration-break: clone;
+    box-decoration-break: clone;
   }
 
   :where([data-accent-color]:not(.kui-theme)) &:where([data-accent-color='']) {
@@ -22,23 +25,22 @@
   }
 }
 
-/***************************************************************************************************
- *                                                                                                 *
- * UNDERLINE                                                                                       *
- *                                                                                                 *
- ***************************************************************************************************/
-
+/* THE UNDERLINE IS ALWAYS THERE (from v2, 2026-11-03). Colour alone does not tell everyone which
+   words are a link (WCAG 1.4.1), and a hover-only underline cannot be found on a touch screen.
+   It rests as a quiet line in the link's own colour and darkens to the ink under the pointer. */
 .kui-Link {
   &:where(:any-link, button) {
-    text-decoration-line: none;
+    text-decoration-line: underline;
     text-decoration-style: solid;
     text-decoration-thickness: min(2px, max(1px, 0.05em));
-    text-underline-offset: calc(0.025em + 2px);
-    text-decoration-color: var(--accent-a5);
+    /* Relative to the link's own type: a fixed distance crowds a descender large and floats small. */
+    text-underline-offset: 0.2em;
+    text-decoration-color: var(--accent-a6);
 
-    /* Enhancement for bright colors */
-    @supports (color: color-mix(in oklab, white, black)) {
-      text-decoration-color: color-mix(in oklab, var(--accent-a5), var(--neutral-a6));
+    @media (hover: hover) {
+      &:where(:hover) {
+        text-decoration-color: currentcolor;
+      }
     }
 
     @media (pointer: coarse) {
@@ -48,41 +50,9 @@
         outline-offset: -0.6em;
       }
     }
-
-    &:where(.kui-underline-auto) {
-      @media (hover: hover) {
-        &:where(:hover) {
-          text-decoration-line: underline;
-        }
-      }
-
-      :where([data-accent-color]:not(.kui-theme)) &:where([data-accent-color='']) {
-        text-decoration-line: underline;
-        text-decoration-color: var(--accent-a6);
-
-        /* Enhancement for bright colors */
-        @supports (color: color-mix(in oklab, white, black)) {
-          text-decoration-color: color-mix(in oklab, var(--accent-a6), var(--neutral-a6));
-        }
-      }
-    }
-
-    &:where(.kui-underline-hover) {
-      @media (hover: hover) {
-        &:where(:hover) {
-          text-decoration-line: underline;
-        }
-      }
-    }
-
-    &:where(.kui-underline-always) {
-      text-decoration-line: underline;
-    }
   }
 }
 
-/* Focus keeps the link's own underline setting; the focus outline marks focus. */
-
 /* Enhancement – hide underline for when Link's only child is a Code where underline is hard to see */
 .kui-Link:where(:has(.kui-Code:not(.kui-variant-ghost):only-child)) {
   text-decoration-color: transparent;

package/src/components/link.props.tsx

@@ -8,7 +8,6 @@ import { weightPropDef } from '../props/weight.prop.js';
 import type { PropDef } from '../props/prop-def.js';
 
 const sizes = ['1', '2', '3', '4', '5', '6', '7', '8', '9'] as const;
-const underline = ['auto', 'always', 'hover', 'none'] as const;
 
 const linkPropDefs = {
   ...asChildPropDef,
@@ -22,11 +21,9 @@ const linkPropDefs = {
   ...leadingTrimPropDef,
   ...truncatePropDef,
   ...textWrapPropDef,
-  underline: { type: 'enum', className: 'kui-underline', values: underline, default: 'auto' },
   ...accentColorPropDef,
 } satisfies {
   size: PropDef<(typeof sizes)[number]>;
-  underline: PropDef<(typeof underline)[number]>;
 };
 
 export { linkPropDefs };

package/src/components/navigator.tsx

@@ -8,18 +8,19 @@
  * 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.
+ * IT HAS NO REGION OF ITS OWN. The host decides how a screen carries its title. In
+ * `Shell.Content` a screen is a `Page`, whose large title collapses into the band with Back. In a
+ * side pane (Sidebar, Panel, Inspector, Bottom) the band holds Back and the title from the start.
+ * Anywhere else (a card, a Dialog, a Sheet, a Popover) 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.
+ * Differs from v2 in look only: no motion, since v1 has none. v1 has no Row yet, so
+ * `NavigatorLink` is its own row.
  */
 
 import * as React from 'react';
@@ -27,9 +28,10 @@ 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 { setPageCollapsed, useClaimPage, usePageScope } from './_internal/page-scope.js';
 import { Flex } from './flex.js';
 import { Heading } from './heading.js';
+import { Page } from './page.js';
 import { Toolbar, ToolbarButton, ToolbarTitle } from './toolbar.js';
 
 type NavigatorApi<T> = {
@@ -60,14 +62,13 @@ 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.
+ * True in a Shell pane, `Shell.Content` included, and not in an overlay opened from one: there
+ * the pane's band carries Back and the title. Overlays cut the pane's page scope at the portal.
  */
 function useInPane() {
-  const store = React.useContext(ShellStoreContext);
-  const inContent = React.useContext(ShellContentContext);
+  const scope = usePageScope();
   const host = React.useContext(NavigatorHostContext);
-  return store !== null && !inContent && host === null;
+  return scope !== null && host === null;
 }
 
 // Activity keeps a hidden screen's state and cleans up its effects (React 19.2). On an older
@@ -214,7 +215,7 @@ function PaneFrame() {
           {/* One cluster: as two loose toolbar children, the band splits them to its two ends. */}
           <Flex align="center">
             <NavigatorBack />
-            <NavigatorTitle />
+            <ToolbarTitle />
           </Flex>
         </Toolbar>
       </PaneHeader>
@@ -282,9 +283,13 @@ function NavigatorBack(props: NavigatorBackProps) {
   );
 }
 
-/** The top screen's title, for a toolbar in a frame of your own. */
+/**
+ * The top screen's title, for a toolbar in a frame of your own. In a pane it is the band's
+ * mirroring `Toolbar.Title`, which shows once the page's large title has scrolled away.
+ */
 function NavigatorTitle() {
   const state = useNavigatorState();
+  if (state.inPane) return <ToolbarTitle />;
   return <ToolbarTitle>{state.titles.current[state.path.length]}</ToolbarTitle>;
 }
 
@@ -305,6 +310,7 @@ function NavigatorScreen({ title, children, className }: NavigatorScreenProps) {
   const state = useNavigatorState();
   const depth = React.useContext(LevelContext);
   const Host = React.useContext(NavigatorHostContext);
+  const inWorkArea = React.useContext(ShellContentContext);
   const node = React.useRef<HTMLDivElement>(null);
 
   React.useEffect(() => {
@@ -315,7 +321,7 @@ function NavigatorScreen({ title, children, className }: NavigatorScreenProps) {
   // 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;
+    const target = node.current?.querySelector<HTMLElement>('.kui-NavigatorBar .kui-ToolbarTitle, h1') ?? node.current;
     if (target) {
       target.tabIndex = -1;
       target.focus({ preventScroll: true });
@@ -324,14 +330,27 @@ function NavigatorScreen({ title, children, className }: NavigatorScreenProps) {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
+  if (state.inPane && inWorkArea) {
+    return (
+      <div ref={node} className={classNames('kui-NavigatorScreen', className)}>
+        <Page title={title}>{children}</Page>
+      </div>
+    );
+  }
   if (state.inPane) {
+    // A side pane keeps its title in its band: a page's large title would dwarf a narrow
+    // inspector's rows. The screen claims the pane's title, collapsed from the start.
     return (
       <div ref={node} className={classNames('kui-NavigatorScreen', className)}>
+        <SidePaneTitle title={title} />
         {children}
       </div>
     );
   }
 
+  // Only the top screen names the panel. Screens underneath stay mounted, and if each wrapped its
+  // title in the overlay's title part they would share its id, and the panel would keep the root's name.
+  const isTop = depth === state.path.length;
   const heading = (
     <Heading as="h2" size="4" weight="medium" truncate>
       {title}
@@ -348,7 +367,7 @@ function NavigatorScreen({ title, children, className }: NavigatorScreenProps) {
               <BackGlyph />
             </ToolbarButton>
           ) : null}
-          <ToolbarTitle className="kui-NavigatorBarTitle">{Host ? <Host.Title>{heading}</Host.Title> : heading}</ToolbarTitle>
+          <ToolbarTitle className="kui-NavigatorBarTitle">{Host && isTop ? <Host.Title>{heading}</Host.Title> : heading}</ToolbarTitle>
           {Host ? (
             <Host.Close>
               <ToolbarButton iconOnly aria-label="Close">
@@ -363,6 +382,17 @@ function NavigatorScreen({ title, children, className }: NavigatorScreenProps) {
   );
 }
 
+function SidePaneTitle({ title }: { title: string }) {
+  const store = usePageScope();
+  useClaimPage(store, title);
+  React.useEffect(() => {
+    if (!store) return;
+    setPageCollapsed(store, true);
+    return () => setPageCollapsed(store, false);
+  }, [store]);
+  return null;
+}
+
 interface NavigatorLinkProps<T> extends Omit<React.ComponentPropsWithoutRef<'button'>, 'value' | 'onClick'> {
   /** The value pushed onto the path when the row is pressed. */
   value: T;

package/src/components/page.css

@@ -0,0 +1,38 @@
+/* Page (from v2, 2026-11-03): the screen you navigated to. Three distances and a marker; the
+ * width is the frame's to state. */
+.kui-Page {
+  display: flex;
+  flex-direction: column;
+  /* From the title block to whatever the page begins with: two steps clear of the title-to-
+     description interval, so a section does not read as a third line of the description. */
+  gap: var(--layout-space-8);
+  /* Air above the title. A floating band's reach is already cleared by `Shell.Scroll`, which
+     pads its content by it, so only the air is left to add. */
+  padding-block-start: var(--layout-space-7);
+}
+
+/* The title and its description are one block, and the marker is placed against it. */
+.kui-PageHeader {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  gap: var(--layout-space-6);
+}
+
+/* The mark and the title are a lockup, so they sit closer than the title and description. */
+.kui-PageMark {
+  margin-block-end: calc(var(--layout-space-4) - var(--layout-space-6));
+}
+
+/* Where the title stops being visible. The band floats over the scroller, so the marker sits the
+   band's reach above the end of the title block, and crosses the scroller's top edge at the
+   moment the title passes behind the band. A hairline tall, since a zero-area box is not
+   reliably reported as intersecting; out of flow, and it paints nothing. */
+.kui-PageMarker {
+  position: absolute;
+  inset-block-end: var(--kui-pane-inset-start, 0px);
+  inset-inline-start: 0;
+  block-size: 1px;
+  inline-size: 100%;
+  pointer-events: none;
+}

package/src/components/page.tsx

@@ -0,0 +1,93 @@
+'use client';
+
+import * as React from 'react';
+import classNames from 'classnames';
+
+import { setPageCollapsed, useClaimPage, usePageScope } from './_internal/page-scope.js';
+import { usePageScrollMedia } from './_internal/shell-page-scroll.js';
+import { Heading } from './heading.js';
+import { Text } from './text.js';
+
+interface PageProps extends Omit<React.ComponentPropsWithoutRef<'div'>, 'color' | 'title'> {
+  /**
+   * The title of the page. It shows large at the top. When it scrolls away, it also shows in
+   * the `Toolbar.Title` of the pane's band. It is a string, because it shows in two places.
+   */
+  title: string;
+  /** A sentence under the title that describes the page. Optional. */
+  description?: React.ReactNode;
+  /** A logo or mark above the title, such as an app's logo on its home page. Most pages don't need it. */
+  mark?: React.ReactNode;
+}
+
+/**
+ * Page, from v2 (2026-11-03): the screen you navigated to, and its title.
+ *
+ * A page is not a band. The pinned row with the way back and the tools is the pane's
+ * (`Shell.PaneHeader`): it stays while you move from page to page. The large title that arrives
+ * and leaves with the content is the page's, and it is this.
+ *
+ * It owns three things: the air above its title (a floating band's reach is already cleared by
+ * `Shell.Scroll`), the title and its description at the page's type steps, and the collapse:
+ * when the title passes behind the band, every `Toolbar.Title` with no words of its own in this
+ * pane shows the page's title.
+ *
+ * It takes no width (the frame around it states one), no level (a page is the document's one
+ * `h1`), no size (an app has one page step) and no actions (they go in the toolbar).
+ */
+const Page = React.forwardRef<HTMLDivElement, PageProps>(({ title, description, mark, className, children, ...props }, forwardedRef) => {
+  const store = usePageScope();
+  const marker = React.useRef<HTMLDivElement>(null);
+  useClaimPage(store, title);
+
+  // Re-read when a touch window crosses the phone boundary: the scroller changes from the
+  // content's viewport to the page, and an observer built for one never fires for the other.
+  const pageScrolls = usePageScrollMedia();
+  React.useEffect(() => {
+    const el = marker.current;
+    if (!el || !store) return;
+    // The scroller is the viewport around this, if it scrolls; on a phone window Shell the
+    // document scrolls and the viewport is `overflow: visible`, so the root is the document.
+    const viewport = el.closest<HTMLElement>('.kui-ScrollAreaViewport');
+    const scrolls = viewport !== null && !/^(visible|clip)$/.test(getComputedStyle(viewport).overflowY);
+    const observer = new IntersectionObserver(
+      (entries) => {
+        const entry = entries[entries.length - 1];
+        if (!entry) return;
+        // Gone off the top, not merely gone: a marker below the fold is also out of view.
+        const top = entry.rootBounds?.top;
+        setPageCollapsed(store, !entry.isIntersecting && (top === undefined || entry.boundingClientRect.top <= top));
+      },
+      { root: scrolls ? viewport : null, threshold: 0 },
+    );
+    observer.observe(el);
+    return () => {
+      observer.disconnect();
+      // A page that unmounts takes its collapse with it, or the next page's band opens collapsed.
+      setPageCollapsed(store, false);
+    };
+  }, [store, pageScrolls]);
+
+  return (
+    <div {...props} ref={forwardedRef} className={classNames('kui-Page', className)}>
+      <div className="kui-PageHeader">
+        {mark === undefined || mark === null ? null : <div className="kui-PageMark">{mark}</div>}
+        <Heading as="h1" size="9" weight="medium">
+          {title}
+        </Heading>
+        {description === undefined || description === null ? null : (
+          <Text as="p" size="4">
+            {description}
+          </Text>
+        )}
+        {/* Out of flow, so it displaces nothing and a page with no band behaves the same. */}
+        <div ref={marker} className="kui-PageMarker" aria-hidden="true" />
+      </div>
+      {children}
+    </div>
+  );
+});
+Page.displayName = 'Page';
+
+export { Page };
+export type { PageProps };

package/src/components/shell.tsx

@@ -52,6 +52,7 @@ import { useShell, useSidebarMode } from './shell.context.js';
 import { useResponsivePresentation } from './shell.hooks.js';
 import { readBreakpoint } from '../hooks/use-breakpoint.js';
 import { useThemeSize } from '../hooks/theme-size.js';
+import { PageScope } from './_internal/page-scope.js';
 import { PaneChromeScope, PaneFooter, PaneHeader, Scroll, ShellContentContext, ShellSizeContext, ShellWindowContext } from './_internal/pane-chrome.js';
 import { onPageScrollMediaChange, pageScrollMatches } from './_internal/shell-page-scroll.js';
 import type { PaneSize, PaneHeaderProps, PaneFooterProps, ScrollProps } from './_internal/pane-chrome.js';
@@ -784,7 +785,9 @@ const Panel = React.forwardRef<HTMLDivElement, PanelPublicProps>((props, ref) =>
       }
     >
       <div className="kui-ShellPanelContent">
-        <PaneChromeScope>{content}</PaneChromeScope>
+        <PaneChromeScope>
+          <PageScope>{content}</PageScope>
+        </PaneChromeScope>
       </div>
       {handle}
     </div>
@@ -808,7 +811,10 @@ const Content = React.forwardRef<HTMLElement, ShellContentProps>(({ className, i
   useInsetRegistration('content', inset);
   return (
     <main {...props} ref={ref} className={classNames('kui-ShellContent', className)} data-inset={inset || undefined}>
-      <ShellContentContext.Provider value={true}>{children}</ShellContentContext.Provider>
+      {/* Each pane holds its own page store, so a band's title can mirror the page beside it. */}
+      <ShellContentContext.Provider value={true}>
+        <PageScope>{children}</PageScope>
+      </ShellContentContext.Provider>
     </main>
   );
 });

package/src/components/toolbar.css

@@ -158,6 +158,17 @@
   flex-shrink: 1;
 }
 
+/* A mirroring title is the page's own, said again in the band: silent while the page's large
+   title is on screen, shown at once when it is not. Paint only, so the clusters beside it never
+   move when someone scrolls. */
+.kui-ToolbarTitle:where([data-mirror]) {
+  opacity: 0;
+}
+
+.kui-ToolbarTitle:where([data-mirror][data-collapsed]) {
+  opacity: 1;
+}
+
 /* A title is a different kind of thing from the controls beside it, so it takes more air than
    they take from each other. It reaches inside a cluster, since a band is often written
    <Flex>{back}{title}</Flex>. No air against the row's own ends. */

package/src/components/toolbar.tsx

@@ -1,7 +1,7 @@
 'use client';
 
 import * as React from 'react';
-import { useLayoutEffect } from 'radix-ui/internal';
+import { useComposedRefs, useLayoutEffect } from 'radix-ui/internal';
 import classNames from 'classnames';
 import { Toolbar as ToolbarPrimitive } from 'radix-ui';
 
@@ -13,6 +13,7 @@ import { extractProps } from '../helpers/extract-props.js';
 import { useThemeSize } from '../hooks/theme-size.js';
 import { layoutPropDefs } from '../props/layout.props.js';
 import { usePaneBandSize } from './_internal/pane-chrome.js';
+import { usePageMirror, usePageScope, usePageTitle } from './_internal/page-scope.js';
 
 import type { ButtonProps } from './button.js';
 import type { LayoutProps } from '../props/layout.props.js';
@@ -671,7 +672,11 @@ ToolbarSeparator.displayName = 'Toolbar.Separator';
 const TITLE_SIZE = { '1': '2', '2': '3', '3': '4', '4': '5' } as const satisfies Record<ToolbarSize, TextProps['size']>;
 
 interface ToolbarTitleProps {
-  /** The title text. With none, the title renders nothing. */
+  /**
+   * The title text. With none, the title mirrors the page in this Shell pane: it shows the
+   * `Page`'s title once that title has scrolled behind the band. Outside a pane with a page, it
+   * renders nothing.
+   */
   children?: React.ReactNode;
   className?: string;
   style?: React.CSSProperties;
@@ -689,10 +694,16 @@ const ToolbarTitle = React.forwardRef<HTMLSpanElement, ToolbarTitleProps>(
     const toolbar = React.useContext(ToolbarContext);
     const themeSize = useThemeSize<ToolbarSize>(undefined, toolbarRootPropDefs.size);
     const size = toolbar?.size ?? themeSize;
-    if (children === undefined || children === null || children === false) return null;
+    const store = usePageScope();
+    const pageTitle = usePageTitle(store);
+    const mirrorRef = usePageMirror(store);
+    const mirroring = children === undefined || children === null || children === false;
+    const words = mirroring ? pageTitle : children;
+    const ref = useComposedRefs(forwardedRef, mirroring ? mirrorRef : undefined);
+    if (words === undefined || words === null) return null;
     return (
       <Text
-        ref={forwardedRef}
+        ref={ref}
         as="span"
         size={TITLE_SIZE[size]}
         weight="medium"
@@ -700,8 +711,9 @@ const ToolbarTitle = React.forwardRef<HTMLSpanElement, ToolbarTitleProps>(
         id={id}
         style={style}
         className={classNames('kui-ToolbarTitle', className)}
+        data-mirror={mirroring || undefined}
       >
-        {children}
+        {words}
       </Text>
     );
   },

package/styles.css

@@ -12558,19 +12558,19 @@
 }
 .kui-Link:where(:-moz-any-link,button) {
   cursor: var(--cursor-link);
-  text-decoration-line: none;
+  text-decoration-line: underline;
   text-decoration-style: solid;
   text-decoration-thickness: min(2px, max(1px, 0.05em));
-  text-underline-offset: calc(0.025em + 2px);
-  text-decoration-color: var(--accent-a5);
+  text-underline-offset: 0.2em;
+  text-decoration-color: var(--accent-a6);
 }
 .kui-Link:where(:any-link,button) {
   cursor: var(--cursor-link);
-  text-decoration-line: none;
+  text-decoration-line: underline;
   text-decoration-style: solid;
   text-decoration-thickness: min(2px, max(1px, 0.05em));
-  text-underline-offset: calc(0.025em + 2px);
-  text-decoration-color: var(--accent-a5);
+  text-underline-offset: 0.2em;
+  text-decoration-color: var(--accent-a6);
 }
 .kui-Link:where(:disabled,[data-disabled]) {
   cursor: var(--cursor-disabled);
@@ -12578,19 +12578,21 @@
 .kui-Link:where(:focus-visible) {
   border-radius: calc(0.07em * var(--radius-factor));
   outline-color: var(--focus-8);
-  outline-width: 2px;
+  outline-width: var(--focus-ring-width);
   outline-style: solid;
-  outline-offset: 2px;
+  outline-offset: var(--focus-ring-offset);
+  -webkit-box-decoration-break: clone;
+  box-decoration-break: clone;
 }
 :where([data-accent-color]:not(.kui-theme)) .kui-Link:where([data-accent-color='']) {
   color: var(--accent-ink);
 }
-@supports (color: color-mix(in oklab, white, black)) {
-  .kui-Link:where(:-moz-any-link,button) {
-    text-decoration-color: color-mix(in oklab, var(--accent-a5), var(--neutral-a6));
+@media (hover: hover) {
+  .kui-Link:where(:-moz-any-link,button):where(:hover) {
+    text-decoration-color: currentcolor;
   }
-  .kui-Link:where(:any-link,button) {
-    text-decoration-color: color-mix(in oklab, var(--accent-a5), var(--neutral-a6));
+  .kui-Link:where(:any-link,button):where(:hover) {
+    text-decoration-color: currentcolor;
   }
 }
 @media (pointer: coarse) {
@@ -12603,44 +12605,6 @@
     outline-offset: -0.6em;
   }
 }
-@media (hover: hover) {
-  .kui-Link:where(:-moz-any-link,button):where(.kui-underline-auto):where(:hover) {
-    text-decoration-line: underline;
-  }
-  .kui-Link:where(:any-link,button):where(.kui-underline-auto):where(:hover) {
-    text-decoration-line: underline;
-  }
-}
-:where([data-accent-color]:not(.kui-theme)) .kui-Link:where(:-moz-any-link,button):where(.kui-underline-auto):where([data-accent-color='']) {
-  text-decoration-line: underline;
-  text-decoration-color: var(--accent-a6);
-}
-:where([data-accent-color]:not(.kui-theme)) .kui-Link:where(:any-link,button):where(.kui-underline-auto):where([data-accent-color='']) {
-  text-decoration-line: underline;
-  text-decoration-color: var(--accent-a6);
-}
-@supports (color: color-mix(in oklab, white, black)) {
-  :where([data-accent-color]:not(.kui-theme)) .kui-Link:where(:-moz-any-link,button):where(.kui-underline-auto):where([data-accent-color='']) {
-    text-decoration-color: color-mix(in oklab, var(--accent-a6), var(--neutral-a6));
-  }
-  :where([data-accent-color]:not(.kui-theme)) .kui-Link:where(:any-link,button):where(.kui-underline-auto):where([data-accent-color='']) {
-    text-decoration-color: color-mix(in oklab, var(--accent-a6), var(--neutral-a6));
-  }
-}
-@media (hover: hover) {
-  .kui-Link:where(:-moz-any-link,button):where(.kui-underline-hover):where(:hover) {
-    text-decoration-line: underline;
-  }
-  .kui-Link:where(:any-link,button):where(.kui-underline-hover):where(:hover) {
-    text-decoration-line: underline;
-  }
-}
-.kui-Link:where(:-moz-any-link,button):where(.kui-underline-always) {
-  text-decoration-line: underline;
-}
-.kui-Link:where(:any-link,button):where(.kui-underline-always) {
-  text-decoration-line: underline;
-}
 .kui-Link:where(:has(.kui-Code:not(.kui-variant-ghost):only-child)) {
   text-decoration-color: transparent;
 }
@@ -20480,6 +20444,12 @@
   -ms-flex-negative: 1;
       flex-shrink: 1;
 }
+.kui-ToolbarTitle:where([data-mirror]) {
+  opacity: 0;
+}
+.kui-ToolbarTitle:where([data-mirror][data-collapsed]) {
+  opacity: 1;
+}
 :where(.kui-Toolbar) .kui-ToolbarTitle:where(:not(:first-child)) {
   -webkit-margin-start: calc(var(--toolbar-title-gap) - var(--toolbar-gap));
           margin-inline-start: calc(var(--toolbar-title-gap) - var(--toolbar-gap));
@@ -20582,6 +20552,41 @@
   outline: 2px solid var(--focus-8);
   outline-offset: -2px;
 }
+.kui-Page {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-orient: vertical;
+  -webkit-box-direction: normal;
+      -ms-flex-direction: column;
+          flex-direction: column;
+  gap: var(--layout-space-8);
+  -webkit-padding-before: var(--layout-space-7);
+          padding-block-start: var(--layout-space-7);
+}
+.kui-PageHeader {
+  position: relative;
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-orient: vertical;
+  -webkit-box-direction: normal;
+      -ms-flex-direction: column;
+          flex-direction: column;
+  gap: var(--layout-space-6);
+}
+.kui-PageMark {
+  -webkit-margin-after: calc(var(--layout-space-4) - var(--layout-space-6));
+          margin-block-end: calc(var(--layout-space-4) - var(--layout-space-6));
+}
+.kui-PageMarker {
+  position: absolute;
+  inset-block-end: var(--kui-pane-inset-start, 0px);
+  inset-inline-start: 0;
+  block-size: 1px;
+  inline-size: 100%;
+  pointer-events: none;
+}
 .kui-TooltipContent {
   -webkit-box-sizing: border-box;
           box-sizing: border-box;