@igne-agency/react-web-ui 0.4.0 → 0.6.0

package/dist/components/nav/nav.css

@@ -1,24 +1,30 @@
 @layer kit.reset, kit.base, kit.components;
 @layer kit.components {
-  ._scroller_9ce88_3 {
+  ._root_1hb8v_3 {
+    border: 0 solid var(--nav-border, var(--sys-color-border));
+    border-width: var(--nav-border-width, 0);
+    background: var(--nav-bg, transparent);
+    backdrop-filter: var(--nav-backdrop-filter, none);
+  }
+  ._scroller_1hb8v_9 {
     overflow-x: auto;
     overscroll-behavior-x: contain;
   }
-  ._list_9ce88_7 {
+  ._list_1hb8v_13 {
     list-style: none;
   }
-  ._list_9ce88_7[data-orientation=vertical] {
+  ._list_1hb8v_13[data-orientation=vertical] {
     display: flex;
     flex-direction: column;
     gap: var(--nav-gap, var(--sys-unit-2));
   }
-  ._list_9ce88_7[data-orientation=horizontal] {
+  ._list_1hb8v_13[data-orientation=horizontal] {
     position: relative;
     display: flex;
     gap: var(--tab-gap, var(--sys-unit-2));
     min-inline-size: max-content;
   }
-  ._indicator_9ce88_21 {
+  ._indicator_1hb8v_27 {
     --_indicator-slack: var(
     	--sliding-indicator-slack,
     	0px
@@ -36,103 +42,112 @@
     pointer-events: none;
   }
   @media not (prefers-reduced-motion) {
-    ._indicator_9ce88_21 {
+    ._indicator_1hb8v_27 {
       transition: inset-inline-start var(--_indicator-slide), inset-block-start var(--_indicator-slide), inline-size var(--_indicator-slide), block-size var(--_indicator-slide), opacity var(--sys-motion-instant) var(--sys-motion-standard), scale var(--sys-motion-short) var(--sys-motion-overshoot);
     }
   }
-  ._indicator_9ce88_21[data-jump] {
+  ._indicator_1hb8v_27[data-jump] {
     --_indicator-slide: 0s;
   }
-  ._indicator_9ce88_21[data-empty] {
+  ._indicator_1hb8v_27[data-empty] {
     opacity: 0;
     scale: 0;
   }
   @media not (prefers-reduced-motion) {
-    ._indicator_9ce88_21[data-empty] {
+    ._indicator_1hb8v_27[data-empty] {
       transition: opacity var(--sys-motion-instant) var(--sys-motion-standard), scale var(--sys-motion-instant) var(--sys-motion-standard);
     }
   }
-  ._indicator_9ce88_21 {
-    border-radius: var(--sys-radius-full);
+  ._indicator_1hb8v_27 {
+    border-radius: var(--tab-indicator-radius, var(--sys-radius-full));
     background: var(--tab-indicator, var(--sys-color-primary));
   }
-  ._tab_9ce88_59 {
+  ._tab_1hb8v_65 {
     display: inline-flex;
     align-items: center;
-    gap: var(--sys-unit-4);
-    padding: var(--sys-unit-6) var(--sys-unit-10);
-    border-radius: var(--sys-radius-full);
+    gap: var(--tab-icon-gap, var(--sys-unit-4));
+    padding: var(--tab-pad-y, var(--sys-unit-6)) var(--tab-pad-x, var(--sys-unit-10));
+    border-radius: var(--tab-radius, var(--sys-radius-full));
     color: var(--tab-fg, var(--sys-color-text-muted));
-    font: var(--sys-font-label-medium);
+    font: var(--tab-font, var(--sys-font-label-medium));
     text-decoration: none;
     white-space: nowrap;
     cursor: pointer;
   }
-  ._tab_9ce88_59 {
+  ._tab_1hb8v_65 {
     outline: 0 solid var(--sys-color-focus-ring);
     outline-offset: var(--sys-focus-ring-offset);
   }
-  ._tab_9ce88_59:focus-visible {
+  ._tab_1hb8v_65:focus-visible {
     outline-width: var(--sys-focus-ring-width);
   }
-  ._tab_9ce88_59 {
+  ._tab_1hb8v_65 {
     outline-offset: calc(-1 * var(--sys-focus-ring-width));
   }
   @media not (prefers-reduced-motion) {
-    ._tab_9ce88_59 {
+    ._tab_1hb8v_65 {
       transition: background-color var(--sys-motion-instant) var(--sys-motion-standard);
     }
   }
-  ._tab_9ce88_59:hover {
-    background: var(--tab-bg-hover, var(--sys-color-primary-container));
+  ._tab_1hb8v_65:hover {
+    background: var(--tab-hover-bg, var(--sys-color-primary-container));
   }
-  ._tab_9ce88_59 {
+  ._tab_1hb8v_65 {
     position: relative;
   }
   @media not (prefers-reduced-motion) {
-    ._tab_9ce88_59 {
+    ._tab_1hb8v_65 {
       transition: background-color var(--sys-motion-instant) var(--sys-motion-standard), color var(--sys-motion-short) var(--sys-motion-emphasized);
     }
   }
-  ._tab_9ce88_59[aria-current=page], ._tab_9ce88_59[data-active=true] {
-    color: var(--tab-fg-active, var(--sys-color-on-primary));
+  ._tab_1hb8v_65[aria-current=page], ._tab_1hb8v_65[data-active=true] {
+    color: var(--tab-active-fg, var(--sys-color-on-primary));
   }
-  ._tab_9ce88_59[aria-current=page]:hover, ._tab_9ce88_59[data-active=true]:hover {
+  ._tab_1hb8v_65[aria-current=page]:hover, ._tab_1hb8v_65[data-active=true]:hover {
     background: none;
   }
-  ._iconSlot_9ce88_103 {
+  ._iconSlot_1hb8v_109 {
     display: inline-flex;
     flex-shrink: 0;
     align-items: center;
     justify-content: center;
     font-size: var(--nav-icon-size, 1em);
   }
-  ._item_9ce88_110 {
+  ._item_1hb8v_116 {
+    --_nav-item-gap: var(--sys-unit-6);
+    --_nav-item-pad-y: var(--sys-unit-4);
+    --_nav-item-pad-x: var(--sys-unit-8);
+    --_nav-item-radius: var(--sys-radius-full);
+    --_nav-item-font: var(--sys-font-label-medium);
+    --_nav-item-active-bg: var(--sys-color-primary-container);
+    --_nav-item-active-font: var(
+    	--sys-font-label-medium-strong
+    );
     display: flex;
-    gap: var(--sys-unit-6);
+    gap: var(--nav-item-gap, var(--_nav-item-gap));
     align-items: center;
     box-sizing: border-box;
     inline-size: 100%;
     min-block-size: var(--nav-item-min-size, var(--sys-unit-24));
-    padding: var(--sys-unit-4) var(--sys-unit-8);
-    border-radius: var(--sys-radius-full);
+    padding: var(--nav-item-pad-y, var(--_nav-item-pad-y)) var(--nav-item-pad-x, var(--_nav-item-pad-x));
+    border-radius: var(--nav-item-radius, var(--_nav-item-radius));
     color: var(--nav-item-fg, var(--sys-color-text));
-    font: var(--sys-font-label-medium);
+    font: var(--nav-item-font, var(--_nav-item-font));
     text-align: start;
     text-decoration: none;
   }
-  ._item_9ce88_110 {
+  ._item_1hb8v_116 {
     outline: 0 solid var(--sys-color-focus-ring);
     outline-offset: var(--sys-focus-ring-offset);
   }
-  ._item_9ce88_110:focus-visible {
+  ._item_1hb8v_116:focus-visible {
     outline-width: var(--sys-focus-ring-width);
   }
-  ._item_9ce88_110 {
+  ._item_1hb8v_116 {
     position: relative;
     isolation: isolate;
   }
-  ._item_9ce88_110::after {
+  ._item_1hb8v_116::after {
     content: "";
     position: absolute;
     z-index: -1;
@@ -143,180 +158,196 @@
     pointer-events: none;
   }
   @media not (prefers-reduced-motion) {
-    ._item_9ce88_110::after {
+    ._item_1hb8v_116::after {
       transition: opacity var(--sys-motion-instant) var(--sys-motion-standard);
     }
   }
-  ._item_9ce88_110:hover:not(:disabled, [data-disabled])::after {
+  ._item_1hb8v_116:hover:not(:disabled, [data-disabled])::after {
     opacity: var(--sys-state-hover);
   }
-  ._item_9ce88_110:active:not(:disabled, [data-disabled])::after {
+  ._item_1hb8v_116:active:not(:disabled, [data-disabled])::after {
     opacity: var(--sys-state-pressed);
   }
   @media not (prefers-reduced-motion) {
-    ._item_9ce88_110 {
+    ._item_1hb8v_116 {
       transition: background-color var(--sys-motion-short) var(--sys-motion-standard), color var(--sys-motion-short) var(--sys-motion-standard);
     }
   }
-  ._item_9ce88_110[data-active=true], ._item_9ce88_110[aria-current=page] {
-    background-color: var(--sys-color-primary-container);
-    color: var(--sys-color-on-primary-container);
-    font: var(--sys-font-label-medium-strong);
-  }
-  ._item_9ce88_110[data-labelled=false] > ._label_9ce88_166 {
-    opacity: 0;
-  }
-  ._item_9ce88_110[data-layout=stack] {
+  ._item_1hb8v_116[data-active=true], ._item_1hb8v_116[aria-current=page] {
+    background-color: var(--nav-item-active-bg, var(--_nav-item-active-bg));
+    color: var(--nav-item-active-fg, var(--sys-color-on-primary-container));
+    font: var(--nav-item-active-font, var(--_nav-item-active-font));
+  }
+  ._item_1hb8v_116[data-layout=stack] {
+    --_nav-item-gap: var(--sys-unit-2);
+    --_nav-item-pad-y: var(--sys-unit-2);
+    --_nav-item-pad-x: var(--sys-unit-2);
+    --_nav-item-radius: var(--sys-radius-md);
+    --_nav-item-font: var(--sys-font-label-small);
+    --_nav-item-active-bg: transparent;
+    --_nav-item-active-font: var(
+    	--sys-font-label-small-strong
+    );
     display: grid;
     grid-row: span 2;
     grid-template-rows: subgrid;
-    gap: var(--sys-unit-2);
     justify-items: center;
     align-items: start;
     min-inline-size: 0;
-    padding: var(--sys-unit-2);
-    border-radius: var(--sys-radius-md);
-    font: var(--sys-font-label-small);
     text-align: center;
   }
-  ._item_9ce88_110[data-layout=stack][data-active=true], ._item_9ce88_110[data-layout=stack][aria-current=page] {
-    background-color: transparent;
-    color: var(--sys-color-on-primary-container);
-    font: var(--sys-font-label-small-strong);
-  }
-  ._item_9ce88_110[data-layout=stack] > ._iconSlot_9ce88_103 {
+  ._item_1hb8v_116[data-layout=stack] > ._iconSlot_1hb8v_109 {
     inline-size: 100%;
-    max-inline-size: var(--sys-unit-24);
-    block-size: var(--sys-unit-16);
-    border-radius: var(--sys-radius-full);
+    max-inline-size: var(--nav-item-indicator-max-inline-size, var(--sys-unit-24));
+    block-size: var(--nav-item-indicator-block-size, var(--sys-unit-16));
+    border-radius: var(--nav-item-indicator-radius, var(--sys-radius-full));
   }
   @media not (prefers-reduced-motion) {
-    ._item_9ce88_110[data-layout=stack] > ._iconSlot_9ce88_103 {
+    ._item_1hb8v_116[data-layout=stack] > ._iconSlot_1hb8v_109 {
       transition: background-color var(--sys-motion-short) var(--sys-motion-standard);
     }
   }
-  ._item_9ce88_110[data-layout=stack] > ._iconSlot_9ce88_103 {
+  ._item_1hb8v_116[data-layout=stack] > ._iconSlot_1hb8v_109 {
     font-size: var(--nav-icon-size, 1.5em);
   }
-  ._item_9ce88_110[data-layout=stack][data-active=true] > ._iconSlot_9ce88_103, ._item_9ce88_110[data-layout=stack][aria-current=page] > ._iconSlot_9ce88_103 {
-    background-color: var(--sys-color-primary-container);
+  ._item_1hb8v_116[data-layout=stack][data-active=true] > ._iconSlot_1hb8v_109, ._item_1hb8v_116[data-layout=stack][aria-current=page] > ._iconSlot_1hb8v_109 {
+    background-color: var(--nav-item-indicator-bg, var(--sys-color-primary-container));
   }
-  ._label_9ce88_166 {
+  ._label_1hb8v_216 {
     min-inline-size: 0;
     overflow-wrap: normal;
     hyphens: auto;
     white-space: var(--nav-label-wrap, normal);
   }
-  @media not (prefers-reduced-motion) {
-    ._label_9ce88_166 {
-      transition: opacity var(--sys-motion-short) var(--sys-motion-standard);
-    }
-  }
-  ._hintPositioner_9ce88_215 {
+  ._hintPositioner_1hb8v_222 {
     inline-size: var(--positioner-width);
     block-size: var(--positioner-height);
   }
   @media not (prefers-reduced-motion) {
-    ._hintPositioner_9ce88_215 {
+    ._hintPositioner_1hb8v_222 {
       transition: top var(--sys-motion-short) var(--sys-motion-standard), left var(--sys-motion-short) var(--sys-motion-standard);
     }
   }
-  ._hintViewport_9ce88_224 {
+  ._hintViewport_1hb8v_231 {
     overflow: hidden;
   }
   @media not (prefers-reduced-motion) {
-    ._hintViewport_9ce88_224 > [data-current],
-    ._hintViewport_9ce88_224 > [data-previous] {
+    ._hintViewport_1hb8v_231 > [data-current],
+    ._hintViewport_1hb8v_231 > [data-previous] {
       transition: opacity var(--sys-motion-short) var(--sys-motion-standard);
     }
-    ._hintViewport_9ce88_224 > [data-current][data-starting-style],
-    ._hintViewport_9ce88_224 > [data-previous][data-ending-style] {
+    ._hintViewport_1hb8v_231 > [data-current][data-starting-style],
+    ._hintViewport_1hb8v_231 > [data-previous][data-ending-style] {
       opacity: 0;
     }
   }
-  ._group_9ce88_237 {
+  ._group_1hb8v_244 {
     display: flex;
     flex-direction: column;
   }
-  ._groupHeader_9ce88_241 {
+  ._groupHeader_1hb8v_248 {
     display: grid;
     grid-auto-flow: column;
     grid-template-columns: minmax(0, 1fr);
     align-items: center;
-    gap: var(--sys-unit-2);
-    border-radius: var(--sys-radius-full);
+    gap: var(--nav-group-header-gap, var(--sys-unit-2));
+    border-radius: var(--nav-item-radius, var(--sys-radius-full));
   }
   @media not (prefers-reduced-motion) {
-    ._groupHeader_9ce88_241 {
+    ._groupHeader_1hb8v_248 {
       transition: background-color var(--sys-motion-short) var(--sys-motion-standard);
     }
   }
-  ._groupHeader_9ce88_241:has(> [data-active=true]), ._groupHeader_9ce88_241:has(> [aria-current=page]) {
-    background-color: var(--sys-color-primary-container);
+  ._groupHeader_1hb8v_248:has(> [data-active=true]), ._groupHeader_1hb8v_248:has(> [aria-current=page]) {
+    background-color: var(--nav-item-active-bg, var(--sys-color-primary-container));
   }
-  ._groupToggle_9ce88_257 {
-    --btn-pad-y: var(--sys-unit-8);
+  ._groupToggle_1hb8v_264 {
+    --btn-pad-y: var(
+    	--nav-group-toggle-pad,
+    	var(--sys-unit-8)
+    );
   }
   @media not (prefers-reduced-motion) {
-    ._groupToggle_9ce88_257 svg {
+    ._groupToggle_1hb8v_264 svg {
       transition: rotate var(--sys-motion-short) var(--sys-motion-standard);
     }
   }
-  ._groupToggle_9ce88_257[data-panel-open] svg {
+  ._groupToggle_1hb8v_264[data-panel-open] svg {
     rotate: 180deg;
   }
-  ._groupPanel_9ce88_268 {
+  ._groupPanel_1hb8v_278 {
     overflow: hidden;
   }
-  ._groupPanel_9ce88_268[hidden]:not([hidden=until-found]) {
+  ._groupPanel_1hb8v_278[hidden]:not([hidden=until-found]) {
     display: none;
   }
   @media not (prefers-reduced-motion) {
-    ._groupPanel_9ce88_268 {
+    ._groupPanel_1hb8v_278 {
       block-size: var(--collapsible-panel-height);
       transition: block-size var(--sys-motion-short) var(--sys-motion-standard);
     }
-    ._groupPanel_9ce88_268[data-starting-style], ._groupPanel_9ce88_268[data-ending-style] {
+    ._groupPanel_1hb8v_278[data-starting-style], ._groupPanel_1hb8v_278[data-ending-style] {
       block-size: 0;
     }
   }
-  ._groupList_9ce88_283 {
-    --branch-reach: var(--sys-unit-8);
-    --branch-line: color-mix(
-    	in oklab,
-    	var(--sys-color-border) 66.66%,
-    	var(--sys-color-surface)
+  ._groupList_1hb8v_293 {
+    --nav-item-min-size: var(
+    	--nav-group-item-min-size,
+    	var(--sys-unit-20)
+    );
+    --nav-item-fg: var(
+    	--nav-group-item-fg,
+    	var(--sys-color-text-muted)
     );
-    --nav-item-min-size: var(--sys-unit-20);
-    --nav-item-fg: var(--sys-color-text-muted);
     display: flex;
     flex-direction: column;
-    gap: var(--sys-unit-2);
-    padding-block: var(--sys-unit-2);
-    padding-inline-start: var(--sys-unit-20);
+    gap: var(--nav-group-list-gap, var(--sys-unit-2));
+    padding-block: var(--nav-group-list-pad-y, var(--sys-unit-2));
+    padding-inline-start: var(--nav-group-list-indent, var(--sys-unit-20));
     list-style: none;
   }
-  ._groupList_9ce88_283 > li {
+  ._groupList_1hb8v_293 > li {
+    --_nav-branch-gap: var(
+    	--nav-group-list-gap,
+    	var(--sys-unit-2)
+    );
+    --_nav-branch-reach: var(
+    	--nav-branch-reach,
+    	var(--sys-unit-8)
+    );
+    --_nav-branch-line: var(
+    		--nav-branch-border-width,
+    		1px
+    	)
+    	solid
+    	var(
+    		--nav-branch-border,
+    		color-mix(
+    			in oklab,
+    			var(--sys-color-border) 66.66%,
+    			var(--sys-color-surface)
+    		)
+    	);
     position: relative;
   }
-  ._groupList_9ce88_283 > li::before {
+  ._groupList_1hb8v_293 > li::before {
     content: "";
     position: absolute;
-    inset-block-start: calc(-1 * var(--sys-unit-2));
-    inset-inline-start: calc(-1 * var(--branch-reach));
-    inline-size: var(--branch-reach);
-    block-size: calc(50% + var(--sys-unit-2));
-    border-inline-start: 1px solid var(--branch-line);
-    border-block-end: 1px solid var(--branch-line);
+    inset-block-start: calc(-1 * var(--_nav-branch-gap));
+    inset-inline-start: calc(-1 * var(--_nav-branch-reach));
+    inline-size: var(--_nav-branch-reach);
+    block-size: calc(50% + var(--_nav-branch-gap));
+    border-inline-start: var(--_nav-branch-line);
+    border-block-end: var(--_nav-branch-line);
   }
-  ._groupList_9ce88_283 > li:last-child::before {
-    border-end-start-radius: var(--sys-radius-sm);
+  ._groupList_1hb8v_293 > li:last-child::before {
+    border-end-start-radius: var(--nav-branch-radius, var(--sys-radius-sm));
   }
-  ._groupList_9ce88_283 > li:not(:last-child)::after {
+  ._groupList_1hb8v_293 > li:not(:last-child)::after {
     content: "";
     position: absolute;
     inset-block: 50% 0;
-    inset-inline-start: calc(-1 * var(--branch-reach));
-    border-inline-start: 1px solid var(--branch-line);
+    inset-inline-start: calc(-1 * var(--_nav-branch-reach));
+    border-inline-start: var(--_nav-branch-line);
   }
 }

package/dist/components/nav/nav.d.ts

@@ -1,5 +1,6 @@
 import { Collapsible as BaseCollapsible } from "@base-ui/react/collapsible";
-import { type ComponentPropsWithRef, type ReactNode } from "react";
+import { useRender } from "@base-ui/react/use-render";
+import { type ComponentPropsWithRef, type ReactElement, type ReactNode } from "react";
 import { type NavOrientation } from "./nav-context.ts";
 import { type NavEntryProps } from "./nav-item-view.tsx";
 export type NavRootProps = Omit<ComponentPropsWithRef<"nav">, "aria-label"> & Readonly<{
@@ -8,13 +9,48 @@ export type NavRootProps = Omit<ComponentPropsWithRef<"nav">, "aria-label"> & Re
     /** A bar of tabs that lead to pages, or the app's rail. @default "vertical" */
     orientation?: NavOrientation;
 }>;
+/** The `<nav>`, holding the one hint its entries share. */
 declare const Root: ({ orientation, className, children, ...props }: NavRootProps) => ReactNode;
+export type NavHintProps = Readonly<{
+    className?: string;
+}>;
+/**
+ * The one tooltip every entry with a `label` names itself through, so the hint
+ * travels between entries rather than one closing as the next opens. Mount it
+ * inside `Root` where the entries show no label, such as a collapsed rail.
+ *
+ * @example
+ * <Nav.Root aria-label="Main">
+ * 	<Nav.List>…</Nav.List>
+ * 	{collapsed ? <Nav.Hint /> : null}
+ * </Nav.Root>
+ */
+declare const Hint: ({ className }: NavHintProps) => ReactNode;
+export type NavScrollerProps = useRender.ComponentProps<"div">;
+/**
+ * Lets a horizontal `List` scroll sideways once it outgrows its room.
+ *
+ * @example
+ * <Nav.Scroller>
+ * 	<Nav.List>…</Nav.List>
+ * </Nav.Scroller>
+ */
+declare const Scroller: ({ render, className, ref, ...props }: NavScrollerProps) => ReactElement;
 export type NavListProps = ComponentPropsWithRef<"ul">;
+/** The entries, laid out along the nav's orientation. */
+declare const List: ({ className, ref, ...props }: NavListProps) => ReactElement;
+export type NavIndicatorProps = Omit<useRender.ComponentProps<"li">, "children">;
 /**
- * The entries. In a horizontal nav a pill slides to the entry marked
- * `aria-current="page"` or `data-active="true"`.
+ * The pill that slides to the entry marked `aria-current="page"` or
+ * `data-active="true"`, inside a horizontal `List`.
+ *
+ * @example
+ * <Nav.List>
+ * 	<Nav.Indicator />
+ * 	<Nav.Item>…</Nav.Item>
+ * </Nav.List>
  */
-declare const List: ({ className, children, ref, ...props }: NavListProps) => ReactNode;
+declare const Indicator: ({ render, className, ref, ...props }: NavIndicatorProps) => ReactElement;
 export type NavItemProps = ComponentPropsWithRef<"li">;
 declare const Item: (props: NavItemProps) => ReactNode;
 export type NavLinkProps = ComponentPropsWithRef<"a"> & NavEntryProps;
@@ -23,7 +59,7 @@ export type NavLinkProps = ComponentPropsWithRef<"a"> & NavEntryProps;
  * ref, so a router's `createLink` can wrap it; the router's
  * `aria-current="page"` marks the current one.
  */
-declare const Link: ({ layout, labelled, label, className, ...props }: NavLinkProps) => ReactNode;
+declare const Link: ({ layout, label, className, ...props }: NavLinkProps) => ReactNode;
 export type NavGroupProps = Omit<ComponentPropsWithRef<"div">, "onToggle"> & (Readonly<{
     /** Whether the subpages show, when controlled. */
     open: boolean;
@@ -43,14 +79,18 @@ declare const Group: ({ open, defaultOpen, onOpenChange, className, children, ..
 export type NavGroupHeaderProps = ComponentPropsWithRef<"div">;
 /** The group's row: its own `Link`, then its `GroupToggle`. Filled while that link is current. */
 declare const GroupHeader: ({ className, ...props }: NavGroupHeaderProps) => ReactNode;
-export type NavGroupToggleProps = Omit<ComponentPropsWithRef<"button">, "children" | "aria-label"> & Readonly<{
-    /** Accessible name, such as "Show subpages", surfaced as the tooltip hint and the `aria-label`. */
-    label: string;
-    /** The expand chevron, pointing down while closed; it turns over while open. */
-    children: ReactNode;
+export type NavGroupToggleProps = Omit<BaseCollapsible.Trigger.Props, "render"> & Readonly<{
+    /** The button to render, such as `<IconButton label="Show subpages" variant="tertiary"><ExpandIcon /></IconButton>`. */
+    render: ReactElement;
 }>;
-/** The icon-only button that folds the group's subpages open and shut; its children are the chevron. */
-declare const GroupToggle: ({ label, children, className, ...props }: NavGroupToggleProps) => ReactNode;
+/**
+ * The trigger that folds the group's subpages open and shut, rendered as the
+ * button it is given.
+ *
+ * @example
+ * <Nav.GroupToggle render={<IconButton label="Show subpages" variant="tertiary"><ExpandIcon /></IconButton>} />
+ */
+declare const GroupToggle: ({ className, ...props }: NavGroupToggleProps) => ReactNode;
 export type NavGroupPanelProps = Omit<BaseCollapsible.Panel.Props, "className"> & Readonly<{
     className?: string;
 }>;
@@ -61,7 +101,10 @@ export type NavGroupListProps = ComponentPropsWithRef<"ul">;
 declare const GroupList: ({ className, ...props }: NavGroupListProps) => ReactNode;
 type NavParts = Readonly<{
     Root: typeof Root;
+    Hint: typeof Hint;
+    Scroller: typeof Scroller;
     List: typeof List;
+    Indicator: typeof Indicator;
     Item: typeof Item;
     Link: typeof Link;
     Group: typeof Group;
@@ -71,10 +114,11 @@ type NavParts = Readonly<{
     GroupList: typeof GroupList;
 }>;
 /**
- * Navigation between pages as `nav > ul > li > a`: a horizontal bar of tabs
- * with a pill that slides to the current page, or the app's vertical rail,
- * whose destinations with subpages fold them open in a `Group`. An entry that
- * is not a link is a `NavItemView.Root`.
+ * Navigation between pages as `nav > ul > li > a`: a horizontal bar of tabs,
+ * in a `Scroller` with an `Indicator` that slides to the current page, or the
+ * app's vertical rail, whose destinations with subpages fold them open in a
+ * `Group` and whose entries without a visible label are named by the `Hint`.
+ * An entry that is not a link is a `NavItemView.Root`.
  *
  * @example
  * const NavLink = createLink(Nav.Link);
@@ -82,7 +126,7 @@ type NavParts = Readonly<{
  * <Nav.Root aria-label="Main">
  * 	<Nav.List>
  * 		<Nav.Item>
- * 			<NavLink to="/" label="Home" activeOptions={{ exact: true }}>
+ * 			<NavLink to="/" activeOptions={{ exact: true }}>
  * 				<NavItemView.Icon><HomeIcon /></NavItemView.Icon>
  * 				<NavItemView.Label>Home</NavItemView.Label>
  * 			</NavLink>