@esportsplus/ui 0.57.0 → 0.58.0

package/README.md

@@ -71,16 +71,19 @@ html`
 |-----------|-------------|----------|
 | `button` | Standard button; `button.hold` confirms on a press-and-hold, inverting the whole button as it fills, or only the label with `button--hold-text` (`--fill-color`); `button.morph` is an async save (`onsave`) that morphs into a spinner circle, confirms with a check and shakes on failure, with `--morph-background` for its colour | `button.fan`, `button.hold`, `button.morph`, `button--hold-text` |
 | `tooltip` | Popup content; `tooltip.onhover` also opens on keyboard focus and closes on Escape, and `tooltip.onhover.trigger({ delay, state })` is the same behaviour to spread on your own `.tooltip` element; `delay: { open?, close? }` (ms, on `tooltip.onhover` and `tooltip.shared`; each left out is instant) holds the pointer before opening and after leaving, and for 500ms after a delayed tooltip closes the next opens at once, without its entrance; `tooltip.menu` is a keyboard menu (arrows, Home/End, Escape returns focus, Tab closes) that closes once an option is chosen; `tooltip.nestedMenu({ animate, items, onnavigate, state })` is a drill-down menu whose `items` nest to any depth: a branch's panel grows out of its row over the dimmed parent, and its header or the parent's scrim goes back; arrows/Home/End move, Right/Left drill and return, Escape goes back a level then closes (`animate: false` skips the motion, `tooltip.nestedMenu.trigger` styles the button); `tooltip.shared({ delay, direction, dismiss, interactive, keep, state })` is one tooltip for any number of triggers: spread `tip.bind(content)` on a trigger (a string, or a function returning a template, rendered on every open unless `keep`), or `tip.delegate({ content, edge, selector })` on a container to make every matching descendant a trigger (default `[data-tooltip]`, its value the content; `edge` lines the tooltip up past the container's edge), and place `tip.render(attributes)` once; it opens in the top layer beside the trigger, flips when out of room, and glides between triggers while its content slides in the direction of travel; `interactive` makes it a card the pointer can enter, toggled by taps and keys, with Tab carried into it; `keep` mounts each bound trigger's content on its first open and keeps it for reopening until that trigger unmounts; `dismiss` is a selector whose clicks inside close it (`'a[href]'` for navigation); `state.active` is whether it is open and `state.index` which bound trigger, numbered in `bind()` order (-1 for none), and setting it opens that trigger | `tooltip.context`, `tooltip.menu`, `tooltip.nestedMenu`, `tooltip.onclick`, `tooltip.onhover`, `tooltip.onhover.trigger`, `tooltip.shared` |
-| `accordion` | Collapsible sections | - |
+| `accordion` | Collapsible sections driven by `state.active`; `group` (from `accordion.group()`) keeps at most one member open, closing the rest when one opens, and `accordion.group({ required: true })` keeps exactly one open, reopening a member closed while nothing else is. Several opened at once leave the last to join or open; a required group opens its first member when none starts open. Members join while mounted | `accordion.group` |
 | `clipboard` | Copy to clipboard | `clipboard.copy`, `clipboard.write` |
 | `copy` | Icon button copying `value` (a string or a function read on click); the copy icon turns into a check that draws in, then back after `timeout` ms (default `3000`); `label`, `success` and `error` set its accessible name per state | - |
 | `command` | ⌘K/Ctrl+K command palette on `overlay` + `input`: substring-then-subsequence matching with highlighted runs, grouped results, arrow/Enter keys, `onrun`; `tabs` adds a row of tabs under the search, marked by `highlight`, whose views are `frame--swap`s, drifting in from their side, and cycle with Tab/Shift+Tab (All leads with recent commands, persisted through any `store` implementing `get`/`set`, then lists every command; each command group gets its own tab; a Shortcuts tab lists `shortcuts`); setting `state.tab` (`'all'`, `'shortcuts'` or a group name) switches views and clears the search. `render(groups)` supplies custom result markup: each item exposes its `label`, highlighted `content`, command `id`, and `attributes` to spread onto the option element so selection and keyboard navigation keep working. Icons are sprite ids; `.command-trigger` also styles standalone search buttons | `command.dialog` (e.g. `overlay--blur`), `command.input`, `command.option`, `command.trigger`, `command--centered` |
-| `editor` | Editor family under one namespace. `editor.code` is a source editor on a persistent native textarea editing an `EditorDocument` that keeps its own undo history: syntax colors (TypeScript/TSX, JavaScript, CSS/SCSS, HTML, JSON, Python, Markdown), line numbers, multiple and rectangular selections, find/replace, go to line, folding, wrap, visible whitespace and a minimap; `options.services` adds completion, hover and diagnostics from a language-server `transport` (or completes from the document's own words); `editor.markdown` renders Markdown in place and edits one block at a time; `editor.code` adds sticky scroll, color swatches, links, unicode warnings, rulers, a git gutter (`baseline`), keybinding overrides (`keybindings`, exported `commands`) and merge-conflict lenses; `editor.tree` is the file tree, with drops from the desktop (`operations.import`), dragging files out (`export`) and next/previous change or problem; `editor.diffs` is a split or unified diff viewer and `editor.diffs.merge` a three-way merge editor; `editor.workspace` combines them with an explorer, tabs, quick open and file operations over a host you supply | `editor.code`, `editor.diffs`, `editor.diffs.merge`, `editor.markdown`, `editor.tree`, `editor.workspace` |
+| `editor` | Editor family under one namespace. `editor.code` is a source editor on a persistent native textarea editing an `EditorDocument` that keeps its own undo history: syntax colors (TypeScript/TSX, JavaScript, CSS/SCSS, HTML, JSON, Python, Markdown), line numbers, multiple and rectangular selections, find/replace, go to line, folding, wrap, visible whitespace and a minimap; `options.services` adds completion, hover and diagnostics from a language-server `transport` (or completes from the document's own words); `editor.markdown` renders Markdown in place and edits one block at a time; `editor.code` adds sticky scroll, color swatches, links, unicode warnings, rulers, a git gutter (`baseline`), keybinding overrides (`keybindings`, exported `commands`) and merge-conflict lenses; `editor.tree` is the file tree, with drops from the desktop (`operations.import`), dragging files out (`export`) and next/previous change or problem; `editor.diffs` is a split or unified diff viewer and `editor.diffs.merge` a three-way merge editor; `editor.workspace` combines them with an explorer, tabs, quick open and file operations over a host you supply; `editor.viewer` shows source read-only with syntax colors, line numbers, folding, wrap, visible whitespace, a minimap and an optional copy button, without the editor (import `@esportsplus/ui/editor/viewer` directly to leave the rest of the family out of the bundle) | `editor.code`, `editor.diffs`, `editor.diffs.merge`, `editor.markdown`, `editor.tree`, `editor.viewer`, `editor.workspace` |
 | `alert` | Notifications | error, info, success types |
 | `chatMinimap` | Rail of lines mapping a conversation, one per turn: the hovered line swells its two neighbours either side, one gliding `tooltip.shared` card previews each turn's `title` and `description`, previous/next buttons step through the thread, and `state` (`start`/`end`) lights the turns in view. `turns` may be a `ReactiveArray` so the rail grows with the chat; `chatMinimap.spy({ state, turns })` drives `state` from an `IntersectionObserver` on the thread and its `scrollTo` is the `onnavigate` | `chatMinimap.item`, `side: 'left'` |
 | `dock` | macOS-style `card` shelf whose icons swell toward the cursor on a spring, with delayed `tooltip` labels (`group` shares one gliding `tooltip.shared` label) and a hop-and-squash launch that lights a running dot (per-item `state.running`, `onlaunch`) | `dock.button`, `dock--square` |
 | `card.expand` | List of `card--expand` cards that each morph into their own `card` `overlay` and fly back into their slot through a view transition (a plain `overlay` fade where unsupported, a cross-fade under reduced motion); `state.open` is two-way | `card.expand.trigger` |
 | `pagination.dots` | Page indicator driven by a continuous `state.progress`; the pill stretches between dots like a worm, with an optional autoplay countdown | `pagination.dots.dot`, `pagination--dots-large` |
+| `pagination.cards` | Previous and next links as two cards, each a small `label` (default 'Previous'/'Next'), a `title` and an optional `description`; the chevron nudges the way it points on hover and focus, and a lone next card keeps the right column | `{ next, previous }`, each `{ description?, href, label?, title }` |
+| `pagination.arrows` | The same links as two square arrow buttons; a missing side stays in place, disabled, so the pair never shifts | `{ next, previous }` |
+| `nav` | `nav.tree` link tree whose highlight glides between links, solid (`current: 'page'`) or soft over a rule down their edge (`'location'`), marking the active link with a background, a border or both (`indicator: 'background' | 'border' | 'both'`); `nav.toc` table of contents; `nav.spy(ids)` marks the section in view within whichever ancestor scrolls it | `nav.tree`, `nav.toc`, `nav.spy` |
 | `pullToRefresh` | Rubber-band pull gesture (touch and mouse) with a stepped tick spinner; new items above the old first one slide in | - |
 | `sortable` | Drag-and-drop reordering of a reactive list's items, across lists with `group` | `sortable--{effect}` modifiers |
 | `story` | Auto-advancing stories, each any `Renderable`, on a `frame--slide` track with segmented progress bars whose CSS fill is the timer (`--duration`, or `duration` in ms); tap the left third to go back (replaying the first story) and the rest to advance, drag or flick between stories (rubber-banding at the ends), press-and-hold or Space to pause; links and controls inside a story keep their own clicks | `story.toggle` |
@@ -94,7 +97,7 @@ html`
 | `typewriter` | Animated typing effect; `typewriter.retype` is a headline word that is selected and typed over with a jittered, human rhythm, landing whole words under reduced motion. Both share the caret variables and `--block`/`--hard`/`--underscore` modifiers. `typewriter.rotate` is a rotating word (`state.index`, `state.paused`) whose shared letters glide into place while the others blur out and in; `typewriter-rotate--accent` |
 | `highlight` | Layer that glides behind its parent's children on hover and focus and rests on the `--active` one (`target` for nested items, `hover: false` for the active layer only); `line: 'bottom' \| 'left' \| 'right' \| 'top'` adds an edge line to the active layer with both fills kept `--line-inset` clear of it, `fill: false` drops the active background, `--glide-tail-duration-active` longer than `--glide-duration-active` stretches it toward the next item, `--inset-block` / `--inset-inline` pull the fill in from the item |
 | `ellipsis` | Animated dots |
-| `icon` | SVG sprite wrapper |
+| `icon` | SVG sprite wrapper; `icon--rotate` turns it by `--rotate` (default `0deg`) with an eased transition, skipped under reduced motion |
 | `number` | Number formatting |
 | `truncate` | Text truncation |
 | `json` | JSON display |
