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

package/dist/theme/theme.js

@@ -1,3 +1,5 @@
+import { parseColor } from "./color.js";
+import { TONE_VARIABLES, resolveTone, toneClassName } from "./tones.js";
 //#region src/theme/theme.ts
 function declarations(tokens) {
 	return Object.entries(tokens).filter(([name, value]) => /^[a-zA-Z0-9-_]+$/.test(name) && !/[{};<]/.test(value)).map(([name, value]) => `--${name}:${value};`).join("");
@@ -8,23 +10,111 @@ function hashString(value) {
 	for (let index = 0; index < value.length; index += 1) hash = hash * 33 ^ value.charCodeAt(index);
 	return (hash >>> 0).toString(36);
 }
+var NAME = /^[a-z0-9-]+$/;
+var VARIABLE = /^var\(--([a-zA-Z0-9_-]+)\)$/;
+/** The palette of a theme, as variables: `{ 'panneau-palette-orange': '#f25c05' }`. */
+function paletteVariables(palette = {}) {
+	return Object.fromEntries(Object.entries(palette).filter(([name]) => NAME.test(name)).map(([name, value]) => [`panneau-palette-${name}`, value]));
+}
+/**
+* Follows `var(--name)` references through the given variables (tokens, palette colors), until a
+* value that is not one: `var(--panneau-palette-orange)` becomes `#f25c05`. A reference to a
+* variable that isn't given is returned as is.
+*/
+function resolveReference(value, variables) {
+	let current = value;
+	for (let depth = 0; depth < 10; depth += 1) {
+		const name = VARIABLE.exec(current.trim())?.[1];
+		if (name === void 0 || !Object.hasOwn(variables, name)) return current;
+		current = variables[name] ?? current;
+	}
+	return current;
+}
+function toneDeclarations(values) {
+	return declarations(Object.fromEntries(Object.keys(TONE_VARIABLES).map((key) => [TONE_VARIABLES[key], values[key]])));
+}
+/**
+* The surfaces of a theme in each scheme, when it sets ones Panneau can read: tones derived from
+* one color are made readable on them.
+*/
+function themeSurfaces(theme) {
+	const palette = paletteVariables(theme.palette);
+	const surface = (tokens) => {
+		const variables = {
+			...palette,
+			...tokens
+		};
+		const value = variables["panneau-color-surface"];
+		return value !== void 0 ? parseColor(resolveReference(value, variables)) : null;
+	};
+	const light = surface(theme.tokens);
+	const dark = theme.dark?.["panneau-color-surface"] !== void 0 ? surface({
+		...theme.tokens,
+		...theme.dark
+	}) : null;
+	return {
+		...light !== null && { light },
+		...dark !== null && { dark }
+	};
+}
+/**
+* The rules of the densities of a theme. `auto` takes the comfortable values on fine pointers and
+* the touch ones on coarse pointers, like the default theme.
+*/
+function densityCss(root, densities = {}) {
+	const body = (density) => declarations(densities[density] ?? {});
+	const rule = (selector, css) => css !== "" ? `${selector}{${css}}` : "";
+	const media = (query, css) => css !== "" ? `@media ${query}{${css}}` : "";
+	const selector = (density) => `${root}[data-density="${density}"]`;
+	return [
+		rule(selector("compact"), body("compact")),
+		rule(selector("comfortable"), body("comfortable")),
+		media("not (pointer: coarse)", rule(selector("auto"), body("comfortable"))),
+		rule(selector("touch"), body("touch")),
+		media("(pointer: coarse)", rule(selector("auto"), body("touch")))
+	].join("");
+}
 /**
-* The CSS of a theme, scoped to the roots that carry `data-panneau-theme="<scope>"`. Its rules are
-* more specific than the default tokens, and dark overrides more specific than light ones. Token
-* names must be plain identifiers, and values can't contain `{`, `}`, `;` or `<`: other entries are
-* ignored.
+* The CSS of a theme, scoped to the roots that carry `data-panneau-theme="<scope>"`: its palette and
+* tokens, its densities, its tones and the variants of components. Its rules are more specific than the default
+* tokens and the built-in tones, and dark overrides more specific than light ones. Token, tone,
+* component and variant names must be plain identifiers, and values can't contain `{`, `}`, `;` or
+* `<`: other entries are ignored.
 */
 function getThemeCss(theme, scope) {
 	const root = `[data-panneau-theme="${scope}"]`;
-	const light = declarations(theme.tokens);
-	const dark = theme.dark !== void 0 ? declarations(theme.dark) : "";
+	const dark = `${root}[data-color-scheme="dark"]`;
+	const auto = `${root}[data-color-scheme="auto"]`;
+	const light = [];
+	const darkRules = [];
+	const rule = (selector, body) => body !== "" ? `${selector}{${body}}` : "";
+	const palette = paletteVariables(theme.palette);
+	const surfaces = themeSurfaces(theme);
+	light.push(rule(root, declarations({
+		...palette,
+		...theme.tokens
+	})));
+	light.push(densityCss(root, theme.densities));
+	if (theme.dark !== void 0) darkRules.push(rule("§", declarations(theme.dark)));
+	Object.entries(theme.tones ?? {}).filter(([name]) => NAME.test(name)).forEach(([name, input]) => {
+		const values = resolveTone(typeof input === "string" ? resolveReference(input, palette) : input, surfaces);
+		const selector = `.${toneClassName(name)}`;
+		light.push(rule(`${root} ${selector}`, toneDeclarations(values.light)));
+		darkRules.push(rule(`§ ${selector}`, toneDeclarations(values.dark)));
+	});
+	Object.entries(theme.components ?? {}).filter(([component]) => NAME.test(component)).forEach(([component, { variants = {} }]) => {
+		Object.entries(variants).filter(([name]) => NAME.test(name)).forEach(([name, tokens]) => {
+			light.push(rule(`${root} .panneau-${component}-variant-${name}`, declarations(tokens)));
+		});
+	});
+	const darkCss = darkRules.filter(Boolean);
 	return [
-		light !== "" ? `${root}{${light}}` : "",
-		dark !== "" ? `${root}[data-color-scheme="dark"]{${dark}}` : "",
-		dark !== "" ? `@media (prefers-color-scheme: dark){${root}[data-color-scheme="auto"]{${dark}}}` : ""
+		...light,
+		...darkCss.map((css) => css.replaceAll("§", dark)),
+		darkCss.length > 0 ? `@media (prefers-color-scheme: dark){${darkCss.map((css) => css.replaceAll("§", auto)).join("")}}` : ""
 	].join("");
 }
 //#endregion
-export { getThemeCss, hashString };
+export { getThemeCss, hashString, paletteVariables, resolveReference, themeSurfaces };
 
 //# sourceMappingURL=theme.js.map

package/dist/theme/theme.js.map

@@ -1 +1 @@
-{"version":3,"file":"theme.js","names":[],"sources":["../../src/theme/theme.ts"],"sourcesContent":["/**\n * A theme: design tokens, as CSS variables without the leading `--`, with optional overrides for\n * the dark scheme. It has the same shape as the `Theme` of `@panneau/core` plugins.\n */\nexport interface Theme {\n    label?: string;\n    /** Tokens of the light scheme, or of both schemes without `dark`: `{ 'panneau-color-accent': '#05f' }`. */\n    tokens: Record<string, string>;\n    /** Tokens that change in the dark scheme. */\n    dark?: Record<string, string>;\n}\n\n/** `auto` follows the system setting (`prefers-color-scheme`). */\nexport type ColorScheme = 'light' | 'dark' | 'auto';\n\nfunction declarations(tokens: Record<string, string>): string {\n    return Object.entries(tokens)\n        .filter(([name, value]) => /^[a-zA-Z0-9-_]+$/.test(name) && !/[{};<]/.test(value))\n        .map(([name, value]) => `--${name}:${value};`)\n        .join('');\n}\n\n/** A short, stable hash of a string, to scope the CSS of a theme. */\nexport function hashString(value: string): string {\n    let hash = 5381;\n    for (let index = 0; index < value.length; index += 1) {\n        hash = (hash * 33) ^ value.charCodeAt(index);\n    }\n    return (hash >>> 0).toString(36);\n}\n\n/**\n * The CSS of a theme, scoped to the roots that carry `data-panneau-theme=\"<scope>\"`. Its rules are\n * more specific than the default tokens, and dark overrides more specific than light ones. Token\n * names must be plain identifiers, and values can't contain `{`, `}`, `;` or `<`: other entries are\n * ignored.\n */\nexport function getThemeCss(theme: Theme, scope: string): string {\n    const root = `[data-panneau-theme=\"${scope}\"]`;\n    const light = declarations(theme.tokens);\n    const dark = theme.dark !== undefined ? declarations(theme.dark) : '';\n    return [\n        light !== '' ? `${root}{${light}}` : '',\n        dark !== '' ? `${root}[data-color-scheme=\"dark\"]{${dark}}` : '',\n        dark !== ''\n            ? `@media (prefers-color-scheme: dark){${root}[data-color-scheme=\"auto\"]{${dark}}}`\n            : '',\n    ].join('');\n}\n"],"mappings":";AAeA,SAAS,aAAa,QAAwC;CAC1D,OAAO,OAAO,QAAQ,MAAM,CAAC,CACxB,QAAQ,CAAC,MAAM,WAAW,mBAAmB,KAAK,IAAI,KAAK,CAAC,SAAS,KAAK,KAAK,CAAC,CAAC,CACjF,KAAK,CAAC,MAAM,WAAW,KAAK,KAAI,GAAI,MAAK,EAAG,CAAC,CAC7C,KAAK,EAAE;AAChB;;AAGA,SAAgB,WAAW,OAAuB;CAC9C,IAAI,OAAO;CACX,KAAK,IAAI,QAAQ,GAAG,QAAQ,MAAM,QAAQ,SAAS,GAC/C,OAAQ,OAAO,KAAM,MAAM,WAAW,KAAK;CAE/C,QAAQ,SAAS,EAAA,CAAG,SAAS,EAAE;AACnC;;;;;;;AAQA,SAAgB,YAAY,OAAc,OAAuB;CAC7D,MAAM,OAAO,wBAAwB,MAAK;CAC1C,MAAM,QAAQ,aAAa,MAAM,MAAM;CACvC,MAAM,OAAO,MAAM,SAAS,KAAA,IAAY,aAAa,MAAM,IAAI,IAAI;CACnE,OAAO;EACH,UAAU,KAAK,GAAG,KAAI,GAAI,MAAK,KAAM;EACrC,SAAS,KAAK,GAAG,KAAI,6BAA8B,KAAI,KAAM;EAC7D,SAAS,KACH,uCAAuC,KAAI,6BAA8B,KAAI,MAC7E;CAAE,CACX,CAAC,KAAK,EAAE;AACb"}
+{"version":3,"file":"theme.js","names":[],"sources":["../../src/theme/theme.ts"],"sourcesContent":["import { parseColor } from './color';\nimport type { ThemeFont } from './fonts';\nimport {\n    TONE_VARIABLES,\n    type ToneInput,\n    type ToneSurfaces,\n    type ToneValues,\n    resolveTone,\n    toneClassName,\n} from './tones';\n\n/**\n * A theme: design tokens, as CSS variables without the leading `--`, with optional overrides for\n * the dark scheme, raw palette colors, its own tones, and named variants of components (decision\n * 0024). A theme is plain data: the `Theme` schema of `@panneau/protocol` validates it, and plugins\n * of `@panneau/core` register it. Write one with `defineTheme()` to check token names.\n *\n * It is a type rather than an interface so that it is assignable to the `Theme` of\n * `@panneau/protocol`, which accepts properties of later versions.\n */\nexport type Theme = {\n    /** A name for theme pickers. */\n    label?: string;\n    /** Tokens of the light scheme, or of both schemes without `dark`: `{ 'panneau-color-accent': '#05f' }`. */\n    tokens: Record<string, string>;\n    /** Tokens that change in the dark scheme. */\n    dark?: Record<string, string>;\n    /**\n     * Raw colors, written as `--panneau-palette-<name>`: tokens and tones use them with\n     * `var(--panneau-palette-<name>)`, so that a theme names its brand colors once.\n     */\n    palette?: Record<string, string>;\n    /**\n     * Tones added or redefined by the theme: one color, from which Panneau derives the others,\n     * or every value. Declare added tones in `PanneauTones` so that `tone=\"signal\"` type-checks.\n     */\n    tones?: Record<string, ToneInput>;\n    /**\n     * Named variants of components: token overrides that `<Badge variant=\"tag\">` applies through\n     * its `panneau-badge-variant-tag` class. Declare them in `BadgeVariants` (and the like).\n     */\n    components?: Record<string, { variants?: Record<string, Record<string, string>> }>;\n    /**\n     * Tokens of each density, such as `panneau-control-height`: tokens set here change with the\n     * density of the root, while the same tokens in `tokens` would apply to every density.\n     */\n    densities?: Partial<Record<Exclude<Density, 'auto'>, Record<string, string>>>;\n    /**\n     * Font faces and font stylesheets, which `PanneauRoot` adds to the page once. Font tokens\n     * (`panneau-font-family-heading`) then use their families.\n     */\n    fonts?: ThemeFont[];\n};\n\n/** `auto` follows the system setting (`prefers-color-scheme`). */\nexport type ColorScheme = 'light' | 'dark' | 'auto';\n\n/**\n * How much room controls and rows take: `compact`, `comfortable`, or `touch`, with larger targets.\n * `auto` is `touch` on coarse pointers (touch screens) and `comfortable` otherwise.\n */\nexport type Density = 'compact' | 'comfortable' | 'touch' | 'auto';\n\nfunction declarations(tokens: Record<string, string>): string {\n    return Object.entries(tokens)\n        .filter(([name, value]) => /^[a-zA-Z0-9-_]+$/.test(name) && !/[{};<]/.test(value))\n        .map(([name, value]) => `--${name}:${value};`)\n        .join('');\n}\n\n/** A short, stable hash of a string, to scope the CSS of a theme. */\nexport function hashString(value: string): string {\n    let hash = 5381;\n    for (let index = 0; index < value.length; index += 1) {\n        hash = (hash * 33) ^ value.charCodeAt(index);\n    }\n    return (hash >>> 0).toString(36);\n}\n\nconst NAME = /^[a-z0-9-]+$/;\n\nconst VARIABLE = /^var\\(--([a-zA-Z0-9_-]+)\\)$/;\n\n/** The palette of a theme, as variables: `{ 'panneau-palette-orange': '#f25c05' }`. */\nexport function paletteVariables(\n    palette: Readonly<Record<string, string>> = {},\n): Record<string, string> {\n    return Object.fromEntries(\n        Object.entries(palette)\n            .filter(([name]) => NAME.test(name))\n            .map(([name, value]) => [`panneau-palette-${name}`, value]),\n    );\n}\n\n/**\n * Follows `var(--name)` references through the given variables (tokens, palette colors), until a\n * value that is not one: `var(--panneau-palette-orange)` becomes `#f25c05`. A reference to a\n * variable that isn't given is returned as is.\n */\nexport function resolveReference(\n    value: string,\n    variables: Readonly<Record<string, string>>,\n): string {\n    let current = value;\n    for (let depth = 0; depth < 10; depth += 1) {\n        const name = VARIABLE.exec(current.trim())?.[1];\n        if (name === undefined || !Object.hasOwn(variables, name)) {\n            return current;\n        }\n        current = variables[name] ?? current;\n    }\n    return current;\n}\n\nfunction toneDeclarations(values: ToneValues): string {\n    return declarations(\n        Object.fromEntries(\n            (Object.keys(TONE_VARIABLES) as (keyof ToneValues)[]).map((key) => [\n                TONE_VARIABLES[key],\n                values[key],\n            ]),\n        ),\n    );\n}\n\n/**\n * The surfaces of a theme in each scheme, when it sets ones Panneau can read: tones derived from\n * one color are made readable on them.\n */\nexport function themeSurfaces(theme: Theme): ToneSurfaces {\n    const palette = paletteVariables(theme.palette);\n    const surface = (tokens: Record<string, string>) => {\n        const variables = { ...palette, ...tokens };\n        const value = variables['panneau-color-surface'];\n        return value !== undefined ? parseColor(resolveReference(value, variables)) : null;\n    };\n    const light = surface(theme.tokens);\n    const dark =\n        theme.dark?.['panneau-color-surface'] !== undefined\n            ? surface({ ...theme.tokens, ...theme.dark })\n            : null;\n    return {\n        ...(light !== null && { light }),\n        ...(dark !== null && { dark }),\n    };\n}\n\n/**\n * The rules of the densities of a theme. `auto` takes the comfortable values on fine pointers and\n * the touch ones on coarse pointers, like the default theme.\n */\nfunction densityCss(root: string, densities: Theme['densities'] = {}): string {\n    const body = (density: Exclude<Density, 'auto'>) => declarations(densities[density] ?? {});\n    const rule = (selector: string, css: string) => (css !== '' ? `${selector}{${css}}` : '');\n    const media = (query: string, css: string) => (css !== '' ? `@media ${query}{${css}}` : '');\n    const selector = (density: Density) => `${root}[data-density=\"${density}\"]`;\n    return [\n        rule(selector('compact'), body('compact')),\n        rule(selector('comfortable'), body('comfortable')),\n        media('not (pointer: coarse)', rule(selector('auto'), body('comfortable'))),\n        rule(selector('touch'), body('touch')),\n        media('(pointer: coarse)', rule(selector('auto'), body('touch'))),\n    ].join('');\n}\n\n/**\n * The CSS of a theme, scoped to the roots that carry `data-panneau-theme=\"<scope>\"`: its palette and\n * tokens, its densities, its tones and the variants of components. Its rules are more specific than the default\n * tokens and the built-in tones, and dark overrides more specific than light ones. Token, tone,\n * component and variant names must be plain identifiers, and values can't contain `{`, `}`, `;` or\n * `<`: other entries are ignored.\n */\nexport function getThemeCss(theme: Theme, scope: string): string {\n    const root = `[data-panneau-theme=\"${scope}\"]`;\n    const dark = `${root}[data-color-scheme=\"dark\"]`;\n    const auto = `${root}[data-color-scheme=\"auto\"]`;\n    const light: string[] = [];\n    const darkRules: string[] = [];\n    const rule = (selector: string, body: string) => (body !== '' ? `${selector}{${body}}` : '');\n\n    const palette = paletteVariables(theme.palette);\n    const surfaces = themeSurfaces(theme);\n    light.push(rule(root, declarations({ ...palette, ...theme.tokens })));\n    light.push(densityCss(root, theme.densities));\n    if (theme.dark !== undefined) {\n        darkRules.push(rule('§', declarations(theme.dark)));\n    }\n    Object.entries(theme.tones ?? {})\n        .filter(([name]) => NAME.test(name))\n        .forEach(([name, input]) => {\n            // A tone from a palette color derives from the color itself.\n            const values = resolveTone(\n                typeof input === 'string' ? resolveReference(input, palette) : input,\n                surfaces,\n            );\n            const selector = `.${toneClassName(name)}`;\n            light.push(rule(`${root} ${selector}`, toneDeclarations(values.light)));\n            darkRules.push(rule(`§ ${selector}`, toneDeclarations(values.dark)));\n        });\n    Object.entries(theme.components ?? {})\n        .filter(([component]) => NAME.test(component))\n        .forEach(([component, { variants = {} }]) => {\n            Object.entries(variants)\n                .filter(([name]) => NAME.test(name))\n                .forEach(([name, tokens]) => {\n                    light.push(\n                        rule(`${root} .panneau-${component}-variant-${name}`, declarations(tokens)),\n                    );\n                });\n        });\n\n    const darkCss = darkRules.filter(Boolean);\n    return [\n        ...light,\n        ...darkCss.map((css) => css.replaceAll('§', dark)),\n        darkCss.length > 0\n            ? `@media (prefers-color-scheme: dark){${darkCss.map((css) => css.replaceAll('§', auto)).join('')}}`\n            : '',\n    ].join('');\n}\n"],"mappings":"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"}

package/dist/theme/toneClass.d.ts

@@ -0,0 +1,8 @@
+import { type Tone } from './tones';
+/**
+ * The class of a tone, `panneau-tone-<tone>`. The built-in tones come from `Tone.module.css`, whose
+ * classes get the same stable names, so using it includes their CSS; a theme's own tones get their
+ * rules from the theme.
+ */
+export declare function toneClass(tone: Tone): string;
+//# sourceMappingURL=toneClass.d.ts.map

package/dist/theme/toneClass.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"toneClass.d.ts","sourceRoot":"","sources":["../../src/theme/toneClass.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,KAAK,IAAI,EAAiB,MAAM,SAAS,CAAC;AAEnD;;;;GAIG;AACH,wBAAgB,SAAS,CAAC,IAAI,EAAE,IAAI,GAAG,MAAM,CAE5C"}

package/dist/theme/toneClass.js

@@ -0,0 +1,15 @@
+import Tone_module_default from "./Tone.module.js";
+import { toneClassName } from "./tones.js";
+//#region src/theme/toneClass.ts
+/**
+* The class of a tone, `panneau-tone-<tone>`. The built-in tones come from `Tone.module.css`, whose
+* classes get the same stable names, so using it includes their CSS; a theme's own tones get their
+* rules from the theme.
+*/
+function toneClass(tone) {
+	return (Object.hasOwn(Tone_module_default, tone) ? Tone_module_default[tone] : void 0) ?? toneClassName(tone);
+}
+//#endregion
+export { toneClass };
+
+//# sourceMappingURL=toneClass.js.map

package/dist/theme/toneClass.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"toneClass.js","names":["styles"],"sources":["../../src/theme/toneClass.ts"],"sourcesContent":["import styles from './Tone.module.css';\nimport { type Tone, toneClassName } from './tones';\n\n/**\n * The class of a tone, `panneau-tone-<tone>`. The built-in tones come from `Tone.module.css`, whose\n * classes get the same stable names, so using it includes their CSS; a theme's own tones get their\n * rules from the theme.\n */\nexport function toneClass(tone: Tone): string {\n    return (Object.hasOwn(styles, tone) ? styles[tone] : undefined) ?? toneClassName(tone);\n}\n"],"mappings":";;;;;;;;AAQA,SAAgB,UAAU,MAAoB;CAC1C,QAAQ,OAAO,OAAOA,qBAAQ,IAAI,IAAIA,oBAAO,QAAQ,KAAA,MAAc,cAAc,IAAI;AACzF"}

