@fusion.dev/helix 0.146.0 → 0.147.0

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

@@ -1,173 +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);
-}
-
-[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:
+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,6 +36,7 @@ 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.

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);}`);

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

@@ -1,89 +1,5 @@
 import { createSheet } from '@fusion.dev/helix-core';
-export const styles = createSheet(`:host {
-display: flex;
-flex-direction: column;
-gap: var(--list-gap, var(--helix-space-none));
-}
-
-:host([divided]) ::slotted(*:not(:first-child)) {
-border-block-start: var(--helix-border-thin) solid var(--helix-color-border);
-}
-
-:host([kind="ordered"]),
-:host([kind="unordered"]) {
-
-contain: style;
-
-padding-inline-start: var(--list-marker-gutter, var(--helix-space-md));
-}
-
-:host([kind="ordered"]) ::slotted(*),
-:host([kind="unordered"]) ::slotted(*) {
-display: list-item;
-list-style-position: outside;
-}
-
-:host([kind="ordered"]) ::slotted(*) {
-list-style-type: decimal;
-}
-
-:host([kind="ordered"][type="a"]) ::slotted(*) {
-list-style-type: lower-alpha;
-}
-
-:host([kind="ordered"][type="A"]) ::slotted(*) {
-list-style-type: upper-alpha;
-}
-
-:host([kind="ordered"][type="i"]) ::slotted(*) {
-list-style-type: lower-roman;
-}
-
-:host([kind="ordered"][type="I"]) ::slotted(*) {
-list-style-type: upper-roman;
-}
-
-:host([kind="unordered"]) ::slotted(*) {
-list-style-type: disc;
-}
-
-:host([kind="ordered"]) ::slotted(*) {
-counter-increment: list-item var(--list-step, 1);
-}
-
-:host([kind="ordered"]) ::slotted(:first-child) {
-counter-set: list-item var(--list-first);
-}
-
-:host([marker="rail"]) {
-counter-reset: list-rail;
-
-padding-inline-start: var(--helix-space-none);
-}
-
-:host([marker="rail"]) ::slotted(*) {
---list-item-rail-content: counter(list-rail, var(--list-rail-style, decimal-leading-zero));
-
---list-item-rail-display: block;
-counter-increment: list-rail var(--list-step, 1);
-}
-
-:host([marker="rail"]) ::slotted(:first-child) {
-counter-set: list-rail var(--list-first);
-}
-
-:host([kind="ordered"][marker="rail"]) ::slotted(*),
-:host([kind="unordered"][marker="rail"]) ::slotted(*) {
-display: block;
-list-style: none;
-}
-
-:host([kind="description"]) ::slotted(*) {
---list-item-term-weight: var(--helix-weight-semibold);
-}
-
-@media print {
-:host {
-print-color-adjust: economy;
-}
-}`);
+export const styles = createSheet(`:host {display: flex;flex-direction: column;gap: var(--list-gap, var(--helix-space-none));}:host([divided]) ::slotted(*:not(:first-child)) {border-block-start: var(--helix-border-thin) solid var(--helix-color-border);}:host([kind="ordered"]),
+:host([kind="unordered"]) {contain: style;padding-inline-start: var(--list-marker-gutter, var(--helix-space-md));}:host([kind="ordered"]) ::slotted(*),
+:host([kind="unordered"]) ::slotted(*) {display: list-item;list-style-position: outside;}:host([kind="ordered"]) ::slotted(*) {list-style-type: decimal;}:host([kind="ordered"][type="a"]) ::slotted(*) {list-style-type: lower-alpha;}:host([kind="ordered"][type="A"]) ::slotted(*) {list-style-type: upper-alpha;}:host([kind="ordered"][type="i"]) ::slotted(*) {list-style-type: lower-roman;}:host([kind="ordered"][type="I"]) ::slotted(*) {list-style-type: upper-roman;}:host([kind="unordered"]) ::slotted(*) {list-style-type: disc;}:host([kind="ordered"]) ::slotted(*) {counter-increment: list-item var(--list-step, 1);}:host([kind="ordered"]) ::slotted(:first-child) {counter-set: list-item var(--list-first);}:host([marker="rail"]) {counter-reset: list-rail;padding-inline-start: var(--helix-space-none);}:host([marker="rail"]) ::slotted(*) {--list-item-rail-content: counter(list-rail, var(--list-rail-style, decimal-leading-zero));--list-item-rail-display: block;counter-increment: list-rail var(--list-step, 1);}:host([marker="rail"]) ::slotted(:first-child) {counter-set: list-rail var(--list-first);}:host([kind="ordered"][marker="rail"]) ::slotted(*),
+:host([kind="unordered"][marker="rail"]) ::slotted(*) {display: block;list-style: none;}:host([kind="description"]) ::slotted(*) {--list-item-term-weight: var(--helix-weight-semibold);}@media print {:host {print-color-adjust: economy;}}`);

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

@@ -1,112 +1,5 @@
 import { createSheet } from '@fusion.dev/helix-core';
-export const styles = createSheet(`:host {
-display: flex;
-flex-direction: column;
-gap: var(--helix-space-2xs);
-}
-
-[part="items"] {
-
---option-radius: var(--helix-radii-none);
-
-background-color: var(--listbox-background-color, var(--helix-color-surface));
-border: var(--listbox-border, var(--helix-border-thin) solid var(--helix-color-border));
-border-radius: var(--helix-radii-sm);
-display: flex;
-flex-direction: column;
-gap: var(--helix-space-none);
-max-block-size: var(--listbox-max-block-size, 14rem);
-overflow-y: auto;
-
-padding-block: var(--helix-space-2xs);
-padding-inline: var(--helix-space-none);
-}
-
-[part="items"]:focus-visible {
-border-color: var(--helix-color-primary);
-outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);
-outline-offset: 0;
-}
-
-:host(:state(invalid)) [part="items"],
-:host(:state(invalid)) [part="items"]:focus-visible {
-border-color: var(--helix-color-danger);
-outline-color: var(--helix-color-danger);
-}
-
-:host(:disabled) {
-opacity: 0.5;
-}
-
-:host(:disabled) [part="items"] {
-cursor: not-allowed;
-}
-
-[part="empty"],
-[part="loading"] {
---_collection-inset-block: var(--helix-space-xs);
---_collection-inset-inline: var(--helix-space-xs);
-}
-
-[part="error"] {
-color: var(--listbox-error-color, var(--helix-color-danger));
-font-family: var(--helix-font-sans);
-font-size: var(--helix-text-sm);
-margin: var(--helix-space-none);
-padding: var(--helix-space-xs);
-text-align: center;
-}
-
-[part="filter-icon"] {
-align-items: center;
-color: var(--helix-color-foreground-subtle);
-display: inline-flex;
-flex: 0 0 auto;
-}
-
-[part="filter-icon"] svg,
-slot[name="filter-icon"]::slotted(*) {
---icon-size: var(--helix-size-icon-tight);
-
-block-size: var(--helix-size-icon-tight);
-inline-size: var(--helix-size-icon-tight);
-}
-
-[part="search"] {
-align-items: center;
-border-block-end: var(--helix-border-thin) solid var(--helix-color-border);
-display: flex;
-gap: var(--helix-space-2xs);
-padding: var(--helix-space-2xs);
-padding-inline-start: var(--helix-space-xs);
-}
-
-[part="search-field"] {
-appearance: none;
-flex: 1 1 auto;
-min-inline-size: 0;
-background-color: transparent;
-block-size: var(--helix-size-control-tight);
-border: none;
-box-sizing: border-box;
-color: var(--helix-color-foreground);
-font-family: var(--helix-font-sans);
-font-size: var(--helix-text-sm);
-font-weight: var(--helix-weight-medium);
-inline-size: 100%;
-padding-inline: var(--helix-space-xs);
-}
-
-[part="search-field"]:focus-visible {
-outline: none;
-}
-
-:host([loading]) [part="items"] {
-opacity: 0.5;
-}
-
-@media print {
-:host {
-print-color-adjust: exact;
-}
-}`);
+export const styles = createSheet(`:host {display: flex;flex-direction: column;gap: var(--helix-space-2xs);}[part="items"] {--option-radius: var(--helix-radii-none);background-color: var(--listbox-background-color, var(--helix-color-surface));border: var(--listbox-border, var(--helix-border-thin) solid var(--helix-color-border));border-radius: var(--helix-radii-sm);display: flex;flex-direction: column;gap: var(--helix-space-none);max-block-size: var(--listbox-max-block-size, 14rem);overflow-y: auto;padding-block: var(--helix-space-2xs);padding-inline: var(--helix-space-none);}[part="items"]:focus-visible {border-color: var(--helix-color-primary);outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);outline-offset: 0;}:host(:state(invalid)) [part="items"],
+:host(:state(invalid)) [part="items"]:focus-visible {border-color: var(--helix-color-danger);outline-color: var(--helix-color-danger);}:host(:disabled) {opacity: 0.5;}:host(:disabled) [part="items"] {cursor: not-allowed;}[part="empty"],
+[part="loading"] {--_collection-inset-block: var(--helix-space-xs);--_collection-inset-inline: var(--helix-space-xs);}[part="error"] {color: var(--listbox-error-color, var(--helix-color-danger));font-family: var(--helix-font-sans);font-size: var(--helix-text-sm);margin: var(--helix-space-none);padding: var(--helix-space-xs);text-align: center;}[part="filter-icon"] {align-items: center;color: var(--helix-color-foreground-subtle);display: inline-flex;flex: 0 0 auto;}[part="filter-icon"] svg,
+slot[name="filter-icon"]::slotted(*) {--icon-size: var(--helix-size-icon-tight);block-size: var(--helix-size-icon-tight);inline-size: var(--helix-size-icon-tight);}[part="search"] {align-items: center;border-block-end: var(--helix-border-thin) solid var(--helix-color-border);display: flex;gap: var(--helix-space-2xs);padding: var(--helix-space-2xs);padding-inline-start: var(--helix-space-xs);}[part="search-field"] {appearance: none;flex: 1 1 auto;min-inline-size: 0;background-color: transparent;block-size: var(--helix-size-control-tight);border: none;box-sizing: border-box;color: var(--helix-color-foreground);font-family: var(--helix-font-sans);font-size: var(--helix-text-sm);font-weight: var(--helix-weight-medium);inline-size: 100%;padding-inline: var(--helix-space-xs);}[part="search-field"]:focus-visible {outline: none;}:host([loading]) [part="items"] {opacity: 0.5;}@media print {:host {print-color-adjust: exact;}}`);

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

@@ -1,172 +1,6 @@
 import { createSheet } from '@fusion.dev/helix-core';
-export const styles = createSheet(`:host {
-
---_loader-size: var(--helix-size-loader-md);
-
---_loader-breathe: 2.4s;
---_loader-stroke: 2;
---_loader-turn: 0.8s;
-color: inherit;
-
-display: inline-grid;
-flex-shrink: 0;
-place-items: center;
-vertical-align: middle;
-}
-
-:host([size="sm"]) {
---_loader-size: var(--helix-size-loader-sm);
-}
-
-:host([size="lg"]) {
---_loader-size: var(--helix-size-loader-lg);
-}
-
-[part="svg"] {
-animation: helix-loader-turn var(--loader-duration, var(--_loader-turn)) linear infinite;
-grid-area: 1 / 1;
-block-size: var(--loader-size, var(--_loader-size));
-inline-size: var(--loader-size, var(--_loader-size));
-}
-
-[part="track"] {
-animation: helix-loader-breathe var(--_loader-breathe) ease-in-out infinite;
-opacity: 0.18;
-stroke: var(--loader-track-color, currentColor);
-stroke-width: var(--loader-track-width, var(--_loader-stroke));
-}
-
-[part="mark"] {
-animation: helix-loader-breathe-mark var(--_loader-breathe) ease-in-out infinite;
-}
-
-@keyframes helix-loader-breathe {
-0%,
-100% {
-opacity: 0.12;
-}
-
-50% {
-opacity: 0.24;
-}
-}
-
-@keyframes helix-loader-breathe-mark {
-0%,
-100% {
-opacity: 0.45;
-scale: 0.82;
-}
-
-50% {
-opacity: 1;
-scale: 1;
-}
-}
-
-[part="indicator"] {
-stroke: var(--loader-color, currentColor);
-stroke-dasharray: 50, 100;
-stroke-linecap: round;
-stroke-width: var(--loader-track-width, var(--_loader-stroke));
-}
-
-@keyframes helix-loader-turn {
-to {
-transform: rotate(1turn);
-}
-}
-
-@media (prefers-reduced-motion: reduce) {
-[part="track"],
-[part="mark"] {
-animation: none;
-}
-}
-
-@media (prefers-reduced-motion: reduce) {
-[part="svg"] {
-animation-duration: calc(var(--helix-duration-slow) * 12);
-}
-}
-
-[part="mark"] {
-
---_mark-size: calc(var(--loader-size, var(--_loader-size)) * 0.4);
---icon-size: var(--_mark-size);
-
-align-items: center;
-block-size: var(--_mark-size);
-display: flex;
-grid-area: 1 / 1;
-inline-size: var(--_mark-size);
-justify-content: center;
-}
-
-[part="mark"] ::slotted(*) {
-block-size: 100%;
-inline-size: 100%;
-}
-
-:host([variant="pulse"]) [part="indicator"] {
-display: none;
-}
-
-:host([variant="pulse"]) [part="svg"] {
-animation: none;
-}
-
-:host([variant="pulse"]) {
---_loader-size: calc(var(--helix-size-loader-lg) * 2);
-}
-
-:host([variant="pulse"][size="sm"]) {
---_loader-size: var(--helix-size-loader-lg);
-}
-
-:host([variant="pulse"][size="lg"]) {
---_loader-size: calc(var(--helix-size-loader-lg) * 3);
-}
-
-:host([variant="pulse"]) [part="track"] {
-display: none;
-}
-
-:host([variant="pulse"]) [part="mark"] {
-animation-name: helix-loader-pulse-mark;
-}
-
-@keyframes helix-loader-pulse-mark {
-0%,
-100% {
-opacity: 0.35;
-}
-
-50% {
-opacity: 1;
-}
-}
-
-@media (prefers-reduced-motion: reduce) {
-
-:host([variant="pulse"]) [part="mark"] {
-animation: none;
-opacity: 1;
-}
-}
-
-[part="svg"][hidden] {
-display: inline;
-visibility: hidden;
-}
-
-[part="mark"][hidden] {
-display: flex;
-visibility: hidden;
-}
-
-@media print {
-:host {
-display: none;
-}
-}`);
+export const styles = createSheet(`:host {--_loader-size: var(--helix-size-loader-md);--_loader-breathe: 2.4s;--_loader-stroke: 2;--_loader-turn: 0.8s;color: inherit;display: inline-grid;flex-shrink: 0;place-items: center;vertical-align: middle;}:host([size="sm"]) {--_loader-size: var(--helix-size-loader-sm);}:host([size="lg"]) {--_loader-size: var(--helix-size-loader-lg);}[part="svg"] {animation: helix-loader-turn var(--loader-duration, var(--_loader-turn)) linear infinite;grid-area: 1 / 1;block-size: var(--loader-size, var(--_loader-size));inline-size: var(--loader-size, var(--_loader-size));}[part="track"] {animation: helix-loader-breathe var(--_loader-breathe) ease-in-out infinite;opacity: 0.18;stroke: var(--loader-track-color, currentColor);stroke-width: var(--loader-track-width, var(--_loader-stroke));}[part="mark"] {animation: helix-loader-breathe-mark var(--_loader-breathe) ease-in-out infinite;}@keyframes helix-loader-breathe {0%,
+100% {opacity: 0.12;}50% {opacity: 0.24;}}@keyframes helix-loader-breathe-mark {0%,
+100% {opacity: 0.45;scale: 0.82;}50% {opacity: 1;scale: 1;}}[part="indicator"] {stroke: var(--loader-color, currentColor);stroke-dasharray: 50, 100;stroke-linecap: round;stroke-width: var(--loader-track-width, var(--_loader-stroke));}@keyframes helix-loader-turn {to {transform: rotate(1turn);}}@media (prefers-reduced-motion: reduce) {[part="track"],
+[part="mark"] {animation: none;}}@media (prefers-reduced-motion: reduce) {[part="svg"] {animation-duration: calc(var(--helix-duration-slow) * 12);}}[part="mark"] {--_mark-size: calc(var(--loader-size, var(--_loader-size)) * 0.4);--icon-size: var(--_mark-size);align-items: center;block-size: var(--_mark-size);display: flex;grid-area: 1 / 1;inline-size: var(--_mark-size);justify-content: center;}[part="mark"] ::slotted(*) {block-size: 100%;inline-size: 100%;}:host([variant="pulse"]) [part="indicator"] {display: none;}:host([variant="pulse"]) [part="svg"] {animation: none;}:host([variant="pulse"]) {--_loader-size: calc(var(--helix-size-loader-lg) * 2);}:host([variant="pulse"][size="sm"]) {--_loader-size: var(--helix-size-loader-lg);}:host([variant="pulse"][size="lg"]) {--_loader-size: calc(var(--helix-size-loader-lg) * 3);}:host([variant="pulse"]) [part="track"] {display: none;}:host([variant="pulse"]) [part="mark"] {animation-name: helix-loader-pulse-mark;}@keyframes helix-loader-pulse-mark {0%,
+100% {opacity: 0.35;}50% {opacity: 1;}}@media (prefers-reduced-motion: reduce) {:host([variant="pulse"]) [part="mark"] {animation: none;opacity: 1;}}[part="svg"][hidden] {display: inline;visibility: hidden;}[part="mark"][hidden] {display: flex;visibility: hidden;}@media print {:host {display: none;}}`);