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

package/dist/dialog/Dialog.d.ts

@@ -5,6 +5,11 @@ export interface DialogProps extends Pick<ModalOverlayProps, 'isOpen' | 'default
     title: ReactNode;
     /** Content, or a function that gets `close()`. */
     children?: ReactNode | ((close: () => void) => ReactNode);
+    /**
+     * More content in the header, between the title and the close button: a switcher, a few
+     * actions. On phones, it goes under the title. A function gets `close()`.
+     */
+    headerContent?: ReactNode | ((close: () => void) => ReactNode);
     /** Buttons at the bottom, or a function that gets `close()`. */
     footer?: ReactNode | ((close: () => void) => ReactNode);
     /**
@@ -14,7 +19,13 @@ export interface DialogProps extends Pick<ModalOverlayProps, 'isOpen' | 'default
     isDismissable?: boolean;
     /** `alertdialog` for confirmations and interruptions. Defaults to `dialog`. */
     role?: 'dialog' | 'alertdialog';
-    size?: 'sm' | 'md' | 'lg';
+    /** Maximum width: `sm`, `md` (the default), `lg`, or `xl` for pickers and editors. */
+    size?: 'sm' | 'md' | 'lg' | 'xl';
+    /**
+     * On phones, takes the whole screen instead of opening as a sheet at the bottom: for dialogs
+     * that need all the room they can get, such as pickers.
+     */
+    fullScreenOnPhone?: boolean;
     className?: string;
     overlayClassName?: string;
     headerClassName?: string;
@@ -24,8 +35,9 @@ export interface DialogProps extends Pick<ModalOverlayProps, 'isOpen' | 'default
 /**
  * A modal dialog. Controlled with `isOpen` and `onOpenChange`, or inside a `DialogTrigger` with
  * its button as the first child. It traps focus, closes with Escape, and returns focus when it
- * closes. On phones, it opens as a sheet at the bottom of the screen.
+ * closes. On phones, it opens as a sheet at the bottom of the screen, or takes the whole screen with
+ * `fullScreenOnPhone`.
  */
-export declare function Dialog({ title, children, footer, isDismissable, role, size, className, overlayClassName, headerClassName, bodyClassName, footerClassName, ...props }: DialogProps): import("react").JSX.Element | null;
+export declare function Dialog({ title, children, headerContent, footer, isDismissable, role, size, fullScreenOnPhone, className, overlayClassName, headerClassName, bodyClassName, footerClassName, ...props }: DialogProps): import("react").JSX.Element | null;
 export { DialogTrigger } from 'react-aria-components';
 //# sourceMappingURL=Dialog.d.ts.map

