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

package/dist/root/PanneauRoot.module.js.map

@@ -1 +1 @@
-{"version":3,"file":"PanneauRoot.module.js","names":[],"sources":["../../src/root/PanneauRoot.module.css"],"sourcesContent":["/*\n * Design tokens of the default theme, and the base stylesheet of Panneau. Everything is scoped to\n * the root element: nothing here applies outside of it (decision 0005).\n *\n * Defaults are wrapped in :where() so that they have no specificity: a theme, or a project's own\n * class on the root, overrides any token without fighting the cascade.\n */\n\n:where(.root) {\n    /* Surfaces */\n    --panneau-color-bg: #ffffff;\n    --panneau-color-surface: #ffffff;\n    --panneau-color-surface-sunken: #f4f4f5;\n    --panneau-color-surface-raised: #ffffff;\n    --panneau-color-hover: rgb(24 24 27 / 0.06);\n    --panneau-color-pressed: rgb(24 24 27 / 0.1);\n    --panneau-color-backdrop: rgb(9 9 11 / 0.45);\n\n    /* Text */\n    --panneau-color-text: #18181b;\n    --panneau-color-text-muted: #52525b;\n    --panneau-color-link: #1d4ed8;\n\n    /* Borders: separators, and the outline of controls (3:1 against the surface) */\n    --panneau-color-border: #e4e4e7;\n    --panneau-color-border-control: #8b8b94;\n\n    /* Accent: primary buttons, checked controls, selection */\n    --panneau-color-accent: #18181b;\n    --panneau-color-accent-hover: #3f3f46;\n    --panneau-color-accent-text: #ffffff;\n    --panneau-color-accent-subtle: #f4f4f5;\n    --panneau-color-focus: #2563eb;\n\n    /* Tones: text on surfaces, subtle backgrounds, borders */\n    --panneau-color-danger: #b91c1c;\n    --panneau-color-danger-subtle: #fef2f2;\n    --panneau-color-danger-border: #fca5a5;\n    --panneau-color-danger-solid: #b91c1c;\n    --panneau-color-danger-solid-hover: #991b1b;\n    --panneau-color-danger-solid-text: #ffffff;\n    --panneau-color-success: #15803d;\n    --panneau-color-success-subtle: #f0fdf4;\n    --panneau-color-success-border: #86efac;\n    --panneau-color-warning: #a16207;\n    --panneau-color-warning-subtle: #fefce8;\n    --panneau-color-warning-border: #fcd34d;\n    --panneau-color-info: #1d4ed8;\n    --panneau-color-info-subtle: #eff6ff;\n    --panneau-color-info-border: #93c5fd;\n\n    /* Typography */\n    --panneau-font-family:\n        system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;\n    --panneau-font-family-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;\n    --panneau-font-size-xs: 0.75rem;\n    --panneau-font-size-sm: 0.8125rem;\n    --panneau-font-size-md: 0.875rem;\n    --panneau-font-size-lg: 1rem;\n    --panneau-font-size-xl: 1.25rem;\n    --panneau-font-size-control: 0.875rem;\n    --panneau-line-height: 1.5;\n    --panneau-line-height-tight: 1.25;\n    --panneau-font-weight-normal: 400;\n    --panneau-font-weight-medium: 500;\n    --panneau-font-weight-bold: 600;\n\n    /* Spacing, on a 4px scale */\n    --panneau-space-1: 0.25rem;\n    --panneau-space-2: 0.5rem;\n    --panneau-space-3: 0.75rem;\n    --panneau-space-4: 1rem;\n    --panneau-space-5: 1.25rem;\n    --panneau-space-6: 1.5rem;\n    --panneau-space-8: 2rem;\n    --panneau-space-10: 2.5rem;\n\n    /* Shapes */\n    --panneau-radius-sm: 0.25rem;\n    --panneau-radius-md: 0.375rem;\n    --panneau-radius-lg: 0.5rem;\n    --panneau-radius-full: 9999px;\n    --panneau-border-width: 1px;\n    --panneau-shadow-sm: 0 1px 2px rgb(0 0 0 / 0.06);\n    --panneau-shadow-md: 0 1px 3px rgb(0 0 0 / 0.08), 0 4px 12px rgb(0 0 0 / 0.08);\n    --panneau-shadow-lg: 0 4px 8px rgb(0 0 0 / 0.08), 0 16px 40px rgb(0 0 0 / 0.16);\n\n    /* Controls */\n    --panneau-control-height: 2.25rem;\n    --panneau-control-height-sm: 1.875rem;\n    --panneau-focus-width: 2px;\n\n    /* Motion and layers */\n    --panneau-duration: 150ms;\n    --panneau-z-overlay: 1000;\n    --panneau-z-toast: 1100;\n\n    color-scheme: light;\n}\n\n:where(.root[data-color-scheme='dark']) {\n    --panneau-color-bg: #09090b;\n    --panneau-color-surface: #18181b;\n    --panneau-color-surface-sunken: #111113;\n    --panneau-color-surface-raised: #232326;\n    --panneau-color-hover: rgb(255 255 255 / 0.07);\n    --panneau-color-pressed: rgb(255 255 255 / 0.12);\n    --panneau-color-backdrop: rgb(0 0 0 / 0.6);\n    --panneau-color-text: #fafafa;\n    --panneau-color-text-muted: #a1a1aa;\n    --panneau-color-link: #93c5fd;\n    --panneau-color-border: #2e2e33;\n    --panneau-color-border-control: #71717a;\n    --panneau-color-accent: #fafafa;\n    --panneau-color-accent-hover: #d4d4d8;\n    --panneau-color-accent-text: #18181b;\n    --panneau-color-accent-subtle: #2e2e33;\n    --panneau-color-focus: #60a5fa;\n    --panneau-color-danger: #fca5a5;\n    --panneau-color-danger-subtle: rgb(127 29 29 / 0.35);\n    --panneau-color-danger-border: #b91c1c;\n    --panneau-color-danger-solid: #dc2626;\n    --panneau-color-danger-solid-hover: #b91c1c;\n    --panneau-color-danger-solid-text: #ffffff;\n    --panneau-color-success: #86efac;\n    --panneau-color-success-subtle: rgb(20 83 45 / 0.35);\n    --panneau-color-success-border: #15803d;\n    --panneau-color-warning: #fcd34d;\n    --panneau-color-warning-subtle: rgb(113 63 18 / 0.35);\n    --panneau-color-warning-border: #a16207;\n    --panneau-color-info: #93c5fd;\n    --panneau-color-info-subtle: rgb(30 58 138 / 0.35);\n    --panneau-color-info-border: #1d4ed8;\n    --panneau-shadow-sm: 0 1px 2px rgb(0 0 0 / 0.4);\n    --panneau-shadow-md: 0 1px 3px rgb(0 0 0 / 0.4), 0 4px 12px rgb(0 0 0 / 0.4);\n    --panneau-shadow-lg: 0 4px 8px rgb(0 0 0 / 0.4), 0 16px 40px rgb(0 0 0 / 0.5);\n\n    color-scheme: dark;\n}\n\n@media (prefers-color-scheme: dark) {\n    :where(.root[data-color-scheme='auto']) {\n        --panneau-color-bg: #09090b;\n        --panneau-color-surface: #18181b;\n        --panneau-color-surface-sunken: #111113;\n        --panneau-color-surface-raised: #232326;\n        --panneau-color-hover: rgb(255 255 255 / 0.07);\n        --panneau-color-pressed: rgb(255 255 255 / 0.12);\n        --panneau-color-backdrop: rgb(0 0 0 / 0.6);\n        --panneau-color-text: #fafafa;\n        --panneau-color-text-muted: #a1a1aa;\n        --panneau-color-link: #93c5fd;\n        --panneau-color-border: #2e2e33;\n        --panneau-color-border-control: #71717a;\n        --panneau-color-accent: #fafafa;\n        --panneau-color-accent-hover: #d4d4d8;\n        --panneau-color-accent-text: #18181b;\n        --panneau-color-accent-subtle: #2e2e33;\n        --panneau-color-focus: #60a5fa;\n        --panneau-color-danger: #fca5a5;\n        --panneau-color-danger-subtle: rgb(127 29 29 / 0.35);\n        --panneau-color-danger-border: #b91c1c;\n        --panneau-color-danger-solid: #dc2626;\n        --panneau-color-danger-solid-hover: #b91c1c;\n        --panneau-color-danger-solid-text: #ffffff;\n        --panneau-color-success: #86efac;\n        --panneau-color-success-subtle: rgb(20 83 45 / 0.35);\n        --panneau-color-success-border: #15803d;\n        --panneau-color-warning: #fcd34d;\n        --panneau-color-warning-subtle: rgb(113 63 18 / 0.35);\n        --panneau-color-warning-border: #a16207;\n        --panneau-color-info: #93c5fd;\n        --panneau-color-info-subtle: rgb(30 58 138 / 0.35);\n        --panneau-color-info-border: #1d4ed8;\n        --panneau-shadow-sm: 0 1px 2px rgb(0 0 0 / 0.4);\n        --panneau-shadow-md: 0 1px 3px rgb(0 0 0 / 0.4), 0 4px 12px rgb(0 0 0 / 0.4);\n        --panneau-shadow-lg: 0 4px 8px rgb(0 0 0 / 0.4), 0 16px 40px rgb(0 0 0 / 0.5);\n\n        color-scheme: dark;\n    }\n}\n\n/* Touch screens: larger targets, and 16px text in inputs so that iOS doesn't zoom on focus. */\n@media (pointer: coarse) {\n    :where(.root) {\n        --panneau-control-height: 2.75rem;\n        --panneau-control-height-sm: 2.25rem;\n        --panneau-font-size-control: 1rem;\n    }\n}\n\n@media (prefers-reduced-motion: reduce) {\n    :where(.root) {\n        --panneau-duration: 0ms;\n    }\n}\n\n/* Base stylesheet, scoped to the root, without specificity: components and projects override it. */\n\n.root {\n    /* The class is mostly a hook for the rules below, which use :where(). */\n    display: block;\n}\n\n:where(.root) {\n    font-family: var(--panneau-font-family);\n    font-size: var(--panneau-font-size-md);\n    line-height: var(--panneau-line-height);\n    color: var(--panneau-color-text);\n    background-color: var(--panneau-color-bg);\n    -webkit-font-smoothing: antialiased;\n    -webkit-text-size-adjust: 100%;\n    text-size-adjust: 100%;\n}\n\n:where(.root) :where(*, *::before, *::after) {\n    box-sizing: border-box;\n}\n\n:where(.root) :where(h1, h2, h3, h4, h5, h6, p, ul, ol, dl, figure, fieldset, legend) {\n    margin: 0;\n    padding: 0;\n}\n\n:where(.root) :where(fieldset) {\n    border: 0;\n    min-width: 0;\n}\n\n:where(.root) :where(button, input, select, textarea) {\n    font: inherit;\n    color: inherit;\n}\n\n:where(.root) :where(a) {\n    color: var(--panneau-color-link);\n}\n\n:where(.root) :where(img, svg, video) {\n    max-width: 100%;\n}\n\n:where(.root) :where(:focus-visible) {\n    outline: var(--panneau-focus-width) solid var(--panneau-color-focus);\n    outline-offset: 2px;\n}\n\n/* Overlays (dialogs, popovers, menus, tooltips) render here, so that they get the tokens. */\n.portal {\n    display: contents;\n}\n"],"mappings":""}
+{"version":3,"file":"PanneauRoot.module.js","names":[],"sources":["../../src/root/PanneauRoot.module.css"],"sourcesContent":["/*\n * Design tokens of the default theme, and the base stylesheet of Panneau. Everything is scoped to\n * the root element: nothing here applies outside of it (decision 0005).\n *\n * Defaults are wrapped in :where() so that they have no specificity: a theme, or a project's own\n * class on the root, overrides any token without fighting the cascade.\n */\n\n:where(.root) {\n    /* Surfaces */\n    --panneau-color-bg: #ffffff;\n    --panneau-color-surface: #ffffff;\n    --panneau-color-surface-sunken: #f4f4f5;\n    --panneau-color-surface-raised: #ffffff;\n    --panneau-color-hover: rgb(24 24 27 / 0.06);\n    --panneau-color-pressed: rgb(24 24 27 / 0.1);\n    --panneau-color-backdrop: rgb(9 9 11 / 0.45);\n\n    /* Text */\n    --panneau-color-text: #18181b;\n    --panneau-color-text-muted: #52525b;\n    --panneau-color-link: #1d4ed8;\n\n    /* Borders: separators, and the outline of controls (3:1 against the surface) */\n    --panneau-color-border: #e4e4e7;\n    --panneau-color-border-control: #8b8b94;\n\n    /* Accent: primary buttons, checked controls, selection */\n    --panneau-color-accent: #18181b;\n    --panneau-color-accent-hover: #3f3f46;\n    --panneau-color-accent-text: #ffffff;\n    --panneau-color-accent-subtle: #f4f4f5;\n    --panneau-color-focus: #2563eb;\n\n    /* Tones: text on surfaces, subtle backgrounds, borders */\n    --panneau-color-danger: #b91c1c;\n    --panneau-color-danger-subtle: #fef2f2;\n    --panneau-color-danger-border: #fca5a5;\n    --panneau-color-danger-solid: #b91c1c;\n    --panneau-color-danger-solid-hover: #991b1b;\n    --panneau-color-danger-solid-text: #ffffff;\n    --panneau-color-success: #15803d;\n    --panneau-color-success-subtle: #f0fdf4;\n    --panneau-color-success-border: #86efac;\n    --panneau-color-success-solid: #15803d;\n    --panneau-color-success-solid-hover: #166534;\n    --panneau-color-success-solid-text: #ffffff;\n    --panneau-color-warning: #a16207;\n    --panneau-color-warning-subtle: #fefce8;\n    --panneau-color-warning-border: #fcd34d;\n    --panneau-color-warning-solid: #a16207;\n    --panneau-color-warning-solid-hover: #854d0e;\n    --panneau-color-warning-solid-text: #ffffff;\n    --panneau-color-info: #1d4ed8;\n    --panneau-color-info-subtle: #eff6ff;\n    --panneau-color-info-border: #93c5fd;\n    --panneau-color-info-solid: #1d4ed8;\n    --panneau-color-info-solid-hover: #1e40af;\n    --panneau-color-info-solid-text: #ffffff;\n\n    /*\n     * Data visualization: 8 categorical colors in a fixed order, a sequential ramp from low to high,\n     * and a diverging pair around a neutral midpoint. Each categorical color reaches 3:1 against\n     * the surface, and stays distinct under the common color vision deficiencies (chartColors.test).\n     */\n    --panneau-chart-categorical-1: #1c6cbb;\n    --panneau-chart-categorical-2: #c47713;\n    --panneau-chart-categorical-3: #d12f74;\n    --panneau-chart-categorical-4: #515922;\n    --panneau-chart-categorical-5: #2b9c52;\n    --panneau-chart-categorical-6: #a977b3;\n    --panneau-chart-categorical-7: #8f2786;\n    --panneau-chart-categorical-8: #9176e8;\n    --panneau-chart-sequential-1: #dbe8f6;\n    --panneau-chart-sequential-2: #a3c6e9;\n    --panneau-chart-sequential-3: #5f9bd6;\n    --panneau-chart-sequential-4: #2c6cb0;\n    --panneau-chart-sequential-5: #1a4475;\n    --panneau-chart-diverging-negative: #b4501a;\n    --panneau-chart-diverging-neutral: #e4e4e7;\n    --panneau-chart-diverging-positive: #1c6cbb;\n\n    /* Typography: font roles. Headings and display text follow the body unless a theme sets them. */\n    --panneau-font-family-body:\n        system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;\n    --panneau-font-family-heading: var(--panneau-font-family-body);\n    --panneau-font-family-display: var(--panneau-font-family-heading);\n    --panneau-font-family-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;\n    /* Deprecated alias of the body family: set --panneau-font-family-body instead. */\n    --panneau-font-family: var(--panneau-font-family-body);\n    /* Numbers that line up: stats, dates, ids (font-variant-numeric). */\n    --panneau-font-numeric: tabular-nums;\n    --panneau-font-size-xs: 0.75rem;\n    --panneau-font-size-sm: 0.8125rem;\n    --panneau-font-size-md: 0.875rem;\n    --panneau-font-size-lg: 1rem;\n    --panneau-font-size-xl: 1.25rem;\n    --panneau-font-size-control: 0.875rem;\n    --panneau-line-height: 1.5;\n    --panneau-line-height-tight: 1.25;\n    --panneau-font-weight-normal: 400;\n    --panneau-font-weight-medium: 500;\n    --panneau-font-weight-bold: 600;\n\n    /* Spacing, on a 4px scale */\n    --panneau-space-1: 0.25rem;\n    --panneau-space-2: 0.5rem;\n    --panneau-space-3: 0.75rem;\n    --panneau-space-4: 1rem;\n    --panneau-space-5: 1.25rem;\n    --panneau-space-6: 1.5rem;\n    --panneau-space-8: 2rem;\n    --panneau-space-10: 2.5rem;\n\n    /* Shapes */\n    --panneau-radius-sm: 0.25rem;\n    --panneau-radius-md: 0.375rem;\n    --panneau-radius-lg: 0.5rem;\n    --panneau-radius-full: 9999px;\n    --panneau-border-width: 1px;\n    --panneau-shadow-sm: 0 1px 2px rgb(0 0 0 / 0.06);\n    --panneau-shadow-md: 0 1px 3px rgb(0 0 0 / 0.08), 0 4px 12px rgb(0 0 0 / 0.08);\n    --panneau-shadow-lg: 0 4px 8px rgb(0 0 0 / 0.08), 0 16px 40px rgb(0 0 0 / 0.16);\n\n    /* Controls and rows: the comfortable density. Other densities redefine these tokens. */\n    --panneau-control-height: 2.25rem;\n    --panneau-control-height-sm: 1.875rem;\n    --panneau-control-padding-x: 0.75rem;\n    --panneau-row-padding-y: 0.5rem;\n    --panneau-focus-width: 2px;\n\n    /* Motion and layers */\n    --panneau-duration: 150ms;\n    --panneau-z-overlay: 1000;\n    --panneau-z-toast: 1100;\n\n    color-scheme: light;\n}\n\n/*\n * A ThemeScope with its own color scheme (.scheme) takes the light colors back, since the root\n * around it may be dark. Scopes without one inherit the colors of their parent.\n */\n:where(.scheme[data-color-scheme='light'], .scheme[data-color-scheme='auto']) {\n    --panneau-chart-categorical-1: #1c6cbb;\n    --panneau-chart-categorical-2: #c47713;\n    --panneau-chart-categorical-3: #d12f74;\n    --panneau-chart-categorical-4: #515922;\n    --panneau-chart-categorical-5: #2b9c52;\n    --panneau-chart-categorical-6: #a977b3;\n    --panneau-chart-categorical-7: #8f2786;\n    --panneau-chart-categorical-8: #9176e8;\n    --panneau-chart-sequential-1: #dbe8f6;\n    --panneau-chart-sequential-2: #a3c6e9;\n    --panneau-chart-sequential-3: #5f9bd6;\n    --panneau-chart-sequential-4: #2c6cb0;\n    --panneau-chart-sequential-5: #1a4475;\n    --panneau-chart-diverging-negative: #b4501a;\n    --panneau-chart-diverging-neutral: #e4e4e7;\n    --panneau-chart-diverging-positive: #1c6cbb;\n    --panneau-color-bg: #ffffff;\n    --panneau-color-surface: #ffffff;\n    --panneau-color-surface-sunken: #f4f4f5;\n    --panneau-color-surface-raised: #ffffff;\n    --panneau-color-hover: rgb(24 24 27 / 0.06);\n    --panneau-color-pressed: rgb(24 24 27 / 0.1);\n    --panneau-color-backdrop: rgb(9 9 11 / 0.45);\n    --panneau-color-text: #18181b;\n    --panneau-color-text-muted: #52525b;\n    --panneau-color-link: #1d4ed8;\n    --panneau-color-border: #e4e4e7;\n    --panneau-color-border-control: #8b8b94;\n    --panneau-color-accent: #18181b;\n    --panneau-color-accent-hover: #3f3f46;\n    --panneau-color-accent-text: #ffffff;\n    --panneau-color-accent-subtle: #f4f4f5;\n    --panneau-color-focus: #2563eb;\n    --panneau-color-danger: #b91c1c;\n    --panneau-color-danger-subtle: #fef2f2;\n    --panneau-color-danger-border: #fca5a5;\n    --panneau-color-danger-solid: #b91c1c;\n    --panneau-color-danger-solid-hover: #991b1b;\n    --panneau-color-danger-solid-text: #ffffff;\n    --panneau-color-success: #15803d;\n    --panneau-color-success-subtle: #f0fdf4;\n    --panneau-color-success-border: #86efac;\n    --panneau-color-warning: #a16207;\n    --panneau-color-warning-subtle: #fefce8;\n    --panneau-color-warning-border: #fcd34d;\n    --panneau-color-info: #1d4ed8;\n    --panneau-color-info-subtle: #eff6ff;\n    --panneau-color-info-border: #93c5fd;\n    --panneau-shadow-sm: 0 1px 2px rgb(0 0 0 / 0.06);\n    --panneau-shadow-md: 0 1px 3px rgb(0 0 0 / 0.08), 0 4px 12px rgb(0 0 0 / 0.08);\n    --panneau-shadow-lg: 0 4px 8px rgb(0 0 0 / 0.08), 0 16px 40px rgb(0 0 0 / 0.16);\n\n    color-scheme: light;\n}\n\n:where(.root[data-color-scheme='dark'], .scheme[data-color-scheme='dark']) {\n    --panneau-chart-categorical-1: #61a9e3;\n    --panneau-chart-categorical-2: #e5c040;\n    --panneau-chart-categorical-3: #d9456a;\n    --panneau-chart-categorical-4: #a1da9e;\n    --panneau-chart-categorical-5: #bb6528;\n    --panneau-chart-categorical-6: #a06a9b;\n    --panneau-chart-categorical-7: #8c71e2;\n    --panneau-chart-categorical-8: #56dfe1;\n    --panneau-chart-sequential-1: #1d3550;\n    --panneau-chart-sequential-2: #285684;\n    --panneau-chart-sequential-3: #3d7fc2;\n    --panneau-chart-sequential-4: #74abe0;\n    --panneau-chart-sequential-5: #b8d6f2;\n    --panneau-chart-diverging-negative: #f0884a;\n    --panneau-chart-diverging-neutral: #3f3f46;\n    --panneau-chart-diverging-positive: #61a9e3;\n    --panneau-color-bg: #09090b;\n    --panneau-color-surface: #18181b;\n    --panneau-color-surface-sunken: #111113;\n    --panneau-color-surface-raised: #232326;\n    --panneau-color-hover: rgb(255 255 255 / 0.07);\n    --panneau-color-pressed: rgb(255 255 255 / 0.12);\n    --panneau-color-backdrop: rgb(0 0 0 / 0.6);\n    --panneau-color-text: #fafafa;\n    --panneau-color-text-muted: #a1a1aa;\n    --panneau-color-link: #93c5fd;\n    --panneau-color-border: #2e2e33;\n    --panneau-color-border-control: #71717a;\n    --panneau-color-accent: #fafafa;\n    --panneau-color-accent-hover: #d4d4d8;\n    --panneau-color-accent-text: #18181b;\n    --panneau-color-accent-subtle: #2e2e33;\n    --panneau-color-focus: #60a5fa;\n    --panneau-color-danger: #fca5a5;\n    --panneau-color-danger-subtle: rgb(127 29 29 / 0.35);\n    --panneau-color-danger-border: #b91c1c;\n    --panneau-color-danger-solid: #dc2626;\n    --panneau-color-danger-solid-hover: #b91c1c;\n    --panneau-color-danger-solid-text: #ffffff;\n    --panneau-color-success: #86efac;\n    --panneau-color-success-subtle: rgb(20 83 45 / 0.35);\n    --panneau-color-success-border: #15803d;\n    --panneau-color-warning: #fcd34d;\n    --panneau-color-warning-subtle: rgb(113 63 18 / 0.35);\n    --panneau-color-warning-border: #a16207;\n    --panneau-color-info: #93c5fd;\n    --panneau-color-info-subtle: rgb(30 58 138 / 0.35);\n    --panneau-color-info-border: #1d4ed8;\n    --panneau-shadow-sm: 0 1px 2px rgb(0 0 0 / 0.4);\n    --panneau-shadow-md: 0 1px 3px rgb(0 0 0 / 0.4), 0 4px 12px rgb(0 0 0 / 0.4);\n    --panneau-shadow-lg: 0 4px 8px rgb(0 0 0 / 0.4), 0 16px 40px rgb(0 0 0 / 0.5);\n\n    color-scheme: dark;\n}\n\n@media (prefers-color-scheme: dark) {\n    :where(.root[data-color-scheme='auto'], .scheme[data-color-scheme='auto']) {\n        --panneau-chart-categorical-1: #61a9e3;\n        --panneau-chart-categorical-2: #e5c040;\n        --panneau-chart-categorical-3: #d9456a;\n        --panneau-chart-categorical-4: #a1da9e;\n        --panneau-chart-categorical-5: #bb6528;\n        --panneau-chart-categorical-6: #a06a9b;\n        --panneau-chart-categorical-7: #8c71e2;\n        --panneau-chart-categorical-8: #56dfe1;\n        --panneau-chart-sequential-1: #1d3550;\n        --panneau-chart-sequential-2: #285684;\n        --panneau-chart-sequential-3: #3d7fc2;\n        --panneau-chart-sequential-4: #74abe0;\n        --panneau-chart-sequential-5: #b8d6f2;\n        --panneau-chart-diverging-negative: #f0884a;\n        --panneau-chart-diverging-neutral: #3f3f46;\n        --panneau-chart-diverging-positive: #61a9e3;\n        --panneau-color-bg: #09090b;\n        --panneau-color-surface: #18181b;\n        --panneau-color-surface-sunken: #111113;\n        --panneau-color-surface-raised: #232326;\n        --panneau-color-hover: rgb(255 255 255 / 0.07);\n        --panneau-color-pressed: rgb(255 255 255 / 0.12);\n        --panneau-color-backdrop: rgb(0 0 0 / 0.6);\n        --panneau-color-text: #fafafa;\n        --panneau-color-text-muted: #a1a1aa;\n        --panneau-color-link: #93c5fd;\n        --panneau-color-border: #2e2e33;\n        --panneau-color-border-control: #71717a;\n        --panneau-color-accent: #fafafa;\n        --panneau-color-accent-hover: #d4d4d8;\n        --panneau-color-accent-text: #18181b;\n        --panneau-color-accent-subtle: #2e2e33;\n        --panneau-color-focus: #60a5fa;\n        --panneau-color-danger: #fca5a5;\n        --panneau-color-danger-subtle: rgb(127 29 29 / 0.35);\n        --panneau-color-danger-border: #b91c1c;\n        --panneau-color-danger-solid: #dc2626;\n        --panneau-color-danger-solid-hover: #b91c1c;\n        --panneau-color-danger-solid-text: #ffffff;\n        --panneau-color-success: #86efac;\n        --panneau-color-success-subtle: rgb(20 83 45 / 0.35);\n        --panneau-color-success-border: #15803d;\n        --panneau-color-warning: #fcd34d;\n        --panneau-color-warning-subtle: rgb(113 63 18 / 0.35);\n        --panneau-color-warning-border: #a16207;\n        --panneau-color-info: #93c5fd;\n        --panneau-color-info-subtle: rgb(30 58 138 / 0.35);\n        --panneau-color-info-border: #1d4ed8;\n        --panneau-shadow-sm: 0 1px 2px rgb(0 0 0 / 0.4);\n        --panneau-shadow-md: 0 1px 3px rgb(0 0 0 / 0.4), 0 4px 12px rgb(0 0 0 / 0.4);\n        --panneau-shadow-lg: 0 4px 8px rgb(0 0 0 / 0.4), 0 16px 40px rgb(0 0 0 / 0.5);\n\n        color-scheme: dark;\n    }\n}\n\n/*\n * Densities: compact, comfortable (the tokens above) and touch, with larger targets and 16px text in\n * inputs so that iOS doesn't zoom on focus. `auto`, the default, is touch on coarse pointers (touch\n * screens) and comfortable otherwise.\n */\n/* A ThemeScope with its own density (.density) takes the comfortable values back. */\n:where(.density[data-density='comfortable'], .density[data-density='auto']) {\n    --panneau-control-height: 2.25rem;\n    --panneau-control-height-sm: 1.875rem;\n    --panneau-font-size-control: 0.875rem;\n    --panneau-control-padding-x: 0.75rem;\n    --panneau-row-padding-y: 0.5rem;\n}\n\n:where(.root[data-density='compact'], .density[data-density='compact']) {\n    --panneau-control-height: 2rem;\n    --panneau-control-height-sm: 1.625rem;\n    --panneau-font-size-control: 0.8125rem;\n    --panneau-control-padding-x: 0.5rem;\n    --panneau-row-padding-y: 0.25rem;\n}\n\n:where(.root[data-density='touch'], .density[data-density='touch']) {\n    --panneau-control-height: 2.75rem;\n    --panneau-control-height-sm: 2.25rem;\n    --panneau-font-size-control: 1rem;\n    --panneau-control-padding-x: 0.75rem;\n    --panneau-row-padding-y: 0.75rem;\n}\n\n@media (pointer: coarse) {\n    :where(.root[data-density='auto'], .density[data-density='auto']) {\n        --panneau-control-height: 2.75rem;\n        --panneau-control-height-sm: 2.25rem;\n        --panneau-font-size-control: 1rem;\n        --panneau-control-padding-x: 0.75rem;\n        --panneau-row-padding-y: 0.75rem;\n    }\n}\n\n@media (prefers-reduced-motion: reduce) {\n    :where(.root) {\n        --panneau-duration: 0ms;\n    }\n}\n\n/* Base stylesheet, scoped to the root, with less weight than any class: components and projects override it. */\n\n.root {\n    /* The class is mostly a hook for the rules below, which use :where(). */\n    display: block;\n}\n\n/*\n * The root is a size container, so that the responsive props of layout primitives follow its width\n * rather than the viewport's. Like any size container, its width can't come from its content: in a\n * flex row or a float, give it a width. Toast regions share the tokens of .root, not this.\n */\n.container {\n    container: panneau-root / inline-size;\n}\n\n:where(.root) {\n    font-family: var(--panneau-font-family);\n    font-size: var(--panneau-font-size-md);\n    line-height: var(--panneau-line-height);\n    color: var(--panneau-color-text);\n    background-color: var(--panneau-color-bg);\n    -webkit-font-smoothing: antialiased;\n    -webkit-text-size-adjust: 100%;\n    text-size-adjust: 100%;\n}\n\n:where(.root) :where(*, *::before, *::after) {\n    box-sizing: border-box;\n}\n\n/*\n * Element resets weigh two element selectors, (0,0,2), by repeating :is(): more than the global\n * element rules of a site, such as Bootstrap's Reboot (`h5 { margin-bottom: 0.5rem }` weighs\n * (0,0,1)), less than any class, so that components and projects still override them.\n */\n:where(.root)\n    :is(\n        h1,\n        h2,\n        h3,\n        h4,\n        h5,\n        h6,\n        p,\n        ul,\n        ol,\n        dl,\n        dd,\n        figure,\n        blockquote,\n        pre,\n        hr,\n        fieldset,\n        legend\n    ):is(h1, h2, h3, h4, h5, h6, p, ul, ol, dl, dd, figure, blockquote, pre, hr, fieldset, legend) {\n    margin: 0;\n    padding: 0;\n}\n\n/* Reboot floats legends and scales their text. */\n:where(.root) :is(legend):is(legend) {\n    float: none;\n    width: auto;\n    font-size: inherit;\n    line-height: inherit;\n}\n\n/* Reboot fades rules to 25% opacity. */\n:where(.root) :is(hr):is(hr) {\n    opacity: 1;\n}\n\n:where(.root) :where(fieldset) {\n    border: 0;\n    min-width: 0;\n}\n\n:where(.root) :where(button, input, select, textarea) {\n    font: inherit;\n    color: inherit;\n}\n\n:where(.root) :is(a):is(a) {\n    color: var(--panneau-color-link);\n}\n\n:where(.root) :where(img, svg, video) {\n    max-width: 100%;\n}\n\n:where(.root) :where(:focus-visible) {\n    outline: var(--panneau-focus-width) solid var(--panneau-color-focus);\n    outline-offset: 2px;\n}\n\n/*\n * A ThemeScope applies the text styles of its tokens again, since inherited values were computed\n * on the root. One with its own color scheme or theme paints its background too.\n */\n:where(.scope) {\n    font-family: var(--panneau-font-family);\n    font-size: var(--panneau-font-size-md);\n    line-height: var(--panneau-line-height);\n    color: var(--panneau-color-text);\n}\n\n:where(.scope.scheme, .scope[data-panneau-theme]) {\n    background-color: var(--panneau-color-bg);\n}\n\n/* Overlays (dialogs, popovers, menus, tooltips) render here, so that they get the tokens. */\n.portal {\n    display: contents;\n}\n"],"mappings":""}

