@passui/react 0.1.39 → 0.1.41

package/dist/types/src/components/code-block/code-block.d.ts

@@ -1,10 +1,13 @@
 import { type ComponentProps, type ReactNode } from "react";
-export interface CodeBlockProps extends Omit<ComponentProps<"div">, "children"> {
+export type CodeBlockSize = "sm" | "md" | "lg";
+export interface CodeBlockProps extends Omit<ComponentProps<"div">, "children" | "size"> {
     code: string;
     /** Supply a highlighter's rendered pre/code element; source remains the fallback. */
     children?: ReactNode;
     /** Show a nonselectable line gutter. @default true */
     lineNumbers?: boolean;
+    /** Code font size, padding and line gutter scale. @default "md" */
+    size?: CodeBlockSize;
 }
 /** Code presentation without shipping a highlighter or formatter to consumers. */
-export declare function CodeBlock({ code, children, lineNumbers, className, ...props }: CodeBlockProps): import("react").JSX.Element;
+export declare function CodeBlock({ code, children, lineNumbers, size, className, ...props }: CodeBlockProps): import("react").JSX.Element;

package/dist/types/src/components/content-view/content-view.d.ts

@@ -1,8 +1,11 @@
-import type { ComponentPropsWithoutRef, PropsWithChildren, ReactNode } from "react";
+import { type ComponentPropsWithoutRef, type PropsWithChildren, type ReactNode } from "react";
 export type ContentViewVariant = keyof typeof variants;
 export type ContentViewHeadingLevel = "h1" | "h2" | "h3";
+export type ContentViewSize = "sm" | "md" | "lg";
 type ContentViewProps = ComponentPropsWithoutRef<"section"> & {
     variant?: ContentViewVariant;
+    /** Container radius, section gap and text scale. @default "md" */
+    size?: ContentViewSize;
 };
 type RowProps = ComponentPropsWithoutRef<"div">;
 type SectionProps = ComponentPropsWithoutRef<"section">;
@@ -24,7 +27,7 @@ type SubProps = ComponentPropsWithoutRef<"sub">;
 declare const variants: {
     readonly elevated: string;
 };
-export declare function ContentView({ variant, className, children, ...props }: ContentViewProps): import("react").JSX.Element;
+export declare function ContentView({ variant, size, className, children, ...props }: ContentViewProps): import("react").JSX.Element;
 export declare namespace ContentView {
     export { Row };
     export { Section };

package/dist/types/src/components/context-menu/context-menu-store.d.ts

@@ -3,6 +3,7 @@ import type { MenuRect } from "./menu-reveal";
 export type ContextMenuAlignX = "start" | "end";
 export type ContextMenuAlignY = "top" | "bottom";
 export type ContextMenuEdge = "leading" | "trailing";
+export type ContextMenuSize = "sm" | "md" | "lg";
 /** One row of a context menu, or a divider between groups of rows. */
 export type ContextMenuItem = {
     label: string;
@@ -23,6 +24,8 @@ export interface OpenMenu {
     items: ContextMenuItem[];
     /** Opened by long-press: bigger rows for fingers. */
     touch: boolean;
+    /** Surface, item and heading density. @default "md" */
+    size: ContextMenuSize;
     /** Which edge of the menu sits at `x`: its left (`start`) or its right (`end`). */
     alignX: ContextMenuAlignX;
     /** Which edge of the menu sits at `y`: its top (`top`) or its bottom (`bottom`). */
@@ -33,7 +36,7 @@ export interface OpenMenu {
     restoreFocus?: boolean;
 }
 /** Opens a menu at a point, such as where a pointer was pressed. */
-export declare function openContextMenu(x: number, y: number, items: ContextMenuItem[], touch?: boolean, anchor?: Element | null): void;
+export declare function openContextMenu(x: number, y: number, items: ContextMenuItem[], touch?: boolean, anchor?: Element | null, size?: ContextMenuSize): void;
 /**
  * Opens a second menu where the last one stood, the way an iOS menu swaps
  * in a submenu: a long list (a note's fonts, its kinds) stays one row in the
@@ -46,11 +49,13 @@ export declare function openFollowUpMenu(items: ContextMenuItem[]): void;
  * trailing follow the text direction, so right-to-left languages mirror.
  * The menu's real size decides where it goes; nothing is guessed.
  */
-export declare function openMenu(anchor: Element, items: ContextMenuItem[], { edge, above, toolbar, }?: {
+export declare function openMenu(anchor: Element, items: ContextMenuItem[], { edge, above, toolbar, size, }?: {
     edge?: ContextMenuEdge;
     above?: boolean;
     /** Replace this action group with a horizontally expanding menu surface. */
     toolbar?: HTMLElement;
+    /** Surface, item and heading density. @default "md" */
+    size?: ContextMenuSize;
 }): void;
 export declare function closeContextMenu(restoreFocus?: boolean): void;
 export declare function subscribeContextMenu(listener: () => void): () => void;

package/dist/types/src/components/conversation/conversation.d.ts

@@ -9,15 +9,18 @@ export type ConversationMessage = {
     avatar?: ReactNode;
     createdAt: string;
 };
+export type ConversationSize = "sm" | "md" | "lg";
 /**
  * A thread of plain-text messages like Messages on iPhone: a day line when
  * the date changes, back-to-back messages from one side grouped under one
  * name, theirs on the left with an avatar, yours on the right.
  */
-declare function Messages({ messages, locale, }: {
+declare function Messages({ messages, locale, size, }: {
     messages: ConversationMessage[];
     /** For day names and times; the reader's own by default. */
     locale?: string;
+    /** Bubble, avatar, author and time scale. @default "md" */
+    size?: ConversationSize;
 }): import("react").JSX.Element;
 type ComposerProps = {
     onSend: (body: string) => Promise<unknown>;
@@ -33,9 +36,11 @@ type ComposerProps = {
      * (count) => `${count} left`. Without it, just the number shows.
      */
     remaining?: (count: number) => string;
+    /** Surface, textarea, send button and counter scale. @default "md" */
+    size?: ConversationSize;
 };
 /** A reply field with a round send button; Ctrl/Cmd+Enter sends, and it clears only once the send worked. */
-declare function Composer({ onSend, pending, maxLength, placeholder, actions, sendLabel, remaining, }: ComposerProps): import("react").JSX.Element;
+declare function Composer({ onSend, pending, maxLength, placeholder, actions, sendLabel, remaining, size, }: ComposerProps): import("react").JSX.Element;
 export declare const Conversation: {
     Messages: typeof Messages;
     Composer: typeof Composer;

package/dist/types/src/components/one-time-code/one-time-code.d.ts

@@ -1,6 +1,7 @@
 import { type InputHTMLAttributes, type Ref } from "react";
 export type OneTimeCodeStatus = "idle" | "verifying" | "success" | "error";
 export type OneTimeCodeFormat = "numeric" | "alphanumeric";
+export type OneTimeCodeSize = "sm" | "md" | "lg";
 export interface OneTimeCodeProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "value" | "defaultValue" | "onChange" | "type" | "maxLength" | "size"> {
     label: string;
     value: string;
@@ -16,8 +17,10 @@ export interface OneTimeCodeProps extends Omit<InputHTMLAttributes<HTMLInputElem
     status?: OneTimeCodeStatus;
     /** Localized verification feedback announced without reading decorative cells. */
     statusLabel?: string;
+    /** Cell height, digit text scale and check icon size. @default "md" */
+    size?: OneTimeCodeSize;
 }
 /** Normalize common numeric keyboards and optional ASCII letters in one native field. */
 export declare function normalizeCode(value: string, length: number, format?: OneTimeCodeFormat): string;
 /** Six cells, one field: paste, autofill, selection and Backspace stay native. */
-export declare function OneTimeCode({ label, value, onChange, onComplete, length, format, ref, status, statusLabel, className, disabled, id: suppliedId, ...props }: OneTimeCodeProps): import("react").JSX.Element;
+export declare function OneTimeCode({ label, value, onChange, onComplete, length, format, ref, status, statusLabel, size, className, disabled, id: suppliedId, ...props }: OneTimeCodeProps): import("react").JSX.Element;

package/dist/types/src/components/popover/popover.d.ts

@@ -1,6 +1,7 @@
 import { type HTMLMotionProps } from "motion/react";
 import { type ReactNode, type RefObject } from "react";
 export type PopoverOrigin = "top-left" | "top-right";
+export type PopoverSize = "sm" | "md";
 export interface PopoverProps extends Omit<HTMLMotionProps<"div">, "children"> {
     open: boolean;
     children?: ReactNode;
@@ -8,6 +9,8 @@ export interface PopoverProps extends Omit<HTMLMotionProps<"div">, "children"> {
     origin?: PopoverOrigin;
     /** Trigger whose shape the popover uses during its opening and closing motion. */
     anchorRef?: RefObject<HTMLElement | null>;
+    /** Surface corner radius. @default "md" */
+    size?: PopoverSize;
 }
 /**
  * A glass surface that springs open from its anchor. Position it with

package/dist/types/src/components/search-list/search-list.d.ts

@@ -1,7 +1,10 @@
 import { type ComponentProps } from "react";
-export declare function SearchList({ loop, open, onKeyDown, className, ...props }: ComponentProps<"div"> & {
+export type SearchListSize = "sm" | "md" | "lg";
+export declare function SearchList({ loop, open, size, onKeyDown, className, ...props }: ComponentProps<"div"> & {
     loop?: boolean;
     open?: boolean;
+    /** Field, item and heading density. @default "md" */
+    size?: SearchListSize;
 }): import("react").JSX.Element;
 export declare function SearchListField({ value, onValueChange, className, ...props }: Omit<ComponentProps<"input">, "value" | "onChange"> & {
     value?: string;

package/dist/types/src/components/sidebar/sidebar.d.ts

@@ -12,8 +12,13 @@ export interface SidebarItemContentProps {
     active?: boolean;
     children: ReactNode;
 }
-export declare function SidebarSection({ title, children }: SidebarSectionProps): import("react").JSX.Element;
+export declare function SidebarSection({ title, children, size, }: SidebarSectionProps & {
+    size?: SidebarSize;
+}): import("react").JSX.Element;
 /** Classes for a sidebar row; apply to the app's router link. */
 export type SidebarDensity = "regular" | "compact";
-export declare function sidebarItemClass(active?: boolean, density?: SidebarDensity): string;
-export declare function SidebarItemContent({ icon, count, active, children }: SidebarItemContentProps): import("react").JSX.Element;
+export type SidebarSize = "sm" | "md" | "lg";
+export declare function sidebarItemClass(active?: boolean, density?: SidebarDensity, size?: SidebarSize): string;
+export declare function SidebarItemContent({ icon, count, active, size, children, }: SidebarItemContentProps & {
+    size?: SidebarSize;
+}): import("react").JSX.Element;

package/dist/types/src/components/slosh-slider/slosh-slider.d.ts

@@ -1,3 +1,4 @@
+export type SloshSliderSize = "sm" | "md" | "lg";
 export interface SloshSliderProps {
     label: string;
     value?: number;
@@ -11,8 +12,10 @@ export interface SloshSliderProps {
     tilt?: number;
     /** Track corner, from square to a pill, 0–20. @default 20 */
     corner?: number;
+    /** Track height and knob scale. @default "md" */
+    size?: SloshSliderSize;
     disabled?: boolean;
     className?: string;
     formatValue?: (value: number) => string;
 }
-export declare function SloshSlider({ label, value, defaultValue, onChange, viscosity, momentum, tilt, corner, disabled, className, formatValue, }: SloshSliderProps): import("react").JSX.Element;
+export declare function SloshSlider({ label, value, defaultValue, onChange, viscosity, momentum, tilt, corner, size, disabled, className, formatValue, }: SloshSliderProps): import("react").JSX.Element;

package/dist/types/src/components/toast/toast-store.d.ts

@@ -3,6 +3,7 @@
  * a failure. Call `toast` from anywhere; render one `<Toaster />`.
  */
 export type ToastTone = "neutral" | "success" | "error" | "loading";
+export type ToastSize = "sm" | "md" | "lg";
 export interface ToastAction {
     label: string;
     onClick: () => void;
@@ -16,11 +17,15 @@ export interface Toast {
     /** Milliseconds before it leaves on its own; `null` stays until dismissed. */
     duration: number | null;
     createdAt: number;
+    /** Pill size, content padding and title/description text scale. @default "md" */
+    size: ToastSize;
 }
 export interface ToastOptions {
     description?: string;
     action?: ToastAction;
     duration?: number | null;
+    /** Pill size, content padding and title/description text scale. @default "md" */
+    size?: ToastSize;
 }
 /** Changes a toast in place; it morphs to its new state. */
 declare function update(id: number, tone: ToastTone, title: string, options?: ToastOptions): number;

package/dist/types/src/components/tooltip/tooltip-host.d.ts

@@ -1,3 +1,4 @@
+export type TooltipSize = "sm" | "md" | "lg";
 /**
  * Tooltips for any element with `data-tooltip`, on devices that can hover.
  * One listener for the whole app: a short delay before the first, then

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@passui/react",
-    "version": "0.1.39",
+    "version": "0.1.41",
     "description": "Passui: native React controls, design tokens, presentation and appearance.",
     "license": "MIT",
     "repository": {

package/src/components/code-block/code-block.tsx

@@ -1,12 +1,16 @@
 import { Fragment, type ComponentProps, type ReactNode } from "react"
 import { cn } from "../../lib/class-names"
 
-export interface CodeBlockProps extends Omit<ComponentProps<"div">, "children"> {
+export type CodeBlockSize = "sm" | "md" | "lg"
+
+export interface CodeBlockProps extends Omit<ComponentProps<"div">, "children" | "size"> {
     code: string
     /** Supply a highlighter's rendered pre/code element; source remains the fallback. */
     children?: ReactNode
     /** Show a nonselectable line gutter. @default true */
     lineNumbers?: boolean
+    /** Code font size, padding and line gutter scale. @default "md" */
+    size?: CodeBlockSize
 }
 
 /** Code presentation without shipping a highlighter or formatter to consumers. */
@@ -14,6 +18,7 @@ export function CodeBlock({
     code,
     children,
     lineNumbers = true,
+    size = "md",
     className,
     ...props
 }: CodeBlockProps) {
@@ -23,6 +28,7 @@ export function CodeBlock({
             {...props}
             className={cn("passui-code-block", className)}
             data-line-numbers={lineNumbers || undefined}
+            data-size={size}
         >
             {children ?? (
                 <pre>

package/src/components/content-view/content-view.tsx

@@ -1,11 +1,49 @@
-import type { ComponentPropsWithoutRef, PropsWithChildren, ReactNode } from "react"
+import {
+    createContext,
+    useContext,
+    type ComponentPropsWithoutRef,
+    type PropsWithChildren,
+    type ReactNode,
+} from "react"
 import { cn } from "../../lib/class-names"
 
 export type ContentViewVariant = keyof typeof variants
 export type ContentViewHeadingLevel = "h1" | "h2" | "h3"
+export type ContentViewSize = "sm" | "md" | "lg"
+
+const containerRadius: Record<ContentViewSize, string> = {
+    sm: "rounded-xl",
+    md: "rounded-2xl",
+    lg: "rounded-3xl",
+}
+const sectionGaps: Record<ContentViewSize, string> = {
+    sm: "gap-2",
+    md: "gap-3",
+    lg: "gap-4",
+}
+const spanText: Record<ContentViewSize, string> = {
+    sm: "text-footnote tracking-tighter font-light",
+    md: "text-callout tracking-tighter font-light",
+    lg: "text-subheadline tracking-tighter font-light",
+}
+const subText: Record<ContentViewSize, string> = {
+    sm: "text-footnote text-label",
+    md: "text-subheadline text-label",
+    lg: "text-body text-label",
+}
+const headerActionGaps: Record<ContentViewSize, string> = {
+    sm: "gap-2",
+    md: "gap-3",
+    lg: "gap-4",
+}
+
+const ContentViewSizeContext = createContext<ContentViewSize>("md")
+const useContentViewSize = () => useContext(ContentViewSizeContext)
 
 type ContentViewProps = ComponentPropsWithoutRef<"section"> & {
     variant?: ContentViewVariant
+    /** Container radius, section gap and text scale. @default "md" */
+    size?: ContentViewSize
 }
 
 type RowProps = ComponentPropsWithoutRef<"div">
@@ -38,14 +76,24 @@ const variants = {
 
 export function ContentView({
     variant = "elevated",
+    size = "md",
     className,
     children,
     ...props
 }: ContentViewProps) {
     return (
-        <section className={cn(variants[variant], className)} {...props}>
-            {children}
-        </section>
+        <ContentViewSizeContext value={size}>
+            <section
+                className={cn(
+                    variants[variant],
+                    variant === "elevated" && containerRadius[size],
+                    className
+                )}
+                {...props}
+            >
+                {children}
+            </section>
+        </ContentViewSizeContext>
     )
 }
 
@@ -58,8 +106,9 @@ function Row({ className, children, ...props }: RowProps) {
 }
 
 function Section({ className, children, ...props }: SectionProps) {
+    const size = useContentViewSize()
     return (
-        <section className={cn("flex flex-col gap-3", className)} {...props}>
+        <section className={cn("flex flex-col", sectionGaps[size], className)} {...props}>
             {children}
         </section>
     )
@@ -83,10 +132,11 @@ function Header({
         </Tag>
     )
 
+    const size = useContentViewSize()
     return (
         <div className={className}>
             {action ? (
-                <div className={cn("flex items-center gap-3", actionClassName)}>
+                <div className={cn("flex items-center", headerActionGaps[size], actionClassName)}>
                     {title}
                     {action}
                 </div>
@@ -128,16 +178,18 @@ function P({ className, children, ...props }: PProps) {
 }
 
 function Span({ className, children, ...props }: SpanProps) {
+    const size = useContentViewSize()
     return (
-        <span className={cn("text-callout tracking-tighter font-light", className)} {...props}>
+        <span className={cn(spanText[size], className)} {...props}>
             {children}
         </span>
     )
 }
 
 function Sub({ className, children, ...props }: SubProps) {
+    const size = useContentViewSize()
     return (
-        <sub className={cn("text-subheadline text-label", className)} {...props}>
+        <sub className={cn(subText[size], className)} {...props}>
             {children}
         </sub>
     )

package/src/components/context-menu/context-menu-host.tsx

@@ -13,9 +13,45 @@ import { menuSurfaceExit, menuSurfaceReveal } from "./menu-reveal"
 import {
     closeContextMenu,
     getContextMenu,
-    type OpenMenu,
+    type ContextMenuItem,
+    type ContextMenuSize,
+    openContextMenu,
+    openFollowUpMenu,
+    openMenu,
     subscribeContextMenu,
 } from "./context-menu-store"
+import type { OpenMenu } from "./context-menu-store"
+
+const surfaceSizes: Record<ContextMenuSize, string> = {
+    sm: "min-w-44 max-w-[min(240px,calc(100vw-24px))] rounded-2xl p-1",
+    md: "min-w-50 max-w-[min(280px,calc(100vw-24px))] rounded-3xl p-1.5",
+    lg: "min-w-56 max-w-[min(320px,calc(100vw-24px))] rounded-3xl p-2",
+}
+const itemSizes: Record<ContextMenuSize, string> = {
+    sm: "flex items-center gap-2 rounded-md px-2 py-1 text-start text-caption transition-colors disabled:opacity-40",
+    md: "flex items-center gap-2.5 rounded-lg px-2.5 text-start text-subheadline transition-colors disabled:opacity-40",
+    lg: "flex items-center gap-3 rounded-lg px-3 py-2 text-start text-body transition-colors disabled:opacity-40",
+}
+const headingSizes: Record<ContextMenuSize, string> = {
+    sm: "px-2 pt-1 pb-0.5 text-caption2 font-semibold text-label-tertiary",
+    md: "px-2.5 pt-1.5 pb-0.5 text-caption2 font-semibold text-label-tertiary",
+    lg: "px-3 pt-2 pb-1 text-caption font-semibold text-label-tertiary",
+}
+const dividerSizes: Record<ContextMenuSize, string> = {
+    sm: "mx-1.5 my-0.5 h-px bg-separator/80",
+    md: "mx-2 my-1 h-px bg-separator/80",
+    lg: "mx-2.5 my-1.5 h-px bg-separator/80",
+}
+const iconSlotSizes: Record<ContextMenuSize, string> = {
+    sm: "flex w-3.5 shrink-0 justify-center text-label-secondary",
+    md: "flex w-4 shrink-0 justify-center text-label-secondary",
+    lg: "flex w-5 shrink-0 justify-center text-label-secondary",
+}
+const checkIconSizes: Record<ContextMenuSize, number> = {
+    sm: 13,
+    md: 15,
+    lg: 17,
+}
 
 /** Renders the open context menu. Mount once, near the app root. */
 export function ContextMenuHost() {
@@ -251,7 +287,8 @@ function Menu({ menu }: { menu: OpenMenu }) {
             }}
             {...{ [FLOATING_LAYER]: "" }}
             className={cn(
-                "fixed z-75 isolate flex min-w-50 max-w-[min(280px,calc(100vw-24px))] flex-col rounded-3xl p-1.5 outline-none",
+                "fixed z-75 isolate flex flex-col outline-none",
+                surfaceSizes[menu.size],
                 menu.touch && "min-w-60",
                 !present && "pointer-events-none"
             )}
@@ -327,19 +364,11 @@ function Menu({ menu }: { menu: OpenMenu }) {
             >
                 {menu.items.map((item, index) => {
                     if (item === "divider") {
-                        return (
-                            <div
-                                key={`divider-${index}`}
-                                className="mx-2 my-1 h-px bg-separator/80"
-                            />
-                        )
+                        return <div key={`divider-${index}`} className={dividerSizes[menu.size]} />
                     }
                     if ("heading" in item) {
                         return (
-                            <span
-                                key={`heading-${index}`}
-                                className="px-2.5 pt-1.5 pb-0.5 text-caption2 font-semibold text-label-tertiary"
-                            >
+                            <span key={`heading-${index}`} className={headingSizes[menu.size]}>
                                 {item.heading}
                             </span>
                         )
@@ -360,7 +389,7 @@ function Menu({ menu }: { menu: OpenMenu }) {
                                 item.onSelect()
                             }}
                             className={cn(
-                                "flex items-center gap-2.5 rounded-lg px-2.5 text-start text-subheadline transition-colors disabled:opacity-40",
+                                itemSizes[menu.size],
                                 menu.touch ? "py-2.5" : "py-1.5",
                                 item.destructive ? "text-danger" : "text-label",
                                 focused === current &&
@@ -368,10 +397,10 @@ function Menu({ menu }: { menu: OpenMenu }) {
                                     (item.destructive ? "bg-danger/10" : "bg-fill")
                             )}
                         >
-                            <span className="flex w-4 shrink-0 justify-center text-label-secondary">
+                            <span className={iconSlotSizes[menu.size]}>
                                 {item.checked ? (
                                     <CheckIcon
-                                        size={15}
+                                        size={checkIconSizes[menu.size]}
                                         strokeWidth={2.4}
                                         className="text-accent-text"
                                     />

package/src/components/context-menu/context-menu-store.ts

@@ -4,6 +4,7 @@ import type { MenuRect } from "./menu-reveal"
 export type ContextMenuAlignX = "start" | "end"
 export type ContextMenuAlignY = "top" | "bottom"
 export type ContextMenuEdge = "leading" | "trailing"
+export type ContextMenuSize = "sm" | "md" | "lg"
 
 /** One row of a context menu, or a divider between groups of rows. */
 export type ContextMenuItem =
@@ -27,6 +28,8 @@ export interface OpenMenu {
     items: ContextMenuItem[]
     /** Opened by long-press: bigger rows for fingers. */
     touch: boolean
+    /** Surface, item and heading density. @default "md" */
+    size: ContextMenuSize
     /** Which edge of the menu sits at `x`: its left (`start`) or its right (`end`). */
     alignX: ContextMenuAlignX
     /** Which edge of the menu sits at `y`: its top (`top`) or its bottom (`bottom`). */
@@ -52,7 +55,8 @@ export function openContextMenu(
     y: number,
     items: ContextMenuItem[],
     touch = false,
-    anchor: Element | null = typeof document === "undefined" ? null : document.activeElement
+    anchor: Element | null = typeof document === "undefined" ? null : document.activeElement,
+    size: ContextMenuSize = "md"
 ) {
     menu = {
         id: nextId++,
@@ -61,6 +65,7 @@ export function openContextMenu(
         y,
         items,
         touch,
+        size,
         alignX: "start",
         alignY: "top",
     }
@@ -93,11 +98,14 @@ export function openMenu(
         edge = "leading",
         above = false,
         toolbar,
+        size = "md",
     }: {
         edge?: ContextMenuEdge
         above?: boolean
         /** Replace this action group with a horizontally expanding menu surface. */
         toolbar?: HTMLElement
+        /** Surface, item and heading density. @default "md" */
+        size?: ContextMenuSize
     } = {}
 ) {
     const rect = anchor.getBoundingClientRect()
@@ -112,6 +120,7 @@ export function openMenu(
         y: toolbar ? rect.top : above ? rect.bottom : rect.top,
         items,
         touch: false,
+        size,
         alignX: right ? "end" : "start",
         alignY: above ? "bottom" : "top",
         toolbar,