package/dist/dialog/Dialog.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Dialog.d.ts","sourceRoot":"","sources":["../../src/dialog/Dialog.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,EAKH,KAAK,iBAAiB,EACzB,MAAM,uBAAuB,CAAC;AAS/B,MAAM,WAAW,WAAY,SAAQ,IAAI,CACrC,iBAAiB,EACjB,QAAQ,GAAG,aAAa,GAAG,cAAc,GAAG,2BAA2B,CAC1E;IACG,mDAAmD;IACnD,KAAK,EAAE,SAAS,CAAC;IACjB,kDAAkD;IAClD,QAAQ,CAAC,EAAE,SAAS,GAAG,CAAC,CAAC,KAAK,EAAE,MAAM,IAAI,KAAK,SAAS,CAAC,CAAC;IAC1D,gEAAgE;IAChE,MAAM,CAAC,EAAE,SAAS,GAAG,CAAC,CAAC,KAAK,EAAE,MAAM,IAAI,KAAK,SAAS,CAAC,CAAC;IACxD;;;OAGG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,+EAA+E;IAC/E,IAAI,CAAC,EAAE,QAAQ,GAAG,aAAa,CAAC;IAChC,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IAC1B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,eAAe,CAAC,EAAE,MAAM,CAAC;CAC5B;AAED;;;;GAIG;AACH,wBAAgB,MAAM,CAAC,EACnB,KAAK,EACL,QAAQ,EACR,MAAM,EACN,aAAoB,EACpB,IAAe,EACf,IAAW,EACX,SAAS,EACT,gBAAgB,EAChB,eAAe,EACf,aAAa,EACb,eAAe,EACf,GAAG,KAAK,EACX,EAAE,WAAW,sCA6Cb;AAED,OAAO,EAAE,aAAa,EAAE,MAAM,uBAAuB,CAAC"}
+{"version":3,"file":"Dialog.d.ts","sourceRoot":"","sources":["../../src/dialog/Dialog.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,EAKH,KAAK,iBAAiB,EACzB,MAAM,uBAAuB,CAAC;AAS/B,MAAM,WAAW,WAAY,SAAQ,IAAI,CACrC,iBAAiB,EACjB,QAAQ,GAAG,aAAa,GAAG,cAAc,GAAG,2BAA2B,CAC1E;IACG,mDAAmD;IACnD,KAAK,EAAE,SAAS,CAAC;IACjB,kDAAkD;IAClD,QAAQ,CAAC,EAAE,SAAS,GAAG,CAAC,CAAC,KAAK,EAAE,MAAM,IAAI,KAAK,SAAS,CAAC,CAAC;IAC1D;;;OAGG;IACH,aAAa,CAAC,EAAE,SAAS,GAAG,CAAC,CAAC,KAAK,EAAE,MAAM,IAAI,KAAK,SAAS,CAAC,CAAC;IAC/D,gEAAgE;IAChE,MAAM,CAAC,EAAE,SAAS,GAAG,CAAC,CAAC,KAAK,EAAE,MAAM,IAAI,KAAK,SAAS,CAAC,CAAC;IACxD;;;OAGG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,+EAA+E;IAC/E,IAAI,CAAC,EAAE,QAAQ,GAAG,aAAa,CAAC;IAChC,sFAAsF;IACtF,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IACjC;;;OAGG;IACH,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,eAAe,CAAC,EAAE,MAAM,CAAC;CAC5B;AAED;;;;;GAKG;AACH,wBAAgB,MAAM,CAAC,EACnB,KAAK,EACL,QAAQ,EACR,aAAa,EACb,MAAM,EACN,aAAoB,EACpB,IAAe,EACf,IAAW,EACX,iBAAyB,EACzB,SAAS,EACT,gBAAgB,EAChB,eAAe,EACf,aAAa,EACb,eAAe,EACf,GAAG,KAAK,EACX,EAAE,WAAW,sCA0Db;AAED,OAAO,EAAE,aAAa,EAAE,MAAM,uBAAuB,CAAC"}

package/dist/dialog/Dialog.js

@@ -11,9 +11,10 @@ import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 /**
 * A modal dialog. Controlled with `isOpen` and `onOpenChange`, or inside a `DialogTrigger` with
 * its button as the first child. It traps focus, closes with Escape, and returns focus when it
-* closes. On phones, it opens as a sheet at the bottom of the screen.
+* closes. On phones, it opens as a sheet at the bottom of the screen, or takes the whole screen with
+* `fullScreenOnPhone`.
 */
-function Dialog$1({ title, children, footer, isDismissable = true, role = "dialog", size = "md", className, overlayClassName, headerClassName, bodyClassName, footerClassName, ...props }) {
+function Dialog$1({ title, children, headerContent, footer, isDismissable = true, role = "dialog", size = "md", fullScreenOnPhone = false, className, overlayClassName, headerClassName, bodyClassName, footerClassName, ...props }) {
 	const intl = usePanneauIntl();
 	const container = usePortalContainer();
 	if (container === null) return null;
@@ -23,24 +24,31 @@ function Dialog$1({ title, children, footer, isDismissable = true, role = "dialo
 		className: cx(Dialog_module_default.overlay, overlayClassName),
 		UNSTABLE_portalContainer: container,
 		children: /* @__PURE__ */ jsx(Modal, {
-			className: cx(Dialog_module_default.modal, Dialog_module_default[size]),
+			className: cx(Dialog_module_default.modal, Dialog_module_default[size], fullScreenOnPhone && Dialog_module_default.fullScreenOnPhone),
 			children: /* @__PURE__ */ jsx(Dialog, {
 				role,
 				className: cx("panneau-dialog", Dialog_module_default.dialog, className),
 				children: ({ close }) => /* @__PURE__ */ jsxs(Fragment, { children: [
 					/* @__PURE__ */ jsxs("div", {
 						className: cx(Dialog_module_default.header, headerClassName),
-						children: [/* @__PURE__ */ jsx(Heading, {
-							slot: "title",
-							className: Dialog_module_default.title,
-							children: title
-						}), isDismissable ? /* @__PURE__ */ jsx(IconButton, {
-							icon: X,
-							size: "sm",
-							label: intl.formatMessage(messages.close),
-							showTooltip: false,
-							onPress: close
-						}) : null]
+						children: [
+							/* @__PURE__ */ jsx(Heading, {
+								slot: "title",
+								className: Dialog_module_default.title,
+								children: title
+							}),
+							headerContent !== void 0 && headerContent !== null ? /* @__PURE__ */ jsx("div", {
+								className: Dialog_module_default.headerContent,
+								children: typeof headerContent === "function" ? headerContent(close) : headerContent
+							}) : null,
+							isDismissable ? /* @__PURE__ */ jsx(IconButton, {
+								icon: X,
+								size: "sm",
+								label: intl.formatMessage(messages.close),
+								showTooltip: false,
+								onPress: close
+							}) : null
+						]
 					}),
 					/* @__PURE__ */ jsx("div", {
 						className: cx(Dialog_module_default.body, bodyClassName),

package/dist/dialog/Dialog.js.map

@@ -1 +1 @@
-{"version":3,"file":"Dialog.js","names":["Dialog","styles","AriaDialog","_Fragment"],"sources":["../../src/dialog/Dialog.tsx"],"sourcesContent":["import { X } from 'lucide-react';\nimport type { ReactNode } from 'react';\nimport {\n    Dialog as AriaDialog,\n    Heading,\n    Modal,\n    ModalOverlay,\n    type ModalOverlayProps,\n} from 'react-aria-components';\n\nimport { IconButton } from '../icon-button/IconButton';\nimport { messages } from '../intl/messages';\nimport { usePanneauIntl } from '../intl/usePanneauIntl';\nimport { usePortalContainer } from '../root/PanneauRoot';\nimport { cx } from '../utils/cx';\nimport styles from './Dialog.module.css';\n\nexport interface DialogProps extends Pick<\n    ModalOverlayProps,\n    'isOpen' | 'defaultOpen' | 'onOpenChange' | 'isKeyboardDismissDisabled'\n> {\n    /** Heading of the dialog, which also labels it. */\n    title: ReactNode;\n    /** Content, or a function that gets `close()`. */\n    children?: ReactNode | ((close: () => void) => ReactNode);\n    /** Buttons at the bottom, or a function that gets `close()`. */\n    footer?: ReactNode | ((close: () => void) => ReactNode);\n    /**\n     * Closes on a click outside and shows a close button. Defaults to true. Turn it off for dialogs\n     * that need an answer.\n     */\n    isDismissable?: boolean;\n    /** `alertdialog` for confirmations and interruptions. Defaults to `dialog`. */\n    role?: 'dialog' | 'alertdialog';\n    size?: 'sm' | 'md' | 'lg';\n    className?: string;\n    overlayClassName?: string;\n    headerClassName?: string;\n    bodyClassName?: string;\n    footerClassName?: string;\n}\n\n/**\n * A modal dialog. Controlled with `isOpen` and `onOpenChange`, or inside a `DialogTrigger` with\n * its button as the first child. It traps focus, closes with Escape, and returns focus when it\n * closes. On phones, it opens as a sheet at the bottom of the screen.\n */\nexport function Dialog({\n    title,\n    children,\n    footer,\n    isDismissable = true,\n    role = 'dialog',\n    size = 'md',\n    className,\n    overlayClassName,\n    headerClassName,\n    bodyClassName,\n    footerClassName,\n    ...props\n}: DialogProps) {\n    const intl = usePanneauIntl();\n    const container = usePortalContainer();\n    if (container === null) {\n        return null;\n    }\n    return (\n        <ModalOverlay\n            {...props}\n            isDismissable={isDismissable}\n            className={cx(styles.overlay, overlayClassName)}\n            UNSTABLE_portalContainer={container}\n        >\n            <Modal className={cx(styles.modal, styles[size])}>\n                <AriaDialog role={role} className={cx('panneau-dialog', styles.dialog, className)}>\n                    {({ close }) => (\n                        <>\n                            <div className={cx(styles.header, headerClassName)}>\n                                <Heading slot=\"title\" className={styles.title}>\n                                    {title}\n                                </Heading>\n                                {isDismissable ? (\n                                    <IconButton\n                                        icon={X}\n                                        size=\"sm\"\n                                        label={intl.formatMessage(messages.close)}\n                                        showTooltip={false}\n                                        onPress={close}\n                                    />\n                                ) : null}\n                            </div>\n                            <div className={cx(styles.body, bodyClassName)}>\n                                {typeof children === 'function' ? children(close) : children}\n                            </div>\n                            {footer !== undefined && footer !== null ? (\n                                <div className={cx(styles.footer, footerClassName)}>\n                                    {typeof footer === 'function' ? footer(close) : footer}\n                                </div>\n                            ) : null}\n                        </>\n                    )}\n                </AriaDialog>\n            </Modal>\n        </ModalOverlay>\n    );\n}\n\nexport { DialogTrigger } from 'react-aria-components';\n"],"mappings":";;;;;;;;;;;;;;;AA+CA,SAAgBA,SAAO,EACnB,OACA,UACA,QACA,gBAAgB,MAChB,OAAO,UACP,OAAO,MACP,WACA,kBACA,iBACA,eACA,iBACA,GAAG,SACS;CACZ,MAAM,OAAO,eAAe;CAC5B,MAAM,YAAY,mBAAmB;CACrC,IAAI,cAAc,MACd,OAAO;CAEX,OACI,oBAAC,cAAD;EACI,GAAI;EACW;EACf,WAAW,GAAGC,sBAAO,SAAS,gBAAgB;EAC9C,0BAA0B;EAE1B,UAAA,oBAAC,OAAD;GAAO,WAAW,GAAGA,sBAAO,OAAOA,sBAAO,KAAK;GAC3C,UAAA,oBAACC,QAAD;IAAkB;IAAM,WAAW,GAAG,kBAAkBD,sBAAO,QAAQ,SAAS;IAC1E,WAAA,EAAE,YACA,qBAAAE,UAAA,EAAA,UAAA;KACI,qBAAC,OAAD;MAAK,WAAW,GAAGF,sBAAO,QAAQ,eAAe;MAAjD,UAAA,CACI,oBAAC,SAAD;OAAS,MAAK;OAAQ,WAAWA,sBAAO;OACnC,UAAA;MACI,CAAA,GACR,gBACG,oBAAC,YAAD;OACI,MAAM;OACN,MAAK;OACL,OAAO,KAAK,cAAc,SAAS,KAAK;OACxC,aAAa;OACb,SAAS;MAAM,CAAA,IAEnB,IACH;;KACL,oBAAC,OAAD;MAAK,WAAW,GAAGA,sBAAO,MAAM,aAAa;MACxC,UAAA,OAAO,aAAa,aAAa,SAAS,KAAK,IAAI;KACnD,CAAA;KACJ,WAAW,KAAA,KAAa,WAAW,OAChC,oBAAC,OAAD;MAAK,WAAW,GAAGA,sBAAO,QAAQ,eAAe;MAC5C,UAAA,OAAO,WAAW,aAAa,OAAO,KAAK,IAAI;KAC/C,CAAA,IACL;IACR,EAAA,CAAA;GAEI,CAAA;EACT,CAAA;CACG,CAAA;AAEtB"}
+{"version":3,"file":"Dialog.js","names":["Dialog","styles","AriaDialog","_Fragment"],"sources":["../../src/dialog/Dialog.tsx"],"sourcesContent":["import { X } from 'lucide-react';\nimport type { ReactNode } from 'react';\nimport {\n    Dialog as AriaDialog,\n    Heading,\n    Modal,\n    ModalOverlay,\n    type ModalOverlayProps,\n} from 'react-aria-components';\n\nimport { IconButton } from '../icon-button/IconButton';\nimport { messages } from '../intl/messages';\nimport { usePanneauIntl } from '../intl/usePanneauIntl';\nimport { usePortalContainer } from '../root/PanneauRoot';\nimport { cx } from '../utils/cx';\nimport styles from './Dialog.module.css';\n\nexport interface DialogProps extends Pick<\n    ModalOverlayProps,\n    'isOpen' | 'defaultOpen' | 'onOpenChange' | 'isKeyboardDismissDisabled'\n> {\n    /** Heading of the dialog, which also labels it. */\n    title: ReactNode;\n    /** Content, or a function that gets `close()`. */\n    children?: ReactNode | ((close: () => void) => ReactNode);\n    /**\n     * More content in the header, between the title and the close button: a switcher, a few\n     * actions. On phones, it goes under the title. A function gets `close()`.\n     */\n    headerContent?: ReactNode | ((close: () => void) => ReactNode);\n    /** Buttons at the bottom, or a function that gets `close()`. */\n    footer?: ReactNode | ((close: () => void) => ReactNode);\n    /**\n     * Closes on a click outside and shows a close button. Defaults to true. Turn it off for dialogs\n     * that need an answer.\n     */\n    isDismissable?: boolean;\n    /** `alertdialog` for confirmations and interruptions. Defaults to `dialog`. */\n    role?: 'dialog' | 'alertdialog';\n    /** Maximum width: `sm`, `md` (the default), `lg`, or `xl` for pickers and editors. */\n    size?: 'sm' | 'md' | 'lg' | 'xl';\n    /**\n     * On phones, takes the whole screen instead of opening as a sheet at the bottom: for dialogs\n     * that need all the room they can get, such as pickers.\n     */\n    fullScreenOnPhone?: boolean;\n    className?: string;\n    overlayClassName?: string;\n    headerClassName?: string;\n    bodyClassName?: string;\n    footerClassName?: string;\n}\n\n/**\n * A modal dialog. Controlled with `isOpen` and `onOpenChange`, or inside a `DialogTrigger` with\n * its button as the first child. It traps focus, closes with Escape, and returns focus when it\n * closes. On phones, it opens as a sheet at the bottom of the screen, or takes the whole screen with\n * `fullScreenOnPhone`.\n */\nexport function Dialog({\n    title,\n    children,\n    headerContent,\n    footer,\n    isDismissable = true,\n    role = 'dialog',\n    size = 'md',\n    fullScreenOnPhone = false,\n    className,\n    overlayClassName,\n    headerClassName,\n    bodyClassName,\n    footerClassName,\n    ...props\n}: DialogProps) {\n    const intl = usePanneauIntl();\n    const container = usePortalContainer();\n    if (container === null) {\n        return null;\n    }\n    return (\n        <ModalOverlay\n            {...props}\n            isDismissable={isDismissable}\n            className={cx(styles.overlay, overlayClassName)}\n            UNSTABLE_portalContainer={container}\n        >\n            <Modal\n                className={cx(\n                    styles.modal,\n                    styles[size],\n                    fullScreenOnPhone && styles.fullScreenOnPhone,\n                )}\n            >\n                <AriaDialog role={role} className={cx('panneau-dialog', styles.dialog, className)}>\n                    {({ close }) => (\n                        <>\n                            <div className={cx(styles.header, headerClassName)}>\n                                <Heading slot=\"title\" className={styles.title}>\n                                    {title}\n                                </Heading>\n                                {headerContent !== undefined && headerContent !== null ? (\n                                    <div className={styles.headerContent}>\n                                        {typeof headerContent === 'function'\n                                            ? headerContent(close)\n                                            : headerContent}\n                                    </div>\n                                ) : null}\n                                {isDismissable ? (\n                                    <IconButton\n                                        icon={X}\n                                        size=\"sm\"\n                                        label={intl.formatMessage(messages.close)}\n                                        showTooltip={false}\n                                        onPress={close}\n                                    />\n                                ) : null}\n                            </div>\n                            <div className={cx(styles.body, bodyClassName)}>\n                                {typeof children === 'function' ? children(close) : children}\n                            </div>\n                            {footer !== undefined && footer !== null ? (\n                                <div className={cx(styles.footer, footerClassName)}>\n                                    {typeof footer === 'function' ? footer(close) : footer}\n                                </div>\n                            ) : null}\n                        </>\n                    )}\n                </AriaDialog>\n            </Modal>\n        </ModalOverlay>\n    );\n}\n\nexport { DialogTrigger } from 'react-aria-components';\n"],"mappings":";;;;;;;;;;;;;;;;AA2DA,SAAgBA,SAAO,EACnB,OACA,UACA,eACA,QACA,gBAAgB,MAChB,OAAO,UACP,OAAO,MACP,oBAAoB,OACpB,WACA,kBACA,iBACA,eACA,iBACA,GAAG,SACS;CACZ,MAAM,OAAO,eAAe;CAC5B,MAAM,YAAY,mBAAmB;CACrC,IAAI,cAAc,MACd,OAAO;CAEX,OACI,oBAAC,cAAD;EACI,GAAI;EACW;EACf,WAAW,GAAGC,sBAAO,SAAS,gBAAgB;EAC9C,0BAA0B;EAE1B,UAAA,oBAAC,OAAD;GACI,WAAW,GACPA,sBAAO,OACPA,sBAAO,OACP,qBAAqBA,sBAAO,iBAChC;GAEA,UAAA,oBAACC,QAAD;IAAkB;IAAM,WAAW,GAAG,kBAAkBD,sBAAO,QAAQ,SAAS;IAC1E,WAAA,EAAE,YACA,qBAAAE,UAAA,EAAA,UAAA;KACI,qBAAC,OAAD;MAAK,WAAW,GAAGF,sBAAO,QAAQ,eAAe;MAAjD,UAAA;OACI,oBAAC,SAAD;QAAS,MAAK;QAAQ,WAAWA,sBAAO;QACnC,UAAA;OACI,CAAA;OACR,kBAAkB,KAAA,KAAa,kBAAkB,OAC9C,oBAAC,OAAD;QAAK,WAAWA,sBAAO;QAClB,UAAA,OAAO,kBAAkB,aACpB,cAAc,KAAK,IACnB;OACL,CAAA,IACL;OACH,gBACG,oBAAC,YAAD;QACI,MAAM;QACN,MAAK;QACL,OAAO,KAAK,cAAc,SAAS,KAAK;QACxC,aAAa;QACb,SAAS;OAAM,CAAA,IAEnB;MACH;;KACL,oBAAC,OAAD;MAAK,WAAW,GAAGA,sBAAO,MAAM,aAAa;MACxC,UAAA,OAAO,aAAa,aAAa,SAAS,KAAK,IAAI;KACnD,CAAA;KACJ,WAAW,KAAA,KAAa,WAAW,OAChC,oBAAC,OAAD;MAAK,WAAW,GAAGA,sBAAO,QAAQ,eAAe;MAC5C,UAAA,OAAO,WAAW,aAAa,OAAO,KAAK,IAAI;KAC/C,CAAA,IACL;IACR,EAAA,CAAA;GAEI,CAAA;EACT,CAAA;CACG,CAAA;AAEtB"}

package/dist/dialog/Dialog.module.js

@@ -5,26 +5,32 @@ var fade = "panneau-dialog-fade";
 var modal = "panneau-dialog-modal";
 var sm = "panneau-dialog-sm";
 var lg = "panneau-dialog-lg";
+var xl = "panneau-dialog-xl";
 var rise = "panneau-dialog-rise";
 var dialog = "panneau-dialog";
 var header = "panneau-dialog-header";
+var headerContent = "panneau-dialog-header-content";
 var title = "panneau-dialog-title";
 var body = "panneau-dialog-body";
 var footer = "panneau-dialog-footer";
+var fullScreenOnPhone = "panneau-dialog-full-screen-on-phone";
 var Dialog_module_default = {
 	overlay,
 	fade,
 	modal,
 	sm,
 	lg,
+	xl,
 	rise,
 	dialog,
 	header,
+	headerContent,
 	title,
 	body,
-	footer
+	footer,
+	fullScreenOnPhone
 };
 //#endregion
-export { body, Dialog_module_default as default, dialog, fade, footer, header, lg, modal, overlay, rise, sm, title };
+export { body, Dialog_module_default as default, dialog, fade, footer, fullScreenOnPhone, header, headerContent, lg, modal, overlay, rise, sm, title, xl };
 
 //# sourceMappingURL=Dialog.module.js.map

package/dist/dialog/Dialog.module.js.map

@@ -1 +1 @@
-{"version":3,"file":"Dialog.module.js","names":[],"sources":["../../src/dialog/Dialog.module.css"],"sourcesContent":[".overlay {\n    position: fixed;\n    inset: 0;\n    z-index: var(--panneau-z-overlay);\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    min-height: 100dvh;\n    padding: var(--panneau-space-4);\n    background-color: var(--panneau-dialog-backdrop, var(--panneau-color-backdrop));\n}\n\n.overlay[data-entering] {\n    animation: fade var(--panneau-duration) ease-out;\n}\n\n.overlay[data-exiting] {\n    animation: fade var(--panneau-duration) ease-in reverse;\n}\n\n.modal {\n    display: flex;\n    width: 100%;\n    max-width: var(--panneau-dialog-width, 32rem);\n    max-height: calc(100dvh - 2 * var(--panneau-space-4));\n    outline: none;\n}\n\n.sm {\n    max-width: var(--panneau-dialog-width-sm, 24rem);\n}\n\n.lg {\n    max-width: var(--panneau-dialog-width-lg, 48rem);\n}\n\n.modal[data-entering] {\n    animation: rise var(--panneau-duration) ease-out;\n}\n\n.dialog {\n    display: flex;\n    flex-direction: column;\n    width: 100%;\n    max-height: inherit;\n    color: var(--panneau-color-text);\n    background-color: var(--panneau-dialog-bg, var(--panneau-color-surface-raised));\n    border-radius: var(--panneau-dialog-radius, var(--panneau-radius-lg));\n    box-shadow: var(--panneau-dialog-shadow, var(--panneau-shadow-lg));\n    outline: none;\n}\n\n.header {\n    display: flex;\n    align-items: flex-start;\n    gap: var(--panneau-space-3);\n    padding: var(--panneau-space-4) var(--panneau-space-4) 0\n        var(--panneau-dialog-padding-x, var(--panneau-space-5));\n}\n\n.title {\n    flex: 1 1 auto;\n    min-width: 0;\n    padding-top: var(--panneau-space-1);\n    font-size: var(--panneau-dialog-title-font-size, var(--panneau-font-size-lg));\n    font-weight: var(--panneau-dialog-title-font-weight, var(--panneau-font-weight-bold));\n    line-height: var(--panneau-line-height-tight);\n    overflow-wrap: anywhere;\n    margin: 0;\n}\n\n.body {\n    flex: 1 1 auto;\n    min-height: 0;\n    padding: var(--panneau-space-3) var(--panneau-dialog-padding-x, var(--panneau-space-5))\n        var(--panneau-space-4);\n    overflow-y: auto;\n}\n\n.footer {\n    display: flex;\n    flex-wrap: wrap;\n    justify-content: flex-end;\n    gap: var(--panneau-space-2);\n    padding: var(--panneau-space-3) var(--panneau-dialog-padding-x, var(--panneau-space-5))\n        var(--panneau-space-4);\n    border-top: var(--panneau-border-width) solid var(--panneau-color-border);\n}\n\n/* Phones: the dialog is a sheet at the bottom, with full-width buttons. */\n@media (max-width: 30rem) {\n    .overlay {\n        align-items: flex-end;\n        padding: 0;\n    }\n\n    .modal,\n    .sm,\n    .lg {\n        max-width: none;\n        max-height: calc(100dvh - var(--panneau-space-8));\n    }\n\n    .dialog {\n        border-end-start-radius: 0;\n        border-end-end-radius: 0;\n        padding-bottom: env(safe-area-inset-bottom);\n    }\n\n    .footer {\n        flex-direction: column-reverse;\n    }\n\n    .footer > * {\n        width: 100%;\n    }\n}\n\n@keyframes fade {\n    from {\n        opacity: 0;\n    }\n}\n\n@keyframes rise {\n    from {\n        opacity: 0;\n        transform: translateY(0.5rem);\n    }\n}\n"],"mappings":""}
+{"version":3,"file":"Dialog.module.js","names":[],"sources":["../../src/dialog/Dialog.module.css"],"sourcesContent":[".overlay {\n    position: fixed;\n    inset: 0;\n    z-index: var(--panneau-z-overlay);\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    min-height: 100dvh;\n    padding: var(--panneau-space-4);\n    background-color: var(--panneau-dialog-backdrop, var(--panneau-color-backdrop));\n}\n\n.overlay[data-entering] {\n    animation: fade var(--panneau-duration) ease-out;\n}\n\n.overlay[data-exiting] {\n    animation: fade var(--panneau-duration) ease-in reverse;\n}\n\n.modal {\n    display: flex;\n    width: 100%;\n    max-width: var(--panneau-dialog-width, 32rem);\n    max-height: calc(100dvh - 2 * var(--panneau-space-4));\n    outline: none;\n}\n\n.sm {\n    max-width: var(--panneau-dialog-width-sm, 24rem);\n}\n\n.lg {\n    max-width: var(--panneau-dialog-width-lg, 48rem);\n}\n\n.xl {\n    max-width: var(--panneau-dialog-width-xl, 72rem);\n}\n\n.modal[data-entering] {\n    animation: rise var(--panneau-duration) ease-out;\n}\n\n.dialog {\n    display: flex;\n    flex-direction: column;\n    width: 100%;\n    max-height: inherit;\n    color: var(--panneau-color-text);\n    background-color: var(--panneau-dialog-bg, var(--panneau-color-surface-raised));\n    border-radius: var(--panneau-dialog-radius, var(--panneau-radius-lg));\n    box-shadow: var(--panneau-dialog-shadow, var(--panneau-shadow-lg));\n    outline: none;\n}\n\n.header {\n    display: flex;\n    align-items: flex-start;\n    gap: var(--panneau-space-3);\n    padding: var(--panneau-space-4) var(--panneau-space-4) 0\n        var(--panneau-dialog-padding-x, var(--panneau-space-5));\n}\n\n.headerContent {\n    display: flex;\n    flex: 0 1 auto;\n    align-items: center;\n    gap: var(--panneau-space-2);\n    min-width: 0;\n}\n\n.title {\n    flex: 1 1 12rem;\n    min-width: 0;\n    padding-top: var(--panneau-space-1);\n    font-size: var(--panneau-dialog-title-font-size, var(--panneau-font-size-lg));\n    font-weight: var(--panneau-dialog-title-font-weight, var(--panneau-font-weight-bold));\n    line-height: var(--panneau-line-height-tight);\n    overflow-wrap: anywhere;\n    margin: 0;\n}\n\n.body {\n    flex: 1 1 auto;\n    min-height: 0;\n    padding: var(--panneau-space-3) var(--panneau-dialog-padding-x, var(--panneau-space-5))\n        var(--panneau-space-4);\n    overflow-y: auto;\n}\n\n.footer {\n    display: flex;\n    flex-wrap: wrap;\n    justify-content: flex-end;\n    gap: var(--panneau-space-2);\n    padding: var(--panneau-space-3) var(--panneau-dialog-padding-x, var(--panneau-space-5))\n        var(--panneau-space-4);\n    border-top: var(--panneau-border-width) solid var(--panneau-color-border);\n}\n\n/* Phones: the dialog is a sheet at the bottom, with full-width buttons. */\n@media (max-width: 30rem) {\n    .overlay {\n        align-items: flex-end;\n        padding: 0;\n    }\n\n    .modal,\n    .sm,\n    .lg,\n    .xl {\n        max-width: none;\n        max-height: calc(100dvh - var(--panneau-space-8));\n    }\n\n    .dialog {\n        border-end-start-radius: 0;\n        border-end-end-radius: 0;\n        padding-bottom: env(safe-area-inset-bottom);\n    }\n\n    /* The whole screen, under the notch. */\n    .fullScreenOnPhone {\n        height: 100dvh;\n        max-height: 100dvh;\n    }\n\n    .fullScreenOnPhone .dialog {\n        border-radius: 0;\n        padding-top: env(safe-area-inset-top);\n    }\n\n    /* The header's content goes under the title and the close button. */\n    .header {\n        flex-wrap: wrap;\n    }\n\n    .headerContent {\n        flex: 1 1 100%;\n        order: 1;\n    }\n\n    .footer {\n        flex-direction: column-reverse;\n    }\n\n    .footer > * {\n        width: 100%;\n    }\n}\n\n@keyframes fade {\n    from {\n        opacity: 0;\n    }\n}\n\n@keyframes rise {\n    from {\n        opacity: 0;\n        transform: translateY(0.5rem);\n    }\n}\n"],"mappings":""}

package/dist/dialog/tokens.d.ts

@@ -1,3 +1,3 @@
 /** Tokens of Dialog. */
-export declare const dialogTokens: import("..").ComponentTokens<"dialog", "panneau-dialog-width" | "panneau-dialog-radius" | "panneau-dialog-padding-x" | "panneau-dialog-title-font-weight" | "panneau-dialog-bg" | "panneau-dialog-shadow" | "panneau-dialog-title-font-size" | "panneau-dialog-width-sm" | "panneau-dialog-width-lg" | "panneau-dialog-backdrop">;
+export declare const dialogTokens: import("..").ComponentTokens<"dialog", "panneau-dialog-width" | "panneau-dialog-radius" | "panneau-dialog-padding-x" | "panneau-dialog-title-font-weight" | "panneau-dialog-bg" | "panneau-dialog-shadow" | "panneau-dialog-title-font-size" | "panneau-dialog-width-sm" | "panneau-dialog-width-lg" | "panneau-dialog-width-xl" | "panneau-dialog-backdrop">;
 //# sourceMappingURL=tokens.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"tokens.d.ts","sourceRoot":"","sources":["../../src/dialog/tokens.ts"],"names":[],"mappings":"AAEA,wBAAwB;AACxB,eAAO,MAAM,YAAY,mUAqBvB,CAAC"}
+{"version":3,"file":"tokens.d.ts","sourceRoot":"","sources":["../../src/dialog/tokens.ts"],"names":[],"mappings":"AAEA,wBAAwB;AACxB,eAAO,MAAM,YAAY,+VAuBvB,CAAC"}

package/dist/dialog/tokens.js

@@ -10,6 +10,8 @@ var dialogTokens = defineComponentTokens("dialog", {
 	"width-sm": "24rem",
 	/** Maximum width of the large size. */
 	"width-lg": "48rem",
+	/** Maximum width of the extra large size, for pickers and editors. */
+	"width-xl": "72rem",
 	/** Background. */
 	bg: "var(--panneau-color-surface-raised)",
 	/** Corner radius. */

package/dist/dialog/tokens.js.map

@@ -1 +1 @@
-{"version":3,"file":"tokens.js","names":[],"sources":["../../src/dialog/tokens.ts"],"sourcesContent":["import { defineComponentTokens } from '../theme/componentTokens';\n\n/** Tokens of Dialog. */\nexport const dialogTokens = defineComponentTokens('dialog', {\n    /** Color of the backdrop. */\n    backdrop: 'var(--panneau-color-backdrop)',\n    /** Maximum width of the default size. */\n    width: '32rem',\n    /** Maximum width of the small size. */\n    'width-sm': '24rem',\n    /** Maximum width of the large size. */\n    'width-lg': '48rem',\n    /** Background. */\n    bg: 'var(--panneau-color-surface-raised)',\n    /** Corner radius. */\n    radius: 'var(--panneau-radius-lg)',\n    /** Shadow. */\n    shadow: 'var(--panneau-shadow-lg)',\n    /** Horizontal padding. */\n    'padding-x': 'var(--panneau-space-5)',\n    /** Font size of the title. */\n    'title-font-size': 'var(--panneau-font-size-lg)',\n    /** Font weight of the title. */\n    'title-font-weight': 'var(--panneau-font-weight-bold)',\n});\n"],"mappings":";;;AAGA,IAAa,eAAe,sBAAsB,UAAU;;CAExD,UAAU;;CAEV,OAAO;;CAEP,YAAY;;CAEZ,YAAY;;CAEZ,IAAI;;CAEJ,QAAQ;;CAER,QAAQ;;CAER,aAAa;;CAEb,mBAAmB;;CAEnB,qBAAqB;AACzB,CAAC"}
+{"version":3,"file":"tokens.js","names":[],"sources":["../../src/dialog/tokens.ts"],"sourcesContent":["import { defineComponentTokens } from '../theme/componentTokens';\n\n/** Tokens of Dialog. */\nexport const dialogTokens = defineComponentTokens('dialog', {\n    /** Color of the backdrop. */\n    backdrop: 'var(--panneau-color-backdrop)',\n    /** Maximum width of the default size. */\n    width: '32rem',\n    /** Maximum width of the small size. */\n    'width-sm': '24rem',\n    /** Maximum width of the large size. */\n    'width-lg': '48rem',\n    /** Maximum width of the extra large size, for pickers and editors. */\n    'width-xl': '72rem',\n    /** Background. */\n    bg: 'var(--panneau-color-surface-raised)',\n    /** Corner radius. */\n    radius: 'var(--panneau-radius-lg)',\n    /** Shadow. */\n    shadow: 'var(--panneau-shadow-lg)',\n    /** Horizontal padding. */\n    'padding-x': 'var(--panneau-space-5)',\n    /** Font size of the title. */\n    'title-font-size': 'var(--panneau-font-size-lg)',\n    /** Font weight of the title. */\n    'title-font-weight': 'var(--panneau-font-weight-bold)',\n});\n"],"mappings":";;;AAGA,IAAa,eAAe,sBAAsB,UAAU;;CAExD,UAAU;;CAEV,OAAO;;CAEP,YAAY;;CAEZ,YAAY;;CAEZ,YAAY;;CAEZ,IAAI;;CAEJ,QAAQ;;CAER,QAAQ;;CAER,aAAa;;CAEb,mBAAmB;;CAEnB,qBAAqB;AACzB,CAAC"}

package/dist/field/Field.css

@@ -132,6 +132,15 @@
     margin-inline-start: var(--panneau-space-2);
 }
 
+/* A text before or after the value reads with it, as one URL or one amount: `/pages/home`. */
+.panneau-field-adornment[data-text]:first-child {
+    margin-inline-end: 0;
+}
+
+.panneau-field-adornment[data-text]:last-child {
+    margin-inline-start: 0;
+}
+
 .panneau-field-fieldset {
     display: flex;
     flex-direction: column;

package/dist/field/Field.module.js.map

@@ -1 +1 @@
-{"version":3,"file":"Field.module.js","names":[],"sources":["../../src/field/Field.module.css"],"sourcesContent":["/* Shared look of labelled controls: label, description, errors and the control itself. */\n\n.field {\n    display: flex;\n    flex-direction: column;\n    gap: var(--panneau-field-gap, var(--panneau-space-1));\n    min-width: 0;\n}\n\n.label {\n    font-size: var(--panneau-field-label-font-size, var(--panneau-font-size-md));\n    font-weight: var(--panneau-field-label-font-weight, var(--panneau-font-weight-medium));\n    line-height: var(--panneau-line-height-tight);\n    color: var(--panneau-color-text);\n    overflow-wrap: anywhere;\n}\n\n.required {\n    margin-inline-start: 0.2em;\n    color: var(--panneau-color-danger);\n}\n\n.description {\n    font-size: var(--panneau-font-size-sm);\n    color: var(--panneau-color-text-muted);\n}\n\n.errors {\n    display: flex;\n    flex-direction: column;\n    gap: var(--panneau-space-1);\n    font-size: var(--panneau-font-size-sm);\n    color: var(--panneau-color-danger);\n}\n\n.error {\n    display: block;\n}\n\n.control {\n    display: flex;\n    align-items: center;\n    width: 100%;\n    min-width: 0;\n    min-height: var(--panneau-control-height);\n    padding: 0 var(--panneau-input-padding-x, var(--panneau-control-padding-x));\n    font-size: var(--panneau-font-size-control);\n    line-height: var(--panneau-line-height-tight);\n    color: var(--panneau-color-text);\n    background-color: var(--panneau-input-bg, var(--panneau-color-surface));\n    border: var(--panneau-input-border-width, var(--panneau-border-width)) solid\n        var(--panneau-input-border-color, var(--panneau-color-border-control));\n    border-radius: var(--panneau-input-radius, var(--panneau-radius-md));\n    transition:\n        border-color var(--panneau-duration),\n        box-shadow var(--panneau-duration);\n}\n\n.control::placeholder {\n    color: var(--panneau-color-text-muted);\n    opacity: 1;\n}\n\n.control[data-hovered],\n.control:hover {\n    border-color: var(--panneau-input-border-color-hover, var(--panneau-color-text-muted));\n}\n\n.control[data-focused],\n.control[data-focus-within],\n.control[data-focus-visible],\n.control:focus-within {\n    border-color: var(--panneau-color-focus);\n    outline: none;\n    box-shadow: 0 0 0 1px var(--panneau-color-focus);\n}\n\n.control[data-invalid] {\n    border-color: var(--panneau-color-danger);\n}\n\n.control[data-invalid][data-focused],\n.control[data-invalid][data-focus-within],\n.control[data-invalid]:focus-within {\n    box-shadow: 0 0 0 1px var(--panneau-color-danger);\n}\n\n.control[data-disabled] {\n    cursor: not-allowed;\n    opacity: 0.6;\n    background-color: var(--panneau-color-surface-sunken);\n}\n\n.control[data-readonly],\n.control[readonly] {\n    background-color: var(--panneau-color-surface-sunken);\n}\n\n/* An input inside a control (with adornments, segments or buttons): the control draws the box. */\n.bare {\n    flex: 1 1 auto;\n    min-width: 0;\n    height: 100%;\n    min-height: calc(var(--panneau-control-height) - 2 * var(--panneau-border-width));\n    padding: 0;\n    font: inherit;\n    color: inherit;\n    background: transparent;\n    border: 0;\n    outline: none;\n}\n\n.bare::placeholder {\n    color: var(--panneau-color-text-muted);\n    opacity: 1;\n}\n\n.adornment {\n    display: inline-flex;\n    flex: 0 0 auto;\n    align-items: center;\n    gap: var(--panneau-space-1);\n    color: var(--panneau-color-text-muted);\n    white-space: nowrap;\n}\n\n.adornment:first-child {\n    margin-inline-end: var(--panneau-space-2);\n}\n\n.adornment:last-child {\n    margin-inline-start: var(--panneau-space-2);\n}\n\n.fieldset {\n    display: flex;\n    flex-direction: column;\n    gap: var(--panneau-space-2);\n    min-width: 0;\n}\n\n.legend {\n    display: block;\n    float: none;\n    width: 100%;\n    margin: 0 0 var(--panneau-space-1);\n    padding: 0;\n}\n"],"mappings":""}
+{"version":3,"file":"Field.module.js","names":[],"sources":["../../src/field/Field.module.css"],"sourcesContent":["/* Shared look of labelled controls: label, description, errors and the control itself. */\n\n.field {\n    display: flex;\n    flex-direction: column;\n    gap: var(--panneau-field-gap, var(--panneau-space-1));\n    min-width: 0;\n}\n\n.label {\n    font-size: var(--panneau-field-label-font-size, var(--panneau-font-size-md));\n    font-weight: var(--panneau-field-label-font-weight, var(--panneau-font-weight-medium));\n    line-height: var(--panneau-line-height-tight);\n    color: var(--panneau-color-text);\n    overflow-wrap: anywhere;\n}\n\n.required {\n    margin-inline-start: 0.2em;\n    color: var(--panneau-color-danger);\n}\n\n.description {\n    font-size: var(--panneau-font-size-sm);\n    color: var(--panneau-color-text-muted);\n}\n\n.errors {\n    display: flex;\n    flex-direction: column;\n    gap: var(--panneau-space-1);\n    font-size: var(--panneau-font-size-sm);\n    color: var(--panneau-color-danger);\n}\n\n.error {\n    display: block;\n}\n\n.control {\n    display: flex;\n    align-items: center;\n    width: 100%;\n    min-width: 0;\n    min-height: var(--panneau-control-height);\n    padding: 0 var(--panneau-input-padding-x, var(--panneau-control-padding-x));\n    font-size: var(--panneau-font-size-control);\n    line-height: var(--panneau-line-height-tight);\n    color: var(--panneau-color-text);\n    background-color: var(--panneau-input-bg, var(--panneau-color-surface));\n    border: var(--panneau-input-border-width, var(--panneau-border-width)) solid\n        var(--panneau-input-border-color, var(--panneau-color-border-control));\n    border-radius: var(--panneau-input-radius, var(--panneau-radius-md));\n    transition:\n        border-color var(--panneau-duration),\n        box-shadow var(--panneau-duration);\n}\n\n.control::placeholder {\n    color: var(--panneau-color-text-muted);\n    opacity: 1;\n}\n\n.control[data-hovered],\n.control:hover {\n    border-color: var(--panneau-input-border-color-hover, var(--panneau-color-text-muted));\n}\n\n.control[data-focused],\n.control[data-focus-within],\n.control[data-focus-visible],\n.control:focus-within {\n    border-color: var(--panneau-color-focus);\n    outline: none;\n    box-shadow: 0 0 0 1px var(--panneau-color-focus);\n}\n\n.control[data-invalid] {\n    border-color: var(--panneau-color-danger);\n}\n\n.control[data-invalid][data-focused],\n.control[data-invalid][data-focus-within],\n.control[data-invalid]:focus-within {\n    box-shadow: 0 0 0 1px var(--panneau-color-danger);\n}\n\n.control[data-disabled] {\n    cursor: not-allowed;\n    opacity: 0.6;\n    background-color: var(--panneau-color-surface-sunken);\n}\n\n.control[data-readonly],\n.control[readonly] {\n    background-color: var(--panneau-color-surface-sunken);\n}\n\n/* An input inside a control (with adornments, segments or buttons): the control draws the box. */\n.bare {\n    flex: 1 1 auto;\n    min-width: 0;\n    height: 100%;\n    min-height: calc(var(--panneau-control-height) - 2 * var(--panneau-border-width));\n    padding: 0;\n    font: inherit;\n    color: inherit;\n    background: transparent;\n    border: 0;\n    outline: none;\n}\n\n.bare::placeholder {\n    color: var(--panneau-color-text-muted);\n    opacity: 1;\n}\n\n.adornment {\n    display: inline-flex;\n    flex: 0 0 auto;\n    align-items: center;\n    gap: var(--panneau-space-1);\n    color: var(--panneau-color-text-muted);\n    white-space: nowrap;\n}\n\n.adornment:first-child {\n    margin-inline-end: var(--panneau-space-2);\n}\n\n.adornment:last-child {\n    margin-inline-start: var(--panneau-space-2);\n}\n\n/* A text before or after the value reads with it, as one URL or one amount: `/pages/home`. */\n.adornment[data-text]:first-child {\n    margin-inline-end: 0;\n}\n\n.adornment[data-text]:last-child {\n    margin-inline-start: 0;\n}\n\n.fieldset {\n    display: flex;\n    flex-direction: column;\n    gap: var(--panneau-space-2);\n    min-width: 0;\n}\n\n.legend {\n    display: block;\n    float: none;\n    width: 100%;\n    margin: 0 0 var(--panneau-space-1);\n    padding: 0;\n}\n"],"mappings":""}

package/dist/index.d.ts

@@ -2,6 +2,9 @@ export { Alert, type AlertAppearance, type AlertProps, type AlertTone, type Aler
 export { Badge, type BadgeAppearance, type BadgeProps, type BadgeTone, type BadgeVariants, } from './badge/Badge';
 export { Button, type ButtonAppearance, type ButtonProps, type ButtonVariant, type ButtonVariants, } from './button/Button';
 export { Card, type CardProps } from './card/Card';
+export { CommandPalette, type CommandPaletteProps } from './command-palette/CommandPalette';
+export { type CommandPaletteGroup, type CommandPaletteItem, matchCommands, normalizeSearch, } from './command-palette/match';
+export { isApplePlatform, useCommandShortcut } from './command-palette/useCommandShortcut';
 export { Container, type ContainerProps } from './container/Container';
 export { Divider, type DividerProps } from './divider/Divider';
 export { Grid, GridItem, type GridItemProps, type GridProps } from './grid/Grid';
@@ -18,12 +21,16 @@ 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';
 export { type MultipleSelectProps, type OptionValue, Select, type SelectBaseProps, type SelectOption, type SelectProps, type SingleSelectProps, } from './select/Select';
 export { Inline, type InlineProps } from './inline/Inline';
 export { BREAKPOINTS, type Breakpoint, type Justification, type Responsive, type Space, } from './layout/responsive';

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

@@ -11,6 +11,9 @@ import { IconButton } from "./icon-button/IconButton.js";
 import { Alert } from "./alert/Alert.js";
 import { Badge } from "./badge/Badge.js";
 import { Card } from "./card/Card.js";
+import { matchCommands, normalizeSearch } from "./command-palette/match.js";
+import { CommandPalette } from "./command-palette/CommandPalette.js";
+import { isApplePlatform, useCommandShortcut } from "./command-palette/useCommandShortcut.js";
 import { Container } from "./container/Container.js";
 import { Divider } from "./divider/Divider.js";
 import { BREAKPOINTS } from "./layout/responsive.js";
@@ -19,14 +22,19 @@ import { Heading } from "./heading/Heading.js";
 import { Checkbox } from "./checkbox/Checkbox.js";
 import { Popover, PopoverTrigger } from "./popover/Popover.js";
 import { ComboBox } from "./combo-box/ComboBox.js";
+import { TimeInput } from "./time-input/TimeInput.js";
 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";
 import { Select } from "./select/Select.js";
 import { Inline } from "./inline/Inline.js";
 import { Prose } from "./prose/Prose.js";
@@ -44,5 +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";
-import { TimeInput } from "./time-input/TimeInput.js";
-export { Alert, BREAKPOINTS, BUILT_IN_TONES, Badge, Button, CHART_CATEGORICAL_COUNT, CHART_SEQUENTIAL_COUNT, Card, Checkbox, ComboBox, 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, 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, loadNamedIcon, mergeThemes, toneClassName, 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"}