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

package/dist/tabs/Tabs.module.js.map

@@ -1 +1 @@
-{"version":3,"file":"Tabs.module.js","names":[],"sources":["../../src/tabs/Tabs.module.css"],"sourcesContent":[".tabs {\n    display: flex;\n    flex-direction: column;\n    gap: var(--panneau-space-4);\n    min-width: 0;\n}\n\n.list {\n    display: flex;\n    gap: var(--panneau-space-1);\n    overflow-x: auto;\n    border-bottom: var(--panneau-border-width) solid var(--panneau-color-border);\n    scrollbar-width: none;\n}\n\n.list::-webkit-scrollbar {\n    display: none;\n}\n\n.tab {\n    position: relative;\n    display: inline-flex;\n    flex: 0 0 auto;\n    align-items: center;\n    gap: var(--panneau-space-2);\n    min-height: var(--panneau-control-height);\n    padding: 0 var(--panneau-space-3);\n    font-size: var(--panneau-font-size-md);\n    font-weight: var(--panneau-font-weight-medium);\n    color: var(--panneau-color-text-muted);\n    white-space: nowrap;\n    cursor: pointer;\n    outline: none;\n    -webkit-tap-highlight-color: transparent;\n}\n\n.tab::after {\n    position: absolute;\n    inset-inline: var(--panneau-space-2);\n    bottom: calc(-1 * var(--panneau-border-width));\n    height: 2px;\n    content: '';\n    background-color: transparent;\n    border-radius: 2px 2px 0 0;\n}\n\n.tab[data-hovered] {\n    color: var(--panneau-color-text);\n}\n\n.tab[data-selected] {\n    color: var(--panneau-color-text);\n}\n\n.tab[data-selected]::after {\n    background-color: var(--panneau-color-accent);\n}\n\n.tab[data-disabled] {\n    cursor: not-allowed;\n    opacity: 0.5;\n}\n\n.tab[data-focus-visible] {\n    outline: var(--panneau-focus-width) solid var(--panneau-color-focus);\n    outline-offset: -2px;\n    border-radius: var(--panneau-radius-sm);\n}\n\n.panel {\n    min-width: 0;\n    outline: none;\n}\n\n.panel[data-focus-visible] {\n    outline: var(--panneau-focus-width) solid var(--panneau-color-focus);\n    outline-offset: 2px;\n}\n\n.panel[data-inert],\n.panel[inert] {\n    display: none;\n}\n"],"mappings":""}
+{"version":3,"file":"Tabs.module.js","names":[],"sources":["../../src/tabs/Tabs.module.css"],"sourcesContent":[".tabs {\n    display: flex;\n    flex-direction: column;\n    gap: var(--panneau-tabs-gap, var(--panneau-space-4));\n    min-width: 0;\n}\n\n.list {\n    display: flex;\n    gap: var(--panneau-space-1);\n    overflow-x: auto;\n    border-bottom: var(--panneau-border-width) solid\n        var(--panneau-tabs-border-color, var(--panneau-color-border));\n    scrollbar-width: none;\n}\n\n.list::-webkit-scrollbar {\n    display: none;\n}\n\n.tab {\n    position: relative;\n    display: inline-flex;\n    flex: 0 0 auto;\n    align-items: center;\n    gap: var(--panneau-space-2);\n    min-height: var(--panneau-control-height);\n    padding: 0 var(--panneau-tabs-tab-padding-x, var(--panneau-space-3));\n    font-size: var(--panneau-font-size-md);\n    font-weight: var(--panneau-tabs-tab-font-weight, var(--panneau-font-weight-medium));\n    color: var(--panneau-tabs-tab-color, var(--panneau-color-text-muted));\n    white-space: nowrap;\n    cursor: pointer;\n    outline: none;\n    -webkit-tap-highlight-color: transparent;\n}\n\n.tab::after {\n    position: absolute;\n    inset-inline: var(--panneau-space-2);\n    bottom: calc(-1 * var(--panneau-border-width));\n    height: var(--panneau-tabs-indicator-height, 2px);\n    content: '';\n    background-color: transparent;\n    border-radius: 2px 2px 0 0;\n}\n\n.tab[data-hovered] {\n    color: var(--panneau-tabs-tab-color-selected, var(--panneau-color-text));\n}\n\n.tab[data-selected] {\n    color: var(--panneau-tabs-tab-color-selected, var(--panneau-color-text));\n}\n\n.tab[data-selected]::after {\n    background-color: var(--panneau-tabs-indicator-color, var(--panneau-color-accent));\n}\n\n.tab[data-disabled] {\n    cursor: not-allowed;\n    opacity: 0.5;\n}\n\n.tab[data-focus-visible] {\n    outline: var(--panneau-focus-width) solid var(--panneau-color-focus);\n    outline-offset: -2px;\n    border-radius: var(--panneau-radius-sm);\n}\n\n.panel {\n    min-width: 0;\n    outline: none;\n}\n\n.panel[data-focus-visible] {\n    outline: var(--panneau-focus-width) solid var(--panneau-color-focus);\n    outline-offset: 2px;\n}\n\n.panel[data-inert],\n.panel[inert] {\n    display: none;\n}\n"],"mappings":""}

package/dist/tabs/tokens.d.ts

@@ -0,0 +1,3 @@
+/** Tokens of Tabs. */
+export declare const tabsTokens: import("..").ComponentTokens<"tabs", "panneau-tabs-gap" | "panneau-tabs-border-color" | "panneau-tabs-tab-padding-x" | "panneau-tabs-tab-font-weight" | "panneau-tabs-tab-color" | "panneau-tabs-indicator-height" | "panneau-tabs-tab-color-selected" | "panneau-tabs-indicator-color">;
+//# sourceMappingURL=tokens.d.ts.map

package/dist/tabs/tokens.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"tokens.d.ts","sourceRoot":"","sources":["../../src/tabs/tokens.ts"],"names":[],"mappings":"AAEA,sBAAsB;AACtB,eAAO,MAAM,UAAU,0RAiBrB,CAAC"}

package/dist/tabs/tokens.js

@@ -0,0 +1,25 @@
+import { defineComponentTokens } from "../theme/componentTokens.js";
+//#region src/tabs/tokens.ts
+/** Tokens of Tabs. */
+var tabsTokens = defineComponentTokens("tabs", {
+	/** Space between the tab list and the panel. */
+	gap: "var(--panneau-space-4)",
+	/** Color of the line under the tab list. */
+	"border-color": "var(--panneau-color-border)",
+	/** Horizontal padding of a tab. */
+	"tab-padding-x": "var(--panneau-space-3)",
+	/** Font weight of a tab. */
+	"tab-font-weight": "var(--panneau-font-weight-medium)",
+	/** Text color of a tab. */
+	"tab-color": "var(--panneau-color-text-muted)",
+	/** Height of the indicator under the selected tab. */
+	"indicator-height": "2px",
+	/** Text color of a hovered or selected tab. */
+	"tab-color-selected": "var(--panneau-color-text)",
+	/** Color of the indicator under the selected tab. */
+	"indicator-color": "var(--panneau-color-accent)"
+});
+//#endregion
+export { tabsTokens };
+
+//# sourceMappingURL=tokens.js.map

package/dist/tabs/tokens.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tokens.js","names":[],"sources":["../../src/tabs/tokens.ts"],"sourcesContent":["import { defineComponentTokens } from '../theme/componentTokens';\n\n/** Tokens of Tabs. */\nexport const tabsTokens = defineComponentTokens('tabs', {\n    /** Space between the tab list and the panel. */\n    gap: 'var(--panneau-space-4)',\n    /** Color of the line under the tab list. */\n    'border-color': 'var(--panneau-color-border)',\n    /** Horizontal padding of a tab. */\n    'tab-padding-x': 'var(--panneau-space-3)',\n    /** Font weight of a tab. */\n    'tab-font-weight': 'var(--panneau-font-weight-medium)',\n    /** Text color of a tab. */\n    'tab-color': 'var(--panneau-color-text-muted)',\n    /** Height of the indicator under the selected tab. */\n    'indicator-height': '2px',\n    /** Text color of a hovered or selected tab. */\n    'tab-color-selected': 'var(--panneau-color-text)',\n    /** Color of the indicator under the selected tab. */\n    'indicator-color': 'var(--panneau-color-accent)',\n});\n"],"mappings":";;;AAGA,IAAa,aAAa,sBAAsB,QAAQ;;CAEpD,KAAK;;CAEL,gBAAgB;;CAEhB,iBAAiB;;CAEjB,mBAAmB;;CAEnB,aAAa;;CAEb,oBAAoB;;CAEpB,sBAAsB;;CAEtB,mBAAmB;AACvB,CAAC"}

package/dist/text/Text.css

