@fusion.dev/helix 0.143.0 → 0.144.0

package/dist/color-picker/root/color-picker-root.css.js

@@ -235,6 +235,70 @@ border-color: var(--helix-color-danger);
 outline-color: var(--helix-color-danger);
 }
 
+[part="fields"] {
+display: grid;
+gap: var(--color-picker-fields-gap, var(--helix-space-xs));
+grid-auto-columns: minmax(0, 1fr);
+grid-auto-flow: column;
+margin-block-start: var(--helix-space-sm);
+padding-inline: var(--color-picker-padding, var(--helix-space-none));
+}
+
+:host([alpha]) [part="fields"] {
+grid-auto-flow: row;
+grid-template-columns: repeat(2, minmax(0, 1fr));
+}
+
+[part="field"] {
+display: flex;
+flex-direction: column;
+gap: var(--helix-space-2xs);
+min-inline-size: 0;
+}
+
+[part="field-label"] {
+color: var(--color-picker-field-label-color, var(--helix-color-foreground-muted));
+font-family: var(--helix-font-sans);
+font-size: var(--helix-text-sm);
+font-weight: var(--helix-weight-medium);
+}
+
+[part="field-input"] {
+all: unset;
+
+appearance: textfield;
+background-color: var(--helix-color-surface-sunken);
+block-size: var(--helix-size-control);
+border: var(--helix-border-thin) solid var(--helix-color-border);
+border-radius: var(--helix-radii-sm);
+box-sizing: border-box;
+color: var(--helix-color-foreground);
+font-family: var(--helix-font-sans);
+font-size: var(--helix-text-control);
+font-variant-numeric: tabular-nums;
+font-weight: var(--helix-weight-medium);
+inline-size: 100%;
+min-inline-size: 0;
+padding-inline: var(--helix-space-xs);
+transition: border-color var(--helix-duration-fast) var(--helix-easing-standard);
+}
+
+[part="field-input"]::-webkit-inner-spin-button,
+[part="field-input"]::-webkit-outer-spin-button {
+appearance: none;
+margin: 0;
+}
+
+[part="field-input"]:hover {
+border-color: var(--helix-color-foreground-muted);
+}
+
+[part="field-input"]:focus-visible {
+border-color: var(--helix-color-primary);
+outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);
+outline-offset: 0;
+}
+
 [part="actions"] {
 display: flex;
 flex: 1 1 auto;

package/dist/color-picker/root/color-picker-root.d.ts

@@ -34,6 +34,8 @@ import '../../slider/index.js';
  * @aliases Color, ColorArea, Swatch picker
  * @documentation https://fusion.dev/helix/components/color-picker
  *
+ * @cssproperty --color-picker-field-label-color - The color of the names above the channel number fields, in `channel-fields`.
+ * @cssproperty --color-picker-fields-gap - The space between the channel number fields, in `channel-fields`.
  * @cssproperty --color-picker-grid-radius - The corner radius of the square.
  * @cssproperty --color-picker-grid-ratio - The aspect ratio of the square.
  * @cssproperty --color-picker-padding - The inset of the rows under the square and of the picker's bottom edge.

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

@@ -20,6 +20,11 @@ color: var(--helix-color-success);
 color: var(--helix-color-success);
 }
 
+[part="button"][data-failed],
+:host(:not(:disabled)) [part="button"][data-failed]:hover {
+color: var(--helix-color-danger);
+}
+
 slot > svg {
 block-size: var(--helix-size-icon-tight);
 inline-size: var(--helix-size-icon-tight);

package/dist/date-input/root/date-input-root.css.js

@@ -77,6 +77,25 @@ flex-basis: 0;
 min-inline-size: var(--helix-size-icon-loose);
 }
 
