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

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';
@@ -24,6 +27,7 @@ export { Popover, type PopoverProps, PopoverTrigger } from './popover/Popover';
 export { RadioGroup, 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,6 +22,7 @@ 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";
@@ -27,6 +31,7 @@ import { Menu, MenuItem, MenuSeparator, MenuTrigger } from "./menu/Menu.js";
 import { NumberInput } from "./number-input/NumberInput.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 +49,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, 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 };

package/dist/segmented-control/SegmentedControl.css

@@ -0,0 +1,83 @@
+.panneau-segmented-control-group {
+    --segmented-control-height: var(--panneau-control-height);
+
+    display: inline-flex;
+    gap: 2px;
+    max-width: 100%;
+    padding: var(--panneau-segmented-control-padding, 2px);
+    background-color: var(--panneau-segmented-control-bg, var(--panneau-color-surface-sunken));
+    border: var(--panneau-border-width) solid
+        var(--panneau-segmented-control-border-color, var(--panneau-color-border));
+    border-radius: var(--panneau-segmented-control-radius, var(--panneau-radius-md));
+}
+
+.panneau-segmented-control-sm {
+    --segmented-control-height: var(--panneau-control-height-sm);
+}
+
+.panneau-segmented-control-full-width {
+    display: flex;
+    width: 100%;
+}
+
+.panneau-segmented-control-segment {
+    display: inline-flex;
+    flex: 0 1 auto;
+    align-items: center;
+    justify-content: center;
+    gap: var(--panneau-space-2);
+    min-width: 0;
+    min-height: calc(
+        var(--segmented-control-height) - 2 * var(--panneau-segmented-control-padding, 2px) - 2 *
+            var(--panneau-border-width)
+    );
+    padding: 0 var(--panneau-segmented-control-segment-padding-x, var(--panneau-space-3));
+    font: inherit;
+    font-size: var(--panneau-font-size-control);
+    font-weight: var(
+        --panneau-segmented-control-segment-font-weight,
+        var(--panneau-font-weight-medium)
+    );
+    line-height: var(--panneau-line-height-tight);
+    color: var(--panneau-segmented-control-segment-color, var(--panneau-color-text-muted));
+    white-space: nowrap;
+    cursor: pointer;
+    background: transparent;
+    border: 0;
+    border-radius: calc(
+        var(--panneau-segmented-control-radius, var(--panneau-radius-md)) -
+            var(--panneau-segmented-control-padding, 2px)
+    );
+    outline: none;
+    transition:
+        background-color var(--panneau-duration),
+        color var(--panneau-duration);
+    -webkit-tap-highlight-color: transparent;
+}
+
+.panneau-segmented-control-full-width .panneau-segmented-control-segment {
+    flex: 1 1 0;
+}
+
+.panneau-segmented-control-segment[data-hovered],
+.panneau-segmented-control-segment[data-selected] {
+    color: var(--panneau-segmented-control-segment-color-selected, var(--panneau-color-text));
+}
+
+.panneau-segmented-control-segment[data-selected] {
+    background-color: var(
+        --panneau-segmented-control-segment-bg-selected,
+        var(--panneau-color-surface-raised)
+    );
+    box-shadow: var(--panneau-segmented-control-segment-shadow-selected, var(--panneau-shadow-sm));
+}
+
+.panneau-segmented-control-segment[data-focus-visible] {
+    outline: var(--panneau-focus-width) solid var(--panneau-color-focus);
+    outline-offset: 1px;
+}
+
+.panneau-segmented-control-segment[data-disabled] {
+    cursor: not-allowed;
+    opacity: 0.5;
+}

package/dist/segmented-control/SegmentedControl.d.ts

@@ -0,0 +1,35 @@
+import { type ReactNode } from 'react';
+import { type IconComponent } from '../icon/Icon';
+/** One choice of a segmented control. */
+export interface SegmentedControlOption {
+    value: string;
+    label: ReactNode;
+    /** Text for typeahead and assistive technologies, when `label` isn't a string. */
+    textValue?: string;
+    icon?: IconComponent;
+    isDisabled?: boolean;
+}
+export interface SegmentedControlProps {
+    options: readonly SegmentedControlOption[];
+    /** The selected option. Controlled with `onChange`. */
+    value?: string;
+    /** The option selected first, when uncontrolled. Defaults to the first one. */
+    defaultValue?: string;
+    onChange?: (value: string) => void;
+    /** Accessible name of the group. Without a visible label, it is required. */
+    'aria-label'?: string;
+    'aria-labelledby'?: string;
+    size?: 'sm' | 'md';
+    /** Takes the width of its container, with segments of equal width. */
+    fullWidth?: boolean;
+    isDisabled?: boolean;
+    className?: string;
+    segmentClassName?: string;
+}
+/**
+ * A row of a few choices, one of which is always selected: a view, a mode, a library. For more
+ * than four or five choices, or long labels, use a `Select`. It is a radio group for assistive
+ * technologies, moved through with the arrow keys.
+ */
+export declare function SegmentedControl({ options, value, defaultValue, onChange, size, fullWidth, isDisabled, className, segmentClassName, ...props }: SegmentedControlProps): import("react").JSX.Element;
+//# sourceMappingURL=SegmentedControl.d.ts.map

package/dist/segmented-control/SegmentedControl.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SegmentedControl.d.ts","sourceRoot":"","sources":["../../src/segmented-control/SegmentedControl.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,SAAS,EAAY,MAAM,OAAO,CAAC;AAGjD,OAAO,EAAQ,KAAK,aAAa,EAAE,MAAM,cAAc,CAAC;AAIxD,yCAAyC;AACzC,MAAM,WAAW,sBAAsB;IACnC,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,SAAS,CAAC;IACjB,kFAAkF;IAClF,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,IAAI,CAAC,EAAE,aAAa,CAAC;IACrB,UAAU,CAAC,EAAE,OAAO,CAAC;CACxB;AAED,MAAM,WAAW,qBAAqB;IAClC,OAAO,EAAE,SAAS,sBAAsB,EAAE,CAAC;IAC3C,uDAAuD;IACvD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,+EAA+E;IAC/E,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,6EAA6E;IAC7E,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,CAAC;IACnB,sEAAsE;IACtE,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,gBAAgB,CAAC,EAAE,MAAM,CAAC;CAC7B;AAED;;;;GAIG;AACH,wBAAgB,gBAAgB,CAAC,EAC7B,OAAO,EACP,KAAK,EACL,YAAY,EACZ,QAAQ,EACR,IAAW,EACX,SAAiB,EACjB,UAAU,EACV,SAAS,EACT,gBAAgB,EAChB,GAAG,KAAK,EACX,EAAE,qBAAqB,+BA6CvB"}

package/dist/segmented-control/SegmentedControl.js

@@ -0,0 +1,44 @@
+import { cx } from "../utils/cx.js";
+import { Icon } from "../icon/Icon.js";
+import SegmentedControl_module_default from "./SegmentedControl.module.js";
+import { ToggleButton, ToggleButtonGroup } from "react-aria-components";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+//#region src/segmented-control/SegmentedControl.tsx
+/**
+* A row of a few choices, one of which is always selected: a view, a mode, a library. For more
+* than four or five choices, or long labels, use a `Select`. It is a radio group for assistive
+* technologies, moved through with the arrow keys.
+*/
+function SegmentedControl({ options, value, defaultValue, onChange, size = "md", fullWidth = false, isDisabled, className, segmentClassName, ...props }) {
+	const [uncontrolled, setUncontrolled] = useState(() => defaultValue ?? options.find((option) => option.isDisabled !== true)?.value);
+	const selected = value ?? uncontrolled;
+	return /* @__PURE__ */ jsx(ToggleButtonGroup, {
+		...props,
+		selectionMode: "single",
+		disallowEmptySelection: true,
+		isDisabled,
+		selectedKeys: selected !== void 0 ? [selected] : [],
+		onSelectionChange: (keys) => {
+			const [key] = [...keys];
+			if (key === void 0 || String(key) === selected) return;
+			setUncontrolled(String(key));
+			onChange?.(String(key));
+		},
+		className: cx("panneau-segmented-control", SegmentedControl_module_default.group, SegmentedControl_module_default[size], fullWidth && SegmentedControl_module_default.fullWidth, className),
+		children: options.map((option_0) => /* @__PURE__ */ jsxs(ToggleButton, {
+			id: option_0.value,
+			isDisabled: option_0.isDisabled,
+			...option_0.textValue !== void 0 ? { "aria-label": option_0.textValue } : {},
+			className: cx("panneau-segment", SegmentedControl_module_default.segment, segmentClassName),
+			children: [option_0.icon !== void 0 ? /* @__PURE__ */ jsx(Icon, {
+				icon: option_0.icon,
+				size: size === "sm" ? "sm" : "md"
+			}) : null, option_0.label]
+		}, option_0.value))
+	});
+}
+//#endregion
+export { SegmentedControl };
+
+//# sourceMappingURL=SegmentedControl.js.map

package/dist/segmented-control/SegmentedControl.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SegmentedControl.js","names":["option","styles"],"sources":["../../src/segmented-control/SegmentedControl.tsx"],"sourcesContent":["import { type ReactNode, useState } from 'react';\nimport { ToggleButton, ToggleButtonGroup } from 'react-aria-components';\n\nimport { Icon, type IconComponent } from '../icon/Icon';\nimport { cx } from '../utils/cx';\nimport styles from './SegmentedControl.module.css';\n\n/** One choice of a segmented control. */\nexport interface SegmentedControlOption {\n    value: string;\n    label: ReactNode;\n    /** Text for typeahead and assistive technologies, when `label` isn't a string. */\n    textValue?: string;\n    icon?: IconComponent;\n    isDisabled?: boolean;\n}\n\nexport interface SegmentedControlProps {\n    options: readonly SegmentedControlOption[];\n    /** The selected option. Controlled with `onChange`. */\n    value?: string;\n    /** The option selected first, when uncontrolled. Defaults to the first one. */\n    defaultValue?: string;\n    onChange?: (value: string) => void;\n    /** Accessible name of the group. Without a visible label, it is required. */\n    'aria-label'?: string;\n    'aria-labelledby'?: string;\n    size?: 'sm' | 'md';\n    /** Takes the width of its container, with segments of equal width. */\n    fullWidth?: boolean;\n    isDisabled?: boolean;\n    className?: string;\n    segmentClassName?: string;\n}\n\n/**\n * A row of a few choices, one of which is always selected: a view, a mode, a library. For more\n * than four or five choices, or long labels, use a `Select`. It is a radio group for assistive\n * technologies, moved through with the arrow keys.\n */\nexport function SegmentedControl({\n    options,\n    value,\n    defaultValue,\n    onChange,\n    size = 'md',\n    fullWidth = false,\n    isDisabled,\n    className,\n    segmentClassName,\n    ...props\n}: SegmentedControlProps) {\n    const [uncontrolled, setUncontrolled] = useState(\n        () => defaultValue ?? options.find((option) => option.isDisabled !== true)?.value,\n    );\n    const selected = value ?? uncontrolled;\n    return (\n        <ToggleButtonGroup\n            {...props}\n            selectionMode=\"single\"\n            disallowEmptySelection\n            isDisabled={isDisabled}\n            selectedKeys={selected !== undefined ? [selected] : []}\n            onSelectionChange={(keys) => {\n                const [key] = [...keys];\n                // React Aria reports the selected segment again when it is pressed.\n                if (key === undefined || String(key) === selected) {\n                    return;\n                }\n                setUncontrolled(String(key));\n                onChange?.(String(key));\n            }}\n            className={cx(\n                'panneau-segmented-control',\n                styles.group,\n                styles[size],\n                fullWidth && styles.fullWidth,\n                className,\n            )}\n        >\n            {options.map((option) => (\n                <ToggleButton\n                    key={option.value}\n                    id={option.value}\n                    isDisabled={option.isDisabled}\n                    {...(option.textValue !== undefined ? { 'aria-label': option.textValue } : {})}\n                    className={cx('panneau-segment', styles.segment, segmentClassName)}\n                >\n                    {option.icon !== undefined ? (\n                        <Icon icon={option.icon} size={size === 'sm' ? 'sm' : 'md'} />\n                    ) : null}\n                    {option.label}\n                </ToggleButton>\n            ))}\n        </ToggleButtonGroup>\n    );\n}\n"],"mappings":";;;;;;;;;;;;AAwCA,SAAgB,iBAAiB,EAC7B,SACA,OACA,cACA,UACA,OAAO,MACP,YAAY,OACZ,YACA,WACA,kBACA,GAAG,SACmB;CACtB,MAAM,CAAC,cAAc,mBAAmB,eAC9B,gBAAgB,QAAQ,MAAM,WAAW,OAAO,eAAe,IAAI,CAAC,EAAE,KAChF;CACA,MAAM,WAAW,SAAS;CAC1B,OACI,oBAAC,mBAAD;EACI,GAAI;EACJ,eAAc;EACd,wBAAA;EACY;EACZ,cAAc,aAAa,KAAA,IAAY,CAAC,QAAQ,IAAI,CAAA;EACpD,oBAAoB,SAAS;GACzB,MAAM,CAAC,OAAO,CAAC,GAAG,IAAI;GAEtB,IAAI,QAAQ,KAAA,KAAa,OAAO,GAAG,MAAM,UACrC;GAEJ,gBAAgB,OAAO,GAAG,CAAC;GAC3B,WAAW,OAAO,GAAG,CAAC;EAC1B;EACA,WAAW,GACP,6BACAC,gCAAO,OACPA,gCAAO,OACP,aAAaA,gCAAO,WACpB,SACJ;EAEC,UAAA,QAAQ,KAAKD,aACV,qBAAC,cAAD;GAEI,IAAIA,SAAO;GACX,YAAYA,SAAO;GACnB,GAAKA,SAAO,cAAc,KAAA,IAAY,EAAE,cAAcA,SAAO,UAAU,IAAI,CAAC;GAC5E,WAAW,GAAG,mBAAmBC,gCAAO,SAAS,gBAAgB;GALrE,UAAA,CAOKD,SAAO,SAAS,KAAA,IACb,oBAAC,MAAD;IAAM,MAAMA,SAAO;IAAM,MAAM,SAAS,OAAO,OAAO;GAAK,CAAA,IAC3D,MACHA,SAAO,KACE;EAVLA,GAAAA,SAAO,KAUF,CACjB;CACc,CAAA;AAE3B"}

package/dist/segmented-control/SegmentedControl.module.js

@@ -0,0 +1,16 @@
+import "./SegmentedControl.css";
+//#region src/segmented-control/SegmentedControl.module.css
+var group = "panneau-segmented-control-group";
+var sm = "panneau-segmented-control-sm";
+var fullWidth = "panneau-segmented-control-full-width";
+var segment = "panneau-segmented-control-segment";
+var SegmentedControl_module_default = {
+	group,
+	sm,
+	fullWidth,
+	segment
+};
+//#endregion
+export { SegmentedControl_module_default as default, fullWidth, group, segment, sm };
+
+//# sourceMappingURL=SegmentedControl.module.js.map

package/dist/segmented-control/SegmentedControl.module.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SegmentedControl.module.js","names":[],"sources":["../../src/segmented-control/SegmentedControl.module.css"],"sourcesContent":[".group {\n    --segmented-control-height: var(--panneau-control-height);\n\n    display: inline-flex;\n    gap: 2px;\n    max-width: 100%;\n    padding: var(--panneau-segmented-control-padding, 2px);\n    background-color: var(--panneau-segmented-control-bg, var(--panneau-color-surface-sunken));\n    border: var(--panneau-border-width) solid\n        var(--panneau-segmented-control-border-color, var(--panneau-color-border));\n    border-radius: var(--panneau-segmented-control-radius, var(--panneau-radius-md));\n}\n\n.sm {\n    --segmented-control-height: var(--panneau-control-height-sm);\n}\n\n.fullWidth {\n    display: flex;\n    width: 100%;\n}\n\n.segment {\n    display: inline-flex;\n    flex: 0 1 auto;\n    align-items: center;\n    justify-content: center;\n    gap: var(--panneau-space-2);\n    min-width: 0;\n    min-height: calc(\n        var(--segmented-control-height) - 2 * var(--panneau-segmented-control-padding, 2px) - 2 *\n            var(--panneau-border-width)\n    );\n    padding: 0 var(--panneau-segmented-control-segment-padding-x, var(--panneau-space-3));\n    font: inherit;\n    font-size: var(--panneau-font-size-control);\n    font-weight: var(\n        --panneau-segmented-control-segment-font-weight,\n        var(--panneau-font-weight-medium)\n    );\n    line-height: var(--panneau-line-height-tight);\n    color: var(--panneau-segmented-control-segment-color, var(--panneau-color-text-muted));\n    white-space: nowrap;\n    cursor: pointer;\n    background: transparent;\n    border: 0;\n    border-radius: calc(\n        var(--panneau-segmented-control-radius, var(--panneau-radius-md)) -\n            var(--panneau-segmented-control-padding, 2px)\n    );\n    outline: none;\n    transition:\n        background-color var(--panneau-duration),\n        color var(--panneau-duration);\n    -webkit-tap-highlight-color: transparent;\n}\n\n.fullWidth .segment {\n    flex: 1 1 0;\n}\n\n.segment[data-hovered],\n.segment[data-selected] {\n    color: var(--panneau-segmented-control-segment-color-selected, var(--panneau-color-text));\n}\n\n.segment[data-selected] {\n    background-color: var(\n        --panneau-segmented-control-segment-bg-selected,\n        var(--panneau-color-surface-raised)\n    );\n    box-shadow: var(--panneau-segmented-control-segment-shadow-selected, var(--panneau-shadow-sm));\n}\n\n.segment[data-focus-visible] {\n    outline: var(--panneau-focus-width) solid var(--panneau-color-focus);\n    outline-offset: 1px;\n}\n\n.segment[data-disabled] {\n    cursor: not-allowed;\n    opacity: 0.5;\n}\n"],"mappings":""}

package/dist/segmented-control/tokens.d.ts

@@ -0,0 +1,3 @@
+/** Tokens of SegmentedControl. */
+export declare const segmentedControlTokens: import("..").ComponentTokens<"segmented-control", "panneau-segmented-control-radius" | "panneau-segmented-control-padding" | "panneau-segmented-control-bg" | "panneau-segmented-control-border-color" | "panneau-segmented-control-segment-padding-x" | "panneau-segmented-control-segment-font-weight" | "panneau-segmented-control-segment-color" | "panneau-segmented-control-segment-color-selected" | "panneau-segmented-control-segment-bg-selected" | "panneau-segmented-control-segment-shadow-selected">;
+//# sourceMappingURL=tokens.d.ts.map

package/dist/segmented-control/tokens.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"tokens.d.ts","sourceRoot":"","sources":["../../src/segmented-control/tokens.ts"],"names":[],"mappings":"AAEA,kCAAkC;AAClC,eAAO,MAAM,sBAAsB,ofAqBjC,CAAC"}

