@wallarm-org/design-system 1.24.0 → 1.25.0

package/dist/components/AppShell/story-content/_storyAccountDropdown.d.ts

@@ -1,5 +1,8 @@
+import { type NavRailMode } from '../../NavRail';
 import type { Theme } from '../../ThemeProvider';
-export type SidebarMode = 'adaptive' | 'expanded';
+export type SidebarMode = 'adaptive' | 'expanded' | 'collapsed' | 'compact';
+/** Adaptive collapses the rail inside a product and expands it on Home; the other modes pin it. */
+export declare const railModeFor: (mode: SidebarMode, onHome: boolean) => NavRailMode;
 export declare const AccountDropdown: ({ sidebarMode, onSidebarModeChange, theme, onThemeChange, }: {
     sidebarMode: SidebarMode;
     onSidebarModeChange: (mode: SidebarMode) => void;

package/dist/components/AppShell/story-content/_storyAccountDropdown.js

@@ -1,18 +1,42 @@
 import { jsx, jsxs } from "react/jsx-runtime";
-import { Check, LogOut, PanelLeftDashed, PencilRuler, Settings, User } from "../../../icons/index.js";
-import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuItemContent, DropdownMenuItemIcon, DropdownMenuItemText, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuTrigger, DropdownMenuTriggerItem } from "../../DropdownMenu/index.js";
+import { Fragment } from "react";
+import { LogOut, PanelLeftDashed, PencilRuler, Settings, User, UserRound } from "../../../icons/index.js";
+import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuItemContent, DropdownMenuItemIcon, DropdownMenuItemText, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuTrigger, DropdownMenuTriggerItem } from "../../DropdownMenu/index.js";
 import { NavRailItem } from "../../NavRail/index.js";
 import { HStack, VStack } from "../../Stack/index.js";
 import { Text } from "../../Text/index.js";
+const railModeFor = (mode, onHome)=>{
+    if ('adaptive' === mode) return onHome ? 'expanded' : 'collapsed';
+    return mode;
+};
 const USER_NAME = 'Meow Meow';
 const USER_EMAIL = 'meow@meow.com';
