@greypan/web-ui 3.0.0 → 4.0.0

package/README.md

@@ -31,6 +31,30 @@ import '@greypan/web-ui'
 
 ## Framework Setup
 
+### Cross-framework API conventions
+
+`web-ui-*` elements expose three surfaces. The **DOM / JavaScript API is the source of truth**: Properties use
+camelCase, Attributes use kebab-case, Events use kebab-case.
+
+| Surface   | Naming     | Examples                                      |
+| --------- | ---------- | --------------------------------------------- |
+| Property  | camelCase  | `open`, `sidebarCollapsed`, `noScrollLock`    |
+| Attribute | kebab-case | `open`, `sidebar-collapsed`, `no-scroll-lock` |
+| Event     | kebab-case | `open-change`, `sidebar-collapsed-change`     |
+
+- **Boolean attributes** follow native HTML presence semantics: absent → `false`, presence → `true`. A framework
+  binding that writes `disabled="false"` produces the string `"false"`, which is truthy — **bind dynamic booleans as
+  properties** (camelCase), not attributes, so `false` is written as a real property.
+- **Vue**: dynamic binding must go to **Properties** with camelCase names (`:sidebarCollapsed="x"`, `:open="x"`).
+  A kebab-case binding like `:sidebar-collapsed="x"` is written as a string attribute and cannot express `false`;
+  use the camelCase property. The `.prop` modifier is only valid with the camelCase name
+  (`:sidebarCollapsed.prop="x"`). String/number values may stay on kebab-case attributes (`:max-height="120"`).
+  `v-model` is supported on value-bearing controls (`web-ui-input`, `web-ui-select`, `web-ui-autocomplete`, …) and
+  compiles to the element `value` property + `input` event.
+- **React**: React 19 writes DOM properties for custom-element props, so use camelCase props (`open={open}`,
+  `noScrollLock`, `value={value}`). Never pass complex data (objects, arrays) through attribute strings — bind
+  them as properties. Kebab-case JSX props on a custom element are written as attributes.
+
 ### React
 
 Requires `@types/react >= 19` as optional peer dependency.