package/dist/root/ThemeScope.d.ts

@@ -0,0 +1,24 @@
+import { type HTMLAttributes, type ReactNode } from 'react';
+import type { ColorScheme, Density, Theme } from '../theme/theme';
+export interface ThemeScopeProps extends HTMLAttributes<HTMLElement> {
+    /** Element to render. Defaults to `div`. */
+    as?: 'div' | 'section' | 'aside' | 'nav' | 'header' | 'footer' | 'main' | 'article';
+    /** A theme for the subtree, over the theme of the root. */
+    theme?: Theme | null;
+    /** A color scheme for the subtree. Inherited by default. */
+    colorScheme?: ColorScheme;
+    /** A density for the subtree. Inherited by default. */
+    density?: Density;
+    children?: ReactNode;
+}
+/**
+ * Applies a theme, a color scheme or a density to a subtree, like `data-bs-theme` on any element:
+ * a dark sidebar in a light app, a compact table, a preview in another brand's colors. Overlays
+ * opened inside it render in its own container, so that they keep its tokens. It must be inside a
+ * `PanneauRoot`.
+ *
+ * What it doesn't set comes from its parent: a scope with only a density keeps the colors of the
+ * theme around it.
+ */
+export declare function ThemeScope({ as: Element, theme, colorScheme, density, className, children, ...props }: ThemeScopeProps): import("react").JSX.Element;
+//# sourceMappingURL=ThemeScope.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ThemeScope.d.ts","sourceRoot":"","sources":["../../src/root/ThemeScope.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,cAAc,EAAE,KAAK,SAAS,EAAiB,MAAM,OAAO,CAAC;AAE3E,OAAO,KAAK,EAAE,WAAW,EAAE,OAAO,EAAE,KAAK,EAAE,MAAM,gBAAgB,CAAC;AAKlE,MAAM,WAAW,eAAgB,SAAQ,cAAc,CAAC,WAAW,CAAC;IAChE,4CAA4C;IAC5C,EAAE,CAAC,EAAE,KAAK,GAAG,SAAS,GAAG,OAAO,GAAG,KAAK,GAAG,QAAQ,GAAG,QAAQ,GAAG,MAAM,GAAG,SAAS,CAAC;IACpF,2DAA2D;IAC3D,KAAK,CAAC,EAAE,KAAK,GAAG,IAAI,CAAC;IACrB,4DAA4D;IAC5D,WAAW,CAAC,EAAE,WAAW,CAAC;IAC1B,uDAAuD;IACvD,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,CAAC,EAAE,SAAS,CAAC;CACxB;AAED;;;;;;;;GAQG;AACH,wBAAgB,UAAU,CAAC,EACvB,EAAE,EAAE,OAAe,EACnB,KAAY,EACZ,WAAW,EACX,OAAO,EACP,SAAS,EACT,QAAQ,EACR,GAAG,KAAK,EACX,EAAE,eAAe,+BA+BjB"}

