@fusion.dev/helix 0.218.0 → 0.220.0

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

@@ -1,2 +1,2 @@
 import { createSheet } from '@fusion.dev/helix-core';
-export const styles = createSheet(`:host {display: contents}[part="surface"] {background-color: var(--dialog-background-color, var(--helix-color-surface-overlay));border: var(--dialog-border-width, var(--helix-border-floating)) solid var(--dialog-border-color, var(--helix-color-border));border-radius: var(--dialog-radius, var(--helix-radii-sm));box-shadow: var(--dialog-shadow, var(--helix-shadow-floating));box-sizing: border-box;color: var(--dialog-color, var(--helix-color-foreground));display: flex;flex-direction: column;gap: var(--helix-space-md);inline-size: min(var(--dialog-inline-size, 28rem), calc(100vw - var(--helix-space-xl)));max-block-size: calc(100dvh - var(--helix-space-xl));overflow-y: auto;padding: var(--dialog-padding, var(--helix-space-lg))}[part="surface"]:not([open]) {display: none}:host([size="sm"]) [part="surface"] {--dialog-inline-size: 22rem}:host([size="md"]) [part="surface"] {--dialog-inline-size: 28rem}:host([size="lg"]) [part="surface"] {--dialog-inline-size: 44rem}:host([size="full"]) [part="surface"] {--dialog-inline-size: 100vw}[part="surface"]:focus, [part="surface"]:focus-visible {outline: none}:host {--_dialog-scrim: var(--helix-color-overlay)}[part="surface"]::backdrop {background-color: var(--dialog-scrim, var(--_dialog-scrim))}::slotted([slot="header"]) {color: var(--helix-color-foreground);font-family: var(--helix-font-sans);font-size: var(--helix-text-xl);font-weight: var(--helix-weight-semibold);letter-spacing: var(--helix-tracking-tight);line-height: var(--helix-leading-tight);margin: var(--helix-space-none)}::slotted([slot="footer"]) {display: flex;gap: var(--helix-space-xs);justify-content: flex-start}[part="surface"] {opacity: 0;transition: opacity var(--helix-duration-normal) var(--helix-easing-standard), translate var(--helix-duration-normal) var(--helix-easing-decelerate), display var(--helix-duration-normal) allow-discrete, overlay var(--helix-duration-normal) allow-discrete;translate: 0 var(--dialog-rise, var(--helix-space-lg))}[part="surface"][open] {opacity: 1;translate: 0 0}@starting-style {[part="surface"][open] {opacity: 0;translate: 0 var(--dialog-rise, var(--helix-space-lg))}}[part="surface"]::backdrop {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="surface"][open]::backdrop {opacity: 1}@starting-style {[part="surface"][open]::backdrop {opacity: 0}}@media (width < 30rem) {[part="surface"] {margin-block-end: var(--helix-space-none);margin-block-start: auto;inline-size: 100vw;max-inline-size: 100vw;max-block-size: calc(100dvh - var(--helix-space-3xl));border-start-start-radius: var(--helix-radii-sm);border-start-end-radius: var(--helix-radii-sm);border-end-start-radius: var(--helix-radii-none);border-end-end-radius: var(--helix-radii-none);translate: 0 100%}@starting-style {[part="surface"][open] {translate: 0 100%}}}[part="surface"][data-refused] {animation: helix-dialog-refuse var(--helix-duration-normal) var(--helix-easing-emphasized)}@keyframes helix-dialog-refuse {50% {scale: 1.02}}@media (prefers-reduced-motion: reduce) {[part="surface"], [part="surface"]::backdrop {transition: none}[part="surface"][data-refused] {animation: none}}::slotted([slot="icon"]) {block-size: var(--dialog-icon-size, calc(var(--helix-size-icon-lg) * 2));display: block;inline-size: var(--dialog-icon-size, calc(var(--helix-size-icon-lg) * 2))}:host([text-align="center"]) [part="surface"] {text-align: center}:host([text-align="center"]) ::slotted([slot="footer"]) {justify-content: center}:host([text-align="center"]) ::slotted([slot="icon"]) {margin-inline: auto}[part="dismiss"] {all: unset;box-sizing: border-box;position: absolute;inset-block-start: calc(var(--dialog-padding, var(--helix-space-lg)) + (var(--helix-text-xl) * 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 {display: contents}[part="surface"] {background-color: var(--dialog-background-color, var(--helix-color-surface-overlay));border: var(--dialog-border-width, var(--helix-border-floating)) solid var(--dialog-border-color, var(--helix-color-border));border-radius: var(--dialog-radius, var(--helix-radii-sm));box-shadow: var(--dialog-shadow, var(--helix-shadow-floating));box-sizing: border-box;color: var(--dialog-color, var(--helix-color-foreground));display: flex;flex-direction: column;gap: var(--helix-space-md);inline-size: min(var(--dialog-inline-size, 28rem), calc(100vw - var(--helix-space-xl)));max-block-size: calc(100dvh - var(--helix-space-xl));overflow-y: auto;padding: var(--dialog-padding, var(--helix-space-lg))}[part="surface"]:not([open]) {display: none}:host([size="sm"]) [part="surface"] {--dialog-inline-size: 22rem}:host([size="md"]) [part="surface"] {--dialog-inline-size: 28rem}:host([size="lg"]) [part="surface"] {--dialog-inline-size: 44rem}:host([size="full"]) [part="surface"] {--dialog-inline-size: 100vw}[part="surface"]:focus, [part="surface"]:focus-visible {outline: none}:host {--_dialog-scrim: var(--helix-color-overlay)}[part="surface"]::backdrop {background-color: var(--dialog-scrim, var(--_dialog-scrim))}::slotted([slot="header"]) {color: var(--helix-color-foreground);font-family: var(--helix-font-sans);font-size: var(--helix-text-xl);font-weight: var(--helix-weight-semibold);letter-spacing: var(--helix-tracking-tight);line-height: var(--helix-leading-tight);margin: var(--helix-space-none)}::slotted([slot="footer"]) {display: flex;gap: var(--helix-space-xs);justify-content: flex-start}[part="surface"] {opacity: 0;transition: opacity var(--helix-duration-normal) var(--helix-easing-standard), translate var(--helix-duration-normal) var(--helix-easing-decelerate), display var(--helix-duration-normal) allow-discrete, overlay var(--helix-duration-normal) allow-discrete;translate: 0 var(--dialog-rise, var(--helix-space-lg))}[part="surface"][open] {opacity: 1;translate: 0 0}@starting-style {[part="surface"][open] {opacity: 0;translate: 0 var(--dialog-rise, var(--helix-space-lg))}}[part="surface"]::backdrop {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="surface"][open]::backdrop {opacity: 1}@starting-style {[part="surface"][open]::backdrop {opacity: 0}}@media (width < 30rem) {[part="surface"] {margin-block-end: var(--helix-space-none);margin-block-start: auto;inline-size: 100vw;max-inline-size: 100vw;max-block-size: calc(100dvh - var(--helix-space-3xl));border-start-start-radius: var(--helix-radii-sm);border-start-end-radius: var(--helix-radii-sm);border-end-start-radius: var(--helix-radii-none);border-end-end-radius: var(--helix-radii-none);translate: 0 100%}@starting-style {[part="surface"][open] {translate: 0 100%}}}[part="surface"][data-refused] {animation: helix-dialog-refuse var(--helix-duration-normal) var(--helix-easing-emphasized)}@keyframes helix-dialog-refuse {50% {scale: 1.02}}@media (prefers-reduced-motion: reduce) {[part="surface"], [part="surface"]::backdrop {transition: none}[part="surface"][data-refused] {animation: none}}::slotted([slot="icon"]) {block-size: var(--dialog-icon-size, calc(var(--helix-size-icon-lg) * 2));display: block;inline-size: var(--dialog-icon-size, calc(var(--helix-size-icon-lg) * 2))}:host([text-align="center"]) [part="surface"] {text-align: center}:host([text-align="center"]) ::slotted([slot="footer"]) {justify-content: center}:host([text-align="center"]) ::slotted([slot="icon"]) {margin-inline: auto}[part="dismiss"] {all: unset;box-sizing: border-box;position: absolute;inset-block-start: calc(var(--dialog-padding, var(--helix-space-lg)) + (var(--helix-text-xl) * 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}}:host([material="glass"]) [part="surface"] {backdrop-filter: var(--dialog-backdrop, var(--helix-material-backdrop));background-color: var(--dialog-background-color, light-dark(var(--helix-material-translucent-strong), var(--helix-material-translucent)))}:host([material="frosted"]) [part="surface"] {backdrop-filter: var(--dialog-backdrop, blur(var(--helix-material-blur-lg)));background-color: var(--dialog-background-color, var(--helix-material-translucent-strong))}@supports not (overlay: auto) {[part="surface"], [part="surface"]::backdrop {transition-behavior: normal}}@media print {:host {display: none}}`);

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

