@fusion.dev/helix 0.146.0 → 0.148.0

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

@@ -1,86 +1,17 @@
 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="control"][data-origin] {
---_slider-track-image: var(
+);}[part="control"][data-origin] {--_slider-track-image: var(
 --slider-track-image,
 linear-gradient(
 var(--_slider-along),
@@ -89,71 +20,13 @@ 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, 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:
+);}[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),
@@ -164,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),
@@ -301,57 +62,14 @@ 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="control"][data-origin] {
---_slider-track-image: var(
+);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,
@@ -360,35 +78,6 @@ 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, 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;
-}
-
-@media print {
-:host {
-box-shadow: none;
-print-color-adjust: exact;
-}
-}`);
+);}: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,149 +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;
-}
-
-[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;}}: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="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"],
+[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="low"] {
-translate: 50% -50%;
-}
-
-:host(:dir(rtl)) [part="readout"] {
-translate: 50% calc(-100% - var(--sparkline-mark-size, 5px));
-}`);
+: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

@@ -33,6 +33,8 @@ import type { CSSResultGroup } from 'lit';
  * @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.

package/dist/speed-dial/group/speed-dial-group.css.d.ts

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

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

@@ -0,0 +1,2 @@
+import { createSheet } from '@fusion.dev/helix-core';
+export const styles = createSheet(`:host {display: block;}[part="group"] {align-items: var(--_speed-dial-align, flex-end);display: flex;flex-direction: column;gap: var(--speed-dial-gap, var(--helix-space-sm));}[part="label"] {background-color: var(--speed-dial-label-background-color, var(--helix-color-surface-overlay));border-radius: var(--helix-radii-sm);color: var(--speed-dial-group-label-color, var(--helix-color-foreground-muted));font-family: var(--helix-font-sans);font-size: var(--speed-dial-group-label-font-size, var(--helix-text-xs));font-weight: var(--helix-weight-medium);padding: var(--helix-space-2xs) var(--helix-space-xs);white-space: nowrap;}[part="label"][hidden] {display: none;}`);

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

@@ -0,0 +1,27 @@
+import { HelixHeadlessSpeedDialGroup } from '@fusion.dev/helix-headless/speed-dial';
+import type { CSSResultGroup } from 'lit';
+/**
+ * @summary A named set of actions inside a speed dial, set apart from the rest.
+ *
+ * @description
+ * A column of actions with its name above them, in the small muted words a
+ * menu heads its sections with, lined up on the side the trigger is on. The
+ * space between two groups is the space between two actions.
+ *
+ * @since 0.141.0
+ * @status stable
+ * @category actions
+ * @aliases Speed dial section, Action group
+ * @documentation https://fusion.dev/helix/components/speed-dial
+ *
+ * @cssproperty --speed-dial-group-label-color - Color of the group's name.
+ * @cssproperty --speed-dial-group-label-font-size - Size of the group's name.
+ */
+export declare class HelixSpeedDialGroup extends HelixHeadlessSpeedDialGroup {
+    static styles: CSSResultGroup;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'helix-speed-dial-group': HelixSpeedDialGroup;
+    }
+}

package/dist/speed-dial/group/speed-dial-group.js

@@ -0,0 +1,16 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { customElement } from '@fusion.dev/helix-core';
+import { HelixHeadlessSpeedDialGroup } from '@fusion.dev/helix-headless/speed-dial';
+import { styles } from './speed-dial-group.css.js';
+let HelixSpeedDialGroup = class HelixSpeedDialGroup extends HelixHeadlessSpeedDialGroup {
+    static { this.styles = styles; }
+};
+HelixSpeedDialGroup = __decorate([
+    customElement('helix-speed-dial-group')
+], HelixSpeedDialGroup);
+export { HelixSpeedDialGroup };

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

@@ -1,2 +1,3 @@
+export * from './group/speed-dial-group.js';
 export * from './item/speed-dial-item.js';
 export * from './root/speed-dial-root.js';

package/dist/speed-dial/index.js

@@ -1,2 +1,3 @@
+export * from './group/speed-dial-group.js';
 export * from './item/speed-dial-item.js';
 export * from './root/speed-dial-root.js';