package/dist/segmented-control/tokens.js

@@ -0,0 +1,29 @@
+import { defineComponentTokens } from "../theme/componentTokens.js";
+//#region src/segmented-control/tokens.ts
+/** Tokens of SegmentedControl. */
+var segmentedControlTokens = defineComponentTokens("segmented-control", {
+	/** Background of the group, behind the segments. */
+	bg: "var(--panneau-color-surface-sunken)",
+	/** Color of the border around the group. */
+	"border-color": "var(--panneau-color-border)",
+	/** Corner radius of the group. */
+	radius: "var(--panneau-radius-md)",
+	/** Space between the group's border and its segments. */
+	padding: "2px",
+	/** Horizontal padding of a segment. */
+	"segment-padding-x": "var(--panneau-space-3)",
+	/** Font weight of a segment. */
+	"segment-font-weight": "var(--panneau-font-weight-medium)",
+	/** Text color of a segment. */
+	"segment-color": "var(--panneau-color-text-muted)",
+	/** Text color of the selected segment, and of a hovered one. */
+	"segment-color-selected": "var(--panneau-color-text)",
+	/** Background of the selected segment. */
+	"segment-bg-selected": "var(--panneau-color-surface-raised)",
+	/** Shadow of the selected segment. */
+	"segment-shadow-selected": "var(--panneau-shadow-sm)"
+});
+//#endregion
+export { segmentedControlTokens };
+
+//# sourceMappingURL=tokens.js.map