@@ -0,0 +1,74 @@
+/* Text: sizes, weights and families of the theme, as modifiers. */
+
+.panneau-text {
+    margin: 0;
+}
+
+.panneau-text-size-xs {
+    font-size: var(--panneau-font-size-xs);
+}
+
+.panneau-text-size-sm {
+    font-size: var(--panneau-font-size-sm);
+}
+
+.panneau-text-size-md {
+    font-size: var(--panneau-font-size-md);
+}
+
+.panneau-text-size-lg {
+    font-size: var(--panneau-font-size-lg);
+}
+
+.panneau-text-size-xl {
+    font-size: var(--panneau-font-size-xl);
+}
+
+.panneau-text-weight-normal {
+    font-weight: var(--panneau-font-weight-normal);
+}
+
+.panneau-text-weight-medium {
+    font-weight: var(--panneau-font-weight-medium);
+}
+
+.panneau-text-weight-bold {
+    font-weight: var(--panneau-font-weight-bold);
+}
+
+.panneau-text-family-body {
+    font-family: var(--panneau-font-family-body);
+}
+
+.panneau-text-family-heading {
+    font-family: var(--panneau-font-family-heading);
+}
+
+.panneau-text-family-display {
+    font-family: var(--panneau-font-family-display);
+}
+
+.panneau-text-family-mono {
+    font-family: var(--panneau-font-family-mono);
+}
+
+.panneau-text-muted {
+    color: var(--panneau-text-muted-color, var(--panneau-color-text-muted));
+}
+
+/* A tone colors the text with the tone's text color, readable on surfaces. */
+.panneau-text-toned {
+    color: var(--panneau-tone-text);
+}
+
+.panneau-text-numeric {
+    font-variant-numeric: var(--panneau-font-numeric);
+}
+
+/* One line, cut with an ellipsis: the element needs a constrained width (a block, a flex item). */
+.panneau-text-truncate {
+    overflow: hidden;
+    min-width: 0;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}

package/dist/text/Text.d.ts

@@ -0,0 +1,27 @@
+import type { HTMLAttributes } from 'react';
+import type { Tone } from '../theme/tones';
+/** A size of the font scale of the theme. */
+export type TextSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+/** A font role of the theme. */
+export type TextFamily = 'body' | 'heading' | 'display' | 'mono';
+export interface TextProps extends HTMLAttributes<HTMLElement> {
+    /** Element to render. Defaults to `p`. */
+    as?: 'p' | 'span' | 'div' | 'small' | 'strong' | 'em';
+    /** Font size, from the scale of the theme. Inherited by default. */
+    size?: TextSize;
+    /** Inherited by default. */
+    weight?: 'normal' | 'medium' | 'bold';
+    /** Font role. Inherited by default. */
+    family?: TextFamily;
+    /** Colors the text with a tone (`success`, `danger`…), readable on surfaces. */
+    tone?: Tone;
+    /** The muted text color, for secondary information. */
+    muted?: boolean;
+    /** Digits of equal width, so that numbers line up: stats, dates, ids. */
+    numeric?: boolean;
+    /** Keeps the text on one line, cut with an ellipsis. */
+    truncate?: boolean;
+}
+/** Text in the sizes, weights and font roles of the theme. */
+export declare function Text({ as: Element, size, weight, family, tone, muted, numeric, truncate, className, ...props }: TextProps): import("react").JSX.Element;
+//# sourceMappingURL=Text.d.ts.map

package/dist/text/Text.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Text.d.ts","sourceRoot":"","sources":["../../src/text/Text.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAG5C,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,gBAAgB,CAAC;AAI3C,6CAA6C;AAC7C,MAAM,MAAM,QAAQ,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAExD,gCAAgC;AAChC,MAAM,MAAM,UAAU,GAAG,MAAM,GAAG,SAAS,GAAG,SAAS,GAAG,MAAM,CAAC;AAEjE,MAAM,WAAW,SAAU,SAAQ,cAAc,CAAC,WAAW,CAAC;IAC1D,0CAA0C;IAC1C,EAAE,CAAC,EAAE,GAAG,GAAG,MAAM,GAAG,KAAK,GAAG,OAAO,GAAG,QAAQ,GAAG,IAAI,CAAC;IACtD,oEAAoE;IACpE,IAAI,CAAC,EAAE,QAAQ,CAAC;IAChB,4BAA4B;IAC5B,MAAM,CAAC,EAAE,QAAQ,GAAG,QAAQ,GAAG,MAAM,CAAC;IACtC,uCAAuC;IACvC,MAAM,CAAC,EAAE,UAAU,CAAC;IACpB,gFAAgF;IAChF,IAAI,CAAC,EAAE,IAAI,CAAC;IACZ,uDAAuD;IACvD,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,yEAAyE;IACzE,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,wDAAwD;IACxD,QAAQ,CAAC,EAAE,OAAO,CAAC;CACtB;AAED,8DAA8D;AAC9D,wBAAgB,IAAI,CAAC,EACjB,EAAE,EAAE,OAAa,EACjB,IAAI,EACJ,MAAM,EACN,MAAM,EACN,IAAI,EACJ,KAAa,EACb,OAAe,EACf,QAAgB,EAChB,SAAS,EACT,GAAG,KAAK,EACX,EAAE,SAAS,+BAmBX"}

package/dist/text/Text.js

@@ -0,0 +1,16 @@
+import { cx } from "../utils/cx.js";
+import { toneClass } from "../theme/toneClass.js";
+import Text_module_default from "./Text.module.js";
+import { jsx } from "react/jsx-runtime";
+//#region src/text/Text.tsx
+/** Text in the sizes, weights and font roles of the theme. */
+function Text({ as: Element = "p", size, weight, family, tone, muted = false, numeric = false, truncate = false, className, ...props }) {
+	return /* @__PURE__ */ jsx(Element, {
+		...props,
+		className: cx("panneau-text", Text_module_default.text, size !== void 0 && Text_module_default[`size-${size}`], weight !== void 0 && Text_module_default[`weight-${weight}`], family !== void 0 && Text_module_default[`family-${family}`], tone !== void 0 && toneClass(tone), tone !== void 0 && Text_module_default.toned, muted && Text_module_default.muted, numeric && Text_module_default.numeric, truncate && Text_module_default.truncate, className)
+	});
+}
+//#endregion
+export { Text };
+
+//# sourceMappingURL=Text.js.map

package/dist/text/Text.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Text.js","names":["styles"],"sources":["../../src/text/Text.tsx"],"sourcesContent":["import type { HTMLAttributes } from 'react';\n\nimport { toneClass } from '../theme/toneClass';\nimport type { Tone } from '../theme/tones';\nimport { cx } from '../utils/cx';\nimport styles from './Text.module.css';\n\n/** A size of the font scale of the theme. */\nexport type TextSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';\n\n/** A font role of the theme. */\nexport type TextFamily = 'body' | 'heading' | 'display' | 'mono';\n\nexport interface TextProps extends HTMLAttributes<HTMLElement> {\n    /** Element to render. Defaults to `p`. */\n    as?: 'p' | 'span' | 'div' | 'small' | 'strong' | 'em';\n    /** Font size, from the scale of the theme. Inherited by default. */\n    size?: TextSize;\n    /** Inherited by default. */\n    weight?: 'normal' | 'medium' | 'bold';\n    /** Font role. Inherited by default. */\n    family?: TextFamily;\n    /** Colors the text with a tone (`success`, `danger`…), readable on surfaces. */\n    tone?: Tone;\n    /** The muted text color, for secondary information. */\n    muted?: boolean;\n    /** Digits of equal width, so that numbers line up: stats, dates, ids. */\n    numeric?: boolean;\n    /** Keeps the text on one line, cut with an ellipsis. */\n    truncate?: boolean;\n}\n\n/** Text in the sizes, weights and font roles of the theme. */\nexport function Text({\n    as: Element = 'p',\n    size,\n    weight,\n    family,\n    tone,\n    muted = false,\n    numeric = false,\n    truncate = false,\n    className,\n    ...props\n}: TextProps) {\n    return (\n        <Element\n            {...props}\n            className={cx(\n                'panneau-text',\n                styles.text,\n                size !== undefined && styles[`size-${size}`],\n                weight !== undefined && styles[`weight-${weight}`],\n                family !== undefined && styles[`family-${family}`],\n                tone !== undefined && toneClass(tone),\n                tone !== undefined && styles.toned,\n                muted && styles.muted,\n                numeric && styles.numeric,\n                truncate && styles.truncate,\n                className,\n            )}\n        />\n    );\n}\n"],"mappings":";;;;;;AAiCA,SAAgB,KAAK,EACjB,IAAI,UAAU,KACd,MACA,QACA,QACA,MACA,QAAQ,OACR,UAAU,OACV,WAAW,OACX,WACA,GAAG,SACO;CACV,OACI,oBAAC,SAAD;EACI,GAAI;EACJ,WAAW,GACP,gBACAA,oBAAO,MACP,SAAS,KAAA,KAAaA,oBAAO,QAAQ,SACrC,WAAW,KAAA,KAAaA,oBAAO,UAAU,WACzC,WAAW,KAAA,KAAaA,oBAAO,UAAU,WACzC,SAAS,KAAA,KAAa,UAAU,IAAI,GACpC,SAAS,KAAA,KAAaA,oBAAO,OAC7B,SAASA,oBAAO,OAChB,WAAWA,oBAAO,SAClB,YAAYA,oBAAO,UACnB,SACJ;CAAE,CAAA;AAGd"}

package/dist/text/Text.module.js

@@ -0,0 +1,30 @@
+import "./Text.css";
+//#region src/text/Text.module.css
+var text = "panneau-text";
+var muted = "panneau-text-muted";
+var toned = "panneau-text-toned";
+var numeric = "panneau-text-numeric";
+var truncate = "panneau-text-truncate";
+var Text_module_default = {
+	text,
+	"size-xs": "panneau-text-size-xs",
+	"size-sm": "panneau-text-size-sm",
+	"size-md": "panneau-text-size-md",
+	"size-lg": "panneau-text-size-lg",
+	"size-xl": "panneau-text-size-xl",
+	"weight-normal": "panneau-text-weight-normal",
+	"weight-medium": "panneau-text-weight-medium",
+	"weight-bold": "panneau-text-weight-bold",
+	"family-body": "panneau-text-family-body",
+	"family-heading": "panneau-text-family-heading",
+	"family-display": "panneau-text-family-display",
+	"family-mono": "panneau-text-family-mono",
+	muted,
+	toned,
+	numeric,
+	truncate
+};
+//#endregion
+export { Text_module_default as default, muted, numeric, text, toned, truncate };
+
+//# sourceMappingURL=Text.module.js.map

