@panneau/ui 0.0.0-stage → 5.0.0-alpha.0

package/dist/radio-group/RadioGroup.css

@@ -0,0 +1,83 @@
+.panneau-options-QPuFOV {
+    display: flex;
+    flex-direction: column;
+    gap: var(--panneau-space-1);
+}
+
+.panneau-horizontal-KgXsCy .panneau-options-QPuFOV {
+    flex-flow: row wrap;
+    gap: var(--panneau-space-1) var(--panneau-space-4);
+}
+
+.panneau-radio-zz4Tx- {
+    display: inline-flex;
+    align-items: flex-start;
+    gap: var(--panneau-space-2);
+    min-height: 1.5rem;
+    font-size: var(--panneau-font-size-md);
+    color: var(--panneau-color-text);
+    cursor: pointer;
+    -webkit-tap-highlight-color: transparent;
+}
+
+.panneau-radio-zz4Tx-[data-disabled] {
+    cursor: not-allowed;
+    opacity: 0.55;
+}
+
+.panneau-radio-zz4Tx-[data-readonly] {
+    cursor: default;
+}
+
+.panneau-circle-IySLxv {
+    flex: 0 0 auto;
+    width: 1.125rem;
+    height: 1.125rem;
+    margin-top: 0.125rem;
+    background-color: var(--panneau-color-surface);
+    border: var(--panneau-border-width) solid var(--panneau-color-border-control);
+    border-radius: var(--panneau-radius-full);
+    transition:
+        border-color var(--panneau-duration),
+        border-width var(--panneau-duration);
+}
+
+.panneau-radio-zz4Tx-[data-hovered] .panneau-circle-IySLxv {
+    border-color: var(--panneau-color-text-muted);
+}
+
+.panneau-radio-zz4Tx-[data-selected] .panneau-circle-IySLxv {
+    border-color: var(--panneau-color-accent);
+    border-width: 0.3125rem;
+}
+
+.panneau-radio-zz4Tx-[data-invalid] .panneau-circle-IySLxv {
+    border-color: var(--panneau-color-danger);
+}
+
+.panneau-radio-zz4Tx-[data-focus-visible] .panneau-circle-IySLxv {
+    outline: var(--panneau-focus-width) solid var(--panneau-color-focus);
+    outline-offset: 2px;
+}
+
+.panneau-text-W98R9k {
+    display: flex;
+    flex-direction: column;
+    min-width: 0;
+}
+
+.panneau-description-SPgnUk {
+    font-size: var(--panneau-font-size-sm);
+    color: var(--panneau-color-text-muted);
+}
+
+@media (pointer: coarse) {
+    .panneau-radio-zz4Tx- {
+        min-height: 2.75rem;
+        align-items: center;
+    }
+
+    .panneau-circle-IySLxv {
+        margin-top: 0;
+    }
+}

package/dist/radio-group/RadioGroup.d.ts

@@ -0,0 +1,12 @@
+import { type RadioGroupProps as AriaRadioGroupProps } from 'react-aria-components';
+import { type FieldChromeProps } from '../field/FieldParts';
+import type { OptionValue, SelectOption } from '../select/Select';
+export interface RadioGroupProps extends Omit<AriaRadioGroupProps, 'className' | 'style' | 'children' | 'isInvalid' | 'validate' | 'value' | 'defaultValue' | 'onChange'>, FieldChromeProps {
+    options: readonly SelectOption[];
+    value?: OptionValue | null;
+    onChange?: (value: OptionValue) => void;
+    radioClassName?: string;
+}
+/** A set of options where one can be picked, all visible at once. */
+export declare function RadioGroup({ options, value, onChange, label, description, errors, orientation, isRequired, className, labelClassName, descriptionClassName, errorsClassName, radioClassName, ...props }: RadioGroupProps): import("react").JSX.Element;
+//# sourceMappingURL=RadioGroup.d.ts.map

