@fusion.dev/helix 0.218.0 → 0.220.0

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -1,2 +1,2 @@
 import { createSheet } from '@fusion.dev/helix-core';
-export const styles = createSheet(`:host {--_radio-size: var(--radio-size, var(--helix-size-checkbox));display: block}[part="item"] {all: unset;align-items: center;box-sizing: border-box;cursor: pointer;display: inline-flex;gap: var(--helix-space-xs)}:host([disabled]) [part="item"] {cursor: default}:host([disabled]) {opacity: 0.5}[part="box"] {background-color: var(--radio-background-color, var(--helix-color-background));block-size: var(--_radio-size);border: var(--helix-border-thin) solid var(--radio-border-color, var(--helix-color-border));border-radius: var(--helix-radii-full);display: grid;flex: 0 0 auto;inline-size: var(--_radio-size);place-items: center;transition: border-color var(--helix-duration-fast) var(--helix-easing-standard)}:host(:not([disabled])) [part="item"]:hover [part="box"] {border-color: var(--radio-border-color, var(--helix-color-foreground-muted))}:host(:state(selected)) [part="box"] {border-color: var(--radio-border-color, var(--helix-color-foreground))}[part="box"]::after {background-color: var(--radio-mark-color, var(--helix-color-foreground));block-size: calc(var(--_radio-size) * 0.4);border-radius: var(--helix-radii-full);content: "";inline-size: calc(var(--_radio-size) * 0.4);scale: 0;transition: scale var(--helix-duration-fast) var(--helix-easing-emphasized)}:host(:state(selected)) [part="box"]::after {scale: 1}:host(:state(has-indicator)) [part="box"]::after {content: none}slot[name="indicator"]::slotted(*) {block-size: var(--radio-indicator-size, calc(var(--_radio-size) * 0.75));color: var(--radio-mark-color, var(--helix-color-foreground));inline-size: var(--radio-indicator-size, calc(var(--_radio-size) * 0.75));scale: 0;transition: scale var(--helix-duration-fast) var(--helix-easing-emphasized)}:host(:state(selected)) slot[name="indicator"]::slotted(*) {scale: 1}[part="item"]:focus-visible [part="box"] {outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);outline-offset: var(--helix-size-focus-offset)}[part="label"] {color: var(--helix-color-foreground);font-family: var(--helix-font-sans);font-size: var(--helix-text-sm);font-weight: var(--helix-weight-medium);line-height: var(--helix-leading-tight)}:host(:is([separation="filled"], [separation="outlined"])) {display: block}:host(:is([separation="filled"], [separation="outlined"])) [part="item"] {align-items: start;background-color: var(--radio-card-background-color, var(--helix-color-surface));border: var(--helix-border-thin) solid var(--radio-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(--radio-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="item"] {border-color: transparent}:host(:not([disabled]):is([separation="filled"], [separation="outlined"])) [part="item"]:hover {border-color: var(--helix-color-foreground-muted)}:host(:is([separation="filled"], [separation="outlined"]):state(selected)) [part="item"] {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="item"]: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="item"]:focus-visible [part="box"] {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);margin-block-start: calc((1lh - var(--_radio-size)) / 2)}:host(:is([separation="filled"], [separation="outlined"])[hide-control]) [part="box"] {display: none}:host([variant="chip"]) [part="box"] {display: none}:host([variant="chip"]) [part="item"] {--_radio-chip-lift: 2px;align-items: center;background-color: var(--helix-color-surface-sunken);block-size: var(--radio-chip-size, var(--helix-size-control));border-radius: var(--helix-radii-full);color: var(--helix-color-foreground-muted);cursor: pointer;display: inline-flex;inline-size: var(--radio-chip-size, var(--helix-size-control));justify-content: center;padding: 0;transition: background-color var(--helix-duration-fast) var(--helix-easing-standard), box-shadow var(--helix-duration-fast) var(--helix-easing-standard), translate var(--helix-duration-fast) var(--helix-easing-standard)}:host([variant="chip"]:state(selected)) [part="item"] {background-color: var(--helix-color-surface-inverse);box-shadow: var(--helix-shadow-md);color: var(--helix-color-foreground-inverse);translate: 0 calc(var(--_radio-chip-lift) * -1)}:host(:not([disabled])[variant="chip"]) [part="item"]:hover {translate: 0 calc(var(--_radio-chip-lift) / -2)}:host([variant="chip"]) [part="item"]:focus-visible {outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);outline-offset: var(--helix-size-focus-offset)}:host([variant="chip"]) [part="label"] {clip-path: inset(50%);block-size: 1px;inline-size: 1px;overflow: hidden;position: absolute;white-space: nowrap}@media (prefers-reduced-motion: reduce) {:host([variant="chip"]) [part="item"] {transition: none}:host([variant="chip"]:state(selected)) [part="item"], :host(:not([disabled])[variant="chip"]) [part="item"]:hover {translate: none}}@media print {:host {box-shadow: none;print-color-adjust: exact}}`);
+export const styles = createSheet(`:host {--_radio-size: var(--radio-size, var(--helix-size-checkbox));display: block}[part="item"] {all: unset;align-items: center;box-sizing: border-box;cursor: pointer;display: inline-flex;gap: var(--helix-space-xs)}:host([disabled]) [part="item"] {cursor: default}:host([disabled]) {opacity: 0.5}[part="box"] {background-color: var(--radio-background-color, transparent);block-size: var(--_radio-size);border: var(--helix-border-thin) solid var(--radio-border-color, var(--helix-color-foreground-subtle));border-radius: var(--helix-radii-full);display: grid;flex: 0 0 auto;inline-size: var(--_radio-size);place-items: center;transition: border-color var(--helix-duration-fast) var(--helix-easing-standard)}:host(:not([disabled])) [part="item"]:hover [part="box"] {border-color: var(--radio-border-color, var(--helix-color-foreground-muted))}:host(:state(selected)) [part="box"] {border-color: var(--radio-border-color, var(--helix-color-foreground))}[part="box"]::after {background-color: var(--radio-mark-color, var(--helix-color-foreground));block-size: calc(var(--_radio-size) * 0.4);border-radius: var(--helix-radii-full);content: "";inline-size: calc(var(--_radio-size) * 0.4);scale: 0;transition: scale var(--helix-duration-fast) var(--helix-easing-emphasized)}:host(:state(selected)) [part="box"]::after {scale: 1}:host(:state(has-indicator)) [part="box"]::after {content: none}slot[name="indicator"]::slotted(*) {block-size: var(--radio-indicator-size, calc(var(--_radio-size) * 0.75));color: var(--radio-mark-color, var(--helix-color-foreground));inline-size: var(--radio-indicator-size, calc(var(--_radio-size) * 0.75));scale: 0;transition: scale var(--helix-duration-fast) var(--helix-easing-emphasized)}:host(:state(selected)) slot[name="indicator"]::slotted(*) {scale: 1}[part="item"]:focus-visible [part="box"] {outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);outline-offset: var(--helix-size-focus-offset)}[part="label"] {color: var(--helix-color-foreground);font-family: var(--helix-font-sans);font-size: var(--helix-text-sm);font-weight: var(--helix-weight-medium);line-height: var(--helix-leading-tight)}:host(:is([separation="filled"], [separation="outlined"])) {display: block}:host(:is([separation="filled"], [separation="outlined"])) [part="item"] {align-items: start;background-color: var(--radio-card-background-color, var(--helix-color-surface));border: var(--helix-border-thin) solid var(--radio-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(--radio-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="item"] {border-color: transparent}:host(:not([disabled]):is([separation="filled"], [separation="outlined"])) [part="item"]:hover {border-color: var(--helix-color-foreground-muted)}:host(:is([separation="filled"], [separation="outlined"]):state(selected)) [part="item"] {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="item"]: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="item"]:focus-visible [part="box"] {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);margin-block-start: calc((1lh - var(--_radio-size)) / 2)}:host(:is([separation="filled"], [separation="outlined"])[hide-control]) [part="box"] {display: none}:host([variant="chip"]) [part="box"] {display: none}:host([variant="chip"]) [part="item"] {--_radio-chip-lift: 2px;align-items: center;background-color: var(--helix-color-surface-sunken);block-size: var(--radio-chip-size, var(--helix-size-control));border-radius: var(--helix-radii-full);color: var(--helix-color-foreground-muted);cursor: pointer;display: inline-flex;inline-size: var(--radio-chip-size, var(--helix-size-control));justify-content: center;padding: 0;transition: background-color var(--helix-duration-fast) var(--helix-easing-standard), box-shadow var(--helix-duration-fast) var(--helix-easing-standard), translate var(--helix-duration-fast) var(--helix-easing-standard)}:host([variant="chip"]:state(selected)) [part="item"] {background-color: var(--helix-color-surface-inverse);box-shadow: var(--helix-shadow-md);color: var(--helix-color-foreground-inverse);translate: 0 calc(var(--_radio-chip-lift) * -1)}:host(:not([disabled])[variant="chip"]) [part="item"]:hover {translate: 0 calc(var(--_radio-chip-lift) / -2)}:host([variant="chip"]) [part="item"]:focus-visible {outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);outline-offset: var(--helix-size-focus-offset)}:host([variant="chip"]) [part="label"] {clip-path: inset(50%);block-size: 1px;inline-size: 1px;overflow: hidden;position: absolute;white-space: nowrap}@media (prefers-reduced-motion: reduce) {:host([variant="chip"]) [part="item"] {transition: none}:host([variant="chip"]:state(selected)) [part="item"], :host(:not([disabled])[variant="chip"]) [part="item"]:hover {translate: none}}@media print {:host {box-shadow: none;print-color-adjust: exact}}`);

