@fusion.dev/helix 0.145.0 → 0.147.0

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

@@ -1,113 +1,16 @@
 import { createSheet } from '@fusion.dev/helix-core';
-export const styles = createSheet(`:host {
-display: block;
-}
-
-[part="list"] {
-display: flex;
-flex-direction: var(--legend-direction, row);
-
-flex-wrap: wrap;
-gap: var(--legend-gap, var(--helix-space-sm));
-list-style: none;
-margin: var(--helix-space-none);
-padding: var(--helix-space-none);
-}
-
-[part~="entry"] {
-align-items: center;
-color: var(--helix-color-foreground-muted);
-display: flex;
-font-size: var(--helix-text-sm);
-gap: var(--legend-entry-gap, var(--helix-space-2xs));
-line-height: var(--helix-leading-tight);
-}
-
-:host([placement="start"]) [part="list"],
-:host([placement="end"]) [part="list"] {
-flex-direction: column;
-}
-
-:host([placement="end"]) [part~="entry"] {
-flex-direction: row-reverse;
-text-align: end;
-}
-
-[part~="entry"]::before {
---_legend-shade: color-mix(in oklab, var(--chart-series) 60%, var(--helix-color-background));
-
-block-size: var(--legend-swatch-size, var(--helix-space-sm));
-
-border-radius: var(--legend-swatch-radius, var(--helix-radii-sm));
-content: "";
-flex: 0 0 auto;
-inline-size: var(--legend-swatch-size, var(--helix-space-sm));
-}
-
-[part~="entry"]::before {
-background-color: color-mix(
+export const styles = createSheet(`:host {display: block;}[part="list"] {display: flex;flex-direction: var(--legend-direction, row);flex-wrap: wrap;gap: var(--legend-gap, var(--helix-space-sm));list-style: none;margin: var(--helix-space-none);padding: var(--helix-space-none);}[part~="entry"] {align-items: center;color: var(--legend-color, var(--helix-color-foreground-muted));display: flex;font-size: var(--legend-font-size, var(--helix-text-sm));gap: var(--legend-entry-gap, var(--helix-space-2xs));line-height: var(--helix-leading-tight);}:host([placement="start"]) [part="list"],
+:host([placement="end"]) [part="list"] {flex-direction: column;}:host([placement="end"]) [part~="entry"] {flex-direction: row-reverse;text-align: end;}[part~="entry"]::before {--_legend-shade: color-mix(in oklab, var(--chart-series) 60%, var(--helix-color-background));block-size: var(--legend-swatch-size, var(--helix-space-sm));border-radius: var(--legend-swatch-radius, var(--helix-radii-sm));content: "";flex: 0 0 auto;inline-size: var(--legend-swatch-size, var(--helix-space-sm));}[part~="entry"]::before {background-color: color-mix(
 in oklab,
 var(--chart-series) calc(var(--_legend-area, 1) * var(--_legend-through, 1) * 100%),
 transparent
-);
-}
-
-[part~="entry"][data-emphasis="outlined"]::before,
-:host([emphasis="outlined"]) [part~="entry"]:not([data-emphasis])::before {
-background-color: color-mix(
+);}[part~="entry"][data-emphasis="outlined"]::before,
+:host([emphasis="outlined"]) [part~="entry"]:not([data-emphasis])::before {background-color: color-mix(
 in oklab,
 var(--_legend-shade) calc(var(--_legend-through, 1) * 100%),
 transparent
-);
-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-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;
-}
-}`);
+);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-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;}}`);

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

@@ -24,8 +24,10 @@ import type { CSSResultGroup, PropertyValues } from 'lit';
  * @aliases Key, Series Key
  * @documentation https://fusion.dev/helix/components/legend
  *
+ * @cssproperty --legend-color - The color of the series names.
  * @cssproperty --legend-direction - The direction the entries run: `row`, which wraps, or `column`.
  * @cssproperty --legend-entry-gap - The space between a swatch and its name.
+ * @cssproperty --legend-font-size - The type size of the series names.
  * @cssproperty --legend-gap - The space between entries.
  * @cssproperty --legend-hidden-opacity - How strongly a hidden series' entry is drawn, under `toggles`.
  * @cssproperty --legend-swatch-radius - The corner of the color swatch.

package/dist/lightbox/item/lightbox-item.css.js

@@ -1,34 +1,2 @@
 import { createSheet } from '@fusion.dev/helix-core';