package/dist/radio-group/RadioGroup.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"RadioGroup.d.ts","sourceRoot":"","sources":["../../src/radio-group/RadioGroup.tsx"],"names":[],"mappings":"AAAA,OAAO,EAEH,KAAK,eAAe,IAAI,mBAAmB,EAE9C,MAAM,uBAAuB,CAAC;AAE/B,OAAO,EACH,KAAK,gBAAgB,EAKxB,MAAM,qBAAqB,CAAC;AAC7B,OAAO,KAAK,EAAE,WAAW,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAC;AAIlE,MAAM,WAAW,eACb,SACI,IAAI,CACA,mBAAmB,EACjB,WAAW,GACX,OAAO,GACP,UAAU,GACV,WAAW,GACX,UAAU,GACV,OAAO,GACP,cAAc,GACd,UAAU,CACf,EACD,gBAAgB;IACpB,OAAO,EAAE,SAAS,YAAY,EAAE,CAAC;IACjC,KAAK,CAAC,EAAE,WAAW,GAAG,IAAI,CAAC;IAC3B,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,WAAW,KAAK,IAAI,CAAC;IACxC,cAAc,CAAC,EAAE,MAAM,CAAC;CAC3B;AAED,qEAAqE;AACrE,wBAAgB,UAAU,CAAC,EACvB,OAAO,EACP,KAAK,EACL,QAAQ,EACR,KAAK,EACL,WAAW,EACX,MAAW,EACX,WAAwB,EACxB,UAAU,EACV,SAAS,EACT,cAAc,EACd,oBAAoB,EACpB,eAAe,EACf,cAAc,EACd,GAAG,KAAK,EACX,EAAE,eAAe,+BA+CjB"}

package/dist/radio-group/RadioGroup.js

@@ -0,0 +1,61 @@
+import { cx } from "../utils/cx.js";
+import Field_module_default from "../field/Field.module.js";
+import { FieldDescription, FieldErrors, FieldLabel } from "../field/FieldParts.js";
+import RadioGroup_module_default from "./RadioGroup.module.js";
+import { Radio, RadioGroup } from "react-aria-components";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/radio-group/RadioGroup.tsx
+/** A set of options where one can be picked, all visible at once. */
+function RadioGroup$1({ options, value, onChange, label, description, errors = [], orientation = "vertical", isRequired, className, labelClassName, descriptionClassName, errorsClassName, radioClassName, ...props }) {
+	const index = value === void 0 ? void 0 : options.findIndex((o) => o.value === value);
+	return /* @__PURE__ */ jsxs(RadioGroup, {
+		...props,
+		orientation,
+		isRequired,
+		value: index === void 0 ? void 0 : index === -1 ? null : String(index),
+		onChange: (key) => {
+			const option = options[Number(key)];
+			if (option !== void 0) onChange?.(option.value);
+		},
+		isInvalid: errors.length > 0,
+		validationBehavior: "aria",
+		className: cx(Field_module_default.field, orientation === "horizontal" && RadioGroup_module_default.horizontal, className),
+		children: [
+			/* @__PURE__ */ jsx(FieldLabel, {
+				isRequired,
+				className: labelClassName,
+				children: label
+			}),
+			/* @__PURE__ */ jsx("div", {
+				className: RadioGroup_module_default.options,
+				children: options.map((option_0, position) => /* @__PURE__ */ jsxs(Radio, {
+					value: String(position),
+					isDisabled: option_0.disabled,
+					className: cx(RadioGroup_module_default.radio, radioClassName),
+					children: [/* @__PURE__ */ jsx("span", {
+						className: RadioGroup_module_default.circle,
+						"aria-hidden": "true"
+					}), /* @__PURE__ */ jsxs("span", {
+						className: RadioGroup_module_default.text,
+						children: [/* @__PURE__ */ jsx("span", { children: option_0.label }), option_0.description !== void 0 ? /* @__PURE__ */ jsx("span", {
+							className: RadioGroup_module_default.description,
+							children: option_0.description
+						}) : null]
+					})]
+				}, position))
+			}),
+			/* @__PURE__ */ jsx(FieldDescription, {
+				className: descriptionClassName,
+				children: description
+			}),
+			/* @__PURE__ */ jsx(FieldErrors, {
+				errors,
+				className: errorsClassName
+			})
+		]
+	});
+}
+//#endregion
+export { RadioGroup$1 as RadioGroup };
+
+//# sourceMappingURL=RadioGroup.js.map