package/dist/theme/tones.d.ts

@@ -0,0 +1,89 @@
+import { type Rgb } from './color';
+/**
+ * The tones that components accept (`tone="success"`), like Bootstrap's `$theme-colors`. A theme
+ * adds its own; declare them here so that `tone="signal"` type-checks:
+ *
+ * ```ts
+ * declare module '@panneau/ui' {
+ *     interface PanneauTones {
+ *         signal: true;
+ *     }
+ * }
+ * ```
+ */
+export interface PanneauTones {
+    neutral: true;
+    accent: true;
+    success: true;
+    warning: true;
+    danger: true;
+    info: true;
+}
+/** A tone name: a built-in tone, or one declared in `PanneauTones`. */
+export type Tone = keyof PanneauTones & string;
+/** The tones Panneau defines, from the semantic tokens of the theme. */
+export declare const BUILT_IN_TONES: readonly ["neutral", "accent", "success", "warning", "danger", "info"];
+/** The colors of a tone, as CSS values. */
+export type ToneValues = {
+    /** Text and icons on surfaces: the outline, subtle and ghost appearances. */
+    text: string;
+    /** Background of the subtle appearance. */
+    subtle: string;
+    /** Border of the subtle appearance. */
+    border: string;
+    /** Border of the outline appearance. */
+    outline: string;
+    /** Background of the solid appearance. */
+    solid: string;
+    /** Background of the solid appearance on hover and press. */
+    solidHover: string;
+    /** Text on the solid appearance. */
+    solidText: string;
+};
+/**
+ * A tone of a theme: one color, from which Panneau derives the others (`'#f25c05'`), or every
+ * value, with optional overrides for the dark scheme.
+ */
+export type ToneInput = string | (ToneValues & {
+    dark?: Partial<ToneValues>;
+});
+/** The local CSS variables of a tone, which components read. */
+export declare const TONE_VARIABLES: Readonly<Record<keyof ToneValues, string>>;
+/** The class that applies a tone: `panneau-tone-<tone>`. */
+export declare function toneClassName(tone: string): string;
+/** The surfaces of a theme, in each scheme, when it sets ones Panneau can read. */
+export type ToneSurfaces = Partial<Record<'light' | 'dark', Rgb>>;
+/** How much of the tone's color the subtle background mixes into the surface, per scheme. */
+export declare const SUBTLE_AMOUNTS: {
+    light: number;
+    dark: number;
+};
+/** Text must reach this contrast ratio (WCAG AA for normal text). */
+export declare const MIN_CONTRAST_RATIO = 4.5;
+/**
+ * The values of a tone, in both schemes, from one color: Panneau's `button-variant()` and
+ * `color-contrast()`.
+ *
+ * - The solid background is the color, with white or black text, whichever reads better, and a
+ *   hover 15% darker (or lighter, when the text is black and darker would hurt it).
+ * - The text color is the color, darkened (light scheme) or lightened (dark scheme) until it
+ *   reaches 4.5:1 against the subtle background, which is tinted, and so against the surface too.
+ * - The subtle background and the border are mixed with the surface in CSS, so they follow the
+ *   surface of any theme.
+ *
+ * A color Panneau can't read (a CSS variable, a named color) is used as is, with `color-mix()` for
+ * the hover and white text: `checkTheme()` reports it as unchecked.
+ *
+ * Text is made readable on the surfaces of the default theme, or on those given, which themes pass
+ * so that a tone stays readable on their own surfaces.
+ */
+export declare function deriveTone(color: string, surfaces?: ToneSurfaces): {
+    light: ToneValues;
+    dark: ToneValues;
+};
+/** The values of a tone input, in both schemes, derived on the given surfaces if it is one color. */
+export declare function resolveTone(input: ToneInput, surfaces?: ToneSurfaces): {
+    light: ToneValues;
+    dark: ToneValues;
+};
+//# sourceMappingURL=tones.d.ts.map

