@fusion.dev/helix 0.217.0 → 0.219.0

package/dist/dialog/root/dialog-root.js

@@ -6,6 +6,9 @@ import { styles } from './dialog-root.css.js';
 let HelixDialog = class HelixDialog extends HelixHeadlessDialog {
     static { this.styles = styles; }
 };
+__decorate([
+    property({ reflect: true })
+], HelixDialog.prototype, "material", void 0);
 __decorate([
     property({ reflect: true })
 ], HelixDialog.prototype, "size", void 0);

package/dist/drawer/root/drawer-root.css.js

@@ -1,2 +1,2 @@
 import { createSheet } from '@fusion.dev/helix-core';
-export const styles = createSheet(`:host {--_drawer-size: var(--drawer-size, 20rem);display: contents}:host {--_drawer-scrim: var(--helix-color-overlay)}[part="panel"]::backdrop {background-color: var(--drawer-scrim, var(--_drawer-scrim));opacity: 0;transition: opacity var(--helix-duration-normal) var(--helix-easing-standard), display var(--helix-duration-normal) allow-discrete, overlay var(--helix-duration-normal) allow-discrete}[part="panel"][open]::backdrop {opacity: 1}@starting-style {[part="panel"][open]::backdrop {opacity: 0}}[part="panel"] {border-radius: var(--drawer-radius, var(--helix-radii-sm));margin: var(--helix-space-none);border: none;max-inline-size: none;max-block-size: none;inset: auto;inline-size: auto;block-size: auto;background-color: var(--drawer-background-color, var(--helix-color-surface-overlay));padding: var(--drawer-padding, var(--helix-space-lg));padding-block-start: var(--drawer-padding-block-start, var(--drawer-padding, var(--helix-space-2xl)));display: flex;flex-direction: column;outline: none;position: fixed;transform: var(--_drawer-away);transition: transform var(--helix-duration-normal) var(--helix-easing-decelerate), display var(--helix-duration-normal) allow-discrete, overlay var(--helix-duration-normal) allow-discrete;z-index: var(--helix-layer-overlay)}[part="panel"]:not([open]) {display: none}:host([material="glass"]) [part="panel"] {backdrop-filter: var(--drawer-backdrop, var(--helix-material-backdrop));background-color: var(--drawer-background-color, light-dark(var(--helix-material-translucent-strong), var(--helix-material-translucent)))}:host([material="frosted"]) [part="panel"] {backdrop-filter: var(--drawer-backdrop, blur(var(--helix-material-blur-lg)));background-color: var(--drawer-background-color, var(--helix-material-translucent-strong))}:host(:not([placement])) [part="panel"], :host([placement="end"]) [part="panel"] {border-start-end-radius: var(--helix-radii-none);border-end-end-radius: var(--helix-radii-none);block-size: 100%;inline-size: min(var(--_drawer-size), 100%);inset-block: 0;inset-inline-end: 0;--_drawer-away: translateX(100%)}:host([placement="start"]) [part="panel"] {border-start-start-radius: var(--helix-radii-none);border-end-start-radius: var(--helix-radii-none);block-size: 100%;inline-size: min(var(--_drawer-size), 100%);inset-block: 0;inset-inline-start: 0;--_drawer-away: translateX(-100%)}:host([placement="bottom"]) [part="panel"] {border-end-start-radius: var(--helix-radii-none);border-end-end-radius: var(--helix-radii-none);block-size: min(var(--_drawer-size), 100%);inset-block-end: 0;inset-inline: 0;--_drawer-away: translateY(100%)}:host([placement="top"]) [part="panel"] {border-start-start-radius: var(--helix-radii-none);border-start-end-radius: var(--helix-radii-none);block-size: min(var(--_drawer-size), 100%);inset-block-start: 0;inset-inline: 0;--_drawer-away: translateY(-100%)}:host(:dir(rtl):not([placement])) [part="panel"], :host(:dir(rtl)[placement="end"]) [part="panel"] {--_drawer-away: translateX(-100%)}:host(:dir(rtl)[placement="start"]) [part="panel"] {--_drawer-away: translateX(100%)}:host(:state(open)) [part="panel"] {border: var(--drawer-border-width, var(--helix-border-floating)) solid var(--drawer-border-color, var(--helix-color-border));box-shadow: var(--drawer-shadow, var(--helix-shadow-floating));transform: translate(var(--drawer-swipe-x, 0), var(--drawer-swipe-y, 0))}[part="panel"], [part="content"] {touch-action: pan-y}:host([placement="bottom"]) [part="panel"], :host([placement="top"]) [part="panel"] {touch-action: pan-x}[part="panel"][data-swiping] {transition: none;user-select: none}@starting-style {:host(:state(open)) [part="panel"][open] {transform: var(--_drawer-away)}}[part="header"] {flex: 0 0 auto}::slotted([slot="header"]) {color: var(--helix-color-foreground);display: block;font-family: var(--helix-font-sans);font-size: var(--helix-text-lg);font-weight: var(--helix-weight-semibold);letter-spacing: var(--helix-tracking-tight);line-height: var(--helix-leading-tight);margin: var(--helix-space-none);margin-block-end: var(--helix-space-md)}[part="footer"] {flex: 0 0 auto}::slotted([slot="footer"]) {display: flex;flex-wrap: wrap;gap: var(--helix-space-xs);margin-block-start: var(--helix-space-md)}[part="content"] {flex: 1 1 auto;min-block-size: 0;margin-inline: calc(var(--helix-size-focus-reach) * -1);overflow-y: auto;padding-inline: var(--helix-size-focus-reach)}[part="dismiss"] {all: unset;box-sizing: border-box;position: absolute;inset-block-start: calc(var(--drawer-padding-block-start, var(--drawer-padding, var(--helix-space-2xl))) + (var(--helix-text-lg) * var(--helix-leading-tight) - var(--helix-size-control-sm)) / 2);inset-inline-end: var(--helix-space-md);block-size: var(--helix-size-control-sm);border-radius: var(--helix-radii-sm);color: var(--helix-color-foreground-muted);cursor: pointer;display: inline-flex;inline-size: var(--helix-size-control-sm);place-content: center;place-items: center;transition: color var(--helix-duration-fast) var(--helix-easing-standard)}[part="dismiss"] svg {block-size: var(--helix-size-icon-sm);inline-size: var(--helix-size-icon-sm)}[part="dismiss"]:hover {background-color: color-mix(in oklab, var(--helix-color-foreground) 8%, transparent);color: var(--helix-color-foreground)}[part="dismiss"]:focus-visible {outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);outline-offset: var(--helix-size-focus-offset)}:host([dismissible]) ::slotted([slot="header"]) {padding-inline-end: calc(var(--helix-size-control-sm) + var(--helix-space-xs))}@media (prefers-reduced-motion: reduce) {[part="dismiss"] {transition: none}}@media print {:host {display: none}}`);
+export const styles = createSheet(`:host {--_drawer-size: var(--drawer-size, 20rem);display: contents}:host {--_drawer-scrim: var(--helix-color-overlay)}[part="panel"]::backdrop {background-color: var(--drawer-scrim, var(--_drawer-scrim));opacity: 0;transition: opacity var(--helix-duration-normal) var(--helix-easing-standard), display var(--helix-duration-normal) allow-discrete, overlay var(--helix-duration-normal) allow-discrete}[part="panel"][open]::backdrop {opacity: 1}@starting-style {[part="panel"][open]::backdrop {opacity: 0}}[part="panel"] {border-radius: var(--drawer-radius, var(--helix-radii-sm));margin: var(--helix-space-none);border: none;max-inline-size: none;max-block-size: none;inset: auto;inline-size: auto;block-size: auto;background-color: var(--drawer-background-color, var(--helix-color-surface-overlay));padding: var(--drawer-padding, var(--helix-space-lg));padding-block-start: var(--drawer-padding-block-start, var(--drawer-padding, var(--helix-space-2xl)));display: flex;flex-direction: column;outline: none;position: fixed;transform: var(--_drawer-away);transition: transform var(--helix-duration-normal) var(--helix-easing-decelerate), display var(--helix-duration-normal) allow-discrete, overlay var(--helix-duration-normal) allow-discrete;z-index: var(--helix-layer-overlay)}[part="panel"]:not([open]) {display: none}:host([material="glass"]) [part="panel"] {backdrop-filter: var(--drawer-backdrop, var(--helix-material-backdrop));background-color: var(--drawer-background-color, light-dark(var(--helix-material-translucent-strong), var(--helix-material-translucent)))}:host([material="frosted"]) [part="panel"] {backdrop-filter: var(--drawer-backdrop, blur(var(--helix-material-blur-lg)));background-color: var(--drawer-background-color, var(--helix-material-translucent-strong))}:host(:not([placement])) [part="panel"], :host([placement="end"]) [part="panel"] {border-start-end-radius: var(--helix-radii-none);border-end-end-radius: var(--helix-radii-none);block-size: 100%;inline-size: min(var(--_drawer-size), 100%);inset-block: 0;inset-inline-end: 0;--_drawer-away: translateX(100%)}:host([placement="start"]) [part="panel"] {border-start-start-radius: var(--helix-radii-none);border-end-start-radius: var(--helix-radii-none);block-size: 100%;inline-size: min(var(--_drawer-size), 100%);inset-block: 0;inset-inline-start: 0;--_drawer-away: translateX(-100%)}:host([placement="bottom"]) [part="panel"] {border-end-start-radius: var(--helix-radii-none);border-end-end-radius: var(--helix-radii-none);block-size: min(var(--_drawer-size), 100%);inset-block-end: 0;inset-inline: 0;--_drawer-away: translateY(100%)}:host([placement="top"]) [part="panel"] {border-start-start-radius: var(--helix-radii-none);border-start-end-radius: var(--helix-radii-none);block-size: min(var(--_drawer-size), 100%);inset-block-start: 0;inset-inline: 0;--_drawer-away: translateY(-100%)}:host(:dir(rtl):not([placement])) [part="panel"], :host(:dir(rtl)[placement="end"]) [part="panel"] {--_drawer-away: translateX(-100%)}:host(:dir(rtl)[placement="start"]) [part="panel"] {--_drawer-away: translateX(100%)}:host(:state(open)) [part="panel"] {border: var(--drawer-border-width, var(--helix-border-floating)) solid var(--drawer-border-color, var(--helix-color-border));box-shadow: var(--drawer-shadow, var(--helix-shadow-floating));transform: translate(var(--drawer-swipe-x, 0), var(--drawer-swipe-y, 0))}[part="panel"], [part="content"] {touch-action: pan-y}:host([placement="bottom"]) [part="panel"], :host([placement="top"]) [part="panel"] {touch-action: pan-x}[part="panel"][data-swiping] {transition: none;user-select: none}@starting-style {:host(:state(open)) [part="panel"][open] {transform: var(--_drawer-away)}}[part="header"] {flex: 0 0 auto}::slotted([slot="header"]) {color: var(--helix-color-foreground);display: block;font-family: var(--helix-font-sans);font-size: var(--helix-text-lg);font-weight: var(--helix-weight-semibold);letter-spacing: var(--helix-tracking-tight);line-height: var(--helix-leading-tight);margin: var(--helix-space-none);margin-block-end: var(--helix-space-md)}[part="footer"] {flex: 0 0 auto}::slotted([slot="footer"]) {display: flex;flex-wrap: wrap;gap: var(--helix-space-xs);margin-block-start: var(--helix-space-md)}[part="content"] {flex: 1 1 auto;min-block-size: 0;margin-inline: calc(var(--helix-size-focus-reach) * -1);overflow-y: auto;padding-inline: var(--helix-size-focus-reach)}[part="dismiss"] {all: unset;box-sizing: border-box;position: absolute;inset-block-start: calc(var(--drawer-padding-block-start, var(--drawer-padding, var(--helix-space-2xl))) + (var(--helix-text-lg) * var(--helix-leading-tight) - var(--helix-size-control-sm)) / 2);inset-inline-end: var(--helix-space-md);block-size: var(--helix-size-control-sm);border-radius: var(--helix-radii-sm);color: var(--helix-color-foreground-muted);cursor: pointer;display: inline-flex;inline-size: var(--helix-size-control-sm);place-content: center;place-items: center;transition: color var(--helix-duration-fast) var(--helix-easing-standard)}[part="dismiss"] svg {block-size: var(--helix-size-icon-sm);inline-size: var(--helix-size-icon-sm)}[part="dismiss"]:hover {background-color: color-mix(in oklab, var(--helix-color-foreground) 8%, transparent);color: var(--helix-color-foreground)}[part="dismiss"]:focus-visible {outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);outline-offset: var(--helix-size-focus-offset)}:host([dismissible]) ::slotted([slot="header"]) {padding-inline-end: calc(var(--helix-size-control-sm) + var(--helix-space-xs))}@media (prefers-reduced-motion: reduce) {[part="dismiss"] {transition: none}}@supports not (overlay: auto) {[part="panel"], [part="panel"]::backdrop {transition-behavior: normal}}@media print {:host {display: none}}`);

package/dist/drawer/root/drawer-root.d.ts

@@ -31,8 +31,7 @@ import type { CSSResultGroup } from 'lit';
  * @cssproperty --drawer-background-color - Surface behind the panel.
  * @cssproperty --drawer-border-color - Color of the panel's edge.
  * @cssproperty --drawer-border-width - Width of the panel's edge. Follows
- *   `--helix-border-floating`, which is `0`, so the panel stands out by its shadow unless your
- *   theme sets a border.
+ *   `--helix-border-floating`, a hairline, so the panel has an edge as well as its shadow over a dark page. Set it to `0` for the shadow alone.
  * @cssproperty --drawer-padding - Padding inside the panel.
  * @cssproperty --drawer-padding-block-start - Padding above the header. It is one step larger than
  *   the other three sides, so the first line clears the window's edge. Falls back to

package/dist/element-events.generated.js

