@fusion.dev/helix 0.177.2 → 0.179.0

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

@@ -4,4 +4,8 @@ export const styles = createSheet(`:host {--_aura-glow: var(--aura-glow, var(--h
 color-mix(in oklab, var(--_aura-glow) 38%, var(--_aura-ground)) 0%,
 var(--_aura-haze) 38%,
 var(--_aura-ground) 78%
-);}:host {pointer-events: none;}:host([interactive]) {pointer-events: auto;}[part="canvas"] {display: block;inline-size: 100%;block-size: 100%;caret-color: var(--aura-peak, var(--helix-color-foreground));color: var(--_aura-glow);column-rule-color: var(--aura-peak, var(--helix-color-primary-active));outline-color: var(--_aura-ground);text-decoration-color: var(--_aura-haze);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;}}`);
+);}:host {pointer-events: none;}:host([interactive]) {pointer-events: auto;}[part="canvas"] {display: block;inline-size: 100%;block-size: 100%;caret-color: var(--aura-peak, var(--helix-color-foreground));color: var(--_aura-glow);column-rule-color: var(--aura-peak, var(--helix-color-primary-active));outline-color: var(--_aura-ground);text-decoration-color: var(--_aura-haze);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;}[part="pause"] {align-items: center;background-color: var(--aura-pause-background-color, var(--helix-color-surface-overlay));block-size: var(--helix-size-control-sm);border: var(--helix-border-floating) solid var(--helix-color-border);border-radius: var(--helix-radii-sm);box-shadow: var(--helix-shadow-floating);color: var(--helix-color-foreground);cursor: pointer;display: inline-flex;inline-size: var(--helix-size-control-sm);inset-block-end: var(--helix-space-sm);inset-inline-end: var(--helix-space-sm);justify-content: center;padding: 0;pointer-events: auto;position: absolute;}[part="pause-mark"] {block-size: var(--helix-size-icon-sm);inline-size: var(--helix-size-icon-sm);}[part="pause"]:hover {background-color: color-mix(
+in oklab,
+var(--helix-color-foreground) 10%,
+var(--aura-pause-background-color, var(--helix-color-surface-overlay))
+);}[part="pause"]:focus-visible {outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);outline-offset: var(--helix-size-focus-offset);}@media (prefers-reduced-motion: reduce) {[part="pause"] {display: none;}}@media print {:host {display: none;}}`);

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

@@ -21,8 +21,8 @@ import type { CSSResultGroup, PropertyValues, TemplateResult } from 'lit';
  * The shader stops drawing in these cases:
  * - The element is off screen or in a background tab.
  * - `prefers-reduced-motion` is set. The element shows one still frame.
- * - `paused` is set, from a pause control on your page. The element holds the
- *   frame it shows.
+ * - `paused` is set, from a pause control on your page or from the aura's own
+ *   under `pause-control`. The element holds the frame it shows.
  * - The browser takes back the drawing context, on a GPU reset or past its
  *   limit of about sixteen contexts. The gradient shows until the context
  *   returns.
@@ -46,6 +46,13 @@ import type { CSSResultGroup, PropertyValues, TemplateResult } from 'lit';
  * changed while the aura draws, by a class, a style or the color mode,
  * reaches the shader on the next frame.
  *
+ * **`pause-control` draws a control that stops the motion and starts it
+ * again**, in the trailing corner of the field, as WCAG 2.2.2 asks of
+ * anything that moves for more than five seconds. It is a toggle button named
+ * by `pause-label`, which says it is pressed while the field is paused, and a
+ * press sends `change`. A reader who asked for reduced motion sees no motion
+ * and no control.
+ *
  * Where the gradient shows in place of the shader, the aura matches
  * `:state(fallback)` and sends `helix-aura-fallback` with the reason.
  *
@@ -57,20 +64,29 @@ import type { CSSResultGroup, PropertyValues, TemplateResult } from 'lit';
  *
  * @slot - Content drawn over the field, such as a heading.
  *
+ * @event {Event} change - Fired when the aura's own pause control pauses the field or starts it again.
  * @event {HelixAuraFallbackEvent} helix-aura-fallback - Fired each time the aura stops drawing its shader and shows its gradient, with the reason.
  *
  * @csspart canvas - The surface the shader draws into.
  * @csspart content - The box over the field that holds the content. It covers the aura.
+ * @csspart pause - The control that pauses the field and starts it again, drawn under `pause-control`.
+ * @csspart pause-mark - The glyph on the pause control: pause while the field moves, play while it is paused.
  *
  * @cssproperty --aura-glow - The bright stop of the ramp. Defaults to `--helix-color-primary`.
  * @cssproperty --aura-ground - The page the field fades into. Defaults to `--helix-color-background`.
  * @cssproperty --aura-haze - The faint stop between the ground and the glow. Defaults to `--helix-color-primary-subtle`.
+ * @cssproperty --aura-pause-background-color - The pause control's ground. Defaults to `--helix-color-surface-overlay`.
  * @cssproperty --aura-peak - The hottest stop, at the center of a shape. Defaults to `--helix-color-primary-active` on a light page and `--helix-color-foreground` on a dark one.
  *
  * @cssstate fallback - The aura shows its gradient: the renderer draws on the CPU, there is no WebGL, or the browser took the context back. Cleared once the shader draws again.
  */
 export declare class HelixAura extends HelixElement {
     static styles: CSSResultGroup;
+    /**
+     * The key this family's words are registered under:
+     * `registerWords('de', { 'helix-aura': { pauseLabel: 'Bewegung anhalten' } })`.
+     */
+    static words: string;
     /**
      * How soft the falloff is, `0` tight and `1` diffuse.
      */
@@ -118,6 +134,12 @@ export declare class HelixAura extends HelixElement {
      * this listens for. Asking for the pointer is asking for the hit test.
      */
     interactive: boolean;
+    /**
+     * Whether the aura draws its own control that pauses the field and starts it
+     * again, in its trailing corner. Absent draws none, for a page with a pause
+     * control of its own.
+     */
+    pauseControl: boolean;
     /**
      * Whether the field holds still on the frame it shows.
      *
@@ -127,6 +149,12 @@ export declare class HelixAura extends HelixElement {
      * the field from where it stopped.
      */
     paused: boolean;
+    /**
+     * The pause control's name, read by screen readers. The control is a toggle
+     * and says it is pressed while the field is paused, so the name stays the
+     * same.
+     */
+    pauseLabel: string;
     /**
      * How far the pointer reaches into the field, `0` upward.
      *
@@ -334,6 +362,9 @@ export declare class HelixAura extends HelixElement {
      */
     private openBy;
     protected render(): TemplateResult;
+    /** The aura's own pause control, under `pause-control`. */
+    private renderPause;
+    private readonly togglePause;
     protected firstUpdated(changed: PropertyValues): void;
     private start;
     /**

package/dist/aura/root/aura-root.js

@@ -5,9 +5,11 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
 var HelixAura_1;
-import { customElement, drawsInSoftware, HelixAuraFallbackEvent, HelixElement, MAX_FRAME_STEP, PaintGateController, readColor, } from '@fusion.dev/helix-core';
-import { html } from 'lit';
+import { customElement, drawsInSoftware, HelixAuraFallbackEvent, HelixElement, MAX_FRAME_STEP, PaintGateController, readColor, words, } from '@fusion.dev/helix-core';
+import { pause, play } from '@fusion.dev/helix-icons';
+import { html, nothing } from 'lit';
 import { property } from 'lit/decorators.js';
+import { unsafeSVG } from 'lit/directives/unsafe-svg.js';
 import { tiltFor } from '../axis.js';
 import { paletteOf, RESTING_PALETTE } from '../palette.js';
 import { FRAGMENT, INTERACTIONS, SHAPES, VERTEX } from '../shader.js';
@@ -22,7 +24,9 @@ let HelixAura = class HelixAura extends HelixElement {
         this.drift = 0;
         this.gain = 1;
         this.interactive = false;
+        this.pauseControl = false;
         this.paused = false;
+        this.pauseLabel = 'Pause the motion';
         this.reach = 1;
         this.scale = 1;
         this.speed = 1;
@@ -63,6 +67,10 @@ let HelixAura = class HelixAura extends HelixElement {
         this.opened = false;
         this.opening = 0;
         this.openBy = 0;
+        this.togglePause = () => {
+            this.paused = !this.paused;
+            this.dispatchEvent(new Event('change', { bubbles: true }));
+        };
         this.drop = () => {
             this.release = 0;
             if (this.gl && this.program) {
@@ -122,6 +130,7 @@ let HelixAura = class HelixAura extends HelixElement {
     }
     static { HelixAura_1 = this; }
     static { this.styles = styles; }
+    static { this.words = 'helix-aura'; }
     static { this.CONTEXT = {
         alpha: true,
         antialias: false,
@@ -131,7 +140,20 @@ let HelixAura = class HelixAura extends HelixElement {
     }; }
     render() {
         return html `<canvas part="canvas" aria-hidden="true"></canvas>
