@fusion.dev/helix 0.145.0 → 0.147.0

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

@@ -1,172 +1,2 @@
 import { createSheet } from '@fusion.dev/helix-core';
-export const styles = createSheet(`:host {
-
---_grid-column-gap: var(--_grid-gap);
-
---_grid-gap: var(--helix-space-none);
---_grid-row-gap: var(--_grid-gap);
-
-column-gap: var(--_grid-column-gap);
-display: grid;
-grid-template-areas: var(--grid-areas, none);
-grid-template-columns: var(--grid-columns, var(--_grid-template, minmax(0, 1fr)));
-grid-template-rows: var(--grid-rows, none);
-row-gap: var(--_grid-row-gap);
-}
-
-:host([columns="2"]) {
-grid-template-columns: var(--grid-columns, var(--_grid-template, repeat(2, minmax(0, 1fr))));
-}
-:host([columns="3"]) {
-grid-template-columns: var(--grid-columns, var(--_grid-template, repeat(3, minmax(0, 1fr))));
-}
-:host([columns="4"]) {
-grid-template-columns: var(--grid-columns, var(--_grid-template, repeat(4, minmax(0, 1fr))));
-}
-:host([columns="5"]) {
-grid-template-columns: var(--grid-columns, var(--_grid-template, repeat(5, minmax(0, 1fr))));
-}
-:host([columns="6"]) {
-grid-template-columns: var(--grid-columns, var(--_grid-template, repeat(6, minmax(0, 1fr))));
-}
-
-:host([gap="none"]) {
---_grid-gap: var(--helix-space-none);
-}
-:host([gap="2xs"]) {
---_grid-gap: var(--helix-space-2xs);
-}
-:host([gap="xs"]) {
---_grid-gap: var(--helix-space-xs);
-}
-:host([gap="sm"]) {
---_grid-gap: var(--helix-space-sm);
-}
-
-:host([gap="md"]) {
---_grid-gap: var(--helix-space-md);
-}
-:host([gap="lg"]) {
---_grid-gap: var(--helix-space-lg);
-}
-:host([gap="xl"]) {
---_grid-gap: var(--helix-space-xl);
-}
-:host([gap="2xl"]) {
---_grid-gap: var(--helix-space-2xl);
-}
-
-:host([gap="3xl"]) {
---_grid-gap: var(--helix-space-3xl);
-}
-
-:host([row-gap="none"]) {
---_grid-row-gap: var(--helix-space-none);
-}
-:host([row-gap="2xs"]) {
---_grid-row-gap: var(--helix-space-2xs);
-}
-:host([row-gap="xs"]) {
---_grid-row-gap: var(--helix-space-xs);
-}
-:host([row-gap="sm"]) {
---_grid-row-gap: var(--helix-space-sm);
-}
-:host([row-gap="md"]) {
---_grid-row-gap: var(--helix-space-md);
-}
-:host([row-gap="lg"]) {
---_grid-row-gap: var(--helix-space-lg);
-}
-:host([row-gap="xl"]) {
---_grid-row-gap: var(--helix-space-xl);
-}
-:host([row-gap="2xl"]) {
---_grid-row-gap: var(--helix-space-2xl);
-}
-:host([row-gap="3xl"]) {
---_grid-row-gap: var(--helix-space-3xl);
-}
-
-:host([column-gap="none"]) {
---_grid-column-gap: var(--helix-space-none);
-}
-:host([column-gap="2xs"]) {
---_grid-column-gap: var(--helix-space-2xs);
-}
-:host([column-gap="xs"]) {
---_grid-column-gap: var(--helix-space-xs);
-}
-:host([column-gap="sm"]) {
---_grid-column-gap: var(--helix-space-sm);
-}
-:host([column-gap="md"]) {
---_grid-column-gap: var(--helix-space-md);
-}
-:host([column-gap="lg"]) {
---_grid-column-gap: var(--helix-space-lg);
-}
-:host([column-gap="xl"]) {
---_grid-column-gap: var(--helix-space-xl);
-}
-:host([column-gap="2xl"]) {
---_grid-column-gap: var(--helix-space-2xl);
-}
-:host([column-gap="3xl"]) {
---_grid-column-gap: var(--helix-space-3xl);
-}
-
-:host([align-items="start"]) {
-align-items: start;
-}
-:host([align-items="center"]) {
-align-items: center;
-}
-:host([align-items="end"]) {
-align-items: end;
-}
-
-:host([justify-items="start"]) {
-justify-items: start;
-}
-:host([justify-items="center"]) {
-justify-items: center;
-}
-:host([justify-items="end"]) {
-justify-items: end;
-}
-
-:host([auto-flow="column"]) {
-grid-auto-flow: column;
-}
-:host([auto-flow="dense"]) {
-grid-auto-flow: dense;
-}
-:host([auto-flow="column-dense"]) {
-grid-auto-flow: column dense;
-}
-
-::slotted([data-grid-span="full"]) {
-grid-column: 1 / -1;
-}
-::slotted([data-grid-span="2"]) {
-grid-column: span 2;
-}
-::slotted([data-grid-span="3"]) {
-grid-column: span 3;
-}
-::slotted([data-grid-span="4"]) {
-grid-column: span 4;
-}
-::slotted([data-grid-span="5"]) {
-grid-column: span 5;
-}
-::slotted([data-grid-span="6"]) {
-grid-column: span 6;
-}
-
-@media print {
-:host {
-print-color-adjust: economy;
-}
-}`);
+export const styles = createSheet(`:host {--_grid-column-gap: var(--_grid-gap);--_grid-gap: var(--helix-space-none);--_grid-row-gap: var(--_grid-gap);column-gap: var(--_grid-column-gap);display: grid;grid-template-areas: var(--grid-areas, none);grid-template-columns: var(--grid-columns, var(--_grid-template, minmax(0, 1fr)));grid-template-rows: var(--grid-rows, none);row-gap: var(--_grid-row-gap);}:host([columns="2"]) {grid-template-columns: var(--grid-columns, var(--_grid-template, repeat(2, minmax(0, 1fr))));}:host([columns="3"]) {grid-template-columns: var(--grid-columns, var(--_grid-template, repeat(3, minmax(0, 1fr))));}:host([columns="4"]) {grid-template-columns: var(--grid-columns, var(--_grid-template, repeat(4, minmax(0, 1fr))));}:host([columns="5"]) {grid-template-columns: var(--grid-columns, var(--_grid-template, repeat(5, minmax(0, 1fr))));}:host([columns="6"]) {grid-template-columns: var(--grid-columns, var(--_grid-template, repeat(6, minmax(0, 1fr))));}:host([gap="none"]) {--_grid-gap: var(--helix-space-none);}:host([gap="2xs"]) {--_grid-gap: var(--helix-space-2xs);}:host([gap="xs"]) {--_grid-gap: var(--helix-space-xs);}:host([gap="sm"]) {--_grid-gap: var(--helix-space-sm);}:host([gap="md"]) {--_grid-gap: var(--helix-space-md);}:host([gap="lg"]) {--_grid-gap: var(--helix-space-lg);}:host([gap="xl"]) {--_grid-gap: var(--helix-space-xl);}:host([gap="2xl"]) {--_grid-gap: var(--helix-space-2xl);}:host([gap="3xl"]) {--_grid-gap: var(--helix-space-3xl);}:host([row-gap="none"]) {--_grid-row-gap: var(--helix-space-none);}:host([row-gap="2xs"]) {--_grid-row-gap: var(--helix-space-2xs);}:host([row-gap="xs"]) {--_grid-row-gap: var(--helix-space-xs);}:host([row-gap="sm"]) {--_grid-row-gap: var(--helix-space-sm);}:host([row-gap="md"]) {--_grid-row-gap: var(--helix-space-md);}:host([row-gap="lg"]) {--_grid-row-gap: var(--helix-space-lg);}:host([row-gap="xl"]) {--_grid-row-gap: var(--helix-space-xl);}:host([row-gap="2xl"]) {--_grid-row-gap: var(--helix-space-2xl);}:host([row-gap="3xl"]) {--_grid-row-gap: var(--helix-space-3xl);}:host([column-gap="none"]) {--_grid-column-gap: var(--helix-space-none);}:host([column-gap="2xs"]) {--_grid-column-gap: var(--helix-space-2xs);}:host([column-gap="xs"]) {--_grid-column-gap: var(--helix-space-xs);}:host([column-gap="sm"]) {--_grid-column-gap: var(--helix-space-sm);}:host([column-gap="md"]) {--_grid-column-gap: var(--helix-space-md);}:host([column-gap="lg"]) {--_grid-column-gap: var(--helix-space-lg);}:host([column-gap="xl"]) {--_grid-column-gap: var(--helix-space-xl);}:host([column-gap="2xl"]) {--_grid-column-gap: var(--helix-space-2xl);}:host([column-gap="3xl"]) {--_grid-column-gap: var(--helix-space-3xl);}:host([align-items="start"]) {align-items: start;}:host([align-items="center"]) {align-items: center;}:host([align-items="end"]) {align-items: end;}:host([justify-items="start"]) {justify-items: start;}:host([justify-items="center"]) {justify-items: center;}:host([justify-items="end"]) {justify-items: end;}:host([auto-flow="column"]) {grid-auto-flow: column;}:host([auto-flow="dense"]) {grid-auto-flow: dense;}:host([auto-flow="column-dense"]) {grid-auto-flow: column dense;}::slotted([data-grid-span="full"]) {grid-column: 1 / -1;}::slotted([data-grid-span="2"]) {grid-column: span 2;}::slotted([data-grid-span="3"]) {grid-column: span 3;}::slotted([data-grid-span="4"]) {grid-column: span 4;}::slotted([data-grid-span="5"]) {grid-column: span 5;}::slotted([data-grid-span="6"]) {grid-column: span 6;}@media print {:host {print-color-adjust: economy;}}`);

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

@@ -19,7 +19,10 @@ import type { CSSResultGroup, PropertyValues, TemplateResult } from 'lit';
  *
  * **A child can span columns with `data-grid-span`.** `data-grid-span="full"`
  * runs from the first column to the last, such as a heading across a set of
- * cards, and a number from `2` to `6` spans that many columns.
+ * cards, and a number from `2` to `6` spans that many columns. A number wider
+ * than the grid adds columns of no width beside the real ones, as CSS does,
+ * so in a `min` grid, whose count changes with its width, use `full` for a
+ * child that must span them all.
  *
  * @since 0.1.0
  * @status stable

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

@@ -1,168 +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"] {
-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';