package/dist/theme/tones.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"tones.d.ts","sourceRoot":"","sources":["../../src/theme/tones.ts"],"names":[],"mappings":"AAAA,OAAO,EACH,KAAK,GAAG,EAQX,MAAM,SAAS,CAAC;AAEjB;;;;;;;;;;;GAWG;AACH,MAAM,WAAW,YAAY;IACzB,OAAO,EAAE,IAAI,CAAC;IACd,MAAM,EAAE,IAAI,CAAC;IACb,OAAO,EAAE,IAAI,CAAC;IACd,OAAO,EAAE,IAAI,CAAC;IACd,MAAM,EAAE,IAAI,CAAC;IACb,IAAI,EAAE,IAAI,CAAC;CACd;AAED,uEAAuE;AACvE,MAAM,MAAM,IAAI,GAAG,MAAM,YAAY,GAAG,MAAM,CAAC;AAE/C,wEAAwE;AACxE,eAAO,MAAM,cAAc,wEAOjB,CAAC;AAEX,2CAA2C;AAC3C,MAAM,MAAM,UAAU,GAAG;IACrB,6EAA6E;IAC7E,IAAI,EAAE,MAAM,CAAC;IACb,2CAA2C;IAC3C,MAAM,EAAE,MAAM,CAAC;IACf,uCAAuC;IACvC,MAAM,EAAE,MAAM,CAAC;IACf,wCAAwC;IACxC,OAAO,EAAE,MAAM,CAAC;IAChB,0CAA0C;IAC1C,KAAK,EAAE,MAAM,CAAC;IACd,6DAA6D;IAC7D,UAAU,EAAE,MAAM,CAAC;IACnB,oCAAoC;IACpC,SAAS,EAAE,MAAM,CAAC;CACrB,CAAC;AAEF;;;GAGG;AACH,MAAM,MAAM,SAAS,GAAG,MAAM,GAAG,CAAC,UAAU,GAAG;IAAE,IAAI,CAAC,EAAE,OAAO,CAAC,UAAU,CAAC,CAAA;CAAE,CAAC,CAAC;AAE/E,gEAAgE;AAChE,eAAO,MAAM,cAAc,EAAE,QAAQ,CAAC,MAAM,CAAC,MAAM,UAAU,EAAE,MAAM,CAAC,CAQrE,CAAC;AAEF,4DAA4D;AAC5D,wBAAgB,aAAa,CAAC,IAAI,EAAE,MAAM,GAAG,MAAM,CAElD;AAKD,mFAAmF;AACnF,MAAM,MAAM,YAAY,GAAG,OAAO,CAAC,MAAM,CAAC,OAAO,GAAG,MAAM,EAAE,GAAG,CAAC,CAAC,CAAC;AAElE,6FAA6F;AAC7F,eAAO,MAAM,cAAc;;;CAA8B,CAAC;AAE1D,qEAAqE;AACrE,eAAO,MAAM,kBAAkB,MAAM,CAAC;AAEtC;;;;;;;;;;;;;;;;GAgBG;AACH,wBAAgB,UAAU,CACtB,KAAK,EAAE,MAAM,EACb,QAAQ,GAAE,YAAiB,GAC5B;IAAE,KAAK,EAAE,UAAU,CAAC;IAAC,IAAI,EAAE,UAAU,CAAA;CAAE,CAuDzC;AAED,qGAAqG;AACrG,wBAAgB,WAAW,CACvB,KAAK,EAAE,SAAS,EAChB,QAAQ,GAAE,YAAiB,GAC5B;IAAE,KAAK,EAAE,UAAU,CAAC;IAAC,IAAI,EAAE,UAAU,CAAA;CAAE,CAMzC"}