@@ -14,11 +14,11 @@ import type { CSSResultGroup } from 'lit';
  * @aliases Modal, Sheet
  * @documentation https://fusion.dev/helix/components/dialog
  *
+ * @cssproperty --dialog-backdrop - Filter applied behind a `frosted` or `glass` panel. Follows the theme's material policy.
  * @cssproperty --dialog-background-color - The panel's fill. Follows `--helix-color-surface-overlay`.
  * @cssproperty --dialog-border-color - Color of the panel's edge.
  * @cssproperty --dialog-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 --dialog-color - Color of the words in the panel. Follows `--helix-color-foreground`.
  * @cssproperty --dialog-icon-size - How big the mark above the title is.
  * @cssproperty --dialog-inline-size - Width of the panel.
@@ -33,6 +33,18 @@ import type { CSSResultGroup } from 'lit';
  * @replaces dialog
  */
 export declare class HelixDialog extends HelixHeadlessDialog {
+    /**
+     * The panel's surface: `frosted` or `glass`.
+     *
+     * Absent is the opaque overlay surface. `glass` is the page's translucent
+     * ground over the theme's blur, and `frosted` the same pair turned up, as
+     * on `Popover`, `Menu`, `Drawer` and `Tooltip`, so a page whose panels are
+     * frosted has dialogs that match.
+     *
+     * **No `transparent`, deliberately.** A dialog over arbitrary page content
+     * is only readable because it has a ground.
+     */
+    material?: 'frosted' | 'glass';
     /**
      * How wide the panel is allowed to be.
      *

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',
     ],
@@ -48,7 +49,7 @@ registerElementEvents({
         'helix-copy-error',
         'helix-toggle',
     ],
-    'helix-code-editor': ['change', 'helix-before-change', 'input'],
+    'helix-code-editor': ['change', 'helix-before-change', 'helix-found', 'input'],
     'helix-code-input': [
         'change',
         'helix-before-change',
@@ -149,6 +150,7 @@ registerElementEvents({
         'toggle',
     ],
     'helix-filter-menu': ['helix-facet'],
+    'helix-find': ['helix-before-close', 'helix-before-open', 'helix-found', 'toggle'],
     'helix-graph': [
         'helix-activate',
         'helix-before-activate',
@@ -373,6 +375,7 @@ registerElementEvents({
     'helix-tag-group': ['change', 'helix-before-change', 'helix-dismiss'],
     'helix-terminal': [
         'helix-copy',
+        'helix-found',
         'helix-terminal-bell',
         'helix-terminal-input',
         'helix-terminal-link',

package/dist/find/index.d.ts

@@ -0,0 +1 @@
+export * from './root/find-root.js';

package/dist/find/index.js

@@ -0,0 +1 @@
+export * from './root/find-root.js';

package/dist/find/root/find-root.css.d.ts

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

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

@@ -0,0 +1,2 @@
+import { createSheet } from '@fusion.dev/helix-core';
+export const styles = createSheet(`:host {container-type: inline-size;display: block}[part="bar"], [part="controls"] {--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);--helix-size-control: calc(var(--helix-size-control-sm) * 0.8);--helix-size-control-loose: calc(var(--helix-size-control) * 1.2);--helix-size-control-tight: calc(var(--helix-size-control) * 0.8)}[part="bar"] {align-items: center;background-color: var(--find-background-color, var(--helix-color-surface-raised));border-block-end: var(--helix-border-thin) solid var(--find-border-color, var(--helix-color-border));box-sizing: border-box;display: flex;flex-wrap: wrap;gap: var(--helix-space-2xs) var(--helix-space-xs);min-inline-size: 0;padding-block: var(--helix-space-2xs);padding-inline: var(--helix-space-sm) var(--helix-space-2xs)}[part="bar"][hidden] {display: none}[part="field"], [part="replace-field"] {appearance: none;background-color: var(--find-field-background-color, var(--helix-color-background));block-size: var(--helix-size-control);border: var(--helix-border-thin) solid var(--find-border-color, var(--helix-color-border));border-radius: var(--helix-radii-sm);box-sizing: border-box;color: var(--helix-color-foreground);flex: 1 1 10rem;font-family: var(--helix-font-sans);font-size: max(var(--helix-text-field-min), var(--helix-text-sm));max-inline-size: 20rem;min-inline-size: 0;padding-inline: var(--helix-space-xs)}[part="field"]:focus-visible, [part="replace-field"]:focus-visible {outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);outline-offset: var(--helix-size-focus-offset)}[part="field"][aria-invalid="true"] {border-color: var(--helix-color-danger)}[part="field"]::-webkit-search-cancel-button, [part="field"]::-webkit-search-decoration {appearance: none}[part="field"]::placeholder, [part="replace-field"]::placeholder {color: var(--helix-color-foreground-muted)}[part="count"] {color: var(--helix-color-foreground-muted);flex: 1 0 auto;font-family: var(--helix-font-sans);font-size: var(--helix-text-xs);font-variant-numeric: tabular-nums;min-inline-size: 7em;white-space: nowrap}[part="actions"] {display: contents}[part="controls"], [part="replace-toggle"] {flex: 0 0 auto}[part="controls"] {margin-inline-start: auto}[part~="match-case-pressed"], [part~="whole-word-pressed"], [part~="regex-pressed"] {--icon-button-background-color: color-mix(in oklab, var(--helix-color-foreground) 12%, transparent);--icon-button-foreground-color: var(--helix-color-foreground)}:host(:state(replace-open)) [part="bar"]::after {content: "";flex-basis: 100%;order: 1}[part="replace-field"], [part="replace"], [part="replace-all"] {order: 2}:host(:state(replace-open)) [part="replace-field"] {margin-inline-start: calc(var(--helix-size-control) + var(--helix-space-xs))}@container (inline-size < 30rem) {:host(:state(replace-open)) [part="replace-field"] {flex-basis: calc(100% - var(--helix-size-control) - var(--helix-space-xs))}[part="replace"] {margin-inline-start: auto}}@media print {:host {display: none}}`);

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

@@ -0,0 +1,38 @@
+import { HelixHeadlessFind } from '@fusion.dev/helix-headless/find';
+import type { CSSResultGroup } from 'lit';
+import '../../button/index.js';
+import '../../icon-button/index.js';
+import '../../toolbar/index.js';
+/**
+ * @summary A bar that finds words in content and moves among the matches.
+ *
+ * @description
+ * Drawn as the find bars of Terminal and Code Editor are: a dense strip on the
+ * raised surface, with a line under it where it meets the content. Place it
+ * above the content it searches, such as at the top of a pane, or make it
+ * sticky with `position: sticky` on the element.
+ *
+ * Every match is painted with `::highlight(helix-find-match)` and the current
+ * one with `::highlight(helix-find-current)`, both in the base layer. Text is
+ * painted from the tree it lives in, so content in a shadow root of your own
+ * needs the two rules in that root's styles.
+ *
+ * @since 0.220.0
+ * @status experimental
+ * @category navigation
+ * @aliases Find in page, Search bar, Find and replace, Search in content
+ * @documentation https://fusion.dev/helix/components/find
+ *
+ * @cssproperty --find-background-color - The bar's fill. Defaults to the raised surface.
+ * @cssproperty --find-border-color - The line under the bar and the fields' edges.
+ * @cssproperty --find-field-background-color - The fields' fill. Defaults to the page's background.
+ */
+export declare class HelixFind extends HelixHeadlessFind {
+    static tier: string;
+    static styles: CSSResultGroup;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'helix-find': HelixFind;
+    }
+}