-      <div part="content"><slot></slot></div>`;
+      <div part="content"><slot></slot></div>${this.renderPause()}`;
+    }
+    renderPause() {
+        if (!this.pauseControl) {
+            return nothing;
+        }
+        const glyph = this.paused ? play : pause;
+        return html `<button
+      part="pause"
+      type="button"
+      aria-label=${this.pauseLabel}
+      aria-pressed=${this.paused ? 'true' : 'false'}
+      @click=${this.togglePause}
+    ><svg aria-hidden="true" data-glyph fill="currentColor" part="pause-mark" viewBox=${glyph.viewBox}>${unsafeSVG(glyph.content)}</svg></button>`;
     }
     firstUpdated(changed) {
         super.firstUpdated(changed);
@@ -513,9 +535,16 @@ __decorate([
 __decorate([
     property({ reflect: true, type: Boolean })
 ], HelixAura.prototype, "interactive", void 0);
+__decorate([
+    property({ attribute: 'pause-control', type: Boolean })
+], HelixAura.prototype, "pauseControl", void 0);
 __decorate([
     property({ type: Boolean })
 ], HelixAura.prototype, "paused", void 0);
+__decorate([
+    words,
+    property({ attribute: 'pause-label' })
+], HelixAura.prototype, "pauseLabel", void 0);
 __decorate([
     property({ type: Number })
 ], HelixAura.prototype, "reach", void 0);

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

@@ -19,4 +19,4 @@ color-mix(in oklab, var(--_badge-fill) 22%, var(--helix-color-background))
 53%,
 100% {transform: translateY(0);}40%,
 43% {transform: translateY(-30%);}70% {transform: translateY(-15%);}90% {transform: translateY(-4%);}}@media (prefers-reduced-motion: reduce) {:host([attention="pulse"]) [part="indicator"]:not([data-blank]),
-:host([attention="bounce"]) [part="indicator"]:not([data-blank]) {animation: none;}}@media print {:host {box-shadow: none;}}`);
+:host([attention="bounce"]) [part="indicator"]:not([data-blank]) {animation: none;}}@media print {:host {box-shadow: none;}}@media (forced-colors: active) {[part="indicator"] {forced-color-adjust: none;outline: var(--helix-border-thin) solid CanvasText;}}`);

package/dist/element-events.generated.js

@@ -4,7 +4,7 @@ registerElementEvents({
     'helix-announcement': ['helix-dismiss'],
     'helix-app-header': ['helix-before-close', 'helix-before-open', 'helix-scrolled', 'toggle'],
     'helix-area-chart': ['helix-reading-change', 'helix-reading-press'],
-    'helix-aura': ['helix-aura-fallback'],
+    'helix-aura': ['change', 'helix-aura-fallback'],
     'helix-avatar': ['error', 'load'],
     'helix-bar-chart': ['helix-reading-change', 'helix-reading-press'],
     'helix-breadcrumb': ['helix-select'],
@@ -133,7 +133,13 @@ registerElementEvents({
         'helix-graph-signal',
         'helix-graph-zoom',
     ],
-    'helix-heatmap': ['change', 'helix-before-change', 'helix-resize'],
+    'helix-heatmap': [
+        'change',
+        'helix-before-change',
+        'helix-reading-change',
+        'helix-reading-press',
+        'helix-resize',
+    ],
     'helix-icon': ['error', 'load'],
     'helix-icon-button': ['helix-press'],
     'helix-image': ['error', 'load'],

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

@@ -11,12 +11,14 @@ export const styles = createSheet(`:host {display: contents;}[part="region"] {ba
 slot[name="filter-icon"]::slotted(*) {--icon-size: var(--helix-size-icon-tight);block-size: var(--helix-size-icon-tight);inline-size: var(--helix-size-icon-tight);}[part="search-field"] {appearance: none;background-color: transparent;block-size: var(--helix-size-control-tight);border: none;box-sizing: border-box;color: var(--helix-color-foreground);flex: 1 1 auto;font-family: var(--helix-font-sans);font-size: max(var(--helix-text-field-min), var(--helix-text-sm));font-weight: var(--helix-weight-medium);min-inline-size: 0;padding-inline: var(--helix-space-2xs);}[part="search-field"]::placeholder {color: var(--helix-color-foreground-subtle);}[part="search-field"]:focus-visible {outline: none;}[part="search"]:has([part="search-field"]:focus-visible),
 [part="list"]:focus-visible {outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);outline-offset: calc(var(--helix-size-focus-offset) * -1);}[part="count"] {color: var(--helix-color-foreground-muted);flex: 0 0 auto;font-size: var(--helix-text-xs);font-variant-numeric: tabular-nums;padding-inline-end: calc(var(--helix-space-xs) - var(--helix-space-2xs));}[part="empty"],
 [part="loading"] {color: var(--helix-color-foreground-muted);font-size: var(--helix-text-sm);grid-area: 2 / 1;padding: var(--helix-space-sm);}[part="list"] {min-block-size: 0;overflow-y: auto;overscroll-behavior: contain;padding-block: var(--helix-space-2xs);}[part~="note"] {align-items: center;box-sizing: border-box;cursor: pointer;display: flex;font-size: var(--graph-note-text, var(--helix-text-sm));gap: var(--helix-space-sm);min-block-size: var(--helix-size-control-tight);padding-block: var(--helix-space-2xs);padding-inline: var(--graph-note-padding-inline, var(--helix-space-xs));user-select: none;}[part~="note"]:hover,
-[part="list"]:focus-visible [part~="note-cursor"] {--_graph-wash: var(
+[part="list"]:focus-visible [part~="note-cursor"],
+[part="search"]:has([aria-activedescendant]) ~ [part="list"] [part~="note-cursor"] {--_graph-wash: var(
 --graph-note-hover-color,
 light-dark(
 color-mix(in oklab, var(--helix-color-foreground) 8%, transparent),
 color-mix(in oklab, var(--helix-color-foreground) 12%, transparent)
 )
 );background-image: linear-gradient(var(--_graph-wash), var(--_graph-wash));}[part="note-name"] {flex: 0 1 auto;max-inline-size: 70%;min-inline-size: 0;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;}[part="note-relation"] {color: var(--graph-note-relation-color, var(--helix-color-foreground-muted));flex: 1 1 0;font-size: var(--helix-text-xs);min-inline-size: 0;overflow: hidden;text-align: end;text-overflow: ellipsis;white-space: nowrap;}[part~="note-selected"] {background-color: var(--graph-note-selected-background-color, var(--helix-color-surface-sunken));}[part~="note-selected"] [part="note-name"] {font-weight: var(--graph-note-selected-weight, var(--helix-weight-semibold));}[part="header"],
-[part="footer"] {min-inline-size: 0;}@media (forced-colors: active) {[part~="legend-item-hidden"] {color: GrayText;}[part="list"]:focus-visible [part~="note-cursor"] {outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);outline-offset: calc(var(--helix-size-focus-offset) * -1);}[part~="note-selected"],
+[part="footer"] {min-inline-size: 0;}@media (forced-colors: active) {[part~="legend-item-hidden"] {color: GrayText;}[part="legend-swatch"] {forced-color-adjust: none;}[part="list"]:focus-visible [part~="note-cursor"],
+[part="search"]:has([aria-activedescendant]) ~ [part="list"] [part~="note-cursor"] {outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);outline-offset: calc(var(--helix-size-focus-offset) * -1);}[part~="note-selected"],
 [part~="note-selected"] [part="note-relation"] {background-color: Highlight;color: HighlightText;forced-color-adjust: none;}}@media print {:host {print-color-adjust: economy;}}`);

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

@@ -15,8 +15,9 @@ var(--helix-color-surface-sunken)
 in oklab,
 var(--helix-color-primary-active) 80%,
 var(--helix-color-surface-sunken)
-);--heatmap-tone-5: var(--helix-color-primary-active);display: grid;grid-template-columns: minmax(0, max-content);}[part="strip"] {display: grid;gap: var(--heatmap-gap, var(--helix-space-2xs));grid-auto-columns: var(--_heatmap-cell-width);grid-auto-flow: column;grid-template-rows: repeat(var(--heatmap-rows, 1), var(--_heatmap-cell-height));justify-content: start;position: relative;}[part~="cell"] {background-color: var(--heatmap-tone, var(--helix-color-surface-sunken));border-radius: var(--heatmap-cell-radius, calc(var(--helix-radii-sm) * 0.5));inline-size: var(--_heatmap-cell-width);}[part="mark"] {block-size: 1px;inline-size: 1px;pointer-events: none;position: absolute;}[part="tooltip-anchor"] {inset: 0;pointer-events: none;position: absolute;}[part="tooltip-label"] {display: block;font-weight: var(--helix-weight-medium);opacity: 0.72;}[part~="tooltip-cell"] {align-items: baseline;display: flex;gap: var(--helix-space-sm);justify-content: space-between;}[part="tooltip-name"] {opacity: 0.72;}[part="tooltip-value"] {font-variant-numeric: tabular-nums;font-weight: var(--helix-weight-medium);}@media (hover: hover) {[part~="cell"]:hover {outline: var(--helix-border-thin) solid var(--helix-color-foreground);outline-offset: var(--helix-border-thin);}[part="strip"]:not([data-spaced]) [part~="cell"]:hover {outline-offset: calc(var(--helix-border-thin) * -1);}}[part~="cell-active"] {outline: var(--helix-border-thin) solid var(--helix-color-foreground);outline-offset: var(--helix-border-thin);}[part="strip"]:not([data-spaced]) [part~="cell-active"] {outline-offset: calc(var(--helix-border-thin) * -1);}[part~="cell-selected"] {box-shadow: inset 0 0 0 var(--heatmap-selected-width, var(--helix-border-thick))
-var(--heatmap-selected-color, var(--helix-color-primary));}[part="strip"]:focus-visible {outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);outline-offset: var(--helix-size-focus-offset);}[part~="tooltip-cell-current"] {font-weight: var(--helix-weight-medium);}[part="live"],
+);--heatmap-tone-5: var(--helix-color-primary-active);display: grid;grid-template-columns: minmax(0, max-content);}[part~="strip"] {display: grid;gap: var(--heatmap-gap, var(--helix-space-2xs));grid-auto-columns: var(--_heatmap-cell-width);grid-auto-flow: column;grid-template-rows: repeat(var(--heatmap-rows, 1), var(--_heatmap-cell-height));justify-content: start;position: relative;}[part~="cell"] {background-color: var(--heatmap-tone, var(--helix-color-surface-sunken));border-radius: var(--heatmap-cell-radius, calc(var(--helix-radii-sm) * 0.5));inline-size: var(--_heatmap-cell-width);}[part="mark"] {block-size: 1px;inline-size: 1px;pointer-events: none;position: absolute;}[part="tooltip-anchor"] {inset: 0;pointer-events: none;position: absolute;}[part="tooltip-label"] {display: block;font-weight: var(--helix-weight-medium);opacity: 0.72;}[part~="tooltip-cell"] {align-items: baseline;display: flex;gap: var(--helix-space-sm);justify-content: space-between;}[part="tooltip-name"] {opacity: 0.72;}[part="tooltip-value"] {font-variant-numeric: tabular-nums;font-weight: var(--helix-weight-medium);}@media (hover: hover) {[part~="cell"]:hover {outline: var(--helix-border-thin) solid var(--helix-color-foreground);outline-offset: var(--helix-border-thin);}[part~="strip"]:not([data-spaced]) [part~="cell"]:hover {outline-offset: calc(var(--helix-border-thin) * -1);}}[part~="cell-active"] {outline: var(--helix-border-thin) solid var(--helix-color-foreground);outline-offset: var(--helix-border-thin);}[part~="strip"]:not([data-spaced]) [part~="cell-active"] {outline-offset: calc(var(--helix-border-thin) * -1);}[part~="cell-selected"] {box-shadow: inset 0 0 0 var(--heatmap-selected-width, var(--helix-border-thick))
+var(--heatmap-selected-color, var(--helix-color-primary));}[part~="strip"]:focus-visible {outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);outline-offset: var(--helix-size-focus-offset);}[part~="tooltip-cell-current"] {font-weight: var(--helix-weight-medium);}[part="live"],
 [part="overview"],
 [part="selection"],
