@fusion.dev/helix 0.143.0 → 0.145.0

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

@@ -1,8 +1,14 @@
 import { createSheet } from '@fusion.dev/helix-core';
 export const styles = createSheet(`:host {
+
+--_flex-column-gap: var(--_flex-gap);
+--_flex-gap: var(--helix-space-none);
+--_flex-row-gap: var(--_flex-gap);
+
+column-gap: var(--_flex-column-gap);
 display: flex;
 flex-direction: row;
-gap: var(--helix-space-none);
+row-gap: var(--_flex-row-gap);
 }
 
 :host([inline]) {
@@ -13,34 +19,127 @@ display: inline-flex;
 flex-direction: column;
 }
 
+:host([direction="row-reverse"]) {
+flex-direction: row-reverse;
+}
+
+:host([direction="column-reverse"]) {
+flex-direction: column-reverse;
+}
+
+:host([layout="cluster"]),
+:host([layout="flank"]),
+:host([layout="flank-end"]),
+:host([layout="split"]) {
+align-items: center;
+flex-wrap: wrap;
+}
+
+:host([layout="split"]) {
+justify-content: space-between;
+}
+
+:host([layout="flank"]) ::slotted(:first-child),
+:host([layout="flank-end"]) ::slotted(:last-child) {
+flex-basis: var(--flex-flank-size, auto);
+flex-grow: 1;
+}
+
+:host([layout="flank"]) ::slotted(:last-child),
+:host([layout="flank-end"]) ::slotted(:first-child) {
+flex-basis: 0;
+flex-grow: 999;
+min-inline-size: var(--flex-flank-min, 50%);
+}
+
 :host([wrap]) {
 flex-wrap: wrap;
 }
 
+:host([wrap="reverse"]) {
+flex-wrap: wrap-reverse;
+}
+
 :host([gap="2xs"]) {
-gap: var(--helix-space-2xs);
+--_flex-gap: var(--helix-space-2xs);
 }
 :host([gap="xs"]) {
-gap: var(--helix-space-xs);
+--_flex-gap: var(--helix-space-xs);
 }
 :host([gap="sm"]) {
-gap: var(--helix-space-sm);
+--_flex-gap: var(--helix-space-sm);
 }
 :host([gap="md"]) {
-gap: var(--helix-space-md);
+--_flex-gap: var(--helix-space-md);
 }
 :host([gap="lg"]) {
-gap: var(--helix-space-lg);
+--_flex-gap: var(--helix-space-lg);
 }
 :host([gap="xl"]) {
-gap: var(--helix-space-xl);
+--_flex-gap: var(--helix-space-xl);
 }
 :host([gap="2xl"]) {
-gap: var(--helix-space-2xl);
+--_flex-gap: var(--helix-space-2xl);
 }
 
 :host([gap="3xl"]) {
-gap: var(--helix-space-3xl);
+--_flex-gap: var(--helix-space-3xl);
+}
+
+:host([row-gap="none"]) {
+--_flex-row-gap: var(--helix-space-none);
+}
+:host([row-gap="2xs"]) {
+--_flex-row-gap: var(--helix-space-2xs);
+}
+:host([row-gap="xs"]) {
+--_flex-row-gap: var(--helix-space-xs);
+}
+:host([row-gap="sm"]) {
+--_flex-row-gap: var(--helix-space-sm);
+}
+:host([row-gap="md"]) {
+--_flex-row-gap: var(--helix-space-md);
+}
+:host([row-gap="lg"]) {
+--_flex-row-gap: var(--helix-space-lg);
+}
+:host([row-gap="xl"]) {
+--_flex-row-gap: var(--helix-space-xl);
+}
+:host([row-gap="2xl"]) {
+--_flex-row-gap: var(--helix-space-2xl);
+}
+:host([row-gap="3xl"]) {
+--_flex-row-gap: var(--helix-space-3xl);
+}
+
+:host([column-gap="none"]) {
+--_flex-column-gap: var(--helix-space-none);
+}
+:host([column-gap="2xs"]) {
+--_flex-column-gap: var(--helix-space-2xs);
+}
+:host([column-gap="xs"]) {
+--_flex-column-gap: var(--helix-space-xs);
+}
+:host([column-gap="sm"]) {
+--_flex-column-gap: var(--helix-space-sm);
+}
+:host([column-gap="md"]) {
+--_flex-column-gap: var(--helix-space-md);
+}
+:host([column-gap="lg"]) {
+--_flex-column-gap: var(--helix-space-lg);
+}
+:host([column-gap="xl"]) {
+--_flex-column-gap: var(--helix-space-xl);
+}
+:host([column-gap="2xl"]) {
+--_flex-column-gap: var(--helix-space-2xl);
+}
+:host([column-gap="3xl"]) {
+--_flex-column-gap: var(--helix-space-3xl);
 }
 
 :host([align-items="start"]) {
@@ -56,6 +155,32 @@ align-items: flex-end;
 align-items: baseline;
 }
 
+:host([align-content="start"]) {
+align-content: flex-start;
+}
+:host([align-content="center"]) {
+align-content: center;
+}
+:host([align-content="end"]) {
+align-content: flex-end;
+}
+:host([align-content="between"]) {
+align-content: space-between;
+}
+:host([align-content="around"]) {
+align-content: space-around;
+}
+:host([align-content="stretch"]) {
+align-content: stretch;
+}
+
+:host([align-items="stretch"]) {
+align-items: stretch;
+}
+
+:host([justify-content="start"]) {
+justify-content: flex-start;
+}
 :host([justify-content="center"]) {
 justify-content: center;
 }

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

@@ -9,7 +9,19 @@ import type { CSSResultGroup, TemplateResult } from 'lit';
  *
  * There is no separate Stack component. For a stack, set `direction="column"`.
  *
- * `gap` takes a space token name, so spacing stays on the scale.
+ * `gap` takes a space token name, so spacing stays on the scale. `row-gap`
+ * and `column-gap` set one axis each and win over `gap` on theirs.
+ *
+ * `layout` sets up one of three common patterns, and any attribute you also
+ * write wins over the pattern's own value:
+ *
+ * - `cluster`: items in a wrapping row, centered on one line, such as tags.
+ * - `split`: the first item at the start and the rest pushed to the end, such
+ *   as a title and its actions. Wraps when there is no room.
+ * - `flank` and `flank-end`: a fixed item beside one that takes the rest, such
+ *   as an icon and its text, or a field and its button. The item that takes
+ *   the rest stays at least `--flex-flank-min` wide, and the pair stacks once
+ *   it cannot.
  *
  * Flex is presentation only, so it has no headless tier.
  *
@@ -20,8 +32,19 @@ import type { CSSResultGroup, TemplateResult } from 'lit';
  * @documentation https://fusion.dev/helix/components/flex
  *
  * @slot - The items to lay out.
+ *
+ * @cssproperty --flex-flank-min - The narrowest the growing item of a `flank` layout gets before the two stack, as a share of the row. Defaults to `50%`.
+ * @cssproperty --flex-flank-size - The width of the fixed item of a `flank` layout. Defaults to its own width.
  */
 export declare class HelixFlex extends HelixElement {
+    /**
+     * How the lines of a wrapping row share the space across it, set as
+     * `align-content`.
+     *
+     * Named for the CSS property it sets, the way `alignItems` is. It moves
+     * nothing in a row that does not wrap, which has one line.
+     */
+    alignContent?: 'start' | 'center' | 'end' | 'between' | 'around' | 'stretch';
     /**
      * How items align across the direction, set as `align-items`.
      *
@@ -42,9 +65,18 @@ export declare class HelixFlex extends HelixElement {
      */
     alignItems?: 'start' | 'center' | 'end' | 'stretch' | 'baseline';
     /**
-     * Whether items run across or down.
+     * Space between the items of a row, named on the space scale. Wins over
+     * `gap` across the row.
+     */
+    columnGap?: 'none' | '2xs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl';
+    /**
+     * Whether items run across or down, and from which end.
+     *
+     * `row-reverse` and `column-reverse` change only where the items are drawn.
+     * Focus and a screen reader still follow the order of the markup, so use
+     * them for a visual order that reads the same either way.
      */
-    direction?: 'row' | 'column';
+    direction?: 'row' | 'column' | 'row-reverse' | 'column-reverse';
     /**
      * Space between items, named on the space scale.
      */
@@ -62,9 +94,23 @@ export declare class HelixFlex extends HelixElement {
      */
     justifyContent?: 'start' | 'center' | 'end' | 'between' | 'around';
     /**
-     * Whether items wrap onto more lines.
+     * A common layout pattern: `cluster`, `split`, `flank` or `flank-end`.
+     *
+     * Each sets the wrapping, alignment and spread it needs, and an attribute
+     * you write as well wins over it. `flank` holds the first item at its own
+     * width and gives the last one the rest, and `flank-end` does the reverse.
+     */
+    layout?: 'cluster' | 'flank' | 'flank-end' | 'split';
+    /**
+     * Space between the lines of a wrapping row, or between the items of a
+     * column, named on the space scale. Wins over `gap` down the column.
+     */
+    rowGap?: 'none' | '2xs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl';
+    /**
+     * Whether items wrap onto more lines. `wrap="reverse"` wraps them upward,
+     * each new line above the one before.
      */
-    wrap: boolean;
+    wrap: boolean | 'reverse';
     protected render(): TemplateResult;
     static styles: CSSResultGroup;
 }

package/dist/flex/root/flex-root.js

@@ -8,6 +8,10 @@ import { customElement, HelixElement } from '@fusion.dev/helix-core';
 import { html } from 'lit';
 import { property } from 'lit/decorators.js';
 import { styles } from './flex-root.css.js';
+const wrapConverter = {
+    fromAttribute: (value) => value === null ? false : value === 'reverse' ? 'reverse' : true,
+    toAttribute: (value) => value === 'reverse' ? 'reverse' : value ? '' : null,
+};
 let HelixFlex = class HelixFlex extends HelixElement {
     constructor() {
         super(...arguments);
@@ -19,9 +23,15 @@ let HelixFlex = class HelixFlex extends HelixElement {
     }
     static { this.styles = styles; }
 };
+__decorate([
+    property({ attribute: 'align-content', reflect: true })
+], HelixFlex.prototype, "alignContent", void 0);
 __decorate([
     property({ attribute: 'align-items', reflect: true })
 ], HelixFlex.prototype, "alignItems", void 0);
+__decorate([
+    property({ attribute: 'column-gap', reflect: true })
+], HelixFlex.prototype, "columnGap", void 0);
 __decorate([
     property({ reflect: true })
 ], HelixFlex.prototype, "direction", void 0);
@@ -35,7 +45,13 @@ __decorate([
     property({ attribute: 'justify-content', reflect: true })
 ], HelixFlex.prototype, "justifyContent", void 0);
 __decorate([
-    property({ reflect: true, type: Boolean })
+    property({ reflect: true })
+], HelixFlex.prototype, "layout", void 0);
+__decorate([
+    property({ attribute: 'row-gap', reflect: true })
+], HelixFlex.prototype, "rowGap", void 0);
+__decorate([
+    property({ converter: wrapConverter, reflect: true })
 ], HelixFlex.prototype, "wrap", void 0);
 HelixFlex = __decorate([
     customElement('helix-flex')

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

@@ -1,9 +1,17 @@
 import { createSheet } from '@fusion.dev/helix-core';
 export const styles = createSheet(`:host {
-display: grid;
 
-gap: var(--helix-space-none);
+--_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"]) {
@@ -23,33 +31,89 @@ grid-template-columns: var(--grid-columns, var(--_grid-template, repeat(6, minma
 }
 
 :host([gap="none"]) {
-gap: var(--helix-space-none);
+--_grid-gap: var(--helix-space-none);
 }
 :host([gap="2xs"]) {
-gap: var(--helix-space-2xs);
+--_grid-gap: var(--helix-space-2xs);
 }
 :host([gap="xs"]) {
-gap: var(--helix-space-xs);
+--_grid-gap: var(--helix-space-xs);
 }
 :host([gap="sm"]) {
-gap: var(--helix-space-sm);
+--_grid-gap: var(--helix-space-sm);
 }
 
 :host([gap="md"]) {
-gap: var(--helix-space-md);
+--_grid-gap: var(--helix-space-md);
 }
 :host([gap="lg"]) {
-gap: var(--helix-space-lg);
+--_grid-gap: var(--helix-space-lg);
 }
 :host([gap="xl"]) {
-gap: var(--helix-space-xl);
+--_grid-gap: var(--helix-space-xl);
 }
 :host([gap="2xl"]) {
-gap: var(--helix-space-2xl);
+--_grid-gap: var(--helix-space-2xl);
 }
 
 :host([gap="3xl"]) {
-gap: var(--helix-space-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"]) {
@@ -62,6 +126,45 @@ align-items: center;
 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

@@ -13,6 +13,14 @@ import type { CSSResultGroup, PropertyValues, TemplateResult } from 'lit';
  * If you set both, `min` wins. The grid is presentation only, so there is no
  * headless tier.
  *
+ * `row-gap` and `column-gap` set one axis each and win over `gap` on theirs.
+ * `--grid-rows` and `--grid-areas` set the rows and named areas, and a child
+ * takes its place with `grid-area` in your own stylesheet.
+ *
+ * **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.
+ *
  * @since 0.1.0
  * @status stable
  * @category layout
@@ -21,7 +29,9 @@ import type { CSSResultGroup, PropertyValues, TemplateResult } from 'lit';
  *
  * @slot - The items to lay out.
  *
+ * @cssproperty --grid-areas - The named areas, as `grid-template-areas` takes them, such as `"rail main"`. A child takes its area with `grid-area`.
  * @cssproperty --grid-columns - An explicit track list. It overrides `min` and `columns`. Use it for tracks of unequal widths, which neither attribute can set.
+ * @cssproperty --grid-rows - An explicit row track list, such as `auto minmax(0, 1fr) auto`. Rows are sized by their content when it is unset.
  */
 export declare class HelixGrid extends HelixElement {
     /**
@@ -40,6 +50,21 @@ export declare class HelixGrid extends HelixElement {
      * wide its tracks are.
      */
     alignItems?: 'start' | 'center' | 'end' | 'stretch';
+    /**
+     * How cells fill the grid when no child places itself, set as
+     * `grid-auto-flow`.
+     *
+     * `column` fills each column before the next. `dense` and `column-dense`
+     * also move a later small cell back into an earlier gap. Moving them changes
+     * only where they are drawn, so focus and a screen reader still follow the
+     * markup.
+     */
+    autoFlow?: 'row' | 'column' | 'dense' | 'column-dense';
+    /**
+     * The space between columns, as a step on the space scale. Wins over `gap`
+     * across the row.
+     */
+    columnGap?: 'none' | '2xs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl';
     /**
      * A fixed number of equal columns.
      *
@@ -51,6 +76,13 @@ export declare class HelixGrid extends HelixElement {
      * The space between cells, as a step on the space scale.
      */
     gap?: 'none' | '2xs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl';
+    /**
+     * How each cell aligns within its column. Sets `justify-items`.
+     *
+     * Named for the CSS property it sets, the way `alignItems` is. Absent, every
+     * cell stretches to the width of its column.
+     */
+    justifyItems?: 'start' | 'center' | 'end' | 'stretch';
     /**
      * The minimum column width. The grid fits as many columns as the width allows.
      *
@@ -62,6 +94,11 @@ export declare class HelixGrid extends HelixElement {
      * is two intentions in one element.
      */
     min: string;
+    /**
+     * The space between rows, as a step on the space scale. Wins over `gap` down
+     * the column.
+     */
+    rowGap?: 'none' | '2xs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl';
     /**
      * The rule the shadow root's own `<style>` holds: the reset, and the track
      * list `min` or an unlisted `columns` asks for.

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

@@ -8,7 +8,7 @@ import { customElement, HelixElement, reportRuntime } from '@fusion.dev/helix-co
 import { property } from 'lit/decorators.js';
 import { html, unsafeStatic } from 'lit/static-html.js';
 import { styles } from './grid-root.css.js';
-const UNINHERITED = '--grid-columns: initial; --_grid-template: initial;';
+const UNINHERITED = '--grid-areas: initial; --grid-columns: initial; --grid-rows: initial; --_grid-template: initial;';
 const NUMBER = /^-?(?:\d+\.?\d*|\.\d+)(?:px|r?em|r?ex|r?ch|r?lh|r?ic|r?cap|%|[sdl]?v(?:w|h|i|b|min|max)|cq(?:w|h|i|b|min|max)|cm|mm|in|pt|pc|q)?$/i;
 const TOKEN = /\s+|(?:calc|clamp|min|max)\(|var\(--[\w-]+|-?(?:\d+\.?\d*|\.\d+)[a-z%]*|[(),+*/-]/giy;
 const lengthOf = (value) => {
@@ -75,15 +75,27 @@ let HelixGrid = class HelixGrid extends HelixElement {
 __decorate([
     property({ attribute: 'align-items', reflect: true })
 ], HelixGrid.prototype, "alignItems", void 0);
+__decorate([
+    property({ attribute: 'auto-flow', reflect: true })
+], HelixGrid.prototype, "autoFlow", void 0);
+__decorate([
+    property({ attribute: 'column-gap', reflect: true })
+], HelixGrid.prototype, "columnGap", void 0);
 __decorate([
     property({ reflect: true, type: Number })
 ], HelixGrid.prototype, "columns", void 0);
 __decorate([
     property({ reflect: true })
 ], HelixGrid.prototype, "gap", void 0);
+__decorate([
+    property({ attribute: 'justify-items', reflect: true })
+], HelixGrid.prototype, "justifyItems", void 0);
 __decorate([
     property()
 ], HelixGrid.prototype, "min", void 0);
+__decorate([
+    property({ attribute: 'row-gap', reflect: true })
+], HelixGrid.prototype, "rowGap", void 0);
 HelixGrid = __decorate([
     customElement('helix-grid')
 ], HelixGrid);

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

@@ -49,7 +49,7 @@ justify-content: start;
 position: relative;
 }
 
-[part="cell"] {
+[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);
@@ -74,7 +74,7 @@ font-weight: var(--helix-weight-medium);
 opacity: 0.72;
 }
 
-[part="tooltip-cell"] {
+[part~="tooltip-cell"] {
 align-items: baseline;
 display: flex;
 gap: var(--helix-space-sm);
@@ -91,16 +91,44 @@ font-weight: var(--helix-weight-medium);
 }
 
 @media (hover: hover) {
-[part="cell"]: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 {
+[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);
@@ -133,7 +161,7 @@ text-align: center;
 }
 
 @media print {
-[part="cell"] {
+[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

@@ -26,9 +26,11 @@ import '../../tooltip/index.js';
  * @slot summary - Below the strip, in the middle.
  *
  * @csspart cell - One reading.
+ * @csspart cell-active - The cell the pointer or the keys rest on, ringed as a hovered cell is. Set alongside `cell`.
  * @csspart footer - The three-slot row under the strip.
+ * @csspart live - The readout, a polite live region the sheet hides visually.
  * @csspart mark - The invisible point the tooltip is anchored to.
- * @csspart strip - The grid of cells.
+ * @csspart strip - The grid of cells, which takes focus to be read by key.
  * @csspart tooltip - The bubble, forwarded from `Tooltip`.
  * @csspart tooltip-anchor - The `Tooltip` element itself.
  * @csspart tooltip-arrow - The bubble's point, forwarded from `Tooltip`.
@@ -38,6 +40,7 @@ import '../../tooltip/index.js';
  * @csspart tooltip-arrow-top - The point while the bubble is above the reading, on its bottom edge. Set alongside `tooltip-arrow`.
  * @csspart tooltip-bottom - The bubble while it is below the reading. Set alongside `tooltip`.
  * @csspart tooltip-cell - One column's name and value inside the tooltip.
+ * @csspart tooltip-cell-current - The cell the series keys rest on, in the charts whose readings hold several series. A strip draws one, so it is never set here.
  * @csspart tooltip-label - The reading's own name inside the tooltip.
  * @csspart tooltip-left - The bubble while it is left of the reading. Set alongside `tooltip`.
  * @csspart tooltip-name - A column's name inside the tooltip.

package/dist/icon/index.d.ts

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

package/dist/icon/index.js

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