package/dist/radio-group/RadioGroup.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"RadioGroup.js","names":["option","RadioGroup","AriaRadioGroup","fieldStyles","styles"],"sources":["../../src/radio-group/RadioGroup.tsx"],"sourcesContent":["import {\n    RadioGroup as AriaRadioGroup,\n    type RadioGroupProps as AriaRadioGroupProps,\n    Radio,\n} from 'react-aria-components';\n\nimport {\n    type FieldChromeProps,\n    FieldDescription,\n    FieldErrors,\n    FieldLabel,\n    fieldStyles,\n} from '../field/FieldParts';\nimport type { OptionValue, SelectOption } from '../select/Select';\nimport { cx } from '../utils/cx';\nimport styles from './RadioGroup.module.css';\n\nexport interface RadioGroupProps\n    extends\n        Omit<\n            AriaRadioGroupProps,\n            | 'className'\n            | 'style'\n            | 'children'\n            | 'isInvalid'\n            | 'validate'\n            | 'value'\n            | 'defaultValue'\n            | 'onChange'\n        >,\n        FieldChromeProps {\n    options: readonly SelectOption[];\n    value?: OptionValue | null;\n    onChange?: (value: OptionValue) => void;\n    radioClassName?: string;\n}\n\n/** A set of options where one can be picked, all visible at once. */\nexport function RadioGroup({\n    options,\n    value,\n    onChange,\n    label,\n    description,\n    errors = [],\n    orientation = 'vertical',\n    isRequired,\n    className,\n    labelClassName,\n    descriptionClassName,\n    errorsClassName,\n    radioClassName,\n    ...props\n}: RadioGroupProps) {\n    const index = value === undefined ? undefined : options.findIndex((o) => o.value === value);\n    return (\n        <AriaRadioGroup\n            {...props}\n            orientation={orientation}\n            isRequired={isRequired}\n            value={index === undefined ? undefined : index === -1 ? null : String(index)}\n            onChange={(key) => {\n                const option = options[Number(key)];\n                if (option !== undefined) {\n                    onChange?.(option.value);\n                }\n            }}\n            isInvalid={errors.length > 0}\n            validationBehavior=\"aria\"\n            className={cx(\n                fieldStyles.field,\n                orientation === 'horizontal' && styles.horizontal,\n                className,\n            )}\n        >\n            <FieldLabel isRequired={isRequired} className={labelClassName}>\n                {label}\n            </FieldLabel>\n            <div className={styles.options}>\n                {options.map((option, position) => (\n                    <Radio\n                        key={position}\n                        value={String(position)}\n                        isDisabled={option.disabled}\n                        className={cx(styles.radio, radioClassName)}\n                    >\n                        <span className={styles.circle} aria-hidden=\"true\" />\n                        <span className={styles.text}>\n                            <span>{option.label}</span>\n                            {option.description !== undefined ? (\n                                <span className={styles.description}>{option.description}</span>\n                            ) : null}\n                        </span>\n                    </Radio>\n                ))}\n            </div>\n            <FieldDescription className={descriptionClassName}>{description}</FieldDescription>\n            <FieldErrors errors={errors} className={errorsClassName} />\n        </AriaRadioGroup>\n    );\n}\n"],"mappings":";;;;;;;;AAsCA,SAAgBC,aAAW,EACvB,SACA,OACA,UACA,OACA,aACA,SAAS,CAAA,GACT,cAAc,YACd,YACA,WACA,gBACA,sBACA,iBACA,gBACA,GAAG,SACa;CAChB,MAAM,QAAQ,UAAU,KAAA,IAAY,KAAA,IAAY,QAAQ,WAAW,MAAM,EAAE,UAAU,KAAK;CAC1F,OACI,qBAACC,YAAD;EACI,GAAI;EACS;EACD;EACZ,OAAO,UAAU,KAAA,IAAY,KAAA,IAAY,UAAU,KAAK,OAAO,OAAO,KAAK;EAC3E,WAAW,QAAQ;GACf,MAAM,SAAS,QAAQ,OAAO,GAAG;GACjC,IAAI,WAAW,KAAA,GACX,WAAW,OAAO,KAAK;EAE/B;EACA,WAAW,OAAO,SAAS;EAC3B,oBAAmB;EACnB,WAAW,GACPC,qBAAY,OACZ,gBAAgB,gBAAgBC,0BAAO,YACvC,SACJ;EAjBJ,UAAA;GAmBI,oBAAC,YAAD;IAAwB;IAAY,WAAW;IAC1C,UAAA;GACO,CAAA;GACZ,oBAAC,OAAD;IAAK,WAAWA,0BAAO;IAClB,UAAA,QAAQ,KAAKJ,UAAQ,aAClB,qBAAC,OAAD;KAEI,OAAO,OAAO,QAAQ;KACtB,YAAYA,SAAO;KACnB,WAAW,GAAGI,0BAAO,OAAO,cAAc;KAJ9C,UAAA,CAMI,oBAAC,QAAD;MAAM,WAAWA,0BAAO;MAAQ,eAAY;KAAM,CAAA,GAClD,qBAAC,QAAD;MAAM,WAAWA,0BAAO;MAAxB,UAAA,CACI,oBAAC,QAAD,EAAA,UAAOJ,SAAO,MAAY,CAAA,GACzBA,SAAO,gBAAgB,KAAA,IACpB,oBAAC,QAAD;OAAM,WAAWI,0BAAO;OAAcJ,UAAAA,SAAO;MAAkB,CAAA,IAC/D,IACF;KACH,CAAA,CAAA;IAZE,GAAA,QAYF,CACV;GACA,CAAA;GACL,oBAAC,kBAAD;IAAkB,WAAW;IAAuB,UAAA;GAA8B,CAAA;GAClF,oBAAC,aAAD;IAAqB;IAAQ,WAAW;GAAgB,CAAA;EAC5C;;AAExB"}