package/dist/find/root/find-root.js

@@ -0,0 +1,17 @@
+import { __decorate } from "tslib";
+import { customElement } from '@fusion.dev/helix-core';
+import { HelixHeadlessFind } from '@fusion.dev/helix-headless/find';
+import { styles as glyphStyles } from '../../shared/glyph/glyph.css.js';
+import { styles as liveStyles } from '../../shared/live/live.css.js';
+import { styles } from './find-root.css.js';
+import '../../button/index.js';
+import '../../icon-button/index.js';
+import '../../toolbar/index.js';
+let HelixFind = class HelixFind extends HelixHeadlessFind {
+    static { this.tier = 'helix-'; }
+    static { this.styles = [liveStyles, glyphStyles, styles]; }
+};
+HelixFind = __decorate([
+    customElement('helix-find')
+], HelixFind);
+export { HelixFind };

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

@@ -47,6 +47,7 @@ export * from './empty/index.js';
 export * from './file-input/index.js';
 export * from './filter-input/index.js';
 export * from './filter-input/menu/index.js';
+export * from './find/index.js';
 export * from './flex/index.js';
 export * from './format-date/index.js';
 export * from './graph/index.js';

package/dist/index.js

@@ -42,6 +42,7 @@ export * from './empty/index.js';
 export * from './file-input/index.js';
 export * from './filter-input/index.js';
 export * from './filter-input/menu/index.js';
+export * from './find/index.js';
 export * from './flex/index.js';
 export * from './format-date/index.js';
 export * from './graph/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)}: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}}:host [part="content"][hidden] {animation: none;background-color: transparent;border: none;margin: 0;max-block-size: none;padding: 0}`);

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';