-[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="footer"] {align-items: baseline;color: var(--helix-color-foreground-subtle);display: grid;font-family: var(--helix-font-sans);font-size: var(--helix-text-xs);gap: var(--helix-space-xs);grid-template-columns: auto minmax(0, 1fr) auto;padding-block-start: var(--helix-space-xs);}[part="summary"] {text-align: center;}[part="end"] {text-align: end;}[part="footer"][data-empty] {display: none;}[part="empty"] {color: var(--helix-color-foreground-subtle);font-family: var(--helix-font-sans);font-size: var(--helix-text-sm);margin: var(--helix-space-none);text-align: center;}@media print {[part~="cell"] {outline: var(--helix-border-thin) solid var(--helix-color-border);outline-offset: calc(var(--helix-border-thin) * -1);}}`);
+[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="footer"] {align-items: baseline;color: var(--helix-color-foreground-subtle);display: grid;font-family: var(--helix-font-sans);font-size: var(--helix-text-xs);gap: var(--helix-space-xs);grid-template-columns: auto minmax(0, 1fr) auto;padding-block-start: var(--helix-space-xs);}[part="summary"] {text-align: center;}[part="end"] {text-align: end;}[part="footer"][data-empty] {display: none;}[part="empty"],
+[part="loading"] {color: var(--helix-color-foreground-subtle);font-family: var(--helix-font-sans);font-size: var(--helix-text-sm);margin: var(--helix-space-none);text-align: center;}@media print {[part~="cell"] {outline: var(--helix-border-thin) solid var(--helix-color-border);outline-offset: calc(var(--helix-border-thin) * -1);}}@media (forced-colors: active) {[part~="cell"] {forced-color-adjust: none;outline: var(--helix-border-thin) solid CanvasText;outline-offset: calc(var(--helix-border-thin) * -1);}[part~="cell-active"] {outline: var(--helix-border-thick) solid Highlight;outline-offset: var(--helix-border-thin);}[part~="cell-selected"] {box-shadow: inset 0 0 0 var(--helix-border-thick) Highlight;}}`);

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