package/dist/radio-group/RadioGroup.module.js

@@ -0,0 +1,20 @@
+import "./RadioGroup.css";
+//#region src/radio-group/RadioGroup.module.css
+var options = "panneau-options-QPuFOV";
+var horizontal = "panneau-horizontal-KgXsCy";
+var radio = "panneau-radio-zz4Tx-";
+var circle = "panneau-circle-IySLxv";
+var text = "panneau-text-W98R9k";
+var description = "panneau-description-SPgnUk";
+var RadioGroup_module_default = {
+	options,
+	horizontal,
+	radio,
+	circle,
+	text,
+	description
+};
+//#endregion
+export { circle, RadioGroup_module_default as default, description, horizontal, options, radio, text };
+
+//# sourceMappingURL=RadioGroup.module.js.map

package/dist/radio-group/RadioGroup.module.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"RadioGroup.module.js","names":[],"sources":["../../src/radio-group/RadioGroup.module.css"],"sourcesContent":[".options {\n    display: flex;\n    flex-direction: column;\n    gap: var(--panneau-space-1);\n}\n\n.horizontal .options {\n    flex-flow: row wrap;\n    gap: var(--panneau-space-1) var(--panneau-space-4);\n}\n\n.radio {\n    display: inline-flex;\n    align-items: flex-start;\n    gap: var(--panneau-space-2);\n    min-height: 1.5rem;\n    font-size: var(--panneau-font-size-md);\n    color: var(--panneau-color-text);\n    cursor: pointer;\n    -webkit-tap-highlight-color: transparent;\n}\n\n.radio[data-disabled] {\n    cursor: not-allowed;\n    opacity: 0.55;\n}\n\n.radio[data-readonly] {\n    cursor: default;\n}\n\n.circle {\n    flex: 0 0 auto;\n    width: 1.125rem;\n    height: 1.125rem;\n    margin-top: 0.125rem;\n    background-color: var(--panneau-color-surface);\n    border: var(--panneau-border-width) solid var(--panneau-color-border-control);\n    border-radius: var(--panneau-radius-full);\n    transition:\n        border-color var(--panneau-duration),\n        border-width var(--panneau-duration);\n}\n\n.radio[data-hovered] .circle {\n    border-color: var(--panneau-color-text-muted);\n}\n\n.radio[data-selected] .circle {\n    border-color: var(--panneau-color-accent);\n    border-width: 0.3125rem;\n}\n\n.radio[data-invalid] .circle {\n    border-color: var(--panneau-color-danger);\n}\n\n.radio[data-focus-visible] .circle {\n    outline: var(--panneau-focus-width) solid var(--panneau-color-focus);\n    outline-offset: 2px;\n}\n\n.text {\n    display: flex;\n    flex-direction: column;\n    min-width: 0;\n}\n\n.description {\n    font-size: var(--panneau-font-size-sm);\n    color: var(--panneau-color-text-muted);\n}\n\n@media (pointer: coarse) {\n    .radio {\n        min-height: 2.75rem;\n        align-items: center;\n    }\n\n    .circle {\n        margin-top: 0;\n    }\n}\n"],"mappings":""}

