@fusion.dev/helix 0.146.0 → 0.147.0

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

@@ -1,169 +1,21 @@
 import { createSheet } from '@fusion.dev/helix-core';
-export const styles = createSheet(`:host {
-
---_heatmap-cell-width: var(--heatmap-cell-inline-size, var(--heatmap-cell-size, 0.75rem));
---_heatmap-cell-height: var(--heatmap-cell-height, var(--heatmap-cell-size, 0.75rem));
-
---heatmap-tone-accent: var(--helix-color-accent);
---heatmap-tone-danger: var(--helix-color-danger);
---heatmap-tone-info: var(--helix-color-info);
---heatmap-tone-muted: var(--helix-color-surface-sunken);
---heatmap-tone-primary: var(--helix-color-primary);
---heatmap-tone-success: var(--helix-color-success);
---heatmap-tone-warning: var(--helix-color-warning);
-
---heatmap-tone-1: color-mix(
+export const styles = createSheet(`:host {--_heatmap-cell-width: var(--heatmap-cell-inline-size, var(--heatmap-cell-size, 0.75rem));--_heatmap-cell-height: var(--heatmap-cell-height, var(--heatmap-cell-size, 0.75rem));--heatmap-tone-accent: var(--helix-color-accent);--heatmap-tone-danger: var(--helix-color-danger);--heatmap-tone-info: var(--helix-color-info);--heatmap-tone-muted: var(--helix-color-surface-sunken);--heatmap-tone-primary: var(--helix-color-primary);--heatmap-tone-success: var(--helix-color-success);--heatmap-tone-warning: var(--helix-color-warning);--heatmap-tone-1: color-mix(
 in oklab,
 var(--helix-color-primary-active) 20%,
 var(--helix-color-surface-sunken)
-);
---heatmap-tone-2: color-mix(
+);--heatmap-tone-2: color-mix(
 in oklab,
 var(--helix-color-primary-active) 40%,
 var(--helix-color-surface-sunken)
-);
---heatmap-tone-3: color-mix(
+);--heatmap-tone-3: color-mix(
 in oklab,
 var(--helix-color-primary-active) 60%,
 var(--helix-color-surface-sunken)
-);
---heatmap-tone-4: color-mix(
+);--heatmap-tone-4: color-mix(
 in oklab,
 var(--helix-color-primary-active) 80%,
 var(--helix-color-surface-sunken)
-);
---heatmap-tone-5: var(--helix-color-primary-active);
-
-display: grid;
-grid-template-columns: minmax(0, max-content);
-}
-
-[part="strip"] {
-display: grid;
-gap: var(--heatmap-gap, var(--helix-space-2xs));
-grid-auto-columns: var(--_heatmap-cell-width);
-grid-auto-flow: column;
-grid-template-rows: repeat(var(--heatmap-rows, 1), var(--_heatmap-cell-height));
-justify-content: start;
-
-position: relative;
-}
-
-[part~="cell"] {
-background-color: var(--heatmap-tone, var(--helix-color-surface-sunken));
-border-radius: var(--heatmap-cell-radius, calc(var(--helix-radii-sm) * 0.5));
-inline-size: var(--_heatmap-cell-width);
-}
-
-[part="mark"] {
-block-size: 1px;
-inline-size: 1px;
-pointer-events: none;
-position: absolute;
-}
-
-[part="tooltip-anchor"] {
-inset: 0;
-pointer-events: none;
-position: absolute;
-}
-
-[part="tooltip-label"] {
-display: block;
-font-weight: var(--helix-weight-medium);
-opacity: 0.72;
-}
-
-[part~="tooltip-cell"] {
-align-items: baseline;
-display: flex;
-gap: var(--helix-space-sm);
-justify-content: space-between;
-}
-
-[part="tooltip-name"] {
-opacity: 0.72;
-}
-
-[part="tooltip-value"] {
-font-variant-numeric: tabular-nums;
-font-weight: var(--helix-weight-medium);
-}
-
-@media (hover: hover) {
-[part~="cell"]:hover {
-outline: var(--helix-border-thin) solid var(--helix-color-foreground);
-outline-offset: var(--helix-border-thin);
-}
-
-[part="strip"]:not([data-spaced]) [part~="cell"]:hover {
-outline-offset: calc(var(--helix-border-thin) * -1);
-}
-}
-
-[part~="cell-active"] {
-outline: var(--helix-border-thin) solid var(--helix-color-foreground);
-outline-offset: var(--helix-border-thin);
-}
-
-[part="strip"]:not([data-spaced]) [part~="cell-active"] {
-outline-offset: calc(var(--helix-border-thin) * -1);
-}
-
-[part="strip"]:focus-visible {
-outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);
-outline-offset: var(--helix-size-focus-offset);
-}
-
-[part~="tooltip-cell-current"] {
-font-weight: var(--helix-weight-medium);
-}
-
-[part="live"],
-[part="overview"] {
-block-size: 1px;
-clip-path: inset(50%);
-inline-size: 1px;
-margin: var(--helix-space-none);
-overflow: hidden;
-position: absolute;
-white-space: nowrap;
-}
-
-[part="footer"] {
-align-items: baseline;
-color: var(--helix-color-foreground-subtle);
-display: grid;
-font-family: var(--helix-font-sans);
-font-size: var(--helix-text-xs);
-gap: var(--helix-space-xs);
-grid-template-columns: auto minmax(0, 1fr) auto;
-padding-block-start: var(--helix-space-xs);
-}
-
-[part="summary"] {
-text-align: center;
-}
-
-[part="end"] {
-text-align: end;
-}
-
-[part="footer"][data-empty] {
-display: none;
-}
-
-[part="empty"] {
-color: var(--helix-color-foreground-subtle);
-font-family: var(--helix-font-sans);
-font-size: var(--helix-text-sm);
-margin: var(--helix-space-none);
-text-align: center;
-}
-
-@media print {
-[part~="cell"] {
-outline: var(--helix-border-thin) solid var(--helix-color-border);
-outline-offset: calc(var(--helix-border-thin) * -1);
-}
-}`);
+);--heatmap-tone-5: var(--helix-color-primary-active);display: grid;grid-template-columns: minmax(0, max-content);}[part="strip"] {display: grid;gap: var(--heatmap-gap, var(--helix-space-2xs));grid-auto-columns: var(--_heatmap-cell-width);grid-auto-flow: column;grid-template-rows: repeat(var(--heatmap-rows, 1), var(--_heatmap-cell-height));justify-content: start;position: relative;}[part~="cell"] {background-color: var(--heatmap-tone, var(--helix-color-surface-sunken));border-radius: var(--heatmap-cell-radius, calc(var(--helix-radii-sm) * 0.5));inline-size: var(--_heatmap-cell-width);}[part="mark"] {block-size: 1px;inline-size: 1px;pointer-events: none;position: absolute;}[part="tooltip-anchor"] {inset: 0;pointer-events: none;position: absolute;}[part="tooltip-label"] {display: block;font-weight: var(--helix-weight-medium);opacity: 0.72;}[part~="tooltip-cell"] {align-items: baseline;display: flex;gap: var(--helix-space-sm);justify-content: space-between;}[part="tooltip-name"] {opacity: 0.72;}[part="tooltip-value"] {font-variant-numeric: tabular-nums;font-weight: var(--helix-weight-medium);}@media (hover: hover) {[part~="cell"]:hover {outline: var(--helix-border-thin) solid var(--helix-color-foreground);outline-offset: var(--helix-border-thin);}[part="strip"]:not([data-spaced]) [part~="cell"]:hover {outline-offset: calc(var(--helix-border-thin) * -1);}}[part~="cell-active"] {outline: var(--helix-border-thin) solid var(--helix-color-foreground);outline-offset: var(--helix-border-thin);}[part="strip"]:not([data-spaced]) [part~="cell-active"] {outline-offset: calc(var(--helix-border-thin) * -1);}[part~="cell-selected"] {box-shadow: inset 0 0 0 var(--heatmap-selected-width, var(--helix-border-thick))
+var(--heatmap-selected-color, var(--helix-color-primary));}[part="strip"]:focus-visible {outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);outline-offset: var(--helix-size-focus-offset);}[part~="tooltip-cell-current"] {font-weight: var(--helix-weight-medium);}[part="live"],
+[part="overview"],
+[part="selection"] {block-size: 1px;clip-path: inset(50%);inline-size: 1px;margin: var(--helix-space-none);overflow: hidden;position: absolute;white-space: nowrap;}[part="footer"] {align-items: baseline;color: var(--helix-color-foreground-subtle);display: grid;font-family: var(--helix-font-sans);font-size: var(--helix-text-xs);gap: var(--helix-space-xs);grid-template-columns: auto minmax(0, 1fr) auto;padding-block-start: var(--helix-space-xs);}[part="summary"] {text-align: center;}[part="end"] {text-align: end;}[part="footer"][data-empty] {display: none;}[part="empty"] {color: var(--helix-color-foreground-subtle);font-family: var(--helix-font-sans);font-size: var(--helix-text-sm);margin: var(--helix-space-none);text-align: center;}@media print {[part~="cell"] {outline: var(--helix-border-thin) solid var(--helix-color-border);outline-offset: calc(var(--helix-border-thin) * -1);}}`);

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

