@fusion.dev/helix 0.145.0 → 0.147.0

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

@@ -1,146 +1,32 @@
 import { createSheet } from '@fusion.dev/helix-core';
-export const styles = createSheet(`:host {
-
---_slider-track: var(--slider-track-size, var(--helix-size-progress));
-
---_slider-thumb: var(--slider-thumb-size, var(--helix-size-checkbox));
---_slider-thumb-length: var(--slider-thumb-length, var(--_slider-thumb));
---_slider-thumb-radii: var(--slider-thumb-radius, var(--helix-radii-full));
-
---_slider-halo: color-mix(
+export const styles = createSheet(`:host {--_slider-track: var(--slider-track-size, var(--helix-size-progress));--_slider-thumb: var(--slider-thumb-size, var(--helix-size-checkbox));--_slider-thumb-length: var(--slider-thumb-length, var(--_slider-thumb));--_slider-thumb-radii: var(--slider-thumb-radius, var(--helix-radii-full));--_slider-halo: color-mix(
 in oklab,
 var(--slider-fill-color, var(--helix-color-primary)) 24%,
 transparent
-);
-
---_slider-track-color: var(--slider-track-color, var(--helix-color-border));
-
---_slider-along: to right;
-display: flex;
-flex-direction: column;
-gap: var(--helix-space-2xs);
-}
-
-:host(:dir(rtl)) {
---_slider-along: to left;
-}
-
-[part="field"] {
-align-items: center;
-display: flex;
-gap: var(--helix-space-sm);
-}
-
-[part="field"][data-markers] {
-display: grid;
-grid-template-columns: 1fr auto;
-}
-
-[part="control"] {
-
-z-index: var(--helix-layer-raised);
-
-appearance: none;
-background: transparent;
-cursor: pointer;
-flex: 1 1 auto;
-min-inline-size: 0;
-}
-
-[part="field"][data-markers] [part="control"],
-[part="field"][data-markers] [part="markers"] {
-grid-column: 1;
-grid-row: 1;
-}
-
-[part="output"] {
-color: var(--helix-color-foreground);
-font-family: var(--helix-font-sans);
-font-size: var(--helix-text-sm);
-font-variant-numeric: tabular-nums;
-
-min-inline-size: var(--_slider-output-reserve, 3ch);
-text-align: end;
-}
-
-[part="field"][data-markers] [part="output"] {
-grid-column: 2;
-grid-row: 1;
-}
-
-[part="control"] {
---_slider-track-image: var(
+);--_slider-track-color: var(--slider-track-color, var(--helix-color-border));--_slider-along: to right;display: flex;flex-direction: column;gap: var(--helix-space-2xs);}:host(:dir(rtl)) {--_slider-along: to left;}[part="field"] {align-items: center;display: flex;gap: var(--helix-space-sm);}[part="field"][data-markers] {display: grid;grid-template-columns: 1fr auto;}[part="control"] {z-index: var(--helix-layer-raised);appearance: none;background: transparent;cursor: pointer;flex: 1 1 auto;min-inline-size: 0;}[part="field"][data-markers] [part="control"],
+[part="field"][data-markers] [part="markers"] {grid-column: 1;grid-row: 1;}[part="output"] {color: var(--helix-color-foreground);font-family: var(--helix-font-sans);font-size: var(--helix-text-sm);font-variant-numeric: tabular-nums;min-inline-size: var(--_slider-output-reserve, 3ch);text-align: end;}[part="field"][data-markers] [part="output"] {grid-column: 2;grid-row: 1;}[part="control"] {--_slider-track-image: var(
 --slider-track-image,
 linear-gradient(
 var(--_slider-along),
 var(--slider-fill-color, var(--helix-color-primary)) calc(var(--slider-fraction, 0) * 100%),
 var(--_slider-track-color) calc(var(--slider-fraction, 0) * 100%)
 )
-);
-}
-
-[part="markers"] {
-align-self: center;
-block-size: var(--_slider-track);
-margin-inline: calc(var(--_slider-thumb-length) / 2);
-pointer-events: none;
-position: relative;
-z-index: var(--helix-layer-raised);
-}
-
-:host([marker-labels]) [part="field"] {
-padding-block-end: var(--helix-space-lg);
-}
-
-:host([marker-labels]:not([orientation="vertical"])) [part="markers"] {
-block-size: calc(var(--_slider-track) + var(--helix-space-lg));
-border-inline: var(--helix-space-lg) solid transparent;
-margin-block-end: calc(var(--helix-space-lg) * -1);
-margin-inline: calc(var(--_slider-thumb-length) / 2 - var(--helix-space-lg));
-mask-origin: padding-box;
-}
-
-[part="marker-label"] {
-color: var(--helix-color-foreground-subtle);
-font-family: var(--helix-font-sans);
-font-size: var(--helix-text-xs);
-font-variant-numeric: tabular-nums;
-inset-block-start: var(--helix-space-sm);
-inset-inline-start: 50%;
-position: absolute;
-translate: -50% 0;
-}
-
-:host(:dir(rtl)) [part="marker-label"] {
-translate: 50% 0;
-}
-
-[part="markers"] {
-
---_slider-hole: calc(var(--_slider-thumb-length) / 2 + var(--helix-border-thin));
---_slider-hole-at: calc(var(--slider-fraction, 0) * 100%);
---_slider-hole-from: calc(var(--slider-from, 0) * 100%);
---_slider-hole-to: calc(var(--slider-to, 0) * 100%);
---_slider-under: linear-gradient(transparent var(--_slider-track), currentColor 0);
-
-mask-image:
+);}[part="control"][data-origin] {--_slider-track-image: var(
+--slider-track-image,
+linear-gradient(
+var(--_slider-along),
+var(--_slider-track-color) calc(var(--slider-from, 0) * 100%),
+var(--slider-fill-color, var(--helix-color-primary)) calc(var(--slider-from, 0) * 100%),
+var(--slider-fill-color, var(--helix-color-primary)) calc(var(--slider-to, 0) * 100%),
+var(--_slider-track-color) calc(var(--slider-to, 0) * 100%)
+)
+);}[part="markers"] {align-self: center;block-size: var(--_slider-track);margin-inline: calc(var(--_slider-thumb-length) / 2);pointer-events: none;position: relative;z-index: var(--helix-layer-raised);}:host([marker-labels]) [part="field"] {padding-block-end: var(--helix-space-lg);}:host([marker-labels]:not([orientation="vertical"])) [part="markers"] {block-size: calc(var(--_slider-track) + var(--helix-space-lg));border-inline: var(--helix-space-lg) solid transparent;margin-block-end: calc(var(--helix-space-lg) * -1);margin-inline: calc(var(--_slider-thumb-length) / 2 - var(--helix-space-lg));mask-origin: padding-box;}[part="marker-label"] {color: var(--helix-color-foreground-subtle);font-family: var(--helix-font-sans);font-size: var(--helix-text-xs);font-variant-numeric: tabular-nums;inset-block-start: var(--helix-space-sm);inset-inline-start: 50%;position: absolute;translate: -50% 0;}:host(:dir(rtl)) [part="marker-label"] {translate: 50% 0;}[part="markers"] {--_slider-hole: calc(var(--_slider-thumb-length) / 2 + var(--helix-border-thin));--_slider-hole-at: calc(var(--slider-fraction, 0) * 100%);--_slider-hole-from: calc(var(--slider-from, 0) * 100%);--_slider-hole-to: calc(var(--slider-to, 0) * 100%);--_slider-under: linear-gradient(transparent var(--_slider-track), currentColor 0);mask-image:
 var(--_slider-under),
 radial-gradient(
 circle at var(--_slider-hole-at) calc(var(--_slider-track) / 2),
 transparent var(--_slider-hole),
 currentColor var(--_slider-hole)
-);
-}
-
-:host(:dir(rtl)) [part="markers"] {
---_slider-hole-at: calc(100% - var(--slider-fraction, 0) * 100%);
---_slider-hole-from: calc(100% - var(--slider-from, 0) * 100%);
---_slider-hole-to: calc(100% - var(--slider-to, 0) * 100%);
-}
-
-[part="field"][data-range] [part="markers"] {
-mask-composite: add, intersect;
-mask-image:
+);}:host(:dir(rtl)) [part="markers"] {--_slider-hole-at: calc(100% - var(--slider-fraction, 0) * 100%);--_slider-hole-from: calc(100% - var(--slider-from, 0) * 100%);--_slider-hole-to: calc(100% - var(--slider-to, 0) * 100%);}[part="field"][data-range] [part="markers"] {mask-composite: add, intersect;mask-image:
 var(--_slider-under),
 radial-gradient(
 circle at var(--_slider-hole-from) calc(var(--_slider-track) / 2),
@@ -151,135 +37,23 @@ radial-gradient(
 circle at var(--_slider-hole-to) calc(var(--_slider-track) / 2),
 transparent var(--_slider-hole),
 currentColor var(--_slider-hole)
-);
-}
-
-:host([orientation="vertical"]) [part="markers"] {
-mask-image: radial-gradient(
+);}:host([orientation="vertical"]) [part="markers"] {mask-image: radial-gradient(
 circle at 50% calc(100% - var(--slider-fraction, 0) * 100%),
 transparent var(--_slider-hole),
 currentColor var(--_slider-hole)
-);
-}
-
-[part="marker"] {
-background-color: var(--slider-marker-color, var(--helix-color-background));
-block-size: var(--_slider-track);
-border-radius: var(--helix-radii-full);
-inline-size: var(--helix-border-thick);
-inset-block-start: 0;
-
-inset-inline-start: var(--slider-marker-at, 0%);
-position: absolute;
-translate: -50% 0;
-}
-
-:host(:dir(rtl)) [part="marker"] {
-translate: 50% 0;
-}
-
-:host(:disabled) [part="control"] {
-cursor: not-allowed;
-}
-
-:host(:disabled) {
-opacity: 0.5;
-}
-
-[part="control"]::-webkit-slider-runnable-track {
-background: var(--_slider-track-image);
-block-size: var(--_slider-track);
-border-radius: var(--helix-radii-full);
-}
-
-[part="control"]::-moz-range-track {
-background: var(--_slider-track-image);
-block-size: var(--_slider-track);
-border-radius: var(--helix-radii-full);
-}
-
-[part="control"]::-webkit-slider-thumb {
-appearance: none;
-
-background-color: var(--slider-thumb-color, var(--helix-color-surface-inverse));
-block-size: var(--_slider-thumb);
-border: none;
-border-radius: var(--_slider-thumb-radii);
-
-box-shadow:
+);}[part="marker"] {background-color: var(--slider-marker-color, var(--helix-color-background));block-size: var(--_slider-track);border-radius: var(--helix-radii-full);inline-size: var(--helix-border-thick);inset-block-start: 0;inset-inline-start: var(--slider-marker-at, 0%);position: absolute;translate: -50% 0;}:host(:dir(rtl)) [part="marker"] {translate: 50% 0;}:host(:disabled) [part="control"] {cursor: not-allowed;}:host(:disabled) {opacity: 0.5;}[part="control"]::-webkit-slider-runnable-track {background: var(--_slider-track-image);block-size: var(--_slider-track);border-radius: var(--helix-radii-full);}[part="control"]::-moz-range-track {background: var(--_slider-track-image);block-size: var(--_slider-track);border-radius: var(--helix-radii-full);}[part="control"]::-webkit-slider-thumb {appearance: none;background-color: var(--slider-thumb-color, var(--helix-color-surface-inverse));block-size: var(--_slider-thumb);border: none;border-radius: var(--_slider-thumb-radii);box-shadow:
 0 0 0 var(--helix-border-thick) var(--slider-thumb-ring-color, var(--helix-color-background)),
-var(--helix-shadow-md);
-inline-size: var(--_slider-thumb-length);
-margin-block-start: calc((var(--_slider-track) - var(--_slider-thumb)) / 2);
-}
-
-[part="control"]:focus-visible::-webkit-slider-thumb,
-[part="control"]:active::-webkit-slider-thumb {
-box-shadow:
+var(--helix-shadow-md);inline-size: var(--_slider-thumb-length);margin-block-start: calc((var(--_slider-track) - var(--_slider-thumb)) / 2);}[part="control"]:focus-visible::-webkit-slider-thumb,
+[part="control"]:active::-webkit-slider-thumb {box-shadow:
 0 0 0 var(--helix-border-thick) var(--slider-thumb-ring-color, var(--helix-color-background)),
 var(--helix-shadow-md),
-0 0 0 var(--helix-space-2xs) var(--_slider-halo);
-}
-
-[part="control"]:focus-visible::-moz-range-thumb,
-[part="control"]:active::-moz-range-thumb {
-box-shadow:
+0 0 0 var(--helix-space-2xs) var(--_slider-halo);}[part="control"]:focus-visible::-moz-range-thumb,
+[part="control"]:active::-moz-range-thumb {box-shadow:
 0 0 0 var(--helix-border-thick) var(--slider-thumb-ring-color, var(--helix-color-background)),
 var(--helix-shadow-md),
-0 0 0 var(--helix-space-2xs) var(--_slider-halo);
-}
-
-[part="control"]::-moz-range-thumb {
-background-color: var(--slider-thumb-color, var(--helix-color-surface-inverse));
-block-size: var(--_slider-thumb);
-
-border: none;
-border-radius: var(--_slider-thumb-radii);
-
-box-shadow:
+0 0 0 var(--helix-space-2xs) var(--_slider-halo);}[part="control"]::-moz-range-thumb {background-color: var(--slider-thumb-color, var(--helix-color-surface-inverse));block-size: var(--_slider-thumb);border: none;border-radius: var(--_slider-thumb-radii);box-shadow:
 0 0 0 var(--helix-border-thick) var(--slider-thumb-ring-color, var(--helix-color-background)),
-var(--helix-shadow-md);
-inline-size: var(--_slider-thumb-length);
-}
-
-[part="control"]:focus-visible {
-outline: none;
-}
-
-[part="control"]:focus-visible::-webkit-slider-thumb {
-outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);
-outline-offset: var(--helix-size-focus-offset);
-}
-
-[part="control"]:focus-visible::-moz-range-thumb {
-outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);
-outline-offset: var(--helix-size-focus-offset);
-}
-
-:host(:state(invalid)) [part="control"]::-webkit-slider-thumb {
-box-shadow: 0 0 0 var(--helix-size-focus-ring) var(--helix-color-danger);
-}
-
-:host(:state(invalid)) [part="control"]::-moz-range-thumb {
-box-shadow: 0 0 0 var(--helix-size-focus-ring) var(--helix-color-danger);
-}
-
-:host([range]) [part="field"] {
-display: grid;
-grid-template-columns: 1fr auto;
-}
-
-:host([range]) [part="control"] {
-grid-area: 1 / 1;
-}
-
-:host([range]) [part="output"] {
-grid-column: 2;
-grid-row: 1;
-}
-
-:host([range]) [part="control"][data-thumb="start"] {
---_slider-track-image: var(
+var(--helix-shadow-md);inline-size: var(--_slider-thumb-length);}[part="control"]:focus-visible {outline: none;}[part="control"]:focus-visible::-webkit-slider-thumb {outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);outline-offset: var(--helix-size-focus-offset);}[part="control"]:focus-visible::-moz-range-thumb {outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);outline-offset: var(--helix-size-focus-offset);}:host(:state(invalid)) [part="control"]::-webkit-slider-thumb {box-shadow: 0 0 0 var(--helix-size-focus-ring) var(--helix-color-danger);}:host(:state(invalid)) [part="control"]::-moz-range-thumb {box-shadow: 0 0 0 var(--helix-size-focus-ring) var(--helix-color-danger);}:host([range]) [part="field"] {display: grid;grid-template-columns: 1fr auto;}:host([range]) [part="control"] {grid-area: 1 / 1;}:host([range]) [part="output"] {grid-column: 2;grid-row: 1;}:host([range]) [part="control"][data-thumb="start"] {--_slider-track-image: var(
 --slider-track-image,
 linear-gradient(
 var(--_slider-along),
@@ -288,81 +62,22 @@ var(--slider-fill-color, var(--helix-color-primary)) calc(var(--slider-from, 0)
 var(--slider-fill-color, var(--helix-color-primary)) calc(var(--slider-to, 1) * 100%),
 var(--_slider-track-color) calc(var(--slider-to, 1) * 100%)
 )
-);
-}
-
-:host([range]) [part="control"][data-thumb="end"]::-webkit-slider-runnable-track {
-background: transparent;
-}
-
-:host([range]) [part="control"][data-thumb="end"]::-moz-range-track {
-background: transparent;
-}
-
-:host([range]) [part="control"] {
-pointer-events: none;
-}
-
-:host([range]) [part="control"]::-webkit-slider-thumb {
-pointer-events: auto;
-}
-
-:host([range]) [part="control"]::-moz-range-thumb {
-pointer-events: auto;
-}
-
-:host([orientation="vertical"]) [part="field"] {
-flex-direction: column;
-}
-
-:host([orientation="vertical"]) [part="field"][data-markers] {
-grid-template-columns: none;
-grid-template-rows: 1fr auto;
-}
-
-:host([orientation="vertical"]) [part="control"] {
-
---_slider-track-image: var(
+);}:host([range]) [part="control"][data-thumb="end"]::-webkit-slider-runnable-track {background: transparent;}:host([range]) [part="control"][data-thumb="end"]::-moz-range-track {background: transparent;}:host([range]) [part="control"] {pointer-events: none;}:host([range]) [part="control"]::-webkit-slider-thumb {pointer-events: auto;}:host([range]) [part="control"]::-moz-range-thumb {pointer-events: auto;}:host([orientation="vertical"]) [part="field"] {flex-direction: column;}:host([orientation="vertical"]) [part="field"][data-markers] {grid-template-columns: none;grid-template-rows: 1fr auto;}:host([orientation="vertical"]) [part="control"] {--_slider-track-image: var(
 --slider-track-image,
 linear-gradient(
 to top,
 var(--slider-fill-color, var(--helix-color-primary)) calc(var(--slider-fraction, 0) * 100%),
 var(--_slider-track-color) calc(var(--slider-fraction, 0) * 100%)
 )
-);
-direction: rtl;
-inline-size: var(--slider-length, 9rem);
-margin-block: calc(var(--_slider-thumb-length) / 2);
-margin-inline: 0;
-writing-mode: vertical-lr;
-}
-
-:host([orientation="vertical"]) [part="marker"] {
-block-size: var(--helix-border-thick);
-inline-size: var(--_slider-track);
-inset-block-end: var(--slider-marker-at, 0%);
-inset-block-start: auto;
-inset-inline-start: 0;
-translate: 0 50%;
-}
-
-:host([orientation="vertical"]) [part="field"][data-markers] [part="output"] {
-grid-column: 1;
-grid-row: 2;
-}
-
-:host([orientation="vertical"]) [part="markers"] {
-align-self: stretch;
-block-size: auto;
-inline-size: var(--_slider-track);
-justify-self: center;
-margin-block: calc(var(--_slider-thumb) / 2);
-margin-inline: 0;
-}
-
-@media print {
-:host {
-box-shadow: none;
-print-color-adjust: exact;
-}
-}`);
+);direction: rtl;inline-size: var(--slider-length, 9rem);margin-block: calc(var(--_slider-thumb-length) / 2);margin-inline: 0;writing-mode: vertical-lr;}:host([orientation="vertical"]) [part="control"][data-origin] {--_slider-track-image: var(
+--slider-track-image,
+linear-gradient(
+to top,
+var(--_slider-track-color) calc(var(--slider-from, 0) * 100%),
+var(--slider-fill-color, var(--helix-color-primary)) calc(var(--slider-from, 0) * 100%),
+var(--slider-fill-color, var(--helix-color-primary)) calc(var(--slider-to, 0) * 100%),
+var(--_slider-track-color) calc(var(--slider-to, 0) * 100%)
+)
+);}:host([orientation="vertical"]) [part="marker"] {block-size: var(--helix-border-thick);inline-size: var(--_slider-track);inset-block-end: var(--slider-marker-at, 0%);inset-block-start: auto;inset-inline-start: 0;translate: 0 50%;}:host([orientation="vertical"]) [part="field"][data-markers] [part="output"] {grid-column: 1;grid-row: 2;}:host([orientation="vertical"]) [part="markers"] {align-self: stretch;block-size: auto;inline-size: var(--_slider-track);justify-self: center;margin-block: calc(var(--_slider-thumb) / 2);margin-inline: 0;}[part="field"][data-tooltip] {display: grid;grid-template-columns: 1fr auto;}[part="field"][data-tooltip] [part="control"],
+[part="tooltips"] {grid-column: 1;grid-row: 1;}[part="field"][data-tooltip] [part="output"] {grid-column: 2;grid-row: 1;}[part="tooltips"] {align-self: center;block-size: var(--_slider-track);margin-inline: calc(var(--_slider-thumb-length) / 2);pointer-events: none;position: relative;z-index: var(--helix-layer-overlay);}[part="tooltip"] {background-color: var(--slider-tooltip-background-color, var(--helix-color-surface-inverse));border-radius: var(--helix-radii-sm);color: var(--slider-tooltip-color, var(--helix-color-foreground-inverse));font-family: var(--helix-font-sans);font-size: var(--helix-text-xs);font-variant-numeric: tabular-nums;inset-block-end: calc(50% + var(--_slider-thumb) / 2 + var(--helix-space-2xs));inset-inline-start: calc(var(--slider-at, 0) * 100%);opacity: 0;padding: var(--helix-space-2xs) var(--helix-space-xs);position: absolute;transition: opacity var(--helix-duration-fast) var(--helix-easing-standard);translate: -50% 0;white-space: nowrap;}:host(:dir(rtl)) [part="tooltip"] {translate: 50% 0;}:host(:hover) [part="tooltip"],
+:host(:focus-within) [part="tooltip"] {opacity: 1;}:host([orientation="vertical"]) [part="field"][data-tooltip] {grid-template-columns: none;grid-template-rows: 1fr auto;}:host([orientation="vertical"]) [part="field"][data-tooltip] [part="output"] {grid-column: 1;grid-row: 2;justify-self: center;}:host([orientation="vertical"]) [part="tooltips"] {align-self: stretch;block-size: auto;inline-size: var(--_slider-track);justify-self: center;margin-block: calc(var(--_slider-thumb) / 2);margin-inline: 0;}:host([orientation="vertical"]) [part="tooltip"] {inset-block-end: calc(var(--slider-at, 0) * 100%);inset-inline-start: calc(50% + var(--_slider-thumb) / 2 + var(--helix-space-2xs));translate: 0 50%;}@media print {:host {box-shadow: none;print-color-adjust: exact;}}`);

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