package/dist/text/Text.module.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Text.module.js","names":[],"sources":["../../src/text/Text.module.css"],"sourcesContent":["/* Text: sizes, weights and families of the theme, as modifiers. */\n\n.text {\n    margin: 0;\n}\n\n.size-xs {\n    font-size: var(--panneau-font-size-xs);\n}\n\n.size-sm {\n    font-size: var(--panneau-font-size-sm);\n}\n\n.size-md {\n    font-size: var(--panneau-font-size-md);\n}\n\n.size-lg {\n    font-size: var(--panneau-font-size-lg);\n}\n\n.size-xl {\n    font-size: var(--panneau-font-size-xl);\n}\n\n.weight-normal {\n    font-weight: var(--panneau-font-weight-normal);\n}\n\n.weight-medium {\n    font-weight: var(--panneau-font-weight-medium);\n}\n\n.weight-bold {\n    font-weight: var(--panneau-font-weight-bold);\n}\n\n.family-body {\n    font-family: var(--panneau-font-family-body);\n}\n\n.family-heading {\n    font-family: var(--panneau-font-family-heading);\n}\n\n.family-display {\n    font-family: var(--panneau-font-family-display);\n}\n\n.family-mono {\n    font-family: var(--panneau-font-family-mono);\n}\n\n.muted {\n    color: var(--panneau-text-muted-color, var(--panneau-color-text-muted));\n}\n\n/* A tone colors the text with the tone's text color, readable on surfaces. */\n.toned {\n    color: var(--panneau-tone-text);\n}\n\n.numeric {\n    font-variant-numeric: var(--panneau-font-numeric);\n}\n\n/* One line, cut with an ellipsis: the element needs a constrained width (a block, a flex item). */\n.truncate {\n    overflow: hidden;\n    min-width: 0;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n}\n"],"mappings":""}

package/dist/text/tokens.d.ts

@@ -0,0 +1,3 @@
+/** Tokens of Text. */
+export declare const textTokens: import("..").ComponentTokens<"text", "panneau-text-muted-color">;
+//# sourceMappingURL=tokens.d.ts.map

package/dist/text/tokens.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"tokens.d.ts","sourceRoot":"","sources":["../../src/text/tokens.ts"],"names":[],"mappings":"AAEA,sBAAsB;AACtB,eAAO,MAAM,UAAU,kEAGrB,CAAC"}

package/dist/text/tokens.js

@@ -0,0 +1,10 @@
+import { defineComponentTokens } from "../theme/componentTokens.js";
+//#region src/text/tokens.ts
+/** Tokens of Text. */
+var textTokens = defineComponentTokens("text", { 
+/** Color of muted text. */
+"muted-color": "var(--panneau-color-text-muted)" });
+//#endregion
+export { textTokens };
+
+//# sourceMappingURL=tokens.js.map

package/dist/text/tokens.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tokens.js","names":[],"sources":["../../src/text/tokens.ts"],"sourcesContent":["import { defineComponentTokens } from '../theme/componentTokens';\n\n/** Tokens of Text. */\nexport const textTokens = defineComponentTokens('text', {\n    /** Color of muted text. */\n    'muted-color': 'var(--panneau-color-text-muted)',\n});\n"],"mappings":";;;AAGA,IAAa,aAAa,sBAAsB,QAAQ;;AAEpD,eAAe,kCACnB,CAAC"}

package/dist/text-area/TextArea.css

@@ -1,5 +1,5 @@
 /* Doubled class: overrides the shared control, whatever the CSS order. */