@@ -34,6 +34,7 @@ registerElementEvents({
         'helix-before-listen',
         'helix-listen',
         'helix-send',
+        'helix-stop',
         'helix-typing',
         'input',
     ],

package/dist/graph/root/graph-root.d.ts

@@ -2,6 +2,7 @@ import { type ViewportControlAxes } from '@fusion.dev/helix-core';
 import { HelixHeadlessGraph } from '@fusion.dev/helix-headless/graph';
 import type { CSSResultGroup } from 'lit';
 import '../../icon-button/index.js';
+import '../../tooltip/index.js';
 /**
  * @summary A frame around a graph of notes drawn by another library, and the list that makes it readable.
  *

package/dist/graph/root/graph-root.js

@@ -5,6 +5,7 @@ import { styles as liveStyles } from '../../shared/live/live.css.js';
 import { styles as viewportStyles } from '../../shared/viewport/viewport.css.js';
 import { styles } from './graph-root.css.js';
 import '../../icon-button/index.js';
+import '../../tooltip/index.js';
 let HelixGraph = class HelixGraph extends HelixHeadlessGraph {
     static { this.tier = 'helix-'; }
     get controlAxes() {

package/dist/index.d.ts

@@ -126,3 +126,4 @@ export * from './trend/index.js';
 export * from './video/index.js';
 export * from './video-playlist/index.js';
 export * from './virtual-list/index.js';
+export * from './voice-level/index.js';

package/dist/index.js

@@ -121,3 +121,4 @@ export * from './trend/index.js';
 export * from './video/index.js';
 export * from './video-playlist/index.js';
 export * from './virtual-list/index.js';
+export * from './voice-level/index.js';

package/dist/kbd/root/kbd-root.css.js

@@ -1,2 +1,2 @@
 import { createSheet } from '@fusion.dev/helix-core';
-export const styles = createSheet(`:host {--_kbd-size: var(--kbd-font-size, 0.85em);--_kbd-height: var(--kbd-block-size, 1.5em);--_kbd-inset: var(--kbd-padding-inline, 0.4em);display: inline-flex;font: inherit;vertical-align: -0.05em}[part="kbd"] {align-items: center;background-color: var(--kbd-background-color, var(--helix-color-surface-sunken));block-size: var(--_kbd-height);border: var(--helix-border-thin) solid var(--kbd-border-color, var(--helix-color-border));border-radius: var(--kbd-radius, var(--helix-radii-sm));box-shadow: inset 0 -1px 0 0 var(--kbd-border-color, var(--helix-color-border));color: var(--kbd-color, var(--helix-color-foreground-muted));display: inline-flex;font-family: var(--kbd-font-family, var(--helix-font-mono));font-feature-settings: "liga" 0, "calt" 0;font-size: var(--_kbd-size);font-variant-ligatures: none;font-weight: var(--kbd-font-weight, var(--helix-weight-medium));justify-content: center;line-height: 1;min-inline-size: var(--_kbd-height);white-space: nowrap;padding-inline: var(--_kbd-inset);padding-block-start: var(--helix-border-thin)}:host([caps]) [part="kbd"] {background-color: transparent;border: 0;box-shadow: none;gap: var(--kbd-gap, var(--helix-space-2xs));min-inline-size: 0;padding: 0}:host([caps]) [part="key"] {align-items: center;background-color: var(--kbd-background-color, var(--helix-color-surface-sunken));block-size: var(--_kbd-height);border: var(--helix-border-thin) solid var(--kbd-border-color, var(--helix-color-border));border-radius: var(--kbd-radius, var(--helix-radii-sm));box-shadow: inset 0 -1px 0 0 var(--kbd-border-color, var(--helix-color-border));display: inline-flex;justify-content: center;min-inline-size: var(--_kbd-height);padding-block-start: var(--helix-border-thin);padding-inline: var(--_kbd-inset)}[part="separator"] {color: var(--kbd-separator-color, var(--helix-color-foreground-muted))}@media print {:host {box-shadow: none}}`);
+export const styles = createSheet(`:host {--_kbd-size: var(--kbd-font-size, 0.85em);--_kbd-height: round(var(--kbd-block-size, 1.5em), 1px);--_kbd-inset: var(--kbd-padding-inline, 0.4em);display: inline-block;font: inherit;line-height: 0;vertical-align: calc(0.5cap - 0.5ex - 0.5px)}[part="kbd"] {background-color: var(--kbd-background-color, var(--helix-color-surface-sunken));block-size: var(--_kbd-height);border: var(--helix-border-thin) solid var(--kbd-border-color, var(--helix-color-border));border-radius: var(--kbd-radius, var(--helix-radii-sm));box-shadow: inset 0 -1px 0 0 var(--kbd-border-color, var(--helix-color-border));color: var(--kbd-color, var(--helix-color-foreground-muted));display: inline-block;font-family: var(--kbd-font-family, var(--helix-font-mono));font-feature-settings: "liga" 0, "calt" 0;font-size: var(--_kbd-size);font-variant-ligatures: none;font-weight: var(--kbd-font-weight, var(--helix-weight-medium));line-height: 0;min-inline-size: var(--_kbd-height);padding-inline: var(--_kbd-inset);text-align: center;vertical-align: middle;white-space: nowrap}[part="kbd"]::before, :host([caps]) [part="key"]::before {block-size: calc((var(--_kbd-height) - 2 * var(--helix-border-thin) - 1px) / 2 + 0.5cap);content: "";display: inline-block}:host([caps]) [part="kbd"] {background-color: transparent;border: 0;box-shadow: none;display: inline-flex;gap: var(--kbd-gap, var(--helix-space-2xs));line-height: 1;min-inline-size: 0;padding: 0}:host([caps]) [part="kbd"]::before {content: none}:host([caps]) [part="key"] {background-color: var(--kbd-background-color, var(--helix-color-surface-sunken));block-size: var(--_kbd-height);border: var(--helix-border-thin) solid var(--kbd-border-color, var(--helix-color-border));border-radius: var(--kbd-radius, var(--helix-radii-sm));box-shadow: inset 0 -1px 0 0 var(--kbd-border-color, var(--helix-color-border));display: inline-block;line-height: 0;min-inline-size: var(--_kbd-height);padding-inline: var(--_kbd-inset);text-align: center}[part="separator"] {color: var(--kbd-separator-color, var(--helix-color-foreground-muted))}@media print {:host {box-shadow: none}}`);

package/dist/log/group/log-group.css.js

@@ -1,2 +1,2 @@
 import { createSheet } from '@fusion.dev/helix-core';
-export const styles = createSheet(`:host {display: block}[part="summary"] {all: unset;box-sizing: border-box;align-items: center;color: var(--helix-color-foreground);column-gap: var(--helix-space-xs);cursor: pointer;display: flex;font-family: var(--helix-font-sans);font-weight: var(--helix-weight-medium);inline-size: 100%;padding-block: var(--helix-space-2xs);padding-inline: var(--log-padding-inline, var(--helix-space-md));white-space: nowrap}[part="summary"]:hover {background-color: color-mix(in oklab, var(--helix-color-foreground) 5%, transparent)}[part="summary"]:focus-visible {outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);outline-offset: calc(var(--helix-size-focus-offset) * -1)}[part="mark"] {block-size: var(--helix-size-icon-sm);color: var(--helix-color-foreground-subtle);flex: none;font-family: var(--log-font-family, var(--helix-font-mono));inline-size: var(--helix-size-icon-sm);margin-inline-end: calc(var(--helix-space-md) - var(--helix-space-xs));margin-inline-start: calc(max(var(--helix-size-icon-sm), calc(var(--log-digits, 2) * 1ch)) - var(--helix-size-icon-sm));rotate: -90deg;transition: rotate var(--helix-duration-fast) var(--helix-easing-standard)}:host(:dir(rtl)) [part="mark"] {rotate: 90deg}:host(:state(open)) [part="mark"] {rotate: none}[part="status"] {block-size: var(--helix-size-icon-sm);color: var(--helix-color-foreground-muted);flex: none;inline-size: var(--helix-size-icon-sm)}:host([status="done"]) [part="status"] {color: var(--helix-color-success)}:host([status="failed"]) [part="status"] {color: var(--helix-color-danger)}:host([status="running"]) [part="status"] {color: var(--helix-color-info)}[part="heading"] {min-inline-size: 0;overflow: hidden;text-overflow: ellipsis}[part="duration"] {color: var(--helix-color-foreground-muted);flex: none;font-variant-numeric: tabular-nums;font-weight: var(--helix-weight-regular);margin-inline-start: var(--_log-duration-start, auto)}[part="content"][hidden] {display: none}::slotted(helix-log-group) {margin-inline-start: calc(max(var(--helix-size-icon-sm), calc(var(--log-digits, 2) * 1ch)) + var(--helix-space-md))}@media print {:host {print-color-adjust: economy}}`);
+export const styles = createSheet(`:host {display: block}[part="summary"] {all: unset;box-sizing: border-box;align-items: center;border-radius: var(--_log-row-radius, var(--helix-radii-none));color: var(--_log-row-color, var(--helix-color-foreground));column-gap: var(--helix-space-xs);cursor: pointer;display: flex;font-family: var(--helix-font-sans);font-weight: var(--_log-heading-weight, var(--helix-weight-medium));inline-size: calc(100% + var(--_log-row-inset, 0px) * 2);margin-inline: calc(var(--_log-row-inset, 0px) * -1);padding-block: var(--helix-space-2xs);padding-inline: var(--_log-row-inset, var(--log-padding-inline, var(--helix-space-md)));transition: background-color var(--helix-duration-fast) var(--helix-easing-standard), color var(--helix-duration-fast) var(--helix-easing-standard);white-space: nowrap}[part="summary"]:hover {background-color: color-mix(in oklab, var(--helix-color-foreground) 5%, transparent);color: var(--helix-color-foreground)}[part="summary"]:focus-visible {outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);outline-offset: calc(var(--helix-size-focus-offset) * -1)}[part="mark"] {block-size: var(--_log-caret-size, var(--helix-size-icon-sm));color: var(--helix-color-foreground-subtle);flex: none;font-family: var(--log-font-family, var(--helix-font-mono));inline-size: var(--_log-caret-size, var(--helix-size-icon-sm));margin-inline-end: var(--_log-caret-end, calc(var(--helix-space-md) - var(--helix-space-xs)));margin-inline-start: var(--_log-caret-start, calc(max(var(--helix-size-icon-sm), calc(var(--log-digits, 2) * 1ch)) - var(--helix-size-icon-sm)));order: var(--_log-caret-order, 0);rotate: -90deg;transition: color var(--helix-duration-fast) var(--helix-easing-standard), rotate var(--helix-duration-fast) var(--helix-easing-standard)}:host(:dir(rtl)) [part="mark"] {rotate: 90deg}:host(:state(open)) [part="mark"] {rotate: none}[part="summary"]:hover [part="mark"] {color: var(--helix-color-foreground-muted)}[part="status"] {block-size: var(--helix-size-icon-sm);color: var(--helix-color-foreground-muted);flex: none;inline-size: var(--helix-size-icon-sm)}:host([status="done"]) [part="status"] {color: var(--helix-color-success)}:host([status="failed"]) [part="status"] {color: var(--helix-color-danger)}:host([status="running"]) [part="status"] {color: var(--helix-color-info)}[part="heading"] {min-inline-size: 0;overflow: hidden;text-overflow: ellipsis}[part="duration"] {color: var(--helix-color-foreground-muted);flex: none;font-variant-numeric: tabular-nums;font-weight: var(--helix-weight-regular);margin-inline-start: var(--_log-duration-start, auto)}[part="content"][hidden] {display: none}:host(:state(empty)) [part="mark"] {visibility: hidden}:host(:state(empty)) [part="content"] {display: none}::slotted(helix-log-group) {margin-inline-start: var(--_log-nest-indent, calc(max(var(--helix-size-icon-sm), calc(var(--log-digits, 2) * 1ch)) + var(--helix-space-md)))}:host(:state(steps)) [part="content"] {--_log-line-inset: var(--_log-nest-indent);border-inline-start: var(--_log-step-rule, none);margin-inline-start: var(--_log-step-rule-start, var(--helix-space-none))}:host(:not(:state(steps))) [part="content"] {--_log-line-inset: var(--_log-step-line-inset);background-color: var(--_log-step-surface, transparent);border-radius: var(--_log-step-radius, var(--helix-radii-none));margin-block: var(--_log-step-margin-block, var(--helix-space-none));margin-inline-start: var(--_log-step-start, var(--helix-space-none));max-block-size: var(--_log-step-max-block-size, none);overflow: var(--_log-step-overflow, visible);overscroll-behavior: contain;padding-block: var(--_log-step-padding-block, var(--helix-space-none));scrollbar-color: var(--log-scrollbar-thumb-color, var(--helix-scrollbar-thumb-color)) var(--log-scrollbar-track-color, var(--helix-scrollbar-track-color));scrollbar-width: thin}@supports (animation-timeline: scroll()) {:host(:not(:state(steps))) [part="content"] {animation-fill-mode: both;animation-name: var(--_log-step-fade, none);animation-timeline: scroll(self block);animation-timing-function: linear}}@media (prefers-reduced-motion: reduce) {:host(:not(:state(steps))) [part="content"] {animation: none}}@keyframes log-step-fade {0% {mask-image: linear-gradient(to bottom, #000 calc(100% - var(--helix-space-lg)), transparent)}1%, 99% {mask-image: linear-gradient(to bottom, transparent, #000 var(--helix-space-lg), #000 calc(100% - var(--helix-space-lg)), transparent)}100% {mask-image: linear-gradient(to bottom, transparent, #000 var(--helix-space-lg))}}@media print {:host {print-color-adjust: economy}[part="content"] {max-block-size: none;overflow: visible}}`);

package/dist/log/line/log-line.css.js

@@ -1,2 +1,2 @@
 import { createSheet } from '@fusion.dev/helix-core';
-export const styles = createSheet(`:host {display: block}[part~="line"] {column-gap: var(--helix-space-md);display: flex;inline-size: var(--_log-line-size, max-content);min-inline-size: 100%;padding-inline: var(--log-padding-inline, var(--helix-space-md))}[part~="line-grouped"]:not(:has(> [part="number"])) {padding-inline-start: calc(var(--log-padding-inline, var(--helix-space-md)) + max(var(--helix-size-icon-sm), calc(var(--log-digits, 2) * 1ch)) + var(--helix-space-md))}[part="level"], [part="count-label"] {block-size: 1px;clip-path: inset(50%);inline-size: 1px;overflow: hidden;position: absolute;white-space: nowrap}[part="count"] {align-self: center;background-color: color-mix(in oklab, var(--helix-color-foreground) 10%, transparent);border-radius: var(--helix-radii-full);color: var(--helix-color-foreground-muted);flex: none;font-size: var(--helix-text-xs);font-variant-numeric: tabular-nums;line-height: 1.4;padding-inline: var(--helix-space-xs)}[part~="line"]:hover {background-color: color-mix(in oklab, var(--helix-color-foreground) 4%, transparent)}:where(button[part="number"]) {all: unset;box-sizing: border-box}[part="number"] {color: var(--helix-color-foreground-muted);flex: none;font-variant-numeric: tabular-nums;min-inline-size: max(var(--helix-size-icon-sm), calc(var(--log-digits, 2) * 1ch));text-align: end;text-decoration: none;user-select: none}a[part="number"]:hover, button[part="number"]:hover {color: var(--helix-color-foreground);cursor: pointer}a[part="number"]:hover {text-decoration: underline}a[part="number"]:focus-visible, button[part="number"]:focus-visible {border-radius: var(--helix-radii-sm);outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);outline-offset: calc(var(--helix-size-focus-offset) * -1)}[part="time"] {color: var(--helix-color-foreground-muted);flex: none;font-variant-numeric: tabular-nums;user-select: none}[part="text"] {flex: 1 1 auto;min-inline-size: 0;overflow-wrap: anywhere;white-space: var(--_log-white-space, pre)}[part~="line-debug"] {color: var(--helix-color-foreground-muted)}[part~="line-warn"] {background-color: color-mix(in oklab, var(--log-warn-color, var(--helix-color-warning)) 10%, transparent);color: color-mix(in oklab, var(--log-warn-color, var(--helix-color-warning)) 78%, var(--helix-color-foreground))}[part~="line-error"] {background-color: color-mix(in oklab, var(--log-error-color, var(--helix-color-danger)) 10%, transparent);color: color-mix(in oklab, var(--log-error-color, var(--helix-color-danger)) 78%, var(--helix-color-foreground))}[part~="line-marked"] {background-color: var(--log-mark-background-color, color-mix(in oklab, var(--helix-color-primary) 12%, transparent))}[part~="line-selected"] {background-color: var(--log-selected-background-color, color-mix(in oklab, var(--helix-color-info) 14%, transparent))}[part~="line-selected"] > [part="number"] {color: var(--helix-color-foreground)}[part~="run"] {background-color: var(--log-run-background-color, transparent);color: var(--log-run-color, inherit)}[part~="run-bold"] {font-weight: var(--helix-weight-semibold)}[part~="run-dim"] {opacity: 0.7}[part~="run-italic"] {font-style: italic}[part~="run-underline"] {text-decoration-line: underline}[part~="run-strike"] {text-decoration-line: line-through}[part~="run-underline"][part~="run-strike"] {text-decoration-line: underline line-through}[part="match"] {background-color: var(--log-match-background-color, var(--helix-color-warning-surface));border-radius: var(--helix-radii-sm);color: inherit}@media print {[part~="line"] {print-color-adjust: exact}}`);
+export const styles = createSheet(`:host {display: block}[part~="line"] {column-gap: var(--helix-space-md);display: flex;inline-size: var(--_log-line-size, max-content);min-inline-size: 100%;padding-inline: var(--log-padding-inline, var(--helix-space-md))}[part~="line-grouped"]:not(:has(> [part="number"])) {padding-inline-start: var(--_log-line-inset, calc(var(--log-padding-inline, var(--helix-space-md)) + max(var(--helix-size-icon-sm), calc(var(--log-digits, 2) * 1ch)) + var(--helix-space-md)))}[part~="line-grouped"] {padding-inline-end: var(--_log-line-inset, var(--log-padding-inline, var(--helix-space-md)))}[part="level"], [part="count-label"] {block-size: 1px;clip-path: inset(50%);inline-size: 1px;overflow: hidden;position: absolute;white-space: nowrap}[part="count"] {align-self: center;background-color: color-mix(in oklab, var(--helix-color-foreground) 10%, transparent);border-radius: var(--helix-radii-full);color: var(--helix-color-foreground-muted);flex: none;font-size: var(--helix-text-xs);font-variant-numeric: tabular-nums;line-height: 1.4;padding-inline: var(--helix-space-xs)}[part~="line"]:hover {background-color: color-mix(in oklab, var(--helix-color-foreground) 4%, transparent)}:where(button[part="number"]) {all: unset;box-sizing: border-box}[part="number"] {color: var(--helix-color-foreground-muted);flex: none;font-variant-numeric: tabular-nums;min-inline-size: max(var(--helix-size-icon-sm), calc(var(--log-digits, 2) * 1ch));text-align: end;text-decoration: none;user-select: none}a[part="number"]:hover, button[part="number"]:hover {color: var(--helix-color-foreground);cursor: pointer}a[part="number"]:hover {text-decoration: underline}a[part="number"]:focus-visible, button[part="number"]:focus-visible {border-radius: var(--helix-radii-sm);outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);outline-offset: calc(var(--helix-size-focus-offset) * -1)}[part="time"] {color: var(--helix-color-foreground-muted);flex: none;font-variant-numeric: tabular-nums;user-select: none}[part="text"] {flex: 1 1 auto;min-inline-size: 0;overflow-wrap: anywhere;white-space: var(--_log-white-space, pre)}[part="text"] {padding-inline-start: var(--_log-wrap-indent, 0);text-indent: calc(var(--_log-wrap-indent, 0) * -1)}[part~="line-debug"] {color: var(--helix-color-foreground-muted)}[part~="line-warn"] {background-color: color-mix(in oklab, var(--log-warn-color, var(--helix-color-warning)) 10%, transparent);color: color-mix(in oklab, var(--log-warn-color, var(--helix-color-warning)) 78%, var(--helix-color-foreground))}[part~="line-error"] {background-color: color-mix(in oklab, var(--log-error-color, var(--helix-color-danger)) 10%, transparent);color: color-mix(in oklab, var(--log-error-color, var(--helix-color-danger)) 78%, var(--helix-color-foreground))}[part~="line-marked"] {background-color: var(--log-mark-background-color, color-mix(in oklab, var(--helix-color-primary) 12%, transparent))}[part~="line-selected"] {background-color: var(--log-selected-background-color, color-mix(in oklab, var(--helix-color-info) 14%, transparent))}[part~="line-selected"] > [part="number"] {color: var(--helix-color-foreground)}[part~="run"] {background-color: var(--log-run-background-color, transparent);color: var(--log-run-color, inherit)}[part~="run-bold"] {font-weight: var(--helix-weight-semibold)}[part~="run-dim"] {opacity: 0.7}[part~="run-italic"] {font-style: italic}[part~="run-underline"] {text-decoration-line: underline}[part~="run-strike"] {text-decoration-line: line-through}[part~="run-underline"][part~="run-strike"] {text-decoration-line: underline line-through}[part="match"] {background-color: var(--log-match-background-color, var(--helix-color-warning-surface));border-radius: var(--helix-radii-sm);color: inherit}@media print {[part~="line"] {print-color-adjust: exact}}`);

package/dist/log/root/log-root.css.js

@@ -1,2 +1,2 @@
 import { createSheet } from '@fusion.dev/helix-core';
-export const styles = createSheet(`:host {--log-ansi-background: var(--log-background-color, var(--helix-color-background));--log-ansi-black: var(--helix-color-foreground);--log-ansi-blue: var(--helix-color-info);--log-ansi-bright-black: var(--helix-color-foreground-muted);--log-ansi-bright-blue: color-mix(in oklab, var(--log-ansi-blue) 75%, var(--helix-color-foreground));--log-ansi-bright-cyan: color-mix(in oklab, var(--log-ansi-cyan) 75%, var(--helix-color-foreground));--log-ansi-bright-green: color-mix(in oklab, var(--log-ansi-green) 75%, var(--helix-color-foreground));--log-ansi-bright-magenta: color-mix(in oklab, var(--log-ansi-magenta) 75%, var(--helix-color-foreground));--log-ansi-bright-red: color-mix(in oklab, var(--log-ansi-red) 75%, var(--helix-color-foreground));--log-ansi-bright-white: var(--helix-color-foreground);--log-ansi-bright-yellow: color-mix(in oklab, var(--log-ansi-yellow) 75%, var(--helix-color-foreground));--log-ansi-cyan: color-mix(in oklab, var(--helix-color-info), var(--helix-color-success));--log-ansi-foreground: var(--log-color, var(--helix-color-foreground));--log-ansi-green: var(--helix-color-success);--log-ansi-magenta: var(--helix-color-syntax-callable);--log-ansi-red: var(--helix-color-danger);--log-ansi-white: var(--helix-color-foreground-muted);--log-ansi-yellow: var(--helix-color-warning);background-color: var(--log-background-color, var(--helix-color-background));border: var(--helix-border-thin) solid var(--log-border-color, var(--helix-color-border));border-radius: var(--log-radius, var(--helix-radii-lg));color: var(--log-color, var(--helix-color-foreground));display: grid;font-family: var(--log-font-family, var(--helix-font-mono));font-size: var(--log-font-size, var(--helix-text-xs));grid-template-columns: minmax(0, 1fr);grid-template-rows: auto auto minmax(0, 1fr) auto;line-height: var(--log-line-height, var(--helix-leading-normal));max-block-size: var(--log-max-block-size, 30rem);min-block-size: 0;overflow: hidden;tab-size: 4}:host([separation="plain"]) {--log-padding-inline: var(--helix-space-none);--_log-duration-start: var(--helix-space-xs);background-color: transparent;border: none;border-radius: var(--helix-radii-none);max-block-size: var(--log-max-block-size, none)}:host([separation="plain"]) {color: var(--log-color, inherit)}:host([wrap]) {--_log-line-size: auto;--_log-white-space: pre-wrap}::slotted([slot="toolbar"]) {--helix-size-control: var(--helix-size-control-sm);--helix-size-control-loose: calc(var(--helix-size-control) * 1.2);--helix-size-control-tight: calc(var(--helix-size-control) * 0.8);--helix-size-icon: var(--helix-size-icon-sm);--helix-size-icon-loose: calc(var(--helix-size-icon) * 1.2);--helix-size-icon-tight: calc(var(--helix-size-icon) * 0.8);border-block-end: var(--helix-border-thin) solid var(--log-border-color, var(--helix-color-border));font-family: var(--helix-font-sans);grid-row: 1;padding-block: var(--helix-space-xs);padding-inline: var(--log-padding-inline, var(--helix-space-md))}[part="dropped"] {background-color: var(--helix-color-surface-sunken);border-block-end: var(--helix-border-thin) solid var(--log-border-color, var(--helix-color-border));color: var(--helix-color-foreground-muted);font-family: var(--helix-font-sans);grid-row: 2;margin: var(--helix-space-none);padding-block: var(--helix-space-2xs);padding-inline: var(--log-padding-inline, var(--helix-space-md))}[part="dropped"][hidden], [part="resume"][hidden] {display: none}[part="log"] {grid-row: 3;overflow: auto;overscroll-behavior: contain;padding-block: var(--helix-space-xs);scrollbar-color: var(--log-scrollbar-thumb-color, var(--helix-scrollbar-thumb-color)) var(--log-scrollbar-track-color, var(--helix-scrollbar-track-color));scrollbar-width: thin}:host([separation="plain"]) [part="log"] {padding-block: var(--helix-space-none)}[part="log"]:focus-visible {outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);outline-offset: calc(var(--helix-size-focus-offset) * -1)}[part="row"] {min-inline-size: 100%;inline-size: var(--_log-line-size, max-content)}[part="resume"] {display: grid;grid-row: 4;justify-items: center;margin-block-start: calc(var(--helix-space-xl) * -1 - var(--helix-space-xs));padding-block-end: var(--helix-space-xs);pointer-events: none;position: relative}[part="resume"] > * {pointer-events: auto}[part="resume"] slot::slotted(*) {border: var(--helix-border-floating) solid var(--log-border-color, var(--helix-color-border));box-shadow: var(--helix-shadow-floating)}[part="resume-button"] {all: unset;box-sizing: border-box;align-items: center;background-color: var(--helix-color-surface-raised);block-size: var(--helix-size-control-sm);border: var(--helix-border-floating) solid var(--log-border-color, var(--helix-color-border));border-radius: var(--helix-radii-sm);box-shadow: var(--helix-shadow-floating);color: var(--helix-color-foreground);cursor: pointer;display: inline-flex;font-family: var(--helix-font-sans);font-size: var(--helix-text-xs);font-weight: var(--helix-weight-medium);gap: var(--helix-space-2xs);line-height: var(--helix-leading-tight);padding-inline: var(--helix-space-sm);white-space: nowrap}[part="resume-button"]:hover {background-color: color-mix(in oklab, var(--helix-color-foreground) 6%, var(--helix-color-surface-raised))}[part="resume-button"]:focus-visible {outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);outline-offset: var(--helix-size-focus-offset)}[part="resume-mark"] {block-size: var(--helix-size-icon-sm);display: inline-flex;inline-size: var(--helix-size-icon-sm)}[part="resume-mark"] svg {block-size: 100%;inline-size: 100%}[part="empty"], [part="loading"] {--_collection-inset-block: var(--helix-space-lg);--_collection-inset-inline: var(--helix-space-md)}@media print {:host {max-block-size: none}[part="log"] {overflow: visible}[part="resume"] {display: none}}`);
+export const styles = createSheet(`:host {--log-ansi-background: var(--log-background-color, var(--helix-color-background));--log-ansi-black: var(--helix-color-foreground);--log-ansi-blue: var(--helix-color-info);--log-ansi-bright-black: var(--helix-color-foreground-muted);--log-ansi-bright-blue: color-mix(in oklab, var(--log-ansi-blue) 75%, var(--helix-color-foreground));--log-ansi-bright-cyan: color-mix(in oklab, var(--log-ansi-cyan) 75%, var(--helix-color-foreground));--log-ansi-bright-green: color-mix(in oklab, var(--log-ansi-green) 75%, var(--helix-color-foreground));--log-ansi-bright-magenta: color-mix(in oklab, var(--log-ansi-magenta) 75%, var(--helix-color-foreground));--log-ansi-bright-red: color-mix(in oklab, var(--log-ansi-red) 75%, var(--helix-color-foreground));--log-ansi-bright-white: var(--helix-color-foreground);--log-ansi-bright-yellow: color-mix(in oklab, var(--log-ansi-yellow) 75%, var(--helix-color-foreground));--log-ansi-cyan: color-mix(in oklab, var(--helix-color-info), var(--helix-color-success));--log-ansi-foreground: var(--log-color, var(--helix-color-foreground));--log-ansi-green: var(--helix-color-success);--log-ansi-magenta: var(--helix-color-syntax-callable);--log-ansi-red: var(--helix-color-danger);--log-ansi-white: var(--helix-color-foreground-muted);--log-ansi-yellow: var(--helix-color-warning);background-color: var(--log-background-color, var(--helix-color-background));border: var(--helix-border-thin) solid var(--log-border-color, var(--helix-color-border));border-radius: var(--log-radius, var(--helix-radii-lg));color: var(--log-color, var(--helix-color-foreground));display: grid;font-family: var(--log-font-family, var(--helix-font-mono));font-size: var(--log-font-size, var(--helix-text-xs));grid-template-columns: minmax(0, 1fr);grid-template-rows: auto auto minmax(0, 1fr) auto;line-height: var(--log-line-height, var(--helix-leading-normal));max-block-size: var(--log-max-block-size, 30rem);min-block-size: 0;overflow: hidden;tab-size: 4}:host([separation="plain"]) {--log-padding-inline: var(--helix-space-none);--_log-duration-start: var(--helix-space-xs);--_log-caret-end: var(--helix-space-none);--_log-caret-order: 1;--_log-caret-size: calc(var(--helix-size-icon-sm) * 0.75);--_log-caret-start: calc(var(--helix-space-2xs) * -1);--_log-heading-weight: var(--helix-weight-regular);--_log-nest-indent: calc(var(--helix-size-icon-sm) / 2 + var(--helix-space-xs));--_log-row-color: currentColor;--_log-row-inset: var(--helix-space-2xs);--_log-row-radius: var(--helix-radii-sm);--_log-step-fade: log-step-fade;--_log-step-line-inset: var(--helix-space-sm);--_log-step-margin-block: var(--helix-space-2xs) var(--helix-space-xs);--_log-step-max-block-size: var(--log-step-max-block-size, 20rem);--_log-step-overflow: auto;--_log-step-padding-block: var(--helix-space-xs);--_log-step-radius: var(--helix-radii-md);--_log-step-rule: var(--helix-border-thin) solid var(--log-border-color, var(--helix-color-border));--_log-step-rule-start: calc(var(--helix-size-icon-sm) / 2 - var(--helix-border-thin));--_log-step-start: calc(var(--helix-size-icon-sm) + var(--helix-space-xs));--_log-step-surface: color-mix(in oklab, var(--helix-color-foreground) 4%, transparent);--_log-wrap-indent: 2ch;background-color: transparent;border: none;border-radius: var(--helix-radii-none);max-block-size: var(--log-max-block-size, none)}:host([separation="plain"]) {color: var(--log-color, inherit)}:host([wrap]) {--_log-line-size: auto;--_log-white-space: pre-wrap}::slotted([slot="toolbar"]) {--helix-size-control: var(--helix-size-control-sm);--helix-size-control-loose: calc(var(--helix-size-control) * 1.2);--helix-size-control-tight: calc(var(--helix-size-control) * 0.8);--helix-size-icon: var(--helix-size-icon-sm);--helix-size-icon-loose: calc(var(--helix-size-icon) * 1.2);--helix-size-icon-tight: calc(var(--helix-size-icon) * 0.8);border-block-end: var(--helix-border-thin) solid var(--log-border-color, var(--helix-color-border));font-family: var(--helix-font-sans);grid-row: 1;padding-block: var(--helix-space-xs);padding-inline: var(--log-padding-inline, var(--helix-space-md))}[part="dropped"] {background-color: var(--helix-color-surface-sunken);border-block-end: var(--helix-border-thin) solid var(--log-border-color, var(--helix-color-border));color: var(--helix-color-foreground-muted);font-family: var(--helix-font-sans);grid-row: 2;margin: var(--helix-space-none);padding-block: var(--helix-space-2xs);padding-inline: var(--log-padding-inline, var(--helix-space-md))}[part="dropped"][hidden], [part="resume"][hidden] {display: none}[part="log"] {grid-row: 3;overflow: auto;overscroll-behavior: contain;padding-block: var(--helix-space-xs);scrollbar-color: var(--log-scrollbar-thumb-color, var(--helix-scrollbar-thumb-color)) var(--log-scrollbar-track-color, var(--helix-scrollbar-track-color));scrollbar-width: thin}:host([separation="plain"]) [part="log"] {padding-block: var(--helix-space-none)}:host([separation="plain"]) {overflow: visible}:host([separation="plain"]) [part="log"] {margin-inline: calc(var(--_log-row-inset) * -1);padding-inline: var(--_log-row-inset)}[part="log"]:focus-visible {outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);outline-offset: calc(var(--helix-size-focus-offset) * -1)}[part="row"] {min-inline-size: 100%;inline-size: var(--_log-line-size, max-content)}[part="resume"] {display: grid;grid-row: 4;justify-items: center;margin-block-start: calc(var(--helix-space-xl) * -1 - var(--helix-space-xs));padding-block-end: var(--helix-space-xs);pointer-events: none;position: relative}[part="resume"] > * {pointer-events: auto}[part="resume"] slot::slotted(*) {border: var(--helix-border-floating) solid var(--log-border-color, var(--helix-color-border));box-shadow: var(--helix-shadow-floating)}[part="resume-button"] {all: unset;box-sizing: border-box;align-items: center;background-color: var(--helix-color-surface-raised);block-size: var(--helix-size-control-sm);border: var(--helix-border-floating) solid var(--log-border-color, var(--helix-color-border));border-radius: var(--helix-radii-sm);box-shadow: var(--helix-shadow-floating);color: var(--helix-color-foreground);cursor: pointer;display: inline-flex;font-family: var(--helix-font-sans);font-size: var(--helix-text-xs);font-weight: var(--helix-weight-medium);gap: var(--helix-space-2xs);line-height: var(--helix-leading-tight);padding-inline: var(--helix-space-sm);white-space: nowrap}[part="resume-button"]:hover {background-color: color-mix(in oklab, var(--helix-color-foreground) 6%, var(--helix-color-surface-raised))}[part="resume-button"]:focus-visible {outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);outline-offset: var(--helix-size-focus-offset)}[part="resume-mark"] {block-size: var(--helix-size-icon-sm);display: inline-flex;inline-size: var(--helix-size-icon-sm)}[part="resume-mark"] svg {block-size: 100%;inline-size: 100%}[part="empty"], [part="loading"] {--_collection-inset-block: var(--helix-space-lg);--_collection-inset-inline: var(--helix-space-md)}@media print {:host {max-block-size: none}[part="log"] {overflow: visible}[part="resume"] {display: none}}`);

package/dist/log/root/log-root.d.ts

@@ -35,6 +35,7 @@ import '../line/log-line.js';
  * @cssproperty --log-radius - The corners of the log.
  * @cssproperty --log-scrollbar-thumb-color - The thumb of the scrollbar. Defaults to `--helix-scrollbar-thumb-color`.
  * @cssproperty --log-scrollbar-track-color - The track of the scrollbar. Defaults to `--helix-scrollbar-track-color`.
+ * @cssproperty --log-step-max-block-size - How tall a step's lines may get in a `plain` log before they scroll. Defaults to 20rem.
  */
 export declare class HelixLog extends HelixHeadlessLog {
     static tier: string;
@@ -46,7 +47,10 @@ export declare class HelixLog extends HelixHeadlessLog {
      * - `plain` has no edge, no fill, no inset and no height of its own: the
      *   lines start where the text around them does and the log grows with
      *   them. For a log inside something that already frames it, such as an
-     *   agent's work in a chat turn's `work` slot.
+     *   agent's work in a chat turn's `work` slot. Each step is a row with its
+     *   status mark on that edge and its caret after the heading. A step that
+     *   holds steps draws a rule beside them, and a step that holds lines draws
+     *   them on a quiet surface that scrolls after `--log-step-max-block-size`.
      *
      * Both are writable, so a page can say which it means rather than relying
      * on the absence of an attribute.

package/dist/map/root/map-root.css.js

@@ -1,2 +1,2 @@
 import { createSheet } from '@fusion.dev/helix-core';
-export const styles = createSheet(`:host {display: contents}[part="region"] {background-color: var(--map-background-color, var(--helix-color-surface-sunken));block-size: var(--map-block-size, 24rem);border: var(--helix-border-thin) solid var(--map-border-color, var(--helix-color-border));border-radius: var(--map-radius, var(--helix-radii-sm));box-sizing: border-box;display: grid;grid-template-rows: auto 1fr auto auto;overflow: hidden;position: relative}:host([fill]) [part="region"] {block-size: auto;border: none;border-radius: 0;container-type: size;inset: 0;position: absolute}[part="viewport"] {isolation: isolate;min-block-size: 0;overflow: hidden;position: relative}[part="layers"] {block-size: 1px;clip-path: inset(50%);inline-size: 1px;margin: var(--helix-space-none);overflow: hidden;padding: var(--helix-space-none);position: absolute;white-space: nowrap}[part="viewport"] ::slotted(:not(helix-map-marker, helix-map-points, helix-map-position)) {block-size: 100%;inline-size: 100%}:host(:state(idle)) ::slotted([slot="header"]), :host(:state(idle)) ::slotted([slot="footer"]) {opacity: 0;transition: opacity var(--helix-duration-fast) var(--helix-easing-standard)}::slotted([slot="attribution"]) {border-block-start: var(--helix-border-thin) solid var(--map-attribution-border-color, var(--helix-color-border));color: var(--map-attribution-color, var(--helix-color-foreground-muted));display: block;font-size: var(--map-attribution-font-size, var(--helix-text-xs));padding: var(--helix-space-2xs) var(--helix-space-xs)}:host([credit-placement]) [part="attribution"] {inset-block-end: var(--helix-space-2xs);max-inline-size: calc(100% - var(--helix-space-2xs) * 2);position: absolute}:host([credit-placement="bottom-end"]) [part="attribution"] {inset-inline-end: var(--helix-space-2xs)}:host([credit-placement="bottom-start"]) [part="attribution"] {inset-inline-start: var(--helix-space-2xs)}:host([credit-placement]) ::slotted([slot="attribution"]) {backdrop-filter: var(--helix-material-backdrop);background-color: var(--helix-material-translucent);border-block-start: none;border-radius: var(--helix-radii-sm);color: var(--map-attribution-color, var(--helix-color-foreground-muted));overflow: hidden;padding: var(--helix-space-none) var(--helix-space-xs);text-overflow: ellipsis;white-space: nowrap}:host([credit-placement]) [part="attribution"]:is(:hover, :focus-within) ::slotted([slot="attribution"]) {white-space: normal}@media print {[part="controls"] {display: none}}[part="controls"] {align-items: center;display: flex;flex-direction: column;grid-column: 1 / -1;grid-row: 2 / 3}[part="controls"] [part="zoom-in"] {--button-radius-end-end: var(--helix-radii-none);--button-radius-end-start: var(--helix-radii-none)}[part="controls"] [part="zoom-out"] {--button-radius-start-end: var(--helix-radii-none);--button-radius-start-start: var(--helix-radii-none);--icon-button-border-width: 0 var(--helix-border-floating) var(--helix-border-floating);--icon-button-shadow: var(--helix-shadow-floating);margin-block-start: calc(-1 * var(--helix-space-2xs))}[part="controls"] [part="face-north"] ::slotted(*) {--icon-size: var(--helix-size-icon-md);block-size: var(--helix-size-icon-md);inline-size: var(--helix-size-icon-md)}[part="tilt"] {font-size: var(--helix-text-xs);font-weight: var(--helix-weight-semibold)}[part="tilt"][aria-pressed="true"] {--icon-button-background-color: var(--map-chosen-color, var(--helix-color-primary-surface));--icon-button-background-color-hover: var(--helix-color-primary-surface-hover);--icon-button-border-color: var(--map-chosen-color, var(--helix-color-primary-surface));--icon-button-foreground-color: var(--helix-color-foreground-on-primary)}[part="compass"] {border-radius: var(--helix-radii-sm);display: grid;grid-template-areas: "rotl   up     rotr" "start  north  end" ".      down   .";place-items: center}[part="rotate-left"] {grid-area: rotl}[part="rotate-right"] {grid-area: rotr}[part="face-north"] {grid-area: north}[part="compass"] > :not([part="face-north"]) {--icon-button-background-color: transparent;--icon-button-size: calc(var(--helix-size-control-sm) * 0.75);font-size: var(--helix-text-xs)}[part="compass"]:has(> :not([part="face-north"])) {background-color: var(--viewport-control-background-color, var(--helix-color-surface-overlay));box-shadow: var(--helix-shadow-floating), 0 0 0 var(--helix-border-floating) var(--helix-color-border)}[part="needle"] {block-size: var(--helix-size-icon-md);inline-size: var(--helix-size-icon-md);transform: rotate(var(--map-needle-turn, 0deg))}[part="needle"] [data-end="north"] {fill: var(--map-needle-north-color, var(--helix-color-danger))}[part="needle"] [data-end="south"] {fill: var(--map-needle-south-color, var(--helix-color-foreground-muted))}[part="layers-menu"] {font-family: inherit;font-size: inherit;background-color: var(--viewport-control-background-color, var(--helix-color-surface-overlay));border: var(--helix-border-floating) solid var(--helix-color-border);border-radius: var(--helix-radii-sm);box-shadow: var(--helix-shadow-floating);color: var(--helix-color-foreground);display: grid;gap: var(--map-layers-menu-gap, var(--helix-space-sm));inline-size: var(--map-layers-menu-inline-size, min(calc(var(--helix-size-control-lg) * 6), 70vw));inset-block-start: 0;inset-inline-end: calc(100% + var(--helix-space-2xs));max-block-size: calc(var(--map-block-size, 24rem) - var(--helix-space-sm) * 2);overflow-y: auto;padding: var(--map-layers-menu-padding, var(--helix-space-sm));position: absolute}:host([fill]) [part="layers-menu"] {max-block-size: calc(100cqb - var(--helix-space-sm) * 2)}[part="layers-menu"][hidden] {display: none}:host([controls-placement^="bottom"]) [part="layers-menu"] {inset-block: auto 0}:host([controls-placement$="start"]) [part="layers-menu"] {inset-inline: calc(100% + var(--helix-space-2xs)) auto}[part="map-types"] {display: grid;gap: var(--helix-space-xs);grid-template-columns: repeat(3, 1fr)}[part="map-type"] {color: var(--helix-color-foreground-muted);cursor: pointer;display: grid;font-family: var(--helix-font-sans);font-size: var(--helix-text-xs);gap: var(--helix-space-2xs);justify-items: center;position: relative}[part="map-type"] input {block-size: 1px;inline-size: 1px;margin: 0;opacity: 0;pointer-events: none;position: absolute}[part="map-type-preview"] {aspect-ratio: 4 / 3;background-color: var(--helix-color-surface-sunken);border: var(--helix-border-thick) solid transparent;border-radius: var(--helix-radii-sm);box-sizing: border-box;display: block;inline-size: 100%;object-fit: cover}[part="map-type"]:hover, [part="map-type"]:has(input:checked) {color: var(--helix-color-foreground)}[part="map-type"]:has(input:checked) [part="map-type-preview"] {border-color: var(--map-chosen-color, var(--helix-color-primary-surface))}[part="map-type"]:has(input:focus-visible) [part="map-type-preview"] {outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);outline-offset: var(--helix-size-focus-offset)}[part="layer-choices"] {display: grid;gap: var(--helix-space-xs);grid-template-columns: repeat(3, 1fr)}[part="layers-menu"] [part="layer-choice"] {align-content: start;cursor: pointer;font-family: var(--helix-font-sans);background-color: transparent;block-size: auto;border: 0;box-shadow: none;color: var(--helix-color-foreground-muted);display: grid;font-size: var(--helix-text-xs);gap: var(--helix-space-2xs);inline-size: auto;justify-items: center;padding: 0;text-align: center}[part="layers-menu"] [part="layer-choice"]:hover, [part="layers-menu"] [part="layer-choice"][aria-pressed="true"] {background-color: transparent;color: var(--helix-color-foreground)}[part="layers-menu"] [part="layer-choice"]:focus-visible {outline: none}[part="layer-icon"] {aspect-ratio: 4 / 3;background-color: var(--helix-color-surface-sunken);border: var(--helix-border-thick) solid transparent;border-radius: var(--helix-radii-sm);box-sizing: border-box;display: block;inline-size: 100%;padding: var(--helix-space-sm)}[part="layer-choice"][aria-pressed="true"] [part="layer-icon"] {border-color: var(--map-chosen-color, var(--helix-color-primary-surface))}[part="layer-choice"]:focus-visible [part="layer-icon"] {outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);outline-offset: var(--helix-size-focus-offset)}@media (forced-colors: active) {[part="tilt"][aria-pressed="true"] {background-color: Highlight;color: HighlightText;forced-color-adjust: none}[part="map-type"]:has(input:checked), [part="layers-menu"] [part="layer-choice"][aria-pressed="true"] {outline: var(--helix-border-thick) solid Highlight;outline-offset: var(--helix-space-2xs)}}`);
+export const styles = createSheet(`:host {display: contents}[part="region"] {background-color: var(--map-background-color, var(--helix-color-surface-sunken));block-size: var(--map-block-size, 24rem);border: var(--helix-border-thin) solid var(--map-border-color, var(--helix-color-border));border-radius: var(--map-radius, var(--helix-radii-sm));box-sizing: border-box;display: grid;grid-template-rows: auto 1fr auto auto;overflow: hidden;position: relative}:host([fill]) [part="region"] {block-size: auto;border: none;border-radius: 0;container-type: size;inset: 0;position: absolute}[part="viewport"] {isolation: isolate;min-block-size: 0;overflow: hidden;position: relative}[part="layers"] {block-size: 1px;clip-path: inset(50%);inline-size: 1px;margin: var(--helix-space-none);overflow: hidden;padding: var(--helix-space-none);position: absolute;white-space: nowrap}[part="viewport"] ::slotted(:not(helix-map-marker, helix-map-points, helix-map-position)) {block-size: 100%;inline-size: 100%}:host(:state(idle)) ::slotted([slot="header"]), :host(:state(idle)) ::slotted([slot="footer"]) {opacity: 0;transition: opacity var(--helix-duration-fast) var(--helix-easing-standard)}::slotted([slot="attribution"]) {border-block-start: var(--helix-border-thin) solid var(--map-attribution-border-color, var(--helix-color-border));color: var(--map-attribution-color, var(--helix-color-foreground-muted));display: block;font-size: var(--map-attribution-font-size, var(--helix-text-xs));padding: var(--helix-space-2xs) var(--helix-space-xs)}:host([credit-placement]) [part="attribution"] {inset-block-end: var(--helix-space-2xs);max-inline-size: calc(100% - var(--helix-space-2xs) * 2);position: absolute}:host([credit-placement="bottom-end"]) [part="attribution"] {inset-inline-end: var(--helix-space-2xs)}:host([credit-placement="bottom-start"]) [part="attribution"] {inset-inline-start: var(--helix-space-2xs)}:host([credit-placement]) ::slotted([slot="attribution"]) {backdrop-filter: var(--helix-material-backdrop);background-color: var(--helix-material-translucent);border-block-start: none;border-radius: var(--helix-radii-sm);color: var(--map-attribution-color, var(--helix-color-foreground-muted));overflow: hidden;padding: var(--helix-space-none) var(--helix-space-xs);text-overflow: ellipsis;white-space: nowrap}:host([credit-placement]) [part="attribution"]:is(:hover, :focus-within) ::slotted([slot="attribution"]) {white-space: normal}@media print {[part="controls"] {display: none}}[part="controls"] {align-items: center;display: flex;flex-direction: column;grid-column: 1 / -1;grid-row: 2 / 3}[part="controls"] [part="zoom-in"] {--button-radius-end-end: var(--helix-radii-none);--button-radius-end-start: var(--helix-radii-none)}[part="controls"] [part="zoom-out"] {--button-radius-start-end: var(--helix-radii-none);--button-radius-start-start: var(--helix-radii-none);--icon-button-border-width: 0 var(--helix-border-floating) var(--helix-border-floating);--icon-button-shadow: var(--helix-shadow-floating);margin-block-start: calc(-1 * var(--helix-space-2xs))}[part="controls"] [part="face-north"] ::slotted(*) {--icon-size: var(--helix-size-icon-md);block-size: var(--helix-size-icon-md);inline-size: var(--helix-size-icon-md)}[part="tilt"] {font-size: var(--helix-text-xs);font-weight: var(--helix-weight-semibold)}[part="tilt"][aria-pressed="true"] {--icon-button-background-color: var(--map-chosen-color, var(--helix-color-primary-surface));--icon-button-background-color-hover: var(--helix-color-primary-surface-hover);--icon-button-border-color: var(--map-chosen-color, var(--helix-color-primary-surface));--icon-button-foreground-color: var(--helix-color-foreground-on-primary)}[part="compass"] {border-radius: var(--helix-radii-sm);display: grid;grid-template-areas: "rotl   up     rotr" "start  north  end" ".      down   .";place-items: center}[part="rotate-left"] {grid-area: rotl}[part="rotate-right"] {grid-area: rotr}[part="face-north"] {grid-area: north}[part="compass"] > :not([part="face-north"]) {--icon-button-background-color: transparent;--icon-button-size: calc(var(--helix-size-control-sm) * 0.75);font-size: var(--helix-text-xs)}[part="compass"]:has(> [part]:not([part="face-north"])) {background-color: var(--viewport-control-background-color, var(--helix-color-surface-overlay));box-shadow: var(--helix-shadow-floating), 0 0 0 var(--helix-border-floating) var(--helix-color-border)}[part="needle"] {block-size: var(--helix-size-icon-md);inline-size: var(--helix-size-icon-md);transform: rotate(var(--map-needle-turn, 0deg))}[part="needle"] [data-end="north"] {fill: var(--map-needle-north-color, var(--helix-color-danger))}[part="needle"] [data-end="south"] {fill: var(--map-needle-south-color, var(--helix-color-foreground-muted))}[part="layers-menu"] {font-family: inherit;font-size: inherit;background-color: var(--viewport-control-background-color, var(--helix-color-surface-overlay));border: var(--helix-border-floating) solid var(--helix-color-border);border-radius: var(--helix-radii-sm);box-shadow: var(--helix-shadow-floating);color: var(--helix-color-foreground);display: grid;gap: var(--map-layers-menu-gap, var(--helix-space-sm));inline-size: var(--map-layers-menu-inline-size, min(calc(var(--helix-size-control-lg) * 6), 70vw));inset-block-start: 0;inset-inline-end: calc(100% + var(--helix-space-2xs));max-block-size: calc(var(--map-block-size, 24rem) - var(--helix-space-sm) * 2);overflow-y: auto;padding: var(--map-layers-menu-padding, var(--helix-space-sm));position: absolute}:host([fill]) [part="layers-menu"] {max-block-size: calc(100cqb - var(--helix-space-sm) * 2)}[part="layers-menu"][hidden] {display: none}:host([controls-placement^="bottom"]) [part="layers-menu"] {inset-block: auto 0}:host([controls-placement$="start"]) [part="layers-menu"] {inset-inline: calc(100% + var(--helix-space-2xs)) auto}[part="map-types"] {display: grid;gap: var(--helix-space-xs);grid-template-columns: repeat(3, 1fr)}[part="map-type"] {color: var(--helix-color-foreground-muted);cursor: pointer;display: grid;font-family: var(--helix-font-sans);font-size: var(--helix-text-xs);gap: var(--helix-space-2xs);justify-items: center;position: relative}[part="map-type"] input {block-size: 1px;inline-size: 1px;margin: 0;opacity: 0;pointer-events: none;position: absolute}[part="map-type-preview"] {aspect-ratio: 4 / 3;background-color: var(--helix-color-surface-sunken);border: var(--helix-border-thick) solid transparent;border-radius: var(--helix-radii-sm);box-sizing: border-box;display: block;inline-size: 100%;object-fit: cover}[part="map-type"]:hover, [part="map-type"]:has(input:checked) {color: var(--helix-color-foreground)}[part="map-type"]:has(input:checked) [part="map-type-preview"] {border-color: var(--map-chosen-color, var(--helix-color-primary-surface))}[part="map-type"]:has(input:focus-visible) [part="map-type-preview"] {outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);outline-offset: var(--helix-size-focus-offset)}[part="layer-choices"] {display: grid;gap: var(--helix-space-xs);grid-template-columns: repeat(3, 1fr)}[part="layers-menu"] [part="layer-choice"] {align-content: start;cursor: pointer;font-family: var(--helix-font-sans);background-color: transparent;block-size: auto;border: 0;box-shadow: none;color: var(--helix-color-foreground-muted);display: grid;font-size: var(--helix-text-xs);gap: var(--helix-space-2xs);inline-size: auto;justify-items: center;padding: 0;text-align: center}[part="layers-menu"] [part="layer-choice"]:hover, [part="layers-menu"] [part="layer-choice"][aria-pressed="true"] {background-color: transparent;color: var(--helix-color-foreground)}[part="layers-menu"] [part="layer-choice"]:focus-visible {outline: none}[part="layer-icon"] {aspect-ratio: 4 / 3;background-color: var(--helix-color-surface-sunken);border: var(--helix-border-thick) solid transparent;border-radius: var(--helix-radii-sm);box-sizing: border-box;display: block;inline-size: 100%;padding: var(--helix-space-sm)}[part="layer-choice"][aria-pressed="true"] [part="layer-icon"] {border-color: var(--map-chosen-color, var(--helix-color-primary-surface))}[part="layer-choice"]:focus-visible [part="layer-icon"] {outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);outline-offset: var(--helix-size-focus-offset)}@media (forced-colors: active) {[part="tilt"][aria-pressed="true"] {background-color: Highlight;color: HighlightText;forced-color-adjust: none}[part="map-type"]:has(input:checked), [part="layers-menu"] [part="layer-choice"][aria-pressed="true"] {outline: var(--helix-border-thick) solid Highlight;outline-offset: var(--helix-space-2xs)}}`);

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

@@ -2,6 +2,7 @@ import { type ViewportControlAxes } from '@fusion.dev/helix-core';
 import { HelixHeadlessMap } from '@fusion.dev/helix-headless/map';
 import type { CSSResultGroup } from 'lit';
 import '../../icon-button/index.js';
+import '../../tooltip/index.js';
 /**
  * @summary A frame around a map drawn by another library.
  *

package/dist/map/root/map-root.js

@@ -6,6 +6,7 @@ import { styles as liveStyles } from '../../shared/live/live.css.js';
 import { styles as viewportStyles } from '../../shared/viewport/viewport.css.js';
 import { styles } from './map-root.css.js';
 import '../../icon-button/index.js';
+import '../../tooltip/index.js';
 let HelixMap = class HelixMap extends HelixHeadlessMap {
     constructor() {
         super(...arguments);

package/dist/megamenu/root/megamenu-root.css.js

@@ -1,2 +1,2 @@
 import { createSheet } from '@fusion.dev/helix-core';
-export const styles = createSheet(`:host {display: inline-flex;position: relative}[part="indicator"] {align-items: flex-end;display: flex;inset-block: 0;inset-inline: 0;justify-content: center;pointer-events: none;position: absolute}[part="trigger"] {all: unset;box-sizing: border-box;align-items: center;border-radius: var(--megamenu-trigger-radius, var(--helix-radii-sm));color: var(--megamenu-trigger-color, var(--helix-color-foreground-muted));cursor: pointer;display: inline-flex;font-family: var(--helix-font-sans);font-size: var(--megamenu-trigger-font-size, var(--helix-text-sm));font-weight: var(--megamenu-trigger-font-weight, var(--helix-weight-medium));gap: var(--helix-space-2xs);min-block-size: var(--helix-size-control-tight);padding-inline: var(--megamenu-trigger-padding-inline, var(--helix-space-xs));transition: background-color var(--helix-duration-fast) var(--helix-easing-standard), color var(--helix-duration-fast) var(--helix-easing-standard)}[part="trigger"]:hover {color: var(--megamenu-trigger-hover-color, var(--helix-color-foreground))}[part="trigger"]:focus-visible {outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);outline-offset: var(--helix-size-focus-offset)}[part="trigger"][aria-expanded="true"] {background-color: var(--megamenu-trigger-open-background-color, color-mix(in oklab, var(--helix-color-foreground) 8%, transparent));color: var(--megamenu-trigger-open-color, var(--helix-color-foreground))}[part="surface"] {backdrop-filter: var(--megamenu-backdrop, none);background-color: var(--megamenu-background-color, var(--helix-color-background));border: var(--megamenu-border-width, var(--helix-border-thin)) solid light-dark(transparent, var(--helix-color-border));border-radius: var(--helix-radii-sm);box-shadow: var(--megamenu-shadow, var(--helix-shadow-floating));box-sizing: border-box;clip-path: inset(0 calc(var(--helix-space-xl) * -1) 100% calc(var(--helix-space-xl) * -1));display: grid;gap: var(--megamenu-gap, var(--helix-space-xl));grid-auto-columns: minmax(var(--megamenu-column-size, 15rem), 1fr);grid-auto-flow: column;inline-size: max-content;margin: var(--helix-space-none);max-inline-size: min(var(--megamenu-size, 52rem), calc(100% - var(--helix-space-xl) * 2));padding: var(--megamenu-padding, var(--helix-space-md));transition: clip-path var(--megamenu-duration, var(--helix-duration-slow)) var(--helix-easing-decelerate), display var(--megamenu-duration, var(--helix-duration-slow)) allow-discrete, overlay var(--megamenu-duration, var(--helix-duration-slow)) allow-discrete}[part="surface"]:popover-open {clip-path: inset(0 calc(var(--helix-space-xl) * -1) calc(var(--helix-space-xl) * -1) calc(var(--helix-space-xl) * -1))}@starting-style {[part="surface"]:popover-open {clip-path: inset(0 calc(var(--helix-space-xl) * -1) 100% calc(var(--helix-space-xl) * -1))}}:host(:not([variant="band"])) [part="surface"] {clip-path: inset(0 100% 100% calc(var(--helix-space-xl) * -1))}:host(:not([variant="band"])) [part="surface"]:popover-open {clip-path: inset(0 calc(var(--helix-space-xl) * -1) calc(var(--helix-space-xl) * -1) calc(var(--helix-space-xl) * -1))}@starting-style {:host(:not([variant="band"])) [part="surface"]:popover-open {clip-path: inset(0 100% 100% calc(var(--helix-space-xl) * -1))}}:host([variant="band"]) [part="surface"], :host(:state(narrow)) [part="surface"] {backdrop-filter: var(--megamenu-backdrop, none);background-color: var(--megamenu-background-color, var(--helix-color-background));border: none;border-radius: var(--helix-radii-none);box-shadow: var(--helix-shadow-md);clip-path: inset(0 0 100% 0);display: grid;grid-auto-flow: row;grid-template-columns: repeat(auto-fit, minmax(var(--megamenu-column-size, 15rem), 1fr));inline-size: auto;inset-block-start: var(--megamenu-top, 100%);inset-inline: 0;max-inline-size: none;padding-block: var(--helix-space-md) var(--helix-space-xl);padding-inline: max(var(--helix-space-xl), calc((100% - var(--megamenu-full-size, 80rem)) / 2));position: fixed}:host([variant="band"]) [part="surface"]:popover-open, :host(:state(narrow)) [part="surface"]:popover-open {clip-path: inset(0 0 calc(var(--helix-space-xl) * -1) 0)}@starting-style {:host([variant="band"]) [part="surface"]:popover-open, :host(:state(narrow)) [part="surface"]:popover-open {clip-path: inset(0 0 100% 0)}}:host(:state(narrow)) [part="surface"] {grid-auto-flow: row;grid-template-columns: 1fr;max-block-size: calc(100dvh - var(--megamenu-top, 0px) - var(--helix-space-xl));overflow-y: auto;overscroll-behavior: contain;padding-inline: var(--helix-space-md)}:host [part="surface"][hidden] {display: none}@media (prefers-reduced-motion: reduce) {[part="trigger"] {transition: none}[part="surface"] {clip-path: none;transition: display var(--helix-duration-instant) allow-discrete, overlay var(--helix-duration-instant) allow-discrete}}@media print {:host {display: none}}`);
+export const styles = createSheet(`:host {display: inline-flex;position: relative}[part="indicator"] {align-items: flex-end;display: flex;inset-block: 0;inset-inline: 0;justify-content: center;pointer-events: none;position: absolute}[part="trigger"] {all: unset;box-sizing: border-box;align-items: center;border-radius: var(--megamenu-trigger-radius, var(--helix-radii-sm));color: var(--megamenu-trigger-color, var(--helix-color-foreground-muted));cursor: pointer;display: inline-flex;font-family: var(--helix-font-sans);font-size: var(--megamenu-trigger-font-size, var(--helix-text-sm));font-weight: var(--megamenu-trigger-font-weight, var(--helix-weight-medium));gap: var(--helix-space-2xs);min-block-size: var(--helix-size-control-tight);padding-inline: var(--megamenu-trigger-padding-inline, var(--helix-space-xs));transition: background-color var(--helix-duration-fast) var(--helix-easing-standard), color var(--helix-duration-fast) var(--helix-easing-standard)}[part="trigger"]:hover {color: var(--megamenu-trigger-hover-color, var(--helix-color-foreground))}[part="trigger"]:focus-visible {outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);outline-offset: var(--helix-size-focus-offset)}[part="trigger"][aria-expanded="true"] {background-color: var(--megamenu-trigger-open-background-color, color-mix(in oklab, var(--helix-color-foreground) 8%, transparent));color: var(--megamenu-trigger-open-color, var(--helix-color-foreground))}[part="surface"] {backdrop-filter: var(--megamenu-backdrop, none);background-color: var(--megamenu-background-color, var(--helix-color-background));border: var(--megamenu-border-width, var(--helix-border-floating)) solid light-dark(transparent, var(--helix-color-border));border-radius: var(--helix-radii-sm);box-shadow: var(--megamenu-shadow, var(--helix-shadow-floating));box-sizing: border-box;clip-path: inset(0 calc(var(--helix-space-xl) * -1) 100% calc(var(--helix-space-xl) * -1));display: grid;gap: var(--megamenu-gap, var(--helix-space-xl));grid-auto-columns: minmax(var(--megamenu-column-size, 15rem), 1fr);grid-auto-flow: column;inline-size: max-content;margin: var(--helix-space-none);max-inline-size: min(var(--megamenu-size, 52rem), calc(100% - var(--helix-space-xl) * 2));padding: var(--megamenu-padding, var(--helix-space-md));transition: clip-path var(--megamenu-duration, var(--helix-duration-slow)) var(--helix-easing-decelerate), display var(--megamenu-duration, var(--helix-duration-slow)) allow-discrete, overlay var(--megamenu-duration, var(--helix-duration-slow)) allow-discrete}[part="surface"]:popover-open {clip-path: inset(0 calc(var(--helix-space-xl) * -1) calc(var(--helix-space-xl) * -1) calc(var(--helix-space-xl) * -1))}@starting-style {[part="surface"]:popover-open {clip-path: inset(0 calc(var(--helix-space-xl) * -1) 100% calc(var(--helix-space-xl) * -1))}}:host(:not([variant="band"])) [part="surface"] {clip-path: inset(0 100% 100% calc(var(--helix-space-xl) * -1))}:host(:not([variant="band"])) [part="surface"]:popover-open {clip-path: inset(0 calc(var(--helix-space-xl) * -1) calc(var(--helix-space-xl) * -1) calc(var(--helix-space-xl) * -1))}@starting-style {:host(:not([variant="band"])) [part="surface"]:popover-open {clip-path: inset(0 100% 100% calc(var(--helix-space-xl) * -1))}}:host([variant="band"]) [part="surface"], :host(:state(narrow)) [part="surface"] {backdrop-filter: var(--megamenu-backdrop, none);background-color: var(--megamenu-background-color, var(--helix-color-background));border: none;border-radius: var(--helix-radii-none);box-shadow: var(--helix-shadow-md);clip-path: inset(0 0 100% 0);display: grid;grid-auto-flow: row;grid-template-columns: repeat(auto-fit, minmax(var(--megamenu-column-size, 15rem), 1fr));inline-size: auto;inset-block-start: var(--megamenu-top, 100%);inset-inline: 0;max-inline-size: none;padding-block: var(--helix-space-md) var(--helix-space-xl);padding-inline: max(var(--helix-space-xl), calc((100% - var(--megamenu-full-size, 80rem)) / 2));position: fixed}:host([variant="band"]) [part="surface"]:popover-open, :host(:state(narrow)) [part="surface"]:popover-open {clip-path: inset(0 0 calc(var(--helix-space-xl) * -1) 0)}@starting-style {:host([variant="band"]) [part="surface"]:popover-open, :host(:state(narrow)) [part="surface"]:popover-open {clip-path: inset(0 0 100% 0)}}:host(:state(narrow)) [part="surface"] {grid-auto-flow: row;grid-template-columns: 1fr;max-block-size: calc(100dvh - var(--megamenu-top, 0px) - var(--helix-space-xl));overflow-y: auto;overscroll-behavior: contain;padding-inline: var(--helix-space-md)}:host [part="surface"][hidden] {display: none}@media (prefers-reduced-motion: reduce) {[part="trigger"] {transition: none}[part="surface"] {clip-path: none;transition: display var(--helix-duration-instant) allow-discrete, overlay var(--helix-duration-instant) allow-discrete}}@supports not (overlay: auto) {[part="surface"] {transition-behavior: normal}}@media print {:host {display: none}}`);

package/dist/megamenu/root/megamenu-root.d.ts

@@ -25,8 +25,8 @@ import type { CSSResultGroup } from 'lit';
  *   has no `material` property, so this and `--megamenu-background-color` set the panel's material.
  * @cssproperty --megamenu-background-color - The panel's fill.
  * @cssproperty --megamenu-border-width - The width of the panel's edge. Follows
- *   `--helix-border-floating`, which is `0` unless a theme changes it, so the panel stands out
- *   by its shadow.
+ *   `--helix-border-floating`, a hairline, which is drawn in dark mode only. Set it to `0` for
+ *   the shadow alone.
  * @cssproperty --megamenu-column-size - The minimum width of a column before the grid wraps.
  * @cssproperty --megamenu-duration - How long the panel takes to open and close.
  * @cssproperty --megamenu-full-size - The maximum width of the band's contents, which are centered in it.

package/dist/menu/item/menu-item.css.js

@@ -1,2 +1,2 @@
 import { createSheet } from '@fusion.dev/helix-core';
-export const styles = createSheet(`:host {display: block}[part="item"] {align-items: center;text-decoration: none;border-radius: var(--helix-radii-none);color: var(--helix-color-foreground);cursor: pointer;display: grid;font-size: var(--helix-text-xs);font-weight: var(--helix-weight-medium);grid-template-columns: var(--menu-item-start, 0px) minmax(0, 1fr) auto var(--menu-item-end, 0px);min-block-size: var(--helix-size-control);padding-inline: var(--helix-space-sm);transition: background-color var(--helix-duration-fast) var(--helix-easing-standard);user-select: none}[part="item"]:hover {background-color: var(--menu-item-hover-color, color-mix(in oklab, var(--helix-color-foreground) 8%, transparent))}:host(:state(highlighted)) [part="item"] {background-color: var(--menu-item-hover-color, color-mix(in oklab, var(--helix-color-foreground) 8%, transparent))}[part="item"]:focus-visible {outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);outline-offset: calc(var(--helix-size-focus-offset) * -1)}[part="item"][aria-disabled="true"] {cursor: not-allowed;opacity: 0.5}[part="start"] {--icon-size: var(--helix-size-icon);align-items: center;box-sizing: border-box;color: var(--helix-color-foreground-subtle);display: flex;justify-content: center;padding-inline-end: var(--helix-space-xs);min-block-size: var(--helix-size-icon)}[part="start"] {grid-column: 1}[part="item"] > slot:not([name]) {display: block;grid-column: 2;min-inline-size: 0}slot[name="description"] {color: var(--menu-item-description-color, var(--helix-color-foreground-muted));display: block;font-weight: var(--helix-weight-regular);grid-column: 2;grid-row: 2;min-inline-size: 0;padding-block-end: var(--helix-space-2xs)}slot[name="description"][data-empty] {display: none}[part="end"] {align-items: center;color: var(--menu-item-detail-color, var(--helix-color-foreground-muted));display: flex;gap: var(--helix-space-2xs);grid-column: 3;padding-inline-start: var(--helix-space-sm)}[part="end"][data-empty] {display: none}[part="mark"], slot[name="check"]::slotted(*), slot[name="chevron"]::slotted(*) {grid-column: 4;grid-row: 1}[part="start"][data-empty] {display: none}[part="mark"], slot[name="check"]::slotted(*), slot[name="chevron"]::slotted(*) {block-size: var(--helix-size-icon);inline-size: var(--helix-size-icon);justify-self: end}svg[part="mark"], slot[name="chevron"]::slotted(*) {color: var(--helix-color-foreground-subtle)}:host(:state(checked)) svg[part="mark"], slot[name="check"]::slotted(*) {color: var(--helix-color-foreground)}slot[name="submenu"] {display: contents}slot[name="submenu"]::slotted(helix-divider) {margin-block: var(--helix-space-2xs)}[part="surface"] {--menu-item-start: 0px;--menu-item-end: 0px;--_floating-background-color: var(--menu-background-color, var(--helix-color-surface-overlay));--_floating-border-color: var(--menu-border-color, var(--helix-color-border));--_floating-border-width: var(--menu-border-width, var(--helix-border-floating));--_floating-shadow: var(--menu-shadow, var(--helix-shadow-floating));max-block-size: var(--menu-max-block-size, var(--floating-available-block-size, none));min-inline-size: var(--menu-min-inline-size, 12rem);overflow-y: auto;padding-block: var(--helix-space-xs);padding-inline: var(--helix-space-none)}:host(:state(submenu-start)) [part="surface"] {--menu-item-start: calc(var(--helix-size-icon) + var(--helix-space-xs))}:host(:state(submenu-mark)) [part="surface"] {--menu-item-end: calc(var(--helix-size-icon) + var(--helix-space-xs))}[part="surface"][data-placement^="left"] {transform-origin: 100% 0}[part="surface"][data-placement^="right"] {transform-origin: 0 0}`);
+export const styles = createSheet(`:host {display: block}[part="item"] {align-items: center;text-decoration: none;border-radius: var(--helix-radii-none);color: var(--helix-color-foreground);cursor: pointer;display: grid;font-size: var(--helix-text-xs);font-weight: var(--helix-weight-medium);grid-template-columns: var(--menu-item-start, 0px) minmax(0, 1fr) auto var(--menu-item-end, 0px);min-block-size: var(--helix-size-control);padding-inline: var(--helix-space-sm);transition: background-color var(--helix-duration-fast) var(--helix-easing-standard);user-select: none}[part="item"]:hover {background-color: var(--menu-item-hover-color, color-mix(in oklab, var(--helix-color-foreground) 8%, transparent))}:host(:state(highlighted)) [part="item"] {background-color: var(--menu-item-hover-color, color-mix(in oklab, var(--helix-color-foreground) 8%, transparent))}[part="item"]:focus-visible {outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);outline-offset: calc(var(--helix-size-focus-offset) * -1)}[part="item"][aria-disabled="true"] {cursor: not-allowed;opacity: 0.5}[part="start"] {--icon-size: var(--helix-size-icon);align-items: center;box-sizing: border-box;color: var(--helix-color-foreground-subtle);display: flex;justify-content: center;padding-inline-end: var(--helix-space-xs);min-block-size: var(--helix-size-icon)}[part="start"] {grid-column: 1}[part="item"] > slot:not([name]) {display: block;grid-column: 2;min-inline-size: 0}slot[name="description"] {color: var(--menu-item-description-color, var(--helix-color-foreground-muted));display: block;font-weight: var(--helix-weight-regular);grid-column: 2;grid-row: 2;min-inline-size: 0}slot[name="description"][data-empty] {display: none}[part="item"]:has(> slot[name="description"]:not([data-empty])) {padding-block: var(--helix-space-xs)}[part="end"] {align-items: center;color: var(--menu-item-detail-color, var(--helix-color-foreground-muted));display: flex;gap: var(--helix-space-2xs);grid-column: 3;padding-inline-start: var(--helix-space-sm)}[part="end"][data-empty] {display: none}[part="mark"], slot[name="check"]::slotted(*), slot[name="chevron"]::slotted(*) {grid-column: 4;grid-row: 1}[part="start"][data-empty] {display: none}[part="mark"], slot[name="check"]::slotted(*), slot[name="chevron"]::slotted(*) {block-size: var(--helix-size-icon);inline-size: var(--helix-size-icon);justify-self: end}svg[part="mark"], slot[name="chevron"]::slotted(*) {color: var(--helix-color-foreground-subtle)}:host(:state(checked)) svg[part="mark"], slot[name="check"]::slotted(*) {color: var(--helix-color-foreground)}slot[name="submenu"] {display: contents}slot[name="submenu"]::slotted(helix-divider) {margin-block: var(--helix-space-2xs)}[part="surface"] {--menu-item-start: 0px;--menu-item-end: 0px;--_floating-background-color: var(--menu-background-color, var(--_menu-material-fill, var(--helix-color-surface-overlay)));backdrop-filter: var(--_menu-material-backdrop, none);--_floating-border-color: var(--menu-border-color, var(--helix-color-border));--_floating-border-width: var(--menu-border-width, var(--helix-border-floating));--_floating-shadow: var(--menu-shadow, var(--helix-shadow-floating));max-block-size: var(--menu-max-block-size, var(--floating-available-block-size, none));min-inline-size: var(--menu-min-inline-size, 12rem);overflow-y: auto;padding-block: var(--helix-space-xs);padding-inline: var(--helix-space-none)}:host(:state(submenu-start)) [part="surface"] {--menu-item-start: calc(var(--helix-size-icon) + var(--helix-space-xs))}:host(:state(submenu-mark)) [part="surface"] {--menu-item-end: calc(var(--helix-size-icon) + var(--helix-space-xs))}[part="surface"][data-placement^="left"] {transform-origin: 100% 0}[part="surface"][data-placement^="right"] {transform-origin: 0 0}`);

package/dist/menu/root/menu-root.css.js

@@ -1,2 +1,2 @@
 import { createSheet } from '@fusion.dev/helix-core';
-export const styles = createSheet(`:host {display: contents}[part="surface"] {--helix-size-control: var(--helix-size-control-sm);--helix-size-control-loose: calc(var(--helix-size-control) * 1.2);--helix-size-control-tight: calc(var(--helix-size-control) * 0.8);--helix-size-icon: var(--helix-size-icon-sm);--helix-size-icon-loose: calc(var(--helix-size-icon) * 1.2);--helix-size-icon-tight: calc(var(--helix-size-icon) * 0.8);--menu-item-start: 0px;--menu-item-end: 0px;max-block-size: var(--menu-max-block-size, var(--floating-available-block-size, none));overflow-y: auto;--_floating-background-color: var(--menu-background-color, var(--helix-color-surface-overlay));--_floating-border-color: var(--menu-border-color, var(--helix-color-border));--_floating-border-width: var(--menu-border-width, var(--helix-border-floating));--_floating-shadow: var(--menu-shadow, var(--helix-shadow-floating));min-inline-size: var(--menu-min-inline-size, 12rem);padding-block: var(--helix-space-xs);padding-inline: var(--helix-space-none)}:host(:state(start)) [part="surface"] {--menu-item-start: calc(var(--helix-size-icon) + var(--helix-space-xs))}:host(:state(mark)) [part="surface"] {--menu-item-end: calc(var(--helix-size-icon) + var(--helix-space-xs))}[part="surface"][data-placement^="left"] {transform-origin: 100% var(--floating-arrow-y, 50%)}[part="surface"][data-placement^="right"] {transform-origin: 0 var(--floating-arrow-y, 50%)}[part="header"] {align-items: center;border-block-end: var(--helix-border-thin) solid var(--helix-color-border);display: flex;gap: var(--helix-space-2xs);margin-block-end: var(--helix-space-2xs);padding: var(--helix-space-2xs) var(--helix-space-xs) var(--helix-space-xs)}[part="back"] {align-items: center;background: none;border: none;border-radius: var(--helix-radii-sm);color: var(--helix-color-foreground-muted);cursor: pointer;display: inline-flex;justify-content: center;block-size: calc(var(--helix-size-icon) + var(--helix-space-xs));inline-size: calc(var(--helix-size-icon) + var(--helix-space-xs));padding: var(--helix-space-none)}[part="back"] svg {block-size: var(--helix-size-icon);inline-size: var(--helix-size-icon)}[part="back"]:hover {background-color: color-mix(in oklab, var(--helix-color-foreground) 8%, transparent);color: var(--helix-color-foreground)}[part="back"]:focus-visible {outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);outline-offset: calc(var(--helix-size-focus-offset) * -1)}[part="title"] {color: var(--helix-color-foreground);font-size: var(--helix-text-xs);font-weight: var(--helix-weight-medium)}::slotted(helix-divider) {margin-block: var(--helix-space-2xs)}[part="surface"][data-drilled] slot::slotted(:not(helix-menu-item)) {display: none}:host([loading]) [part="surface"] {opacity: 0.5}@media print {:host {display: none}}`);
+export const styles = createSheet(`:host {display: contents}[part="surface"] {--helix-size-control: var(--helix-size-control-sm);--helix-size-control-loose: calc(var(--helix-size-control) * 1.2);--helix-size-control-tight: calc(var(--helix-size-control) * 0.8);--helix-size-icon: var(--helix-size-icon-sm);--helix-size-icon-loose: calc(var(--helix-size-icon) * 1.2);--helix-size-icon-tight: calc(var(--helix-size-icon) * 0.8);--menu-item-start: 0px;--menu-item-end: 0px;max-block-size: var(--menu-max-block-size, var(--floating-available-block-size, none));overflow-y: auto;--_floating-background-color: var(--menu-background-color, var(--helix-color-surface-overlay));--_floating-border-color: var(--menu-border-color, var(--helix-color-border));--_floating-border-width: var(--menu-border-width, var(--helix-border-floating));--_floating-shadow: var(--menu-shadow, var(--helix-shadow-floating));min-inline-size: var(--menu-min-inline-size, 12rem);padding-block: var(--helix-space-xs);padding-inline: var(--helix-space-none)}:host([material="glass"]) [part="surface"] {--_menu-material-fill: light-dark(var(--helix-material-translucent-strong), var(--helix-material-translucent));--_menu-material-backdrop: var(--menu-backdrop, var(--helix-material-backdrop));--_floating-background-color: var(--menu-background-color, var(--_menu-material-fill));backdrop-filter: var(--_menu-material-backdrop)}:host([material="frosted"]) [part="surface"] {--_menu-material-fill: var(--helix-material-translucent-strong);--_menu-material-backdrop: var(--menu-backdrop, blur(var(--helix-material-blur-lg)));--_floating-background-color: var(--menu-background-color, var(--_menu-material-fill));backdrop-filter: var(--_menu-material-backdrop)}:host(:state(start)) [part="surface"] {--menu-item-start: calc(var(--helix-size-icon) + var(--helix-space-xs))}:host(:state(mark)) [part="surface"] {--menu-item-end: calc(var(--helix-size-icon) + var(--helix-space-xs))}[part="surface"][data-placement^="left"] {transform-origin: 100% var(--floating-arrow-y, 50%)}[part="surface"][data-placement^="right"] {transform-origin: 0 var(--floating-arrow-y, 50%)}[part="header"] {align-items: center;border-block-end: var(--helix-border-thin) solid var(--helix-color-border);display: flex;gap: var(--helix-space-2xs);margin-block-end: var(--helix-space-2xs);padding: var(--helix-space-2xs) var(--helix-space-xs) var(--helix-space-xs)}[part="back"] {align-items: center;background: none;border: none;border-radius: var(--helix-radii-sm);color: var(--helix-color-foreground-muted);cursor: pointer;display: inline-flex;justify-content: center;block-size: calc(var(--helix-size-icon) + var(--helix-space-xs));inline-size: calc(var(--helix-size-icon) + var(--helix-space-xs));padding: var(--helix-space-none)}[part="back"] svg {block-size: var(--helix-size-icon);inline-size: var(--helix-size-icon)}[part="back"]:hover {background-color: color-mix(in oklab, var(--helix-color-foreground) 8%, transparent);color: var(--helix-color-foreground)}[part="back"]:focus-visible {outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);outline-offset: calc(var(--helix-size-focus-offset) * -1)}[part="title"] {color: var(--helix-color-foreground);font-size: var(--helix-text-xs);font-weight: var(--helix-weight-medium)}::slotted(helix-divider) {margin-block: var(--helix-space-2xs)}[part="surface"][data-drilled] slot::slotted(:not(helix-menu-item)) {display: none}:host([loading]) [part="surface"] {opacity: 0.5}@media print {:host {display: none}}`);

package/dist/menu/root/menu-root.d.ts

@@ -16,14 +16,32 @@ import type { CSSResultGroup } from 'lit';
  * @aliases Dropdown, Action menu
  * @documentation https://fusion.dev/helix/components/menu
  *
+ * @cssproperty --menu-backdrop - Filter applied behind a `frosted` or `glass` panel.
+ *   Follows the theme's material policy.
  * @cssproperty --menu-background-color - Fill of the surface.
  * @cssproperty --menu-border-color - Color of the panel's edge.
- * @cssproperty --menu-border-width - Width of the panel's edge. Defaults to `--helix-border-floating`, which is `0`, so the panel stands out by its shadow unless a theme sets a border.
+ * @cssproperty --menu-border-width - Width of the panel's edge. Defaults to `--helix-border-floating`, a hairline, so the panel has an edge as well as its shadow over a dark page. Set it to `0` for the shadow alone.
  * @cssproperty --menu-max-block-size - The tallest the menu grows before it scrolls.
  * @cssproperty --menu-min-inline-size - The narrowest the menu gets.
  * @cssproperty --menu-shadow - Shadow under the panel. Defaults to `--helix-shadow-floating`, so the panel keeps a shadow over any content below it.
  */
 export declare class HelixMenu extends HelixHeadlessMenu {
+    /**
+     * The panel's surface: `frosted` or `glass`.
+     *
+     * Absent is the opaque overlay surface. `glass` is the page's translucent
+     * ground over a blur, for a page whose surfaces are glass, so a panel opened
+     * over a glass window is not the one opaque slab on it. `frosted` is the same
+     * pair turned up, a ground that admits less and a heavier blur.
+     *
+     * The strength is the theme's: `--helix-material-translucent`,
+     * `--helix-material-translucent-strong` and `--helix-material-backdrop` are
+     * what the policy moves. `Drawer` and `Tooltip` carry the same attribute.
+     *
+     * **No `transparent`, deliberately.** A panel floating over arbitrary page
+     * content is only readable because it has a ground.
+     */
+    material?: 'frosted' | 'glass';
     static styles: CSSResultGroup;
 }
 declare global {

package/dist/menu/root/menu-root.js

@@ -1,6 +1,7 @@
 import { __decorate } from "tslib";
 import { customElement } from '@fusion.dev/helix-core';
 import { HelixHeadlessMenu } from '@fusion.dev/helix-headless/menu';
+import { property } from 'lit/decorators.js';
 import { styles as collectionStateStyles } from '../../shared/collection/state.css.js';
 import { styles as floatingEntranceStyles } from '../../shared/floating/entrance.css.js';
 import { styles as floatingPanelStyles } from '../../shared/floating/panel.css.js';
@@ -15,6 +16,9 @@ let HelixMenu = class HelixMenu extends HelixHeadlessMenu {
         styles,
     ]; }
 };
+__decorate([
+    property({ reflect: true })
+], HelixMenu.prototype, "material", void 0);
 HelixMenu = __decorate([
     customElement('helix-menu')
 ], HelixMenu);

package/dist/menu/section/menu-section.css.js

@@ -1,2 +1,2 @@
 import { createSheet } from '@fusion.dev/helix-core';
-export const styles = createSheet(`:host {display: block}[part="heading"] {color: var(--menu-section-heading-color, var(--helix-color-foreground-muted));font-size: var(--helix-text-xs);font-weight: var(--helix-weight-medium);line-height: var(--helix-leading-normal);padding-block: var(--helix-space-xs) var(--helix-space-2xs);padding-inline: var(--helix-space-sm);user-select: none}`);
+export const styles = createSheet(`:host {display: block;--menu-item-start: 0px}:host(:state(start)) {--menu-item-start: calc(var(--helix-size-icon) + var(--helix-space-xs))}[part="heading"] {color: var(--menu-section-heading-color, var(--helix-color-foreground-muted));font-size: var(--helix-text-xs);font-weight: var(--helix-weight-medium);line-height: var(--helix-leading-normal);padding-block: var(--helix-space-xs) var(--helix-space-2xs);padding-inline: var(--helix-space-sm);user-select: none}`);

package/dist/meter/index.d.ts

@@ -1 +1,2 @@
 export * from './root/meter-root.js';
+export * from './segment/meter-segment.js';

package/dist/meter/index.js

@@ -1 +1,2 @@
 export * from './root/meter-root.js';
+export * from './segment/meter-segment.js';

package/dist/meter/root/meter-root.css.js

@@ -1,2 +1,2 @@
 import { createSheet } from '@fusion.dev/helix-core';
-export const styles = createSheet(`:host {display: block}:host([show-value]) {align-items: center;column-gap: var(--meter-value-gap, var(--helix-space-sm));display: grid;grid-template-columns: 1fr auto;row-gap: var(--meter-label-gap, var(--helix-space-2xs))}slot[name="label"]::slotted(*) {color: var(--meter-label-color, var(--helix-color-foreground));display: block;font-size: var(--meter-label-size, var(--helix-text-sm));grid-column: 1 / -1;margin-block-end: var(--meter-label-gap, var(--helix-space-2xs))}:host([show-value]) slot[name="label"]::slotted(*) {margin-block-end: 0}:host([shape="arc"]) slot[name="label"]::slotted(*), :host([shape="ring"]) slot[name="label"]::slotted(*) {grid-column: 1;margin-block: 0}[part="live"] {block-size: 1px;clip-path: inset(50%);inline-size: 1px;margin: var(--helix-space-none);overflow: hidden;position: absolute;white-space: nowrap}[part="value"] {color: var(--meter-value-color, var(--helix-color-foreground-muted));font-family: var(--helix-font-sans);font-size: var(--meter-value-size, var(--helix-text-xs));font-variant-numeric: tabular-nums;min-inline-size: 3ch;text-align: end}[part="track"] {background-color: var(--meter-track-color, var(--helix-color-surface-sunken));block-size: var(--meter-size, var(--helix-size-meter));border-radius: var(--helix-radii-sm);inline-size: 100%;overflow: hidden;position: relative}[part~="indicator"] {--_meter-hue: var(--meter-color, var(--helix-color-primary));background-color: var(--_meter-hue);block-size: 100%;border-radius: inherit;inline-size: 100%;scale: var(--meter-fraction, 0) 1;transform-origin: left center;transition: background-color var(--meter-transition-duration, var(--helix-duration-normal)) var(--helix-easing-standard), scale var(--meter-transition-duration, var(--helix-duration-normal)) var(--helix-easing-decelerate)}:host(:dir(rtl)) [part~="indicator"] {transform-origin: right center}[part~="indicator"][data-band="good"] {--_meter-hue: var(--meter-color, var(--helix-color-success));background-color: var(--_meter-hue)}[part~="indicator"][data-band="fair"] {--_meter-hue: var(--meter-color, var(--helix-color-warning));background-color: var(--_meter-hue)}[part~="indicator"][data-band="poor"] {--_meter-hue: var(--meter-color, var(--helix-color-danger));background-color: var(--_meter-hue)}[part~="indicator"][data-beyond="over"] {border-end-end-radius: var(--helix-radii-none);border-start-end-radius: var(--helix-radii-none)}[part~="indicator"][data-beyond="under"] {border-end-start-radius: var(--helix-radii-none);border-start-start-radius: var(--helix-radii-none)}[part="tick"] {background-color: var(--meter-tick-color, var(--helix-color-background));block-size: 100%;inline-size: var(--helix-border-thick);inset-block-start: 0;inset-inline-start: var(--meter-at, 0%);position: absolute;translate: -50%;z-index: var(--helix-layer-raised)}:host([shape="arc"]), :host([shape="ring"]) {display: inline-grid;place-items: center;row-gap: var(--meter-label-gap, var(--helix-space-2xs))}:host([shape="arc"]) [part="track"], :host([shape="ring"]) [part="track"] {--_meter-stroke: var(--meter-ring-width, var(--helix-size-progress));background-color: transparent;block-size: var(--meter-ring-size, 6rem);border-radius: var(--helix-radii-none);grid-area: 1 / 1;inline-size: var(--meter-ring-size, 6rem)}:host([shape="ring"]) [part="track"] {rotate: -90deg}:host([shape="arc"]) [part="track"] {rotate: 135deg}:host([shape="arc"]) [part="groove"], :host([shape="arc"]) [part~="indicator"], :host([shape="arc"]) [part="tick"], :host([shape="ring"]) [part="groove"], :host([shape="ring"]) [part~="indicator"], :host([shape="ring"]) [part="tick"] {cx: 50%;cy: 50%;fill: none;r: calc(50% - var(--_meter-stroke) / 2);stroke-width: var(--_meter-stroke)}:host([shape="arc"]) [part="groove"], :host([shape="ring"]) [part="groove"] {stroke: var(--meter-track-color, var(--helix-color-surface-sunken));stroke-dasharray: var(--meter-sweep) 100}:host([shape="arc"]) [part~="indicator"], :host([shape="ring"]) [part~="indicator"] {--_meter-hue: var(--meter-color, var(--helix-color-foreground-muted));scale: none;stroke: var(--_meter-hue);stroke-dasharray: var(--meter-along) 100;stroke-linecap: round;transition: stroke-dasharray var(--meter-transition-duration, var(--helix-duration-normal)) var(--helix-easing-standard)}:host([shape="arc"]) [part="tick"], :host([shape="ring"]) [part="tick"] {inset-inline-start: auto;position: static;stroke: var(--meter-tick-color, var(--helix-color-background));stroke-dasharray: 1 99;stroke-dashoffset: calc(var(--meter-along) * -1)}:host([shape="arc"]) [part~="indicator"][data-band="good"], :host([shape="ring"]) [part~="indicator"][data-band="good"] {--_meter-hue: var(--meter-color, var(--helix-color-success));stroke: var(--_meter-hue)}:host([shape="arc"]) [part~="indicator"][data-band="fair"], :host([shape="ring"]) [part~="indicator"][data-band="fair"] {--_meter-hue: var(--meter-color, var(--helix-color-warning));stroke: var(--_meter-hue)}:host([shape="arc"]) [part~="indicator"][data-band="poor"], :host([shape="ring"]) [part~="indicator"][data-band="poor"] {--_meter-hue: var(--meter-color, var(--helix-color-danger));stroke: var(--_meter-hue)}:host([shape="arc"]) [part="value"], :host([shape="ring"]) [part="value"] {grid-area: 1 / 1}@media print {:host {print-color-adjust: exact}}:host([emphasis="subtle"]) [part~="indicator"] {background-color: color-mix(in oklab, var(--_meter-hue) 30%, var(--meter-track-color, var(--helix-color-surface-sunken)))}:host([emphasis="subtle"][shape="arc"]) [part~="indicator"], :host([emphasis="subtle"][shape="ring"]) [part~="indicator"] {stroke: color-mix(in oklab, var(--_meter-hue) 30%, var(--meter-track-color, var(--helix-color-surface-sunken)))}@media (forced-colors: active) {[part="track"] {outline: var(--helix-border-thin) solid CanvasText}[part~="indicator"] {background-color: Highlight;forced-color-adjust: none}[part~="indicator"][data-band] {background-color: var(--_meter-hue)}[part="tick"] {background-color: Canvas;forced-color-adjust: none}}`);
+export const styles = createSheet(`:host {display: block}:host([show-value]) {align-items: center;column-gap: var(--meter-value-gap, var(--helix-space-sm));display: grid;grid-template-columns: 1fr auto;row-gap: var(--meter-label-gap, var(--helix-space-2xs))}slot[name="label"]::slotted(*) {color: var(--meter-label-color, var(--helix-color-foreground));display: block;font-size: var(--meter-label-size, var(--helix-text-sm));grid-column: 1 / -1;margin-block-end: var(--meter-label-gap, var(--helix-space-2xs))}:host([show-value]) slot[name="label"]::slotted(*) {margin-block-end: 0}:host([shape="arc"]) slot[name="label"]::slotted(*), :host([shape="ring"]) slot[name="label"]::slotted(*) {grid-column: 1;margin-block: 0}[part="live"] {block-size: 1px;clip-path: inset(50%);inline-size: 1px;margin: var(--helix-space-none);overflow: hidden;position: absolute;white-space: nowrap}[part="value"] {color: var(--meter-value-color, var(--helix-color-foreground-muted));font-family: var(--helix-font-sans);font-size: var(--meter-value-size, var(--helix-text-xs));font-variant-numeric: tabular-nums;min-inline-size: 3ch;text-align: end}[part="track"] {background-color: var(--meter-track-color, var(--helix-color-surface-sunken));block-size: var(--meter-size, var(--helix-size-meter));border-radius: var(--helix-radii-sm);inline-size: 100%;overflow: hidden;position: relative}:host(:not([shape])) [part="track"] {display: flex}:host(:not([shape])) [part~="indicator"] {inset: 0;position: absolute}[part~="indicator"] {--_meter-hue: var(--meter-color, var(--helix-color-primary));background-color: var(--_meter-hue);block-size: 100%;border-radius: inherit;inline-size: 100%;scale: var(--meter-fraction, 0) 1;transform-origin: left center;transition: background-color var(--meter-transition-duration, var(--helix-duration-normal)) var(--helix-easing-standard), scale var(--meter-transition-duration, var(--helix-duration-normal)) var(--helix-easing-decelerate)}:host(:dir(rtl)) [part~="indicator"] {transform-origin: right center}[part~="indicator"][data-band="good"] {--_meter-hue: var(--meter-color, var(--helix-color-success));background-color: var(--_meter-hue)}[part~="indicator"][data-band="fair"] {--_meter-hue: var(--meter-color, var(--helix-color-warning));background-color: var(--_meter-hue)}[part~="indicator"][data-band="poor"] {--_meter-hue: var(--meter-color, var(--helix-color-danger));background-color: var(--_meter-hue)}[part~="indicator"][data-beyond="over"] {border-end-end-radius: var(--helix-radii-none);border-start-end-radius: var(--helix-radii-none)}[part~="indicator"][data-beyond="under"] {border-end-start-radius: var(--helix-radii-none);border-start-start-radius: var(--helix-radii-none)}[part="tick"] {background-color: var(--meter-tick-color, var(--helix-color-background));block-size: 100%;inline-size: var(--helix-border-thick);inset-block-start: 0;inset-inline-start: var(--meter-at, 0%);position: absolute;translate: -50%;z-index: var(--helix-layer-raised)}:host([shape="arc"]), :host([shape="ring"]) {display: inline-grid;place-items: center;row-gap: var(--meter-label-gap, var(--helix-space-2xs))}:host([shape="arc"]) [part="track"], :host([shape="ring"]) [part="track"] {--_meter-stroke: var(--meter-ring-width, var(--helix-size-progress));background-color: transparent;block-size: var(--meter-ring-size, 6rem);border-radius: var(--helix-radii-none);grid-area: 1 / 1;inline-size: var(--meter-ring-size, 6rem)}:host([shape="ring"]) [part="track"] {rotate: -90deg}:host([shape="arc"]) [part="track"] {rotate: 135deg}:host([shape="arc"]) [part="groove"], :host([shape="arc"]) [part~="indicator"], :host([shape="arc"]) [part="tick"], :host([shape="ring"]) [part="groove"], :host([shape="ring"]) [part~="indicator"], :host([shape="ring"]) [part="tick"] {cx: 50%;cy: 50%;fill: none;r: calc(50% - var(--_meter-stroke) / 2);stroke-width: var(--_meter-stroke)}:host([shape="arc"]) [part="groove"], :host([shape="ring"]) [part="groove"] {stroke: var(--meter-track-color, var(--helix-color-surface-sunken));stroke-dasharray: var(--meter-sweep) 100}:host([shape="arc"]) [part~="indicator"], :host([shape="ring"]) [part~="indicator"] {--_meter-hue: var(--meter-color, var(--helix-color-foreground-muted));scale: none;stroke: var(--_meter-hue);stroke-dasharray: var(--meter-along) 100;stroke-linecap: round;transition: stroke-dasharray var(--meter-transition-duration, var(--helix-duration-normal)) var(--helix-easing-standard)}:host([shape="arc"]) [part="tick"], :host([shape="ring"]) [part="tick"] {inset-inline-start: auto;position: static;stroke: var(--meter-tick-color, var(--helix-color-background));stroke-dasharray: 1 99;stroke-dashoffset: calc(var(--meter-along) * -1)}:host([shape="arc"]) [part~="indicator"][data-band="good"], :host([shape="ring"]) [part~="indicator"][data-band="good"] {--_meter-hue: var(--meter-color, var(--helix-color-success));stroke: var(--_meter-hue)}:host([shape="arc"]) [part~="indicator"][data-band="fair"], :host([shape="ring"]) [part~="indicator"][data-band="fair"] {--_meter-hue: var(--meter-color, var(--helix-color-warning));stroke: var(--_meter-hue)}:host([shape="arc"]) [part~="indicator"][data-band="poor"], :host([shape="ring"]) [part~="indicator"][data-band="poor"] {--_meter-hue: var(--meter-color, var(--helix-color-danger));stroke: var(--_meter-hue)}:host([shape="arc"]) [part="value"], :host([shape="ring"]) [part="value"] {grid-area: 1 / 1}@media print {:host {print-color-adjust: exact}}:host([emphasis="subtle"]) [part~="indicator"] {background-color: color-mix(in oklab, var(--_meter-hue) 30%, var(--meter-track-color, var(--helix-color-surface-sunken)))}:host([emphasis="subtle"][shape="arc"]) [part~="indicator"], :host([emphasis="subtle"][shape="ring"]) [part~="indicator"] {stroke: color-mix(in oklab, var(--_meter-hue) 30%, var(--meter-track-color, var(--helix-color-surface-sunken)))}@media (forced-colors: active) {[part="track"] {outline: var(--helix-border-thin) solid CanvasText}[part~="indicator"] {background-color: Highlight;forced-color-adjust: none}[part~="indicator"][data-band] {background-color: var(--_meter-hue)}[part="tick"] {background-color: Canvas;forced-color-adjust: none}}`);

package/dist/meter/segment/meter-segment.css.d.ts

@@ -0,0 +1 @@
+export declare const styles: import("lit").CSSResult;

package/dist/meter/segment/meter-segment.css.js

@@ -0,0 +1,2 @@
+import { createSheet } from '@fusion.dev/helix-core';
+export const styles = createSheet(`:host {display: contents}[part="fill"] {background-color: var(--meter-segment-color, var(--_meter-segment-hue, var(--helix-color-series-1)));block-size: 100%;box-sizing: border-box;flex: 0 0 calc(var(--meter-segment-value, 0) / var(--meter-span, 1) * 100%);transition: flex-basis var(--meter-transition-duration, var(--helix-duration-normal)) var(--helix-easing-decelerate)}:host(:nth-of-type(1)) {--_meter-segment-hue: var(--helix-color-series-1)}:host(:nth-of-type(2)) {--_meter-segment-hue: var(--helix-color-series-2)}:host(:nth-of-type(3)) {--_meter-segment-hue: var(--helix-color-series-3)}:host(:nth-of-type(4)) {--_meter-segment-hue: var(--helix-color-series-4)}:host(:nth-of-type(5)) {--_meter-segment-hue: var(--helix-color-series-5)}:host(:nth-of-type(6)) {--_meter-segment-hue: var(--helix-color-series-6)}:host(:nth-of-type(7)) {--_meter-segment-hue: var(--helix-color-series-7)}:host(:nth-of-type(8)) {--_meter-segment-hue: var(--helix-color-series-8)}:host(:nth-of-type(9)) {--_meter-segment-hue: var(--helix-color-series-9)}:host(:nth-of-type(10)) {--_meter-segment-hue: var(--helix-color-series-10)}:host(:nth-of-type(11)) {--_meter-segment-hue: var(--helix-color-series-11)}:host([tone="accent"]) {--_meter-segment-hue: var(--helix-color-accent)}:host([tone="danger"]) {--_meter-segment-hue: var(--helix-color-danger)}:host([tone="info"]) {--_meter-segment-hue: var(--helix-color-info)}:host([tone="neutral"]) {--_meter-segment-hue: var(--helix-color-foreground-subtle)}:host([tone="primary"]) {--_meter-segment-hue: var(--helix-color-primary)}:host([tone="success"]) {--_meter-segment-hue: var(--helix-color-success)}:host([tone="warning"]) {--_meter-segment-hue: var(--helix-color-warning)}:host(:not(:first-of-type)) [part="fill"] {box-shadow: inset var(--helix-border-thin) 0 0 var(--meter-segment-gap-color, var(--helix-color-background))}[part="fill"] {min-inline-size: min(3px, calc(var(--meter-segment-value, 0) * 1000px))}@media (prefers-reduced-motion: reduce) {[part="fill"] {transition: none}}@media (forced-colors: active) {[part="fill"] {background-color: CanvasText;box-shadow: inset var(--helix-border-thin) 0 0 Canvas}}`);

package/dist/meter/segment/meter-segment.d.ts

@@ -0,0 +1,39 @@
+import { HelixHeadlessMeterSegment } from '@fusion.dev/helix-headless/meter';
+import type { CSSResultGroup } from 'lit';
+/**
+ * @summary One share of a meter's whole, drawn as a slice of its bar.
+ *
+ * @description
+ * Each segment takes the next color in the chart series, in the order written, so
+ * two of them are told apart without being given a color. A `tone` is what a
+ * segment means, and takes the place of its turn. A hairline in the track's ground
+ * sits between neighbors, so the boundary is there for a reader who cannot tell
+ * two of the colors apart.
+ *
+ * Write the segments inside a meter, and the page imports the family beside it:
+ *
+ * ```js
+ * import '@fusion.dev/helix/meter'
+ * ```
+ *
+ * @since 0.1.0
+ * @status experimental
+ * @category feedback
+ * @groups charts
+ * @documentation https://fusion.dev/helix/components/meter
+ *
+ * @csspart fill - The slice of the bar the segment takes.
+ *
+ * @cssproperty --meter-segment-color - The slice's color. Overrides the series and the tone.
+ * @cssproperty --meter-segment-gap-color - The color of the hairline between neighbors.
+ *
+ * @replaces meter-segment
+ */
+export declare class HelixMeterSegment extends HelixHeadlessMeterSegment {
+    static styles: CSSResultGroup;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'helix-meter-segment': HelixMeterSegment;
+    }
+}

package/dist/meter/segment/meter-segment.js

@@ -0,0 +1,11 @@
+import { __decorate } from "tslib";
+import { customElement } from '@fusion.dev/helix-core';
+import { HelixHeadlessMeterSegment } from '@fusion.dev/helix-headless/meter';
+import { styles } from './meter-segment.css.js';
+let HelixMeterSegment = class HelixMeterSegment extends HelixHeadlessMeterSegment {
+    static { this.styles = styles; }
+};
+HelixMeterSegment = __decorate([
+    customElement('helix-meter-segment')
+], HelixMeterSegment);
+export { HelixMeterSegment };

package/dist/popover/root/popover-root.css.js

@@ -1,2 +1,2 @@
 import { createSheet } from '@fusion.dev/helix-core';
-export const styles = createSheet(`:host {display: contents}[part="surface"] {overflow: visible;background-color: var(--helix-color-surface-overlay);border: var(--popover-border-width, var(--helix-border-floating)) solid var(--popover-border-color, var(--helix-color-border));--_popover-edge: var(--popover-border-width, var(--helix-border-floating)) solid var(--popover-border-color, var(--helix-color-border));border-radius: var(--helix-radii-sm);box-shadow: var(--popover-shadow, var(--helix-shadow-floating));box-sizing: border-box;color: var(--helix-color-foreground);inset: auto;margin: var(--helix-space-none);max-inline-size: calc(100vw - var(--helix-space-lg));padding: var(--helix-space-none);inline-size: var(--popover-inline-size, max-content)}[part="surface"]:not(:popover-open) {display: none}[part="surface"] {--_travel: calc(var(--helix-space-2xs) * -1);--_popover-from: 0.96;opacity: 0;transform: translateY(var(--_travel));scale: var(--_popover-from);transition: opacity var(--helix-duration-fast) var(--helix-easing-standard), scale var(--helix-duration-fast) var(--helix-easing-emphasized), transform var(--helix-duration-fast) var(--helix-easing-emphasized), display var(--helix-duration-fast) allow-discrete, overlay var(--helix-duration-fast) allow-discrete}[part="surface"][data-placement^="top"] {--_travel: var(--helix-space-2xs)}[part="surface"][data-placed] {opacity: 1;scale: 1;transform: none}[part="surface"][data-placement^="top"] {transform-origin: var(--floating-arrow-x, 50%) 100%}[part="surface"][data-placement^="bottom"] {transform-origin: var(--floating-arrow-x, 50%) 0}[part="surface"][data-placement^="left"] {transform-origin: 100% var(--floating-arrow-y, 50%)}[part="surface"][data-placement^="right"] {transform-origin: 0 var(--floating-arrow-y, 50%)}@media (prefers-reduced-motion: reduce) {[part="surface"], [part="surface"][data-placed] {scale: 1;transform: none;transition: none}}[part="content"] {max-block-size: var(--popover-max-block-size, var(--floating-available-block-size, none));overflow: auto;padding: var(--popover-padding, var(--helix-space-md))}:host([separation="plain"]) [part="content"] {padding: var(--popover-padding, var(--helix-space-none))}[part="surface"]:focus, [part="surface"]:focus-visible {outline: none}[part~="arrow"] {background-color: var(--helix-color-surface-overlay);block-size: var(--popover-arrow-size, 0.5rem);inline-size: var(--popover-arrow-size, 0.5rem);position: absolute;rotate: 45deg}[part="surface"][data-placement^="bottom"] [part~="arrow"] {border-left: var(--_popover-edge);border-top: var(--_popover-edge)}[part="surface"][data-placement^="top"] [part~="arrow"] {border-bottom: var(--_popover-edge);border-right: var(--_popover-edge)}[part="surface"][data-placement^="right"] [part~="arrow"] {border-bottom: var(--_popover-edge);border-left: var(--_popover-edge)}[part="surface"][data-placement^="left"] [part~="arrow"] {border-right: var(--_popover-edge);border-top: var(--_popover-edge)}@media print {:host {display: none}}`);
+export const styles = createSheet(`:host {display: contents}[part="surface"] {overflow: visible;background-color: var(--popover-background-color, var(--helix-color-surface-overlay));border: var(--popover-border-width, var(--helix-border-floating)) solid var(--popover-border-color, var(--helix-color-border));--_popover-edge: var(--popover-border-width, var(--helix-border-floating)) solid var(--popover-border-color, var(--helix-color-border));border-radius: var(--helix-radii-sm);box-shadow: var(--popover-shadow, var(--helix-shadow-floating));box-sizing: border-box;color: var(--helix-color-foreground);inset: auto;margin: var(--helix-space-none);max-inline-size: calc(100vw - var(--helix-space-lg));padding: var(--helix-space-none);inline-size: var(--popover-inline-size, max-content)}[part="surface"]:not(:popover-open) {display: none}[part="surface"] {--_travel: calc(var(--helix-space-2xs) * -1);--_popover-from: 0.96;opacity: 0;transform: translateY(var(--_travel));scale: var(--_popover-from);transition: opacity var(--helix-duration-fast) var(--helix-easing-standard), scale var(--helix-duration-fast) var(--helix-easing-emphasized), transform var(--helix-duration-fast) var(--helix-easing-emphasized), display var(--helix-duration-fast) allow-discrete, overlay var(--helix-duration-fast) allow-discrete}[part="surface"][data-placement^="top"] {--_travel: var(--helix-space-2xs)}[part="surface"][data-placed] {opacity: 1;scale: 1;transform: none}[part="surface"][data-placement^="top"] {transform-origin: var(--floating-arrow-x, 50%) 100%}[part="surface"][data-placement^="bottom"] {transform-origin: var(--floating-arrow-x, 50%) 0}[part="surface"][data-placement^="left"] {transform-origin: 100% var(--floating-arrow-y, 50%)}[part="surface"][data-placement^="right"] {transform-origin: 0 var(--floating-arrow-y, 50%)}@media (prefers-reduced-motion: reduce) {[part="surface"], [part="surface"][data-placed] {scale: 1;transform: none;transition: none}}[part="content"] {max-block-size: var(--popover-max-block-size, var(--floating-available-block-size, none));overflow: auto;padding: var(--popover-padding, var(--helix-space-md))}:host([separation="plain"]) [part="content"] {padding: var(--popover-padding, var(--helix-space-none))}[part="surface"]:focus, [part="surface"]:focus-visible {outline: none}[part~="arrow"] {background-color: var(--popover-background-color, var(--helix-color-surface-overlay));block-size: var(--popover-arrow-size, 0.5rem);inline-size: var(--popover-arrow-size, 0.5rem);position: absolute;rotate: 45deg}[part="surface"][data-placement^="bottom"] [part~="arrow"] {border-left: var(--_popover-edge);border-top: var(--_popover-edge)}[part="surface"][data-placement^="top"] [part~="arrow"] {border-bottom: var(--_popover-edge);border-right: var(--_popover-edge)}[part="surface"][data-placement^="right"] [part~="arrow"] {border-bottom: var(--_popover-edge);border-left: var(--_popover-edge)}[part="surface"][data-placement^="left"] [part~="arrow"] {border-right: var(--_popover-edge);border-top: var(--_popover-edge)}:host([material="glass"]) [part="surface"], :host([material="glass"]) [part~="arrow"] {backdrop-filter: var(--popover-backdrop, var(--helix-material-backdrop));background-color: var(--popover-background-color, light-dark(var(--helix-material-translucent-strong), var(--helix-material-translucent)))}:host([material="frosted"]) [part="surface"], :host([material="frosted"]) [part~="arrow"] {backdrop-filter: var(--popover-backdrop, blur(var(--helix-material-blur-lg)));background-color: var(--popover-background-color, var(--helix-material-translucent-strong))}@supports not (overlay: auto) {[part="surface"] {transition-behavior: normal}}@media print {:host {display: none}}`);

package/dist/popover/root/popover-root.d.ts

@@ -19,10 +19,12 @@ import type { CSSResultGroup } from 'lit';
  * @documentation https://fusion.dev/helix/components/popover
  *
  * @cssproperty --popover-arrow-size - Size of the point drawn with `arrow`. Tooltip's point is the same size.
+ * @cssproperty --popover-backdrop - Filter applied behind a `frosted` or `glass` panel.
+ *   Follows the theme's material policy.
+ * @cssproperty --popover-background-color - Fill of the surface.
  * @cssproperty --popover-border-color - Color of the panel's edge.
  * @cssproperty --popover-border-width - Width of the panel's edge. Defaults to
- *   `--helix-border-floating`, which is `0`, so the panel stands out by its shadow unless
- *   your theme sets a width.
+ *   `--helix-border-floating`, a hairline, so the panel has an edge as well as its shadow over a dark page. Set it to `0` for the shadow alone.
  * @cssproperty --popover-inline-size - Width of the panel.
  * @cssproperty --popover-max-block-size - Maximum height of the panel before it scrolls.
  * @cssproperty --popover-padding - Space between the panel's edge and its contents.
@@ -30,6 +32,22 @@ import type { CSSResultGroup } from 'lit';
  *   `--helix-shadow-floating`, because the panel can sit over any content.
  */
 export declare class HelixPopover extends HelixHeadlessPopover {
+    /**
+     * The panel's surface: `frosted` or `glass`.
+     *
+     * Absent is the opaque overlay surface. `glass` is the page's translucent
+     * ground over a blur, for a page whose surfaces are glass, so a panel opened
+     * over a glass window is not the one opaque slab on it. `frosted` is the same
+     * pair turned up, a ground that admits less and a heavier blur.
+     *
+     * The strength is the theme's: `--helix-material-translucent`,
+     * `--helix-material-translucent-strong` and `--helix-material-backdrop` are
+     * what the policy moves. `Drawer` and `Tooltip` carry the same attribute.
+     *
+     * **No `transparent`, deliberately.** A panel floating over arbitrary page
+     * content is only readable because it has a ground.
+     */
+    material?: 'frosted' | 'glass';
     /**
      * How the panel is set apart from the content under it.
      *