package/dist/scroll-area/root/scroll-area-root.css.js

@@ -1,2 +1,2 @@
 import { createSheet } from '@fusion.dev/helix-core';
-export const styles = createSheet(`:host {display: block;position: relative}[part="viewport"] {block-size: 100%;overflow: auto;overscroll-behavior: contain}[part="viewport"]:focus-visible {outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);outline-offset: calc(var(--helix-size-focus-offset) * -1)}[part="viewport"] {scrollbar-color: var(--scroll-area-thumb-color, var(--helix-scrollbar-thumb-color)) var(--scroll-area-track-color, var(--helix-scrollbar-track-color));scrollbar-width: var(--scroll-area-scrollbar, thin)}[part="viewport"]:hover {scrollbar-color: var(--scroll-area-thumb-hover-color, var(--helix-scrollbar-thumb-hover-color)) var(--scroll-area-track-color, var(--helix-scrollbar-track-color))}:host([scrollbars]) [part="viewport"] {scrollbar-width: none}[part~="scrollbar"] {--_scroll-area-thumb: max(var(--scroll-area-thumb-min-size, var(--helix-space-lg)), var(--scroll-area-thumb-fraction, 1) * 100%);background-color: var(--scroll-area-track-color, var(--helix-scrollbar-track-color));opacity: 0;position: absolute;touch-action: none;transition: opacity var(--helix-duration-fast) var(--helix-easing-standard);user-select: none;z-index: calc(var(--helix-layer-raised) + 1)}[part~="scrollbar-visible"] {opacity: 1}[part~="scrollbar-vertical"] {inline-size: var(--scroll-area-scrollbar-size, var(--helix-space-sm));inset-block: 0;inset-inline-end: 0}[part~="scrollbar-horizontal"] {block-size: var(--scroll-area-scrollbar-size, var(--helix-space-sm));inset-block-end: 0;inset-inline: 0}:host(:state(scrollbar-horizontal)) [part~="scrollbar-vertical"] {inset-block-end: var(--scroll-area-scrollbar-size, var(--helix-space-sm))}:host(:state(scrollbar-vertical)) [part~="scrollbar-horizontal"] {inset-inline-end: var(--scroll-area-scrollbar-size, var(--helix-space-sm))}[part~="thumb"] {background-color: var(--scroll-area-thumb-color, var(--helix-scrollbar-thumb-color));border-radius: var(--helix-radii-full);position: absolute}[part~="thumb"]:hover {background-color: var(--scroll-area-thumb-hover-color, var(--helix-scrollbar-thumb-hover-color))}[part~="thumb-vertical"] {block-size: var(--_scroll-area-thumb);inset-block-start: calc(var(--scroll-area-scroll-fraction, 0) * (100% - var(--_scroll-area-thumb)));inset-inline: var(--helix-border-thick)}[part~="thumb-horizontal"] {inline-size: var(--_scroll-area-thumb);inset-block: var(--helix-border-thick);inset-inline-start: calc(var(--scroll-area-scroll-fraction, 0) * (100% - var(--_scroll-area-thumb)))}[part="corner"] {background-color: var(--scroll-area-track-color, var(--helix-scrollbar-track-color));block-size: var(--scroll-area-scrollbar-size, var(--helix-space-sm));inline-size: var(--scroll-area-scrollbar-size, var(--helix-space-sm));inset-block-end: 0;inset-inline-end: 0;position: absolute}:host::before, :host::after {content: "";opacity: 0;pointer-events: none;position: absolute;transition: opacity var(--helix-duration-fast) var(--helix-easing-standard);z-index: var(--helix-layer-raised)}:host::before {background: linear-gradient(to bottom, var(--scroll-area-fade-color, var(--helix-color-background)), transparent);block-size: var(--scroll-area-fade-block-start, var(--scroll-area-fade, var(--helix-space-xl)));inset-block-start: 0;inset-inline: 0}:host::after {background: linear-gradient(to top, var(--scroll-area-fade-color, var(--helix-color-background)), transparent);block-size: var(--scroll-area-fade-block-end, var(--scroll-area-fade, var(--helix-space-xl)));inset-block-end: 0;inset-inline: 0}:host(:state(more-block-start))::before, :host(:state(more-block-end))::after {opacity: 1}[part="edges"] {--_scroll-area-from-start: to right;--_scroll-area-from-end: to left;inset: 0;pointer-events: none;position: absolute}:host(:dir(rtl)) [part="edges"] {--_scroll-area-from-start: to left;--_scroll-area-from-end: to right}[part="edges"]::before, [part="edges"]::after {content: "";inset-block: 0;opacity: 0;position: absolute;transition: opacity var(--helix-duration-fast) var(--helix-easing-standard);z-index: var(--helix-layer-raised)}[part="edges"]::before {background: linear-gradient(var(--_scroll-area-from-start), var(--scroll-area-fade-color, var(--helix-color-background)), transparent);inline-size: var(--scroll-area-fade-inline-start, var(--scroll-area-fade, var(--helix-space-xl)));inset-inline-start: 0}[part="edges"]::after {background: linear-gradient(var(--_scroll-area-from-end), var(--scroll-area-fade-color, var(--helix-color-background)), transparent);inline-size: var(--scroll-area-fade-inline-end, var(--scroll-area-fade, var(--helix-space-xl)));inset-inline-end: 0}:host(:state(more-inline-start)) [part="edges"]::before, :host(:state(more-inline-end)) [part="edges"]::after {opacity: 1}@media (prefers-reduced-motion: reduce) {:host::before, :host::after, [part="edges"]::before, [part="edges"]::after, [part~="scrollbar"] {transition: none}}@media print {:host {overflow: visible}}`);
+export const styles = createSheet(`:host {display: block;position: relative}[part="viewport"] {block-size: 100%;overflow: auto;overscroll-behavior: contain}[part="viewport"] {scrollbar-color: var(--scroll-area-thumb-color, var(--helix-scrollbar-thumb-color)) var(--scroll-area-track-color, var(--helix-scrollbar-track-color));scrollbar-width: var(--scroll-area-scrollbar, thin)}[part="viewport"]:hover {scrollbar-color: var(--scroll-area-thumb-hover-color, var(--helix-scrollbar-thumb-hover-color)) var(--scroll-area-track-color, var(--helix-scrollbar-track-color))}:host([scrollbars]) [part="viewport"] {scrollbar-width: none}[part~="scrollbar"] {--_scroll-area-thumb: max(var(--scroll-area-thumb-min-size, var(--helix-space-lg)), var(--scroll-area-thumb-fraction, 1) * 100%);background-color: var(--scroll-area-track-color, var(--helix-scrollbar-track-color));opacity: 0;position: absolute;touch-action: none;transition: opacity var(--helix-duration-fast) var(--helix-easing-standard);user-select: none;z-index: calc(var(--helix-layer-raised) + 1)}[part~="scrollbar-visible"] {opacity: 1}[part~="scrollbar-vertical"] {inline-size: var(--scroll-area-scrollbar-size, var(--helix-space-sm));inset-block: 0;inset-inline-end: 0}[part~="scrollbar-horizontal"] {block-size: var(--scroll-area-scrollbar-size, var(--helix-space-sm));inset-block-end: 0;inset-inline: 0}:host(:state(scrollbar-horizontal)) [part~="scrollbar-vertical"] {inset-block-end: var(--scroll-area-scrollbar-size, var(--helix-space-sm))}:host(:state(scrollbar-vertical)) [part~="scrollbar-horizontal"] {inset-inline-end: var(--scroll-area-scrollbar-size, var(--helix-space-sm))}[part~="thumb"] {background-color: var(--scroll-area-thumb-color, var(--helix-scrollbar-thumb-color));border-radius: var(--helix-radii-full);position: absolute}[part~="thumb"]:hover {background-color: var(--scroll-area-thumb-hover-color, var(--helix-scrollbar-thumb-hover-color))}[part~="thumb-vertical"] {block-size: var(--_scroll-area-thumb);inset-block-start: calc(var(--scroll-area-scroll-fraction, 0) * (100% - var(--_scroll-area-thumb)));inset-inline: var(--helix-border-thick)}[part~="thumb-horizontal"] {inline-size: var(--_scroll-area-thumb);inset-block: var(--helix-border-thick);inset-inline-start: calc(var(--scroll-area-scroll-fraction, 0) * (100% - var(--_scroll-area-thumb)))}[part="corner"] {background-color: var(--scroll-area-track-color, var(--helix-scrollbar-track-color));block-size: var(--scroll-area-scrollbar-size, var(--helix-space-sm));inline-size: var(--scroll-area-scrollbar-size, var(--helix-space-sm));inset-block-end: 0;inset-inline-end: 0;position: absolute}[part="viewport"], [part="edges"] {--_scroll-area-from-start: to right;--_scroll-area-from-end: to left}:host(:dir(rtl)) [part="viewport"], :host(:dir(rtl)) [part="edges"] {--_scroll-area-from-start: to left;--_scroll-area-from-end: to right}[part="viewport"] {--_scroll-area-content-size: calc(100% - var(--scroll-area-gutter-inline-end, 0px)) calc(100% - var(--scroll-area-gutter-block-end, 0px));mask-composite: add, add, intersect, add;mask-position: right top, left bottom, left top, left top;mask-repeat: no-repeat;mask-size: var(--scroll-area-gutter-inline-end, 0px) 100%, 100% var(--scroll-area-gutter-block-end, 0px), var(--_scroll-area-content-size), var(--_scroll-area-content-size);transition: --_scroll-area-depth-block-start var(--helix-duration-fast) var(--helix-easing-standard), --_scroll-area-depth-block-end var(--helix-duration-fast) var(--helix-easing-standard), --_scroll-area-depth-inline-start var(--helix-duration-fast) var(--helix-easing-standard), --_scroll-area-depth-inline-end var(--helix-duration-fast) var(--helix-easing-standard)}:host(:dir(rtl)) [part="viewport"] {mask-position: left top, left bottom, right top, right top}:host(:state(more-block-start)) [part="viewport"] {--_scroll-area-depth-block-start: var(--scroll-area-fade-block-start, var(--scroll-area-fade, var(--helix-space-xl)))}:host(:state(more-block-end)) [part="viewport"] {--_scroll-area-depth-block-end: var(--scroll-area-fade-block-end, var(--scroll-area-fade, var(--helix-space-xl)))}:host(:state(more-inline-start)) [part="viewport"] {--_scroll-area-depth-inline-start: var(--scroll-area-fade-inline-start, var(--scroll-area-fade, var(--helix-space-xl)))}:host(:state(more-inline-end)) [part="viewport"] {--_scroll-area-depth-inline-end: var(--scroll-area-fade-inline-end, var(--scroll-area-fade, var(--helix-space-xl)))}:host(:state(scrolls)) [part="viewport"] {-webkit-mask-image: var(--scroll-area-fade-color, linear-gradient(#000 0 0)), linear-gradient(#000 0 0), linear-gradient(var(--_scroll-area-from-start), transparent 0, #000 var(--_scroll-area-depth-inline-start, 0px), #000 calc(100% - var(--_scroll-area-depth-inline-end, 0px)), transparent 100%), linear-gradient(to bottom, transparent 0, #000 var(--_scroll-area-depth-block-start, 0px), #000 calc(100% - var(--_scroll-area-depth-block-end, 0px)), transparent 100%);mask-image: var(--scroll-area-fade-color, linear-gradient(#000 0 0)), linear-gradient(#000 0 0), linear-gradient(var(--_scroll-area-from-start), transparent 0, #000 var(--_scroll-area-depth-inline-start, 0px), #000 calc(100% - var(--_scroll-area-depth-inline-end, 0px)), transparent 100%), linear-gradient(to bottom, transparent 0, #000 var(--_scroll-area-depth-block-start, 0px), #000 calc(100% - var(--_scroll-area-depth-block-end, 0px)), transparent 100%)}:host::before, :host::after {content: "";opacity: 0;pointer-events: none;position: absolute;transition: opacity var(--helix-duration-fast) var(--helix-easing-standard);z-index: var(--helix-layer-raised)}:host::before {background: linear-gradient(to bottom, var(--scroll-area-fade-color), transparent);block-size: var(--scroll-area-fade-block-start, var(--scroll-area-fade, var(--helix-space-xl)));inset-block-start: 0;inset-inline: 0}:host::after {background: linear-gradient(to top, var(--scroll-area-fade-color), transparent);block-size: var(--scroll-area-fade-block-end, var(--scroll-area-fade, var(--helix-space-xl)));inset-block-end: 0;inset-inline: 0}:host(:state(more-block-start))::before, :host(:state(more-block-end))::after {opacity: 1}[part="edges"] {inset: 0;pointer-events: none;position: absolute}[part="edges"]::before, [part="edges"]::after {content: "";inset-block: 0;opacity: 0;position: absolute;transition: opacity var(--helix-duration-fast) var(--helix-easing-standard);z-index: var(--helix-layer-raised)}[part="edges"]::before {background: linear-gradient(var(--_scroll-area-from-start), var(--scroll-area-fade-color), transparent);inline-size: var(--scroll-area-fade-inline-start, var(--scroll-area-fade, var(--helix-space-xl)));inset-inline-start: 0}[part="edges"]::after {background: linear-gradient(var(--_scroll-area-from-end), var(--scroll-area-fade-color), transparent);inline-size: var(--scroll-area-fade-inline-end, var(--scroll-area-fade, var(--helix-space-xl)));inset-inline-end: 0}:host(:state(more-inline-start)) [part="edges"]::before, :host(:state(more-inline-end)) [part="edges"]::after {opacity: 1}[part="viewport"]:focus-visible ~ [part="edges"] {outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);outline-offset: calc(var(--helix-size-focus-offset) * -1)}@media (prefers-reduced-motion: reduce) {:host::before, :host::after, [part="edges"]::before, [part="edges"]::after, [part="viewport"], [part~="scrollbar"] {transition: none}}@media print {:host {overflow: visible}}`);