@@ -53,6 +53,8 @@ import '../../tooltip/index.js';
  * @cssproperty --heatmap-cell-radius - How far a cell's corners are rounded.
  * @cssproperty --heatmap-cell-size - The size of a cell on both axes, used where neither axis has its own size set.
  * @cssproperty --heatmap-gap - Space between cells. Zero draws one continuous field.
+ * @cssproperty --heatmap-selected-color - The color of the ring on a selected cell, under `selection-mode`.
+ * @cssproperty --heatmap-selected-width - How thick the ring on a selected cell is.
  * @cssproperty --heatmap-tone-1 - The weakest step of the magnitude ramp, used by `tones="1 …"`.
  * @cssproperty --heatmap-tone-2 - The second step of the magnitude ramp.
  * @cssproperty --heatmap-tone-3 - The third step of the magnitude ramp.

package/dist/icon/index.d.ts

@@ -1,2 +1,2 @@
-export { type IconResolver, registerIconLibrary, registerIcons, resolveIcon, } from '@fusion.dev/helix-headless/icon';
+export { type IconLibraryOptions, type IconResolver, registerIconLibrary, registerIcons, resolveIcon, } from '@fusion.dev/helix-headless/icon';
 export * from './root/icon-root.js';

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

@@ -1,19 +1,2 @@
 import { createSheet } from '@fusion.dev/helix-core';