-export const styles = createSheet(`:host {
-display: contents;
-}
-
-[part="item"] {
-align-items: center;
-block-size: 100%;
-display: flex;
-flex-direction: column;
-gap: var(--lightbox-item-gap, var(--helix-space-sm));
-inline-size: 100%;
-justify-content: center;
-
-min-block-size: 0;
-min-inline-size: 0;
-}
-
-[part="item"][hidden] {
-display: none;
-}
-
-[part="item"] ::slotted(*) {
-max-block-size: 100%;
-max-inline-size: 100%;
-object-fit: contain;
-}
-
-[part="item"] ::slotted([slot="description"]) {
-color: var(--lightbox-item-description-color, var(--helix-color-foreground-subtle));
-font-size: var(--helix-text-sm);
-line-height: calc(var(--helix-text-sm) * var(--helix-leading-normal));
-text-align: center;
-}`);
+export const styles = createSheet(`:host {display: contents;}[part="item"] {align-items: center;block-size: 100%;display: flex;flex-direction: column;gap: var(--lightbox-item-gap, var(--helix-space-sm));inline-size: 100%;justify-content: center;min-block-size: 0;min-inline-size: 0;}[part="item"][hidden] {display: none;}[part="item"] {transform: translate(var(--lightbox-pan-x), var(--lightbox-pan-y)) scale(var(--lightbox-zoom));}[part="item"] ::slotted(*) {max-block-size: 100%;max-inline-size: 100%;object-fit: contain;}[part="item"] ::slotted([slot="description"]) {color: var(--lightbox-item-description-color, var(--helix-color-foreground-subtle));font-size: var(--helix-text-sm);line-height: calc(var(--helix-text-sm) * var(--helix-leading-normal));text-align: center;}`);

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

@@ -1,155 +1,51 @@
 import { createSheet } from '@fusion.dev/helix-core';
-export const styles = createSheet(`:host {
-color-scheme: dark;
-display: contents;
-}
-
-[part="dialog"] {
-background-color: transparent;
-block-size: 100dvh;
-border: none;
-box-sizing: border-box;
-color: var(--lightbox-foreground, var(--helix-color-foreground));
-display: grid;
-gap: var(--lightbox-gap, var(--helix-space-sm));
-grid-template-rows: auto 1fr auto;
-inline-size: 100vw;
-max-block-size: 100dvh;
-max-inline-size: 100vw;
-padding: var(--lightbox-padding, var(--helix-space-md));
-
-touch-action: pan-y pinch-zoom;
-}
-
-[part="dialog"]:focus-visible {
-outline: none;
-}
-
-[part="dialog"]:not([open]) {
-display: none;
-}
-
-:host {
---_lightbox-scrim: var(--helix-color-background);
-}
-
-[part="dialog"]::backdrop {
-background-color: var(--lightbox-scrim, var(--_lightbox-scrim));
-}
-
-[part="viewport"] {
-align-items: center;
-display: flex;
-justify-content: center;
-
-min-block-size: 0;
-overflow: hidden;
-}
-
-::slotted([slot="header"]),
-::slotted([slot="footer"]) {
-transition:
+export const styles = createSheet(`:host {color-scheme: dark;display: contents;}[part="dialog"] {background-color: transparent;block-size: 100dvh;border: none;box-sizing: border-box;color: var(--lightbox-foreground, var(--helix-color-foreground));display: grid;gap: var(--lightbox-gap, var(--helix-space-sm));grid-template-rows: auto 1fr auto;inline-size: 100vw;max-block-size: 100dvh;max-inline-size: 100vw;padding: var(--lightbox-padding, var(--helix-space-md));touch-action: pan-y pinch-zoom;}[part="dialog"]:focus-visible {outline: none;}[part="dialog"]:not([open]) {display: none;}:host {--_lightbox-scrim: var(--helix-color-background);}[part="dialog"]::backdrop {background-color: var(--lightbox-scrim, var(--_lightbox-scrim));}[part="header"],
+[part="footer"] {display: grid;gap: var(--lightbox-gap, var(--helix-space-sm));}[part="viewport"] {align-items: center;display: flex;justify-content: center;min-block-size: 0;overflow: hidden;}::slotted([slot="header"]),
+::slotted([slot="footer"]) {transition:
 opacity var(--helix-duration-fast) var(--helix-easing-standard),
-visibility var(--helix-duration-fast) var(--helix-easing-standard);
-}
-
-:host(:state(idle)) ::slotted([slot="header"]),
-:host(:state(idle)) ::slotted([slot="footer"]) {
-opacity: 0;
-visibility: hidden;
-}
-
-@media (prefers-reduced-motion: reduce) {
-::slotted([slot="header"]),
-::slotted([slot="footer"]) {
-transition: none;
-}
-}
-
-[part="previous"],
+visibility var(--helix-duration-fast) var(--helix-easing-standard);}:host(:state(idle)) ::slotted([slot="header"]),
+:host(:state(idle)) ::slotted([slot="footer"]) {opacity: 0;visibility: hidden;}@media (prefers-reduced-motion: reduce) {::slotted([slot="header"]),
+::slotted([slot="footer"]) {transition: none;}}[part="previous"],
 [part="next"],