@@ -13,4 +13,4 @@ transparent
 color-mix(in oklab, var(--chart-series) calc(var(--_legend-through, 1) * 100%), transparent);}[part~="entry"][data-emphasis="subtle"]::before,
 :host([emphasis="subtle"]) [part~="entry"]:not([data-emphasis])::before {--_legend-area: 0.2;border: var(--legend-swatch-stroke, var(--helix-border-thick)) solid
 color-mix(in oklab, var(--chart-series) calc(var(--_legend-through, 1) * 100%), transparent);}[part~="entry"][data-material="glass"]::before,
-:host([material="glass"]) [part~="entry"]:not([data-material])::before {--_legend-through: calc(0.62 * var(--helix-material-opacity));}:host([material="frosted"]) [part~="entry"]:not([data-material])::before {--_legend-through: calc(0.88 * var(--helix-material-opacity));}[part="toggle"] {all: unset;box-sizing: border-box;border-radius: var(--helix-radii-sm);cursor: pointer;}[part="toggle"]:focus-visible {outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);outline-offset: var(--helix-size-focus-offset);}@media (hover: hover) {[part="toggle"]:hover {color: var(--helix-color-foreground);}}[part~="entry-hidden"] {opacity: var(--legend-hidden-opacity, 0.56);}[part~="entry-hidden"]::before {background-color: transparent;border: var(--legend-swatch-stroke, var(--helix-border-thick)) solid var(--chart-series);}@media print {:host {print-color-adjust: economy;}}`);
+:host([material="glass"]) [part~="entry"]:not([data-material])::before {--_legend-through: calc(0.62 * var(--helix-material-opacity));}:host([material="frosted"]) [part~="entry"]:not([data-material])::before {--_legend-through: calc(0.88 * var(--helix-material-opacity));}[part="toggle"] {all: unset;box-sizing: border-box;border-radius: var(--helix-radii-sm);cursor: pointer;}[part="toggle"]:focus-visible {outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);outline-offset: var(--helix-size-focus-offset);}@media (hover: hover) {[part="toggle"]:hover {color: var(--helix-color-foreground);}}[part~="entry-hidden"] {opacity: var(--legend-hidden-opacity, 0.56);}[part~="entry-hidden"]::before {background-color: transparent;border: var(--legend-swatch-stroke, var(--helix-border-thick)) solid var(--chart-series);}@media print {:host {print-color-adjust: economy;}}@media (forced-colors: active) {[part~="entry"]::before {forced-color-adjust: none;outline: var(--helix-border-thin) solid CanvasText;outline-offset: calc(var(--helix-border-thin) * -1);}}`);