-.panneau-textArea-ET01uE.panneau-textArea-ET01uE {
+.panneau-text-area-control.panneau-text-area-control {
     display: block;
     min-height: calc(var(--panneau-control-height) * 2);
     padding: var(--panneau-space-2) var(--panneau-space-3);

package/dist/text-area/TextArea.js

@@ -12,7 +12,7 @@ function TextArea$1({ label, description, errors = [], placeholder, rows = 4, cl
 		isRequired,
 		isInvalid: errors.length > 0,
 		validationBehavior: "aria",
-		className: cx(Field_module_default.field, className),
+		className: cx("panneau-text-area", Field_module_default.field, className),
 		children: [
 			/* @__PURE__ */ jsx(FieldLabel, {
 				isRequired,
@@ -22,7 +22,7 @@ function TextArea$1({ label, description, errors = [], placeholder, rows = 4, cl
 			/* @__PURE__ */ jsx(TextArea, {
 				placeholder,
 				rows,
-				className: cx(Field_module_default.control, TextArea_module_default.textArea, textAreaClassName)
+				className: cx(Field_module_default.control, TextArea_module_default.control, textAreaClassName)
 			}),
 			/* @__PURE__ */ jsx(FieldDescription, {
 				className: descriptionClassName,

package/dist/text-area/TextArea.js.map

@@ -1 +1 @@
-{"version":3,"file":"TextArea.js","names":["TextArea","fieldStyles","AriaTextArea","styles"],"sources":["../../src/text-area/TextArea.tsx"],"sourcesContent":["import {\n    TextArea as AriaTextArea,\n    type TextFieldProps as AriaTextFieldProps,\n    TextField,\n} from 'react-aria-components';\n\nimport {\n    type FieldChromeProps,\n    FieldDescription,\n    FieldErrors,\n    FieldLabel,\n    fieldStyles,\n} from '../field/FieldParts';\nimport { cx } from '../utils/cx';\nimport styles from './TextArea.module.css';\n\nexport interface TextAreaProps\n    extends\n        Omit<AriaTextFieldProps, 'className' | 'style' | 'children' | 'isInvalid' | 'validate'>,\n        FieldChromeProps {\n    placeholder?: string;\n    /** Visible lines of text. Defaults to 4. */\n    rows?: number;\n    textAreaClassName?: string;\n}\n\n/** A multi-line text input with its label, description and errors. */\nexport function TextArea({\n    label,\n    description,\n    errors = [],\n    placeholder,\n    rows = 4,\n    className,\n    labelClassName,\n    descriptionClassName,\n    errorsClassName,\n    textAreaClassName,\n    isRequired,\n    ...props\n}: TextAreaProps) {\n    return (\n        <TextField\n            {...props}\n            isRequired={isRequired}\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            <AriaTextArea\n                placeholder={placeholder}\n                rows={rows}\n                className={cx(fieldStyles.control, styles.textArea, textAreaClassName)}\n            />\n            <FieldDescription className={descriptionClassName}>{description}</FieldDescription>\n            <FieldErrors errors={errors} className={errorsClassName} />\n        </TextField>\n    );\n}\n"],"mappings":";;;;;;;;AA2BA,SAAgBA,WAAS,EACrB,OACA,aACA,SAAS,CAAA,GACT,aACA,OAAO,GACP,WACA,gBACA,sBACA,iBACA,mBACA,YACA,GAAG,SACW;CACd,OACI,qBAAC,WAAD;EACI,GAAI;EACQ;EACZ,WAAW,OAAO,SAAS;EAC3B,oBAAmB;EACnB,WAAW,GAAGC,qBAAY,OAAO,SAAS;EAL9C,UAAA;GAOI,oBAAC,YAAD;IAAwB;IAAY,WAAW;IAC1C,UAAA;GACO,CAAA;GACZ,oBAACC,UAAD;IACiB;IACP;IACN,WAAW,GAAGD,qBAAY,SAASE,wBAAO,UAAU,iBAAiB;GAAE,CAAA;GAE3E,oBAAC,kBAAD;IAAkB,WAAW;IAAuB,UAAA;GAA8B,CAAA;GAClF,oBAAC,aAAD;IAAqB;IAAQ,WAAW;GAAgB,CAAA;EACjD;;AAEnB"}
+{"version":3,"file":"TextArea.js","names":["TextArea","fieldStyles","AriaTextArea","styles"],"sources":["../../src/text-area/TextArea.tsx"],"sourcesContent":["import {\n    TextArea as AriaTextArea,\n    type TextFieldProps as AriaTextFieldProps,\n    TextField,\n} from 'react-aria-components';\n\nimport {\n    type FieldChromeProps,\n    FieldDescription,\n    FieldErrors,\n    FieldLabel,\n    fieldStyles,\n} from '../field/FieldParts';\nimport { cx } from '../utils/cx';\nimport styles from './TextArea.module.css';\n\nexport interface TextAreaProps\n    extends\n        Omit<AriaTextFieldProps, 'className' | 'style' | 'children' | 'isInvalid' | 'validate'>,\n        FieldChromeProps {\n    placeholder?: string;\n    /** Visible lines of text. Defaults to 4. */\n    rows?: number;\n    textAreaClassName?: string;\n}\n\n/** A multi-line text input with its label, description and errors. */\nexport function TextArea({\n    label,\n    description,\n    errors = [],\n    placeholder,\n    rows = 4,\n    className,\n    labelClassName,\n    descriptionClassName,\n    errorsClassName,\n    textAreaClassName,\n    isRequired,\n    ...props\n}: TextAreaProps) {\n    return (\n        <TextField\n            {...props}\n            isRequired={isRequired}\n            isInvalid={errors.length > 0}\n            validationBehavior=\"aria\"\n            className={cx('panneau-text-area', fieldStyles.field, className)}\n        >\n            <FieldLabel isRequired={isRequired} className={labelClassName}>\n                {label}\n            </FieldLabel>\n            <AriaTextArea\n                placeholder={placeholder}\n                rows={rows}\n                className={cx(fieldStyles.control, styles.control, textAreaClassName)}\n            />\n            <FieldDescription className={descriptionClassName}>{description}</FieldDescription>\n            <FieldErrors errors={errors} className={errorsClassName} />\n        </TextField>\n    );\n}\n"],"mappings":";;;;;;;;AA2BA,SAAgBA,WAAS,EACrB,OACA,aACA,SAAS,CAAA,GACT,aACA,OAAO,GACP,WACA,gBACA,sBACA,iBACA,mBACA,YACA,GAAG,SACW;CACd,OACI,qBAAC,WAAD;EACI,GAAI;EACQ;EACZ,WAAW,OAAO,SAAS;EAC3B,oBAAmB;EACnB,WAAW,GAAG,qBAAqBC,qBAAY,OAAO,SAAS;EALnE,UAAA;GAOI,oBAAC,YAAD;IAAwB;IAAY,WAAW;IAC1C,UAAA;GACO,CAAA;GACZ,oBAACC,UAAD;IACiB;IACP;IACN,WAAW,GAAGD,qBAAY,SAASE,wBAAO,SAAS,iBAAiB;GAAE,CAAA;GAE1E,oBAAC,kBAAD;IAAkB,WAAW;IAAuB,UAAA;GAA8B,CAAA;GAClF,oBAAC,aAAD;IAAqB;IAAQ,WAAW;GAAgB,CAAA;EACjD;;AAEnB"}

package/dist/text-area/TextArea.module.js

@@ -1,8 +1,8 @@
 import "./TextArea.css";
 //#region src/text-area/TextArea.module.css
-var textArea = "panneau-textArea-ET01uE";
-var TextArea_module_default = { textArea };
+var control = "panneau-text-area-control";
+var TextArea_module_default = { control };
 //#endregion
-export { TextArea_module_default as default, textArea };
+export { control, TextArea_module_default as default };
 
 //# sourceMappingURL=TextArea.module.js.map

package/dist/text-area/TextArea.module.js.map

@@ -1 +1 @@
-{"version":3,"file":"TextArea.module.js","names":[],"sources":["../../src/text-area/TextArea.module.css"],"sourcesContent":["/* Doubled class: overrides the shared control, whatever the CSS order. */\n.textArea.textArea {\n    display: block;\n    min-height: calc(var(--panneau-control-height) * 2);\n    padding: var(--panneau-space-2) var(--panneau-space-3);\n    line-height: var(--panneau-line-height);\n    resize: vertical;\n}\n"],"mappings":""}
+{"version":3,"file":"TextArea.module.js","names":[],"sources":["../../src/text-area/TextArea.module.css"],"sourcesContent":["/* Doubled class: overrides the shared control, whatever the CSS order. */\n.control.control {\n    display: block;\n    min-height: calc(var(--panneau-control-height) * 2);\n    padding: var(--panneau-space-2) var(--panneau-space-3);\n    line-height: var(--panneau-line-height);\n    resize: vertical;\n}\n"],"mappings":""}

package/dist/text-input/TextInput.js

@@ -14,7 +14,7 @@ function TextInput({ label, description, errors = [], placeholder, prefix, suffi
 		isReadOnly,
 		isInvalid: invalid,
 		validationBehavior: "aria",
-		className: cx(Field_module_default.field, className),
+		className: cx("panneau-text-input", Field_module_default.field, className),
 		children: [
 			/* @__PURE__ */ jsx(FieldLabel, {
 				isRequired,

package/dist/text-input/TextInput.js.map

@@ -1 +1 @@
-{"version":3,"file":"TextInput.js","names":["styles"],"sources":["../../src/text-input/TextInput.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport {\n    type TextFieldProps as AriaTextFieldProps,\n    Group,\n    Input,\n    TextField,\n} from 'react-aria-components';\n\nimport {\n    type FieldChromeProps,\n    FieldDescription,\n    FieldErrors,\n    FieldLabel,\n    fieldStyles as styles,\n} from '../field/FieldParts';\nimport { cx } from '../utils/cx';\n\nexport interface TextInputProps\n    extends\n        Omit<\n            AriaTextFieldProps,\n            'className' | 'style' | 'children' | 'isInvalid' | 'validate' | 'type'\n        >,\n        FieldChromeProps {\n    type?: 'text' | 'email' | 'url' | 'tel' | 'password' | 'search';\n    placeholder?: string;\n    /** Content before the text, inside the control: a unit, a URL prefix, an icon. */\n    prefix?: ReactNode;\n    /** Content after the text, inside the control. */\n    suffix?: ReactNode;\n    /** Class name of the control (the box around the text). */\n    controlClassName?: string;\n    inputClassName?: string;\n}\n\n/** A single-line text input with its label, description and errors. */\nexport function TextInput({\n    label,\n    description,\n    errors = [],\n    placeholder,\n    prefix,\n    suffix,\n    className,\n    labelClassName,\n    descriptionClassName,\n    errorsClassName,\n    controlClassName,\n    inputClassName,\n    isRequired,\n    isReadOnly,\n    ...props\n}: TextInputProps) {\n    const invalid = errors.length > 0;\n    const adorned = prefix !== undefined || suffix !== undefined;\n    return (\n        <TextField\n            {...props}\n            isRequired={isRequired}\n            isReadOnly={isReadOnly}\n            isInvalid={invalid}\n            validationBehavior=\"aria\"\n            className={cx(styles.field, className)}\n        >\n            <FieldLabel isRequired={isRequired} className={labelClassName}>\n                {label}\n            </FieldLabel>\n            {adorned ? (\n                <Group\n                    className={cx(styles.control, controlClassName)}\n                    data-invalid={invalid || undefined}\n                    data-readonly={isReadOnly || undefined}\n                    isDisabled={props.isDisabled}\n                >\n                    {prefix !== undefined ? (\n                        <span className={styles.adornment}>{prefix}</span>\n                    ) : null}\n                    <Input placeholder={placeholder} className={cx(styles.bare, inputClassName)} />\n                    {suffix !== undefined ? (\n                        <span className={styles.adornment}>{suffix}</span>\n                    ) : null}\n                </Group>\n            ) : (\n                <Input\n                    placeholder={placeholder}\n                    className={cx(styles.control, controlClassName, inputClassName)}\n                />\n            )}\n            <FieldDescription className={descriptionClassName}>{description}</FieldDescription>\n            <FieldErrors errors={errors} className={errorsClassName} />\n        </TextField>\n    );\n}\n"],"mappings":";;;;;;;AAoCA,SAAgB,UAAU,EACtB,OACA,aACA,SAAS,CAAA,GACT,aACA,QACA,QACA,WACA,gBACA,sBACA,iBACA,kBACA,gBACA,YACA,YACA,GAAG,SACY;CACf,MAAM,UAAU,OAAO,SAAS;CAChC,MAAM,UAAU,WAAW,KAAA,KAAa,WAAW,KAAA;CACnD,OACI,qBAAC,WAAD;EACI,GAAI;EACQ;EACA;EACZ,WAAW;EACX,oBAAmB;EACnB,WAAW,GAAGA,qBAAO,OAAO,SAAS;EANzC,UAAA;GAQI,oBAAC,YAAD;IAAwB;IAAY,WAAW;IAC1C,UAAA;GACO,CAAA;GACX,UACG,qBAAC,OAAD;IACI,WAAW,GAAGA,qBAAO,SAAS,gBAAgB;IAC9C,gBAAc,WAAW,KAAA;IACzB,iBAAe,cAAc,KAAA;IAC7B,YAAY,MAAM;IAJtB,UAAA;KAMK,WAAW,KAAA,IACR,oBAAC,QAAD;MAAM,WAAWA,qBAAO;MAAY,UAAA;KAAa,CAAA,IACjD;KACJ,oBAAC,OAAD;MAAoB;MAAa,WAAW,GAAGA,qBAAO,MAAM,cAAc;KAAE,CAAA;KAC3E,WAAW,KAAA,IACR,oBAAC,QAAD;MAAM,WAAWA,qBAAO;MAAY,UAAA;KAAa,CAAA,IACjD;IACD;GAEP,CAAA,IAAA,oBAAC,OAAD;IACiB;IACb,WAAW,GAAGA,qBAAO,SAAS,kBAAkB,cAAc;GAAE,CAAA;GAGxE,oBAAC,kBAAD;IAAkB,WAAW;IAAuB,UAAA;GAA8B,CAAA;GAClF,oBAAC,aAAD;IAAqB;IAAQ,WAAW;GAAgB,CAAA;EACjD;;AAEnB"}
+{"version":3,"file":"TextInput.js","names":["styles"],"sources":["../../src/text-input/TextInput.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport {\n    type TextFieldProps as AriaTextFieldProps,\n    Group,\n    Input,\n    TextField,\n} from 'react-aria-components';\n\nimport {\n    type FieldChromeProps,\n    FieldDescription,\n    FieldErrors,\n    FieldLabel,\n    fieldStyles as styles,\n} from '../field/FieldParts';\nimport { cx } from '../utils/cx';\n\nexport interface TextInputProps\n    extends\n        Omit<\n            AriaTextFieldProps,\n            'className' | 'style' | 'children' | 'isInvalid' | 'validate' | 'type'\n        >,\n        FieldChromeProps {\n    type?: 'text' | 'email' | 'url' | 'tel' | 'password' | 'search';\n    placeholder?: string;\n    /** Content before the text, inside the control: a unit, a URL prefix, an icon. */\n    prefix?: ReactNode;\n    /** Content after the text, inside the control. */\n    suffix?: ReactNode;\n    /** Class name of the control (the box around the text). */\n    controlClassName?: string;\n    inputClassName?: string;\n}\n\n/** A single-line text input with its label, description and errors. */\nexport function TextInput({\n    label,\n    description,\n    errors = [],\n    placeholder,\n    prefix,\n    suffix,\n    className,\n    labelClassName,\n    descriptionClassName,\n    errorsClassName,\n    controlClassName,\n    inputClassName,\n    isRequired,\n    isReadOnly,\n    ...props\n}: TextInputProps) {\n    const invalid = errors.length > 0;\n    const adorned = prefix !== undefined || suffix !== undefined;\n    return (\n        <TextField\n            {...props}\n            isRequired={isRequired}\n            isReadOnly={isReadOnly}\n            isInvalid={invalid}\n            validationBehavior=\"aria\"\n            className={cx('panneau-text-input', styles.field, className)}\n        >\n            <FieldLabel isRequired={isRequired} className={labelClassName}>\n                {label}\n            </FieldLabel>\n            {adorned ? (\n                <Group\n                    className={cx(styles.control, controlClassName)}\n                    data-invalid={invalid || undefined}\n                    data-readonly={isReadOnly || undefined}\n                    isDisabled={props.isDisabled}\n                >\n                    {prefix !== undefined ? (\n                        <span className={styles.adornment}>{prefix}</span>\n                    ) : null}\n                    <Input placeholder={placeholder} className={cx(styles.bare, inputClassName)} />\n                    {suffix !== undefined ? (\n                        <span className={styles.adornment}>{suffix}</span>\n                    ) : null}\n                </Group>\n            ) : (\n                <Input\n                    placeholder={placeholder}\n                    className={cx(styles.control, controlClassName, inputClassName)}\n                />\n            )}\n            <FieldDescription className={descriptionClassName}>{description}</FieldDescription>\n            <FieldErrors errors={errors} className={errorsClassName} />\n        </TextField>\n    );\n}\n"],"mappings":";;;;;;;AAoCA,SAAgB,UAAU,EACtB,OACA,aACA,SAAS,CAAA,GACT,aACA,QACA,QACA,WACA,gBACA,sBACA,iBACA,kBACA,gBACA,YACA,YACA,GAAG,SACY;CACf,MAAM,UAAU,OAAO,SAAS;CAChC,MAAM,UAAU,WAAW,KAAA,KAAa,WAAW,KAAA;CACnD,OACI,qBAAC,WAAD;EACI,GAAI;EACQ;EACA;EACZ,WAAW;EACX,oBAAmB;EACnB,WAAW,GAAG,sBAAsBA,qBAAO,OAAO,SAAS;EAN/D,UAAA;GAQI,oBAAC,YAAD;IAAwB;IAAY,WAAW;IAC1C,UAAA;GACO,CAAA;GACX,UACG,qBAAC,OAAD;IACI,WAAW,GAAGA,qBAAO,SAAS,gBAAgB;IAC9C,gBAAc,WAAW,KAAA;IACzB,iBAAe,cAAc,KAAA;IAC7B,YAAY,MAAM;IAJtB,UAAA;KAMK,WAAW,KAAA,IACR,oBAAC,QAAD;MAAM,WAAWA,qBAAO;MAAY,UAAA;KAAa,CAAA,IACjD;KACJ,oBAAC,OAAD;MAAoB;MAAa,WAAW,GAAGA,qBAAO,MAAM,cAAc;KAAE,CAAA;KAC3E,WAAW,KAAA,IACR,oBAAC,QAAD;MAAM,WAAWA,qBAAO;MAAY,UAAA;KAAa,CAAA,IACjD;IACD;GAEP,CAAA,IAAA,oBAAC,OAAD;IACiB;IACb,WAAW,GAAGA,qBAAO,SAAS,kBAAkB,cAAc;GAAE,CAAA;GAGxE,oBAAC,kBAAD;IAAkB,WAAW;IAAuB,UAAA;GAA8B,CAAA;GAClF,oBAAC,aAAD;IAAqB;IAAQ,WAAW;GAAgB,CAAA;EACjD;;AAEnB"}

package/dist/theme/Tone.css

@@ -0,0 +1,70 @@
+/*
+ * Built-in tones (decision 0024): each one sets the local --panneau-tone-* variables that
+ * components read, from the semantic tokens of the theme, so they follow the theme and the color
+ * scheme. A theme's own tones are written by getThemeCss() with the same class names
+ * (panneau-tone-<name>), and can redefine these.
+ */
+
+.panneau-tone-neutral {
+    --panneau-tone-text: var(--panneau-color-text);
+    --panneau-tone-subtle: var(--panneau-color-surface-sunken);
+    --panneau-tone-border: var(--panneau-color-border);
+    --panneau-tone-outline: var(--panneau-color-border-control);
+    --panneau-tone-solid: var(--panneau-color-text);
+    --panneau-tone-solid-hover: var(--panneau-color-text-muted);
+    --panneau-tone-solid-text: var(--panneau-color-bg);
+}
+
+.panneau-tone-accent {
+    --panneau-tone-text: var(--panneau-color-accent);
+    --panneau-tone-subtle: var(--panneau-color-accent-subtle);
+    --panneau-tone-border: color-mix(
+        in srgb,
+        var(--panneau-color-accent) 35%,
+        var(--panneau-color-surface)
+    );
+    --panneau-tone-outline: var(--panneau-color-accent);
+    --panneau-tone-solid: var(--panneau-color-accent);
+    --panneau-tone-solid-hover: var(--panneau-color-accent-hover);
+    --panneau-tone-solid-text: var(--panneau-color-accent-text);
+}
+
+.panneau-tone-success {
+    --panneau-tone-text: var(--panneau-color-success);
+    --panneau-tone-subtle: var(--panneau-color-success-subtle);
+    --panneau-tone-border: var(--panneau-color-success-border);
+    --panneau-tone-outline: var(--panneau-color-success);
+    --panneau-tone-solid: var(--panneau-color-success-solid);
+    --panneau-tone-solid-hover: var(--panneau-color-success-solid-hover);
+    --panneau-tone-solid-text: var(--panneau-color-success-solid-text);
+}
+
+.panneau-tone-warning {
+    --panneau-tone-text: var(--panneau-color-warning);
+    --panneau-tone-subtle: var(--panneau-color-warning-subtle);
+    --panneau-tone-border: var(--panneau-color-warning-border);
+    --panneau-tone-outline: var(--panneau-color-warning);
+    --panneau-tone-solid: var(--panneau-color-warning-solid);
+    --panneau-tone-solid-hover: var(--panneau-color-warning-solid-hover);
+    --panneau-tone-solid-text: var(--panneau-color-warning-solid-text);
+}
+
+.panneau-tone-danger {
+    --panneau-tone-text: var(--panneau-color-danger);
+    --panneau-tone-subtle: var(--panneau-color-danger-subtle);
+    --panneau-tone-border: var(--panneau-color-danger-border);
+    --panneau-tone-outline: var(--panneau-color-danger);
+    --panneau-tone-solid: var(--panneau-color-danger-solid);
+    --panneau-tone-solid-hover: var(--panneau-color-danger-solid-hover);
+    --panneau-tone-solid-text: var(--panneau-color-danger-solid-text);
+}
+
+.panneau-tone-info {
+    --panneau-tone-text: var(--panneau-color-info);
+    --panneau-tone-subtle: var(--panneau-color-info-subtle);
+    --panneau-tone-border: var(--panneau-color-info-border);
+    --panneau-tone-outline: var(--panneau-color-info);
+    --panneau-tone-solid: var(--panneau-color-info-solid);
+    --panneau-tone-solid-hover: var(--panneau-color-info-solid-hover);
+    --panneau-tone-solid-text: var(--panneau-color-info-solid-text);
+}

package/dist/theme/Tone.module.js

@@ -0,0 +1,20 @@
+import "./Tone.css";
+//#region src/theme/Tone.module.css
+var neutral = "panneau-tone-neutral";
+var accent = "panneau-tone-accent";
+var success = "panneau-tone-success";
+var warning = "panneau-tone-warning";
+var danger = "panneau-tone-danger";
+var info = "panneau-tone-info";
+var Tone_module_default = {
+	neutral,
+	accent,
+	success,
+	warning,
+	danger,
+	info
+};
+//#endregion
+export { accent, danger, Tone_module_default as default, info, neutral, success, warning };
+
+//# sourceMappingURL=Tone.module.js.map

package/dist/theme/Tone.module.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Tone.module.js","names":[],"sources":["../../src/theme/Tone.module.css"],"sourcesContent":["/*\n * Built-in tones (decision 0024): each one sets the local --panneau-tone-* variables that\n * components read, from the semantic tokens of the theme, so they follow the theme and the color\n * scheme. A theme's own tones are written by getThemeCss() with the same class names\n * (panneau-tone-<name>), and can redefine these.\n */\n\n.neutral {\n    --panneau-tone-text: var(--panneau-color-text);\n    --panneau-tone-subtle: var(--panneau-color-surface-sunken);\n    --panneau-tone-border: var(--panneau-color-border);\n    --panneau-tone-outline: var(--panneau-color-border-control);\n    --panneau-tone-solid: var(--panneau-color-text);\n    --panneau-tone-solid-hover: var(--panneau-color-text-muted);\n    --panneau-tone-solid-text: var(--panneau-color-bg);\n}\n\n.accent {\n    --panneau-tone-text: var(--panneau-color-accent);\n    --panneau-tone-subtle: var(--panneau-color-accent-subtle);\n    --panneau-tone-border: color-mix(\n        in srgb,\n        var(--panneau-color-accent) 35%,\n        var(--panneau-color-surface)\n    );\n    --panneau-tone-outline: var(--panneau-color-accent);\n    --panneau-tone-solid: var(--panneau-color-accent);\n    --panneau-tone-solid-hover: var(--panneau-color-accent-hover);\n    --panneau-tone-solid-text: var(--panneau-color-accent-text);\n}\n\n.success {\n    --panneau-tone-text: var(--panneau-color-success);\n    --panneau-tone-subtle: var(--panneau-color-success-subtle);\n    --panneau-tone-border: var(--panneau-color-success-border);\n    --panneau-tone-outline: var(--panneau-color-success);\n    --panneau-tone-solid: var(--panneau-color-success-solid);\n    --panneau-tone-solid-hover: var(--panneau-color-success-solid-hover);\n    --panneau-tone-solid-text: var(--panneau-color-success-solid-text);\n}\n\n.warning {\n    --panneau-tone-text: var(--panneau-color-warning);\n    --panneau-tone-subtle: var(--panneau-color-warning-subtle);\n    --panneau-tone-border: var(--panneau-color-warning-border);\n    --panneau-tone-outline: var(--panneau-color-warning);\n    --panneau-tone-solid: var(--panneau-color-warning-solid);\n    --panneau-tone-solid-hover: var(--panneau-color-warning-solid-hover);\n    --panneau-tone-solid-text: var(--panneau-color-warning-solid-text);\n}\n\n.danger {\n    --panneau-tone-text: var(--panneau-color-danger);\n    --panneau-tone-subtle: var(--panneau-color-danger-subtle);\n    --panneau-tone-border: var(--panneau-color-danger-border);\n    --panneau-tone-outline: var(--panneau-color-danger);\n    --panneau-tone-solid: var(--panneau-color-danger-solid);\n    --panneau-tone-solid-hover: var(--panneau-color-danger-solid-hover);\n    --panneau-tone-solid-text: var(--panneau-color-danger-solid-text);\n}\n\n.info {\n    --panneau-tone-text: var(--panneau-color-info);\n    --panneau-tone-subtle: var(--panneau-color-info-subtle);\n    --panneau-tone-border: var(--panneau-color-info-border);\n    --panneau-tone-outline: var(--panneau-color-info);\n    --panneau-tone-solid: var(--panneau-color-info-solid);\n    --panneau-tone-solid-hover: var(--panneau-color-info-solid-hover);\n    --panneau-tone-solid-text: var(--panneau-color-info-solid-text);\n}\n"],"mappings":""}

package/dist/theme/bootstrap.d.ts

@@ -1,4 +1,14 @@
 import type { Theme } from './theme';
+import type { ToneValues } from './tones';
+/**
+ * A tone from one of Bootstrap's theme colors, read from its CSS variables (`--bs-<color>`,
+ * `-text-emphasis`, `-bg-subtle`, `-border-subtle`), so that a site's custom colors carry over:
+ * `tones: { brand: bootstrapTone('brand') }`. Text on the subtle background uses the emphasis
+ * color, as Bootstrap's alerts do. Light colors need dark solid text: `{ solidText: 'var(--bs-dark)' }`.
+ */
+export declare function bootstrapTone(color: string, { solidText }?: {
+    solidText?: string;
+}): ToneValues;
 /**
  * Maps Panneau's tokens to the CSS variables of Bootstrap 5.3, for sites that use Bootstrap: Panneau
  * then follows the site's colors, fonts and radii, and its color mode (`data-bs-theme`), without

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

@@ -1 +1 @@
-{"version":3,"file":"bootstrap.d.ts","sourceRoot":"","sources":["../../src/theme/bootstrap.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC;AAErC;;;;GAIG;AACH,eAAO,MAAM,cAAc,EAAE,KAkD5B,CAAC"}
+{"version":3,"file":"bootstrap.d.ts","sourceRoot":"","sources":["../../src/theme/bootstrap.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC;AACrC,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AAE1C;;;;;GAKG;AACH,wBAAgB,aAAa,CACzB,KAAK,EAAE,MAAM,EACb,EAAE,SAA6B,EAAE,GAAE;IAAE,SAAS,CAAC,EAAE,MAAM,CAAA;CAAO,GAC/D,UAAU,CAUZ;AAED;;;;GAIG;AACH,eAAO,MAAM,cAAc,EAAE,KAoFF,CAAC"}

package/dist/theme/bootstrap.js

@@ -1,5 +1,22 @@
 //#region src/theme/bootstrap.ts
 /**
+* A tone from one of Bootstrap's theme colors, read from its CSS variables (`--bs-<color>`,
+* `-text-emphasis`, `-bg-subtle`, `-border-subtle`), so that a site's custom colors carry over:
+* `tones: { brand: bootstrapTone('brand') }`. Text on the subtle background uses the emphasis
+* color, as Bootstrap's alerts do. Light colors need dark solid text: `{ solidText: 'var(--bs-dark)' }`.
+*/
+function bootstrapTone(color, { solidText = "var(--bs-white)" } = {}) {
+	return {
+		text: `var(--bs-${color}-text-emphasis)`,
+		subtle: `var(--bs-${color}-bg-subtle)`,
+		border: `var(--bs-${color}-border-subtle)`,
+		outline: `var(--bs-${color})`,
+		solid: `var(--bs-${color})`,
+		solidHover: `color-mix(in srgb, var(--bs-${color}), #000 15%)`,
+		solidText
+	};
+}
+/**
 * Maps Panneau's tokens to the CSS variables of Bootstrap 5.3, for sites that use Bootstrap: Panneau
 * then follows the site's colors, fonts and radii, and its color mode (`data-bs-theme`), without
 * using any Bootstrap class. Bootstrap's CSS must be loaded by the site.
@@ -32,16 +49,24 @@ var bootstrapTheme = {
 		"panneau-color-success": "var(--bs-success-text-emphasis)",
 		"panneau-color-success-subtle": "var(--bs-success-bg-subtle)",
 		"panneau-color-success-border": "var(--bs-success-border-subtle)",
+		"panneau-color-success-solid": "var(--bs-success)",
+		"panneau-color-success-solid-hover": "color-mix(in srgb, var(--bs-success), #000 15%)",
+		"panneau-color-success-solid-text": "var(--bs-white)",
 		"panneau-color-warning": "var(--bs-warning-text-emphasis)",
 		"panneau-color-warning-subtle": "var(--bs-warning-bg-subtle)",
 		"panneau-color-warning-border": "var(--bs-warning-border-subtle)",
+		"panneau-color-warning-solid": "var(--bs-warning)",
+		"panneau-color-warning-solid-hover": "color-mix(in srgb, var(--bs-warning), #000 10%)",
+		"panneau-color-warning-solid-text": "var(--bs-dark)",
 		"panneau-color-info": "var(--bs-info-text-emphasis)",
 		"panneau-color-info-subtle": "var(--bs-info-bg-subtle)",
 		"panneau-color-info-border": "var(--bs-info-border-subtle)",
-		"panneau-font-family": "var(--bs-body-font-family)",
+		"panneau-color-info-solid": "var(--bs-info)",
+		"panneau-color-info-solid-hover": "color-mix(in srgb, var(--bs-info), #000 10%)",
+		"panneau-color-info-solid-text": "var(--bs-dark)",
+		"panneau-font-family-body": "var(--bs-body-font-family)",
 		"panneau-font-family-mono": "var(--bs-font-monospace)",
 		"panneau-font-size-md": "var(--bs-body-font-size)",
-		"panneau-font-size-control": "var(--bs-body-font-size)",
 		"panneau-line-height": "var(--bs-body-line-height)",
 		"panneau-radius-sm": "var(--bs-border-radius-sm)",
 		"panneau-radius-md": "var(--bs-border-radius)",
@@ -51,11 +76,29 @@ var bootstrapTheme = {
 		"panneau-shadow-sm": "var(--bs-box-shadow-sm)",
 		"panneau-shadow-md": "var(--bs-box-shadow)",
 		"panneau-shadow-lg": "var(--bs-box-shadow-lg)",
+		"panneau-heading-color": "var(--bs-heading-color)",
+		"panneau-badge-radius": "var(--bs-border-radius)",
+		"panneau-card-radius": "var(--bs-border-radius)",
+		"panneau-card-border-color": "var(--bs-border-color-translucent)",
+		"panneau-popover-radius": "var(--bs-border-radius)",
+		"panneau-popover-border-color": "var(--bs-border-color-translucent)",
+		"panneau-tooltip-bg": "var(--bs-emphasis-color)",
+		"panneau-tooltip-color": "var(--bs-body-bg)",
+		"panneau-tooltip-radius": "var(--bs-border-radius)"
+	},
+	tones: {
+		accent: bootstrapTone("primary"),
+		primary: bootstrapTone("primary"),
+		secondary: bootstrapTone("secondary")
+	},
+	densities: { comfortable: {
+		"panneau-font-size-control": "var(--bs-body-font-size)",
 		"panneau-control-height": "calc(1.5em + 0.75rem + 2 * var(--bs-border-width))",
-		"panneau-control-height-sm": "calc(1.5em + 0.5rem + 2 * var(--bs-border-width))"
-	}
+		"panneau-control-height-sm": "calc(1.5em + 0.5rem + 2 * var(--bs-border-width))",
+		"panneau-control-padding-x": "0.75rem"
+	} }
 };
 //#endregion
-export { bootstrapTheme };
+export { bootstrapTheme, bootstrapTone };
 
 //# sourceMappingURL=bootstrap.js.map

package/dist/theme/bootstrap.js.map

@@ -1 +1 @@
-{"version":3,"file":"bootstrap.js","names":[],"sources":["../../src/theme/bootstrap.ts"],"sourcesContent":["import type { Theme } from './theme';\n\n/**\n * Maps Panneau's tokens to the CSS variables of Bootstrap 5.3, for sites that use Bootstrap: Panneau\n * then follows the site's colors, fonts and radii, and its color mode (`data-bs-theme`), without\n * using any Bootstrap class. Bootstrap's CSS must be loaded by the site.\n */\nexport const bootstrapTheme: Theme = {\n    label: 'Bootstrap',\n    tokens: {\n        'panneau-color-bg': 'var(--bs-body-bg)',\n        'panneau-color-surface': 'var(--bs-body-bg)',\n        'panneau-color-surface-sunken': 'var(--bs-tertiary-bg)',\n        'panneau-color-surface-raised': 'var(--bs-body-bg)',\n        'panneau-color-hover': 'rgba(var(--bs-emphasis-color-rgb), 0.06)',\n        'panneau-color-pressed': 'rgba(var(--bs-emphasis-color-rgb), 0.1)',\n        'panneau-color-text': 'var(--bs-body-color)',\n        'panneau-color-text-muted': 'var(--bs-secondary-color)',\n        'panneau-color-link': 'var(--bs-link-color)',\n        'panneau-color-border': 'var(--bs-border-color)',\n        'panneau-color-border-control': 'var(--bs-border-color)',\n        'panneau-color-accent': 'var(--bs-primary)',\n        'panneau-color-accent-hover': 'color-mix(in srgb, var(--bs-primary), #000 15%)',\n        'panneau-color-accent-text': 'var(--bs-white)',\n        'panneau-color-accent-subtle': 'var(--bs-primary-bg-subtle)',\n        'panneau-color-focus': 'rgba(var(--bs-primary-rgb), 0.5)',\n        'panneau-color-danger': 'var(--bs-danger-text-emphasis)',\n        'panneau-color-danger-subtle': 'var(--bs-danger-bg-subtle)',\n        'panneau-color-danger-border': 'var(--bs-danger-border-subtle)',\n        'panneau-color-danger-solid': 'var(--bs-danger)',\n        'panneau-color-danger-solid-hover': 'color-mix(in srgb, var(--bs-danger), #000 15%)',\n        'panneau-color-danger-solid-text': 'var(--bs-white)',\n        'panneau-color-success': 'var(--bs-success-text-emphasis)',\n        'panneau-color-success-subtle': 'var(--bs-success-bg-subtle)',\n        'panneau-color-success-border': 'var(--bs-success-border-subtle)',\n        'panneau-color-warning': 'var(--bs-warning-text-emphasis)',\n        'panneau-color-warning-subtle': 'var(--bs-warning-bg-subtle)',\n        'panneau-color-warning-border': 'var(--bs-warning-border-subtle)',\n        'panneau-color-info': 'var(--bs-info-text-emphasis)',\n        'panneau-color-info-subtle': 'var(--bs-info-bg-subtle)',\n        'panneau-color-info-border': 'var(--bs-info-border-subtle)',\n        'panneau-font-family': 'var(--bs-body-font-family)',\n        'panneau-font-family-mono': 'var(--bs-font-monospace)',\n        'panneau-font-size-md': 'var(--bs-body-font-size)',\n        'panneau-font-size-control': 'var(--bs-body-font-size)',\n        'panneau-line-height': 'var(--bs-body-line-height)',\n        'panneau-radius-sm': 'var(--bs-border-radius-sm)',\n        'panneau-radius-md': 'var(--bs-border-radius)',\n        'panneau-radius-lg': 'var(--bs-border-radius-lg)',\n        'panneau-radius-full': 'var(--bs-border-radius-pill)',\n        'panneau-border-width': 'var(--bs-border-width)',\n        'panneau-shadow-sm': 'var(--bs-box-shadow-sm)',\n        'panneau-shadow-md': 'var(--bs-box-shadow)',\n        'panneau-shadow-lg': 'var(--bs-box-shadow-lg)',\n        'panneau-control-height': 'calc(1.5em + 0.75rem + 2 * var(--bs-border-width))',\n        'panneau-control-height-sm': 'calc(1.5em + 0.5rem + 2 * var(--bs-border-width))',\n    },\n};\n"],"mappings":";;;;;;AAOA,IAAa,iBAAwB;CACjC,OAAO;CACP,QAAQ;EACJ,oBAAoB;EACpB,yBAAyB;EACzB,gCAAgC;EAChC,gCAAgC;EAChC,uBAAuB;EACvB,yBAAyB;EACzB,sBAAsB;EACtB,4BAA4B;EAC5B,sBAAsB;EACtB,wBAAwB;EACxB,gCAAgC;EAChC,wBAAwB;EACxB,8BAA8B;EAC9B,6BAA6B;EAC7B,+BAA+B;EAC/B,uBAAuB;EACvB,wBAAwB;EACxB,+BAA+B;EAC/B,+BAA+B;EAC/B,8BAA8B;EAC9B,oCAAoC;EACpC,mCAAmC;EACnC,yBAAyB;EACzB,gCAAgC;EAChC,gCAAgC;EAChC,yBAAyB;EACzB,gCAAgC;EAChC,gCAAgC;EAChC,sBAAsB;EACtB,6BAA6B;EAC7B,6BAA6B;EAC7B,uBAAuB;EACvB,4BAA4B;EAC5B,wBAAwB;EACxB,6BAA6B;EAC7B,uBAAuB;EACvB,qBAAqB;EACrB,qBAAqB;EACrB,qBAAqB;EACrB,uBAAuB;EACvB,wBAAwB;EACxB,qBAAqB;EACrB,qBAAqB;EACrB,qBAAqB;EACrB,0BAA0B;EAC1B,6BAA6B;CACjC;AACJ"}
+{"version":3,"file":"bootstrap.js","names":[],"sources":["../../src/theme/bootstrap.ts"],"sourcesContent":["import type { ThemeDefinition } from './defineTheme';\nimport type { Theme } from './theme';\nimport type { ToneValues } from './tones';\n\n/**\n * A tone from one of Bootstrap's theme colors, read from its CSS variables (`--bs-<color>`,\n * `-text-emphasis`, `-bg-subtle`, `-border-subtle`), so that a site's custom colors carry over:\n * `tones: { brand: bootstrapTone('brand') }`. Text on the subtle background uses the emphasis\n * color, as Bootstrap's alerts do. Light colors need dark solid text: `{ solidText: 'var(--bs-dark)' }`.\n */\nexport function bootstrapTone(\n    color: string,\n    { solidText = 'var(--bs-white)' }: { solidText?: string } = {},\n): ToneValues {\n    return {\n        text: `var(--bs-${color}-text-emphasis)`,\n        subtle: `var(--bs-${color}-bg-subtle)`,\n        border: `var(--bs-${color}-border-subtle)`,\n        outline: `var(--bs-${color})`,\n        solid: `var(--bs-${color})`,\n        solidHover: `color-mix(in srgb, var(--bs-${color}), #000 15%)`,\n        solidText,\n    };\n}\n\n/**\n * Maps Panneau's tokens to the CSS variables of Bootstrap 5.3, for sites that use Bootstrap: Panneau\n * then follows the site's colors, fonts and radii, and its color mode (`data-bs-theme`), without\n * using any Bootstrap class. Bootstrap's CSS must be loaded by the site.\n */\nexport const bootstrapTheme: Theme = {\n    label: 'Bootstrap',\n    tokens: {\n        'panneau-color-bg': 'var(--bs-body-bg)',\n        'panneau-color-surface': 'var(--bs-body-bg)',\n        'panneau-color-surface-sunken': 'var(--bs-tertiary-bg)',\n        'panneau-color-surface-raised': 'var(--bs-body-bg)',\n        'panneau-color-hover': 'rgba(var(--bs-emphasis-color-rgb), 0.06)',\n        'panneau-color-pressed': 'rgba(var(--bs-emphasis-color-rgb), 0.1)',\n        'panneau-color-text': 'var(--bs-body-color)',\n        'panneau-color-text-muted': 'var(--bs-secondary-color)',\n        'panneau-color-link': 'var(--bs-link-color)',\n        'panneau-color-border': 'var(--bs-border-color)',\n        'panneau-color-border-control': 'var(--bs-border-color)',\n        'panneau-color-accent': 'var(--bs-primary)',\n        'panneau-color-accent-hover': 'color-mix(in srgb, var(--bs-primary), #000 15%)',\n        'panneau-color-accent-text': 'var(--bs-white)',\n        'panneau-color-accent-subtle': 'var(--bs-primary-bg-subtle)',\n        'panneau-color-focus': 'rgba(var(--bs-primary-rgb), 0.5)',\n        'panneau-color-danger': 'var(--bs-danger-text-emphasis)',\n        'panneau-color-danger-subtle': 'var(--bs-danger-bg-subtle)',\n        'panneau-color-danger-border': 'var(--bs-danger-border-subtle)',\n        'panneau-color-danger-solid': 'var(--bs-danger)',\n        'panneau-color-danger-solid-hover': 'color-mix(in srgb, var(--bs-danger), #000 15%)',\n        'panneau-color-danger-solid-text': 'var(--bs-white)',\n        'panneau-color-success': 'var(--bs-success-text-emphasis)',\n        'panneau-color-success-subtle': 'var(--bs-success-bg-subtle)',\n        'panneau-color-success-border': 'var(--bs-success-border-subtle)',\n        'panneau-color-success-solid': 'var(--bs-success)',\n        'panneau-color-success-solid-hover': 'color-mix(in srgb, var(--bs-success), #000 15%)',\n        'panneau-color-success-solid-text': 'var(--bs-white)',\n        'panneau-color-warning': 'var(--bs-warning-text-emphasis)',\n        'panneau-color-warning-subtle': 'var(--bs-warning-bg-subtle)',\n        'panneau-color-warning-border': 'var(--bs-warning-border-subtle)',\n        'panneau-color-warning-solid': 'var(--bs-warning)',\n        'panneau-color-warning-solid-hover': 'color-mix(in srgb, var(--bs-warning), #000 10%)',\n        // Like Bootstrap's .btn-warning and .text-bg-warning: dark text on yellow.\n        'panneau-color-warning-solid-text': 'var(--bs-dark)',\n        'panneau-color-info': 'var(--bs-info-text-emphasis)',\n        'panneau-color-info-subtle': 'var(--bs-info-bg-subtle)',\n        'panneau-color-info-border': 'var(--bs-info-border-subtle)',\n        'panneau-color-info-solid': 'var(--bs-info)',\n        'panneau-color-info-solid-hover': 'color-mix(in srgb, var(--bs-info), #000 10%)',\n        'panneau-color-info-solid-text': 'var(--bs-dark)',\n        'panneau-font-family-body': 'var(--bs-body-font-family)',\n        'panneau-font-family-mono': 'var(--bs-font-monospace)',\n        'panneau-font-size-md': 'var(--bs-body-font-size)',\n        'panneau-line-height': 'var(--bs-body-line-height)',\n        'panneau-radius-sm': 'var(--bs-border-radius-sm)',\n        'panneau-radius-md': 'var(--bs-border-radius)',\n        'panneau-radius-lg': 'var(--bs-border-radius-lg)',\n        'panneau-radius-full': 'var(--bs-border-radius-pill)',\n        'panneau-border-width': 'var(--bs-border-width)',\n        'panneau-shadow-sm': 'var(--bs-box-shadow-sm)',\n        'panneau-shadow-md': 'var(--bs-box-shadow)',\n        'panneau-shadow-lg': 'var(--bs-box-shadow-lg)',\n        // Bootstrap 5.3 declares its component variables (--bs-btn-*, --bs-card-*) on the classes\n        // of its components, out of reach: components map to the root variables those default to.\n        'panneau-heading-color': 'var(--bs-heading-color)',\n        'panneau-badge-radius': 'var(--bs-border-radius)',\n        'panneau-card-radius': 'var(--bs-border-radius)',\n        'panneau-card-border-color': 'var(--bs-border-color-translucent)',\n        'panneau-popover-radius': 'var(--bs-border-radius)',\n        'panneau-popover-border-color': 'var(--bs-border-color-translucent)',\n        'panneau-tooltip-bg': 'var(--bs-emphasis-color)',\n        'panneau-tooltip-color': 'var(--bs-body-bg)',\n        'panneau-tooltip-radius': 'var(--bs-border-radius)',\n    },\n    // Bootstrap's theme colors as tones: accent is primary, and primary and secondary are there by\n    // their Bootstrap names (declare them in PanneauTones to use them).\n    tones: {\n        accent: bootstrapTone('primary'),\n        primary: bootstrapTone('primary'),\n        secondary: bootstrapTone('secondary'),\n    },\n    // Bootstrap's sizes of controls are those of the comfortable density: the others keep Panneau's.\n    densities: {\n        comfortable: {\n            'panneau-font-size-control': 'var(--bs-body-font-size)',\n            'panneau-control-height': 'calc(1.5em + 0.75rem + 2 * var(--bs-border-width))',\n            'panneau-control-height-sm': 'calc(1.5em + 0.5rem + 2 * var(--bs-border-width))',\n            'panneau-control-padding-x': '0.75rem',\n        },\n    },\n} satisfies ThemeDefinition;\n"],"mappings":";;;;;;;AAUA,SAAgB,cACZ,OACA,EAAE,YAAY,sBAA8C,CAAC,GACnD;CACV,OAAO;EACH,MAAM,YAAY,MAAK;EACvB,QAAQ,YAAY,MAAK;EACzB,QAAQ,YAAY,MAAK;EACzB,SAAS,YAAY,MAAK;EAC1B,OAAO,YAAY,MAAK;EACxB,YAAY,+BAA+B,MAAK;EAChD;CACJ;AACJ;;;;;;AAOA,IAAa,iBAAwB;CACjC,OAAO;CACP,QAAQ;EACJ,oBAAoB;EACpB,yBAAyB;EACzB,gCAAgC;EAChC,gCAAgC;EAChC,uBAAuB;EACvB,yBAAyB;EACzB,sBAAsB;EACtB,4BAA4B;EAC5B,sBAAsB;EACtB,wBAAwB;EACxB,gCAAgC;EAChC,wBAAwB;EACxB,8BAA8B;EAC9B,6BAA6B;EAC7B,+BAA+B;EAC/B,uBAAuB;EACvB,wBAAwB;EACxB,+BAA+B;EAC/B,+BAA+B;EAC/B,8BAA8B;EAC9B,oCAAoC;EACpC,mCAAmC;EACnC,yBAAyB;EACzB,gCAAgC;EAChC,gCAAgC;EAChC,+BAA+B;EAC/B,qCAAqC;EACrC,oCAAoC;EACpC,yBAAyB;EACzB,gCAAgC;EAChC,gCAAgC;EAChC,+BAA+B;EAC/B,qCAAqC;EAErC,oCAAoC;EACpC,sBAAsB;EACtB,6BAA6B;EAC7B,6BAA6B;EAC7B,4BAA4B;EAC5B,kCAAkC;EAClC,iCAAiC;EACjC,4BAA4B;EAC5B,4BAA4B;EAC5B,wBAAwB;EACxB,uBAAuB;EACvB,qBAAqB;EACrB,qBAAqB;EACrB,qBAAqB;EACrB,uBAAuB;EACvB,wBAAwB;EACxB,qBAAqB;EACrB,qBAAqB;EACrB,qBAAqB;EAGrB,yBAAyB;EACzB,wBAAwB;EACxB,uBAAuB;EACvB,6BAA6B;EAC7B,0BAA0B;EAC1B,gCAAgC;EAChC,sBAAsB;EACtB,yBAAyB;EACzB,0BAA0B;CAC9B;CAGA,OAAO;EACH,QAAQ,cAAc,SAAS;EAC/B,SAAS,cAAc,SAAS;EAChC,WAAW,cAAc,WAAW;CACxC;CAEA,WAAW,EACP,aAAa;EACT,6BAA6B;EAC7B,0BAA0B;EAC1B,6BAA6B;EAC7B,6BAA6B;CACjC,EACJ;AACJ"}

package/dist/theme/chartColors.d.ts

@@ -0,0 +1,23 @@
+/** The number of categorical chart colors: series beyond it reuse them in order. */
+export declare const CHART_CATEGORICAL_COUNT = 8;
+/** The number of steps of the sequential chart ramp. */
+export declare const CHART_SEQUENTIAL_COUNT = 5;
+/**
+ * The colors of charts, as CSS variables for `fill` and `stroke`: they follow the theme, the color
+ * scheme and the scope of the chart. Dashboard charts use only these.
+ *
+ * - `categorical(index)`: the color of a series, in a fixed order (`index` from 0), repeating after
+ *   8. Each one reaches 3:1 against the surface and stays distinct with color vision deficiencies.
+ * - `sequential(step)`: a step from 1 (low) to 5 (high) of a ramp, for quantities.
+ * - `diverging`: two colors around a neutral midpoint, for values above and below a reference.
+ */
+export declare const chartColors: Readonly<{
+    categorical: (index: number) => string;
+    sequential: (step: 1 | 2 | 3 | 4 | 5) => string;
+    diverging: Readonly<{
+        negative: "var(--panneau-chart-diverging-negative)";
+        neutral: "var(--panneau-chart-diverging-neutral)";
+        positive: "var(--panneau-chart-diverging-positive)";
+    }>;
+}>;
+//# sourceMappingURL=chartColors.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"chartColors.d.ts","sourceRoot":"","sources":["../../src/theme/chartColors.ts"],"names":[],"mappings":"AAAA,oFAAoF;AACpF,eAAO,MAAM,uBAAuB,IAAI,CAAC;AAEzC,wDAAwD;AACxD,eAAO,MAAM,sBAAsB,IAAI,CAAC;AAExC;;;;;;;;GAQG;AACH,eAAO,MAAM,WAAW;yBACC,MAAM,KAAG,MAAM;uBAEjB,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,KAAG,MAAM;;;;;;EAM/C,CAAC"}