-export const styles = createSheet(`:host {
-block-size: var(--icon-size, var(--helix-size-icon));
-
-display: inline-flex;
-flex: 0 0 auto;
-inline-size: var(--icon-size, var(--helix-size-icon));
-}
-
-[part="svg"] {
-block-size: 100%;
-inline-size: 100%;
-}
-
-@media print {
-:host {
-print-color-adjust: economy;
-}
-}`);
+export const styles = createSheet(`:host {block-size: var(--icon-size, var(--helix-size-icon));display: inline-flex;flex: 0 0 auto;inline-size: var(--icon-size, var(--helix-size-icon));}[part="svg"] {block-size: 100%;inline-size: 100%;}@media print {:host {print-color-adjust: economy;}}`);

package/dist/icon/root/index.d.ts

@@ -1,2 +1,2 @@
-export { type IconResolver, registerIconLibrary, registerIcons, resolveIcon, } from '@fusion.dev/helix-headless/icon/root';
+export { type IconLibraryOptions, type IconResolver, registerIconLibrary, registerIcons, resolveIcon, } from '@fusion.dev/helix-headless/icon/root';
 export * from './icon-root.js';

package/dist/icon-button/root/icon-button-root.css.js

@@ -1,103 +1,30 @@
 import { createSheet } from '@fusion.dev/helix-core';