+[part="segments"] {
+--_segment-focus-background-color: var(
+--date-input-segment-focus-background-color,
+var(--helix-color-primary)
+);
+--_segment-focus-color: var(
+--date-input-segment-focus-color,
+var(--helix-color-foreground-on-primary)
+);
+--_segment-literal-color: var(
+--date-input-segment-literal-color,
+var(--helix-color-foreground-muted)
+);
+--_segment-placeholder-color: var(
+--date-input-segment-placeholder-color,
+var(--helix-color-foreground-subtle)
+);
+}
+
 @media print {
 :host {
 print-color-adjust: exact;

package/dist/date-input/root/date-input-root.d.ts

@@ -27,6 +27,14 @@ import '../../tag/index.js';
  * @cssproperty --date-input-border-width - The width of the panel's border. It
  *   follows `--helix-border-floating`, which is `0`, so the panel stands out by its
  *   shadow unless a theme sets a border.
+ * @cssproperty --date-input-segment-focus-background-color - The fill behind the
+ *   segment with focus, in `segmented`. It follows `--helix-color-primary`.
+ * @cssproperty --date-input-segment-focus-color - The text of the segment with
+ *   focus, in `segmented`.
+ * @cssproperty --date-input-segment-literal-color - The text the locale writes
+ *   between two segments, in `segmented`.
+ * @cssproperty --date-input-segment-placeholder-color - The dashes of a segment
+ *   with nothing in it, in `segmented`. It matches the text field's placeholder.
  * @cssproperty --date-input-shadow - The shadow under the panel. It follows
  *   `--helix-shadow-floating`. The panel can sit over any content, so it has a
  *   shadow by default.

package/dist/date-input/root/date-input-root.js

@@ -10,6 +10,7 @@ import '../../date-picker/index.js';
 import '../../tag/index.js';
 import { styles as fieldStyles } from '../../shared/field/field.css.js';
 import { styles as fieldFrameStyles } from '../../shared/field/field-frame.css.js';
+import { styles as fieldSegmentsStyles } from '../../shared/field/field-segments.css.js';
 import { styles as fieldStackedStyles } from '../../shared/field/field-stacked.css.js';
 import { styles as floatingEntranceStyles } from '../../shared/floating/entrance.css.js';
 import { styles as floatingPanelStyles } from '../../shared/floating/panel.css.js';
@@ -21,6 +22,7 @@ let HelixDateInput = class HelixDateInput extends HelixHeadlessDateInput {
         fieldStyles,
         fieldFrameStyles,
         fieldStackedStyles,
+        fieldSegmentsStyles,
         tagRowStyles,
         floatingPanelStyles,
         floatingEntranceStyles,

package/dist/date-picker/root/date-picker-root.css.js

@@ -68,6 +68,74 @@ outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);
 outline-offset: var(--helix-size-focus-offset);
 }
 
+[part="heading-button"] {
+all: unset;
+box-sizing: border-box;
+border-radius: var(--helix-radii-sm);
+cursor: pointer;
+padding-inline: var(--helix-space-2xs);
+}
+
+[part="heading-button"]:hover:not(:disabled) {
+background-color: var(--helix-color-surface-sunken);
+}
+
+[part="heading-button"]:focus-visible {
+outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);
+outline-offset: var(--helix-size-focus-offset);
+}
+
+[part="periods"] {
+display: grid;
+gap: var(--helix-space-2xs);
+inline-size: calc(var(--_calendar-track) * 7);
+}
+
+[part="period-row"] {
+display: grid;
+gap: var(--helix-space-2xs);
+grid-template-columns: repeat(3, 1fr);
+}
+
+[part~="period"] {
+align-items: center;
+block-size: var(--date-picker-period-size, calc(var(--_calendar-row) * 1.5));
+border-radius: var(--helix-radii-sm);
+cursor: pointer;
+display: inline-flex;
+font-size: var(--helix-text-sm);
+justify-content: center;
+transition: background-color var(--helix-duration-fast) var(--helix-easing-standard);
+}
+
+[part~="period"]:hover:not([aria-disabled]) {
+background-color: var(--helix-color-surface-sunken);
+}
+
+[part~="period-current"] {
+box-shadow: inset 0 0 0 var(--helix-border-thin) var(--helix-color-border);
+}
+
+[part~="period-selected"] {
+background-color: var(--date-picker-selected-color, var(--helix-color-surface-inverse));
+color: var(--helix-color-foreground-inverse);
+}
+
+[part~="period-selected"]:hover:not([aria-disabled]) {
+background-color: var(--date-picker-selected-color, var(--helix-color-surface-inverse));
+}
+
+[part~="period-disabled"] {
+color: var(--helix-color-foreground-subtle);
+cursor: default;
+opacity: 0.4;
+}
+
+[part~="period"]:focus-visible {
+outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);
+outline-offset: var(--helix-size-focus-offset);
+}
+
 [part="previous"]:disabled,
 [part="next"]:disabled {
 cursor: default;

package/dist/date-picker/root/date-picker-root.d.ts

@@ -25,6 +25,7 @@ import type { CSSResultGroup } from 'lit';
  *
  * @cssproperty --date-picker-columns - Months per row. Two unless there is only one.
  * @cssproperty --date-picker-day-size - Width and height of a day.
+ * @cssproperty --date-picker-period-size - Height of a month or a year in the months and years views, where `max-view` is set.
  * @cssproperty --date-picker-range-color - Band behind the days in a range.
  * @cssproperty --date-picker-row-size - Height of a week row.
  * @cssproperty --date-picker-selected-color - Fill behind a selected day.

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

@@ -176,6 +176,53 @@ justify-content: center;
 margin-inline: auto;
 }
 
