@greypan/web-ui 6.0.0 → 6.2.0

package/README.md

@@ -123,12 +123,12 @@ useEffect(() => {
 <web-ui-dropdown-item ref={itemRef}>Paste and close</web-ui-dropdown-item>
 ```
 
-In `portal` mode the library physically moves panel content into the overlay Shadow DOM. React removes nodes
-through its recorded insertion parent, so a bare conditional child (`{condition && <el/>}`) whose node was
-already migrated cannot be removed while the panel is open: the commit fails and the node can reappear when
-the panel closes. Conditionally render inside a stable wrapper element instead — React records the wrapper as
-the insertion parent, so wrapper-local additions and removals keep working while the panel is open and across
-open/close cycles:
+In `portal` mode the library physically moves panel content into the overlay Shadow DOM:
+
+- React removes nodes through its recorded insertion parent, so a bare conditional child (`{condition && <el/>}`) whose node was already migrated cannot be removed while the panel is open: the commit fails and the node can reappear when the panel closes.
+- Conditionally render inside a stable wrapper element instead — React records the wrapper as the insertion parent, so wrapper-local additions and removals keep working while the panel is open and across open/close cycles (example below).
+- Bare conditional additions while the panel is open (appending to the host) keep working and migrate into the panel automatically.
+- Keeping content mounted and toggling visibility remains a valid fallback.
 
 ```tsx
 <web-ui-popover portal open={open} trigger="manual">
@@ -136,9 +136,6 @@ open/close cycles:
 </web-ui-popover>
 ```
 
-Bare conditional additions while the panel is open (appending to the host) keep working and migrate into the
-panel automatically. Keeping content mounted and toggling visibility remains a valid fallback.
-
 ### Lit
 
 Portal panels support live rendering for Lit child parts: `${condition ? html`<el/>` : nothing}` inside
@@ -257,11 +254,16 @@ components use this mode; the instant open/close family (collapse, popover, drop
 The control manages its own value/checked state internally; user interaction flips it immediately and then dispatches
 native `input`/`change` events. Assigning the property programmatically (`el.checked = true`) overrides the internal
 state. This mirrors native `<input type="checkbox">` — there is no `controlled` prop because the value is always readable
-and writable, and React/Vue layers provide their own controlled wrappers on top. For interactions that need an external
-round-trip before the flip is durable (e.g. a switch that should only stay on after an API call succeeds), use the
-optimistic-update path: flip immediately, observe `change`, set the control's `loading` during the request (this blocks
-further interaction and shows a spinner), and on failure write the property back (`el.checked = false`) plus surface a
-toast. The flip-before-approval window is accepted; there is no `controlled` prop for a reject-before-flip contract.
+and writable, and React/Vue layers provide their own controlled wrappers on top.
+
+For interactions that need an external round-trip before the flip is durable (e.g. a switch that should only stay on
+after an API call succeeds), use the optimistic-update path:
+
+- Flip immediately, then observe `change`.
+- Set the control's `loading` during the request; this blocks further interaction and shows a spinner.
+- On failure, write the property back (`el.checked = false`) and surface a toast.
+
+The flip-before-approval window is accepted; there is no `controlled` prop for a reject-before-flip contract.
 
 ### Form-associated controls
 
@@ -287,6 +289,7 @@ All form controls participate in native `FormData`, constraint validation, `form
 |                        | [`<web-ui-button-group>`](#web-ui-button-group)           |
 | **Overlay / Modal**    | [`<web-ui-dialog>`](#web-ui-dialog)                       |
 |                        | [`<web-ui-drawer>`](#web-ui-drawer)                       |
+|                        | [`imagePreview()`](#imagepreview)                         |
 | **In-flow Disclosure** | [`<web-ui-collapse>`](#web-ui-collapse)                   |
 | **Floating**           | [`<web-ui-popover>`](#web-ui-popover)                     |
 |                        | [`<web-ui-tooltip>`](#web-ui-tooltip)                     |
@@ -403,16 +406,16 @@ ArrowUp/ArrowDown keyboard increments and decrements the value. Empty or `-` inp
 
 Select dropdown with option items, keyboard navigation, and portal support.
 
-| Attribute          | Type                               | Default | Description                       |
-| ------------------ | ---------------------------------- | ------- | --------------------------------- |
-| `value`            | `string`                           | `''`    | Selected value                    |
-| `placeholder`      | `string`                           | `''`    | Placeholder text                  |
-| `name`             | `string`                           | `''`    | Form field name                   |
-| `disabled`         | `boolean`                          | `false` | Disabled state                    |
-| `required`         | `boolean`                          | `false` | Required validation               |
-| `portal`           | `boolean`                          | `false` | Render dropdown in theme overlay  |
-| `no-scroll-lock`   | `boolean`                          | `false` | Do not lock body scroll when open |
-| `overlayContainer` | `HTMLElement \| () => HTMLElement` | —       | Explicit portal container         |
+| Attribute          | Type                               | Default | Description                                 |
+| ------------------ | ---------------------------------- | ------- | ------------------------------------------- |
+| `value`            | `string`                           | `''`    | Selected value                              |
+| `placeholder`      | `string`                           | `''`    | Placeholder text                            |
+| `name`             | `string`                           | `''`    | Form field name                             |
+| `disabled`         | `boolean`                          | `false` | Disabled state                              |
+| `required`         | `boolean`                          | `false` | Required validation                         |
+| `portal`           | `boolean`                          | `false` | Render dropdown in theme-owned overlay root |
+| `no-scroll-lock`   | `boolean`                          | `false` | Do not lock body scroll when open           |
+| `overlayContainer` | `HTMLElement \| () => HTMLElement` | —       | Explicit portal container                   |
 
 **Events:** `input`, `change`, `open-change` (`CustomEvent<{ open: boolean }>`)
 
@@ -450,7 +453,7 @@ Editable combobox with input filtering and single option selection.
 | `readonly`           | `boolean`                          | `false`      | Read-only state (no typing, no dropdown)                                                          |
 | `required`           | `boolean`                          | `false`      | Required validation                                                                               |
 | `allow-custom-value` | `boolean`                          | `false`      | Allow Enter to submit a custom value that is not among candidates                                 |
-| `portal`             | `boolean`                          | `false`      | Render dropdown in theme overlay                                                                  |
+| `portal`             | `boolean`                          | `false`      | Render dropdown in theme-owned overlay root                                                       |
 | `no-scroll-lock`     | `boolean`                          | `false`      | Do not lock body scroll when open                                                                 |
 | `overlayContainer`   | `HTMLElement \| () => HTMLElement` | —            | Explicit portal container                                                                         |
 | `aria-label`         | `string`                           | —            | Accessible name                                                                                   |
@@ -496,7 +499,7 @@ Range slider with marks and vertical orientation.
 
 **Methods:** `focus()`, `blur()`
 
-Supports ArrowLeft/Right/Up/Down, Home/End, PageUp/PageDown keyboard navigation. Uses pointer capture for drag interaction across mouse, touch, and pen.
+Supports ArrowLeft/Right/Up/Down, Home/End, PageUp/PageDown keyboard navigation. Uses pointer capture for drag interaction across mouse, touch, and pen. Both the component host and the track declare `touch-action: none`, and an active drag suppresses `touchmove` defaulting, so iOS Safari never takes over horizontal or vertical drags mid-gesture.
 
 **CSS Custom Properties:**
 
@@ -506,8 +509,9 @@ Supports ArrowLeft/Right/Up/Down, Home/End, PageUp/PageDown keyboard navigation.
 | `--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`     | `30px`                              | Thumb width            |
-| `--wui-slider-thumb-height`    | `20px`                              | Thumb height           |
+| `--wui-slider-thumb-width`     | `24px`                              | Thumb width            |
+| `--wui-slider-thumb-height`    | `18px`                              | Thumb height           |
+| `--wui-slider-thumb-radius`    | `8px`                               | Thumb border radius    |
 | `--wui-slider-marks-inset`     | `0`                                 | Marks inset from edges |
 
 #### `<web-ui-checkbox>`
@@ -582,6 +586,8 @@ Form-associated: integrates with native `<form>` via `ElementInternals`.
 
 Manages child trigger `checked` state based on `value`. `disabled` supplies inherited effective disabled state without changing a trigger's own `disabled` property. Setting `value` directly does not dispatch `input`/`change`.
 
+Press the selected segment and drag horizontally to slide the indicator; on release it snaps to the nearest option (a fast flick switches by velocity). Touch surfaces declare `touch-action: none` and suppress `touchmove` defaulting during an active drag, so iOS Safari does not interrupt the gesture.
+
 #### `<web-ui-checkbox-group>`
 
 Checkbox group managing multiple selection.
@@ -697,11 +703,17 @@ Uses native `<dialog>` with `@cancel` prevention. Escape calls `close()` unless
 
 **CSS Custom Properties:**
 
-| Property                  | Default                            | Description                                                    |
-| ------------------------- | ---------------------------------- | -------------------------------------------------------------- |
-| `--wui-dialog-max-width`  | `360px`                            | Dialog max width                                               |
-| `--wui-dialog-overlay-bg` | `var(--wui-color-backdrop)`        | Backdrop background                                            |
-| `--wui-dialog-bg`         | `var(--wui-color-surface-overlay)` | Glass card background, falls back to `rgb(246 246 246 / 0.88)` |
+| Property                      | Default                                      | Description                                                                           |
+| ----------------------------- | -------------------------------------------- | ------------------------------------------------------------------------------------- |
+| `--wui-dialog-width`          | `360px`                                      | Dialog width                                                                          |
+| `--wui-dialog-max-height`     | `90vh`                                       | Dialog max height                                                                     |
+| `--wui-dialog-overlay-bg`     | `var(--wui-color-backdrop)`                  | Backdrop background                                                                   |
+| `--wui-dialog-bg`             | `var(--wui-color-surface-overlay)`           | Glass card background, falls back to `rgb(246 246 246 / 0.88)`                        |
+| `--wui-dialog-padding`        | `20px 24px 24px`                             | Dialog surface padding                                                                |
+| `--wui-dialog-title-gap`      | `16px`                                       | Spacing below the title                                                               |
+| `--wui-dialog-desc-gap`       | `24px`                                       | Spacing below the body content                                                        |
+| `--wui-dialog-footer-gap`     | `10px` / `12px` (horizontal)                 | Spacing between footer buttons                                                        |
+| `--wui-dialog-footer-justify` | `flex-end` (default) / `center` (horizontal) | Footer `justify-content`; override to `flex-end` for right-aligned horizontal buttons |
 
 #### `<web-ui-drawer>`
 
@@ -730,18 +742,109 @@ Side drawer using native `<dialog>` with closing animation. In non-headless mode
 
 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.
 
-**Drag to close:** With `draggable`, a gray capsule drag bar appears on the drawer's inner edge (left edge for `right`, right edge for `left`, bottom edge for `top`, top edge for `bottom`) while open. Dragging follows the pointer in real time (backdrop fades proportionally); releasing past ~1/3 of the drawer size or with a fast closing flick springs the drawer shut, otherwise it springs back open. The close direction is placement-aware. With `controlled`, release past the threshold only emits `open-change(false)`; the drawer holds at the closed position briefly (120ms write-back window) and springs back open if the consumer rejects or misses the write-back. Drag-to-open is not supported because the closed drawer renders nothing outside the native dialog. Under `prefers-reduced-motion`, release snaps instantly without spring animation.
+When `closable` is set, the built-in close button is positioned at the header's top-right corner (defaults `16px` down and `20px` in from the edge) instead of stretching across the drawer body.
+
+**Drag to close:** With `draggable`, a gray capsule drag bar (4×56px by default, visually centered 10px from the inner edge inside a 20px-thick hit zone) appears on the drawer's inner edge (left edge for `right`, right edge for `left`, bottom edge for `top`, top edge for `bottom`) while open:
+
+- Dragging follows the pointer in real time; the backdrop fades proportionally.
+- Releasing past ~1/3 of the drawer size, or with a fast closing flick, springs the drawer shut; otherwise it springs back open. The close direction is placement-aware.
+- With `controlled`, release past the threshold only emits `open-change(false)`; the drawer holds at the closed position briefly (120ms write-back window) and springs back open if the consumer rejects or misses the write-back.
+- Drag-to-open is not supported because the closed drawer renders nothing outside the native dialog.
+- Under `prefers-reduced-motion`, release snaps instantly without spring animation.
 
 **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-radius`     | `28px`                             | Floating card corner radius (non-headless)                                   |
-| `--wui-drawer-inset`      | `8px`                              | Floating card viewport inset (non-headless); `0` gives edge-to-edge geometry |
-| `--wui-drawer-overlay-bg` | `rgb(0 0 0 / 0.12)`                | Backdrop background                                                          |
+| 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-radius`             | `var(--wui-radius-overlay, 28px)`  | Floating card corner radius (non-headless)                                   |
+| `--wui-drawer-inset`              | `8px`                              | Floating card viewport inset (non-headless); `0` gives edge-to-edge geometry |
+| `--wui-drawer-overlay-bg`         | `rgb(0 0 0 / 0.12)`                | Backdrop background                                                          |
+| `--wui-drawer-drag-zone-size`     | `20px`                             | Drag-to-close hit zone thickness on the inner edge (draggable)               |
+| `--wui-drawer-drag-bar-thickness` | `4px`                              | Drag bar capsule thickness (short axis)                                      |
+| `--wui-drawer-drag-bar-length`    | `56px`                             | Drag bar capsule length (along the drawer edge)                              |
+| `--wui-drawer-header-padding`     | `16px 20px`                        | Header section padding                                                       |
+| `--wui-drawer-close-top`          | `16px`                             | Built-in close button offset from the top of the header                      |
+| `--wui-drawer-close-right`        | `20px`                             | Built-in close button offset from the right edge of the drawer               |
+| `--wui-drawer-content-padding`    | `20px`                             | Content area padding; also drives drag bar visual center (half value)        |
+| `--wui-drawer-footer-padding`     | `16px 20px`                        | Footer section padding                                                       |
+
+#### `imagePreview()`
+
+Imperative image preview with no declarative tag contract: open it through `imagePreview()` and drive it through the returned handle. It uses the native `<dialog>` `showModal()` and mounts into the nearest `web-ui-theme` theme-owned overlay root, falling back to the global fallback overlay root when no theme-owned root exists.
+
+It does not reuse the `<web-ui-dialog>` component: the preview needs a dialog that fills the viewport itself (the full-viewport backdrop scrim is rendered by a dedicated overlay layer inside the dialog, so the dialog element never fades its own opacity and the glass controls' backdrop blur stays continuous) plus its own pointer interaction, which is a different source than the dialog's glass panel and slot contract. The two share the `native-dialog-presence` and `scroll-lock` plugins, and `noScrollLock` / `noBackdropClose` mirror the same-named properties in naming and semantics.
+
+```ts
+import { imagePreview } from '@greypan/web-ui'
+
+const preview = imagePreview({
+  images: [{ src: '/a.jpg', alt: 'Image A' }, { src: '/b.jpg' }],
+  index: 0,
+  nav: true,
+  toolbar: true,
+  closable: true,
+  indicator: true
+})
+
+preview.next()
+preview.zoomIn()
+
+await preview.closed
+```
+
+**Options:**
+
+| Option            | Type                 | Default | Description                                                                 |
+| ----------------- | -------------------- | ------- | --------------------------------------------------------------------------- |
+| `images`          | `ImagePreviewItem[]` | —       | Image list; must contain at least one item, else it throws                  |
+| `index`           | `number`             | `0`     | Initial index, clamped into range                                           |
+| `loop`            | `boolean`            | `true`  | Wrap around at both ends                                                    |
+| `target`          | `Element`            | —       | Trigger element used to resolve the nearest theme-owned overlay root        |
+| `container`       | `HTMLElement`        | —       | Explicit mount container, highest priority                                  |
+| `nav`             | `boolean`            | `false` | Show prev/next buttons; rendered only when more than one image              |
+| `toolbar`         | `boolean`            | `false` | Show the zoom toolbar (out / factor / in / reset)                           |
+| `closable`        | `boolean`            | `false` | Show the close button                                                       |
+| `indicator`       | `boolean`            | `false` | Show the "current / total" indicator, announced via `aria-live`             |
+| `swipe`           | `boolean`            | `false` | At 1x, swipe horizontally to change images; owns that axis while it applies |
+| `noScrollLock`    | `boolean`            | `false` | Do not lock page scroll while open                                          |
+| `noBackdropClose` | `boolean`            | `false` | Clicking the blank area outside the image does not close                    |
+
+`ImagePreviewItem` is `{ src: string; alt?: string }`; a missing `alt` defaults to an empty string.
+
+Every presentation option defaults to off: with no options passed only the image itself is rendered, so navigation, toolbar, close button and indicator all have to be enabled explicitly.
+
+**Returned handle:**
+
+| Member                                   | Type                          | Description                                     |
+| ---------------------------------------- | ----------------------------- | ----------------------------------------------- |
+| `index`                                  | `number`                      | Current index; keeps its last value after close |
+| `scale`                                  | `number`                      | Current zoom factor within `[1, 4]`             |
+| `images`                                 | `readonly ImagePreviewItem[]` | Normalized image list                           |
+| `closed`                                 | `Promise<void>`               | Resolves after the exit transition and unmount  |
+| `next()` / `prev()`                      | `() => void`                  | Relative navigation                             |
+| `goTo(index)`                            | `(index: number) => void`     | Jump; clamps at the bounds when `loop` is off   |
+| `zoomIn()` / `zoomOut()` / `resetZoom()` | `() => void`                  | Zoom controls                                   |
+| `close()`                                | `() => void`                  | Close and play the exit animation               |
+
+**Interaction:** Arrow keys always navigate, independently of `nav`; `+` / `-` and the mouse wheel zoom, and `0` resets. Zooming is anchored: the wheel keeps the point under the cursor fixed and a pinch keeps the midpoint between the two fingers fixed, while the toolbar buttons, keyboard shortcuts and double-click expand around the viewport center. Holding the mouse button down or resting a single finger drags the image to pan in any direction, at any zoom level: zoomed in it reveals the cropped edges, and at 1x it moves the image around within the viewport. Either way the drag is bounded by half the size difference between the image and the stage, so the image can never be dragged outside the viewport, and it is clamped (not snapped back) when you keep dragging past the edge. Double-clicking the image toggles between 1x and 2x.
+
+Pinch-to-zoom is always on and has no option: the stage already owns pointer interaction, so there is nothing for a gesture to conflict with. The first finger still drives pan/swipe as usual and the second finger starts the pinch, which aborts any in-flight pan or swipe. A pinch does not close the preview, and the compatibility `click` that mixed input may synthesize afterwards is swallowed rather than treated as a backdrop click.
+
+Clicking anywhere outside the image, or pressing Escape, closes the preview. The native dialog always exposes the accessible name `图片预览`. With `swipe` on and more than one image, the images live on a single carousel track: the current image and its neighbors sit side by side in slides of equal size, the stage clips the overflow, and the whole track translates with the finger. Releasing past the distance threshold (15% of the stage width, rounded) slides the next image in, as does a fast flick whose sampled velocity is at least 320px/s even below that distance; a flick covering at least 16px whose velocity (windowed sample or whole-gesture average) reaches 160px/s also commits; otherwise it bounces back. With `loop` on the wrap-around neighbor is always present beside the current image, and at the non-looping bounds the strip bounces back instead of crossing the boundary. While it applies, the swipe gesture takes over the drag entirely: at 1x only horizontal movement changes images, and vertical movement is ignored (no pan, no vertical follow). Once zoomed in, dragging always pans on both axes and never changes images. Because panning also works at 1x, `resetZoom()` is offered whenever the image is zoomed _or_ displaced — the reset button in the toolbar is enabled for a panned 1x image too.
+
+A close request does not destroy the native dialog immediately: it stays in the top layer until the exit transition completes, then `dialog.close()` runs, the host is removed from the DOM, and `closed` resolves. Page scroll is locked while open unless `noScrollLock` is `true`.
+
+**CSS Custom Properties:**
+
+| Property                         | Default                          | Description                                       |
+| -------------------------------- | -------------------------------- | ------------------------------------------------- |
+| `--wui-image-preview-overlay-bg` | `rgb(0 0 0 / 0.72)`              | Full-viewport backdrop background color           |
+| `--wui-image-preview-edge-gap`   | `20px`                           | Distance from controls to viewport edge           |
+| `--wui-duration-swipe-settle`    | `220ms`                          | Carousel settle (slide-in / bounce-back) duration |
+| `--wui-ease-swipe`               | `cubic-bezier(0.32, 0.72, 0, 1)` | Carousel settle (slide-in / bounce-back) easing   |
 
 ---
 
@@ -751,12 +854,13 @@ Closing keeps the native dialog in the top layer until the `--wui-duration-drawe
 
 In-flow expand/collapse container with animated height (or width) transition. Single element with two slots; no portal, no scroll lock, no focus management.
 
-| Attribute      | Type      | Default | Description                                                                                                              |
-| -------------- | --------- | ------- | ------------------------------------------------------------------------------------------------------------------------ |
-| `open`         | `boolean` | `false` | Expanded state; self-managed on interaction, `open-change` emits only for user-originated toggles                        |
-| `disabled`     | `boolean` | `false` | Ignores trigger clicks and sets `aria-disabled` on the trigger element; expanded content is kept                         |
-| `horizontal`   | `boolean` | `false` | Animate width instead of height                                                                                          |
-| `keep-mounted` | `boolean` | `false` | Closed state keeps the content in the 0fr track with `inert` (scroll position and layout measurable) instead of `hidden` |
+| Attribute      | Type      | Default | Description                                                                                                                         |
+| -------------- | --------- | ------- | ----------------------------------------------------------------------------------------------------------------------------------- |
+| `open`         | `boolean` | `false` | Expanded state; self-managed on interaction, `open-change` emits only for user-originated toggles                                   |
+| `disabled`     | `boolean` | `false` | Ignores trigger clicks and sets `aria-disabled` on the trigger element; expanded content is kept                                    |
+| `horizontal`   | `boolean` | `false` | Animate width instead of height                                                                                                     |
+| `keep-mounted` | `boolean` | `false` | Closed state keeps the content in the 0fr track with `inert` (scroll position and layout measurable) instead of `hidden`            |
+| `peek`         | `string`  | —       | Closed state reveals this much of the content (CSS length, e.g. `120px`); along the animation axis; ends in an auto-sized edge fade |
 
 **Events:** `open-change` (`CustomEvent<{ open: boolean }>`). Emitted only for user-originated toggles (trigger click). Programmatic writes (`open`, `show()`, `close()`, `toggle()`) never emit. Nested collapses: an inner `open-change` bubbles through the outer root (composed event); distinguish by `event.target`.
 
@@ -777,6 +881,38 @@ The initial `open` attribute settles instantly without playing the animation. Ne
 
 **Closed-state semantics:** the consumer's light DOM is never moved or unmounted. Default closed state applies `hidden` to the internal content container; with `keep-mounted` the inner container is marked `inert` while staying measurable inside the collapsed track.
 
+**`peek` (partial reveal):** setting `peek` makes the closed state reveal the first `peek` of the content along the animation axis (`horizontal` switches it to width) instead of collapsing to zero — the track stays at the content height and the inner container is clamped. It implies `keep-mounted` semantics: the content stays mounted but is `inert`, so the clipped portion is not focusable or clickable. Content shorter than `peek` collapses to its own size rather than leaving blank space. Because a fixed length and an auto height cannot be interpolated by CSS, the two `peek` ↔ expanded directions are driven by explicit pixel lengths (measured once per toggle); every other animation path stays a zero-measurement grid `fr` transition.
+
+```html
+<web-ui-collapse peek="120px">
+  <button type="button">Toggle me</button>
+  <div slot="content">Long content — only the first 120px show while closed</div>
+</web-ui-collapse>
+```
+
+**Edge fade:** the revealed area ends in an alpha-gradient fade (right edge when `horizontal`) so the clipped portion melts into the background instead of ending in a hard line. The length is derived from `peek` — there is no second attribute to set. Tune it with CSS custom properties instead:
+
+| Custom property                  | Default       | Description                                                           |
+| -------------------------------- | ------------- | --------------------------------------------------------------------- |
+| `--wui-collapse-peek-edge-ratio` | `0.4`         | Fade length as a fraction of `peek`                                   |
+| `--wui-collapse-peek-edge-max`   | `112px`       | Upper bound, so a large `peek` cannot produce an oversized fade band  |
+| `--wui-collapse-peek-edge`       | —             | Explicit fade length; wins over the derived value                     |
+| `--wui-collapse-peek-edge-color` | `transparent` | Fade-stop color (must carry alpha — `mask-image` reads alpha channel) |
+
+Set the ratio to `0` to turn the fade off. The derivation is pure CSS `calc(peek * ratio)`, so a `rem`-based `peek` scales the fade with the root font size and nothing has to be measured in JS. Known limitation: a percentage `peek` does not derive to a length, so the fade silently falls back to "none" — set `--wui-collapse-peek-edge` explicitly in that case.
+
+The fade is a four-stop ease-out gradient rather than a linear one: the body stays fully opaque to the start of the fade band, drops to 60% alpha within the first 30% of the band, then 26%, then reaches the edge color. A linear gradient hugs 1.0 alpha across the first 40% of the band, so the eye perceives a much shorter fade than declared — front-loading the drop makes the band visibly soft from its very start, nearly doubling the perceived length at the same size.
+
+The fade band is positioned in percentages, relative to the container's **current rendered height** — which is what `max-height` animates. So the band tracks the cut edge frame by frame during the collapse animation without the `mask-image` string ever needing to interpolate. Its length is driven by a registered `<length>` custom property so it can fade in and out with the toggle instead of popping in once the close animation settles.
+
+```html
+<!-- 调强渐隐：比例 0.5 → 120px peek 配 60px 渐隐 -->
+<web-ui-collapse peek="120px" style="--wui-collapse-peek-edge-ratio: 0.5">
+  <button type="button">Toggle me</button>
+  <div slot="content">Long content with a stronger fade at the bottom of the 120px peek</div>
+</web-ui-collapse>
+```
+
 **Known limitations:** the `horizontal` animation reflows content while width changes.
 
 ---
@@ -787,15 +923,15 @@ The initial `open` attribute settles instantly without playing the animation. Ne
 
 Popover overlay anchored to trigger element.
 
-| Attribute          | Type                               | Default    | Description               |
-| ------------------ | ---------------------------------- | ---------- | ------------------------- |
-| `open`             | `boolean`                          | `false`    | Popover visibility        |
-| `disabled`         | `boolean`                          | `false`    | Disabled state            |
-| `placement`        | `Placement`                        | `'bottom'` | Floating UI placement     |
-| `trigger`          | `'click' \| 'hover' \| 'manual'`   | `'click'`  | Open trigger              |
-| `offset`           | `number`                           | `8`        | Offset from anchor        |
-| `portal`           | `boolean`                          | `false`    | Render in theme overlay   |
-| `overlayContainer` | `HTMLElement \| () => HTMLElement` | —          | Explicit portal container |
+| Attribute          | Type                               | Default    | Description                        |
+| ------------------ | ---------------------------------- | ---------- | ---------------------------------- |
+| `open`             | `boolean`                          | `false`    | Popover visibility                 |
+| `disabled`         | `boolean`                          | `false`    | Disabled state                     |
+| `placement`        | `Placement`                        | `'bottom'` | Floating UI placement              |
+| `trigger`          | `'click' \| 'hover' \| 'manual'`   | `'click'`  | Open trigger                       |
+| `offset`           | `number`                           | `8`        | Offset from anchor                 |
+| `portal`           | `boolean`                          | `false`    | Render in theme-owned overlay root |
+| `overlayContainer` | `HTMLElement \| () => HTMLElement` | —          | Explicit portal container          |
 
 **Events:** `open-change` (`CustomEvent<{ open: boolean }>`)
 
@@ -820,7 +956,7 @@ Tooltip overlay using pointer/focus triggers.
 | `show-delay`       | `number`                           | `200`   | Show delay in ms                   |
 | `hide-delay`       | `number`                           | `100`   | Hide delay in ms                   |
 | `offset`           | `number`                           | `6`     | Offset from trigger                |
-| `portal`           | `boolean`                          | `false` | Render in theme overlay            |
+| `portal`           | `boolean`                          | `false` | Render in theme-owned overlay root |
 | `overlayContainer` | `HTMLElement \| () => HTMLElement` | —       | Explicit portal container          |
 
 **Events:** `open-change` (`CustomEvent<{ open: boolean }>`)
@@ -1019,7 +1155,7 @@ WebUiSpinner.hide() // hide
 
 #### `<web-ui-layout>`
 
-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.
+Responsive page layout with an optional full-width banner, a collapsible desktop sidebar, and a default-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                                                                                        |
 | ------------------- | --------- | --------- | -------------------------------------------------------------------------------------------------- |
@@ -1034,28 +1170,59 @@ Responsive page layout with an optional full-width banner, a collapsible desktop
 
 **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. `sidebar-width-change` (`CustomEvent<{ width: string }>`) requests a sidebar width update after a resize drag ends. Consumers must write the requested value back to the corresponding controlled property.
 
-**Sidebar resize:** With `sidebar-resizable`, a resize handle appears on the desktop sidebar's right edge (hidden while collapsed). Hovering or dragging shows a 3px accent vertical line with a `col-resize` cursor. Dragging updates the width in real time (transition suppressed, clamped to `[min, max]` and the viewport); releasing emits `sidebar-width-change` with the final pixel width and returns control to the `sidebar-width` property once the consumer writes it back. `pointercancel` restores the property-controlled width without emitting. The handle is keyboard-operable (WAI-ARIA splitter pattern): focus it and use ←/→ to step by 16px (Shift for 64px), Home/End to jump to min/max, Enter to commit via the same `sidebar-width-change` request, and Escape to revert an uncommitted adjustment. The mobile drawer always supports drag-to-close via its built-in `draggable` drawer.
+**Sidebar resize:** With `sidebar-resizable`, a resize handle appears on the desktop sidebar's right edge (hidden while collapsed); hovering or dragging shows a 3px accent vertical line with a `col-resize` cursor.
 
-| 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                                                                            |
+- Dragging updates the width in real time (transition suppressed, clamped to `[min, max]` and the viewport).
+- Releasing emits `sidebar-width-change` with the final pixel width; the width is property-controlled again once the consumer writes it back. `pointercancel` restores the property-controlled width without emitting.
+- Keyboard (WAI-ARIA splitter pattern): focus the handle and use ←/→ to step by 16px (Shift for 64px), Home/End to jump to min/max, Enter to commit via the same `sidebar-width-change` request, and Escape to revert an uncommitted adjustment.
+- The mobile drawer always supports drag-to-close via its built-in `draggable` drawer.
 
-`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                                                                                          |
+| --------- | ---------------------------------------------------------------------------------------------------- |
+| `banner`  | Optional full-width banner above the layout body                                                     |
+| `header`  | Sticky content-area header                                                                           |
+| `sidebar` | Sidebar-card content. On desktop, the consumer owns its internal fixed regions and scroll container. |
+| `default` | Main content                                                                                         |
+| `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 as a glass button. Its left inset defaults to `8px`; align it with your own header padding via `--wui-layout-mobile-toggle-inset`.
+`web-ui-layout` constrains the sidebar card and owns the desktop toggle area, but does not create a desktop sidebar scrollport. To make only part of the desktop 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:
+
+```html
+<div slot="sidebar" class="sidebar-root">
+  <div class="sidebar-title">Components</div>
+  <nav class="sidebar-nav">...</nav>
+</div>
+```
+
+```css
+.sidebar-root {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  min-height: 0;
+}
+
+.sidebar-title {
+  flex-shrink: 0;
+}
+
+.sidebar-nav {
+  flex: 1;
+  min-height: 0;
+  overflow-y: auto;
+}
+```
+
+At `640px` and below, the sidebar becomes a `web-ui-drawer` with its built-in glass body, scrollable content, and drag zone. The layout maps `sidebar-width` to `--wui-drawer-width` and `--wui-layout-sidebar-radius` to `--wui-drawer-radius`. The mobile toggle appears in the header row as a glass button. Its left inset defaults to `8px`; align it with your own header padding via `--wui-layout-mobile-toggle-inset`.
 
 `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`      | `24px`  | Border radius of sidebar card (desktop & mobile) |
-| `--wui-layout-mobile-toggle-inset` | `8px`   | Left inset of the mobile header toggle           |
+| Property                           | Default                           | Description                                      |
+| ---------------------------------- | --------------------------------- | ------------------------------------------------ |
+| `--wui-layout-sidebar-radius`      | `var(--wui-radius-overlay, 28px)` | Border radius of sidebar card (desktop & mobile) |
+| `--wui-layout-mobile-toggle-inset` | `8px`                             | Left inset of the mobile header toggle           |
 
 #### `<web-ui-back-top>`
 
@@ -1113,10 +1280,14 @@ Theme provider defining CSS custom property tokens.
 | `appearance` | `'light' \| 'dark' \| 'system'`   | `'light'`  | Color scheme                                  |
 | `motion`     | `'full' \| 'reduced' \| 'system'` | `'system'` | Motion preference for this nested theme scope |
 
-**Methods:** `getOverlayRoot()` — returns the portal overlay container
+**Methods:** `getOverlayRoot()` — returns this theme-owned overlay root
+
+**Portal mounting contract:** Every active `<web-ui-theme>` is also the default scoped theme-owned overlay root. Portal-based components without an explicit `overlayContainer` resolve to the nearest active theme's `getOverlayRoot()`; target-less portal calls prefer the root theme's theme-owned overlay root. When no active theme provides a root, they fall back to the global fallback overlay root.
 
 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`.
 
+The host uses `display: contents` and does not paint any background: the library never draws on the host page, so the embedding application keeps full control of the surface behind the themed subtree. Custom properties still inherit to slotted content reliably.
+
 **Foundation tokens:**
 
 | Property                  | Default | Description                                      |
@@ -1127,6 +1298,14 @@ Defines foundation, color, layer, shadow, and motion tokens for its subtree. `mo
 | `--wui-overlay-min-width` | `200px` | Minimum anchored overlay width                   |
 | `--wui-focus-ring-width`  | `3px`   | Focus indicator width                            |
 
+**Radius tokens:**
+
+| Property               | Default                | Description                                                     |
+| ---------------------- | ---------------------- | --------------------------------------------------------------- |
+| `--wui-radius-control` | `calc(infinity * 1px)` | Pill radius for small controls (button, input, switch, option…) |
+| `--wui-radius-menu`    | `18px`                 | Menu/popover floating panels, multiline textarea and toast      |
+| `--wui-radius-overlay` | `28px`                 | Large overlay surfaces: dialog, drawer, layout sidebar          |
+
 **Layer tokens:**
 
 | Property                     | Default | Description                  |
@@ -1143,7 +1322,7 @@ Defines foundation, color, layer, shadow, and motion tokens for its subtree. `mo
 | `--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-drawer-nested: 450ms`, `--wui-duration-collapse-enter: 200ms`, `--wui-duration-collapse-exit: 160ms`, `--wui-duration-layout: 200ms`. Easing tokens are `--wui-ease-enter` and `--wui-ease-slide`; enter scale is `--wui-scale-enter: 0.97`. Hover/active background feedback switches instantly with no transition; checked/pressed/focus and overlay enter/exit transitions are unaffected.
+**Motion tokens:** duration defaults are `--wui-duration-press: 80ms`, `--wui-duration-feedback: 100ms`, `--wui-duration-trigger: 160ms`, `--wui-duration-focus: 200ms`, `--wui-duration-float-enter: 160ms`, `--wui-duration-float-exit: 120ms`, `--wui-duration-dialog-enter: 320ms`, `--wui-duration-dialog-exit: 260ms`, `--wui-duration-drawer-enter: 280ms`, `--wui-duration-drawer-exit: 240ms`, `--wui-duration-drawer-nested: 450ms`, `--wui-duration-toast-enter: 280ms`, `--wui-duration-toast-exit: 200ms`, `--wui-duration-collapse-enter: 200ms`, `--wui-duration-collapse-exit: 160ms`, `--wui-duration-layout: 200ms`. Easing tokens are `--wui-ease-enter`, `--wui-ease-dialog` (`cubic-bezier(0.2, 0, 0, 1)`), and `--wui-ease-slide`; enter scale is `--wui-scale-enter: 0.97`. Hover/active background feedback switches instantly with no transition; checked/pressed/focus transitions are unaffected.
 
 **Color tokens:**
 
@@ -1190,7 +1369,7 @@ Defines foundation, color, layer, shadow, and motion tokens for its subtree. `mo
 | `--wui-shadow-panel`   | `0 3px 9px rgb(0 0 0 / 0.27)`    | `0 4px 16px rgb(0 0 0 / 0.32)`  | Small floating panel shadow |
 | `--wui-shadow-glass`   | four-layer diffuse shadow        | `0 8px 24px rgb(0 0 0 / 0.08)`  | Base liquid glass shadow    |
 
-**Glass effect tokens:** `--wui-glass-brightness` is `1.06` in light mode and `1.02` in dark mode. `--wui-glass-corner-radius` defaults to `32px`; glass components set it from their own corner radius so the diagonal border lighting aligns with their shape.
+**Glass effect tokens:** `--wui-glass-brightness` is `1.06` in light mode and `1.02` in dark mode. `--wui-glass-corner-radius` defaults to `32px`; non-pill glass surfaces set it from their own semantic radius (`--wui-radius-menu` / `--wui-radius-overlay`, or `--wui-drawer-radius` for the drawer) so the diagonal border lighting follows token overrides. Pill controls keep a finite corner radius derived from their physical size or internal size token instead, because the lighting gradient needs a physical size.
 
 **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.
 
@@ -1228,17 +1407,17 @@ toast.updateMessage(id, { message: 'Upload 60% complete', heading: 'Uploading' }
 
 **ToastOptions:**
 
-| Option      | Type                                                                                              | Default                   | Description                                 |
-| ----------- | ------------------------------------------------------------------------------------------------- | ------------------------- | ------------------------------------------- |
-| `message`   | `string`                                                                                          | —                         | Notification text                           |
-| `type`      | `'success' \| 'info' \| 'warning' \| 'error'`                                                     | `'info'`                  | Toast type                                  |
-| `duration`  | `number`                                                                                          | `3000` (`5000` for error) | Auto-close duration (0 = no auto-close)     |
-| `closable`  | `boolean`                                                                                         | `true`                    | Show close button                           |
-| `id`        | `string`                                                                                          | auto                      | Deduplication identifier                    |
-| `heading`   | `string`                                                                                          | `''`                      | Bold heading text                           |
-| `position`  | `'top-left' \| 'top-center' \| 'top-right' \| 'bottom-left' \| 'bottom-center' \| 'bottom-right'` | `'top-right'`             | Screen position                             |
-| `target`    | `Element`                                                                                         | —                         | Used to find nearest theme scope            |
-| `container` | `HTMLElement`                                                                                     | —                         | Explicit mount container (highest priority) |
+| Option      | Type                                                                                              | Default                   | Description                                   |
+| ----------- | ------------------------------------------------------------------------------------------------- | ------------------------- | --------------------------------------------- |
+| `message`   | `string`                                                                                          | —                         | Notification text                             |
+| `type`      | `'success' \| 'info' \| 'warning' \| 'error'`                                                     | `'info'`                  | Toast type                                    |
+| `duration`  | `number`                                                                                          | `3000` (`5000` for error) | Auto-close duration (0 = no auto-close)       |
+| `closable`  | `boolean`                                                                                         | `true`                    | Show close button                             |
+| `id`        | `string`                                                                                          | auto                      | Deduplication identifier                      |
+| `heading`   | `string`                                                                                          | `''`                      | Bold heading text                             |
+| `position`  | `'top-left' \| 'top-center' \| 'top-right' \| 'bottom-left' \| 'bottom-center' \| 'bottom-right'` | `'top-right'`             | Screen position                               |
+| `target`    | `Element`                                                                                         | —                         | Used to find nearest theme-owned overlay root |
+| `container` | `HTMLElement`                                                                                     | —                         | Explicit mount container (highest priority)   |
 
 **`toast.updateMessage(id, options)`** updates the visible toast's `message` and, when supplied, `heading`. It does not restart the auto-close timer. `options` is `ToastMessageUpdateOptions`: `{ message: string; heading?: string }`.
 

package/dist/assets/glass.js

@@ -1,5 +1,5 @@
 //#region src/assets/glass.css?inline
-var e = ".wui-glass{--wui-internal-glass-focus-ring:0 0 0 0 transparent;--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-color:var(--wui-color-surface-glass,#fafafa57);-webkit-backdrop-filter:blur(4px) saturate(160%) brightness(var(--wui-glass-brightness,1.06));backdrop-filter:blur(4px) saturate(160%) brightness(var(--wui-glass-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;border:none;position:relative}.wui-glass:before{pointer-events:none;content:\"\";border-radius:inherit;background-color:var(--wui-color-glass-border,#3333331f);background-image:radial-gradient(var(--wui-glass-corner-radius,32px) at 100% 0, var(--wui-color-glass-shade,#0003), transparent), radial-gradient(var(--wui-glass-corner-radius,32px) at 0 100%, var(--wui-color-glass-shade,#0003), transparent), radial-gradient(calc(var(--wui-glass-corner-radius,32px) * 2) at 0 0, var(--wui-color-glass-corner,#ffffff14), transparent), radial-gradient(calc(var(--wui-glass-corner-radius,32px) * 2) at 100% 100%, var(--wui-color-glass-corner,#ffffff14), transparent);-webkit-mask-composite:xor;-webkit-mask-composite:xor;-webkit-mask-source-type:auto,auto;padding:1px;position:absolute;inset:0;-webkit-mask-image:linear-gradient(#000 0 0),linear-gradient(#000 0 0);mask-image:linear-gradient(#000 0 0),linear-gradient(#000 0 0);-webkit-mask-position:0 0,0 0;mask-position:0 0,0 0;-webkit-mask-size:auto,auto;mask-size:auto,auto;-webkit-mask-repeat:repeat,repeat;mask-repeat:repeat,repeat;-webkit-mask-clip:content-box,border-box;mask-clip:content-box,border-box;-webkit-mask-origin:content-box,border-box;mask-origin:content-box,border-box;-webkit-mask-composite:xor;mask-composite:exclude;-webkit-mask-source-type:auto,auto;mask-mode:match-source,match-source}";
+var e = ".wui-glass{--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-color:var(--wui-color-surface-glass,#fafafa57);-webkit-backdrop-filter:blur(4px) saturate(160%) brightness(var(--wui-glass-brightness,1.06));backdrop-filter:blur(4px) saturate(160%) brightness(var(--wui-glass-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-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;border:none;position:relative}.wui-glass:before{pointer-events:none;content:\"\";border-radius:inherit;background-color:var(--wui-color-glass-border,transparent);background-image:radial-gradient(var(--wui-glass-corner-radius,32px) at 100% 0, var(--wui-color-glass-shade,#0000000f), transparent), radial-gradient(var(--wui-glass-corner-radius,32px) at 0 100%, var(--wui-color-glass-shade,#0000000f), transparent), radial-gradient(calc(var(--wui-glass-corner-radius,32px) * 2) at 0 0, var(--wui-color-glass-corner,#ffffff14), transparent), radial-gradient(calc(var(--wui-glass-corner-radius,32px) * 2) at 100% 100%, var(--wui-color-glass-corner,#ffffff14), transparent);-webkit-mask-composite:xor;-webkit-mask-composite:xor;-webkit-mask-source-type:auto,auto;padding:1px;position:absolute;inset:0;-webkit-mask-image:linear-gradient(#000 0 0),linear-gradient(#000 0 0);mask-image:linear-gradient(#000 0 0),linear-gradient(#000 0 0);-webkit-mask-position:0 0,0 0;mask-position:0 0,0 0;-webkit-mask-size:auto,auto;mask-size:auto,auto;-webkit-mask-repeat:repeat,repeat;mask-repeat:repeat,repeat;-webkit-mask-clip:content-box,border-box;mask-clip:content-box,border-box;-webkit-mask-origin:content-box,border-box;mask-origin:content-box,border-box;-webkit-mask-composite:xor;mask-composite:exclude;-webkit-mask-source-type:auto,auto;mask-mode:match-source,match-source}";
 //#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  /*\n   * 内部变量在 glass 元素上自声明默认值，切断从祖先 glass 容器（drawer/dialog\n   * body 等声明了 overlay 阴影的元素）沿 flattened tree 继承进 slotted 内容的\n   * 通道；各组件在自身元素上的同变量配置（特异性/源顺序恒胜出）不受影响。\n   */\n  --wui-internal-glass-focus-ring: 0 0 0 0 transparent;\n  --wui-internal-glass-shadow: 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  position: relative;\n\n  border: none;\n\n  background-color: var(--wui-color-surface-glass, rgb(250 250 250 / 0.34));\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(var(--wui-glass-brightness, 1.06));\n  backdrop-filter: blur(4px) saturate(160%) brightness(var(--wui-glass-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\n/*\n * 玻璃描边：底环 + 对角受光/背光。background-color 用 border 色铺满整圈（含圆角\n * 弧段，修复胶囊弧段无着色发暗的问题）；叠两枚 corner→transparent radial 作左上/\n * 右下受光光泽，再叠两枚 shade→transparent radial（置于最上层）压暗右上/左下背光\n * 角，形成对角光影的玻璃立体感。四枚渐变均为锚定角点、半径 --wui-glass-corner-radius\n * 的固定物理尺寸正圆——视觉覆盖范围不随元素宽高缩放（百分比方案在大面板上暗边\n * 过长、小控件上过弱），各组件用与自身 border-radius 同源的值覆盖该变量即可联动。\n * 颜色由 theme 按明暗主题提供 --wui-color-glass-corner / --wui-color-glass-shade /\n * --wui-color-glass-border；-webkit-mask-composite 旧语法覆盖 Chrome 111-119，\n * 无前缀 mask-composite 留给 Chrome 120+。\n */\n.wui-glass::before {\n  pointer-events: none;\n  content: '';\n\n  position: absolute;\n  inset: 0;\n\n  padding: 1px;\n  border-radius: inherit;\n\n  background-color: var(--wui-color-glass-border, rgb(51 51 51 / 0.12));\n  background-image:\n    radial-gradient(\n      var(--wui-glass-corner-radius, 32px) at 100% 0,\n      var(--wui-color-glass-shade, rgb(0 0 0 / 0.2)),\n      transparent\n    ),\n    radial-gradient(\n      var(--wui-glass-corner-radius, 32px) at 0 100%,\n      var(--wui-color-glass-shade, rgb(0 0 0 / 0.2)),\n      transparent\n    ),\n    radial-gradient(\n      calc(var(--wui-glass-corner-radius, 32px) * 2) at 0 0,\n      var(--wui-color-glass-corner, rgb(255 255 255 / 0.08)),\n      transparent\n    ),\n    radial-gradient(\n      calc(var(--wui-glass-corner-radius, 32px) * 2) at 100% 100%,\n      var(--wui-color-glass-corner, rgb(255 255 255 / 0.08)),\n      transparent\n    );\n  /* stylelint-disable-next-line property-no-vendor-prefix */\n  -webkit-mask:\n    linear-gradient(#000 0 0) content-box,\n    linear-gradient(#000 0 0);\n  mask:\n    linear-gradient(#000 0 0) content-box,\n    linear-gradient(#000 0 0);\n  /* stylelint-disable-next-line property-no-vendor-prefix */\n  -webkit-mask-composite: xor;\n  mask-composite: exclude;\n}\n"],"mappings":""}
+{"version":3,"file":"glass.js","names":[],"sources":["../../src/assets/glass.css?inline"],"sourcesContent":["/*\n * 玻璃公共样式\n */\n\n.wui-glass {\n  /*\n   * 内部阴影变量在 glass 元素上自声明默认值，切断从祖先 glass 容器（drawer/dialog\n   * body 等声明了 overlay 阴影的元素）沿 flattened tree 继承进 slotted 内容的\n   * 通道；各组件在自身元素上的同变量配置（特异性/源顺序恒胜出）不受影响。\n   */\n  --wui-internal-glass-shadow: 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  position: relative;\n\n  border: none;\n\n  background-color: var(--wui-color-surface-glass, rgb(250 250 250 / 0.34));\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(var(--wui-glass-brightness, 1.06));\n  backdrop-filter: blur(4px) saturate(160%) brightness(var(--wui-glass-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(\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\n/*\n * 玻璃描边：底环 + 对角受光/背光。background-color 用 border 色铺满整圈（含圆角\n * 弧段，修复胶囊弧段无着色发暗的问题）；叠两枚 corner→transparent radial 作左上/\n * 右下受光光泽，再叠两枚 shade→transparent radial（置于最上层）压暗右上/左下背光\n * 角，形成对角光影的玻璃立体感。四枚渐变均为锚定角点、半径 --wui-glass-corner-radius\n * 的固定物理尺寸正圆——视觉覆盖范围不随元素宽高缩放（百分比方案在大面板上暗边\n * 过长、小控件上过弱），各组件用与自身 border-radius 同源的值覆盖该变量即可联动。\n * 颜色由 theme 按明暗主题提供 --wui-color-glass-corner / --wui-color-glass-shade /\n * --wui-color-glass-border；-webkit-mask-composite 旧语法覆盖 Chrome 111-119，\n * 无前缀 mask-composite 留给 Chrome 120+。\n */\n.wui-glass::before {\n  pointer-events: none;\n  content: '';\n\n  position: absolute;\n  inset: 0;\n\n  padding: 1px;\n  border-radius: inherit;\n\n  background-color: var(--wui-color-glass-border, transparent);\n  background-image:\n    radial-gradient(\n      var(--wui-glass-corner-radius, 32px) at 100% 0,\n      var(--wui-color-glass-shade, rgb(0 0 0 / 0.06)),\n      transparent\n    ),\n    radial-gradient(\n      var(--wui-glass-corner-radius, 32px) at 0 100%,\n      var(--wui-color-glass-shade, rgb(0 0 0 / 0.06)),\n      transparent\n    ),\n    radial-gradient(\n      calc(var(--wui-glass-corner-radius, 32px) * 2) at 0 0,\n      var(--wui-color-glass-corner, rgb(255 255 255 / 0.08)),\n      transparent\n    ),\n    radial-gradient(\n      calc(var(--wui-glass-corner-radius, 32px) * 2) at 100% 100%,\n      var(--wui-color-glass-corner, rgb(255 255 255 / 0.08)),\n      transparent\n    );\n  /* stylelint-disable-next-line property-no-vendor-prefix */\n  -webkit-mask:\n    linear-gradient(#000 0 0) content-box,\n    linear-gradient(#000 0 0);\n  mask:\n    linear-gradient(#000 0 0) content-box,\n    linear-gradient(#000 0 0);\n  /* stylelint-disable-next-line property-no-vendor-prefix */\n  -webkit-mask-composite: xor;\n  mask-composite: exclude;\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{--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-menu,#f6f6f6d1);border-radius:20px;position:fixed;overflow:hidden}.wui-menu-portal-overlay.wui-glass .wui-menu-scroll{max-height:80vh;overflow-y:auto}.wui-menu-portal-overlay.wui-glass .wui-menu-content{padding:4px}.wui-menu-portal-overlay.wui-glass.dropdown-overlay .wui-menu-scroll{max-height:320px}.wui-menu-portal-overlay.wui-glass.dropdown-overlay[data-level]:not([data-level=\"0\"]),.wui-menu-portal-overlay.wui-glass.context-submenu{z-index:var(--wui-layer-menu-nested,110)}";
+var e = ".wui-menu-portal-overlay.wui-floating-panel{--wui-internal-glass-shadow:var(--wui-shadow-panel,0 3px 9px #00000045);--wui-internal-duration-float-enter:var(--wui-duration-float-enter,.16s);--wui-internal-duration-float-exit:var(--wui-duration-float-exit,.12s);--wui-glass-corner-radius:var(--wui-radius-menu,18px);-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);border-radius:var(--wui-radius-menu,18px);max-width:90vw;max-height:80vh;color:var(--wui-color-text,#1b1b1b);background-color:var(--wui-color-surface-menu,#f6f6f6d1);position:fixed;overflow:hidden}.wui-menu-portal-overlay.wui-floating-panel .wui-menu-scroll{max-height:80vh;overflow-y:auto}.wui-menu-portal-overlay.wui-floating-panel .wui-menu-content{padding:4px}.wui-menu-portal-overlay.wui-floating-panel.dropdown-overlay .wui-menu-scroll{max-height:320px}.wui-menu-portal-overlay.wui-floating-panel.dropdown-overlay[data-level]:not([data-level=\"0\"]),.wui-menu-portal-overlay.wui-floating-panel.context-submenu{z-index:var(--wui-layer-menu-nested,110)}";
 //#endregion
 export { e as default };