-export const styles = createSheet(`:host {
---_icon-button-size: var(--icon-button-size, var(--helix-size-control));
-display: inline-flex;
-}
-
-:host {
---_icon-button-edge: var(--helix-color-border);
-
---_icon-button-turn: 0.8s;
---_icon-button-ink: var(--helix-color-foreground-muted);
---_icon-button-ink-hover: var(--helix-color-foreground);
-
---_icon-button-fill: var(--_icon-button-tone);
---_icon-button-fill-hover: var(--_icon-button-tone-hover);
---_icon-button-on-tone: var(--helix-color-background);
---_icon-button-tone: var(--helix-color-foreground);
---_icon-button-tone-hover: color-mix(
+export const styles = createSheet(`:host {--_icon-button-size: var(--icon-button-size, var(--helix-size-control));display: inline-flex;}:host {--_icon-button-edge: var(--helix-color-border);--_icon-button-turn: 0.8s;--_icon-button-ink: var(--helix-color-foreground-muted);--_icon-button-ink-hover: var(--helix-color-foreground);--_icon-button-fill: var(--_icon-button-tone);--_icon-button-fill-hover: var(--_icon-button-tone-hover);--_icon-button-on-tone: var(--helix-color-background);--_icon-button-tone: var(--helix-color-foreground);--_icon-button-tone-hover: color-mix(
 in oklab,
 var(--helix-color-foreground) 86%,
 var(--helix-color-background)
-);
-}
-:host([tone="primary"]) {
---_icon-button-edge: var(--helix-color-primary);
---_icon-button-ink: var(--helix-color-primary);
---_icon-button-ink-hover: var(--helix-color-primary);
---_icon-button-fill: var(--helix-color-primary-surface);
---_icon-button-fill-hover: var(--helix-color-primary-surface-hover);
---_icon-button-on-tone: var(--helix-color-foreground-on-primary);
---_icon-button-tone: var(--helix-color-primary);
---_icon-button-tone-hover: var(--helix-color-primary-hover);
-}
-
-:host([tone="accent"]) {
---_icon-button-edge: var(--helix-color-accent);
---_icon-button-ink: var(--helix-color-accent);
---_icon-button-ink-hover: var(--helix-color-accent);
---_icon-button-fill: var(--helix-color-accent-surface);
---_icon-button-fill-hover: var(--helix-color-accent-surface-hover);
---_icon-button-on-tone: var(--helix-color-foreground-on-accent);
---_icon-button-tone: var(--helix-color-accent);
---_icon-button-tone-hover: var(--helix-color-accent-hover);
-}
-
-:host([tone="danger"]) {
---_icon-button-edge: var(--helix-color-danger);
---_icon-button-ink: var(--helix-color-danger);
---_icon-button-ink-hover: var(--helix-color-danger);
---_icon-button-fill: var(--helix-color-danger-surface);
---_icon-button-fill-hover: var(--helix-color-danger-surface-hover);
---_icon-button-on-tone: var(--helix-color-foreground-on-status);
---_icon-button-tone: var(--helix-color-danger);
---_icon-button-tone-hover: color-mix(
+);}:host([tone="primary"]) {--_icon-button-edge: var(--helix-color-primary);--_icon-button-ink: var(--helix-color-primary);--_icon-button-ink-hover: var(--helix-color-primary);--_icon-button-fill: var(--helix-color-primary-surface);--_icon-button-fill-hover: var(--helix-color-primary-surface-hover);--_icon-button-on-tone: var(--helix-color-foreground-on-primary);--_icon-button-tone: var(--helix-color-primary);--_icon-button-tone-hover: var(--helix-color-primary-hover);}:host([tone="accent"]) {--_icon-button-edge: var(--helix-color-accent);--_icon-button-ink: var(--helix-color-accent);--_icon-button-ink-hover: var(--helix-color-accent);--_icon-button-fill: var(--helix-color-accent-surface);--_icon-button-fill-hover: var(--helix-color-accent-surface-hover);--_icon-button-on-tone: var(--helix-color-foreground-on-accent);--_icon-button-tone: var(--helix-color-accent);--_icon-button-tone-hover: var(--helix-color-accent-hover);}:host([tone="danger"]) {--_icon-button-edge: var(--helix-color-danger);--_icon-button-ink: var(--helix-color-danger);--_icon-button-ink-hover: var(--helix-color-danger);--_icon-button-fill: var(--helix-color-danger-surface);--_icon-button-fill-hover: var(--helix-color-danger-surface-hover);--_icon-button-on-tone: var(--helix-color-foreground-on-status);--_icon-button-tone: var(--helix-color-danger);--_icon-button-tone-hover: color-mix(
 in oklab,
 var(--helix-color-danger) 86%,
 var(--helix-color-foreground)
-);
-}
-
-[part="button"] {
-align-items: center;
-background-color: var(
+);}[part="button"] {align-items: center;background-color: var(
 --_icon-button-pressed-fill,
 var(--icon-button-background-color, transparent)
-);
-block-size: var(--_icon-button-size);
-border: var(--helix-border-thin) solid transparent;
-
-border-end-end-radius: var(--button-radius-end, var(--icon-button-radius, var(--helix-radii-sm)));
-border-end-start-radius: var(
+);block-size: var(--_icon-button-size);border: var(--helix-border-thin) solid transparent;border-end-end-radius: var(--button-radius-end, var(--icon-button-radius, var(--helix-radii-sm)));border-end-start-radius: var(
 --button-radius-start,
 var(--icon-button-radius, var(--helix-radii-sm))
-);
-border-start-end-radius: var(
+);border-start-end-radius: var(
 --button-radius-end,
 var(--icon-button-radius, var(--helix-radii-sm))
-);
-border-start-start-radius: var(
+);border-start-start-radius: var(
 --button-radius-start,
 var(--icon-button-radius, var(--helix-radii-sm))
-);
-color: var(
+);color: var(
 --_icon-button-pressed-ink,
 var(--icon-button-foreground-color, var(--_icon-button-ink))
-);
-cursor: pointer;
-display: inline-flex;
-
-font: inherit;
-inline-size: var(--_icon-button-size);
-justify-content: center;
-padding: var(--helix-space-none);
-transition:
+);cursor: pointer;display: inline-flex;font: inherit;inline-size: var(--_icon-button-size);justify-content: center;padding: var(--helix-space-none);transition:
 background-color var(--helix-duration-fast) var(--helix-easing-standard),
-color var(--helix-duration-fast) var(--helix-easing-standard);
-}
-
-:host(:not(:disabled)) [part="button"]:hover {
-background-color: var(
+color var(--helix-duration-fast) var(--helix-easing-standard);}:host(:not(:disabled)) [part="button"]:hover {background-color: var(
 --_icon-button-pressed-fill,
 var(
 --icon-button-background-color-hover,
@@ -106,80 +33,34 @@ var(
 color-mix(in oklab, var(--_icon-button-tone) 8%, transparent)
 )
 )
-);
-color: var(
+);color: var(
 --_icon-button-pressed-ink,
 var(--icon-button-foreground-color, var(--_icon-button-ink-hover))
-);
-}
-
-:host(:not(:disabled)) [part="button"]:active {
---_icon-button-pressed-fill: var(--icon-button-background-color-active);
---_icon-button-pressed-ink: var(--icon-button-foreground-color-active);
-}
-
-:host([shape="circle"]) [part="button"] {
-border-radius: var(--helix-radii-full);
-}
-
-:host([raised]) [part="button"] {
-box-shadow: var(--icon-button-shadow, var(--helix-shadow-md));
-}
-
-:host([raised]:not(:disabled)) [part="button"]:hover {
-box-shadow: var(--icon-button-shadow, var(--helix-shadow-lg));
-}
-
-:host([raised]:not(:disabled)) [part="button"]:active {
-box-shadow: var(--icon-button-shadow, var(--helix-shadow-sm));
-}
-
-[part="button"]:focus-visible {
-outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);
-outline-offset: var(--helix-size-focus-offset);
-}
-
-:host([emphasis="solid"]) [part="button"] {
-background-color: var(
+);}:host(:not(:disabled)) [part="button"]:active {--_icon-button-pressed-fill: var(--icon-button-background-color-active);--_icon-button-pressed-ink: var(--icon-button-foreground-color-active);}:host([shape="circle"]) [part="button"] {border-radius: var(--helix-radii-full);}:host([raised]) [part="button"] {box-shadow: var(--icon-button-shadow, var(--helix-shadow-md));}:host([raised]:not(:disabled)) [part="button"]:hover {box-shadow: var(--icon-button-shadow, var(--helix-shadow-lg));}:host([raised]:not(:disabled)) [part="button"]:active {box-shadow: var(--icon-button-shadow, var(--helix-shadow-sm));}[part="button"]:focus-visible {outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);outline-offset: var(--helix-size-focus-offset);}:host([emphasis="solid"]) [part="button"] {background-color: var(
 --_icon-button-pressed-fill,
 var(--icon-button-background-color, var(--_icon-button-fill))
-);
-border-color: transparent;
-color: var(
+);border-color: transparent;color: var(
 --_icon-button-pressed-ink,
 var(--icon-button-foreground-color, var(--_icon-button-on-tone))
-);
-}
-:host(:not(:disabled)[emphasis="solid"]) [part="button"]:hover {
-background-color: var(
+);}:host(:not(:disabled)[emphasis="solid"]) [part="button"]:hover {background-color: var(
 --_icon-button-pressed-fill,
 var(
 --icon-button-background-color-hover,
 var(--icon-button-background-color, var(--_icon-button-fill-hover))
 )
-);
-color: var(
+);color: var(
 --_icon-button-pressed-ink,
 var(--icon-button-foreground-color, var(--_icon-button-on-tone))
-);
-}
-
-:host([emphasis="outlined"]) [part="button"] {
-background-color: var(
+);}:host([emphasis="outlined"]) [part="button"] {background-color: var(
 --_icon-button-pressed-fill,
 var(
 --icon-button-background-color,
 color-mix(in oklab, var(--_icon-button-tone) 6%, transparent)
 )
-);
-border-color: var(--_icon-button-edge);
-color: var(
+);border-color: var(--_icon-button-edge);color: var(
 --_icon-button-pressed-ink,
 var(--icon-button-foreground-color, var(--_icon-button-tone))
-);
-}
-:host(:not(:disabled)[emphasis="outlined"]) [part="button"]:hover {
-background-color: var(
+);}:host(:not(:disabled)[emphasis="outlined"]) [part="button"]:hover {background-color: var(
 --_icon-button-pressed-fill,
 var(
 --icon-button-background-color-hover,
@@ -188,30 +69,19 @@ var(
 color-mix(in oklab, var(--_icon-button-tone) 12%, transparent)
 )
 )
-);
-color: var(
+);color: var(
 --_icon-button-pressed-ink,
 var(--icon-button-foreground-color, var(--_icon-button-tone))
-);
-}
-
-:host([emphasis="subtle"]) [part="button"] {
-background-color: var(
+);}:host([emphasis="subtle"]) [part="button"] {background-color: var(
 --_icon-button-pressed-fill,
 var(
 --icon-button-background-color,
 color-mix(in oklab, var(--_icon-button-tone) 14%, transparent)
 )
-);
-border-color: transparent;
-color: var(
+);border-color: transparent;color: var(
 --_icon-button-pressed-ink,
 var(--icon-button-foreground-color, var(--_icon-button-tone))
-);
-}
-
-:host(:not(:disabled)[emphasis="subtle"]) [part="button"]:hover {
-background-color: var(
+);}:host(:not(:disabled)[emphasis="subtle"]) [part="button"]:hover {background-color: var(
 --_icon-button-pressed-fill,
 var(
 --icon-button-background-color-hover,
@@ -220,57 +90,9 @@ var(
 color-mix(in oklab, var(--_icon-button-tone) 22%, transparent)
 )
 )
-);
-color: var(
+);color: var(
 --_icon-button-pressed-ink,
 var(--icon-button-foreground-color, var(--_icon-button-tone))
-);
-}
-
-:host(:disabled) [part="button"] {
-cursor: not-allowed;
-opacity: 0.5;
-}
-
-:host(:state(pending)) [part="button"] {
-cursor: progress;
-position: relative;
-}
-
-:host(:state(pending)) [part="button"] > * {
-visibility: hidden;
-}
-
-:host(:state(pending)) [part="button"]::after {
-animation: helix-icon-button-turn var(--icon-button-spinner-duration, var(--_icon-button-turn))
-linear infinite;
-block-size: var(--icon-button-spinner-size, 1.15em);
-border: var(--helix-border-thick) solid
-color-mix(in oklab, var(--icon-button-spinner-color, currentColor) 30%, transparent);
-border-block-start-color: var(--icon-button-spinner-color, currentColor);
-border-radius: var(--helix-radii-full);
-box-sizing: border-box;
-content: "";
-inline-size: var(--icon-button-spinner-size, 1.15em);
-inset: 0;
-margin: auto;
-position: absolute;
-}
-
-@keyframes helix-icon-button-turn {
-to {
-rotate: 1turn;
-}
-}
-
-@media (prefers-reduced-motion: reduce) {
-:host(:state(pending)) [part="button"]::after {
-animation-duration: calc(var(--helix-duration-slow) * 12);
-}
-}
-
-@media print {
-:host {
-display: none;
-}
-}`);
+);}:host(:disabled) [part="button"] {cursor: not-allowed;opacity: 0.5;}:host(:state(pending)) [part="button"] {cursor: progress;position: relative;}:host(:state(pending)) [part="button"] > :not([part="spinner"]) {visibility: hidden;}[part="spinner"] {animation: helix-icon-button-turn var(--icon-button-spinner-duration, var(--_icon-button-turn))
+linear infinite;block-size: var(--icon-button-spinner-size, 1.15em);border: var(--helix-border-thick) solid
+color-mix(in oklab, var(--icon-button-spinner-color, currentColor) 30%, transparent);border-block-start-color: var(--icon-button-spinner-color, currentColor);border-radius: var(--helix-radii-full);box-sizing: border-box;inline-size: var(--icon-button-spinner-size, 1.15em);inset: 0;margin: auto;position: absolute;}@keyframes helix-icon-button-turn {to {rotate: 1turn;}}@media (prefers-reduced-motion: reduce) {[part="spinner"] {animation-duration: calc(var(--helix-duration-slow) * 12);}}@media print {:host {display: none;}}`);

