@mindlogic-ai/logician-ui 5.0.0-alpha.12 → 5.0.0-alpha.13

package/dist/components/NavList/NavListItem.js

@@ -0,0 +1,269 @@
+"use client";
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var react = require('@chakra-ui/react');
+var Tooltip = require('../Tooltip/Tooltip.js');
+var useTranslate = require('../../hooks/useTranslate.js');
+var disabledControl = require('../../utils/disabledControl.js');
+var focusRing = require('../../utils/focusRing.js');
+var NavList_styles = require('./NavList.styles.js');
+var NavList_translations = require('./NavList.translations.json.js');
+var NavListContext = require('./NavListContext.js');
+
+/** The label span is cut off by its ellipsis. */
+// Every selector below names the row by this attribute, not by `data-part`:
+// the tooltip trigger's own `data-part="trigger"` lands on the same element.
+const ROW = '[data-nav-list-row]';
+const ACTION = '[data-part="trailing-action"]';
+/** Touch screens: no hover to reveal on, and a finger needs the space kept. */
+const NO_HOVER = '@media (hover: none), (pointer: coarse)';
+/** The row, not the action beside it, is being pressed. */
+const PRESSED = `&:has(${ROW}:active)`;
+const isTruncated = (el) => el != null && el.scrollWidth > el.clientWidth + 1;
+const NavListItem = React.forwardRef(({ children, href, asChild = false, onClick, isCurrent = false, isDisabled = false, leadingVisual, trailingVisual, trailingAction, trailingActionVisibility = 'always', tooltip, ...rest }, ref) => {
+    const { orientation, isCollapsed, tooltipDir, revealCurrent } = NavListContext.useNavListContext();
+    const translate = useTranslate.useTranslate(NavList_translations.default);
+    const labelRef = React.useRef(null);
+    const descriptionId = React.useId();
+    const [isTooltipOpen, setIsTooltipOpen] = React.useState(false);
+    React.useEffect(() => {
+        if (isCurrent)
+            revealCurrent();
+    }, [isCurrent, revealCurrent]);
+    const isLink = asChild || href != null;
+    const child = isLink && asChild ? React.Children.only(children) : null;
+    if (asChild && !React.isValidElement(child)) {
+        throw new Error('NavList.Item with asChild needs exactly one element child');
+    }
+    const routerChild = child;
+    const label = routerChild ? routerChild.props.children : children;
+    const opensNewWindow = !isDisabled &&
+        isLink &&
+        (routerChild?.props.target ?? rest.target) ===
+            '_blank';
+    const inherited = react.useLocaleContext();
+    const content = (jsxRuntime.jsxs(react.LocaleProvider, { locale: inherited.locale, children: [leadingVisual != null && (jsxRuntime.jsx(react.chakra.span, { "aria-hidden": true, display: "inline-flex", alignItems: "center", flexShrink: 0, children: leadingVisual })), jsxRuntime.jsx(react.chakra.span, { ref: labelRef, "data-part": "label", flex: NavList_styles.byOrientation(orientation, '1 1 auto', '0 0 auto'), minW: isCollapsed ? '1px' : 0, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap", opacity: isCollapsed ? 0 : 1, animationStyle: "feedback", transitionProperty: "opacity", children: label }), opensNewWindow && (jsxRuntime.jsx(react.VisuallyHidden, { children: ` (${translate('nav_list_opens_new_window')})` })), trailingVisual != null && (jsxRuntime.jsx(react.chakra.span, { display: "inline-flex", alignItems: "center", flexShrink: 0, ms: "auto", color: isDisabled ? 'disabled.fg' : NavList_styles.NAV_LIST_RAMP.trailing, fontWeight: "normal", fontVariantNumeric: "tabular-nums", 
+                // Fades with the label. `visibility` flips at the END of the fade
+                // (it is discrete), which is when the count leaves the row's name.
+                opacity: isCollapsed ? 0 : 1, visibility: isCollapsed ? 'hidden' : 'visible', animationStyle: "feedback", transitionProperty: "opacity, visibility", children: trailingVisual }))] }));
+    // One tooltip per row, three jobs. Collapsed: the label, beside the icon.
+    // `tooltip`: the caller's description. Otherwise: the label again, only
+    // while the ellipsis is actually cutting it off.
+    const tooltipKind = isCollapsed
+        ? 'label'
+        : tooltip != null
+            ? 'description'
+            : 'overflow';
+    // The overflow tooltip is gated at the trigger: zag skips opening when the
+    // event that would open it was `defaultPrevented`, and the row's own
+    // handlers run before zag's. A controlled `open` cannot do this — zag
+    // enters its open state first and only re-syncs when the prop CHANGES.
+    const restHandlers = rest;
+    // A POINTER also waits for the label to finish fading when the rail is
+    // toggled, so no tooltip flashes over a row that is still changing shape:
+    // the label one only once the label is fully gone, the others only once
+    // it is fully back. The next pointermove after the fade opens it. Focus
+    // is never held back — a cancelled focus is not re-fired, so a row
+    // focused mid-fade would never show its label.
+    const isSettled = () => {
+        const el = labelRef.current;
+        if (!el)
+            return true;
+        const opacity = parseFloat(getComputedStyle(el).opacity);
+        if (Number.isNaN(opacity))
+            return true;
+        return isCollapsed ? opacity === 0 : opacity === 1;
+    };
+    const gate = (handler, waitForFade = true) => (event) => {
+        if ((waitForFade && !isSettled()) ||
+            (tooltipKind === 'overflow' && !isTruncated(labelRef.current)))
+            event.preventDefault();
+        handler?.(event);
+    };
+    const tooltipGate = {
+        onPointerMove: gate(restHandlers.onPointerMove),
+        onPointerOver: gate(restHandlers.onPointerOver),
+        onFocus: gate(restHandlers.onFocus, false),
+    };
+    // The description is a visually hidden element of its own, referenced
+    // all the time — not the tooltip, which zag only references while it is
+    // open. A disabled row cannot take focus, so a description that existed
+    // only while open would never reach a keyboard or screen-reader user,
+    // which is exactly when "why is this disabled" matters. The tooltip
+    // itself is then never a description (`aria-label` on its root takes its
+    // id away), and while it is open the row's own value — the caller's ids,
+    // or an empty list — outranks the dangling id zag would leave behind.
+    const callerDescribedBy = rest['aria-describedby'];
+    const describedBy = [callerDescribedBy, tooltip != null ? descriptionId : undefined]
+        .filter(Boolean)
+        .join(' ') || (isTooltipOpen ? '' : undefined);
+    const describedByProps = { 'aria-describedby': describedBy };
+    const handleClick = (event) => {
+        // Belt and braces: a disabled `<button>` fires no click and a disabled
+        // link has no `href`, so this only guards a caller who forces one.
+        if (isDisabled) {
+            event.preventDefault();
+            return;
+        }
+        onClick?.(event);
+    };
+    // `hover`: the action floats over the end of the label instead of keeping
+    // its own column, so a resting row spends its full width on the label —
+    // the app's HoverRevealedKebab. The row and the action share one grid
+    // cell's row; the row spans both columns at rest and gives the second one
+    // back to the action when it shows. Only the label's end moves: the row
+    // is as tall as it ever was, so nothing below it shifts. Vertical only —
+    // a horizontal row is as wide as its label, so there is nothing to give.
+    const overlaysAction = trailingActionVisibility === 'hover' &&
+        trailingAction != null &&
+        !isCollapsed;
+    // The fill lives on the `<li>`, not the row, so a trailing action sits on
+    // the same surface: hovering the action keeps the row lit, and the current
+    // row's fill runs under its action instead of stopping short of it.
+    const rowStyles = {
+        display: 'flex',
+        alignItems: 'center',
+        gap: 2,
+        flex: NavList_styles.byOrientation(orientation, '1 1 auto', '0 0 auto'),
+        minW: 0,
+        // The same inline padding and start alignment in both modes, so the
+        // icon does not move when the rail is toggled: at 2.5 a row is the
+        // 40px square around an `sm` icon. The `<li>` is what narrows.
+        minH: isCollapsed ? 10 : 9,
+        px: 2.5,
+        py: 2,
+        // Clips the label and count while the rail narrows around them. Only
+        // collapsed, so an expanded row never clips a badge or a dot that a
+        // visual draws past its own box.
+        overflow: isCollapsed ? 'hidden' : undefined,
+        borderRadius: 'md',
+        border: 'none',
+        bg: 'transparent',
+        textAlign: 'start',
+        textDecoration: 'none',
+        textStyle: 'p',
+        cursor: 'pointer',
+        color: isCurrent ? NavList_styles.NAV_LIST_RAMP.currentLabel : NavList_styles.NAV_LIST_RAMP.label,
+        fontWeight: isCurrent ? 'bold' : 'normal',
+        _hover: { textDecoration: 'none' },
+        _disabled: { ...disabledControl.disabledText, cursor: 'not-allowed' },
+        ...NavList_styles.inheritDirection,
+        ...(overlaysAction && { gridRow: 1, gridColumn: '1 / -1' }),
+        // Inset: rows sit 2px apart and a horizontal rail scrolls, so the
+        // outward ring would land on the neighbour or be clipped.
+        ...focusRing.focusRingInset,
+    };
+    // Both state attributes go on the element that carries the role, and on
+    // the router child's own props when there is one (its props win the
+    // `asChild` merge). `data-current` is the hook for scroll-to-current.
+    const stateProps = {
+        'aria-current': isCurrent ? (isLink ? 'page' : 'true') : undefined,
+        'data-current': isCurrent ? '' : undefined,
+        'data-nav-list-row': '',
+    };
+    let row;
+    if (!isLink) {
+        row = (jsxRuntime.jsx(react.chakra.button, { ref: ref, type: "button", disabled: isDisabled, ...stateProps, onClick: handleClick, ...rowStyles, ...rest, ...describedByProps, ...tooltipGate, children: content }));
+    }
+    else {
+        const linkProps = {
+            ref: ref,
+            ...rowStyles,
+            ...rest,
+            ...describedByProps,
+            ...tooltipGate,
+        };
+        if (isDisabled) {
+            // A disabled link has no destination, so it is not rendered as one —
+            // not even the router link, which would keep its href for middle-click,
+            // "open in new tab" and prefetch. Still announced as a link, with
+            // `aria-disabled`, the same way whether or not `asChild` was used. With
+            // no `href` it is out of the tab order.
+            row = (jsxRuntime.jsx(react.chakra.a, { role: "link", "aria-disabled": "true", ...stateProps, ...linkProps, target: undefined, children: content }));
+        }
+        else if (routerChild) {
+            // Our state goes on the CHILD's props, not on the slot: Chakra's
+            // `asChild` merge lets the child's own props win, so a router NavLink
+            // that sets its own `aria-current` would otherwise contradict
+            // `isCurrent`. The child's own click handler still runs, after ours.
+            row = (jsxRuntime.jsx(react.chakra.a, { asChild: true, ...linkProps, children: React.cloneElement(routerChild, {
+                    ...stateProps,
+                    ...describedByProps,
+                    onClick: (event) => {
+                        handleClick(event);
+                        routerChild.props.onClick?.(event);
+                    },
+                }, content) }));
+        }
+        else {
+            row = (jsxRuntime.jsx(react.chakra.a, { href: href, ...stateProps, onClick: handleClick, ...linkProps, children: content }));
+        }
+    }
+    // The two label tooltips name the tooltip itself (`aria-label`), which
+    // takes it out of the trigger's description — the row is already called that.
+    const tooltipContent = tooltipKind === 'description' ? (tooltip) : isCollapsed && tooltip != null ? (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [label, jsxRuntime.jsx(react.Box, { children: tooltip })] })) : (label);
+    const labelText = typeof label === 'string' || typeof label === 'number'
+        ? String(label)
+        : undefined;
+    const withTooltip = (jsxRuntime.jsx(Tooltip.Tooltip, { content: tooltipContent, 
+        // Beside the icon, towards the content: the rail is on the right of
+        // a right-to-left page. Popper placements are physical.
+        placement: isCollapsed ? (tooltipDir === 'rtl' ? 'left' : 'right') : 'top', onOpenChange: ({ open }) => setIsTooltipOpen(open), "aria-label": labelText ?? 'tooltip', contentProps: { 'aria-hidden': true }, children: row }));
+    const fills = isDisabled
+        ? undefined
+        : {
+            // On the `<li>`, like the hover fill, so the press covers the
+            // action's end of the row too — but only a press on the ROW: a
+            // press on the action is the action's, and lights its own button.
+            // No `>` inside `:has()`: jsdom's selector engine throws on a
+            // relative selector, which would break every consumer's tests.
+            [PRESSED]: NavList_styles.pressedFill,
+        };
+    // Shown: hovered, focus anywhere in the row, or the action's menu open.
+    const shown = [`&:hover > ${ACTION}`, `&:focus-within > ${ACTION}`].join(', ');
+    const revealOnHover = trailingActionVisibility === 'hover'
+        ? {
+            [`& > ${ACTION}`]: { opacity: 0 },
+            [shown]: { opacity: 1 },
+            // Its own rule: `:has()` is not forgiving, and a browser without
+            // it would drop every selector listed beside it.
+            [`& > ${ACTION}:has([aria-expanded="true"], [data-state="open"])`]: { opacity: 1 },
+            // Touch: always shown, and with its space kept.
+            [NO_HOVER]: {
+                [`& > ${ACTION}`]: { opacity: 1 },
+                ...(overlaysAction && { [`& > ${ROW}`]: { gridColumn: 1 } }),
+            },
+            ...(overlaysAction && {
+                // The row gives the action its column back exactly when the
+                // action shows, so the label ends before it.
+                [`&:hover > ${ROW}, &:focus-within > ${ROW}`]: { gridColumn: 1 },
+                [`&:has(${ACTION} [aria-expanded="true"], ${ACTION} [data-state="open"]) > ${ROW}`]: { gridColumn: 1 },
+            }),
+        }
+        : undefined;
+    return (jsxRuntime.jsxs(react.chakra.li, { display: overlaysAction ? NavList_styles.byOrientation(orientation, 'grid', 'flex') : 'flex', gridTemplateColumns: overlaysAction ? 'minmax(0, 1fr) auto' : undefined, alignItems: "center", gap: 0.5, flexShrink: 0, minW: 0, 
+        // Narrows to the square when the rail collapses, on the label's clock,
+        // so the fill shrinks with the rail instead of snapping to 40px.
+        maxW: isCollapsed ? 10 : NavList_styles.byOrientation(orientation, '100%', 'none'), animationStyle: "feedback", transitionProperty: "max-width", borderRadius: "md", bg: isCurrent ? NavList_styles.NAV_LIST_RAMP.currentFill : 'transparent', _hover: isDisabled
+            ? undefined
+            : {
+                bg: NavList_styles.NAV_LIST_RAMP.hoverFill,
+                // Again inside hover: Chakra's hover rule is as specific as the
+                // press rule and comes later, so a pointer press would lose.
+                [PRESSED]: NavList_styles.pressedFill,
+            }, css: { ...fills, ...revealOnHover }, children: [jsxRuntime.jsx(react.LocaleProvider, { locale: NavList_styles.localeFor(inherited, tooltipDir), children: withTooltip }), tooltip != null && (
+            // `hidden`, not visually hidden: a description reference still
+            // reads hidden text, and browse mode does not read it a second time.
+            jsxRuntime.jsx(react.chakra.span, { id: descriptionId, hidden: true, children: tooltip })), trailingAction != null && !isCollapsed && (jsxRuntime.jsx(react.chakra.span, { "data-part": "trailing-action", display: "inline-flex", alignItems: "center", flexShrink: 0, pe: 0.5, ...(overlaysAction && {
+                    gridRow: 1,
+                    gridColumn: 2,
+                    position: 'relative',
+                    zIndex: 1,
+                }), children: trailingAction }))] }));
+});
+NavListItem.displayName = 'NavList.Item';
+
+exports.NavListItem = NavListItem;
+//# sourceMappingURL=NavListItem.js.map

