@panneau/ui 5.0.0-alpha.5 → 5.0.0-alpha.6

package/README.md

@@ -290,12 +290,65 @@ The theme model is described in [decision 0024](../../docs/decisions/0024-theme-
 
 ## Primitives
 
-`Heading`, `Text`, `Prose`, `Stack`, `Inline`, `Grid`, `Container`, `Divider`, `Button`, `IconButton`, `TextInput`, `TextArea`, `NumberInput`, `Select` (single or multiple), `ComboBox`, `Checkbox`, `Switch`, `RadioGroup`, `SegmentedControl`, `DatePicker`, `TimeInput`, `Fieldset`, `Dialog`, `Popover`, `Menu`, `Tabs`, `Tooltip`, toasts (`useToast()`), `Alert`, `Badge`, `Spinner`, `Card`, `Disclosure` and `Icon`.
+`Heading`, `Text`, `Prose`, `Stack`, `Inline`, `Grid`, `Container`, `Divider`, `Button`, `IconButton`, `TextInput`, `TextArea`, `NumberInput`, `Slider`, `TagsInput`, `Select` (single or multiple), `ComboBox`, `Checkbox`, `Switch`, `RadioGroup`, `SegmentedControl`, `DatePicker`, `TimeInput`, `Fieldset`, `Dialog`, `Popover`, `Menu`, `PillTrigger`, `Tabs`, `Tooltip`, toasts (`useToast()`), `Alert`, `Badge`, `Spinner`, `Card`, `Disclosure` and `Icon`.
 
 - Every component accepts `className`, and `xxxClassName` props for its inner elements (`labelClassName`, `inputClassName`…).
 - Labelled controls take `label`, `description` and `errors` (a list of messages: any message makes the control invalid and describes it).
 - They work on phones: larger touch targets on touch screens, dialogs as bottom sheets (or the whole screen, with `fullScreenOnPhone`), scrolling tabs.
 
+### Rich choices
+
+Picking one item among a few rich ones, such as an account (an avatar, a name, a handle), a plan or a template, takes a menu or radio cards.
+
+- **`Menu`** groups its items in `MenuSection`s, whose `title` is a small muted eyebrow that labels the group, and takes a `footer`: a short note under the items, after a line, which describes the menu and can't be focused. With `selectionMode` (`single` or `multiple`) and `selectedKeys`, its items are radio or checkbox items, and the selected ones have a check at their end and a sunken background.
+- **`MenuItem`** takes a leading `media` (an avatar or an image) instead of an `icon`: larger when the item has a `description`, and clipped to a circle by default (`--panneau-menu-media-radius`).
+- **`PillTrigger`** is a compact rounded button that shows the current value, with an optional leading `media` and a chevron, for a `MenuTrigger` or a `PopoverTrigger`. Its accessible name is its value: give it an `aria-label` that contains the value when the value alone doesn't say what it picks.
+
+```tsx
+<MenuTrigger>
+    <PillTrigger size="sm" media={<Avatar user={account} />}>
+        {account.name}
+    </PillTrigger>
+    <Menu
+        aria-label="Accounts"
+        selectionMode="single"
+        selectedKeys={[account.id]}
+        onSelectionChange={(keys) => keys !== 'all' && onChange([...keys][0])}
+        footer="Only this step changes."
+    >
+        <MenuSection title="Publish on">
+            {accounts.map((item) => (
+                <MenuItem
+                    key={item.id}
+                    id={item.id}
+                    media={<Avatar user={item} />}
+                    description={item.handle}
+                >
+                    {item.name}
+                </MenuItem>
+            ))}
+        </MenuSection>
+    </Menu>
+</MenuTrigger>
+```
+
+- **`RadioGroup`** with `appearance="cards"` shows its options as bordered cards in a grid of `columns` (2 by default): each card has the radio, the option's `media`, its label and its description, and the selected card has a stronger border. The grid is a size container of its own, and becomes a single column when it is narrower than 28rem. Keyboard and focus work as in a list of radios.
+
+```tsx
+<RadioGroup
+    label="Publish on"
+    appearance="cards"
+    options={accounts.map((item) => ({
+        value: item.id,
+        label: item.name,
+        description: item.handle,
+        media: <Avatar user={item} />,
+    }))}
+    value={accountId}
+    onChange={setAccountId}
+/>
+```
+
 ## Icons
 
 Components take icons as components: any Lucide icon (`icon={Pencil}`), or a component with the same props.

package/dist/index.d.ts

@@ -21,10 +21,13 @@ export { Icon, type IconComponent, type IconProps, type IconSize } from './icon/
 export { type NamedIconLoader, getNamedIcon, loadNamedIcon } from './icon/namedIcons';
 export { IconButton, type IconButtonProps } from './icon-button/IconButton';
 export { usePanneauIntl } from './intl/usePanneauIntl';
-export { Menu, MenuItem, type MenuItemProps, type MenuProps, MenuSeparator, MenuTrigger, } from './menu/Menu';
+export { Menu, MenuItem, type MenuItemProps, type MenuProps, MenuSection, type MenuSectionProps, MenuSeparator, MenuTrigger, } from './menu/Menu';
 export { NumberInput, type NumberInputProps } from './number-input/NumberInput';
+export { Slider, type SliderProps } from './slider/Slider';
+export { type TagSuggestion, TagsInput, type TagsInputProps } from './tags-input/TagsInput';
+export { PillTrigger, type PillTriggerProps } from './pill-trigger/PillTrigger';
 export { Popover, type PopoverProps, PopoverTrigger } from './popover/Popover';
-export { RadioGroup, type RadioGroupProps } from './radio-group/RadioGroup';
+export { RadioGroup, type RadioGroupAppearance, type RadioGroupOption, type RadioGroupProps, } from './radio-group/RadioGroup';
 export { PanneauRoot, type PanneauRootProps, usePortalContainer } from './root/PanneauRoot';
 export { ThemeScope, type ThemeScopeProps } from './root/ThemeScope';
 export { SegmentedControl, type SegmentedControlOption, type SegmentedControlProps, } from './segmented-control/SegmentedControl';

package/dist/index.d.ts.map

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

package/dist/index.js

@@ -27,8 +27,11 @@ import { DatePicker } from "./date-picker/DatePicker.js";
 import { Dialog, DialogTrigger } from "./dialog/Dialog.js";
 import { Disclosure } from "./disclosure/Disclosure.js";
 import { Fieldset } from "./field/Fieldset.js";
-import { Menu, MenuItem, MenuSeparator, MenuTrigger } from "./menu/Menu.js";
+import { Menu, MenuItem, MenuSection, MenuSeparator, MenuTrigger } from "./menu/Menu.js";
 import { NumberInput } from "./number-input/NumberInput.js";
+import { Slider } from "./slider/Slider.js";
+import { TagsInput } from "./tags-input/TagsInput.js";
+import { PillTrigger } from "./pill-trigger/PillTrigger.js";
 import { RadioGroup } from "./radio-group/RadioGroup.js";
 import { ThemeScope } from "./root/ThemeScope.js";
 import { SegmentedControl } from "./segmented-control/SegmentedControl.js";
@@ -49,4 +52,4 @@ import { defineComponentTokens } from "./theme/componentTokens.js";
 import { componentTokens } from "./theme/components.js";
 import { SEMANTIC_TOKENS } from "./theme/semanticTokens.js";
 import { defineTheme, findUnknownTokens, mergeThemes } from "./theme/defineTheme.js";
-export { Alert, BREAKPOINTS, BUILT_IN_TONES, Badge, Button, CHART_CATEGORICAL_COUNT, CHART_SEQUENTIAL_COUNT, Card, Checkbox, ComboBox, CommandPalette, Container, DatePicker, Dialog, DialogTrigger, Disclosure, Divider, Fieldset, Grid, GridItem, Heading, Icon, IconButton, Inline, Menu, MenuItem, MenuSeparator, MenuTrigger, NumberInput, PanneauRoot, Popover, PopoverTrigger, Prose, RadioGroup, SEMANTIC_TOKENS, SegmentedControl, Select, Spinner, Stack, Switch, Tab, TabList, TabPanel, Tabs, Text, TextArea, TextInput, ThemeScope, TimeInput, Tooltip, bootstrapTheme, bootstrapTone, chartColors, checkColorDifferences, checkTheme, componentTokens, defineComponentTokens, defineTheme, deriveTone, findUnknownTokens, getNamedIcon, isApplePlatform, loadNamedIcon, matchCommands, mergeThemes, normalizeSearch, toneClassName, useCommandShortcut, usePanneauIntl, usePortalContainer, useToast };
+export { Alert, BREAKPOINTS, BUILT_IN_TONES, Badge, Button, CHART_CATEGORICAL_COUNT, CHART_SEQUENTIAL_COUNT, Card, Checkbox, ComboBox, CommandPalette, Container, DatePicker, Dialog, DialogTrigger, Disclosure, Divider, Fieldset, Grid, GridItem, Heading, Icon, IconButton, Inline, Menu, MenuItem, MenuSection, MenuSeparator, MenuTrigger, NumberInput, PanneauRoot, PillTrigger, Popover, PopoverTrigger, Prose, RadioGroup, SEMANTIC_TOKENS, SegmentedControl, Select, Slider, Spinner, Stack, Switch, Tab, TabList, TabPanel, Tabs, TagsInput, Text, TextArea, TextInput, ThemeScope, TimeInput, Tooltip, bootstrapTheme, bootstrapTone, chartColors, checkColorDifferences, checkTheme, componentTokens, defineComponentTokens, defineTheme, deriveTone, findUnknownTokens, getNamedIcon, isApplePlatform, loadNamedIcon, matchCommands, mergeThemes, normalizeSearch, toneClassName, useCommandShortcut, usePanneauIntl, usePortalContainer, useToast };

package/dist/menu/Menu.css

@@ -0,0 +1,84 @@
+/* Parts of menus on top of the options of ListBox.module.css: sections, footer, media, selection. */
+
+/* A menu with a footer: the items scroll, the footer stays under them. */
+.panneau-menu-layout {
+    display: flex;
+    flex-direction: column;
+    max-height: inherit;
+}
+
+.panneau-menu-layout > [role='menu'] {
+    flex: 1 1 auto;
+    min-height: 0;
+}
+
+.panneau-menu-section + .panneau-menu-section {
+    margin-top: var(--panneau-space-1);
+}
+
+.panneau-menu-header {
+    padding: var(--panneau-space-2) var(--panneau-list-box-item-padding-x, var(--panneau-space-2))
+        var(--panneau-space-1);
+    font-size: var(--panneau-menu-header-font-size, var(--panneau-font-size-xs));
+    font-weight: var(--panneau-menu-header-font-weight, var(--panneau-font-weight-medium));
+    line-height: var(--panneau-line-height-tight);
+    color: var(--panneau-menu-header-color, var(--panneau-color-text-muted));
+    text-transform: var(--panneau-menu-header-text-transform, uppercase);
+    letter-spacing: var(--panneau-menu-header-letter-spacing, 0.04em);
+}
+
+.panneau-menu-footer {
+    flex: 0 0 auto;
+    padding: var(--panneau-space-2)
+        calc(
+            var(--panneau-list-box-padding, var(--panneau-space-1)) +
+                var(--panneau-list-box-item-padding-x, var(--panneau-space-2))
+        );
+    font-size: var(--panneau-menu-footer-font-size, var(--panneau-font-size-xs));
+    line-height: var(--panneau-line-height-tight);
+    color: var(--panneau-menu-footer-color, var(--panneau-color-text-muted));
+    border-top: var(--panneau-border-width) solid var(--panneau-color-border);
+}
+
+.panneau-menu-media {
+    display: inline-flex;
+    flex: 0 0 auto;
+    align-items: center;
+    justify-content: center;
+    width: var(--panneau-menu-media-size, 1.5rem);
+    height: var(--panneau-menu-media-size, 1.5rem);
+    overflow: hidden;
+    border-radius: var(--panneau-menu-media-radius, var(--panneau-radius-full));
+}
+
+.panneau-menu-item:has([slot='description']) .panneau-menu-media {
+    width: var(--panneau-menu-media-size-described, 2rem);
+    height: var(--panneau-menu-media-size-described, 2rem);
+}
+
+.panneau-menu-media > :is(img, svg, video, picture) {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+}
+
+/* The check of a selected item, at its end. */
+.panneau-menu-check {
+    display: inline-flex;
+    flex: 0 0 auto;
+    justify-content: flex-end;
+    width: 1rem;
+    color: var(--panneau-color-text);
+}
+
+.panneau-menu-item[data-selected] {
+    background-color: var(--panneau-menu-item-bg-selected, var(--panneau-color-surface-sunken));
+}
+
+/* A focused or hovered selected item: the hover color over the selected background. */
+.panneau-menu-item[data-selected]:is([data-focused], [data-hovered]) {
+    background-image: linear-gradient(
+        var(--panneau-list-box-item-bg-hover, var(--panneau-color-hover)),
+        var(--panneau-list-box-item-bg-hover, var(--panneau-color-hover))
+    );
+}

package/dist/menu/Menu.d.ts

@@ -1,26 +1,53 @@
-import type { ReactNode } from 'react';
-import { type MenuItemProps as AriaMenuItemProps, type MenuProps as AriaMenuProps } from 'react-aria-components';
+import { type ReactNode } from 'react';
+import { type MenuItemProps as AriaMenuItemProps, type MenuProps as AriaMenuProps, type MenuSectionProps as AriaMenuSectionProps } from 'react-aria-components';
 import { type IconComponent } from '../icon/Icon';
 export interface MenuProps<T extends object> extends Omit<AriaMenuProps<T>, 'className' | 'style'> {
     className?: string;
     popoverClassName?: string;
     placement?: 'bottom start' | 'bottom end' | 'top start' | 'top end';
+    /**
+     * A short note under the items, after a line, such as "Only this step changes.". It isn't an
+     * item and can't be focused: the menu is described by it.
+     */
+    footer?: ReactNode;
+    footerClassName?: string;
 }
 /**
  * A menu of actions, inside a `MenuTrigger` with its button as the first child. Arrow keys move
- * between items, and typing a letter jumps to an item.
+ * between items, and typing a letter jumps to an item. With `selectionMode` (`single` or
+ * `multiple`) and `selectedKeys`, its items are choices, and the selected ones have a check.
  */
-export declare function Menu<T extends object>({ className, popoverClassName, placement, ...props }: MenuProps<T>): import("react").JSX.Element;
+export declare function Menu<T extends object>({ className, popoverClassName, placement, footer, footerClassName, ...props }: MenuProps<T>): import("react").JSX.Element;
 export interface MenuItemProps extends Omit<AriaMenuItemProps, 'className' | 'style' | 'children'> {
     children?: ReactNode;
     icon?: IconComponent;
+    /**
+     * Leading media instead of an icon, such as an avatar or an image, sized with the item: larger
+     * when the item has a description.
+     */
+    media?: ReactNode;
     description?: string;
     /** Styles the item as destructive. */
     isDanger?: boolean;
     className?: string;
 }
-/** An item of a `Menu`. */
-export declare function MenuItem({ children, icon, description, isDanger, className, textValue, ...props }: MenuItemProps): import("react").JSX.Element;
+/**
+ * An item of a `Menu`. In a menu with a `selectionMode`, a selected item has a check at its end,
+ * and the role of a radio (single) or a checkbox (multiple) item.
+ */
+export declare function MenuItem({ children, icon, media, description, isDanger, className, textValue, ...props }: MenuItemProps): import("react").JSX.Element;
+export interface MenuSectionProps<T extends object> extends Omit<AriaMenuSectionProps<T>, 'className' | 'style' | 'children' | 'items'> {
+    /**
+     * The header of the section, a small muted eyebrow above its items, such as "Publish on". It
+     * labels the group. Without it, give the section an `aria-label`.
+     */
+    title?: ReactNode;
+    children?: ReactNode;
+    className?: string;
+    headerClassName?: string;
+}
+/** A group of items of a `Menu`, with a header. */
+export declare function MenuSection<T extends object>({ title, children, className, headerClassName, ...props }: MenuSectionProps<T>): import("react").JSX.Element;
 /** A line between groups of menu items. */
 export declare function MenuSeparator(): import("react").JSX.Element;
 export { MenuTrigger } from 'react-aria-components';

package/dist/menu/Menu.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Menu.d.ts","sourceRoot":"","sources":["../../src/menu/Menu.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,EAGH,KAAK,aAAa,IAAI,iBAAiB,EACvC,KAAK,SAAS,IAAI,aAAa,EAGlC,MAAM,uBAAuB,CAAC;AAE/B,OAAO,EAAQ,KAAK,aAAa,EAAE,MAAM,cAAc,CAAC;AAKxD,MAAM,WAAW,SAAS,CAAC,CAAC,SAAS,MAAM,CAAE,SAAQ,IAAI,CAAC,aAAa,CAAC,CAAC,CAAC,EAAE,WAAW,GAAG,OAAO,CAAC;IAC9F,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,SAAS,CAAC,EAAE,cAAc,GAAG,YAAY,GAAG,WAAW,GAAG,SAAS,CAAC;CACvE;AAED;;;GAGG;AACH,wBAAgB,IAAI,CAAC,CAAC,SAAS,MAAM,EAAE,EACnC,SAAS,EACT,gBAAgB,EAChB,SAA0B,EAC1B,GAAG,KAAK,EACX,EAAE,SAAS,CAAC,CAAC,CAAC,+BAMd;AAED,MAAM,WAAW,aAAc,SAAQ,IAAI,CAAC,iBAAiB,EAAE,WAAW,GAAG,OAAO,GAAG,UAAU,CAAC;IAC9F,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,IAAI,CAAC,EAAE,aAAa,CAAC;IACrB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,sCAAsC;IACtC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;CACtB;AAED,2BAA2B;AAC3B,wBAAgB,QAAQ,CAAC,EACrB,QAAQ,EACR,IAAI,EACJ,WAAW,EACX,QAAgB,EAChB,SAAS,EACT,SAAS,EACT,GAAG,KAAK,EACX,EAAE,aAAa,+BAqBf;AAED,2CAA2C;AAC3C,wBAAgB,aAAa,gCAE5B;AAED,OAAO,EAAE,WAAW,EAAE,MAAM,uBAAuB,CAAC"}
+{"version":3,"file":"Menu.d.ts","sourceRoot":"","sources":["../../src/menu/Menu.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,KAAK,SAAS,EAAS,MAAM,OAAO,CAAC;AAC9C,OAAO,EAGH,KAAK,aAAa,IAAI,iBAAiB,EACvC,KAAK,SAAS,IAAI,aAAa,EAE/B,KAAK,gBAAgB,IAAI,oBAAoB,EAIhD,MAAM,uBAAuB,CAAC;AAE/B,OAAO,EAAQ,KAAK,aAAa,EAAE,MAAM,cAAc,CAAC;AAMxD,MAAM,WAAW,SAAS,CAAC,CAAC,SAAS,MAAM,CAAE,SAAQ,IAAI,CAAC,aAAa,CAAC,CAAC,CAAC,EAAE,WAAW,GAAG,OAAO,CAAC;IAC9F,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,SAAS,CAAC,EAAE,cAAc,GAAG,YAAY,GAAG,WAAW,GAAG,SAAS,CAAC;IACpE;;;OAGG;IACH,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,eAAe,CAAC,EAAE,MAAM,CAAC;CAC5B;AAED;;;;GAIG;AACH,wBAAgB,IAAI,CAAC,CAAC,SAAS,MAAM,EAAE,EACnC,SAAS,EACT,gBAAgB,EAChB,SAA0B,EAC1B,MAAM,EACN,eAAe,EACf,GAAG,KAAK,EACX,EAAE,SAAS,CAAC,CAAC,CAAC,+BA4Bd;AAED,MAAM,WAAW,aAAc,SAAQ,IAAI,CAAC,iBAAiB,EAAE,WAAW,GAAG,OAAO,GAAG,UAAU,CAAC;IAC9F,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,IAAI,CAAC,EAAE,aAAa,CAAC;IACrB;;;OAGG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,sCAAsC;IACtC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;CACtB;AAED;;;GAGG;AACH,wBAAgB,QAAQ,CAAC,EACrB,QAAQ,EACR,IAAI,EACJ,KAAK,EACL,WAAW,EACX,QAAgB,EAChB,SAAS,EACT,SAAS,EACT,GAAG,KAAK,EACX,EAAE,aAAa,+BAkCf;AAED,MAAM,WAAW,gBAAgB,CAAC,CAAC,SAAS,MAAM,CAAE,SAAQ,IAAI,CAC5D,oBAAoB,CAAC,CAAC,CAAC,EACvB,WAAW,GAAG,OAAO,GAAG,UAAU,GAAG,OAAO,CAC/C;IACG;;;OAGG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,eAAe,CAAC,EAAE,MAAM,CAAC;CAC5B;AAED,mDAAmD;AACnD,wBAAgB,WAAW,CAAC,CAAC,SAAS,MAAM,EAAE,EAC1C,KAAK,EACL,QAAQ,EACR,SAAS,EACT,eAAe,EACf,GAAG,KAAK,EACX,EAAE,gBAAgB,CAAC,CAAC,CAAC,+BASrB;AAED,2CAA2C;AAC3C,wBAAgB,aAAa,gCAE5B;AAED,OAAO,EAAE,WAAW,EAAE,MAAM,uBAAuB,CAAC"}

package/dist/menu/Menu.js

@@ -2,45 +2,130 @@ import { cx } from "../utils/cx.js";
 import { Icon } from "../icon/Icon.js";
 import { PopoverSurface } from "../popover/Popover.js";
 import ListBox_module_default from "../select/ListBox.module.js";
-import { Menu, MenuItem, MenuTrigger, Separator, Text } from "react-aria-components";
-import { jsx, jsxs } from "react/jsx-runtime";
+import Menu_module_default from "./Menu.module.js";
+import { Check } from "lucide-react";
+import { Header, Menu, MenuItem, MenuSection, MenuTrigger, Separator, Text } from "react-aria-components";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useId } from "react";
 import { c } from "react/compiler-runtime";
 //#region src/menu/Menu.tsx
 /**
 * A menu of actions, inside a `MenuTrigger` with its button as the first child. Arrow keys move
-* between items, and typing a letter jumps to an item.
+* between items, and typing a letter jumps to an item. With `selectionMode` (`single` or
+* `multiple`) and `selectedKeys`, its items are choices, and the selected ones have a check.
 */
-function Menu$1({ className, popoverClassName, placement = "bottom start", ...props }) {
+function Menu$1({ className, popoverClassName, placement = "bottom start", footer, footerClassName, ...props }) {
+	const footerId = useId();
+	const hasFooter = footer !== void 0 && footer !== null;
+	const menu = /* @__PURE__ */ jsx(Menu, {
+		...props,
+		"aria-describedby": hasFooter ? [props["aria-describedby"], footerId].filter(Boolean).join(" ") : props["aria-describedby"],
+		className: cx("panneau-menu", ListBox_module_default.listBox, className)
+	});
 	return /* @__PURE__ */ jsx(PopoverSurface, {
 		placement,
 		className: popoverClassName,
-		children: /* @__PURE__ */ jsx(Menu, {
-			...props,
-			className: cx("panneau-menu", ListBox_module_default.listBox, className)
-		})
+		children: hasFooter ? /* @__PURE__ */ jsxs("div", {
+			className: Menu_module_default.layout,
+			children: [menu, /* @__PURE__ */ jsx("div", {
+				id: footerId,
+				className: cx(Menu_module_default.footer, footerClassName),
+				children: footer
+			})]
+		}) : menu
 	});
 }
-/** An item of a `Menu`. */
-function MenuItem$1({ children, icon, description, isDanger = false, className, textValue, ...props }) {
-	return /* @__PURE__ */ jsxs(MenuItem, {
+/**
+* An item of a `Menu`. In a menu with a `selectionMode`, a selected item has a check at its end,
+* and the role of a radio (single) or a checkbox (multiple) item.
+*/
+function MenuItem$1({ children, icon, media, description, isDanger = false, className, textValue, ...props }) {
+	return /* @__PURE__ */ jsx(MenuItem, {
 		...props,
 		textValue: textValue ?? (typeof children === "string" ? children : void 0),
-		className: cx("panneau-menu-item", ListBox_module_default.item, className),
+		className: cx("panneau-menu-item", ListBox_module_default.item, Menu_module_default.item, className),
 		"data-danger": isDanger || void 0,
-		children: [icon !== void 0 ? /* @__PURE__ */ jsx(Icon, { icon }) : null, /* @__PURE__ */ jsxs("span", {
-			className: ListBox_module_default.itemText,
-			children: [/* @__PURE__ */ jsx(Text, {
-				slot: "label",
-				className: ListBox_module_default.itemLabel,
-				children
-			}), description !== void 0 ? /* @__PURE__ */ jsx(Text, {
-				slot: "description",
-				className: ListBox_module_default.itemDescription,
-				children: description
-			}) : null]
-		})]
+		children: ({ isSelected, selectionMode }) => /* @__PURE__ */ jsxs(Fragment, { children: [
+			media !== void 0 && media !== null ? /* @__PURE__ */ jsx("span", {
+				className: Menu_module_default.media,
+				children: media
+			}) : icon !== void 0 ? /* @__PURE__ */ jsx(Icon, { icon }) : null,
+			/* @__PURE__ */ jsxs("span", {
+				className: ListBox_module_default.itemText,
+				children: [/* @__PURE__ */ jsx(Text, {
+					slot: "label",
+					className: ListBox_module_default.itemLabel,
+					children
+				}), description !== void 0 ? /* @__PURE__ */ jsx(Text, {
+					slot: "description",
+					className: ListBox_module_default.itemDescription,
+					children: description
+				}) : null]
+			}),
+			selectionMode !== "none" ? /* @__PURE__ */ jsx("span", {
+				className: Menu_module_default.check,
+				children: isSelected ? /* @__PURE__ */ jsx(Icon, {
+					icon: Check,
+					size: "sm"
+				}) : null
+			}) : null
+		] })
 	});
 }
+/** A group of items of a `Menu`, with a header. */
+function MenuSection$1(t0) {
+	const $ = c(16);
+	let children;
+	let className;
+	let headerClassName;
+	let props;
+	let title;
+	if ($[0] !== t0) {
+		({title, children, className, headerClassName, ...props} = t0);
+		$[0] = t0;
+		$[1] = children;
+		$[2] = className;
+		$[3] = headerClassName;
+		$[4] = props;
+		$[5] = title;
+	} else {
+		children = $[1];
+		className = $[2];
+		headerClassName = $[3];
+		props = $[4];
+		title = $[5];
+	}
+	let t1;
+	if ($[6] !== className) {
+		t1 = cx(Menu_module_default.section, className);
+		$[6] = className;
+		$[7] = t1;
+	} else t1 = $[7];
+	let t2;
+	if ($[8] !== headerClassName || $[9] !== title) {
+		t2 = title !== void 0 && title !== null ? /* @__PURE__ */ jsx(Header, {
+			className: cx(Menu_module_default.header, headerClassName),
+			children: title
+		}) : null;
+		$[8] = headerClassName;
+		$[9] = title;
+		$[10] = t2;
+	} else t2 = $[10];
+	let t3;
+	if ($[11] !== children || $[12] !== props || $[13] !== t1 || $[14] !== t2) {
+		t3 = /* @__PURE__ */ jsxs(MenuSection, {
+			...props,
+			className: t1,
+			children: [t2, children]
+		});
+		$[11] = children;
+		$[12] = props;
+		$[13] = t1;
+		$[14] = t2;
+		$[15] = t3;
+	} else t3 = $[15];
+	return t3;
+}
 /** A line between groups of menu items. */
 function MenuSeparator() {
 	const $ = c(1);
@@ -52,6 +137,6 @@ function MenuSeparator() {
 	return t0;
 }
 //#endregion
-export { Menu$1 as Menu, MenuItem$1 as MenuItem, MenuSeparator, MenuTrigger };
+export { Menu$1 as Menu, MenuItem$1 as MenuItem, MenuSection$1 as MenuSection, MenuSeparator, MenuTrigger };
 
 //# sourceMappingURL=Menu.js.map

package/dist/menu/Menu.js.map

@@ -1 +1 @@
-{"version":3,"file":"Menu.js","names":["Menu","AriaMenu","styles","MenuItem","AriaMenuItem","_c"],"sources":["../../src/menu/Menu.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport {\n    Menu as AriaMenu,\n    MenuItem as AriaMenuItem,\n    type MenuItemProps as AriaMenuItemProps,\n    type MenuProps as AriaMenuProps,\n    Separator,\n    Text,\n} from 'react-aria-components';\n\nimport { Icon, type IconComponent } from '../icon/Icon';\nimport { PopoverSurface } from '../popover/Popover';\nimport styles from '../select/ListBox.module.css';\nimport { cx } from '../utils/cx';\n\nexport interface MenuProps<T extends object> extends Omit<AriaMenuProps<T>, 'className' | 'style'> {\n    className?: string;\n    popoverClassName?: string;\n    placement?: 'bottom start' | 'bottom end' | 'top start' | 'top end';\n}\n\n/**\n * A menu of actions, inside a `MenuTrigger` with its button as the first child. Arrow keys move\n * between items, and typing a letter jumps to an item.\n */\nexport function Menu<T extends object>({\n    className,\n    popoverClassName,\n    placement = 'bottom start',\n    ...props\n}: MenuProps<T>) {\n    return (\n        <PopoverSurface placement={placement} className={popoverClassName}>\n            <AriaMenu {...props} className={cx('panneau-menu', styles.listBox, className)} />\n        </PopoverSurface>\n    );\n}\n\nexport interface MenuItemProps extends Omit<AriaMenuItemProps, 'className' | 'style' | 'children'> {\n    children?: ReactNode;\n    icon?: IconComponent;\n    description?: string;\n    /** Styles the item as destructive. */\n    isDanger?: boolean;\n    className?: string;\n}\n\n/** An item of a `Menu`. */\nexport function MenuItem({\n    children,\n    icon,\n    description,\n    isDanger = false,\n    className,\n    textValue,\n    ...props\n}: MenuItemProps) {\n    return (\n        <AriaMenuItem\n            {...props}\n            textValue={textValue ?? (typeof children === 'string' ? children : undefined)}\n            className={cx('panneau-menu-item', styles.item, className)}\n            data-danger={isDanger || undefined}\n        >\n            {icon !== undefined ? <Icon icon={icon} /> : null}\n            <span className={styles.itemText}>\n                <Text slot=\"label\" className={styles.itemLabel}>\n                    {children}\n                </Text>\n                {description !== undefined ? (\n                    <Text slot=\"description\" className={styles.itemDescription}>\n                        {description}\n                    </Text>\n                ) : null}\n            </span>\n        </AriaMenuItem>\n    );\n}\n\n/** A line between groups of menu items. */\nexport function MenuSeparator() {\n    return <Separator className={styles.separator} />;\n}\n\nexport { MenuTrigger } from 'react-aria-components';\n"],"mappings":";;;;;;;;;;;;AAyBA,SAAgBA,OAAuB,EACnC,WACA,kBACA,YAAY,gBACZ,GAAG,SACU;CACb,OACI,oBAAC,gBAAD;EAA2B;EAAW,WAAW;EAC7C,UAAA,oBAACC,MAAD;GAAU,GAAI;GAAO,WAAW,GAAG,gBAAgBC,uBAAO,SAAS,SAAS;EAAE,CAAA;CAClE,CAAA;AAExB;;AAYA,SAAgBC,WAAS,EACrB,UACA,MACA,aACA,WAAW,OACX,WACA,WACA,GAAG,SACW;CACd,OACI,qBAACC,UAAD;EACI,GAAI;EACJ,WAAW,cAAc,OAAO,aAAa,WAAW,WAAW,KAAA;EACnE,WAAW,GAAG,qBAAqBF,uBAAO,MAAM,SAAS;EACzD,eAAa,YAAY,KAAA;EAJ7B,UAAA,CAMK,SAAS,KAAA,IAAY,oBAAC,MAAD,EAAY,KAAK,CAAA,IAAM,MAC7C,qBAAC,QAAD;GAAM,WAAWA,uBAAO;GAAxB,UAAA,CACI,oBAAC,MAAD;IAAM,MAAK;IAAQ,WAAWA,uBAAO;IAChC;GACC,CAAA,GACL,gBAAgB,KAAA,IACb,oBAAC,MAAD;IAAM,MAAK;IAAc,WAAWA,uBAAO;IACtC,UAAA;GACC,CAAA,IACN,IACF;EACI,CAAA,CAAA;;AAEtB;;AAGA,SAAO,gBAAA;CAAA,MAAA,IAAAG,EAAA,CAAA;CAAA,IAAA;CAAA,IAAA,EAAA,OAAA,OAAA,IAAA,2BAAA,GAAA;EACI,KAAA,oBAAC,WAAD,EAAsB,WAAAH,uBAAM,UAAU,CAAA;EAAI,EAAA,KAAA;CAAA,OAAA,KAAA,EAAA;CAAA,OAA1C;AAA0C"}
+{"version":3,"file":"Menu.js","names":["title","children","Menu","AriaMenu","listBoxStyles","styles","MenuItem","AriaMenuItem","_Fragment","MenuSection","_c","AriaMenuSection"],"sources":["../../src/menu/Menu.tsx"],"sourcesContent":["import { Check } from 'lucide-react';\nimport { type ReactNode, useId } from 'react';\nimport {\n    Menu as AriaMenu,\n    MenuItem as AriaMenuItem,\n    type MenuItemProps as AriaMenuItemProps,\n    type MenuProps as AriaMenuProps,\n    MenuSection as AriaMenuSection,\n    type MenuSectionProps as AriaMenuSectionProps,\n    Header,\n    Separator,\n    Text,\n} from 'react-aria-components';\n\nimport { Icon, type IconComponent } from '../icon/Icon';\nimport { PopoverSurface } from '../popover/Popover';\nimport listBoxStyles from '../select/ListBox.module.css';\nimport { cx } from '../utils/cx';\nimport styles from './Menu.module.css';\n\nexport interface MenuProps<T extends object> extends Omit<AriaMenuProps<T>, 'className' | 'style'> {\n    className?: string;\n    popoverClassName?: string;\n    placement?: 'bottom start' | 'bottom end' | 'top start' | 'top end';\n    /**\n     * A short note under the items, after a line, such as \"Only this step changes.\". It isn't an\n     * item and can't be focused: the menu is described by it.\n     */\n    footer?: ReactNode;\n    footerClassName?: string;\n}\n\n/**\n * A menu of actions, inside a `MenuTrigger` with its button as the first child. Arrow keys move\n * between items, and typing a letter jumps to an item. With `selectionMode` (`single` or\n * `multiple`) and `selectedKeys`, its items are choices, and the selected ones have a check.\n */\nexport function Menu<T extends object>({\n    className,\n    popoverClassName,\n    placement = 'bottom start',\n    footer,\n    footerClassName,\n    ...props\n}: MenuProps<T>) {\n    const footerId = useId();\n    const hasFooter = footer !== undefined && footer !== null;\n    const menu = (\n        <AriaMenu\n            {...props}\n            aria-describedby={\n                hasFooter\n                    ? [props['aria-describedby'], footerId].filter(Boolean).join(' ')\n                    : props['aria-describedby']\n            }\n            className={cx('panneau-menu', listBoxStyles.listBox, className)}\n        />\n    );\n    return (\n        <PopoverSurface placement={placement} className={popoverClassName}>\n            {hasFooter ? (\n                <div className={styles.layout}>\n                    {menu}\n                    <div id={footerId} className={cx(styles.footer, footerClassName)}>\n                        {footer}\n                    </div>\n                </div>\n            ) : (\n                menu\n            )}\n        </PopoverSurface>\n    );\n}\n\nexport interface MenuItemProps extends Omit<AriaMenuItemProps, 'className' | 'style' | 'children'> {\n    children?: ReactNode;\n    icon?: IconComponent;\n    /**\n     * Leading media instead of an icon, such as an avatar or an image, sized with the item: larger\n     * when the item has a description.\n     */\n    media?: ReactNode;\n    description?: string;\n    /** Styles the item as destructive. */\n    isDanger?: boolean;\n    className?: string;\n}\n\n/**\n * An item of a `Menu`. In a menu with a `selectionMode`, a selected item has a check at its end,\n * and the role of a radio (single) or a checkbox (multiple) item.\n */\nexport function MenuItem({\n    children,\n    icon,\n    media,\n    description,\n    isDanger = false,\n    className,\n    textValue,\n    ...props\n}: MenuItemProps) {\n    return (\n        <AriaMenuItem\n            {...props}\n            textValue={textValue ?? (typeof children === 'string' ? children : undefined)}\n            className={cx('panneau-menu-item', listBoxStyles.item, styles.item, className)}\n            data-danger={isDanger || undefined}\n        >\n            {({ isSelected, selectionMode }) => (\n                <>\n                    {media !== undefined && media !== null ? (\n                        <span className={styles.media}>{media}</span>\n                    ) : icon !== undefined ? (\n                        <Icon icon={icon} />\n                    ) : null}\n                    <span className={listBoxStyles.itemText}>\n                        <Text slot=\"label\" className={listBoxStyles.itemLabel}>\n                            {children}\n                        </Text>\n                        {description !== undefined ? (\n                            <Text slot=\"description\" className={listBoxStyles.itemDescription}>\n                                {description}\n                            </Text>\n                        ) : null}\n                    </span>\n                    {selectionMode !== 'none' ? (\n                        <span className={styles.check}>\n                            {isSelected ? <Icon icon={Check} size=\"sm\" /> : null}\n                        </span>\n                    ) : null}\n                </>\n            )}\n        </AriaMenuItem>\n    );\n}\n\nexport interface MenuSectionProps<T extends object> extends Omit<\n    AriaMenuSectionProps<T>,\n    'className' | 'style' | 'children' | 'items'\n> {\n    /**\n     * The header of the section, a small muted eyebrow above its items, such as \"Publish on\". It\n     * labels the group. Without it, give the section an `aria-label`.\n     */\n    title?: ReactNode;\n    children?: ReactNode;\n    className?: string;\n    headerClassName?: string;\n}\n\n/** A group of items of a `Menu`, with a header. */\nexport function MenuSection<T extends object>({\n    title,\n    children,\n    className,\n    headerClassName,\n    ...props\n}: MenuSectionProps<T>) {\n    return (\n        <AriaMenuSection {...props} className={cx(styles.section, className)}>\n            {title !== undefined && title !== null ? (\n                <Header className={cx(styles.header, headerClassName)}>{title}</Header>\n            ) : null}\n            {children}\n        </AriaMenuSection>\n    );\n}\n\n/** A line between groups of menu items. */\nexport function MenuSeparator() {\n    return <Separator className={listBoxStyles.separator} />;\n}\n\nexport { MenuTrigger } from 'react-aria-components';\n"],"mappings":"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"}

package/dist/menu/Menu.module.js

@@ -0,0 +1,22 @@
+import "./Menu.css";
+//#region src/menu/Menu.module.css
+var layout = "panneau-menu-layout";
+var section = "panneau-menu-section";
+var header = "panneau-menu-header";
+var footer = "panneau-menu-footer";
+var media = "panneau-menu-media";
+var item = "panneau-menu-item";
+var check = "panneau-menu-check";
+var Menu_module_default = {
+	layout,
+	section,
+	header,
+	footer,
+	media,
+	item,
+	check
+};
+//#endregion
+export { check, Menu_module_default as default, footer, header, item, layout, media, section };
+
+//# sourceMappingURL=Menu.module.js.map

package/dist/menu/Menu.module.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Menu.module.js","names":[],"sources":["../../src/menu/Menu.module.css"],"sourcesContent":["/* Parts of menus on top of the options of ListBox.module.css: sections, footer, media, selection. */\n\n/* A menu with a footer: the items scroll, the footer stays under them. */\n.layout {\n    display: flex;\n    flex-direction: column;\n    max-height: inherit;\n}\n\n.layout > [role='menu'] {\n    flex: 1 1 auto;\n    min-height: 0;\n}\n\n.section + .section {\n    margin-top: var(--panneau-space-1);\n}\n\n.header {\n    padding: var(--panneau-space-2) var(--panneau-list-box-item-padding-x, var(--panneau-space-2))\n        var(--panneau-space-1);\n    font-size: var(--panneau-menu-header-font-size, var(--panneau-font-size-xs));\n    font-weight: var(--panneau-menu-header-font-weight, var(--panneau-font-weight-medium));\n    line-height: var(--panneau-line-height-tight);\n    color: var(--panneau-menu-header-color, var(--panneau-color-text-muted));\n    text-transform: var(--panneau-menu-header-text-transform, uppercase);\n    letter-spacing: var(--panneau-menu-header-letter-spacing, 0.04em);\n}\n\n.footer {\n    flex: 0 0 auto;\n    padding: var(--panneau-space-2)\n        calc(\n            var(--panneau-list-box-padding, var(--panneau-space-1)) +\n                var(--panneau-list-box-item-padding-x, var(--panneau-space-2))\n        );\n    font-size: var(--panneau-menu-footer-font-size, var(--panneau-font-size-xs));\n    line-height: var(--panneau-line-height-tight);\n    color: var(--panneau-menu-footer-color, var(--panneau-color-text-muted));\n    border-top: var(--panneau-border-width) solid var(--panneau-color-border);\n}\n\n.media {\n    display: inline-flex;\n    flex: 0 0 auto;\n    align-items: center;\n    justify-content: center;\n    width: var(--panneau-menu-media-size, 1.5rem);\n    height: var(--panneau-menu-media-size, 1.5rem);\n    overflow: hidden;\n    border-radius: var(--panneau-menu-media-radius, var(--panneau-radius-full));\n}\n\n.item:has([slot='description']) .media {\n    width: var(--panneau-menu-media-size-described, 2rem);\n    height: var(--panneau-menu-media-size-described, 2rem);\n}\n\n.media > :is(img, svg, video, picture) {\n    width: 100%;\n    height: 100%;\n    object-fit: cover;\n}\n\n/* The check of a selected item, at its end. */\n.check {\n    display: inline-flex;\n    flex: 0 0 auto;\n    justify-content: flex-end;\n    width: 1rem;\n    color: var(--panneau-color-text);\n}\n\n.item[data-selected] {\n    background-color: var(--panneau-menu-item-bg-selected, var(--panneau-color-surface-sunken));\n}\n\n/* A focused or hovered selected item: the hover color over the selected background. */\n.item[data-selected]:is([data-focused], [data-hovered]) {\n    background-image: linear-gradient(\n        var(--panneau-list-box-item-bg-hover, var(--panneau-color-hover)),\n        var(--panneau-list-box-item-bg-hover, var(--panneau-color-hover))\n    );\n}\n"],"mappings":""}

package/dist/menu/tokens.d.ts

@@ -0,0 +1,3 @@
+/** Tokens of Menu: its sections, its footer, and the media and selection of its items. */
+export declare const menuTokens: import("..").ComponentTokens<"menu", "panneau-menu-header-font-size" | "panneau-menu-header-font-weight" | "panneau-menu-header-color" | "panneau-menu-header-text-transform" | "panneau-menu-header-letter-spacing" | "panneau-menu-footer-font-size" | "panneau-menu-footer-color" | "panneau-menu-media-size" | "panneau-menu-media-size-described" | "panneau-menu-media-radius" | "panneau-menu-item-bg-selected">;
+//# sourceMappingURL=tokens.d.ts.map

package/dist/menu/tokens.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"tokens.d.ts","sourceRoot":"","sources":["../../src/menu/tokens.ts"],"names":[],"mappings":"AAEA,0FAA0F;AAC1F,eAAO,MAAM,UAAU,yZAuBrB,CAAC"}

package/dist/menu/tokens.js

@@ -0,0 +1,31 @@
+import { defineComponentTokens } from "../theme/componentTokens.js";
+//#region src/menu/tokens.ts
+/** Tokens of Menu: its sections, its footer, and the media and selection of its items. */
+var menuTokens = defineComponentTokens("menu", {
+	/** Font size of the header of a section. */
+	"header-font-size": "var(--panneau-font-size-xs)",
+	/** Font weight of the header of a section. */
+	"header-font-weight": "var(--panneau-font-weight-medium)",
+	/** Color of the header of a section. */
+	"header-color": "var(--panneau-color-text-muted)",
+	/** Case of the header of a section: `uppercase` makes it an eyebrow, `none` keeps its text. */
+	"header-text-transform": "uppercase",
+	/** Letter spacing of the header of a section. */
+	"header-letter-spacing": "0.04em",
+	/** Font size of the footer note. */
+	"footer-font-size": "var(--panneau-font-size-xs)",
+	/** Color of the footer note. */
+	"footer-color": "var(--panneau-color-text-muted)",
+	/** Size of the leading media of an item. */
+	"media-size": "1.5rem",
+	/** Size of the leading media of an item with a description, on two lines. */
+	"media-size-described": "2rem",
+	/** Corner radius of the leading media of an item: its content is clipped to it. */
+	"media-radius": "var(--panneau-radius-full)",
+	/** Background of a selected item. */
+	"item-bg-selected": "var(--panneau-color-surface-sunken)"
+});
+//#endregion
+export { menuTokens };
+
+//# sourceMappingURL=tokens.js.map

package/dist/menu/tokens.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tokens.js","names":[],"sources":["../../src/menu/tokens.ts"],"sourcesContent":["import { defineComponentTokens } from '../theme/componentTokens';\n\n/** Tokens of Menu: its sections, its footer, and the media and selection of its items. */\nexport const menuTokens = defineComponentTokens('menu', {\n    /** Font size of the header of a section. */\n    'header-font-size': 'var(--panneau-font-size-xs)',\n    /** Font weight of the header of a section. */\n    'header-font-weight': 'var(--panneau-font-weight-medium)',\n    /** Color of the header of a section. */\n    'header-color': 'var(--panneau-color-text-muted)',\n    /** Case of the header of a section: `uppercase` makes it an eyebrow, `none` keeps its text. */\n    'header-text-transform': 'uppercase',\n    /** Letter spacing of the header of a section. */\n    'header-letter-spacing': '0.04em',\n    /** Font size of the footer note. */\n    'footer-font-size': 'var(--panneau-font-size-xs)',\n    /** Color of the footer note. */\n    'footer-color': 'var(--panneau-color-text-muted)',\n    /** Size of the leading media of an item. */\n    'media-size': '1.5rem',\n    /** Size of the leading media of an item with a description, on two lines. */\n    'media-size-described': '2rem',\n    /** Corner radius of the leading media of an item: its content is clipped to it. */\n    'media-radius': 'var(--panneau-radius-full)',\n    /** Background of a selected item. */\n    'item-bg-selected': 'var(--panneau-color-surface-sunken)',\n});\n"],"mappings":";;;AAGA,IAAa,aAAa,sBAAsB,QAAQ;;CAEpD,oBAAoB;;CAEpB,sBAAsB;;CAEtB,gBAAgB;;CAEhB,yBAAyB;;CAEzB,yBAAyB;;CAEzB,oBAAoB;;CAEpB,gBAAgB;;CAEhB,cAAc;;CAEd,wBAAwB;;CAExB,gBAAgB;;CAEhB,oBAAoB;AACxB,CAAC"}

package/dist/number-input/NumberInput.css

@@ -3,10 +3,24 @@
     overflow: hidden;
 }
 
+/* Without steppers, the control has its padding back. */
+.panneau-number-input-control.panneau-number-input-control[data-readonly] {
+    padding-inline-end: var(--panneau-input-padding-x, var(--panneau-control-padding-x));
+}
+
 .panneau-number-input-input {
     font-variant-numeric: var(--panneau-font-numeric);
 }
 
+/* The suffix sits between the value and the steppers, which have no padding of their own. */
+.panneau-number-input-suffix.panneau-number-input-suffix {
+    margin-inline: var(--panneau-space-2);
+}
+
+.panneau-number-input-control[data-readonly] .panneau-number-input-suffix {
+    margin-inline-end: 0;
+}
+
 .panneau-number-input-steppers {
     display: flex;
     flex-direction: column;
@@ -54,4 +68,8 @@
     .panneau-number-input-control.panneau-number-input-control {
         padding-inline-end: var(--panneau-space-3);
     }
+
+    .panneau-number-input-suffix.panneau-number-input-suffix {
+        margin-inline-end: 0;
+    }
 }

package/dist/number-input/NumberInput.js

@@ -42,7 +42,7 @@ function NumberInput({ label, description, errors = [], value, defaultValue, onC
 						className: cx(Field_module_default.bare, NumberInput_module_default.input, inputClassName)
 					}),
 					suffix !== void 0 ? /* @__PURE__ */ jsx("span", {
-						className: Field_module_default.adornment,
+						className: cx(Field_module_default.adornment, NumberInput_module_default.suffix),
 						children: suffix
 					}) : null,
 					isReadOnly !== true ? /* @__PURE__ */ jsxs("span", {