package/dist/icon-button/root/icon-button-root.d.ts

@@ -23,6 +23,7 @@ declare const HelixIconButton_base: (new (...args: any[]) => import("../../share
  *
  * @csspart button - The inner button.
  * @csspart live - The live region that says `pending-label` when the button becomes pending under focus. It is clipped out of view and still read.
+ * @csspart spinner - The ring a pending button turns over its icon, sized and colored by the `--icon-button-spinner-*` hooks.
  *
  * @cssproperty --icon-button-background-color - Fill behind the button, in every state.
  * @cssproperty --icon-button-background-color-active - Fill behind the button while it is pressed. Without it, a press shows the fill of the state under it.

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

@@ -1,66 +1,8 @@
 import { createSheet } from '@fusion.dev/helix-core';
-export const styles = createSheet(`:host {
-aspect-ratio: var(--image-aspect, auto);
-display: block;
-overflow: hidden;
-position: relative;
-}
-
-:host([shape="rounded"]) {
-border-radius: var(--image-radius, var(--helix-radii-md));
-}
-
-[part="image"] {
-block-size: 100%;
-display: block;
-inline-size: 100%;
-object-fit: var(--image-fit, cover);
-object-position: var(--image-position, center);
-}
-
-:host([data-status="error"]) [part="image"] {
-opacity: 0;
-}
-
-[part="placeholder"],
-[part="fallback"] {
-align-items: center;
-display: flex;
-inset: 0;
-justify-content: center;
-position: absolute;
-}
-
-:host [part="placeholder"][hidden],
-:host [part="fallback"][hidden] {
-display: none;
-}
-
-[part="placeholder"] {
-background-color: var(--image-placeholder-color, var(--helix-color-surface-sunken));
-}
-
-[part="placeholder"] ::slotted(*) {
-block-size: 100%;
-inline-size: 100%;
-}
-
-[part="fallback"] {
-background-color: var(--image-placeholder-color, var(--helix-color-surface-sunken));
-color: var(--helix-color-foreground-subtle);
-}
-
-[part="image"] {
-opacity: 0;
-transition: opacity var(--helix-duration-normal) var(--helix-easing-standard);
-}
-
-:host([data-status="loaded"]) [part="image"] {
-opacity: 1;
-}
-
-@media print {
-:host {
-print-color-adjust: economy;
-}
-}`);
+export const styles = createSheet(`:host {aspect-ratio: var(--image-aspect, auto);display: block;overflow: hidden;position: relative;}:host([shape="rounded"]) {border-radius: var(--image-radius, var(--helix-radii-md));}[part="image"] {block-size: 100%;display: block;inline-size: 100%;object-fit: var(--image-fit, cover);object-position: var(--image-position, center);}:host([data-status="error"]) [part="image"] {opacity: 0;}[part="placeholder"],
+[part="fallback"] {align-items: center;display: flex;inset: 0;justify-content: center;position: absolute;}:host [part="placeholder"][hidden],
+:host [part="fallback"][hidden] {display: none;}[part="placeholder"] {background-color: var(--image-placeholder-color, var(--helix-color-surface-sunken));}[part="placeholder"] ::slotted(*) {block-size: 100%;inline-size: 100%;}[part="fallback"] {background-color: var(
+--image-fallback-background-color,
+var(--image-placeholder-color, var(--helix-color-surface-sunken))
+);color: var(--image-fallback-color, var(--helix-color-foreground-subtle));}[part="image"] {opacity: 0;transition: opacity var(--image-fade-duration, var(--helix-duration-normal))
+var(--helix-easing-standard);}:host([data-status="loaded"]) [part="image"] {opacity: 1;}@media print {:host {print-color-adjust: economy;}}`);

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

@@ -15,6 +15,9 @@ import type { CSSResultGroup } from 'lit';
  * @documentation https://fusion.dev/helix/components/image
  *
  * @cssproperty --image-aspect - The aspect ratio of the box, such as `16 / 9`.
+ * @cssproperty --image-fade-duration - How long the picture takes to fade in once it loads. `0s` shows it at once.
+ * @cssproperty --image-fallback-background-color - The background behind the fallback. Defaults to the placeholder's.
+ * @cssproperty --image-fallback-color - The color of the fallback's text.
  * @cssproperty --image-fit - How the image fills the box, as an `object-fit` value.
  * @cssproperty --image-placeholder-color - The background behind the placeholder and the fallback.
  * @cssproperty --image-position - Which part of the image stays in view when it is cropped, as an `object-position` value.