package/dist/theme/tones.js

@@ -0,0 +1,127 @@
+import { WHITE, contrastRatio, ensureContrast, mixColors, parseColor, readableTextColor, toHex } from "./color.js";
+//#region src/theme/tones.ts
+/** The tones Panneau defines, from the semantic tokens of the theme. */
+var BUILT_IN_TONES = [
+	"neutral",
+	"accent",
+	"success",
+	"warning",
+	"danger",
+	"info"
+];
+/** The local CSS variables of a tone, which components read. */
+var TONE_VARIABLES = {
+	text: "panneau-tone-text",
+	subtle: "panneau-tone-subtle",
+	border: "panneau-tone-border",
+	outline: "panneau-tone-outline",
+	solid: "panneau-tone-solid",
+	solidHover: "panneau-tone-solid-hover",
+	solidText: "panneau-tone-solid-text"
+};
+/** The class that applies a tone: `panneau-tone-<tone>`. */
+function toneClassName(tone) {
+	return `panneau-tone-${tone}`;
+}
+/** Surfaces text must be readable on, in each scheme of the default theme. */
+var SURFACES = {
+	light: WHITE,
+	dark: {
+		r: 24,
+		g: 24,
+		b: 27
+	}
+};
+/** How much of the tone's color the subtle background mixes into the surface, per scheme. */
+var SUBTLE_AMOUNTS = {
+	light: .12,
+	dark: .22
+};
+/** Text must reach this contrast ratio (WCAG AA for normal text). */
+var MIN_CONTRAST_RATIO = 4.5;
+/**
+* The values of a tone, in both schemes, from one color: Panneau's `button-variant()` and
+* `color-contrast()`.
+*
+* - The solid background is the color, with white or black text, whichever reads better, and a
+*   hover 15% darker (or lighter, when the text is black and darker would hurt it).
+* - The text color is the color, darkened (light scheme) or lightened (dark scheme) until it
+*   reaches 4.5:1 against the subtle background, which is tinted, and so against the surface too.
+* - The subtle background and the border are mixed with the surface in CSS, so they follow the
+*   surface of any theme.
+*
+* A color Panneau can't read (a CSS variable, a named color) is used as is, with `color-mix()` for
+* the hover and white text: `checkTheme()` reports it as unchecked.
+*
+* Text is made readable on the surfaces of the default theme, or on those given, which themes pass
+* so that a tone stays readable on their own surfaces.
+*/
+function deriveTone(color, surfaces = {}) {
+	const subtle = (amount) => `color-mix(in srgb, ${color} ${amount}%, var(--panneau-color-surface))`;
+	const parsed = parseColor(color);
+	if (parsed === null) {
+		const values = {
+			text: color,
+			subtle: subtle(SUBTLE_AMOUNTS.light * 100),
+			border: subtle(45),
+			outline: color,
+			solid: color,
+			solidHover: `color-mix(in srgb, ${color}, #000 15%)`,
+			solidText: "#fff"
+		};
+		return {
+			light: values,
+			dark: {
+				...values,
+				subtle: subtle(SUBTLE_AMOUNTS.dark * 100)
+			}
+		};
+	}
+	const solidText = readableTextColor(parsed);
+	const darker = mixColors(parsed, {
+		r: 0,
+		g: 0,
+		b: 0
+	}, .15);
+	const hover = contrastRatio(solidText, darker) >= contrastRatio(solidText, parsed) ? darker : mixColors(parsed, WHITE, .15);
+	const shared = {
+		solid: toHex(parsed),
+		solidHover: toHex(hover),
+		solidText: toHex(solidText)
+	};
+	const readable = (scheme) => toHex(ensureContrast(parsed, mixColors(surfaces[scheme] ?? SURFACES[scheme], parsed, SUBTLE_AMOUNTS[scheme]), MIN_CONTRAST_RATIO));
+	const light = readable("light");
+	const dark = readable("dark");
+	return {
+		light: {
+			...shared,
+			text: light,
+			outline: light,
+			subtle: subtle(SUBTLE_AMOUNTS.light * 100),
+			border: subtle(45)
+		},
+		dark: {
+			...shared,
+			text: dark,
+			outline: dark,
+			subtle: subtle(SUBTLE_AMOUNTS.dark * 100),
+			border: subtle(55)
+		}
+	};
+}
+/** The values of a tone input, in both schemes, derived on the given surfaces if it is one color. */
+function resolveTone(input, surfaces = {}) {
+	if (typeof input === "string") return deriveTone(input, surfaces);
+	const { dark, ...light } = input;
+	return {
+		light,
+		dark: {
+			...light,
+			...dark
+		}
+	};
+}
+//#endregion
+export { BUILT_IN_TONES, MIN_CONTRAST_RATIO, SUBTLE_AMOUNTS, TONE_VARIABLES, deriveTone, resolveTone, toneClassName };
+
+//# sourceMappingURL=tones.js.map