@@ -109,7 +112,7 @@ html`
 ### Layout
 | Component | Description |
 |-----------|-------------|
-| `scrollbar` | `--scrollbar-scope` on a site or subtree root styles that root and its descendants, with smooth scrolling (instant under reduced motion); overscroll containment applies to the scope root and explicit `--scrollbar` containers, allowing clipped descendants to pass wheel input to their scroller. Containers keep their own overflow and gutters, while children can override inherited variables or add scrollbar modifiers without the base class. `--scrollbar-behavior` and `--scrollbar-overscroll` customize scrolling. All visible variants use arrowless custom bars in Chromium/WebKit: `--scrollbar-size` sets the thumb's resting width (default `6px`; `--scrollbar-auto` uses the platform width), widening to `--scrollbar-size-hover` (default `--scrollbar-size` + `2px`, which is also the gutter width) while hovered or dragged; `--scrollbar-align` places that growth (default `0` hugs the window edge and grows toward the content, `0.5` grows both ways), and `--scrollbar-rail-color` paints the track (default `transparent`, also used natively elsewhere); and `--scrollbar-border-radius` rounds it (defaults to a third of `--scrollbar-size`, `3px` under `--scrollbar-auto`; use `0px` for square corners). The thumb follows the token state system: `--scrollbar-color-default`, `--scrollbar-color-hover` and `--scrollbar-color-pressed` (default black `400`/`300`/`500`), or a color modifier such as `--scrollbar-blue`. `--scrollbar-hidden` hides the bar. Other browsers retain native rendering, with `--scrollbar-width` (default `thin`) accepting `auto`, `thin`, or `none`, the default color, and native thumb corners. `--scrollbar-horizontal` scrolls x only; edge effects driven by scroll timelines, each edge reaching full strength once the content has scrolled the effect's size (`--scroll-fade-size`, `--scroll-blur-size`) past it, and running along x when combined with `--scrollbar-horizontal` (`import { scrollbar } from '@esportsplus/ui/css-utilities'`): the `--scrollbar-fade` class works alone and leaves custom bars unfaded, with `scrollbar.fade()` adding a JS fallback only where timelines are unsupported, while blur needs `scrollbar.blur()`, which inserts the sticky blur edges (the `--scrollbar-blur` class alone renders nothing) and adds the same fallback; a horizontal blur lays the scroller out as a flex row so the edges sit beside its content; `scrollbar.drag('horizontal' \| 'vertical' \| 'both')` adds mouse drag-to-scroll (`--scrollbar-drag`) |
+| `scrollbar` | Spread `scrollbar(options)` on a scroller; it adds `--scrollbar` and one class per option. `--scrollbar-scope` on a site or subtree root styles that root and its descendants, with smooth scrolling (instant under reduced motion); overscroll containment applies to the scope root and `scrollbar()` containers, allowing clipped descendants to pass wheel input to their scroller. Containers keep their own overflow and gutters, while children can override inherited variables or add scrollbar classes such as `--scrollbar-blue` without the base class. `--scrollbar-behavior` and `--scrollbar-overscroll` customize scrolling. All visible variants use arrowless custom bars in Chromium/WebKit: `--scrollbar-size` sets the thumb's resting width (default `6px`; `auto: true` uses the platform width), widening to `--scrollbar-size-hover` (default `--scrollbar-size` + `2px`, which is also the gutter width) while hovered or dragged; `--scrollbar-align` places that growth (default `0` hugs the window edge and grows toward the content, `0.5` grows both ways), and `--scrollbar-rail-color` paints the track (default `transparent`, also used natively elsewhere); and `--scrollbar-border-radius` rounds it (defaults to a third of `--scrollbar-size`, `3px` under `auto: true`; use `0px` for square corners). The thumb follows the token state system: `--scrollbar-color-default`, `--scrollbar-color-hover` and `--scrollbar-color-pressed` (default black `400`/`300`/`500`), or `color` such as `scrollbar({ color: 'blue' })`. `hidden: true` hides the bar and `hover: true` paints it only while hovered or focused; `snap: true` snaps children to center. Other browsers retain native rendering, with `--scrollbar-width` (default `thin`) accepting `auto`, `thin`, or `none`, the default color, and native thumb corners. `horizontal: true` scrolls x only; edge effects driven by scroll timelines, each edge reaching full strength once the content has scrolled the effect's size (`--scrollbar-fade-size`, `--scrollbar-blur-size`) past it, and running along x when combined with `horizontal` (`import { scrollbar } from '@esportsplus/ui/modifiers'`): `scrollbar({ fade: true })` leaves custom bars unfaded and adds a JS fallback only where timelines are unsupported, while `scrollbar({ blur: true })` inserts the sticky blur edges and adds the same fallback; a horizontal blur lays the scroller out as a flex row so the edges sit beside its content; `scrollbar({ drag })` adds mouse drag-to-scroll (`--scrollbar-drag`), along both axes for `true` or one for `'horizontal'` \| `'vertical'`, and combines with `blur` or `fade` (one edge effect per scroller) |
 | `card.scss` | Surface (background, radius, shadow and padding variables); `card--morph` makes it a shell that morphs between stacked `card-morph-layer`s inside a clipping `card-morph-viewport`: size it through `--morph-width`/`--morph-height`, each layer is a `frame frame--swap` (mark the shown one `--active`, set `--i` on the viewport and `--n` on each layer), `card--instant` snaps; `--morph-*` variables tune the motion |
 | `frame.scss` | Sibling frames sharing one spot, the `--active` one shown: instant by default, `frame--slide` / `frame--scroll` move them like a horizontal / vertical track, `frame--swap` crossfades in place with a directional drift and blur (the `tooltip.shared` swap); shared by `command`, `tooltip.shared` and `card--morph` |
 | `overlay` | Native `<dialog>` driven by `state.active` (Esc and backdrop click close it), placed by `overlay--c` (default), an edge (`overlay--n`, `overlay--s`, `overlay--w`, `overlay--e`) or a corner (`overlay--ne`, `overlay--se`, `overlay--sw`, `overlay--nw`, which enter and drag off by their top or bottom edge); placements slide in from their side on the iOS drawer curve and square the corners they touch unless `overlay--floating`. Every overlay but a rail drags to dismiss (toward its edge, or downward when centered) past 25% or on a flick, rubber-bands inward and fades the backdrop with the drag; when its own content scrolls, touch drags only from `overlay.handle`. Overlays opened over one another stack: each covered layer shrinks, dims and peeks out from under the one above (`--stack-scale`, `--stack-dim`, `--stack-peek`) and follows the top layer back as it is dragged away; an `overlay-page` direct child of `<body>` (or of a non-modal overlay's container) recedes the same way; `modal: false` opens without a backdrop, leaves the page interactive and sits in its positioned container; `flow: true` keeps it non-modal in the page layout, preserves focus, skips layer stacking, and collapses its parent row during vertical drag dismissal (used by `announcement`); `rail: true` keeps it open non-modal and widens it while a mouse hovers or keyboard focus is inside (or `state.active` is set) from `--width-closed` to `--max-width`, clipping rows rather than reflowing them. Motion: `overlay--fade`, `overlay--scale`, `overlay--spring`, `overlay--alert`, `overlay--blur` |
@@ -289,8 +292,7 @@ Styles are organized into layers for proper cascade:
 ```
 @layer normalize
 @layer components
-@layer themes
-@layer css-utilities
+@layer modifiers
 ```
 
 ### Importing Styles
@@ -302,14 +304,14 @@ Styles are organized into layers for proper cascade:
 // Specific component
 @use '@esportsplus/ui/button.scss';
 
-// CSS utilities
-@use '@esportsplus/ui/css-utilities.scss';
+// One family of placeholders, to extend
+@use '@esportsplus/ui/css-utilities/flex.scss';
 
 // Design tokens
 @use '@esportsplus/ui/tokens.scss';
 
 // Theme
-@use '@esportsplus/ui/themes/dark/*.scss';
+@use '@esportsplus/ui/theme.scss';
 ```
 
 ### Icons
@@ -330,28 +332,57 @@ plugin. `check.svg` carries no stroke styling, so set `fill: none` and a `stroke
 
 Located in `tokens.scss`:
 
-- **Colors**: `--color-{name}-{300|400|500}` (black, white, red, green, blue, purple, yellow, grey)
+- **Colors**: `--color-{name}` (black, blue, green, grey, purple, red, white, yellow), each written once and weighted at the root as `--color-{name}-{300|400|500}`: 400 itself, 300 and 500 the mode's `color` step (in `$themes` `surface`) lightness points lighter and darker
+- **Theme colors**: `--color-surface`, `--color-primary-{300|400|500}` and `--color-text-{300|400|500}`, the only colors that change with the mode, declared by the theme stylesheet (see Theming)
 - **Sizing**: `--size-{300-800}` (12px-80px)
 - **Spacing**: `--spacing-{0-600}`
 - **Border**: `--border-radius-{100-900}`, `--border-width-{100-700}`
+- **Blur**: `--blur-{300|400|500}` (2px, 4px, 8px)
 - **Typography**: `--font-size-*`, `--font-weight-*`; line height adjusts automatically to each element's font size.
 
+### Modifiers
+
+Modifiers add behavior to existing elements, so each is used through its script, which loads its styles and sets up
+what its `--*` classes need: `scrollbar` (`--scrollbar*`) and `glass()`, spread as attributes.
+
+```typescript
+import { glass, scrollbar } from '@esportsplus/ui/modifiers';
+```
+
 ### CSS Utilities
 
-```html
-<!-- Layout -->
-<div class="--flex --flex-center --gap-200">
+Layout, color, text, surface, font and loading styles are Sass placeholders, extended on your own selectors. Each
+family is its own stylesheet, used where it is extended, so a stylesheet only emits what it extends:
 
-<!-- Spacing -->
-<div class="--margin-400 --padding-200">
+```scss
+@use '@esportsplus/ui/css-utilities/background.scss';
+@use '@esportsplus/ui/css-utilities/flex.scss';
+@use '@esportsplus/ui/css-utilities/text.scss';
 
-<!-- Typography -->
-<p class="--text-uppercase --color-grey-400">
+.toolbar {
+    @extend %background-surface, %flex-vertical;
+}
 
-<!-- States -->
-<div class="--skeleton">
+.headline {
+    @extend %text-gradient;
+}
 ```
 
+- **absolute**, **anchor**, **layer** and **reset**: positioning, overlay placement and resets.
+- **background**, **border**, **box-shadow** and **color**: the `%*-state` placeholders, whose `-default`, `-hover`,
+  `-pressed` and `-active` variables drive every state, and `%*-{color}` for `primary`, `text` and each palette color,
+  plus `-default` and `-surface`.
+- **flex**: `%flex-{center|column|end|fill|fixed|horizontal|row|start|vertical}`; set `--gap-horizontal` and
+  `--gap-vertical` to space children.
+- **text**: `%text`, `%text-crop` (`-top`, `-bottom`, `-first-child`, `-last-child`), `%text-gradient`,
+  `%text-line-shadow`, `%text-shiny` and `%text-truncate`.
+- **surface**: `%surface-raised` / `%surface-sunken` (painted) and their `-level` forms (counted).
+- **font/geist**, **font/montserrat**: see Fonts.
+- **drag**, **hidden**, **icon**, **inline** and **skeleton** (painted from `--from` to `--to`).
+
+Sass functions and mixins (`css-variables`, the surface color mixins, list, map and string helpers) stay in
+`@esportsplus/ui/shared.scss`.
+
 ### Component Variables
 
 Each component exposes CSS custom properties:
@@ -369,14 +400,59 @@ Each component exposes CSS custom properties:
 ## Theming
 
 ```typescript
-// JavaScript
-import '@esportsplus/ui/themes/dark';
+import theme from '@esportsplus/ui/theme';
+
+let mode = theme();
 
-// SCSS
-@use '@esportsplus/ui/themes/dark/*.scss';
+mode.set('dark'); // 'dark' | 'light' | 'system'
 ```
 
-Themes override component variables. Create custom themes by overriding CSS custom properties.
+`theme.scss` declares the only colors that change with the mode once on `:root`, as a `light-dark()` of their light and
+dark values: `--color-surface` (the page, a 99% neutral in light and `black-400` in dark), `--color-primary-*` (its
+opposite, `black-*` in light and `white-*` in dark), `--color-text` (text, one color, which is `--color-text-400`;
+`--color-text-300` and `-500` derive from it in CSS, each holding the mode's `text` contrast in `$themes` against it, so
+setting `--color-text` on `:root` moves all three). It also sets `--background`, `--color` and `color-scheme: light dark`, so with no script at all the page
+follows the operating system.
+
+`light-dark()` picks its side where a color is used, by that element's `color-scheme`. `data-theme="light"` or
+`data-theme="dark"` pins it: `mode.set()` writes the attribute to `<html>`, and `'system'` removes it. Any element
+can carry the attribute to render its subtree in the other mode. Text and shadows follow the mode on their own; for
+anything else, wrap two palette colors in `light-dark()`, such as
+`light-dark(var(--color-white-300), var(--color-black-300))` for a surface. A palette token alone stays constant.
+
+Layers (cards, popovers, menus, dialogs, buttons) are surfaces: each counts a level above whatever it sits in, through
+the `--surface-level` custom property, and reads its colors from that level instead of naming one. A surface reads its
+parent's level with a container style query, so it counts up even set directly inside another surface; levels stop at 6.
+Its tokens follow the state names components use, `default`, `hover`, `active` and `pressed`:
+`--surface-background-*` steps the default from `--color-surface` by the lightness points in each mode's `$themes`
+`surface` map, raised levels lighter and sunken ones darker (in light mode raised levels climb to white, leaving further
+elevation to the shadow), then moves it for each state, active and hover lighter and pressed darker in both modes;
+`--surface-border-*` moves the matching `--surface-background-*` by the mode's `border` step, darker in light and
+lighter in dark, for lines, rings and small marks; and `--surface-shadow-*` is the
+shadow at the layer's `--surface-shadow-weight`, a step on Tailwind v4's `shadow-2xs` to `shadow-2xl` ladder (1 to 7),
+a step heavier on hover and a step lighter when pressed. The weight follows the level (sunken layers 0, dialogs 7);
+set it on a surface to pick another step, a fraction landing between two. A shadow takes the color of what it falls
+on, that background deepened in its own hue, at the mode's shadow `opacity`; `--surface-shadow-
+color` is that color for whatever casts onto a layer, for component shadows and scrims. A quiet fill, such as a track
+or an inline code chip, is a surface of its own a level below what holds it. Dialogs reset the stack to level 1 wherever they open. Another level is never a color to paint: a
+component reaches it by extending `%surface-raised` or `%surface-sunken` (painted), or `%surface-raised-level` or
+`%surface-sunken-level` (counted, for components that route background and shadow through their own variables), so
+whatever sits in it reads its states from the level it shows; sunken layers cast no shadow. Style queries on custom
+properties need Chrome and Edge 111, Safari 18 or Firefox 151; elsewhere every surface keeps its parent's level. The
+ladder and shadows live in each mode's `surface` map in `$themes` (`tokens/scss/color.scss`), with `shadow` holding its
+`depth` and `opacity`; the Tailwind shadow ladder itself sits with the surface utilities, and `surface.shadow($weight)`
+writes a fixed step's shadow.
+
+Ready-made pickers drive the same instance:
+
+```typescript
+import { themePicker } from '@esportsplus/ui/components';
+
+themePicker.toggle({ mode });             // the current choice's icon; hover or click morphs it into a row of every choice
+                                          // over the button, closing on a pick, a click outside, Escape or the pointer leaving
+themePicker.cards({ mode });              // miniature page previews
+themePicker.swatches({ mode });           // round swatches
+```
 
 ## Build
 
@@ -396,31 +472,39 @@ build/
 │   │   ├── index.d.ts
 │   │   └── scss/index.scss
 │   └── index.js
-├── css-utilities/
-│   └── font/
-└── themes/
-    ├── dark/
-    └── light/
+├── modifiers/
+│   └── {modifier}/
+│       ├── index.js
+│       ├── index.d.ts
+│       └── scss/index.scss
+└── css-utilities/
+    └── font/          # Geist Mono, which components that set code bring with them
 ```
 
 ## Fonts
 
