@panneau/ui 5.0.0-alpha.1 → 5.0.0-alpha.2

package/dist/root/PanneauRoot.js

@@ -1,20 +1,100 @@
 import { cx } from "../utils/cx.js";
+import { getFontFaceCss, getFontStylesheets } from "../theme/fonts.js";
 import { getThemeCss, hashString } from "../theme/theme.js";
 import { ToastProvider } from "../toast/Toast.js";
 import PanneauRoot_module_default from "./PanneauRoot.module.js";
 import { I18nProvider } from "react-aria-components";
-import { jsx, jsxs } from "react/jsx-runtime";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { getPanneauMessages } from "@panneau/intl";
 import { createContext, use, useState } from "react";
 import { IntlContext, IntlProvider } from "react-intl";
+import { c } from "react/compiler-runtime";
 //#region src/root/PanneauRoot.tsx
 /** `undefined` outside of a root, `null` while the root's container isn't mounted yet. */
 var PortalContext = createContext(void 0);
+/** The color scheme and density in effect, which a `ThemeScope` inherits when it doesn't set them. */
+var ScopeContext = createContext({
+	colorScheme: "light",
+	density: "auto"
+});
+/** Gives overlays a container: that of a root, or of a scope. */
+var PortalProvider = PortalContext.Provider;
 /**
-* The element overlays render into: the closest `PanneauRoot`'s, or `undefined` for the body
+* The `<style>` and `<link>` elements of a theme: its CSS, scoped to `data-panneau-theme`, and its
+* fonts. React hoists them to the head and adds each once, however many roots or scopes use it.
+* Returns the scope of the theme too, for `data-panneau-theme`.
+*/
+function useThemeStyles(theme) {
+	const $ = c(13);
+	let t0;
+	let t1;
+	let t2;
+	if ($[0] !== theme) {
+		const css = theme !== null ? getThemeCss(theme, "§") : "";
+		const scope = css !== "" ? hashString(css) : void 0;
+		const fontCss = getFontFaceCss(theme?.fonts);
+		t2 = scope;
+		t0 = scope !== void 0 ? /* @__PURE__ */ jsx("style", {
+			href: `panneau-theme-${scope}`,
+			precedence: "panneau",
+			children: css.replaceAll("§", scope)
+		}) : null;
+		t1 = fontCss !== "" ? /* @__PURE__ */ jsx("style", {
+			href: `panneau-fonts-${hashString(fontCss)}`,
+			precedence: "panneau",
+			children: fontCss
+		}) : null;
+		$[0] = theme;
+		$[1] = t0;
+		$[2] = t1;
+		$[3] = t2;
+	} else {
+		t0 = $[1];
+		t1 = $[2];
+		t2 = $[3];
+	}
+	let t3;
+	if ($[4] !== theme?.fonts) {
+		t3 = getFontStylesheets(theme?.fonts).map(_temp);
+		$[4] = theme?.fonts;
+		$[5] = t3;
+	} else t3 = $[5];
+	let t4;
+	if ($[6] !== t0 || $[7] !== t1 || $[8] !== t3) {
+		t4 = /* @__PURE__ */ jsxs(Fragment, { children: [
+			t0,
+			t1,
+			t3
+		] });
+		$[6] = t0;
+		$[7] = t1;
+		$[8] = t3;
+		$[9] = t4;
+	} else t4 = $[9];
+	let t5;
+	if ($[10] !== t2 || $[11] !== t4) {
+		t5 = {
+			scope: t2,
+			styles: t4
+		};
+		$[10] = t2;
+		$[11] = t4;
+		$[12] = t5;
+	} else t5 = $[12];
+	return t5;
+}
+/**
+* The element overlays render into: the closest `PanneauRoot`'s or `ThemeScope`'s, or `undefined` for the body
 * without a root. It is `null` during the first render of a root: overlays wait for it, since
 * React Aria hides everything outside of a modal from assistive technologies when it opens.
 */
+function _temp(href) {
+	return /* @__PURE__ */ jsx("link", {
+		rel: "stylesheet",
+		href,
+		precedence: "panneau"
+	}, href);
+}
 function usePortalContainer() {
 	return use(PortalContext);
 }