package/dist/line-chart/root/line-chart-root.css.js

@@ -5,4 +5,4 @@ var(--line-chart-marker-ring-color, var(--helix-color-background));inline-size:
 d var(--helix-duration-normal) var(--helix-easing-decelerate),
 stroke-dashoffset var(--helix-duration-slow) var(--helix-easing-decelerate);}@starting-style {[part~="line"] {stroke-dashoffset: 1000;}}[part~="line-dashed"] {stroke-dasharray: var(--line-chart-dash, 6 4);}@starting-style {[part~="line-dashed"] {stroke-dashoffset: 0;}}[part="area"] {transition:
 d var(--helix-duration-normal) var(--helix-easing-decelerate),
-opacity var(--helix-duration-slow) var(--helix-easing-decelerate);}@starting-style {[part="area"] {opacity: 0;}}[part="plot"] {cursor: crosshair;}[part="gridline"] {stroke: var(--line-chart-gridline-color, var(--helix-color-border));stroke-width: var(--helix-border-thin);vector-effect: non-scaling-stroke;}[part="band"] {fill: var(--line-chart-band-color, var(--helix-color-surface-sunken));}@media print {:host {print-color-adjust: exact;}}:host([emphasis="subtle"]) [part~="line"] {stroke: color-mix(in oklab, var(--chart-series) 45%, var(--helix-color-background));}:host([emphasis="subtle"]) [part="area"] {fill: color-mix(in oklab, var(--chart-series) 45%, var(--helix-color-background));}:host([emphasis="outlined"]) {--line-chart-area-opacity: 0.08;}:host([emphasis="solid"]) {--line-chart-area-opacity: 1;}:host([material="glass"]) [part~="line"] {stroke-opacity: calc(0.62 * var(--helix-material-opacity));}:host([material="frosted"]) [part~="line"] {stroke-opacity: calc(0.88 * var(--helix-material-opacity));}[part="summary"] {block-size: 1px;clip-path: inset(50%);inline-size: 1px;margin: var(--helix-space-none);overflow: hidden;position: absolute;white-space: nowrap;}`);
+opacity var(--helix-duration-slow) var(--helix-easing-decelerate);}@starting-style {[part="area"] {opacity: 0;}}[part="plot"] {cursor: crosshair;}[part="gridline"] {stroke: var(--line-chart-gridline-color, var(--helix-color-border));stroke-width: var(--helix-border-thin);vector-effect: non-scaling-stroke;}[part="band"] {fill: var(--line-chart-band-color, var(--helix-color-surface-sunken));}@media print {:host {print-color-adjust: exact;}}@media (forced-colors: active) {[part~="marker"] {forced-color-adjust: none;}}:host([emphasis="subtle"]) [part~="line"] {stroke: color-mix(in oklab, var(--chart-series) 45%, var(--helix-color-background));}:host([emphasis="subtle"]) [part="area"] {fill: color-mix(in oklab, var(--chart-series) 45%, var(--helix-color-background));}:host([emphasis="outlined"]) {--line-chart-area-opacity: 0.08;}:host([emphasis="solid"]) {--line-chart-area-opacity: 1;}:host([material="glass"]) [part~="line"] {stroke-opacity: calc(0.62 * var(--helix-material-opacity));}:host([material="frosted"]) [part~="line"] {stroke-opacity: calc(0.88 * var(--helix-material-opacity));}[part="summary"] {block-size: 1px;clip-path: inset(50%);inline-size: 1px;margin: var(--helix-space-none);overflow: hidden;position: absolute;white-space: nowrap;}`);

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

