@lessly/ui 4.1.1 → 4.2.0

package/dist/{chunk-LTHOLX7I.js → chunk-OMJRQ4JY.js}

@@ -256,7 +256,11 @@ var SheetOverlay = React3.forwardRef(({ className, ...props }, ref) => /* @__PUR
   {
     ref,
     className: cn(
-      "fixed inset-0 z-50 bg-black/50 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+      // The scrim's state-scoped pair is the panel's below, so the two arrive as one — and an
+      // unprefixed 500 would slow the close as well as the open. Naming a duration at all is what
+      // makes `prefers-reduced-motion` reach the fade: an unset `--tw-duration` falls to
+      // tw-animate-css's own literal 0.15s, which no media query can collapse.
+      "fixed inset-0 z-50 bg-black/50 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:duration-300 data-[state=open]:duration-500",
       className
     ),
     ...props
@@ -613,13 +617,16 @@ function RailMark({ collapsed, className }) {
     }
   );
 }
+function railToggleLabel(collapsed) {
+  return collapsed ? "Expand sidebar" : "Collapse sidebar";
+}
 var RailToggle = React7.forwardRef(function RailToggle2({ collapsed, className, "aria-label": ariaLabel, ...rest }, ref) {
   return /* @__PURE__ */ jsx7(
     "button",
     {
       ref,
       type: "button",
-      "aria-label": ariaLabel ?? (collapsed ? "Expand sidebar" : "Collapse sidebar"),
+      "aria-label": ariaLabel ?? railToggleLabel(collapsed),
       "aria-expanded": !collapsed,
       className: cn(
         RAIL_COLUMN_BOX,
@@ -632,6 +639,25 @@ var RailToggle = React7.forwardRef(function RailToggle2({ collapsed, className,
   );
 });
 
+// src/hooks/use-sidebar-drawer.ts
+import { createContext as createContext2, useContext as useContext2 } from "react";
+var SidebarDrawerContext = createContext2(false);
+function useSidebarDrawer() {
+  return useContext2(SidebarDrawerContext);
+}
+var NOT_IN_A_DRAWER = () => {
+};
+var SidebarDrawerDismissContext = createContext2(null);
+function useSidebarDismiss() {
+  return useContext2(SidebarDrawerDismissContext) ?? NOT_IN_A_DRAWER;
+}
+
+// src/components/sidebar-drawer.tsx
+import { jsx as jsx8 } from "react/jsx-runtime";
+function SidebarDrawer({ children, onDismiss }) {
+  return /* @__PURE__ */ jsx8(SidebarDrawerContext.Provider, { value: true, children: /* @__PURE__ */ jsx8(SidebarDrawerDismissContext.Provider, { value: onDismiss ?? null, children }) });
+}
+
 export {
   cn,
   buttonVariants,
@@ -657,5 +683,9 @@ export {
   useSidebar,
   NavRow,
   RAIL_COLUMN_BOX,
-  RailToggle
+  railToggleLabel,
+  RailToggle,
+  useSidebarDrawer,
+  useSidebarDismiss,
+  SidebarDrawer
 };

package/dist/index.d.ts

@@ -2551,6 +2551,11 @@ type NavRowProps = NavRowOwnProps & Omit<React$1.ComponentPropsWithoutRef<'butto
  *  not an entity opening as a page, so the hover fill is the whole affordance. */
 declare const NavRow: React$1.ForwardRefExoticComponent<NavRowProps & React$1.RefAttributes<HTMLButtonElement>>;
 
+/** What the control answers to, from the state it is in: the name says what the press will do, so a
+ *  closed rail's control is `Expand sidebar`. It is a function rather than two strings at the call
+ *  site because the tooltip a call site composes has to say what the control is called — and two
+ *  hand-written copies of a pair like this are two copies to keep in step. */
+declare function railToggleLabel(collapsed: boolean): string;
 interface RailToggleProps extends React$1.ComponentPropsWithoutRef<'button'> {
     /** Which state the rail is in now, not what the press will do. The mark and the accessible name
      *  are both read off it, so a rail cannot say one thing and draw another. */
@@ -2574,7 +2579,9 @@ interface RailToggleProps extends React$1.ComponentPropsWithoutRef<'button'> {
  * console gives the control the words its command palette already uses for it.
  *
  * No tooltip of its own. On a closed rail every neighbour has one, so the call site composes it —
- * and the label it shows is then the same string this takes.
+ * and the label it shows is `railToggleLabel(collapsed)`, the same resolver the accessible name
+ * above falls back to, so the two cannot say different things. `AppSidebar` composes exactly that
+ * at its foot.
  */
 declare const RailToggle: React$1.ForwardRefExoticComponent<RailToggleProps & React$1.RefAttributes<HTMLButtonElement>>;
 
@@ -2586,6 +2593,14 @@ interface QuickSearchRowProps {
     /**
      * The second way in, stated rather than implied — this is the one fact a person needs before they
      * stop reaching for the sidebar at all. `false` for a rail with no shortcut bound.
+     *
+     * Only an unset prop takes the default. `false` and `null` both mean this rail has no shortcut,
+     * on either surface — `shortcut={binding ?? null}` is the shape a caller reaches for and it has
+     * to mean what it says.
+     *
+     * Unset, it is `⌘K` on a rail and nothing at all inside a `<SidebarDrawer>`: a drawer is the
+     * shape a phone gets, and a phone has no key to press. Set, it is what the row states on either
+     * surface — a drawer opened on a tablet with a keyboard really does have one.
      */
     shortcut?: React$1.ReactNode;
     /**
@@ -2613,6 +2628,26 @@ declare namespace QuickSearchRow {
     var displayName: string;
 }
 
+/** Marks everything below as drawn inside a drawer — a rail, and every part it holds — and hands it
+ *  the way out. `AppShell` wraps its sheet's contents in it and passes its own close as `onDismiss`,
+ *  which is what lets a rail that navigates by state close the sheet it navigated in. A product that
+ *  builds its own rail inside its own sheet writes this itself; without it every such rail keeps
+ *  printing ⌘K on a phone.
+ *
+ *  Its own module, and not beside `AppSidebar`. This ships from `@lessly/ui` while the rail ships
+ *  from `@lessly/ui/router`, and a module both entries reach lands in the chunk they share — so
+ *  written in `app-sidebar.tsx` this dragged `react-router` into `import { Button } from
+ *  '@lessly/ui'` and broke resolution for a consumer who skipped the optional peer (#878). Nothing
+ *  here imports anything but React and the contexts. */
+declare function SidebarDrawer({ children, onDismiss }: {
+    children: React$1.ReactNode;
+    onDismiss?: () => void;
+}): React$1.JSX.Element;
+
+/** How a part inside a drawer closes it. Outside one it is a no-op, so a rail row can call it
+ *  unconditionally rather than asking which surface it is on first. */
+declare function useSidebarDismiss(): () => void;
+
 type NavSectionLabelProps = React$1.HTMLAttributes<HTMLDivElement>;
 /** Section header for nav rails and menu popups. Insets match the 0.3.0 prototype
  *  (4px 4px 2px 8px), so it hangs slightly left of the rows it labels. */
@@ -2754,6 +2789,15 @@ interface OrgProductSwitcherProps {
      * console offers it.
      */
     trigger?: 'stacked' | 'inline';
+    /**
+     * Whether the `stacked` trigger draws its own leading mark, or holds the place open and draws
+     * nothing in it. `hold` is for a surface that draws that mark itself and can only carry one: a
+     * rail stands the organization's mark on its glyph column at both widths, and a trigger drawing
+     * a second puts two marks 2px apart in one band. The place is held rather than closed so the name
+     * starts on the column it starts on either way, and the trigger's own box is untouched, so the
+     * menu anchors where it did. The `inline` trigger has never drawn a mark and reads neither value.
+     */
+    mark?: 'draw' | 'hold';
     /** Accessible name for the trigger. Defaults to `"<org> / <product>"`, and to whatever the
      *  trigger reads before an org resolves. */
     'aria-label'?: string;
@@ -2776,7 +2820,7 @@ interface OrgProductSwitcherProps {
  * `activeProductId` for the newly-selected org. Wiring org/product switches to routing is the
  * consumer's job.
  */
-declare function OrgProductSwitcher({ organizations, activeOrgId, onOrgSelect, products, activeProductId, onProductSelect, actions, trigger, className, ...props }: OrgProductSwitcherProps): React$1.JSX.Element;
+declare function OrgProductSwitcher({ organizations, activeOrgId, onOrgSelect, products, activeProductId, onProductSelect, actions, trigger, mark, className, ...props }: OrgProductSwitcherProps): React$1.JSX.Element;
 declare namespace OrgProductSwitcher {
     var displayName: string;
 }
@@ -3780,4 +3824,4 @@ interface RatingScaleProps extends Omit<React$1.ComponentPropsWithoutRef<typeof
 }
 declare const RatingScale: React$1.ForwardRefExoticComponent<RatingScaleProps & React$1.RefAttributes<HTMLDivElement>>;
 
-export { Accordion, AccordionContent, AccordionItem, AccordionTrigger, AddPicker, type AddPickerItem, type AddPickerProps, Alert, AlertDescription, AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger, AlertTitle, AspectRatio, AttachmentChip, type AttachmentChipProps, type AttachmentState, AutoHeight, type AutoHeightProps, Avatar, AvatarFallback, AvatarImage, BackLink, type BackLinkProps, Badge, type BadgeProps, type BeneficialOwnerPayload, Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator, Button, type ButtonProps, COUNTRY_OPTIONS, Calendar, type CalendarProps, Card, CardContent, CardDescription, CardFooter, CardHeader, CardNote, type CardNoteProps, type CardProps, CardTitle, type CardTitleProps, Carousel, type CarouselApi, CarouselContent, type CarouselContextProps, CarouselItem, CarouselNext, type CarouselOptions, type CarouselPlugin, CarouselPrevious, type CarouselProps, Checkbox, Code, CodeBlock, type CodeBlockProps, type CodeLang, type CodeProps, type CodeVariant, Col, type ColProps, Collapsible, CollapsibleContent, CollapsibleTrigger, Command, CommandDialog, type CommandDialogGroup, type CommandDialogItem, type CommandDialogProps, CommandEmpty, CommandGroup, CommandInput, CommandItem, type CommandItemProps, CommandList, CommandSeparator, CommandShortcut, ConfirmDialog, type ConfirmDialogProps, type ConfirmDialogStepUp, ConnectorCard, type ConnectorCardProps, type ConnectorOrigin, type ConnectorStatus, ContextMenu, ContextMenuCheckboxItem, ContextMenuContent, ContextMenuGroup, ContextMenuItem, ContextMenuLabel, ContextMenuPortal, ContextMenuRadioGroup, ContextMenuRadioItem, ContextMenuSeparator, ContextMenuShortcut, ContextMenuSub, ContextMenuSubContent, ContextMenuSubTrigger, ContextMenuTrigger, CopyButton, type CopyButtonProps, DatePicker, type DatePickerProps, DecorativeIcon, type DecorativeIconProps, type DeltaDirection, type DeltaTone, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, DocsLink, type DocsLinkProps, Drawer, DrawerClose, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerOverlay, DrawerPortal, DrawerTitle, DrawerTrigger, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, EmptyState, type EmptyStateProps, EntityRow, type EntityRowOpens, type EntityRowOpensProps, type EntityRowProps, EntityTile, type EntityTileProps, ExtensionIcon, type ExtensionIconProps, FeedbackButton, type FeedbackButtonLabels, type FeedbackButtonProps, Form, FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage, GlyphAvatar, type GlyphAvatarProps, type GrantRole, type GrantRoleNotes, GrantRolePicker, type GrantRolePickerProps, GrantRow, type GrantRowProps, Grid, GridOverlay, type GridOverlayProps, type GridProps, HoverCard, HoverCardContent, HoverCardTrigger, IconHint, type IconHintProps, ImageCropDialog, type ImageCropDialogProps, type ImageCropShape, type ImageCropType, ImageCropper, type ImageCropperProps, ImageUpload, type ImageUploadProps, type ImageUploadSize, InlineError, type InlineErrorProps, Input, InputAddon, type InputAddonProps, InputGroup, InputGroupInput, type InputGroupInputProps, type InputGroupProps, InputOTP, InputOTPGroup, InputOTPSeparator, InputOTPSlot, type InputProps, Label, ListCells, type ListCellsProps, type ListColumn, type ListColumnWidth, ListHeader, type ListHeaderProps, MISSING_TONE, Medallion, type MedallionProps, MenuDivider, MenuPopup, type MenuPopupProps, Menubar, MenubarCheckboxItem, MenubarContent, MenubarGroup, MenubarItem, MenubarLabel, MenubarMenu, MenubarPortal, MenubarRadioGroup, MenubarRadioItem, MenubarSeparator, MenubarShortcut, MenubarSub, MenubarSubContent, MenubarSubTrigger, MenubarTrigger, NavRow, type NavRowMark, type NavRowProps, type NavRowVariant, NavSectionLabel, type NavSectionLabelProps, NavigationMenu, NavigationMenuContent, NavigationMenuIndicator, NavigationMenuItem, NavigationMenuLink, NavigationMenuList, NavigationMenuTrigger, NavigationMenuViewport, type NotifClass, type NotificationAction, NotificationBell, type NotificationBellProps, NotificationCenter, type NotificationCenterProps, type NotificationClass, type NotificationDeepLink, type NotificationItem, type NotificationMute, type NotificationPreferences, type NotificationProduct, NotificationRow, type NotificationRowProps, NotificationSettings, type NotificationSettingsProps, type NotificationSeverity, type NotificationSubscription, type NotificationThreshold, NotificationToast, type NotificationToastDwell, type NotificationToastProps, NotificationToaster, type NotificationToasterPosition, type NotificationToasterProps, OptionCard, type OptionCardProps, OrgProductSwitcher, type OrgProductSwitcherAction, type OrgProductSwitcherItem, type OrgProductSwitcherProduct, type OrgProductSwitcherProps, type OrganizationOnboardingDefaults, OrganizationOnboardingForm, type OrganizationOnboardingFormProps, type OrganizationOnboardingPayload, PageColumn, type PageColumnProps, PageHeader, type PageHeaderProps, type PageHeaderSize, Pagination, PaginationContent, PaginationEllipsis, PaginationItem, PaginationLink, type PaginationLinkProps, PaginationNext, PaginationPrevious, PersonAvatar, type PersonAvatarProps, Popover, PopoverAnchor, PopoverContent, PopoverTrigger, type ProductStatus, Progress, QuickSearchRow, type QuickSearchRowProps, RadioGroup, RadioGroupItem, RailToggle, type RailToggleProps, RatingScale, type RatingScaleProps, type RatingScaleSize, RemovableChip, type RemovableChipProps, RemoveButton, type RemoveButtonProps, RequestRow, type RequestRowProps, type RequestState, type RequestSurface, type ResolvedTheme, type Responsive, ScrollArea, ScrollBar, SecretReveal, type SecretRevealProps, SectionIntro, type SectionIntroProps, Select, type SelectOption, type SelectProps, Separator, SettingRow, type SettingRowProps, type Severity, Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetOverlay, SheetPortal, SheetTitle, SheetTrigger, SidebarBackHeader, type SidebarBackHeaderProps, SidebarProductHeader, type SidebarProductHeaderProps, Skeleton, Slider, StarRating, type StarRatingProps, type StarRatingSize, StatCard, type StatCardProps, StatusDot, type StatusDotProps, StepUpChallenge, type StepUpChallengeProps, type StepUpMethod, type StepUpProof, Switch, type SwitchProps, TOAST_DWELL, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, type TableProps, TableRow, Tabs, TabsContent, TabsList, TabsTrigger, Textarea, type TextareaProps, type Theme, ThemePicker, type ThemePickerProps, ThemeToggle, Toaster, Toggle, ToggleGroup, ToggleGroupItem, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, TopBar, type TopBarProps, TopBarUtilities, type TopBarUtilitiesProps, type TopBarUtility, type UseFreshHighlightResult, type UseSidebarOptions, type UseSidebarResult, UserMenu, type UserMenuItem, type UserMenuProps, type UserMenuUser, WEIGHT_TONE, alertVariants, attachmentChipVariants, badgeVariants, buttonVariants, cn, formatRelativeAge, grantRemoveLabel, isKnownExtensionIcon, isNotificationSettled, navigationMenuTriggerStyle, productStatusBadge, severityBadgeVariant, severityLabels, statusDotVariants, toggleVariants, useCarousel, useFormField, useFreshHighlight, useIsMobile, useSidebar, useTheme };
+export { Accordion, AccordionContent, AccordionItem, AccordionTrigger, AddPicker, type AddPickerItem, type AddPickerProps, Alert, AlertDescription, AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger, AlertTitle, AspectRatio, AttachmentChip, type AttachmentChipProps, type AttachmentState, AutoHeight, type AutoHeightProps, Avatar, AvatarFallback, AvatarImage, BackLink, type BackLinkProps, Badge, type BadgeProps, type BeneficialOwnerPayload, Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator, Button, type ButtonProps, COUNTRY_OPTIONS, Calendar, type CalendarProps, Card, CardContent, CardDescription, CardFooter, CardHeader, CardNote, type CardNoteProps, type CardProps, CardTitle, type CardTitleProps, Carousel, type CarouselApi, CarouselContent, type CarouselContextProps, CarouselItem, CarouselNext, type CarouselOptions, type CarouselPlugin, CarouselPrevious, type CarouselProps, Checkbox, Code, CodeBlock, type CodeBlockProps, type CodeLang, type CodeProps, type CodeVariant, Col, type ColProps, Collapsible, CollapsibleContent, CollapsibleTrigger, Command, CommandDialog, type CommandDialogGroup, type CommandDialogItem, type CommandDialogProps, CommandEmpty, CommandGroup, CommandInput, CommandItem, type CommandItemProps, CommandList, CommandSeparator, CommandShortcut, ConfirmDialog, type ConfirmDialogProps, type ConfirmDialogStepUp, ConnectorCard, type ConnectorCardProps, type ConnectorOrigin, type ConnectorStatus, ContextMenu, ContextMenuCheckboxItem, ContextMenuContent, ContextMenuGroup, ContextMenuItem, ContextMenuLabel, ContextMenuPortal, ContextMenuRadioGroup, ContextMenuRadioItem, ContextMenuSeparator, ContextMenuShortcut, ContextMenuSub, ContextMenuSubContent, ContextMenuSubTrigger, ContextMenuTrigger, CopyButton, type CopyButtonProps, DatePicker, type DatePickerProps, DecorativeIcon, type DecorativeIconProps, type DeltaDirection, type DeltaTone, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, DocsLink, type DocsLinkProps, Drawer, DrawerClose, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerOverlay, DrawerPortal, DrawerTitle, DrawerTrigger, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, EmptyState, type EmptyStateProps, EntityRow, type EntityRowOpens, type EntityRowOpensProps, type EntityRowProps, EntityTile, type EntityTileProps, ExtensionIcon, type ExtensionIconProps, FeedbackButton, type FeedbackButtonLabels, type FeedbackButtonProps, Form, FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage, GlyphAvatar, type GlyphAvatarProps, type GrantRole, type GrantRoleNotes, GrantRolePicker, type GrantRolePickerProps, GrantRow, type GrantRowProps, Grid, GridOverlay, type GridOverlayProps, type GridProps, HoverCard, HoverCardContent, HoverCardTrigger, IconHint, type IconHintProps, ImageCropDialog, type ImageCropDialogProps, type ImageCropShape, type ImageCropType, ImageCropper, type ImageCropperProps, ImageUpload, type ImageUploadProps, type ImageUploadSize, InlineError, type InlineErrorProps, Input, InputAddon, type InputAddonProps, InputGroup, InputGroupInput, type InputGroupInputProps, type InputGroupProps, InputOTP, InputOTPGroup, InputOTPSeparator, InputOTPSlot, type InputProps, Label, ListCells, type ListCellsProps, type ListColumn, type ListColumnWidth, ListHeader, type ListHeaderProps, MISSING_TONE, Medallion, type MedallionProps, MenuDivider, MenuPopup, type MenuPopupProps, Menubar, MenubarCheckboxItem, MenubarContent, MenubarGroup, MenubarItem, MenubarLabel, MenubarMenu, MenubarPortal, MenubarRadioGroup, MenubarRadioItem, MenubarSeparator, MenubarShortcut, MenubarSub, MenubarSubContent, MenubarSubTrigger, MenubarTrigger, NavRow, type NavRowMark, type NavRowProps, type NavRowVariant, NavSectionLabel, type NavSectionLabelProps, NavigationMenu, NavigationMenuContent, NavigationMenuIndicator, NavigationMenuItem, NavigationMenuLink, NavigationMenuList, NavigationMenuTrigger, NavigationMenuViewport, type NotifClass, type NotificationAction, NotificationBell, type NotificationBellProps, NotificationCenter, type NotificationCenterProps, type NotificationClass, type NotificationDeepLink, type NotificationItem, type NotificationMute, type NotificationPreferences, type NotificationProduct, NotificationRow, type NotificationRowProps, NotificationSettings, type NotificationSettingsProps, type NotificationSeverity, type NotificationSubscription, type NotificationThreshold, NotificationToast, type NotificationToastDwell, type NotificationToastProps, NotificationToaster, type NotificationToasterPosition, type NotificationToasterProps, OptionCard, type OptionCardProps, OrgProductSwitcher, type OrgProductSwitcherAction, type OrgProductSwitcherItem, type OrgProductSwitcherProduct, type OrgProductSwitcherProps, type OrganizationOnboardingDefaults, OrganizationOnboardingForm, type OrganizationOnboardingFormProps, type OrganizationOnboardingPayload, PageColumn, type PageColumnProps, PageHeader, type PageHeaderProps, type PageHeaderSize, Pagination, PaginationContent, PaginationEllipsis, PaginationItem, PaginationLink, type PaginationLinkProps, PaginationNext, PaginationPrevious, PersonAvatar, type PersonAvatarProps, Popover, PopoverAnchor, PopoverContent, PopoverTrigger, type ProductStatus, Progress, QuickSearchRow, type QuickSearchRowProps, RadioGroup, RadioGroupItem, RailToggle, type RailToggleProps, RatingScale, type RatingScaleProps, type RatingScaleSize, RemovableChip, type RemovableChipProps, RemoveButton, type RemoveButtonProps, RequestRow, type RequestRowProps, type RequestState, type RequestSurface, type ResolvedTheme, type Responsive, ScrollArea, ScrollBar, SecretReveal, type SecretRevealProps, SectionIntro, type SectionIntroProps, Select, type SelectOption, type SelectProps, Separator, SettingRow, type SettingRowProps, type Severity, Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetOverlay, SheetPortal, SheetTitle, SheetTrigger, SidebarBackHeader, type SidebarBackHeaderProps, SidebarDrawer, SidebarProductHeader, type SidebarProductHeaderProps, Skeleton, Slider, StarRating, type StarRatingProps, type StarRatingSize, StatCard, type StatCardProps, StatusDot, type StatusDotProps, StepUpChallenge, type StepUpChallengeProps, type StepUpMethod, type StepUpProof, Switch, type SwitchProps, TOAST_DWELL, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, type TableProps, TableRow, Tabs, TabsContent, TabsList, TabsTrigger, Textarea, type TextareaProps, type Theme, ThemePicker, type ThemePickerProps, ThemeToggle, Toaster, Toggle, ToggleGroup, ToggleGroupItem, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, TopBar, type TopBarProps, TopBarUtilities, type TopBarUtilitiesProps, type TopBarUtility, type UseFreshHighlightResult, type UseSidebarOptions, type UseSidebarResult, UserMenu, type UserMenuItem, type UserMenuProps, type UserMenuUser, WEIGHT_TONE, alertVariants, attachmentChipVariants, badgeVariants, buttonVariants, cn, formatRelativeAge, grantRemoveLabel, isKnownExtensionIcon, isNotificationSettled, navigationMenuTriggerStyle, productStatusBadge, railToggleLabel, severityBadgeVariant, severityLabels, statusDotVariants, toggleVariants, useCarousel, useFormField, useFreshHighlight, useIsMobile, useSidebar, useSidebarDismiss, useTheme };

package/dist/index.js

@@ -15,15 +15,19 @@ import {
   SheetPortal,
   SheetTitle,
   SheetTrigger,
+  SidebarDrawer,
   Tooltip,
   TooltipContent,
   TooltipProvider,
   TooltipTrigger,
   buttonVariants,
   cn,
+  railToggleLabel,
   useIsMobile,
-  useSidebar
-} from "./chunk-LTHOLX7I.js";
+  useSidebar,
+  useSidebarDismiss,
+  useSidebarDrawer
+} from "./chunk-OMJRQ4JY.js";
 
 // src/components/auto-height.tsx
 import * as React from "react";
@@ -149,7 +153,10 @@ var DialogOverlay = React3.forwardRef(({ className, ...props }, ref) => /* @__PU
   {
     ref,
     className: cn(
-      "fixed inset-0 z-50 bg-black/50 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+      // The scrim's duration is the panel's, so the two arrive as one. Naming it is what makes
+      // `prefers-reduced-motion` reach the fade: `animate-in` reads `--tw-duration`, and an unset
+      // one falls to tw-animate-css's own literal 0.15s, which no media query can collapse.
+      "fixed inset-0 z-50 bg-black/50 duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
       className
     ),
     ...props
@@ -1174,7 +1181,10 @@ var AlertDialogOverlay = React21.forwardRef(({ className, ...props }, ref) => /*
   {
     ref,
     className: cn(
-      "fixed inset-0 z-50 bg-black/50 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+      // The scrim's duration is the panel's, so the two arrive as one. Naming it is what makes
+      // `prefers-reduced-motion` reach the fade: `animate-in` reads `--tw-duration`, and an unset
+      // one falls to tw-animate-css's own literal 0.15s, which no media query can collapse.
+      "fixed inset-0 z-50 bg-black/50 duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
       className
     ),
     ...props
@@ -4534,14 +4544,17 @@ function useFreshHighlight() {
 // src/components/quick-search-row.tsx
 import { Search as Search2 } from "lucide-react";
 import { jsx as jsx74, jsxs as jsxs48 } from "react/jsx-runtime";
+var DEFAULT_SHORTCUT = "\u2318K";
 function QuickSearchRow({
   onOpen,
   label = "Quick search",
-  shortcut = "\u2318K",
+  shortcut,
   collapsed = false,
   icon
 }) {
-  const name = shortcut ? `${label} ${shortcut}` : label;
+  const drawer = useSidebarDrawer();
+  const stated = shortcut === void 0 ? drawer ? false : DEFAULT_SHORTCUT : shortcut;
+  const name = stated ? `${label} ${stated}` : label;
   if (!collapsed) {
     return /* @__PURE__ */ jsxs48(
       "button",
@@ -4563,7 +4576,7 @@ function QuickSearchRow({
         children: [
           /* @__PURE__ */ jsx74("span", { className: "flex size-4 shrink-0 items-center justify-center [&_svg]:size-4", "aria-hidden": "true", children: icon ?? /* @__PURE__ */ jsx74(Search2, {}) }),
           /* @__PURE__ */ jsx74("span", { className: "min-w-0 flex-1 truncate", children: label }),
-          shortcut && /* @__PURE__ */ jsx74("span", { className: "shrink-0 text-xs font-medium text-text-tertiary", children: shortcut })
+          stated && /* @__PURE__ */ jsx74("span", { className: "shrink-0 text-xs font-medium text-text-tertiary", children: stated })
         ]
       }
     );
@@ -4703,12 +4716,15 @@ function ItemLabel({ item, kind }) {
 }
 var MARK_SIZE = { md: "sm", sm: "xs" };
 var ICON_BOX = { md: "size-8 rounded-md", sm: "size-6 rounded-sm" };
+function MarkSlot({ size }) {
+  return /* @__PURE__ */ jsx78("span", { "aria-hidden": "true", className: cn("shrink-0", ICON_BOX[size]) });
+}
 function Mark2({ item, kind, size, reserve }) {
   if (item.icon) {
     return /* @__PURE__ */ jsx78("span", { className: cn("flex shrink-0 items-center justify-center overflow-hidden", ICON_BOX[size]), "aria-hidden": "true", children: item.icon });
   }
   const name = nameOf(item);
-  if (!name) return reserve ? /* @__PURE__ */ jsx78("span", { "aria-hidden": "true", className: cn("shrink-0", ICON_BOX[size]) }) : null;
+  if (!name) return reserve ? /* @__PURE__ */ jsx78(MarkSlot, { size }) : null;
   return /* @__PURE__ */ jsx78(EntityTile, { name, tone: kind === "product" ? "auto" : "neutral", size: MARK_SIZE[size] });
 }
 function OrgProductSwitcher({
@@ -4720,6 +4736,7 @@ function OrgProductSwitcher({
   onProductSelect,
   actions,
   trigger = "stacked",
+  mark = "draw",
   className,
   ...props
 }) {
@@ -4788,7 +4805,7 @@ function OrgProductSwitcher({
         /* @__PURE__ */ jsx78(ChevronsUpDown3, { size: 14, "aria-hidden": "true", className: "shrink-0 text-text-tertiary" })
       ] })
     ) : /* @__PURE__ */ jsxs51(DropdownMenuTrigger, { "aria-label": ariaLabel, className: cn(triggerBox, className), children: [
-      triggerMark && /* @__PURE__ */ jsx78(Mark2, { item: triggerMark, kind: markKind, size: "md" }),
+      triggerMark && (mark === "hold" ? /* @__PURE__ */ jsx78(MarkSlot, { size: "md" }) : /* @__PURE__ */ jsx78(Mark2, { item: triggerMark, kind: markKind, size: "md" })),
       orgLevel ? /* @__PURE__ */ jsx78("span", { className: "flex min-w-0 flex-1 flex-col", children: /* @__PURE__ */ jsx78(NameLine, { className: orgName ? "font-semibold text-text-primary" : "text-text-tertiary", children: orgName ?? NO_ORG_LABEL }) }) : /* @__PURE__ */ jsxs51("span", { className: "flex min-w-0 flex-1 flex-col gap-0.5", children: [
         orgName && /* @__PURE__ */ jsx78("span", { className: "truncate text-xs leading-[normal] text-text-tertiary", children: orgName }),
         /* @__PURE__ */ jsx78(NameLine, { className: productName ? "font-semibold text-text-primary" : "text-text-tertiary", children: productLabel })
@@ -4882,7 +4899,7 @@ function SidebarBackHeader({
         ...rowProps,
         children: [
           /* @__PURE__ */ jsx79("span", { className: arrowBox, children: /* @__PURE__ */ jsx79("span", { className: cn(arrowPlate, arrowClassName), ...arrowRest, children: /* @__PURE__ */ jsx79(Arrow, {}) }) }),
-          /* @__PURE__ */ jsx79("span", { className: cn(titleBox, titleClassName), ...titleRest, children: title })
+          /* @__PURE__ */ jsx79("span", { className: cn(titleBox, titleClassName), ...titleRest, children: /* @__PURE__ */ jsx79("span", { "data-slot": "nav-row-label", children: title }) })
         ]
       }
     );
@@ -4906,7 +4923,7 @@ function SidebarBackHeader({
         onClick: onTitleClick,
         className: cn(titleBox, focusRing, titleClassName),
         ...titleRest,
-        children: title
+        children: /* @__PURE__ */ jsx79("span", { "data-slot": "nav-row-label", children: title })
       }
     )
   ] });
@@ -7980,6 +7997,7 @@ export {
   SheetTitle,
   SheetTrigger,
   SidebarBackHeader,
+  SidebarDrawer,
   SidebarProductHeader,
   Skeleton,
   Slider,
@@ -8027,6 +8045,7 @@ export {
   isNotificationSettled,
   navigationMenuTriggerStyle,
   productStatusBadge,
+  railToggleLabel,
   severityBadgeVariant,
   severityLabels,
   statusDotVariants,
@@ -8037,5 +8056,6 @@ export {
   useFreshHighlight,
   useIsMobile,
   useSidebar,
+  useSidebarDismiss,
   useTheme
 };

package/dist/router.d.ts

@@ -68,16 +68,37 @@ interface SidebarNavProps {
 declare function SidebarNav({ items, collapsed, basePath, LinkComponent, isItemActive, className, }: SidebarNavProps): React.JSX.Element;
 
 interface AppSidebarProps {
-    items: NavItem[];
+    /** The rows in the middle, as links. Optional since #878: a rail whose middle is not a list of
+     *  links writes it as `children` instead. */
+    items?: NavItem[];
+    /** The middle, written by the caller — panes, disclosures, a back row, anything `NavItem` has no
+     *  field for. It stands exactly where the rows stand, and it owns its own scrolling: the box the
+     *  rail gives it holds the rail's own inset and does not scroll, so an `overflow-y-auto` region
+     *  inside it measures against the rail's own height instead of against a box the padding made
+     *  taller.
+     *
+     *  Like `railTop` it takes a function, for the same reason: the rail drives its own collapse, so
+     *  this is the only way a caller's node can read a state it has no other route to.
+     *
+     *  Passing this and `items` together is a caller error. This wins — a middle somebody wrote is
+     *  the more specific instruction, where a list may have arrived through a wrapper's spread — and
+     *  development says so out loud, because the alternative is rows that render nowhere in silence. */
+    children?: React.ReactNode | ((collapsed: boolean) => React.ReactNode);
     /** Expanded-slot mark/wordmark, rendered when `header` is absent. Also the narrow rail's fallback
      *  when `logoCollapsed` isn't given. */
     logo?: React.ReactNode;
-    /** Narrow-rail identity — a small mark, for the width where `header` has no room to be read.
-     *  Falls back to `logo`. */
+    /** The band's mark — a small one, standing on the glyph column at 32. It is drawn at both widths
+     *  and never fades: at the narrow width it is the whole of the identity, and at the wide one it is
+     *  the mark the node in `header` leads with. Falls back to `logo`. */
     logoCollapsed?: React.ReactNode;
     /** Identity slot above the rail — e.g. an <OrgProductSwitcher/> (#266). Falls back to `logo`.
-     *  Expanded-only: `logoCollapsed ?? logo` stands in it at the narrow width, because a switcher
-     *  clipped to the rail's own width reads as a tile with a severed word beside it. */
+     *  Expanded-only: it fades out at the narrow width, because a switcher clipped to the rail's own
+     *  width reads as a tile with a severed word beside it.
+     *
+     *  A node here draws no mark of its own. `logoCollapsed ?? logo` is the band's one mark and the
+     *  rail draws it at BOTH widths, so a second one stands 2px beside it, solid, in the same band.
+     *  `OrgProductSwitcher` yields its own with `mark="hold"`, which leaves its box and its words
+     *  exactly where they are. */
     header?: React.ReactNode;
     /** Top of the rail — e.g. a <QuickSearchRow/>. It sits between the header's rule and the rows,
      *  and it is pinned: outside the scroll region, so it holds one place while the rows below it
@@ -94,7 +115,7 @@ interface AppSidebarProps {
     isItemActive?: (item: NavItem, pathname: string) => boolean;
     className?: string;
 }
-declare function AppSidebar({ items, logo, logoCollapsed, header, railTop, collapsed: controlled, defaultCollapsed, onCollapsedChange, basePath, LinkComponent, isItemActive, className, }: AppSidebarProps): React.JSX.Element;
+declare function AppSidebar({ items, children, logo, logoCollapsed, header, railTop, collapsed: controlled, defaultCollapsed, onCollapsedChange, basePath, LinkComponent, isItemActive, className, }: AppSidebarProps): React.JSX.Element;
 
 interface AppShellProps {
     /** The sidebar, typically an <AppSidebar/>. Rendered in the desktop rail and, on mobile, inside a

package/dist/router.js

@@ -9,14 +9,17 @@ import {
   SheetDescription,
   SheetTitle,
   SheetTrigger,
+  SidebarDrawer,
   Tooltip,
   TooltipContent,
   TooltipProvider,
   TooltipTrigger,
   cn,
+  railToggleLabel,
   useIsMobile,
-  useSidebar
-} from "./chunk-LTHOLX7I.js";
+  useSidebar,
+  useSidebarDrawer
+} from "./chunk-OMJRQ4JY.js";
 
 // src/components/extension-link.tsx
 import { Link } from "react-router";
@@ -99,19 +102,19 @@ function SidebarNav({
 }
 
 // src/components/app-sidebar.tsx
-import * as React from "react";
 import { Fragment, jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
-var SidebarDrawerContext = React.createContext(false);
-function SidebarDrawer({ children }) {
-  return /* @__PURE__ */ jsx3(SidebarDrawerContext.Provider, { value: true, children });
-}
 function Divider({ testId, className }) {
   return /* @__PURE__ */ jsx3("div", { "data-testid": testId, className: cn("h-px shrink-0 bg-border-subtle", className) });
 }
 var RAIL_WIDE = "w-[248px]";
 var RAIL_NARROW = "w-[64px]";
+var footTooltipOffset = (collapsed) => collapsed ? 16 : 4;
+function drawsNothing(node) {
+  return node == null || typeof node === "boolean" || node === "" || Array.isArray(node) && node.length === 0;
+}
 function AppSidebar({
   items,
+  children,
   logo,
   logoCollapsed,
   header,
@@ -124,7 +127,7 @@ function AppSidebar({
   isItemActive,
   className
 }) {
-  const drawer = React.useContext(SidebarDrawerContext);
+  const drawer = useSidebarDrawer();
   const { collapsed: railCollapsed, toggle } = useSidebar({
     collapsed: controlled,
     defaultCollapsed,
@@ -132,54 +135,135 @@ function AppSidebar({
   });
   const collapsed = drawer ? false : railCollapsed;
   const railTopNode = typeof railTop === "function" ? railTop(collapsed) : railTop;
-  return /* @__PURE__ */ jsx3(
-    "aside",
-    {
-      "data-collapsed": collapsed,
-      className: cn(
-        "flex h-full shrink-0 flex-col overflow-hidden motion-rail-collapse",
-        // A nav row drops its own label at the narrow width. What this fades is a label whatever
-        // stands in `railTop` keeps mounted at both — QuickSearchRow's, for one — so the closing
-        // edge slides over the words instead of cutting through them.
-        "[&_[data-slot=nav-row-label]]:transition-opacity [&_[data-slot=nav-row-label]]:duration-fast",
-        collapsed ? RAIL_NARROW : RAIL_WIDE,
-        collapsed && "[&_[data-slot=nav-row-label]]:opacity-0",
-        className
-      ),
-      children: /* @__PURE__ */ jsxs2("div", { className: cn("flex h-full shrink-0 flex-col", RAIL_WIDE), children: [
-        /* @__PURE__ */ jsx3("div", { className: cn("flex h-14 shrink-0 items-center gap-2", drawer ? "pl-3 pr-10" : "px-3"), children: collapsed ? /* @__PURE__ */ jsx3("div", { className: RAIL_COLUMN_BOX, children: logoCollapsed ?? logo }) : header ?? logo }),
-        /* @__PURE__ */ jsx3(Divider, { testId: "sidebar-divider-header" }),
-        railTopNode && /* @__PURE__ */ jsx3("div", { "data-testid": "sidebar-rail-top", className: "shrink-0 px-3 pt-3", children: railTopNode }),
-        /* @__PURE__ */ jsx3(
-          ScrollArea,
-          {
-            className: "min-h-0 flex-1",
-            viewportClassName: cn("px-3 pb-2", railTopNode ? "pt-2" : "pt-3"),
-            viewportProps: { "data-testid": "sidebar-scroll" },
-            children: /* @__PURE__ */ jsx3(SidebarNav, { items, collapsed, basePath, LinkComponent, isItemActive })
-          }
+  const separateMark = header != null || logoCollapsed != null;
+  const asked = typeof children === "function" ? children(collapsed) : children;
+  const written = drawsNothing(asked) ? null : asked;
+  if (process.env.NODE_ENV !== "production" && written !== null && items != null) {
+    console.warn(
+      "[AppSidebar] `children` and `items` are two middles and only one is drawn: `children` wins and the rows are dropped. Put the links inside the middle you wrote, or drop `children`."
+    );
+  }
+  return (
+    // ONE PROVIDER, ROUND THE WHOLE RAIL.
+    //
+    // The rail composes a tooltip at its foot and `SidebarNav` composes one per row at the narrow
+    // width, and a provider per instance is what `.storybook/preview.tsx` states the rule against:
+    // nested, the foot's control opened at Radix's own 700ms while every row beside it opened at
+    // 200, and it could never join their skip-delay group. Here rather than left to `AppShell`, so
+    // a rail rendered on its own still has one — nesting inside the shell's is harmless.
+    /* @__PURE__ */ jsx3(TooltipProvider, { children: /* @__PURE__ */ jsx3(
+      "aside",
+      {
+        "data-collapsed": collapsed,
+        className: cn(
+          "flex h-full shrink-0 flex-col overflow-hidden motion-rail-collapse",
+          // A nav row drops its own label at the narrow width. What this fades is a label whatever
+          // stands in `railTop` keeps mounted at both — QuickSearchRow's, for one — so the closing
+          // edge slides over the words instead of cutting through them.
+          //
+          // The trailing mark goes on the same clock: a disclosure chevron is `nav-row-trailing`, it
+          // is as far past the closing edge as the words beside it, and left untimed it snapped out
+          // while they faded.
+          //
+          // `duration-fast` is the token scale rather than a typed number, so a `@lessly/tokens`
+          // release retunes it, and the step reaches the utility as `var(--motion-duration-fast,
+          // 100ms)` — the same variable `.motion-rail-collapse` reads, which the token layer's
+          // `prefers-reduced-motion` block takes to 0ms, so the words and the width stop together.
+          // `motion-reduce:transition-none` is what a consumer running the preset without
+          // `@lessly/ui/styles.css` stops on: they are left with the 100ms fallback, and no media
+          // query reaches a literal.
+          "[&_[data-slot=nav-row-label]]:transition-opacity [&_[data-slot=nav-row-label]]:duration-fast",
+          "[&_[data-slot=nav-row-label]]:motion-reduce:transition-none",
+          "[&_[data-slot=nav-row-trailing]]:transition-opacity [&_[data-slot=nav-row-trailing]]:duration-fast",
+          "[&_[data-slot=nav-row-trailing]]:motion-reduce:transition-none",
+          collapsed ? RAIL_NARROW : RAIL_WIDE,
+          collapsed && "[&_[data-slot=nav-row-label]]:opacity-0 [&_[data-slot=nav-row-trailing]]:opacity-0",
+          className
         ),
-        !drawer && /* @__PURE__ */ jsxs2(Fragment, { children: [
-          /* @__PURE__ */ jsx3(Divider, { testId: "sidebar-divider-foot" }),
-          /* @__PURE__ */ jsx3("div", { className: "flex shrink-0 px-3 py-2", children: /* @__PURE__ */ jsx3(RailToggle, { collapsed, onClick: toggle }) })
+        children: /* @__PURE__ */ jsxs2("div", { className: cn("flex h-full shrink-0 flex-col", RAIL_WIDE), children: [
+          /* @__PURE__ */ jsx3("div", { className: cn("relative flex h-14 shrink-0 items-center", drawer ? "pl-3 pr-10" : "px-3"), children: separateMark ? /* @__PURE__ */ jsxs2(Fragment, { children: [
+            /* @__PURE__ */ jsx3(
+              "div",
+              {
+                "data-testid": "sidebar-identity-expanded",
+                "aria-hidden": collapsed || void 0,
+                inert: collapsed,
+                className: cn(
+                  "flex w-full items-center gap-2 transition-opacity duration-normal motion-reduce:transition-none",
+                  collapsed && "pointer-events-none opacity-0"
+                ),
+                children: header ?? logo
+              }
+            ),
+            /* @__PURE__ */ jsx3(
+              "div",
+              {
+                "data-testid": "sidebar-identity-collapsed",
+                "aria-hidden": !collapsed || void 0,
+                inert: !collapsed,
+                className: cn("absolute", RAIL_COLUMN_BOX, !collapsed && "pointer-events-none"),
+                children: logoCollapsed ?? logo
+              }
+            )
+          ] }) : (
+            /* ONE MARK, MOUNTED ONCE.
+               With neither `header` nor `logoCollapsed`, both slots resolve to the same `logo`, and
+               a node fading into an identical node is not a transition — it is one mark ghosted off
+               another. Mounted twice it was worse than a picture: one `id` inside an SVG logo
+               belongs to two elements and `getElementById` finds the hidden one, a `ref` fires
+               twice and measures the transparent copy, effects subscribe twice, and `inert` pauses
+               no player.
+               It stands in RAIL_COLUMN_BOX at BOTH widths, which is the box the closed mark and the
+               foot's toggle already stand in: centre 32, the column every row's glyph is on. That
+               is a class list that never changes, so there is no frame for it to move on. */
+            /* @__PURE__ */ jsx3("div", { "data-testid": "sidebar-identity-single", className: RAIL_COLUMN_BOX, children: logo })
+          ) }),
+          /* @__PURE__ */ jsx3(Divider, { testId: "sidebar-divider-header" }),
+          railTopNode && /* @__PURE__ */ jsx3("div", { "data-testid": "sidebar-rail-top", className: "shrink-0 px-3 pt-3", children: railTopNode }),
+          written !== null ? /* @__PURE__ */ jsx3(
+            "div",
+            {
+              "data-testid": "sidebar-body",
+              className: cn(
+                "flex min-h-0 flex-1 flex-col overflow-hidden px-3 pb-2",
+                railTopNode ? "pt-2" : "pt-3"
+              ),
+              children: written
+            }
+          ) : /* @__PURE__ */ jsx3(
+            ScrollArea,
+            {
+              className: "min-h-0 flex-1",
+              viewportClassName: cn("px-3 pb-2", railTopNode ? "pt-2" : "pt-3"),
+              viewportProps: { "data-testid": "sidebar-scroll" },
+              children: /* @__PURE__ */ jsx3(SidebarNav, { items: items ?? [], collapsed, basePath, LinkComponent, isItemActive })
+            }
+          ),
+          !drawer && /* @__PURE__ */ jsxs2(Fragment, { children: [
+            /* @__PURE__ */ jsx3(Divider, { testId: "sidebar-divider-foot" }),
+            /* @__PURE__ */ jsx3("div", { className: "flex shrink-0 px-3 py-2", children: /* @__PURE__ */ jsxs2(Tooltip, { children: [
+              /* @__PURE__ */ jsx3(TooltipTrigger, { asChild: true, "aria-describedby": void 0, children: /* @__PURE__ */ jsx3(RailToggle, { collapsed, onClick: toggle }) }),
+              /* @__PURE__ */ jsx3(TooltipContent, { side: "right", sideOffset: footTooltipOffset(collapsed), children: railToggleLabel(collapsed) })
+            ] }) })
+          ] })
         ] })
-      ] })
-    }
+      }
+    ) })
   );
 }
 
 // src/components/app-shell.tsx
-import * as React2 from "react";
+import * as React from "react";
 import { Menu } from "lucide-react";
 import { useLocation as useLocation2 } from "react-router";
 import { Fragment as Fragment2, jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
 function expandedSidebar(sidebar) {
-  return React2.isValidElement(sidebar) ? React2.cloneElement(sidebar, { collapsed: false }) : sidebar;
+  return React.isValidElement(sidebar) ? React.cloneElement(sidebar, { collapsed: false }) : sidebar;
 }
 function AppShell({ sidebar, topBar, children, className }) {
   const { pathname } = useLocation2();
-  const [mobileOpen, setMobileOpen] = React2.useState(false);
-  React2.useEffect(() => {
+  const [mobileOpen, setMobileOpen] = React.useState(false);
+  React.useEffect(() => {
     setMobileOpen(false);
   }, [pathname]);
   const isMobile = useIsMobile();
@@ -196,7 +280,7 @@ function AppShell({ sidebar, topBar, children, className }) {
               /* @__PURE__ */ jsxs3(SheetContent, { side: "left", className: "w-[248px] bg-bg-primary p-0", children: [
                 /* @__PURE__ */ jsx4(SheetTitle, { className: "sr-only", children: "Navigation" }),
                 /* @__PURE__ */ jsx4(SheetDescription, { className: "sr-only", children: "Application navigation menu" }),
-                /* @__PURE__ */ jsx4(SidebarDrawer, { children: expandedSidebar(sidebar) })
+                /* @__PURE__ */ jsx4(SidebarDrawer, { onDismiss: () => setMobileOpen(false), children: expandedSidebar(sidebar) })
               ] })
             ] }),
             /* @__PURE__ */ jsx4("div", { className: "flex items-center gap-2", children: topBar })

package/dist/styles-federated.css

@@ -19,7 +19,7 @@
   --bg-elevated: #252936;
   --bg-overlay: #252936;
   --bg-sunken: #0e1015;
-  --bg-selected: #1f222d;
+  --bg-selected: #252735;
   --bg-brand: #06297d;
   --bg-brand-subtle: #1f2541;
   --bg-brand-hover: #08349b;
@@ -103,12 +103,12 @@
   --grid-container-max: 1440px;
 
   /* typography text-styles — theme-invariant, :root only (see typographyVars in build.js) */
-  --text-display-xl-font-family: "Instrument Serif", Georgia, "Times New Roman", serif;
+  --text-display-xl-font-family: "Sora", "Inter", system-ui, -apple-system, sans-serif;
   --text-display-xl-font-size: 3.5rem;
   --text-display-xl-line-height: 1.05;
   --text-display-xl-font-weight: 400;
   --text-display-xl-letter-spacing: -0.02em;
-  --text-display-lg-font-family: "Instrument Serif", Georgia, "Times New Roman", serif;
+  --text-display-lg-font-family: "Sora", "Inter", system-ui, -apple-system, sans-serif;
   --text-display-lg-font-size: 3rem;
   --text-display-lg-line-height: 1.1;
   --text-display-lg-font-weight: 400;
@@ -283,7 +283,7 @@
   --bg-elevated: #edeef0;
   --bg-overlay: #ffffff;
   --bg-sunken: #e1e2e4;
-  --bg-selected: #f2f3f4;
+  --bg-selected: #eceded;
   --bg-brand-subtle: #e4ecfe;
   --bg-brand-hover: #05226a;
   --bg-brand-bright-hover: #0b4cd5;
@@ -342,6 +342,27 @@
   --overlay-modal-bg: #ffffff;
   --focus-ring-color: #0940b8;
 
+  /* Same value as :root on purpose, re-declared so .light lists every colour token a
+     light consumer gets rather than leaving some to inheritance. Why, and what holds
+     it honest: docs/tokens.md, "Theme invariance". */
+  --bg-brand: #06297d;
+  --bg-brand-bright: #165ff2;
+  --bg-success: #13703c;
+  --bg-success-bright: #21be63;
+  --bg-danger: #78100b;
+  --text-on-brand: #f6f7f7;
+  --text-on-success: #f6f7f7;
+  --text-on-success-bright: #08090c;
+  --text-on-warning: #08090c;
+  --text-on-danger: #f6f7f7;
+  --border-selected: #737c95;
+  --border-brand: #165ff2;
+  --border-warning: #b3780e;
+  --border-danger: #e82020;
+  --field-border-hover: #737c95;
+  --field-border-filled: #737c95;
+  --field-border-error: #e82020;
+
   /* shadcn role bridge re-declared so .light on a nested element (not just <html>)
      re-resolves the aliases to light values. */
   --background: var(--bg-primary);
@@ -471,11 +492,15 @@
   --color-bg-surface: var(--bg-surface);
   --color-bg-elevated: var(--bg-elevated);
   --color-bg-sunken: var(--bg-sunken);
+  --color-bg-brand: var(--bg-brand);
   --color-bg-brand-subtle: var(--bg-brand-subtle);
   --color-bg-brand-hover: var(--bg-brand-hover);
+  --color-bg-brand-bright: var(--bg-brand-bright);
+  --color-bg-success: var(--bg-success);
   --color-bg-success-subtle: var(--bg-success-subtle);
   --color-bg-warning: var(--bg-warning);
   --color-bg-warning-subtle: var(--bg-warning-subtle);
+  --color-bg-danger: var(--bg-danger);
   --color-bg-danger-subtle: var(--bg-danger-subtle);
   --color-bg-teal-subtle: var(--bg-teal-subtle);
   --color-bg-violet-subtle: var(--bg-violet-subtle);
@@ -485,6 +510,10 @@
   --color-text-tertiary: var(--text-tertiary);
   --color-text-disabled: var(--text-disabled);
   --color-text-inverse: var(--text-inverse);
+  --color-text-on-brand: var(--text-on-brand);
+  --color-text-on-success: var(--text-on-success);
+  --color-text-on-warning: var(--text-on-warning);
+  --color-text-on-danger: var(--text-on-danger);
   --color-text-brand: var(--text-brand);
   --color-text-success: var(--text-success);
   --color-text-warning: var(--text-warning);
@@ -502,8 +531,11 @@
   --color-border-subtle: var(--border-subtle);
   --color-border-default: var(--border-default);
   --color-border-strong: var(--border-strong);
+  --color-border-brand: var(--border-brand);
   --color-border-focus: var(--border-focus);
   --color-border-success: var(--border-success);
+  --color-border-warning: var(--border-warning);
+  --color-border-danger: var(--border-danger);
 }
 
 /* === Fonts === */
@@ -606,8 +638,10 @@
 
 /* === Motion === */
 /* Backs the <AutoHeight> primitive: eases a container's height as its content changes size.
-   Motion-token driven, so it inherits reduce-motion (the vars resolve to 0ms). A real class rather
-   than a Tailwind arbitrary utility, which the content scanner can drop for a newly-used class.
+   A real class because `height` is a property no Tailwind transition utility names: the only way to
+   write it in a class list is the arbitrary `transition-[height]`, which the content scanner can
+   drop the first time a file writes it. (The duration is not the reason — `duration-normal` carries
+   the same variable this line does.)
    Overflow is NOT clipped here — the component clips only while the height is animating (so the
    settled box doesn't slice focus rings or tooltips on full-width children). */
 .motion-auto-height {
@@ -617,9 +651,11 @@
 }
 
 /* Backs ToggleGroup's `sliding` mark: one thumb that travels between equal-width slots instead of a
-   fill appearing on each. A real class for the same reason as the one above, and `slide` because the
-   thumb crosses the width of a slot — `ui`, the hover/focus tint step, would clip it to near a snap.
-   `standard` because it is on screen before and after and only moves in place. */
+   fill appearing on each. A named primitive rather than the three utilities that would now say the
+   same thing, so the thumb's timing is stated once and cannot drift between the call sites that
+   write it. `slide` because the thumb crosses the width of a slot — `ui`, the hover/focus tint step,
+   would clip it to near a snap. `standard` because it is on screen before and after and only moves
+   in place. */
 .motion-segment-thumb {
   transition-property: transform;
   transition-duration: var(--motion-duration-slide);
@@ -630,9 +666,9 @@
    frame as it travels. One class on both, so the mark cannot be retuned away from the edge it
    answers for — the same reason two carets read one `caretMotion`. `transform` is here rather than
    in a class of its own because the bar is that edge said in miniature: retune one and the two stop
-   arriving together. A real class for the reason the two above are, and
-   token-driven because a Tailwind `duration-200` is a literal 200ms: under prefers-reduced-motion
-   the rail kept sliding for its full 200ms while every token-driven motion beside it went instant. */
+   arriving together. A real class for the reason the first one above is, and more so: `width,
+   transform` is a pair no Tailwind utility names at all, so writing it in a class list means the
+   arbitrary `transition-[width,transform]` — the form the scanner can drop. */
 .motion-rail-collapse {
   transition-property: width, transform;
   transition-duration: var(--motion-duration-normal);

package/dist/styles.css

@@ -18,7 +18,7 @@
   --bg-elevated: #252936;
   --bg-overlay: #252936;
   --bg-sunken: #0e1015;
-  --bg-selected: #1f222d;
+  --bg-selected: #252735;
   --bg-brand: #06297d;
   --bg-brand-subtle: #1f2541;
   --bg-brand-hover: #08349b;
@@ -102,12 +102,12 @@
   --grid-container-max: 1440px;
 
   /* typography text-styles — theme-invariant, :root only (see typographyVars in build.js) */
-  --text-display-xl-font-family: "Instrument Serif", Georgia, "Times New Roman", serif;
+  --text-display-xl-font-family: "Sora", "Inter", system-ui, -apple-system, sans-serif;
   --text-display-xl-font-size: 3.5rem;
   --text-display-xl-line-height: 1.05;
   --text-display-xl-font-weight: 400;
   --text-display-xl-letter-spacing: -0.02em;
-  --text-display-lg-font-family: "Instrument Serif", Georgia, "Times New Roman", serif;
+  --text-display-lg-font-family: "Sora", "Inter", system-ui, -apple-system, sans-serif;
   --text-display-lg-font-size: 3rem;
   --text-display-lg-line-height: 1.1;
   --text-display-lg-font-weight: 400;
@@ -282,7 +282,7 @@
   --bg-elevated: #edeef0;
   --bg-overlay: #ffffff;
   --bg-sunken: #e1e2e4;
-  --bg-selected: #f2f3f4;
+  --bg-selected: #eceded;
   --bg-brand-subtle: #e4ecfe;
   --bg-brand-hover: #05226a;
   --bg-brand-bright-hover: #0b4cd5;
@@ -341,6 +341,27 @@
   --overlay-modal-bg: #ffffff;
   --focus-ring-color: #0940b8;
 
+  /* Same value as :root on purpose, re-declared so .light lists every colour token a
+     light consumer gets rather than leaving some to inheritance. Why, and what holds
+     it honest: docs/tokens.md, "Theme invariance". */
+  --bg-brand: #06297d;
+  --bg-brand-bright: #165ff2;
+  --bg-success: #13703c;
+  --bg-success-bright: #21be63;
+  --bg-danger: #78100b;
+  --text-on-brand: #f6f7f7;
+  --text-on-success: #f6f7f7;
+  --text-on-success-bright: #08090c;
+  --text-on-warning: #08090c;
+  --text-on-danger: #f6f7f7;
+  --border-selected: #737c95;
+  --border-brand: #165ff2;
+  --border-warning: #b3780e;
+  --border-danger: #e82020;
+  --field-border-hover: #737c95;
+  --field-border-filled: #737c95;
+  --field-border-error: #e82020;
+
   /* shadcn role bridge re-declared so .light on a nested element (not just <html>)
      re-resolves the aliases to light values. */
   --background: var(--bg-primary);
@@ -470,11 +491,15 @@
   --color-bg-surface: var(--bg-surface);
   --color-bg-elevated: var(--bg-elevated);
   --color-bg-sunken: var(--bg-sunken);
+  --color-bg-brand: var(--bg-brand);
   --color-bg-brand-subtle: var(--bg-brand-subtle);
   --color-bg-brand-hover: var(--bg-brand-hover);
+  --color-bg-brand-bright: var(--bg-brand-bright);
+  --color-bg-success: var(--bg-success);
   --color-bg-success-subtle: var(--bg-success-subtle);
   --color-bg-warning: var(--bg-warning);
   --color-bg-warning-subtle: var(--bg-warning-subtle);
+  --color-bg-danger: var(--bg-danger);
   --color-bg-danger-subtle: var(--bg-danger-subtle);
   --color-bg-teal-subtle: var(--bg-teal-subtle);
   --color-bg-violet-subtle: var(--bg-violet-subtle);
@@ -484,6 +509,10 @@
   --color-text-tertiary: var(--text-tertiary);
   --color-text-disabled: var(--text-disabled);
   --color-text-inverse: var(--text-inverse);
+  --color-text-on-brand: var(--text-on-brand);
+  --color-text-on-success: var(--text-on-success);
+  --color-text-on-warning: var(--text-on-warning);
+  --color-text-on-danger: var(--text-on-danger);
   --color-text-brand: var(--text-brand);
   --color-text-success: var(--text-success);
   --color-text-warning: var(--text-warning);
@@ -501,8 +530,11 @@
   --color-border-subtle: var(--border-subtle);
   --color-border-default: var(--border-default);
   --color-border-strong: var(--border-strong);
+  --color-border-brand: var(--border-brand);
   --color-border-focus: var(--border-focus);
   --color-border-success: var(--border-success);
+  --color-border-warning: var(--border-warning);
+  --color-border-danger: var(--border-danger);
 }
 
 /* === Fonts === */
@@ -647,8 +679,10 @@
 
 /* === Motion === */
 /* Backs the <AutoHeight> primitive: eases a container's height as its content changes size.
-   Motion-token driven, so it inherits reduce-motion (the vars resolve to 0ms). A real class rather
-   than a Tailwind arbitrary utility, which the content scanner can drop for a newly-used class.
+   A real class because `height` is a property no Tailwind transition utility names: the only way to
+   write it in a class list is the arbitrary `transition-[height]`, which the content scanner can
+   drop the first time a file writes it. (The duration is not the reason — `duration-normal` carries
+   the same variable this line does.)
    Overflow is NOT clipped here — the component clips only while the height is animating (so the
    settled box doesn't slice focus rings or tooltips on full-width children). */
 .motion-auto-height {
@@ -658,9 +692,11 @@
 }
 
 /* Backs ToggleGroup's `sliding` mark: one thumb that travels between equal-width slots instead of a
-   fill appearing on each. A real class for the same reason as the one above, and `slide` because the
-   thumb crosses the width of a slot — `ui`, the hover/focus tint step, would clip it to near a snap.
-   `standard` because it is on screen before and after and only moves in place. */
+   fill appearing on each. A named primitive rather than the three utilities that would now say the
+   same thing, so the thumb's timing is stated once and cannot drift between the call sites that
+   write it. `slide` because the thumb crosses the width of a slot — `ui`, the hover/focus tint step,
+   would clip it to near a snap. `standard` because it is on screen before and after and only moves
+   in place. */
 .motion-segment-thumb {
   transition-property: transform;
   transition-duration: var(--motion-duration-slide);
@@ -671,9 +707,9 @@
    frame as it travels. One class on both, so the mark cannot be retuned away from the edge it
    answers for — the same reason two carets read one `caretMotion`. `transform` is here rather than
    in a class of its own because the bar is that edge said in miniature: retune one and the two stop
-   arriving together. A real class for the reason the two above are, and
-   token-driven because a Tailwind `duration-200` is a literal 200ms: under prefers-reduced-motion
-   the rail kept sliding for its full 200ms while every token-driven motion beside it went instant. */
+   arriving together. A real class for the reason the first one above is, and more so: `width,
+   transform` is a pair no Tailwind utility names at all, so writing it in a class list means the
+   arbitrary `transition-[width,transform]` — the form the scanner can drop. */
 .motion-rail-collapse {
   transition-property: width, transform;
   transition-duration: var(--motion-duration-normal);

package/dist/tailwind-preset.js

@@ -1,6 +1,17 @@
 // src/tailwind-preset.ts
 import tokensPreset from "@lessly/tokens/tailwind-preset";
 var upstreamTheme = tokensPreset.theme;
+var boundToMotionVar = (name, fallback) => `var(--motion-duration-${name}, ${fallback})`;
+var NUMERIC_DURATION_ALIASES = { 200: "normal", 300: "slow", 500: "slower" };
+var upstreamDuration = (name) => {
+  const value = upstreamTheme.transitionDuration[name];
+  if (value === void 0) {
+    throw new Error(
+      `@lessly/tokens no longer declares transitionDuration.${name}, which the numeric duration steps alias \u2014 repoint or drop NUMERIC_DURATION_ALIASES for it in src/tailwind-preset.ts.`
+    );
+  }
+  return value;
+};
 var lesslyPreset = {
   // Spread first: darkMode must keep winning even if upstream ever adds one.
   ...tokensPreset,
@@ -30,11 +41,26 @@ var lesslyPreset = {
     // is not there. Four of these steps are an upstream token's own value under the name Tailwind
     // reads for it — 200ms is `normal`, 300ms `slow`, 500ms `slower`, 10 `raised`. Same deletion
     // contract as the three above.
+    //
+    // Every step reaches the utility as its motion variable, upstream's literal behind it as the
+    // fallback, and the numeric steps bind to the variable of the key they alias. Only a
+    // declaration naming a variable is one the token layer's `prefers-reduced-motion` block can
+    // zero. Only the fallback keeps a consumer who takes the preset without `@lessly/ui/styles.css`
+    // on the durations they have: a `var()` with nothing to resolve and no fallback is invalid at
+    // computed-value time, and `transition-duration` drops to its initial `0s`.
     transitionDuration: {
-      ...upstreamTheme.transitionDuration,
-      200: "200ms",
-      300: "300ms",
-      500: "500ms"
+      ...Object.fromEntries(
+        Object.entries(upstreamTheme.transitionDuration).map(([name, value]) => [
+          name,
+          boundToMotionVar(name, value)
+        ])
+      ),
+      ...Object.fromEntries(
+        Object.entries(NUMERIC_DURATION_ALIASES).map(([step, name]) => [
+          step,
+          boundToMotionVar(name, upstreamDuration(name))
+        ])
+      )
     },
     zIndex: { ...upstreamTheme.zIndex, 10: "10", 20: "20", 50: "50" },
     boxShadow: { ...upstreamTheme.boxShadow, none: "none" },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lessly/ui",
-  "version": "4.1.1",
+  "version": "4.2.0",
   "description": "Lessly design system — shared UI primitives, tokens, and theme",
   "type": "module",
   "packageManager": "pnpm@10.30.3",
@@ -73,7 +73,7 @@
     }
   },
   "dependencies": {
-    "@lessly/tokens": "^0.7.0",
+    "@lessly/tokens": "^0.9.0",
     "@radix-ui/react-accordion": "^1.2.16",
     "@radix-ui/react-alert-dialog": "^1.1.19",
     "@radix-ui/react-aspect-ratio": "^1.1.11",