package/dist/segmented-control/tokens.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tokens.js","names":[],"sources":["../../src/segmented-control/tokens.ts"],"sourcesContent":["import { defineComponentTokens } from '../theme/componentTokens';\n\n/** Tokens of SegmentedControl. */\nexport const segmentedControlTokens = defineComponentTokens('segmented-control', {\n    /** Background of the group, behind the segments. */\n    bg: 'var(--panneau-color-surface-sunken)',\n    /** Color of the border around the group. */\n    'border-color': 'var(--panneau-color-border)',\n    /** Corner radius of the group. */\n    radius: 'var(--panneau-radius-md)',\n    /** Space between the group's border and its segments. */\n    padding: '2px',\n    /** Horizontal padding of a segment. */\n    'segment-padding-x': 'var(--panneau-space-3)',\n    /** Font weight of a segment. */\n    'segment-font-weight': 'var(--panneau-font-weight-medium)',\n    /** Text color of a segment. */\n    'segment-color': 'var(--panneau-color-text-muted)',\n    /** Text color of the selected segment, and of a hovered one. */\n    'segment-color-selected': 'var(--panneau-color-text)',\n    /** Background of the selected segment. */\n    'segment-bg-selected': 'var(--panneau-color-surface-raised)',\n    /** Shadow of the selected segment. */\n    'segment-shadow-selected': 'var(--panneau-shadow-sm)',\n});\n"],"mappings":";;;AAGA,IAAa,yBAAyB,sBAAsB,qBAAqB;;CAE7E,IAAI;;CAEJ,gBAAgB;;CAEhB,QAAQ;;CAER,SAAS;;CAET,qBAAqB;;CAErB,uBAAuB;;CAEvB,iBAAiB;;CAEjB,0BAA0B;;CAE1B,uBAAuB;;CAEvB,2BAA2B;AAC/B,CAAC"}