@@ -29,4 +29,4 @@ color-mix(in oklab, var(--_map-marker-color) 22%, transparent);}:host([separatio
 var(--helix-color-border);border-radius: var(--helix-radii-sm);box-shadow: var(--map-marker-label-shadow, var(--helix-shadow-floating));color: var(--helix-color-foreground);font-family: var(--helix-font-sans);font-size: var(--helix-text-sm);font-weight: var(--helix-weight-medium);opacity: 0;padding: var(--helix-space-2xs) var(--helix-space-xs);pointer-events: none;transition: opacity var(--helix-duration-fast) var(--helix-easing-standard);white-space: nowrap;}:host(:state(cluster)) [part="label"] {inline-size: max-content;max-inline-size: 16rem;white-space: normal;}:host([material="glass"]) [part="label"] {backdrop-filter: var(--helix-material-backdrop);background: var(--helix-material-translucent);}:host([material="frosted"]) [part="label"] {backdrop-filter: blur(var(--helix-material-blur-lg));background: var(--helix-material-translucent-strong);}:host([material="transparent"]) [part="label"] {backdrop-filter: none;background: transparent;}:host(:hover) [part="label"],
 [part="marker"]:focus-visible [part="label"] {opacity: 1;}:host(:hover) [part="point"],
 [part="marker"]:focus-visible [part="point"] {transform: scale(1.25);}[part="marker"]:focus-visible [part="point"] {outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);outline-offset: var(--helix-size-focus-offset);}:host([tone="accent"]) {--_map-marker-color: var(--helix-color-accent);--_map-marker-fill: var(--helix-color-accent-surface);--_map-marker-ink: var(--map-marker-ink, var(--helix-color-foreground-on-accent));}:host([tone="danger"]) {--_map-marker-color: var(--helix-color-danger);--_map-marker-fill: var(--helix-color-danger-surface);--_map-marker-ink: var(--map-marker-ink, var(--helix-color-foreground-on-status));}:host([tone="info"]) {--_map-marker-color: var(--helix-color-info);--_map-marker-fill: var(--helix-color-info-surface);--_map-marker-ink: var(--map-marker-ink, var(--helix-color-foreground-on-status));}:host([tone="neutral"]) {--_map-marker-color: var(--helix-color-foreground-muted);--_map-marker-fill: var(--helix-color-foreground-muted);--_map-marker-ink: var(--map-marker-ink, var(--helix-color-surface));}:host([tone="success"]) {--_map-marker-color: var(--helix-color-success);--_map-marker-fill: var(--helix-color-success-surface);--_map-marker-ink: var(--map-marker-ink, var(--helix-color-foreground-on-status));}:host([tone="warning"]) {--_map-marker-color: var(--helix-color-warning);--_map-marker-fill: var(--helix-color-warning-surface);--_map-marker-ink: var(--map-marker-ink, var(--helix-color-foreground-on-status));}:host(:state(passed)) {--_map-marker-color: var(--helix-color-foreground-muted);--_map-marker-fill: var(--helix-color-foreground-muted);--_map-marker-ink: var(--helix-color-surface);--_map-marker-shadow: none;}@media (prefers-reduced-motion: reduce) {[part="label"],
-[part="point"] {transition: none;}}`);
+[part="point"] {transition: none;}}@media (forced-colors: active) {[part="point"] {forced-color-adjust: none;}}`);

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

@@ -17,4 +17,6 @@ var(--helix-shadow-sm);box-sizing: border-box;inline-size: var(--_map-position-s
 0 var(--helix-border-thin) var(--helix-border-thick)
 color-mix(in oklab, var(--helix-color-foreground) 30%, transparent)
 );inline-size: calc(var(--_map-position-size) * 1.6);left: 0;overflow: visible;position: absolute;rotate: var(--_map-position-heading);top: 0;translate: -50% -50%;}[part="arrow"] path {fill: var(--_map-position-fill);paint-order: stroke;stroke: none;stroke-linejoin: round;stroke-width: calc(var(--helix-border-thick) * 1.5);}:host([heading]) [part="arrow"] {display: block;}:host([heading]) [part="dot"] {display: none;}:host([shape="rounded"]) [part="dot"] {border-radius: var(--helix-radii-md);}:host([shape="square"]) [part="dot"] {border-radius: var(--helix-radii-none);}:host([shape="diamond"]) [part="dot"] {border-radius: var(--helix-radii-none);rotate: 45deg;scale: 0.85;}:host([shape="ring"]) [part="dot"] {background: transparent;border-color: var(--_map-position-fill);border-width: calc(var(--_map-position-size) * 0.25);}:host([separation="outlined"]) [part="dot"] {box-shadow: none;}:host([separation="elevated"]) [part="dot"] {box-shadow: var(--helix-shadow-md);}:host([separation="filled"]) [part="dot"] {border-color: transparent;}:host([separation="plain"]) [part="dot"] {border-color: transparent;box-shadow: none;}:host([separation="outlined"]) [part="arrow"] path {stroke: var(--_map-position-edge);}:host([separation="outlined"]) [part="arrow"],
-:host([separation="plain"]) [part="arrow"] {filter: none;}@media (prefers-reduced-motion: reduce) {[part="pulse"] {animation: none;}}[part="status"] {block-size: 1px;clip-path: inset(50%);inline-size: 1px;overflow: hidden;position: absolute;white-space: nowrap;}:host([tone]) {--_map-position-color: var(--_map-position-tone);--_map-position-fill: var(--_map-position-tone);}:host([tone="accent"]) {--_map-position-tone: var(--helix-color-accent);}:host([tone="danger"]) {--_map-position-tone: var(--helix-color-danger);}:host([tone="info"]) {--_map-position-tone: var(--helix-color-info);}:host([tone="neutral"]) {--_map-position-tone: var(--helix-color-foreground-muted);}:host([tone="primary"]) {--_map-position-tone: var(--helix-color-primary);}:host([tone="success"]) {--_map-position-tone: var(--helix-color-success);}:host([tone="warning"]) {--_map-position-tone: var(--helix-color-warning);}`);
+:host([separation="plain"]) [part="arrow"] {filter: none;}@media (prefers-reduced-motion: reduce) {[part="pulse"] {animation: none;}}[part="status"] {block-size: 1px;clip-path: inset(50%);inline-size: 1px;overflow: hidden;position: absolute;white-space: nowrap;}:host([tone]) {--_map-position-color: var(--_map-position-tone);--_map-position-fill: var(--_map-position-tone);}:host([tone="accent"]) {--_map-position-tone: var(--helix-color-accent);}:host([tone="danger"]) {--_map-position-tone: var(--helix-color-danger);}:host([tone="info"]) {--_map-position-tone: var(--helix-color-info);}:host([tone="neutral"]) {--_map-position-tone: var(--helix-color-foreground-muted);}:host([tone="primary"]) {--_map-position-tone: var(--helix-color-primary);}:host([tone="success"]) {--_map-position-tone: var(--helix-color-success);}:host([tone="warning"]) {--_map-position-tone: var(--helix-color-warning);}@media (forced-colors: active) {[part="dot"],
+[part="heading"],
+[part="pulse"] {forced-color-adjust: none;}}`);

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