package/dist/scroll-area/root/scroll-area-root.d.ts

@@ -8,6 +8,17 @@ import type { CSSResultGroup } from 'lit';
  * styled to match the design system. The base class measures which edges have
  * content past them.
  *
+ * **The content fades out toward each edge that has more past it.** The fade
+ * is a mask on the viewport, so the surface behind the scroll area shows
+ * through it: the page, a card, or a translucent pane. Set the depth with
+ * `--scroll-area-fade`, or one edge's depth with its own property, and use `0`
+ * to keep an edge from fading. A scrollbar that takes room beside the content
+ * stays out of the mask.
+ *
+ * **Set `--scroll-area-fade-color` to paint the fades.** Each fade is then a
+ * gradient from that color over the content, and there is no mask. Use it for
+ * a scroll area on a solid ground, in the ground's color or one of your own.
+ *
  * Under `scrollbars`, the browser's scrollbar is hidden and the component's own
  * are drawn over the content at the edge, in the same colors.
  *
@@ -17,10 +28,10 @@ import type { CSSResultGroup } from 'lit';
  * @aliases Scroller, Overflow, Scroll container
  * @documentation https://fusion.dev/helix/components/scroll-area
  *
- * @cssproperty --scroll-area-fade - The depth of the fades at both edges.
+ * @cssproperty --scroll-area-fade - The depth of the fade at each edge.
  * @cssproperty --scroll-area-fade-block-end - The depth of the bottom fade, or `0` to remove it.
  * @cssproperty --scroll-area-fade-block-start - The depth of the top fade, or `0` to remove it.
- * @cssproperty --scroll-area-fade-color - The color the fades blend into, which is the background behind the box.
+ * @cssproperty --scroll-area-fade-color - The color to paint the fades in, as a gradient over the content at each edge. Unset, the fades are a mask.
  * @cssproperty --scroll-area-fade-inline-end - The depth of the fade at the inline end, or `0` to remove it.
  * @cssproperty --scroll-area-fade-inline-start - The depth of the fade at the inline start, or `0` to remove it.
  * @cssproperty --scroll-area-scrollbar - The scrollbar width, as a `scrollbar-width` keyword.