+[part="dismiss"] {
+all: unset;
+
+box-sizing: border-box;
+position: absolute;
+inset-block-start: calc(
+var(--dialog-padding, var(--helix-space-lg)) +
+(var(--helix-text-xl) * var(--helix-leading-tight) - var(--helix-size-control-sm)) /
+2
+);
+inset-inline-end: var(--helix-space-md);
+block-size: var(--helix-size-control-sm);
+border-radius: var(--helix-radii-sm);
+color: var(--helix-color-foreground-muted);
+cursor: pointer;
+display: inline-flex;
+inline-size: var(--helix-size-control-sm);
+place-content: center;
+place-items: center;
+transition: color var(--helix-duration-fast) var(--helix-easing-standard);
+}
+
+[part="dismiss"] svg {
+block-size: var(--helix-size-icon-sm);
+inline-size: var(--helix-size-icon-sm);
+}
+
+[part="dismiss"]:hover {
+background-color: color-mix(in oklab, var(--helix-color-foreground) 8%, transparent);
+color: var(--helix-color-foreground);
+}
+
+[part="dismiss"]:focus-visible {
+outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);
+outline-offset: var(--helix-size-focus-offset);
+}
+
+:host([dismissible]) ::slotted([slot="header"]) {
+padding-inline-end: calc(var(--helix-size-control-sm) + var(--helix-space-xs));
+}
+
+@media (prefers-reduced-motion: reduce) {
+[part="dismiss"] {
+transition: none;
+}
+}
+
 @media print {
 :host {
 display: none;

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

@@ -7,8 +7,8 @@ display: flex;
 }
 
 [part="content"] {
-color: var(--helix-color-foreground-muted);
-margin-inline: var(--helix-space-sm);
+color: var(--divider-content-color, var(--helix-color-foreground-muted));
+margin-inline: var(--divider-content-gap, var(--helix-space-sm));
 display: inline-flex;
 flex: 0 0 auto;
 font-family: var(--helix-font-sans);
@@ -49,7 +49,7 @@ flex-direction: column;
 }
 
 :host([orientation="vertical"]) [part="content"] {
-margin-block: var(--helix-space-sm);
+margin-block: var(--divider-content-gap, var(--helix-space-sm));
 margin-inline: var(--helix-space-none);
 }
 
@@ -74,6 +74,11 @@ inline-size: var(--_divider-thickness);
 min-block-size: 1em;
 }
 