+const THEMES = [
+    'light',
+    'dark'
+];
+const SIDEBAR_MODE_GROUPS = [
+    [
+        'adaptive'
+    ],
+    [
+        'expanded',
+        'collapsed'
+    ],
+    [
+        'compact'
+    ]
+];
+const SIDEBAR_MODES = SIDEBAR_MODE_GROUPS.flat();
 const THEME_LABELS = {
     light: 'Light',
     dark: 'Dark'
 };
 const SIDEBAR_MODE_LABELS = {
     adaptive: 'Adaptive',
-    expanded: 'Always expanded'
+    expanded: 'Always expanded',
+    collapsed: 'Always collapsed',
+    compact: 'Compact'
 };
 const AccountDropdown = ({ sidebarMode, onSidebarModeChange, theme, onThemeChange })=>/*#__PURE__*/ jsxs(DropdownMenu, {
         positioning: {
@@ -25,8 +49,9 @@ const AccountDropdown = ({ sidebarMode, onSidebarModeChange, theme, onThemeChang
         children: [
             /*#__PURE__*/ jsx(DropdownMenuTrigger, {
                 children: /*#__PURE__*/ jsx(NavRailItem, {
-                    icon: User,
-                    label: USER_NAME
+                    icon: UserRound,
+                    label: USER_NAME,
+                    avatar: true
                 })
             }),
             /*#__PURE__*/ jsxs(DropdownMenuContent, {
@@ -79,7 +104,7 @@ const AccountDropdown = ({ sidebarMode, onSidebarModeChange, theme, onThemeChang
                                     /*#__PURE__*/ jsxs(DropdownMenuItemContent, {
                                         children: [
                                             /*#__PURE__*/ jsx(DropdownMenuItemText, {
-                                                children: "Theme"
+                                                children: "Appearance"
                                             }),
                                             /*#__PURE__*/ jsx(Text, {
                                                 size: "xs",
@@ -90,32 +115,21 @@ const AccountDropdown = ({ sidebarMode, onSidebarModeChange, theme, onThemeChang
                                     })
                                 ]
                             }),
-                            /*#__PURE__*/ jsxs(DropdownMenuContent, {
+                            /*#__PURE__*/ jsx(DropdownMenuContent, {
                                 className: "w-132",
-                                children: [
-                                    /*#__PURE__*/ jsxs(DropdownMenuItem, {
-                                        onSelect: ()=>onThemeChange('light'),
-                                        children: [
-                                            /*#__PURE__*/ jsx(DropdownMenuItemText, {
-                                                children: "Light"
-                                            }),
-                                            'light' === theme && /*#__PURE__*/ jsx(DropdownMenuShortcut, {
-                                                children: /*#__PURE__*/ jsx(Check, {})
+                                children: /*#__PURE__*/ jsx(DropdownMenuRadioGroup, {
+                                    value: theme,
+                                    onValueChange: ({ value })=>{
+                                        const next = THEMES.find((t)=>t === value);
+                                        if (next) onThemeChange(next);
+                                    },
+                                    children: THEMES.map((t)=>/*#__PURE__*/ jsx(DropdownMenuRadioItem, {
+                                            value: t,
+                                            children: /*#__PURE__*/ jsx(DropdownMenuItemText, {
+                                                children: THEME_LABELS[t]
                                             })
-                                        ]
-                                    }),
-                                    /*#__PURE__*/ jsxs(DropdownMenuItem, {
-                                        onSelect: ()=>onThemeChange('dark'),
-                                        children: [
-                                            /*#__PURE__*/ jsx(DropdownMenuItemText, {
-                                                children: "Dark"
-                                            }),
-                                            'dark' === theme && /*#__PURE__*/ jsx(DropdownMenuShortcut, {
-                                                children: /*#__PURE__*/ jsx(Check, {})
-                                            })
-                                        ]
-                                    })
-                                ]
+                                        }, t))
+                                })
                             })
                         ]
                     }),
@@ -140,32 +154,26 @@ const AccountDropdown = ({ sidebarMode, onSidebarModeChange, theme, onThemeChang
                                     })
                                 ]
                             }),
-                            /*#__PURE__*/ jsxs(DropdownMenuContent, {
+                            /*#__PURE__*/ jsx(DropdownMenuContent, {
                                 className: "w-200",
-                                children: [
-                                    /*#__PURE__*/ jsxs(DropdownMenuItem, {
-                                        onSelect: ()=>onSidebarModeChange('adaptive'),
-                                        children: [
-                                            /*#__PURE__*/ jsx(DropdownMenuItemText, {
-                                                children: "Adaptive"
-                                            }),
-                                            'adaptive' === sidebarMode && /*#__PURE__*/ jsx(DropdownMenuShortcut, {
-                                                children: /*#__PURE__*/ jsx(Check, {})
-                                            })
-                                        ]
-                                    }),
-                                    /*#__PURE__*/ jsxs(DropdownMenuItem, {
-                                        onSelect: ()=>onSidebarModeChange('expanded'),
-                                        children: [
-                                            /*#__PURE__*/ jsx(DropdownMenuItemText, {
-                                                children: "Always expanded"
-                                            }),
-                                            'expanded' === sidebarMode && /*#__PURE__*/ jsx(DropdownMenuShortcut, {
-                                                children: /*#__PURE__*/ jsx(Check, {})
-                                            })
-                                        ]
-                                    })
-                                ]
+                                children: /*#__PURE__*/ jsx(DropdownMenuRadioGroup, {
+                                    value: sidebarMode,
+                                    onValueChange: ({ value })=>{
+                                        const next = SIDEBAR_MODES.find((m)=>m === value);
+                                        if (next) onSidebarModeChange(next);
+                                    },
+                                    children: SIDEBAR_MODE_GROUPS.map((group, index)=>/*#__PURE__*/ jsxs(Fragment, {
+                                            children: [
+                                                index > 0 && /*#__PURE__*/ jsx(DropdownMenuSeparator, {}),
+                                                group.map((m)=>/*#__PURE__*/ jsx(DropdownMenuRadioItem, {
+                                                        value: m,
+                                                        children: /*#__PURE__*/ jsx(DropdownMenuItemText, {
+                                                            children: SIDEBAR_MODE_LABELS[m]
+                                                        })
+                                                    }, m))
+                                            ]
+                                        }, group.join('-')))
+                                })
                             })
                         ]
                     }),
@@ -184,4 +192,4 @@ const AccountDropdown = ({ sidebarMode, onSidebarModeChange, theme, onThemeChang
             })
         ]
     });
-export { AccountDropdown };
+export { AccountDropdown, railModeFor };

package/dist/components/AppShell/story-content/_storyConfigRenderer.d.ts

@@ -3,7 +3,10 @@ import { type Product } from './_storyLib';
 export interface ConfigRemoteProps {
     config: NavConfig;
     basePath?: string;
+    /** Fake a 2s load whenever the product changes, to show the panel and content skeletons. */
+    simulateLoading?: boolean;
 }
-export declare const RemoteForProduct: ({ product }: {
+export declare const RemoteForProduct: ({ product, simulateLoading, }: {
     product: Product;
+    simulateLoading?: boolean;
 }) => import("react").JSX.Element;

package/dist/components/AppShell/story-content/_storyConfigRenderer.js

@@ -31,16 +31,18 @@ const RemotePageContent = ()=>{
         ]
     });
 };
-const ConfigRemote = ({ config, basePath })=>{
-    const [loading, setLoading] = useState(true);
+const ConfigRemote = ({ config, basePath, simulateLoading = true })=>{
+    const [loading, setLoading] = useState(simulateLoading);
     useEffect(()=>{
+        if (!simulateLoading) return;
         setLoading(true);
         const timer = setTimeout(()=>{
             setLoading(false);
         }, 2000);
         return ()=>clearTimeout(timer);
     }, [
-        config.productLabel
+        config.productLabel,
+        simulateLoading
     ]);
     return /*#__PURE__*/ jsx(RemoteShell, {
         config: config,
@@ -67,12 +69,13 @@ const ConfigRemote = ({ config, basePath })=>{
         })
     });
 };
-const RemoteForProduct = ({ product })=>{
+const RemoteForProduct = ({ product, simulateLoading = true })=>{
     if ('home' === product) return /*#__PURE__*/ jsx(HomeContent, {});
     const { config } = PRODUCT_CONFIGS[product];
     return /*#__PURE__*/ jsx(ConfigRemote, {
         config: config,
-        basePath: `/${product}`
+        basePath: `/${product}`,
+        simulateLoading: simulateLoading
     });
 };
 export { RemoteForProduct };

package/dist/components/AppShell/story-content/index.d.ts

@@ -1,4 +1,4 @@
-export { AccountDropdown, type SidebarMode } from './_storyAccountDropdown';
+export { AccountDropdown, railModeFor, type SidebarMode } from './_storyAccountDropdown';
 export { RemoteForProduct } from './_storyConfigRenderer';
 export { HeaderActions } from './_storyHeaderActions';
 export { HomeContent } from './_storyHomeContent';

package/dist/components/AppShell/story-content/index.js

@@ -1,4 +1,4 @@
-export { AccountDropdown } from "./_storyAccountDropdown.js";
+export { AccountDropdown, railModeFor } from "./_storyAccountDropdown.js";
 export { RemoteForProduct } from "./_storyConfigRenderer.js";
 export { HeaderActions } from "./_storyHeaderActions.js";
 export { HomeContent } from "./_storyHomeContent.js";

package/dist/components/DropdownMenu/DropdownMenuRadioItem.js

@@ -15,7 +15,7 @@ const DropdownMenuRadioItem = ({ children, value, disabled, closeOnSelect, varia
         "data-testid": testId,
         className: cn(dropdownMenuItemVariants({
             variant
-        }), className),
+        }), 'data-[state=checked]:bg-states-primary-active', className),
         children: [
             children,
             /*#__PURE__*/ jsx(DropdownMenuItemIndicator, {

package/dist/components/NavPanel/NavPanelBack.js

@@ -11,7 +11,7 @@ const NavPanelBack = ({ ref, className, children, ...props })=>{
         type: "button",
         "data-slot": "nav-panel-back",
         "data-testid": testId,
-        className: cn('overlay flex h-32 shrink-0 w-full cursor-pointer items-center gap-8 rounded-6 p-8 text-sm text-text-primary opacity-85 transition-colors outline-none hover:opacity-100 hover:overlay-states-primary-hover focus-visible:opacity-100 focus-visible:overlay-states-primary-hover active:overlay-states-primary-pressed', className),
+        className: cn('overlay flex h-32 shrink-0 w-full cursor-pointer items-center gap-8 rounded-10 p-8 text-sm text-text-primary transition-colors outline-none hover:overlay-states-primary-hover focus-visible:overlay-states-primary-hover active:overlay-states-primary-pressed', className),
         children: [
             /*#__PURE__*/ jsx(CornerUpLeft, {
                 size: "md"

package/dist/components/NavPanel/NavPanelGroupLabel.js

@@ -22,7 +22,7 @@ const NavPanelGroupLabel = ({ ref, icon: Icon, className, children, ...props })=
         style: {
             paddingLeft: 8 + depth * indent
         },
-        className: cn('overlay flex h-32 shrink-0 w-full cursor-pointer items-center gap-8 rounded-6 py-8 pr-8 text-sm text-text-primary opacity-85 transition-colors outline-none hover:opacity-100 hover:overlay-states-primary-hover focus-visible:opacity-100 focus-visible:overlay-states-primary-hover active:overlay-states-primary-pressed', className),
+        className: cn('overlay flex h-32 shrink-0 w-full cursor-pointer items-center gap-8 rounded-10 py-8 pr-8 text-sm text-text-primary transition-colors outline-none hover:overlay-states-primary-hover focus-visible:overlay-states-primary-hover active:overlay-states-primary-pressed', className),
         children: [
             Icon && /*#__PURE__*/ jsx("span", {
                 className: "flex shrink-0 items-center justify-center",

package/dist/components/NavPanel/NavPanelSkeleton.js

@@ -15,7 +15,7 @@ const NavPanelSkeleton = ({ ref, className, count = 6, ...props })=>{
         }, (_, i)=>/*#__PURE__*/ jsx(Skeleton, {
                 width: "100%",
                 height: "28px",
-                rounded: 6
+                rounded: 10
             }, i))
     });
 };

package/dist/components/NavPanel/classes.js

@@ -1,20 +1,20 @@
 import { cva } from "class-variance-authority";
-const navPanelItemVariants = cva('overlay flex h-32 shrink-0 w-full cursor-pointer items-center gap-8 rounded-6 p-8 text-sm text-text-primary transition-colors outline-none', {
+const navPanelItemVariants = cva('overlay flex h-32 shrink-0 w-full cursor-pointer items-center gap-8 rounded-10 p-8 text-sm text-text-primary transition-colors outline-none', {
     variants: {
         active: {
             true: 'overlay-states-primary-active font-semibold',
-            false: 'opacity-85 hover:opacity-100 hover:overlay-states-primary-hover focus-visible:opacity-100 focus-visible:overlay-states-primary-hover active:overlay-states-primary-pressed'
+            false: 'hover:overlay-states-primary-hover focus-visible:overlay-states-primary-hover active:overlay-states-primary-pressed'
         }
     },
     defaultVariants: {
         active: false
     }
 });
-const navPanelGroupItemVariants = cva('overlay flex h-32 shrink-0 w-full cursor-pointer items-center gap-8 rounded-6 py-8 pr-8 text-sm text-text-primary transition-colors outline-none', {
+const navPanelGroupItemVariants = cva('overlay flex h-32 shrink-0 w-full cursor-pointer items-center gap-8 rounded-10 py-8 pr-8 text-sm text-text-primary transition-colors outline-none', {
     variants: {
         active: {
             true: 'overlay-states-primary-active font-semibold',
-            false: 'opacity-85 hover:opacity-100 hover:overlay-states-primary-hover focus-visible:opacity-100 focus-visible:overlay-states-primary-hover active:overlay-states-primary-pressed'
+            false: 'hover:overlay-states-primary-hover focus-visible:overlay-states-primary-hover active:overlay-states-primary-pressed'
         }
     },
     defaultVariants: {

package/dist/components/NavRail/NavRail.d.ts

@@ -1,8 +1,15 @@
 import type { FC, HTMLAttributes, ReactNode, Ref } from 'react';
 import { type TestableProps } from '../../utils/testId';
+import { type NavRailMode } from './NavRailContext';
 export interface NavRailProps extends HTMLAttributes<HTMLElement>, TestableProps {
     ref?: Ref<HTMLElement>;
     children?: ReactNode;
+    /**
+     * How the rail lays out its items: `expanded` (icon beside label), `collapsed` (icon only) or
+     * `compact` (icon over a short label). Wins over `collapsed` when both are set.
+     */
+    mode?: NavRailMode;
+    /** Shorthand for `mode='collapsed'`, kept so existing hosts keep working. Prefer `mode`. */
     collapsed?: boolean;
 }
 export declare const NavRail: FC<NavRailProps>;

package/dist/components/NavRail/NavRail.js

@@ -6,8 +6,9 @@ import { cn } from "../../utils/cn.js";
 import { TestIdProvider } from "../../utils/testId.js";
 import { navRailVariants } from "./classes.js";
 import { NavRailContextProvider } from "./NavRailContext.js";
-const NavRail = ({ ref, collapsed = false, className, children, 'data-testid': testId, ...props })=>{
+const NavRail = ({ ref, mode: modeProp, collapsed = false, className, children, 'data-testid': testId, ...props })=>{
     const internalRef = useRef(null);
+    const mode = modeProp ?? (collapsed ? 'collapsed' : 'expanded');
     const focusPanel = useCallback(()=>{
         const panel = document.querySelector('[data-slot="nav-panel"]');
         const target = panel?.querySelector('[tabindex="0"]');
@@ -37,16 +38,17 @@ const NavRail = ({ ref, collapsed = false, className, children, 'data-testid': t
         value: testId,
         children: /*#__PURE__*/ jsx(NavRailContextProvider, {
             value: {
-                collapsed
+                mode
             },
             children: /*#__PURE__*/ jsx("nav", {
                 ...props,
                 ref: composeRefs(internalRef, ref),
                 "aria-label": "Global navigation",
                 "data-slot": "nav-rail",
+                "data-mode": mode,
                 "data-testid": testId,
                 className: cn(navRailVariants({
-                    collapsed
+                    mode
                 }), className),
                 children: children
             })

package/dist/components/NavRail/NavRailBody.js

@@ -1,14 +1,19 @@
 import { jsx } from "react/jsx-runtime";
 import { cn } from "../../utils/cn.js";
 import { useTestId } from "../../utils/testId.js";
+import { navRailBodyVariants } from "./classes.js";
+import { useNavRailContext } from "./NavRailContext.js";
 const NavRailBody = ({ ref, className, children, ...props })=>{
+    const { mode } = useNavRailContext();
     const testId = useTestId('body');
     return /*#__PURE__*/ jsx("div", {
         ...props,
         ref: ref,
         "data-slot": "nav-rail-body",
         "data-testid": testId,
-        className: cn('flex min-h-0 flex-1 flex-col gap-2 overflow-y-auto overscroll-none [scrollbar-width:thin]', className),
+        className: cn(navRailBodyVariants({
+            mode
+        }), className),
         children: children
     });
 };

package/dist/components/NavRail/NavRailContext.d.ts

@@ -1,5 +1,6 @@
+export type NavRailMode = 'expanded' | 'collapsed' | 'compact';
 interface NavRailContextValue {
-    collapsed: boolean;
+    mode: NavRailMode;
 }
 export declare const NavRailContextProvider: import("react").Provider<NavRailContextValue>;
 export declare function useNavRailContext(): NavRailContextValue;

package/dist/components/NavRail/NavRailContext.js

@@ -1,6 +1,6 @@
 import { createContext, useContext } from "react";
 const NavRailCtx = /*#__PURE__*/ createContext({
-    collapsed: false
+    mode: 'expanded'
 });
 const NavRailContextProvider = NavRailCtx.Provider;
 function useNavRailContext() {

package/dist/components/NavRail/NavRailFooter.js

@@ -1,14 +1,19 @@
 import { jsx } from "react/jsx-runtime";
 import { cn } from "../../utils/cn.js";
 import { useTestId } from "../../utils/testId.js";
+import { navRailFooterVariants } from "./classes.js";
+import { useNavRailContext } from "./NavRailContext.js";
 const NavRailFooter = ({ ref, className, children, ...props })=>{
+    const { mode } = useNavRailContext();
     const testId = useTestId('footer');
     return /*#__PURE__*/ jsx("div", {
         ...props,
         ref: ref,
         "data-slot": "nav-rail-footer",
         "data-testid": testId,
-        className: cn('mt-auto flex flex-col gap-2', className),
+        className: cn(navRailFooterVariants({
+            mode
+        }), className),
         children: children
     });
 };

package/dist/components/NavRail/NavRailItem.d.ts

@@ -8,5 +8,9 @@ export interface NavRailItemProps extends AnchorHTMLAttributes<HTMLAnchorElement
     label: ReactNode;
     shortcut?: string[];
     active?: boolean;
+    /** Seats the icon on a soft plate, for the signed-in user's item at the foot of the rail. */
+    avatar?: boolean;
+    /** User photo for the plate (implies `avatar`). The icon stays underneath and returns if the photo fails to load. */
+    avatarSrc?: string;
 }
 export declare const NavRailItem: FC<NavRailItemProps>;

package/dist/components/NavRail/NavRailItem.js

@@ -1,5 +1,5 @@
 import { jsx, jsxs } from "react/jsx-runtime";
-import { Fragment, useRef } from "react";
+import { Fragment, useRef, useState } from "react";
 import { composeRefs } from "@radix-ui/react-compose-refs";
 import { Slot, Slottable } from "@radix-ui/react-slot";
 import { cn } from "../../utils/cn.js";
@@ -8,35 +8,60 @@ import { Kbd } from "../Kbd/index.js";
 import { Tooltip } from "../Tooltip/index.js";
 import { TooltipContent } from "../Tooltip/TooltipContent.js";
 import { TooltipTrigger } from "../Tooltip/TooltipTrigger.js";
-import { navRailItemVariants } from "./classes.js";
+import { navRailItemCompactLabelClassName, navRailItemVariants } from "./classes.js";
 import { useNavRailContext } from "./NavRailContext.js";
 import { useShortcut } from "./useShortcut.js";
-const NavRailItem = ({ ref, asChild = false, icon: Icon, label, shortcut, active = false, className, children, 'data-testid': testIdProp, ...props })=>{
-    const { collapsed } = useNavRailContext();
+const NavRailItem = ({ ref, asChild = false, icon: Icon, label, shortcut, active = false, avatar = false, avatarSrc, className, children, 'data-testid': testIdProp, ...props })=>{
+    const { mode } = useNavRailContext();
     const testId = useTestId('item', testIdProp);
     const Comp = asChild ? Slot : 'a';
     const internalRef = useRef(null);
+    const [failedSrc, setFailedSrc] = useState();
+    const photo = avatarSrc && avatarSrc !== failedSrc ? avatarSrc : void 0;
+    const hasPlate = avatar || void 0 !== avatarSrc;
+    const showsLabel = 'expanded' === mode || 'compact' === mode && !hasPlate;
+    const fallbackName = showsLabel || 'string' != typeof label ? void 0 : label;
     useShortcut(shortcut, internalRef);
     const element = /*#__PURE__*/ jsxs(Comp, {
         ...props,
         ref: composeRefs(internalRef, ref),
+        "aria-label": props['aria-label'] ?? fallbackName,
         "aria-current": active ? 'page' : void 0,
         "data-slot": "nav-rail-item",
         "data-testid": testId,
         className: cn(navRailItemVariants({
+            mode,
             active
         }), className),
         children: [
             /*#__PURE__*/ jsx("span", {
                 className: "flex shrink-0 items-center justify-center",
-                children: /*#__PURE__*/ jsx(Icon, {
+                children: hasPlate ? /*#__PURE__*/ jsxs("span", {
+                    "data-slot": "nav-rail-item-avatar",
+                    className: cn('-m-4 grid size-24 place-items-center overflow-hidden rounded-8 bg-states-primary-hover *:col-start-1 *:row-start-1', !photo && 'border border-border-primary'),
+                    children: [
+                        /*#__PURE__*/ jsx(Icon, {
+                            size: "md"
+                        }),
+                        photo && /*#__PURE__*/ jsx("img", {
+                            src: photo,
+                            alt: "",
+                            className: "size-full object-cover",
+                            onError: ()=>setFailedSrc(photo)
+                        })
+                    ]
+                }) : /*#__PURE__*/ jsx(Icon, {
                     size: "md"
                 })
             }),
-            !collapsed && /*#__PURE__*/ jsx("span", {
+            'expanded' === mode && /*#__PURE__*/ jsx("span", {
                 className: cn('truncate whitespace-nowrap transition-[opacity,width] duration-200 pl-8'),
                 children: label
             }),
+            showsLabel && 'compact' === mode && /*#__PURE__*/ jsx("span", {
+                className: navRailItemCompactLabelClassName,
+                children: label
+            }),
             /*#__PURE__*/ jsx(Slottable, {
                 children: children
             })

package/dist/components/NavRail/NavRailSkeleton.js

@@ -2,20 +2,40 @@ import { jsx } from "react/jsx-runtime";
 import { cn } from "../../utils/cn.js";
 import { useTestId } from "../../utils/testId.js";
 import { Skeleton } from "../Skeleton/index.js";
+import { navRailSkeletonVariants } from "./classes.js";
+import { useNavRailContext } from "./NavRailContext.js";
+const SKELETON_BARS = {
+    expanded: {
+        width: '100%',
+        height: '28px'
+    },
+    collapsed: {
+        width: '28px',
+        height: '28px'
+    },
+    compact: {
+        width: '54px',
+        height: '38px'
+    }
+};
 const NavRailSkeleton = ({ ref, className, count = 4, ...props })=>{
+    const { mode } = useNavRailContext();
     const testId = useTestId('skeleton');
+    const bar = SKELETON_BARS[mode];
     return /*#__PURE__*/ jsx("div", {
         ...props,
         ref: ref,
         "data-slot": "nav-rail-skeleton",
         "data-testid": testId,
-        className: cn('flex flex-col gap-6', className),
+        className: cn(navRailSkeletonVariants({
+            mode
+        }), className),
         children: Array.from({
             length: count
         }, (_, i)=>/*#__PURE__*/ jsx(Skeleton, {
-                width: "100%",
-                height: "28px",
-                rounded: 6
+                width: bar.width,
+                height: bar.height,
+                rounded: 10
             }, i))
     });
 };

package/dist/components/NavRail/classes.d.ts

@@ -1,6 +1,17 @@
 export declare const navRailVariants: (props?: ({
-    collapsed?: boolean | null | undefined;
+    mode?: "collapsed" | "compact" | "expanded" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export declare const navRailBodyVariants: (props?: ({
+    mode?: "collapsed" | "compact" | "expanded" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export declare const navRailFooterVariants: (props?: ({
+    mode?: "collapsed" | "compact" | "expanded" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export declare const navRailSkeletonVariants: (props?: ({
+    mode?: "collapsed" | "compact" | "expanded" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 export declare const navRailItemVariants: (props?: ({
+    mode?: "collapsed" | "compact" | "expanded" | null | undefined;
     active?: boolean | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export declare const navRailItemCompactLabelClassName = "line-clamp-2 w-56 shrink-0 text-center text-2xs font-medium text-ellipsis break-normal";

package/dist/components/NavRail/classes.js

@@ -1,24 +1,65 @@
 import { cva } from "class-variance-authority";
 const navRailVariants = cva('flex h-full shrink-0 flex-col overflow-hidden px-8 pt-6 pb-12 transition-[width] duration-200 ease-in-out', {
     variants: {
-        collapsed: {
-            true: 'w-[48px]',
-            false: 'w-[184px]'
+        mode: {
+            expanded: 'w-[184px]',
+            collapsed: 'w-[48px]',
+            compact: 'w-[78px]'
         }
     },
     defaultVariants: {
-        collapsed: false
+        mode: 'expanded'
     }
 });
-const navRailItemVariants = cva('overlay flex h-32 w-full cursor-pointer items-center rounded-6 p-8 text-sm text-text-primary transition-colors outline-none data-[state=open]:overlay-states-primary-active data-[state=open]:opacity-100', {
+const railGap = {
+    expanded: 'gap-2',
+    collapsed: 'gap-2',
+    compact: 'gap-4'
+};
+const navRailBodyVariants = cva('flex min-h-0 flex-1 flex-col overflow-y-auto overscroll-none [scrollbar-width:thin]', {
     variants: {
+        mode: railGap
+    },
+    defaultVariants: {
+        mode: 'expanded'
+    }
+});
+const navRailFooterVariants = cva('mt-auto flex flex-col', {
+    variants: {
+        mode: railGap
+    },
+    defaultVariants: {
+        mode: 'expanded'
+    }
+});
+const navRailSkeletonVariants = cva('flex flex-col items-center py-2', {
+    variants: {
+        mode: {
+            expanded: 'gap-6',
+            collapsed: 'gap-6',
+            compact: 'gap-8'
+        }
+    },
+    defaultVariants: {
+        mode: 'expanded'
+    }
+});
+const navRailItemVariants = cva('overlay flex w-full cursor-pointer items-center rounded-10 text-sm text-text-primary transition-colors outline-none data-[state=open]:overlay-states-primary-active', {
+    variants: {
+        mode: {
+            expanded: 'h-32 p-8',
+            collapsed: 'h-32 p-8',
+            compact: 'min-h-42 flex-col justify-center gap-2 px-8 py-6'
+        },
         active: {
             true: 'overlay-states-primary-active',
-            false: 'opacity-85 hover:opacity-100 hover:overlay-states-primary-hover focus-visible:opacity-100 focus-visible:overlay-states-primary-hover active:overlay-states-primary-pressed'
+            false: 'hover:overlay-states-primary-hover focus-visible:overlay-states-primary-hover active:overlay-states-primary-pressed'
         }
     },
     defaultVariants: {
+        mode: 'expanded',
         active: false
     }
 });
-export { navRailItemVariants, navRailVariants };
+const navRailItemCompactLabelClassName = 'line-clamp-2 w-56 shrink-0 text-center text-2xs font-medium text-ellipsis break-normal';
+export { navRailBodyVariants, navRailFooterVariants, navRailItemCompactLabelClassName, navRailItemVariants, navRailSkeletonVariants, navRailVariants };

package/dist/components/NavRail/index.d.ts

@@ -1,6 +1,6 @@
 export { NavRail, type NavRailProps } from './NavRail';
 export { NavRailBody, type NavRailBodyProps } from './NavRailBody';
-export { useNavRailContext } from './NavRailContext';
+export { type NavRailMode, useNavRailContext } from './NavRailContext';
 export { NavRailFooter, type NavRailFooterProps } from './NavRailFooter';
 export { NavRailItem, type NavRailItemProps } from './NavRailItem';
 export { NavRailSeparator, type NavRailSeparatorProps } from './NavRailSeparator';

package/dist/components/SearchModal/SearchModal.js

@@ -29,6 +29,7 @@ const SearchModal = ({ children, open, onOpenChange, onQueryChange, 'data-testid
         children: /*#__PURE__*/ jsx("div", {
             "data-slot": "search-modal",
             "data-testid": testId,
+            className: "contents",
             children: /*#__PURE__*/ jsx(Dialog.Root, {
                 open: open,
                 onOpenChange: handleOpenChange,

package/dist/components/Skeleton/Skeleton.d.ts

@@ -3,7 +3,7 @@ import { type VariantProps } from 'class-variance-authority';
 import type { TestableProps } from '../../utils/testId';
 declare const skeletonVariants: (props?: ({
     transparent?: boolean | null | undefined;
-    rounded?: "full" | "none" | 2 | 4 | 6 | 8 | 12 | 16 | 24 | 32 | null | undefined;
+    rounded?: "full" | "none" | 2 | 4 | 6 | 8 | 10 | 12 | 16 | 24 | 32 | null | undefined;
     withDimensions?: boolean | null | undefined;
     withChildren?: boolean | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;

package/dist/components/Skeleton/Skeleton.js

@@ -14,6 +14,7 @@ const skeletonVariants = cva(cn('overflow-hidden', 'animate-skeleton'), {
             4: 'rounded-4',
             6: 'rounded-6',
             8: 'rounded-8',
+            10: 'rounded-10',
             12: 'rounded-12',
             16: 'rounded-16',
             24: 'rounded-24',

package/dist/index.d.ts

@@ -52,7 +52,7 @@ export { Link, type LinkProps } from './components/Link';
 export { List, ListIcon, type ListIconProps, ListItem, type ListItemProps, type ListProps, } from './components/List';
 export { Loader, type LoaderProps } from './components/Loader';
 export { Logo, type LogoProps, type LogoSize, type LogoStyle, type LogoType, } from './components/Logo';
-export { NavRail, NavRailBody, type NavRailBodyProps, NavRailFooter, type NavRailFooterProps, NavRailItem, type NavRailItemProps, type NavRailProps, NavRailSeparator, type NavRailSeparatorProps, NavRailSkeleton, type NavRailSkeletonProps, } from './components/NavRail';
+export { NavRail, NavRailBody, type NavRailBodyProps, NavRailFooter, type NavRailFooterProps, NavRailItem, type NavRailItemProps, type NavRailMode, type NavRailProps, NavRailSeparator, type NavRailSeparatorProps, NavRailSkeleton, type NavRailSkeletonProps, } from './components/NavRail';
 export { NumberInput, type NumberInputProps } from './components/NumberInput';
 export { NumericBadge, type NumericBadgeProps, } from './components/NumericBadge';
 export { OverflowTooltip, OverflowTooltipContent, type OverflowTooltipContentProps, type OverflowTooltipProps, } from './components/OverflowTooltip';

package/dist/metadata/components.json

@@ -1,6 +1,6 @@
 {
-  "version": "1.23.2",
-  "generatedAt": "2026-09-27T21:57:31.353Z",
+  "version": "1.24.0",
+  "generatedAt": "2026-09-28T08:13:10.040Z",
   "components": [
     {
       "name": "Accordion",
@@ -5341,17 +5341,22 @@
       "examples": [
         {
           "name": "Basic",
-          "code": "({ ambient }) => {\n  const pathname = useLocationPathname();\n  const activeProduct = deriveProduct(pathname);\n\n  const [loading, setLoading] = useState(true);\n  const [sidebarMode, setSidebarMode] = useState<SidebarMode>('adaptive');\n  const { theme, setTheme } = useTheme();\n  const collapsed = sidebarMode === 'adaptive' && activeProduct !== 'home';\n\n  return (\n    <AppShell ambient={ambient}>\n      <AppShellHeader>\n        <TopHeader>\n          <TopHeaderLogo href='/'>\n            <WallarmLogo />\n          </TopHeaderLogo>\n\n          <TopHeaderActions>\n            {loading ? (\n              <>\n                <Skeleton width='150px' height='20px' rounded={6} />\n                <TopHeaderSeparator />\n                <Skeleton width='150px' height='20px' rounded={6} />\n\n                <Tooltip>\n                  <TooltipTrigger asChild>\n                    <Button\n                      variant='ghost'\n                      size='small'\n                      color='neutral'\n                      aria-label='Wallarm Updates'\n                    >\n                      <Bell />\n                    </Button>\n                  </TooltipTrigger>\n                  <TooltipContent>Wallarm updates</TooltipContent>\n                </Tooltip>\n\n                <QuickHelpDropdown />\n              </>\n            ) : (\n              <HeaderActions />\n            )}\n          </TopHeaderActions>\n        </TopHeader>\n      </AppShellHeader>\n\n      <AppShellRail>\n        <NavRail collapsed={collapsed}>\n          <NavRailBody>\n            <NavRailItem\n              icon={Home}\n              label='Home'\n              shortcut={['G', 'H']}\n              active={activeProduct === 'home'}\n              onClick={() => navigateToProduct('home')}\n            />\n            <RecentDropdown />\n\n            <NavRailSeparator />\n\n            {loading ? <NavRailSkeleton /> : <ProductNavItems activeProduct={activeProduct} />}\n          </NavRailBody>\n\n          <NavRailFooterContent\n            activeProduct={activeProduct}\n            sidebarMode={sidebarMode}\n            onSidebarModeChange={setSidebarMode}\n            theme={theme}\n            onThemeChange={setTheme}\n          />\n        </NavRail>\n      </AppShellRail>\n\n      <AppShellRemote>\n        <div className='flex gap-8 absolute top-4 right-4 z-10'>\n          <Button variant='ghost' size='small' color='neutral' onClick={() => setLoading(v => !v)}>\n            {loading ? 'Finish loading' : 'Start loading'}\n          </Button>\n        </div>\n\n        <RemoteForProduct product={activeProduct} />\n      </AppShellRemote>\n    </AppShell>\n  );\n}",
-          "description": "The three regions composed once — `AppShellHeader`, `AppShellRail`, `AppShellRemote` — with the content surface being the only part that scrolls."
+          "code": "({ ambient }) => <Shell ambient={ambient} />",
+          "description": "The three regions composed once — `AppShellHeader`, `AppShellRail`, `AppShellRemote` — with the content surface being the only part that scrolls. Pick a product in the rail to drill into it, and the account item at the bottom for appearance and sidebar mode."
+        },
+        {
+          "name": "Loading",
+          "code": "({ ambient, loading }) => (\n  <Shell ambient={ambient} loading={loading} simulateProductLoading />\n)",
+          "description": "How the shell looks while the platform loads. The header actions and the product rail hold skeletons that sit exactly where the real items land, so nothing jumps when they arrive. Turn `loading` off in Controls to watch the swap. Opening a product also shows its own panel and content loading."
         },
         {
           "name": "RevealFlow",
-          "code": "() => {\n  const pathname = useLocationPathname();\n  const activeProduct = deriveProduct(pathname);\n\n  const [splashDone, setSplashDone] = useState(false);\n  const [sidebarMode, setSidebarMode] = useState<SidebarMode>('adaptive');\n  const [revealKey, setRevealKey] = useState(0);\n  const { theme, setTheme } = useTheme();\n  const collapsed = sidebarMode === 'adaptive' && activeProduct !== 'home';\n\n  useEffect(() => {\n    if (splashDone) return;\n    const timer = setTimeout(() => setSplashDone(true), 2000);\n    return () => clearTimeout(timer);\n  }, [splashDone]);\n\n  const handleReplay = () => {\n    setSplashDone(false);\n    setRevealKey(k => k + 1);\n  };\n\n  if (!splashDone) {\n    return (\n      <div key={revealKey} className='h-screen w-screen bg-bg-page-bg'>\n        <SplashScreen />\n      </div>\n    );\n  }\n\n  return (\n    <AppShell key={revealKey} reveal>\n      <AppShellHeader>\n        <TopHeader>\n          <TopHeaderLogo href='/'>\n            <WallarmLogo />\n          </TopHeaderLogo>\n\n          <TopHeaderActions>\n            <HeaderActions />\n          </TopHeaderActions>\n        </TopHeader>\n      </AppShellHeader>\n\n      <AppShellRail>\n        <NavRail collapsed={collapsed}>\n          <NavRailBody>\n            <NavRailItem\n              icon={Home}\n              label='Home'\n              shortcut={['G', 'H']}\n              active={activeProduct === 'home'}\n              onClick={() => navigateToProduct('home')}\n            />\n            <RecentDropdown />\n\n            <NavRailSeparator />\n\n            <ProductNavItems activeProduct={activeProduct} />\n          </NavRailBody>\n\n          <NavRailFooterContent\n            activeProduct={activeProduct}\n            sidebarMode={sidebarMode}\n            onSidebarModeChange={setSidebarMode}\n            theme={theme}\n            onThemeChange={setTheme}\n          />\n        </NavRail>\n      </AppShellRail>\n\n      <AppShellRemote>\n        <div className='flex gap-8 absolute top-4 right-4 z-10'>\n          <Button variant='ghost' size='small' color='neutral' onClick={handleReplay}>\n            Replay animation\n          </Button>\n        </div>\n\n        <RemoteForProduct product={activeProduct} />\n      </AppShellRemote>\n    </AppShell>\n  );\n}",
+          "code": "() => {\n  const pathname = useLocationPathname();\n  const activeProduct = deriveProduct(pathname);\n\n  const [splashDone, setSplashDone] = useState(false);\n  const [sidebarMode, setSidebarMode] = useState<SidebarMode>('adaptive');\n  const [revealKey, setRevealKey] = useState(0);\n  const { theme, setTheme } = useTheme();\n  const railMode = railModeFor(sidebarMode, activeProduct === 'home');\n\n  useEffect(() => {\n    if (splashDone) return;\n    const timer = setTimeout(() => setSplashDone(true), 2000);\n    return () => clearTimeout(timer);\n  }, [splashDone]);\n\n  const handleReplay = () => {\n    setSplashDone(false);\n    setRevealKey(k => k + 1);\n  };\n\n  if (!splashDone) {\n    return (\n      <div key={revealKey} className='h-screen w-screen bg-bg-page-bg'>\n        <SplashScreen />\n      </div>\n    );\n  }\n\n  return (\n    <AppShell key={revealKey} reveal>\n      <AppShellHeader>\n        <TopHeader>\n          <TopHeaderLogo href='/'>\n            <WallarmLogo />\n          </TopHeaderLogo>\n\n          <TopHeaderActions>\n            <HeaderActions />\n          </TopHeaderActions>\n        </TopHeader>\n      </AppShellHeader>\n\n      <AppShellRail>\n        <NavRail mode={railMode}>\n          <NavRailBody>\n            <NavRailItem\n              icon={Home}\n              label='Home'\n              shortcut={['G', 'H']}\n              active={activeProduct === 'home'}\n              onClick={() => navigateToProduct('home')}\n            />\n            <RecentDropdown />\n\n            <NavRailSeparator />\n\n            <ProductNavItems activeProduct={activeProduct} />\n          </NavRailBody>\n\n          <NavRailFooterContent\n            activeProduct={activeProduct}\n            sidebarMode={sidebarMode}\n            onSidebarModeChange={setSidebarMode}\n            theme={theme}\n            onThemeChange={setTheme}\n          />\n        </NavRail>\n      </AppShellRail>\n\n      <AppShellRemote>\n        <div className='flex gap-8 absolute top-4 right-4 z-10'>\n          <Button variant='ghost' size='small' color='neutral' onClick={handleReplay}>\n            Replay animation\n          </Button>\n        </div>\n\n        <RemoteForProduct product={activeProduct} />\n      </AppShellRemote>\n    </AppShell>\n  );\n}",
           "description": "`reveal` animates the chrome in on the first application load only. Leave it unset for an ordinary screen; this exists for prototyping the boot moment itself."
         },
         {
           "name": "LoginFlow",
-          "code": "() => {\n  const pathname = useLocationPathname();\n  const activeProduct = deriveProduct(pathname);\n\n  const [splashVisible, setSplashVisible] = useState(true);\n  const [showShell, setShowShell] = useState(false);\n  const [revealed, setRevealed] = useState(false);\n  const [flowKey, setFlowKey] = useState(0);\n  const [sidebarMode, setSidebarMode] = useState<SidebarMode>('adaptive');\n  const { theme, setTheme } = useTheme();\n  const collapsed = sidebarMode === 'adaptive' && activeProduct !== 'home';\n\n  useEffect(() => {\n    if (!splashVisible) return;\n    const timer = setTimeout(() => setSplashVisible(false), 2000);\n    return () => clearTimeout(timer);\n  }, [splashVisible]);\n\n  const handleSignIn = () => {\n    setShowShell(true);\n  };\n\n  const handleReplay = () => {\n    setShowShell(false);\n    setRevealed(false);\n    setSplashVisible(true);\n    setFlowKey(k => k + 1);\n  };\n\n  return (\n    <div\n      key={flowKey}\n      className='relative h-screen w-screen overflow-hidden bg-component-app-shell-bg'\n    >\n      {!revealed && (\n        <AnimatedBackground\n          className='absolute inset-0'\n          style={{\n            opacity: showShell ? 0 : 1,\n            transition: showShell ? 'opacity 400ms cubic-bezier(0.4, 0, 0.2, 1)' : undefined,\n          }}\n        />\n      )}\n\n      {!showShell && (\n        <div className='absolute inset-0 flex items-center justify-center z-10'>\n          <SplashScreen\n            visible={splashVisible}\n            shrinkTarget={CARD_DIMENSIONS}\n            className='bg-bg-page-bg shadow-lg'\n          >\n            <div className='flex h-full w-full flex-col items-center justify-center gap-16 p-24'>\n              <Text size='xl'>Sign In</Text>\n              <div className='flex w-full flex-col gap-12'>\n                <Input placeholder='Email' />\n                <Input placeholder='Password' type='password' />\n              </div>\n              <Button variant='primary' color='brand' className='w-full' onClick={handleSignIn}>\n                Sign In\n              </Button>\n            </div>\n          </SplashScreen>\n        </div>\n      )}\n\n      {showShell && (\n        <div className='absolute inset-0'>\n          <AppShell expandFrom={CARD_DIMENSIONS} onRevealed={() => setRevealed(true)}>\n            <AppShellHeader>\n              <TopHeader>\n                <TopHeaderLogo href='/'>\n                  <WallarmLogo />\n                </TopHeaderLogo>\n\n                <TopHeaderActions>\n                  <HeaderActions />\n                </TopHeaderActions>\n              </TopHeader>\n            </AppShellHeader>\n\n            <AppShellRail>\n              <NavRail collapsed={collapsed}>\n                <NavRailBody>\n                  <NavRailItem\n                    icon={Home}\n                    label='Home'\n                    active={activeProduct === 'home'}\n                    onClick={() => navigateToProduct('home')}\n                  />\n\n                  <NavRailSeparator />\n\n                  <ProductNavItems activeProduct={activeProduct} />\n                </NavRailBody>\n                <NavRailFooterContent\n                  activeProduct={activeProduct}\n                  sidebarMode={sidebarMode}\n                  onSidebarModeChange={setSidebarMode}\n                  theme={theme}\n                  onThemeChange={setTheme}\n                />\n              </NavRail>\n            </AppShellRail>\n\n            <AppShellRemote>\n              <div className='flex gap-8 absolute top-4 right-4 z-10'>\n                <Button variant='ghost' size='small' color='neutral' onClick={handleReplay}>\n                  Replay animation\n                </Button>\n              </div>\n              <RemoteForProduct product={activeProduct} />\n            </AppShellRemote>\n          </AppShell>\n        </div>\n      )}\n    </div>\n  );\n}",
+          "code": "() => {\n  const pathname = useLocationPathname();\n  const activeProduct = deriveProduct(pathname);\n\n  const [splashVisible, setSplashVisible] = useState(true);\n  const [showShell, setShowShell] = useState(false);\n  const [revealed, setRevealed] = useState(false);\n  const [flowKey, setFlowKey] = useState(0);\n  const [sidebarMode, setSidebarMode] = useState<SidebarMode>('adaptive');\n  const { theme, setTheme } = useTheme();\n  const railMode = railModeFor(sidebarMode, activeProduct === 'home');\n\n  useEffect(() => {\n    if (!splashVisible) return;\n    const timer = setTimeout(() => setSplashVisible(false), 2000);\n    return () => clearTimeout(timer);\n  }, [splashVisible]);\n\n  const handleSignIn = () => {\n    setShowShell(true);\n  };\n\n  const handleReplay = () => {\n    setShowShell(false);\n    setRevealed(false);\n    setSplashVisible(true);\n    setFlowKey(k => k + 1);\n  };\n\n  return (\n    <div\n      key={flowKey}\n      className='relative h-screen w-screen overflow-hidden bg-component-app-shell-bg'\n    >\n      {!revealed && (\n        <AnimatedBackground\n          className='absolute inset-0'\n          style={{\n            opacity: showShell ? 0 : 1,\n            transition: showShell ? 'opacity 400ms cubic-bezier(0.4, 0, 0.2, 1)' : undefined,\n          }}\n        />\n      )}\n\n      {!showShell && (\n        <div className='absolute inset-0 flex items-center justify-center z-10'>\n          <SplashScreen\n            visible={splashVisible}\n            shrinkTarget={CARD_DIMENSIONS}\n            className='bg-bg-page-bg shadow-lg'\n          >\n            <div className='flex h-full w-full flex-col items-center justify-center gap-16 p-24'>\n              <Text size='xl'>Sign In</Text>\n              <div className='flex w-full flex-col gap-12'>\n                <Input placeholder='Email' />\n                <Input placeholder='Password' type='password' />\n              </div>\n              <Button variant='primary' color='brand' className='w-full' onClick={handleSignIn}>\n                Sign In\n              </Button>\n            </div>\n          </SplashScreen>\n        </div>\n      )}\n\n      {showShell && (\n        <div className='absolute inset-0'>\n          <AppShell expandFrom={CARD_DIMENSIONS} onRevealed={() => setRevealed(true)}>\n            <AppShellHeader>\n              <TopHeader>\n                <TopHeaderLogo href='/'>\n                  <WallarmLogo />\n                </TopHeaderLogo>\n\n                <TopHeaderActions>\n                  <HeaderActions />\n                </TopHeaderActions>\n              </TopHeader>\n            </AppShellHeader>\n\n            <AppShellRail>\n              <NavRail mode={railMode}>\n                <NavRailBody>\n                  <NavRailItem\n                    icon={Home}\n                    label='Home'\n                    active={activeProduct === 'home'}\n                    onClick={() => navigateToProduct('home')}\n                  />\n\n                  <NavRailSeparator />\n\n                  <ProductNavItems activeProduct={activeProduct} />\n                </NavRailBody>\n                <NavRailFooterContent\n                  activeProduct={activeProduct}\n                  sidebarMode={sidebarMode}\n                  onSidebarModeChange={setSidebarMode}\n                  theme={theme}\n                  onThemeChange={setTheme}\n                />\n              </NavRail>\n            </AppShellRail>\n\n            <AppShellRemote>\n              <div className='flex gap-8 absolute top-4 right-4 z-10'>\n                <Button variant='ghost' size='small' color='neutral' onClick={handleReplay}>\n                  Replay animation\n                </Button>\n              </div>\n              <RemoteForProduct product={activeProduct} />\n            </AppShellRemote>\n          </AppShell>\n        </div>\n      )}\n    </div>\n  );\n}",
           "description": "The whole entrance: the splash hands off, the content surface expands from the sign-in card into the full shell. `onRevealed` fires when it has settled."
         }
       ]
@@ -44743,10 +44748,17 @@
       "name": "NavRail",
       "importPath": "@wallarm-org/design-system/NavRail",
       "props": [
+        {
+          "name": "mode",
+          "type": "NavRailMode | undefined",
+          "required": false,
+          "description": "How the rail lays out its items: `expanded` (icon beside label), `collapsed` (icon only) or\n`compact` (icon over a short label). Wins over `collapsed` when both are set."
+        },
         {
           "name": "collapsed",
           "type": "boolean | undefined",
           "required": false,
+          "description": "Shorthand for `mode='collapsed'`, kept so existing hosts keep working. Prefer `mode`.",
           "defaultValue": "false"
         },
         {
@@ -45022,12 +45034,13 @@
       ],
       "variants": [
         {
-          "name": "collapsed",
+          "name": "mode",
           "options": [
-            "true",
-            "false"
+            "expanded",
+            "collapsed",
+            "compact"
           ],
-          "defaultValue": "false"
+          "defaultValue": "expanded"
         },
         {
           "name": "active",
@@ -45619,6 +45632,19 @@
               "required": false,
               "defaultValue": "false"
             },
+            {
+              "name": "avatar",
+              "type": "boolean | undefined",
+              "required": false,
+              "description": "Seats the icon on a soft plate, for the signed-in user's item at the foot of the rail.",
+              "defaultValue": "false"
+            },
+            {
+              "name": "avatarSrc",
+              "type": "string | undefined",
+              "required": false,
+              "description": "User photo for the plate (implies `avatar`). The icon stays underneath and returns if the photo fails to load."
+            },
             {
               "name": "download",
               "type": "any",
@@ -78930,7 +78956,7 @@
         },
         {
           "name": "rounded",
-          "type": "{ none: string; full: string; 2: string; 4: string; 6: string; 8: string; 12: string; 16: string; 24: string; 32: string; }",
+          "type": "{ none: string; full: string; 2: string; 4: string; 6: string; 8: string; 10: string; 12: string; 16: string; 24: string; 32: string; }",
           "required": false,
           "defaultValue": "6"
         },
@@ -78979,6 +79005,7 @@
             "4",
             "6",
             "8",
+            "10",
             "12",
             "16",
             "24",
@@ -101447,6 +101474,10 @@
           "name": "--radius-8",
           "value": "8px"
         },
+        {
+          "name": "--radius-10",
+          "value": "10px"
+        },
         {
           "name": "--radius-12",
           "value": "12px"

package/dist/theme/radius.css

@@ -3,6 +3,7 @@
     --radius-4: 4px;
     --radius-6: 6px;
     --radius-8: 8px;
+    --radius-10: 10px;
     --radius-12: 12px;
     --radius-16: 16px;
     --radius-24: 24px;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wallarm-org/design-system",
-  "version": "1.24.0",
+  "version": "1.25.0",
   "description": "Core design system library with React components and Storybook documentation",
   "publishConfig": {
     "access": "public",