@@ -40,31 +120,34 @@ function PanneauIntlProvider({ locale = "en", children }) {
 * any token with its own class on the root. Without an `IntlProvider` above it, it provides one
 * with Panneau's messages in its `locale`.
 */
-function PanneauRoot({ theme = null, colorScheme = "light", locale, className, children, ...props }) {
+function PanneauRoot({ theme = null, colorScheme = "light", density = "auto", locale, className, children, ...props }) {
 	const intl = use(IntlContext);
 	const [container, setContainer] = useState(null);
-	const css = theme !== null ? getThemeCss(theme, "§") : "";
-	const scope = css !== "" ? hashString(css) : void 0;
+	const { scope, styles: themeStyles } = useThemeStyles(theme);
 	const root = /* @__PURE__ */ jsxs("div", {
 		...props,
-		className: cx(PanneauRoot_module_default.root, className),
+		className: cx("panneau-root", PanneauRoot_module_default.root, PanneauRoot_module_default.container, className),
 		"data-color-scheme": colorScheme,
+		"data-density": density,
 		"data-panneau-theme": scope,
-		children: [scope !== void 0 ? /* @__PURE__ */ jsx("style", {
-			href: `panneau-theme-${scope}`,
-			precedence: "panneau",
-			children: css.replaceAll("§", scope)
-		}) : null, /* @__PURE__ */ jsxs(I18nProvider, {
+		children: [themeStyles, /* @__PURE__ */ jsxs(I18nProvider, {
 			locale: locale ?? intl?.locale,
-			children: [/* @__PURE__ */ jsx(PortalContext, {
-				value: container,
-				children: /* @__PURE__ */ jsx(ToastProvider, {
-					regionClassName: PanneauRoot_module_default.root,
-					regionProps: {
-						"data-color-scheme": colorScheme,
-						"data-panneau-theme": scope
-					},
-					children
+			children: [/* @__PURE__ */ jsx(ScopeContext, {
+				value: {
+					colorScheme,
+					density
+				},
+				children: /* @__PURE__ */ jsx(PortalContext, {
+					value: container,
+					children: /* @__PURE__ */ jsx(ToastProvider, {
+						regionClassName: PanneauRoot_module_default.root,
+						regionProps: {
+							"data-color-scheme": colorScheme,
+							"data-density": density,
+							"data-panneau-theme": scope
+						},
+						children
+					})
 				})
 			}), /* @__PURE__ */ jsx("div", {
 				ref: setContainer,
@@ -79,6 +162,6 @@ function PanneauRoot({ theme = null, colorScheme = "light", locale, className, c
 	return root;
 }
 //#endregion
-export { PanneauRoot, usePortalContainer };
+export { PanneauRoot, PortalProvider, ScopeContext, usePortalContainer, useThemeStyles };
 
 //# sourceMappingURL=PanneauRoot.js.map

package/dist/root/PanneauRoot.js.map

@@ -1 +1 @@
-{"version":3,"file":"PanneauRoot.js","names":["styles"],"sources":["../../src/root/PanneauRoot.tsx"],"sourcesContent":["import { type HTMLAttributes, type ReactNode, createContext, use, useState } from 'react';\nimport { I18nProvider } from 'react-aria-components';\nimport { IntlContext, IntlProvider, type IntlShape } from 'react-intl';\n\nimport { getPanneauMessages } from '@panneau/intl';\n\nimport { type ColorScheme, type Theme, getThemeCss, hashString } from '../theme/theme';\nimport { ToastProvider } from '../toast/Toast';\nimport { cx } from '../utils/cx';\nimport styles from './PanneauRoot.module.css';\n\nexport interface PanneauRootProps extends HTMLAttributes<HTMLDivElement> {\n    /** Tokens that override the default theme: `bootstrapTheme`, or a project's own. */\n    theme?: Theme | null;\n    /** Defaults to `light`. `auto` follows the system setting. */\n    colorScheme?: ColorScheme;\n    /**\n     * Locale of dates and numbers in React Aria components. Defaults to the react-intl locale, or\n     * to the browser's without an `IntlProvider`.\n     *\n     * Without an `IntlProvider` above it, the root provides one, with the messages of every Panneau\n     * package in this locale (English without a locale, or for a locale Panneau doesn't translate).\n     * An app with its own `IntlProvider` adds them with `withPanneauMessages()` from\n     * `@panneau/intl`.\n     */\n    locale?: string;\n    children?: ReactNode;\n}\n\n/** `undefined` outside of a root, `null` while the root's container isn't mounted yet. */\nconst PortalContext = createContext<Element | null | undefined>(undefined);\n\n/**\n * The element overlays render into: the closest `PanneauRoot`'s, or `undefined` for the body\n * without a root. It is `null` during the first render of a root: overlays wait for it, since\n * React Aria hides everything outside of a modal from assistive technologies when it opens.\n */\nexport function usePortalContainer(): Element | null | undefined {\n    return use(PortalContext);\n}\n\n/**\n * An `IntlProvider` with Panneau's messages in a locale, for a root without one above it. A locale\n * Panneau doesn't translate gets English, so that react-intl doesn't report every message as\n * missing.\n */\nfunction PanneauIntlProvider({\n    locale = 'en',\n    children,\n}: {\n    locale?: string;\n    children: ReactNode;\n}) {\n    const messages = getPanneauMessages(locale);\n    const translated = Object.keys(messages).length > 0;\n    return (\n        <IntlProvider\n            locale={translated ? locale : 'en'}\n            defaultLocale=\"en\"\n            messages={translated ? messages : getPanneauMessages('en')}\n        >\n            {children}\n        </IntlProvider>\n    );\n}\n\n/**\n * The root of every Panneau interface. It scopes the base stylesheet and the design tokens to its\n * element (no global CSS), applies a theme and a color scheme, and hosts overlays and toasts so\n * that they get the tokens too. Panneau components must render inside one. A project can override\n * any token with its own class on the root. Without an `IntlProvider` above it, it provides one\n * with Panneau's messages in its `locale`.\n */\nexport function PanneauRoot({\n    theme = null,\n    colorScheme = 'light',\n    locale,\n    className,\n    children,\n    ...props\n}: PanneauRootProps) {\n    const intl = use(IntlContext) as IntlShape | null | undefined;\n    const [container, setContainer] = useState<HTMLDivElement | null>(null);\n    const css = theme !== null ? getThemeCss(theme, '§') : '';\n    const scope = css !== '' ? hashString(css) : undefined;\n    const root = (\n        <div\n            {...props}\n            className={cx(styles.root, className)}\n            data-color-scheme={colorScheme}\n            data-panneau-theme={scope}\n        >\n            {scope !== undefined ? (\n                <style href={`panneau-theme-${scope}`} precedence=\"panneau\">\n                    {css.replaceAll('§', scope)}\n                </style>\n            ) : null}\n            <I18nProvider locale={locale ?? intl?.locale}>\n                <PortalContext value={container}>\n                    <ToastProvider\n                        regionClassName={styles.root}\n                        regionProps={{\n                            'data-color-scheme': colorScheme,\n                            'data-panneau-theme': scope,\n                        }}\n                    >\n                        {children}\n                    </ToastProvider>\n                </PortalContext>\n                <div ref={setContainer} className={styles.portal} />\n            </I18nProvider>\n        </div>\n    );\n    if (intl === null || intl === undefined) {\n        return <PanneauIntlProvider locale={locale}>{root}</PanneauIntlProvider>;\n    }\n    return root;\n}\n"],"mappings":";;;;;;;;;;;AA8BA,IAAM,gBAAgB,cAA0C,KAAA,CAAS;;;;;;AAOzE,SAAgB,qBAAiD;CAC7D,OAAO,IAAI,aAAa;AAC5B;;;;;;AAOA,SAAS,oBAAoB,EACzB,SAAS,MACT,YAID;CACC,MAAM,WAAW,mBAAmB,MAAM;CAC1C,MAAM,aAAa,OAAO,KAAK,QAAQ,CAAC,CAAC,SAAS;CAClD,OACI,oBAAC,cAAD;EACI,QAAQ,aAAa,SAAS;EAC9B,eAAc;EACd,UAAU,aAAa,WAAW,mBAAmB,IAAI;EAExD;CACS,CAAA;AAEtB;;;;;;;;AASA,SAAgB,YAAY,EACxB,QAAQ,MACR,cAAc,SACd,QACA,WACA,UACA,GAAG,SACc;CACjB,MAAM,OAAO,IAAI,WAAW;CAC5B,MAAM,CAAC,WAAW,gBAAgB,SAAgC,IAAI;CACtE,MAAM,MAAM,UAAU,OAAO,YAAY,OAAO,GAAG,IAAI;CACvD,MAAM,QAAQ,QAAQ,KAAK,WAAW,GAAG,IAAI,KAAA;CAC7C,MAAM,OACF,qBAAC,OAAD;EACI,GAAI;EACJ,WAAW,GAAGA,2BAAO,MAAM,SAAS;EACpC,qBAAmB;EACnB,sBAAoB;EAJxB,UAAA,CAMK,UAAU,KAAA,IACP,oBAAC,SAAD;GAAO,MAAM,iBAAiB;GAAS,YAAW;GAC7C,UAAA,IAAI,WAAW,KAAK,KAAK;EACvB,CAAA,IACP,MACJ,qBAAC,cAAD;GAAc,QAAQ,UAAU,MAAM;GAAtC,UAAA,CACI,oBAAC,eAAD;IAAe,OAAO;IAClB,UAAA,oBAAC,eAAD;KACI,iBAAiBA,2BAAO;KACxB,aAAa;MACT,qBAAqB;MACrB,sBAAsB;KAC1B;KAEC;IACU,CAAA;GACJ,CAAA,GACf,oBAAC,OAAD;IAAK,KAAK;IAAc,WAAWA,2BAAO;GAAO,CAAA,CACvC;EACb,CAAA,CAAA;;CAET,IAAI,SAAS,QAAQ,SAAS,KAAA,GAC1B,OAAO,oBAAC,qBAAD;EAA6B;EAAS,UAAA;CAA0B,CAAA;CAE3E,OAAO;AACX"}
+{"version":3,"file":"PanneauRoot.js","names":["scope","fontCss","href","_c","_Fragment","styles"],"sources":["../../src/root/PanneauRoot.tsx"],"sourcesContent":["import { type HTMLAttributes, type ReactNode, createContext, use, useState } from 'react';\nimport { I18nProvider } from 'react-aria-components';\nimport { IntlContext, IntlProvider, type IntlShape } from 'react-intl';\n\nimport { getPanneauMessages } from '@panneau/intl';\n\nimport { getFontFaceCss, getFontStylesheets } from '../theme/fonts';\nimport {\n    type ColorScheme,\n    type Density,\n    type Theme,\n    getThemeCss,\n    hashString,\n} from '../theme/theme';\nimport { ToastProvider } from '../toast/Toast';\nimport { cx } from '../utils/cx';\nimport styles from './PanneauRoot.module.css';\n\nexport interface PanneauRootProps extends HTMLAttributes<HTMLDivElement> {\n    /**\n     * Tokens, tones, variants and fonts that override the default theme: `bootstrapTheme`, or a\n     * project's own (`defineTheme()`).\n     */\n    theme?: Theme | null;\n    /** Defaults to `light`. `auto` follows the system setting. */\n    colorScheme?: ColorScheme;\n    /**\n     * How much room controls and rows take: `compact`, `comfortable` or `touch`. Defaults to\n     * `auto`: `touch` on touch screens, `comfortable` otherwise.\n     */\n    density?: Density;\n    /**\n     * Locale of dates and numbers in React Aria components. Defaults to the react-intl locale, or\n     * to the browser's without an `IntlProvider`.\n     *\n     * Without an `IntlProvider` above it, the root provides one, with the messages of every Panneau\n     * package in this locale (English without a locale, or for a locale Panneau doesn't translate).\n     * An app with its own `IntlProvider` adds them with `withPanneauMessages()` from\n     * `@panneau/intl`.\n     */\n    locale?: string;\n    children?: ReactNode;\n}\n\n/** `undefined` outside of a root, `null` while the root's container isn't mounted yet. */\nconst PortalContext = createContext<Element | null | undefined>(undefined);\n\n/** The color scheme and density in effect, which a `ThemeScope` inherits when it doesn't set them. */\nexport const ScopeContext = createContext<{ colorScheme: ColorScheme; density: Density }>({\n    colorScheme: 'light',\n    density: 'auto',\n});\n\n/** Gives overlays a container: that of a root, or of a scope. */\nexport const PortalProvider = PortalContext.Provider;\n\n/**\n * The `<style>` and `<link>` elements of a theme: its CSS, scoped to `data-panneau-theme`, and its\n * fonts. React hoists them to the head and adds each once, however many roots or scopes use it.\n * Returns the scope of the theme too, for `data-panneau-theme`.\n */\nexport function useThemeStyles(theme: Theme | null): { scope?: string; styles: ReactNode } {\n    const css = theme !== null ? getThemeCss(theme, '§') : '';\n    const scope = css !== '' ? hashString(css) : undefined;\n    const fontCss = getFontFaceCss(theme?.fonts);\n    return {\n        scope,\n        styles: (\n            <>\n                {scope !== undefined ? (\n                    <style href={`panneau-theme-${scope}`} precedence=\"panneau\">\n                        {css.replaceAll('§', scope)}\n                    </style>\n                ) : null}\n                {fontCss !== '' ? (\n                    <style href={`panneau-fonts-${hashString(fontCss)}`} precedence=\"panneau\">\n                        {fontCss}\n                    </style>\n                ) : null}\n                {getFontStylesheets(theme?.fonts).map((href) => (\n                    <link key={href} rel=\"stylesheet\" href={href} precedence=\"panneau\" />\n                ))}\n            </>\n        ),\n    };\n}\n\n/**\n * The element overlays render into: the closest `PanneauRoot`'s or `ThemeScope`'s, or `undefined` for the body\n * without a root. It is `null` during the first render of a root: overlays wait for it, since\n * React Aria hides everything outside of a modal from assistive technologies when it opens.\n */\nexport function usePortalContainer(): Element | null | undefined {\n    return use(PortalContext);\n}\n\n/**\n * An `IntlProvider` with Panneau's messages in a locale, for a root without one above it. A locale\n * Panneau doesn't translate gets English, so that react-intl doesn't report every message as\n * missing.\n */\nfunction PanneauIntlProvider({\n    locale = 'en',\n    children,\n}: {\n    locale?: string;\n    children: ReactNode;\n}) {\n    const messages = getPanneauMessages(locale);\n    const translated = Object.keys(messages).length > 0;\n    return (\n        <IntlProvider\n            locale={translated ? locale : 'en'}\n            defaultLocale=\"en\"\n            messages={translated ? messages : getPanneauMessages('en')}\n        >\n            {children}\n        </IntlProvider>\n    );\n}\n\n/**\n * The root of every Panneau interface. It scopes the base stylesheet and the design tokens to its\n * element (no global CSS), applies a theme and a color scheme, and hosts overlays and toasts so\n * that they get the tokens too. Panneau components must render inside one. A project can override\n * any token with its own class on the root. Without an `IntlProvider` above it, it provides one\n * with Panneau's messages in its `locale`.\n */\nexport function PanneauRoot({\n    theme = null,\n    colorScheme = 'light',\n    density = 'auto',\n    locale,\n    className,\n    children,\n    ...props\n}: PanneauRootProps) {\n    const intl = use(IntlContext) as IntlShape | null | undefined;\n    const [container, setContainer] = useState<HTMLDivElement | null>(null);\n    const { scope, styles: themeStyles } = useThemeStyles(theme);\n    const root = (\n        <div\n            {...props}\n            className={cx('panneau-root', styles.root, styles.container, className)}\n            data-color-scheme={colorScheme}\n            data-density={density}\n            data-panneau-theme={scope}\n        >\n            {themeStyles}\n            <I18nProvider locale={locale ?? intl?.locale}>\n                <ScopeContext value={{ colorScheme, density }}>\n                    <PortalContext value={container}>\n                        <ToastProvider\n                            regionClassName={styles.root}\n                            regionProps={{\n                                'data-color-scheme': colorScheme,\n                                'data-density': density,\n                                'data-panneau-theme': scope,\n                            }}\n                        >\n                            {children}\n                        </ToastProvider>\n                    </PortalContext>\n                </ScopeContext>\n                <div ref={setContainer} className={styles.portal} />\n            </I18nProvider>\n        </div>\n    );\n    if (intl === null || intl === undefined) {\n        return <PanneauIntlProvider locale={locale}>{root}</PanneauIntlProvider>;\n    }\n    return root;\n}\n"],"mappings":"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"}

package/dist/root/PanneauRoot.module.js

@@ -1,12 +1,20 @@
 import "./PanneauRoot.css";
 //#region src/root/PanneauRoot.module.css
-var root = "panneau-root--wA35w";
-var portal = "panneau-portal-keLcJN";
+var root = "panneau-root";
+var scheme = "panneau-root-scheme";
+var density = "panneau-root-density";
+var container = "panneau-root-container";
+var scope = "panneau-root-scope";
+var portal = "panneau-root-portal";
 var PanneauRoot_module_default = {
 	root,
+	scheme,
+	density,
+	container,
+	scope,
 	portal
 };
 //#endregion
-export { PanneauRoot_module_default as default, portal, root };
+export { container, PanneauRoot_module_default as default, density, portal, root, scheme, scope };
 
 //# sourceMappingURL=PanneauRoot.module.js.map

package/dist/root/PanneauRoot.module.js.map

@@ -1 +1 @@
-{"version":3,"file":"PanneauRoot.module.js","names":[],"sources":["../../src/root/PanneauRoot.module.css"],"sourcesContent":["/*\n * Design tokens of the default theme, and the base stylesheet of Panneau. Everything is scoped to\n * the root element: nothing here applies outside of it (decision 0005).\n *\n * Defaults are wrapped in :where() so that they have no specificity: a theme, or a project's own\n * class on the root, overrides any token without fighting the cascade.\n */\n\n:where(.root) {\n    /* Surfaces */\n    --panneau-color-bg: #ffffff;\n    --panneau-color-surface: #ffffff;\n    --panneau-color-surface-sunken: #f4f4f5;\n    --panneau-color-surface-raised: #ffffff;\n    --panneau-color-hover: rgb(24 24 27 / 0.06);\n    --panneau-color-pressed: rgb(24 24 27 / 0.1);\n    --panneau-color-backdrop: rgb(9 9 11 / 0.45);\n\n    /* Text */\n    --panneau-color-text: #18181b;\n    --panneau-color-text-muted: #52525b;\n    --panneau-color-link: #1d4ed8;\n\n    /* Borders: separators, and the outline of controls (3:1 against the surface) */\n    --panneau-color-border: #e4e4e7;\n    --panneau-color-border-control: #8b8b94;\n\n    /* Accent: primary buttons, checked controls, selection */\n    --panneau-color-accent: #18181b;\n    --panneau-color-accent-hover: #3f3f46;\n    --panneau-color-accent-text: #ffffff;\n    --panneau-color-accent-subtle: #f4f4f5;\n    --panneau-color-focus: #2563eb;\n\n    /* Tones: text on surfaces, subtle backgrounds, borders */\n    --panneau-color-danger: #b91c1c;\n    --panneau-color-danger-subtle: #fef2f2;\n    --panneau-color-danger-border: #fca5a5;\n    --panneau-color-danger-solid: #b91c1c;\n    --panneau-color-danger-solid-hover: #991b1b;\n    --panneau-color-danger-solid-text: #ffffff;\n    --panneau-color-success: #15803d;\n    --panneau-color-success-subtle: #f0fdf4;\n    --panneau-color-success-border: #86efac;\n    --panneau-color-warning: #a16207;\n    --panneau-color-warning-subtle: #fefce8;\n    --panneau-color-warning-border: #fcd34d;\n    --panneau-color-info: #1d4ed8;\n    --panneau-color-info-subtle: #eff6ff;\n    --panneau-color-info-border: #93c5fd;\n\n    /* Typography */\n    --panneau-font-family:\n        system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;\n    --panneau-font-family-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;\n    --panneau-font-size-xs: 0.75rem;\n    --panneau-font-size-sm: 0.8125rem;\n    --panneau-font-size-md: 0.875rem;\n    --panneau-font-size-lg: 1rem;\n    --panneau-font-size-xl: 1.25rem;\n    --panneau-font-size-control: 0.875rem;\n    --panneau-line-height: 1.5;\n    --panneau-line-height-tight: 1.25;\n    --panneau-font-weight-normal: 400;\n    --panneau-font-weight-medium: 500;\n    --panneau-font-weight-bold: 600;\n\n    /* Spacing, on a 4px scale */\n    --panneau-space-1: 0.25rem;\n    --panneau-space-2: 0.5rem;\n    --panneau-space-3: 0.75rem;\n    --panneau-space-4: 1rem;\n    --panneau-space-5: 1.25rem;\n    --panneau-space-6: 1.5rem;\n    --panneau-space-8: 2rem;\n    --panneau-space-10: 2.5rem;\n\n    /* Shapes */\n    --panneau-radius-sm: 0.25rem;\n    --panneau-radius-md: 0.375rem;\n    --panneau-radius-lg: 0.5rem;\n    --panneau-radius-full: 9999px;\n    --panneau-border-width: 1px;\n    --panneau-shadow-sm: 0 1px 2px rgb(0 0 0 / 0.06);\n    --panneau-shadow-md: 0 1px 3px rgb(0 0 0 / 0.08), 0 4px 12px rgb(0 0 0 / 0.08);\n    --panneau-shadow-lg: 0 4px 8px rgb(0 0 0 / 0.08), 0 16px 40px rgb(0 0 0 / 0.16);\n\n    /* Controls */\n    --panneau-control-height: 2.25rem;\n    --panneau-control-height-sm: 1.875rem;\n    --panneau-focus-width: 2px;\n\n    /* Motion and layers */\n    --panneau-duration: 150ms;\n    --panneau-z-overlay: 1000;\n    --panneau-z-toast: 1100;\n\n    color-scheme: light;\n}\n\n:where(.root[data-color-scheme='dark']) {\n    --panneau-color-bg: #09090b;\n    --panneau-color-surface: #18181b;\n    --panneau-color-surface-sunken: #111113;\n    --panneau-color-surface-raised: #232326;\n    --panneau-color-hover: rgb(255 255 255 / 0.07);\n    --panneau-color-pressed: rgb(255 255 255 / 0.12);\n    --panneau-color-backdrop: rgb(0 0 0 / 0.6);\n    --panneau-color-text: #fafafa;\n    --panneau-color-text-muted: #a1a1aa;\n    --panneau-color-link: #93c5fd;\n    --panneau-color-border: #2e2e33;\n    --panneau-color-border-control: #71717a;\n    --panneau-color-accent: #fafafa;\n    --panneau-color-accent-hover: #d4d4d8;\n    --panneau-color-accent-text: #18181b;\n    --panneau-color-accent-subtle: #2e2e33;\n    --panneau-color-focus: #60a5fa;\n    --panneau-color-danger: #fca5a5;\n    --panneau-color-danger-subtle: rgb(127 29 29 / 0.35);\n    --panneau-color-danger-border: #b91c1c;\n    --panneau-color-danger-solid: #dc2626;\n    --panneau-color-danger-solid-hover: #b91c1c;\n    --panneau-color-danger-solid-text: #ffffff;\n    --panneau-color-success: #86efac;\n    --panneau-color-success-subtle: rgb(20 83 45 / 0.35);\n    --panneau-color-success-border: #15803d;\n    --panneau-color-warning: #fcd34d;\n    --panneau-color-warning-subtle: rgb(113 63 18 / 0.35);\n    --panneau-color-warning-border: #a16207;\n    --panneau-color-info: #93c5fd;\n    --panneau-color-info-subtle: rgb(30 58 138 / 0.35);\n    --panneau-color-info-border: #1d4ed8;\n    --panneau-shadow-sm: 0 1px 2px rgb(0 0 0 / 0.4);\n    --panneau-shadow-md: 0 1px 3px rgb(0 0 0 / 0.4), 0 4px 12px rgb(0 0 0 / 0.4);\n    --panneau-shadow-lg: 0 4px 8px rgb(0 0 0 / 0.4), 0 16px 40px rgb(0 0 0 / 0.5);\n\n    color-scheme: dark;\n}\n\n@media (prefers-color-scheme: dark) {\n    :where(.root[data-color-scheme='auto']) {\n        --panneau-color-bg: #09090b;\n        --panneau-color-surface: #18181b;\n        --panneau-color-surface-sunken: #111113;\n        --panneau-color-surface-raised: #232326;\n        --panneau-color-hover: rgb(255 255 255 / 0.07);\n        --panneau-color-pressed: rgb(255 255 255 / 0.12);\n        --panneau-color-backdrop: rgb(0 0 0 / 0.6);\n        --panneau-color-text: #fafafa;\n        --panneau-color-text-muted: #a1a1aa;\n        --panneau-color-link: #93c5fd;\n        --panneau-color-border: #2e2e33;\n        --panneau-color-border-control: #71717a;\n        --panneau-color-accent: #fafafa;\n        --panneau-color-accent-hover: #d4d4d8;\n        --panneau-color-accent-text: #18181b;\n        --panneau-color-accent-subtle: #2e2e33;\n        --panneau-color-focus: #60a5fa;\n        --panneau-color-danger: #fca5a5;\n        --panneau-color-danger-subtle: rgb(127 29 29 / 0.35);\n        --panneau-color-danger-border: #b91c1c;\n        --panneau-color-danger-solid: #dc2626;\n        --panneau-color-danger-solid-hover: #b91c1c;\n        --panneau-color-danger-solid-text: #ffffff;\n        --panneau-color-success: #86efac;\n        --panneau-color-success-subtle: rgb(20 83 45 / 0.35);\n        --panneau-color-success-border: #15803d;\n        --panneau-color-warning: #fcd34d;\n        --panneau-color-warning-subtle: rgb(113 63 18 / 0.35);\n        --panneau-color-warning-border: #a16207;\n        --panneau-color-info: #93c5fd;\n        --panneau-color-info-subtle: rgb(30 58 138 / 0.35);\n        --panneau-color-info-border: #1d4ed8;\n        --panneau-shadow-sm: 0 1px 2px rgb(0 0 0 / 0.4);\n        --panneau-shadow-md: 0 1px 3px rgb(0 0 0 / 0.4), 0 4px 12px rgb(0 0 0 / 0.4);\n        --panneau-shadow-lg: 0 4px 8px rgb(0 0 0 / 0.4), 0 16px 40px rgb(0 0 0 / 0.5);\n\n        color-scheme: dark;\n    }\n}\n\n/* Touch screens: larger targets, and 16px text in inputs so that iOS doesn't zoom on focus. */\n@media (pointer: coarse) {\n    :where(.root) {\n        --panneau-control-height: 2.75rem;\n        --panneau-control-height-sm: 2.25rem;\n        --panneau-font-size-control: 1rem;\n    }\n}\n\n@media (prefers-reduced-motion: reduce) {\n    :where(.root) {\n        --panneau-duration: 0ms;\n    }\n}\n\n/* Base stylesheet, scoped to the root, without specificity: components and projects override it. */\n\n.root {\n    /* The class is mostly a hook for the rules below, which use :where(). */\n    display: block;\n}\n\n:where(.root) {\n    font-family: var(--panneau-font-family);\n    font-size: var(--panneau-font-size-md);\n    line-height: var(--panneau-line-height);\n    color: var(--panneau-color-text);\n    background-color: var(--panneau-color-bg);\n    -webkit-font-smoothing: antialiased;\n    -webkit-text-size-adjust: 100%;\n    text-size-adjust: 100%;\n}\n\n:where(.root) :where(*, *::before, *::after) {\n    box-sizing: border-box;\n}\n\n:where(.root) :where(h1, h2, h3, h4, h5, h6, p, ul, ol, dl, figure, fieldset, legend) {\n    margin: 0;\n    padding: 0;\n}\n\n:where(.root) :where(fieldset) {\n    border: 0;\n    min-width: 0;\n}\n\n:where(.root) :where(button, input, select, textarea) {\n    font: inherit;\n    color: inherit;\n}\n\n:where(.root) :where(a) {\n    color: var(--panneau-color-link);\n}\n\n:where(.root) :where(img, svg, video) {\n    max-width: 100%;\n}\n\n:where(.root) :where(:focus-visible) {\n    outline: var(--panneau-focus-width) solid var(--panneau-color-focus);\n    outline-offset: 2px;\n}\n\n/* Overlays (dialogs, popovers, menus, tooltips) render here, so that they get the tokens. */\n.portal {\n    display: contents;\n}\n"],"mappings":""}
+{"version":3,"file":"PanneauRoot.module.js","names":[],"sources":["../../src/root/PanneauRoot.module.css"],"sourcesContent":["/*\n * Design tokens of the default theme, and the base stylesheet of Panneau. Everything is scoped to\n * the root element: nothing here applies outside of it (decision 0005).\n *\n * Defaults are wrapped in :where() so that they have no specificity: a theme, or a project's own\n * class on the root, overrides any token without fighting the cascade.\n */\n\n:where(.root) {\n    /* Surfaces */\n    --panneau-color-bg: #ffffff;\n    --panneau-color-surface: #ffffff;\n    --panneau-color-surface-sunken: #f4f4f5;\n    --panneau-color-surface-raised: #ffffff;\n    --panneau-color-hover: rgb(24 24 27 / 0.06);\n    --panneau-color-pressed: rgb(24 24 27 / 0.1);\n    --panneau-color-backdrop: rgb(9 9 11 / 0.45);\n\n    /* Text */\n    --panneau-color-text: #18181b;\n    --panneau-color-text-muted: #52525b;\n    --panneau-color-link: #1d4ed8;\n\n    /* Borders: separators, and the outline of controls (3:1 against the surface) */\n    --panneau-color-border: #e4e4e7;\n    --panneau-color-border-control: #8b8b94;\n\n    /* Accent: primary buttons, checked controls, selection */\n    --panneau-color-accent: #18181b;\n    --panneau-color-accent-hover: #3f3f46;\n    --panneau-color-accent-text: #ffffff;\n    --panneau-color-accent-subtle: #f4f4f5;\n    --panneau-color-focus: #2563eb;\n\n    /* Tones: text on surfaces, subtle backgrounds, borders */\n    --panneau-color-danger: #b91c1c;\n    --panneau-color-danger-subtle: #fef2f2;\n    --panneau-color-danger-border: #fca5a5;\n    --panneau-color-danger-solid: #b91c1c;\n    --panneau-color-danger-solid-hover: #991b1b;\n    --panneau-color-danger-solid-text: #ffffff;\n    --panneau-color-success: #15803d;\n    --panneau-color-success-subtle: #f0fdf4;\n    --panneau-color-success-border: #86efac;\n    --panneau-color-success-solid: #15803d;\n    --panneau-color-success-solid-hover: #166534;\n    --panneau-color-success-solid-text: #ffffff;\n    --panneau-color-warning: #a16207;\n    --panneau-color-warning-subtle: #fefce8;\n    --panneau-color-warning-border: #fcd34d;\n    --panneau-color-warning-solid: #a16207;\n    --panneau-color-warning-solid-hover: #854d0e;\n    --panneau-color-warning-solid-text: #ffffff;\n    --panneau-color-info: #1d4ed8;\n    --panneau-color-info-subtle: #eff6ff;\n    --panneau-color-info-border: #93c5fd;\n    --panneau-color-info-solid: #1d4ed8;\n    --panneau-color-info-solid-hover: #1e40af;\n    --panneau-color-info-solid-text: #ffffff;\n\n    /*\n     * Data visualization: 8 categorical colors in a fixed order, a sequential ramp from low to high,\n     * and a diverging pair around a neutral midpoint. Each categorical color reaches 3:1 against\n     * the surface, and stays distinct under the common color vision deficiencies (chartColors.test).\n     */\n    --panneau-chart-categorical-1: #1c6cbb;\n    --panneau-chart-categorical-2: #c47713;\n    --panneau-chart-categorical-3: #d12f74;\n    --panneau-chart-categorical-4: #515922;\n    --panneau-chart-categorical-5: #2b9c52;\n    --panneau-chart-categorical-6: #a977b3;\n    --panneau-chart-categorical-7: #8f2786;\n    --panneau-chart-categorical-8: #9176e8;\n    --panneau-chart-sequential-1: #dbe8f6;\n    --panneau-chart-sequential-2: #a3c6e9;\n    --panneau-chart-sequential-3: #5f9bd6;\n    --panneau-chart-sequential-4: #2c6cb0;\n    --panneau-chart-sequential-5: #1a4475;\n    --panneau-chart-diverging-negative: #b4501a;\n    --panneau-chart-diverging-neutral: #e4e4e7;\n    --panneau-chart-diverging-positive: #1c6cbb;\n\n    /* Typography: font roles. Headings and display text follow the body unless a theme sets them. */\n    --panneau-font-family-body:\n        system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;\n    --panneau-font-family-heading: var(--panneau-font-family-body);\n    --panneau-font-family-display: var(--panneau-font-family-heading);\n    --panneau-font-family-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;\n    /* Deprecated alias of the body family: set --panneau-font-family-body instead. */\n    --panneau-font-family: var(--panneau-font-family-body);\n    /* Numbers that line up: stats, dates, ids (font-variant-numeric). */\n    --panneau-font-numeric: tabular-nums;\n    --panneau-font-size-xs: 0.75rem;\n    --panneau-font-size-sm: 0.8125rem;\n    --panneau-font-size-md: 0.875rem;\n    --panneau-font-size-lg: 1rem;\n    --panneau-font-size-xl: 1.25rem;\n    --panneau-font-size-control: 0.875rem;\n    --panneau-line-height: 1.5;\n    --panneau-line-height-tight: 1.25;\n    --panneau-font-weight-normal: 400;\n    --panneau-font-weight-medium: 500;\n    --panneau-font-weight-bold: 600;\n\n    /* Spacing, on a 4px scale */\n    --panneau-space-1: 0.25rem;\n    --panneau-space-2: 0.5rem;\n    --panneau-space-3: 0.75rem;\n    --panneau-space-4: 1rem;\n    --panneau-space-5: 1.25rem;\n    --panneau-space-6: 1.5rem;\n    --panneau-space-8: 2rem;\n    --panneau-space-10: 2.5rem;\n\n    /* Shapes */\n    --panneau-radius-sm: 0.25rem;\n    --panneau-radius-md: 0.375rem;\n    --panneau-radius-lg: 0.5rem;\n    --panneau-radius-full: 9999px;\n    --panneau-border-width: 1px;\n    --panneau-shadow-sm: 0 1px 2px rgb(0 0 0 / 0.06);\n    --panneau-shadow-md: 0 1px 3px rgb(0 0 0 / 0.08), 0 4px 12px rgb(0 0 0 / 0.08);\n    --panneau-shadow-lg: 0 4px 8px rgb(0 0 0 / 0.08), 0 16px 40px rgb(0 0 0 / 0.16);\n\n    /* Controls and rows: the comfortable density. Other densities redefine these tokens. */\n    --panneau-control-height: 2.25rem;\n    --panneau-control-height-sm: 1.875rem;\n    --panneau-control-padding-x: 0.75rem;\n    --panneau-row-padding-y: 0.5rem;\n    --panneau-focus-width: 2px;\n\n    /* Motion and layers */\n    --panneau-duration: 150ms;\n    --panneau-z-overlay: 1000;\n    --panneau-z-toast: 1100;\n\n    color-scheme: light;\n}\n\n/*\n * A ThemeScope with its own color scheme (.scheme) takes the light colors back, since the root\n * around it may be dark. Scopes without one inherit the colors of their parent.\n */\n:where(.scheme[data-color-scheme='light'], .scheme[data-color-scheme='auto']) {\n    --panneau-chart-categorical-1: #1c6cbb;\n    --panneau-chart-categorical-2: #c47713;\n    --panneau-chart-categorical-3: #d12f74;\n    --panneau-chart-categorical-4: #515922;\n    --panneau-chart-categorical-5: #2b9c52;\n    --panneau-chart-categorical-6: #a977b3;\n    --panneau-chart-categorical-7: #8f2786;\n    --panneau-chart-categorical-8: #9176e8;\n    --panneau-chart-sequential-1: #dbe8f6;\n    --panneau-chart-sequential-2: #a3c6e9;\n    --panneau-chart-sequential-3: #5f9bd6;\n    --panneau-chart-sequential-4: #2c6cb0;\n    --panneau-chart-sequential-5: #1a4475;\n    --panneau-chart-diverging-negative: #b4501a;\n    --panneau-chart-diverging-neutral: #e4e4e7;\n    --panneau-chart-diverging-positive: #1c6cbb;\n    --panneau-color-bg: #ffffff;\n    --panneau-color-surface: #ffffff;\n    --panneau-color-surface-sunken: #f4f4f5;\n    --panneau-color-surface-raised: #ffffff;\n    --panneau-color-hover: rgb(24 24 27 / 0.06);\n    --panneau-color-pressed: rgb(24 24 27 / 0.1);\n    --panneau-color-backdrop: rgb(9 9 11 / 0.45);\n    --panneau-color-text: #18181b;\n    --panneau-color-text-muted: #52525b;\n    --panneau-color-link: #1d4ed8;\n    --panneau-color-border: #e4e4e7;\n    --panneau-color-border-control: #8b8b94;\n    --panneau-color-accent: #18181b;\n    --panneau-color-accent-hover: #3f3f46;\n    --panneau-color-accent-text: #ffffff;\n    --panneau-color-accent-subtle: #f4f4f5;\n    --panneau-color-focus: #2563eb;\n    --panneau-color-danger: #b91c1c;\n    --panneau-color-danger-subtle: #fef2f2;\n    --panneau-color-danger-border: #fca5a5;\n    --panneau-color-danger-solid: #b91c1c;\n    --panneau-color-danger-solid-hover: #991b1b;\n    --panneau-color-danger-solid-text: #ffffff;\n    --panneau-color-success: #15803d;\n    --panneau-color-success-subtle: #f0fdf4;\n    --panneau-color-success-border: #86efac;\n    --panneau-color-warning: #a16207;\n    --panneau-color-warning-subtle: #fefce8;\n    --panneau-color-warning-border: #fcd34d;\n    --panneau-color-info: #1d4ed8;\n    --panneau-color-info-subtle: #eff6ff;\n    --panneau-color-info-border: #93c5fd;\n    --panneau-shadow-sm: 0 1px 2px rgb(0 0 0 / 0.06);\n    --panneau-shadow-md: 0 1px 3px rgb(0 0 0 / 0.08), 0 4px 12px rgb(0 0 0 / 0.08);\n    --panneau-shadow-lg: 0 4px 8px rgb(0 0 0 / 0.08), 0 16px 40px rgb(0 0 0 / 0.16);\n\n    color-scheme: light;\n}\n\n:where(.root[data-color-scheme='dark'], .scheme[data-color-scheme='dark']) {\n    --panneau-chart-categorical-1: #61a9e3;\n    --panneau-chart-categorical-2: #e5c040;\n    --panneau-chart-categorical-3: #d9456a;\n    --panneau-chart-categorical-4: #a1da9e;\n    --panneau-chart-categorical-5: #bb6528;\n    --panneau-chart-categorical-6: #a06a9b;\n    --panneau-chart-categorical-7: #8c71e2;\n    --panneau-chart-categorical-8: #56dfe1;\n    --panneau-chart-sequential-1: #1d3550;\n    --panneau-chart-sequential-2: #285684;\n    --panneau-chart-sequential-3: #3d7fc2;\n    --panneau-chart-sequential-4: #74abe0;\n    --panneau-chart-sequential-5: #b8d6f2;\n    --panneau-chart-diverging-negative: #f0884a;\n    --panneau-chart-diverging-neutral: #3f3f46;\n    --panneau-chart-diverging-positive: #61a9e3;\n    --panneau-color-bg: #09090b;\n    --panneau-color-surface: #18181b;\n    --panneau-color-surface-sunken: #111113;\n    --panneau-color-surface-raised: #232326;\n    --panneau-color-hover: rgb(255 255 255 / 0.07);\n    --panneau-color-pressed: rgb(255 255 255 / 0.12);\n    --panneau-color-backdrop: rgb(0 0 0 / 0.6);\n    --panneau-color-text: #fafafa;\n    --panneau-color-text-muted: #a1a1aa;\n    --panneau-color-link: #93c5fd;\n    --panneau-color-border: #2e2e33;\n    --panneau-color-border-control: #71717a;\n    --panneau-color-accent: #fafafa;\n    --panneau-color-accent-hover: #d4d4d8;\n    --panneau-color-accent-text: #18181b;\n    --panneau-color-accent-subtle: #2e2e33;\n    --panneau-color-focus: #60a5fa;\n    --panneau-color-danger: #fca5a5;\n    --panneau-color-danger-subtle: rgb(127 29 29 / 0.35);\n    --panneau-color-danger-border: #b91c1c;\n    --panneau-color-danger-solid: #dc2626;\n    --panneau-color-danger-solid-hover: #b91c1c;\n    --panneau-color-danger-solid-text: #ffffff;\n    --panneau-color-success: #86efac;\n    --panneau-color-success-subtle: rgb(20 83 45 / 0.35);\n    --panneau-color-success-border: #15803d;\n    --panneau-color-warning: #fcd34d;\n    --panneau-color-warning-subtle: rgb(113 63 18 / 0.35);\n    --panneau-color-warning-border: #a16207;\n    --panneau-color-info: #93c5fd;\n    --panneau-color-info-subtle: rgb(30 58 138 / 0.35);\n    --panneau-color-info-border: #1d4ed8;\n    --panneau-shadow-sm: 0 1px 2px rgb(0 0 0 / 0.4);\n    --panneau-shadow-md: 0 1px 3px rgb(0 0 0 / 0.4), 0 4px 12px rgb(0 0 0 / 0.4);\n    --panneau-shadow-lg: 0 4px 8px rgb(0 0 0 / 0.4), 0 16px 40px rgb(0 0 0 / 0.5);\n\n    color-scheme: dark;\n}\n\n@media (prefers-color-scheme: dark) {\n    :where(.root[data-color-scheme='auto'], .scheme[data-color-scheme='auto']) {\n        --panneau-chart-categorical-1: #61a9e3;\n        --panneau-chart-categorical-2: #e5c040;\n        --panneau-chart-categorical-3: #d9456a;\n        --panneau-chart-categorical-4: #a1da9e;\n        --panneau-chart-categorical-5: #bb6528;\n        --panneau-chart-categorical-6: #a06a9b;\n        --panneau-chart-categorical-7: #8c71e2;\n        --panneau-chart-categorical-8: #56dfe1;\n        --panneau-chart-sequential-1: #1d3550;\n        --panneau-chart-sequential-2: #285684;\n        --panneau-chart-sequential-3: #3d7fc2;\n        --panneau-chart-sequential-4: #74abe0;\n        --panneau-chart-sequential-5: #b8d6f2;\n        --panneau-chart-diverging-negative: #f0884a;\n        --panneau-chart-diverging-neutral: #3f3f46;\n        --panneau-chart-diverging-positive: #61a9e3;\n        --panneau-color-bg: #09090b;\n        --panneau-color-surface: #18181b;\n        --panneau-color-surface-sunken: #111113;\n        --panneau-color-surface-raised: #232326;\n        --panneau-color-hover: rgb(255 255 255 / 0.07);\n        --panneau-color-pressed: rgb(255 255 255 / 0.12);\n        --panneau-color-backdrop: rgb(0 0 0 / 0.6);\n        --panneau-color-text: #fafafa;\n        --panneau-color-text-muted: #a1a1aa;\n        --panneau-color-link: #93c5fd;\n        --panneau-color-border: #2e2e33;\n        --panneau-color-border-control: #71717a;\n        --panneau-color-accent: #fafafa;\n        --panneau-color-accent-hover: #d4d4d8;\n        --panneau-color-accent-text: #18181b;\n        --panneau-color-accent-subtle: #2e2e33;\n        --panneau-color-focus: #60a5fa;\n        --panneau-color-danger: #fca5a5;\n        --panneau-color-danger-subtle: rgb(127 29 29 / 0.35);\n        --panneau-color-danger-border: #b91c1c;\n        --panneau-color-danger-solid: #dc2626;\n        --panneau-color-danger-solid-hover: #b91c1c;\n        --panneau-color-danger-solid-text: #ffffff;\n        --panneau-color-success: #86efac;\n        --panneau-color-success-subtle: rgb(20 83 45 / 0.35);\n        --panneau-color-success-border: #15803d;\n        --panneau-color-warning: #fcd34d;\n        --panneau-color-warning-subtle: rgb(113 63 18 / 0.35);\n        --panneau-color-warning-border: #a16207;\n        --panneau-color-info: #93c5fd;\n        --panneau-color-info-subtle: rgb(30 58 138 / 0.35);\n        --panneau-color-info-border: #1d4ed8;\n        --panneau-shadow-sm: 0 1px 2px rgb(0 0 0 / 0.4);\n        --panneau-shadow-md: 0 1px 3px rgb(0 0 0 / 0.4), 0 4px 12px rgb(0 0 0 / 0.4);\n        --panneau-shadow-lg: 0 4px 8px rgb(0 0 0 / 0.4), 0 16px 40px rgb(0 0 0 / 0.5);\n\n        color-scheme: dark;\n    }\n}\n\n/*\n * Densities: compact, comfortable (the tokens above) and touch, with larger targets and 16px text in\n * inputs so that iOS doesn't zoom on focus. `auto`, the default, is touch on coarse pointers (touch\n * screens) and comfortable otherwise.\n */\n/* A ThemeScope with its own density (.density) takes the comfortable values back. */\n:where(.density[data-density='comfortable'], .density[data-density='auto']) {\n    --panneau-control-height: 2.25rem;\n    --panneau-control-height-sm: 1.875rem;\n    --panneau-font-size-control: 0.875rem;\n    --panneau-control-padding-x: 0.75rem;\n    --panneau-row-padding-y: 0.5rem;\n}\n\n:where(.root[data-density='compact'], .density[data-density='compact']) {\n    --panneau-control-height: 2rem;\n    --panneau-control-height-sm: 1.625rem;\n    --panneau-font-size-control: 0.8125rem;\n    --panneau-control-padding-x: 0.5rem;\n    --panneau-row-padding-y: 0.25rem;\n}\n\n:where(.root[data-density='touch'], .density[data-density='touch']) {\n    --panneau-control-height: 2.75rem;\n    --panneau-control-height-sm: 2.25rem;\n    --panneau-font-size-control: 1rem;\n    --panneau-control-padding-x: 0.75rem;\n    --panneau-row-padding-y: 0.75rem;\n}\n\n@media (pointer: coarse) {\n    :where(.root[data-density='auto'], .density[data-density='auto']) {\n        --panneau-control-height: 2.75rem;\n        --panneau-control-height-sm: 2.25rem;\n        --panneau-font-size-control: 1rem;\n        --panneau-control-padding-x: 0.75rem;\n        --panneau-row-padding-y: 0.75rem;\n    }\n}\n\n@media (prefers-reduced-motion: reduce) {\n    :where(.root) {\n        --panneau-duration: 0ms;\n    }\n}\n\n/* Base stylesheet, scoped to the root, with less weight than any class: components and projects override it. */\n\n.root {\n    /* The class is mostly a hook for the rules below, which use :where(). */\n    display: block;\n}\n\n/*\n * The root is a size container, so that the responsive props of layout primitives follow its width\n * rather than the viewport's. Like any size container, its width can't come from its content: in a\n * flex row or a float, give it a width. Toast regions share the tokens of .root, not this.\n */\n.container {\n    container: panneau-root / inline-size;\n}\n\n:where(.root) {\n    font-family: var(--panneau-font-family);\n    font-size: var(--panneau-font-size-md);\n    line-height: var(--panneau-line-height);\n    color: var(--panneau-color-text);\n    background-color: var(--panneau-color-bg);\n    -webkit-font-smoothing: antialiased;\n    -webkit-text-size-adjust: 100%;\n    text-size-adjust: 100%;\n}\n\n:where(.root) :where(*, *::before, *::after) {\n    box-sizing: border-box;\n}\n\n/*\n * Element resets weigh two element selectors, (0,0,2), by repeating :is(): more than the global\n * element rules of a site, such as Bootstrap's Reboot (`h5 { margin-bottom: 0.5rem }` weighs\n * (0,0,1)), less than any class, so that components and projects still override them.\n */\n:where(.root)\n    :is(\n        h1,\n        h2,\n        h3,\n        h4,\n        h5,\n        h6,\n        p,\n        ul,\n        ol,\n        dl,\n        dd,\n        figure,\n        blockquote,\n        pre,\n        hr,\n        fieldset,\n        legend\n    ):is(h1, h2, h3, h4, h5, h6, p, ul, ol, dl, dd, figure, blockquote, pre, hr, fieldset, legend) {\n    margin: 0;\n    padding: 0;\n}\n\n/* Reboot floats legends and scales their text. */\n:where(.root) :is(legend):is(legend) {\n    float: none;\n    width: auto;\n    font-size: inherit;\n    line-height: inherit;\n}\n\n/* Reboot fades rules to 25% opacity. */\n:where(.root) :is(hr):is(hr) {\n    opacity: 1;\n}\n\n:where(.root) :where(fieldset) {\n    border: 0;\n    min-width: 0;\n}\n\n:where(.root) :where(button, input, select, textarea) {\n    font: inherit;\n    color: inherit;\n}\n\n:where(.root) :is(a):is(a) {\n    color: var(--panneau-color-link);\n}\n\n:where(.root) :where(img, svg, video) {\n    max-width: 100%;\n}\n\n:where(.root) :where(:focus-visible) {\n    outline: var(--panneau-focus-width) solid var(--panneau-color-focus);\n    outline-offset: 2px;\n}\n\n/*\n * A ThemeScope applies the text styles of its tokens again, since inherited values were computed\n * on the root. One with its own color scheme or theme paints its background too.\n */\n:where(.scope) {\n    font-family: var(--panneau-font-family);\n    font-size: var(--panneau-font-size-md);\n    line-height: var(--panneau-line-height);\n    color: var(--panneau-color-text);\n}\n\n:where(.scope.scheme, .scope[data-panneau-theme]) {\n    background-color: var(--panneau-color-bg);\n}\n\n/* Overlays (dialogs, popovers, menus, tooltips) render here, so that they get the tokens. */\n.portal {\n    display: contents;\n}\n"],"mappings":""}

package/dist/root/ThemeScope.d.ts

@@ -0,0 +1,24 @@
+import { type HTMLAttributes, type ReactNode } from 'react';
+import type { ColorScheme, Density, Theme } from '../theme/theme';
+export interface ThemeScopeProps extends HTMLAttributes<HTMLElement> {
+    /** Element to render. Defaults to `div`. */
+    as?: 'div' | 'section' | 'aside' | 'nav' | 'header' | 'footer' | 'main' | 'article';
+    /** A theme for the subtree, over the theme of the root. */
+    theme?: Theme | null;
+    /** A color scheme for the subtree. Inherited by default. */
+    colorScheme?: ColorScheme;
+    /** A density for the subtree. Inherited by default. */
+    density?: Density;
+    children?: ReactNode;
+}
+/**
+ * Applies a theme, a color scheme or a density to a subtree, like `data-bs-theme` on any element:
+ * a dark sidebar in a light app, a compact table, a preview in another brand's colors. Overlays
+ * opened inside it render in its own container, so that they keep its tokens. It must be inside a
+ * `PanneauRoot`.
+ *
+ * What it doesn't set comes from its parent: a scope with only a density keeps the colors of the
+ * theme around it.
+ */
+export declare function ThemeScope({ as: Element, theme, colorScheme, density, className, children, ...props }: ThemeScopeProps): import("react").JSX.Element;
+//# sourceMappingURL=ThemeScope.d.ts.map

package/dist/root/ThemeScope.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ThemeScope.d.ts","sourceRoot":"","sources":["../../src/root/ThemeScope.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,cAAc,EAAE,KAAK,SAAS,EAAiB,MAAM,OAAO,CAAC;AAE3E,OAAO,KAAK,EAAE,WAAW,EAAE,OAAO,EAAE,KAAK,EAAE,MAAM,gBAAgB,CAAC;AAKlE,MAAM,WAAW,eAAgB,SAAQ,cAAc,CAAC,WAAW,CAAC;IAChE,4CAA4C;IAC5C,EAAE,CAAC,EAAE,KAAK,GAAG,SAAS,GAAG,OAAO,GAAG,KAAK,GAAG,QAAQ,GAAG,QAAQ,GAAG,MAAM,GAAG,SAAS,CAAC;IACpF,2DAA2D;IAC3D,KAAK,CAAC,EAAE,KAAK,GAAG,IAAI,CAAC;IACrB,4DAA4D;IAC5D,WAAW,CAAC,EAAE,WAAW,CAAC;IAC1B,uDAAuD;IACvD,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,CAAC,EAAE,SAAS,CAAC;CACxB;AAED;;;;;;;;GAQG;AACH,wBAAgB,UAAU,CAAC,EACvB,EAAE,EAAE,OAAe,EACnB,KAAY,EACZ,WAAW,EACX,OAAO,EACP,SAAS,EACT,QAAQ,EACR,GAAG,KAAK,EACX,EAAE,eAAe,+BA+BjB"}

package/dist/root/ThemeScope.js

@@ -0,0 +1,49 @@
+import { cx } from "../utils/cx.js";
+import PanneauRoot_module_default from "./PanneauRoot.module.js";
+import { PortalProvider, ScopeContext, useThemeStyles } from "./PanneauRoot.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { use, useState } from "react";
+//#region src/root/ThemeScope.tsx
+/**
+* Applies a theme, a color scheme or a density to a subtree, like `data-bs-theme` on any element:
+* a dark sidebar in a light app, a compact table, a preview in another brand's colors. Overlays
+* opened inside it render in its own container, so that they keep its tokens. It must be inside a
+* `PanneauRoot`.
+*
+* What it doesn't set comes from its parent: a scope with only a density keeps the colors of the
+* theme around it.
+*/
+function ThemeScope({ as: Element = "div", theme = null, colorScheme, density, className, children, ...props }) {
+	const parent = use(ScopeContext);
+	const [container, setContainer] = useState(null);
+	const { scope, styles: themeStyles } = useThemeStyles(theme);
+	const effective = {
+		colorScheme: colorScheme ?? parent.colorScheme,
+		density: density ?? parent.density
+	};
+	return /* @__PURE__ */ jsxs(Element, {
+		...props,
+		className: cx("panneau-theme-scope", PanneauRoot_module_default.scope, colorScheme !== void 0 && PanneauRoot_module_default.scheme, density !== void 0 && PanneauRoot_module_default.density, className),
+		"data-color-scheme": effective.colorScheme,
+		"data-density": effective.density,
+		"data-panneau-theme": scope,
+		children: [
+			themeStyles,
+			/* @__PURE__ */ jsx(ScopeContext, {
+				value: effective,
+				children: /* @__PURE__ */ jsx(PortalProvider, {
+					value: container,
+					children
+				})
+			}),
+			/* @__PURE__ */ jsx("div", {
+				ref: setContainer,
+				className: PanneauRoot_module_default.portal
+			})
+		]
+	});
+}
+//#endregion
+export { ThemeScope };
+
+//# sourceMappingURL=ThemeScope.js.map

package/dist/root/ThemeScope.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ThemeScope.js","names":["styles"],"sources":["../../src/root/ThemeScope.tsx"],"sourcesContent":["import { type HTMLAttributes, type ReactNode, use, useState } from 'react';\n\nimport type { ColorScheme, Density, Theme } from '../theme/theme';\nimport { cx } from '../utils/cx';\nimport { PortalProvider, ScopeContext, useThemeStyles } from './PanneauRoot';\nimport styles from './PanneauRoot.module.css';\n\nexport interface ThemeScopeProps extends HTMLAttributes<HTMLElement> {\n    /** Element to render. Defaults to `div`. */\n    as?: 'div' | 'section' | 'aside' | 'nav' | 'header' | 'footer' | 'main' | 'article';\n    /** A theme for the subtree, over the theme of the root. */\n    theme?: Theme | null;\n    /** A color scheme for the subtree. Inherited by default. */\n    colorScheme?: ColorScheme;\n    /** A density for the subtree. Inherited by default. */\n    density?: Density;\n    children?: ReactNode;\n}\n\n/**\n * Applies a theme, a color scheme or a density to a subtree, like `data-bs-theme` on any element:\n * a dark sidebar in a light app, a compact table, a preview in another brand's colors. Overlays\n * opened inside it render in its own container, so that they keep its tokens. It must be inside a\n * `PanneauRoot`.\n *\n * What it doesn't set comes from its parent: a scope with only a density keeps the colors of the\n * theme around it.\n */\nexport function ThemeScope({\n    as: Element = 'div',\n    theme = null,\n    colorScheme,\n    density,\n    className,\n    children,\n    ...props\n}: ThemeScopeProps) {\n    const parent = use(ScopeContext);\n    const [container, setContainer] = useState<HTMLDivElement | null>(null);\n    const { scope, styles: themeStyles } = useThemeStyles(theme);\n    // The effective values are always written, so that the dark and density rules of a theme apply.\n    // Only those set here take the default tokens back (`.scheme`, `.density`).\n    const effective = {\n        colorScheme: colorScheme ?? parent.colorScheme,\n        density: density ?? parent.density,\n    };\n    return (\n        <Element\n            {...props}\n            className={cx(\n                'panneau-theme-scope',\n                styles.scope,\n                colorScheme !== undefined && styles.scheme,\n                density !== undefined && styles.density,\n                className,\n            )}\n            data-color-scheme={effective.colorScheme}\n            data-density={effective.density}\n            data-panneau-theme={scope}\n        >\n            {themeStyles}\n            <ScopeContext value={effective}>\n                <PortalProvider value={container}>{children}</PortalProvider>\n            </ScopeContext>\n            <div ref={setContainer} className={styles.portal} />\n        </Element>\n    );\n}\n"],"mappings":";;;;;;;;;;;;;;;AA4BA,SAAgB,WAAW,EACvB,IAAI,UAAU,OACd,QAAQ,MACR,aACA,SACA,WACA,UACA,GAAG,SACa;CAChB,MAAM,SAAS,IAAI,YAAY;CAC/B,MAAM,CAAC,WAAW,gBAAgB,SAAgC,IAAI;CACtE,MAAM,EAAE,OAAO,QAAQ,gBAAgB,eAAe,KAAK;CAG3D,MAAM,YAAY;EACd,aAAa,eAAe,OAAO;EACnC,SAAS,WAAW,OAAO;CAC/B;CACA,OACI,qBAAC,SAAD;EACI,GAAI;EACJ,WAAW,GACP,uBACAA,2BAAO,OACP,gBAAgB,KAAA,KAAaA,2BAAO,QACpC,YAAY,KAAA,KAAaA,2BAAO,SAChC,SACJ;EACA,qBAAmB,UAAU;EAC7B,gBAAc,UAAU;EACxB,sBAAoB;EAXxB,UAAA;GAaK;GACD,oBAAC,cAAD;IAAc,OAAO;IACjB,UAAA,oBAAC,gBAAD;KAAgB,OAAO;KAAY;IAAyB,CAAA;GAClD,CAAA;GACd,oBAAC,OAAD;IAAK,KAAK;IAAc,WAAWA,2BAAO;GAAO,CAAA;EAC5C;;AAEjB"}

package/dist/select/ListBox.css

@@ -1,93 +1,94 @@
 /* Options of selects, combo boxes and menus. */
 
-.panneau-listBox-8esRuh {
+.panneau-list-box {
     display: flex;
     flex-direction: column;
     max-height: inherit;
-    padding: var(--panneau-space-1);
+    padding: var(--panneau-list-box-padding, var(--panneau-space-1));
     overflow: auto;
     outline: none;
 }
 
-.panneau-item-Zfuva9 {
+.panneau-list-box-item {
     display: flex;
     align-items: center;
     gap: var(--panneau-space-2);
     min-height: var(--panneau-control-height-sm);
-    padding: var(--panneau-space-1) var(--panneau-space-2);
+    padding: var(--panneau-list-box-item-padding-y, calc(var(--panneau-row-padding-y) / 2))
+        var(--panneau-list-box-item-padding-x, var(--panneau-space-2));
     font-size: var(--panneau-font-size-control);
     line-height: var(--panneau-line-height-tight);
     color: var(--panneau-color-text);
     cursor: default;
-    border-radius: var(--panneau-radius-sm);
+    border-radius: var(--panneau-list-box-item-radius, var(--panneau-radius-sm));
     outline: none;
 }
 
-.panneau-item-Zfuva9[data-focused],
-.panneau-item-Zfuva9[data-hovered] {
-    background-color: var(--panneau-color-hover);
+.panneau-list-box-item[data-focused],
+.panneau-list-box-item[data-hovered] {
+    background-color: var(--panneau-list-box-item-bg-hover, var(--panneau-color-hover));
 }
 
-.panneau-item-Zfuva9[data-focus-visible] {
+.panneau-list-box-item[data-focus-visible] {
     outline: var(--panneau-focus-width) solid var(--panneau-color-focus);
     outline-offset: -2px;
 }
 
-.panneau-item-Zfuva9[data-disabled] {
+.panneau-list-box-item[data-disabled] {
     cursor: not-allowed;
     opacity: 0.5;
 }
 
-.panneau-item-Zfuva9[data-danger] {
+.panneau-list-box-item[data-danger] {
     color: var(--panneau-color-danger);
 }
 
-.panneau-itemText-P7FtjI {
+.panneau-list-box-item-text {
     display: flex;
     flex: 1 1 auto;
     flex-direction: column;
     min-width: 0;
 }
 
-.panneau-itemLabel-nLMoU0 {
+.panneau-list-box-item-label {
     overflow-wrap: anywhere;
 }
 
-.panneau-itemDescription--u64pt {
+.panneau-list-box-item-description {
     font-size: var(--panneau-font-size-sm);
     color: var(--panneau-color-text-muted);
 }
 
-.panneau-check-o1OMYv {
+.panneau-list-box-check {
     flex: 0 0 auto;
     width: 1rem;
     color: var(--panneau-color-text);
 }
 
-.panneau-placeholder-Ln7J3j {
+.panneau-list-box-placeholder {
     color: var(--panneau-color-text-muted);
 }
 
-.panneau-empty-4GCKMh {
+.panneau-list-box-empty {
     padding: var(--panneau-space-2);
     font-size: var(--panneau-font-size-sm);
     color: var(--panneau-color-text-muted);
 }
 
-.panneau-separator-FjQdQ6 {
+.panneau-list-box-separator {
     height: 1px;
     margin: var(--panneau-space-1) 0;
     background-color: var(--panneau-color-border);
 }
 
-.panneau-trigger-3OeZeM {
+.panneau-list-box-trigger {
     justify-content: space-between;
     gap: var(--panneau-space-2);
     text-align: start;
     cursor: pointer;
 }
 
-.panneau-value-J-b74F {
+.panneau-list-box-value {
     flex: 1 1 auto;
     min-width: 0;
     overflow: hidden;
@@ -95,10 +96,10 @@
     white-space: nowrap;
 }
 
-.panneau-value-J-b74F[data-placeholder] {
+.panneau-list-box-value[data-placeholder] {
     color: var(--panneau-color-text-muted);
 }
 
-.panneau-chevron-w-papm {
+.panneau-list-box-chevron {
     color: var(--panneau-color-text-muted);
 }

package/dist/select/ListBox.module.js

@@ -1,17 +1,17 @@
 import "./ListBox.css";
 //#region src/select/ListBox.module.css
-var listBox = "panneau-listBox-8esRuh";
-var item = "panneau-item-Zfuva9";
-var itemText = "panneau-itemText-P7FtjI";
-var itemLabel = "panneau-itemLabel-nLMoU0";
-var itemDescription = "panneau-itemDescription--u64pt";
-var check = "panneau-check-o1OMYv";
-var placeholder = "panneau-placeholder-Ln7J3j";
-var empty = "panneau-empty-4GCKMh";
-var separator = "panneau-separator-FjQdQ6";
-var trigger = "panneau-trigger-3OeZeM";
-var value = "panneau-value-J-b74F";
-var chevron = "panneau-chevron-w-papm";
+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 check = "panneau-list-box-check";
+var placeholder = "panneau-list-box-placeholder";
+var empty = "panneau-list-box-empty";
+var separator = "panneau-list-box-separator";
+var trigger = "panneau-list-box-trigger";
+var value = "panneau-list-box-value";
+var chevron = "panneau-list-box-chevron";
 var ListBox_module_default = {
 	listBox,
 	item,

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-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-space-1) 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-radius-sm);\n    outline: none;\n}\n\n.item[data-focused],\n.item[data-hovered] {\n    background-color: 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    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":""}

package/dist/select/Select.js

@@ -44,7 +44,7 @@ function Select$1(props) {
 		validationBehavior: "aria",
 		onBlur: onBlur !== void 0 ? () => onBlur() : void 0,
 		disabledKeys: items.filter((item) => item.disabled === true).map((item_0) => item_0.key),
-		className: cx(Field_module_default.field, className)
+		className: cx("panneau-select", Field_module_default.field, className)
 	};
 	const content = /* @__PURE__ */ jsxs(Fragment, { children: [
 		/* @__PURE__ */ jsx(FieldLabel, {

package/dist/select/Select.js.map

@@ -1 +1 @@
-{"version":3,"file":"Select.js","names":["item","key","value","onChange","Select","fieldStyles","_Fragment","styles","AriaSelect"],"sources":["../../src/select/Select.tsx"],"sourcesContent":["import { Check, ChevronDown } from 'lucide-react';\nimport type { Key } from 'react-aria-components';\nimport {\n    Select as AriaSelect,\n    Button,\n    ListBox,\n    ListBoxItem,\n    SelectValue,\n    Text,\n} from 'react-aria-components';\n\nimport {\n    type FieldChromeProps,\n    FieldDescription,\n    FieldErrors,\n    FieldLabel,\n    fieldStyles,\n} from '../field/FieldParts';\nimport { Icon } from '../icon/Icon';\nimport { messages } from '../intl/messages';\nimport { usePanneauIntl } from '../intl/usePanneauIntl';\nimport { PopoverSurface } from '../popover/Popover';\nimport { cx } from '../utils/cx';\nimport styles from './ListBox.module.css';\n\n/** The value of an option. */\nexport type OptionValue = string | number | boolean;\n\n/** A choice of a select, a radio group or a combo box. Same shape as the protocol's `Option`. */\nexport interface SelectOption {\n    value: OptionValue;\n    label: string;\n    description?: string;\n    disabled?: boolean;\n}\n\n/** Props of both single and multiple selects. */\nexport interface SelectBaseProps extends FieldChromeProps {\n    options: readonly SelectOption[];\n    /** Text shown without a value. Defaults to \"Select…\". */\n    placeholder?: string;\n    isRequired?: boolean;\n    isDisabled?: boolean;\n    name?: string;\n    autoFocus?: boolean;\n    onBlur?: () => void;\n    'aria-label'?: string;\n    id?: string;\n    /** Class name of the button that opens the options. */\n    triggerClassName?: string;\n    popoverClassName?: string;\n}\n\nexport interface SingleSelectProps extends SelectBaseProps {\n    multiple?: false;\n    /** The selected value, or `null`. */\n    value?: OptionValue | null;\n    onChange?: (value: OptionValue | null) => void;\n}\n\nexport interface MultipleSelectProps extends SelectBaseProps {\n    /** Several values can be selected. */\n    multiple: true;\n    value?: readonly OptionValue[];\n    onChange?: (value: OptionValue[]) => void;\n}\n\nexport type SelectProps = SingleSelectProps | MultipleSelectProps;\n\nconst EMPTY_KEY = '__panneau_empty__';\n\nfunction keyOf(options: readonly SelectOption[], value: OptionValue): Key | null {\n    const index = options.findIndex((option) => option.value === value);\n    return index === -1 ? null : String(index);\n}\n\nfunction valueOf(options: readonly SelectOption[], key: Key | null): OptionValue | null {\n    if (key === null || key === EMPTY_KEY) {\n        return null;\n    }\n    return options[Number(key)]?.value ?? null;\n}\n\n/**\n * A dropdown to pick one option, or several with `multiple`. Option values can be strings,\n * numbers or booleans. Unless `isRequired`, a single select has an empty choice first.\n */\nexport function Select(props: SelectProps) {\n    const intl = usePanneauIntl();\n    const {\n        options,\n        label,\n        description,\n        errors = [],\n        placeholder = intl.formatMessage(messages.selectPlaceholder),\n        isRequired = false,\n        isDisabled,\n        name,\n        autoFocus,\n        onBlur,\n        id,\n        className,\n        labelClassName,\n        descriptionClassName,\n        errorsClassName,\n        triggerClassName,\n        popoverClassName,\n    } = props;\n    const invalid = errors.length > 0;\n    const items = options.map((option, index) => ({ ...option, key: String(index) }));\n    const withEmpty = props.multiple !== true && !isRequired;\n\n    const shared = {\n        id,\n        name,\n        autoFocus,\n        isDisabled,\n        isRequired,\n        isInvalid: invalid,\n        placeholder,\n        'aria-label': props['aria-label'],\n        validationBehavior: 'aria' as const,\n        onBlur: onBlur !== undefined ? () => onBlur() : undefined,\n        disabledKeys: items.filter((item) => item.disabled === true).map((item) => item.key),\n        className: cx(fieldStyles.field, className),\n    };\n\n    const content = (\n        <>\n            <FieldLabel isRequired={isRequired} className={labelClassName}>\n                {label}\n            </FieldLabel>\n            <Button className={cx(fieldStyles.control, styles.trigger, triggerClassName)}>\n                <SelectValue className={styles.value} />\n                <Icon icon={ChevronDown} className={styles.chevron} />\n            </Button>\n            <FieldDescription className={descriptionClassName}>{description}</FieldDescription>\n            <FieldErrors errors={errors} className={errorsClassName} />\n            <PopoverSurface className={popoverClassName}>\n                <ListBox className={styles.listBox}>\n                    {withEmpty ? (\n                        <ListBoxItem id={EMPTY_KEY} textValue={placeholder} className={styles.item}>\n                            <span className={styles.check} />\n                            <span className={styles.placeholder}>{placeholder}</span>\n                        </ListBoxItem>\n                    ) : null}\n                    {items.map((item) => (\n                        <ListBoxItem\n                            key={item.key}\n                            id={item.key}\n                            textValue={item.label}\n                            className={styles.item}\n                        >\n                            {({ isSelected }) => (\n                                <>\n                                    <span className={styles.check}>\n                                        {isSelected ? <Icon icon={Check} size=\"sm\" /> : null}\n                                    </span>\n                                    <span className={styles.itemText}>\n                                        <Text slot=\"label\" className={styles.itemLabel}>\n                                            {item.label}\n                                        </Text>\n                                        {item.description !== undefined ? (\n                                            <Text\n                                                slot=\"description\"\n                                                className={styles.itemDescription}\n                                            >\n                                                {item.description}\n                                            </Text>\n                                        ) : null}\n                                    </span>\n                                </>\n                            )}\n                        </ListBoxItem>\n                    ))}\n                </ListBox>\n            </PopoverSurface>\n        </>\n    );\n\n    if (props.multiple === true) {\n        const { value, onChange } = props;\n        return (\n            <AriaSelect\n                {...shared}\n                selectionMode=\"multiple\"\n                value={\n                    value !== undefined\n                        ? value.flatMap((item) => {\n                              const key = keyOf(options, item);\n                              return key !== null ? [key] : [];\n                          })\n                        : undefined\n                }\n                onChange={(keys) =>\n                    onChange?.(\n                        keys.flatMap((key) => {\n                            const item = valueOf(options, key);\n                            return item !== null ? [item] : [];\n                        }),\n                    )\n                }\n            >\n                {content}\n            </AriaSelect>\n        );\n    }\n\n    const { value, onChange } = props;\n    return (\n        <AriaSelect\n            {...shared}\n            selectionMode=\"single\"\n            value={\n                value !== undefined ? (value !== null ? keyOf(options, value) : null) : undefined\n            }\n            onChange={(key) => onChange?.(valueOf(options, key))}\n        >\n            {content}\n        </AriaSelect>\n    );\n}\n"],"mappings":"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"}
+{"version":3,"file":"Select.js","names":["item","key","value","onChange","Select","fieldStyles","_Fragment","styles","AriaSelect"],"sources":["../../src/select/Select.tsx"],"sourcesContent":["import { Check, ChevronDown } from 'lucide-react';\nimport type { Key } from 'react-aria-components';\nimport {\n    Select as AriaSelect,\n    Button,\n    ListBox,\n    ListBoxItem,\n    SelectValue,\n    Text,\n} from 'react-aria-components';\n\nimport {\n    type FieldChromeProps,\n    FieldDescription,\n    FieldErrors,\n    FieldLabel,\n    fieldStyles,\n} from '../field/FieldParts';\nimport { Icon } from '../icon/Icon';\nimport { messages } from '../intl/messages';\nimport { usePanneauIntl } from '../intl/usePanneauIntl';\nimport { PopoverSurface } from '../popover/Popover';\nimport { cx } from '../utils/cx';\nimport styles from './ListBox.module.css';\n\n/** The value of an option. */\nexport type OptionValue = string | number | boolean;\n\n/** A choice of a select, a radio group or a combo box. Same shape as the protocol's `Option`. */\nexport interface SelectOption {\n    value: OptionValue;\n    label: string;\n    description?: string;\n    disabled?: boolean;\n}\n\n/** Props of both single and multiple selects. */\nexport interface SelectBaseProps extends FieldChromeProps {\n    options: readonly SelectOption[];\n    /** Text shown without a value. Defaults to \"Select…\". */\n    placeholder?: string;\n    isRequired?: boolean;\n    isDisabled?: boolean;\n    name?: string;\n    autoFocus?: boolean;\n    onBlur?: () => void;\n    'aria-label'?: string;\n    id?: string;\n    /** Class name of the button that opens the options. */\n    triggerClassName?: string;\n    popoverClassName?: string;\n}\n\nexport interface SingleSelectProps extends SelectBaseProps {\n    multiple?: false;\n    /** The selected value, or `null`. */\n    value?: OptionValue | null;\n    onChange?: (value: OptionValue | null) => void;\n}\n\nexport interface MultipleSelectProps extends SelectBaseProps {\n    /** Several values can be selected. */\n    multiple: true;\n    value?: readonly OptionValue[];\n    onChange?: (value: OptionValue[]) => void;\n}\n\nexport type SelectProps = SingleSelectProps | MultipleSelectProps;\n\nconst EMPTY_KEY = '__panneau_empty__';\n\nfunction keyOf(options: readonly SelectOption[], value: OptionValue): Key | null {\n    const index = options.findIndex((option) => option.value === value);\n    return index === -1 ? null : String(index);\n}\n\nfunction valueOf(options: readonly SelectOption[], key: Key | null): OptionValue | null {\n    if (key === null || key === EMPTY_KEY) {\n        return null;\n    }\n    return options[Number(key)]?.value ?? null;\n}\n\n/**\n * A dropdown to pick one option, or several with `multiple`. Option values can be strings,\n * numbers or booleans. Unless `isRequired`, a single select has an empty choice first.\n */\nexport function Select(props: SelectProps) {\n    const intl = usePanneauIntl();\n    const {\n        options,\n        label,\n        description,\n        errors = [],\n        placeholder = intl.formatMessage(messages.selectPlaceholder),\n        isRequired = false,\n        isDisabled,\n        name,\n        autoFocus,\n        onBlur,\n        id,\n        className,\n        labelClassName,\n        descriptionClassName,\n        errorsClassName,\n        triggerClassName,\n        popoverClassName,\n    } = props;\n    const invalid = errors.length > 0;\n    const items = options.map((option, index) => ({ ...option, key: String(index) }));\n    const withEmpty = props.multiple !== true && !isRequired;\n\n    const shared = {\n        id,\n        name,\n        autoFocus,\n        isDisabled,\n        isRequired,\n        isInvalid: invalid,\n        placeholder,\n        'aria-label': props['aria-label'],\n        validationBehavior: 'aria' as const,\n        onBlur: onBlur !== undefined ? () => onBlur() : undefined,\n        disabledKeys: items.filter((item) => item.disabled === true).map((item) => item.key),\n        className: cx('panneau-select', fieldStyles.field, className),\n    };\n\n    const content = (\n        <>\n            <FieldLabel isRequired={isRequired} className={labelClassName}>\n                {label}\n            </FieldLabel>\n            <Button className={cx(fieldStyles.control, styles.trigger, triggerClassName)}>\n                <SelectValue className={styles.value} />\n                <Icon icon={ChevronDown} className={styles.chevron} />\n            </Button>\n            <FieldDescription className={descriptionClassName}>{description}</FieldDescription>\n            <FieldErrors errors={errors} className={errorsClassName} />\n            <PopoverSurface className={popoverClassName}>\n                <ListBox className={styles.listBox}>\n                    {withEmpty ? (\n                        <ListBoxItem id={EMPTY_KEY} textValue={placeholder} className={styles.item}>\n                            <span className={styles.check} />\n                            <span className={styles.placeholder}>{placeholder}</span>\n                        </ListBoxItem>\n                    ) : null}\n                    {items.map((item) => (\n                        <ListBoxItem\n                            key={item.key}\n                            id={item.key}\n                            textValue={item.label}\n                            className={styles.item}\n                        >\n                            {({ isSelected }) => (\n                                <>\n                                    <span className={styles.check}>\n                                        {isSelected ? <Icon icon={Check} size=\"sm\" /> : null}\n                                    </span>\n                                    <span className={styles.itemText}>\n                                        <Text slot=\"label\" className={styles.itemLabel}>\n                                            {item.label}\n                                        </Text>\n                                        {item.description !== undefined ? (\n                                            <Text\n                                                slot=\"description\"\n                                                className={styles.itemDescription}\n                                            >\n                                                {item.description}\n                                            </Text>\n                                        ) : null}\n                                    </span>\n                                </>\n                            )}\n                        </ListBoxItem>\n                    ))}\n                </ListBox>\n            </PopoverSurface>\n        </>\n    );\n\n    if (props.multiple === true) {\n        const { value, onChange } = props;\n        return (\n            <AriaSelect\n                {...shared}\n                selectionMode=\"multiple\"\n                value={\n                    value !== undefined\n                        ? value.flatMap((item) => {\n                              const key = keyOf(options, item);\n                              return key !== null ? [key] : [];\n                          })\n                        : undefined\n                }\n                onChange={(keys) =>\n                    onChange?.(\n                        keys.flatMap((key) => {\n                            const item = valueOf(options, key);\n                            return item !== null ? [item] : [];\n                        }),\n                    )\n                }\n            >\n                {content}\n            </AriaSelect>\n        );\n    }\n\n    const { value, onChange } = props;\n    return (\n        <AriaSelect\n            {...shared}\n            selectionMode=\"single\"\n            value={\n                value !== undefined ? (value !== null ? keyOf(options, value) : null) : undefined\n            }\n            onChange={(key) => onChange?.(valueOf(options, key))}\n        >\n            {content}\n        </AriaSelect>\n    );\n}\n"],"mappings":"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"}

package/dist/select/listBoxTokens.d.ts

@@ -0,0 +1,3 @@
+/** Tokens of the options of `Select`, `ComboBox` and `Menu`. */
+export declare const listBoxTokens: import("..").ComponentTokens<"list-box", "panneau-list-box-padding" | "panneau-list-box-item-padding-y" | "panneau-list-box-item-padding-x" | "panneau-list-box-item-radius" | "panneau-list-box-item-bg-hover">;
+//# sourceMappingURL=listBoxTokens.d.ts.map