@fusion.dev/helix 0.145.0 → 0.147.0

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,103 +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="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/listbox/root/listbox-root.d.ts

@@ -19,6 +19,7 @@ import type { CSSResultGroup } from 'lit';
  *
  * @cssproperty --listbox-background-color - The panel's fill. Set it to `transparent` when the list is already inside a panel.
  * @cssproperty --listbox-border - The panel's border, as a shorthand. Set it to `none` when the list is already inside a panel.
+ * @cssproperty --listbox-error-color - The color of the line shown while `load-error` is set.
  * @cssproperty --listbox-max-block-size - Maximum height of the list before it scrolls.
  */
 export declare class HelixListbox extends HelixHeadlessListbox {

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

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

@@ -20,8 +20,10 @@ import type { CSSResultGroup } from 'lit';
  * @documentation https://fusion.dev/helix/components/loader
  *
  * @cssproperty --loader-color - Color of the moving arc.
+ * @cssproperty --loader-duration - How long one turn of the arc takes, 0.8s by default. With motion reduced the turn slows to a crawl whatever this says.
  * @cssproperty --loader-size - Diameter. Defaults to the size token that `size` picks, which is 1.5rem at the default density.
  * @cssproperty --loader-track-color - Color of the circle behind the arc.
+ * @cssproperty --loader-track-width - Width of the arc and the circle behind it, in units of a 24-unit drawing. Defaults to 2.
  */
 export declare class HelixLoader extends HelixHeadlessLoader {
     /**

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

@@ -1,24 +1,2 @@
 import { createSheet } from '@fusion.dev/helix-core';
-export const styles = createSheet(`:host {
-color: var(--map-area-color, var(--helix-color-primary));
-display: none;
-}
-
-:host([tone="accent"]) {
-color: var(--helix-color-accent);
-}
-:host([tone="danger"]) {
-color: var(--helix-color-danger);
-}
-:host([tone="info"]) {
-color: var(--helix-color-info);
-}
-:host([tone="neutral"]) {
-color: var(--helix-color-foreground-muted);
-}
-:host([tone="success"]) {
-color: var(--helix-color-success);
-}
-:host([tone="warning"]) {
-color: var(--helix-color-warning);
-}`);
+export const styles = createSheet(`:host {color: var(--map-area-color, var(--helix-color-primary));display: none;}:host([tone="accent"]) {color: var(--helix-color-accent);}:host([tone="danger"]) {color: var(--helix-color-danger);}:host([tone="info"]) {color: var(--helix-color-info);}:host([tone="neutral"]) {color: var(--helix-color-foreground-muted);}:host([tone="success"]) {color: var(--helix-color-success);}:host([tone="warning"]) {color: var(--helix-color-warning);}`);

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

@@ -1,27 +1,2 @@
 import { createSheet } from '@fusion.dev/helix-core';
-export const styles = createSheet(`:host {
-color: var(--map-buildings-color, var(--helix-color-surface-raised));
-display: none;
-}
-
-:host([tone="accent"]) {
-color: var(--helix-color-accent);
-}
-:host([tone="danger"]) {
-color: var(--helix-color-danger);
-}
-:host([tone="info"]) {
-color: var(--helix-color-info);
-}
-:host([tone="neutral"]) {
-color: var(--helix-color-foreground-muted);
-}
-:host([tone="primary"]) {
-color: var(--helix-color-primary);
-}
-:host([tone="success"]) {
-color: var(--helix-color-success);
-}
-:host([tone="warning"]) {
-color: var(--helix-color-warning);
-}`);
+export const styles = createSheet(`:host {color: var(--map-buildings-color, var(--helix-color-surface-raised));display: none;}:host([tone="accent"]) {color: var(--helix-color-accent);}:host([tone="danger"]) {color: var(--helix-color-danger);}:host([tone="info"]) {color: var(--helix-color-info);}:host([tone="neutral"]) {color: var(--helix-color-foreground-muted);}:host([tone="primary"]) {color: var(--helix-color-primary);}:host([tone="success"]) {color: var(--helix-color-success);}:host([tone="warning"]) {color: var(--helix-color-warning);}`);

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

@@ -1,8 +1,5 @@
 import { createSheet } from '@fusion.dev/helix-core';
-export const styles = createSheet(`:host {
-color: var(
+export const styles = createSheet(`:host {color: var(
 --map-contours-color,
 color-mix(in oklab, oklch(0.55 0.08 60) 55%, var(--helix-color-foreground))
-);
-display: none;
-}`);
+);display: none;}`);

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

@@ -1,5 +1,2 @@
 import { createSheet } from '@fusion.dev/helix-core';
-export const styles = createSheet(`:host {
-color: var(--map-landcover-ground, var(--helix-color-surface));
-display: none;
-}`);
+export const styles = createSheet(`:host {color: var(--map-landcover-ground, var(--helix-color-surface));display: none;}`);