@moldable-ai/ui 0.2.29 → 0.2.32

package/dist/components/ui/segmented-control.js

@@ -4,16 +4,16 @@ import * as RadioGroupPrimitive from '@radix-ui/react-radio-group';
 import * as React from 'react';
 import { cn } from '../../lib/utils.js';
 import { cva } from 'class-variance-authority';
-const segmentedControlVariants = cva('inline-flex w-fit items-center overflow-x-auto rounded-group p-0.5 text-muted-foreground', {
+const segmentedControlVariants = cva('inline-flex h-[var(--m-ui-control-height)] w-fit items-center overflow-x-auto rounded-[var(--m-ui-control-radius)] bg-[var(--m-ui-color-fill-quinary)] p-0 text-[var(--m-ui-color-text-secondary)]', {
     variants: {
         variant: {
             muted: 'bg-muted/70',
             outline: 'border border-border/80 bg-background shadow-xs',
         },
         density: {
-            compact: 'min-h-control-sm',
-            default: 'min-h-control-md',
-            comfortable: 'min-h-control-sm',
+            compact: '',
+            default: '',
+            comfortable: '',
         },
         fullWidth: {
             true: 'flex w-full',
@@ -26,12 +26,12 @@ const segmentedControlVariants = cva('inline-flex w-fit items-center overflow-x-
         fullWidth: false,
     },
 });
-const segmentedControlItemVariants = cva('relative inline-flex cursor-pointer select-none items-center justify-center whitespace-nowrap rounded-control font-medium outline-none transition-[background-color,color,box-shadow] hover:bg-control-hover hover:text-foreground active:bg-control-pressed active:text-foreground disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 focus-visible:z-10 focus-visible:ring-1 focus-visible:ring-ring data-[state=checked]:bg-background data-[state=checked]:text-foreground data-[state=checked]:shadow-xs data-[state=checked]:hover:bg-control-hover data-[state=checked]:active:bg-control-pressed [&_svg]:pointer-events-none [&_svg]:shrink-0', {
+const segmentedControlItemVariants = cva('relative -ml-px inline-flex h-[var(--m-ui-control-height)] cursor-pointer select-none items-center justify-center whitespace-nowrap rounded-[var(--m-ui-control-radius)] px-[var(--m-ui-segment-margin)] font-medium outline-none transition-[background-color,color,box-shadow] first:ml-0 hover:bg-control-hover hover:text-foreground active:bg-control-pressed active:text-foreground disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 focus-visible:z-10 focus-visible:ring-[3px] focus-visible:ring-ring data-[state=checked]:bg-[var(--m-ui-color-accent)] data-[state=checked]:text-white data-[state=checked]:shadow-xs [&_svg]:pointer-events-none [&_svg]:shrink-0', {
     variants: {
         density: {
-            compact: 'min-h-6 gap-1 px-2 text-ui-caption [&_svg:not([class*="size-"])]:size-3',
-            default: 'min-h-7 gap-1.5 px-2.5 text-ui-body [&_svg:not([class*="size-"])]:size-3.5',
-            comfortable: 'min-h-8 gap-1.5 px-3 text-ui-body [&_svg:not([class*="size-"])]:size-4',
+            compact: 'gap-1 text-[length:var(--m-ui-control-font-size)] leading-[var(--m-ui-control-line-height)] [&_svg:not([class*="size-"])]:size-3',
+            default: 'gap-1.5 text-[length:var(--m-ui-control-font-size)] leading-[var(--m-ui-control-line-height)] [&_svg:not([class*="size-"])]:size-3.5',
+            comfortable: 'gap-1.5 text-[length:var(--m-ui-control-font-size)] leading-[var(--m-ui-control-line-height)] [&_svg:not([class*="size-"])]:size-4',
         },
         fullWidth: {
             true: 'min-w-0 flex-1',
@@ -46,17 +46,23 @@ const segmentedControlItemVariants = cva('relative inline-flex cursor-pointer se
 const SegmentedControlContext = React.createContext({
     density: 'default',
     fullWidth: false,
+    controlSize: undefined,
 });
-function SegmentedControl({ className, variant = 'muted', density = 'default', fullWidth = false, orientation = 'horizontal', ...props }) {
-    return (_jsx(SegmentedControlContext.Provider, { value: { density: density ?? 'default', fullWidth: Boolean(fullWidth) }, children: _jsx(RadioGroupPrimitive.Root, { "data-slot": "segmented-control", "data-variant": variant, "data-density": density, "data-full-width": fullWidth, orientation: orientation, className: cn(segmentedControlVariants({ variant, density, fullWidth }), orientation === 'vertical' && 'flex-col', className), ...props }) }));
+function SegmentedControl({ className, controlSize, variant = 'muted', density = 'default', fullWidth = false, orientation = 'horizontal', ...props }) {
+    const resolvedControlSize = controlSize ??
+        {
+            compact: 'small',
+            default: 'medium',
+            comfortable: 'large',
+        }[density ?? 'default'];
+    return (_jsx(SegmentedControlContext.Provider, { value: {
+            controlSize: resolvedControlSize,
+            density: density ?? 'default',
+            fullWidth: Boolean(fullWidth),
+        }, children: _jsx(RadioGroupPrimitive.Root, { "data-slot": "segmented-control", "data-variant": variant, "data-density": density, "data-control-size": resolvedControlSize, "data-full-width": fullWidth, orientation: orientation, className: cn(segmentedControlVariants({ variant, density, fullWidth }), orientation === 'vertical' && 'flex-col', className), ...props }) }));
 }
 function SegmentedControlItem({ className, iconOnly = false, ...props }) {
-    const { density, fullWidth } = React.useContext(SegmentedControlContext);
-    return (_jsx(RadioGroupPrimitive.Item, { "data-slot": "segmented-control-item", "data-density": density, "data-icon-only": iconOnly, className: cn(segmentedControlItemVariants({ density, fullWidth }), iconOnly &&
-            {
-                compact: 'size-6 p-0',
-                default: 'size-7 p-0',
-                comfortable: 'size-8 p-0',
-            }[density], className), ...props }));
+    const { controlSize, density, fullWidth } = React.useContext(SegmentedControlContext);
+    return (_jsx(RadioGroupPrimitive.Item, { "data-slot": "segmented-control-item", "data-density": density, "data-control-size": controlSize, "data-icon-only": iconOnly, className: cn(segmentedControlItemVariants({ density, fullWidth }), iconOnly && 'size-[var(--m-ui-control-height)] p-0', className), ...props }));
 }
 export { SegmentedControl, SegmentedControlItem, segmentedControlItemVariants, segmentedControlVariants, };

package/dist/components/ui/select.js

@@ -17,14 +17,14 @@ function SelectTrigger({ className, size = 'default', children, ...props }) {
 }
 function SelectContent({ className, children, position = 'item-aligned', align = 'center', ...props }) {
     return (_jsx(SelectPrimitive.Portal, { children: _jsxs(SelectPrimitive.Content, { "data-slot": "select-content", className: cn('bg-popover text-popover-foreground 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]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 max-h-(--radix-select-content-available-height) origin-(--radix-select-content-transform-origin) rounded-overlay shadow-overlay relative z-50 min-w-[8rem] overflow-y-auto overflow-x-hidden border', position === 'popper' &&
-                'data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1', className), position: position, align: align, ...props, children: [_jsx(SelectScrollUpButton, {}), _jsx(SelectPrimitive.Viewport, { role: "group", tabIndex: 0, className: cn('p-1', position === 'popper' &&
+                'data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1', className), position: position, align: align, ...props, children: [_jsx(SelectScrollUpButton, {}), _jsx(SelectPrimitive.Viewport, { role: "group", tabIndex: 0, className: cn('px-1 py-[var(--m-ui-menu-padding-block)]', position === 'popper' &&
                         'h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)] scroll-my-1'), children: children }), _jsx(SelectScrollDownButton, {})] }) }));
 }
 function SelectLabel({ className, ...props }) {
     return (_jsx(SelectPrimitive.Label, { "data-slot": "select-label", className: cn('text-muted-foreground text-ui-caption px-2 py-1.5', className), ...props }));
 }
 function SelectItem({ className, children, ...props }) {
-    return (_jsxs(SelectPrimitive.Item, { "data-slot": "select-item", className: cn("focus:bg-accent focus:text-accent-foreground [&_svg:not([class*='text-'])]:text-muted-foreground outline-hidden *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2 rounded-control text-ui-body relative flex w-full cursor-default select-none items-center gap-2 py-1.5 pl-2 pr-8 data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0", className), ...props, children: [_jsx("span", { "data-slot": "select-item-indicator", className: "absolute right-2 flex size-3.5 items-center justify-center", children: _jsx(SelectPrimitive.ItemIndicator, { children: _jsx(CheckIcon, { className: "size-4" }) }) }), _jsx(SelectPrimitive.ItemText, { children: children })] }));
+    return (_jsxs(SelectPrimitive.Item, { "data-slot": "select-item", className: cn("focus:bg-accent focus:text-accent-foreground [&_svg:not([class*='text-'])]:text-muted-foreground outline-hidden *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2 text-ui-body relative flex w-full cursor-default select-none items-center gap-2 rounded-[var(--m-ui-menu-item-radius)] py-1.5 pl-2 pr-8 data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0", className), ...props, children: [_jsx("span", { "data-slot": "select-item-indicator", className: "absolute right-2 flex size-3.5 items-center justify-center", children: _jsx(SelectPrimitive.ItemIndicator, { children: _jsx(CheckIcon, { className: "size-4" }) }) }), _jsx(SelectPrimitive.ItemText, { children: children })] }));
 }
 function SelectSeparator({ className, ...props }) {
     return (_jsx(SelectPrimitive.Separator, { "data-slot": "select-separator", className: cn('bg-border pointer-events-none -mx-1 my-1 h-px', className), ...props }));

package/dist/components/ui/sidebar.d.ts

@@ -1,6 +1,8 @@
 import * as React from 'react';
+import type { UISidebarStyle } from '../../tokens/contracts.js';
 import { Button } from './button.js';
 import { Input } from './input.js';
+import type { MaterialVariant } from './material.js';
 import { Separator } from './separator.js';
 import { TooltipContent } from './tooltip.js';
 import { type VariantProps } from 'class-variance-authority';
@@ -19,9 +21,11 @@ declare function SidebarProvider({ defaultOpen, open: openProp, onOpenChange: se
     open?: boolean;
     onOpenChange?: (open: boolean) => void;
 }): import("react/jsx-runtime").JSX.Element;
-declare function Sidebar({ side, variant, collapsible, className, children, ref, ...props }: React.ComponentProps<'div'> & {
+declare function Sidebar({ side, variant, sidebarStyle, material, collapsible, className, children, ref, ...props }: React.ComponentProps<'div'> & {
     side?: 'left' | 'right';
     variant?: 'sidebar' | 'floating' | 'inset';
+    sidebarStyle?: UISidebarStyle;
+    material?: MaterialVariant;
     collapsible?: 'offcanvas' | 'icon' | 'none';
 }): import("react/jsx-runtime").JSX.Element;
 declare function SidebarTrigger({ className, onClick, ...props }: React.ComponentProps<typeof Button>): import("react/jsx-runtime").JSX.Element;
@@ -31,9 +35,11 @@ declare function SidebarInput({ className, ...props }: React.ComponentProps<type
 declare function SidebarHeader({ className, ...props }: React.ComponentProps<'div'>): import("react/jsx-runtime").JSX.Element;
 declare function SidebarFooter({ className, ...props }: React.ComponentProps<'div'>): import("react/jsx-runtime").JSX.Element;
 declare function SidebarSeparator({ className, ...props }: React.ComponentProps<typeof Separator>): import("react/jsx-runtime").JSX.Element;
-declare function SidebarContent({ className, ...props }: React.ComponentProps<'div'>): import("react/jsx-runtime").JSX.Element;
+declare function SidebarContent({ className, edgeFade, ...props }: React.ComponentProps<'div'> & {
+    edgeFade?: boolean;
+}): import("react/jsx-runtime").JSX.Element;
 declare function SidebarGroup({ className, ...props }: React.ComponentProps<'div'>): import("react/jsx-runtime").JSX.Element;
-declare function SidebarGroupLabel({ className, asChild, ...props }: React.ComponentProps<'div'> & {
+declare function SidebarGroupLabel({ className, asChild, style, ...props }: React.ComponentProps<'div'> & {
     asChild?: boolean;
 }): import("react/jsx-runtime").JSX.Element;
 declare function SidebarGroupAction({ className, asChild, ...props }: React.ComponentProps<'button'> & {
@@ -46,7 +52,7 @@ declare const sidebarMenuButtonVariants: (props?: ({
     variant?: "default" | "outline" | null | undefined;
     size?: "default" | "sm" | "lg" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
-declare function SidebarMenuButton({ asChild, isActive, variant, size, tooltip, className, ...props }: React.ComponentProps<'button'> & {
+declare function SidebarMenuButton({ asChild, isActive, variant, size, tooltip, className, style, ...props }: React.ComponentProps<'button'> & {
     asChild?: boolean;
     isActive?: boolean;
     tooltip?: string | React.ComponentProps<typeof TooltipContent>;

package/dist/components/ui/sidebar.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"sidebar.d.ts","sourceRoot":"","sources":["../../../src/components/ui/sidebar.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"sidebar.d.ts","sourceRoot":"","sources":["../../../src/components/ui/sidebar.tsx"],"names":[],"mappings":"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"}

package/dist/components/ui/sidebar.js

@@ -4,10 +4,12 @@ import { Slot } from '@radix-ui/react-slot';
 import { PanelLeftIcon } from 'lucide-react';
 import * as React from 'react';
 import { MOLDABLE_MATERIAL_REGION_MESSAGE_TYPE } from '../../lib/frame-lifecycle.js';
+import { useOptionalTheme } from '../../lib/theme.js';
 import { cn } from '../../lib/utils.js';
 import { useIsMobile } from '../../hooks/use-mobile.js';
 import { useAppFrameRuntime } from './app-frame.js';
 import { Button } from './button.js';
+import { EdgeFade } from './edge-fade.js';
 import { Input } from './input.js';
 import { Separator } from './separator.js';
 import { Sheet, SheetContent, SheetDescription, SheetHeader, SheetTitle, } from './sheet.js';
@@ -16,7 +18,7 @@ import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, } from './too
 import { cva } from 'class-variance-authority';
 const SIDEBAR_COOKIE_NAME = 'sidebar_state';
 const SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7;
-const SIDEBAR_WIDTH = '16rem';
+const SIDEBAR_WIDTH = 'var(--m-ui-sidebar-width, 16rem)';
 const SIDEBAR_WIDTH_MOBILE = '18rem';
 const SIDEBAR_WIDTH_ICON = '3rem';
 const SIDEBAR_KEYBOARD_SHORTCUT = 'b';
@@ -41,6 +43,7 @@ function useSidebarMaterialRegion({ enabled, forwardedRef, }) {
     }, [forwardedRef]);
     const canDeclare = enabled &&
         appFrame?.mode === 'window' &&
+        appFrame.sidebarMaterialEnabled === true &&
         appFrame.sidebarMaterialAvailable === true;
     React.useEffect(() => {
         const element = elementRef.current;
@@ -158,32 +161,64 @@ function SidebarProvider({ defaultOpen = true, open: openProp, onOpenChange: set
                     ...style,
                 }, className: cn('group/sidebar-wrapper has-data-[variant=inset]:bg-sidebar flex min-h-svh w-full', className), ...props, children: children }) }) }));
 }
-function Sidebar({ side = 'left', variant = 'sidebar', collapsible = 'offcanvas', className, children, ref, ...props }) {
+function Sidebar({ side = 'left', variant = 'sidebar', sidebarStyle, material, collapsible = 'offcanvas', className, children, ref, ...props }) {
+    const theme = useOptionalTheme();
+    const resolvedSidebarStyle = sidebarStyle ?? theme?.sidebarStyle ?? 'edge-to-edge';
+    const resolvedVariant = resolvedSidebarStyle === 'floating'
+        ? 'floating'
+        : resolvedSidebarStyle === 'edge-to-edge'
+            ? 'sidebar'
+            : variant;
     const { isMobile, state, openMobile, setOpenMobile } = useSidebar();
     const materialRegion = useSidebarMaterialRegion({
         enabled: !isMobile &&
             side === 'left' &&
-            variant === 'sidebar' &&
+            resolvedVariant === 'sidebar' &&
             !(state === 'collapsed' && collapsible === 'offcanvas'),
         forwardedRef: ref,
     });
+    const usesWebMaterial = resolvedVariant === 'floating' &&
+        material !== undefined &&
+        !materialRegion.active;
     if (collapsible === 'none') {
-        return (_jsx("div", { ref: materialRegion.setElement, "data-slot": "sidebar", "data-material-region-id": materialRegion.regionId, "data-native-material": materialRegion.active ? 'sidebar' : undefined, className: cn(materialRegion.active ? 'bg-transparent' : 'bg-sidebar', 'text-sidebar-foreground w-(--sidebar-width) flex flex-col self-stretch', className), ...props, children: children }));
+        return (_jsx("div", { ref: materialRegion.setElement, "data-slot": "sidebar", "data-ui-sidebar-style": resolvedSidebarStyle, "data-material": usesWebMaterial ? material : undefined, "data-material-region-id": materialRegion.regionId, "data-native-material": materialRegion.active ? 'sidebar' : undefined, className: cn(usesWebMaterial
+                ? 'moldable-material'
+                : materialRegion.active
+                    ? 'bg-transparent'
+                    : 'bg-sidebar', 'text-sidebar-foreground w-(--sidebar-width) flex flex-col self-stretch', resolvedVariant === 'floating' &&
+                'overflow-hidden border-[length:var(--m-ui-sidebar-border-width,0px)] [border-color:var(--m-ui-sidebar-border-color,var(--sidebar-border))]', className), ...props, children: children }));
     }
     if (isMobile) {
-        return (_jsx(Sheet, { open: openMobile, onOpenChange: setOpenMobile, ...props, children: _jsxs(SheetContent, { "data-sidebar": "sidebar", "data-slot": "sidebar", "data-mobile": "true", className: "bg-sidebar text-sidebar-foreground w-(--sidebar-width) p-0 [&>button]:hidden", style: {
+        return (_jsx(Sheet, { open: openMobile, onOpenChange: setOpenMobile, ...props, children: _jsxs(SheetContent, { "data-sidebar": "sidebar", "data-slot": "sidebar", "data-ui-sidebar-style": resolvedSidebarStyle, "data-mobile": "true", className: "bg-sidebar text-sidebar-foreground w-(--sidebar-width) p-0 [&>button]:hidden", style: {
                     '--sidebar-width': SIDEBAR_WIDTH_MOBILE,
                 }, side: side, children: [_jsxs(SheetHeader, { className: "sr-only", children: [_jsx(SheetTitle, { children: "Sidebar" }), _jsx(SheetDescription, { children: "Displays the mobile sidebar." })] }), _jsx("div", { className: "flex h-full w-full flex-col", children: children })] }) }));
     }
-    return (_jsxs("div", { className: "text-sidebar-foreground group peer hidden md:block", "data-state": state, "data-collapsible": state === 'collapsed' ? collapsible : '', "data-variant": variant, "data-side": side, "data-slot": "sidebar", children: [_jsx("div", { "data-slot": "sidebar-gap", className: cn('w-(--sidebar-width) relative bg-transparent transition-[width] duration-200 ease-linear', 'group-data-[collapsible=offcanvas]:w-0', 'group-data-[side=right]:rotate-180', variant === 'floating' || variant === 'inset'
+    return (_jsxs("div", { className: "text-sidebar-foreground group peer hidden md:block", "data-state": state, "data-collapsible": state === 'collapsed' ? collapsible : '', "data-variant": resolvedVariant, "data-side": side, "data-slot": "sidebar", "data-ui-sidebar-style": resolvedSidebarStyle, children: [_jsx("div", { "data-slot": "sidebar-gap", className: cn('w-(--sidebar-width) relative bg-transparent transition-[width] duration-200 ease-linear', 'group-data-[collapsible=offcanvas]:w-0', 'group-data-[side=right]:rotate-180', resolvedVariant === 'floating' || resolvedVariant === 'inset'
                     ? 'group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4)))]'
                     : 'group-data-[collapsible=icon]:w-(--sidebar-width-icon)') }), _jsx("div", { ref: materialRegion.setElement, "data-slot": "sidebar-container", "data-material-region-id": materialRegion.regionId, "data-native-material": materialRegion.active ? 'sidebar' : undefined, className: cn('w-(--sidebar-width) fixed inset-y-0 z-10 hidden h-svh transition-[left,right,width] duration-200 ease-linear md:flex', side === 'left'
                     ? 'left-0 group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)]'
                     : 'right-0 group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)]', 
                 // Adjust the padding for floating and inset variants.
-                variant === 'floating' || variant === 'inset'
-                    ? 'p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4))+2px)]'
-                    : 'group-data-[collapsible=icon]:w-(--sidebar-width-icon) group-data-[side=left]:border-r group-data-[side=right]:border-l', className), ...props, children: _jsx("div", { "data-sidebar": "sidebar", "data-slot": "sidebar-inner", className: cn(materialRegion.active ? 'bg-transparent' : 'bg-sidebar', 'group-data-[variant=floating]:border-sidebar-border group-data-[variant=floating]:rounded-container flex h-full w-full flex-col group-data-[variant=floating]:border group-data-[variant=floating]:shadow-sm'), children: children }) })] }));
+                resolvedVariant === 'floating' || resolvedVariant === 'inset'
+                    ? 'p-[var(--m-ui-sidebar-window-inset,0.5rem)] group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4))+2px)]'
+                    : 'group-data-[collapsible=icon]:w-(--sidebar-width-icon) [border-color:var(--m-ui-sidebar-divider-color,var(--sidebar-border))] group-data-[side=left]:border-r-[length:var(--m-ui-sidebar-divider-width,1px)] group-data-[side=right]:border-l-[length:var(--m-ui-sidebar-divider-width,1px)]', className), ...props, children: _jsx("div", { "data-sidebar": "sidebar", "data-slot": "sidebar-inner", "data-material": usesWebMaterial ? material : undefined, className: cn(usesWebMaterial
+                        ? 'moldable-material'
+                        : materialRegion.active
+                            ? 'bg-transparent'
+                            : 'bg-sidebar', 'flex h-full w-full flex-col', resolvedVariant === 'floating' && 'overflow-hidden'), style: resolvedVariant === 'floating'
+                        ? {
+                            borderRadius: 'var(--m-ui-sidebar-shell-radius, var(--shape-container))',
+                            borderStyle: 'solid',
+                            borderWidth: 'var(--m-ui-sidebar-border-width, 0px)',
+                            borderColor: 'var(--m-ui-sidebar-border-color, var(--sidebar-border))',
+                            boxShadow: 'var(--m-ui-sidebar-shadow, var(--material-shadow-sidebar))',
+                            ...(usesWebMaterial
+                                ? {}
+                                : {
+                                    backdropFilter: 'blur(var(--m-ui-sidebar-glass-effect-radius, 0px))',
+                                }),
+                        }
+                        : undefined, children: children }) })] }));
 }
 function SidebarTrigger({ className, onClick, ...props }) {
     const { toggleSidebar } = useSidebar();
@@ -211,15 +246,23 @@ function SidebarFooter({ className, ...props }) {
 function SidebarSeparator({ className, ...props }) {
     return (_jsx(Separator, { "data-slot": "sidebar-separator", "data-sidebar": "separator", className: cn('bg-sidebar-border mx-2 w-auto', className), ...props }));
 }
-function SidebarContent({ className, ...props }) {
-    return (_jsx("div", { "data-slot": "sidebar-content", "data-sidebar": "content", className: cn('flex min-h-0 flex-1 flex-col gap-2 overflow-auto group-data-[collapsible=icon]:overflow-hidden', className), ...props }));
+function SidebarContent({ className, edgeFade = false, ...props }) {
+    const content = (_jsx("div", { "data-slot": "sidebar-content", "data-sidebar": "content", className: cn('flex min-h-0 flex-1 flex-col gap-2 overflow-auto group-data-[collapsible=icon]:overflow-hidden', className), ...props }));
+    if (!edgeFade)
+        return content;
+    return (_jsxs("div", { "data-slot": "sidebar-content-frame", className: "relative flex min-h-0 flex-1 flex-col overflow-hidden", children: [content, _jsx(EdgeFade, { edge: "top", className: "from-sidebar" }), _jsx(EdgeFade, { edge: "bottom", className: "from-sidebar" })] }));
 }
 function SidebarGroup({ className, ...props }) {
     return (_jsx("div", { "data-slot": "sidebar-group", "data-sidebar": "group", className: cn('relative flex w-full min-w-0 flex-col p-2', className), ...props }));
 }
-function SidebarGroupLabel({ className, asChild = false, ...props }) {
+function SidebarGroupLabel({ className, asChild = false, style, ...props }) {
     const Comp = asChild ? Slot : 'div';
-    return (_jsx(Comp, { "data-slot": "sidebar-group-label", "data-sidebar": "group-label", className: cn('text-sidebar-foreground/70 ring-sidebar-ring outline-hidden rounded-control text-ui-caption flex h-8 shrink-0 items-center px-2 font-medium transition-[margin,opacity] duration-200 ease-linear focus-visible:ring-1 [&>svg]:size-4 [&>svg]:shrink-0', 'group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0', className), ...props }));
+    return (_jsx(Comp, { "data-slot": "sidebar-group-label", "data-sidebar": "group-label", className: cn('text-sidebar-foreground/70 ring-sidebar-ring outline-hidden text-ui-caption flex shrink-0 items-center font-medium transition-[margin,opacity] duration-200 ease-linear focus-visible:ring-1 [&>svg]:size-4 [&>svg]:shrink-0', 'group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0', className), style: {
+            minHeight: 'var(--m-ui-sidebar-section-height-medium, 2rem)',
+            paddingInline: 'var(--m-ui-sidebar-row-inset-inline, 0.5rem)',
+            borderRadius: 'var(--m-ui-sidebar-item-radius, var(--shape-control))',
+            ...style,
+        }, ...props }));
 }
 function SidebarGroupAction({ className, asChild = false, ...props }) {
     const Comp = asChild ? Slot : 'button';
@@ -236,7 +279,7 @@ function SidebarMenu({ className, ...props }) {
 function SidebarMenuItem({ className, ...props }) {
     return (_jsx("li", { "data-slot": "sidebar-menu-item", "data-sidebar": "menu-item", className: cn('group/menu-item relative', className), ...props }));
 }
-const sidebarMenuButtonVariants = cva('peer/menu-button flex w-full items-center gap-2 overflow-hidden rounded-control p-2 text-left text-ui-body outline-hidden ring-sidebar-ring transition-[width,height,padding] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-1 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 group-has-data-[sidebar=menu-action]/menu-item:pr-8 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-[active=true]:bg-sidebar-accent data-[active=true]:font-medium data-[active=true]:text-sidebar-accent-foreground data-[state=open]:hover:bg-sidebar-accent data-[state=open]:hover:text-sidebar-accent-foreground group-data-[collapsible=icon]:size-8! group-data-[collapsible=icon]:p-2! [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0', {
+const sidebarMenuButtonVariants = cva('peer/menu-button flex w-full items-center gap-2 overflow-hidden rounded-control p-2 text-left text-ui-body outline-hidden ring-sidebar-ring transition-[width,height,padding] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-1 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 group-has-data-[sidebar=menu-action]/menu-item:pr-8 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-[active=true]:bg-sidebar-accent data-[active=true]:font-medium data-[active=true]:text-sidebar-accent-foreground data-[active=true]:[&>svg]:text-sidebar-accent-foreground data-[state=open]:hover:bg-sidebar-accent data-[state=open]:hover:text-sidebar-accent-foreground group-data-[collapsible=icon]:size-8! group-data-[collapsible=icon]:p-2! [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0', {
     variants: {
         variant: {
             default: 'hover:bg-sidebar-accent hover:text-sidebar-accent-foreground',
@@ -253,10 +296,24 @@ const sidebarMenuButtonVariants = cva('peer/menu-button flex w-full items-center
         size: 'default',
     },
 });
-function SidebarMenuButton({ asChild = false, isActive = false, variant = 'default', size = 'default', tooltip, className, ...props }) {
+function SidebarMenuButton({ asChild = false, isActive = false, variant = 'default', size = 'default', tooltip, className, style, ...props }) {
     const Comp = asChild ? Slot : 'button';
     const { isMobile, state } = useSidebar();
-    const button = (_jsx(Comp, { "data-slot": "sidebar-menu-button", "data-sidebar": "menu-button", "data-size": size, "data-active": isActive, className: cn(sidebarMenuButtonVariants({ variant, size }), className), ...props }));
+    const heightToken = size === 'sm'
+        ? '--m-ui-sidebar-row-height-small'
+        : size === 'lg'
+            ? '--m-ui-sidebar-row-height-large'
+            : '--m-ui-sidebar-row-height-medium';
+    const button = (_jsx(Comp, { "data-slot": "sidebar-menu-button", "data-sidebar": "menu-button", "data-size": size, "data-active": isActive, className: cn(sidebarMenuButtonVariants({ variant, size }), className), style: {
+            height: `var(${heightToken})`,
+            minHeight: `var(${heightToken})`,
+            paddingBlock: 0,
+            paddingInline: 'var(--m-ui-sidebar-row-inset-inline, 0.5rem)',
+            borderRadius: isActive
+                ? 'var(--m-ui-sidebar-selection-radius, var(--shape-control))'
+                : 'var(--m-ui-sidebar-item-radius, var(--shape-control))',
+            ...style,
+        }, ...props }));
     if (!tooltip) {
         return button;
     }
@@ -294,6 +351,6 @@ function SidebarMenuSubItem({ className, ...props }) {
 }
 function SidebarMenuSubButton({ asChild = false, size = 'md', isActive = false, className, ...props }) {
     const Comp = asChild ? Slot : 'a';
-    return (_jsx(Comp, { "data-slot": "sidebar-menu-sub-button", "data-sidebar": "menu-sub-button", "data-size": size, "data-active": isActive, className: cn('text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground active:bg-sidebar-accent active:text-sidebar-accent-foreground [&>svg]:text-sidebar-accent-foreground outline-hidden rounded-control flex h-7 min-w-0 -translate-x-px items-center gap-2 overflow-hidden px-2 focus-visible:ring-1 disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0', 'data-[active=true]:bg-sidebar-accent data-[active=true]:text-sidebar-accent-foreground', size === 'sm' && 'text-ui-caption', size === 'md' && 'text-ui-body', 'group-data-[collapsible=icon]:hidden', className), ...props }));
+    return (_jsx(Comp, { "data-slot": "sidebar-menu-sub-button", "data-sidebar": "menu-sub-button", "data-size": size, "data-active": isActive, className: cn('text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground active:bg-sidebar-accent active:text-sidebar-accent-foreground outline-hidden rounded-control data-[active=true]:[&>svg]:text-sidebar-accent-foreground flex h-7 min-w-0 -translate-x-px items-center gap-2 overflow-hidden px-2 focus-visible:ring-1 disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0', 'data-[active=true]:bg-sidebar-accent data-[active=true]:text-sidebar-accent-foreground', size === 'sm' && 'text-ui-caption', size === 'md' && 'text-ui-body', 'group-data-[collapsible=icon]:hidden', className), ...props }));
 }
 export { Sidebar, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupAction, SidebarGroupContent, SidebarGroupLabel, SidebarHeader, SidebarInput, SidebarInset, SidebarMenu, SidebarMenuAction, SidebarMenuBadge, SidebarMenuButton, SidebarMenuItem, SidebarMenuSkeleton, SidebarMenuSub, SidebarMenuSubButton, SidebarMenuSubItem, SidebarProvider, SidebarRail, SidebarSeparator, SidebarTrigger, useSidebar, };

package/dist/components/ui/status.d.ts

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { type VariantProps } from 'class-variance-authority';
 declare const statusVariants: (props?: ({
-    variant?: "error" | "neutral" | "info" | "success" | "warning" | "running" | "pending" | null | undefined;
+    variant?: "neutral" | "info" | "success" | "warning" | "error" | "running" | "pending" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 export interface StatusProps extends React.ComponentProps<'span'>, VariantProps<typeof statusVariants> {
     asChild?: boolean;

package/dist/components/ui/status.js

@@ -3,7 +3,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Slot } from '@radix-ui/react-slot';
 import { cn } from '../../lib/utils.js';
 import { cva } from 'class-variance-authority';
-const statusVariants = cva('text-ui-caption inline-flex min-w-0 items-center gap-1.5 font-medium', {
+const statusVariants = cva('inline-flex min-w-0 items-center gap-1.5 [font-size:var(--type-caption-size,10px)] font-medium [line-height:var(--type-caption-line-height,13px)]', {
     variants: {
         variant: {
             info: 'text-info-foreground [&_[data-slot=status-indicator]]:bg-info',

package/dist/components/ui/switch.d.ts

@@ -1,7 +1,9 @@
 import * as SwitchPrimitive from '@radix-ui/react-switch';
 import * as React from 'react';
-declare function Switch({ className, size, ...props }: React.ComponentProps<typeof SwitchPrimitive.Root> & {
+import type { ControlSize } from '../../tokens/contracts.js';
+declare function Switch({ className, controlSize, size, ...props }: React.ComponentProps<typeof SwitchPrimitive.Root> & {
     size?: 'sm' | 'default';
+    controlSize?: ControlSize;
 }): import("react/jsx-runtime").JSX.Element;
 export { Switch };
 //# sourceMappingURL=switch.d.ts.map

package/dist/components/ui/switch.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"switch.d.ts","sourceRoot":"","sources":["../../../src/components/ui/switch.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,eAAe,MAAM,wBAAwB,CAAA;AACzD,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAG9B,iBAAS,MAAM,CAAC,EACd,SAAS,EACT,IAAgB,EAChB,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,eAAe,CAAC,IAAI,CAAC,GAAG;IACrD,IAAI,CAAC,EAAE,IAAI,GAAG,SAAS,CAAA;CACxB,2CAmBA;AAED,OAAO,EAAE,MAAM,EAAE,CAAA"}
+{"version":3,"file":"switch.d.ts","sourceRoot":"","sources":["../../../src/components/ui/switch.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,eAAe,MAAM,wBAAwB,CAAA;AACzD,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,wBAAwB,CAAA;AAEzD,iBAAS,MAAM,CAAC,EACd,SAAS,EACT,WAAW,EACX,IAAgB,EAChB,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,eAAe,CAAC,IAAI,CAAC,GAAG;IACrD,IAAI,CAAC,EAAE,IAAI,GAAG,SAAS,CAAA;IACvB,WAAW,CAAC,EAAE,WAAW,CAAA;CAC1B,2CAuBA;AAED,OAAO,EAAE,MAAM,EAAE,CAAA"}

package/dist/components/ui/switch.js

@@ -2,7 +2,8 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import * as SwitchPrimitive from '@radix-ui/react-switch';
 import { cn } from '../../lib/utils.js';
-function Switch({ className, size = 'default', ...props }) {
-    return (_jsx(SwitchPrimitive.Root, { "data-slot": "switch", "data-size": size, className: cn('focus-visible:border-ring focus-visible:ring-ring group/switch rounded-pill h-control-xs before:rounded-pill before:shadow-xs data-[state=checked]:before:bg-primary data-[state=unchecked]:before:bg-input dark:data-[state=unchecked]:before:bg-input/80 peer relative inline-flex shrink-0 cursor-pointer items-center border border-transparent bg-transparent outline-none transition-all before:pointer-events-none before:absolute before:left-0 before:top-1/2 before:-translate-y-1/2 before:border before:border-transparent focus-visible:ring-1 disabled:cursor-not-allowed disabled:opacity-50 data-[size=default]:w-8 data-[size=sm]:w-6 data-[size=default]:before:h-[1.15rem] data-[size=sm]:before:h-3.5 data-[size=default]:before:w-8 data-[size=sm]:before:w-6', className), ...props, children: _jsx(SwitchPrimitive.Thumb, { "data-slot": "switch-thumb", className: cn('bg-background border-separator-strong shadow-xs dark:data-[state=unchecked]:bg-foreground dark:data-[state=checked]:bg-primary-foreground rounded-pill pointer-events-none relative z-10 block border ring-0 transition-transform data-[state=checked]:translate-x-[calc(100%-2px)] data-[state=unchecked]:translate-x-0 group-data-[size=default]/switch:size-4 group-data-[size=sm]/switch:size-3') }) }));
+function Switch({ className, controlSize, size = 'default', ...props }) {
+    const resolvedControlSize = controlSize ?? (size === 'sm' ? 'small' : 'medium');
+    return (_jsx(SwitchPrimitive.Root, { "data-slot": "switch", "data-size": size, "data-control-size": resolvedControlSize, className: cn('focus-visible:border-ring focus-visible:ring-ring group/switch rounded-pill bg-[var(--m-ui-color-text-primary)]/10 active:bg-[var(--m-ui-color-text-primary)]/20 peer relative inline-flex h-[var(--m-ui-switch-track-height)] w-[var(--m-ui-switch-track-width)] shrink-0 cursor-pointer items-center border border-transparent p-0.5 outline-none transition-[background-color,box-shadow] focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-[0.06] data-[state=checked]:bg-[var(--m-ui-color-accent)]', className), ...props, children: _jsx(SwitchPrimitive.Thumb, { "data-slot": "switch-thumb", className: cn('border-separator-strong shadow-xs rounded-pill pointer-events-none relative z-10 block h-[var(--m-ui-switch-knob-height)] w-[var(--m-ui-switch-knob-width)] border bg-white ring-0 transition-[width,transform] data-[state=checked]:translate-x-[calc(var(--m-ui-switch-track-width)-var(--m-ui-switch-knob-width)-4px)] data-[state=unchecked]:translate-x-0') }) }));
 }
 export { Switch };

package/dist/components/ui/toolbar-controls.d.ts

@@ -2,16 +2,24 @@ import * as React from 'react';
 import type { MenuItems } from '../../lib/host-native-menu.js';
 import { Button } from './button.js';
 import { type IconButtonProps, type IconButtonSize } from './icon-button.js';
+import { type MaterialVariant } from './material.js';
 import { Separator } from './separator.js';
 type ToolbarControlAppearance = 'chrome' | 'quiet';
+type ToolbarControlSize = 'medium' | 'xl';
 export interface ToolbarButtonProps extends React.ComponentProps<typeof Button> {
     /**
      * `chrome` uses the raised translucent toolbar surface. `quiet` is useful
      * inside a ToolbarControlGroup, which owns the shared surface.
      */
     appearance?: ToolbarControlAppearance;
+    /**
+     * Adaptive material thickness for standalone chrome. Defaults to `thick`
+     * for prominent actions, `regular` for standard actions, and `none` inside
+     * a shared control group or when `appearance="quiet"`.
+     */
+    material?: MaterialVariant | 'none';
 }
-declare function ToolbarButton({ appearance, className, size, variant, ...props }: ToolbarButtonProps): import("react/jsx-runtime").JSX.Element;
+declare function ToolbarButton({ appearance, className, material, size, variant, ...props }: ToolbarButtonProps): import("react/jsx-runtime").JSX.Element;
 export interface ToolbarIconButtonProps extends Omit<IconButtonProps, 'size'> {
     appearance?: ToolbarControlAppearance;
     size?: IconButtonSize;
@@ -19,8 +27,9 @@ export interface ToolbarIconButtonProps extends Omit<IconButtonProps, 'size'> {
 declare function ToolbarIconButton({ appearance, className, size, variant, ...props }: ToolbarIconButtonProps): import("react/jsx-runtime").JSX.Element;
 export interface ToolbarControlGroupProps extends React.ComponentProps<'div'> {
     appearance?: ToolbarControlAppearance;
+    size?: ToolbarControlSize;
 }
-declare function ToolbarControlGroup({ appearance, className, ...props }: ToolbarControlGroupProps): import("react/jsx-runtime").JSX.Element;
+declare function ToolbarControlGroup({ appearance, className, size, ...props }: ToolbarControlGroupProps): import("react/jsx-runtime").JSX.Element;
 declare function ToolbarControlSeparator({ className, ...props }: React.ComponentProps<typeof Separator>): import("react/jsx-runtime").JSX.Element;
 export interface ToolbarBackButtonProps extends Omit<ToolbarIconButtonProps, 'children' | 'label'> {
     label?: string;
@@ -36,9 +45,10 @@ declare function ToolbarSidebarToggle({ expanded, hideLabel, onExpandedChange, s
 export interface ToolbarOverflowMenuProps extends Omit<ToolbarIconButtonProps, 'children' | 'label' | 'onClick'> {
     items: MenuItems[];
     label?: string;
+    nativeMenu?: boolean;
     onSelectItem?: (id: string) => void;
 }
-declare function ToolbarOverflowMenu({ items, label, onSelectItem, tooltip, ...props }: ToolbarOverflowMenuProps): import("react/jsx-runtime").JSX.Element;
+declare function ToolbarOverflowMenu({ items, label, nativeMenu, onSelectItem, tooltip, ...props }: ToolbarOverflowMenuProps): import("react/jsx-runtime").JSX.Element;
 export interface ToolbarTitleFieldProps extends Omit<React.ComponentProps<'input'>, 'size'> {
     label?: string;
 }

package/dist/components/ui/toolbar-controls.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"toolbar-controls.d.ts","sourceRoot":"","sources":["../../../src/components/ui/toolbar-controls.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"toolbar-controls.d.ts","sourceRoot":"","sources":["../../../src/components/ui/toolbar-controls.tsx"],"names":[],"mappings":"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"}

package/dist/components/ui/toolbar-controls.js

@@ -6,23 +6,48 @@ import { cn } from '../../lib/utils.js';
 import { Button } from './button.js';
 import { DropdownMenu, DropdownMenuTrigger } from './dropdown-menu.js';
 import { IconButton, } from './icon-button.js';
+import { Material } from './material.js';
 import { Separator } from './separator.js';
 const ToolbarControlGroupContext = React.createContext(null);
-function ToolbarButton({ appearance = 'chrome', className, size, variant, ...props }) {
+function ToolbarButton({ appearance = 'chrome', className, material, size, variant, ...props }) {
     const group = React.useContext(ToolbarControlGroupContext);
-    return (_jsx(Button, { "data-slot": "toolbar-button", size: size ?? (group ? 'sm' : 'lg'), variant: variant ?? (group || appearance === 'quiet' ? 'ghost' : 'toolbar'), className: cn(group && 'shadow-none', className), ...props }));
+    const groupedSize = group?.size === 'xl' ? 'lg' : 'sm';
+    const emphasis = variant === 'prominent' ? 'primary' : 'standard';
+    const usesToolbarChrome = variant === undefined || variant === 'prominent' || variant === 'toolbar';
+    const resolvedMaterial = group || appearance === 'quiet'
+        ? 'none'
+        : (material ??
+            (usesToolbarChrome
+                ? variant === 'prominent'
+                    ? 'thick'
+                    : 'regular'
+                : 'none'));
+    const resolvedVariant = resolvedMaterial !== 'none'
+        ? 'ghost'
+        : usesToolbarChrome &&
+            (group || appearance === 'quiet' || material === 'none')
+            ? 'ghost'
+            : variant === 'prominent'
+                ? 'toolbar'
+                : (variant ?? 'toolbar');
+    const button = (_jsx(Button, { "data-slot": "toolbar-button", "data-emphasis": emphasis, size: size ?? (group ? groupedSize : 'xl'), variant: resolvedVariant, className: cn('rounded-pill gap-[var(--m-ui-toolbar-action-gap,var(--density-control-gap))] px-[var(--m-ui-toolbar-action-padding-inline,var(--density-control-padding-inline))] [&_svg:not([class*="size-"])]:size-[var(--m-ui-toolbar-action-icon-size,13px)]', emphasis === 'primary' && 'font-semibold', group && 'shadow-none', className), ...props }));
+    if (resolvedMaterial === 'none')
+        return button;
+    return (_jsx(Material, { asChild: true, variant: resolvedMaterial, shape: "capsule", elevation: "panel", interactive: true, children: button }));
 }
 function ToolbarIconButton({ appearance = 'chrome', className, size, variant, ...props }) {
     const group = React.useContext(ToolbarControlGroupContext);
-    return (_jsx(IconButton, { "data-slot": "toolbar-icon-button", size: size ?? (group ? 'sm' : 'lg'), variant: variant ?? (group || appearance === 'quiet' ? 'ghost' : 'toolbar'), className: cn(group && 'shadow-none', className), ...props }));
+    const groupedSize = group?.size === 'xl' ? 'lg' : 'sm';
+    return (_jsx(IconButton, { "data-slot": "toolbar-icon-button", size: size ?? (group ? groupedSize : 'xl'), variant: variant ?? (group || appearance === 'quiet' ? 'ghost' : 'toolbar'), shape: "circle", className: cn(group && 'shadow-none', className), ...props }));
 }
-function ToolbarControlGroup({ appearance = 'chrome', className, ...props }) {
-    return (_jsx(ToolbarControlGroupContext.Provider, { value: { grouped: true }, children: _jsx("div", { role: "group", "data-slot": "toolbar-control-group", "data-appearance": appearance, className: cn('h-control-lg rounded-control flex shrink-0 items-center', appearance === 'chrome'
-                ? 'gap-0.5 border border-[var(--toolbar-control-border)] bg-[var(--toolbar-control-background)] p-1 shadow-[var(--toolbar-control-shadow)]'
+function ToolbarControlGroup({ appearance = 'chrome', className, size = 'xl', ...props }) {
+    return (_jsx(ToolbarControlGroupContext.Provider, { value: { grouped: true, size }, children: _jsx("div", { role: "group", "data-slot": "toolbar-control-group", "data-appearance": appearance, "data-size": size, className: cn('rounded-pill flex shrink-0 items-center', size === 'medium' ? 'h-control-md' : 'h-control-xl', appearance === 'chrome'
+                ? cn('border border-[var(--toolbar-control-border)] bg-[var(--toolbar-control-background)] shadow-[var(--toolbar-control-shadow)]', size === 'medium' ? 'gap-1 p-0.5' : 'gap-1 p-1')
                 : 'gap-1.5', className), ...props }) }));
 }
 function ToolbarControlSeparator({ className, ...props }) {
-    return (_jsx(Separator, { "data-slot": "toolbar-control-separator", orientation: "vertical", className: cn('mx-0.5 h-4 self-center bg-[var(--toolbar-control-border)]', className), ...props }));
+    const group = React.useContext(ToolbarControlGroupContext);
+    return (_jsx(Separator, { "data-slot": "toolbar-control-separator", orientation: "vertical", className: cn('mx-0.5 self-center bg-[var(--toolbar-control-border)]', group?.size === 'xl' ? 'h-5' : 'h-4', className), ...props }));
 }
 function ToolbarBackButton({ label = 'Back', tooltip = true, ...props }) {
     return (_jsx(ToolbarIconButton, { label: label, tooltip: tooltip, ...props, children: _jsx(ChevronLeftIcon, {}) }));
@@ -31,10 +56,10 @@ function ToolbarSidebarToggle({ expanded, hideLabel = 'Hide sidebar', onExpanded
     const label = expanded ? hideLabel : showLabel;
     return (_jsx(ToolbarIconButton, { "aria-pressed": expanded, "data-state": expanded ? 'on' : 'off', label: label, tooltip: tooltip, onClick: () => onExpandedChange(!expanded), ...props, children: _jsx(PanelLeftIcon, {}) }));
 }
-function ToolbarOverflowMenu({ items, label = 'More actions', onSelectItem, tooltip = true, ...props }) {
-    return (_jsx(DropdownMenu, { items: items, onSelectItem: onSelectItem, children: _jsx(DropdownMenuTrigger, { asChild: true, children: _jsx(ToolbarIconButton, { label: label, tooltip: tooltip, ...props, children: _jsx(EllipsisIcon, {}) }) }) }));
+function ToolbarOverflowMenu({ items, label = 'More actions', nativeMenu = false, onSelectItem, tooltip = true, ...props }) {
+    return (_jsx(DropdownMenu, { items: items, nativeMenu: nativeMenu, onSelectItem: onSelectItem, children: _jsx(DropdownMenuTrigger, { asChild: true, children: _jsx(ToolbarIconButton, { label: label, tooltip: tooltip, ...props, children: _jsx(EllipsisIcon, {}) }) }) }));
 }
 function ToolbarTitleField({ 'aria-label': ariaLabel, className, label = 'Document title', type = 'text', ...props }) {
-    return (_jsx("input", { "data-slot": "toolbar-title-field", "aria-label": ariaLabel ?? label, type: type, className: cn('text-foreground hover:bg-control-hover focus:bg-control-hover focus-visible:ring-ring h-control-sm rounded-control min-w-0 max-w-[min(24rem,32vw)] bg-transparent px-2 text-[15px] font-medium outline-none transition-colors focus-visible:ring-1', className), ...props }));
+    return (_jsx("input", { "data-slot": "toolbar-title-field", "aria-label": ariaLabel ?? label, type: type, className: cn('text-foreground hover:bg-control-hover focus:bg-control-hover focus-visible:ring-ring h-control-md rounded-control min-w-0 max-w-[min(24rem,32vw)] bg-transparent px-2 text-[13px] font-bold outline-none transition-colors focus-visible:ring-1', className), ...props }));
 }
 export { ToolbarBackButton, ToolbarButton, ToolbarControlGroup, ToolbarControlSeparator, ToolbarIconButton, ToolbarOverflowMenu, ToolbarSidebarToggle, ToolbarTitleField, };

package/dist/components/ui/toolbar.d.ts

@@ -4,18 +4,19 @@ import { Separator } from './separator.js';
 import { Text } from './text.js';
 import { type VariantProps } from 'class-variance-authority';
 export type ToolbarInset = 'auto' | 'none' | 'windowControls' | 'windowControlsAndButton';
+type ToolbarMaterialVariant = Extract<MaterialVariant, 'regular' | 'clear'>;
 declare const toolbarVariants: (props?: ({
-    variant?: "panel" | "default" | "plain" | null | undefined;
-    material?: "regular" | "clear" | "none" | null | undefined;
+    variant?: "default" | "panel" | "plain" | null | undefined;
+    material?: "regular" | "none" | "clear" | null | undefined;
     density?: "compact" | "default" | "comfortable" | null | undefined;
-    position?: "static" | "top" | "bottom" | null | undefined;
+    position?: "top" | "bottom" | "static" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 export interface ToolbarProps extends React.ComponentProps<'header'>, VariantProps<typeof toolbarVariants> {
     /**
      * Defaults to regular material for the default toolbar and no material for
      * plain or panel variants.
      */
-    material?: MaterialVariant | 'none';
+    material?: ToolbarMaterialVariant | 'none';
     /**
      * Clearance for native window controls. `auto` applies the host-advertised
      * inset only when this is a top toolbar in an app-owned window.

package/dist/components/ui/toolbar.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"toolbar.d.ts","sourceRoot":"","sources":["../../../src/components/ui/toolbar.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,YAAY,CAAA;AACjD,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAA;AACvC,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAA;AAC7B,OAAO,EAAE,KAAK,YAAY,EAAO,MAAM,0BAA0B,CAAA;AAMjE,MAAM,MAAM,YAAY,GACpB,MAAM,GACN,MAAM,GACN,gBAAgB,GAChB,yBAAyB,CAAA;AAE7B,QAAA,MAAM,eAAe;;;;;8EAsCpB,CAAA;AAED,MAAM,WAAW,YACf,SAAQ,KAAK,CAAC,cAAc,CAAC,QAAQ,CAAC,EACpC,YAAY,CAAC,OAAO,eAAe,CAAC;IACtC;;;OAGG;IACH,QAAQ,CAAC,EAAE,eAAe,GAAG,MAAM,CAAA;IACnC;;;OAGG;IACH,KAAK,CAAC,EAAE,YAAY,CAAA;IACpB;;;OAGG;IACH,SAAS,CAAC,EAAE,OAAO,CAAA;CACpB;AAED,iBAAS,OAAO,CAAC,EACf,OAAO,EACP,OAAO,EACP,QAAQ,EACR,QAAQ,EACR,KAAc,EACd,SAAS,EACT,SAAS,EACT,aAAa,EACb,WAAW,EACX,GAAG,KAAK,EACT,EAAE,YAAY,2CAqCd;AAED,iBAAS,YAAY,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,2CAQzE;AAED,iBAAS,cAAc,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,2CAQ3E;AAED,iBAAS,YAAY,CAAC,EACpB,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,IAAI,CAAC,2CAWnC;AAED,iBAAS,kBAAkB,CAAC,EAC1B,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,IAAI,CAAC,2CAYnC;AAED,iBAAS,cAAc,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,2CAQ3E;AAED,iBAAS,gBAAgB,CAAC,EACxB,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,SAAS,CAAC,2CASxC;AAED,OAAO,EACL,OAAO,EACP,cAAc,EACd,cAAc,EACd,kBAAkB,EAClB,YAAY,EACZ,gBAAgB,EAChB,YAAY,EACZ,eAAe,GAChB,CAAA"}
+{"version":3,"file":"toolbar.d.ts","sourceRoot":"","sources":["../../../src/components/ui/toolbar.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,YAAY,CAAA;AACjD,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAA;AACvC,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAA;AAK7B,OAAO,EAAE,KAAK,YAAY,EAAO,MAAM,0BAA0B,CAAA;AAEjE,MAAM,MAAM,YAAY,GACpB,MAAM,GACN,MAAM,GACN,gBAAgB,GAChB,yBAAyB,CAAA;AAC7B,KAAK,sBAAsB,GAAG,OAAO,CAAC,eAAe,EAAE,SAAS,GAAG,OAAO,CAAC,CAAA;AAE3E,QAAA,MAAM,eAAe;;;;;8EAsCpB,CAAA;AAED,MAAM,WAAW,YACf,SAAQ,KAAK,CAAC,cAAc,CAAC,QAAQ,CAAC,EACpC,YAAY,CAAC,OAAO,eAAe,CAAC;IACtC;;;OAGG;IACH,QAAQ,CAAC,EAAE,sBAAsB,GAAG,MAAM,CAAA;IAC1C;;;OAGG;IACH,KAAK,CAAC,EAAE,YAAY,CAAA;IACpB;;;OAGG;IACH,SAAS,CAAC,EAAE,OAAO,CAAA;CACpB;AAED,iBAAS,OAAO,CAAC,EACf,OAAO,EACP,OAAO,EACP,QAAQ,EACR,QAAQ,EACR,KAAc,EACd,SAAS,EACT,SAAS,EACT,aAAa,EACb,WAAW,EACX,GAAG,KAAK,EACT,EAAE,YAAY,2CAqCd;AAED,iBAAS,YAAY,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,2CAQzE;AAED,iBAAS,cAAc,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,2CAQ3E;AAED,iBAAS,YAAY,CAAC,EACpB,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,IAAI,CAAC,2CAWnC;AAED,iBAAS,kBAAkB,CAAC,EAC1B,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,IAAI,CAAC,2CAYnC;AAED,iBAAS,cAAc,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,2CAQ3E;AAED,iBAAS,gBAAgB,CAAC,EACxB,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,SAAS,CAAC,2CASxC;AAED,OAAO,EACL,OAAO,EACP,cAAc,EACd,cAAc,EACd,kBAAkB,EAClB,YAAY,EACZ,gBAAgB,EAChB,YAAY,EACZ,eAAe,GAChB,CAAA"}