+:host([content-placement="start"]) [part="line"]:has(+ [part="content"]:not([data-empty])),
+:host([content-placement="end"]) [part="content"]:not([data-empty]) + [part="line"] {
+flex: 0 0 var(--divider-content-offset, var(--helix-space-lg));
+}
+
 @media print {
 :host {
 print-color-adjust: economy;

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

@@ -8,15 +8,23 @@ import type { CSSResultGroup } from 'lit';
  * default. A vertical divider stretches to fit its flex parent, so it matches
  * the height of what it sits beside.
  *
+ * Content set into the line sits at its middle. `content-placement` moves it
+ * toward the start or the end, leaving a short length of line before or after
+ * it, the way a section label sits in a form.
+ *
  * @since 0.1.0
  * @status stable
  * @category layout
  * @aliases Separator, Rule
  * @documentation https://fusion.dev/helix/components/divider
  *
- * @csspart line - The line.
+ * @csspart content - The content set into the line.
+ * @csspart line - The line, or each half of it when content is set into it.
  *
  * @cssproperty --divider-color - The color of the line.
+ * @cssproperty --divider-content-color - The color of the content set into the line.
+ * @cssproperty --divider-content-gap - The space either side of the content set into the line.
+ * @cssproperty --divider-content-offset - The length of line before the content under `content-placement="start"`, or after it under `end`.
  * @cssproperty --divider-length - The length of a vertical line. A horizontal line takes the divider's width.
  * @cssproperty --divider-padding - The space removed from both ends of the line.
  * @cssproperty --divider-padding-end - The space removed from the end of the line only.
@@ -24,6 +32,14 @@ import type { CSSResultGroup } from 'lit';
  * @cssproperty --divider-thickness - The thickness of the line.
  */
 export declare class HelixDivider extends HelixHeadlessDivider {
+    /**
+     * Where content set into the line sits along it.
+     *
+     * Absent is the middle. `start` and `end` move it toward one end, with a
+     * short length of line, `--divider-content-offset`, kept before or after it.
+     * A divider with nothing set into it is one line whatever this says.
+     */
+    contentPlacement?: 'end' | 'start';
     static styles: CSSResultGroup;
 }
 declare global {

package/dist/divider/root/divider-root.js

@@ -6,10 +6,14 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 };
 import { customElement } from '@fusion.dev/helix-core';
 import { HelixHeadlessDivider } from '@fusion.dev/helix-headless/divider';
+import { property } from 'lit/decorators.js';
 import { styles } from './divider-root.css.js';
 let HelixDivider = class HelixDivider extends HelixHeadlessDivider {
     static { this.styles = styles; }
 };
+__decorate([
+    property({ attribute: 'content-placement', reflect: true })
+], HelixDivider.prototype, "contentPlacement", void 0);
 HelixDivider = __decorate([
     customElement('helix-divider')
 ], HelixDivider);

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

@@ -134,7 +134,23 @@ inset-inline: 0;
 border: var(--drawer-border-width, var(--helix-border-floating)) solid
 var(--drawer-border-color, var(--helix-color-border));
 box-shadow: var(--drawer-shadow, var(--helix-shadow-floating));
-transform: translate(0, 0);
+
+transform: translate(var(--drawer-swipe-x, 0), var(--drawer-swipe-y, 0));
+}
+
+[part="panel"],
+[part="content"] {
+touch-action: pan-y;
+}
+
+:host([placement="bottom"]) [part="panel"],
+:host([placement="top"]) [part="panel"] {
+touch-action: pan-x;
+}
+
+[part="panel"][data-swiping] {
+transition: none;
+user-select: none;
 }
 
 @starting-style {
@@ -159,6 +175,17 @@ margin: var(--helix-space-none);
 margin-block-end: var(--helix-space-md);
 }
 
+[part="footer"] {
+flex: 0 0 auto;
+}
+
+::slotted([slot="footer"]) {
+display: flex;
+flex-wrap: wrap;
+gap: var(--helix-space-xs);
+margin-block-start: var(--helix-space-md);
+}
+
 [part="content"] {
 flex: 1 1 auto;
 min-block-size: 0;

package/dist/element-events.generated.js

@@ -4,6 +4,7 @@ registerElementEvents({
     'helix-announcement': ['helix-dismiss'],
     'helix-app-header': ['helix-scrolled'],
     'helix-avatar': ['error', 'load'],
+    'helix-callout': ['helix-dismiss'],
     'helix-canvas': [
         'helix-before-move',
         'helix-before-reconnect',
@@ -58,7 +59,7 @@ registerElementEvents({
         'helix-select',
         'toggle',
     ],
-    'helix-copy-button': ['helix-copy'],
+    'helix-copy-button': ['helix-copy', 'helix-copy-error'],
     'helix-data-table': [
         'helix-activate',
         'helix-filter',
@@ -84,7 +85,7 @@ registerElementEvents({
     'helix-drawer': ['close', 'helix-before-close', 'helix-before-open', 'toggle'],
     'helix-drilldown': ['helix-select'],
     'helix-drilldown-item': ['helix-select'],
-    'helix-file-input': ['change', 'helix-before-change', 'input'],
+    'helix-file-input': ['change', 'helix-before-change', 'helix-reject', 'input'],
     'helix-filter-chip': ['helix-dismiss'],
     'helix-filter-input': [
         'change',
@@ -110,10 +111,11 @@ registerElementEvents({
         'helix-graph-zoom',
     ],
     'helix-heatmap': ['helix-resize'],
-    'helix-icon': ['error'],
+    'helix-icon': ['error', 'load'],
     'helix-image': ['error', 'load'],
-    'helix-input': ['change', 'helix-before-change', 'input'],
+    'helix-input': ['change', 'helix-before-change', 'helix-clear', 'input'],
     'helix-kbd': ['helix-shortcut'],
+    'helix-legend': ['change', 'helix-before-change'],
     'helix-lightbox': [
         'close',
         'helix-activate',
@@ -163,7 +165,7 @@ registerElementEvents({
     'helix-qr-code': ['error'],
     'helix-radio': ['helix-select'],
     'helix-radio-group': ['change', 'helix-before-change', 'helix-select', 'input'],
-    'helix-rating': ['change', 'helix-before-change', 'input'],
+    'helix-rating': ['change', 'helix-before-change', 'helix-clear', 'input'],
     'helix-sandbox': [
         'helix-before-edit',
         'helix-before-panel-resize',
@@ -200,6 +202,7 @@ registerElementEvents({
     'helix-table-column': ['helix-before-resize'],
     'helix-tabs': ['helix-activate', 'helix-before-activate', 'helix-select'],
     'helix-tag': ['helix-dismiss'],
+    'helix-tag-group': ['change', 'helix-before-change', 'helix-dismiss'],
     'helix-textarea': ['change', 'helix-before-change', 'input'],
     'helix-time-input': [
         'change',

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

@@ -3,37 +3,37 @@ export const styles = createSheet(`:host {
 align-items: center;
 display: flex;
 flex-direction: column;
-gap: var(--helix-space-sm);
+gap: var(--empty-gap, var(--helix-space-sm));
 padding: var(--empty-padding, var(--helix-space-2xl));
 text-align: center;
 }
 
 slot[name="icon"]::slotted(*) {
 
---icon-size: var(--helix-size-icon-lg);
+--icon-size: var(--empty-icon-size, var(--helix-size-icon-lg));
 
-color: var(--helix-color-foreground-subtle);
+color: var(--empty-icon-color, var(--helix-color-foreground-subtle));
 }
 
 slot[name="heading"]::slotted(*) {
-color: var(--helix-color-foreground);
-font-size: var(--helix-text-lg);
+color: var(--empty-heading-color, var(--helix-color-foreground));
+font-size: var(--empty-heading-size, var(--helix-text-lg));
 font-weight: var(--helix-weight-semibold);
 letter-spacing: var(--helix-tracking-tight);
 margin: var(--helix-space-none);
 }
 
 slot:not([name]) {
-color: var(--helix-color-foreground-muted);
-font-size: var(--helix-text-sm);
+color: var(--empty-message-color, var(--helix-color-foreground-muted));
+font-size: var(--empty-message-size, var(--helix-text-sm));
 }
 
 slot:not([name])::slotted(*) {
 margin: var(--helix-space-none);
-max-inline-size: 46ch;
+max-inline-size: var(--empty-message-measure, 46ch);
 }
 slot[name="actions"]::slotted(*) {
-margin-block-start: var(--helix-space-sm);
+margin-block-start: var(--empty-actions-gap, var(--helix-space-sm));
 }
 
 @media print {

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

@@ -13,6 +13,15 @@ import type { CSSResultGroup } from 'lit';
  * @aliases Placeholder, NoResults, Blank
  * @documentation https://fusion.dev/helix/components/empty
  *
+ * @cssproperty --empty-actions-gap - Space added above the actions.
+ * @cssproperty --empty-gap - Space between the icon, the heading, the message and the actions.
+ * @cssproperty --empty-heading-color - Color of the heading.
+ * @cssproperty --empty-heading-size - Size of the heading.
+ * @cssproperty --empty-icon-color - Color of the icon.
+ * @cssproperty --empty-icon-size - Size of the icon.
+ * @cssproperty --empty-message-color - Color of the message.
+ * @cssproperty --empty-message-measure - Widest the message runs before it wraps.
+ * @cssproperty --empty-message-size - Size of the message.
  * @cssproperty --empty-padding - Space around the whole block.
  */
 export declare class HelixEmpty extends HelixHeadlessEmpty {

package/dist/file-input/root/file-input-root.js

@@ -11,10 +11,12 @@ import { styles as fieldStyles } from '../../shared/field/field.css.js';
 import { styles as fieldFrameStyles } from '../../shared/field/field-frame.css.js';
 import { styles as fieldStackedStyles } from '../../shared/field/field-stacked.css.js';
 import { styles as glyphStyles } from '../../shared/glyph/glyph.css.js';
+import { styles as liveStyles } from '../../shared/live/live.css.js';
 import { styles } from './file-input-root.css.js';
 let HelixFileInput = class HelixFileInput extends HelixHeadlessFileInput {
     static { this.tier = 'helix-'; }
     static { this.styles = [
+        liveStyles,
         glyphStyles,
         fieldStyles,
         fieldFrameStyles,

package/dist/filter-input/root/filter-input-root.js

@@ -13,10 +13,12 @@ import { styles as fieldStackedStyles } from '../../shared/field/field-stacked.c
 import { styles as floatingEntranceStyles } from '../../shared/floating/entrance.css.js';
 import { styles as floatingPanelStyles } from '../../shared/floating/panel.css.js';
 import { styles as glyphStyles } from '../../shared/glyph/glyph.css.js';
+import { styles as liveStyles } from '../../shared/live/live.css.js';
 import { styles as tagRowStyles } from '../../shared/tags/tags.css.js';
 import { styles } from './filter-input-root.css.js';
 let HelixFilterInput = class HelixFilterInput extends HelixHeadlessFilterInput {
     static { this.styles = [
+        liveStyles,
         glyphStyles,
         fieldStyles,
         fieldFrameStyles,

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';