package/dist/root/PanneauRoot.css

@@ -0,0 +1,251 @@
+/*
+ * Design tokens of the default theme, and the base stylesheet of Panneau. Everything is scoped to
+ * the root element: nothing here applies outside of it (decision 0005).
+ *
+ * Defaults are wrapped in :where() so that they have no specificity: a theme, or a project's own
+ * class on the root, overrides any token without fighting the cascade.
+ */
+
+:where(.panneau-root--wA35w) {
+    /* Surfaces */
+    --panneau-color-bg: #ffffff;
+    --panneau-color-surface: #ffffff;
+    --panneau-color-surface-sunken: #f4f4f5;
+    --panneau-color-surface-raised: #ffffff;
+    --panneau-color-hover: rgb(24 24 27 / 0.06);
+    --panneau-color-pressed: rgb(24 24 27 / 0.1);
+    --panneau-color-backdrop: rgb(9 9 11 / 0.45);
+
+    /* Text */
+    --panneau-color-text: #18181b;
+    --panneau-color-text-muted: #52525b;
+    --panneau-color-link: #1d4ed8;
+
+    /* Borders: separators, and the outline of controls (3:1 against the surface) */
+    --panneau-color-border: #e4e4e7;
+    --panneau-color-border-control: #8b8b94;
+
+    /* Accent: primary buttons, checked controls, selection */
+    --panneau-color-accent: #18181b;
+    --panneau-color-accent-hover: #3f3f46;
+    --panneau-color-accent-text: #ffffff;
+    --panneau-color-accent-subtle: #f4f4f5;
+    --panneau-color-focus: #2563eb;
+
+    /* Tones: text on surfaces, subtle backgrounds, borders */
+    --panneau-color-danger: #b91c1c;
+    --panneau-color-danger-subtle: #fef2f2;
+    --panneau-color-danger-border: #fca5a5;
+    --panneau-color-danger-solid: #b91c1c;
+    --panneau-color-danger-solid-hover: #991b1b;
+    --panneau-color-danger-solid-text: #ffffff;
+    --panneau-color-success: #15803d;
+    --panneau-color-success-subtle: #f0fdf4;
+    --panneau-color-success-border: #86efac;
+    --panneau-color-warning: #a16207;
+    --panneau-color-warning-subtle: #fefce8;
+    --panneau-color-warning-border: #fcd34d;
+    --panneau-color-info: #1d4ed8;
+    --panneau-color-info-subtle: #eff6ff;
+    --panneau-color-info-border: #93c5fd;
+
+    /* Typography */
+    --panneau-font-family:
+        system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
+    --panneau-font-family-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+    --panneau-font-size-xs: 0.75rem;
+    --panneau-font-size-sm: 0.8125rem;
+    --panneau-font-size-md: 0.875rem;
+    --panneau-font-size-lg: 1rem;
+    --panneau-font-size-xl: 1.25rem;
+    --panneau-font-size-control: 0.875rem;
+    --panneau-line-height: 1.5;
+    --panneau-line-height-tight: 1.25;
+    --panneau-font-weight-normal: 400;
+    --panneau-font-weight-medium: 500;
+    --panneau-font-weight-bold: 600;
+
+    /* Spacing, on a 4px scale */
+    --panneau-space-1: 0.25rem;
+    --panneau-space-2: 0.5rem;
+    --panneau-space-3: 0.75rem;
+    --panneau-space-4: 1rem;
+    --panneau-space-5: 1.25rem;
+    --panneau-space-6: 1.5rem;
+    --panneau-space-8: 2rem;
+    --panneau-space-10: 2.5rem;
+
+    /* Shapes */
+    --panneau-radius-sm: 0.25rem;
+    --panneau-radius-md: 0.375rem;
+    --panneau-radius-lg: 0.5rem;
+    --panneau-radius-full: 9999px;
+    --panneau-border-width: 1px;
+    --panneau-shadow-sm: 0 1px 2px rgb(0 0 0 / 0.06);
+    --panneau-shadow-md: 0 1px 3px rgb(0 0 0 / 0.08), 0 4px 12px rgb(0 0 0 / 0.08);
+    --panneau-shadow-lg: 0 4px 8px rgb(0 0 0 / 0.08), 0 16px 40px rgb(0 0 0 / 0.16);
+
+    /* Controls */
+    --panneau-control-height: 2.25rem;
+    --panneau-control-height-sm: 1.875rem;
+    --panneau-focus-width: 2px;
+
+    /* Motion and layers */
+    --panneau-duration: 150ms;
+    --panneau-z-overlay: 1000;
+    --panneau-z-toast: 1100;
+
+    color-scheme: light;
+}
+
+:where(.panneau-root--wA35w[data-color-scheme='dark']) {
+    --panneau-color-bg: #09090b;
+    --panneau-color-surface: #18181b;
+    --panneau-color-surface-sunken: #111113;
+    --panneau-color-surface-raised: #232326;
+    --panneau-color-hover: rgb(255 255 255 / 0.07);
+    --panneau-color-pressed: rgb(255 255 255 / 0.12);
+    --panneau-color-backdrop: rgb(0 0 0 / 0.6);
+    --panneau-color-text: #fafafa;
+    --panneau-color-text-muted: #a1a1aa;
+    --panneau-color-link: #93c5fd;
+    --panneau-color-border: #2e2e33;
+    --panneau-color-border-control: #71717a;
+    --panneau-color-accent: #fafafa;
+    --panneau-color-accent-hover: #d4d4d8;
+    --panneau-color-accent-text: #18181b;
+    --panneau-color-accent-subtle: #2e2e33;
+    --panneau-color-focus: #60a5fa;
+    --panneau-color-danger: #fca5a5;
+    --panneau-color-danger-subtle: rgb(127 29 29 / 0.35);
+    --panneau-color-danger-border: #b91c1c;
+    --panneau-color-danger-solid: #dc2626;
+    --panneau-color-danger-solid-hover: #b91c1c;
+    --panneau-color-danger-solid-text: #ffffff;
+    --panneau-color-success: #86efac;
+    --panneau-color-success-subtle: rgb(20 83 45 / 0.35);
+    --panneau-color-success-border: #15803d;
+    --panneau-color-warning: #fcd34d;
+    --panneau-color-warning-subtle: rgb(113 63 18 / 0.35);
+    --panneau-color-warning-border: #a16207;
+    --panneau-color-info: #93c5fd;
+    --panneau-color-info-subtle: rgb(30 58 138 / 0.35);
+    --panneau-color-info-border: #1d4ed8;
+    --panneau-shadow-sm: 0 1px 2px rgb(0 0 0 / 0.4);
+    --panneau-shadow-md: 0 1px 3px rgb(0 0 0 / 0.4), 0 4px 12px rgb(0 0 0 / 0.4);
+    --panneau-shadow-lg: 0 4px 8px rgb(0 0 0 / 0.4), 0 16px 40px rgb(0 0 0 / 0.5);
+
+    color-scheme: dark;
+}
+
+@media (prefers-color-scheme: dark) {
+    :where(.panneau-root--wA35w[data-color-scheme='auto']) {
+        --panneau-color-bg: #09090b;
+        --panneau-color-surface: #18181b;
+        --panneau-color-surface-sunken: #111113;
+        --panneau-color-surface-raised: #232326;
+        --panneau-color-hover: rgb(255 255 255 / 0.07);
+        --panneau-color-pressed: rgb(255 255 255 / 0.12);
+        --panneau-color-backdrop: rgb(0 0 0 / 0.6);
+        --panneau-color-text: #fafafa;
+        --panneau-color-text-muted: #a1a1aa;
+        --panneau-color-link: #93c5fd;
+        --panneau-color-border: #2e2e33;
+        --panneau-color-border-control: #71717a;
+        --panneau-color-accent: #fafafa;
+        --panneau-color-accent-hover: #d4d4d8;
+        --panneau-color-accent-text: #18181b;
+        --panneau-color-accent-subtle: #2e2e33;
+        --panneau-color-focus: #60a5fa;
+        --panneau-color-danger: #fca5a5;
+        --panneau-color-danger-subtle: rgb(127 29 29 / 0.35);
+        --panneau-color-danger-border: #b91c1c;
+        --panneau-color-danger-solid: #dc2626;
+        --panneau-color-danger-solid-hover: #b91c1c;
+        --panneau-color-danger-solid-text: #ffffff;
+        --panneau-color-success: #86efac;
+        --panneau-color-success-subtle: rgb(20 83 45 / 0.35);
+        --panneau-color-success-border: #15803d;
+        --panneau-color-warning: #fcd34d;
+        --panneau-color-warning-subtle: rgb(113 63 18 / 0.35);
+        --panneau-color-warning-border: #a16207;
+        --panneau-color-info: #93c5fd;
+        --panneau-color-info-subtle: rgb(30 58 138 / 0.35);
+        --panneau-color-info-border: #1d4ed8;
+        --panneau-shadow-sm: 0 1px 2px rgb(0 0 0 / 0.4);
+        --panneau-shadow-md: 0 1px 3px rgb(0 0 0 / 0.4), 0 4px 12px rgb(0 0 0 / 0.4);
+        --panneau-shadow-lg: 0 4px 8px rgb(0 0 0 / 0.4), 0 16px 40px rgb(0 0 0 / 0.5);
+
+        color-scheme: dark;
+    }
+}
+
+/* Touch screens: larger targets, and 16px text in inputs so that iOS doesn't zoom on focus. */
+@media (pointer: coarse) {
+    :where(.panneau-root--wA35w) {
+        --panneau-control-height: 2.75rem;
+        --panneau-control-height-sm: 2.25rem;
+        --panneau-font-size-control: 1rem;
+    }
+}
+
+@media (prefers-reduced-motion: reduce) {
+    :where(.panneau-root--wA35w) {
+        --panneau-duration: 0ms;
+    }
+}
+
+/* Base stylesheet, scoped to the root, without specificity: components and projects override it. */
+
+.panneau-root--wA35w {
+    /* The class is mostly a hook for the rules below, which use :where(). */
+    display: block;
+}
+
+:where(.panneau-root--wA35w) {
+    font-family: var(--panneau-font-family);
+    font-size: var(--panneau-font-size-md);
+    line-height: var(--panneau-line-height);
+    color: var(--panneau-color-text);
+    background-color: var(--panneau-color-bg);
+    -webkit-font-smoothing: antialiased;
+    -webkit-text-size-adjust: 100%;
+    text-size-adjust: 100%;
+}
+
+:where(.panneau-root--wA35w) :where(*, *::before, *::after) {
+    box-sizing: border-box;
+}
+
+:where(.panneau-root--wA35w) :where(h1, h2, h3, h4, h5, h6, p, ul, ol, dl, figure, fieldset, legend) {
+    margin: 0;
+    padding: 0;
+}
+
+:where(.panneau-root--wA35w) :where(fieldset) {
+    border: 0;
+    min-width: 0;
+}
+
+:where(.panneau-root--wA35w) :where(button, input, select, textarea) {
+    font: inherit;
+    color: inherit;
+}
+
+:where(.panneau-root--wA35w) :where(a) {
+    color: var(--panneau-color-link);
+}
+
+:where(.panneau-root--wA35w) :where(img, svg, video) {
+    max-width: 100%;
+}
+
+:where(.panneau-root--wA35w) :where(:focus-visible) {
+    outline: var(--panneau-focus-width) solid var(--panneau-color-focus);
+    outline-offset: 2px;
+}
+
+/* Overlays (dialogs, popovers, menus, tooltips) render here, so that they get the tokens. */
+.panneau-portal-keLcJN {
+    display: contents;
+}