package/dist/theme/tones.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tones.js","names":[],"sources":["../../src/theme/tones.ts"],"sourcesContent":["import {\n    type Rgb,\n    WHITE,\n    contrastRatio,\n    ensureContrast,\n    mixColors,\n    parseColor,\n    readableTextColor,\n    toHex,\n} from './color';\n\n/**\n * The tones that components accept (`tone=\"success\"`), like Bootstrap's `$theme-colors`. A theme\n * adds its own; declare them here so that `tone=\"signal\"` type-checks:\n *\n * ```ts\n * declare module '@panneau/ui' {\n *     interface PanneauTones {\n *         signal: true;\n *     }\n * }\n * ```\n */\nexport interface PanneauTones {\n    neutral: true;\n    accent: true;\n    success: true;\n    warning: true;\n    danger: true;\n    info: true;\n}\n\n/** A tone name: a built-in tone, or one declared in `PanneauTones`. */\nexport type Tone = keyof PanneauTones & string;\n\n/** The tones Panneau defines, from the semantic tokens of the theme. */\nexport const BUILT_IN_TONES = [\n    'neutral',\n    'accent',\n    'success',\n    'warning',\n    'danger',\n    'info',\n] as const;\n\n/** The colors of a tone, as CSS values. */\nexport type ToneValues = {\n    /** Text and icons on surfaces: the outline, subtle and ghost appearances. */\n    text: string;\n    /** Background of the subtle appearance. */\n    subtle: string;\n    /** Border of the subtle appearance. */\n    border: string;\n    /** Border of the outline appearance. */\n    outline: string;\n    /** Background of the solid appearance. */\n    solid: string;\n    /** Background of the solid appearance on hover and press. */\n    solidHover: string;\n    /** Text on the solid appearance. */\n    solidText: string;\n};\n\n/**\n * A tone of a theme: one color, from which Panneau derives the others (`'#f25c05'`), or every\n * value, with optional overrides for the dark scheme.\n */\nexport type ToneInput = string | (ToneValues & { dark?: Partial<ToneValues> });\n\n/** The local CSS variables of a tone, which components read. */\nexport const TONE_VARIABLES: Readonly<Record<keyof ToneValues, string>> = {\n    text: 'panneau-tone-text',\n    subtle: 'panneau-tone-subtle',\n    border: 'panneau-tone-border',\n    outline: 'panneau-tone-outline',\n    solid: 'panneau-tone-solid',\n    solidHover: 'panneau-tone-solid-hover',\n    solidText: 'panneau-tone-solid-text',\n};\n\n/** The class that applies a tone: `panneau-tone-<tone>`. */\nexport function toneClassName(tone: string): string {\n    return `panneau-tone-${tone}`;\n}\n\n/** Surfaces text must be readable on, in each scheme of the default theme. */\nconst SURFACES: Record<'light' | 'dark', Rgb> = { light: WHITE, dark: { r: 24, g: 24, b: 27 } };\n\n/** The surfaces of a theme, in each scheme, when it sets ones Panneau can read. */\nexport type ToneSurfaces = Partial<Record<'light' | 'dark', Rgb>>;\n\n/** How much of the tone's color the subtle background mixes into the surface, per scheme. */\nexport const SUBTLE_AMOUNTS = { light: 0.12, dark: 0.22 };\n\n/** Text must reach this contrast ratio (WCAG AA for normal text). */\nexport const MIN_CONTRAST_RATIO = 4.5;\n\n/**\n * The values of a tone, in both schemes, from one color: Panneau's `button-variant()` and\n * `color-contrast()`.\n *\n * - The solid background is the color, with white or black text, whichever reads better, and a\n *   hover 15% darker (or lighter, when the text is black and darker would hurt it).\n * - The text color is the color, darkened (light scheme) or lightened (dark scheme) until it\n *   reaches 4.5:1 against the subtle background, which is tinted, and so against the surface too.\n * - The subtle background and the border are mixed with the surface in CSS, so they follow the\n *   surface of any theme.\n *\n * A color Panneau can't read (a CSS variable, a named color) is used as is, with `color-mix()` for\n * the hover and white text: `checkTheme()` reports it as unchecked.\n *\n * Text is made readable on the surfaces of the default theme, or on those given, which themes pass\n * so that a tone stays readable on their own surfaces.\n */\nexport function deriveTone(\n    color: string,\n    surfaces: ToneSurfaces = {},\n): { light: ToneValues; dark: ToneValues } {\n    const subtle = (amount: number) =>\n        `color-mix(in srgb, ${color} ${amount}%, var(--panneau-color-surface))`;\n    const parsed = parseColor(color);\n    if (parsed === null) {\n        const values: ToneValues = {\n            text: color,\n            subtle: subtle(SUBTLE_AMOUNTS.light * 100),\n            border: subtle(45),\n            outline: color,\n            solid: color,\n            solidHover: `color-mix(in srgb, ${color}, #000 15%)`,\n            solidText: '#fff',\n        };\n        return { light: values, dark: { ...values, subtle: subtle(SUBTLE_AMOUNTS.dark * 100) } };\n    }\n    const solidText = readableTextColor(parsed);\n    const darker = mixColors(parsed, { r: 0, g: 0, b: 0 }, 0.15);\n    const hover =\n        contrastRatio(solidText, darker) >= contrastRatio(solidText, parsed)\n            ? darker\n            : mixColors(parsed, WHITE, 0.15);\n    const solid = toHex(parsed);\n    const shared = {\n        solid,\n        solidHover: toHex(hover),\n        solidText: toHex(solidText),\n    };\n    // Readable on the subtle background, which is closer to the text color than the surface.\n    const readable = (scheme: 'light' | 'dark') =>\n        toHex(\n            ensureContrast(\n                parsed,\n                mixColors(surfaces[scheme] ?? SURFACES[scheme], parsed, SUBTLE_AMOUNTS[scheme]),\n                MIN_CONTRAST_RATIO,\n            ),\n        );\n    const light = readable('light');\n    const dark = readable('dark');\n    return {\n        light: {\n            ...shared,\n            text: light,\n            outline: light,\n            subtle: subtle(SUBTLE_AMOUNTS.light * 100),\n            border: subtle(45),\n        },\n        dark: {\n            ...shared,\n            text: dark,\n            outline: dark,\n            subtle: subtle(SUBTLE_AMOUNTS.dark * 100),\n            border: subtle(55),\n        },\n    };\n}\n\n/** The values of a tone input, in both schemes, derived on the given surfaces if it is one color. */\nexport function resolveTone(\n    input: ToneInput,\n    surfaces: ToneSurfaces = {},\n): { light: ToneValues; dark: ToneValues } {\n    if (typeof input === 'string') {\n        return deriveTone(input, surfaces);\n    }\n    const { dark, ...light } = input;\n    return { light, dark: { ...light, ...dark } };\n}\n"],"mappings":";;;AAoCA,IAAa,iBAAiB;CAC1B;CACA;CACA;CACA;CACA;CACA;AAAM;;AA4BV,IAAa,iBAA6D;CACtE,MAAM;CACN,QAAQ;CACR,QAAQ;CACR,SAAS;CACT,OAAO;CACP,YAAY;CACZ,WAAW;AACf;;AAGA,SAAgB,cAAc,MAAsB;CAChD,OAAO,gBAAgB;AAC3B;;AAGA,IAAM,WAA0C;CAAE,OAAO;CAAO,MAAM;EAAE,GAAG;EAAI,GAAG;EAAI,GAAG;CAAG;AAAE;;AAM9F,IAAa,iBAAiB;CAAE,OAAO;CAAM,MAAM;AAAK;;AAGxD,IAAa,qBAAqB;;;;;;;;;;;;;;;;;;AAmBlC,SAAgB,WACZ,OACA,WAAyB,CAAC,GACa;CACvC,MAAM,UAAU,WACZ,sBAAsB,MAAK,GAAI,OAAM;CACzC,MAAM,SAAS,WAAW,KAAK;CAC/B,IAAI,WAAW,MAAM;EACjB,MAAM,SAAqB;GACvB,MAAM;GACN,QAAQ,OAAO,eAAe,QAAQ,GAAG;GACzC,QAAQ,OAAO,EAAE;GACjB,SAAS;GACT,OAAO;GACP,YAAY,sBAAsB,MAAK;GACvC,WAAW;EACf;EACA,OAAO;GAAE,OAAO;GAAQ,MAAM;IAAE,GAAG;IAAQ,QAAQ,OAAO,eAAe,OAAO,GAAG;GAAE;EAAE;CAC3F;CACA,MAAM,YAAY,kBAAkB,MAAM;CAC1C,MAAM,SAAS,UAAU,QAAQ;EAAE,GAAG;EAAG,GAAG;EAAG,GAAG;CAAE,GAAG,GAAI;CAC3D,MAAM,QACF,cAAc,WAAW,MAAM,KAAK,cAAc,WAAW,MAAM,IAC7D,SACA,UAAU,QAAQ,OAAO,GAAI;CAEvC,MAAM,SAAS;EACX,OAFU,MAAM,MAEhB;EACA,YAAY,MAAM,KAAK;EACvB,WAAW,MAAM,SAAS;CAC9B;CAEA,MAAM,YAAY,WACd,MACI,eACI,QACA,UAAU,SAAS,WAAW,SAAS,SAAS,QAAQ,eAAe,OAAO,GAC9E,kBACJ,CACJ;CACJ,MAAM,QAAQ,SAAS,OAAO;CAC9B,MAAM,OAAO,SAAS,MAAM;CAC5B,OAAO;EACH,OAAO;GACH,GAAG;GACH,MAAM;GACN,SAAS;GACT,QAAQ,OAAO,eAAe,QAAQ,GAAG;GACzC,QAAQ,OAAO,EAAE;EACrB;EACA,MAAM;GACF,GAAG;GACH,MAAM;GACN,SAAS;GACT,QAAQ,OAAO,eAAe,OAAO,GAAG;GACxC,QAAQ,OAAO,EAAE;EACrB;CACJ;AACJ;;AAGA,SAAgB,YACZ,OACA,WAAyB,CAAC,GACa;CACvC,IAAI,OAAO,UAAU,UACjB,OAAO,WAAW,OAAO,QAAQ;CAErC,MAAM,EAAE,MAAM,GAAG,UAAU;CAC3B,OAAO;EAAE;EAAO,MAAM;GAAE,GAAG;GAAO,GAAG;EAAK;CAAE;AAChD"}

package/dist/time-input/TimeInput.js

@@ -13,7 +13,7 @@ function TimeInput({ label, description, errors = [], isRequired, isReadOnly, cl
 		isReadOnly,
 		isInvalid: errors.length > 0,
 		validationBehavior: "aria",
-		className: cx(Field_module_default.field, className),
+		className: cx("panneau-time-input", Field_module_default.field, className),
 		children: [
 			/* @__PURE__ */ jsx(FieldLabel, {
 				isRequired,

package/dist/time-input/TimeInput.js.map

@@ -1 +1 @@
-{"version":3,"file":"TimeInput.js","names":["fieldStyles","datePickerStyles"],"sources":["../../src/time-input/TimeInput.tsx"],"sourcesContent":["import {\n    DateInput,\n    DateSegment,\n    TimeField,\n    type TimeFieldProps,\n    type TimeValue,\n} from 'react-aria-components';\n\nimport datePickerStyles from '../date-picker/DatePicker.module.css';\nimport {\n    type FieldChromeProps,\n    FieldDescription,\n    FieldErrors,\n    FieldLabel,\n    fieldStyles,\n} from '../field/FieldParts';\nimport { cx } from '../utils/cx';\n\nexport interface TimeInputProps\n    extends\n        Omit<\n            TimeFieldProps<TimeValue>,\n            'className' | 'style' | 'children' | 'isInvalid' | 'validate'\n        >,\n        FieldChromeProps {\n    controlClassName?: string;\n}\n\n/** A time of day, typed segment by segment in the format of the locale. */\nexport function TimeInput({\n    label,\n    description,\n    errors = [],\n    isRequired,\n    isReadOnly,\n    className,\n    labelClassName,\n    descriptionClassName,\n    errorsClassName,\n    controlClassName,\n    ...props\n}: TimeInputProps) {\n    return (\n        <TimeField\n            {...props}\n            isRequired={isRequired}\n            isReadOnly={isReadOnly}\n            isInvalid={errors.length > 0}\n            validationBehavior=\"aria\"\n            className={cx(fieldStyles.field, className)}\n        >\n            <FieldLabel isRequired={isRequired} className={labelClassName}>\n                {label}\n            </FieldLabel>\n            <DateInput\n                className={cx(fieldStyles.control, datePickerStyles.input, controlClassName)}\n                data-readonly={isReadOnly || undefined}\n            >\n                {(segment) => (\n                    <DateSegment segment={segment} className={datePickerStyles.segment} />\n                )}\n            </DateInput>\n            <FieldDescription className={descriptionClassName}>{description}</FieldDescription>\n            <FieldErrors errors={errors} className={errorsClassName} />\n        </TimeField>\n    );\n}\n"],"mappings":";;;;;;;;AA6BA,SAAgB,UAAU,EACtB,OACA,aACA,SAAS,CAAA,GACT,YACA,YACA,WACA,gBACA,sBACA,iBACA,kBACA,GAAG,SACY;CACf,OACI,qBAAC,WAAD;EACI,GAAI;EACQ;EACA;EACZ,WAAW,OAAO,SAAS;EAC3B,oBAAmB;EACnB,WAAW,GAAGA,qBAAY,OAAO,SAAS;EAN9C,UAAA;GAQI,oBAAC,YAAD;IAAwB;IAAY,WAAW;IAC1C,UAAA;GACO,CAAA;GACZ,oBAAC,WAAD;IACI,WAAW,GAAGA,qBAAY,SAASC,0BAAiB,OAAO,gBAAgB;IAC3E,iBAAe,cAAc,KAAA;IAE3B,WAAA,YACE,oBAAC,aAAD;KAAsB;KAAS,WAAWA,0BAAiB;IAAQ,CAAA;GAEhE,CAAA;GACX,oBAAC,kBAAD;IAAkB,WAAW;IAAuB,UAAA;GAA8B,CAAA;GAClF,oBAAC,aAAD;IAAqB;IAAQ,WAAW;GAAgB,CAAA;EACjD;;AAEnB"}
+{"version":3,"file":"TimeInput.js","names":["fieldStyles","datePickerStyles"],"sources":["../../src/time-input/TimeInput.tsx"],"sourcesContent":["import {\n    DateInput,\n    DateSegment,\n    TimeField,\n    type TimeFieldProps,\n    type TimeValue,\n} from 'react-aria-components';\n\nimport datePickerStyles from '../date-picker/DatePicker.module.css';\nimport {\n    type FieldChromeProps,\n    FieldDescription,\n    FieldErrors,\n    FieldLabel,\n    fieldStyles,\n} from '../field/FieldParts';\nimport { cx } from '../utils/cx';\n\nexport interface TimeInputProps\n    extends\n        Omit<\n            TimeFieldProps<TimeValue>,\n            'className' | 'style' | 'children' | 'isInvalid' | 'validate'\n        >,\n        FieldChromeProps {\n    controlClassName?: string;\n}\n\n/** A time of day, typed segment by segment in the format of the locale. */\nexport function TimeInput({\n    label,\n    description,\n    errors = [],\n    isRequired,\n    isReadOnly,\n    className,\n    labelClassName,\n    descriptionClassName,\n    errorsClassName,\n    controlClassName,\n    ...props\n}: TimeInputProps) {\n    return (\n        <TimeField\n            {...props}\n            isRequired={isRequired}\n            isReadOnly={isReadOnly}\n            isInvalid={errors.length > 0}\n            validationBehavior=\"aria\"\n            className={cx('panneau-time-input', fieldStyles.field, className)}\n        >\n            <FieldLabel isRequired={isRequired} className={labelClassName}>\n                {label}\n            </FieldLabel>\n            <DateInput\n                className={cx(fieldStyles.control, datePickerStyles.input, controlClassName)}\n                data-readonly={isReadOnly || undefined}\n            >\n                {(segment) => (\n                    <DateSegment segment={segment} className={datePickerStyles.segment} />\n                )}\n            </DateInput>\n            <FieldDescription className={descriptionClassName}>{description}</FieldDescription>\n            <FieldErrors errors={errors} className={errorsClassName} />\n        </TimeField>\n    );\n}\n"],"mappings":";;;;;;;;AA6BA,SAAgB,UAAU,EACtB,OACA,aACA,SAAS,CAAA,GACT,YACA,YACA,WACA,gBACA,sBACA,iBACA,kBACA,GAAG,SACY;CACf,OACI,qBAAC,WAAD;EACI,GAAI;EACQ;EACA;EACZ,WAAW,OAAO,SAAS;EAC3B,oBAAmB;EACnB,WAAW,GAAG,sBAAsBA,qBAAY,OAAO,SAAS;EANpE,UAAA;GAQI,oBAAC,YAAD;IAAwB;IAAY,WAAW;IAC1C,UAAA;GACO,CAAA;GACZ,oBAAC,WAAD;IACI,WAAW,GAAGA,qBAAY,SAASC,0BAAiB,OAAO,gBAAgB;IAC3E,iBAAe,cAAc,KAAA;IAE3B,WAAA,YACE,oBAAC,aAAD;KAAsB;KAAS,WAAWA,0BAAiB;IAAQ,CAAA;GAEhE,CAAA;GACX,oBAAC,kBAAD;IAAkB,WAAW;IAAuB,UAAA;GAA8B,CAAA;GAClF,oBAAC,aAAD;IAAqB;IAAQ,WAAW;GAAgB,CAAA;EACjD;;AAEnB"}

package/dist/toast/Toast.css

@@ -1,5 +1,5 @@
 /* The region carries the root's class (tokens), since React Aria renders it in the body. */
-.panneau-region-wzx1vG.panneau-region-wzx1vG {
+.panneau-toast-region.panneau-toast-region {
     position: fixed;
     inset-block-end: var(--panneau-space-4);
     inset-inline-end: var(--panneau-space-4);
@@ -7,81 +7,59 @@
     display: flex;
     flex-direction: column-reverse;
     gap: var(--panneau-space-2);
-    width: min(24rem, calc(100vw - 2 * var(--panneau-space-4)));
+    width: min(var(--panneau-toast-width, 24rem), calc(100vw - 2 * var(--panneau-space-4)));
     background: transparent;
     outline: none;
 }
 
-.panneau-region-wzx1vG[data-focus-visible] {
+.panneau-toast-region[data-focus-visible] {
     outline: var(--panneau-focus-width) solid var(--panneau-color-focus);
     outline-offset: 4px;
 }
 
 @media (max-width: 30rem) {
-    .panneau-region-wzx1vG.panneau-region-wzx1vG {
+    .panneau-toast-region.panneau-toast-region {
         inset-inline: var(--panneau-space-2);
         inset-block-end: var(--panneau-space-2);
         width: auto;
     }
 }
 
-.panneau-toast-zcR9rJ {
+.panneau-toast {
     display: flex;
     align-items: flex-start;
     gap: var(--panneau-space-3);
     padding: var(--panneau-space-3) var(--panneau-space-3) var(--panneau-space-3)
         var(--panneau-space-4);
     color: var(--panneau-color-text);
-    background-color: var(--panneau-color-surface-raised);
-    border: var(--panneau-border-width) solid var(--panneau-color-border);
-    border-inline-start-width: 4px;
-    border-radius: var(--panneau-radius-lg);
-    box-shadow: var(--panneau-shadow-lg);
+    background-color: var(--panneau-toast-bg, var(--panneau-color-surface-raised));
+    border: var(--panneau-border-width) solid
+        var(--panneau-toast-border-color, var(--panneau-color-border));
+    border-inline-start-width: var(--panneau-toast-tone-width, 4px);
+    border-radius: var(--panneau-toast-radius, var(--panneau-radius-lg));
+    box-shadow: var(--panneau-toast-shadow, var(--panneau-shadow-lg));
     outline: none;
 }
 
-.panneau-toast-zcR9rJ[data-focus-visible] {
+.panneau-toast[data-focus-visible] {
     outline: var(--panneau-focus-width) solid var(--panneau-color-focus);
     outline-offset: 2px;
 }
 
-.panneau-success-bKO-t0 {
-    border-inline-start-color: var(--panneau-color-success);
-}
-
-.panneau-danger-xAgJYb {
-    border-inline-start-color: var(--panneau-color-danger);
-}
-
-.panneau-warning-8eqKky {
-    border-inline-start-color: var(--panneau-color-warning);
-}
-
-.panneau-info-3p-uFF {
-    border-inline-start-color: var(--panneau-color-info);
-}
-
-.panneau-icon-xCysks {
+.panneau-toast-icon {
     margin-top: 0.125rem;
 }
 
-.panneau-success-bKO-t0 .panneau-icon-xCysks {
-    color: var(--panneau-color-success);
-}
-
-.panneau-danger-xAgJYb .panneau-icon-xCysks {
-    color: var(--panneau-color-danger);
-}
-
-.panneau-warning-8eqKky .panneau-icon-xCysks {
-    color: var(--panneau-color-warning);
+/* A toast with a tone other than neutral: a colored edge and icon, from its tone class. */
+.panneau-toast-toned {
+    border-inline-start-color: var(--panneau-tone-text);
 }
 
-.panneau-info-3p-uFF .panneau-icon-xCysks {
-    color: var(--panneau-color-info);
+.panneau-toast-toned .panneau-toast-icon {
+    color: var(--panneau-tone-text);
 }
 
-.panneau-content-oL01to {
+.panneau-toast-content {
     display: flex;
     flex: 1 1 auto;
     flex-direction: column;
@@ -90,18 +68,18 @@
     padding-top: 0.125rem;
 }
 
-.panneau-title-ZUmw4H {
+.panneau-toast-title {
     font-weight: var(--panneau-font-weight-medium);
     overflow-wrap: anywhere;
 }
 
-.panneau-description-bQFVpf {
+.panneau-toast-description {
     font-size: var(--panneau-font-size-sm);
     color: var(--panneau-color-text-muted);
     overflow-wrap: anywhere;
 }
 
-.panneau-actions-4GKOfg {
+.panneau-toast-actions {
     display: flex;
     flex: 0 0 auto;
     align-items: center;

package/dist/toast/Toast.d.ts

@@ -1,11 +1,13 @@
 import { type ReactNode } from 'react';
-export type ToastTone = 'neutral' | 'success' | 'danger' | 'warning' | 'info';
+import type { Tone } from '../theme/tones';
+/** @deprecated Use `Tone`. */
+export type ToastTone = Tone;
 /** What a toast says. */
 export interface ToastContent {
     title: string;
     description?: string;
-    /** Defaults to `neutral`. */
-    tone?: ToastTone;
+    /** Defaults to `neutral`. Any tone other than neutral colors the edge and the icon. */
+    tone?: Tone;
     /** A button in the toast, such as "Retry" or "Undo". The toast closes when it is pressed. */
     action?: {
         label: string;

package/dist/toast/Toast.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Toast.d.ts","sourceRoot":"","sources":["../../src/toast/Toast.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,KAAK,SAAS,EAAgC,MAAM,OAAO,CAAC;AAiBrE,MAAM,MAAM,SAAS,GAAG,SAAS,GAAG,SAAS,GAAG,QAAQ,GAAG,SAAS,GAAG,MAAM,CAAC;AAE9E,yBAAyB;AACzB,MAAM,WAAW,YAAY;IACzB,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,6BAA6B;IAC7B,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,6FAA6F;IAC7F,MAAM,CAAC,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,QAAQ,EAAE,MAAM,IAAI,CAAA;KAAE,CAAC;CACpD;AAED,MAAM,WAAW,YAAY;IACzB;;;OAGG;IACH,OAAO,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACxB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACxB;AAED,MAAM,WAAW,MAAM;IACnB,sCAAsC;IACtC,IAAI,CAAC,OAAO,EAAE,YAAY,EAAE,OAAO,CAAC,EAAE,YAAY,GAAG,MAAM,CAAC;IAC5D,6BAA6B;IAC7B,KAAK,CAAC,GAAG,EAAE,MAAM,GAAG,IAAI,CAAC;CAC5B;AAYD,iDAAiD;AACjD,wBAAgB,QAAQ,IAAI,MAAM,CAMjC;AAED,MAAM,WAAW,kBAAkB;IAC/B,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,iFAAiF;IACjF,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,WAAW,CAAC,EAAE,MAAM,CAAC,QAAQ,MAAM,EAAE,EAAE,MAAM,GAAG,SAAS,CAAC,CAAC;CAC9D;AAED,oFAAoF;AACpF,wBAAgB,aAAa,CAAC,EAAE,QAAQ,EAAE,eAAe,EAAE,WAAW,EAAE,EAAE,kBAAkB,+BAqE3F"}
+{"version":3,"file":"Toast.d.ts","sourceRoot":"","sources":["../../src/toast/Toast.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,KAAK,SAAS,EAAgC,MAAM,OAAO,CAAC;AAerE,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,gBAAgB,CAAC;AAI3C,8BAA8B;AAC9B,MAAM,MAAM,SAAS,GAAG,IAAI,CAAC;AAE7B,yBAAyB;AACzB,MAAM,WAAW,YAAY;IACzB,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,uFAAuF;IACvF,IAAI,CAAC,EAAE,IAAI,CAAC;IACZ,6FAA6F;IAC7F,MAAM,CAAC,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,QAAQ,EAAE,MAAM,IAAI,CAAA;KAAE,CAAC;CACpD;AAED,MAAM,WAAW,YAAY;IACzB;;;OAGG;IACH,OAAO,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACxB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACxB;AAED,MAAM,WAAW,MAAM;IACnB,sCAAsC;IACtC,IAAI,CAAC,OAAO,EAAE,YAAY,EAAE,OAAO,CAAC,EAAE,YAAY,GAAG,MAAM,CAAC;IAC5D,6BAA6B;IAC7B,KAAK,CAAC,GAAG,EAAE,MAAM,GAAG,IAAI,CAAC;CAC5B;AAYD,iDAAiD;AACjD,wBAAgB,QAAQ,IAAI,MAAM,CAMjC;AAED,MAAM,WAAW,kBAAkB;IAC/B,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,iFAAiF;IACjF,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,WAAW,CAAC,EAAE,MAAM,CAAC,QAAQ,MAAM,EAAE,EAAE,MAAM,GAAG,SAAS,CAAC,CAAC;CAC9D;AAED,oFAAoF;AACpF,wBAAgB,aAAa,CAAC,EAAE,QAAQ,EAAE,eAAe,EAAE,WAAW,EAAE,EAAE,kBAAkB,+BA6E3F"}