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

package/dist/prose/tokens.js

@@ -0,0 +1,33 @@
+import { defineComponentTokens } from "../theme/componentTokens.js";
+//#region src/prose/tokens.ts
+/** Tokens of Prose. Its headings use the tokens of Heading. */
+var proseTokens = defineComponentTokens("prose", {
+	/** Line height of the content. */
+	"line-height": "1.6",
+	/** Space between blocks: paragraphs, lists, tables. */
+	gap: "var(--panneau-space-4)",
+	/** Space above a heading. */
+	"heading-gap": "var(--panneau-space-6)",
+	/** Indent of lists. */
+	"list-indent": "1.5em",
+	/** Color of links. */
+	"link-color": "var(--panneau-color-link)",
+	/** Font size of code, relative to the text around it. */
+	"code-font-size": "0.875em",
+	/** Text color of code: inherited, so that a site's global `code` color doesn't apply. */
+	"code-color": "inherit",
+	/** Background of code and code blocks. */
+	"code-bg": "var(--panneau-color-surface-sunken)",
+	/** Corner radius of code and code blocks. */
+	"code-radius": "var(--panneau-radius-sm)",
+	/** Border of quotes. */
+	"quote-border-color": "var(--panneau-color-border)",
+	/** Text color of quotes and captions. */
+	"quote-color": "var(--panneau-color-text-muted)",
+	/** Color of the borders of tables and of horizontal rules. */
+	"border-color": "var(--panneau-color-border)"
+});
+//#endregion
+export { proseTokens };
+
+//# sourceMappingURL=tokens.js.map

package/dist/prose/tokens.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tokens.js","names":[],"sources":["../../src/prose/tokens.ts"],"sourcesContent":["import { defineComponentTokens } from '../theme/componentTokens';\n\n/** Tokens of Prose. Its headings use the tokens of Heading. */\nexport const proseTokens = defineComponentTokens('prose', {\n    /** Line height of the content. */\n    'line-height': '1.6',\n    /** Space between blocks: paragraphs, lists, tables. */\n    gap: 'var(--panneau-space-4)',\n    /** Space above a heading. */\n    'heading-gap': 'var(--panneau-space-6)',\n    /** Indent of lists. */\n    'list-indent': '1.5em',\n    /** Color of links. */\n    'link-color': 'var(--panneau-color-link)',\n    /** Font size of code, relative to the text around it. */\n    'code-font-size': '0.875em',\n    /** Text color of code: inherited, so that a site's global `code` color doesn't apply. */\n    'code-color': 'inherit',\n    /** Background of code and code blocks. */\n    'code-bg': 'var(--panneau-color-surface-sunken)',\n    /** Corner radius of code and code blocks. */\n    'code-radius': 'var(--panneau-radius-sm)',\n    /** Border of quotes. */\n    'quote-border-color': 'var(--panneau-color-border)',\n    /** Text color of quotes and captions. */\n    'quote-color': 'var(--panneau-color-text-muted)',\n    /** Color of the borders of tables and of horizontal rules. */\n    'border-color': 'var(--panneau-color-border)',\n});\n"],"mappings":";;;AAGA,IAAa,cAAc,sBAAsB,SAAS;;CAEtD,eAAe;;CAEf,KAAK;;CAEL,eAAe;;CAEf,eAAe;;CAEf,cAAc;;CAEd,kBAAkB;;CAElB,cAAc;;CAEd,WAAW;;CAEX,eAAe;;CAEf,sBAAsB;;CAEtB,eAAe;;CAEf,gBAAgB;AACpB,CAAC"}

package/dist/radio-group/RadioGroup.css

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

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

@@ -1 +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"}
+{"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,+BAgDjB"}

package/dist/radio-group/RadioGroup.js