package/dist/components/NavList/NavListItem.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"NavListItem.js","sources":["../../../src/components/NavList/NavListItem.tsx"],"sourcesContent":[null],"names":["forwardRef","useNavListContext","useTranslate","NavListTranslations","useRef","useId","useState","useEffect","Children","isValidElement","useLocaleContext","_jsxs","LocaleProvider","_jsx","chakra","byOrientation","VisuallyHidden","NAV_LIST_RAMP","disabledText","inheritDirection","focusRingInset","cloneElement","_Fragment","Box","Tooltip","pressedFill","localeFor"],"mappings":"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"}

package/dist/components/NavList/NavListItem.mjs

@@ -0,0 +1,267 @@
+"use client";
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+import { forwardRef, useRef, useId, useState, useEffect, Children, isValidElement, cloneElement } from 'react';
+import { useLocaleContext, LocaleProvider, chakra, VisuallyHidden, Box } from '@chakra-ui/react';
+import { Tooltip } from '../Tooltip/Tooltip.mjs';
+import { useTranslate } from '../../hooks/useTranslate.mjs';
+import { disabledText } from '../../utils/disabledControl.mjs';
+import { focusRingInset } from '../../utils/focusRing.mjs';
+import { byOrientation, NAV_LIST_RAMP, inheritDirection, pressedFill, localeFor } from './NavList.styles.mjs';
+import NavListTranslations from './NavList.translations.json.mjs';
+import { useNavListContext } from './NavListContext.mjs';
+
+/** The label span is cut off by its ellipsis. */
+// Every selector below names the row by this attribute, not by `data-part`:
+// the tooltip trigger's own `data-part="trigger"` lands on the same element.
+const ROW = '[data-nav-list-row]';
+const ACTION = '[data-part="trailing-action"]';
+/** Touch screens: no hover to reveal on, and a finger needs the space kept. */
+const NO_HOVER = '@media (hover: none), (pointer: coarse)';
+/** The row, not the action beside it, is being pressed. */
+const PRESSED = `&:has(${ROW}:active)`;
+const isTruncated = (el) => el != null && el.scrollWidth > el.clientWidth + 1;
+const NavListItem = forwardRef(({ children, href, asChild = false, onClick, isCurrent = false, isDisabled = false, leadingVisual, trailingVisual, trailingAction, trailingActionVisibility = 'always', tooltip, ...rest }, ref) => {
+    const { orientation, isCollapsed, tooltipDir, revealCurrent } = useNavListContext();
+    const translate = useTranslate(NavListTranslations);
+    const labelRef = useRef(null);
+    const descriptionId = useId();
+    const [isTooltipOpen, setIsTooltipOpen] = useState(false);
+    useEffect(() => {
+        if (isCurrent)
+            revealCurrent();
+    }, [isCurrent, revealCurrent]);
+    const isLink = asChild || href != null;
+    const child = isLink && asChild ? Children.only(children) : null;
+    if (asChild && !isValidElement(child)) {
+        throw new Error('NavList.Item with asChild needs exactly one element child');
+    }
+    const routerChild = child;
+    const label = routerChild ? routerChild.props.children : children;
+    const opensNewWindow = !isDisabled &&
+        isLink &&
+        (routerChild?.props.target ?? rest.target) ===
+            '_blank';
+    const inherited = useLocaleContext();
+    const content = (jsxs(LocaleProvider, { locale: inherited.locale, children: [leadingVisual != null && (jsx(chakra.span, { "aria-hidden": true, display: "inline-flex", alignItems: "center", flexShrink: 0, children: leadingVisual })), jsx(chakra.span, { ref: labelRef, "data-part": "label", flex: byOrientation(orientation, '1 1 auto', '0 0 auto'), minW: isCollapsed ? '1px' : 0, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap", opacity: isCollapsed ? 0 : 1, animationStyle: "feedback", transitionProperty: "opacity", children: label }), opensNewWindow && (jsx(VisuallyHidden, { children: ` (${translate('nav_list_opens_new_window')})` })), trailingVisual != null && (jsx(chakra.span, { display: "inline-flex", alignItems: "center", flexShrink: 0, ms: "auto", color: isDisabled ? 'disabled.fg' : NAV_LIST_RAMP.trailing, fontWeight: "normal", fontVariantNumeric: "tabular-nums", 
+                // Fades with the label. `visibility` flips at the END of the fade
+                // (it is discrete), which is when the count leaves the row's name.
+                opacity: isCollapsed ? 0 : 1, visibility: isCollapsed ? 'hidden' : 'visible', animationStyle: "feedback", transitionProperty: "opacity, visibility", children: trailingVisual }))] }));
+    // One tooltip per row, three jobs. Collapsed: the label, beside the icon.
+    // `tooltip`: the caller's description. Otherwise: the label again, only
+    // while the ellipsis is actually cutting it off.
+    const tooltipKind = isCollapsed
+        ? 'label'
+        : tooltip != null
+            ? 'description'
+            : 'overflow';
+    // The overflow tooltip is gated at the trigger: zag skips opening when the
+    // event that would open it was `defaultPrevented`, and the row's own
+    // handlers run before zag's. A controlled `open` cannot do this — zag
+    // enters its open state first and only re-syncs when the prop CHANGES.
+    const restHandlers = rest;
+    // A POINTER also waits for the label to finish fading when the rail is
+    // toggled, so no tooltip flashes over a row that is still changing shape:
+    // the label one only once the label is fully gone, the others only once
+    // it is fully back. The next pointermove after the fade opens it. Focus
+    // is never held back — a cancelled focus is not re-fired, so a row
+    // focused mid-fade would never show its label.
+    const isSettled = () => {
+        const el = labelRef.current;
+        if (!el)
+            return true;
+        const opacity = parseFloat(getComputedStyle(el).opacity);
+        if (Number.isNaN(opacity))
+            return true;
+        return isCollapsed ? opacity === 0 : opacity === 1;
+    };
+    const gate = (handler, waitForFade = true) => (event) => {
+        if ((waitForFade && !isSettled()) ||
+            (tooltipKind === 'overflow' && !isTruncated(labelRef.current)))
+            event.preventDefault();
+        handler?.(event);
+    };
+    const tooltipGate = {
+        onPointerMove: gate(restHandlers.onPointerMove),
+        onPointerOver: gate(restHandlers.onPointerOver),
+        onFocus: gate(restHandlers.onFocus, false),
+    };
+    // The description is a visually hidden element of its own, referenced
+    // all the time — not the tooltip, which zag only references while it is
+    // open. A disabled row cannot take focus, so a description that existed
+    // only while open would never reach a keyboard or screen-reader user,
+    // which is exactly when "why is this disabled" matters. The tooltip
+    // itself is then never a description (`aria-label` on its root takes its
+    // id away), and while it is open the row's own value — the caller's ids,
+    // or an empty list — outranks the dangling id zag would leave behind.
+    const callerDescribedBy = rest['aria-describedby'];
+    const describedBy = [callerDescribedBy, tooltip != null ? descriptionId : undefined]
+        .filter(Boolean)
+        .join(' ') || (isTooltipOpen ? '' : undefined);
+    const describedByProps = { 'aria-describedby': describedBy };
+    const handleClick = (event) => {
+        // Belt and braces: a disabled `<button>` fires no click and a disabled
+        // link has no `href`, so this only guards a caller who forces one.
+        if (isDisabled) {
+            event.preventDefault();
+            return;
+        }
+        onClick?.(event);
+    };
+    // `hover`: the action floats over the end of the label instead of keeping
+    // its own column, so a resting row spends its full width on the label —
+    // the app's HoverRevealedKebab. The row and the action share one grid
+    // cell's row; the row spans both columns at rest and gives the second one
+    // back to the action when it shows. Only the label's end moves: the row
+    // is as tall as it ever was, so nothing below it shifts. Vertical only —
+    // a horizontal row is as wide as its label, so there is nothing to give.
+    const overlaysAction = trailingActionVisibility === 'hover' &&
+        trailingAction != null &&
+        !isCollapsed;
+    // The fill lives on the `<li>`, not the row, so a trailing action sits on
+    // the same surface: hovering the action keeps the row lit, and the current
+    // row's fill runs under its action instead of stopping short of it.
+    const rowStyles = {
+        display: 'flex',
+        alignItems: 'center',
+        gap: 2,
+        flex: byOrientation(orientation, '1 1 auto', '0 0 auto'),
+        minW: 0,
+        // The same inline padding and start alignment in both modes, so the
+        // icon does not move when the rail is toggled: at 2.5 a row is the
+        // 40px square around an `sm` icon. The `<li>` is what narrows.
+        minH: isCollapsed ? 10 : 9,
+        px: 2.5,
+        py: 2,
+        // Clips the label and count while the rail narrows around them. Only
+        // collapsed, so an expanded row never clips a badge or a dot that a
+        // visual draws past its own box.
+        overflow: isCollapsed ? 'hidden' : undefined,
+        borderRadius: 'md',
+        border: 'none',
+        bg: 'transparent',
+        textAlign: 'start',
+        textDecoration: 'none',
+        textStyle: 'p',
+        cursor: 'pointer',
+        color: isCurrent ? NAV_LIST_RAMP.currentLabel : NAV_LIST_RAMP.label,
+        fontWeight: isCurrent ? 'bold' : 'normal',
+        _hover: { textDecoration: 'none' },
+        _disabled: { ...disabledText, cursor: 'not-allowed' },
+        ...inheritDirection,
+        ...(overlaysAction && { gridRow: 1, gridColumn: '1 / -1' }),
+        // Inset: rows sit 2px apart and a horizontal rail scrolls, so the
+        // outward ring would land on the neighbour or be clipped.
+        ...focusRingInset,
+    };
+    // Both state attributes go on the element that carries the role, and on
+    // the router child's own props when there is one (its props win the
+    // `asChild` merge). `data-current` is the hook for scroll-to-current.
+    const stateProps = {
+        'aria-current': isCurrent ? (isLink ? 'page' : 'true') : undefined,
+        'data-current': isCurrent ? '' : undefined,
+        'data-nav-list-row': '',
+    };
+    let row;
+    if (!isLink) {
+        row = (jsx(chakra.button, { ref: ref, type: "button", disabled: isDisabled, ...stateProps, onClick: handleClick, ...rowStyles, ...rest, ...describedByProps, ...tooltipGate, children: content }));
+    }
+    else {
+        const linkProps = {
+            ref: ref,
+            ...rowStyles,
+            ...rest,
+            ...describedByProps,
+            ...tooltipGate,
+        };
+        if (isDisabled) {
+            // A disabled link has no destination, so it is not rendered as one —
+            // not even the router link, which would keep its href for middle-click,
+            // "open in new tab" and prefetch. Still announced as a link, with
+            // `aria-disabled`, the same way whether or not `asChild` was used. With
+            // no `href` it is out of the tab order.
+            row = (jsx(chakra.a, { role: "link", "aria-disabled": "true", ...stateProps, ...linkProps, target: undefined, children: content }));
+        }
+        else if (routerChild) {
+            // Our state goes on the CHILD's props, not on the slot: Chakra's
+            // `asChild` merge lets the child's own props win, so a router NavLink
+            // that sets its own `aria-current` would otherwise contradict
+            // `isCurrent`. The child's own click handler still runs, after ours.
+            row = (jsx(chakra.a, { asChild: true, ...linkProps, children: cloneElement(routerChild, {
+                    ...stateProps,
+                    ...describedByProps,
+                    onClick: (event) => {
+                        handleClick(event);
+                        routerChild.props.onClick?.(event);
+                    },
+                }, content) }));
+        }
+        else {
+            row = (jsx(chakra.a, { href: href, ...stateProps, onClick: handleClick, ...linkProps, children: content }));
+        }
+    }
+    // The two label tooltips name the tooltip itself (`aria-label`), which
+    // takes it out of the trigger's description — the row is already called that.
+    const tooltipContent = tooltipKind === 'description' ? (tooltip) : isCollapsed && tooltip != null ? (jsxs(Fragment, { children: [label, jsx(Box, { children: tooltip })] })) : (label);
+    const labelText = typeof label === 'string' || typeof label === 'number'
+        ? String(label)
+        : undefined;
+    const withTooltip = (jsx(Tooltip, { content: tooltipContent, 
+        // Beside the icon, towards the content: the rail is on the right of
+        // a right-to-left page. Popper placements are physical.
+        placement: isCollapsed ? (tooltipDir === 'rtl' ? 'left' : 'right') : 'top', onOpenChange: ({ open }) => setIsTooltipOpen(open), "aria-label": labelText ?? 'tooltip', contentProps: { 'aria-hidden': true }, children: row }));
+    const fills = isDisabled
+        ? undefined
+        : {
+            // On the `<li>`, like the hover fill, so the press covers the
+            // action's end of the row too — but only a press on the ROW: a
+            // press on the action is the action's, and lights its own button.
+            // No `>` inside `:has()`: jsdom's selector engine throws on a
+            // relative selector, which would break every consumer's tests.
+            [PRESSED]: pressedFill,
+        };
+    // Shown: hovered, focus anywhere in the row, or the action's menu open.
+    const shown = [`&:hover > ${ACTION}`, `&:focus-within > ${ACTION}`].join(', ');
+    const revealOnHover = trailingActionVisibility === 'hover'
+        ? {
+            [`& > ${ACTION}`]: { opacity: 0 },
+            [shown]: { opacity: 1 },
+            // Its own rule: `:has()` is not forgiving, and a browser without
+            // it would drop every selector listed beside it.
+            [`& > ${ACTION}:has([aria-expanded="true"], [data-state="open"])`]: { opacity: 1 },
+            // Touch: always shown, and with its space kept.
+            [NO_HOVER]: {
+                [`& > ${ACTION}`]: { opacity: 1 },
+                ...(overlaysAction && { [`& > ${ROW}`]: { gridColumn: 1 } }),
+            },
+            ...(overlaysAction && {
+                // The row gives the action its column back exactly when the
+                // action shows, so the label ends before it.
+                [`&:hover > ${ROW}, &:focus-within > ${ROW}`]: { gridColumn: 1 },
+                [`&:has(${ACTION} [aria-expanded="true"], ${ACTION} [data-state="open"]) > ${ROW}`]: { gridColumn: 1 },
+            }),
+        }
+        : undefined;
+    return (jsxs(chakra.li, { display: overlaysAction ? byOrientation(orientation, 'grid', 'flex') : 'flex', gridTemplateColumns: overlaysAction ? 'minmax(0, 1fr) auto' : undefined, alignItems: "center", gap: 0.5, flexShrink: 0, minW: 0, 
+        // Narrows to the square when the rail collapses, on the label's clock,
+        // so the fill shrinks with the rail instead of snapping to 40px.
+        maxW: isCollapsed ? 10 : byOrientation(orientation, '100%', 'none'), animationStyle: "feedback", transitionProperty: "max-width", borderRadius: "md", bg: isCurrent ? NAV_LIST_RAMP.currentFill : 'transparent', _hover: isDisabled
+            ? undefined
+            : {
+                bg: NAV_LIST_RAMP.hoverFill,
+                // Again inside hover: Chakra's hover rule is as specific as the
+                // press rule and comes later, so a pointer press would lose.
+                [PRESSED]: pressedFill,
+            }, css: { ...fills, ...revealOnHover }, children: [jsx(LocaleProvider, { locale: localeFor(inherited, tooltipDir), children: withTooltip }), tooltip != null && (
+            // `hidden`, not visually hidden: a description reference still
+            // reads hidden text, and browse mode does not read it a second time.
+            jsx(chakra.span, { id: descriptionId, hidden: true, children: tooltip })), trailingAction != null && !isCollapsed && (jsx(chakra.span, { "data-part": "trailing-action", display: "inline-flex", alignItems: "center", flexShrink: 0, pe: 0.5, ...(overlaysAction && {
+                    gridRow: 1,
+                    gridColumn: 2,
+                    position: 'relative',
+                    zIndex: 1,
+                }), children: trailingAction }))] }));
+});
+NavListItem.displayName = 'NavList.Item';
+
+export { NavListItem };
+//# sourceMappingURL=NavListItem.mjs.map