@@ -129,11 +153,27 @@ import '@greypan/web-ui/types/vue'
 </template>
 ```
 
+Boolean properties must be bound with the **camelCase property name**, not the kebab-case attribute. Vue writes
+attribute bindings as strings, and boolean attributes follow presence semantics — so `:sidebar-collapsed="false"`
+produces the string `"false"`, which is truthy. Binding the camelCase name (`:sidebarCollapsed="false"`, or the
+`.prop` modifier) makes Vue write the DOM property directly:
+
+```vue
+<web-ui-layout
+  header-glow
+  :sidebarCollapsed="sidebarCollapsed"
+  :sidebarOpen="sidebarOpen"
+  @sidebar-collapsed-change="sidebarCollapsed = $event.detail.collapsed"
+  @sidebar-open-change="sidebarOpen = $event.detail.open"
+/>
+```
+
 Vue events are typed cast-free: `@input`/`@change` on value-bearing components resolve to the component emit, so
 `$event.target` is the component instance and `value`/`checked` are read directly. `$event.detail` keeps the
 `CustomEvent` payload type for kebab-case events like `open-change`. Named handlers annotate with
-`WebUiEvent<WebUiXxx, 'change'>`. `@click`/`@focus` and other native events not declared as emits remain
-bindable on any `web-ui-*` element.
+`WebUiEvent<WebUiXxx, 'change'>`; use `WebUiEventName<WebUiXxx>` when a value or generic represents an
+event name, because it accepts only the component's string `$events` keys. `@click`/`@focus` and other native
+events not declared as emits remain bindable on any `web-ui-*` element.
 
 ### Attribute and event boundaries
 
@@ -147,6 +187,10 @@ Components own their role and interaction state. Browser-native composed events
 remain the primary interaction API. Kebab-case custom events such as `open-change` describe user-originated component
 state changes; assigning a property programmatically does not emit them.
 
+### Form-associated controls
+
+All form controls participate in native `FormData`, constraint validation, `form.reset()` and browser form-state restoration. The control captures its reset default once, after declarative attributes have been applied on its first connection. Later runtime property updates do not redefine that default. A disabled ancestor `fieldset` disables validation and interaction without mutating the control's public `disabled` property. For checkbox/radio groups, the group is the single submission, reset and restoration owner; managed child controls do not submit or restore an independent state.
+
 ## All Components
 
 | Category             | Component                                                 |
@@ -215,6 +259,12 @@ Text input with clearable, prefix/suffix slots.
 
 **Slots:** `prefix`, `default`, `suffix`
 
+**CSS Custom Properties:**
+
+| Property                  | Default                          | Description        |
+| ------------------------- | -------------------------------- | ------------------ |
+| `--wui-input-clear-color` | `var(--wui-color-text-tertiary)` | Clear button color |
+
 #### `<web-ui-textarea>`
 
 Multi-line text input with auto-resize.
@@ -244,6 +294,13 @@ Multi-line text input with auto-resize.
 
 **Slots:** `prefix`, `suffix`
 
+**CSS Custom Properties:**
+
+| Property                     | Default                          | Description        |
+| ---------------------------- | -------------------------------- | ------------------ |
+| `--wui-textarea-width`       | `200px`                          | Textarea width     |
+| `--wui-textarea-clear-color` | `var(--wui-color-text-tertiary)` | Clear button color |
+
 #### `<web-ui-input-number>`
 
 Numeric input with step buttons and keyboard control.
@@ -288,6 +345,13 @@ Select dropdown with option items, keyboard navigation, and portal support.
 
 Child `<web-ui-option>` elements register via `option-register` / `option-unregister` events. Supports ArrowDown/ArrowUp/Enter/Escape keyboard navigation.
 
+**CSS Custom Properties:**
+
+| Property                  | Default | Description        |
+| ------------------------- | ------- | ------------------ |
+| `--wui-select-max-width`  | `500px` | Dropdown max width |
+| `--wui-overlay-min-width` | `200px` | Dropdown min width |
+
 #### `<web-ui-autocomplete>`
 
 Editable combobox with input filtering and single option selection.
@@ -314,6 +378,13 @@ Editable combobox with input filtering and single option selection.
 
 Typing filters the option list by label (`contains` or `prefix`, or `none` to disable filtering). Selecting an option fills the input with its label and exposes the option's value via `selected-value`; `change` fires on selection commit. Supports ArrowDown/ArrowUp/Enter/Escape keyboard navigation.
 
+**CSS Custom Properties:**
+
+| Property                       | Default | Description            |
+| ------------------------------ | ------- | ---------------------- |
+| `--wui-autocomplete-max-width` | `500px` | Dropdown max width     |
+| `--wui-overlay-min-width`      | `200px` | Dropdown minimum width |
+
 #### `<web-ui-slider>`
 
 Range slider with marks and vertical orientation.
@@ -336,6 +407,18 @@ Range slider with marks and vertical orientation.
 
 Supports ArrowLeft/Right/Up/Down, Home/End, PageUp/PageDown keyboard navigation. Uses pointer capture for drag interaction across mouse, touch, and pen.
 
+**CSS Custom Properties:**
+
+| Property                       | Default                             | Description            |
+| ------------------------------ | ----------------------------------- | ---------------------- |
+| `--wui-slider-width`           | `200px`                             | Slider width           |
+| `--wui-slider-vertical-height` | `200px`                             | Vertical slider height |
+| `--wui-slider-height`          | `var(--wui-slider-track-size, 6px)` | Track thickness        |
+| `--wui-slider-track-size`      | `6px`                               | Track size             |
+| `--wui-slider-thumb-width`     | `24px`                              | Thumb short axis       |
+| `--wui-slider-thumb-height`    | `32px`                              | Thumb long axis        |
+| `--wui-slider-marks-inset`     | `0`                                 | Marks inset from edges |
+
 #### `<web-ui-checkbox>`
 
 Individual checkbox.
@@ -450,16 +533,16 @@ Radio group managing single selection.
 
 Styled button with variants and loading state.
 
-| Attribute    | Type                                                         | Default    | Description                                       |
-| ------------ | ------------------------------------------------------------ | ---------- | ------------------------------------------------- |
-| `variant`    | `'primary' \| 'secondary' \| 'ghost' \| 'danger' \| 'glass'` | `'glass'`  | Button variant                                    |
-| `type`       | `'button' \| 'submit' \| 'reset'`                            | `'button'` | Inner-button type; invalid values become `button` |
-| `disabled`   | `boolean`                                                    | `false`    | Disabled state                                    |
-| `loading`    | `boolean`                                                    | `false`    | Loading spinner                                   |
-| `full`       | `boolean`                                                    | `false`    | Full width                                        |
-| `icon`       | `boolean`                                                    | `false`    | Icon-only mode                                    |
-| `size`       | `string`                                                     | `''`       | Size format `height` or `heightxwidth`            |
-| `aria-label` | `string`                                                     | —          | Accessible label (delegated to inner button)      |
+| Attribute    | Type                                                         | Default    | Description                                                             |
+| ------------ | ------------------------------------------------------------ | ---------- | ----------------------------------------------------------------------- |
+| `variant`    | `'primary' \| 'secondary' \| 'ghost' \| 'danger' \| 'glass'` | `'glass'`  | Button variant                                                          |
+| `type`       | `'button' \| 'submit' \| 'reset'`                            | `'button'` | Inner-button type; invalid values become `button`                       |
+| `disabled`   | `boolean`                                                    | `false`    | Disabled state                                                          |
+| `loading`    | `boolean`                                                    | `false`    | Loading spinner                                                         |
+| `full`       | `boolean`                                                    | `false`    | Full width                                                              |
+| `icon`       | `boolean`                                                    | `false`    | Icon-only mode                                                          |
+| `size`       | `string`                                                     | `''`       | Button height in px (icon mode: also sets min-width for square default) |
+| `aria-label` | `string`                                                     | —          | Accessible label (delegated to inner button)                            |
 
 **Events:** standard `click`
 
@@ -470,6 +553,18 @@ form-associated control when external form submission behavior is required.
 
 Disabled and loading states prevent `click` events.
 
+**CSS Custom Properties:**
+
+| Property                 | Default       | Description                             |
+| ------------------------ | ------------- | --------------------------------------- |
+| `--wui-button-width`     | `max-content` | Button width                            |
+| `--wui-button-px`        | `12px`        | Horizontal padding                      |
+| `--wui-button-gap`       | `8px`         | Gap between prefix/default/suffix slots |
+| `--wui-button-color`     | variant-based | Button text color                       |
+| `--wui-button-bg`        | variant-based | Button background color                 |
+| `--wui-button-bg-hover`  | variant-based | Button hover background                 |
+| `--wui-button-bg-active` | variant-based | Button active background                |
+
 #### `<web-ui-button-group>`
 
 Button group that manages child button layout and direction.
@@ -480,7 +575,7 @@ Button group that manages child button layout and direction.
 
 **Slots:** `default` (project `<web-ui-button>` elements)
 
-Propagates `direction` attribute to child buttons.
+Applies the direction to the grouped button layout without changing child button attributes.
 
 ---
 
@@ -490,11 +585,12 @@ Propagates `direction` attribute to child buttons.
 
 Modal dialog using native `<dialog>` with `showModal()`.
 
-| Attribute           | Type      | Default | Description                       |
-| ------------------- | --------- | ------- | --------------------------------- |
-| `open`              | `boolean` | `false` | Dialog visibility                 |
-| `no-scroll-lock`    | `boolean` | `false` | Do not lock body scroll when open |
-| `no-backdrop-close` | `boolean` | `false` | Do not close on backdrop click    |
+| Attribute           | Type      | Default | Description                         |
+| ------------------- | --------- | ------- | ----------------------------------- |
+| `open`              | `boolean` | `false` | Dialog visibility                   |
+| `no-scroll-lock`    | `boolean` | `false` | Do not lock body scroll when open   |
+| `no-backdrop-close` | `boolean` | `false` | Do not close on backdrop click      |
+| `no-escape-close`   | `boolean` | `false` | Do not close when Escape is pressed |
 
 **Events:** `open-change` (`CustomEvent<{ open: boolean }>`)
 
@@ -502,28 +598,49 @@ Modal dialog using native `<dialog>` with `showModal()`.
 
 **Methods:** `showModal()`, `close()`
 
-Uses native `<dialog>` with `@cancel` prevention (Escape calls `close()`). Click on backdrop closes dialog.
+Uses native `<dialog>` with `@cancel` prevention. Escape calls `close()` unless `no-escape-close` is present. Click on backdrop closes dialog unless `no-backdrop-close` is present.
+
+**CSS Custom Properties:**
+
+| Property                  | Default                     | Description         |
+| ------------------------- | --------------------------- | ------------------- |
+| `--wui-dialog-max-width`  | `360px`                     | Dialog max width    |
+| `--wui-dialog-overlay-bg` | `var(--wui-color-backdrop)` | Backdrop background |
 
 #### `<web-ui-drawer>`
 
 Side drawer using native `<dialog>` with closing animation.
 
-| Attribute           | Type                                     | Default   | Description                               |
-| ------------------- | ---------------------------------------- | --------- | ----------------------------------------- |
-| `open`              | `boolean`                                | `false`   | Drawer visibility                         |
-| `placement`         | `'right' \| 'left' \| 'top' \| 'bottom'` | `'right'` | Slide-in direction                        |
-| `heading`           | `string`                                 | `''`      | Title text (fallback when no header slot) |
-| `closable`          | `boolean`                                | `false`   | Show close button                         |
-| `no-scroll-lock`    | `boolean`                                | `false`   | Do not lock body scroll when open         |
-| `no-backdrop-close` | `boolean`                                | `false`   | Do not close on backdrop click            |
+| Attribute           | Type                                     | Default   | Description                                                                       |
+| ------------------- | ---------------------------------------- | --------- | --------------------------------------------------------------------------------- |
+| `open`              | `boolean`                                | `false`   | Drawer visibility                                                                 |
+| `placement`         | `'right' \| 'left' \| 'top' \| 'bottom'` | `'right'` | Slide-in direction                                                                |
+| `heading`           | `string`                                 | `''`      | Title text (fallback when no header slot)                                         |
+| `closable`          | `boolean`                                | `false`   | Show close button                                                                 |
+| `no-scroll-lock`    | `boolean`                                | `false`   | Do not lock body scroll when open                                                 |
+| `no-backdrop-close` | `boolean`                                | `false`   | Do not close on backdrop click                                                    |
+| `request-only`      | `boolean`                                | `false`   | User close actions only request `open=false`; the consumer must update `open`     |
+| `headless`          | `boolean`                                | `false`   | Keep only overlay behavior and render the default slot without built-in drawer UI |
+| `dialog-label`      | `string`                                 | `''`      | Accessible name for the internal native dialog; required in headless mode         |
 
-**Events:** `open-change` (`CustomEvent<{ open: boolean }>`)
+**Events:** `open-change` (`CustomEvent<{ open: boolean }>`). With `request-only`, Escape, backdrop and the built-in close button only request `open=false`; the drawer remains open until the consumer writes `open=false`. If native dialog closure occurs while that request is rejected, the drawer restores its open top-layer state and emits the same request.
 
-**Slots:** `header`, `default`, `footer`
+**Slots:** `header`, `default`, `footer` — with `headless`, only the `default` slot is rendered.
 
 **Methods:** `show()`, `close()`
 
-Closing keeps the native dialog in the top layer until the `--wui-duration-drawer` transition completes (280ms by default), then calls `dialog.close()`. Escape always follows this close path; `no-backdrop-close` controls backdrop clicks only.
+`headless` keeps the native dialog, backdrop, placement animation, Escape/backdrop close behavior, and scroll locking. It does not render the built-in glass body, header, close button, or footer; style the default-slot content completely in the consumer.
+
+Closing keeps the native dialog in the top layer until the `--wui-duration-drawer-exit` transition completes (240ms by default), then calls `dialog.close()`. Escape always follows this close path; `no-backdrop-close` controls backdrop clicks only.
+
+**CSS Custom Properties:**
+
+| Property                  | Default                            | Description                |
+| ------------------------- | ---------------------------------- | -------------------------- |
+| `--wui-drawer-width`      | `320px`                            | Drawer width               |
+| `--wui-drawer-height`     | `300px`                            | Drawer height (top/bottom) |
+| `--wui-drawer-bg`         | `var(--wui-color-surface-overlay)` | Drawer body background     |
+| `--wui-drawer-overlay-bg` | `rgb(0 0 0 / 0.12)`                | Backdrop background        |
 
 ---
 
@@ -573,6 +690,13 @@ Tooltip overlay using pointer/focus triggers.
 
 `open` is a controlled visibility property. Pointer/focus triggers update it, and direct updates synchronize the local or portal panel. Adjacent tooltips open immediately after the first tooltip is visible; pointer/focus triggers otherwise use delay timers.
 
+**CSS Custom Properties:**
+
+| Property                  | Default | Description       |
+| ------------------------- | ------- | ----------------- |
+| `--wui-tooltip-max-width` | `240px` | Tooltip max width |
+| `--wui-tooltip-font-size` | `13px`  | Tooltip font size |
+
 #### `<web-ui-context-menu>`
 
 Right-click context menu.
@@ -685,6 +809,17 @@ Empty state placeholder.
 
 **Slots:** `default` (title, overrides `title` prop), `icon`, `description`, `action`
 
+**CSS Custom Properties:**
+
+| Property                            | Default     | Description                    |
+| ----------------------------------- | ----------- | ------------------------------ |
+| `--wui-empty-min-height`            | `240px`     | Min height (medium)            |
+| `--wui-empty-padding`               | `32px 24px` | Padding (medium)               |
+| `--wui-empty-icon-size`             | `56px`      | Icon container size (medium)   |
+| `--wui-empty-content-width`         | `480px`     | Max width of title/description |
+| `--wui-empty-title-font-size`       | `16px`      | Title font size (medium)       |
+| `--wui-empty-description-font-size` | `14px`      | Description font size (medium) |
+
 #### `<web-ui-icon>`
 
 Icon renderer using Iconify data objects.
@@ -703,6 +838,12 @@ import { lucideLoaderCircle } from '@greypan/web-ui/icons'
 html`<web-ui-icon .icon=${lucideLoaderCircle} spin />`
 ```
 