package/dist/root/ThemeScope.js

@@ -0,0 +1,49 @@
+import { cx } from "../utils/cx.js";
+import PanneauRoot_module_default from "./PanneauRoot.module.js";
+import { PortalProvider, ScopeContext, useThemeStyles } from "./PanneauRoot.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { use, useState } from "react";
+//#region src/root/ThemeScope.tsx
+/**
+* Applies a theme, a color scheme or a density to a subtree, like `data-bs-theme` on any element:
+* a dark sidebar in a light app, a compact table, a preview in another brand's colors. Overlays
+* opened inside it render in its own container, so that they keep its tokens. It must be inside a
+* `PanneauRoot`.
+*
+* What it doesn't set comes from its parent: a scope with only a density keeps the colors of the
+* theme around it.
+*/
+function ThemeScope({ as: Element = "div", theme = null, colorScheme, density, className, children, ...props }) {
+	const parent = use(ScopeContext);
+	const [container, setContainer] = useState(null);
+	const { scope, styles: themeStyles } = useThemeStyles(theme);
+	const effective = {
+		colorScheme: colorScheme ?? parent.colorScheme,
+		density: density ?? parent.density
+	};
+	return /* @__PURE__ */ jsxs(Element, {
+		...props,
+		className: cx("panneau-theme-scope", PanneauRoot_module_default.scope, colorScheme !== void 0 && PanneauRoot_module_default.scheme, density !== void 0 && PanneauRoot_module_default.density, className),
+		"data-color-scheme": effective.colorScheme,
+		"data-density": effective.density,
+		"data-panneau-theme": scope,
+		children: [
+			themeStyles,
+			/* @__PURE__ */ jsx(ScopeContext, {
+				value: effective,
+				children: /* @__PURE__ */ jsx(PortalProvider, {
+					value: container,
+					children
+				})
+			}),
+			/* @__PURE__ */ jsx("div", {
+				ref: setContainer,
+				className: PanneauRoot_module_default.portal
+			})
+		]
+	});
+}
+//#endregion
+export { ThemeScope };
+
+//# sourceMappingURL=ThemeScope.js.map

