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

package/dist/root/PanneauRoot.css

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

package/dist/root/PanneauRoot.d.ts

@@ -1,10 +1,25 @@
 import { type HTMLAttributes, type ReactNode } from 'react';
-import { type ColorScheme, type Theme } from '../theme/theme';
+import { type NamedIconLoader } from '../icon/namedIcons';
+import { type ColorScheme, type Density, type Theme } from '../theme/theme';
 export interface PanneauRootProps extends HTMLAttributes<HTMLDivElement> {
-    /** Tokens that override the default theme: `bootstrapTheme`, or a project's own. */
+    /**
+     * Tokens, tones, variants and fonts that override the default theme: `bootstrapTheme`, or a
+     * project's own (`defineTheme()`).
+     */
     theme?: Theme | null;
     /** Defaults to `light`. `auto` follows the system setting. */
     colorScheme?: ColorScheme;
+    /**
+     * How much room controls and rows take: `compact`, `comfortable` or `touch`. Defaults to
+     * `auto`: `touch` on touch screens, `comfortable` otherwise.
+     */
+    density?: Density;
+    /**
+     * Loads the icons that definitions name (`"icon": "send"`), for `getNamedIcon()`: pass
+     * `lucideIconLoader` from `@panneau/ui/named-icons`, or a loader of only the icons the app
+     * uses. Without it, named icons render an empty space.
+     */
+    iconLoader?: NamedIconLoader | null;
     /**
      * Locale of dates and numbers in React Aria components. Defaults to the react-intl locale, or
      * to the browser's without an `IntlProvider`.
@@ -17,8 +32,24 @@ export interface PanneauRootProps extends HTMLAttributes<HTMLDivElement> {
     locale?: string;
     children?: ReactNode;
 }
+/** The color scheme and density in effect, which a `ThemeScope` inherits when it doesn't set them. */
+export declare const ScopeContext: import("react").Context<{
+    colorScheme: ColorScheme;
+    density: Density;
+}>;
+/** Gives overlays a container: that of a root, or of a scope. */
+export declare const PortalProvider: import("react").Provider<Element | null | undefined>;
+/**
+ * The `<style>` and `<link>` elements of a theme: its CSS, scoped to `data-panneau-theme`, and its
+ * fonts. React hoists them to the head and adds each once, however many roots or scopes use it.
+ * Returns the scope of the theme too, for `data-panneau-theme`.
+ */
+export declare function useThemeStyles(theme: Theme | null): {
+    scope?: string;
+    styles: ReactNode;
+};
 /**
- * The element overlays render into: the closest `PanneauRoot`'s, or `undefined` for the body
+ * The element overlays render into: the closest `PanneauRoot`'s or `ThemeScope`'s, or `undefined` for the body
  * without a root. It is `null` during the first render of a root: overlays wait for it, since
  * React Aria hides everything outside of a modal from assistive technologies when it opens.
  */
@@ -30,5 +61,5 @@ export declare function usePortalContainer(): Element | null | undefined;
  * any token with its own class on the root. Without an `IntlProvider` above it, it provides one
  * with Panneau's messages in its `locale`.
  */
-export declare function PanneauRoot({ theme, colorScheme, locale, className, children, ...props }: PanneauRootProps): import("react").JSX.Element;
+export declare function PanneauRoot({ theme, colorScheme, density, iconLoader, locale, className, children, ...props }: PanneauRootProps): import("react").JSX.Element;
 //# sourceMappingURL=PanneauRoot.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"PanneauRoot.d.ts","sourceRoot":"","sources":["../../src/root/PanneauRoot.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,cAAc,EAAE,KAAK,SAAS,EAAgC,MAAM,OAAO,CAAC;AAM1F,OAAO,EAAE,KAAK,WAAW,EAAE,KAAK,KAAK,EAA2B,MAAM,gBAAgB,CAAC;AAKvF,MAAM,WAAW,gBAAiB,SAAQ,cAAc,CAAC,cAAc,CAAC;IACpE,oFAAoF;IACpF,KAAK,CAAC,EAAE,KAAK,GAAG,IAAI,CAAC;IACrB,8DAA8D;IAC9D,WAAW,CAAC,EAAE,WAAW,CAAC;IAC1B;;;;;;;;OAQG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,QAAQ,CAAC,EAAE,SAAS,CAAC;CACxB;AAKD;;;;GAIG;AACH,wBAAgB,kBAAkB,IAAI,OAAO,GAAG,IAAI,GAAG,SAAS,CAE/D;AA2BD;;;;;;GAMG;AACH,wBAAgB,WAAW,CAAC,EACxB,KAAY,EACZ,WAAqB,EACrB,MAAM,EACN,SAAS,EACT,QAAQ,EACR,GAAG,KAAK,EACX,EAAE,gBAAgB,+BAqClB"}
+{"version":3,"file":"PanneauRoot.d.ts","sourceRoot":"","sources":["../../src/root/PanneauRoot.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,cAAc,EAAE,KAAK,SAAS,EAAgC,MAAM,OAAO,CAAC;AAM1F,OAAO,EAAE,KAAK,eAAe,EAA0B,MAAM,oBAAoB,CAAC;AAElF,OAAO,EACH,KAAK,WAAW,EAChB,KAAK,OAAO,EACZ,KAAK,KAAK,EAGb,MAAM,gBAAgB,CAAC;AAKxB,MAAM,WAAW,gBAAiB,SAAQ,cAAc,CAAC,cAAc,CAAC;IACpE;;;OAGG;IACH,KAAK,CAAC,EAAE,KAAK,GAAG,IAAI,CAAC;IACrB,8DAA8D;IAC9D,WAAW,CAAC,EAAE,WAAW,CAAC;IAC1B;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;;;OAIG;IACH,UAAU,CAAC,EAAE,eAAe,GAAG,IAAI,CAAC;IACpC;;;;;;;;OAQG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,QAAQ,CAAC,EAAE,SAAS,CAAC;CACxB;AAKD,sGAAsG;AACtG,eAAO,MAAM,YAAY;iBAAgC,WAAW;aAAW,OAAO;EAGpF,CAAC;AAEH,iEAAiE;AACjE,eAAO,MAAM,cAAc,sDAAyB,CAAC;AAErD;;;;GAIG;AACH,wBAAgB,cAAc,CAAC,KAAK,EAAE,KAAK,GAAG,IAAI,GAAG;IAAE,KAAK,CAAC,EAAE,MAAM,CAAC;IAAC,MAAM,EAAE,SAAS,CAAA;CAAE,CAwBzF;AAED;;;;GAIG;AACH,wBAAgB,kBAAkB,IAAI,OAAO,GAAG,IAAI,GAAG,SAAS,CAE/D;AA2BD;;;;;;GAMG;AACH,wBAAgB,WAAW,CAAC,EACxB,KAAY,EACZ,WAAqB,EACrB,OAAgB,EAChB,UAAiB,EACjB,MAAM,EACN,SAAS,EACT,QAAQ,EACR,GAAG,KAAK,EACX,EAAE,gBAAgB,+BAsClB"}

package/dist/root/PanneauRoot.js

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

package/dist/root/PanneauRoot.js.map

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

package/dist/root/PanneauRoot.module.js

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