+**CSS Custom Properties:**
+
+| Property           | Default   | Description |
+| ------------------ | --------- | ----------- |
+| `--wui-icon-color` | `inherit` | Icon color  |
+
 #### `<web-ui-spinner>`
 
 Loading spinner.
@@ -735,14 +876,37 @@ WebUiSpinner.hide() // hide
 
 #### `<web-ui-layout>`
 
-Page layout grid.
+Responsive page layout with an optional full-width banner, a collapsible desktop sidebar, and a headless-drawer mobile sidebar. The page itself scrolls; the desktop sidebar and header stick to the viewport after the banner scrolls away.
+
+| Attribute           | Type      | Default   | Description                                           |
+| ------------------- | --------- | --------- | ----------------------------------------------------- |
+| `sidebar-collapsed` | `boolean` | `false`   | Controlled desktop sidebar collapsed state            |
+| `sidebar-open`      | `boolean` | `false`   | Controlled mobile sidebar drawer open state           |
+| `header-glow`       | `boolean` | `false`   | Decorative Header background glow behind slot content |
+| `sidebar-width`     | `string`  | `'240px'` | Expanded desktop and mobile sidebar width             |
+| `collapsed-width`   | `string`  | `'72px'`  | Collapsed desktop sidebar width                       |
+
+**Events:** `sidebar-collapsed-change` (`CustomEvent<{ collapsed: boolean }>`) requests a desktop collapse-state update. `sidebar-open-change` (`CustomEvent<{ open: boolean }>`) requests a mobile drawer open-state update. Consumers must write the requested value back to the corresponding controlled property.
+
+| Slot      | Description                                                                               |
+| --------- | ----------------------------------------------------------------------------------------- |
+| `banner`  | Optional full-width banner above the layout body                                          |
+| `header`  | Sticky content-area header                                                                |
+| `sidebar` | Sidebar-card content. The consumer owns its internal fixed regions and scroll containers. |
+| `default` | Main content                                                                              |
+| `tabbar`  | Bottom tab bar                                                                            |
+
+`web-ui-layout` constrains the sidebar card and owns the desktop toggle area, but does not create a sidebar scrollport. To make only part of the sidebar scroll, make the `sidebar` slot root a `height: 100%; min-height: 0` flex column and apply `overflow-y: auto` to the intended child. This keeps consumer-defined headers and footers fixed without adding extra public slots.
 
-| Slot      | Description     |
-| --------- | --------------- |
-| `header`  | Sticky top bar  |
-| `default` | Main content    |
-| `sidebar` | Side navigation |
-| `tabbar`  | Bottom tab bar  |
+At `640px` and below, the sidebar becomes a headless `web-ui-drawer`. The consumer content is rendered in the same rounded sidebar card; the mobile toggle appears in the header row.
+
+`header-glow` adds a pointer-transparent decorative glow behind header-slot content and the mobile toggle. It is a Header background rather than a foreground layer, so slotted content remains above it. Override its color with `--wui-layout-header-glow-color` (default: `--wui-color-page`). The glow concentration and spread are controlled by the internal variable `--wui-layout-header-glow-height` (default: `150%`); increase for stronger coverage, decrease for a subtler effect. Layout layers are ordered as Header (`10`) < Auxiliary (`20`) < Banner (`30`) < Tabbar (`40`) < Sidebar (`50`).
+
+**CSS Custom Properties:**
+
+| Property                      | Default | Description                                      |
+| ----------------------------- | ------- | ------------------------------------------------ |
+| `--wui-layout-sidebar-radius` | `28px`  | Border radius of sidebar card (desktop & mobile) |
 
 #### `<web-ui-back-top>`
 