@@ -19,7 +19,7 @@ function RadioGroup$1({ options, value, onChange, label, description, errors = [
 		},
 		isInvalid: errors.length > 0,
 		validationBehavior: "aria",
-		className: cx(Field_module_default.field, orientation === "horizontal" && RadioGroup_module_default.horizontal, className),
+		className: cx("panneau-radio-group", Field_module_default.field, orientation === "horizontal" && RadioGroup_module_default.horizontal, className),
 		children: [
 			/* @__PURE__ */ jsx(FieldLabel, {
 				isRequired,
@@ -31,7 +31,7 @@ function RadioGroup$1({ options, value, onChange, label, description, errors = [
 				children: options.map((option_0, position) => /* @__PURE__ */ jsxs(Radio, {
 					value: String(position),
 					isDisabled: option_0.disabled,
-					className: cx(RadioGroup_module_default.radio, radioClassName),
+					className: cx("panneau-radio", RadioGroup_module_default.radio, radioClassName),
 					children: [/* @__PURE__ */ jsx("span", {
 						className: RadioGroup_module_default.circle,
 						"aria-hidden": "true"

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

@@ -1 +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"}
+{"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                'panneau-radio-group',\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('panneau-radio', 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,GACP,uBACAC,qBAAY,OACZ,gBAAgB,gBAAgBC,0BAAO,YACvC,SACJ;EAlBJ,UAAA;GAoBI,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,GAAG,iBAAiBI,0BAAO,OAAO,cAAc;KAJ/D,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

@@ -1,11 +1,11 @@
 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 options = "panneau-radio-group-options";
+var horizontal = "panneau-radio-group-horizontal";
+var radio = "panneau-radio-group-radio";
+var circle = "panneau-radio-group-circle";
+var text = "panneau-radio-group-text";
+var description = "panneau-radio-group-description";
 var RadioGroup_module_default = {
 	options,
 	horizontal,

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

@@ -1 +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":""}
+{"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: var(--panneau-radio-size, 1.125rem);\n    height: var(--panneau-radio-size, 1.125rem);\n    margin-top: 0.125rem;\n    background-color: var(--panneau-radio-bg, var(--panneau-color-surface));\n    border: var(--panneau-border-width) solid\n        var(--panneau-radio-border-color, 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-radio-checked-color, var(--panneau-color-accent));\n    border-width: var(--panneau-radio-checked-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/radio-group/tokens.d.ts

@@ -0,0 +1,3 @@
+/** Tokens of RadioGroup. */
+export declare const radioTokens: import("..").ComponentTokens<"radio", "panneau-radio-size" | "panneau-radio-bg" | "panneau-radio-border-color" | "panneau-radio-checked-color" | "panneau-radio-checked-border-width">;
+//# sourceMappingURL=tokens.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"tokens.d.ts","sourceRoot":"","sources":["../../src/radio-group/tokens.ts"],"names":[],"mappings":"AAEA,4BAA4B;AAC5B,eAAO,MAAM,WAAW,wLAWtB,CAAC"}

package/dist/radio-group/tokens.js

@@ -0,0 +1,19 @@
+import { defineComponentTokens } from "../theme/componentTokens.js";
+//#region src/radio-group/tokens.ts
+/** Tokens of RadioGroup. */
+var radioTokens = defineComponentTokens("radio", {
+	/** Size of the circle. */
+	size: "1.125rem",
+	/** Background of the circle. */
+	bg: "var(--panneau-color-surface)",
+	/** Border color of the circle. */
+	"border-color": "var(--panneau-color-border-control)",
+	/** Color of a selected circle. */
+	"checked-color": "var(--panneau-color-accent)",
+	/** Border width of a selected circle, which draws the dot. */
+	"checked-border-width": "0.3125rem"
+});
+//#endregion
+export { radioTokens };
+
+//# sourceMappingURL=tokens.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"tokens.js","names":[],"sources":["../../src/radio-group/tokens.ts"],"sourcesContent":["import { defineComponentTokens } from '../theme/componentTokens';\n\n/** Tokens of RadioGroup. */\nexport const radioTokens = defineComponentTokens('radio', {\n    /** Size of the circle. */\n    size: '1.125rem',\n    /** Background of the circle. */\n    bg: 'var(--panneau-color-surface)',\n    /** Border color of the circle. */\n    'border-color': 'var(--panneau-color-border-control)',\n    /** Color of a selected circle. */\n    'checked-color': 'var(--panneau-color-accent)',\n    /** Border width of a selected circle, which draws the dot. */\n    'checked-border-width': '0.3125rem',\n});\n"],"mappings":";;;AAGA,IAAa,cAAc,sBAAsB,SAAS;;CAEtD,MAAM;;CAEN,IAAI;;CAEJ,gBAAgB;;CAEhB,iBAAiB;;CAEjB,wBAAwB;AAC5B,CAAC"}

package/dist/root/PanneauRoot.css

@@ -6,7 +6,7 @@
  * class on the root, overrides any token without fighting the cascade.
  */
 
-:where(.panneau-root--wA35w) {
+:where(.panneau-root) {
     /* Surfaces */
     --panneau-color-bg: #ffffff;
     --panneau-color-surface: #ffffff;
@@ -42,17 +42,54 @@
     --panneau-color-success: #15803d;
     --panneau-color-success-subtle: #f0fdf4;
     --panneau-color-success-border: #86efac;
+    --panneau-color-success-solid: #15803d;
+    --panneau-color-success-solid-hover: #166534;
+    --panneau-color-success-solid-text: #ffffff;
     --panneau-color-warning: #a16207;
     --panneau-color-warning-subtle: #fefce8;
     --panneau-color-warning-border: #fcd34d;
+    --panneau-color-warning-solid: #a16207;
+    --panneau-color-warning-solid-hover: #854d0e;
+    --panneau-color-warning-solid-text: #ffffff;
     --panneau-color-info: #1d4ed8;
     --panneau-color-info-subtle: #eff6ff;
     --panneau-color-info-border: #93c5fd;
+    --panneau-color-info-solid: #1d4ed8;
+    --panneau-color-info-solid-hover: #1e40af;
+    --panneau-color-info-solid-text: #ffffff;
 
-    /* Typography */
-    --panneau-font-family:
+    /*
+     * Data visualization: 8 categorical colors in a fixed order, a sequential ramp from low to high,
+     * and a diverging pair around a neutral midpoint. Each categorical color reaches 3:1 against
+     * the surface, and stays distinct under the common color vision deficiencies (chartColors.test).
+     */
+    --panneau-chart-categorical-1: #1c6cbb;
+    --panneau-chart-categorical-2: #c47713;
+    --panneau-chart-categorical-3: #d12f74;
+    --panneau-chart-categorical-4: #515922;
+    --panneau-chart-categorical-5: #2b9c52;
+    --panneau-chart-categorical-6: #a977b3;
+    --panneau-chart-categorical-7: #8f2786;
+    --panneau-chart-categorical-8: #9176e8;
+    --panneau-chart-sequential-1: #dbe8f6;
+    --panneau-chart-sequential-2: #a3c6e9;
+    --panneau-chart-sequential-3: #5f9bd6;
+    --panneau-chart-sequential-4: #2c6cb0;
+    --panneau-chart-sequential-5: #1a4475;
+    --panneau-chart-diverging-negative: #b4501a;
+    --panneau-chart-diverging-neutral: #e4e4e7;
+    --panneau-chart-diverging-positive: #1c6cbb;
+
+    /* Typography: font roles. Headings and display text follow the body unless a theme sets them. */
+    --panneau-font-family-body:
         system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
+    --panneau-font-family-heading: var(--panneau-font-family-body);
+    --panneau-font-family-display: var(--panneau-font-family-heading);
     --panneau-font-family-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+    /* Deprecated alias of the body family: set --panneau-font-family-body instead. */
+    --panneau-font-family: var(--panneau-font-family-body);
+    /* Numbers that line up: stats, dates, ids (font-variant-numeric). */
+    --panneau-font-numeric: tabular-nums;
     --panneau-font-size-xs: 0.75rem;
     --panneau-font-size-sm: 0.8125rem;
     --panneau-font-size-md: 0.875rem;
@@ -85,9 +122,11 @@
     --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 */
+    /* Controls and rows: the comfortable density. Other densities redefine these tokens. */
     --panneau-control-height: 2.25rem;
     --panneau-control-height-sm: 1.875rem;
+    --panneau-control-padding-x: 0.75rem;
+    --panneau-row-padding-y: 0.5rem;
     --panneau-focus-width: 2px;
 
     /* Motion and layers */
@@ -98,7 +137,83 @@
     color-scheme: light;
 }
 
-:where(.panneau-root--wA35w[data-color-scheme='dark']) {
+/*
+ * A ThemeScope with its own color scheme (.scheme) takes the light colors back, since the root
+ * around it may be dark. Scopes without one inherit the colors of their parent.
+ */
+:where(.panneau-root-scheme[data-color-scheme='light'], .panneau-root-scheme[data-color-scheme='auto']) {
+    --panneau-chart-categorical-1: #1c6cbb;
+    --panneau-chart-categorical-2: #c47713;
+    --panneau-chart-categorical-3: #d12f74;
+    --panneau-chart-categorical-4: #515922;
+    --panneau-chart-categorical-5: #2b9c52;
+    --panneau-chart-categorical-6: #a977b3;
+    --panneau-chart-categorical-7: #8f2786;
+    --panneau-chart-categorical-8: #9176e8;
+    --panneau-chart-sequential-1: #dbe8f6;
+    --panneau-chart-sequential-2: #a3c6e9;
+    --panneau-chart-sequential-3: #5f9bd6;
+    --panneau-chart-sequential-4: #2c6cb0;
+    --panneau-chart-sequential-5: #1a4475;
+    --panneau-chart-diverging-negative: #b4501a;
+    --panneau-chart-diverging-neutral: #e4e4e7;
+    --panneau-chart-diverging-positive: #1c6cbb;
+    --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);
+    --panneau-color-text: #18181b;
+    --panneau-color-text-muted: #52525b;
+    --panneau-color-link: #1d4ed8;
+    --panneau-color-border: #e4e4e7;
+    --panneau-color-border-control: #8b8b94;
+    --panneau-color-accent: #18181b;
+    --panneau-color-accent-hover: #3f3f46;
+    --panneau-color-accent-text: #ffffff;
+    --panneau-color-accent-subtle: #f4f4f5;
+    --panneau-color-focus: #2563eb;
+    --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;
+    --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);
+
+    color-scheme: light;
+}
+
+:where(.panneau-root[data-color-scheme='dark'], .panneau-root-scheme[data-color-scheme='dark']) {
+    --panneau-chart-categorical-1: #61a9e3;
+    --panneau-chart-categorical-2: #e5c040;
+    --panneau-chart-categorical-3: #d9456a;
+    --panneau-chart-categorical-4: #a1da9e;
+    --panneau-chart-categorical-5: #bb6528;
+    --panneau-chart-categorical-6: #a06a9b;
+    --panneau-chart-categorical-7: #8c71e2;
+    --panneau-chart-categorical-8: #56dfe1;
+    --panneau-chart-sequential-1: #1d3550;
+    --panneau-chart-sequential-2: #285684;
+    --panneau-chart-sequential-3: #3d7fc2;
+    --panneau-chart-sequential-4: #74abe0;
+    --panneau-chart-sequential-5: #b8d6f2;
+    --panneau-chart-diverging-negative: #f0884a;
+    --panneau-chart-diverging-neutral: #3f3f46;
+    --panneau-chart-diverging-positive: #61a9e3;
     --panneau-color-bg: #09090b;
     --panneau-color-surface: #18181b;
     --panneau-color-surface-sunken: #111113;
@@ -139,7 +254,23 @@
 }
 
 @media (prefers-color-scheme: dark) {
-    :where(.panneau-root--wA35w[data-color-scheme='auto']) {
+    :where(.panneau-root[data-color-scheme='auto'], .panneau-root-scheme[data-color-scheme='auto']) {
+        --panneau-chart-categorical-1: #61a9e3;
+        --panneau-chart-categorical-2: #e5c040;
+        --panneau-chart-categorical-3: #d9456a;
+        --panneau-chart-categorical-4: #a1da9e;
+        --panneau-chart-categorical-5: #bb6528;
+        --panneau-chart-categorical-6: #a06a9b;
+        --panneau-chart-categorical-7: #8c71e2;
+        --panneau-chart-categorical-8: #56dfe1;
+        --panneau-chart-sequential-1: #1d3550;
+        --panneau-chart-sequential-2: #285684;
+        --panneau-chart-sequential-3: #3d7fc2;
+        --panneau-chart-sequential-4: #74abe0;
+        --panneau-chart-sequential-5: #b8d6f2;
+        --panneau-chart-diverging-negative: #f0884a;
+        --panneau-chart-diverging-neutral: #3f3f46;
+        --panneau-chart-diverging-positive: #61a9e3;
         --panneau-color-bg: #09090b;
         --panneau-color-surface: #18181b;
         --panneau-color-surface-sunken: #111113;
@@ -180,29 +311,69 @@
     }
 }
 
-/* Touch screens: larger targets, and 16px text in inputs so that iOS doesn't zoom on focus. */
+/*
+ * Densities: compact, comfortable (the tokens above) and touch, with larger targets and 16px text in
+ * inputs so that iOS doesn't zoom on focus. `auto`, the default, is touch on coarse pointers (touch
+ * screens) and comfortable otherwise.
+ */
+/* A ThemeScope with its own density (.density) takes the comfortable values back. */
+:where(.panneau-root-density[data-density='comfortable'], .panneau-root-density[data-density='auto']) {
+    --panneau-control-height: 2.25rem;
+    --panneau-control-height-sm: 1.875rem;
+    --panneau-font-size-control: 0.875rem;
+    --panneau-control-padding-x: 0.75rem;
+    --panneau-row-padding-y: 0.5rem;
+}
+
+:where(.panneau-root[data-density='compact'], .panneau-root-density[data-density='compact']) {
+    --panneau-control-height: 2rem;
+    --panneau-control-height-sm: 1.625rem;
+    --panneau-font-size-control: 0.8125rem;
+    --panneau-control-padding-x: 0.5rem;
+    --panneau-row-padding-y: 0.25rem;
+}
+
+:where(.panneau-root[data-density='touch'], .panneau-root-density[data-density='touch']) {
+    --panneau-control-height: 2.75rem;
+    --panneau-control-height-sm: 2.25rem;
+    --panneau-font-size-control: 1rem;
+    --panneau-control-padding-x: 0.75rem;
+    --panneau-row-padding-y: 0.75rem;
+}
+
 @media (pointer: coarse) {
-    :where(.panneau-root--wA35w) {
+    :where(.panneau-root[data-density='auto'], .panneau-root-density[data-density='auto']) {
         --panneau-control-height: 2.75rem;
         --panneau-control-height-sm: 2.25rem;
         --panneau-font-size-control: 1rem;
+        --panneau-control-padding-x: 0.75rem;
+        --panneau-row-padding-y: 0.75rem;
     }
 }
 
 @media (prefers-reduced-motion: reduce) {
-    :where(.panneau-root--wA35w) {
+    :where(.panneau-root) {
         --panneau-duration: 0ms;
     }
 }
 
-/* Base stylesheet, scoped to the root, without specificity: components and projects override it. */
+/* Base stylesheet, scoped to the root, with less weight than any class: components and projects override it. */
 
-.panneau-root--wA35w {
+.panneau-root {
     /* The class is mostly a hook for the rules below, which use :where(). */
     display: block;
 }
 
-:where(.panneau-root--wA35w) {
+/*
+ * The root is a size container, so that the responsive props of layout primitives follow its width
+ * rather than the viewport's. Like any size container, its width can't come from its content: in a
+ * flex row or a float, give it a width. Toast regions share the tokens of .root, not this.
+ */
+.panneau-root-container {
+    container: panneau-root / inline-size;
+}
+
+:where(.panneau-root) {
     font-family: var(--panneau-font-family);
     font-size: var(--panneau-font-size-md);
     line-height: var(--panneau-line-height);
@@ -213,39 +384,91 @@
     text-size-adjust: 100%;
 }
 
-:where(.panneau-root--wA35w) :where(*, *::before, *::after) {
+:where(.panneau-root) :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) {
+/*
+ * Element resets weigh two element selectors, (0,0,2), by repeating :is(): more than the global
+ * element rules of a site, such as Bootstrap's Reboot (`h5 { margin-bottom: 0.5rem }` weighs
+ * (0,0,1)), less than any class, so that components and projects still override them.
+ */
+:where(.panneau-root)
+    :is(
+        h1,
+        h2,
+        h3,
+        h4,
+        h5,
+        h6,
+        p,
+        ul,
+        ol,
+        dl,
+        dd,
+        figure,
+        blockquote,
+        pre,
+        hr,
+        fieldset,
+        legend
+    ):is(h1, h2, h3, h4, h5, h6, p, ul, ol, dl, dd, figure, blockquote, pre, hr, fieldset, legend) {
     margin: 0;
     padding: 0;
 }
 
-:where(.panneau-root--wA35w) :where(fieldset) {
+/* Reboot floats legends and scales their text. */
+:where(.panneau-root) :is(legend):is(legend) {
+    float: none;
+    width: auto;
+    font-size: inherit;
+    line-height: inherit;
+}
+
+/* Reboot fades rules to 25% opacity. */
+:where(.panneau-root) :is(hr):is(hr) {
+    opacity: 1;
+}
+
+:where(.panneau-root) :where(fieldset) {
     border: 0;
     min-width: 0;
 }
 
-:where(.panneau-root--wA35w) :where(button, input, select, textarea) {
+:where(.panneau-root) :where(button, input, select, textarea) {
     font: inherit;
     color: inherit;
 }
 
-:where(.panneau-root--wA35w) :where(a) {
+:where(.panneau-root) :is(a):is(a) {
     color: var(--panneau-color-link);
 }
 
-:where(.panneau-root--wA35w) :where(img, svg, video) {
+:where(.panneau-root) :where(img, svg, video) {
     max-width: 100%;
 }
 
-:where(.panneau-root--wA35w) :where(:focus-visible) {
+:where(.panneau-root) :where(:focus-visible) {
     outline: var(--panneau-focus-width) solid var(--panneau-color-focus);
     outline-offset: 2px;
 }
 
+/*
+ * A ThemeScope applies the text styles of its tokens again, since inherited values were computed
+ * on the root. One with its own color scheme or theme paints its background too.
+ */
+:where(.panneau-root-scope) {
+    font-family: var(--panneau-font-family);
+    font-size: var(--panneau-font-size-md);
+    line-height: var(--panneau-line-height);
+    color: var(--panneau-color-text);
+}
+
+:where(.panneau-root-scope.panneau-root-scheme, .panneau-root-scope[data-panneau-theme]) {
+    background-color: var(--panneau-color-bg);
+}
+
 /* Overlays (dialogs, popovers, menus, tooltips) render here, so that they get the tokens. */
-.panneau-portal-keLcJN {
+.panneau-root-portal {
     display: contents;
 }