-Import the font stylesheet and apply its family class to `html` or `body`:
+Use the font's stylesheet and extend one of its family placeholders on `html` or `body`:
 
-```typescript
-import '@esportsplus/ui/css-utilities/font/montserrat.scss';
+```scss
+@use '@esportsplus/ui/css-utilities/font/montserrat.scss';
 
-document.documentElement.classList.add('--font-montserrat');
+body {
+    @extend %font-montserrat-uniwidth;
+}
 ```
 
-`@esportsplus/ui/css-utilities/font/geist.scss` includes Geist Sans and Geist Mono,
-selected with `--font-geist` and `--font-geist-mono`. The aggregate
-`@esportsplus/ui/css-utilities.scss` includes all three families.
+`@esportsplus/ui/css-utilities/font/geist.scss` includes Geist Sans and Geist Mono, extended as `%font-geist` and
+`%font-geist-mono`. Each `-uniwidth` placeholder is its family plus tracking that tightens as the weight rises, so a
+label changing weight keeps its width, as a uniwidth font's would; extend it in place of the family, not beside it.
 
-Family classes define `--font-family` and their `--font-weight-*` token maps.
+Family placeholders define `--font-family` and their `--font-weight-*` token maps.
 Components consume these variables through their own `font-family` and
-`font-weight` declarations. Nested family classes override the inherited tokens.
-The root component no longer chooses Montserrat automatically.
+`font-weight` declarations. A family extended on a nested element overrides the inherited tokens.
+The root component no longer chooses Montserrat automatically, and there is no
+fallback: the app sets its family. Components that set code and figures in
+monospace (the editors, `cc`, the color picker, the usage meter, inline edit and
+normalize's `code`/`pre`) load Geist Mono themselves by extending
+`%font-geist-mono`, whatever family the page uses.
 
 Fonts are bundled as local assets for the consuming app to serve; no runtime CDN
 is required. Geist Sans and Geist Mono include variable weights 100–900 in normal

package/build/components/accordion/group.d.ts

@@ -0,0 +1,14 @@
+type Group = {
+    members: Set<State>;
+    required: boolean;
+};
+type State = {
+    active: boolean | number;
+};
+declare const settle: (group: Group, state: State) => void;
+export default _default;
+declare function _default({ required }?: {
+    required?: boolean;
+}): Group;
+export { settle };
+export type { Group };

package/build/components/accordion/group.js

@@ -0,0 +1,21 @@
+const settle = (group, state) => {
+    if (state.active) {
+        for (let other of group.members) {
+            if (other !== state) {
+                other.active = false;
+            }
+        }
+        return;
+    }
+    if (!group.required) {
+        return;
+    }
+    for (let other of group.members) {
+        if (other.active) {
+            return;
+        }
+    }
+    state.active = true;
+};
+export default ({ required = false } = {}) => ({ members: new Set(), required });
+export { settle };

package/build/components/accordion/index.d.ts

@@ -1,4 +1,5 @@
 import * as template_u1 from '@esportsplus/template';
+import { type Group } from './group.js';
 import './scss/index.scss';
 declare const _default: {
     (): template_u1.Renderable<any>;
@@ -717,6 +718,7 @@ declare const _default: {
         onactivetouchstart?: ((this: HTMLElement, event: TouchEvent) => void) | undefined;
         onactivewheel?: ((this: HTMLElement, event: WheelEvent) => void) | undefined;
     } & Record<PropertyKey, unknown> & {
+        group?: Group;
         lines?: number;
         state?: {
             active: boolean | number;
@@ -1439,6 +1441,7 @@ declare const _default: {
         onactivetouchstart?: ((this: HTMLElement, event: TouchEvent) => void) | undefined;
         onactivewheel?: ((this: HTMLElement, event: WheelEvent) => void) | undefined;
     } & Record<PropertyKey, unknown> & {
+        group?: Group;
         lines?: number;
         state?: {
             active: boolean | number;
@@ -2161,6 +2164,7 @@ declare const _default: {
             onactivetouchstart?: ((this: HTMLElement, event: TouchEvent) => void) | undefined;
             onactivewheel?: ((this: HTMLElement, event: WheelEvent) => void) | undefined;
         } & Record<PropertyKey, unknown> & {
+            group?: Group;
             lines?: number;
             state?: {
                 active: boolean | number;
@@ -2169,5 +2173,10 @@ declare const _default: {
         }> | undefined;
         content?: template_u1.Renderable<any>;
     }): any;
+} & {
+    group: ({ required }?: {
+        required?: boolean;
+    }) => Group;
 };
 export default _default;
+export type { Group };

package/build/components/accordion/index.js

@@ -1,9 +1,10 @@
 import * as reactivity_u0 from '@esportsplus/reactivity';
-import { effect } from '@esportsplus/reactivity';
+import { effect, untrack } from '@esportsplus/reactivity';
 import * as template_u1 from '@esportsplus/template';
 import { component } from '@esportsplus/template';
 import { observeSize } from '../../shared/resize.js';
 import { trackTransition } from '../../shared/transition.js';
+import group, { settle } from './group.js';
 import './scss/index.scss';
 const template_04mlrpv4 = template_u1.template(`<div class='accordion'><div class='accordion-content'>`);
 class ReactiveObject_04mlrpv0 extends reactivity_u0.ReactiveObject {
@@ -56,7 +57,7 @@ class ReactiveObject_04mlrpv2 extends reactivity_u0.ReactiveObject {
         reactivity_u0.write(this.#instant, _v1);
     }
 }
-export default component(function ({ lines, state = new ReactiveObject_04mlrpv0(), ...attributes }, content) {
+const accordion = component(function ({ group, lines, state = new ReactiveObject_04mlrpv0(), ...attributes }, content) {
     let a, c, property = lines === undefined ? 'grid-template-rows' : 'height', ui = new ReactiveObject_04mlrpv1(), viewport;
     let motion = trackTransition(property, (running, element) => {
         ui.scrollable = !!state.active && !!element && !running;
@@ -65,10 +66,20 @@ export default component(function ({ lines, state = new ReactiveObject_04mlrpv0(
         let active = !!state.active;
         ui.scrollable = false;
         if (!active) {
-            viewport?.scrollTo({ top: 0, behavior: 'instant' });
+            viewport?.scrollTo({ behavior: 'instant', top: 0 });
         }
         motion.settle();
     });
+    if (group) {
+        effect(() => {
+            state.active;
+            untrack(() => {
+                if (group.members.has(state)) {
+                    settle(group, state);
+                }
+            });
+        });
+    }
     if (lines !== undefined) {
         let measured = new ReactiveObject_04mlrpv2();
         a = {
@@ -103,8 +114,13 @@ export default component(function ({ lines, state = new ReactiveObject_04mlrpv0(
             onconnect: (element) => {
                 viewport = element;
                 motion.attributes.onconnect(element);
+                if (group) {
+                    group.members.add(state);
+                    settle(group, state);
+                }
             },
             ondisconnect: () => {
+                group?.members.delete(state);
                 motion.attributes.ondisconnect();
                 viewport = undefined;
             }
@@ -112,3 +128,4 @@ export default component(function ({ lines, state = new ReactiveObject_04mlrpv0(
         return root_04mlrpv3;
     })();
 });
+export default Object.assign(accordion, { group });

package/build/components/accordion/scss/index.scss

@@ -1,2 +1,2 @@
-@layer components{.accordion--more{--focus-color:var(--color-primary-400);--max-height:320px;--transition-timing-function:cubic-bezier(.22, 1, .36, 1)}.accordion{--scrollbar-overflow:hidden;--scrollbar-gutter:stable;overflow:var(--scrollbar-overflow,hidden);grid-template-rows:1fr;transition:grid-template-rows .3s;display:grid}.accordion.--active.accordion--scrollable{--scrollbar-overflow:auto}.accordion:not(.--active){grid-template-rows:0fr}.accordion-content{min-height:0;display:flow-root;overflow:clip}.accordion--more{height:min(var(--height,100vh), var(--lines) * 1lh);overflow-y:var(--scrollbar-overflow,hidden);overscroll-behavior:contain;transition:height var(--transition-duration) var(--transition-timing-function);display:block}.accordion--more:focus-visible{border-radius:var(--border-radius-300);outline:var(--border-width-400) solid var(--focus-color);outline-offset:var(--size-100)}.accordion--more.accordion--instant{transition:none}.accordion--more.--active{height:min(var(--height,var(--max-height)), var(--max-height))}.accordion--more:not(.--active){overflow:hidden}@media (prefers-reduced-motion:reduce){.accordion{transition:none}}}
+@layer components{.accordion{--scrollbar-gutter:stable;--scrollbar-overflow:hidden;--transition-duration:var(--duration-moderate-exit)}.accordion.--active{--transition-duration:var(--duration-moderate)}.accordion.--active.accordion--scrollable{--scrollbar-overflow:auto}.accordion--more{--focus-color:var(--color-accent-400);--max-height:320px}.accordion{overflow:var(--scrollbar-overflow,hidden);transition:grid-template-rows var(--transition-duration) var(--transition-timing-function);grid-template-rows:1fr;display:grid}.accordion:not(.--active){grid-template-rows:0fr}.accordion--more{height:min(var(--height,100vh), var(--lines) * 1lh);overflow-y:var(--scrollbar-overflow,hidden);overscroll-behavior:contain;transition:height var(--transition-duration) var(--transition-timing-function);display:block}.accordion--more.accordion--instant{transition:none}.accordion--more:focus-visible{border-radius:var(--border-radius-300);outline:var(--border-width-400) solid var(--focus-color);outline-offset:var(--size-100)}.accordion--more.--active{height:min(var(--height,var(--max-height)), var(--max-height))}.accordion--more:not(.--active){overflow:hidden}.accordion-content{min-height:0;display:flow-root;overflow:clip}@media (prefers-reduced-motion:reduce){.accordion{transition:none}}}
 /*$vite$:1*/

package/build/components/announcement/scss/index.scss

@@ -1,2 +1,2 @@
-@layer components{.announcement{--announcement-drawer:cubic-bezier(.32, .72, 0, 1);--announcement-ease:cubic-bezier(.23, 1, .32, 1)}.announcement-content.overlay{--close-duration:.24s;--ease:var(--announcement-drawer);--fade-duration:.12s;--open-duration:.28s}.announcement-content.overlay.--active{--fade-duration:.2s}@media (prefers-reduced-motion:reduce){.announcement-content.overlay{--close-duration:0s;--open-duration:0s}}.announcement{transition:grid-template-rows .24s var(--announcement-drawer);grid-template-rows:0fr;display:grid;overflow:hidden}.announcement-content.overlay{filter:blur(2px);transition:filter var(--fade-duration) var(--announcement-ease), opacity var(--fade-duration) var(--announcement-ease), transform var(--transition-duration) var(--announcement-drawer), translate var(--transition-duration) var(--announcement-drawer)}.announcement-content.overlay.--active{filter:blur()}.announcement-content.overlay.overlay--dragging{transition:none}.announcement.--active{transition:grid-template-rows .28s var(--announcement-drawer);grid-template-rows:1fr}@media (prefers-reduced-motion:reduce){.announcement,.announcement.--active{transition:none}.announcement-content.overlay,.announcement-content.overlay.--active{filter:none;transition:opacity .2s var(--announcement-ease)}}}
+@layer components{.announcement{--announcement-drawer:var(--easing-spring);--announcement-ease:var(--easing-spring)}.announcement-content.overlay{--close-duration:var(--duration-slow-exit);--ease:var(--announcement-drawer);--fade-duration:var(--duration-fast-exit);--open-duration:var(--duration-slow)}.announcement-content.overlay.--active{--fade-duration:var(--duration-fast)}@media (prefers-reduced-motion:reduce){.announcement-content.overlay{--close-duration:0s;--open-duration:0s}}.announcement{transition:grid-template-rows var(--duration-slow-exit) var(--announcement-drawer);grid-template-rows:0fr;display:grid;overflow:hidden}.announcement-content.overlay{filter:blur(var(--blur-300));transition:filter var(--fade-duration) var(--announcement-ease), opacity var(--fade-duration) var(--announcement-ease), transform var(--transition-duration) var(--announcement-drawer), translate var(--transition-duration) var(--announcement-drawer)}.announcement-content.overlay.--active{filter:blur()}.announcement-content.overlay.overlay--dragging{transition:none}.announcement.--active{transition:grid-template-rows var(--duration-slow) var(--announcement-drawer);grid-template-rows:1fr}@media (prefers-reduced-motion:reduce){.announcement,.announcement.--active{transition:none}.announcement-content.overlay,.announcement-content.overlay.--active{filter:none;transition:opacity var(--fade-duration) var(--announcement-ease)}}}
 /*$vite$:1*/

package/build/components/breadcrumb/scss/index.scss

@@ -1,2 +1,2 @@
-@layer components{.breadcrumb-list,.breadcrumb-ruler{margin:0;padding:0;list-style:none}.breadcrumb-current{text-overflow:ellipsis;white-space:nowrap;max-width:100%;overflow:hidden}.breadcrumb{--color:var(--color-text-300);--color-active:var(--color-text-500);--ease-out:cubic-bezier(.23, 1, .32, 1);--enter-duration:.2s;--exit-duration:.12s;--focus-color:var(--color-text-500);--font-size:var(--font-size-300);--font-weight-current:var(--font-weight-500);--height:36px;--hover-background:oklch(from var(--color-text-500) l c h / .06);--link-padding:6px;--link-radius:var(--border-radius-300);--menu-background:var(--color-grey-400);--menu-box-shadow:0 0 0 var(--border-width-400) var(--color-border-300), var(--box-shadow-300);--menu-duration-in:.18s;--menu-duration-out:.1s;--menu-radius:var(--border-radius-600);--menu-width:192px;--option-color:var(--color-active);--option-icon-color:var(--color);--separator-color:oklch(from var(--color-text-300) l c h / .5);--separator-size:16px;--slide-duration:.31s;--slide-easing:linear(0, .0432 4.2%, .1402 8.3%, .2575 12.5%, .3764 16.7%, .4867 20.8%, .584 25%, .667 29.2%, .7361 33.3%, .7925 37.5%, .838 41.7%, .8743 45.8%, .9029 50%, .9254 54.2%, .9428 58.3%, .9564 62.5%, .9668 66.7%, .9748 70.8%, .9809 75%, .9856 79.2%, .9892 83.3%, .9918 87.5%, .9939 91.7%, .9954 95.8%, 1);--trigger-width:36px;--underline-color:oklch(from var(--color-text-500) l c h / .4)}.breadcrumb--compact{--height:28px;--link-padding:4px;--separator-size:14px;--trigger-width:28px}.breadcrumb--instant{--enter-duration:0s;--exit-duration:0s;--slide-duration:0s}.breadcrumb-menu.tooltip-content{--background-default:var(--menu-background);--border-radius:var(--menu-radius);--box-shadow:var(--menu-box-shadow);--offset:0px;--scale:.95;--spacer:6px;--transition-duration:var(--menu-duration-out);--transition-timing-function:cubic-bezier(.23, 1, .32, 1)}.breadcrumb-menu.tooltip-content.--active{--transition-duration:var(--menu-duration-in)}.breadcrumb-segment{--body-overflow:visible;--body-transition:overflow 0s linear var(--slide-duration) allow-discrete}.breadcrumb-segment--hidden{--body-overflow:hidden;--body-transition:none}@media (prefers-reduced-motion:reduce){.breadcrumb-menu.tooltip-content{--scale:1}}.breadcrumb{font-size:var(--font-size);width:100%;min-width:0;position:relative}.breadcrumb-current{color:var(--color-active);font-weight:var(--font-weight-current);padding-inline:var(--link-padding);display:block}.breadcrumb-link{border-radius:var(--link-radius);color:var(--color);height:var(--height);padding-inline:var(--link-padding);text-underline-offset:4px;touch-action:manipulation;-webkit-user-select:none;user-select:none;white-space:nowrap;outline:none;align-items:center;-webkit-text-decoration:underline #0000;text-decoration:underline #0000;transition:color .15s ease-out,scale .15s ease-out,text-decoration-color .15s ease-out;display:inline-flex}.breadcrumb-link:active{scale:.96}.breadcrumb-link:focus-visible{outline:2px solid var(--focus-color)}.breadcrumb-link:hover{color:var(--color-active);-webkit-text-decoration-color:var(--underline-color);-webkit-text-decoration-color:var(--underline-color);text-decoration-color:var(--underline-color)}.breadcrumb-list{height:var(--height);align-items:center;min-width:0;display:flex;position:relative}.breadcrumb-menu.tooltip-menu-panel{transform-origin:calc(var(--trigger-width) / 2) 0;width:var(--menu-width);outline:none;flex-direction:column;padding:4px;display:flex}.breadcrumb-menu-root.tooltip{cursor:default;display:flex}.breadcrumb-option-icon{color:var(--option-icon-color);flex-shrink:0;width:16px;height:16px}.breadcrumb-option.link{border-radius:var(--border-radius-400);color:var(--option-color);cursor:default;-webkit-user-select:none;user-select:none;background:0 0;outline:none;flex-wrap:nowrap;flex-shrink:0;align-items:center;gap:10px;height:36px;padding:0 8px;text-decoration:none;transition:none;display:flex}.breadcrumb-option.link:focus{background:var(--hover-background)}.breadcrumb-option.link[hidden]{display:none}.breadcrumb-ruler{pointer-events:none;visibility:hidden;white-space:nowrap;display:flex;position:absolute;top:0;left:0}.breadcrumb-ruler-segment{flex-shrink:0;align-items:center;display:flex}.breadcrumb-segment{transition:filter var(--enter-duration) var(--ease-out), grid-template-columns var(--slide-duration) var(--slide-easing), opacity var(--enter-duration) var(--ease-out);flex-shrink:0;grid-template-columns:1fr;align-items:center;display:grid}.breadcrumb-segment--current{flex-shrink:1;min-width:0}.breadcrumb-segment--hidden{filter:blur(4px);opacity:0;transition:filter 0s linear var(--exit-duration), grid-template-columns var(--slide-duration) var(--slide-easing), opacity var(--exit-duration) var(--ease-out), visibility 0s linear var(--slide-duration);visibility:hidden;grid-template-columns:0fr}.breadcrumb-segment-body{min-width:0;overflow:var(--body-overflow);transition:var(--body-transition);align-items:center;display:flex}.breadcrumb-separator{color:var(--separator-color);height:var(--separator-size);width:var(--separator-size);flex-shrink:0}.breadcrumb-space{width:var(--trigger-width);display:block}.breadcrumb-text{padding-inline:var(--link-padding)}.breadcrumb-text--current{font-weight:var(--font-weight-current)}.breadcrumb-trigger{border-radius:var(--link-radius);color:var(--color);cursor:pointer;height:calc(var(--height) - 4px);touch-action:manipulation;-webkit-user-select:none;user-select:none;width:var(--trigger-width);background:0 0;border:0;outline:none;justify-content:center;align-items:center;padding:0;transition:background-color .15s ease-out,color .15s ease-out,scale .15s ease-out;display:flex}.breadcrumb-trigger:active{scale:.96}.breadcrumb-trigger:focus-visible{outline:2px solid var(--focus-color)}.breadcrumb-trigger:hover,.breadcrumb-trigger[aria-expanded=true]{background:var(--hover-background);color:var(--color-active)}.breadcrumb-trigger-icon{width:16px;height:16px}@media (prefers-reduced-motion:reduce){.breadcrumb-link{transition:color .15s ease-out,text-decoration-color .15s ease-out}.breadcrumb-segment{filter:none;transition:opacity var(--enter-duration) var(--ease-out)}.breadcrumb-segment--hidden{transition:opacity var(--exit-duration) var(--ease-out), visibility 0s linear var(--exit-duration)}.breadcrumb-segment-body{transition-delay:0s}.breadcrumb-trigger{transition:background-color .15s ease-out,color .15s ease-out}}}
+@layer components{.breadcrumb-link{--color:var(--color-default);--color-active:var(--color-default);--color-default:var(--color-text-400);--color-hover:var(--color-default);--color-pressed:var(--color-default)}.--active.breadcrumb-link{--color:var(--color-active)}.breadcrumb-link:not(.--active):hover{--color:var(--color-hover)}.breadcrumb-link:not(.--active):active{--color:var(--color-pressed)}.breadcrumb-list,.breadcrumb-ruler{margin:0;padding:0;list-style:none}.breadcrumb-current{text-overflow:ellipsis;white-space:nowrap;max-width:100%;overflow:hidden}@keyframes text-gradient{to{background-position:var(--background-size) 0}}@keyframes text-line-shadow{0%{background-position:0 0}to{background-position:100% -100%}}@keyframes text-shiny{0%,90%,to{background-position:calc(-100% - var(--shine-width)) 0}30%,60%{background-position:calc(100% + var(--shine-width)) 0}}.breadcrumb{--color:var(--color-text-300);--color-active:var(--color-text-500);--enter-duration:var(--duration-moderate);--exit-duration:var(--duration-moderate-exit);--focus-color:var(--color-primary-500);--font-size:var(--font-size-300);--font-weight-current:var(--font-weight-500);--height:24px;--hover-background:var(--surface-background-hover);--link-color:var(--color);--link-color-hover:var(--color-active);--link-padding:calc(var(--size-300) / 2);--link-radius:var(--border-radius-300);--menu-radius:var(--border-radius-600);--menu-width:192px;--option-color:var(--color-active);--option-icon-color:var(--color);--separator-color:oklch(from var(--color-primary-300) l c h / .5);--separator-size:var(--size-400);--slide-duration:var(--duration-moderate);--slide-easing:var(--easing-spring);--trigger-width:var(--height);--underline-color:oklch(from var(--color-primary-500) l c h / .4)}.breadcrumb--compact{--height:var(--size-400);--link-padding:calc(var(--size-100) / 2);--separator-size:14px;--trigger-width:var(--height)}.breadcrumb--instant{--enter-duration:0s;--exit-duration:0s;--slide-duration:0s}.breadcrumb-menu.tooltip-content{--background-default:var(--surface-background-default);--border-radius:var(--menu-radius);--box-shadow-default:0 0 0 var(--border-width-400) var(--surface-border-default), var(--surface-shadow-default);--offset:0px;--scale:.95;--spacer:6px}.breadcrumb-segment{--body-overflow:visible;--body-transition:overflow 0s linear var(--slide-duration) allow-discrete}.breadcrumb-segment--hidden{--body-overflow:hidden;--body-transition:none}@media (prefers-reduced-motion:reduce){.breadcrumb-menu.tooltip-content{--scale:1}}.breadcrumb{font-size:var(--font-size);width:100%;min-width:0;position:relative}.breadcrumb-current{--font-weight:var(--font-weight-current);color:var(--color-active);font-weight:var(--font-weight);padding-inline:var(--link-padding);display:block}.breadcrumb-link{--color-default:var(--link-color);--color-hover:var(--link-color-hover);--color-pressed:var(--color-hover);border-radius:var(--link-radius);color:var(--color);height:var(--height);padding-inline:var(--link-padding);text-underline-offset:calc(var(--size-100) / 2);touch-action:manipulation;transition:color var(--duration-fast) var(--easing-spring), text-decoration-color var(--duration-fast) var(--easing-spring);-webkit-user-select:none;user-select:none;white-space:nowrap;outline:none;align-items:center;-webkit-text-decoration:underline #0000;text-decoration:underline #0000;display:inline-flex}.breadcrumb-link:focus-visible{outline:2px solid var(--focus-color)}.breadcrumb-link:hover{-webkit-text-decoration-color:var(--underline-color);-webkit-text-decoration-color:var(--underline-color);text-decoration-color:var(--underline-color)}.breadcrumb-list{height:var(--height);align-items:center;min-width:0;display:flex;position:relative}.breadcrumb-menu-root.tooltip{cursor:default;display:flex}.breadcrumb-menu.tooltip-menu-panel{padding:calc(var(--size-100) / 2);transform-origin:calc(var(--trigger-width) / 2) 0;width:var(--menu-width);outline:none;flex-direction:column;display:flex}.breadcrumb-option-icon{color:var(--option-icon-color);height:var(--size-400);width:var(--size-400);flex-shrink:0}.breadcrumb-option.link{border-radius:var(--border-radius-400);color:var(--option-color);cursor:default;align-items:center;gap:var(--size-200);height:36px;padding:0 var(--size-100);-webkit-user-select:none;user-select:none;background:0 0;outline:none;flex-wrap:nowrap;flex-shrink:0;text-decoration:none;transition:none;display:flex}.breadcrumb-option.link:focus{background:var(--hover-background)}.breadcrumb-option.link[hidden]{display:none}.breadcrumb-ruler{pointer-events:none;visibility:hidden;white-space:nowrap;display:flex;position:absolute;top:0;left:0}.breadcrumb-ruler-segment{flex-shrink:0;align-items:center;display:flex}.breadcrumb-segment{transition:filter var(--enter-duration) var(--easing-spring), grid-template-columns var(--slide-duration) var(--slide-easing), opacity var(--enter-duration) var(--easing-spring);flex-shrink:0;grid-template-columns:1fr;align-items:center;display:grid}.breadcrumb-segment--current{flex-shrink:1;min-width:0}.breadcrumb-segment--hidden{filter:blur(var(--blur-400));opacity:0;transition:filter 0s linear var(--exit-duration), grid-template-columns var(--slide-duration) var(--slide-easing), opacity var(--exit-duration) var(--easing-spring), visibility 0s linear var(--slide-duration);visibility:hidden;grid-template-columns:0fr}.breadcrumb-segment-body{min-width:0;overflow:var(--body-overflow);transition:var(--body-transition);align-items:center;display:flex}.breadcrumb-separator{color:var(--separator-color);height:var(--separator-size);width:var(--separator-size);flex-shrink:0}.breadcrumb-space{width:var(--trigger-width);display:block}.breadcrumb-text{padding-inline:var(--link-padding)}.breadcrumb-text--current{--font-weight:var(--font-weight-current);font-weight:var(--font-weight)}.breadcrumb-trigger{border-radius:var(--link-radius);color:var(--color);cursor:pointer;height:calc(var(--height) - 4px);touch-action:manipulation;transition:background-color var(--duration-fast) var(--easing-spring), color var(--duration-fast) var(--easing-spring);-webkit-user-select:none;user-select:none;width:var(--trigger-width);background:0 0;border:0;outline:none;justify-content:center;align-items:center;padding:0;display:flex}.breadcrumb-trigger-icon{height:var(--size-400);width:var(--size-400)}.breadcrumb-trigger:focus-visible{outline:2px solid var(--focus-color)}.breadcrumb-trigger:hover,.breadcrumb-trigger[aria-expanded=true]{background:var(--hover-background);color:var(--color-active)}@media (prefers-reduced-motion:reduce){.breadcrumb-segment{filter:none;transition:opacity var(--enter-duration) var(--easing-spring)}.breadcrumb-segment--hidden{transition:opacity var(--exit-duration) var(--easing-spring), visibility 0s linear var(--exit-duration)}.breadcrumb-segment-body{transition-delay:0s}}}
 /*$vite$:1*/

package/build/components/button/scss/index.scss

@@ -1,2 +1,2 @@
-@layer components{.button--processing:before{position:absolute;bottom:50%;right:50%;translate:50% 50%}.button:after,.button-fill{position:absolute;inset:0}.button{--background:var(--background-default);--background-active:var(--background-default);--background-default:transparent;--background-hover:var(--background-default);--background-pressed:var(--background-default)}.--active.button{--background:var(--background-active)}.button:not(.--active):hover{--background:var(--background-hover)}.button:not(.--active):active{--background:var(--background-pressed)}.button{--border-color:var(--border-color-default);--border-color-active:var(--border-color-default);--border-color-default:transparent;--border-color-hover:var(--border-color-default);--border-color-pressed:var(--border-color-default)}.--active.button{--border-color:var(--border-color-active)}.button:not(.--active):hover{--border-color:var(--border-color-hover)}.button:not(.--active):active{--border-color:var(--border-color-pressed)}.button{--color:var(--color-default);--color-active:var(--color-default);--color-default:var(--color-text-400);--color-hover:var(--color-default);--color-pressed:var(--color-default)}.--active.button{--color:var(--color-active)}.button:not(.--active):hover{--color:var(--color-hover)}.button:not(.--active):active{--color:var(--color-pressed)}.button-status,.button-morph-live{clip-path:inset(50%);white-space:nowrap;width:1px;height:1px;position:absolute;overflow:hidden}.button-icon,.button-morph-icon{fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round;stroke-width:2px}.button-icon--draw{stroke-dasharray:1;stroke-dashoffset:1px}.button-morph-icon{filter:blur(4px);opacity:0;transition:filter var(--icon-swap-duration) var(--icon-swap-timing-function), opacity var(--icon-swap-duration) var(--icon-swap-timing-function), scale var(--icon-swap-duration) var(--icon-swap-timing-function);scale:.25}@media (prefers-reduced-motion:reduce){.button-morph-icon{transition:none}}.button--morph-loading .button-morph-icon--loading,.button--morph-success .button-morph-icon--success{filter:blur();opacity:1;scale:1}.button-fill,.button:after{border-radius:inherit;pointer-events:none}.button:after{box-shadow:var(--box-shadow);content:"";transition:box-shadow var(--transition-duration) var(--transition-timing-function), opacity var(--transition-duration) var(--transition-timing-function);z-index:-1}.button{--border-width:0px;--color:var(--color-default,inherit);--color-active:var(--color-default);--color-default:var(--color-text-400);--color-hover:var(--color-default);--color-pressed:var(--color-default);--width:auto;color:var(--color);font-size:var(--font-size);font-weight:var(--font-weight);gap:var(--gap-vertical) var(--gap-horizontal);line-height:var(--line-height);transition:color var(--transition-duration) var(--transition-timing-function);width:var(--width);display:flex;position:relative}.--text-truncate.button{display:block}.button-fan{align-items:center;display:inline-flex;position:relative}.button-fan.--active{z-index:9}.button-fan.--active>.button-fan-options>.button-fan-option{--delay:calc(var(--i) * var(--stagger));opacity:1;pointer-events:auto;translate:0;scale:1}.button-fan.--active>.button-fan-options>.button-fan-option:active{scale:var(--option-pressed-scale)}.button-fan.--active>.button--fan .button-fan-swap>:first-child{opacity:0;rotate:var(--swap-rotate)}.button-fan.--active>.button--fan .button-fan-swap>:last-child{opacity:1;rotate:0deg}.button-fan-options{align-items:center;gap:var(--spacer);pointer-events:none;z-index:0;display:flex;position:absolute}.button-fan-swap{place-items:center;display:inline-grid}.button-fan-swap>*{transition:opacity var(--swap-spring-duration) var(--swap-spring), rotate var(--swap-spring-duration) var(--swap-spring);grid-area:1/1}.button-fan-swap>:last-child{opacity:0;rotate:calc(var(--swap-rotate) * -1)}.button-fan>.button-fan-options>.button-fan-option{--delay:calc((var(--n) - 1 - var(--i)) * var(--stagger));opacity:0;scale:var(--option-scale);transform-origin:var(--origin);transition:opacity var(--option-opacity-duration) ease-out var(--delay), scale var(--option-spring-duration) var(--option-spring) var(--delay), translate var(--option-spring-duration) var(--option-spring) var(--delay);translate:calc((100% + var(--spacer)) * (var(--i) + 1) * var(--direction-x)) calc((100% + var(--spacer)) * (var(--i) + 1) * var(--direction-y))}.button-fan>.button-fan-options>.button-fan-option:focus-visible,.button-fan>.button--fan:focus-visible{outline:var(--focus-width) solid var(--focus-color);outline-offset:var(--focus-offset)}.button-fan--e>.button-fan-options{padding-left:var(--spacer);flex-direction:row;inset:0 auto 0 100%}.button-fan--n>.button-fan-options{padding-bottom:var(--spacer);flex-direction:column-reverse;inset:auto 0 100%}.button-fan--s>.button-fan-options{padding-top:var(--spacer);flex-direction:column;inset:100% 0 auto}.button-fan--w>.button-fan-options{padding-right:var(--spacer);flex-direction:row-reverse;inset:0 100% 0 auto}@media (prefers-reduced-motion:reduce){.button-fan{--swap-rotate:0deg}.button-fan>.button-fan-options>.button-fan-option{transition:opacity .15s ease-out;translate:none;scale:1}.button-fan .button-fan-swap>*{transition:opacity .15s ease-out}}.button-kbd{align-items:center;gap:var(--gap);display:inline-flex}.button-kbd-plus.icon{--size:var(--plus-size);color:var(--plus-color)}.button.button--morph{height:var(--morph-height);touch-action:manipulation;-webkit-user-select:none;user-select:none;border:0;outline:none;transition:background-color .2s ease-out,color .2s ease-out,scale .2s ease-out;display:inline-flex;overflow:hidden}.button.button--morph:active:not([aria-disabled=true]){scale:var(--morph-scale-pressed)}.button.button--morph:focus-visible{outline:2px solid var(--morph-focus-color);outline-offset:2px}.button.button--morph[aria-disabled=true]{cursor:default}@media (prefers-reduced-motion:reduce){.button.button--morph{transition:background-color .2s ease-out,color .2s ease-out}.button.button--morph:active:not([aria-disabled=true]){scale:1}}.button--morph-error{animation:button-morph-shake var(--morph-shake-duration) var(--morph-shake-easing) .15s}.button-morph-content{flex-shrink:0;place-items:center;display:grid}.button-morph-icon{height:var(--morph-icon-size);width:var(--morph-icon-size);grid-area:1/1}.button-morph-spinner{transform-box:view-box;transform-origin:50%;animation:.7s linear infinite button--processing}.button-morph-text{filter:blur(4px);opacity:0;white-space:nowrap;grid-area:1/1;transition:filter .15s ease-out,opacity .15s ease-out}.button-morph-text.--active{filter:blur();opacity:1;transition-duration:.2s}@keyframes button-morph-shake{0%,to{translate:0}20%{translate:-6px}40%{translate:5px}60%{translate:-3px}80%{translate:2px}}.button-sidebar[aria-expanded=false],.button-sidebar[aria-expanded=true]:focus-visible{--divider-x:var(--divider-travel)}.button-sidebar[aria-expanded=false]:focus-visible{--divider-x:0px}@media (hover:hover){.button-sidebar[aria-expanded=false]:hover{--divider-x:0px}.button-sidebar[aria-expanded=true]:hover{--divider-x:var(--divider-travel)}}.button-sidebar-divider{transform:translateX(var(--divider-x));transition:transform var(--divider-duration) ease}@media (prefers-reduced-motion:reduce){.button-sidebar-divider{transition:none}}.button-sidebar-icon.icon{--size:var(--icon-size)}.button-sidebar-icon.icon .button-sidebar-graphic{fill:none;overflow:hidden}.button-sidebar-shadow{opacity:var(--shadow-opacity)}.button-sidebar--right .button-sidebar-graphic{scale:-1 1}.button-split{isolation:isolate;align-items:stretch;display:inline-flex}.button-split-chevron{transition:rotate var(--chevron-duration) var(--chevron-timing-function)}.button-split-menu{display:flex}.button-split-menu>.tooltip-menu-panel:not(.tooltip-menu-panel--expand){left:auto;right:0}.button-split>.button-split-action{border-start-end-radius:0;border-end-end-radius:0}.button-split>.button-split-menu>.button-split-trigger{--padding-horizontal:var(--trigger-padding-horizontal);border-start-start-radius:0;border-end-start-radius:0;margin-inline-start:calc(var(--border-width) * -1)}.button-split>.button-split-menu>.button-split-trigger[aria-expanded=true] .button-split-chevron{rotate:180deg}.button-split>.button-split-action:focus-visible,.button-split>.button-split-menu>.button-split-trigger:focus-visible{outline:var(--focus-width) solid var(--focus-color);outline-offset:var(--focus-offset);z-index:1}@media (prefers-reduced-motion:reduce){.button-split-chevron{transition:none}}.button{--border-color-default:var(--background);--box-shadow:var(--box-shadow-default);--box-shadow-default:none}.button--feedback{--draw-duration:.26s;--draw-timing-function:cubic-bezier(.23, 1, .32, 1);--error-color:var(--color-red-400);--face-blur:3px;--face-duration:.4s;--face-gap:.375em;--face-offset:3px;--face-timing-function:cubic-bezier(.23, 1, .32, 1);--icon-size:.875em;--spin-duration:.85s;--success-color:var(--color-green-500)}.button--hold{--fill-background:var(--color);--fill-color:var(--background)}.button--hold-text{--fill-background:transparent;--fill-color:var(--color-primary-400)}.button--kbd{--background-active:var(--color-text-500);--background-default:var(--color-white-300);--border-radius:var(--border-radius-300);--box-shadow-default:0 0 0 var(--border-width-400) var(--kbd-border-color), inset 0 calc(var(--border-width-400) * -1) 0 var(--kbd-border-color);--color-active:var(--color-white-300);--color-default:var(--color-text-300);--font-size:calc(var(--font-size-300) * .95);--kbd-border-color:var(--color-border-300);--kbd-size:24px;--line-height:1;--padding-horizontal:6px;--padding-vertical:0px;--transition-duration:.3s;--transition-timing-function:ease-out}.button--kbd.--active,.button--kbd:not(.--active):active{--background:var(--background-active);--box-shadow:none;--color:var(--color-active);--transition-duration:0s}.button--morph{--background-default:var(--morph-background);--border-radius:999px;--color-default:var(--morph-color);--font-size:var(--morph-font-size);--font-weight:var(--font-weight-500);--icon-swap-duration:.3s;--icon-swap-timing-function:var(--morph-spring);--line-height:20px;--morph-background:var(--color-text-500);--morph-background-error:var(--color-red-500);--morph-color:var(--color-white-300);--morph-color-error:var(--color-white-300);--morph-focus-color:color-mix(in oklab, var(--color-text-500) 38%, transparent);--morph-font-size:14px;--morph-height:40px;--morph-icon-size:16px;--morph-resize-duration:.3s;--morph-resize-easing:var(--morph-spring);--morph-scale-pressed:.96;--morph-shake-duration:.35s;--morph-shake-easing:ease-in-out;--morph-spring:linear(0, .057, .18, .321, .455, .573, .671, .75, .812, .86, .896, .924, .944, .96, .971, .979, .985, .989, .992, .994, .996, .997, .998, .999, 1);--padding-horizontal:20px;--padding-vertical:0px}@media (prefers-reduced-motion:reduce){.button--morph{--morph-resize-duration:0s;--morph-shake-duration:0s}}.button--morph-error{--background-default:var(--morph-background-error);--color-default:var(--morph-color-error)}.button--processing{--animation-duration:.64s;--border-width:var(--border-width-400);--processing-color:var(--color);--size:var(--size-400)}.button--skeleton{--animation-duration:6.4s}.button-fan{--focus-color:currentColor;--focus-offset:2px;--focus-width:2px;--option-opacity-duration:.2s;--option-pressed-scale:.92;--option-scale:.5;--option-spring:linear(0, .067, .221, .406, .586, .741, .862, .949, 1.006, 1.037, 1.051, 1.053, 1.047, 1.038, 1.028, 1.019, 1.011, 1.006, 1.002, .999, .998, .997, .997, .998, 1);--option-spring-duration:.6s;--spacer:var(--size-300);--stagger:30ms;--swap-rotate:90deg;--swap-spring:linear(0, .07, .228, .418, .602, .759, .88, .965, 1.019, 1.047, 1.058, 1.056, 1.048, 1.038, 1.027, 1.017, 1.009, 1.003, 1, .998, .997, .997, .997, .998, 1);--swap-spring-duration:.44s;--trigger-pressed-scale:.94}.button-fan--e{--direction-x:-1;--direction-y:0;--origin:left center}.button-fan--n{--direction-x:0;--direction-y:1;--origin:center bottom}.button-fan--s{--direction-x:0;--direction-y:-1;--origin:center top}.button-fan--w{--direction-x:1;--direction-y:0;--origin:right center}.button-kbd{--gap:var(--size-200);--plus-color:color-mix(in srgb, currentColor 60%, transparent);--plus-size:var(--size-300)}.button-sidebar{--divider-duration:.18s;--divider-travel:-12px;--divider-x:0px;--icon-size:var(--size-400);--shadow-opacity:.2}.button-split{--chevron-duration:.2s;--chevron-timing-function:cubic-bezier(.23, 1, .32, 1);--focus-color:currentColor;--focus-offset:2px;--focus-width:2px;--icon-size:var(--size-400);--trigger-padding-horizontal:var(--size-200)}.button{background:var(--background);border-radius:var(--border-radius);cursor:pointer;padding-block:max(0px, var(--padding-vertical) - var(--border-width));padding-inline:max(0px, var(--padding-horizontal) - var(--border-width));transition:background var(--transition-duration) var(--transition-timing-function), border-color var(--transition-duration) var(--transition-timing-function), box-shadow var(--transition-duration) var(--transition-timing-function), color var(--transition-duration) var(--transition-timing-function), opacity var(--transition-duration) var(--transition-timing-function), scale var(--transition-duration) var(--transition-timing-function), translate var(--transition-duration) var(--transition-timing-function);white-space:nowrap;flex-wrap:nowrap;place-content:center;align-items:center;translate:0}.button--fan{z-index:1}.button--fan:not(.--active):active{scale:var(--trigger-pressed-scale)}.button--feedback{-webkit-touch-callout:none;touch-action:manipulation;-webkit-user-select:none;user-select:none}.button--flat:after{display:none}.button--hold{isolation:isolate;overflow:hidden}.button--kbd{min-height:var(--kbd-size);min-width:var(--kbd-size);font-family:inherit}.button--kbd.--active,.button--kbd:not(.--active):active{translate:0 1px}.button--processing{color:#0000;pointer-events:none}.button--processing:before{animation:button--processing var(--animation-duration) infinite linear;border:var(--border-width) solid color-mix(in srgb, var(--processing-color), transparent 90%);border-left-color:var(--processing-color);content:"";height:var(--size);width:var(--size);border-top-color:#0000;border-right-color:#0000;border-radius:100%}.button--processing *{opacity:0}@keyframes button--processing{0%{rotate:0deg}to{rotate:360deg}}.button--skeleton{animation:var(--animation-duration) var(--transition-timing-function) infinite button--skeleton;background-image:linear-gradient(270deg, var(--background-pressed), var(--background-default), var(--background-default), var(--background-pressed));color:#0000;pointer-events:none;background-size:400% 100%}.button--skeleton *{opacity:0}@keyframes button--skeleton{0%{background-position:200% 0}to{background-position:-200% 0}}.button--tactile:not(.--active):active{translate:0 1px}.button--top-left,.button--top-right{top:calc((var(--padding-vertical) + .5lh) * -1);position:absolute}.button--top-left{left:calc((var(--padding-horizontal) + .5lh) * -1)}.button--top-right{right:calc((var(--padding-horizontal) + .5lh) * -1)}.button--underline.--active,.button--underline:not(.--active):hover{text-decoration:underline}.button-face{filter:blur(var(--face-blur));align-items:center;gap:var(--face-gap);opacity:0;transition:filter var(--face-duration) var(--face-timing-function), opacity var(--face-duration) var(--face-timing-function), translate var(--face-duration) var(--face-timing-function);translate:0 var(--face-offset);grid-area:1/1;display:inline-flex}.button-face.--active{filter:blur();opacity:1;translate:0}.button-face.--active .button-icon--draw{stroke-dashoffset:0}.button-face.button-face--error .button-icon{color:var(--error-color)}.button-face.button-face--success .button-icon{color:var(--success-color)}.button-faces{place-items:center;display:grid}.button-fill{background:var(--fill-background);clip-path:inset(0 100% 0 0);color:var(--fill-color);place-items:center;display:grid}.button-icon{height:var(--icon-size);width:var(--icon-size);flex-shrink:0}.button-icon--draw{transition:stroke-dashoffset var(--draw-duration) var(--draw-timing-function)}.button-icon--spin{animation:button--processing var(--spin-duration) infinite linear}:where(.button) :where(.icon){transition:color var(--transition-duration) var(--transition-timing-function), opacity var(--transition-duration) var(--transition-timing-function)}@media (prefers-reduced-motion:reduce){.button--skeleton,.button-icon--spin{animation:none}.button-face,.button-icon--draw{transition:none}.button--kbd.--active,.button--kbd:not(.--active):active{translate:none}}}
+@layer components{.button--processing:before{position:absolute;bottom:50%;right:50%;translate:50% 50%}.button-fill,.button:after{position:absolute;inset:0}.button{--surface-shadow-weight:6;--surface-background-active:light-dark(oklch(from var(--surface-background-default) calc(l + .01) c h),oklch(from var(--surface-background-default) calc(l + .02) c h));--surface-background-default:light-dark(oklch(from var(--color-surface) clamp(0, l + max(var(--surface-level), 0) * .01 + min(var(--surface-level), 0) * .01, 1) calc(c * (1 - clamp(0, l + max(var(--surface-level), 0) * .01 + min(var(--surface-level), 0) * .01, 1)) / max(1 - l, .01)) h),oklch(from var(--color-surface) clamp(0, l + max(var(--surface-level), 0) * .02 + min(var(--surface-level), 0) * .02, l + .12) calc(c * clamp(0, l + max(var(--surface-level), 0) * .02 + min(var(--surface-level), 0) * .02, l + .12) / max(l, .01)) h));--surface-background-hover:light-dark(oklch(from var(--surface-background-default) calc(l + .005) c h),oklch(from var(--surface-background-default) calc(l + .01) c h));--surface-background-pressed:light-dark(oklch(from var(--surface-background-default) calc(l - .02) c h),oklch(from var(--surface-background-default) calc(l - .04) c h));--surface-border-active:light-dark(oklch(from var(--surface-background-active) max(0, l - .04) c h),oklch(from var(--surface-background-active) min(1, l + .06) c h));--surface-border-default:light-dark(oklch(from var(--surface-background-default) max(0, l - .04) c h),oklch(from var(--surface-background-default) min(1, l + .06) c h));--surface-border-hover:light-dark(oklch(from var(--surface-background-hover) max(0, l - .04) c h),oklch(from var(--surface-background-hover) min(1, l + .06) c h));--surface-border-pressed:light-dark(oklch(from var(--surface-background-pressed) max(0, l - .04) c h),oklch(from var(--surface-background-pressed) min(1, l + .06) c h));--surface-shadow-active:var(--surface-shadow-hover);--surface-shadow-color:light-dark(oklch(from var(--surface-background-default) calc(l * .24) calc(c * .24) h / .08),oklch(from var(--surface-background-default) calc(l * .24) calc(c * .24) h / .16));--surface-shadow-cast:light-dark(oklch(from light-dark(oklch(from var(--color-surface) clamp(0, l + max(calc(var(--surface-level) - 1), 0) * .01 + min(calc(var(--surface-level) - 1), 0) * .01, 1) calc(c * (1 - clamp(0, l + max(calc(var(--surface-level) - 1), 0) * .01 + min(calc(var(--surface-level) - 1), 0) * .01, 1)) / max(1 - l, .01)) h),oklch(from var(--color-surface) clamp(0, l + max(calc(var(--surface-level) - 1), 0) * .02 + min(calc(var(--surface-level) - 1), 0) * .02, l + .12) calc(c * clamp(0, l + max(calc(var(--surface-level) - 1), 0) * .02 + min(calc(var(--surface-level) - 1), 0) * .02, l + .12) / max(l, .01)) h)) calc(l * .24) calc(c * .24) h / .08),oklch(from light-dark(oklch(from var(--color-surface) clamp(0, l + max(calc(var(--surface-level) - 1), 0) * .01 + min(calc(var(--surface-level) - 1), 0) * .01, 1) calc(c * (1 - clamp(0, l + max(calc(var(--surface-level) - 1), 0) * .01 + min(calc(var(--surface-level) - 1), 0) * .01, 1)) / max(1 - l, .01)) h),oklch(from var(--color-surface) clamp(0, l + max(calc(var(--surface-level) - 1), 0) * .02 + min(calc(var(--surface-level) - 1), 0) * .02, l + .12) calc(c * clamp(0, l + max(calc(var(--surface-level) - 1), 0) * .02 + min(calc(var(--surface-level) - 1), 0) * .02, l + .12) / max(l, .01)) h)) calc(l * .24) calc(c * .24) h / .16));--surface-shadow-default:0 calc((0 + 1 * clamp(0, var(--surface-shadow-weight) - 0, 1) + 3 * clamp(0, var(--surface-shadow-weight) - 3, 1) + 6 * clamp(0, var(--surface-shadow-weight) - 4, 1) + 10 * clamp(0, var(--surface-shadow-weight) - 5, 1) + 5 * clamp(0, var(--surface-shadow-weight) - 6, 1)) * 1px) calc((0 + 2 * clamp(0, var(--surface-shadow-weight) - 1, 1) + 1 * clamp(0, var(--surface-shadow-weight) - 2, 1) + 3 * clamp(0, var(--surface-shadow-weight) - 3, 1) + 9 * clamp(0, var(--surface-shadow-weight) - 4, 1) + 10 * clamp(0, var(--surface-shadow-weight) - 5, 1) + 25 * clamp(0, var(--surface-shadow-weight) - 6, 1)) * 1px) calc((0 + -1 * clamp(0, var(--surface-shadow-weight) - 3, 1) + -2 * clamp(0, var(--surface-shadow-weight) - 4, 1) + -2 * clamp(0, var(--surface-shadow-weight) - 5, 1) + -7 * clamp(0, var(--surface-shadow-weight) - 6, 1)) * 1px) oklch(from var(--surface-shadow-cast) l c h / calc(alpha * (0 + .05 * clamp(0, var(--surface-shadow-weight) - 0, 1) + .05 * clamp(0, var(--surface-shadow-weight) - 2, 1) + .15 * clamp(0, var(--surface-shadow-weight) - 6, 1)) * 10)), 0 calc((0 + 1 * clamp(0, var(--surface-shadow-weight) - 2, 1) + 1 * clamp(0, var(--surface-shadow-weight) - 3, 1) + 2 * clamp(0, var(--surface-shadow-weight) - 4, 1) + 4 * clamp(0, var(--surface-shadow-weight) - 5, 1) + -8 * clamp(0, var(--surface-shadow-weight) - 6, 1)) * 1px) calc((0 + 2 * clamp(0, var(--surface-shadow-weight) - 2, 1) + 2 * clamp(0, var(--surface-shadow-weight) - 3, 1) + 2 * clamp(0, var(--surface-shadow-weight) - 4, 1) + 4 * clamp(0, var(--surface-shadow-weight) - 5, 1) + -10 * clamp(0, var(--surface-shadow-weight) - 6, 1)) * 1px) calc((0 + -1 * clamp(0, var(--surface-shadow-weight) - 2, 1) + -1 * clamp(0, var(--surface-shadow-weight) - 3, 1) + -2 * clamp(0, var(--surface-shadow-weight) - 4, 1) + -2 * clamp(0, var(--surface-shadow-weight) - 5, 1) + 6 * clamp(0, var(--surface-shadow-weight) - 6, 1)) * 1px) oklch(from var(--surface-shadow-cast) l c h / calc(alpha * (0 + .1 * clamp(0, var(--surface-shadow-weight) - 2, 1) + -.1 * clamp(0, var(--surface-shadow-weight) - 6, 1)) * 10));--surface-shadow-hover:0 calc((0 + 1 * clamp(0, min(var(--surface-shadow-weight) + 1, 7) - 0, 1) + 3 * clamp(0, min(var(--surface-shadow-weight) + 1, 7) - 3, 1) + 6 * clamp(0, min(var(--surface-shadow-weight) + 1, 7) - 4, 1) + 10 * clamp(0, min(var(--surface-shadow-weight) + 1, 7) - 5, 1) + 5 * clamp(0, min(var(--surface-shadow-weight) + 1, 7) - 6, 1)) * 1px) calc((0 + 2 * clamp(0, min(var(--surface-shadow-weight) + 1, 7) - 1, 1) + 1 * clamp(0, min(var(--surface-shadow-weight) + 1, 7) - 2, 1) + 3 * clamp(0, min(var(--surface-shadow-weight) + 1, 7) - 3, 1) + 9 * clamp(0, min(var(--surface-shadow-weight) + 1, 7) - 4, 1) + 10 * clamp(0, min(var(--surface-shadow-weight) + 1, 7) - 5, 1) + 25 * clamp(0, min(var(--surface-shadow-weight) + 1, 7) - 6, 1)) * 1px) calc((0 + -1 * clamp(0, min(var(--surface-shadow-weight) + 1, 7) - 3, 1) + -2 * clamp(0, min(var(--surface-shadow-weight) + 1, 7) - 4, 1) + -2 * clamp(0, min(var(--surface-shadow-weight) + 1, 7) - 5, 1) + -7 * clamp(0, min(var(--surface-shadow-weight) + 1, 7) - 6, 1)) * 1px) oklch(from var(--surface-shadow-cast) l c h / calc(alpha * (0 + .05 * clamp(0, min(var(--surface-shadow-weight) + 1, 7) - 0, 1) + .05 * clamp(0, min(var(--surface-shadow-weight) + 1, 7) - 2, 1) + .15 * clamp(0, min(var(--surface-shadow-weight) + 1, 7) - 6, 1)) * 10)), 0 calc((0 + 1 * clamp(0, min(var(--surface-shadow-weight) + 1, 7) - 2, 1) + 1 * clamp(0, min(var(--surface-shadow-weight) + 1, 7) - 3, 1) + 2 * clamp(0, min(var(--surface-shadow-weight) + 1, 7) - 4, 1) + 4 * clamp(0, min(var(--surface-shadow-weight) + 1, 7) - 5, 1) + -8 * clamp(0, min(var(--surface-shadow-weight) + 1, 7) - 6, 1)) * 1px) calc((0 + 2 * clamp(0, min(var(--surface-shadow-weight) + 1, 7) - 2, 1) + 2 * clamp(0, min(var(--surface-shadow-weight) + 1, 7) - 3, 1) + 2 * clamp(0, min(var(--surface-shadow-weight) + 1, 7) - 4, 1) + 4 * clamp(0, min(var(--surface-shadow-weight) + 1, 7) - 5, 1) + -10 * clamp(0, min(var(--surface-shadow-weight) + 1, 7) - 6, 1)) * 1px) calc((0 + -1 * clamp(0, min(var(--surface-shadow-weight) + 1, 7) - 2, 1) + -1 * clamp(0, min(var(--surface-shadow-weight) + 1, 7) - 3, 1) + -2 * clamp(0, min(var(--surface-shadow-weight) + 1, 7) - 4, 1) + -2 * clamp(0, min(var(--surface-shadow-weight) + 1, 7) - 5, 1) + 6 * clamp(0, min(var(--surface-shadow-weight) + 1, 7) - 6, 1)) * 1px) oklch(from var(--surface-shadow-cast) l c h / calc(alpha * (0 + .1 * clamp(0, min(var(--surface-shadow-weight) + 1, 7) - 2, 1) + -.1 * clamp(0, min(var(--surface-shadow-weight) + 1, 7) - 6, 1)) * 10));--surface-shadow-pressed:0 calc((0 + 1 * clamp(0, max(var(--surface-shadow-weight) - 1, 0) - 0, 1) + 3 * clamp(0, max(var(--surface-shadow-weight) - 1, 0) - 3, 1) + 6 * clamp(0, max(var(--surface-shadow-weight) - 1, 0) - 4, 1) + 10 * clamp(0, max(var(--surface-shadow-weight) - 1, 0) - 5, 1) + 5 * clamp(0, max(var(--surface-shadow-weight) - 1, 0) - 6, 1)) * 1px) calc((0 + 2 * clamp(0, max(var(--surface-shadow-weight) - 1, 0) - 1, 1) + 1 * clamp(0, max(var(--surface-shadow-weight) - 1, 0) - 2, 1) + 3 * clamp(0, max(var(--surface-shadow-weight) - 1, 0) - 3, 1) + 9 * clamp(0, max(var(--surface-shadow-weight) - 1, 0) - 4, 1) + 10 * clamp(0, max(var(--surface-shadow-weight) - 1, 0) - 5, 1) + 25 * clamp(0, max(var(--surface-shadow-weight) - 1, 0) - 6, 1)) * 1px) calc((0 + -1 * clamp(0, max(var(--surface-shadow-weight) - 1, 0) - 3, 1) + -2 * clamp(0, max(var(--surface-shadow-weight) - 1, 0) - 4, 1) + -2 * clamp(0, max(var(--surface-shadow-weight) - 1, 0) - 5, 1) + -7 * clamp(0, max(var(--surface-shadow-weight) - 1, 0) - 6, 1)) * 1px) oklch(from var(--surface-shadow-cast) l c h / calc(alpha * (0 + .05 * clamp(0, max(var(--surface-shadow-weight) - 1, 0) - 0, 1) + .05 * clamp(0, max(var(--surface-shadow-weight) - 1, 0) - 2, 1) + .15 * clamp(0, max(var(--surface-shadow-weight) - 1, 0) - 6, 1)) * 10)), 0 calc((0 + 1 * clamp(0, max(var(--surface-shadow-weight) - 1, 0) - 2, 1) + 1 * clamp(0, max(var(--surface-shadow-weight) - 1, 0) - 3, 1) + 2 * clamp(0, max(var(--surface-shadow-weight) - 1, 0) - 4, 1) + 4 * clamp(0, max(var(--surface-shadow-weight) - 1, 0) - 5, 1) + -8 * clamp(0, max(var(--surface-shadow-weight) - 1, 0) - 6, 1)) * 1px) calc((0 + 2 * clamp(0, max(var(--surface-shadow-weight) - 1, 0) - 2, 1) + 2 * clamp(0, max(var(--surface-shadow-weight) - 1, 0) - 3, 1) + 2 * clamp(0, max(var(--surface-shadow-weight) - 1, 0) - 4, 1) + 4 * clamp(0, max(var(--surface-shadow-weight) - 1, 0) - 5, 1) + -10 * clamp(0, max(var(--surface-shadow-weight) - 1, 0) - 6, 1)) * 1px) calc((0 + -1 * clamp(0, max(var(--surface-shadow-weight) - 1, 0) - 2, 1) + -1 * clamp(0, max(var(--surface-shadow-weight) - 1, 0) - 3, 1) + -2 * clamp(0, max(var(--surface-shadow-weight) - 1, 0) - 4, 1) + -2 * clamp(0, max(var(--surface-shadow-weight) - 1, 0) - 5, 1) + 6 * clamp(0, max(var(--surface-shadow-weight) - 1, 0) - 6, 1)) * 1px) oklch(from var(--surface-shadow-cast) l c h / calc(alpha * (0 + .1 * clamp(0, max(var(--surface-shadow-weight) - 1, 0) - 2, 1) + -.1 * clamp(0, max(var(--surface-shadow-weight) - 1, 0) - 6, 1)) * 10))}@container style(--surface-level:-3){.button{--surface-level:-2;--surface-shadow-weight:0}}@container style(--surface-level:-2){.button{--surface-level:-1;--surface-shadow-weight:0}}@container style(--surface-level:-1){.button{--surface-level:0;--surface-shadow-weight:0}}@container style(--surface-level:0){.button{--surface-level:1;--surface-shadow-weight:1}}@container style(--surface-level:1){.button{--surface-level:2;--surface-shadow-weight:2}}@container style(--surface-level:2){.button{--surface-level:3;--surface-shadow-weight:3}}@container style(--surface-level:3){.button{--surface-level:4;--surface-shadow-weight:4}}@container style(--surface-level:4){.button{--surface-level:5;--surface-shadow-weight:5}}@container style(--surface-level:5){.button{--surface-level:6;--surface-shadow-weight:6}}.button{--background:var(--background-default);--background-active:var(--background-default);--background-default:transparent;--background-hover:var(--background-default);--background-pressed:var(--background-default)}.--active.button{--background:var(--background-active)}.button:not(.--active):hover{--background:var(--background-hover)}.button:not(.--active):active{--background:var(--background-pressed)}.button{--border-color:var(--border-color-default);--border-color-active:var(--border-color-default);--border-color-default:transparent;--border-color-hover:var(--border-color-default);--border-color-pressed:var(--border-color-default)}.--active.button{--border-color:var(--border-color-active)}.button:not(.--active):hover{--border-color:var(--border-color-hover)}.button:not(.--active):active{--border-color:var(--border-color-pressed)}.button{--box-shadow:var(--box-shadow-default);--box-shadow-active:var(--box-shadow-default);--box-shadow-default:none;--box-shadow-hover:var(--box-shadow-default);--box-shadow-pressed:var(--box-shadow-default)}.--active.button{--box-shadow:var(--box-shadow-active)}.button:not(.--active):hover{--box-shadow:var(--box-shadow-hover)}.button:not(.--active):active{--box-shadow:var(--box-shadow-pressed)}.button{--color:var(--color-default);--color-active:var(--color-default);--color-default:var(--color-text-400);--color-hover:var(--color-default);--color-pressed:var(--color-default)}.--active.button{--color:var(--color-active)}.button:not(.--active):hover{--color:var(--color-hover)}.button:not(.--active):active{--color:var(--color-pressed)}.button-status,.button-morph-live{clip-path:inset(50%);white-space:nowrap;width:1px;height:1px;position:absolute;overflow:hidden}.button-icon,.button-morph-icon{fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round;stroke-width:2px}.button-icon--draw{stroke-dasharray:1;stroke-dashoffset:1px}.button-morph-icon{filter:blur(var(--blur-400));opacity:0;transition:filter var(--icon-swap-duration) var(--icon-swap-timing-function), opacity var(--icon-swap-duration) var(--icon-swap-timing-function), scale var(--icon-swap-duration) var(--icon-swap-timing-function);scale:.25}@media (prefers-reduced-motion:reduce){.button-morph-icon{transition:none}}.button--morph-loading .button-morph-icon--loading,.button--morph-success .button-morph-icon--success{filter:blur();opacity:1;scale:1}.button-fill,.button:after{border-radius:inherit;pointer-events:none}.button:after{box-shadow:var(--box-shadow);content:"";transition:box-shadow var(--transition-duration) var(--transition-timing-function), opacity var(--transition-duration) var(--transition-timing-function);z-index:-1}.button{--border-width:0px;--color:var(--color-default,inherit);--color-active:var(--color-default);--color-default:var(--color-text-400);--color-hover:var(--color-default);--color-pressed:var(--color-default);--width:auto;color:var(--color);font-size:var(--font-size);font-weight:var(--font-weight);gap:var(--gap-vertical) var(--gap-horizontal);line-height:var(--line-height);transition:color var(--transition-duration) var(--transition-timing-function);width:var(--width);display:flex;position:relative}@keyframes text-gradient{to{background-position:var(--background-size) 0}}@keyframes text-line-shadow{0%{background-position:0 0}to{background-position:100% -100%}}@keyframes text-shiny{0%,90%,to{background-position:calc(-100% - var(--shine-width)) 0}30%,60%{background-position:calc(100% + var(--shine-width)) 0}}.button-fan{align-items:center;display:inline-flex;position:relative}.button-fan.--active{z-index:9}.button-fan.--active>.button--fan .button-fan-swap>:first-child{opacity:0;rotate:var(--swap-rotate)}.button-fan.--active>.button--fan .button-fan-swap>:last-child{opacity:1;rotate:0deg}.button-fan.--active>.button-fan-options>.button-fan-option{--delay:calc(var(--i) * var(--stagger));opacity:1;pointer-events:auto;translate:0;scale:1}.button-fan--e>.button-fan-options{padding-left:var(--spacer);flex-direction:row;inset:0 auto 0 100%}.button-fan--n>.button-fan-options{padding-bottom:var(--spacer);flex-direction:column-reverse;inset:auto 0 100%}.button-fan--s>.button-fan-options{padding-top:var(--spacer);flex-direction:column;inset:100% 0 auto}.button-fan--w>.button-fan-options{padding-right:var(--spacer);flex-direction:row-reverse;inset:0 100% 0 auto}.button-fan-options{align-items:center;gap:var(--spacer);pointer-events:none;z-index:0;display:flex;position:absolute}.button-fan-swap{place-items:center;display:inline-grid}.button-fan-swap>*{transition:opacity var(--swap-spring-duration) var(--swap-spring), rotate var(--swap-spring-duration) var(--swap-spring);grid-area:1/1}.button-fan-swap>:last-child{opacity:0;rotate:calc(var(--swap-rotate) * -1)}.button-fan>.button-fan-options>.button-fan-option{--delay:calc((var(--n) - 1 - var(--i)) * var(--stagger));opacity:0;scale:var(--option-scale);transform-origin:var(--origin);transition:opacity var(--option-opacity-duration) var(--option-spring) var(--delay), scale var(--option-spring-duration) var(--option-spring) var(--delay), translate var(--option-spring-duration) var(--option-spring) var(--delay);translate:calc((100% + var(--spacer)) * (var(--i) + 1) * var(--direction-x)) calc((100% + var(--spacer)) * (var(--i) + 1) * var(--direction-y))}.button-fan>.button-fan-options>.button-fan-option:focus-visible,.button-fan>.button--fan:focus-visible{outline:var(--focus-width) solid var(--focus-color);outline-offset:var(--focus-offset)}@media (prefers-reduced-motion:reduce){.button-fan{--swap-rotate:0deg}.button-fan .button-fan-swap>*{transition:opacity var(--swap-spring-duration) var(--swap-spring)}.button-fan>.button-fan-options>.button-fan-option{transition:opacity var(--option-opacity-duration) var(--option-spring) var(--delay);translate:none;scale:1}}.button-kbd{align-items:center;gap:var(--gap);display:inline-flex}.button-kbd-plus.icon{--size:var(--plus-size);color:var(--plus-color)}.button--morph-error{animation:button-morph-shake var(--morph-shake-duration) var(--morph-shake-easing) .15s}.button-morph-content{flex-shrink:0;place-items:center;display:grid}.button-morph-icon{height:var(--morph-icon-size);width:var(--morph-icon-size);grid-area:1/1}.button-morph-spinner{transform-box:view-box;transform-origin:50%;animation:.7s linear infinite button--processing}.button-morph-text{filter:blur(var(--blur-400));opacity:0;transition:filter var(--duration-fast-exit) var(--easing-spring), opacity var(--duration-fast-exit) var(--easing-spring);white-space:nowrap;grid-area:1/1}.button-morph-text.--active{filter:blur();opacity:1;transition-duration:var(--duration-fast)}.button.button--morph{height:var(--morph-height);touch-action:manipulation;transition:background-color var(--duration-fast) var(--easing-spring), color var(--duration-fast) var(--easing-spring);-webkit-user-select:none;user-select:none;border:0;outline:none;display:inline-flex;overflow:hidden}.button.button--morph:focus-visible{outline:2px solid var(--morph-focus-color);outline-offset:calc(var(--size-100) / 4)}.button.button--morph[aria-disabled=true]{cursor:default}@keyframes button-morph-shake{0%,to{translate:0}20%{translate:-6px}40%{translate:5px}60%{translate:-3px}80%{translate:2px}}.button-sidebar--right .button-sidebar-graphic{scale:-1 1}.button-sidebar-icon.icon{--size:var(--icon-size)}.button-sidebar-icon.icon .button-sidebar-graphic{fill:none;overflow:hidden}.button-sidebar-panel{stroke-width:calc(1px + 2px * var(--panel-open));transform:translateX(calc((var(--panel-open) - 1) * 1px)) scaleY(calc((7 - 2 * var(--panel-open)) / 5));transform-box:fill-box;transform-origin:50%;transition:stroke-width var(--panel-duration) var(--easing-spring), transform var(--panel-duration) var(--easing-spring)}@media (prefers-reduced-motion:reduce){.button-sidebar-panel{transition:none}}.button-sidebar:not(.button-sidebar--held)[aria-expanded=false]:focus-visible{--panel-open:1}.button-sidebar:not(.button-sidebar--held)[aria-expanded=true]:focus-visible{--panel-open:0}@media (hover:hover){.button-sidebar:not(.button-sidebar--held)[aria-expanded=false]:hover{--panel-open:1}.button-sidebar:not(.button-sidebar--held)[aria-expanded=true]:hover{--panel-open:0}}.button-sidebar[aria-expanded=false]{--panel-open:0}.button-split{isolation:isolate;align-items:stretch;display:inline-flex}.button-split-chevron{transition:rotate var(--chevron-duration) var(--chevron-timing-function)}.button-split-menu{display:flex}.button-split-menu>.tooltip-menu-panel:not(.tooltip-menu-panel--expand){left:auto;right:0}.button-split>.button-split-action{border-start-end-radius:0;border-end-end-radius:0}.button-split>.button-split-action:focus-visible,.button-split>.button-split-menu>.button-split-trigger:focus-visible{outline:var(--focus-width) solid var(--focus-color);outline-offset:var(--focus-offset);z-index:1}.button-split>.button-split-menu>.button-split-trigger{--padding-horizontal:var(--trigger-padding-horizontal);border-start-start-radius:0;border-end-start-radius:0;margin-inline-start:calc(var(--border-width) * -1)}.button-split>.button-split-menu>.button-split-trigger[aria-expanded=true] .button-split-chevron{rotate:180deg}@media (prefers-reduced-motion:reduce){.button-split-chevron{transition:none}}.button{--border-color-default:var(--background)}.button--feedback{--draw-duration:var(--duration-moderate);--draw-timing-function:var(--easing-out);--error-color:var(--color-red-400);--face-blur:var(--blur-400);--face-duration:var(--duration-slow);--face-gap:.375em;--face-offset:calc(var(--size-300) / 4);--face-timing-function:var(--easing-out);--icon-size:.875em;--spin-duration:.85s;--success-color:var(--color-green-500)}.button--hold{--fill-background:var(--color);--fill-color:var(--background)}.button--hold-text{--fill-background:transparent;--fill-color:var(--color-accent-400)}.button--kbd{--background-active:var(--color-primary-500);--background-default:var(--surface-background-default);--background-pressed:var(--background-active);--border-radius:var(--border-radius-300);--box-shadow-active:none;--box-shadow-default:0 0 0 var(--border-width-400) var(--kbd-border-color), inset 0 calc(var(--border-width-400) * -1) 0 var(--kbd-border-color);--box-shadow-pressed:none;--color-active:var(--surface-background-default);--color-default:var(--color-text-300);--color-pressed:var(--color-active);--font-size:calc(var(--font-size-300) * .95);--kbd-border-color:var(--surface-border-default);--kbd-size:24px;--line-height:1;--padding-horizontal:calc(var(--size-300) / 2);--padding-vertical:0px;--transition-duration:var(--duration-moderate);--transition-timing-function:var(--easing-spring)}.button--kbd.--active,.button--kbd:not(.--active):active{--transition-duration:0s}.button--morph{--background-default:var(--morph-background);--border-radius:999px;--color-default:var(--morph-color);--font-size:var(--morph-font-size);--font-weight:var(--font-weight-500);--icon-swap-duration:var(--duration-moderate);--icon-swap-timing-function:var(--morph-spring);--line-height:var(--size-500);--morph-background:var(--color-primary-500);--morph-background-error:var(--color-red-500);--morph-color:var(--color-surface);--morph-color-error:var(--color-white-300);--morph-focus-color:var(--surface-border-pressed);--morph-font-size:var(--font-size-300);--morph-height:40px;--morph-icon-size:var(--size-400);--morph-resize-duration:var(--duration-moderate);--morph-resize-easing:var(--morph-spring);--morph-shake-duration:var(--duration-slow);--morph-shake-easing:var(--easing-in-out);--morph-spring:var(--easing-spring);--padding-horizontal:var(--size-500);--padding-vertical:0px}@media (prefers-reduced-motion:reduce){.button--morph{--morph-resize-duration:0s;--morph-shake-duration:0s}}.button--morph-error{--background-default:var(--morph-background-error);--color-default:var(--morph-color-error)}.button--processing{--animation-duration:.64s;--border-width:var(--border-width-400);--processing-color:var(--color);--size:var(--size-400)}.button--skeleton{--animation-duration:6.4s}.button-fan{--focus-color:currentColor;--focus-offset:calc(var(--size-100) / 4);--focus-width:var(--border-width-500);--option-opacity-duration:var(--duration-fast);--option-scale:.5;--option-spring:var(--easing-spring);--option-spring-duration:var(--duration-moderate);--spacer:var(--size-300);--stagger:30ms;--swap-rotate:90deg;--swap-spring:var(--easing-spring);--swap-spring-duration:var(--duration-fast)}.button-fan--e{--direction-x:-1;--direction-y:0;--origin:left center}.button-fan--n{--direction-x:0;--direction-y:1;--origin:center bottom}.button-fan--s{--direction-x:0;--direction-y:-1;--origin:center top}.button-fan--tactile{--box-shadow-default:var(--surface-shadow-default)}.button-fan--w{--direction-x:1;--direction-y:0;--origin:right center}.button-kbd{--gap:var(--size-200);--plus-color:color-mix(in srgb, currentColor 60%, transparent);--plus-size:var(--size-300)}.button-sidebar{--icon-size:var(--size-400);--panel-duration:var(--duration-fast);--panel-open:1}.button-split{--chevron-duration:var(--duration-fast);--chevron-timing-function:var(--easing-spring);--focus-color:currentColor;--focus-offset:calc(var(--size-100) / 4);--focus-width:var(--border-width-500);--icon-size:var(--size-400);--trigger-padding-horizontal:var(--size-200)}.button{background:var(--background);border-radius:var(--border-radius);cursor:pointer;padding-block:max(0px, var(--padding-vertical) - var(--border-width));padding-inline:max(0px, var(--padding-horizontal) - var(--border-width));transition:background var(--transition-duration) var(--transition-timing-function), border-color var(--transition-duration) var(--transition-timing-function), box-shadow var(--transition-duration) var(--transition-timing-function), color var(--transition-duration) var(--transition-timing-function), opacity var(--transition-duration) var(--transition-timing-function), scale var(--transition-duration) var(--transition-timing-function), translate var(--transition-duration) var(--transition-timing-function);white-space:nowrap;flex-wrap:nowrap;place-content:center;align-items:center;translate:0}.button--fan{z-index:1}.button--feedback{-webkit-touch-callout:none;touch-action:manipulation;-webkit-user-select:none;user-select:none}.button--flat:after{display:none}.button--hold{isolation:isolate;overflow:hidden}.button--kbd{min-height:var(--kbd-size);min-width:var(--kbd-size);font-family:inherit}.button--kbd.--active,.button--kbd:not(.--active):active{translate:0 1px}.button--processing{color:#0000;pointer-events:none}.button--processing:before{animation:button--processing var(--animation-duration) infinite linear;border:var(--border-width) solid color-mix(in srgb, var(--processing-color), transparent 90%);border-left-color:var(--processing-color);content:"";height:var(--size);width:var(--size);border-top-color:#0000;border-right-color:#0000;border-radius:100%}.button--processing *{opacity:0}@keyframes button--processing{0%{rotate:0deg}to{rotate:360deg}}.button--skeleton{animation:var(--animation-duration) var(--transition-timing-function) infinite button--skeleton;background-image:linear-gradient(270deg, var(--background-pressed), var(--background-default), var(--background-default), var(--background-pressed));color:#0000;pointer-events:none;background-size:400% 100%}.button--skeleton *{opacity:0}@keyframes button--skeleton{0%{background-position:200% 0}to{background-position:-200% 0}}.button--tactile:not(.--active):active{translate:0 1px}.button--top-left,.button--top-right{top:calc((var(--padding-vertical) + .5lh) * -1);position:absolute}.button--top-left{left:calc((var(--padding-horizontal) + .5lh) * -1)}.button--top-right{right:calc((var(--padding-horizontal) + .5lh) * -1)}.button--underline.--active,.button--underline:not(.--active):hover{text-decoration:underline}.button-face{filter:blur(var(--face-blur));align-items:center;gap:var(--face-gap);opacity:0;transition:filter var(--face-duration) var(--face-timing-function), opacity var(--face-duration) var(--face-timing-function), translate var(--face-duration) var(--face-timing-function);translate:0 var(--face-offset);grid-area:1/1;display:inline-flex}.button-face.--active{filter:blur();opacity:1;translate:0}.button-face.--active .button-icon--draw{stroke-dashoffset:0}.button-face.button-face--error .button-icon{color:var(--error-color)}.button-face.button-face--success .button-icon{color:var(--success-color)}.button-faces{place-items:center;display:grid}.button-fill{background:var(--fill-background);clip-path:inset(0 100% 0 0);color:var(--fill-color);place-items:center;display:grid}.button-icon{height:var(--icon-size);width:var(--icon-size);flex-shrink:0}.button-icon--draw{transition:stroke-dashoffset var(--draw-duration) var(--draw-timing-function)}.button-icon--spin{animation:button--processing var(--spin-duration) infinite linear}:where(.button) :where(.icon){transition:color var(--transition-duration) var(--transition-timing-function), opacity var(--transition-duration) var(--transition-timing-function)}@media (prefers-reduced-motion:reduce){.button--kbd.--active,.button--kbd:not(.--active):active{translate:none}.button--skeleton,.button-icon--spin{animation:none}.button-face,.button-icon--draw{transition:none}}}
 /*$vite$:1*/

package/build/components/button/sidebar.d.ts

@@ -2,6 +2,9 @@ import * as template_u1 from '@esportsplus/template';
 import { type Attributes } from '@esportsplus/template';
 type A = Attributes & {
     'aria-expanded'?: never;
+    onconnect?: never;
+    onfocusout?: never;
+    onpointerleave?: never;
     open: boolean | (() => boolean);
     side?: 'left' | 'right' | (() => 'left' | 'right');
 };