package/dist/select/ListBox.css

@@ -47,15 +47,22 @@
     display: flex;
     flex: 1 1 auto;
     flex-direction: column;
+    gap: 0.125rem;
     min-width: 0;
 }
 
+/* An option with a description has two lines: more room above and below them. */
+.panneau-list-box-item:has(.panneau-list-box-item-description) {
+    padding-block: var(--panneau-list-box-item-padding-y-described, var(--panneau-space-2));
+}
+
 .panneau-list-box-item-label {
     overflow-wrap: anywhere;
 }
 
 .panneau-list-box-item-description {
-    font-size: var(--panneau-font-size-sm);
+    font-size: var(--panneau-font-size-xs);
+    line-height: var(--panneau-line-height-tight);
     color: var(--panneau-color-text-muted);
 }
 

package/dist/select/ListBox.module.js

@@ -3,8 +3,8 @@ import "./ListBox.css";
 var listBox = "panneau-list-box";
 var item = "panneau-list-box-item";
 var itemText = "panneau-list-box-item-text";
-var itemLabel = "panneau-list-box-item-label";
 var itemDescription = "panneau-list-box-item-description";
+var itemLabel = "panneau-list-box-item-label";
 var check = "panneau-list-box-check";
 var placeholder = "panneau-list-box-placeholder";
 var empty = "panneau-list-box-empty";