-[part="dismiss"] {
-all: unset;
-
-box-sizing: border-box;
-align-items: center;
-background-color: var(--helix-color-surface-overlay);
-block-size: var(--lightbox-control-size, var(--helix-size-control));
-border-radius: var(--helix-radii-full);
-box-shadow: var(--helix-shadow-md);
-color: var(--lightbox-foreground, var(--helix-color-foreground));
-cursor: pointer;
-display: inline-flex;
-inline-size: var(--lightbox-control-size, var(--helix-size-control));
-justify-content: center;
-position: absolute;
-transition:
+[part="dismiss"],
+[part="zoom-in"],
+[part="zoom-out"] {all: unset;box-sizing: border-box;align-items: center;background-color: var(--helix-color-surface-overlay);block-size: var(--lightbox-control-size, var(--helix-size-control));border-radius: var(--helix-radii-full);box-shadow: var(--helix-shadow-md);color: var(--lightbox-foreground, var(--helix-color-foreground));cursor: pointer;display: inline-flex;inline-size: var(--lightbox-control-size, var(--helix-size-control));justify-content: center;position: absolute;transition:
 opacity var(--helix-duration-fast) var(--helix-easing-standard),
-visibility var(--helix-duration-fast) var(--helix-easing-standard);
-}
-
-[part="previous"],
-[part="next"] {
-inset-block-start: 50%;
-translate: 0 -50%;
-}
-
-[part="previous"] {
-inset-inline-start: var(--lightbox-padding, var(--helix-space-md));
-}
-
-[part="next"] {
-inset-inline-end: var(--lightbox-padding, var(--helix-space-md));
-}
-
-[part="dismiss"] {
-inset-block-start: var(--lightbox-padding, var(--helix-space-md));
-inset-inline-end: var(--lightbox-padding, var(--helix-space-md));
-}
-
-[part="previous"] svg,
+visibility var(--helix-duration-fast) var(--helix-easing-standard);}[part="previous"],
+[part="next"] {inset-block-start: 50%;translate: 0 -50%;}[part="previous"] {inset-inline-start: var(--lightbox-padding, var(--helix-space-md));}[part="next"] {inset-inline-end: var(--lightbox-padding, var(--helix-space-md));}[part="dismiss"] {inset-block-start: var(--lightbox-padding, var(--helix-space-md));inset-inline-end: var(--lightbox-padding, var(--helix-space-md));}[part="zoom-in"],
+[part="zoom-out"] {inset-block-end: var(--lightbox-padding, var(--helix-space-md));}[part="zoom-in"] {inset-inline-end: var(--lightbox-padding, var(--helix-space-md));}[part="zoom-out"] {inset-inline-end: calc(
+var(--lightbox-padding, var(--helix-space-md)) +
+var(--lightbox-control-size, var(--helix-size-control)) +
+var(--helix-space-xs)
+);}[part="previous"] svg,
 [part="next"] svg,
-[part="dismiss"] svg {
-block-size: var(--helix-size-icon);
-inline-size: var(--helix-size-icon);
-}
-
-[part="previous"]:hover,
+[part="dismiss"] svg,
+[part="zoom-in"] svg,
+[part="zoom-out"] svg {block-size: var(--helix-size-icon);inline-size: var(--helix-size-icon);}[part="previous"] ::slotted(*),
+[part="next"] ::slotted(*),
+[part="dismiss"] ::slotted(*),
+[part="zoom-in"] ::slotted(*),
+[part="zoom-out"] ::slotted(*) {--icon-size: var(--helix-size-icon);block-size: var(--helix-size-icon);inline-size: var(--helix-size-icon);}:host(:state(zoomable)) [part="dialog"] {touch-action: none;}:host(:state(zoomable)) [part="viewport"] {cursor: zoom-in;}:host(:state(zoomed)) [part="viewport"] {cursor: grab;}[part="previous"]:hover,
 [part="next"]:hover,