package/dist/root/PanneauRoot.d.ts

@@ -0,0 +1,34 @@
+import { type HTMLAttributes, type ReactNode } from 'react';
+import { type ColorScheme, type Theme } from '../theme/theme';
+export interface PanneauRootProps extends HTMLAttributes<HTMLDivElement> {
+    /** Tokens that override the default theme: `bootstrapTheme`, or a project's own. */
+    theme?: Theme | null;
+    /** Defaults to `light`. `auto` follows the system setting. */
+    colorScheme?: ColorScheme;
+    /**
+     * Locale of dates and numbers in React Aria components. Defaults to the react-intl locale, or
+     * to the browser's without an `IntlProvider`.
+     *
+     * Without an `IntlProvider` above it, the root provides one, with the messages of every Panneau
+     * package in this locale (English without a locale, or for a locale Panneau doesn't translate).
+     * An app with its own `IntlProvider` adds them with `withPanneauMessages()` from
+     * `@panneau/intl`.
+     */
+    locale?: string;
+    children?: ReactNode;
+}
+/**
+ * The element overlays render into: the closest `PanneauRoot`'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.
+ */
+export declare function usePortalContainer(): Element | null | undefined;
+/**
+ * The root of every Panneau interface. It scopes the base stylesheet and the design tokens to its
+ * element (no global CSS), applies a theme and a color scheme, and hosts overlays and toasts so
+ * that they get the tokens too. Panneau components must render inside one. A project can override
+ * any token with its own class on the root. Without an `IntlProvider` above it, it provides one
+ * with Panneau's messages in its `locale`.
+ */
+export declare function PanneauRoot({ theme, colorScheme, locale, className, children, ...props }: PanneauRootProps): import("react").JSX.Element;
+//# sourceMappingURL=PanneauRoot.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"PanneauRoot.d.ts","sourceRoot":"","sources":["../../src/root/PanneauRoot.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,cAAc,EAAE,KAAK,SAAS,EAAgC,MAAM,OAAO,CAAC;AAM1F,OAAO,EAAE,KAAK,WAAW,EAAE,KAAK,KAAK,EAA2B,MAAM,gBAAgB,CAAC;AAKvF,MAAM,WAAW,gBAAiB,SAAQ,cAAc,CAAC,cAAc,CAAC;IACpE,oFAAoF;IACpF,KAAK,CAAC,EAAE,KAAK,GAAG,IAAI,CAAC;IACrB,8DAA8D;IAC9D,WAAW,CAAC,EAAE,WAAW,CAAC;IAC1B;;;;;;;;OAQG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,QAAQ,CAAC,EAAE,SAAS,CAAC;CACxB;AAKD;;;;GAIG;AACH,wBAAgB,kBAAkB,IAAI,OAAO,GAAG,IAAI,GAAG,SAAS,CAE/D;AA2BD;;;;;;GAMG;AACH,wBAAgB,WAAW,CAAC,EACxB,KAAY,EACZ,WAAqB,EACrB,MAAM,EACN,SAAS,EACT,QAAQ,EACR,GAAG,KAAK,EACX,EAAE,gBAAgB,+BAqClB"}