@@ -26,6 +26,8 @@ import type { CSSResultGroup } from 'lit';
  * @cssproperty --slider-thumb-radius - The thumb's corner radius. It is fully round by default, so a thumb with two different dimensions is a capsule unless you change it.
  * @cssproperty --slider-thumb-ring-color - The color of the ring between the thumb and the track. Set it for a slider that sits on a surface other than the page background.
  * @cssproperty --slider-thumb-size - The thumb's size across the track. It equals the length by default, which makes the thumb round.
+ * @cssproperty --slider-tooltip-background-color - The fill of the bubble each thumb shows its value in, under `tooltip`.
+ * @cssproperty --slider-tooltip-color - The color of the value in a thumb's bubble, under `tooltip`.
  * @cssproperty --slider-track-color - The color of the unfilled part of the track.
  * @cssproperty --slider-track-image - An image for the whole track, such as a gradient for a slider whose value is a color.
  * @cssproperty --slider-track-size - The thickness of the track. It matches the progress bar's size by default.

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

@@ -1,100 +1,14 @@
 import { createSheet } from '@fusion.dev/helix-core';
-export const styles = createSheet(`:host {
---_sparkline-ink: var(--sparkline-color, var(--helix-color-series-1));
-block-size: var(--sparkline-block-size, 2.5em);
-
-color: var(--_sparkline-ink);
-
-position: relative;
-
-display: inline-block;
-inline-size: var(--sparkline-inline-size, 7em);
-vertical-align: middle;
-}
-
-[part="svg"] {
-block-size: 100%;
-inline-size: 100%;
-
-overflow: visible;
-}
-
-[part="line"] {
-fill: none;
-stroke: currentColor;
-stroke-linecap: round;
-stroke-linejoin: round;
-
-stroke-width: var(--sparkline-width, var(--_sparkline-weight, 0.11em));
-
-vector-effect: non-scaling-stroke;
-}
-
-[part="area"] {
-fill: none;
-}
-
-[part="wash-start"],
-[part="wash-end"] {
-stop-color: currentColor;
-stop-opacity: 0;
-}
-
-:host(:not([plot="bar"]):not([plot="line"])) [part="area"] {
-fill: url("#sparkline-wash");
-}
-
-:host(:not([plot="bar"]):not([plot="line"])) [part="wash-start"] {
-
-stop-opacity: calc(var(--sparkline-area-opacity, 0.45) * var(--helix-material-opacity));
-}
-
-:host(:not([plot="bar"]):not([plot="line"])) [part="wash-end"] {
-stop-opacity: calc(var(--sparkline-area-opacity, 0.45) / 9 * var(--helix-material-opacity));
-}
-
-:host([weight="thin"]) {
---_sparkline-weight: 0.07em;
-}
-
-:host([weight="thick"]) {
---_sparkline-weight: 0.18em;
-}
-
-[part="bar"] {
-fill: currentColor;
-rx: var(--sparkline-bar-radius, 0.5);
-}
-
-:host([terminus="ring"]) [part="svg"] {
-mask-image: radial-gradient(
+export const styles = createSheet(`:host {--_sparkline-ink: var(--sparkline-color, var(--helix-color-series-1));block-size: var(--sparkline-block-size, 2.5em);color: var(--_sparkline-ink);position: relative;display: inline-block;inline-size: var(--sparkline-inline-size, 7em);vertical-align: middle;}[part="svg"] {block-size: 100%;inline-size: 100%;overflow: visible;}[part="line"] {fill: none;stroke: currentColor;stroke-linecap: round;stroke-linejoin: round;stroke-width: var(--sparkline-width, var(--_sparkline-weight, 0.11em));vector-effect: non-scaling-stroke;}[part="area"] {fill: none;}[part="wash-start"],
+[part="wash-end"] {stop-color: currentColor;stop-opacity: 0;}:host(:not([plot="bar"]):not([plot="line"])) [part="area"] {fill: url("#sparkline-wash");}:host(:not([plot="bar"]):not([plot="line"])) [part="wash-start"] {stop-opacity: calc(var(--sparkline-area-opacity, 0.45) * var(--helix-material-opacity));}:host(:not([plot="bar"]):not([plot="line"])) [part="wash-end"] {stop-opacity: calc(var(--sparkline-area-opacity, 0.45) / 9 * var(--helix-material-opacity));}:host([weight="thin"]) {--_sparkline-weight: 0.07em;}:host([weight="thick"]) {--_sparkline-weight: 0.18em;}[part="range"] {fill: var(--sparkline-range-color, currentColor);fill-opacity: var(--sparkline-range-opacity, 0.12);}[part="bar"] {fill: currentColor;rx: var(--sparkline-bar-radius, 0.5);}:host([terminus="ring"]) [part="svg"] {mask-image: radial-gradient(
 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;
-}`);
+);}@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"],
+[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)
+var(--sparkline-mark-ring-color, var(--helix-color-background));}[part="readout"] {background-color: var(--sparkline-readout-background-color, var(--helix-color-surface-inverse));border-radius: var(--helix-radii-sm);color: var(--sparkline-readout-color, var(--helix-color-foreground-inverse));font-family: var(--helix-font-sans);font-size: var(--sparkline-readout-font-size, var(--helix-text-xs));font-variant-numeric: tabular-nums;line-height: 1.4;padding: 0 var(--helix-space-2xs);pointer-events: none;position: absolute;translate: -50% calc(-100% - var(--sparkline-mark-size, 5px));white-space: nowrap;z-index: 1;}:host(:dir(rtl)) [part="cursor"],
+:host(:dir(rtl)) [part="high"],
+:host(:dir(rtl)) [part="lone"],
+:host(:dir(rtl)) [part="low"] {translate: 50% -50%;}:host(:dir(rtl)) [part="readout"] {translate: 50% calc(-100% - var(--sparkline-mark-size, 5px));}[part="live"] {block-size: 1px;clip-path: inset(50%);inline-size: 1px;margin: var(--helix-space-none);overflow: hidden;position: absolute;white-space: nowrap;}`);

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

@@ -30,6 +30,14 @@ import type { CSSResultGroup } from 'lit';
  * @cssproperty --sparkline-block-size - Height of the drawing.
  * @cssproperty --sparkline-color - Color of the line, the area fill, the columns, and the mark.
  * @cssproperty --sparkline-inline-size - Width of the drawing.
+ * @cssproperty --sparkline-mark-color - Color of the dot on the reading a pointer or a key rests on, and of the `marks` dots. Without it, the line's color.
+ * @cssproperty --sparkline-mark-ring-color - Color of the ring round the dot on the reading a pointer or a key rests on, which matches the page. Change it when the sparkline sits on another surface.
+ * @cssproperty --sparkline-mark-size - Size of the dot on the reading a pointer or a key rests on, and of the `marks` dots.
+ * @cssproperty --sparkline-range-color - Fill of the band `range` draws. Without it, the line's color.
+ * @cssproperty --sparkline-range-opacity - Opacity of the band `range` draws.
+ * @cssproperty --sparkline-readout-background-color - Ground of the reading written above the dot.
+ * @cssproperty --sparkline-readout-color - Color of the reading written above the dot.
+ * @cssproperty --sparkline-readout-font-size - Size of the reading written above the dot.
  * @cssproperty --sparkline-width - Thickness of the line, overriding `weight`.
  */
 export declare class HelixSparkline extends HelixHeadlessSparkline {

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

@@ -8,9 +8,10 @@ import { customElement } from '@fusion.dev/helix-core';
 import { HelixHeadlessSparkline } from '@fusion.dev/helix-headless/sparkline';
 import { property } from 'lit/decorators.js';
 import { styles as terminusStyles } from '../../shared/chart/terminus.css.js';
+import { styles as liveStyles } from '../../shared/live/live.css.js';
 import { styles } from './sparkline-root.css.js';
 let HelixSparkline = class HelixSparkline extends HelixHeadlessSparkline {
-    static { this.styles = [terminusStyles, styles]; }
+    static { this.styles = [liveStyles, terminusStyles, styles]; }
 };
 __decorate([
     property({ reflect: true })

package/dist/speed-dial/item/speed-dial-item.css.js

@@ -1,76 +1,8 @@
 import { createSheet } from '@fusion.dev/helix-core';
-export const styles = createSheet(`:host {
-display: block;
-}
-
-[part="item"] {
-align-items: center;
-background: none;
-border: none;
-color: inherit;
-cursor: pointer;
-display: inline-flex;
-flex-direction: var(--_speed-dial-row, row-reverse);
-font: inherit;
-gap: var(--helix-space-sm);
-padding: var(--helix-space-none);
-}
-
-[part="item"]:disabled {
-cursor: not-allowed;
-opacity: 0.5;
-}
-
-[part="icon"] {
---icon-size: var(--helix-size-icon);
-
-align-items: center;
-aspect-ratio: 1;
-background-color: var(--speed-dial-item-background-color, var(--helix-color-surface-overlay));
-border-radius: var(--helix-radii-full);
-box-shadow: var(--helix-shadow-md);
-color: var(--speed-dial-item-color, var(--helix-color-foreground));
-display: inline-flex;
-inline-size: var(--speed-dial-item-size, var(--helix-size-control-tight));
-justify-content: center;
-transition:
+export const styles = createSheet(`:host {display: block;}[part="item"] {align-items: center;background: none;border: none;color: inherit;cursor: pointer;display: inline-flex;flex-direction: var(--_speed-dial-row, row-reverse);font: inherit;gap: var(--helix-space-sm);padding: var(--helix-space-none);}[part="item"]:disabled {cursor: not-allowed;opacity: var(--speed-dial-item-disabled-opacity, 0.5);}[part="icon"] {--icon-size: var(--helix-size-icon);align-items: center;aspect-ratio: 1;background-color: var(--speed-dial-item-background-color, var(--helix-color-surface-overlay));border-radius: var(--helix-radii-full);box-shadow: var(--helix-shadow-md);color: var(--speed-dial-item-color, var(--helix-color-foreground));display: inline-flex;inline-size: var(--speed-dial-item-size, var(--helix-size-control-tight));justify-content: center;pointer-events: auto;transition:
 background-color var(--helix-duration-fast) var(--helix-easing-standard),
-box-shadow var(--helix-duration-fast) var(--helix-easing-standard);
-}
-
-[part="item"]:not(:disabled):hover [part="icon"] {
-background-color: color-mix(
-in oklab,
-var(--helix-color-foreground) 6%,
-var(--helix-color-surface-overlay)
-);
-box-shadow: var(--helix-shadow-lg);
-}
-
-[part="item"]:focus-visible {
-outline: none;
-}
-
-[part="item"]:focus-visible [part="icon"] {
-outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);
-outline-offset: var(--helix-size-focus-offset);
-}
-
-[part="label"] {
-background-color: var(--speed-dial-label-background-color, var(--helix-color-surface-overlay));
-border-radius: var(--helix-radii-sm);
-box-shadow: var(--helix-shadow-sm);
-color: var(--speed-dial-label-color, var(--helix-color-foreground));
-font-family: var(--helix-font-sans);
-font-size: var(--helix-text-sm);
-font-weight: var(--helix-weight-medium);
-opacity: var(--_speed-dial-label-opacity, 1);
-padding: var(--helix-space-2xs) var(--helix-space-xs);
-transition: opacity var(--helix-duration-fast) var(--helix-easing-standard);
-white-space: nowrap;
-}
-
-[part="item"]:hover [part="label"],
-[part="item"]:focus-visible [part="label"] {
-opacity: 1;
-}`);
+box-shadow var(--helix-duration-fast) var(--helix-easing-standard);}[part="item"]:not(:disabled):hover [part="icon"] {background-color: var(
+--speed-dial-item-hover-background-color,
+color-mix(in oklab, var(--helix-color-foreground) 6%, var(--helix-color-surface-overlay))
+);box-shadow: var(--helix-shadow-lg);}[part="item"]:focus-visible {outline: none;}[part="item"]:focus-visible [part="icon"] {outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);outline-offset: var(--helix-size-focus-offset);}[part="label"] {background-color: var(--speed-dial-label-background-color, var(--helix-color-surface-overlay));border-radius: var(--helix-radii-sm);box-shadow: var(--helix-shadow-sm);color: var(--speed-dial-label-color, var(--helix-color-foreground));font-family: var(--helix-font-sans);font-size: var(--speed-dial-label-font-size, var(--helix-text-sm));font-weight: var(--helix-weight-medium);opacity: var(--_speed-dial-label-opacity, 1);padding: var(--helix-space-2xs) var(--helix-space-xs);transition: opacity var(--helix-duration-fast) var(--helix-easing-standard);white-space: nowrap;}[part="item"]:hover [part="label"],
+[part="item"]:focus-visible [part="label"] {opacity: 1;}`);

package/dist/speed-dial/item/speed-dial-item.d.ts

@@ -16,9 +16,12 @@ import type { CSSResultGroup } from 'lit';
  *
  * @cssproperty --speed-dial-item-background-color - Fill of the round icon.
  * @cssproperty --speed-dial-item-color - Color of the icon.
+ * @cssproperty --speed-dial-item-disabled-opacity - How faint a disabled action is drawn.
+ * @cssproperty --speed-dial-item-hover-background-color - Fill of the round icon under the pointer.
  * @cssproperty --speed-dial-item-size - Edge length of the icon.
  * @cssproperty --speed-dial-label-background-color - Fill of the chip holding the action's name.
  * @cssproperty --speed-dial-label-color - Color of the action's name.
+ * @cssproperty --speed-dial-label-font-size - Size of the action's name.
  */
 export declare class HelixSpeedDialItem extends HelixHeadlessSpeedDialItem {
     static styles: CSSResultGroup;