package/dist/components/NavList/NavListItem.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"NavListItem.mjs","sources":["../../../src/components/NavList/NavListItem.tsx"],"sourcesContent":[null],"names":["_jsxs","_jsx","_Fragment"],"mappings":"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"}

package/dist/components/NavList/NavListSkeleton.d.ts

@@ -0,0 +1,17 @@
+/**
+ * Placeholder rows while a rail's entries load, with the same row height,
+ * radius and gap as the real list, so nothing moves when it swaps in.
+ *
+ * Render it INSTEAD of the `NavList`, not inside it. It is `aria-hidden`: a
+ * column of grey bars says nothing to a screen reader, and "loading" belongs
+ * to the region that is loading (`aria-busy`, or a status message) rather
+ * than to one of its placeholders.
+ *
+ * Counts that are still loading are not this — leave `trailingVisual` unset
+ * until they arrive, and the row keeps its label.
+ */
+export declare const NavListSkeleton: import("react").ForwardRefExoticComponent<Omit<import("@chakra-ui/react").HTMLChakraProps<"ul">, "children"> & {
+    count?: number;
+    orientation?: import("./NavList.types").NavListResponsiveOrientation;
+} & import("react").RefAttributes<HTMLUListElement>>;
+//# sourceMappingURL=NavListSkeleton.d.ts.map