@@ -28,4 +28,4 @@ var(--meter-track-color, var(--helix-color-surface-sunken))
 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/rating/root/rating-root.css.js

@@ -10,4 +10,5 @@ var(--_rating-mark-size)
 var(--_rating-pitch) -
 var(--_rating-mark-gap) /
 2
-);}[part="value"] {color: var(--helix-color-foreground-muted);font-size: var(--helix-text-sm);font-variant-numeric: tabular-nums;line-height: 1;}:host([shape="dots"]) {--_rating-mark-size: var(--rating-size, var(--helix-size-icon-sm));}:host([shape="dots"]) [part="mark"] {border-radius: var(--helix-radii-full);mask-image: none;}[part="option"]:focus-visible {border-radius: var(--helix-radii-sm);outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);outline-offset: var(--helix-size-focus-offset);}:host(:disabled) [part="option"] {cursor: not-allowed;}:host(:disabled) [part="marks"] {opacity: 0.5;}:host([readonly]) [part="marks"] {cursor: default;}[data-slotted] [part="mark"] {background-color: transparent;mask-image: none;}@media print {:host {print-color-adjust: exact;}}`);
+);}[part="value"] {color: var(--helix-color-foreground-muted);font-size: var(--helix-text-sm);font-variant-numeric: tabular-nums;line-height: 1;}:host([shape="dots"]) {--_rating-mark-size: var(--rating-size, var(--helix-size-icon-sm));}:host([shape="dots"]) [part="mark"] {border-radius: var(--helix-radii-full);mask-image: none;}[part="option"]:focus-visible {border-radius: var(--helix-radii-sm);outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);outline-offset: var(--helix-size-focus-offset);}:host(:disabled) [part="option"] {cursor: not-allowed;}:host(:disabled) [part="marks"] {opacity: 0.5;}:host([readonly]) [part="marks"] {cursor: default;}[data-slotted] [part="mark"] {background-color: transparent;mask-image: none;}@media print {:host {print-color-adjust: exact;}}@media (forced-colors: active) {[part="track"],
+[part="fill"] {forced-color-adjust: none;}[part="track"] {color: GrayText;}[part="fill"] {color: Highlight;}}`);

package/dist/scatter-chart/root/scatter-chart-root.css.js

@@ -14,4 +14,4 @@ inset-inline-start var(--helix-duration-normal) var(--helix-easing-decelerate),
 scale var(--helix-duration-fast) var(--helix-easing-decelerate);translate: -50% -50%;}[part~="point"][data-active] {opacity: 1;scale: 1.5;}[part="x-axis"],
 [part="y-axis"] {display: grid;}[part="x-axis"] {grid-area: x-axis;}[part="y-axis"] {grid-area: y-axis;}[part="x-tick"],
 [part="y-tick"] {color: var(--helix-color-foreground-muted);font-size: var(--helix-text-xs);font-variant-numeric: tabular-nums;grid-area: 1 / 1;line-height: 1;position: relative;white-space: nowrap;}[part="x-tick"] {inset-inline-start: var(--chart-tick);justify-self: start;translate: -50% 0;}[part="x-tick"][data-edge="end"] {translate: -100% 0;}[part="y-tick"] {align-self: start;inset-block-start: var(--chart-tick);justify-self: end;translate: 0 -50%;}@container (inline-size < 30rem) {[part="x-tick"]:nth-last-child(even) {visibility: hidden;}}[part="x-name"],
-[part="y-name"] {color: var(--helix-color-foreground-muted);font-size: var(--helix-text-xs);font-weight: var(--helix-weight-medium);}[part="x-name"] {grid-area: x-name;justify-self: end;}[part="y-name"] {grid-area: y-name;justify-self: start;}[part="summary"] {block-size: 1px;clip-path: inset(50%);inline-size: 1px;margin: var(--helix-space-none);overflow: hidden;position: absolute;white-space: nowrap;}@starting-style {[part~="point"] {opacity: 0;}}@media print {:host {print-color-adjust: exact;}}`);
+[part="y-name"] {color: var(--helix-color-foreground-muted);font-size: var(--helix-text-xs);font-weight: var(--helix-weight-medium);}[part="x-name"] {grid-area: x-name;justify-self: end;}[part="y-name"] {grid-area: y-name;justify-self: start;}[part="summary"] {block-size: 1px;clip-path: inset(50%);inline-size: 1px;margin: var(--helix-space-none);overflow: hidden;position: absolute;white-space: nowrap;}@starting-style {[part~="point"] {opacity: 0;}}@media print {:host {print-color-adjust: exact;}}@media (forced-colors: active) {[part~="point"] {box-shadow: 0 0 0 var(--helix-border-thin) CanvasText;forced-color-adjust: none;}[part~="point"][data-active] {box-shadow: 0 0 0 var(--helix-border-thick) Highlight;}}`);

package/dist/shared/chart/terminus.css.js

@@ -1,2 +1,2 @@
 import { createSheet } from '@fusion.dev/helix-core';