@@ -16,8 +16,8 @@ var ListBox_module_default = {
 	listBox,
 	item,
 	itemText,
-	itemLabel,
 	itemDescription,
+	itemLabel,
 	check,
 	placeholder,
 	empty,

package/dist/select/ListBox.module.js.map

@@ -1 +1 @@
-{"version":3,"file":"ListBox.module.js","names":[],"sources":["../../src/select/ListBox.module.css"],"sourcesContent":["/* Options of selects, combo boxes and menus. */\n\n.listBox {\n    display: flex;\n    flex-direction: column;\n    max-height: inherit;\n    padding: var(--panneau-list-box-padding, var(--panneau-space-1));\n    overflow: auto;\n    outline: none;\n}\n\n.item {\n    display: flex;\n    align-items: center;\n    gap: var(--panneau-space-2);\n    min-height: var(--panneau-control-height-sm);\n    padding: var(--panneau-list-box-item-padding-y, calc(var(--panneau-row-padding-y) / 2))\n        var(--panneau-list-box-item-padding-x, var(--panneau-space-2));\n    font-size: var(--panneau-font-size-control);\n    line-height: var(--panneau-line-height-tight);\n    color: var(--panneau-color-text);\n    cursor: default;\n    border-radius: var(--panneau-list-box-item-radius, var(--panneau-radius-sm));\n    outline: none;\n}\n\n.item[data-focused],\n.item[data-hovered] {\n    background-color: var(--panneau-list-box-item-bg-hover, var(--panneau-color-hover));\n}\n\n.item[data-focus-visible] {\n    outline: var(--panneau-focus-width) solid var(--panneau-color-focus);\n    outline-offset: -2px;\n}\n\n.item[data-disabled] {\n    cursor: not-allowed;\n    opacity: 0.5;\n}\n\n.item[data-danger] {\n    color: var(--panneau-color-danger);\n}\n\n.itemText {\n    display: flex;\n    flex: 1 1 auto;\n    flex-direction: column;\n    min-width: 0;\n}\n\n.itemLabel {\n    overflow-wrap: anywhere;\n}\n\n.itemDescription {\n    font-size: var(--panneau-font-size-sm);\n    color: var(--panneau-color-text-muted);\n}\n\n.check {\n    flex: 0 0 auto;\n    width: 1rem;\n    color: var(--panneau-color-text);\n}\n\n.placeholder {\n    color: var(--panneau-color-text-muted);\n}\n\n.empty {\n    padding: var(--panneau-space-2);\n    font-size: var(--panneau-font-size-sm);\n    color: var(--panneau-color-text-muted);\n}\n\n.separator {\n    height: 1px;\n    margin: var(--panneau-space-1) 0;\n    background-color: var(--panneau-color-border);\n}\n\n.trigger {\n    justify-content: space-between;\n    gap: var(--panneau-space-2);\n    text-align: start;\n    cursor: pointer;\n}\n\n.value {\n    flex: 1 1 auto;\n    min-width: 0;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n}\n\n.value[data-placeholder] {\n    color: var(--panneau-color-text-muted);\n}\n\n.chevron {\n    color: var(--panneau-color-text-muted);\n}\n"],"mappings":""}
+{"version":3,"file":"ListBox.module.js","names":[],"sources":["../../src/select/ListBox.module.css"],"sourcesContent":["/* Options of selects, combo boxes and menus. */\n\n.listBox {\n    display: flex;\n    flex-direction: column;\n    max-height: inherit;\n    padding: var(--panneau-list-box-padding, var(--panneau-space-1));\n    overflow: auto;\n    outline: none;\n}\n\n.item {\n    display: flex;\n    align-items: center;\n    gap: var(--panneau-space-2);\n    min-height: var(--panneau-control-height-sm);\n    padding: var(--panneau-list-box-item-padding-y, calc(var(--panneau-row-padding-y) / 2))\n        var(--panneau-list-box-item-padding-x, var(--panneau-space-2));\n    font-size: var(--panneau-font-size-control);\n    line-height: var(--panneau-line-height-tight);\n    color: var(--panneau-color-text);\n    cursor: default;\n    border-radius: var(--panneau-list-box-item-radius, var(--panneau-radius-sm));\n    outline: none;\n}\n\n.item[data-focused],\n.item[data-hovered] {\n    background-color: var(--panneau-list-box-item-bg-hover, var(--panneau-color-hover));\n}\n\n.item[data-focus-visible] {\n    outline: var(--panneau-focus-width) solid var(--panneau-color-focus);\n    outline-offset: -2px;\n}\n\n.item[data-disabled] {\n    cursor: not-allowed;\n    opacity: 0.5;\n}\n\n.item[data-danger] {\n    color: var(--panneau-color-danger);\n}\n\n.itemText {\n    display: flex;\n    flex: 1 1 auto;\n    flex-direction: column;\n    gap: 0.125rem;\n    min-width: 0;\n}\n\n/* An option with a description has two lines: more room above and below them. */\n.item:has(.itemDescription) {\n    padding-block: var(--panneau-list-box-item-padding-y-described, var(--panneau-space-2));\n}\n\n.itemLabel {\n    overflow-wrap: anywhere;\n}\n\n.itemDescription {\n    font-size: var(--panneau-font-size-xs);\n    line-height: var(--panneau-line-height-tight);\n    color: var(--panneau-color-text-muted);\n}\n\n.check {\n    flex: 0 0 auto;\n    width: 1rem;\n    color: var(--panneau-color-text);\n}\n\n.placeholder {\n    color: var(--panneau-color-text-muted);\n}\n\n.empty {\n    padding: var(--panneau-space-2);\n    font-size: var(--panneau-font-size-sm);\n    color: var(--panneau-color-text-muted);\n}\n\n.separator {\n    height: 1px;\n    margin: var(--panneau-space-1) 0;\n    background-color: var(--panneau-color-border);\n}\n\n.trigger {\n    justify-content: space-between;\n    gap: var(--panneau-space-2);\n    text-align: start;\n    cursor: pointer;\n}\n\n.value {\n    flex: 1 1 auto;\n    min-width: 0;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n}\n\n.value[data-placeholder] {\n    color: var(--panneau-color-text-muted);\n}\n\n.chevron {\n    color: var(--panneau-color-text-muted);\n}\n"],"mappings":""}