@@ -759,10 +923,21 @@ Scroll-to-top button.
 
 **Methods:** `toTop()`
 
-**Positioning:** With `scrollTarget` as `window`, the button is fixed to the viewport corner. With `scrollTarget` as an `HTMLElement`, place the element inside that container and the button floats at the container's bottom corner via `position: sticky`. Offsets follow the `--web-ui-back-top-top/right/bottom/left` CSS variables.
+**Positioning:** With `scrollTarget` as `window`, the button is fixed to the viewport corner. With `scrollTarget` as an `HTMLElement`, place the element inside that container and the button floats at the container's bottom corner via `position: sticky`. Offsets follow the `--wui-back-top-top/right/bottom/left` CSS variables.
 
 Role: `button`, keyboard Enter scrolls to top.
 
+**CSS Custom Properties:**
+
+| Property                  | Default                          | Description   |
+| ------------------------- | -------------------------------- | ------------- |
+| `--wui-back-top-position` | `fixed`                          | CSS position  |
+| `--wui-back-top-z-index`  | `var(--wui-layer-auxiliary, 20)` | Z-index       |
+| `--wui-back-top-top`      | `auto`                           | Top offset    |
+| `--wui-back-top-right`    | `20px`                           | Right offset  |
+| `--wui-back-top-bottom`   | `20px`                           | Bottom offset |
+| `--wui-back-top-left`     | `auto`                           | Left offset   |
+
 #### `<web-ui-svg-draw-lines>`
 
 SVG line drawing animation using `stroke-dashoffset`. Animates geometry in-place — no cloning, no DOM manipulation.
@@ -791,7 +966,76 @@ Theme provider defining CSS custom property tokens.
 
 **Methods:** `getOverlayRoot()` — returns the portal overlay container
 
-Defines `--wui-color-*`, `--wui-shadow-*`, `--wui-layer-*`, and motion tokens. Motion tokens are stable and may be overridden per theme scope: `--wui-duration-press`, `--wui-duration-feedback`, `--wui-duration-trigger`, `--wui-duration-focus`, `--wui-duration-menu-enter`, `--wui-duration-menu-exit`, `--wui-duration-overlay-enter`, `--wui-duration-overlay-exit`, `--wui-duration-drawer-enter`, `--wui-duration-drawer-exit`, `--wui-ease-enter`, `--wui-ease-slide`, and `--wui-scale-enter`. `motion="system"` follows `prefers-reduced-motion`; use `motion="reduced"` to reduce animation in a scope or `motion="full"` in a nested theme to restore the normal token values. System appearance follows `prefers-color-scheme`.
+Defines foundation, color, layer, shadow, and motion tokens for its subtree. `motion="system"` follows `prefers-reduced-motion`; use `motion="reduced"` to reduce animation in a scope or `motion="full"` in a nested theme to restore normal token values. System appearance follows `prefers-color-scheme`.
+
+**Foundation tokens:**
+
+| Property                  | Default | Description                                      |
+| ------------------------- | ------- | ------------------------------------------------ |
+| `--wui-font-size`         | `14px`  | Base font size for controls                      |
+| `--wui-input-width`       | `200px` | Default width for compact form controls          |
+| `--wui-control-size`      | `40px`  | Default height and square min-width for controls |
+| `--wui-overlay-min-width` | `200px` | Minimum anchored overlay width                   |
+| `--wui-focus-ring-width`  | `3px`   | Focus indicator width                            |
+
+**Layer tokens:**
+
+| Property                     | Default | Description                  |
+| ---------------------------- | ------- | ---------------------------- |
+| `--wui-layer-base`           | `0`     | Base content                 |
+| `--wui-layer-inline-overlay` | `1`     | Overlay local to a component |
+| `--wui-layer-header`         | `10`    | Page header                  |
+| `--wui-layer-auxiliary`      | `20`    | Floating utility controls    |
+| `--wui-layer-banner`         | `30`    | Banners                      |
+| `--wui-layer-tabbar`         | `40`    | Tab bars                     |
+| `--wui-layer-sidebar`        | `50`    | Sidebars                     |
+| `--wui-layer-menu`           | `100`   | Menus and floating panels    |
+| `--wui-layer-menu-nested`    | `110`   | Nested menus                 |
+| `--wui-layer-toast`          | `200`   | Toasts                       |
+| `--wui-layer-loading`        | `300`   | Blocking loading surfaces    |
+
+**Motion tokens:** duration defaults are `--wui-duration-press: 80ms`, `--wui-duration-feedback: 100ms`, `--wui-duration-trigger: 160ms`, `--wui-duration-focus: 200ms`, `--wui-duration-menu-enter: 140ms`, `--wui-duration-menu-exit: 100ms`, `--wui-duration-overlay-enter: 180ms`, `--wui-duration-overlay-exit: 140ms`, `--wui-duration-drawer-enter: 280ms`, `--wui-duration-drawer-exit: 240ms`, `--wui-duration-layout: 200ms`. Easing tokens are `--wui-ease-enter` and `--wui-ease-slide`; enter scale is `--wui-scale-enter: 0.97`.
+
+**Color tokens:**
+
+| Property                           | Light default                                                | Dark default                                                 | Description                     |
+| ---------------------------------- | ------------------------------------------------------------ | ------------------------------------------------------------ | ------------------------------- |
+| `--wui-color-page`                 | `#fff`                                                       | `#18181a`                                                    | Page background                 |
+| `--wui-color-surface`              | `#fff`                                                       | `#2c2c2e`                                                    | Plain surface                   |
+| `--wui-color-surface-raised`       | `#f2f2f7`                                                    | `#2c2c2e`                                                    | Raised surface                  |
+| `--wui-color-surface-control`      | `#dfdfdf`                                                    | `#3a3a3c`                                                    | Neutral control surface         |
+| `--wui-color-surface-track`        | `#e5e5ea`                                                    | `#444446`                                                    | Slider and switch track surface |
+| `--wui-color-surface-glass`        | `rgb(250 250 250 / 0.34)`                                    | `rgb(44 44 46 / 0.42)`                                       | Liquid glass surface            |
+| `--wui-color-surface-glass-hover`  | `color-mix(... text 6%, surface-glass)`                      | `color-mix(... text 6%, surface-glass)`                      | Full glass hover background     |
+| `--wui-color-surface-glass-active` | `color-mix(... text 15%, surface-glass)`                     | `color-mix(... text 15%, surface-glass)`                     | Full glass pressed background   |
+| `--wui-color-surface-overlay`      | `rgb(246 246 246 / 0.82)`                                    | `rgb(44 44 46 / 0.82)`                                       | Translucent overlay surface     |
+| `--wui-color-text`                 | `#1b1b1b`                                                    | `#f5f5f7`                                                    | Primary text                    |
+| `--wui-color-text-secondary`       | `#6a6a6a`                                                    | `#a1a1a6`                                                    | Secondary text                  |
+| `--wui-color-text-tertiary`        | `color-mix(in srgb, var(--wui-color-text) 35%, transparent)` | `color-mix(in srgb, var(--wui-color-text) 42%, transparent)` | Tertiary text and quiet icons   |
+| `--wui-color-text-disabled`        | `color-mix(in srgb, var(--wui-color-text) 32%, transparent)` | `color-mix(in srgb, var(--wui-color-text) 38%, transparent)` | Disabled foreground text        |
+| `--wui-color-state-layer-hover`    | `color-mix(in srgb, var(--wui-color-text) 6%, transparent)`  | `color-mix(in srgb, var(--wui-color-text) 6%, transparent)`  | Transparent hover overlay       |
+| `--wui-color-state-layer-active`   | `color-mix(in srgb, var(--wui-color-text) 15%, transparent)` | `color-mix(in srgb, var(--wui-color-text) 15%, transparent)` | Transparent pressed overlay     |
+| `--wui-color-border`               | `rgb(0 0 0 / 0.1)`                                           | `rgb(255 255 255 / 0.14)`                                    | Normal border and divider       |
+| `--wui-color-glass-border`         | `rgb(51 51 51 / 0.12)`                                       | `rgb(255 255 255 / 0.16)`                                    | Glass border tint               |
+| `--wui-color-glass-highlight`      | `rgb(255 255 255 / 0.9)`                                     | `rgb(255 255 255 / 0.22)`                                    | Glass edge highlight            |
+| `--wui-color-accent`               | `#08f`                                                       | `#0a84ff`                                                    | Accent and focused input border |
+| `--wui-color-on-accent`            | `#fff`                                                       | `#fff`                                                       | Foreground on accent            |
+| `--wui-color-success`              | `#16a34a`                                                    | `#30d158`                                                    | Success                         |
+| `--wui-color-warning`              | `#d97706`                                                    | `#ff9f0a`                                                    | Warning                         |
+| `--wui-color-danger`               | `#dc2626`                                                    | `#ff453a`                                                    | Danger                          |
+| `--wui-color-info`                 | `#2563eb`                                                    | `#64d2ff`                                                    | Info                            |
+| `--wui-color-backdrop`             | `rgb(0 0 0 / 0.12)`                                          | `rgb(0 0 0 / 0.48)`                                          | Modal backdrop                  |
+| `--wui-color-focus-ring`           | `rgb(0 136 255 / 0.4)`                                       | `rgb(10 132 255 / 0.62)`                                     | Focus indicator color           |
+
+**Shadow tokens:**
+
+| Property               | Light default                    | Dark default                    | Description                 |
+| ---------------------- | -------------------------------- | ------------------------------- | --------------------------- |
+| `--wui-shadow-overlay` | `2px 16px 40px rgb(0 0 0 / 0.4)` | `0 18px 48px rgb(0 0 0 / 0.54)` | Modal and drawer shadow     |
+| `--wui-shadow-panel`   | `0 3px 9px rgb(0 0 0 / 0.27)`    | `0 4px 16px rgb(0 0 0 / 0.35)`  | Small floating panel shadow |
+| `--wui-shadow-glass`   | four-layer diffuse shadow        | `0 12px 32px rgb(0 0 0 / 0.38)` | Base liquid glass shadow    |
+
+**Internal tokens:** variables prefixed `--wui-internal-*` are private wiring between shadow DOM parts; they are not part of the public token API and must not be overridden by consumers.
 
 ---
 
