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

package/README.md

@@ -15,24 +15,282 @@ import { Button, PanneauRoot, TextInput, bootstrapTheme } from '@panneau/ui';
 </PanneauRoot>;
 ```
 
-| Export                | Content                                                                                           |
-| --------------------- | ------------------------------------------------------------------------------------------------- |
-| `@panneau/ui`         | `PanneauRoot`, themes, the primitives, `Icon`, `getNamedIcon()`, `useToast()`, `usePanneauIntl()` |
-| `@panneau/ui/locales` | Deprecated: the UI messages by locale, `en` and `fr`. Use `@panneau/intl`                         |
+| Export                    | Content                                                                                                 |
+| ------------------------- | ------------------------------------------------------------------------------------------------------- |
+| `@panneau/ui`             | `PanneauRoot`, themes, the primitives, `Icon`, `getNamedIcon()`, `useToast()`, `usePanneauIntl()`       |
+| `@panneau/ui/named-icons` | `lucideIconLoader`: loads any Lucide icon by name, for `PanneauRoot`'s `iconLoader`                     |
+| `@panneau/ui/theme`       | Themes as data, without components or CSS, for Node: `defineTheme()`, `checkTheme()`, `bootstrapTheme`… |
+| `@panneau/ui/locales`     | Deprecated: the UI messages by locale, `en` and `fr`. Use `@panneau/intl`                               |
 
 ## Root, tokens and themes
 
 Every Panneau interface renders inside a `PanneauRoot`. It scopes the base stylesheet and the design tokens (`--panneau-*` CSS variables) to its element: Panneau adds no global CSS to the page. Overlays (dialogs, popovers, menus, tooltips) and toasts render inside it too.
 
 - `colorScheme`: `light` (default), `dark`, or `auto`, which follows the system.
-- `theme`: tokens that override the default theme. `bootstrapTheme` follows a site's Bootstrap 5.3 variables and color mode.
+- `density`: `compact`, `comfortable`, `touch`, or `auto` (default), which is `touch` on touch screens and `comfortable` otherwise. See [Density](#density).
+- `theme`: tokens, tones and variants that override the default theme (see [Defining themes](#defining-themes)). `bootstrapTheme` follows a site's Bootstrap 5.3 variables and color mode.
 - A project can also override any token with its own class on the root: `.my-panneau { --panneau-color-accent: #0a58ca; }`.
 
 The default theme and the icon set are explained in [decision 0020](../../docs/decisions/0020-default-theme-and-icons.md).
 
+### Scopes
+
+`ThemeScope` applies a theme, a color scheme or a density to part of the page, like `data-bs-theme` on any element, without a new root:
+
+```tsx
+<PanneauRoot theme={brand}>
+    <ThemeScope as="aside" colorScheme="dark">
+        <Navigation />
+    </ThemeScope>
+    <ThemeScope density="compact">
+        <ListView />
+    </ThemeScope>
+</PanneauRoot>
+```
+
+What a scope doesn't set comes from around it: a scope with only a density keeps the colors of the root's theme. Overlays opened inside a scope (dialogs, popovers, menus) render in its own container and keep its tokens. Custom color schemes, beyond light and dark, are themes applied to a scope.
+
+### Component tokens
+
+Every component reads its own tokens, `--panneau-<component>-<token>`, which default to semantic tokens. Set one to restyle a single component, in a theme, on the root, or on any element around the components:
+
+```css
+.my-panneau {
+    --panneau-badge-radius: var(--panneau-radius-sm); /* square badges, nothing else changes */
+}
+
+.my-toolbar {
+    --panneau-button-padding-x: var(--panneau-space-2);
+}
+```
+
+`componentTokens` lists every component token and its default, by component, and `ComponentTokenName` is their type. Some tokens style parts that several components share:
+
+- `input`: the box of text inputs, selects, combo boxes and pickers;
+- `field`: labels, descriptions and errors;
+- `list-box`: options of selects, combo boxes and menus;
+- `calendar`.
+
+### Tones and appearances
+
+Components with a color take a `tone`, like Bootstrap's theme colors: `neutral`, `accent`, `success`, `warning`, `danger` and `info` are built in. `Button`, `Badge` and `Alert` also take an `appearance` (`solid`, `outline`, `subtle`, and `ghost` for buttons):
+
+```tsx
+<Button tone="accent">Save</Button>
+<Button tone="danger" appearance="outline">Remove</Button>
+<Badge tone="success">Published</Badge>
+<Alert tone="warning" appearance="solid" title="Scheduled" />
+```
+
+The `variant` values of `Button` (`primary`, `secondary`, `ghost`, `danger`) are deprecated aliases of a tone and an appearance.
+
+A theme adds tones, from one color (Panneau derives a readable text color, the hover, the subtle background and the border) or with every value, and named variants of components:
+
+```tsx
+const theme = defineTheme({
+    tones: { signal: '#f25c05' },
+    components: {
+        badge: { variants: { tag: { 'panneau-badge-radius': 'var(--panneau-radius-sm)' } } },
+    },
+});
+
+declare module '@panneau/ui' {
+    interface PanneauTones {
+        signal: true;
+    }
+    interface BadgeVariants {
+        tag: true;
+    }
+}
+
+<Badge tone="signal" variant="tag">
+    Live
+</Badge>;
+```
+
+`checkTheme(theme)` reports the colors of a theme that miss their contrast ratio (4.5:1 for text, 3:1 for control borders), like Bootstrap's `$min-contrast-ratio`. It follows references to the theme's palette and tokens.
+
+### Defining themes
+
+`defineTheme()` declares a theme. TypeScript checks the name of every token, semantic or component, and the console reports unknown names in Panneau's namespaces (`panneau-color-txt`), such as typos in a theme loaded from JSON. A theme can name its raw colors once in a `palette`, written as `--panneau-palette-<name>`, and build on other themes with `extends`:
+
+```ts
+import { bootstrapTheme, defineTheme } from '@panneau/ui';
+
+const brand = defineTheme({
+    label: 'Brand',
+    palette: { orange: '#f25c05', ink: '#1c1917' },
+    tokens: {
+        'panneau-color-accent': 'var(--panneau-palette-ink)',
+        'panneau-button-radius': '0',
+    },
+    dark: { 'panneau-color-accent': '#fafaf9' },
+    tones: { signal: 'var(--panneau-palette-orange)' },
+});
+
+// A variation: the same theme, more compact.
+const compact = defineTheme({ extends: brand, tokens: { 'panneau-control-height': '2rem' } });
+
+// The brand theme, on a site that uses Bootstrap.
+const onBootstrap = defineTheme({ extends: [bootstrapTheme, brand] });
+```
+
+Values merge in this order, each overriding the ones before: the default theme, the themes a theme `extends` (in order), the theme itself, then a project's own class on the root. A token set in `tokens` but not in `dark` applies to both schemes, so it also replaces the dark value of the themes it extends. `mergeThemes()` merges themes the same way.
+
+`defineTheme()` returns a plain `Theme`: themes are data. They can be written as JSON files, with the [`theme.schema.json`](../protocol/schema/theme.schema.json) of `@panneau/protocol`, registered by plugins of `@panneau/core`, and carried by the definition, whose `theme` extends themes of plugins by id. Tokens of a project's own components are declared in `PanneauTokens`:
+
+```ts
+declare module '@panneau/ui' {
+    interface PanneauTokens {
+        'panneau-map-marker-color': true;
+    }
+}
+```
+
+`SEMANTIC_TOKENS` lists the semantic tokens, `componentTokens` the component tokens.
+
+### Typography and fonts
+
+The theme has four font roles: `--panneau-font-family-body`, `-heading` (the body's by default), `-display` (the heading's by default) and `-mono`. `--panneau-font-family` is a deprecated alias of the body family: set `-body` instead, so that headings follow it. `--panneau-font-numeric` (`tabular-nums`) lines up digits in stats, dates and tables.
+
+Panneau styles no element beyond its reset, since it is often embedded in someone else's page. Three components apply the typography of the theme:
+
+- `Heading`: a `level` (`h1`–`h6`, 2 by default) and a visual `size`, independent of it: `1` to `4`, `display-1` and `display-2`, like Bootstrap's `.h1` and `.display-1`. Its tokens (`--panneau-heading-1-font-size`, `--panneau-heading-display-1-font-weight`…) set the size, weight, line height and letter spacing of each size.
+- `Text`: `size` (`xs` to `xl`), `weight`, `family` (a font role), `tone`, `muted`, `numeric` and `truncate`, as a `p` by default (`as="span"`).
+- `Prose`: styles the elements of rich content inside it (headings, lists, links, quotes, code, tables), such as the output of an editor or Markdown.
+
+```tsx
+<Heading level={1} size="display-2">
+    1,204 pages
+</Heading>
+<Text muted size="sm">
+    Updated today
+</Text>
+<Prose dangerouslySetInnerHTML={{ __html: page.body }} />
+```
+
+A theme declares its fonts: font faces, written as `@font-face` rules, or a hosted stylesheet. `PanneauRoot` adds them to the page once, however many roots use the theme.
+
+```ts
+const editorial = defineTheme({
+    fonts: [
+        { family: 'Geist', src: "url(/fonts/geist.woff2) format('woff2')", weight: '100 900' },
+        { stylesheet: 'https://fonts.googleapis.com/css2?family=Fraunces:wght@600&display=swap' },
+    ],
+    tokens: {
+        'panneau-font-family-body': 'Geist, system-ui, sans-serif',
+        'panneau-font-family-heading': 'Fraunces, Georgia, serif',
+    },
+});
+```
+
+### Layout
+
+Five primitives lay out content with the space scale of the theme, without utility classes:
+
+- `Stack`: items one under the other, like Bootstrap's `.vstack`;
+- `Inline`: items side by side, wrapping when they don't fit, like `.hstack`;
+- `Grid` and `GridItem`: equal columns (`columns`), or as many as fit (`minItemWidth="16rem"`), and cells that span several columns (`span`, or `span="full"`);
+- `Container`: a centered column with a maximum width (`size`: `sm`, `md`, `lg` by default, `xl` or `full`);
+- `Divider`: a line between groups, horizontal or vertical.
+
+`gap` takes a step of the space scale (`gap={2}` is `--panneau-space-2`), and `align` and `justify` the alignment of the items. These props, `columns` and `span` are **responsive**: a value, or values by breakpoint, each applying from its breakpoint up.
+
+```tsx
+<Container>
+    <Grid columns={{ base: 1, md: 2, lg: 3 }} gap={{ base: 3, lg: 4 }}>
+        <GridItem span={{ base: 1, lg: 'full' }}>
+            <Card title="Summary" />
+        </GridItem>
+        <Card title="Pages" />
+        <Card title="Articles" />
+    </Grid>
+</Container>
+```
+
+Breakpoints (`BREAKPOINTS`) are `sm` 40rem, `md` 48rem, `lg` 64rem and `xl` 80rem, like `$grid-breakpoints`. They are widths of the nearest **size container**, not of the viewport, so that a grid in a narrow sidebar behaves as on a phone. `PanneauRoot` and `Container` are size containers, as are forms and lists. A size container takes its width from its parent, never from its content: in a flex row or a float, give the root a width, or it collapses.
+
+Responsive values are inline CSS variables, read by static rules in each container query: no styles are generated per instance.
+
+### Density
+
+A density is a set of tokens: `--panneau-control-height` and `-sm`, `--panneau-font-size-control`, `--panneau-control-padding-x` (inputs and buttons) and `--panneau-row-padding-y` (rows of tables, options of lists). The `density` of the root picks one, and the `size` props of components (`size="sm"`) stay relative to it.
+
+A theme redefines a density in `densities`. Density tokens set in `tokens` instead apply to every density, which then no longer changes them.
+
+```ts
+const roomy = defineTheme({
+    densities: {
+        comfortable: { 'panneau-control-height': '2.5rem' },
+        compact: { 'panneau-row-padding-y': '0.125rem' },
+    },
+});
+```
+
+### Chart colors
+
+Charts (dashboard widgets, reports) use only the chart tokens of the theme, in both schemes:
+
+- `--panneau-chart-categorical-1` to `-8`: series, in a fixed order;
+- `--panneau-chart-sequential-1` to `-5`: a ramp from low to high, for quantities;
+- `--panneau-chart-diverging-negative`, `-neutral` and `-positive`: values below and above a reference.
+
+`chartColors` gives them as CSS variables for `fill` and `stroke`, so that charts follow the theme, the color scheme and the scope:
+
+```tsx
+<rect fill={chartColors.categorical(index)} />
+<rect fill={chartColors.sequential(5)} />
+<rect fill={chartColors.diverging.negative} />
+```
+
+Each default categorical color reaches 3:1 against the surface (WCAG non-text contrast), and the eight stay distinct for people with protanopia, deuteranopia or tritanopia: a test checks it. `checkTheme()` runs the same checks on the chart colors a theme sets, and `checkColorDifferences(colors)` on any palette.
+
+### Checking a theme
+
+`checkTheme(theme)` reports what a theme makes hard to read: text tokens against backgrounds (4.5:1), control borders and chart colors (3:1), the text of each tone on the surface and on its subtle background, and categorical chart colors that look alike with a color vision deficiency. The `panneau-check-theme` command runs it on a JSON theme or on an export of a module, and exits with 1 when a check fails, for CI:
+
+```sh
+npx panneau-check-theme themes/brand.json
+npx panneau-check-theme src/theme.mjs --export brand --json
+```
+
+`@panneau/ui/theme` exports the theme functions without components or CSS, so that Node scripts (a build step, a backend that stores themes) can import them.
+
+### Bootstrap
+
+`bootstrapTheme` maps Panneau's tokens to the CSS variables of Bootstrap 5.3: colors, fonts, radii, shadows, the color mode (`data-bs-theme`), and the size of controls in the comfortable density. Bootstrap's theme colors become tones: `accent` is `primary`, and `primary` and `secondary` keep their names. `bootstrapTone(color)` turns any theme color of a site, custom ones included, into a tone:
+
+```ts
+const site = defineTheme({ extends: bootstrapTheme, tones: { brand: bootstrapTone('brand') } });
+```
+
+Bootstrap 5.3 declares the variables of its components (`--bs-btn-*`, `--bs-card-*`) on their classes, where Panneau's components can't read them: `bootstrapTheme` maps component tokens to the root variables those default to (`--bs-border-radius`, `--bs-border-color-translucent`, `--bs-heading-color`).
+
+### Classes
+
+Class names are stable and readable, without a hash, like Bootstrap's: target them in a project's CSS.
+
+- The root of every component has `panneau-<component>`: `.panneau-button`, `.panneau-badge`, `.panneau-text-input`, `.panneau-card`.
+- Its parts and modifiers are `panneau-<component>-<name>`: `.panneau-card-header`, `.panneau-button-sm`.
+- States use standard attributes: ARIA (`[aria-invalid]`, `[aria-expanded]`, `[aria-selected]`…) and the state attributes of React Aria Components (`[data-hovered]`, `[data-focus-visible]`…).
+
+```css
+.my-panneau .panneau-badge {
+    letter-spacing: 0.02em;
+}
+
+.my-panneau .panneau-text-input [aria-invalid='true'] {
+    background-color: #fff5f5;
+}
+```
+
+[`api/ui.classes.md`](api/ui.classes.md) lists every class. They are public API: a rename is a breaking change.
+
+The theme model is described in [decision 0024](../../docs/decisions/0024-theme-model.md).
+
 ## Primitives
 
-`Button`, `IconButton`, `TextInput`, `TextArea`, `NumberInput`, `Select` (single or multiple), `ComboBox`, `Checkbox`, `Switch`, `RadioGroup`, `DatePicker`, `TimeInput`, `Fieldset`, `Dialog`, `Popover`, `Menu`, `Tabs`, `Tooltip`, toasts (`useToast()`), `Alert`, `Badge`, `Spinner`, `Card`, `Disclosure` and `Icon`.
+`Heading`, `Text`, `Prose`, `Stack`, `Inline`, `Grid`, `Container`, `Divider`, `Button`, `IconButton`, `TextInput`, `TextArea`, `NumberInput`, `Select` (single or multiple), `ComboBox`, `Checkbox`, `Switch`, `RadioGroup`, `DatePicker`, `TimeInput`, `Fieldset`, `Dialog`, `Popover`, `Menu`, `Tabs`, `Tooltip`, toasts (`useToast()`), `Alert`, `Badge`, `Spinner`, `Card`, `Disclosure` and `Icon`.
 
 - Every component accepts `className`, and `xxxClassName` props for its inner elements (`labelClassName`, `inputClassName`…).
 - Labelled controls take `label`, `description` and `errors` (a list of messages: any message makes the control invalid and describes it).
@@ -42,18 +300,23 @@ The default theme and the icon set are explained in [decision 0020](../../docs/d
 
 Components take icons as components: any Lucide icon (`icon={Pencil}`), or a component with the same props.
 
-Definitions name their icons (`"icon": "send"`, a name of [lucide.dev/icons](https://lucide.dev/icons)). `getNamedIcon(name)` turns a name into an icon component that goes wherever an icon component goes:
+Definitions name their icons (`"icon": "send"`, a name of [lucide.dev/icons](https://lucide.dev/icons)). `getNamedIcon(name)` turns a name into an icon component that goes wherever an icon component goes, and loads it with the `iconLoader` of `PanneauRoot`:
 
 ```tsx
-import { Button, getNamedIcon } from '@panneau/ui';
+import { Button, PanneauRoot, getNamedIcon } from '@panneau/ui';
+import { lucideIconLoader } from '@panneau/ui/named-icons';
 
-<Button icon={getNamedIcon('send')}>Send</Button>;
+<PanneauRoot iconLoader={lucideIconLoader}>
+    <Button icon={getNamedIcon('send')}>Send</Button>
+</PanneauRoot>;
 ```
 
-- It loads that one icon the first time it renders, through Lucide's dynamic imports, and renders an empty space of the same size until then. The list of names is loaded on demand too: the whole set is never in the bundle, but bundlers emit one small chunk per icon.
-- It returns the same component for the same name. A name Lucide doesn't have renders nothing, with a warning in the console.
-- `loadNamedIcon(name)` loads an icon ahead of time, and resolves with its component (or `null`).
-- **Vite apps, in development:** add `optimizeDeps: { exclude: ['lucide-react/dynamicIconImports.mjs'] }` to the Vite config. When Vite optimizes it together with `lucide-react`, it splits `lucide-react` into one chunk per icon (about 1,900 requests on every page load). Production builds are not affected.
+- **Loading icons by name is opt-in.** `lucideIconLoader` loads any Lucide icon, one chunk per icon the first time it renders, but bundlers emit a chunk for every Lucide icon (about 1,900) and the map of them in the runtime of every page. So it lives in its own entry point, `@panneau/ui/named-icons`: apps that only pass icon components (`icon={Send}`, `actionIcons`) don't pay for it.
+- An app can instead load only the icons its definitions use: `iconLoader={(name) => Promise.resolve(({ send: Send, archive: Archive })[name] ?? null)}`.
+- Without a loader, a named icon renders an empty space of the same size, with one warning in the console.
+- `getNamedIcon()` returns the same component for the same name, renders an empty space while the icon loads, and nothing for a name the loader doesn't know (with a warning).
+- `loadNamedIcon(name, loader)` loads an icon ahead of time, and resolves with its component (or `null`).
+- **Vite apps, in development:** with `lucideIconLoader`, add `optimizeDeps: { exclude: ['lucide-react/dynamicIconImports.mjs'] }` to the Vite config. When Vite optimizes it together with `lucide-react`, it splits `lucide-react` into one chunk per icon (about 1,900 requests on every page load). Production builds are not affected.
 
 ## Messages
 

package/bin/check-theme.js

@@ -0,0 +1,5 @@
+#!/usr/bin/env node
+// Checks the contrast of a theme: `panneau-check-theme theme.json`. See `--help`.
+import { runCheckTheme } from '../dist/theme/cli.js';
+
+process.exitCode = await runCheckTheme(process.argv.slice(2));

package/dist/alert/Alert.css

@@ -1,56 +1,42 @@
-.panneau-alert-YltdMY {
+.panneau-alert {
     display: flex;
     align-items: flex-start;
-    gap: var(--panneau-space-3);
-    padding: var(--panneau-space-3) var(--panneau-space-4);
+    gap: var(--panneau-alert-gap, var(--panneau-space-3));
+    padding: var(--panneau-alert-padding-y, var(--panneau-space-3))
+        var(--panneau-alert-padding-x, var(--panneau-space-4));
     color: var(--panneau-color-text);
-    background-color: var(--panneau-color-surface-sunken);
-    border: var(--panneau-border-width) solid var(--panneau-color-border);
-    border-radius: var(--panneau-radius-md);
+    border: var(--panneau-alert-border-width, var(--panneau-border-width)) solid transparent;
+    border-radius: var(--panneau-alert-radius, var(--panneau-radius-md));
 }
 
-.panneau-success-Z7VQdb {
-    background-color: var(--panneau-color-success-subtle);
-    border-color: var(--panneau-color-success-border);
-}
-
-.panneau-danger-7fFkRR {
-    background-color: var(--panneau-color-danger-subtle);
-    border-color: var(--panneau-color-danger-border);
-}
-
-.panneau-warning-xvkEcQ {
-    background-color: var(--panneau-color-warning-subtle);
-    border-color: var(--panneau-color-warning-border);
-}
-
-.panneau-info-beWi9v {
-    background-color: var(--panneau-color-info-subtle);
-    border-color: var(--panneau-color-info-border);
-}
-
-.panneau-icon-blRAxm {
+.panneau-alert-icon {
     margin-top: 0.125rem;
-    color: var(--panneau-color-text-muted);
+    color: var(--panneau-tone-text);
 }
 
-.panneau-success-Z7VQdb .panneau-icon-blRAxm {
-    color: var(--panneau-color-success);
+/* Appearances: they read the --panneau-tone-* variables of the tone class (decision 0024). */
+
+.panneau-alert-subtle {
+    background-color: var(--panneau-tone-subtle);
+    border-color: var(--panneau-tone-border);
 }
 
-.panneau-danger-7fFkRR .panneau-icon-blRAxm {
-    color: var(--panneau-color-danger);
+.panneau-alert-outline {
+    background-color: var(--panneau-color-surface);
+    border-color: var(--panneau-tone-outline);
 }
 
-.panneau-warning-xvkEcQ .panneau-icon-blRAxm {
-    color: var(--panneau-color-warning);
+.panneau-alert-solid {
+    color: var(--panneau-tone-solid-text);
+    background-color: var(--panneau-tone-solid);
+    border-color: var(--panneau-tone-solid);
 }
 
-.panneau-info-beWi9v .panneau-icon-blRAxm {
-    color: var(--panneau-color-info);
+.panneau-alert-solid .panneau-alert-icon {
+    color: inherit;
 }
 
-.panneau-content-dNGM-n {
+.panneau-alert-content {
     display: flex;
     flex: 1 1 auto;
     flex-direction: column;
@@ -58,21 +44,21 @@
     min-width: 0;
 }
 
-.panneau-title-uRgCXb {
-    font-weight: var(--panneau-font-weight-bold);
+.panneau-alert-title {
+    font-weight: var(--panneau-alert-title-font-weight, var(--panneau-font-weight-bold));
 }
 
-.panneau-body-2meig0 {
+.panneau-alert-body {
     overflow-wrap: anywhere;
 }
 
-.panneau-actions-MXSoKc {
+.panneau-alert-actions {
     display: flex;
     flex-wrap: wrap;
     gap: var(--panneau-space-2);
     margin-top: var(--panneau-space-2);
 }
 
-.panneau-dismiss-LWaGfl {
+.panneau-alert-dismiss {
     margin: calc(-1 * var(--panneau-space-1)) calc(-1 * var(--panneau-space-2)) 0 0;
 }

package/dist/alert/Alert.d.ts

@@ -1,12 +1,26 @@
 import type { ReactNode, Ref } from 'react';
 import { type IconComponent } from '../icon/Icon';
-export type AlertTone = 'neutral' | 'success' | 'danger' | 'warning' | 'info';
+import type { Tone } from '../theme/tones';
+/** @deprecated Use `Tone`. */
+export type AlertTone = Tone;
+/** How an alert uses its tone. */
+export type AlertAppearance = 'subtle' | 'outline' | 'solid';
+/**
+ * Named variants of `Alert`, registered by a theme (`components.alert.variants`). Declare them
+ * here so that `variant="banner"` type-checks.
+ */
+export interface AlertVariants {
+}
 export interface AlertProps {
     /** Defaults to `neutral`. */
-    tone?: AlertTone;
+    tone?: Tone;
+    /** Defaults to `subtle`. */
+    appearance?: AlertAppearance;
+    /** A named variant of the theme. */
+    variant?: keyof AlertVariants & string;
     title?: ReactNode;
     children?: ReactNode;
-    /** Replaces the icon of the tone. `null` hides it. */
+    /** Replaces the icon of the tone (an info icon for tones added by a theme). `null` hides it. */
     icon?: IconComponent | null;
     /** Buttons under the message. */
     actions?: ReactNode;
@@ -26,5 +40,5 @@ export interface AlertProps {
     bodyClassName?: string;
 }
 /** A message inside the page: an error summary, a warning, a confirmation. */
-export declare function Alert({ tone, title, children, icon, actions, onDismiss, role, id, tabIndex, ref, className, titleClassName, bodyClassName, }: AlertProps): import("react").JSX.Element;
+export declare function Alert({ tone, appearance, variant, title, children, icon, actions, onDismiss, role, id, tabIndex, ref, className, titleClassName, bodyClassName, }: AlertProps): import("react").JSX.Element;
 //# sourceMappingURL=Alert.d.ts.map

package/dist/alert/Alert.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Alert.d.ts","sourceRoot":"","sources":["../../src/alert/Alert.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAG5C,OAAO,EAAQ,KAAK,aAAa,EAAE,MAAM,cAAc,CAAC;AAMxD,MAAM,MAAM,SAAS,GAAG,SAAS,GAAG,SAAS,GAAG,QAAQ,GAAG,SAAS,GAAG,MAAM,CAAC;AAU9E,MAAM,WAAW,UAAU;IACvB,6BAA6B;IAC7B,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,sDAAsD;IACtD,IAAI,CAAC,EAAE,aAAa,GAAG,IAAI,CAAC;IAC5B,iCAAiC;IACjC,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB,4BAA4B;IAC5B,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;IACvB;;;OAGG;IACH,IAAI,CAAC,EAAE,OAAO,GAAG,QAAQ,CAAC;IAC1B,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,yEAAyE;IACzE,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,GAAG,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAC;IAC1B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,aAAa,CAAC,EAAE,MAAM,CAAC;CAC1B;AAED,8EAA8E;AAC9E,wBAAgB,KAAK,CAAC,EAClB,IAAgB,EAChB,KAAK,EACL,QAAQ,EACR,IAAI,EACJ,OAAO,EACP,SAAS,EACT,IAAI,EACJ,EAAE,EACF,QAAQ,EACR,GAAG,EACH,SAAS,EACT,cAAc,EACd,aAAa,GAChB,EAAE,UAAU,+BAmCZ"}
+{"version":3,"file":"Alert.d.ts","sourceRoot":"","sources":["../../src/alert/Alert.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAG5C,OAAO,EAAQ,KAAK,aAAa,EAAE,MAAM,cAAc,CAAC;AAIxD,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,gBAAgB,CAAC;AAI3C,8BAA8B;AAC9B,MAAM,MAAM,SAAS,GAAG,IAAI,CAAC;AAE7B,kCAAkC;AAClC,MAAM,MAAM,eAAe,GAAG,QAAQ,GAAG,SAAS,GAAG,OAAO,CAAC;AAE7D;;;GAGG;AAEH,MAAM,WAAW,aAAa;CAAG;AAUjC,MAAM,WAAW,UAAU;IACvB,6BAA6B;IAC7B,IAAI,CAAC,EAAE,IAAI,CAAC;IACZ,4BAA4B;IAC5B,UAAU,CAAC,EAAE,eAAe,CAAC;IAC7B,oCAAoC;IACpC,OAAO,CAAC,EAAE,MAAM,aAAa,GAAG,MAAM,CAAC;IACvC,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,gGAAgG;IAChG,IAAI,CAAC,EAAE,aAAa,GAAG,IAAI,CAAC;IAC5B,iCAAiC;IACjC,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB,4BAA4B;IAC5B,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;IACvB;;;OAGG;IACH,IAAI,CAAC,EAAE,OAAO,GAAG,QAAQ,CAAC;IAC1B,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,yEAAyE;IACzE,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,GAAG,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAC;IAC1B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,aAAa,CAAC,EAAE,MAAM,CAAC;CAC1B;AAED,8EAA8E;AAC9E,wBAAgB,KAAK,CAAC,EAClB,IAAgB,EAChB,UAAqB,EACrB,OAAO,EACP,KAAK,EACL,QAAQ,EACR,IAAI,EACJ,OAAO,EACP,SAAS,EACT,IAAI,EACJ,EAAE,EACF,QAAQ,EACR,GAAG,EACH,SAAS,EACT,cAAc,EACd,aAAa,GAChB,EAAE,UAAU,+BA0CZ"}

package/dist/alert/Alert.js

@@ -2,6 +2,7 @@ import { cx } from "../utils/cx.js";
 import { Icon } from "../icon/Icon.js";
 import { messages } from "../intl/messages.js";
 import { usePanneauIntl } from "../intl/usePanneauIntl.js";
+import { toneClass } from "../theme/toneClass.js";
 import { IconButton } from "../icon-button/IconButton.js";
 import Alert_module_default from "./Alert.module.js";
 import { CircleAlert, CircleCheck, Info, TriangleAlert, X } from "lucide-react";
@@ -15,15 +16,15 @@ var TONE_ICONS = {
 	info: Info
 };
 /** A message inside the page: an error summary, a warning, a confirmation. */
-function Alert({ tone = "neutral", title, children, icon, actions, onDismiss, role, id, tabIndex, ref, className, titleClassName, bodyClassName }) {
+function Alert({ tone = "neutral", appearance = "subtle", variant, title, children, icon, actions, onDismiss, role, id, tabIndex, ref, className, titleClassName, bodyClassName }) {
 	const intl = usePanneauIntl();
-	const shown = icon === void 0 ? TONE_ICONS[tone] : icon;
+	const shown = icon === void 0 ? TONE_ICONS[tone] ?? Info : icon;
 	return /* @__PURE__ */ jsxs("div", {
 		ref,
 		id,
 		role,
 		tabIndex,
-		className: cx(Alert_module_default.alert, Alert_module_default[tone], className),
+		className: cx("panneau-alert", Alert_module_default.alert, toneClass(tone), Alert_module_default[appearance], variant !== void 0 && `panneau-alert-variant-${variant}`, className),
 		children: [
 			shown !== null ? /* @__PURE__ */ jsx(Icon, {
 				icon: shown,

package/dist/alert/Alert.js.map

@@ -1 +1 @@
-{"version":3,"file":"Alert.js","names":["styles"],"sources":["../../src/alert/Alert.tsx"],"sourcesContent":["import { CircleAlert, CircleCheck, Info, TriangleAlert, X } from 'lucide-react';\nimport type { ReactNode, Ref } from 'react';\n\nimport { IconButton } from '../icon-button/IconButton';\nimport { Icon, type IconComponent } from '../icon/Icon';\nimport { messages } from '../intl/messages';\nimport { usePanneauIntl } from '../intl/usePanneauIntl';\nimport { cx } from '../utils/cx';\nimport styles from './Alert.module.css';\n\nexport type AlertTone = 'neutral' | 'success' | 'danger' | 'warning' | 'info';\n\nconst TONE_ICONS: Record<AlertTone, IconComponent> = {\n    neutral: Info,\n    success: CircleCheck,\n    danger: CircleAlert,\n    warning: TriangleAlert,\n    info: Info,\n};\n\nexport interface AlertProps {\n    /** Defaults to `neutral`. */\n    tone?: AlertTone;\n    title?: ReactNode;\n    children?: ReactNode;\n    /** Replaces the icon of the tone. `null` hides it. */\n    icon?: IconComponent | null;\n    /** Buttons under the message. */\n    actions?: ReactNode;\n    /** Shows a close button. */\n    onDismiss?: () => void;\n    /**\n     * `alert` announces the message as soon as it appears, for errors that need attention.\n     * `status` announces it politely. Without a role, it is only read in place.\n     */\n    role?: 'alert' | 'status';\n    id?: string;\n    /** Makes the alert focusable, to move focus to it (an error summary). */\n    tabIndex?: number;\n    ref?: Ref<HTMLDivElement>;\n    className?: string;\n    titleClassName?: string;\n    bodyClassName?: string;\n}\n\n/** A message inside the page: an error summary, a warning, a confirmation. */\nexport function Alert({\n    tone = 'neutral',\n    title,\n    children,\n    icon,\n    actions,\n    onDismiss,\n    role,\n    id,\n    tabIndex,\n    ref,\n    className,\n    titleClassName,\n    bodyClassName,\n}: AlertProps) {\n    const intl = usePanneauIntl();\n    const shown = icon === undefined ? TONE_ICONS[tone] : icon;\n    return (\n        <div\n            ref={ref}\n            id={id}\n            role={role}\n            tabIndex={tabIndex}\n            className={cx(styles.alert, styles[tone], className)}\n        >\n            {shown !== null ? <Icon icon={shown} size=\"lg\" className={styles.icon} /> : null}\n            <div className={styles.content}>\n                {title !== undefined && title !== null ? (\n                    <div className={cx(styles.title, titleClassName)}>{title}</div>\n                ) : null}\n                {children !== undefined && children !== null ? (\n                    <div className={cx(styles.body, bodyClassName)}>{children}</div>\n                ) : null}\n                {actions !== undefined && actions !== null ? (\n                    <div className={styles.actions}>{actions}</div>\n                ) : null}\n            </div>\n            {onDismiss !== undefined ? (\n                <IconButton\n                    icon={X}\n                    size=\"sm\"\n                    label={intl.formatMessage(messages.close)}\n                    showTooltip={false}\n                    onPress={onDismiss}\n                    className={styles.dismiss}\n                />\n            ) : null}\n        </div>\n    );\n}\n"],"mappings":";;;;;;;;;AAYA,IAAM,aAA+C;CACjD,SAAS;CACT,SAAS;CACT,QAAQ;CACR,SAAS;CACT,MAAM;AACV;;AA4BA,SAAgB,MAAM,EAClB,OAAO,WACP,OACA,UACA,MACA,SACA,WACA,MACA,IACA,UACA,KACA,WACA,gBACA,iBACW;CACX,MAAM,OAAO,eAAe;CAC5B,MAAM,QAAQ,SAAS,KAAA,IAAY,WAAW,QAAQ;CACtD,OACI,qBAAC,OAAD;EACS;EACD;EACE;EACI;EACV,WAAW,GAAGA,qBAAO,OAAOA,qBAAO,OAAO,SAAS;EALvD,UAAA;GAOK,UAAU,OAAO,oBAAC,MAAD;IAAM,MAAM;IAAO,MAAK;IAAK,WAAWA,qBAAO;GAAK,CAAA,IAAM;GAC5E,qBAAC,OAAD;IAAK,WAAWA,qBAAO;IAAvB,UAAA;KACK,UAAU,KAAA,KAAa,UAAU,OAC9B,oBAAC,OAAD;MAAK,WAAW,GAAGA,qBAAO,OAAO,cAAc;MAAI,UAAA;KAAW,CAAA,IAC9D;KACH,aAAa,KAAA,KAAa,aAAa,OACpC,oBAAC,OAAD;MAAK,WAAW,GAAGA,qBAAO,MAAM,aAAa;MAAI;KAAc,CAAA,IAC/D;KACH,YAAY,KAAA,KAAa,YAAY,OAClC,oBAAC,OAAD;MAAK,WAAWA,qBAAO;MAAU,UAAA;KAAa,CAAA,IAC9C;IACH;;GACJ,cAAc,KAAA,IACX,oBAAC,YAAD;IACI,MAAM;IACN,MAAK;IACL,OAAO,KAAK,cAAc,SAAS,KAAK;IACxC,aAAa;IACb,SAAS;IACT,WAAWA,qBAAO;GAAQ,CAAA,IAE9B;EACH;;AAEb"}
+{"version":3,"file":"Alert.js","names":["styles"],"sources":["../../src/alert/Alert.tsx"],"sourcesContent":["import { CircleAlert, CircleCheck, Info, TriangleAlert, X } from 'lucide-react';\nimport type { ReactNode, Ref } from 'react';\n\nimport { IconButton } from '../icon-button/IconButton';\nimport { Icon, type IconComponent } from '../icon/Icon';\nimport { messages } from '../intl/messages';\nimport { usePanneauIntl } from '../intl/usePanneauIntl';\nimport { toneClass } from '../theme/toneClass';\nimport type { Tone } from '../theme/tones';\nimport { cx } from '../utils/cx';\nimport styles from './Alert.module.css';\n\n/** @deprecated Use `Tone`. */\nexport type AlertTone = Tone;\n\n/** How an alert uses its tone. */\nexport type AlertAppearance = 'subtle' | 'outline' | 'solid';\n\n/**\n * Named variants of `Alert`, registered by a theme (`components.alert.variants`). Declare them\n * here so that `variant=\"banner\"` type-checks.\n */\n// eslint-disable-next-line @typescript-eslint/no-empty-object-type -- extended by projects\nexport interface AlertVariants {}\n\nconst TONE_ICONS: Partial<Record<Tone, IconComponent>> = {\n    neutral: Info,\n    success: CircleCheck,\n    danger: CircleAlert,\n    warning: TriangleAlert,\n    info: Info,\n};\n\nexport interface AlertProps {\n    /** Defaults to `neutral`. */\n    tone?: Tone;\n    /** Defaults to `subtle`. */\n    appearance?: AlertAppearance;\n    /** A named variant of the theme. */\n    variant?: keyof AlertVariants & string;\n    title?: ReactNode;\n    children?: ReactNode;\n    /** Replaces the icon of the tone (an info icon for tones added by a theme). `null` hides it. */\n    icon?: IconComponent | null;\n    /** Buttons under the message. */\n    actions?: ReactNode;\n    /** Shows a close button. */\n    onDismiss?: () => void;\n    /**\n     * `alert` announces the message as soon as it appears, for errors that need attention.\n     * `status` announces it politely. Without a role, it is only read in place.\n     */\n    role?: 'alert' | 'status';\n    id?: string;\n    /** Makes the alert focusable, to move focus to it (an error summary). */\n    tabIndex?: number;\n    ref?: Ref<HTMLDivElement>;\n    className?: string;\n    titleClassName?: string;\n    bodyClassName?: string;\n}\n\n/** A message inside the page: an error summary, a warning, a confirmation. */\nexport function Alert({\n    tone = 'neutral',\n    appearance = 'subtle',\n    variant,\n    title,\n    children,\n    icon,\n    actions,\n    onDismiss,\n    role,\n    id,\n    tabIndex,\n    ref,\n    className,\n    titleClassName,\n    bodyClassName,\n}: AlertProps) {\n    const intl = usePanneauIntl();\n    const shown = icon === undefined ? (TONE_ICONS[tone] ?? Info) : icon;\n    return (\n        <div\n            ref={ref}\n            id={id}\n            role={role}\n            tabIndex={tabIndex}\n            className={cx(\n                'panneau-alert',\n                styles.alert,\n                toneClass(tone),\n                styles[appearance],\n                variant !== undefined && `panneau-alert-variant-${variant}`,\n                className,\n            )}\n        >\n            {shown !== null ? <Icon icon={shown} size=\"lg\" className={styles.icon} /> : null}\n            <div className={styles.content}>\n                {title !== undefined && title !== null ? (\n                    <div className={cx(styles.title, titleClassName)}>{title}</div>\n                ) : null}\n                {children !== undefined && children !== null ? (\n                    <div className={cx(styles.body, bodyClassName)}>{children}</div>\n                ) : null}\n                {actions !== undefined && actions !== null ? (\n                    <div className={styles.actions}>{actions}</div>\n                ) : null}\n            </div>\n            {onDismiss !== undefined ? (\n                <IconButton\n                    icon={X}\n                    size=\"sm\"\n                    label={intl.formatMessage(messages.close)}\n                    showTooltip={false}\n                    onPress={onDismiss}\n                    className={styles.dismiss}\n                />\n            ) : null}\n        </div>\n    );\n}\n"],"mappings":";;;;;;;;;;AAyBA,IAAM,aAAmD;CACrD,SAAS;CACT,SAAS;CACT,QAAQ;CACR,SAAS;CACT,MAAM;AACV;;AAgCA,SAAgB,MAAM,EAClB,OAAO,WACP,aAAa,UACb,SACA,OACA,UACA,MACA,SACA,WACA,MACA,IACA,UACA,KACA,WACA,gBACA,iBACW;CACX,MAAM,OAAO,eAAe;CAC5B,MAAM,QAAQ,SAAS,KAAA,IAAa,WAAW,SAAS,OAAQ;CAChE,OACI,qBAAC,OAAD;EACS;EACD;EACE;EACI;EACV,WAAW,GACP,iBACAA,qBAAO,OACP,UAAU,IAAI,GACdA,qBAAO,aACP,YAAY,KAAA,KAAa,yBAAyB,WAClD,SACJ;EAZJ,UAAA;GAcK,UAAU,OAAO,oBAAC,MAAD;IAAM,MAAM;IAAO,MAAK;IAAK,WAAWA,qBAAO;GAAK,CAAA,IAAM;GAC5E,qBAAC,OAAD;IAAK,WAAWA,qBAAO;IAAvB,UAAA;KACK,UAAU,KAAA,KAAa,UAAU,OAC9B,oBAAC,OAAD;MAAK,WAAW,GAAGA,qBAAO,OAAO,cAAc;MAAI,UAAA;KAAW,CAAA,IAC9D;KACH,aAAa,KAAA,KAAa,aAAa,OACpC,oBAAC,OAAD;MAAK,WAAW,GAAGA,qBAAO,MAAM,aAAa;MAAI;KAAc,CAAA,IAC/D;KACH,YAAY,KAAA,KAAa,YAAY,OAClC,oBAAC,OAAD;MAAK,WAAWA,qBAAO;MAAU,UAAA;KAAa,CAAA,IAC9C;IACH;;GACJ,cAAc,KAAA,IACX,oBAAC,YAAD;IACI,MAAM;IACN,MAAK;IACL,OAAO,KAAK,cAAc,SAAS,KAAK;IACxC,aAAa;IACb,SAAS;IACT,WAAWA,qBAAO;GAAQ,CAAA,IAE9B;EACH;;AAEb"}

package/dist/alert/Alert.module.js

@@ -1,23 +1,21 @@
 import "./Alert.css";
 //#region src/alert/Alert.module.css
-var alert = "panneau-alert-YltdMY";
-var success = "panneau-success-Z7VQdb";
-var danger = "panneau-danger-7fFkRR";
-var warning = "panneau-warning-xvkEcQ";
-var info = "panneau-info-beWi9v";
-var icon = "panneau-icon-blRAxm";
-var content = "panneau-content-dNGM-n";
-var title = "panneau-title-uRgCXb";
-var body = "panneau-body-2meig0";
-var actions = "panneau-actions-MXSoKc";
-var dismiss = "panneau-dismiss-LWaGfl";
+var alert = "panneau-alert";
+var icon = "panneau-alert-icon";
+var subtle = "panneau-alert-subtle";
+var outline = "panneau-alert-outline";
+var solid = "panneau-alert-solid";
+var content = "panneau-alert-content";
+var title = "panneau-alert-title";
+var body = "panneau-alert-body";
+var actions = "panneau-alert-actions";
+var dismiss = "panneau-alert-dismiss";
 var Alert_module_default = {
 	alert,
-	success,
-	danger,
-	warning,
-	info,
 	icon,
+	subtle,
+	outline,
+	solid,
 	content,
 	title,
 	body,
@@ -25,6 +23,6 @@ var Alert_module_default = {
 	dismiss
 };
 //#endregion
-export { actions, alert, body, content, danger, Alert_module_default as default, dismiss, icon, info, success, title, warning };
+export { actions, alert, body, content, Alert_module_default as default, dismiss, icon, outline, solid, subtle, title };
 
 //# sourceMappingURL=Alert.module.js.map

package/dist/alert/Alert.module.js.map

@@ -1 +1 @@
-{"version":3,"file":"Alert.module.js","names":[],"sources":["../../src/alert/Alert.module.css"],"sourcesContent":[".alert {\n    display: flex;\n    align-items: flex-start;\n    gap: var(--panneau-space-3);\n    padding: var(--panneau-space-3) var(--panneau-space-4);\n    color: var(--panneau-color-text);\n    background-color: var(--panneau-color-surface-sunken);\n    border: var(--panneau-border-width) solid var(--panneau-color-border);\n    border-radius: var(--panneau-radius-md);\n}\n\n.success {\n    background-color: var(--panneau-color-success-subtle);\n    border-color: var(--panneau-color-success-border);\n}\n\n.danger {\n    background-color: var(--panneau-color-danger-subtle);\n    border-color: var(--panneau-color-danger-border);\n}\n\n.warning {\n    background-color: var(--panneau-color-warning-subtle);\n    border-color: var(--panneau-color-warning-border);\n}\n\n.info {\n    background-color: var(--panneau-color-info-subtle);\n    border-color: var(--panneau-color-info-border);\n}\n\n.icon {\n    margin-top: 0.125rem;\n    color: var(--panneau-color-text-muted);\n}\n\n.success .icon {\n    color: var(--panneau-color-success);\n}\n\n.danger .icon {\n    color: var(--panneau-color-danger);\n}\n\n.warning .icon {\n    color: var(--panneau-color-warning);\n}\n\n.info .icon {\n    color: var(--panneau-color-info);\n}\n\n.content {\n    display: flex;\n    flex: 1 1 auto;\n    flex-direction: column;\n    gap: var(--panneau-space-1);\n    min-width: 0;\n}\n\n.title {\n    font-weight: var(--panneau-font-weight-bold);\n}\n\n.body {\n    overflow-wrap: anywhere;\n}\n\n.actions {\n    display: flex;\n    flex-wrap: wrap;\n    gap: var(--panneau-space-2);\n    margin-top: var(--panneau-space-2);\n}\n\n.dismiss {\n    margin: calc(-1 * var(--panneau-space-1)) calc(-1 * var(--panneau-space-2)) 0 0;\n}\n"],"mappings":""}
+{"version":3,"file":"Alert.module.js","names":[],"sources":["../../src/alert/Alert.module.css"],"sourcesContent":[".alert {\n    display: flex;\n    align-items: flex-start;\n    gap: var(--panneau-alert-gap, var(--panneau-space-3));\n    padding: var(--panneau-alert-padding-y, var(--panneau-space-3))\n        var(--panneau-alert-padding-x, var(--panneau-space-4));\n    color: var(--panneau-color-text);\n    border: var(--panneau-alert-border-width, var(--panneau-border-width)) solid transparent;\n    border-radius: var(--panneau-alert-radius, var(--panneau-radius-md));\n}\n\n.icon {\n    margin-top: 0.125rem;\n    color: var(--panneau-tone-text);\n}\n\n/* Appearances: they read the --panneau-tone-* variables of the tone class (decision 0024). */\n\n.subtle {\n    background-color: var(--panneau-tone-subtle);\n    border-color: var(--panneau-tone-border);\n}\n\n.outline {\n    background-color: var(--panneau-color-surface);\n    border-color: var(--panneau-tone-outline);\n}\n\n.solid {\n    color: var(--panneau-tone-solid-text);\n    background-color: var(--panneau-tone-solid);\n    border-color: var(--panneau-tone-solid);\n}\n\n.solid .icon {\n    color: inherit;\n}\n\n.content {\n    display: flex;\n    flex: 1 1 auto;\n    flex-direction: column;\n    gap: var(--panneau-space-1);\n    min-width: 0;\n}\n\n.title {\n    font-weight: var(--panneau-alert-title-font-weight, var(--panneau-font-weight-bold));\n}\n\n.body {\n    overflow-wrap: anywhere;\n}\n\n.actions {\n    display: flex;\n    flex-wrap: wrap;\n    gap: var(--panneau-space-2);\n    margin-top: var(--panneau-space-2);\n}\n\n.dismiss {\n    margin: calc(-1 * var(--panneau-space-1)) calc(-1 * var(--panneau-space-2)) 0 0;\n}\n"],"mappings":""}

package/dist/alert/tokens.d.ts

@@ -0,0 +1,3 @@
+/** Tokens of Alert. */
+export declare const alertTokens: import("..").ComponentTokens<"alert", "panneau-alert-radius" | "panneau-alert-gap" | "panneau-alert-padding-y" | "panneau-alert-padding-x" | "panneau-alert-border-width" | "panneau-alert-title-font-weight">;
+//# sourceMappingURL=tokens.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"tokens.d.ts","sourceRoot":"","sources":["../../src/alert/tokens.ts"],"names":[],"mappings":"AAEA,uBAAuB;AACvB,eAAO,MAAM,WAAW,gNAatB,CAAC"}

package/dist/alert/tokens.js

@@ -0,0 +1,21 @@
+import { defineComponentTokens } from "../theme/componentTokens.js";
+//#region src/alert/tokens.ts
+/** Tokens of Alert. */
+var alertTokens = defineComponentTokens("alert", {
+	/** Space between the icon, the content and the dismiss button. */
+	gap: "var(--panneau-space-3)",
+	/** Vertical padding. */
+	"padding-y": "var(--panneau-space-3)",
+	/** Horizontal padding. */
+	"padding-x": "var(--panneau-space-4)",
+	/** Width of the border. */
+	"border-width": "var(--panneau-border-width)",
+	/** Corner radius. */
+	radius: "var(--panneau-radius-md)",
+	/** Font weight of the title. */
+	"title-font-weight": "var(--panneau-font-weight-bold)"
+});
+//#endregion
+export { alertTokens };
+
+//# sourceMappingURL=tokens.js.map

package/dist/alert/tokens.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tokens.js","names":[],"sources":["../../src/alert/tokens.ts"],"sourcesContent":["import { defineComponentTokens } from '../theme/componentTokens';\n\n/** Tokens of Alert. */\nexport const alertTokens = defineComponentTokens('alert', {\n    /** Space between the icon, the content and the dismiss button. */\n    gap: 'var(--panneau-space-3)',\n    /** Vertical padding. */\n    'padding-y': 'var(--panneau-space-3)',\n    /** Horizontal padding. */\n    'padding-x': 'var(--panneau-space-4)',\n    /** Width of the border. */\n    'border-width': 'var(--panneau-border-width)',\n    /** Corner radius. */\n    radius: 'var(--panneau-radius-md)',\n    /** Font weight of the title. */\n    'title-font-weight': 'var(--panneau-font-weight-bold)',\n});\n"],"mappings":";;;AAGA,IAAa,cAAc,sBAAsB,SAAS;;CAEtD,KAAK;;CAEL,aAAa;;CAEb,aAAa;;CAEb,gBAAgB;;CAEhB,QAAQ;;CAER,qBAAqB;AACzB,CAAC"}