-export const styles = createSheet(`[part="terminus"] {background-color: currentColor;block-size: var(--chart-terminus-size, 5px);inline-size: var(--chart-terminus-size, 5px);inset-block-start: var(--chart-terminus-y);inset-inline-start: var(--chart-terminus-x);position: absolute;translate: -50% -50%;}:host(:dir(rtl)) [part="terminus"] {translate: 50% -50%;}[part="terminus"] {border-radius: var(--helix-radii-full);}:host([terminus="none"]) [part="terminus"] {display: none;}:host([terminus="square"]) [part="terminus"] {border-radius: var(--helix-radii-none);}:host([terminus="ring"]) [part="terminus"] {background-color: var(--chart-terminus-hole, transparent);block-size: calc(var(--chart-terminus-size, 5px) * 1.6);border: var(--helix-border-thick) solid currentColor;inline-size: calc(var(--chart-terminus-size, 5px) * 1.6);}:host([terminus="ring"]) {--_chart-terminus-inner: calc(var(--chart-terminus-size, 5px) * 0.8 - var(--helix-border-thick));}:host([terminus="triangle"]) [part="terminus"] {background-color: currentColor;border-radius: var(--helix-radii-none);clip-path: polygon(0% 0%, 100% 50%, 0% 100%);}:host([terminus="triangle"]:dir(rtl)) [part="terminus"] {clip-path: polygon(100% 0%, 0% 50%, 100% 100%);}`);
+export const styles = createSheet(`[part="terminus"] {background-color: currentColor;block-size: var(--chart-terminus-size, 5px);inline-size: var(--chart-terminus-size, 5px);inset-block-start: var(--chart-terminus-y);inset-inline-start: var(--chart-terminus-x);position: absolute;translate: -50% -50%;}:host(:dir(rtl)) [part="terminus"] {translate: 50% -50%;}[part="terminus"] {border-radius: var(--helix-radii-full);}:host([terminus="none"]) [part="terminus"] {display: none;}:host([terminus="square"]) [part="terminus"] {border-radius: var(--helix-radii-none);}:host([terminus="ring"]) [part="terminus"] {background-color: var(--chart-terminus-hole, transparent);block-size: calc(var(--chart-terminus-size, 5px) * 1.6);border: var(--helix-border-thick) solid currentColor;inline-size: calc(var(--chart-terminus-size, 5px) * 1.6);}:host([terminus="ring"]) {--_chart-terminus-inner: calc(var(--chart-terminus-size, 5px) * 0.8 - var(--helix-border-thick));}:host([terminus="triangle"]) [part="terminus"] {background-color: currentColor;border-radius: var(--helix-radii-none);clip-path: polygon(0% 0%, 100% 50%, 0% 100%);}:host([terminus="triangle"]:dir(rtl)) [part="terminus"] {clip-path: polygon(100% 0%, 0% 50%, 100% 100%);}@media (forced-colors: active) {[part="terminus"] {forced-color-adjust: none;}}`);

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

@@ -21,4 +21,4 @@ ease-in-out infinite;}@keyframes helix-skeleton-pulse {50% {opacity: 0.4;}}:host
 :host(:state(wrapping):not([loading])) [part="lines"],
 :host(:not(:defined):not(:empty):not([loading])) [part="lines"] {display: none;}:host([loading]:state(wrapping)) [part="content"],
 :host([loading]:not(:defined):not(:empty)) [part="content"] {visibility: hidden;}@keyframes helix-skeleton-sweep {from {translate: -50% 0;}to {translate: 50% 0;}}@media (prefers-reduced-motion: reduce) {[part="sheen"],
-:host([effect="pulse"]) [part~="skeleton"] {animation: none;}[part="sheen"] {background-image: none;}}@media print {:host {display: none;}}`);
+:host([effect="pulse"]) [part~="skeleton"] {animation: none;}[part="sheen"] {background-image: none;}}@media print {:host {display: none;}}@media (forced-colors: active) {[part~="skeleton"] {outline: var(--helix-border-thin) solid GrayText;outline-offset: calc(var(--helix-border-thin) * -1);}}`);

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

@@ -4,7 +4,10 @@ export const styles = createSheet(`:host {--_sparkline-ink: var(--sparkline-colo
 circle at var(--chart-terminus-x) var(--chart-terminus-y),
 #0000 calc(var(--_chart-terminus-inner) - 0.5px),
 #000 var(--_chart-terminus-inner)
-);}@media print {:host {print-color-adjust: exact;}}:host([emphasis="subtle"]) {color: color-mix(in oklab, var(--_sparkline-ink) 40%, var(--helix-color-background));}:host([emphasis="outlined"]) [part="bar"] {fill: color-mix(in oklab, var(--_sparkline-ink) 55%, var(--helix-color-background));stroke: var(--_sparkline-ink);stroke-width: var(--sparkline-bar-stroke, 1);vector-effect: non-scaling-stroke;}:host([emphasis="outlined"]) [part="area"] {opacity: var(--sparkline-area-opacity, 0.35);}:host([emphasis="solid"]) [part="area"] {opacity: 1;}[part="svg"]:focus-visible {border-radius: var(--helix-radii-sm);outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);outline-offset: var(--helix-size-focus-offset);}[part="cursor"],
+);}@media print {:host {print-color-adjust: exact;}}@media (forced-colors: active) {[part="cursor"],
+[part="high"],
+[part="lone"],
+[part="low"] {forced-color-adjust: none;}}:host([emphasis="subtle"]) {color: color-mix(in oklab, var(--_sparkline-ink) 40%, var(--helix-color-background));}:host([emphasis="outlined"]) [part="bar"] {fill: color-mix(in oklab, var(--_sparkline-ink) 55%, var(--helix-color-background));stroke: var(--_sparkline-ink);stroke-width: var(--sparkline-bar-stroke, 1);vector-effect: non-scaling-stroke;}:host([emphasis="outlined"]) [part="area"] {opacity: var(--sparkline-area-opacity, 0.35);}:host([emphasis="solid"]) [part="area"] {opacity: 1;}[part="svg"]:focus-visible {border-radius: var(--helix-radii-sm);outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);outline-offset: var(--helix-size-focus-offset);}[part="cursor"],
 [part="high"],
 [part="lone"],
 [part="low"] {background-color: var(--sparkline-mark-color, currentColor);block-size: var(--sparkline-mark-size, 5px);border-radius: var(--helix-radii-full);inline-size: var(--sparkline-mark-size, 5px);pointer-events: none;position: absolute;translate: -50% -50%;}[part="cursor"] {box-shadow: 0 0 0 var(--helix-border-thick)