package/dist/root/PanneauRoot.js

@@ -0,0 +1,84 @@
+import { cx } from "../utils/cx.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 { getPanneauMessages } from "@panneau/intl";
+import { createContext, use, useState } from "react";
+import { IntlContext, IntlProvider } from "react-intl";
+//#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 element overlays render into: the closest `PanneauRoot`'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 usePortalContainer() {
+	return use(PortalContext);
+}
+/**
+* An `IntlProvider` with Panneau's messages in a locale, for a root without one above it. A locale
+* Panneau doesn't translate gets English, so that react-intl doesn't report every message as
+* missing.
+*/
+function PanneauIntlProvider({ locale = "en", children }) {
+	const messages = getPanneauMessages(locale);
+	const translated = Object.keys(messages).length > 0;
+	return /* @__PURE__ */ jsx(IntlProvider, {
+		locale: translated ? locale : "en",
+		defaultLocale: "en",
+		messages: translated ? messages : getPanneauMessages("en"),
+		children
+	});
+}
+/**
+* The root of every Panneau interface. It scopes the base stylesheet and the design tokens to its
+* element (no global CSS), applies a theme and a color scheme, and hosts overlays and toasts so
+* that they get the tokens too. Panneau components must render inside one. A project can override
+* 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 }) {
+	const intl = use(IntlContext);
+	const [container, setContainer] = useState(null);
+	const css = theme !== null ? getThemeCss(theme, "§") : "";
+	const scope = css !== "" ? hashString(css) : void 0;
+	const root = /* @__PURE__ */ jsxs("div", {
+		...props,
+		className: cx(PanneauRoot_module_default.root, className),
+		"data-color-scheme": colorScheme,
+		"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, {
+			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
+				})
+			}), /* @__PURE__ */ jsx("div", {
+				ref: setContainer,
+				className: PanneauRoot_module_default.portal
+			})]
+		})]
+	});
+	if (intl === null || intl === void 0) return /* @__PURE__ */ jsx(PanneauIntlProvider, {
+		locale,
+		children: root
+	});
+	return root;
+}
+//#endregion
+export { PanneauRoot, usePortalContainer };
+
+//# sourceMappingURL=PanneauRoot.js.map

package/dist/root/PanneauRoot.js.map

@@ -0,0 +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"}

package/dist/root/PanneauRoot.module.js

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

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

@@ -0,0 +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":""}