-[part="dismiss"]:hover {
-background-color: var(--helix-color-surface-sunken);
-}
-
-[part="previous"]:focus-visible,
+[part="dismiss"]:hover,
+[part="zoom-in"]:hover,
+[part="zoom-out"]:hover {background-color: var(--helix-color-surface-sunken);}[part="previous"]:focus-visible,
 [part="next"]:focus-visible,
-[part="dismiss"]:focus-visible {
-outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);
-outline-offset: var(--helix-size-focus-offset);
-}
-
-[part="previous"][aria-disabled="true"],
-[part="next"][aria-disabled="true"] {
-cursor: default;
-opacity: 0.4;
-}
-
+[part="dismiss"]:focus-visible,
+[part="zoom-in"]:focus-visible,
+[part="zoom-out"]:focus-visible {outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);outline-offset: var(--helix-size-focus-offset);}[part="previous"][aria-disabled="true"],
+[part="next"][aria-disabled="true"],
+[part="zoom-in"][aria-disabled="true"],
+[part="zoom-out"][aria-disabled="true"] {cursor: default;opacity: 0.4;}[part="counter"] {background-color: var(--helix-color-surface-overlay);border-radius: var(--helix-radii-full);box-shadow: var(--helix-shadow-md);color: var(--lightbox-foreground, var(--helix-color-foreground));font-family: var(--helix-font-sans);font-size: var(--helix-text-sm);font-variant-numeric: tabular-nums;inset-block-start: var(--lightbox-padding, var(--helix-space-md));inset-inline-start: var(--lightbox-padding, var(--helix-space-md));line-height: var(--helix-leading-tight);padding: var(--helix-space-2xs) var(--helix-space-sm);position: absolute;transition:
+opacity var(--helix-duration-fast) var(--helix-easing-standard),
+visibility var(--helix-duration-fast) var(--helix-easing-standard);}:host(:state(idle)) [part="counter"],
 :host(:state(idle)) [part="previous"],
 :host(:state(idle)) [part="next"],
-:host(:state(idle)) [part="dismiss"] {
-opacity: 0;
-visibility: hidden;
-}
-
-@media (prefers-reduced-motion: reduce) {
+:host(:state(idle)) [part="dismiss"],
+:host(:state(idle)) [part="zoom-in"],
+:host(:state(idle)) [part="zoom-out"] {opacity: 0;visibility: hidden;}@media (prefers-reduced-motion: reduce) {[part="counter"],
 [part="previous"],
 [part="next"],
-[part="dismiss"] {
-transition: none;
-}
-}
-
-@media print {
-:host {
-display: none;
-}
-}`);
+[part="dismiss"],
+[part="zoom-in"],
+[part="zoom-out"] {transition: none;}}@media print {:host {display: none;}}`);

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

@@ -1,157 +1,7 @@
 import { createSheet } from '@fusion.dev/helix-core';