@@ -32,6 +43,7 @@ import type { CSSResultGroup } from 'lit';
  */
 export declare class HelixScrollArea extends HelixHeadlessScrollArea {
     static styles: CSSResultGroup;
+    connectedCallback(): void;
 }
 declare global {
     interface HTMLElementTagNameMap {

package/dist/scroll-area/root/scroll-area-root.js

@@ -2,8 +2,37 @@ import { __decorate } from "tslib";
 import { customElement } from '@fusion.dev/helix-core';
 import { HelixHeadlessScrollArea } from '@fusion.dev/helix-headless/scroll-area';
 import { styles } from './scroll-area-root.css.js';
+const DEPTHS = [
+    '--_scroll-area-depth-block-end',
+    '--_scroll-area-depth-block-start',
+    '--_scroll-area-depth-inline-end',
+    '--_scroll-area-depth-inline-start',
+];
+let registered = false;
+function registerDepths() {
+    if (registered || typeof CSS === 'undefined' || !('registerProperty' in CSS)) {
+        return;
+    }
+    registered = true;
+    for (const name of DEPTHS) {
+        try {
+            CSS.registerProperty({
+                inherits: false,
+                initialValue: '0px',
+                name,
+                syntax: '<length-percentage>',
+            });
+        }
+        catch {
+        }
+    }
+}
 let HelixScrollArea = class HelixScrollArea extends HelixHeadlessScrollArea {
     static { this.styles = styles; }
+    connectedCallback() {
+        super.connectedCallback();
+        registerDepths();
+    }
 };
 HelixScrollArea = __decorate([
     customElement('helix-scroll-area')

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

@@ -20,8 +20,7 @@ import '../../listbox/index.js';
  *
  * @cssproperty --select-border-color - Color of the panel's edge.
  * @cssproperty --select-border-width - Width of the panel's edge. Defaults to
- *   `--helix-border-floating`, which is `0`, so the panel stands out by its shadow unless
- *   your theme sets a width.
+ *   `--helix-border-floating`, a hairline, so the panel has an edge as well as its shadow over a dark page. Set it to `0` for the shadow alone.
  * @cssproperty --select-shadow - Shadow under the panel. Defaults to
  *   `--helix-shadow-floating`, because the panel can sit over any content.
  * @cssproperty --select-surface-max-block-size - Maximum height of the panel.

package/dist/shared/floating/entrance.css.js

@@ -1,2 +1,2 @@
 import { createSheet } from '@fusion.dev/helix-core';
-export const styles = createSheet(`[part="surface"] {--_travel: calc(var(--helix-space-2xs) * -1);opacity: 0;scale: 0.96;transform: translateY(var(--_travel));transition: opacity var(--helix-duration-fast) var(--helix-easing-standard), scale var(--helix-duration-fast) var(--helix-easing-emphasized), transform var(--helix-duration-fast) var(--helix-easing-emphasized), display var(--helix-duration-fast) allow-discrete, overlay var(--helix-duration-fast) allow-discrete}[part="surface"][data-placement^="top"] {--_travel: var(--helix-space-2xs);transform-origin: var(--floating-arrow-x, 50%) 100%}[part="surface"][data-placement^="bottom"] {transform-origin: var(--floating-arrow-x, 50%) 0}[part="surface"][data-placed] {opacity: 1;scale: 1;transform: none}@media (prefers-reduced-motion: reduce) {[part="surface"], [part="surface"][data-placed] {scale: 1;transform: none;transition: none}}`);
+export const styles = createSheet(`[part="surface"] {--_travel: calc(var(--helix-space-2xs) * -1);opacity: 0;scale: 0.96;transform: translateY(var(--_travel));transition: opacity var(--helix-duration-fast) var(--helix-easing-standard), scale var(--helix-duration-fast) var(--helix-easing-emphasized), transform var(--helix-duration-fast) var(--helix-easing-emphasized), display var(--helix-duration-fast) allow-discrete, overlay var(--helix-duration-fast) allow-discrete}[part="surface"][data-placement^="top"] {--_travel: var(--helix-space-2xs);transform-origin: var(--floating-arrow-x, 50%) 100%}[part="surface"][data-placement^="bottom"] {transform-origin: var(--floating-arrow-x, 50%) 0}[part="surface"][data-placed] {opacity: 1;scale: 1;transform: none}@media (prefers-reduced-motion: reduce) {[part="surface"], [part="surface"][data-placed] {scale: 1;transform: none;transition: none}}@supports not (overlay: auto) {[part="surface"] {transition-behavior: normal}}`);

package/dist/skip-link/root/skip-link-root.d.ts

@@ -25,8 +25,7 @@ import type { CSSResultGroup } from 'lit';
  * @cssproperty --skip-link-background-color - The background of the link while it is shown.
  * @cssproperty --skip-link-border-color - The border color of the link while it is shown.
  * @cssproperty --skip-link-border-width - The border width of the link while it is shown. Follows
- *   `--helix-border-floating`, which is `0`, so the link is set apart by its shadow unless a
- *   theme sets a border.
+ *   `--helix-border-floating`, a hairline. Set it to `0` for the shadow alone.
  * @cssproperty --skip-link-color - The text color of the link while it is shown.
  * @cssproperty --skip-link-font-size - The size of the link's text.
  * @cssproperty --skip-link-inset-block - How far the shown link sits from the top of the viewport.

package/dist/spatial-bar-chart/root/spatial-bar-chart-root.css.js

@@ -1,2 +1,2 @@
 import { createSheet } from '@fusion.dev/helix-core';
-export const styles = createSheet(`:host {display: block}[part="plot"] {background-color: var(--helix-color-surface-sunken);aspect-ratio: 4 / 3;block-size: var(--spatial-bar-chart-block-size, auto);inline-size: 100%;max-block-size: var(--spatial-bar-chart-block-size, 22em);border-radius: var(--helix-radii-md);overflow: hidden;position: relative}::slotted(*) {inset: 0;position: absolute}:host([no-box]) [part="plot"] {background-color: transparent}[part="plot"]:focus-visible {outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);outline-offset: var(--helix-size-focus-offset)}[part="fallback"] {inset: var(--helix-space-md);position: absolute}[part="fallback"][hidden] {display: none}[part="drawing"] {block-size: 100%;display: block;font-family: var(--helix-font-sans);inline-size: 100%;overflow: visible;touch-action: pan-y;user-select: none}[part="grid"] {fill: none;opacity: 0.35;stroke: var(--helix-color-foreground-muted);stroke-width: var(--helix-border-thin);vector-effect: non-scaling-stroke}[part="tick"] {fill: var(--helix-color-foreground-muted);font-weight: var(--helix-weight-medium)}[part="axis-name"] {fill: var(--helix-color-foreground);font-weight: var(--helix-weight-semibold)}[part~="bar"] {--_spatial-bar-chart-color: var(--chart-series, var(--helix-color-primary))}[part="face"] {--_spatial-bar-chart-face: oklch(from var(--_spatial-bar-chart-color) calc(l - var(--spatial-bar-chart-shade, 0) * 0.5) c h);--_spatial-bar-chart-edge: oklch(from var(--_spatial-bar-chart-face) calc(l + clamp(-0.08, (0.6 - l) * 1000, 0.1)) c h);fill: var(--_spatial-bar-chart-fill, var(--_spatial-bar-chart-face));fill-opacity: calc(var(--_spatial-bar-chart-area, 1) * var(--_spatial-bar-chart-through, 1));stroke: var(--_spatial-bar-chart-line, var(--_spatial-bar-chart-edge));stroke-linejoin: round;stroke-opacity: var(--_spatial-bar-chart-through, 1);stroke-width: var(--helix-border-thin);vector-effect: non-scaling-stroke}:host([emphasis="outlined"]) [part="face"] {--_spatial-bar-chart-fill: color-mix(in oklab, var(--_spatial-bar-chart-face) 60%, var(--helix-color-background));--_spatial-bar-chart-line: var(--_spatial-bar-chart-color)}:host([emphasis="subtle"]) [part="face"] {--_spatial-bar-chart-area: 0.2;--_spatial-bar-chart-line: var(--_spatial-bar-chart-color)}:host([material="glass"]) {--_spatial-bar-chart-through: calc(0.62 * var(--helix-material-opacity))}:host([material="frosted"]) {--_spatial-bar-chart-through: calc(0.88 * var(--helix-material-opacity))}foreignObject > [part="mark"] {translate: -50% -50%}[part="ring"] {fill: none;pointer-events: none;stroke: var(--helix-color-foreground);stroke-width: var(--helix-border-thick);vector-effect: non-scaling-stroke}[part="ring-behind"] {fill: none;opacity: 0.6;pointer-events: none;stroke: var(--helix-color-foreground);stroke-dasharray: 3px 2px;stroke-width: var(--helix-border-thin);vector-effect: non-scaling-stroke}[part="live"], [part="summary"], [part="table"] {block-size: 1px;clip-path: inset(50%);inline-size: 1px;margin: var(--helix-space-none);overflow: hidden;position: absolute;white-space: nowrap}[part="empty"], [part="loading"] {color: var(--helix-color-foreground-muted);font-family: var(--helix-font-sans);font-size: var(--helix-text-sm);margin: var(--helix-space-none);text-align: center}@media print {[part="face"] {stroke: var(--helix-color-border)}}@media (forced-colors: active) {[part="face"] {forced-color-adjust: none;stroke: CanvasText}[part="grid"] {stroke: CanvasText}[part="tick"], [part="axis-name"] {fill: CanvasText}[part="ring"], [part="ring-behind"] {stroke: Highlight}}`);
+export const styles = createSheet(`:host {display: block}:host {--spatial-bar-chart-tone-accent: var(--helix-color-accent);--spatial-bar-chart-tone-danger: var(--helix-color-danger);--spatial-bar-chart-tone-info: var(--helix-color-info);--spatial-bar-chart-tone-muted: var(--helix-color-foreground-subtle);--spatial-bar-chart-tone-primary: var(--helix-color-primary);--spatial-bar-chart-tone-success: var(--helix-color-success);--spatial-bar-chart-tone-warning: var(--helix-color-warning)}[part="plot"] {background-color: var(--helix-color-surface-sunken);aspect-ratio: 4 / 3;block-size: var(--spatial-bar-chart-block-size, auto);inline-size: 100%;max-block-size: var(--spatial-bar-chart-block-size, 22em);border-radius: var(--helix-radii-md);overflow: hidden;position: relative}::slotted(*) {inset: 0;position: absolute}:host([no-box]) [part="plot"], :host([variant="row"]) [part="plot"], :host([variant="diagonal"]) [part="plot"] {background-color: transparent}[part="plot"]:focus-visible {outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);outline-offset: var(--helix-size-focus-offset)}[part="fallback"] {font-size: var(--helix-text-xs);inset: var(--helix-space-md);position: absolute}:host([variant]) [part="fallback"] {column-gap: var(--spatial-bar-chart-bar-size, normal)}[part="fallback"][hidden] {display: none}[part="drawing"] {block-size: 100%;display: block;font-family: var(--helix-font-sans);inline-size: 100%;overflow: visible;touch-action: pan-y;user-select: none}[part="grid"] {fill: none;opacity: 0.35;stroke: var(--helix-color-foreground-muted);stroke-width: var(--helix-border-thin);vector-effect: non-scaling-stroke}[part="tick"] {fill: var(--helix-color-foreground-muted);font-weight: var(--helix-weight-medium)}[part="axis-name"] {fill: var(--helix-color-foreground);font-weight: var(--helix-weight-semibold)}[part="floor"] {fill: none;stroke: var(--helix-color-border);stroke-linejoin: round;stroke-width: var(--helix-border-thin);vector-effect: non-scaling-stroke}[part="tick"][data-tone] {fill: var(--chart-series, var(--helix-color-foreground-muted))}[part="value"] {fill: var(--helix-color-foreground);font-variant-numeric: tabular-nums;font-weight: var(--helix-weight-semibold)}[part~="bar"] {--_spatial-bar-chart-color: var(--chart-series, var(--helix-color-primary))}[part="face"] {--_spatial-bar-chart-face: oklch(from var(--_spatial-bar-chart-color) calc(l - var(--spatial-bar-chart-shade, 0) * 0.5) c h);--_spatial-bar-chart-edge: oklch(from var(--_spatial-bar-chart-face) calc(l + clamp(-0.08, (0.6 - l) * 1000, 0.1)) c h);fill: var(--_spatial-bar-chart-fill, var(--_spatial-bar-chart-face));fill-opacity: calc(var(--_spatial-bar-chart-area, 1) * var(--_spatial-bar-chart-through, 1));stroke: var(--_spatial-bar-chart-line, var(--_spatial-bar-chart-edge));stroke-linejoin: round;stroke-opacity: var(--_spatial-bar-chart-through, 1);stroke-width: var(--helix-border-thin);vector-effect: non-scaling-stroke}:host([emphasis="outlined"]) [part="face"] {--_spatial-bar-chart-fill: color-mix(in oklab, var(--_spatial-bar-chart-face) 60%, var(--helix-color-background));--_spatial-bar-chart-line: var(--_spatial-bar-chart-color)}:host([emphasis="subtle"]) [part="face"] {--_spatial-bar-chart-area: 0.2;--_spatial-bar-chart-line: var(--_spatial-bar-chart-color)}:host([emphasis="muted"]) [part="face"] {--_spatial-bar-chart-fill: color-mix(in oklab, var(--helix-color-foreground) calc(30% - var(--spatial-bar-chart-shade, 0) * 66%), var(--helix-color-surface));--_spatial-bar-chart-line: color-mix(in oklab, var(--helix-color-foreground) 10%, transparent)}:host([emphasis="muted"]) [part~="bar"][data-tone] [part="face"] {--_spatial-bar-chart-fill: color-mix(in oklab, var(--_spatial-bar-chart-color) calc(100% - var(--spatial-bar-chart-shade, 0) * 130%), var(--helix-color-surface))}:host([emphasis="muted"]) [part="glow"] {fill: color-mix(in oklab, var(--chart-series, var(--helix-color-primary)) 40%, transparent)}:host([material="glass"]) {--_spatial-bar-chart-through: calc(0.62 * var(--helix-material-opacity))}:host([material="frosted"]) {--_spatial-bar-chart-through: calc(0.88 * var(--helix-material-opacity))}foreignObject > [part="mark"] {block-size: calc(var(--helix-border-thin) / 50);inline-size: calc(var(--helix-border-thin) / 50);translate: -50% -50%}[part="ring"] {fill: none;pointer-events: none;stroke: var(--helix-color-foreground);stroke-width: var(--helix-border-thick);vector-effect: non-scaling-stroke}[part="ring-behind"] {fill: none;opacity: 0.6;pointer-events: none;stroke: var(--helix-color-foreground);stroke-dasharray: 3px 2px;stroke-width: var(--helix-border-thin);vector-effect: non-scaling-stroke}[part="live"], [part="summary"], [part="table"] {block-size: 1px;clip-path: inset(50%);inline-size: 1px;margin: var(--helix-space-none);overflow: hidden;position: absolute;white-space: nowrap}[part="empty"], [part="loading"] {color: var(--helix-color-foreground-muted);font-family: var(--helix-font-sans);font-size: var(--helix-text-sm);margin: var(--helix-space-none);text-align: center}@media print {[part="face"] {stroke: var(--helix-color-border)}}@media (forced-colors: active) {[part="face"] {forced-color-adjust: none;stroke: CanvasText}[part="grid"], [part="floor"] {stroke: CanvasText}[part="tick"], [part="axis-name"], [part="value"] {fill: CanvasText}[part="ring"], [part="ring-behind"] {stroke: Highlight}[part="glow"] {display: none}}`);

package/dist/spatial-bar-chart/root/spatial-bar-chart-root.d.ts

@@ -16,6 +16,7 @@ import '../../tooltip/index.js';
  * @groups charts
  * @documentation https://fusion.dev/helix/components/spatial-bar-chart
  *
+ * @cssproperty --spatial-bar-chart-bar-size - How wide each bar of a `row` or a `diagonal` stands on the page, whatever the number of bars: the row is as long as its bars make it, centered in the plot, and the tallest bar stands as high as the plot has room for, and no taller than the row is long and a quarter again, so one bar stands as a block. `fits` says how many bars the plot holds. Unset, the row fills the plot's width.
  * @cssproperty --spatial-bar-chart-block-size - How tall the plot is. By default, three quarters of its width and 22em at most.
  */
 export declare class HelixSpatialBarChart extends HelixHeadlessSpatialBarChart {
@@ -30,11 +31,18 @@ export declare class HelixSpatialBarChart extends HelixHeadlessSpatialBarChart {
      * reflected property takes no default, and `solid` writes it out. A
      * renderer draws the bars the same way.
      *
+     * **`muted` draws every bar in the neutral ink**, so the one bar whose cell
+     * names a tone, such as `data-tone="primary"`, is the bar in color, with a
+     * soft glow in its tone: one reading lit among the others, such as today
+     * among a week. Each top takes the most ink and each side less, as a
+     * colored bar's faces do. A renderer draws the neutral bars and the toned
+     * one, without the glow.
+     *
      * It composes with `material`: emphasis decides what is drawn, and material
      * how much of it comes through. The outline on the bar the keys rest on
      * keeps its own ink.
      */
-    emphasis?: 'outlined' | 'solid' | 'subtle';
+    emphasis?: 'muted' | 'outlined' | 'solid' | 'subtle';
     /**
      * How much of each mark comes through, as on every chart: `glass` admits the
      * most of what is behind it, `frosted` less, and absent is opaque. The

package/dist/strands/renderer.d.ts

@@ -13,6 +13,8 @@ export declare const MAX_DUST: number;
 export interface StrandsFrame {
     /** How much the glow around the strands adds, as a multiplier. */
     bloom: number;
+    /** Whether the light is drawn alone, with no ground under it, so what is behind shows. */
+    clear: boolean;
     /** How far apart the brightest and dimmest strands are, from `0` to `1`. */
     contrast: number;
     /** How many of the path's points are in use. */

package/dist/strands/renderer.js

@@ -116,6 +116,7 @@ export class StrandsRenderer {
         this.vec3(this.composite, 'uGround', palette.ground);
         this.vec3(this.composite, 'uInk', palette.peak);
         this.float(this.composite, 'uLight', palette.light ? 1 : 0);
+        this.float(this.composite, 'uClear', frame.clear ? 1 : 0);
         this.float(this.composite, 'uGain', (GAIN * frame.gain) / this.scale);
         this.float(this.composite, 'uBloom', BLOOM * frame.bloom);
         gl.bindVertexArray(this.empty);

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

@@ -1,2 +1,2 @@
 import { createSheet } from '@fusion.dev/helix-core';
-export const styles = createSheet(`:host {--_strands-glow: var(--strands-glow, var(--helix-color-primary));--_strands-ground: var(--strands-ground, var(--helix-color-background));--_strands-tint: var(--strands-tint, var(--helix-color-accent));position: relative;display: block;inline-size: 100%;block-size: 100%;background-image: linear-gradient(115deg, var(--_strands-ground) 20%, color-mix(in oklab, var(--_strands-glow) 22%, var(--_strands-ground)) 48%, color-mix(in oklab, var(--_strands-tint) 12%, var(--_strands-ground)) 58%, var(--_strands-ground) 82%);pointer-events: none}:host([travel]) {block-size: auto;inline-size: auto;inset: 0;position: fixed;z-index: var(--helix-layer-beneath)}[part="canvas"] {display: block;inline-size: 100%;block-size: 100%;caret-color: var(--strands-peak, var(--helix-color-primary-hover));color: var(--_strands-glow);column-rule-color: var(--strands-peak, var(--helix-color-primary-active));outline-color: var(--_strands-ground);text-decoration-color: var(--_strands-tint);transition-duration: var(--helix-duration-fast);transition-property: caret-color, color, column-rule-color, outline-color, text-decoration-color}[part="content"] {inset: 0;pointer-events: none;position: absolute}::slotted(*) {pointer-events: auto}[part="canvas"][hidden] {display: none}@media print {:host {display: none}}`);
+export const styles = createSheet(`:host {--_strands-glow: var(--strands-glow, var(--helix-color-primary));--_strands-ground: var(--strands-ground, var(--helix-color-background));--_strands-tint: var(--strands-tint, var(--helix-color-accent));position: relative;display: block;inline-size: 100%;block-size: 100%;background-image: linear-gradient(115deg, var(--_strands-ground) 20%, color-mix(in oklab, var(--_strands-glow) 22%, var(--_strands-ground)) 48%, color-mix(in oklab, var(--_strands-tint) 12%, var(--_strands-ground)) 58%, var(--_strands-ground) 82%);pointer-events: none}:host([clear]) {background-image: none}:host([clear]:state(fallback)) {background-image: linear-gradient(115deg, transparent 20%, color-mix(in oklab, var(--_strands-glow) 22%, transparent) 48%, color-mix(in oklab, var(--_strands-tint) 12%, transparent) 58%, transparent 82%)}:host([travel]) {block-size: auto;inline-size: auto;inset: 0;position: fixed;z-index: var(--helix-layer-beneath)}[part="canvas"] {display: block;inline-size: 100%;block-size: 100%;caret-color: var(--strands-peak, var(--helix-color-primary-hover));color: var(--_strands-glow);column-rule-color: var(--strands-peak, var(--helix-color-primary-active));outline-color: var(--_strands-ground);text-decoration-color: var(--_strands-tint);transition-duration: var(--helix-duration-fast);transition-property: caret-color, color, column-rule-color, outline-color, text-decoration-color}[part="content"] {inset: 0;pointer-events: none;position: absolute}::slotted(*) {pointer-events: auto}[part="canvas"][hidden] {display: none}@media print {:host {display: none}}`);

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

@@ -21,6 +21,10 @@ import { type StrandsVariant } from '../path.js';
  * `at` is nearer, and crosses in one diagonal to the far side. `waves` is sharp
  * strands crossing the full width.
  *
+ * **Clear, over glass.** Set `clear` and the ribbon is drawn without its
+ * ground, so a translucent pane or a frosted window behind the element shows
+ * through, with the light over it.
+ *
  * **Quiet behind words.** `quiet` names elements, such as a hero's words, that
  * the light dims behind to a faint glow, so a bright ribbon can cross the page
  * under them and they stay crisp.
@@ -90,6 +94,16 @@ export declare class HelixStrands extends HelixElement {
      * strands alone, crisp and dimmer, and `1` is the default glow.
      */
     bloom: number;
+    /**
+     * Whether the light is drawn alone, without the ground under it, so what is
+     * behind the element shows through, such as a translucent pane or a window's
+     * glass. The ground still says which way the page runs: light added on a
+     * dark one, ink on a light one.
+     *
+     * Reflected because the stylesheet selects on it: the band under the canvas
+     * shows only while the element falls back, and loses its ground too.
+     */
+    clear: boolean;
     /**
      * How far apart the brightest and dimmest strands are, from `0`, most of
      * them alike, to `1`, a few burning bright over many faint ones. Clamped to

package/dist/strands/root/strands-root.js

@@ -15,6 +15,7 @@ let HelixStrands = class HelixStrands extends HelixElement {
     constructor() {
         super(...arguments);
         this.bloom = 1;
+        this.clear = false;
         this.contrast = 1;
         this.density = 0.8;
         this.depth = 1;
@@ -396,6 +397,7 @@ let HelixStrands = class HelixStrands extends HelixElement {
         const share = (value) => Math.min(1, Math.max(0, value));
         renderer.render({
             bloom: Math.max(0, this.bloom),
+            clear: this.clear,
             contrast: share(this.contrast),
             count: this.count,
             depth: share(this.depth),
@@ -475,6 +477,9 @@ __decorate([
 __decorate([
     property({ converter: numberConverter('bloom', 1) })
 ], HelixStrands.prototype, "bloom", void 0);
+__decorate([
+    property({ reflect: true, type: Boolean })
+], HelixStrands.prototype, "clear", void 0);
 __decorate([
     property({ converter: numberConverter('contrast', 1) })
 ], HelixStrands.prototype, "contrast", void 0);

package/dist/strands/shader.d.ts

@@ -20,5 +20,11 @@ export declare const BLUR_FRAGMENT = "#version 300 es\nprecision highp float;\ni
  * the peak rather than clipping. On a light page added light is invisible, so
  * the same energy darkens the ground toward the peak as ink. A step of noise
  * under a code value hides the banding a slow gradient shows on eight bits.
+ *
+ * **Clear, the light is drawn without the ground**, premultiplied, so the
+ * canvas composites over whatever is behind it. On a dark page it is the light
+ * over black, as much as its brightest channel covers; on a light page, the
+ * ink as much as it darkens. Over the ground it was meant for, it reads as the
+ * ground-drawn ribbon does.
  */
-export declare const COMPOSITE_FRAGMENT = "#version 300 es\nprecision highp float;\nin vec2 vUv;\nuniform sampler2D uScene;\nuniform sampler2D uNear;\nuniform sampler2D uFar;\nuniform vec3 uGround;\nuniform vec3 uInk;\nuniform float uLight;\nuniform float uGain;\nuniform float uBloom;\nout vec4 outColor;\nfloat hash(vec2 p) { return fract(sin(dot(p, vec2(12.9898, 78.233))) * 43758.5453); }\nvoid main() {\n  vec3 e = texture(uScene, vUv).rgb + (texture(uNear, vUv).rgb * 1.1 + texture(uFar, vUv).rgb * 0.9) * uBloom;\n  e *= uGain;\n  vec3 dark = 1.0 - (1.0 - uGround) * exp(-e);\n  float lum = dot(e, vec3(0.3, 0.55, 0.15));\n  vec3 light = mix(uGround, uInk, 1.0 - exp(-lum * 1.4));\n  vec3 c = mix(dark, light, uLight);\n  c += (hash(gl_FragCoord.xy) - 0.5) / 255.0;\n  outColor = vec4(c, 1.0);\n}\n";
+export declare const COMPOSITE_FRAGMENT = "#version 300 es\nprecision highp float;\nin vec2 vUv;\nuniform sampler2D uScene;\nuniform sampler2D uNear;\nuniform sampler2D uFar;\nuniform vec3 uGround;\nuniform vec3 uInk;\nuniform float uLight;\nuniform float uClear;\nuniform float uGain;\nuniform float uBloom;\nout vec4 outColor;\nfloat hash(vec2 p) { return fract(sin(dot(p, vec2(12.9898, 78.233))) * 43758.5453); }\nvoid main() {\n  vec3 e = texture(uScene, vUv).rgb + (texture(uNear, vUv).rgb * 1.1 + texture(uFar, vUv).rgb * 0.9) * uBloom;\n  e *= uGain;\n  vec3 dark = 1.0 - (1.0 - uGround) * exp(-e);\n  float lum = dot(e, vec3(0.3, 0.55, 0.15));\n  float ink = 1.0 - exp(-lum * 1.4);\n  vec3 light = mix(uGround, uInk, ink);\n  vec3 c = mix(dark, light, uLight);\n  float a = 1.0;\n  if (uClear > 0.5) {\n    vec3 shine = 1.0 - exp(-e);\n    a = mix(max(max(shine.r, shine.g), shine.b), ink, uLight);\n    c = mix(shine, uInk * ink, uLight);\n  }\n  c = clamp(c + (hash(gl_FragCoord.xy) - 0.5) / 255.0 * a, 0.0, a);\n  outColor = vec4(c, a);\n}\n";

package/dist/strands/shader.js

@@ -308,6 +308,7 @@ uniform sampler2D uFar;
 uniform vec3 uGround;
 uniform vec3 uInk;
 uniform float uLight;
+uniform float uClear;
 uniform float uGain;
 uniform float uBloom;
 out vec4 outColor;
@@ -317,9 +318,16 @@ void main() {
   e *= uGain;
   vec3 dark = 1.0 - (1.0 - uGround) * exp(-e);
   float lum = dot(e, vec3(0.3, 0.55, 0.15));
-  vec3 light = mix(uGround, uInk, 1.0 - exp(-lum * 1.4));
+  float ink = 1.0 - exp(-lum * 1.4);
+  vec3 light = mix(uGround, uInk, ink);
   vec3 c = mix(dark, light, uLight);
-  c += (hash(gl_FragCoord.xy) - 0.5) / 255.0;
-  outColor = vec4(c, 1.0);
+  float a = 1.0;
+  if (uClear > 0.5) {
+    vec3 shine = 1.0 - exp(-e);
+    a = mix(max(max(shine.r, shine.g), shine.b), ink, uLight);
+    c = mix(shine, uInk * ink, uLight);
+  }
+  c = clamp(c + (hash(gl_FragCoord.xy) - 0.5) / 255.0 * a, 0.0, a);
+  outColor = vec4(c, a);
 }
 `;

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

@@ -1,2 +1,2 @@
 import { createSheet } from '@fusion.dev/helix-core';
-export const styles = createSheet(`:host {--_switch-height: var(--switch-block-size, var(--helix-size-switch));--_switch-width: var(--switch-inline-size, calc(var(--_switch-height) * 1.75));--_switch-inset: calc(var(--helix-space-2xs) / 2);--_field-control-inline-size: var(--_switch-width);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="track"] {background-color: var(--helix-color-surface-sunken);block-size: var(--_switch-height);border: var(--helix-border-thin) solid var(--helix-color-border);border-radius: var(--helix-radii-full);display: grid;flex: 0 0 auto;inline-size: var(--_switch-width);position: relative;transition: background-color var(--helix-duration-fast) var(--helix-easing-standard), border-color var(--helix-duration-fast) var(--helix-easing-standard)}[part="thumb"] {align-items: center;color: var(--switch-icon-color, var(--helix-color-foreground-muted));display: flex;justify-content: center;background-color: var(--switch-thumb-color, var(--helix-color-surface-overlay));block-size: calc(var(--_switch-height) - var(--_switch-inset) * 2);border: var(--helix-border-thin) solid var(--helix-color-border);border-radius: var(--helix-radii-full);inline-size: calc(var(--_switch-height) - var(--_switch-inset) * 2);inset-block-start: 50%;inset-inline-start: calc(var(--_switch-inset) - var(--helix-border-thin));pointer-events: none;position: absolute;translate: 0 -50%;transition: translate var(--helix-duration-fast) var(--helix-easing-emphasized)}:host(:state(checked)) [part="thumb"] {border-color: transparent;color: var(--switch-icon-color, var(--switch-on-color, var(--helix-color-primary-surface)))}[part="thumb"] ::slotted(*) {--icon-size: calc((var(--_switch-height) - var(--_switch-inset) * 2) * 0.7)}:host(:state(checked)) [part="track"] {background-color: var(--switch-on-color, var(--helix-color-primary-surface));border-color: var(--switch-on-color, var(--helix-color-primary-surface))}[part="control"] {appearance: none;block-size: 100%;cursor: inherit;grid-area: 1 / 1;inline-size: 100%;margin: var(--helix-space-none);opacity: 0}:host(:state(checked)) [part="thumb"] {background-color: var(--switch-thumb-color, var(--helix-color-foreground-on-primary));translate: calc(var(--_switch-width) - var(--_switch-height)) -50%}[part="track"]:has([part="control"]:focus-visible) [part="thumb"] {outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);outline-offset: var(--helix-size-focus-offset)}:host(:state(invalid)) [part="track"] {border-color: var(--helix-color-danger)}[part="label"][data-empty] {display: none}@media print {:host {print-color-adjust: exact}}`);
+export const styles = createSheet(`:host {--_switch-height: var(--switch-block-size, var(--helix-size-switch));--_switch-width: var(--switch-inline-size, calc(var(--_switch-height) * 1.75));--_switch-inset: calc(var(--helix-space-2xs) / 2);--_field-control-inline-size: var(--_switch-width);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="track"] {background-color: var(--helix-color-surface-sunken);block-size: var(--_switch-height);border: var(--helix-border-thin) solid var(--helix-color-border);border-radius: var(--helix-radii-full);display: grid;flex: 0 0 auto;inline-size: var(--_switch-width);position: relative;transition: background-color var(--helix-duration-fast) var(--helix-easing-standard), border-color var(--helix-duration-fast) var(--helix-easing-standard)}[part="thumb"] {align-items: center;color: var(--switch-icon-color, light-dark(var(--helix-color-foreground-muted), var(--helix-color-surface-sunken)));display: flex;justify-content: center;background-color: var(--switch-thumb-color, light-dark(var(--helix-color-surface-overlay), var(--helix-color-foreground-muted)));block-size: calc(var(--_switch-height) - var(--_switch-inset) * 2);border: var(--helix-border-thin) solid var(--helix-color-border);border-radius: var(--helix-radii-full);inline-size: calc(var(--_switch-height) - var(--_switch-inset) * 2);inset-block-start: 50%;inset-inline-start: calc(var(--_switch-inset) - var(--helix-border-thin));pointer-events: none;position: absolute;translate: 0 -50%;transition: translate var(--helix-duration-fast) var(--helix-easing-emphasized)}:host(:state(checked)) [part="thumb"] {border-color: transparent;color: var(--switch-icon-color, var(--switch-on-color, var(--helix-color-primary-surface)))}[part="thumb"] ::slotted(*) {--icon-size: calc((var(--_switch-height) - var(--_switch-inset) * 2) * 0.7)}:host(:state(checked)) [part="track"] {background-color: var(--switch-on-color, var(--helix-color-primary-surface));border-color: var(--switch-on-color, var(--helix-color-primary-surface))}[part="control"] {appearance: none;block-size: 100%;cursor: inherit;grid-area: 1 / 1;inline-size: 100%;margin: var(--helix-space-none);opacity: 0}:host(:state(checked)) [part="thumb"] {background-color: var(--switch-thumb-color, var(--helix-color-foreground-on-primary));translate: calc(var(--_switch-width) - var(--_switch-height)) -50%}[part="track"]:has([part="control"]:focus-visible) [part="thumb"] {outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);outline-offset: var(--helix-size-focus-offset)}:host(:state(invalid)) [part="track"] {border-color: var(--helix-color-danger)}[part="label"][data-empty] {display: none}@media print {:host {print-color-adjust: exact}}`);

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

@@ -1,2 +1,2 @@
 import { createSheet } from '@fusion.dev/helix-core';
-export const styles = createSheet(`:host {--_tabs-rule: none;--_tab-radius: var(--helix-radii-sm);--_tab-selected-shadow: var(--helix-shadow-sm);--_tab-selected-surface: var(--helix-color-surface-raised);display: grid;grid-template-rows: auto minmax(0, 1fr);min-block-size: 0}[part="tabs"] {background-image: var(--_tabs-rule, none);background-position: bottom;background-repeat: repeat-x;background-size: 100% var(--helix-border-thin);display: flex;gap: var(--tabs-gap, var(--helix-space-2xs));overflow-x: auto}[part="scroll-start"], [part="scroll-end"] {align-items: center;background-color: var(--tabs-scroll-background-color, var(--helix-color-surface));border: none;color: var(--helix-color-foreground-muted);cursor: pointer;display: inline-flex;flex: none;justify-content: center;padding-inline: var(--helix-space-2xs);position: sticky;z-index: 1}[part="scroll-start"] {inset-inline-start: 0}[part="scroll-end"] {inset-inline-end: 0}[part="scroll-start"][hidden], [part="scroll-end"][hidden] {display: none}[part="scroll-start"] svg, [part="scroll-end"] svg {block-size: var(--helix-size-icon);inline-size: var(--helix-size-icon)}slot[name="scroll-start-icon"]::slotted(*), slot[name="scroll-end-icon"]::slotted(*) {--icon-size: var(--helix-size-icon);block-size: var(--helix-size-icon);inline-size: var(--helix-size-icon)}[part="scroll-start"]:hover, [part="scroll-end"]:hover {color: var(--helix-color-foreground)}:host([orientation="vertical"]) [part="scroll-start"] {inset-block-start: 0;inset-inline-start: auto;padding-block: var(--helix-space-2xs)}:host([orientation="vertical"]) [part="scroll-end"] {inset-block-end: 0;inset-inline-end: auto;padding-block: var(--helix-space-2xs)}:host([variant="underlined"]) {--_tabs-rule: linear-gradient(var(--tabs-rule-color, var(--helix-color-border)), var(--tabs-rule-color, var(--helix-color-border)));--_tab-radius: var(--helix-radii-none);--_tab-selected-shadow: none;--_tab-selected-surface: transparent}:host([variant="segmented"]) [part="tabs"] {--_tab-selected-surface: var(--helix-color-surface-overlay);--_tab-height: 100%;background-color: var(--helix-color-surface-sunken);block-size: var(--helix-size-control);border: var(--helix-border-thin) solid var(--helix-color-border);border-radius: var(--helix-radii-sm);justify-self: start;padding: var(--helix-space-2xs);inline-size: fit-content}[part="panels"] {display: grid;grid-template-rows: minmax(0, 1fr);min-block-size: 0;min-inline-size: 0}[part="indicator"] {background-color: var(--_indicator-color, transparent);block-size: var(--_indicator-block, var(--helix-border-thick));border: var(--_indicator-border, 0) solid var(--_indicator-border-color, transparent);border-radius: var(--tabs-indicator-radius, var(--_indicator-radius, var(--helix-radii-none)));box-shadow: var(--tabs-indicator-shadow, var(--_indicator-shadow, none));inline-size: var(--indicator-inline-size, 0);inset-block-start: 0;inset-inline-start: 0;opacity: 0;position: absolute;translate: calc(var(--indicator-x, 0px) + var(--_indicator-offset-x, 0px)) calc(var(--indicator-y, 0px) + var(--_indicator-offset, 0px));transition: translate var(--helix-duration-normal) var(--helix-easing-emphasized), inline-size var(--helix-duration-normal) var(--helix-easing-emphasized), opacity var(--helix-duration-fast) var(--helix-easing-standard);z-index: var(--helix-layer-base)}[part="indicator"][data-placed] {opacity: 1}[part="tabs"] {position: relative}::slotted(helix-tab) {position: relative;z-index: var(--helix-layer-raised)}:host([variant="underlined"]) [part="indicator"] {--_indicator-block: var(--tabs-indicator-thickness, var(--helix-border-thick));--_indicator-color: var(--tabs-indicator-color, var(--helix-color-primary));--_indicator-offset: calc(var(--indicator-block-size, 0px) - var(--tabs-indicator-thickness, var(--helix-border-thick)))}:host([variant="segmented"]) [part="indicator"] {--_indicator-block: var(--indicator-block-size, 0);--_indicator-color: var(--tabs-indicator-color, var(--helix-color-surface-overlay));--_indicator-radius: calc(var(--helix-radii-sm) - var(--helix-border-thin));--_indicator-shadow: var(--helix-shadow-sm);--_indicator-offset: 0px}:host([variant="segmented"]) {--_tab-selected-surface: transparent}:host(:not([variant])) [part="indicator"] {--_indicator-block: var(--indicator-block-size, 0);--_indicator-border: var(--helix-border-thin);--_indicator-border-color: var(--helix-color-border);--_indicator-color: var(--tabs-indicator-color, var(--helix-color-surface-overlay));--_indicator-radius: var(--helix-radii-sm);--_indicator-shadow: var(--helix-shadow-sm);--_indicator-offset: 0px}:host(:not([variant])) {--_tab-selected-surface: transparent;--_tab-selected-shadow: none}:host([orientation="vertical"]) {--_tabs-inline-sign: 1;--_tabs-panel-padding-block-start: var(--helix-space-none);--_tabs-panel-padding-inline-start: var(--helix-space-md);grid-template-columns: auto minmax(0, 1fr);grid-template-rows: minmax(0, 1fr)}:host([orientation="vertical"]:dir(rtl)) {--_tabs-inline-sign: -1}:host([orientation="vertical"]) [part="tabs"] {align-content: start;background-position: right;background-repeat: repeat-y;background-size: var(--helix-border-thin) 100%;flex-direction: column;overflow-x: visible;overflow-y: auto}:host([orientation="vertical"]:dir(rtl)) [part="tabs"] {background-position: left}:host([orientation="vertical"]) ::slotted(helix-tab) {--_tab-inline-size: 100%;--_tab-justify: flex-start}:host([orientation="vertical"][variant="segmented"]) [part="tabs"] {--_tab-height: initial;block-size: auto;justify-self: start}:host([orientation="vertical"][variant="underlined"]) [part="indicator"] {--_indicator-block: var(--indicator-block-size, 0);--_indicator-offset: 0px;--_indicator-offset-x: calc((var(--indicator-inline-size, 0px) - var(--tabs-indicator-thickness, var(--helix-border-thick))) * var(--_tabs-inline-sign, 1));inline-size: var(--tabs-indicator-thickness, var(--helix-border-thick))}@media print {:host {box-shadow: none;overflow: visible}}`);
+export const styles = createSheet(`:host {--_tabs-rule: none;--_tab-radius: var(--helix-radii-sm);--_tab-selected-shadow: var(--helix-shadow-sm);--_tab-selected-surface: var(--helix-color-surface-raised);display: grid;grid-template-rows: auto minmax(0, 1fr);min-block-size: 0}[part="tabs"] {background-image: var(--_tabs-rule, none);background-position: bottom;background-repeat: repeat-x;background-size: 100% var(--helix-border-thin);display: flex;gap: var(--tabs-gap, var(--helix-space-2xs));overflow-x: auto}[part="scroll-start"], [part="scroll-end"] {align-items: center;background-color: var(--tabs-scroll-background-color, var(--helix-color-surface));border: none;color: var(--helix-color-foreground-muted);cursor: pointer;display: inline-flex;flex: none;justify-content: center;padding-inline: var(--helix-space-2xs);position: sticky;z-index: 1}[part="scroll-start"] {inset-inline-start: 0}[part="scroll-end"] {inset-inline-end: 0}[part="scroll-start"][hidden], [part="scroll-end"][hidden] {display: none}[part="scroll-start"] svg, [part="scroll-end"] svg {block-size: var(--helix-size-icon);inline-size: var(--helix-size-icon)}slot[name="scroll-start-icon"]::slotted(*), slot[name="scroll-end-icon"]::slotted(*) {--icon-size: var(--helix-size-icon);block-size: var(--helix-size-icon);inline-size: var(--helix-size-icon)}[part="scroll-start"]:hover, [part="scroll-end"]:hover {color: var(--helix-color-foreground)}:host([orientation="vertical"]) [part="scroll-start"] {inset-block-start: 0;inset-inline-start: auto;padding-block: var(--helix-space-2xs)}:host([orientation="vertical"]) [part="scroll-end"] {inset-block-end: 0;inset-inline-end: auto;padding-block: var(--helix-space-2xs)}:host([variant="underlined"]) {--_tabs-rule: linear-gradient(var(--tabs-rule-color, var(--helix-color-border)), var(--tabs-rule-color, var(--helix-color-border)));--_tab-radius: var(--helix-radii-none);--_tab-selected-shadow: none;--_tab-selected-surface: transparent}:host([variant="segmented"]) [part="tabs"] {--_tab-selected-surface: var(--helix-color-surface-overlay);--_tab-height: 100%;background-color: var(--helix-color-surface-sunken);block-size: var(--helix-size-control);border: var(--helix-border-thin) solid var(--helix-color-border);border-radius: var(--helix-radii-sm);justify-self: start;padding: var(--helix-space-2xs);inline-size: fit-content}[part="panels"] {display: grid;grid-template-rows: minmax(0, 1fr);min-block-size: 0;min-inline-size: 0}[part="indicator"] {background-color: var(--_indicator-color, transparent);block-size: var(--_indicator-block, var(--helix-border-thick));border: var(--_indicator-border, 0) solid var(--_indicator-border-color, transparent);border-radius: var(--tabs-indicator-radius, var(--_indicator-radius, var(--helix-radii-none)));box-shadow: var(--tabs-indicator-shadow, var(--_indicator-shadow, none));inline-size: var(--indicator-inline-size, 0);inset-block-start: 0;inset-inline-start: 0;opacity: 0;position: absolute;translate: calc(var(--indicator-x, 0px) + var(--_indicator-offset-x, 0px)) calc(var(--indicator-y, 0px) + var(--_indicator-offset, 0px));transition: translate var(--helix-duration-normal) var(--helix-easing-emphasized), inline-size var(--helix-duration-normal) var(--helix-easing-emphasized), opacity var(--helix-duration-fast) var(--helix-easing-standard);z-index: var(--helix-layer-base)}[part="indicator"][data-placed] {opacity: 1}[part="tabs"] {position: relative}::slotted(helix-tab) {position: relative;z-index: var(--helix-layer-raised)}:host([variant="underlined"]) [part="indicator"] {--_indicator-block: var(--tabs-indicator-thickness, var(--helix-border-thick));--_indicator-color: var(--tabs-indicator-color, var(--helix-color-primary));--_indicator-offset: calc(var(--indicator-block-size, 0px) - var(--tabs-indicator-thickness, var(--helix-border-thick)))}:host([variant="segmented"]) [part="indicator"] {--_indicator-block: var(--indicator-block-size, 0);--_indicator-color: var(--tabs-indicator-color, var(--helix-color-surface-overlay));--_indicator-radius: calc(var(--helix-radii-sm) - var(--helix-border-thin));--_indicator-shadow: var(--helix-shadow-sm);--_indicator-offset: 0px}:host([variant="segmented"]) {--_tab-selected-surface: transparent}:host(:not([variant])) [part="indicator"] {--_indicator-block: var(--indicator-block-size, 0);--_indicator-border: var(--helix-border-thin);--_indicator-border-color: var(--helix-color-border);--_indicator-color: var(--tabs-indicator-color, var(--helix-color-surface-overlay));--_indicator-radius: var(--helix-radii-sm);--_indicator-shadow: var(--helix-shadow-sm);--_indicator-offset: 0px}:host(:not([variant])) {--_tab-selected-surface: transparent;--_tab-selected-shadow: none}:host([orientation="vertical"]) {--_tabs-inline-sign: 1;--_tabs-panel-padding-block-start: var(--helix-space-none);--_tabs-panel-padding-inline-start: var(--helix-space-md);grid-template-columns: auto minmax(0, 1fr);grid-template-rows: minmax(0, 1fr)}:host([orientation="vertical"]:dir(rtl)) {--_tabs-inline-sign: -1}:host([orientation="vertical"]) [part="tabs"] {align-content: start;background-position: right;background-repeat: repeat-y;background-size: var(--helix-border-thin) 100%;flex-direction: column;overflow-x: visible;overflow-y: auto}:host([orientation="vertical"]:dir(rtl)) [part="tabs"] {background-position: left}:host([orientation="vertical"]) ::slotted(helix-tab) {--_tab-inline-size: 100%;--_tab-justify: flex-start}:host([orientation="vertical"][variant="segmented"]) [part="tabs"] {--_tab-height: initial;block-size: auto;justify-self: start}:host([orientation="vertical"][variant="underlined"]) [part="indicator"] {--_indicator-block: var(--indicator-block-size, 0);--_indicator-offset: 0px;--_indicator-offset-x: calc((var(--indicator-inline-size, 0px) - var(--tabs-indicator-thickness, var(--helix-border-thick))) * var(--_tabs-inline-sign, 1));inline-size: var(--tabs-indicator-thickness, var(--helix-border-thick))}@media print {:host {box-shadow: none;overflow: visible}}:host([emphasis="subtle"]:not([variant])) [part="indicator"], :host([emphasis="subtle"][variant="segmented"]) [part="indicator"] {--_indicator-border: 0;--_indicator-color: var(--tabs-indicator-color, color-mix(in oklab, var(--helix-color-foreground) 8%, transparent));--_indicator-shadow: none}:host([emphasis="subtle"][variant="underlined"]) [part="indicator"] {--_indicator-color: var(--tabs-indicator-color, var(--helix-color-foreground))}:host([dismiss-marks="hover"]) {--_tabs-dismiss-rest: 0}`);