@fusion.dev/helix 0.217.0 → 0.219.0

package/dist/breadcrumbs/breadcrumb/breadcrumb.css.js

@@ -1,2 +1,2 @@
 import { createSheet } from '@fusion.dev/helix-core';
-export const styles = createSheet(`:host {--icon-button-size: var(--breadcrumbs-control-size, calc(var(--helix-text-control) * var(--helix-leading-normal) + var(--helix-space-2xs) * 2));--button-size: var(--breadcrumbs-control-size, calc(var(--helix-text-control) * var(--helix-leading-normal) + var(--helix-space-2xs) * 2));--button-padding-inline: var(--breadcrumbs-control-padding-inline, var(--helix-space-xs));--button-gap: var(--helix-space-2xs);align-items: center;display: inline-flex;gap: var(--breadcrumbs-gap, var(--helix-space-xs))}[part="separator"] {color: var(--breadcrumbs-separator-color, var(--helix-color-foreground-subtle));display: block;user-select: none}[part="separator"] svg {block-size: 1em;inline-size: 1em;vertical-align: calc(0.5cap - 0.5em)}:host(:first-child) [part="separator"] {display: none}::slotted(a) {background-color: transparent;border-radius: var(--breadcrumbs-radius, var(--helix-radii-sm));padding: var(--helix-space-2xs) var(--helix-space-xs);transition: background-color var(--helix-duration-fast) var(--helix-easing-standard)}:host(:first-child) ::slotted(a) {margin-inline-start: calc(var(--helix-space-xs) * -1)}::slotted(a:hover) {background-color: var(--breadcrumbs-hover-color, color-mix(in oklab, var(--helix-color-foreground) 8%, transparent))}::slotted(a:focus-visible) {outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);outline-offset: var(--helix-size-focus-offset)}:host {font-weight: var(--breadcrumbs-font-weight, var(--helix-weight-medium))}:host([current]) {color: var(--breadcrumbs-current-color, var(--helix-color-foreground))}[part="link"] {align-items: center;border-radius: var(--breadcrumbs-radius, var(--helix-radii-sm));color: var(--breadcrumbs-link-color, var(--helix-color-foreground-muted));display: inline-flex;gap: var(--helix-space-xs);padding: var(--helix-space-2xs) var(--helix-space-xs);text-decoration: none}:host(:first-child) a[part="link"] {margin-inline-start: calc(var(--helix-space-xs) * -1)}:host(:not([href])) [part="link"] {padding-block: var(--helix-space-none)}:host(:not([href]):not([current])) [part="link"] {padding-inline: var(--helix-space-none)}a[part="link"]:hover {background-color: var(--breadcrumbs-hover-color, color-mix(in oklab, var(--helix-color-foreground) 8%, transparent));color: var(--breadcrumbs-current-color, var(--helix-color-foreground))}a[part="link"]:focus-visible {outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);outline-offset: var(--helix-size-focus-offset)}:host([current]) [part="link"] {color: var(--breadcrumbs-current-color, var(--helix-color-foreground))}:host(:state(end)) [part="link"], :host(:state(end)) ::slotted(a) {border-end-end-radius: var(--helix-radii-none);border-start-end-radius: var(--helix-radii-none);padding-inline-end: var(--helix-space-2xs)}:host(:state(end)) slot[name="end"] {--button-radius: var(--breadcrumbs-radius, var(--helix-radii-sm));--button-radius-start: var(--helix-radii-none);--helix-size-focus-offset: calc(var(--helix-size-focus-ring) * -1);--icon-button-background-color-hover: var(--breadcrumbs-hover-color, color-mix(in oklab, var(--helix-color-foreground) 8%, transparent));--icon-button-radius: var(--breadcrumbs-radius, var(--helix-radii-sm));--icon-size: 1.15em;align-items: center;display: inline-flex;margin-inline-start: calc(var(--breadcrumbs-gap, var(--helix-space-xs)) * -1)}:host(:state(end)) a[part="link"]:focus-visible, :host(:state(end)) ::slotted(a:focus-visible) {outline-offset: calc(var(--helix-size-focus-offset) * -1)}:host(:state(end)) [part="link"]:focus-visible, :host(:state(end)) ::slotted(a:focus-visible), :host(:state(end)) slot[name="end"]:focus-within {position: relative;z-index: var(--helix-layer-raised)}:host(:state(end)) [part="link"]:hover ~ slot[name="end"] {--icon-button-background-color: var(--_breadcrumbs-split-fill, transparent)}:host(:state(end)) [part="link"]:has(~ slot[name="end"]:hover), :host(:state(end)) [part="link"]:has(~ slot[name="end"]:hover) ::slotted(a) {background-color: var(--_breadcrumbs-split-fill, transparent)}:host(:state(end)) [part="link"] {position: relative}:host(:state(end)) [part="link"]::after {background-color: var(--_breadcrumbs-split-rule, transparent);content: "";inline-size: var(--helix-border-thin);inset-block: 20%;inset-inline-end: calc(var(--helix-border-thin) * -1);pointer-events: none;position: absolute}:host([hidden]), :host(:state(folded)) {display: none}[part="fold-separator"] {color: var(--breadcrumbs-separator-color, var(--helix-color-foreground-subtle));display: block;user-select: none}[part="fold-separator"] svg {block-size: 1em;inline-size: 1em;vertical-align: calc(0.5cap - 0.5em)}[part="expand"] {all: unset;border-radius: var(--breadcrumbs-radius, var(--helix-radii-sm));box-sizing: border-box;color: var(--breadcrumbs-link-color, var(--helix-color-foreground-muted));cursor: pointer;line-height: var(--helix-leading-normal);padding: var(--helix-space-2xs) var(--helix-space-xs)}[part="expand"]:hover {background-color: var(--breadcrumbs-hover-color, color-mix(in oklab, var(--helix-color-foreground) 8%, transparent));color: var(--breadcrumbs-current-color, var(--helix-color-foreground))}[part="expand"]:focus-visible {outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);outline-offset: var(--helix-size-focus-offset)}`);
+export const styles = createSheet(`:host {--icon-button-size: var(--breadcrumbs-control-size, calc(var(--helix-text-control) * var(--helix-leading-normal) + var(--helix-space-2xs) * 2));--button-size: var(--breadcrumbs-control-size, calc(var(--helix-text-control) * var(--helix-leading-normal) + var(--helix-space-2xs) * 2));--button-padding-inline: var(--breadcrumbs-control-padding-inline, var(--helix-space-xs));--button-gap: var(--helix-space-2xs);align-items: center;display: inline-flex;gap: var(--breadcrumbs-gap, var(--helix-space-xs))}[part="separator"] {color: var(--breadcrumbs-separator-color, var(--helix-color-foreground-subtle));display: block;user-select: none}[part="separator"] svg {block-size: 1em;inline-size: 1em;vertical-align: calc(0.5cap - 0.5em)}[data-mark="slash"] {display: inline-block;inline-size: 1em;text-align: center}:host(:first-child) [part="separator"] {display: none}::slotted(a) {background-color: transparent;border-radius: var(--breadcrumbs-radius, var(--helix-radii-sm));padding: var(--helix-space-2xs) var(--helix-space-xs);transition: background-color var(--helix-duration-fast) var(--helix-easing-standard)}:host(:first-child) ::slotted(a) {margin-inline-start: calc(var(--helix-space-xs) * -1)}::slotted(a:hover) {background-color: var(--breadcrumbs-hover-color, color-mix(in oklab, var(--helix-color-foreground) 8%, transparent))}::slotted(a:focus-visible) {outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);outline-offset: var(--helix-size-focus-offset)}:host {font-weight: var(--breadcrumbs-font-weight, var(--helix-weight-medium))}:host([current]) {color: var(--breadcrumbs-current-color, var(--helix-color-foreground))}[part="link"] {align-items: center;border-radius: var(--breadcrumbs-radius, var(--helix-radii-sm));color: var(--breadcrumbs-link-color, var(--helix-color-foreground-muted));display: inline-flex;gap: var(--helix-space-xs);padding: var(--helix-space-2xs) var(--helix-space-xs);text-decoration: none}:host(:first-child) a[part="link"] {margin-inline-start: calc(var(--helix-space-xs) * -1)}:host(:not([href])) [part="link"] {padding-block: var(--helix-space-none)}:host(:not([href]):not([current])) [part="link"] {padding-inline: var(--helix-space-none)}a[part="link"]:hover {background-color: var(--breadcrumbs-hover-color, color-mix(in oklab, var(--helix-color-foreground) 8%, transparent));color: var(--breadcrumbs-current-color, var(--helix-color-foreground))}a[part="link"]:focus-visible {outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);outline-offset: var(--helix-size-focus-offset)}:host([current]) [part="link"] {color: var(--breadcrumbs-current-color, var(--helix-color-foreground))}:host(:state(end)) [part="link"], :host(:state(end)) ::slotted(a) {border-end-end-radius: var(--helix-radii-none);border-start-end-radius: var(--helix-radii-none);padding-inline-end: var(--helix-space-2xs)}:host(:state(end)) slot[name="end"] {--button-radius: var(--breadcrumbs-radius, var(--helix-radii-sm));--button-radius-start: var(--helix-radii-none);--helix-size-focus-offset: calc(var(--helix-size-focus-ring) * -1);--icon-button-background-color-hover: var(--breadcrumbs-hover-color, color-mix(in oklab, var(--helix-color-foreground) 8%, transparent));--icon-button-radius: var(--breadcrumbs-radius, var(--helix-radii-sm));--icon-size: 1.15em;align-items: center;display: inline-flex;margin-inline-start: calc(var(--breadcrumbs-gap, var(--helix-space-xs)) * -1)}:host(:state(end)) a[part="link"]:focus-visible, :host(:state(end)) ::slotted(a:focus-visible) {outline-offset: calc(var(--helix-size-focus-offset) * -1)}:host(:state(end)) [part="link"]:focus-visible, :host(:state(end)) ::slotted(a:focus-visible), :host(:state(end)) slot[name="end"]:focus-within {position: relative;z-index: var(--helix-layer-raised)}:host(:state(end)) [part="link"]:hover ~ slot[name="end"] {--icon-button-background-color: var(--_breadcrumbs-split-fill, transparent)}:host(:state(end)) [part="link"]:has(~ slot[name="end"]:hover), :host(:state(end)) [part="link"]:has(~ slot[name="end"]:hover) ::slotted(a) {background-color: var(--_breadcrumbs-split-fill, transparent)}:host(:state(end)) [part="link"] {position: relative}:host(:state(end)) [part="link"]::after {background-color: var(--_breadcrumbs-split-rule, transparent);content: "";inline-size: var(--helix-border-thin);inset-block: 20%;inset-inline-end: calc(var(--helix-border-thin) * -1);pointer-events: none;position: absolute}:host([hidden]), :host(:state(folded)) {display: none}[part="fold-separator"] {color: var(--breadcrumbs-separator-color, var(--helix-color-foreground-subtle));display: block;user-select: none}[part="fold-separator"] svg {block-size: 1em;inline-size: 1em;vertical-align: calc(0.5cap - 0.5em)}[part="expand"] {all: unset;border-radius: var(--breadcrumbs-radius, var(--helix-radii-sm));box-sizing: border-box;color: var(--breadcrumbs-link-color, var(--helix-color-foreground-muted));cursor: pointer;line-height: var(--helix-leading-normal);padding: var(--helix-space-2xs) var(--helix-space-xs)}[part="expand"]:hover {background-color: var(--breadcrumbs-hover-color, color-mix(in oklab, var(--helix-color-foreground) 8%, transparent));color: var(--breadcrumbs-current-color, var(--helix-color-foreground))}[part="expand"]:focus-visible {outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);outline-offset: var(--helix-size-focus-offset)}`);

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