-export const styles = createSheet(`:host {
-display: grid;
-position: relative;
-gap: var(--line-chart-gap, var(--helix-space-2xs));
-}
-
-[part="plot"] {
-position: relative;
-
-block-size: var(--line-chart-block-size, 12em);
-}
-
-[part="plot"] svg {
-block-size: 100%;
-inline-size: 100%;
-
-overflow: visible;
-}
-
-[part="line"] {
-stroke-linecap: round;
-stroke-linejoin: round;
-
-stroke-width: var(--line-chart-width, var(--_chart-stroke));
-vector-effect: non-scaling-stroke;
-}
-
-[part="area"] {
-
-opacity: calc(var(--line-chart-area-opacity, 0.16) * var(--helix-material-opacity));
-stroke: none;
-}
-
-[part="baseline"] {
-stroke: var(--helix-color-border);
-stroke-width: var(--helix-border-thin);
-vector-effect: non-scaling-stroke;
-}
-
-[part="labels"] {
-display: grid;
-grid-auto-columns: 1fr;
-grid-auto-flow: column;
-}
-
-[part="label"] {
-color: var(--helix-color-foreground-muted);
-font-size: var(--helix-text-xs);
-overflow: hidden;
-text-align: center;
-text-overflow: ellipsis;
-white-space: nowrap;
-}
-
-[part="line"] {
-stroke: var(--chart-series);
-}
-
-[part="terminus"] {
-color: var(--chart-series);
-}
-
-:host([terminus="ring"]) [part="svg"] {
-mask-composite: intersect;
-mask-image: var(--_line-chart-holes);
-}
-
-[part="area"] {
-fill: var(--chart-series);
-}
-
-[part="guide"] {
-stroke: var(--helix-color-foreground-muted);
-stroke-dasharray: 3 3;
-stroke-width: var(--helix-border-thin);
-vector-effect: non-scaling-stroke;
-}
-
-[part="line"] {
-stroke-dasharray: 1000;
-transition:
+export const styles = createSheet(`:host {display: grid;position: relative;gap: var(--line-chart-gap, var(--helix-space-2xs));}[part="plot"] {position: relative;block-size: var(--line-chart-block-size, 12em);}[part="plot"] svg {block-size: 100%;inline-size: 100%;overflow: visible;}[part~="line"] {stroke-linecap: round;stroke-linejoin: round;stroke-width: var(--line-chart-width, var(--_chart-stroke));vector-effect: non-scaling-stroke;}[part="area"] {opacity: calc(var(--line-chart-area-opacity, 0.16) * var(--helix-material-opacity));stroke: none;}[part="baseline"] {stroke: var(--helix-color-border);stroke-width: var(--helix-border-thin);vector-effect: non-scaling-stroke;}[part="labels"] {display: grid;grid-auto-columns: 1fr;grid-auto-flow: column;}[part="label"] {color: var(--helix-color-foreground-muted);font-size: var(--helix-text-xs);overflow: hidden;text-align: center;text-overflow: ellipsis;white-space: nowrap;}[part~="line"] {stroke: var(--chart-series);}[part="terminus"] {color: var(--chart-series);}[part~="marker"] {background-color: var(--chart-series);block-size: var(--line-chart-marker-size, 6px);border-radius: var(--helix-radii-full);box-shadow: 0 0 0 var(--helix-border-thin)
+var(--line-chart-marker-ring-color, var(--helix-color-background));inline-size: var(--line-chart-marker-size, 6px);pointer-events: none;position: absolute;translate: -50% -50%;}:host(:dir(rtl)) [part~="marker"] {translate: 50% -50%;}:host([terminus="ring"]) [part="svg"] {mask-composite: intersect;mask-image: var(--_line-chart-holes);}[part="area"] {fill: var(--chart-series);}[part="guide"] {stroke: var(--helix-color-foreground-muted);stroke-dasharray: 3 3;stroke-width: var(--helix-border-thin);vector-effect: non-scaling-stroke;}[part~="line"] {stroke-dasharray: 1000;transition:
 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="area"] {
-transition:
+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;}}: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/line-chart/root/line-chart-root.d.ts

@@ -36,8 +36,11 @@ import '../../tooltip/index.js';
  * @cssproperty --line-chart-area-opacity - How much of a line's color its wash takes.
  * @cssproperty --line-chart-band-color - Color of the band around the reading under the pointer.
  * @cssproperty --line-chart-block-size - Height of the drawing.
+ * @cssproperty --line-chart-dash - The dash pattern of a series `dashed` names, as `stroke-dasharray` takes it.
  * @cssproperty --line-chart-gap - Space between the drawing and its labels.
  * @cssproperty --line-chart-gridline-color - Color of the rules drawn across the plot under `gridlines`.
