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

package/dist/components/nav/nav-item-view.js

@@ -1,26 +1,24 @@
-import { Icon } from "../icon/icon.js";
-import { NavContext, NavItemLayoutContext } from "./nav-context.js";
+import { NavContext } from "./nav-context.js";
 import nav_module_default from "./nav.module.js";
 import { c } from "react/compiler-runtime";
-import { use } from "react";
-import { jsx } from "react/jsx-runtime";
+import { useRender } from "@base-ui/react/use-render";
 import { clsx } from "clsx";
+import { jsx } from "react/jsx-runtime";
+import { use } from "react";
 import { Tooltip } from "@base-ui/react/tooltip";
-import { useRender } from "@base-ui/react/use-render";
 // src/components/nav/nav-item-view.tsx
 /**
 * Hangs an entry's element off the nav's one tooltip, which names it while it
 * is unlabelled. Outside a `Nav.Root` the element stands alone.
 */
 var EntryShell = (t0) => {
-	const $ = c(8);
-	const { layout: t1, labelled: t2, label, element } = t0;
-	const layout = t1 === void 0 ? "row" : t1;
-	const labelled = t2 === void 0 ? true : t2;
+	const $ = c(5);
+	const { labelled: t1, label, element } = t0;
+	const labelled = t1 === void 0 ? true : t1;
 	const nav = use(NavContext);
-	let t3;
+	let t2;
 	if ($[0] !== element || $[1] !== label || $[2] !== labelled || $[3] !== nav) {
-		t3 = nav === null ? element : /* @__PURE__ */ jsx(Tooltip.Trigger, {
+		t2 = nav === null ? element : /* @__PURE__ */ jsx(Tooltip.Trigger, {
 			handle: nav.hint,
 			payload: label,
 			disabled: labelled,
@@ -30,19 +28,9 @@ var EntryShell = (t0) => {
 		$[1] = label;
 		$[2] = labelled;
 		$[3] = nav;
-		$[4] = t3;
-	} else t3 = $[4];
-	let t4;
-	if ($[5] !== layout || $[6] !== t3) {
-		t4 = /* @__PURE__ */ jsx(NavItemLayoutContext, {
-			value: layout,
-			children: t3
-		});
-		$[5] = layout;
-		$[6] = t3;
-		$[7] = t4;
-	} else t4 = $[7];
-	return t4;
+		$[4] = t2;
+	} else t2 = $[4];
+	return t2;
 };
 /** The attributes an entry's element carries for its layout and label. */
 var entryAttributes = ({ layout = "row", labelled = true, label }) => ({
@@ -155,42 +143,30 @@ var Root = (t0) => {
 	return t4;
 };
 /**
-* The entry's glyph. A stacked entry's icon carries the destination on its own,
-* so it takes 24px over the row's text-matched 16px.
+* The entry's icon slot. A stacked entry's icon carries the destination on its
+* own, so it takes 1.5em over the row's text-matched 1em.
 */
 var NavItemIcon = (t0) => {
-	const $ = c(8);
-	const { svg, className } = t0;
-	const layout = use(NavItemLayoutContext);
+	const $ = c(5);
+	const { className, children } = t0;
 	let t1;
 	if ($[0] !== className) {
 		t1 = clsx(nav_module_default.iconSlot, className);
 		$[0] = className;
 		$[1] = t1;
 	} else t1 = $[1];
-	const t2 = layout === "stack" ? 1.5 : 1;
-	let t3;
-	if ($[2] !== svg || $[3] !== t2) {
-		t3 = /* @__PURE__ */ jsx(Icon, {
-			svg,
-			label: "",
-			size: t2
-		});
-		$[2] = svg;
-		$[3] = t2;
-		$[4] = t3;
-	} else t3 = $[4];
-	let t4;
-	if ($[5] !== t1 || $[6] !== t3) {
-		t4 = /* @__PURE__ */ jsx("span", {
+	let t2;
+	if ($[2] !== children || $[3] !== t1) {
+		t2 = /* @__PURE__ */ jsx("span", {
+			"aria-hidden": "true",
 			className: t1,
-			children: t3
+			children
 		});
-		$[5] = t1;
-		$[6] = t3;
-		$[7] = t4;
-	} else t4 = $[7];
-	return t4;
+		$[2] = children;
+		$[3] = t1;
+		$[4] = t2;
+	} else t2 = $[4];
+	return t2;
 };
 /** The entry's text. Fades out where the entry is named by its tooltip instead. */
 var Label = (t0) => {
@@ -231,7 +207,7 @@ var Label = (t0) => {
 *
 * @example
 * <NavItemView.Root render={<Drawer.Trigger />} label="More" layout="stack">
-* 	<NavItemView.Icon svg={MoreIcon} />
+* 	<NavItemView.Icon><MoreIcon /></NavItemView.Icon>
 * 	<NavItemView.Label>More</NavItemView.Label>
 * </NavItemView.Root>
 */

package/dist/components/nav/nav.css

@@ -1,24 +1,24 @@
 @layer kit.reset, kit.base, kit.components;
 @layer kit.components {
-  ._scroller_t5y6k_3 {
+  ._scroller_9ce88_3 {
     overflow-x: auto;
     overscroll-behavior-x: contain;
   }
-  ._list_t5y6k_7 {
+  ._list_9ce88_7 {
     list-style: none;
   }
-  ._list_t5y6k_7[data-orientation=vertical] {
+  ._list_9ce88_7[data-orientation=vertical] {
     display: flex;
     flex-direction: column;
     gap: var(--nav-gap, var(--sys-unit-2));
   }
-  ._list_t5y6k_7[data-orientation=horizontal] {
+  ._list_9ce88_7[data-orientation=horizontal] {
     position: relative;
     display: flex;
     gap: var(--tab-gap, var(--sys-unit-2));
     min-inline-size: max-content;
   }
-  ._indicator_t5y6k_21 {
+  ._indicator_9ce88_21 {
     --_indicator-slack: var(
     	--sliding-indicator-slack,
     	0px
@@ -36,27 +36,27 @@
     pointer-events: none;
   }
   @media not (prefers-reduced-motion) {
-    ._indicator_t5y6k_21 {
+    ._indicator_9ce88_21 {
       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_t5y6k_21[data-jump] {
+  ._indicator_9ce88_21[data-jump] {
     --_indicator-slide: 0s;
   }
-  ._indicator_t5y6k_21[data-empty] {
+  ._indicator_9ce88_21[data-empty] {
     opacity: 0;
     scale: 0;
   }
   @media not (prefers-reduced-motion) {
-    ._indicator_t5y6k_21[data-empty] {
+    ._indicator_9ce88_21[data-empty] {
       transition: opacity var(--sys-motion-instant) var(--sys-motion-standard), scale var(--sys-motion-instant) var(--sys-motion-standard);
     }
   }
-  ._indicator_t5y6k_21 {
+  ._indicator_9ce88_21 {
     border-radius: var(--sys-radius-full);
     background: var(--tab-indicator, var(--sys-color-primary));
   }
-  ._tab_t5y6k_59 {
+  ._tab_9ce88_59 {
     display: inline-flex;
     align-items: center;
     gap: var(--sys-unit-4);
@@ -68,45 +68,46 @@
     white-space: nowrap;
     cursor: pointer;
   }
-  ._tab_t5y6k_59 {
+  ._tab_9ce88_59 {
     outline: 0 solid var(--sys-color-focus-ring);
     outline-offset: var(--sys-focus-ring-offset);
   }
-  ._tab_t5y6k_59:focus-visible {
+  ._tab_9ce88_59:focus-visible {
     outline-width: var(--sys-focus-ring-width);
   }
-  ._tab_t5y6k_59 {
+  ._tab_9ce88_59 {
     outline-offset: calc(-1 * var(--sys-focus-ring-width));
   }
   @media not (prefers-reduced-motion) {
-    ._tab_t5y6k_59 {
+    ._tab_9ce88_59 {
       transition: background-color var(--sys-motion-instant) var(--sys-motion-standard);
     }
   }
-  ._tab_t5y6k_59:hover {
+  ._tab_9ce88_59:hover {
     background: var(--tab-bg-hover, var(--sys-color-primary-container));
   }
-  ._tab_t5y6k_59 {
+  ._tab_9ce88_59 {
     position: relative;
   }
   @media not (prefers-reduced-motion) {
-    ._tab_t5y6k_59 {
+    ._tab_9ce88_59 {
       transition: background-color var(--sys-motion-instant) var(--sys-motion-standard), color var(--sys-motion-short) var(--sys-motion-emphasized);
     }
   }
-  ._tab_t5y6k_59[aria-current=page], ._tab_t5y6k_59[data-active=true] {
+  ._tab_9ce88_59[aria-current=page], ._tab_9ce88_59[data-active=true] {
     color: var(--tab-fg-active, var(--sys-color-on-primary));
   }
-  ._tab_t5y6k_59[aria-current=page]:hover, ._tab_t5y6k_59[data-active=true]:hover {
+  ._tab_9ce88_59[aria-current=page]:hover, ._tab_9ce88_59[data-active=true]:hover {
     background: none;
   }
-  ._iconSlot_t5y6k_103 {
+  ._iconSlot_9ce88_103 {
     display: inline-flex;
     flex-shrink: 0;
     align-items: center;
     justify-content: center;
+    font-size: var(--nav-icon-size, 1em);
   }
-  ._item_t5y6k_109 {
+  ._item_9ce88_110 {
     display: flex;
     gap: var(--sys-unit-6);
     align-items: center;
@@ -120,18 +121,18 @@
     text-align: start;
     text-decoration: none;
   }
-  ._item_t5y6k_109 {
+  ._item_9ce88_110 {
     outline: 0 solid var(--sys-color-focus-ring);
     outline-offset: var(--sys-focus-ring-offset);
   }
-  ._item_t5y6k_109:focus-visible {
+  ._item_9ce88_110:focus-visible {
     outline-width: var(--sys-focus-ring-width);
   }
-  ._item_t5y6k_109 {
+  ._item_9ce88_110 {
     position: relative;
     isolation: isolate;
   }
-  ._item_t5y6k_109::after {
+  ._item_9ce88_110::after {
     content: "";
     position: absolute;
     z-index: -1;
@@ -142,30 +143,30 @@
     pointer-events: none;
   }
   @media not (prefers-reduced-motion) {
-    ._item_t5y6k_109::after {
+    ._item_9ce88_110::after {
       transition: opacity var(--sys-motion-instant) var(--sys-motion-standard);
     }
   }
-  ._item_t5y6k_109:hover:not(:disabled, [data-disabled])::after {
+  ._item_9ce88_110:hover:not(:disabled, [data-disabled])::after {
     opacity: var(--sys-state-hover);
   }
-  ._item_t5y6k_109:active:not(:disabled, [data-disabled])::after {
+  ._item_9ce88_110:active:not(:disabled, [data-disabled])::after {
     opacity: var(--sys-state-pressed);
   }
   @media not (prefers-reduced-motion) {
-    ._item_t5y6k_109 {
+    ._item_9ce88_110 {
       transition: background-color var(--sys-motion-short) var(--sys-motion-standard), color var(--sys-motion-short) var(--sys-motion-standard);
     }
   }
-  ._item_t5y6k_109[data-active=true], ._item_t5y6k_109[aria-current=page] {
+  ._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_t5y6k_109[data-labelled=false] > ._label_t5y6k_165 {
+  ._item_9ce88_110[data-labelled=false] > ._label_9ce88_166 {
     opacity: 0;
   }
-  ._item_t5y6k_109[data-layout=stack] {
+  ._item_9ce88_110[data-layout=stack] {
     display: grid;
     grid-row: span 2;
     grid-template-rows: subgrid;
@@ -178,63 +179,66 @@
     font: var(--sys-font-label-small);
     text-align: center;
   }
-  ._item_t5y6k_109[data-layout=stack][data-active=true], ._item_t5y6k_109[data-layout=stack][aria-current=page] {
+  ._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_t5y6k_109[data-layout=stack] > ._iconSlot_t5y6k_103 {
+  ._item_9ce88_110[data-layout=stack] > ._iconSlot_9ce88_103 {
     inline-size: 100%;
     max-inline-size: var(--sys-unit-24);
     block-size: var(--sys-unit-16);
     border-radius: var(--sys-radius-full);
   }
   @media not (prefers-reduced-motion) {
-    ._item_t5y6k_109[data-layout=stack] > ._iconSlot_t5y6k_103 {
+    ._item_9ce88_110[data-layout=stack] > ._iconSlot_9ce88_103 {
       transition: background-color var(--sys-motion-short) var(--sys-motion-standard);
     }
   }
-  ._item_t5y6k_109[data-layout=stack][data-active=true] > ._iconSlot_t5y6k_103, ._item_t5y6k_109[data-layout=stack][aria-current=page] > ._iconSlot_t5y6k_103 {
+  ._item_9ce88_110[data-layout=stack] > ._iconSlot_9ce88_103 {
+    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);
   }
-  ._label_t5y6k_165 {
+  ._label_9ce88_166 {
     min-inline-size: 0;
     overflow-wrap: normal;
     hyphens: auto;
     white-space: var(--nav-label-wrap, normal);
   }
   @media not (prefers-reduced-motion) {
-    ._label_t5y6k_165 {
+    ._label_9ce88_166 {
       transition: opacity var(--sys-motion-short) var(--sys-motion-standard);
     }
   }
-  ._hintPositioner_t5y6k_211 {
+  ._hintPositioner_9ce88_215 {
     inline-size: var(--positioner-width);
     block-size: var(--positioner-height);
   }
   @media not (prefers-reduced-motion) {
-    ._hintPositioner_t5y6k_211 {
+    ._hintPositioner_9ce88_215 {
       transition: top var(--sys-motion-short) var(--sys-motion-standard), left var(--sys-motion-short) var(--sys-motion-standard);
     }
   }
-  ._hintViewport_t5y6k_220 {
+  ._hintViewport_9ce88_224 {
     overflow: hidden;
   }
   @media not (prefers-reduced-motion) {
-    ._hintViewport_t5y6k_220 > [data-current],
-    ._hintViewport_t5y6k_220 > [data-previous] {
+    ._hintViewport_9ce88_224 > [data-current],
+    ._hintViewport_9ce88_224 > [data-previous] {
       transition: opacity var(--sys-motion-short) var(--sys-motion-standard);
     }
-    ._hintViewport_t5y6k_220 > [data-current][data-starting-style],
-    ._hintViewport_t5y6k_220 > [data-previous][data-ending-style] {
+    ._hintViewport_9ce88_224 > [data-current][data-starting-style],
+    ._hintViewport_9ce88_224 > [data-previous][data-ending-style] {
       opacity: 0;
     }
   }
-  ._group_t5y6k_233 {
+  ._group_9ce88_237 {
     display: flex;
     flex-direction: column;
   }
-  ._groupHeader_t5y6k_237 {
+  ._groupHeader_9ce88_241 {
     display: grid;
     grid-auto-flow: column;
     grid-template-columns: minmax(0, 1fr);
@@ -243,32 +247,40 @@
     border-radius: var(--sys-radius-full);
   }
   @media not (prefers-reduced-motion) {
-    ._groupHeader_t5y6k_237 {
+    ._groupHeader_9ce88_241 {
       transition: background-color var(--sys-motion-short) var(--sys-motion-standard);
     }
   }
-  ._groupHeader_t5y6k_237:has(> [data-active=true]), ._groupHeader_t5y6k_237:has(> [aria-current=page]) {
+  ._groupHeader_9ce88_241:has(> [data-active=true]), ._groupHeader_9ce88_241:has(> [aria-current=page]) {
     background-color: var(--sys-color-primary-container);
   }
-  ._groupToggle_t5y6k_253 {
+  ._groupToggle_9ce88_257 {
     --btn-pad-y: var(--sys-unit-8);
   }
-  ._groupPanel_t5y6k_256 {
+  @media not (prefers-reduced-motion) {
+    ._groupToggle_9ce88_257 svg {
+      transition: rotate var(--sys-motion-short) var(--sys-motion-standard);
+    }
+  }
+  ._groupToggle_9ce88_257[data-panel-open] svg {
+    rotate: 180deg;
+  }
+  ._groupPanel_9ce88_268 {
     overflow: hidden;
   }
-  ._groupPanel_t5y6k_256[hidden]:not([hidden=until-found]) {
+  ._groupPanel_9ce88_268[hidden]:not([hidden=until-found]) {
     display: none;
   }
   @media not (prefers-reduced-motion) {
-    ._groupPanel_t5y6k_256 {
+    ._groupPanel_9ce88_268 {
       block-size: var(--collapsible-panel-height);
       transition: block-size var(--sys-motion-short) var(--sys-motion-standard);
     }
-    ._groupPanel_t5y6k_256[data-starting-style], ._groupPanel_t5y6k_256[data-ending-style] {
+    ._groupPanel_9ce88_268[data-starting-style], ._groupPanel_9ce88_268[data-ending-style] {
       block-size: 0;
     }
   }
-  ._groupList_t5y6k_271 {
+  ._groupList_9ce88_283 {
     --branch-reach: var(--sys-unit-8);
     --branch-line: color-mix(
     	in oklab,
@@ -284,10 +296,10 @@
     padding-inline-start: var(--sys-unit-20);
     list-style: none;
   }
-  ._groupList_t5y6k_271 > li {
+  ._groupList_9ce88_283 > li {
     position: relative;
   }
-  ._groupList_t5y6k_271 > li::before {
+  ._groupList_9ce88_283 > li::before {
     content: "";
     position: absolute;
     inset-block-start: calc(-1 * var(--sys-unit-2));
@@ -297,10 +309,10 @@
     border-inline-start: 1px solid var(--branch-line);
     border-block-end: 1px solid var(--branch-line);
   }
-  ._groupList_t5y6k_271 > li:last-child::before {
+  ._groupList_9ce88_283 > li:last-child::before {
     border-end-start-radius: var(--sys-radius-sm);
   }
-  ._groupList_t5y6k_271 > li:not(:last-child)::after {
+  ._groupList_9ce88_283 > li:not(:last-child)::after {
     content: "";
     position: absolute;
     inset-block: 50% 0;

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

@@ -1,3 +1,4 @@
+import { Collapsible as BaseCollapsible } from "@base-ui/react/collapsible";
 import { type ComponentPropsWithRef, type ReactNode } from "react";
 import { type NavOrientation } from "./nav-context.ts";
 import { type NavEntryProps } from "./nav-item-view.tsx";
@@ -36,23 +37,28 @@ export type NavGroupProps = Omit<ComponentPropsWithRef<"div">, "onToggle"> & (Re
 }>);
 /**
  * A destination with subpages: a `GroupHeader` holding its own `Link` and a
- * `GroupToggle`, over a `GroupPanel` that folds the subpages open.
+ * `GroupToggle`, over a `GroupPanel` that folds open a `GroupList` of subpages.
  */
 declare const Group: ({ open, defaultOpen, onOpenChange, className, children, ...props }: NavGroupProps) => ReactNode;
 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 = Readonly<{
+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;
 }>;
-declare const GroupToggle: ({ label, }: NavGroupToggleProps) => ReactNode;
-export type NavGroupPanelProps = Readonly<{
+/** 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;
+export type NavGroupPanelProps = Omit<BaseCollapsible.Panel.Props, "className"> & Readonly<{
     className?: string;
-    /** The subpages, each a `Nav.Item` holding a `Nav.Link`. */
-    children: ReactNode;
 }>;
-declare const GroupPanel: ({ className, children, }: NavGroupPanelProps) => ReactNode;
+/** The fold that opens and shuts the group's `GroupList`. */
+declare const GroupPanel: ({ className, ...props }: NavGroupPanelProps) => ReactNode;
+export type NavGroupListProps = ComponentPropsWithRef<"ul">;
+/** The subpages, each a `Nav.Item` holding a `Nav.Link`, joined to the group by branch lines. */
+declare const GroupList: ({ className, ...props }: NavGroupListProps) => ReactNode;
 type NavParts = Readonly<{
     Root: typeof Root;
     List: typeof List;
@@ -62,6 +68,7 @@ type NavParts = Readonly<{
     GroupHeader: typeof GroupHeader;
     GroupToggle: typeof GroupToggle;
     GroupPanel: typeof GroupPanel;
+    GroupList: typeof GroupList;
 }>;
 /**
  * Navigation between pages as `nav > ul > li > a`: a horizontal bar of tabs
@@ -76,7 +83,7 @@ type NavParts = Readonly<{
  * 	<Nav.List>
  * 		<Nav.Item>
  * 			<NavLink to="/" label="Home" activeOptions={{ exact: true }}>
- * 				<NavItemView.Icon svg={HomeIcon} />
+ * 				<NavItemView.Icon><HomeIcon /></NavItemView.Icon>
  * 				<NavItemView.Label>Home</NavItemView.Label>
  * 			</NavLink>
  * 		</Nav.Item>