@@ -2,6 +2,7 @@ import { type ViewportControlAxes } from '@fusion.dev/helix-core';
 import { HelixHeadlessCanvas } from '@fusion.dev/helix-headless/canvas';
 import type { CSSResultGroup } from 'lit';
 import '../../icon-button/index.js';
+import '../../tooltip/index.js';
 /**
  * @summary A board of cards and the connections between them, which can be navigated, rearranged, and connected.
  *

package/dist/canvas/root/canvas-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 './canvas-root.css.js';
 import '../../icon-button/index.js';
+import '../../tooltip/index.js';
 let HelixCanvas = class HelixCanvas extends HelixHeadlessCanvas {
     static { this.tier = 'helix-'; }
     get controlAxes() {

package/dist/chat/composer/chat-composer.css.js

@@ -1,2 +1,2 @@
 import { createSheet } from '@fusion.dev/helix-core';
-export const styles = createSheet(`:host {display: block}[part="composer"] {background-color: var(--chat-composer-background-color, var(--helix-color-surface));border: var(--chat-composer-border-width, var(--helix-border-thin)) solid var(--helix-color-border);border-radius: var(--helix-radii-md);display: grid;gap: var(--helix-space-2xs);padding: var(--helix-space-xs)}[part="composer"]:focus-within {outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);outline-offset: 0}:host(:state(invalid)) [part="composer"], :host(:state(invalid)) [part="composer"]:focus-within {border-color: var(--helix-color-danger);outline-color: var(--helix-color-danger)}[part="feedback"] {color: var(--helix-color-danger);font-family: var(--helix-font-sans);font-size: var(--helix-text-xs);font-weight: var(--helix-weight-medium);line-height: var(--helix-leading-normal);margin: var(--helix-space-none);margin-block-start: var(--helix-space-2xs)}[part="field"] {background-color: transparent;border: 0;color: var(--helix-color-foreground);field-sizing: content;font-family: var(--helix-font-sans);font-size: max(var(--helix-text-field-min), var(--helix-text-sm));line-height: var(--helix-leading-normal);max-block-size: var(--chat-composer-max-block-size, 12rem);padding-block: var(--helix-space-2xs);padding-inline: calc(var(--helix-space-sm) - var(--helix-space-xs) - var(--helix-border-thin));resize: none}[part="field"]:focus-visible {outline: none}[part="tools"] {align-items: center;display: flex;gap: var(--helix-space-2xs);justify-content: flex-end}[part="start"], [part="end"] {--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);align-items: center;display: flex;gap: var(--helix-space-2xs)}[part="start"] {margin-inline-end: auto}[part="end"] {margin-inline-end: var(--helix-space-2xs)}[part="start"][data-empty], [part="end"][data-empty] {display: none}[part="send"], [part~="voice"] {align-items: center;background-color: transparent;block-size: calc(var(--helix-size-control-tight) - var(--helix-space-2xs));border: 0;border-radius: var(--helix-radii-sm);color: var(--helix-color-foreground-muted);cursor: pointer;display: inline-flex;inline-size: calc(var(--helix-size-control-tight) - var(--helix-space-2xs));justify-content: center;padding: var(--helix-space-none)}[part="mark"], [part~="voice"] svg {block-size: var(--helix-size-icon-tight);inline-size: var(--helix-size-icon-tight)}[part="send"]:hover:not(:disabled), [part~="voice"]:hover:not(:disabled) {background-color: color-mix(in oklab, var(--helix-color-foreground) 8%, transparent);color: var(--helix-color-foreground)}[part="send"]:disabled, [part~="voice"]:disabled {cursor: not-allowed;opacity: 0.5}[part="send"]:focus-visible, [part~="voice"]:focus-visible {outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);outline-offset: var(--helix-size-focus-offset)}`);
+export const styles = createSheet(`:host {display: block}[part="composer"] {background-color: var(--chat-composer-background-color, var(--helix-color-surface));border: var(--chat-composer-border-width, var(--helix-border-thin)) solid var(--helix-color-border);border-radius: var(--helix-radii-md);display: grid;gap: var(--helix-space-2xs);padding: var(--helix-space-xs)}[part="composer"]:focus-within {outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);outline-offset: 0}:host([glow]) [part="composer"] {--_chat-composer-reach-x: 5rem;--_chat-composer-reach-y: 2.5rem;position: relative;transition: box-shadow var(--helix-duration-normal) var(--helix-easing-standard)}:host([glow]) [part="composer"]:focus-within {box-shadow: 0 0 0 var(--helix-border-thin) color-mix(in oklab, var(--chat-composer-glow-color, var(--helix-color-primary)) 60%, transparent), 0 0 1.25rem -0.25rem color-mix(in oklab, var(--chat-composer-glow-color, var(--helix-color-primary)) 45%, transparent);outline: none;transition: box-shadow var(--helix-duration-slow) var(--helix-easing-standard) var(--helix-duration-normal)}:host([glow]) [part="composer"]::before {background: radial-gradient(min(5rem, var(--_chat-composer-reach-x)) min(2.5rem, var(--_chat-composer-reach-y)) at var(--_chat-composer-light-x, 0px) var(--_chat-composer-light-y, 0px), color-mix(in oklab, var(--chat-composer-glow-color, var(--helix-color-primary)) 60%, white), var(--chat-composer-glow-color, var(--helix-color-primary)) 35%, transparent 100%);--_chat-composer-light-x: 0px;--_chat-composer-light-y: 0px;border-radius: inherit;content: "";inset: 0;mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);opacity: 0;padding: var(--helix-border-thick);pointer-events: none;position: absolute}:host([glow]) [part="composer"]::after {--_chat-composer-bloom: var(--helix-space-sm);--_chat-composer-bloom-in: var(--helix-space-xs);--_chat-composer-bloom-out: transparent, rgb(0 0 0 / 0.25) calc(var(--_chat-composer-bloom) / 3), rgb(0 0 0 / 0.6) calc(var(--_chat-composer-bloom) * 2 / 3), #000 var(--_chat-composer-bloom), #000 calc(100% - var(--_chat-composer-bloom)), rgb(0 0 0 / 0.6) calc(100% - var(--_chat-composer-bloom) * 2 / 3), rgb(0 0 0 / 0.25) calc(100% - var(--_chat-composer-bloom) / 3), transparent;--_chat-composer-bloom-into: #000 var(--_chat-composer-bloom), rgb(0 0 0 / 0.45) calc(var(--_chat-composer-bloom) + var(--_chat-composer-bloom-in) / 3), transparent calc(var(--_chat-composer-bloom) + var(--_chat-composer-bloom-in)), transparent calc(100% - var(--_chat-composer-bloom) - var(--_chat-composer-bloom-in)), rgb(0 0 0 / 0.45) calc(100% - var(--_chat-composer-bloom) - var(--_chat-composer-bloom-in) / 3), #000 calc(100% - var(--_chat-composer-bloom));--_chat-composer-light-x: 0px;--_chat-composer-light-y: 0px;background: radial-gradient(min(5rem, var(--_chat-composer-reach-x)) min(2.5rem, var(--_chat-composer-reach-y)) at calc(var(--_chat-composer-light-x, 0px) + var(--_chat-composer-bloom)) calc(var(--_chat-composer-light-y, 0px) + var(--_chat-composer-bloom)), color-mix(in oklab, var(--chat-composer-glow-color, var(--helix-color-primary)) 70%, transparent), transparent 100%);content: "";inset: calc(var(--_chat-composer-bloom) * -1);mask: linear-gradient(to right, var(--_chat-composer-bloom-out)), linear-gradient(to bottom, var(--_chat-composer-bloom-out)), linear-gradient(to right, var(--_chat-composer-bloom-into)), linear-gradient(to bottom, var(--_chat-composer-bloom-into));mask-composite: intersect, intersect, add, add;opacity: 0;pointer-events: none;position: absolute;z-index: var(--helix-layer-beneath)}@media (prefers-reduced-motion: reduce) {:host([glow]) [part="composer"]:focus-within {transition-delay: 0s}}:host([glow]:state(invalid)) {--chat-composer-glow-color: var(--helix-color-danger)}@media (forced-colors: active) {:host([glow]) [part="composer"]:focus-within {outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);outline-offset: 0}}:host(:state(invalid)) [part="composer"], :host(:state(invalid)) [part="composer"]:focus-within {border-color: var(--helix-color-danger);outline-color: var(--helix-color-danger)}[part="feedback"] {color: var(--helix-color-danger);font-family: var(--helix-font-sans);font-size: var(--helix-text-xs);font-weight: var(--helix-weight-medium);line-height: var(--helix-leading-normal);margin: var(--helix-space-none);margin-block-start: var(--helix-space-2xs)}[part="field"] {background-color: transparent;border: 0;color: var(--helix-color-foreground);field-sizing: content;font-family: var(--helix-font-sans);font-size: max(var(--helix-text-field-min), var(--helix-text-sm));line-height: var(--helix-leading-normal);max-block-size: var(--chat-composer-max-block-size, 12rem);padding-block: var(--helix-space-2xs);padding-inline: calc(var(--helix-space-sm) - var(--helix-space-xs) - var(--helix-border-thin));resize: none}[part="attachments"] {--_chat-composer-inset: calc(var(--helix-space-sm) - var(--helix-space-xs) - var(--helix-border-thin));align-items: flex-start;display: flex;flex-wrap: wrap;gap: var(--helix-space-xs);min-inline-size: 0;padding-block-start: var(--_chat-composer-inset);padding-inline: var(--_chat-composer-inset)}[part="attachments"][hidden] {display: none}[part="field"]:focus-visible {outline: none}@supports (anchor-name: --a) {[part="composer"] {position: relative}[part="field"] {--_chat-composer-held: auto;anchor-name: --_chat-composer-field;min-block-size: var(--_chat-composer-held)}[part="field"]:has(+ [part~="example"])::placeholder {color: transparent}[part~="example"] {background-color: transparent;block-size: anchor-size(--_chat-composer-field block);border: 0;color: var(--helix-color-foreground);field-sizing: fixed;font-family: var(--helix-font-sans);font-size: max(var(--helix-text-field-min), var(--helix-text-sm));inline-size: anchor-size(--_chat-composer-field inline);inset-block-start: anchor(--_chat-composer-field start);inset-inline-start: anchor(--_chat-composer-field start);line-height: var(--helix-leading-normal);margin: var(--helix-space-none);overflow: hidden;padding-block: var(--helix-space-2xs);padding-inline: calc(var(--helix-space-sm) - var(--helix-space-xs) - var(--helix-border-thin));pointer-events: none;position: absolute;resize: none}[part="field"]:not(:placeholder-shown) ~ [part~="example"] {visibility: hidden}[part~="example-leaving"] {animation: helix-composer-example-out calc(var(--helix-duration-normal) * 1.25) var(--helix-easing-standard) forwards}:host(:state(example-entering)) [part~="example"]:not([part~="example-leaving"]) {animation: helix-composer-example-in var(--helix-duration-slow) var(--helix-easing-standard)}@keyframes helix-composer-example-out {to {filter: blur(0.125em);opacity: 0;translate: 0 -0.35em}}@keyframes helix-composer-example-in {from {opacity: 0;translate: 0 0.35em}}@media (prefers-reduced-motion: reduce) {[part~="example-leaving"], :host(:state(example-entering)) [part~="example"]:not([part~="example-leaving"]) {animation: none}}}@supports not (anchor-name: --a) {[part~="example"] {display: none}[part="field"]::placeholder {transition: opacity var(--helix-duration-fast) var(--helix-easing-standard)}:host(:state(example-leaving)) [part="field"]::placeholder {opacity: 0}}[part="tools"] {align-items: center;display: flex;gap: var(--helix-space-2xs);justify-content: flex-end}[part="attachments"], [part="start"], [part="end"] {--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)}[part="start"], [part="end"] {align-items: center;display: flex;gap: var(--helix-space-2xs)}[part="start"] {margin-inline-end: auto}[part="end"] {margin-inline-end: var(--helix-space-2xs)}[part="start"][data-empty], [part="end"][data-empty] {display: none}[part="send"], [part~="voice"] {align-items: center;background-color: transparent;block-size: calc(var(--helix-size-control-tight) - var(--helix-space-2xs));border: 0;border-radius: var(--helix-radii-sm);color: var(--helix-color-foreground-muted);cursor: pointer;display: inline-flex;inline-size: calc(var(--helix-size-control-tight) - var(--helix-space-2xs));justify-content: center;padding: var(--helix-space-none)}[part="mark"], [part~="voice"] svg {block-size: var(--helix-size-icon-tight);inline-size: var(--helix-size-icon-tight)}[part="send"]:hover:not(:disabled, [aria-disabled="true"]), [part~="voice"]:hover:not(:disabled) {background-color: color-mix(in oklab, var(--helix-color-foreground) 8%, transparent);color: var(--helix-color-foreground)}[part="send"]:disabled, [part="send"][aria-disabled="true"], [part~="voice"]:disabled {cursor: not-allowed;opacity: 0.5}[part="idle"] {align-items: center;animation: helix-composer-swap var(--helix-duration-fast) var(--helix-easing-standard);display: inline-flex}[part="idle"][hidden] {display: none}[part="send"] {animation: helix-composer-swap var(--helix-duration-fast) var(--helix-easing-standard)}@keyframes helix-composer-swap {from {opacity: 0}}@media (prefers-reduced-motion: reduce) {[part="idle"], [part="send"] {animation: none}}[part="send"]:focus-visible, [part~="voice"]:focus-visible {outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);outline-offset: var(--helix-size-focus-offset)}`);

package/dist/chat/composer/chat-composer.d.ts

@@ -1,33 +1,130 @@
 import { HelixHeadlessChatComposer } from '@fusion.dev/helix-headless/chat';
-import type { CSSResultGroup } from 'lit';
+import { type CSSResultGroup, type PropertyValues, type TemplateResult } from 'lit';
+import '../../tooltip/index.js';
+/**
+ * The keyframes of one lap of the light around a box `w` wide and `h` tall,
+ * clockwise from its top-left corner, each side taking the share of the lap
+ * its length is of the edge, so the light moves at one speed. None for a box
+ * with no size.
+ */
+export declare function lapOf(w: number, h: number): Keyframe[];
 /**
  * @summary A field for writing a turn in a conversation.
  *
  * @description
- * The composer is one row, and the field takes the remaining width. The field
- * grows with its text up to a maximum height, through `field-sizing: content`.
- * Where that is not supported, the field keeps its rows and scrolls. The
- * maximum height keeps the composer from covering the transcript.
+ * The composer is one box. What the draft carries sits at its top, in a row
+ * that wraps, inset to the line the caret starts on. The field grows with its
+ * text up to a maximum height, through `field-sizing: content`. Where that is
+ * not supported, the field keeps its rows and scrolls. The maximum height
+ * keeps the composer from covering the transcript.
+ *
+ * With two `placeholders` or more, each example rolls into the next: the one
+ * showing rises a little as it fades and blurs, and the next rises into its
+ * place from below as it fades in, the two crossing so the field is never
+ * empty. A box that changes height for the next example changes as it
+ * lands. Where the browser has no CSS anchor
+ * positioning, the examples fade into each other in the field's own
+ * placeholder.
  *
  * @since 0.1.0
  * @status stable
  * @category forms
  * @documentation https://fusion.dev/helix/components/chat
  *
+ * @slot attachments - What the draft carries, such as images or files, inside the box and above the field.
  * @slot end - Content under the field, beside the send button.
  * @slot start - Content under the field at the leading edge, such as an attachment button or a model picker.
  *
+ * @csspart attachments - The row above the field that holds the `attachments` slot, inset to the field's text and hidden while the slot is empty.
+ * @csspart example - The example drawn over the empty field while `placeholders` holds two or more, in the field's box. It is a second field that shows only its placeholder, hidden from screen readers. Style its `::placeholder` where you style the field's.
+ * @csspart example-leaving - The example on its way out while the next comes in, for its first 250 milliseconds. Set together with `example`.
  * @csspart field - The text field.
  * @csspart send - The send button.
  * @csspart tools - The row under the field.
  *
  * @cssproperty --chat-composer-background-color - Fill behind the composer.
  * @cssproperty --chat-composer-border-width - Width of the composer's edge, so your theme can remove it.
+ * @cssproperty --chat-composer-glow-color - Color of the focus glow under `glow`. Defaults to the primary color.
  * @cssproperty --chat-composer-max-block-size - Maximum height the field grows to.
  * @cssproperty --dictation-level - How loud the microphone is while the field listens for dictation, from 0 to 1, which the element sets; the ring around the dictation button grows with it.
  */
 export declare class HelixChatComposer extends HelixHeadlessChatComposer {
     static tier: string;
+    /**
+     * Draws the composer's focus as a glow: a light that runs once around the
+     * edge as the composer takes focus, then a soft steady edge while it holds
+     * it, in place of the focus ring.
+     *
+     * **On focus, and only then.** It says the composer is listening. A glow
+     * that ran while a reply was on its way would be a second indicator of what
+     * the conversation already shows, and one that ran all the time would be
+     * decoration that moves. With reduced motion asked for, the edge lights
+     * without the sweep.
+     *
+     * The steady edge is the focus indicator, so the ring is not drawn as well.
+     * Its color is `--chat-composer-glow-color`, the primary color unless set.
+     */
+    glow: boolean;
+    /** The light's lap, and its bloom's, while they run. */
+    private laps;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    /**
+     * Runs the light once as focus arrives. Focus moving between the
+     * composer's own controls, such as from the field to the send button, has
+     * not arrived, so the light stays down.
+     */
+    private readonly arrive;
+    /**
+     * One lap of the light around the edge, **at one speed all the way**.
+     *
+     * A conic gradient turned through a full circle moves its light by angle,
+     * so on a composer many times wider than it is tall the light crawls along
+     * the middle of each long side and races through the corners. Here the lap
+     * is measured: each side takes the share of the time its length is of the
+     * edge, and the whole lap takes as long as the edge is, within a range.
+     */
+    private sweep;
+    /**
+     * The examples the empty field shows, drawn over the field so they can
+     * move: the one showing, and while two cross, the one leaving.
+     *
+     * **Each is a field showing only its placeholder**, so the example is drawn
+     * by the same rules as the field's own: the browser's placeholder color,
+     * and the same wrapping and clipping at every width and in either
+     * direction. A field's `::placeholder` cannot move, blur, or take a
+     * transform, and this whole box can. The sheet places each on the field's
+     * box and makes the field's own placeholder transparent, which stays the
+     * example a screen reader hears. These are `inert` and `aria-hidden`, and
+     * take no pointer.
+     *
+     * **Keyed by the example's place in the list**, so the example showing is
+     * the same element as it starts to leave, and its exit starts from where it
+     * rests.
+     */
+    protected renderExample(example: {
+        index: number;
+        text: string;
+    }, leaving?: {
+        index: number;
+        text: string;
+    }): TemplateResult;
+    /**
+     * Holds the field at the height it has as the next example appears, so a
+     * box that grows for it grows at once and one that shrinks waits for the
+     * example to land. Only where the sheet draws the examples.
+     */
+    protected willUpdate(changed: PropertyValues): void;
+    protected updated(changed: PropertyValues): void;
+    /**
+     * Lets the field take the height of the example showing.
+     *
+     * **On the element's clock, never on an animation event.** WebKit sends no
+     * `animationcancel`, so a hold released by one stayed on whenever the
+     * entrance was cut short, and the field kept the leaving example's height
+     * until the next turn. Measured in Linux WebKit on October 17, 2026.
+     */
+    protected exampleLanded(): void;
     static styles: CSSResultGroup;
 }
 declare global {

package/dist/chat/composer/chat-composer.js

@@ -1,12 +1,146 @@
 import { __decorate } from "tslib";
 import { customElement } from '@fusion.dev/helix-core';
 import { HelixHeadlessChatComposer } from '@fusion.dev/helix-headless/chat';
+import { html } from 'lit';
+import { property } from 'lit/decorators.js';
+import { repeat } from 'lit/directives/repeat.js';
 import { styles as dictationStyles } from '../../shared/dictation/dictation.css.js';
 import { styles } from './chat-composer.css.js';
+import '../../tooltip/index.js';
+const LIGHT_X = '--_chat-composer-light-x';
+const LIGHT_Y = '--_chat-composer-light-y';
+const REACH_X = '--_chat-composer-reach-x';
+const REACH_Y = '--_chat-composer-reach-y';
+const PACE = 1.2;
+const SHORTEST = 800;
+const LONGEST = 1600;
+let registered = false;
+function registerLight() {
+    if (registered || typeof CSS === 'undefined' || !('registerProperty' in CSS)) {
+        return;
+    }
+    registered = true;
+    for (const name of [LIGHT_X, LIGHT_Y]) {
+        try {
+            CSS.registerProperty({ inherits: false, initialValue: '0px', name, syntax: '<length>' });
+        }
+        catch {
+        }
+    }
+}
+export function lapOf(w, h) {
+    const edge = 2 * (w + h);
+    if (edge === 0) {
+        return [];
+    }
+    const at = (x, y, offset) => ({
+        [LIGHT_X]: `${x}px`,
+        [LIGHT_Y]: `${y}px`,
+        offset,
+    });
+    return [
+        { ...at(0, 0, 0), opacity: 0 },
+        at(w, 0, w / edge),
+        at(w, h, (w + h) / edge),
+        at(0, h, (2 * w + h) / edge),
+        { ...at(0, 0, 1), opacity: 0 },
+        { offset: 0.08, opacity: 1 },
+        { offset: 0.82, opacity: 1 },
+    ].sort((one, two) => (one.offset ?? 0) - (two.offset ?? 0));
+}
 let HelixChatComposer = class HelixChatComposer extends HelixHeadlessChatComposer {
+    constructor() {
+        super(...arguments);
+        this.glow = false;
+        this.laps = [];
+        this.arrive = (event) => {
+            const from = event.relatedTarget;
+            const within = from instanceof Node &&
+                (from === this || this.contains(from) || this.renderRoot.contains(from));
+            if (!this.glow || within || matchMedia('(prefers-reduced-motion: reduce)').matches) {
+                return;
+            }
+            this.sweep();
+        };
+    }
     static { this.tier = 'helix-'; }
+    connectedCallback() {
+        super.connectedCallback();
+        registerLight();
+        this.addEventListener('focusin', this.arrive);
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        this.removeEventListener('focusin', this.arrive);
+        for (const lap of this.laps) {
+            lap.cancel();
+        }
+    }
+    sweep() {
+        const frame = this.renderRoot.querySelector('[part="composer"]');
+        if (!frame || typeof frame.animate !== 'function') {
+            return;
+        }
+        const { height, width } = frame.getBoundingClientRect();
+        const keyframes = lapOf(width, height);
+        if (keyframes.length === 0) {
+            return;
+        }
+        const edge = 2 * (width + height);
+        const timing = {
+            duration: Math.min(LONGEST, Math.max(SHORTEST, edge / PACE)),
+            easing: 'linear',
+        };
+        for (const lap of this.laps) {
+            lap.cancel();
+        }
+        frame.style.setProperty(REACH_X, `${width / 2}px`);
+        frame.style.setProperty(REACH_Y, `${height / 2}px`);
+        this.laps = ['::before', '::after'].map((pseudoElement) => frame.animate(keyframes, { ...timing, pseudoElement }));
+    }
+    renderExample(example, leaving) {
+        const drawn = leaving === undefined
+            ? [{ ...example, out: false }]
+            : leaving.index === example.index
+                ? [{ ...leaving, out: true }]
+                : [
+                    { ...leaving, out: true },
+                    { ...example, out: false },
+                ];
+        return html `${repeat(drawn, (one) => one.index, (one) => html `<textarea
+        part="example${one.out ? ' example-leaving' : ''}"
+        aria-hidden="true"
+        inert
+        readonly
+        tabindex="-1"
+        placeholder=${one.text}
+        ?disabled=${this.isDisabled}
+      ></textarea>`)}`;
+    }
+    willUpdate(changed) {
+        super.willUpdate(changed);
+        if (!changed.has('example') || !this.hasUpdated || !this.matches(':state(example-leaving)')) {
+            return;
+        }
+        const field = this.partNamed('field');
+        if (field && typeof CSS !== 'undefined' && CSS.supports('anchor-name: --a')) {
+            field.style.setProperty('--_chat-composer-held', `${field.getBoundingClientRect().height}px`);
+        }
+    }
+    updated(changed) {
+        super.updated(changed);
+        if (this.placeholders.length < 2) {
+            this.exampleLanded();
+        }
+    }
+    exampleLanded() {
+        this.partNamed('field')?.style.removeProperty('--_chat-composer-held');
+    }
     static { this.styles = [styles, dictationStyles]; }
 };
+__decorate([
+    property({ reflect: true, type: Boolean })
+], HelixChatComposer.prototype, "glow", void 0);
 HelixChatComposer = __decorate([
     customElement('helix-chat-composer')
 ], HelixChatComposer);

package/dist/chat/message/chat-message.css.js

@@ -1,2 +1,2 @@
 import { createSheet } from '@fusion.dev/helix-core';
-export const styles = createSheet(`:host {display: block}:host(:focus-visible) {outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);outline-offset: calc(var(--helix-size-focus-offset) * -1)}[part="message"] {align-items: start;display: grid;grid-template-columns: auto minmax(0, 1fr)}[part="avatar"] > slot::slotted(*) {margin-inline-end: var(--helix-space-sm)}[part="avatar"] {align-items: center;display: flex;font-size: var(--helix-text-sm);grid-column: 1;line-height: var(--helix-leading-normal);min-block-size: calc(1lh + var(--helix-space-xs) * 2)}[part="body"] {grid-column: 2}:host([author="me"]) [part="avatar"] {display: none}[part="body"] {display: grid;gap: var(--helix-space-2xs);justify-items: start;max-inline-size: min(var(--chat-message-measure, 42rem), 80%)}:host([author="me"]) [part="body"] {justify-items: end;justify-self: end}[part="actions"] {opacity: 0;pointer-events: none;transition: opacity var(--helix-duration-fast) var(--helix-easing-standard)}:host(:hover) [part="actions"], :host(:focus-within) [part="actions"] {opacity: 1;pointer-events: auto}@media (hover: none) {[part="actions"] {opacity: 1;pointer-events: auto}}[part="actions"] {--helix-size-control: calc(var(--helix-size-control-sm) - var(--helix-space-2xs));--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);align-items: center;display: inline-flex;gap: var(--helix-space-2xs)}[part="actions"][hidden] {display: none}[part="sources"] {--helix-size-avatar: var(--helix-size-avatar-sm);--helix-size-tag: var(--helix-size-tag-sm);--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);align-items: center;color: var(--helix-color-foreground-muted);display: flex;flex-wrap: wrap;font-family: var(--helix-font-sans);font-size: var(--helix-text-xs);gap: var(--helix-space-2xs);line-height: var(--helix-leading-normal)}[part="sources"][hidden] {display: none}[part="work"] {color: var(--helix-color-foreground-muted);justify-self: stretch;min-inline-size: 0}[part="work"][hidden] {display: none}[part="content"] {background-color: var(--chat-message-background-color, color-mix(in oklab, var(--helix-color-foreground) 14%, transparent));border-radius: var(--chat-message-radius, var(--helix-radii-md));color: var(--chat-message-color, var(--helix-color-foreground));font-family: var(--helix-font-sans);font-size: var(--helix-text-sm);line-height: var(--helix-leading-normal);padding-block: var(--chat-message-padding-block, var(--helix-space-xs));padding-inline: var(--chat-message-padding-inline, var(--helix-space-sm))}:host([separation="plain"]) [part="content"] {background-color: transparent;padding-inline: var(--helix-space-none)}:host([separation="plain"]) [part="body"] {justify-items: stretch;max-inline-size: 100%}:host([separation="plain"]) [part="content"] {inline-size: auto}:host([author="me"]) [part="content"] {background-color: var(--chat-message-background-color-me, color-mix(in oklab, var(--helix-color-primary) 28%, transparent));color: var(--chat-message-color-me, var(--chat-message-color, var(--helix-color-foreground)))}[part="meta"] {align-items: center;color: var(--chat-message-meta-color, var(--helix-color-foreground-muted));display: flex;font-family: var(--helix-font-sans);font-size: var(--helix-text-xs);gap: var(--helix-space-2xs)}:host([author="me"]) [part="meta"] {justify-content: flex-end}[part="content"] {inline-size: fit-content;max-inline-size: 100%;min-inline-size: 0;overflow-x: auto}[part="content"] slot[name="indicator"] {display: none}:host([state="streaming"]) [part="content"][data-empty] slot[name="indicator"] {display: block}slot[name="indicator"]::slotted(*) {background-color: var(--chat-indicator-background-color, var(--helix-color-surface-sunken));border-radius: var(--helix-radii-full);font-size: var(--helix-text-xs);padding-block: var(--helix-space-2xs);padding-inline: var(--helix-space-xs);--orb-size: var(--helix-size-icon-sm)}slot[name="indicator"]::slotted(helix-orb) {background-color: transparent;padding: var(--helix-space-none)}:host([state="failed"]) [part="meta"] {color: var(--helix-color-danger)}[part="state"] {align-items: center;display: inline-flex;font-weight: var(--helix-weight-medium);gap: var(--helix-space-2xs)}[part="mark"] {block-size: var(--helix-size-icon-tight);flex: 0 0 auto;inline-size: var(--helix-size-icon-tight)}:host([state="sending"]) [part="content"] {opacity: 0.6}[part="retry"] {background: none;border: 0;border-radius: var(--helix-radii-sm);color: var(--helix-color-foreground);cursor: pointer;font: inherit;font-weight: var(--helix-weight-medium);margin-inline-end: calc(var(--helix-space-2xs) * -1);min-block-size: calc(var(--helix-size-control-tight) - var(--helix-space-2xs));padding-block: var(--helix-space-2xs);padding-inline: var(--helix-space-2xs);text-decoration: underline;text-underline-offset: 0.2em}[part="retry"]:hover {background-color: var(--helix-color-hover)}[part="retry"]:focus-visible {outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);outline-offset: var(--helix-size-focus-offset)}@media print {[part="retry"] {display: none}[part="actions"] {display: none}[part="content"] slot[name="indicator"] {display: none}}`);
+export const styles = createSheet(`:host {display: block}:host(:focus-visible) {outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);outline-offset: calc(var(--helix-size-focus-offset) * -1)}[part="message"] {align-items: start;display: grid;grid-template-columns: auto minmax(0, 1fr)}[part="avatar"] > slot::slotted(*) {margin-inline-end: var(--helix-space-sm)}[part="avatar"] {align-items: center;display: flex;font-size: var(--helix-text-sm);grid-column: 1;line-height: var(--helix-leading-normal);min-block-size: calc(1lh + var(--helix-space-xs) * 2)}[part="body"] {grid-column: 2}:host([author="me"]) [part="avatar"] {display: none}[part="body"] {display: grid;gap: var(--helix-space-2xs);justify-items: start;max-inline-size: min(var(--chat-message-measure, 42rem), 80%)}:host([author="me"]) [part="body"] {justify-items: end;justify-self: end}[part="actions"] {opacity: 0;pointer-events: none;transition: opacity var(--helix-duration-fast) var(--helix-easing-standard)}:host(:hover) [part="actions"], :host(:focus-within) [part="actions"] {opacity: 1;pointer-events: auto}@media (hover: none) {[part="actions"] {opacity: 1;pointer-events: auto}}[part="actions"] {--helix-size-control: calc(var(--helix-size-control-sm) - var(--helix-space-2xs));--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);align-items: center;display: inline-flex;gap: var(--helix-space-2xs)}[part="actions"][hidden] {display: none}[part="sources"] {--helix-size-avatar: var(--helix-size-avatar-sm);--helix-size-tag: var(--helix-size-tag-sm);--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);align-items: center;color: var(--helix-color-foreground-muted);display: flex;flex-wrap: wrap;font-family: var(--helix-font-sans);font-size: var(--helix-text-xs);gap: var(--helix-space-2xs);line-height: var(--helix-leading-normal)}[part="sources"][hidden] {display: none}[part="work"] {color: var(--helix-color-foreground-muted);justify-self: stretch;min-inline-size: 0}[part="work"][hidden] {display: none}[part="attachments"] {display: flex;flex-wrap: wrap;gap: var(--helix-space-2xs);max-inline-size: 100%;min-inline-size: 0}:host([author="me"]) [part="attachments"] {justify-content: flex-end}[part="attachments"][hidden] {display: none}[part="content"] {background-color: var(--chat-message-background-color, color-mix(in oklab, var(--helix-color-foreground) 14%, transparent));border-radius: var(--chat-message-radius, var(--helix-radii-md));color: var(--chat-message-color, var(--helix-color-foreground));font-family: var(--helix-font-sans);font-size: var(--helix-text-sm);line-height: var(--helix-leading-normal);padding-block: var(--chat-message-padding-block, var(--helix-space-xs));padding-inline: var(--chat-message-padding-inline, var(--helix-space-sm))}:host([separation="plain"]) [part="content"] {background-color: transparent;padding-inline: var(--helix-space-none)}:host([separation="plain"]) [part="body"] {justify-items: stretch;max-inline-size: 100%}:host([separation="plain"]) [part="content"] {inline-size: auto}:host([author="me"]) [part="content"] {background-color: var(--chat-message-background-color-me, color-mix(in oklab, var(--helix-color-primary) 28%, transparent));color: var(--chat-message-color-me, var(--chat-message-color, var(--helix-color-foreground)))}[part="meta"] {align-items: center;color: var(--chat-message-meta-color, var(--helix-color-foreground-muted));display: flex;font-family: var(--helix-font-sans);font-size: var(--helix-text-xs);gap: var(--helix-space-2xs)}:host([author="me"]) [part="meta"] {justify-content: flex-end}[part="content"] {inline-size: fit-content;max-inline-size: 100%;min-inline-size: 0;overflow-wrap: break-word;overflow-x: auto}[part="content"] slot[name="indicator"] {display: none}:host([state="streaming"]) [part="content"][data-empty] slot[name="indicator"] {display: block}slot[name="indicator"]::slotted(*) {background-color: var(--chat-indicator-background-color, var(--helix-color-surface-sunken));border-radius: var(--helix-radii-full);font-size: var(--helix-text-xs);padding-block: var(--helix-space-2xs);padding-inline: var(--helix-space-xs);--orb-size: var(--helix-size-icon-sm)}slot[name="indicator"]::slotted(helix-orb) {background-color: transparent;padding: var(--helix-space-none)}:host([state="failed"]) [part="meta"] {color: var(--helix-color-danger)}[part="state"] {align-items: center;display: inline-flex;font-weight: var(--helix-weight-medium);gap: var(--helix-space-2xs)}[part="mark"] {block-size: var(--helix-size-icon-tight);flex: 0 0 auto;inline-size: var(--helix-size-icon-tight)}:host([state="sending"]) [part="content"] {opacity: 0.6}[part="retry"] {background: none;border: 0;border-radius: var(--helix-radii-sm);color: var(--helix-color-foreground);cursor: pointer;font: inherit;font-weight: var(--helix-weight-medium);margin-inline-end: calc(var(--helix-space-2xs) * -1);min-block-size: calc(var(--helix-size-control-tight) - var(--helix-space-2xs));padding-block: var(--helix-space-2xs);padding-inline: var(--helix-space-2xs);text-decoration: underline;text-underline-offset: 0.2em}[part="retry"]:hover {background-color: var(--helix-color-hover)}[part="retry"]:focus-visible {outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);outline-offset: var(--helix-size-focus-offset)}@media print {[part="retry"] {display: none}[part="actions"] {display: none}[part="content"] slot[name="indicator"] {display: none}}`);

package/dist/chat/message/chat-message.d.ts

@@ -18,6 +18,7 @@ import type { CSSResultGroup } from 'lit';
  *
  * @slot - The turn's content.
  * @slot actions - Controls for the turn.
+ * @slot attachments - What the turn carries, such as images or files, above the bubble.
  * @slot avatar - The author's avatar.
  * @slot indicator - The indicator shown before the first token arrives. Replaces the three dots.
  *

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

@@ -1,2 +1,2 @@
 import { createSheet } from '@fusion.dev/helix-core';
-export const styles = createSheet(`:host {--_checkbox-size: var(--checkbox-size, var(--helix-size-checkbox));--_field-control-inline-size: var(--_checkbox-size);display: inline-flex;flex-direction: column;gap: var(--helix-space-2xs)}[part="field"] {align-items: center;cursor: pointer;display: inline-flex;gap: var(--helix-space-xs)}:host(:disabled) [part="field"] {cursor: default}:host(:disabled) {opacity: 0.5}[part="box"] {display: grid;flex: 0 0 auto;place-items: center}[part="box"] > * {grid-area: 1 / 1}[part="control"] {appearance: none;background-color: var(--checkbox-background-color, var(--helix-color-background));block-size: var(--_checkbox-size);border: var(--helix-border-thin) solid var(--checkbox-border-color, var(--helix-color-border));border-radius: var(--helix-radii-sm);cursor: inherit;inline-size: var(--_checkbox-size);margin: var(--helix-space-none);transition: background-color var(--helix-duration-fast) var(--helix-easing-standard), border-color var(--helix-duration-fast) var(--helix-easing-standard)}:host(:not(:disabled)) [part="field"]:hover [part="control"] {border-color: var(--checkbox-border-color, var(--helix-color-foreground-muted))}:host(:state(checked)) [part="control"], :host(:state(indeterminate)) [part="control"] {border-color: var(--checkbox-border-color, var(--checkbox-checked-color, var(--helix-color-foreground)))}[part~="mark"] {background-color: var(--checkbox-mark-color, var(--helix-color-foreground));block-size: var(--_checkbox-size);inline-size: var(--_checkbox-size);mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5 10.2 16.7 18 8.4'/%3E%3C/svg%3E");mask-position: center;mask-repeat: no-repeat;mask-size: 100%;pointer-events: none;scale: 0;transition: scale var(--helix-duration-fast) var(--helix-easing-emphasized)}:host(:state(checked)) [part~="mark"], :host(:state(indeterminate)) [part~="mark"] {scale: 1}[part~="mark-dash"] {mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='M7 12h10'/%3E%3C/svg%3E")}:host(:state(has-check)) [part~="mark"]:not([part~="mark-dash"]), :host(:state(has-dash)) [part~="mark-dash"] {background-color: transparent;color: var(--checkbox-mark-color, var(--helix-color-foreground));display: grid;mask-image: none;place-items: center}slot[name="check"]::slotted(*), slot[name="dash"]::slotted(*) {block-size: var(--checkbox-icon-size, 100%);inline-size: var(--checkbox-icon-size, 100%)}[part="control"]:focus-visible {outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);outline-offset: var(--helix-size-focus-offset)}:host(:state(invalid)) [part="control"], :host(:state(invalid)) [part="field"]:hover [part="control"] {border-color: var(--helix-color-danger)}:host(:state(invalid):state(checked)) [part="control"], :host(:state(invalid):state(indeterminate)) [part="control"] {border-color: var(--helix-color-danger)}:host(:not(:state(has-label))) [part="label"]:not([data-hidden]) {display: none}:host(:is([separation="filled"], [separation="outlined"])) {display: block}:host(:is([separation="filled"], [separation="outlined"])) [part="field"] {align-items: start;background-color: var(--checkbox-card-background-color, var(--helix-color-surface));border: var(--helix-border-thin) solid var(--checkbox-card-border-color, var(--helix-color-border));border-radius: var(--helix-radii-sm);display: flex;gap: var(--helix-space-sm);inline-size: 100%;padding: var(--checkbox-card-padding, var(--helix-space-md));transition: background-color var(--helix-duration-fast) var(--helix-easing-standard), border-color var(--helix-duration-fast) var(--helix-easing-standard)}:host([separation="filled"]) [part="field"] {border-color: transparent}:host(:not(:disabled):is([separation="filled"], [separation="outlined"])) [part="field"]:hover {border-color: var(--helix-color-foreground-muted)}:host(:is([separation="filled"], [separation="outlined"]):state(checked)) [part="field"] {background-color: var(--helix-color-surface-raised);border-color: var(--helix-color-primary);box-shadow: 0 0 0 var(--helix-border-thick) var(--helix-color-primary)}:host(:is([separation="filled"], [separation="outlined"])) [part="field"]:has([part="control"]:focus-visible) {outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);outline-offset: var(--helix-size-focus-offset)}:host(:is([separation="filled"], [separation="outlined"])) [part="control"]:focus-visible {outline: none}:host(:is([separation="filled"], [separation="outlined"])) [part="label"] {font-size: var(--helix-text-md);line-height: var(--helix-leading-normal)}:host(:is([separation="filled"], [separation="outlined"])) [part="box"] {font-size: var(--helix-text-md);line-height: var(--helix-leading-normal);min-block-size: 1lh}@media print {:host {box-shadow: none;print-color-adjust: exact}}`);
+export const styles = createSheet(`:host {--_checkbox-size: var(--checkbox-size, var(--helix-size-checkbox));--_field-control-inline-size: var(--_checkbox-size);display: inline-flex;flex-direction: column;gap: var(--helix-space-2xs)}[part="field"] {align-items: center;cursor: pointer;display: inline-flex;gap: var(--helix-space-xs)}:host(:disabled) [part="field"] {cursor: default}:host(:disabled) {opacity: 0.5}[part="box"] {display: grid;flex: 0 0 auto;place-items: center}[part="box"] > * {grid-area: 1 / 1}[part="control"] {appearance: none;background-color: var(--checkbox-background-color, transparent);block-size: var(--_checkbox-size);border: var(--helix-border-thin) solid var(--checkbox-border-color, var(--helix-color-foreground-subtle));border-radius: var(--helix-radii-sm);cursor: inherit;inline-size: var(--_checkbox-size);margin: var(--helix-space-none);transition: background-color var(--helix-duration-fast) var(--helix-easing-standard), border-color var(--helix-duration-fast) var(--helix-easing-standard)}:host(:not(:disabled)) [part="field"]:hover [part="control"] {border-color: var(--checkbox-border-color, var(--helix-color-foreground-muted))}:host(:state(checked)) [part="control"], :host(:state(indeterminate)) [part="control"] {border-color: var(--checkbox-border-color, var(--checkbox-checked-color, var(--helix-color-foreground)))}[part~="mark"] {background-color: var(--checkbox-mark-color, var(--helix-color-foreground));block-size: var(--_checkbox-size);inline-size: var(--_checkbox-size);mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5 10.2 16.7 18 8.4'/%3E%3C/svg%3E");mask-position: center;mask-repeat: no-repeat;mask-size: 100%;pointer-events: none;scale: 0;transition: scale var(--helix-duration-fast) var(--helix-easing-emphasized)}:host(:state(checked)) [part~="mark"], :host(:state(indeterminate)) [part~="mark"] {scale: 1}[part~="mark-dash"] {mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='M7 12h10'/%3E%3C/svg%3E")}:host(:state(has-check)) [part~="mark"]:not([part~="mark-dash"]), :host(:state(has-dash)) [part~="mark-dash"] {background-color: transparent;color: var(--checkbox-mark-color, var(--helix-color-foreground));display: grid;mask-image: none;place-items: center}slot[name="check"]::slotted(*), slot[name="dash"]::slotted(*) {block-size: var(--checkbox-icon-size, 100%);inline-size: var(--checkbox-icon-size, 100%)}[part="control"]:focus-visible {outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);outline-offset: var(--helix-size-focus-offset)}:host(:state(invalid)) [part="control"], :host(:state(invalid)) [part="field"]:hover [part="control"] {border-color: var(--helix-color-danger)}:host(:state(invalid):state(checked)) [part="control"], :host(:state(invalid):state(indeterminate)) [part="control"] {border-color: var(--helix-color-danger)}:host(:not(:state(has-label))) [part="label"]:not([data-hidden]) {display: none}:host(:is([separation="filled"], [separation="outlined"])) {display: block}:host(:is([separation="filled"], [separation="outlined"])) [part="field"] {align-items: start;background-color: var(--checkbox-card-background-color, var(--helix-color-surface));border: var(--helix-border-thin) solid var(--checkbox-card-border-color, var(--helix-color-border));border-radius: var(--helix-radii-sm);display: flex;gap: var(--helix-space-sm);inline-size: 100%;padding: var(--checkbox-card-padding, var(--helix-space-md));transition: background-color var(--helix-duration-fast) var(--helix-easing-standard), border-color var(--helix-duration-fast) var(--helix-easing-standard)}:host([separation="filled"]) [part="field"] {border-color: transparent}:host(:not(:disabled):is([separation="filled"], [separation="outlined"])) [part="field"]:hover {border-color: var(--helix-color-foreground-muted)}:host(:is([separation="filled"], [separation="outlined"]):state(checked)) [part="field"] {background-color: var(--helix-color-surface-raised);border-color: var(--helix-color-primary);box-shadow: 0 0 0 var(--helix-border-thick) var(--helix-color-primary)}:host(:is([separation="filled"], [separation="outlined"])) [part="field"]:has([part="control"]:focus-visible) {outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);outline-offset: var(--helix-size-focus-offset)}:host(:is([separation="filled"], [separation="outlined"])) [part="control"]:focus-visible {outline: none}:host(:is([separation="filled"], [separation="outlined"])) [part="label"] {font-size: var(--helix-text-md);line-height: var(--helix-leading-normal)}:host(:is([separation="filled"], [separation="outlined"])) [part="box"] {font-size: var(--helix-text-md);line-height: var(--helix-leading-normal);min-block-size: 1lh}@media print {:host {box-shadow: none;print-color-adjust: exact}}`);

package/dist/color-input/root/color-input-root.d.ts

@@ -24,9 +24,7 @@ import '../../color-picker/index.js';
  *
  * @cssproperty --color-input-background-color - Fill behind the field.
  * @cssproperty --color-input-border-color - Color of the panel's edge.
- * @cssproperty --color-input-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.
- *   `--helix-border-floating`, which is `0`, so the panel is told apart by its lift unless a
- *   theme says otherwise.
+ * @cssproperty --color-input-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 --color-input-panel-size - Width of the panel, and so of the square.
  * @cssproperty --color-input-shadow - Shadow under the panel. Defaults to `--helix-shadow-floating`, so the panel keeps a shadow over any content below it.
  *   `--helix-shadow-floating`: a floating surface sits over content nobody can predict, so it

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

@@ -19,8 +19,7 @@ import '../../tag/root/index.js';
  * @cssproperty --combobox-background-color - Fill behind the field.
  * @cssproperty --combobox-border-color - Color of the panel's edge.
  * @cssproperty --combobox-border-width - Width of the panel's edge. Follows
- *   `--helix-border-floating`, which is `0` unless your theme sets it, so the panel's shadow
- *   sets it apart.
+ *   `--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 --combobox-control-size - Smallest the text field shrinks to once tags share its line.
  * @cssproperty --combobox-panel-size - Width of the panel. Follows the field by default.
  * @cssproperty --combobox-shadow - Shadow under the panel. Follows `--helix-shadow-floating`.

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

@@ -1,2 +1,2 @@
 import { createSheet } from '@fusion.dev/helix-core';
-export const styles = createSheet(`helix-dialog::part(surface) {align-self: start;inline-size: min(var(--command-size, 40rem), calc(100vw - var(--helix-space-xl) * 2));margin-block-start: 20vh;padding: var(--helix-space-none)}:host {--option-padding: var(--helix-space-sm)}[part="listbox"] {--listbox-background-color: transparent;border: none;display: block}helix-listbox::part(items) {background-color: transparent;border: none;max-block-size: var(--command-list-size, 22rem);padding-block: var(--helix-space-xs)}helix-listbox::part(search) {border-block-end: var(--helix-border-thin) solid var(--helix-color-border);padding: var(--option-padding)}helix-listbox::part(search-field) {font-size: max(var(--helix-text-field-min), var(--helix-text-md))}:host {--_command-row: var(--helix-space-sm);--option-block-padding: var(--_command-row)}:host([data-density="sm"]), :host(:where([data-density="sm"] *)) {--_command-row: var(--helix-space-2xs)}:host([data-density="lg"]), :host(:where([data-density="lg"] *)) {--_command-row: var(--helix-space-md)}[part="footer"] {align-items: center;border-block-start: var(--helix-border-thin) solid var(--helix-color-border);color: var(--helix-color-foreground-muted);display: flex;font-size: var(--helix-text-xs);gap: var(--helix-space-sm);padding: var(--helix-space-xs) var(--option-padding)}[part="footer"][hidden] {display: none}:host([inline]) {background-color: var(--helix-color-surface);border: var(--helix-border-thin) solid var(--helix-color-border);border-radius: var(--helix-radii-sm);display: block;inline-size: min(var(--command-size, 40rem), 100%);overflow: hidden}@media print {:host {display: none}}`);
+export const styles = createSheet(`helix-dialog::part(surface) {align-self: start;inline-size: min(var(--command-size, 40rem), calc(100vw - var(--helix-space-xl) * 2));margin-block-start: 20vh;padding: var(--helix-space-none)}:host {--option-padding: var(--helix-space-sm)}:host {--dialog-radius: var(--command-radius, var(--helix-radii-sm))}[part="listbox"] {--listbox-background-color: transparent;border: none;display: block}helix-listbox::part(items) {background-color: transparent;border: none;max-block-size: var(--command-list-size, 22rem);padding-block: var(--helix-space-xs)}helix-listbox::part(search) {border-block-end: var(--helix-border-thin) solid var(--helix-color-border);padding: var(--option-padding)}helix-listbox::part(search-field) {font-size: max(var(--helix-text-field-min), var(--helix-text-md))}:host {--_command-row: var(--helix-space-sm);--option-block-padding: var(--_command-row)}:host([data-density="sm"]), :host(:where([data-density="sm"] *)) {--_command-row: var(--helix-space-2xs)}:host([data-density="lg"]), :host(:where([data-density="lg"] *)) {--_command-row: var(--helix-space-md)}[part="footer"] {align-items: center;border-block-start: var(--helix-border-thin) solid var(--helix-color-border);color: var(--helix-color-foreground-muted);display: flex;font-size: var(--helix-text-xs);gap: var(--helix-space-sm);padding: var(--helix-space-xs) var(--option-padding)}[part="footer"][hidden] {display: none}:host([inline]) {background-color: var(--helix-color-surface);border: var(--helix-border-thin) solid var(--helix-color-border);border-radius: var(--helix-radii-sm);display: block;inline-size: min(var(--command-size, 40rem), 100%);overflow: hidden}@media print {:host {display: none}}`);

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

@@ -1,5 +1,5 @@
 import { HelixHeadlessCommand } from '@fusion.dev/helix-headless/command';
-import type { CSSResultGroup } from 'lit';
+import type { CSSResultGroup, PropertyValues } from 'lit';
 import '../../dialog/index.js';
 import '../../listbox/index.js';
 import '../../option/index.js';
@@ -18,11 +18,26 @@ import '../../option/index.js';
  * @documentation https://fusion.dev/helix/components/command
  *
  * @cssproperty --command-list-size - How tall the list grows before it scrolls.
+ * @cssproperty --command-radius - The corners of the palette's panel. Defaults to the dialog's.
  * @cssproperty --command-size - How wide the palette is. Defaults to `40rem`.
  */
 export declare class HelixCommand extends HelixHeadlessCommand {
     static tier: string;
+    /**
+     * The panel's surface: `frosted` or `glass`, as on `Dialog`, which the
+     * palette opens in and hands the value to.
+     *
+     * 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, so a
+     * page whose panels are frosted has a palette that matches. Its strength is
+     * the theme's, as on `Popover`, `Menu` and `Drawer`.
+     *
+     * **No `transparent`, deliberately.** A palette over arbitrary page content
+     * is only readable because it has a ground.
+     */
+    material?: 'frosted' | 'glass';
     static styles: CSSResultGroup;
+    protected updated(changed: PropertyValues): void;
 }
 declare global {
     interface HTMLElementTagNameMap {

package/dist/command/root/command-root.js

@@ -1,6 +1,7 @@
 import { __decorate } from "tslib";
 import { customElement } from '@fusion.dev/helix-core';
 import { HelixHeadlessCommand } from '@fusion.dev/helix-headless/command';
+import { property } from 'lit/decorators.js';
 import '../../dialog/index.js';
 import '../../listbox/index.js';
 import '../../option/index.js';
@@ -9,7 +10,22 @@ import { styles } from './command-root.css.js';
 let HelixCommand = class HelixCommand extends HelixHeadlessCommand {
     static { this.tier = 'helix-'; }
     static { this.styles = [liveStyles, styles]; }
+    updated(changed) {
+        super.updated?.(changed);
+        const dialog = this.renderRoot.querySelector('helix-dialog');
+        if (dialog && dialog.material !== this.material) {
+            if (this.material === undefined) {
+                dialog.removeAttribute('material');
+            }
+            else {
+                dialog.material = this.material;
+            }
+        }
+    }
 };
+__decorate([
+    property({ reflect: true })
+], HelixCommand.prototype, "material", void 0);
 HelixCommand = __decorate([
     customElement('helix-command')
 ], HelixCommand);

package/dist/date-input/root/date-input-root.d.ts

@@ -25,8 +25,7 @@ import '../../tag/root/index.js';
  * @cssproperty --date-input-background-color - The fill behind the field.
  * @cssproperty --date-input-border-color - The color of the panel's border.
  * @cssproperty --date-input-border-width - The width of the panel's border. It
- *   follows `--helix-border-floating`, which is `0`, so the panel stands out by its
- *   shadow unless a theme sets a border.
+ *   follows `--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 --date-input-segment-focus-background-color - The fill behind the
  *   segment with focus, in `segmented`. It follows `--helix-color-primary-surface`.
  * @cssproperty --date-input-segment-focus-color - The text of the segment with

package/dist/device-screen/root/device-screen-root.d.ts

@@ -1,6 +1,7 @@
 import { HelixHeadlessDeviceScreen } from '@fusion.dev/helix-headless/device-screen';
 import type { CSSResultGroup } from 'lit';
 import '../../icon-button/index.js';
+import '../../tooltip/index.js';
 /**
  * @summary A device's screen, drawn from a stream you supply, that sends taps, swipes, keys, and button presses back to the device.
  *

package/dist/device-screen/root/device-screen-root.js

@@ -3,6 +3,7 @@ import { customElement } from '@fusion.dev/helix-core';
 import { HelixHeadlessDeviceScreen } from '@fusion.dev/helix-headless/device-screen';
 import { property } from 'lit/decorators.js';
 import '../../icon-button/index.js';
+import '../../tooltip/index.js';
 import { styles as glyphStyles } from '../../shared/glyph/glyph.css.js';
 import { styles } from './device-screen-root.css.js';
 let HelixDeviceScreen = class HelixDeviceScreen extends HelixHeadlessDeviceScreen {

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.
      *