+ * @cssproperty --line-chart-marker-ring-color - Color of the ring round the mark on a reading, which matches the page. Change it when the chart sits on another surface.
+ * @cssproperty --line-chart-marker-size - Size of the mark on a reading, under `markers`.
  * @cssproperty --line-chart-width - Thickness of a line. Overrides `--chart-stroke`.
  */
 export declare class HelixLineChart extends HelixHeadlessLineChart {

package/dist/list/item/list-item.css.js

@@ -1,95 +1,3 @@
 import { createSheet } from '@fusion.dev/helix-core';
-export const styles = createSheet(`:host {
-display: block;
-}
-
-[part~="row"] {
-align-items: center;
-display: grid;
-
-grid-template-columns: auto auto 1fr auto;
-padding: var(--list-item-padding, var(--helix-space-sm) var(--helix-space-md));
-}
-
-[part="rail"] {
-align-self: start;
-color: var(--helix-color-foreground-muted);
-display: var(--list-item-rail-display, none);
-font-family: var(--helix-font-mono);
-font-size: var(--helix-text-xs);
-grid-column: 1;
-grid-row: 1;
-letter-spacing: var(--helix-tracking-wide);
-line-height: calc(var(--helix-text-sm) * var(--helix-leading-normal));
-inline-size: var(--list-rail-inline-size, var(--helix-space-3xl));
-}
-
-[part="rail"]::before {
-content: var(--list-item-rail-content, "");
-}
-
-slot[name="start"]::slotted(*) {
-color: var(--helix-color-foreground-muted);
-grid-column: 2;
-margin-inline-end: var(--helix-space-sm);
-grid-row: 1 / span 2;
-}
-
-slot:not([name]) {
-color: var(--helix-color-foreground);
-display: block;
-font-size: var(--helix-text-sm);
-
-font-weight: var(--list-item-term-weight, var(--helix-weight-regular));
-grid-column: 3;
-grid-row: 1;
-}
-
-slot[name="description"] {
-color: var(--helix-color-foreground-muted);
-display: block;
-font-size: var(--helix-text-xs);
-grid-column: 3;
-grid-row: 2;
-}
-
-slot:not([name])::slotted(*),
-slot[name="description"]::slotted(*) {
-margin: var(--helix-space-none);
-}
-
-slot[name="end"]::slotted(*) {
-grid-column: 4;
-grid-row: 1 / span 2;
-}
-
-[part="link"] {
-align-items: center;
-color: inherit;
-display: grid;
-grid-column: 1 / 4;
-grid-row: 1 / span 2;
-grid-template-columns: subgrid;
-grid-template-rows: subgrid;
-text-decoration: none;
-}
-
-[part~="row-current"] {
-background-color: var(--list-item-current-background-color, var(--helix-color-well));
-border-radius: var(--helix-radii-sm);
-}
-
-[part~="row"]:focus-visible {
-border-radius: var(--helix-radii-sm);
-outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);
-outline-offset: calc(var(--helix-size-focus-offset) * -1);
-}
-
-:host(:state(selected)) [part~="row"] {
-background-color: var(--list-item-selected-background-color, var(--helix-color-primary-subtle));
-border-radius: var(--helix-radii-sm);
-}
-
-:host([disabled]) {
-opacity: var(--list-item-disabled-opacity, 0.5);
-}`);
+export const styles = createSheet(`:host {display: block;}[part~="row"] {align-items: center;display: grid;grid-template-columns: auto auto 1fr auto;padding: var(--list-item-padding, var(--helix-space-sm) var(--helix-space-md));}[part="rail"] {align-self: start;color: var(--helix-color-foreground-muted);display: var(--list-item-rail-display, none);font-family: var(--helix-font-mono);font-size: var(--helix-text-xs);grid-column: 1;grid-row: 1;letter-spacing: var(--helix-tracking-wide);line-height: calc(var(--helix-text-sm) * var(--helix-leading-normal));inline-size: var(--list-rail-inline-size, var(--helix-space-3xl));}[part="rail"]::before {content: var(--list-item-rail-content, "");}slot[name="start"]::slotted(*) {color: var(--helix-color-foreground-muted);grid-column: 2;margin-inline-end: var(--helix-space-sm);grid-row: 1 / span 2;}slot:not([name]) {color: var(--helix-color-foreground);display: block;font-size: var(--helix-text-sm);font-weight: var(--list-item-term-weight, var(--helix-weight-regular));grid-column: 3;grid-row: 1;}slot[name="description"] {color: var(--helix-color-foreground-muted);display: block;font-size: var(--helix-text-xs);grid-column: 3;grid-row: 2;}slot:not([name])::slotted(*),
+slot[name="description"]::slotted(*) {margin: var(--helix-space-none);}slot[name="end"]::slotted(*) {grid-column: 4;grid-row: 1 / span 2;}[part="link"] {align-items: center;color: inherit;display: grid;grid-column: 1 / 4;grid-row: 1 / span 2;grid-template-columns: subgrid;grid-template-rows: subgrid;text-decoration: none;}[part~="row-current"] {background-color: var(--list-item-current-background-color, var(--helix-color-well));border-radius: var(--helix-radii-sm);}[part~="row"]:focus-visible {border-radius: var(--helix-radii-sm);outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);outline-offset: calc(var(--helix-size-focus-offset) * -1);}:host(:state(selected)) [part~="row"] {background-color: var(--list-item-selected-background-color, var(--helix-color-primary-subtle));border-radius: var(--helix-radii-sm);}:host([disabled]) {opacity: var(--list-item-disabled-opacity, 0.5);}`);