package/dist/components/NavList/NavListSkeleton.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"NavListSkeleton.d.ts","sourceRoot":"","sources":["../../../src/components/NavList/NavListSkeleton.tsx"],"names":[],"mappings":"AASA;;;;;;;;;;;GAWG;AACH,eAAO,MAAM,eAAe;;;oDAiC1B,CAAC"}

package/dist/components/NavList/NavListSkeleton.js

@@ -0,0 +1,33 @@
+"use client";
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var react = require('@chakra-ui/react');
+var NavList_styles = require('./NavList.styles.js');
+
+/** Widths that vary row to row, so the placeholder does not read as a table. */
+const WIDTHS = ['72%', '56%', '84%', '64%', '48%', '76%'];
+/**
+ * Placeholder rows while a rail's entries load, with the same row height,
+ * radius and gap as the real list, so nothing moves when it swaps in.
+ *
+ * Render it INSTEAD of the `NavList`, not inside it. It is `aria-hidden`: a
+ * column of grey bars says nothing to a screen reader, and "loading" belongs
+ * to the region that is loading (`aria-busy`, or a status message) rather
+ * than to one of its placeholders.
+ *
+ * Counts that are still loading are not this — leave `trailingVisual` unset
+ * until they arrive, and the row keeps its label.
+ */
+const NavListSkeleton = React.forwardRef(({ count = 5, orientation = 'vertical', ...rest }, ref) => (jsxRuntime.jsx(react.chakra.ul, { ref: ref, "aria-hidden": true, ...NavList_styles.listStyles(orientation), ...rest, children: Array.from({ length: count }, (_, i) => (jsxRuntime.jsxs(react.chakra.li, { display: "flex", alignItems: "center", flexShrink: 0, 
+        // The row's own box: `minH`, padding and one line of `p` text, so
+        // the placeholder is exactly as tall as the row that replaces it.
+        minH: 9, px: 2.5, py: 2, textStyle: "p", w: NavList_styles.byOrientation(orientation, 'auto', '96px'), children: [jsxRuntime.jsx(react.Skeleton, { h: 4, w: NavList_styles.byOrientation(orientation, WIDTHS[i % WIDTHS.length], 'full'), borderRadius: "sm", 
+                // A placeholder that stops pulsing is still a placeholder; there
+                // is no progress for the motion to carry.
+                _motionReduce: { animation: 'none' } }), jsxRuntime.jsx(react.chakra.span, { w: 0, overflow: "hidden", children: '\u00A0' })] }, i))) })));
+NavListSkeleton.displayName = 'NavList.Skeleton';
+
+exports.NavListSkeleton = NavListSkeleton;
+//# sourceMappingURL=NavListSkeleton.js.map