@@ -845,6 +1089,13 @@ toast.updateMessage(id, { message: 'Upload 60% complete', heading: 'Uploading' }
 
 Hover pauses auto-close timer (uses `pointerenter`/`pointerleave`). Batch-mounts toasts created in the same microtask.
 
+**CSS Custom Properties:**
+
+| Property                        | Default | Description                                        |
+| ------------------------------- | ------- | -------------------------------------------------- |
+| `--wui-toast-viewport-gap`      | `16px`  | Visible distance between toasts and viewport edges |
+| `--wui-toast-container-padding` | `40px`  | Container padding reserved for diffuse shadows     |
+
 ---
 
 ### Sub-items
@@ -864,6 +1115,12 @@ Selection option for `<web-ui-select>`.
 
 Not form-associated (child of select, not independent submit).
 
+**CSS Custom Properties:**
+
+| Property                     | Default | Description                                   |
+| ---------------------------- | ------- | --------------------------------------------- |
+| `--wui-option-check-display` | `block` | Display mode of the selection check indicator |
+
 #### `<web-ui-segmented-trigger>`
 
 Segment trigger for `<web-ui-segmented>`.
@@ -877,3 +1134,11 @@ Segment trigger for `<web-ui-segmented>`.
 **Events:** `change`
 
 Not form-associated (child of segmented, not independent submit).
+
+**CSS Custom Properties:**
+
+| Property                            | Default                          | Description               |
+| ----------------------------------- | -------------------------------- | ------------------------- |
+| `--wui-segmented-trigger-px`        | `12px`                           | Horizontal padding        |
+| `--wui-segmented-trigger-bg-hover`  | `--wui-color-state-layer-hover`  | Trigger hover background  |
+| `--wui-segmented-trigger-bg-active` | `--wui-color-state-layer-active` | Trigger active background |

package/dist/_virtual/{_@oxc-project_runtime@0.140.0 → _@oxc-project_runtime@0.146.0}/helpers/esm/decorate.js

@@ -1,4 +1,4 @@
-//#region \0@oxc-project+runtime@0.140.0/helpers/esm/decorate.js
+//#region \0@oxc-project+runtime@0.146.0/helpers/esm/decorate.js
 function e(e, t, n, r) {
 	var i = arguments.length, a = i < 3 ? t : r === null ? r = Object.getOwnPropertyDescriptor(t, n) : r, o;
 	if (typeof Reflect == "object" && typeof Reflect.decorate == "function") a = Reflect.decorate(e, t, n, r);

package/dist/assets/glass.js

@@ -1,5 +1,5 @@
 //#region src/assets/glass.css?inline
-var e = ".wui-glass{border:.5px double var(--wui-color-glass-border,#33333314);-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);box-shadow:inset -1px -1px .5px -.5px var(--wui-color-glass-highlight,#ffffffe6), inset 1px 1px .5px -.5px var(--wui-color-glass-highlight,#ffffffe6), inset -3px -3px .5px -3px color-mix(in srgb, var(--wui-color-glass-highlight,#ffffffe6) 60%, transparent), inset 3px 3px .5px -3px color-mix(in srgb, var(--wui-color-glass-highlight,#ffffffe6) 60%, transparent), inset 0 0 1px #000c, var(--wui-glass-shadow,var(--wui-shadow-glass,0 2px 16px #0000000f));position:relative}";
+var e = ".wui-glass{background-color:var(--wui-color-surface-glass,#fafafa57);background-image:linear-gradient(to bottom, color-mix(in srgb, var(--wui-color-glass-highlight,#ffffffe6) 20%, transparent), color-mix(in srgb, var(--wui-color-glass-highlight,#ffffffe6) 4%, transparent) 48%, transparent);-webkit-backdrop-filter:blur(4px)saturate(160%)brightness(1.06);backdrop-filter:blur(4px)saturate(160%)brightness(1.06);box-shadow:inset 0 0 0 .5px color-mix(in srgb, var(--wui-color-glass-highlight,#ffffffe6) 38%, transparent), inset 0 1px .5px color-mix(in srgb, var(--wui-color-glass-highlight,#ffffffe6) 52%, transparent), inset 0 -.5px 1px #00000008, var(--wui-internal-glass-focus-ring,0 0 0 0 transparent), var(--wui-internal-glass-shadow,var(--wui-shadow-glass,0 0 1px #0000000d, 0 0 8px #00000008, 0 2px 16px #00000006, 0 8px 32px #00000004));background-clip:padding-box;position:relative}";
 //#endregion
 export { e as default };
 

package/dist/assets/glass.js.map

@@ -1 +1 @@
-{"version":3,"file":"glass.js","names":[],"sources":["../../src/assets/glass.css?inline"],"sourcesContent":["/*\n * 玻璃公共样式\n */\n\n.wui-glass {\n  position: relative;\n\n  border: 0.5px double var(--wui-color-glass-border, rgb(51 51 51 / 0.08));\n\n  /* Safari 16.4 只支持带 -webkit- 前缀的 backdrop-filter（无前缀 18 才支持），\n     lightningcss 对 ?inline 导入不做自动前缀，需手动写前缀版本 */\n  /* stylelint-disable-next-line property-no-vendor-prefix */\n  -webkit-backdrop-filter: blur(2px);\n  backdrop-filter: blur(2px);\n  box-shadow:\n    inset -1px -1px 0.5px -0.5px var(--wui-color-glass-highlight, rgb(255 255 255 / 0.9)),\n    inset 1px 1px 0.5px -0.5px var(--wui-color-glass-highlight, rgb(255 255 255 / 0.9)),\n    inset -3px -3px 0.5px -3px\n      color-mix(in srgb, var(--wui-color-glass-highlight, rgb(255 255 255 / 0.9)) 60%, transparent),\n    inset 3px 3px 0.5px -3px\n      color-mix(in srgb, var(--wui-color-glass-highlight, rgb(255 255 255 / 0.9)) 60%, transparent),\n    inset 0 0 1px rgb(0 0 0 / 0.8),\n    var(--wui-glass-shadow, var(--wui-shadow-glass, 0 2px 16px rgb(0 0 0 / 0.06)));\n}\n"],"mappings":""}
+{"version":3,"file":"glass.js","names":[],"sources":["../../src/assets/glass.css?inline"],"sourcesContent":["/*\n * 玻璃公共样式\n */\n\n.wui-glass {\n  position: relative;\n\n  background-color: var(--wui-color-surface-glass, rgb(250 250 250 / 0.34));\n  background-image: linear-gradient(\n    to bottom,\n    color-mix(in srgb, var(--wui-color-glass-highlight, rgb(255 255 255 / 0.9)) 20%, transparent),\n    color-mix(in srgb, var(--wui-color-glass-highlight, rgb(255 255 255 / 0.9)) 4%, transparent) 48%,\n    transparent\n  );\n  background-clip: padding-box;\n\n  /* Safari 16.4 只支持带 -webkit- 前缀的 backdrop-filter（无前缀 18 才支持），\n     lightningcss 对 ?inline 导入不做自动前缀，需手动写前缀版本 */\n  /* stylelint-disable-next-line property-no-vendor-prefix */\n  -webkit-backdrop-filter: blur(4px) saturate(160%) brightness(1.06);\n  backdrop-filter: blur(4px) saturate(160%) brightness(1.06);\n  box-shadow:\n    inset 0 0 0 0.5px color-mix(in srgb, var(--wui-color-glass-highlight, rgb(255 255 255 / 0.9)) 38%, transparent),\n    inset 0 1px 0.5px color-mix(in srgb, var(--wui-color-glass-highlight, rgb(255 255 255 / 0.9)) 52%, transparent),\n    inset 0 -0.5px 1px rgb(0 0 0 / 0.03),\n    var(--wui-internal-glass-focus-ring, 0 0 0 0 transparent),\n    var(\n      --wui-internal-glass-shadow,\n      var(\n        --wui-shadow-glass,\n        0 0 1px rgb(0 0 0 / 0.05),\n        0 0 8px rgb(0 0 0 / 0.03),\n        0 2px 16px rgb(0 0 0 / 0.025),\n        0 8px 32px rgb(0 0 0 / 0.015)\n      )\n    );\n}\n"],"mappings":""}

package/dist/assets/menu-portal.js

@@ -1,5 +1,5 @@
 //#region src/assets/menu-portal.css?inline
-var e = ".wui-menu-portal-overlay{--wui-glass-shadow:var(--wui-shadow-pop,0 3px 9px #00000045);--wui-duration-overlay-enter:var(--wui-duration-menu-enter,.14s);--wui-duration-overlay-exit:var(--wui-duration-menu-exit,.1s);--wui-overlay-min-width:200px;-webkit-user-select:none;user-select:none;z-index:var(--wui-layer-menu,100);box-sizing:border-box;min-width:var(--wui-overlay-min-width,120px);max-width:90vw;max-height:80vh;color:var(--wui-color-text,#1b1b1b);background-color:var(--wui-color-surface-overlay,#f6f6f6e0);border-radius:20px;position:fixed;overflow:hidden}.wui-menu-portal-overlay .wui-menu-scroll{max-height:80vh;overflow-y:auto}.wui-menu-portal-overlay .wui-menu-content{padding:4px}.wui-menu-portal-overlay.dropdown-overlay .wui-menu-scroll{max-height:320px}.wui-menu-portal-overlay.dropdown-overlay[data-level]:not([data-level=\"0\"]),.wui-menu-portal-overlay.context-submenu{z-index:var(--wui-layer-menu-submenu,110)}";
+var e = ".wui-menu-portal-overlay{--wui-internal-glass-shadow:var(--wui-shadow-panel,0 3px 9px #00000045);--wui-internal-duration-overlay-enter:var(--wui-duration-menu-enter,.14s);--wui-internal-duration-overlay-exit:var(--wui-duration-menu-exit,.1s);-webkit-user-select:none;user-select:none;z-index:var(--wui-layer-menu,100);box-sizing:border-box;min-width:var(--wui-overlay-min-width,200px);max-width:90vw;max-height:80vh;color:var(--wui-color-text,#1b1b1b);background-color:var(--wui-color-surface-overlay,#f6f6f6d1);border-radius:20px;position:fixed;overflow:hidden}.wui-menu-portal-overlay .wui-menu-scroll{max-height:80vh;overflow-y:auto}.wui-menu-portal-overlay .wui-menu-content{padding:4px}.wui-menu-portal-overlay.dropdown-overlay .wui-menu-scroll{max-height:320px}.wui-menu-portal-overlay.dropdown-overlay[data-level]:not([data-level=\"0\"]),.wui-menu-portal-overlay.context-submenu{z-index:var(--wui-layer-menu-nested,110)}";
 //#endregion
 export { e as default };
 

package/dist/assets/menu-portal.js.map

@@ -1 +1 @@
-{"version":3,"file":"menu-portal.js","names":[],"sources":["../../src/assets/menu-portal.css?inline"],"sourcesContent":[".wui-menu-portal-overlay {\n  --wui-glass-shadow: var(--wui-shadow-pop, 0 3px 9px rgb(0 0 0 / 0.27));\n  --wui-duration-overlay-enter: var(--wui-duration-menu-enter, 140ms);\n  --wui-duration-overlay-exit: var(--wui-duration-menu-exit, 100ms);\n  --wui-overlay-min-width: 200px;\n  user-select: none;\n\n  position: fixed;\n  z-index: var(--wui-layer-menu, 100);\n\n  overflow: hidden;\n\n  box-sizing: border-box;\n  min-width: var(--wui-overlay-min-width, 120px);\n  max-width: 90vw;\n  max-height: 80vh;\n  border-radius: 20px;\n\n  color: var(--wui-color-text, #1b1b1b);\n\n  background-color: var(--wui-color-surface-overlay, rgb(246 246 246 / 0.88));\n\n  & .wui-menu-scroll {\n    overflow-y: auto;\n    max-height: 80vh;\n  }\n\n  & .wui-menu-content {\n    padding: 4px;\n  }\n\n  &.dropdown-overlay {\n    & .wui-menu-scroll {\n      max-height: 320px;\n    }\n\n    &[data-level]:not([data-level='0']) {\n      z-index: var(--wui-layer-menu-submenu, 110);\n    }\n  }\n\n  &.context-submenu {\n    z-index: var(--wui-layer-menu-submenu, 110);\n  }\n}\n"],"mappings":""}
+{"version":3,"file":"menu-portal.js","names":[],"sources":["../../src/assets/menu-portal.css?inline"],"sourcesContent":[".wui-menu-portal-overlay {\n  --wui-internal-glass-shadow: var(--wui-shadow-panel, 0 3px 9px rgb(0 0 0 / 0.27));\n  --wui-internal-duration-overlay-enter: var(--wui-duration-menu-enter, 140ms);\n  --wui-internal-duration-overlay-exit: var(--wui-duration-menu-exit, 100ms);\n  user-select: none;\n\n  position: fixed;\n  z-index: var(--wui-layer-menu, 100);\n\n  overflow: hidden;\n\n  box-sizing: border-box;\n  min-width: var(--wui-overlay-min-width, 200px);\n  max-width: 90vw;\n  max-height: 80vh;\n  border-radius: 20px;\n\n  color: var(--wui-color-text, #1b1b1b);\n\n  background-color: var(--wui-color-surface-overlay, rgb(246 246 246 / 0.82));\n\n  & .wui-menu-scroll {\n    overflow-y: auto;\n    max-height: 80vh;\n  }\n\n  & .wui-menu-content {\n    padding: 4px;\n  }\n\n  &.dropdown-overlay {\n    & .wui-menu-scroll {\n      max-height: 320px;\n    }\n\n    &[data-level]:not([data-level='0']) {\n      z-index: var(--wui-layer-menu-nested, 110);\n    }\n  }\n\n  &.context-submenu {\n    z-index: var(--wui-layer-menu-nested, 110);\n  }\n}\n"],"mappings":""}

package/dist/assets/overlay-motion.js

@@ -1,5 +1,5 @@
 //#region src/assets/overlay-motion.css?inline
-var e = ".wui-floating-panel{transform-origin:var(--wui-overlay-transform-origin,center);opacity:1;transition:opacity var(--wui-duration-overlay-enter,.18s) var(--wui-ease-out,cubic-bezier(.23, 1, .32, 1)), transform var(--wui-duration-overlay-enter,.18s) var(--wui-ease-out,cubic-bezier(.23, 1, .32, 1));transform:scale(1)}.wui-floating-panel[data-wui-presence=entering],.wui-floating-panel[data-wui-presence=closing]{transform:scale(var(--wui-scale-enter,.97));opacity:0}.wui-floating-panel[data-wui-presence=closing]{pointer-events:none;transition-duration:var(--wui-duration-overlay-exit,.14s)}@media (prefers-reduced-motion:reduce){.wui-floating-panel,.wui-floating-panel[data-wui-presence=entering],.wui-floating-panel[data-wui-presence=closing]{transition-duration:.12s;transform:none}}";
+var e = ".wui-floating-panel{transform-origin:var(--wui-internal-overlay-transform-origin,center);opacity:1;transition:opacity var(--wui-internal-duration-overlay-enter,var(--wui-duration-overlay-enter,.18s)) var(--wui-ease-enter,cubic-bezier(.23, 1, .32, 1)), transform var(--wui-internal-duration-overlay-enter,var(--wui-duration-overlay-enter,.18s)) var(--wui-ease-enter,cubic-bezier(.23, 1, .32, 1));transform:scale(1)}.wui-floating-panel[data-wui-presence=entering],.wui-floating-panel[data-wui-presence=closing]{transform:scale(var(--wui-scale-enter,.97));opacity:0}.wui-floating-panel[data-wui-presence=closing]{pointer-events:none;transition-duration:var(--wui-internal-duration-overlay-exit,var(--wui-duration-overlay-exit,.14s))}@media (prefers-reduced-motion:reduce){.wui-floating-panel,.wui-floating-panel[data-wui-presence=entering],.wui-floating-panel[data-wui-presence=closing]{transition-duration:.12s;transform:none}}";
 //#endregion
 export { e as default };
 

package/dist/assets/overlay-motion.js.map

@@ -1 +1 @@
-{"version":3,"file":"overlay-motion.js","names":[],"sources":["../../src/assets/overlay-motion.css?inline"],"sourcesContent":[".wui-floating-panel {\n  transform-origin: var(--wui-overlay-transform-origin, center);\n  transform: scale(1);\n  opacity: 1;\n  transition:\n    opacity var(--wui-duration-overlay-enter, 180ms) var(--wui-ease-out, cubic-bezier(0.23, 1, 0.32, 1)),\n    transform var(--wui-duration-overlay-enter, 180ms) var(--wui-ease-out, cubic-bezier(0.23, 1, 0.32, 1));\n}\n\n.wui-floating-panel[data-wui-presence='entering'],\n.wui-floating-panel[data-wui-presence='closing'] {\n  transform: scale(var(--wui-scale-enter, 0.97));\n  opacity: 0;\n}\n\n.wui-floating-panel[data-wui-presence='closing'] {\n  pointer-events: none;\n  transition-duration: var(--wui-duration-overlay-exit, 140ms);\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .wui-floating-panel,\n  .wui-floating-panel[data-wui-presence='entering'],\n  .wui-floating-panel[data-wui-presence='closing'] {\n    transform: none;\n    transition-duration: 120ms;\n  }\n}\n"],"mappings":""}
+{"version":3,"file":"overlay-motion.js","names":[],"sources":["../../src/assets/overlay-motion.css?inline"],"sourcesContent":[".wui-floating-panel {\n  transform-origin: var(--wui-internal-overlay-transform-origin, center);\n  transform: scale(1);\n  opacity: 1;\n  transition:\n    opacity var(--wui-internal-duration-overlay-enter, var(--wui-duration-overlay-enter, 180ms))\n      var(--wui-ease-enter, cubic-bezier(0.23, 1, 0.32, 1)),\n    transform var(--wui-internal-duration-overlay-enter, var(--wui-duration-overlay-enter, 180ms))\n      var(--wui-ease-enter, cubic-bezier(0.23, 1, 0.32, 1));\n}\n\n.wui-floating-panel[data-wui-presence='entering'],\n.wui-floating-panel[data-wui-presence='closing'] {\n  transform: scale(var(--wui-scale-enter, 0.97));\n  opacity: 0;\n}\n\n.wui-floating-panel[data-wui-presence='closing'] {\n  pointer-events: none;\n  transition-duration: var(--wui-internal-duration-overlay-exit, var(--wui-duration-overlay-exit, 140ms));\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .wui-floating-panel,\n  .wui-floating-panel[data-wui-presence='entering'],\n  .wui-floating-panel[data-wui-presence='closing'] {\n    transform: none;\n    transition-duration: 120ms;\n  }\n}\n"],"mappings":""}

package/dist/assets/toast-containers.js

@@ -1,5 +1,5 @@
 //#region src/assets/toast-containers.css?inline
-var e = ".wui-toast-container{pointer-events:none;z-index:var(--wui-layer-toast,200);overscroll-behavior:contain;flex-direction:column;gap:8px;max-height:100vh;padding:24px;display:flex;position:fixed;overflow-y:auto}.wui-toast-container>*{pointer-events:auto}.wui-toast-top-left{align-items:flex-start;top:0;left:0}.wui-toast-top-center{align-items:center;top:0;left:50%;transform:translate(-50%)}.wui-toast-top-right{align-items:flex-end;top:0;right:0}.wui-toast-bottom-left{flex-direction:column-reverse;align-items:flex-start;bottom:0;left:0}.wui-toast-bottom-center{flex-direction:column-reverse;align-items:center;bottom:0;left:50%;transform:translate(-50%)}.wui-toast-bottom-right{flex-direction:column-reverse;align-items:flex-end;bottom:0;right:0}";
+var e = ".wui-toast-container{--wui-toast-viewport-gap:16px;--wui-toast-container-padding:40px;pointer-events:none;z-index:var(--wui-layer-toast,200);overscroll-behavior:contain;max-height:calc(100vh + 2 * (var(--wui-toast-container-padding) - var(--wui-toast-viewport-gap)));padding:var(--wui-toast-container-padding);flex-direction:column;gap:8px;display:flex;position:fixed;overflow-y:auto}.wui-toast-container>*{pointer-events:auto}.wui-toast-top-left{top:calc(var(--wui-toast-viewport-gap) - var(--wui-toast-container-padding));left:calc(var(--wui-toast-viewport-gap) - var(--wui-toast-container-padding));align-items:flex-start}.wui-toast-top-center{top:calc(var(--wui-toast-viewport-gap) - var(--wui-toast-container-padding));align-items:center;left:50%;transform:translate(-50%)}.wui-toast-top-right{top:calc(var(--wui-toast-viewport-gap) - var(--wui-toast-container-padding));right:calc(var(--wui-toast-viewport-gap) - var(--wui-toast-container-padding));align-items:flex-end}.wui-toast-bottom-left{bottom:calc(var(--wui-toast-viewport-gap) - var(--wui-toast-container-padding));left:calc(var(--wui-toast-viewport-gap) - var(--wui-toast-container-padding));flex-direction:column-reverse;align-items:flex-start}.wui-toast-bottom-center{bottom:calc(var(--wui-toast-viewport-gap) - var(--wui-toast-container-padding));flex-direction:column-reverse;align-items:center;left:50%;transform:translate(-50%)}.wui-toast-bottom-right{right:calc(var(--wui-toast-viewport-gap) - var(--wui-toast-container-padding));bottom:calc(var(--wui-toast-viewport-gap) - var(--wui-toast-container-padding));flex-direction:column-reverse;align-items:flex-end}";
 //#endregion
 export { e as default };
 

package/dist/assets/toast-containers.js.map

@@ -1 +1 @@
-{"version":3,"file":"toast-containers.js","names":[],"sources":["../../src/assets/toast-containers.css?inline"],"sourcesContent":["/* Toast 容器定位 — 由 toast 命令式 API 动态注入到 body */\n\n.wui-toast-container {\n  pointer-events: none;\n\n  position: fixed;\n  z-index: var(--wui-layer-toast, 200);\n\n  overflow-y: auto;\n  overscroll-behavior: contain;\n  display: flex;\n  flex-direction: column;\n  gap: 8px;\n\n  max-height: 100vh;\n\n  /* padding 需要 >= 阴影模糊半径，否则 overflow 会裁剪子元素 box-shadow */\n  padding: 24px;\n}\n\n.wui-toast-container > * {\n  pointer-events: auto;\n}\n\n/* ===== 顶部位置 ===== */\n\n.wui-toast-top-left {\n  top: 0;\n  left: 0;\n  align-items: flex-start;\n}\n\n.wui-toast-top-center {\n  top: 0;\n  left: 50%;\n  transform: translateX(-50%);\n  align-items: center;\n}\n\n.wui-toast-top-right {\n  top: 0;\n  right: 0;\n  align-items: flex-end;\n}\n\n/* ===== 底部位置 ===== */\n\n.wui-toast-bottom-left {\n  bottom: 0;\n  left: 0;\n  flex-direction: column-reverse;\n  align-items: flex-start;\n}\n\n.wui-toast-bottom-center {\n  bottom: 0;\n  left: 50%;\n  transform: translateX(-50%);\n\n  flex-direction: column-reverse;\n  align-items: center;\n}\n\n.wui-toast-bottom-right {\n  right: 0;\n  bottom: 0;\n  flex-direction: column-reverse;\n  align-items: flex-end;\n}\n"],"mappings":""}
+{"version":3,"file":"toast-containers.js","names":[],"sources":["../../src/assets/toast-containers.css?inline"],"sourcesContent":["/* Toast 容器定位 — 由 toast 命令式 API 动态注入到 body */\n\n.wui-toast-container {\n  --wui-toast-viewport-gap: 16px;\n  --wui-toast-container-padding: 40px;\n  pointer-events: none;\n\n  position: fixed;\n  z-index: var(--wui-layer-toast, 200);\n\n  overflow-y: auto;\n  overscroll-behavior: contain;\n  display: flex;\n  flex-direction: column;\n  gap: 8px;\n\n  /* 负向定位只露出可见 gap；剩余 padding 继续作为阴影裁剪缓冲区 */\n  max-height: calc(100vh + 2 * (var(--wui-toast-container-padding) - var(--wui-toast-viewport-gap)));\n\n  /* padding 需要 >= 阴影偏移 + 模糊半径，否则 overflow 会裁剪子元素 box-shadow */\n  padding: var(--wui-toast-container-padding);\n}\n\n.wui-toast-container > * {\n  pointer-events: auto;\n}\n\n/* ===== 顶部位置 ===== */\n\n.wui-toast-top-left {\n  top: calc(var(--wui-toast-viewport-gap) - var(--wui-toast-container-padding));\n  left: calc(var(--wui-toast-viewport-gap) - var(--wui-toast-container-padding));\n  align-items: flex-start;\n}\n\n.wui-toast-top-center {\n  top: calc(var(--wui-toast-viewport-gap) - var(--wui-toast-container-padding));\n  left: 50%;\n  transform: translateX(-50%);\n  align-items: center;\n}\n\n.wui-toast-top-right {\n  top: calc(var(--wui-toast-viewport-gap) - var(--wui-toast-container-padding));\n  right: calc(var(--wui-toast-viewport-gap) - var(--wui-toast-container-padding));\n  align-items: flex-end;\n}\n\n/* ===== 底部位置 ===== */\n\n.wui-toast-bottom-left {\n  bottom: calc(var(--wui-toast-viewport-gap) - var(--wui-toast-container-padding));\n  left: calc(var(--wui-toast-viewport-gap) - var(--wui-toast-container-padding));\n  flex-direction: column-reverse;\n  align-items: flex-start;\n}\n\n.wui-toast-bottom-center {\n  bottom: calc(var(--wui-toast-viewport-gap) - var(--wui-toast-container-padding));\n  left: 50%;\n  transform: translateX(-50%);\n\n  flex-direction: column-reverse;\n  align-items: center;\n}\n\n.wui-toast-bottom-right {\n  right: calc(var(--wui-toast-viewport-gap) - var(--wui-toast-container-padding));\n  bottom: calc(var(--wui-toast-viewport-gap) - var(--wui-toast-container-padding));\n  flex-direction: column-reverse;\n  align-items: flex-end;\n}\n"],"mappings":""}