package/dist/root/ThemeScope.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ThemeScope.js","names":["styles"],"sources":["../../src/root/ThemeScope.tsx"],"sourcesContent":["import { type HTMLAttributes, type ReactNode, use, useState } from 'react';\n\nimport type { ColorScheme, Density, Theme } from '../theme/theme';\nimport { cx } from '../utils/cx';\nimport { PortalProvider, ScopeContext, useThemeStyles } from './PanneauRoot';\nimport styles from './PanneauRoot.module.css';\n\nexport interface ThemeScopeProps extends HTMLAttributes<HTMLElement> {\n    /** Element to render. Defaults to `div`. */\n    as?: 'div' | 'section' | 'aside' | 'nav' | 'header' | 'footer' | 'main' | 'article';\n    /** A theme for the subtree, over the theme of the root. */\n    theme?: Theme | null;\n    /** A color scheme for the subtree. Inherited by default. */\n    colorScheme?: ColorScheme;\n    /** A density for the subtree. Inherited by default. */\n    density?: Density;\n    children?: ReactNode;\n}\n\n/**\n * Applies a theme, a color scheme or a density to a subtree, like `data-bs-theme` on any element:\n * a dark sidebar in a light app, a compact table, a preview in another brand's colors. Overlays\n * opened inside it render in its own container, so that they keep its tokens. It must be inside a\n * `PanneauRoot`.\n *\n * What it doesn't set comes from its parent: a scope with only a density keeps the colors of the\n * theme around it.\n */\nexport function ThemeScope({\n    as: Element = 'div',\n    theme = null,\n    colorScheme,\n    density,\n    className,\n    children,\n    ...props\n}: ThemeScopeProps) {\n    const parent = use(ScopeContext);\n    const [container, setContainer] = useState<HTMLDivElement | null>(null);\n    const { scope, styles: themeStyles } = useThemeStyles(theme);\n    // The effective values are always written, so that the dark and density rules of a theme apply.\n    // Only those set here take the default tokens back (`.scheme`, `.density`).\n    const effective = {\n        colorScheme: colorScheme ?? parent.colorScheme,\n        density: density ?? parent.density,\n    };\n    return (\n        <Element\n            {...props}\n            className={cx(\n                'panneau-theme-scope',\n                styles.scope,\n                colorScheme !== undefined && styles.scheme,\n                density !== undefined && styles.density,\n                className,\n            )}\n            data-color-scheme={effective.colorScheme}\n            data-density={effective.density}\n            data-panneau-theme={scope}\n        >\n            {themeStyles}\n            <ScopeContext value={effective}>\n                <PortalProvider value={container}>{children}</PortalProvider>\n            </ScopeContext>\n            <div ref={setContainer} className={styles.portal} />\n        </Element>\n    );\n}\n"],"mappings":";;;;;;;;;;;;;;;AA4BA,SAAgB,WAAW,EACvB,IAAI,UAAU,OACd,QAAQ,MACR,aACA,SACA,WACA,UACA,GAAG,SACa;CAChB,MAAM,SAAS,IAAI,YAAY;CAC/B,MAAM,CAAC,WAAW,gBAAgB,SAAgC,IAAI;CACtE,MAAM,EAAE,OAAO,QAAQ,gBAAgB,eAAe,KAAK;CAG3D,MAAM,YAAY;EACd,aAAa,eAAe,OAAO;EACnC,SAAS,WAAW,OAAO;CAC/B;CACA,OACI,qBAAC,SAAD;EACI,GAAI;EACJ,WAAW,GACP,uBACAA,2BAAO,OACP,gBAAgB,KAAA,KAAaA,2BAAO,QACpC,YAAY,KAAA,KAAaA,2BAAO,SAChC,SACJ;EACA,qBAAmB,UAAU;EAC7B,gBAAc,UAAU;EACxB,sBAAoB;EAXxB,UAAA;GAaK;GACD,oBAAC,cAAD;IAAc,OAAO;IACjB,UAAA,oBAAC,gBAAD;KAAgB,OAAO;KAAY;IAAyB,CAAA;GAClD,CAAA;GACd,oBAAC,OAAD;IAAK,KAAK;IAAc,WAAWA,2BAAO;GAAO,CAAA;EAC5C;;AAEjB"}

package/dist/select/ListBox.css

@@ -1,93 +1,94 @@
 /* Options of selects, combo boxes and menus. */
 
-.panneau-listBox-8esRuh {
+.panneau-list-box {
     display: flex;
     flex-direction: column;
     max-height: inherit;
-    padding: var(--panneau-space-1);
+    padding: var(--panneau-list-box-padding, var(--panneau-space-1));
     overflow: auto;
     outline: none;
 }
 
-.panneau-item-Zfuva9 {
+.panneau-list-box-item {
     display: flex;
     align-items: center;
     gap: var(--panneau-space-2);
     min-height: var(--panneau-control-height-sm);
-    padding: var(--panneau-space-1) var(--panneau-space-2);
+    padding: var(--panneau-list-box-item-padding-y, calc(var(--panneau-row-padding-y) / 2))
+        var(--panneau-list-box-item-padding-x, var(--panneau-space-2));
     font-size: var(--panneau-font-size-control);
     line-height: var(--panneau-line-height-tight);
     color: var(--panneau-color-text);
     cursor: default;
-    border-radius: var(--panneau-radius-sm);
+    border-radius: var(--panneau-list-box-item-radius, var(--panneau-radius-sm));
     outline: none;
 }
 
-.panneau-item-Zfuva9[data-focused],
-.panneau-item-Zfuva9[data-hovered] {
-    background-color: var(--panneau-color-hover);
+.panneau-list-box-item[data-focused],
+.panneau-list-box-item[data-hovered] {
+    background-color: var(--panneau-list-box-item-bg-hover, var(--panneau-color-hover));
 }
 
-.panneau-item-Zfuva9[data-focus-visible] {
+.panneau-list-box-item[data-focus-visible] {
     outline: var(--panneau-focus-width) solid var(--panneau-color-focus);
     outline-offset: -2px;
 }
 
-.panneau-item-Zfuva9[data-disabled] {
+.panneau-list-box-item[data-disabled] {
     cursor: not-allowed;
     opacity: 0.5;
 }
 
-.panneau-item-Zfuva9[data-danger] {
+.panneau-list-box-item[data-danger] {
     color: var(--panneau-color-danger);
 }
 
-.panneau-itemText-P7FtjI {
+.panneau-list-box-item-text {
     display: flex;
     flex: 1 1 auto;
     flex-direction: column;
     min-width: 0;
 }
 
-.panneau-itemLabel-nLMoU0 {
+.panneau-list-box-item-label {
     overflow-wrap: anywhere;
 }
 
-.panneau-itemDescription--u64pt {
+.panneau-list-box-item-description {
     font-size: var(--panneau-font-size-sm);
     color: var(--panneau-color-text-muted);
 }
 
-.panneau-check-o1OMYv {
+.panneau-list-box-check {
     flex: 0 0 auto;
     width: 1rem;
     color: var(--panneau-color-text);
 }
 
-.panneau-placeholder-Ln7J3j {
+.panneau-list-box-placeholder {
     color: var(--panneau-color-text-muted);
 }
 
-.panneau-empty-4GCKMh {
+.panneau-list-box-empty {
     padding: var(--panneau-space-2);
     font-size: var(--panneau-font-size-sm);
     color: var(--panneau-color-text-muted);
 }
 
-.panneau-separator-FjQdQ6 {
+.panneau-list-box-separator {
     height: 1px;
     margin: var(--panneau-space-1) 0;
     background-color: var(--panneau-color-border);
 }
 
-.panneau-trigger-3OeZeM {
+.panneau-list-box-trigger {
     justify-content: space-between;
     gap: var(--panneau-space-2);
     text-align: start;
     cursor: pointer;
 }
 
-.panneau-value-J-b74F {
+.panneau-list-box-value {
     flex: 1 1 auto;
     min-width: 0;
     overflow: hidden;
@@ -95,10 +96,10 @@
     white-space: nowrap;
 }
 
-.panneau-value-J-b74F[data-placeholder] {
+.panneau-list-box-value[data-placeholder] {
     color: var(--panneau-color-text-muted);
 }
 
-.panneau-chevron-w-papm {
+.panneau-list-box-chevron {
     color: var(--panneau-color-text-muted);
 }

package/dist/select/ListBox.module.js

@@ -1,17 +1,17 @@
 import "./ListBox.css";
 //#region src/select/ListBox.module.css
-var listBox = "panneau-listBox-8esRuh";
-var item = "panneau-item-Zfuva9";
-var itemText = "panneau-itemText-P7FtjI";
-var itemLabel = "panneau-itemLabel-nLMoU0";
-var itemDescription = "panneau-itemDescription--u64pt";
-var check = "panneau-check-o1OMYv";
-var placeholder = "panneau-placeholder-Ln7J3j";
-var empty = "panneau-empty-4GCKMh";
-var separator = "panneau-separator-FjQdQ6";
-var trigger = "panneau-trigger-3OeZeM";
-var value = "panneau-value-J-b74F";
-var chevron = "panneau-chevron-w-papm";
+var listBox = "panneau-list-box";
+var item = "panneau-list-box-item";
+var itemText = "panneau-list-box-item-text";
+var itemLabel = "panneau-list-box-item-label";
+var itemDescription = "panneau-list-box-item-description";
+var check = "panneau-list-box-check";
+var placeholder = "panneau-list-box-placeholder";
+var empty = "panneau-list-box-empty";
+var separator = "panneau-list-box-separator";
+var trigger = "panneau-list-box-trigger";
+var value = "panneau-list-box-value";
+var chevron = "panneau-list-box-chevron";
 var ListBox_module_default = {
 	listBox,
 	item,

package/dist/select/ListBox.module.js.map

@@ -1 +1 @@
-{"version":3,"file":"ListBox.module.js","names":[],"sources":["../../src/select/ListBox.module.css"],"sourcesContent":["/* Options of selects, combo boxes and menus. */\n\n.listBox {\n    display: flex;\n    flex-direction: column;\n    max-height: inherit;\n    padding: var(--panneau-space-1);\n    overflow: auto;\n    outline: none;\n}\n\n.item {\n    display: flex;\n    align-items: center;\n    gap: var(--panneau-space-2);\n    min-height: var(--panneau-control-height-sm);\n    padding: var(--panneau-space-1) var(--panneau-space-2);\n    font-size: var(--panneau-font-size-control);\n    line-height: var(--panneau-line-height-tight);\n    color: var(--panneau-color-text);\n    cursor: default;\n    border-radius: var(--panneau-radius-sm);\n    outline: none;\n}\n\n.item[data-focused],\n.item[data-hovered] {\n    background-color: var(--panneau-color-hover);\n}\n\n.item[data-focus-visible] {\n    outline: var(--panneau-focus-width) solid var(--panneau-color-focus);\n    outline-offset: -2px;\n}\n\n.item[data-disabled] {\n    cursor: not-allowed;\n    opacity: 0.5;\n}\n\n.item[data-danger] {\n    color: var(--panneau-color-danger);\n}\n\n.itemText {\n    display: flex;\n    flex: 1 1 auto;\n    flex-direction: column;\n    min-width: 0;\n}\n\n.itemLabel {\n    overflow-wrap: anywhere;\n}\n\n.itemDescription {\n    font-size: var(--panneau-font-size-sm);\n    color: var(--panneau-color-text-muted);\n}\n\n.check {\n    flex: 0 0 auto;\n    width: 1rem;\n    color: var(--panneau-color-text);\n}\n\n.placeholder {\n    color: var(--panneau-color-text-muted);\n}\n\n.empty {\n    padding: var(--panneau-space-2);\n    font-size: var(--panneau-font-size-sm);\n    color: var(--panneau-color-text-muted);\n}\n\n.separator {\n    height: 1px;\n    margin: var(--panneau-space-1) 0;\n    background-color: var(--panneau-color-border);\n}\n\n.trigger {\n    justify-content: space-between;\n    gap: var(--panneau-space-2);\n    text-align: start;\n    cursor: pointer;\n}\n\n.value {\n    flex: 1 1 auto;\n    min-width: 0;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n}\n\n.value[data-placeholder] {\n    color: var(--panneau-color-text-muted);\n}\n\n.chevron {\n    color: var(--panneau-color-text-muted);\n}\n"],"mappings":""}
+{"version":3,"file":"ListBox.module.js","names":[],"sources":["../../src/select/ListBox.module.css"],"sourcesContent":["/* Options of selects, combo boxes and menus. */\n\n.listBox {\n    display: flex;\n    flex-direction: column;\n    max-height: inherit;\n    padding: var(--panneau-list-box-padding, var(--panneau-space-1));\n    overflow: auto;\n    outline: none;\n}\n\n.item {\n    display: flex;\n    align-items: center;\n    gap: var(--panneau-space-2);\n    min-height: var(--panneau-control-height-sm);\n    padding: var(--panneau-list-box-item-padding-y, calc(var(--panneau-row-padding-y) / 2))\n        var(--panneau-list-box-item-padding-x, var(--panneau-space-2));\n    font-size: var(--panneau-font-size-control);\n    line-height: var(--panneau-line-height-tight);\n    color: var(--panneau-color-text);\n    cursor: default;\n    border-radius: var(--panneau-list-box-item-radius, var(--panneau-radius-sm));\n    outline: none;\n}\n\n.item[data-focused],\n.item[data-hovered] {\n    background-color: var(--panneau-list-box-item-bg-hover, var(--panneau-color-hover));\n}\n\n.item[data-focus-visible] {\n    outline: var(--panneau-focus-width) solid var(--panneau-color-focus);\n    outline-offset: -2px;\n}\n\n.item[data-disabled] {\n    cursor: not-allowed;\n    opacity: 0.5;\n}\n\n.item[data-danger] {\n    color: var(--panneau-color-danger);\n}\n\n.itemText {\n    display: flex;\n    flex: 1 1 auto;\n    flex-direction: column;\n    min-width: 0;\n}\n\n.itemLabel {\n    overflow-wrap: anywhere;\n}\n\n.itemDescription {\n    font-size: var(--panneau-font-size-sm);\n    color: var(--panneau-color-text-muted);\n}\n\n.check {\n    flex: 0 0 auto;\n    width: 1rem;\n    color: var(--panneau-color-text);\n}\n\n.placeholder {\n    color: var(--panneau-color-text-muted);\n}\n\n.empty {\n    padding: var(--panneau-space-2);\n    font-size: var(--panneau-font-size-sm);\n    color: var(--panneau-color-text-muted);\n}\n\n.separator {\n    height: 1px;\n    margin: var(--panneau-space-1) 0;\n    background-color: var(--panneau-color-border);\n}\n\n.trigger {\n    justify-content: space-between;\n    gap: var(--panneau-space-2);\n    text-align: start;\n    cursor: pointer;\n}\n\n.value {\n    flex: 1 1 auto;\n    min-width: 0;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n}\n\n.value[data-placeholder] {\n    color: var(--panneau-color-text-muted);\n}\n\n.chevron {\n    color: var(--panneau-color-text-muted);\n}\n"],"mappings":""}

package/dist/select/Select.js

@@ -44,7 +44,7 @@ function Select$1(props) {
 		validationBehavior: "aria",
 		onBlur: onBlur !== void 0 ? () => onBlur() : void 0,
 		disabledKeys: items.filter((item) => item.disabled === true).map((item_0) => item_0.key),
-		className: cx(Field_module_default.field, className)
+		className: cx("panneau-select", Field_module_default.field, className)
 	};
 	const content = /* @__PURE__ */ jsxs(Fragment, { children: [
 		/* @__PURE__ */ jsx(FieldLabel, {

package/dist/select/Select.js.map

@@ -1 +1 @@
-{"version":3,"file":"Select.js","names":["item","key","value","onChange","Select","fieldStyles","_Fragment","styles","AriaSelect"],"sources":["../../src/select/Select.tsx"],"sourcesContent":["import { Check, ChevronDown } from 'lucide-react';\nimport type { Key } from 'react-aria-components';\nimport {\n    Select as AriaSelect,\n    Button,\n    ListBox,\n    ListBoxItem,\n    SelectValue,\n    Text,\n} from 'react-aria-components';\n\nimport {\n    type FieldChromeProps,\n    FieldDescription,\n    FieldErrors,\n    FieldLabel,\n    fieldStyles,\n} from '../field/FieldParts';\nimport { Icon } from '../icon/Icon';\nimport { messages } from '../intl/messages';\nimport { usePanneauIntl } from '../intl/usePanneauIntl';\nimport { PopoverSurface } from '../popover/Popover';\nimport { cx } from '../utils/cx';\nimport styles from './ListBox.module.css';\n\n/** The value of an option. */\nexport type OptionValue = string | number | boolean;\n\n/** A choice of a select, a radio group or a combo box. Same shape as the protocol's `Option`. */\nexport interface SelectOption {\n    value: OptionValue;\n    label: string;\n    description?: string;\n    disabled?: boolean;\n}\n\n/** Props of both single and multiple selects. */\nexport interface SelectBaseProps extends FieldChromeProps {\n    options: readonly SelectOption[];\n    /** Text shown without a value. Defaults to \"Select…\". */\n    placeholder?: string;\n    isRequired?: boolean;\n    isDisabled?: boolean;\n    name?: string;\n    autoFocus?: boolean;\n    onBlur?: () => void;\n    'aria-label'?: string;\n    id?: string;\n    /** Class name of the button that opens the options. */\n    triggerClassName?: string;\n    popoverClassName?: string;\n}\n\nexport interface SingleSelectProps extends SelectBaseProps {\n    multiple?: false;\n    /** The selected value, or `null`. */\n    value?: OptionValue | null;\n    onChange?: (value: OptionValue | null) => void;\n}\n\nexport interface MultipleSelectProps extends SelectBaseProps {\n    /** Several values can be selected. */\n    multiple: true;\n    value?: readonly OptionValue[];\n    onChange?: (value: OptionValue[]) => void;\n}\n\nexport type SelectProps = SingleSelectProps | MultipleSelectProps;\n\nconst EMPTY_KEY = '__panneau_empty__';\n\nfunction keyOf(options: readonly SelectOption[], value: OptionValue): Key | null {\n    const index = options.findIndex((option) => option.value === value);\n    return index === -1 ? null : String(index);\n}\n\nfunction valueOf(options: readonly SelectOption[], key: Key | null): OptionValue | null {\n    if (key === null || key === EMPTY_KEY) {\n        return null;\n    }\n    return options[Number(key)]?.value ?? null;\n}\n\n/**\n * A dropdown to pick one option, or several with `multiple`. Option values can be strings,\n * numbers or booleans. Unless `isRequired`, a single select has an empty choice first.\n */\nexport function Select(props: SelectProps) {\n    const intl = usePanneauIntl();\n    const {\n        options,\n        label,\n        description,\n        errors = [],\n        placeholder = intl.formatMessage(messages.selectPlaceholder),\n        isRequired = false,\n        isDisabled,\n        name,\n        autoFocus,\n        onBlur,\n        id,\n        className,\n        labelClassName,\n        descriptionClassName,\n        errorsClassName,\n        triggerClassName,\n        popoverClassName,\n    } = props;\n    const invalid = errors.length > 0;\n    const items = options.map((option, index) => ({ ...option, key: String(index) }));\n    const withEmpty = props.multiple !== true && !isRequired;\n\n    const shared = {\n        id,\n        name,\n        autoFocus,\n        isDisabled,\n        isRequired,\n        isInvalid: invalid,\n        placeholder,\n        'aria-label': props['aria-label'],\n        validationBehavior: 'aria' as const,\n        onBlur: onBlur !== undefined ? () => onBlur() : undefined,\n        disabledKeys: items.filter((item) => item.disabled === true).map((item) => item.key),\n        className: cx(fieldStyles.field, className),\n    };\n\n    const content = (\n        <>\n            <FieldLabel isRequired={isRequired} className={labelClassName}>\n                {label}\n            </FieldLabel>\n            <Button className={cx(fieldStyles.control, styles.trigger, triggerClassName)}>\n                <SelectValue className={styles.value} />\n                <Icon icon={ChevronDown} className={styles.chevron} />\n            </Button>\n            <FieldDescription className={descriptionClassName}>{description}</FieldDescription>\n            <FieldErrors errors={errors} className={errorsClassName} />\n            <PopoverSurface className={popoverClassName}>\n                <ListBox className={styles.listBox}>\n                    {withEmpty ? (\n                        <ListBoxItem id={EMPTY_KEY} textValue={placeholder} className={styles.item}>\n                            <span className={styles.check} />\n                            <span className={styles.placeholder}>{placeholder}</span>\n                        </ListBoxItem>\n                    ) : null}\n                    {items.map((item) => (\n                        <ListBoxItem\n                            key={item.key}\n                            id={item.key}\n                            textValue={item.label}\n                            className={styles.item}\n                        >\n                            {({ isSelected }) => (\n                                <>\n                                    <span className={styles.check}>\n                                        {isSelected ? <Icon icon={Check} size=\"sm\" /> : null}\n                                    </span>\n                                    <span className={styles.itemText}>\n                                        <Text slot=\"label\" className={styles.itemLabel}>\n                                            {item.label}\n                                        </Text>\n                                        {item.description !== undefined ? (\n                                            <Text\n                                                slot=\"description\"\n                                                className={styles.itemDescription}\n                                            >\n                                                {item.description}\n                                            </Text>\n                                        ) : null}\n                                    </span>\n                                </>\n                            )}\n                        </ListBoxItem>\n                    ))}\n                </ListBox>\n            </PopoverSurface>\n        </>\n    );\n\n    if (props.multiple === true) {\n        const { value, onChange } = props;\n        return (\n            <AriaSelect\n                {...shared}\n                selectionMode=\"multiple\"\n                value={\n                    value !== undefined\n                        ? value.flatMap((item) => {\n                              const key = keyOf(options, item);\n                              return key !== null ? [key] : [];\n                          })\n                        : undefined\n                }\n                onChange={(keys) =>\n                    onChange?.(\n                        keys.flatMap((key) => {\n                            const item = valueOf(options, key);\n                            return item !== null ? [item] : [];\n                        }),\n                    )\n                }\n            >\n                {content}\n            </AriaSelect>\n        );\n    }\n\n    const { value, onChange } = props;\n    return (\n        <AriaSelect\n            {...shared}\n            selectionMode=\"single\"\n            value={\n                value !== undefined ? (value !== null ? keyOf(options, value) : null) : undefined\n            }\n            onChange={(key) => onChange?.(valueOf(options, key))}\n        >\n            {content}\n        </AriaSelect>\n    );\n}\n"],"mappings":"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"}
+{"version":3,"file":"Select.js","names":["item","key","value","onChange","Select","fieldStyles","_Fragment","styles","AriaSelect"],"sources":["../../src/select/Select.tsx"],"sourcesContent":["import { Check, ChevronDown } from 'lucide-react';\nimport type { Key } from 'react-aria-components';\nimport {\n    Select as AriaSelect,\n    Button,\n    ListBox,\n    ListBoxItem,\n    SelectValue,\n    Text,\n} from 'react-aria-components';\n\nimport {\n    type FieldChromeProps,\n    FieldDescription,\n    FieldErrors,\n    FieldLabel,\n    fieldStyles,\n} from '../field/FieldParts';\nimport { Icon } from '../icon/Icon';\nimport { messages } from '../intl/messages';\nimport { usePanneauIntl } from '../intl/usePanneauIntl';\nimport { PopoverSurface } from '../popover/Popover';\nimport { cx } from '../utils/cx';\nimport styles from './ListBox.module.css';\n\n/** The value of an option. */\nexport type OptionValue = string | number | boolean;\n\n/** A choice of a select, a radio group or a combo box. Same shape as the protocol's `Option`. */\nexport interface SelectOption {\n    value: OptionValue;\n    label: string;\n    description?: string;\n    disabled?: boolean;\n}\n\n/** Props of both single and multiple selects. */\nexport interface SelectBaseProps extends FieldChromeProps {\n    options: readonly SelectOption[];\n    /** Text shown without a value. Defaults to \"Select…\". */\n    placeholder?: string;\n    isRequired?: boolean;\n    isDisabled?: boolean;\n    name?: string;\n    autoFocus?: boolean;\n    onBlur?: () => void;\n    'aria-label'?: string;\n    id?: string;\n    /** Class name of the button that opens the options. */\n    triggerClassName?: string;\n    popoverClassName?: string;\n}\n\nexport interface SingleSelectProps extends SelectBaseProps {\n    multiple?: false;\n    /** The selected value, or `null`. */\n    value?: OptionValue | null;\n    onChange?: (value: OptionValue | null) => void;\n}\n\nexport interface MultipleSelectProps extends SelectBaseProps {\n    /** Several values can be selected. */\n    multiple: true;\n    value?: readonly OptionValue[];\n    onChange?: (value: OptionValue[]) => void;\n}\n\nexport type SelectProps = SingleSelectProps | MultipleSelectProps;\n\nconst EMPTY_KEY = '__panneau_empty__';\n\nfunction keyOf(options: readonly SelectOption[], value: OptionValue): Key | null {\n    const index = options.findIndex((option) => option.value === value);\n    return index === -1 ? null : String(index);\n}\n\nfunction valueOf(options: readonly SelectOption[], key: Key | null): OptionValue | null {\n    if (key === null || key === EMPTY_KEY) {\n        return null;\n    }\n    return options[Number(key)]?.value ?? null;\n}\n\n/**\n * A dropdown to pick one option, or several with `multiple`. Option values can be strings,\n * numbers or booleans. Unless `isRequired`, a single select has an empty choice first.\n */\nexport function Select(props: SelectProps) {\n    const intl = usePanneauIntl();\n    const {\n        options,\n        label,\n        description,\n        errors = [],\n        placeholder = intl.formatMessage(messages.selectPlaceholder),\n        isRequired = false,\n        isDisabled,\n        name,\n        autoFocus,\n        onBlur,\n        id,\n        className,\n        labelClassName,\n        descriptionClassName,\n        errorsClassName,\n        triggerClassName,\n        popoverClassName,\n    } = props;\n    const invalid = errors.length > 0;\n    const items = options.map((option, index) => ({ ...option, key: String(index) }));\n    const withEmpty = props.multiple !== true && !isRequired;\n\n    const shared = {\n        id,\n        name,\n        autoFocus,\n        isDisabled,\n        isRequired,\n        isInvalid: invalid,\n        placeholder,\n        'aria-label': props['aria-label'],\n        validationBehavior: 'aria' as const,\n        onBlur: onBlur !== undefined ? () => onBlur() : undefined,\n        disabledKeys: items.filter((item) => item.disabled === true).map((item) => item.key),\n        className: cx('panneau-select', fieldStyles.field, className),\n    };\n\n    const content = (\n        <>\n            <FieldLabel isRequired={isRequired} className={labelClassName}>\n                {label}\n            </FieldLabel>\n            <Button className={cx(fieldStyles.control, styles.trigger, triggerClassName)}>\n                <SelectValue className={styles.value} />\n                <Icon icon={ChevronDown} className={styles.chevron} />\n            </Button>\n            <FieldDescription className={descriptionClassName}>{description}</FieldDescription>\n            <FieldErrors errors={errors} className={errorsClassName} />\n            <PopoverSurface className={popoverClassName}>\n                <ListBox className={styles.listBox}>\n                    {withEmpty ? (\n                        <ListBoxItem id={EMPTY_KEY} textValue={placeholder} className={styles.item}>\n                            <span className={styles.check} />\n                            <span className={styles.placeholder}>{placeholder}</span>\n                        </ListBoxItem>\n                    ) : null}\n                    {items.map((item) => (\n                        <ListBoxItem\n                            key={item.key}\n                            id={item.key}\n                            textValue={item.label}\n                            className={styles.item}\n                        >\n                            {({ isSelected }) => (\n                                <>\n                                    <span className={styles.check}>\n                                        {isSelected ? <Icon icon={Check} size=\"sm\" /> : null}\n                                    </span>\n                                    <span className={styles.itemText}>\n                                        <Text slot=\"label\" className={styles.itemLabel}>\n                                            {item.label}\n                                        </Text>\n                                        {item.description !== undefined ? (\n                                            <Text\n                                                slot=\"description\"\n                                                className={styles.itemDescription}\n                                            >\n                                                {item.description}\n                                            </Text>\n                                        ) : null}\n                                    </span>\n                                </>\n                            )}\n                        </ListBoxItem>\n                    ))}\n                </ListBox>\n            </PopoverSurface>\n        </>\n    );\n\n    if (props.multiple === true) {\n        const { value, onChange } = props;\n        return (\n            <AriaSelect\n                {...shared}\n                selectionMode=\"multiple\"\n                value={\n                    value !== undefined\n                        ? value.flatMap((item) => {\n                              const key = keyOf(options, item);\n                              return key !== null ? [key] : [];\n                          })\n                        : undefined\n                }\n                onChange={(keys) =>\n                    onChange?.(\n                        keys.flatMap((key) => {\n                            const item = valueOf(options, key);\n                            return item !== null ? [item] : [];\n                        }),\n                    )\n                }\n            >\n                {content}\n            </AriaSelect>\n        );\n    }\n\n    const { value, onChange } = props;\n    return (\n        <AriaSelect\n            {...shared}\n            selectionMode=\"single\"\n            value={\n                value !== undefined ? (value !== null ? keyOf(options, value) : null) : undefined\n            }\n            onChange={(key) => onChange?.(valueOf(options, key))}\n        >\n            {content}\n        </AriaSelect>\n    );\n}\n"],"mappings":"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"}

package/dist/select/listBoxTokens.d.ts

@@ -0,0 +1,3 @@
+/** Tokens of the options of `Select`, `ComboBox` and `Menu`. */
+export declare const listBoxTokens: import("..").ComponentTokens<"list-box", "panneau-list-box-padding" | "panneau-list-box-item-padding-y" | "panneau-list-box-item-padding-x" | "panneau-list-box-item-radius" | "panneau-list-box-item-bg-hover">;
+//# sourceMappingURL=listBoxTokens.d.ts.map

package/dist/select/listBoxTokens.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"listBoxTokens.d.ts","sourceRoot":"","sources":["../../src/select/listBoxTokens.ts"],"names":[],"mappings":"AAEA,gEAAgE;AAChE,eAAO,MAAM,aAAa,kNAWxB,CAAC"}

package/dist/select/listBoxTokens.js

@@ -0,0 +1,19 @@
+import { defineComponentTokens } from "../theme/componentTokens.js";
+//#region src/select/listBoxTokens.ts
+/** Tokens of the options of `Select`, `ComboBox` and `Menu`. */
+var listBoxTokens = defineComponentTokens("list-box", {
+	/** Padding around the options. */
+	padding: "var(--panneau-space-1)",
+	/** Vertical padding of an option. */
+	"item-padding-y": "calc(var(--panneau-row-padding-y) / 2)",
+	/** Horizontal padding of an option. */
+	"item-padding-x": "var(--panneau-space-2)",
+	/** Corner radius of an option. */
+	"item-radius": "var(--panneau-radius-sm)",
+	/** Background of a focused or hovered option. */
+	"item-bg-hover": "var(--panneau-color-hover)"
+});
+//#endregion
+export { listBoxTokens };
+
+//# sourceMappingURL=listBoxTokens.js.map

package/dist/select/listBoxTokens.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"listBoxTokens.js","names":[],"sources":["../../src/select/listBoxTokens.ts"],"sourcesContent":["import { defineComponentTokens } from '../theme/componentTokens';\n\n/** Tokens of the options of `Select`, `ComboBox` and `Menu`. */\nexport const listBoxTokens = defineComponentTokens('list-box', {\n    /** Padding around the options. */\n    padding: 'var(--panneau-space-1)',\n    /** Vertical padding of an option. */\n    'item-padding-y': 'calc(var(--panneau-row-padding-y) / 2)',\n    /** Horizontal padding of an option. */\n    'item-padding-x': 'var(--panneau-space-2)',\n    /** Corner radius of an option. */\n    'item-radius': 'var(--panneau-radius-sm)',\n    /** Background of a focused or hovered option. */\n    'item-bg-hover': 'var(--panneau-color-hover)',\n});\n"],"mappings":";;;AAGA,IAAa,gBAAgB,sBAAsB,YAAY;;CAE3D,SAAS;;CAET,kBAAkB;;CAElB,kBAAkB;;CAElB,eAAe;;CAEf,iBAAiB;AACrB,CAAC"}

package/dist/spinner/Spinner.css

@@ -1,40 +1,40 @@
-.panneau-spinner-iIx6pg {
+.panneau-spinner {
     display: inline-flex;
     align-items: center;
     gap: var(--panneau-space-2);
     color: var(--panneau-color-text-muted);
 }
 
-.panneau-circle-A2p14W {
+.panneau-spinner-circle {
     display: inline-block;
     flex: 0 0 auto;
     width: 1.25em;
     height: 1.25em;
-    border: 2px solid currentColor;
+    border: var(--panneau-spinner-border-width, 2px) solid currentColor;
     border-right-color: transparent;
     border-radius: var(--panneau-radius-full);
-    animation: panneau-spin-qVmYu0 0.7s linear infinite;
+    animation: panneau-spinner-spin 0.7s linear infinite;
 }
 
-.panneau-sm-JoTrRC .panneau-circle-A2p14W {
+.panneau-spinner-sm .panneau-spinner-circle {
     width: 1em;
     height: 1em;
 }
 
-.panneau-lg-PkO03p .panneau-circle-A2p14W {
+.panneau-spinner-lg .panneau-spinner-circle {
     width: 2em;
     height: 2em;
     border-width: 3px;
 }
 
-@keyframes panneau-spin-qVmYu0 {
+@keyframes panneau-spinner-spin {
     to {
         transform: rotate(360deg);
     }
 }
 
 @media (prefers-reduced-motion: reduce) {
-    .panneau-circle-A2p14W {
+    .panneau-spinner-circle {
         animation-duration: 2s;
     }
 }

package/dist/spinner/Spinner.js

@@ -12,7 +12,7 @@ function Spinner({ label, showLabel = false, size = "md", className }) {
 	return /* @__PURE__ */ jsxs(ProgressBar, {
 		isIndeterminate: true,
 		"aria-label": text,
-		className: cx(Spinner_module_default.spinner, Spinner_module_default[size], className),
+		className: cx("panneau-spinner", Spinner_module_default.spinner, Spinner_module_default[size], className),
 		children: [/* @__PURE__ */ jsx("span", {
 			className: Spinner_module_default.circle,
 			"aria-hidden": "true"

package/dist/spinner/Spinner.js.map

@@ -1 +1 @@
-{"version":3,"file":"Spinner.js","names":["styles"],"sources":["../../src/spinner/Spinner.tsx"],"sourcesContent":["import { ProgressBar } from 'react-aria-components';\n\nimport { messages } from '../intl/messages';\nimport { usePanneauIntl } from '../intl/usePanneauIntl';\nimport { cx } from '../utils/cx';\nimport styles from './Spinner.module.css';\n\nexport interface SpinnerProps {\n    /** Accessible label, and visible text with `showLabel`. Defaults to \"Loading…\". */\n    label?: string;\n    /** Shows the label next to the spinner. */\n    showLabel?: boolean;\n    size?: 'sm' | 'md' | 'lg';\n    className?: string;\n}\n\n/** An indeterminate progress indicator, announced as loading. */\nexport function Spinner({ label, showLabel = false, size = 'md', className }: SpinnerProps) {\n    const intl = usePanneauIntl();\n    const text = label ?? intl.formatMessage(messages.loading);\n    return (\n        <ProgressBar\n            isIndeterminate\n            aria-label={text}\n            className={cx(styles.spinner, styles[size], className)}\n        >\n            <span className={styles.circle} aria-hidden=\"true\" />\n            {showLabel ? <span>{text}</span> : null}\n        </ProgressBar>\n    );\n}\n"],"mappings":";;;;;;;;AAiBA,SAAgB,QAAQ,EAAE,OAAO,YAAY,OAAO,OAAO,MAAM,aAA2B;CACxF,MAAM,OAAO,eAAe;CAC5B,MAAM,OAAO,SAAS,KAAK,cAAc,SAAS,OAAO;CACzD,OACI,qBAAC,aAAD;EACI,iBAAA;EACA,cAAY;EACZ,WAAW,GAAGA,uBAAO,SAASA,uBAAO,OAAO,SAAS;EAHzD,UAAA,CAKI,oBAAC,QAAD;GAAM,WAAWA,uBAAO;GAAQ,eAAY;EAAM,CAAA,GACjD,YAAY,oBAAC,QAAD,EAAA,UAAO,KAAW,CAAA,IAAI,IAC1B;;AAErB"}
+{"version":3,"file":"Spinner.js","names":["styles"],"sources":["../../src/spinner/Spinner.tsx"],"sourcesContent":["import { ProgressBar } from 'react-aria-components';\n\nimport { messages } from '../intl/messages';\nimport { usePanneauIntl } from '../intl/usePanneauIntl';\nimport { cx } from '../utils/cx';\nimport styles from './Spinner.module.css';\n\nexport interface SpinnerProps {\n    /** Accessible label, and visible text with `showLabel`. Defaults to \"Loading…\". */\n    label?: string;\n    /** Shows the label next to the spinner. */\n    showLabel?: boolean;\n    size?: 'sm' | 'md' | 'lg';\n    className?: string;\n}\n\n/** An indeterminate progress indicator, announced as loading. */\nexport function Spinner({ label, showLabel = false, size = 'md', className }: SpinnerProps) {\n    const intl = usePanneauIntl();\n    const text = label ?? intl.formatMessage(messages.loading);\n    return (\n        <ProgressBar\n            isIndeterminate\n            aria-label={text}\n            className={cx('panneau-spinner', styles.spinner, styles[size], className)}\n        >\n            <span className={styles.circle} aria-hidden=\"true\" />\n            {showLabel ? <span>{text}</span> : null}\n        </ProgressBar>\n    );\n}\n"],"mappings":";;;;;;;;AAiBA,SAAgB,QAAQ,EAAE,OAAO,YAAY,OAAO,OAAO,MAAM,aAA2B;CACxF,MAAM,OAAO,eAAe;CAC5B,MAAM,OAAO,SAAS,KAAK,cAAc,SAAS,OAAO;CACzD,OACI,qBAAC,aAAD;EACI,iBAAA;EACA,cAAY;EACZ,WAAW,GAAG,mBAAmBA,uBAAO,SAASA,uBAAO,OAAO,SAAS;EAH5E,UAAA,CAKI,oBAAC,QAAD;GAAM,WAAWA,uBAAO;GAAQ,eAAY;EAAM,CAAA,GACjD,YAAY,oBAAC,QAAD,EAAA,UAAO,KAAW,CAAA,IAAI,IAC1B;;AAErB"}

package/dist/spinner/Spinner.module.js

@@ -1,10 +1,10 @@
 import "./Spinner.css";
 //#region src/spinner/Spinner.module.css
-var spinner = "panneau-spinner-iIx6pg";
-var circle = "panneau-circle-A2p14W";
-var spin = "panneau-spin-qVmYu0";
-var sm = "panneau-sm-JoTrRC";
-var lg = "panneau-lg-PkO03p";
+var spinner = "panneau-spinner";
+var circle = "panneau-spinner-circle";
+var spin = "panneau-spinner-spin";
+var sm = "panneau-spinner-sm";
+var lg = "panneau-spinner-lg";
 var Spinner_module_default = {
 	spinner,
 	circle,

package/dist/spinner/Spinner.module.js.map

@@ -1 +1 @@
-{"version":3,"file":"Spinner.module.js","names":[],"sources":["../../src/spinner/Spinner.module.css"],"sourcesContent":[".spinner {\n    display: inline-flex;\n    align-items: center;\n    gap: var(--panneau-space-2);\n    color: var(--panneau-color-text-muted);\n}\n\n.circle {\n    display: inline-block;\n    flex: 0 0 auto;\n    width: 1.25em;\n    height: 1.25em;\n    border: 2px solid currentColor;\n    border-right-color: transparent;\n    border-radius: var(--panneau-radius-full);\n    animation: spin 0.7s linear infinite;\n}\n\n.sm .circle {\n    width: 1em;\n    height: 1em;\n}\n\n.lg .circle {\n    width: 2em;\n    height: 2em;\n    border-width: 3px;\n}\n\n@keyframes spin {\n    to {\n        transform: rotate(360deg);\n    }\n}\n\n@media (prefers-reduced-motion: reduce) {\n    .circle {\n        animation-duration: 2s;\n    }\n}\n"],"mappings":""}
+{"version":3,"file":"Spinner.module.js","names":[],"sources":["../../src/spinner/Spinner.module.css"],"sourcesContent":[".spinner {\n    display: inline-flex;\n    align-items: center;\n    gap: var(--panneau-space-2);\n    color: var(--panneau-color-text-muted);\n}\n\n.circle {\n    display: inline-block;\n    flex: 0 0 auto;\n    width: 1.25em;\n    height: 1.25em;\n    border: var(--panneau-spinner-border-width, 2px) solid currentColor;\n    border-right-color: transparent;\n    border-radius: var(--panneau-radius-full);\n    animation: spin 0.7s linear infinite;\n}\n\n.sm .circle {\n    width: 1em;\n    height: 1em;\n}\n\n.lg .circle {\n    width: 2em;\n    height: 2em;\n    border-width: 3px;\n}\n\n@keyframes spin {\n    to {\n        transform: rotate(360deg);\n    }\n}\n\n@media (prefers-reduced-motion: reduce) {\n    .circle {\n        animation-duration: 2s;\n    }\n}\n"],"mappings":""}

package/dist/spinner/tokens.d.ts

@@ -0,0 +1,3 @@
+/** Tokens of Spinner. */
+export declare const spinnerTokens: import("..").ComponentTokens<"spinner", "panneau-spinner-border-width">;
+//# sourceMappingURL=tokens.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"tokens.d.ts","sourceRoot":"","sources":["../../src/spinner/tokens.ts"],"names":[],"mappings":"AAEA,yBAAyB;AACzB,eAAO,MAAM,aAAa,yEAGxB,CAAC"}

package/dist/spinner/tokens.js

@@ -0,0 +1,10 @@
+import { defineComponentTokens } from "../theme/componentTokens.js";
+//#region src/spinner/tokens.ts
+/** Tokens of Spinner. */
+var spinnerTokens = defineComponentTokens("spinner", { 
+/** Width of the ring. */
+"border-width": "2px" });
+//#endregion
+export { spinnerTokens };
+
+//# sourceMappingURL=tokens.js.map

package/dist/spinner/tokens.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tokens.js","names":[],"sources":["../../src/spinner/tokens.ts"],"sourcesContent":["import { defineComponentTokens } from '../theme/componentTokens';\n\n/** Tokens of Spinner. */\nexport const spinnerTokens = defineComponentTokens('spinner', {\n    /** Width of the ring. */\n    'border-width': '2px',\n});\n"],"mappings":";;;AAGA,IAAa,gBAAgB,sBAAsB,WAAW;;AAE1D,gBAAgB,MACpB,CAAC"}