@fusion.dev/helix 0.193.0 → 0.195.0

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

@@ -18,6 +18,8 @@ import type { CSSResultGroup } from 'lit';
  * @cssproperty --accordion-border-color - The color of the lines between items, and of each item's border when outlined.
  * @cssproperty --accordion-gap - The space between items when outlined. Otherwise items share an edge.
  * @cssproperty --accordion-radius - The corner radius of each item when outlined.
+ *
+ * @replaces details
  */
 export declare class HelixAccordion extends HelixHeadlessAccordion {
     /**

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

@@ -33,6 +33,8 @@ import type { CSSResultGroup } from 'lit';
  * @cssproperty --blockquote-mark-color - The color of the mark `marks` draws, the subtle foreground by default.
  * @cssproperty --blockquote-mark-size - The font size of the mark `marks` draws.
  * @cssproperty --blockquote-size - The font size of the quoted passage.
+ *
+ * @replaces blockquote
  */
 export declare class HelixBlockquote extends HelixHeadlessBlockquote {
     /**

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

@@ -50,6 +50,8 @@ declare const HelixButton_base: (new (...args: any[]) => import("../../shared/mi
  *
  * @cssstate pending - The button is pending: `pending` is set. A ring turns over its hidden words.
  * @cssstate pressed - A Button Group in a selection mode has this button pressed.
+ *
+ * @replaces button, input[type=submit], input[type=button], input[type=reset]
  */
 export declare class HelixButton extends HelixButton_base {
     /**

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

@@ -27,6 +27,8 @@ import type { CSSResultGroup } from 'lit';
  * @cssproperty --checkbox-icon-size - The width and height of an icon slotted into `check` or `dash`. It fills the box by default.
  * @cssproperty --checkbox-mark-color - The color of the check mark and the dash, and of an icon slotted into `check` or `dash`.
  * @cssproperty --checkbox-size - The width and height of the box.
+ *
+ * @replaces input[type=checkbox]
  */
 export declare class HelixCheckbox extends HelixHeadlessCheckbox {
     static styles: CSSResultGroup;

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

@@ -23,6 +23,8 @@ import type { CSSResultGroup } from 'lit';
  * `space-2xs`, so a bracket next to the fragment sits close to it.
  * @cssproperty --code-radius - Corner radius of the wash. Defaults to `radii-sm`.
  * @cssproperty --code-size - The fragment's size. Defaults to `text-sm`.
+ *
+ * @replaces code
  */
 export declare class HelixCode extends HelixHeadlessCode {
     static styles: CSSResultGroup;

package/dist/code-block/root/code-block-root.d.ts

@@ -44,6 +44,8 @@ import '../../copy-button/index.js';
  * @cssproperty --code-block-max-block-size - The tallest the code grows before it scrolls, or until `expandable`'s button shows every line. The default is no limit.
  * @cssproperty --code-block-radius - The corner radius of the header's top and the block's bottom, which form one shape.
  * @cssproperty --code-block-removed-color - The color a diff's removed lines are tinted in and their `-` is drawn in. The danger color by default.
+ *
+ * @replaces pre
  */
 export declare class HelixCodeBlock extends HelixHeadlessCodeBlock {
     static tier: string;

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

@@ -33,6 +33,8 @@ import '../../color-picker/index.js';
  *   keeps a lift by default.
  * @cssproperty --color-input-swatch-radius - Corner radius of the swatch in `variant="swatch"`.
  * @cssproperty --color-input-swatch-size - Edge length of the swatch in `variant="swatch"`.
+ *
+ * @replaces input[type=color]
  */
 export declare class HelixColorInput extends HelixHeadlessColorInput {
     static tier: string;

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

@@ -38,6 +38,8 @@ import '../../tag/root/index.js';
  * @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.
+ *
+ * @replaces input[type=date]
  */
 export declare class HelixDateInput extends HelixHeadlessDateInput {
     static tier: string;

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

@@ -29,6 +29,8 @@ import type { CSSResultGroup } from 'lit';
  * @cssproperty --dialog-scrim - The tint over the page behind the dialog. Set it on the host, because a `var()` written inside `::backdrop` cannot read a token.
  * @cssproperty --dialog-shadow - Shadow under the panel. Follows `--helix-shadow-floating`. A
  *   floating surface can sit over any content, so it has a shadow by default.
+ *
+ * @replaces dialog
  */
 export declare class HelixDialog extends HelixHeadlessDialog {
     /**

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

@@ -33,6 +33,8 @@ import type { CSSResultGroup } from 'lit';
  * @cssproperty --divider-padding-end - The space removed from the end of the line only.
  * @cssproperty --divider-padding-start - The space removed from the start of the line only.
  * @cssproperty --divider-thickness - The thickness of the line.
+ *
+ * @replaces hr
  */
 export declare class HelixDivider extends HelixHeadlessDivider {
     /**

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

@@ -38,6 +38,8 @@ import '../../tag/root/index.js';
  * @cssproperty --file-input-remove-color-hover - The remove button's icon under the pointer.
  * @cssproperty --file-input-status-color - The words beside a file's upload bar.
  * @cssproperty --file-input-status-color-error - The words beside a file whose upload failed.
+ *
+ * @replaces input[type=file]
  */
 export declare class HelixFileInput extends HelixHeadlessFileInput {
     static tier: string;

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

@@ -22,6 +22,8 @@ import type { CSSResultGroup } from 'lit';
  * @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.
  * @cssproperty --image-radius - The corner radius when `shape` is `rounded`.
+ *
+ * @replaces img, picture
  */
 export declare class HelixImage extends HelixHeadlessImage {
     static styles: CSSResultGroup;

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

@@ -27,6 +27,8 @@ import type { CSSResultGroup } from 'lit';
  * @cssproperty --input-padding-inline - Space between the edge of the field and what is inside it.
  * @cssproperty --input-radius - Corner radius of the field.
  * @cssproperty --input-size - Height of the field.
+ *
+ * @replaces input, input[type=text], input[type=email], input[type=password], input[type=search], input[type=tel], input[type=url]
  */
 export declare class HelixInput extends HelixHeadlessInput {
     static styles: CSSResultGroup;

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

@@ -27,6 +27,8 @@ import type { CSSResultGroup } from 'lit';
  * @cssproperty --kbd-padding-inline - The space either side of the key's label.
  * @cssproperty --kbd-radius - How far the key's corners are rounded.
  * @cssproperty --kbd-separator-color - The color of the `+` between two keys of a chord under `caps`.
+ *
+ * @replaces kbd
  */
 export declare class HelixKbd extends HelixHeadlessKbd {
     static styles: CSSResultGroup;

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

@@ -27,6 +27,8 @@ import type { CSSResultGroup } from 'lit';
  * @cssproperty --list-marker-gutter - The space that the markers of ordered and unordered lists sit in.
  * @cssproperty --list-rail-inline-size - The width of the rail's track.
  * @cssproperty --list-rail-style - The counter style of the rail's numbers. Takes any `list-style-type`.
+ *
+ * @replaces ul, ol
  */
 export declare class HelixList extends HelixHeadlessList {
     /**

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

@@ -54,6 +54,8 @@ import type { CSSResultGroup } from 'lit';
  * @cssproperty --meter-value-color - The color of the reading shown under `show-value`.
  * @cssproperty --meter-value-gap - The space between the bar and the reading under `show-value`.
  * @cssproperty --meter-value-size - The type size of the reading shown under `show-value`.
+ *
+ * @replaces meter
  */
 export declare class HelixMeter extends HelixHeadlessMeter {
     /**

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

@@ -1,2 +1,2 @@
 import { createSheet } from '@fusion.dev/helix-core';
-export const styles = createSheet(`:host {--helix-size-checkbox: var(--helix-size-checkbox-sm);--helix-size-checkbox-loose: calc(var(--helix-size-checkbox) * 1.2);--helix-size-checkbox-tight: calc(var(--helix-size-checkbox) * 0.8);--helix-size-control: var(--helix-size-control-sm);--helix-size-control-loose: calc(var(--helix-size-control) * 1.2);--helix-size-control-tight: calc(var(--helix-size-control) * 0.8);--helix-size-icon: var(--helix-size-icon-sm);--helix-size-icon-loose: calc(var(--helix-size-icon) * 1.2);--helix-size-icon-tight: calc(var(--helix-size-icon) * 0.8);--helix-size-tag: var(--helix-size-tag-sm);--helix-size-avatar: var(--helix-size-avatar-sm);display: grid;grid-template-rows: auto minmax(0, 1fr) auto;max-block-size: var(--notifications-max-block-size, none)}:host(:state(media)) {--notifications-media-column: calc(var(--helix-size-avatar) + var(--helix-space-sm))}[part="header"] {align-items: center;border-block-end: var(--helix-border-thin) solid var(--notifications-rule, var(--helix-color-border));display: flex;gap: var(--helix-space-sm);justify-content: space-between;padding-block: var(--helix-space-sm);padding-inline: var(--notifications-padding-inline, var(--helix-space-lg))}[part="header"][data-empty], [part="footer"][data-empty] {display: none}[part="list"] {overflow-y: auto}:host([separation="filled"]) [part="header"], :host([separation="outlined"]) [part="header"] {border-block-end: none}:host([separation="filled"]) [part="list"], :host([separation="outlined"]) [part="list"] {padding-block-start: var(--notifications-item-gap, var(--helix-space-xs))}[part="footer"] {border-block-start: var(--helix-border-thin) solid var(--notifications-rule, var(--helix-color-border));padding-block: var(--helix-space-sm);padding-inline: var(--notifications-padding-inline, var(--helix-space-lg))}::slotted(helix-notification:last-of-type) {--notifications-rule: transparent}[part="mark-all"] {background: none;border: 0;border-radius: var(--helix-radii-sm);color: var(--helix-color-foreground-muted);cursor: pointer;font-family: var(--helix-font-sans);font-size: var(--helix-text-sm);padding-block: var(--helix-space-2xs);padding-inline: var(--helix-space-2xs);transition: color var(--helix-duration-fast) var(--helix-easing-standard)}[part="mark-all"]:hover {color: var(--helix-color-foreground)}[part="more"] {background: none;border: 0;border-block-start: var(--helix-border-thin) solid var(--helix-color-border);color: var(--helix-color-foreground-muted);cursor: pointer;font-family: var(--helix-font-sans);font-size: var(--helix-text-sm);inline-size: 100%;padding-block: var(--helix-space-sm);transition: color var(--helix-duration-fast) var(--helix-easing-standard)}[part="more"]:hover {color: var(--helix-color-foreground)}[part="more"][aria-disabled="true"], [part="more"][aria-disabled="true"]:hover {color: var(--helix-color-foreground-subtle);cursor: default}[part="more"]:focus-visible {outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);outline-offset: calc(var(--helix-size-focus-offset) * -1)}[part="mark-all"]:focus-visible {outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);outline-offset: var(--helix-size-focus-offset)}[part="empty"], [part="loading"] {--_collection-inset-block: var(--helix-space-lg);--_collection-inset-inline: var(--helix-space-md)}[part="error"] {color: var(--notifications-error-color, var(--helix-color-danger));font-family: var(--helix-font-sans);font-size: var(--helix-text-sm);margin: var(--helix-space-none);padding-block: var(--helix-space-lg);padding-inline: var(--helix-space-md);text-align: center}@media print {:host {max-block-size: none}[part="list"] {overflow-y: visible}[part="mark-all"], [part="more"] {display: none}}`);
+export const styles = createSheet(`:host {--helix-size-checkbox: var(--helix-size-checkbox-sm);--helix-size-checkbox-loose: calc(var(--helix-size-checkbox) * 1.2);--helix-size-checkbox-tight: calc(var(--helix-size-checkbox) * 0.8);--helix-size-control: var(--helix-size-control-sm);--helix-size-control-loose: calc(var(--helix-size-control) * 1.2);--helix-size-control-tight: calc(var(--helix-size-control) * 0.8);--helix-size-icon: var(--helix-size-icon-sm);--helix-size-icon-loose: calc(var(--helix-size-icon) * 1.2);--helix-size-icon-tight: calc(var(--helix-size-icon) * 0.8);--helix-size-tag: var(--helix-size-tag-sm);--helix-size-avatar: var(--helix-size-avatar-sm);display: grid;grid-template-rows: auto minmax(0, 1fr) auto;max-block-size: var(--notifications-max-block-size, none)}:host(:state(media)) {--notifications-media-column: calc(var(--helix-size-avatar) + var(--helix-space-sm))}[part="header"] {align-items: center;border-block-end: var(--helix-border-thin) solid var(--notifications-rule, var(--helix-color-border));display: flex;gap: var(--helix-space-sm);justify-content: space-between;padding-block: var(--helix-space-sm);padding-inline: var(--notifications-padding-inline, var(--helix-space-lg))}[part="header"][data-empty], [part="footer"][data-empty] {display: none}[part="list"] {overflow-y: auto}:host([separation="filled"]) [part="header"], :host([separation="outlined"]) [part="header"] {border-block-end: none}:host([separation="filled"]) [part="list"], :host([separation="outlined"]) [part="list"] {padding-block-start: var(--notifications-item-gap, var(--helix-space-xs))}[part="footer"] {border-block-start: var(--helix-border-thin) solid var(--notifications-rule, var(--helix-color-border));padding-block: var(--helix-space-sm);padding-inline: var(--notifications-padding-inline, var(--helix-space-lg))}::slotted(helix-notification:last-of-type) {--notifications-rule: transparent}[part="mark-all"] {background: none;border: 0;border-radius: var(--helix-radii-sm);color: var(--helix-color-foreground-muted);cursor: pointer;flex: none;font-family: var(--helix-font-sans);font-size: var(--helix-text-sm);padding-block: var(--helix-space-2xs);padding-inline: var(--helix-space-2xs);transition: color var(--helix-duration-fast) var(--helix-easing-standard);white-space: nowrap}[part="mark-all"]:hover {color: var(--helix-color-foreground)}[part="more"] {background: none;border: 0;border-block-start: var(--helix-border-thin) solid var(--helix-color-border);color: var(--helix-color-foreground-muted);cursor: pointer;font-family: var(--helix-font-sans);font-size: var(--helix-text-sm);inline-size: 100%;padding-block: var(--helix-space-sm);transition: color var(--helix-duration-fast) var(--helix-easing-standard)}[part="more"]:hover {color: var(--helix-color-foreground)}[part="more"][aria-disabled="true"], [part="more"][aria-disabled="true"]:hover {color: var(--helix-color-foreground-subtle);cursor: default}[part="more"]:focus-visible {outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);outline-offset: calc(var(--helix-size-focus-offset) * -1)}[part="mark-all"]:focus-visible {outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);outline-offset: var(--helix-size-focus-offset)}[part="empty"], [part="loading"] {--_collection-inset-block: var(--helix-space-lg);--_collection-inset-inline: var(--helix-space-md)}[part="error"] {color: var(--notifications-error-color, var(--helix-color-danger));font-family: var(--helix-font-sans);font-size: var(--helix-text-sm);margin: var(--helix-space-none);padding-block: var(--helix-space-lg);padding-inline: var(--helix-space-md);text-align: center}@media print {:host {max-block-size: none}[part="list"] {overflow-y: visible}[part="mark-all"], [part="more"] {display: none}}`);

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

@@ -46,6 +46,8 @@ import type { CSSResultGroup } from 'lit';
  * @cssproperty --number-input-stepper-color-hover - Icon color of a stepper button under the pointer.
  * @cssproperty --number-input-stepper-icon-size - Width and height of the stepper icons, drawn or slotted.
  * @cssproperty --number-input-stepper-size - Width of each stepper button.
+ *
+ * @replaces input[type=number]
  */
 export declare class HelixNumberInput extends HelixHeadlessNumberInput {
     static styles: CSSResultGroup;

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

@@ -37,6 +37,8 @@ import type { CSSResultGroup } from 'lit';
  * @cssproperty --progress-value-color - The color of the value shown under `show-value`.
  * @cssproperty --progress-value-gap - The space between the bar and the value under `show-value`.
  * @cssproperty --progress-value-size - The type size of the value shown under `show-value`.
+ *
+ * @replaces progress
  */
 export declare class HelixProgress extends HelixHeadlessProgress {
     /**

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

@@ -17,6 +17,8 @@ import type { CSSResultGroup } from 'lit';
  * @cssproperty --quote-font-family - The typeface of the quoted text, the paragraph's own by default.
  * @cssproperty --quote-font-style - The slant of the quoted text, `italic` by default. Set `normal` for a face whose italic is too loud, or `oblique` for one with no italic of its own.
  * @cssproperty --quote-font-weight - The weight of the quoted text, the paragraph's own by default.
+ *
+ * @replaces q
  */
 export declare class HelixQuote extends HelixHeadlessQuote {
     static styles: CSSResultGroup;

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

@@ -26,6 +26,8 @@ import type { CSSResultGroup } from 'lit';
  * @cssproperty --radio-indicator-size - The width and height of an icon slotted into `indicator`. Three quarters of the circle by default.
  * @cssproperty --radio-mark-color - The color of the dot, or of an icon slotted into `indicator`.
  * @cssproperty --radio-size - The diameter of the circle.
+ *
+ * @replaces input[type=radio]
  */
 export declare class HelixRadio extends HelixHeadlessRadio {
     static styles: CSSResultGroup;

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

@@ -25,6 +25,8 @@ import '../../listbox/index.js';
  * @cssproperty --select-shadow - Shadow under the panel. Defaults to
  *   `--helix-shadow-floating`, because the panel can sit over any content.
  * @cssproperty --select-surface-max-block-size - Maximum height of the panel.
+ *
+ * @replaces select
  */
 export declare class HelixSelect extends HelixHeadlessSelect {
     static tier: string;

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

@@ -32,6 +32,8 @@ import type { CSSResultGroup } from 'lit';
  * @cssproperty --slider-track-color - The color of the unfilled part of the track.
  * @cssproperty --slider-track-image - An image for the whole track, such as a gradient for a slider whose value is a color.
  * @cssproperty --slider-track-size - The thickness of the track. It matches the progress bar's size by default.
+ *
+ * @replaces input[type=range]
  */
 export declare class HelixSlider extends HelixHeadlessSlider {
     static styles: CSSResultGroup;

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

@@ -1,2 +1,2 @@
 import { createSheet } from '@fusion.dev/helix-core';
-export const styles = createSheet(`:host {--_spatial-heatmap-cell: var(--spatial-heatmap-cell-size, 1.25rem);--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(in oklab, var(--helix-color-primary-active) 40%, var(--helix-color-surface-sunken));--heatmap-tone-3: color-mix(in oklab, var(--helix-color-primary-active) 60%, var(--helix-color-surface-sunken));--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"] {inline-size: calc(var(--spatial-heatmap-span, 1) * 0.866 * var(--_spatial-heatmap-cell));max-inline-size: 100%;position: relative}::slotted([slot="renderer"]) {inset: 0;position: absolute}[part="drawing"] {block-size: auto;display: block;inline-size: 100%;overflow: visible}[part~="cell"], [part~="base"] {--_spatial-heatmap-left: oklch(from var(--_spatial-heatmap-top) calc(l - var(--spatial-heatmap-left-shade, 0.07)) c h);--_spatial-heatmap-right: oklch(from var(--_spatial-heatmap-top) calc(l - var(--spatial-heatmap-right-shade, 0.14)) c h)}[part~="cell"] {--_spatial-heatmap-top: var(--heatmap-tone, color-mix(in oklab, var(--helix-color-surface-sunken), var(--helix-color-surface) 60%))}[part~="base"] {--_spatial-heatmap-top: color-mix(in oklab, var(--helix-color-surface-sunken), var(--helix-color-border) 45%)}[part~="top-face"], [part~="base-top"] {--_spatial-heatmap-face: var(--_spatial-heatmap-top)}[part~="left-face"], [part~="base-left"] {--_spatial-heatmap-face: var(--_spatial-heatmap-left)}[part~="right-face"], [part~="base-right"] {--_spatial-heatmap-face: var(--_spatial-heatmap-right)}[part~="cell"] > *, [part~="base"] > * {--_spatial-heatmap-ink: oklch(from var(--_spatial-heatmap-face) clamp(0, (0.6 - l) * 1000, 1) 0 0);--_spatial-heatmap-edge: oklch(from var(--_spatial-heatmap-face) calc(l + clamp(-0.08, (0.6 - l) * 1000, 0.1)) c h);fill: var(--_spatial-heatmap-face);stroke: var(--_spatial-heatmap-edge);stroke-linejoin: round;stroke-width: var(--helix-border-thin);vector-effect: non-scaling-stroke}[part~="cell-selected"] > * {stroke: var(--spatial-heatmap-selected-color, var(--_spatial-heatmap-ink));stroke-dasharray: 3px 2px;stroke-width: var(--helix-border-thick)}@media (hover: hover) {[part~="cell"]:hover > * {stroke: var(--_spatial-heatmap-ink);stroke-dasharray: none;stroke-width: var(--helix-border-thick)}}[part~="cell-active"] > * {stroke: var(--_spatial-heatmap-ink);stroke-dasharray: none;stroke-width: var(--helix-border-thick)}[part~="strip"]:focus-visible {outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);outline-offset: var(--helix-size-focus-offset)}[part="live"], [part="overview"], [part="selection"], [part="table"] {block-size: 1px;clip-path: inset(50%);inline-size: 1px;margin: var(--helix-space-none);overflow: hidden;position: absolute;white-space: nowrap}[part="footer"] {color: var(--helix-color-foreground-subtle);display: grid;font-family: var(--helix-font-sans);font-size: var(--helix-text-xs);min-block-size: 1lh;padding-block-start: var(--helix-space-xs);position: relative}[part="start"] {inset-block-start: 0;inset-inline-start: calc(var(--spatial-heatmap-start-x, 0) * 100%);margin-block-start: calc((var(--spatial-heatmap-start-y, 0) - var(--spatial-heatmap-depth, 0)) * 100% + 1lh);position: absolute;white-space: nowrap}[part="end"] {inset-block-start: 0;margin-block-start: calc((var(--spatial-heatmap-end-y, 0) - var(--spatial-heatmap-depth, 0)) * 100%);inset-inline-start: calc(var(--spatial-heatmap-end-x, 1) * 100%);position: absolute;translate: -50% 0;white-space: nowrap}[part="summary"] {text-align: center}[part="footer"][data-empty] {display: none}[part="empty"], [part="loading"] {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"] > *, [part~="base"] > * {stroke: var(--helix-color-border);stroke-width: var(--helix-border-thin)}}@media (forced-colors: active) {[part~="cell"] > * {forced-color-adjust: none;stroke: CanvasText}[part~="base"] > * {fill: Canvas;stroke: CanvasText}[part~="cell-active"] > *, [part~="cell-selected"] > * {stroke: Highlight;stroke-width: var(--helix-border-thick)}}`);
+export const styles = createSheet(`:host {--_spatial-heatmap-cell: var(--spatial-heatmap-cell-size, 1.25rem);--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(in oklab, var(--helix-color-primary-active) 40%, var(--helix-color-surface-sunken));--heatmap-tone-3: color-mix(in oklab, var(--helix-color-primary-active) 60%, var(--helix-color-surface-sunken));--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"] {inline-size: calc(var(--spatial-heatmap-span, 1) * 0.866 * var(--_spatial-heatmap-cell));max-inline-size: 100%;position: relative}::slotted([slot="renderer"]) {inset: 0;position: absolute}[part="drawing"] {block-size: auto;display: block;inline-size: 100%;overflow: visible;touch-action: pan-y;user-select: none}[part~="cell"], [part~="base"] {--_spatial-heatmap-left: oklch(from var(--_spatial-heatmap-top) calc(l - var(--spatial-heatmap-left-shade, 0.07)) c h);--_spatial-heatmap-right: oklch(from var(--_spatial-heatmap-top) calc(l - var(--spatial-heatmap-right-shade, 0.14)) c h)}[part~="cell"] {--_spatial-heatmap-top: var(--heatmap-tone, color-mix(in oklab, var(--helix-color-surface-sunken), var(--helix-color-surface) 60%))}[part~="base"] {--_spatial-heatmap-top: color-mix(in oklab, var(--helix-color-surface-sunken), var(--helix-color-border) 45%)}[part~="top-face"], [part~="base-top"] {--_spatial-heatmap-face: var(--_spatial-heatmap-top)}[part~="left-face"], [part~="base-left"] {--_spatial-heatmap-face: var(--_spatial-heatmap-left)}[part~="right-face"], [part~="base-right"] {--_spatial-heatmap-face: var(--_spatial-heatmap-right)}[part~="cell"] > *, [part~="base"] > * {--_spatial-heatmap-ink: oklch(from var(--_spatial-heatmap-face) clamp(0, (0.6 - l) * 1000, 1) 0 0);--_spatial-heatmap-edge: oklch(from var(--_spatial-heatmap-face) calc(l + clamp(-0.08, (0.6 - l) * 1000, 0.1)) c h);fill: var(--_spatial-heatmap-face);stroke: var(--_spatial-heatmap-edge);stroke-linejoin: round;stroke-width: var(--helix-border-thin);vector-effect: non-scaling-stroke}[part~="cell-selected"] > * {stroke: var(--spatial-heatmap-selected-color, var(--_spatial-heatmap-ink));stroke-dasharray: 3px 2px;stroke-width: var(--helix-border-thick)}@media (hover: hover) {[part~="cell"]:hover > * {stroke: var(--_spatial-heatmap-ink);stroke-dasharray: none;stroke-width: var(--helix-border-thick)}}[part~="cell-active"] > * {stroke: var(--_spatial-heatmap-ink);stroke-dasharray: none;stroke-width: var(--helix-border-thick)}[part~="strip"]:focus-visible {outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);outline-offset: var(--helix-size-focus-offset)}[part="live"], [part="overview"], [part="selection"], [part="table"] {block-size: 1px;clip-path: inset(50%);inline-size: 1px;margin: var(--helix-space-none);overflow: hidden;position: absolute;white-space: nowrap}[part="footer"] {color: var(--helix-color-foreground-subtle);display: grid;font-family: var(--helix-font-sans);font-size: var(--helix-text-xs);min-block-size: 1lh;padding-block-start: var(--helix-space-xs);position: relative}[part="start"], [part="end"] {inset-block-start: 0;position: absolute;white-space: nowrap}[part="start"] {inset-inline-start: 0}[part="end"] {inset-inline-end: 0}[part="start"][data-placed], [part="end"][data-placed] {inset-block-start: var(--spatial-heatmap-label-y);inset-inline-end: auto;inset-inline-start: var(--spatial-heatmap-label-x)}[part="summary"] {text-align: center}[part="footer"][data-empty] {display: none}[part="empty"], [part="loading"] {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"] > *, [part~="base"] > * {stroke: var(--helix-color-border);stroke-width: var(--helix-border-thin)}}@media (forced-colors: active) {[part~="cell"] > * {forced-color-adjust: none;stroke: CanvasText}[part~="base"] > * {fill: Canvas;stroke: CanvasText}[part~="cell-active"] > *, [part~="cell-selected"] > * {stroke: Highlight;stroke-width: var(--helix-border-thick)}}`);

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

@@ -7,7 +7,8 @@ import '../../tooltip/index.js';
  * @description
  * Each reading is a prism. The top face takes the cell's tone, and the two
  * sides are the same tone, shaded darker, so the whole relief follows your
- * theme's colors.
+ * theme's colors. The chart draws the relief in SVG, and
+ * `@fusion.dev/helix-plot` can draw it with three.js.
  *
  * `tones="1 2 3 4 5"` uses the same five-step ramp as `Heatmap`, so the tone
  * and the height both show the value. Set `--spatial-heatmap-cell-size` to

package/dist/spatial-scatter-chart/root/spatial-scatter-chart-root.css.js

@@ -1,2 +1,2 @@
 import { createSheet } from '@fusion.dev/helix-core';
-export const styles = createSheet(`:host {display: block}[part="plot"] {background-color: var(--helix-color-surface-sunken);block-size: var(--spatial-scatter-chart-block-size, 22em);border-radius: var(--helix-radii-md);overflow: hidden;position: relative}::slotted(*) {inset: 0;position: absolute}[part="plot"]:focus-visible {outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);outline-offset: var(--helix-size-focus-offset)}[part="fallback"] {inset: var(--helix-space-md);position: absolute}[part="fallback"][hidden] {display: none}[part="drawing"] {block-size: 100%;display: block;font-family: var(--helix-font-sans);inline-size: 100%;overflow: visible}[part="grid"] {fill: none;opacity: 0.35;stroke: var(--helix-color-foreground-muted);stroke-width: var(--helix-border-thin);vector-effect: non-scaling-stroke}[part="tick"] {fill: var(--helix-color-foreground-muted);font-weight: var(--helix-weight-medium)}[part="axis-name"] {fill: var(--helix-color-foreground);font-weight: var(--helix-weight-semibold)}[part~="point"] {fill: var(--chart-series, var(--helix-color-primary));stroke: var(--helix-color-surface-sunken);stroke-width: var(--helix-border-thin);vector-effect: non-scaling-stroke}foreignObject > [part="mark"] {translate: -50% -50%}[part="ring"] {fill: none;pointer-events: none;stroke: var(--helix-color-foreground);stroke-width: var(--helix-border-thick);vector-effect: non-scaling-stroke}[part="live"], [part="summary"], [part="table"] {block-size: 1px;clip-path: inset(50%);inline-size: 1px;margin: var(--helix-space-none);overflow: hidden;position: absolute;white-space: nowrap}[part="empty"], [part="loading"] {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~="point"] {stroke: var(--helix-color-border)}}@media (forced-colors: active) {[part~="point"] {forced-color-adjust: none;stroke: CanvasText}[part="grid"] {stroke: CanvasText}[part="tick"], [part="axis-name"] {fill: CanvasText}[part="ring"] {stroke: Highlight}}`);
+export const styles = createSheet(`:host {display: block}[part="plot"] {background-color: var(--helix-color-surface-sunken);block-size: var(--spatial-scatter-chart-block-size, 22em);border-radius: var(--helix-radii-md);overflow: hidden;position: relative}::slotted(*) {inset: 0;position: absolute}[part="plot"]:focus-visible {outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);outline-offset: var(--helix-size-focus-offset)}[part="fallback"] {inset: var(--helix-space-md);position: absolute}[part="fallback"][hidden] {display: none}[part="drawing"] {block-size: 100%;display: block;font-family: var(--helix-font-sans);inline-size: 100%;overflow: visible;touch-action: pan-y;user-select: none}[part="grid"] {fill: none;opacity: 0.35;stroke: var(--helix-color-foreground-muted);stroke-width: var(--helix-border-thin);vector-effect: non-scaling-stroke}[part="tick"] {fill: var(--helix-color-foreground-muted);font-weight: var(--helix-weight-medium)}[part="axis-name"] {fill: var(--helix-color-foreground);font-weight: var(--helix-weight-semibold)}[part~="point"] {fill: var(--chart-series, var(--helix-color-primary));stroke: var(--helix-color-surface-sunken);stroke-width: var(--helix-border-thin);vector-effect: non-scaling-stroke}foreignObject > [part="mark"] {translate: -50% -50%}[part="ring"] {fill: none;pointer-events: none;stroke: var(--helix-color-foreground);stroke-width: var(--helix-border-thick);vector-effect: non-scaling-stroke}[part="live"], [part="summary"], [part="table"] {block-size: 1px;clip-path: inset(50%);inline-size: 1px;margin: var(--helix-space-none);overflow: hidden;position: absolute;white-space: nowrap}[part="empty"], [part="loading"] {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~="point"] {stroke: var(--helix-color-border)}}@media (forced-colors: active) {[part~="point"] {forced-color-adjust: none;stroke: CanvasText}[part="grid"] {stroke: CanvasText}[part="tick"], [part="axis-name"] {fill: CanvasText}[part="ring"] {stroke: Highlight}}`);

package/dist/spatial-scatter-chart/root/spatial-scatter-chart-root.d.ts

@@ -5,9 +5,9 @@ import '../../tooltip/index.js';
  * @summary A chart that plots each row as a point in three dimensions, for data with three measures.
  *
  * @description
- * The points are drawn in 3D by a renderer the page connects, and as a flat
- * scatter of the first two measures until it has drawn. Each group takes a
- * series color from the theme, as every chart's series does.
+ * The chart draws the points in 3D in SVG, and `@fusion.dev/helix-plot` can
+ * draw them with three.js. Each group takes a series color from the theme, as
+ * every chart's series does, in both drawings.
  *
  * @since 0.190.0
  * @status experimental

package/dist/spatial-surface-chart/root/spatial-surface-chart-root.css.js

@@ -1,2 +1,2 @@
 import { createSheet } from '@fusion.dev/helix-core';
-export const styles = createSheet(`:host {--_spatial-surface-chart-high: var(--spatial-surface-chart-high, var(--helix-color-primary-active));--_spatial-surface-chart-low: var(--spatial-surface-chart-low, color-mix(in oklab, var(--helix-color-primary-active) 15%, var(--helix-color-surface-sunken)));display: block}[part="plot"] {background-color: var(--helix-color-surface-sunken);block-size: var(--spatial-surface-chart-block-size, 22em);border-radius: var(--helix-radii-md);overflow: hidden;position: relative}::slotted(*) {inset: 0;position: absolute}[part="plot"]:focus-visible {outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);outline-offset: var(--helix-size-focus-offset)}[part="fallback"] {inset: var(--helix-space-md);position: absolute}[part="fallback"][hidden] {display: none}[part="drawing"] {block-size: 100%;display: block;font-family: var(--helix-font-sans);inline-size: 100%;overflow: visible}[part="grid"] {fill: none;opacity: 0.35;stroke: var(--helix-color-foreground-muted);stroke-width: var(--helix-border-thin);vector-effect: non-scaling-stroke}[part="tick"] {fill: var(--helix-color-foreground-muted);font-weight: var(--helix-weight-medium)}[part="axis-name"] {fill: var(--helix-color-foreground);font-weight: var(--helix-weight-semibold)}[part="face"] {--_spatial-surface-chart-color: color-mix(in oklab, var(--_spatial-surface-chart-high) calc(var(--spatial-surface-chart-level, 0) * 100%), var(--_spatial-surface-chart-low));--_spatial-surface-chart-lit: oklch(from var(--_spatial-surface-chart-color) calc(l - var(--spatial-surface-chart-shade, 0)) c h);--_spatial-surface-chart-rule: oklch(from var(--_spatial-surface-chart-lit) calc(l + clamp(-0.1, (0.6 - l) * 1000, 0.14)) c h);fill: var(--_spatial-surface-chart-lit);stroke: var(--_spatial-surface-chart-rule);stroke-linejoin: round;stroke-width: var(--helix-border-thin);vector-effect: non-scaling-stroke}foreignObject > [part="mark"] {translate: -50% -50%}[part="ring"] {fill: none;pointer-events: none;stroke: var(--helix-color-foreground);stroke-width: var(--helix-border-thick);vector-effect: non-scaling-stroke}[part="live"], [part="summary"], [part="table"] {block-size: 1px;clip-path: inset(50%);inline-size: 1px;margin: var(--helix-space-none);overflow: hidden;position: absolute;white-space: nowrap}[part="empty"], [part="loading"] {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="face"] {stroke: var(--helix-color-border)}}@media (forced-colors: active) {[part="face"] {forced-color-adjust: none;stroke: CanvasText}[part="grid"] {stroke: CanvasText}[part="tick"], [part="axis-name"] {fill: CanvasText}[part="ring"] {stroke: Highlight}}`);
+export const styles = createSheet(`:host {--_spatial-surface-chart-high: var(--spatial-surface-chart-high, var(--helix-color-primary-active));--_spatial-surface-chart-low: var(--spatial-surface-chart-low, color-mix(in oklab, var(--helix-color-primary-active) 15%, var(--helix-color-surface-sunken)));display: block}[part="plot"] {background-color: var(--helix-color-surface-sunken);block-size: var(--spatial-surface-chart-block-size, 22em);border-radius: var(--helix-radii-md);overflow: hidden;position: relative}::slotted(*) {inset: 0;position: absolute}[part="plot"]:focus-visible {outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);outline-offset: var(--helix-size-focus-offset)}[part="fallback"] {inset: var(--helix-space-md);position: absolute}[part="fallback"][hidden] {display: none}[part="drawing"] {block-size: 100%;display: block;font-family: var(--helix-font-sans);inline-size: 100%;overflow: visible;touch-action: pan-y;user-select: none}[part="grid"] {fill: none;opacity: 0.35;stroke: var(--helix-color-foreground-muted);stroke-width: var(--helix-border-thin);vector-effect: non-scaling-stroke}[part="tick"] {fill: var(--helix-color-foreground-muted);font-weight: var(--helix-weight-medium)}[part="axis-name"] {fill: var(--helix-color-foreground);font-weight: var(--helix-weight-semibold)}[part="face"] {--_spatial-surface-chart-color: color-mix(in oklab, var(--_spatial-surface-chart-high) calc(var(--spatial-surface-chart-level, 0) * 100%), var(--_spatial-surface-chart-low));--_spatial-surface-chart-lit: oklch(from var(--_spatial-surface-chart-color) calc(l - var(--spatial-surface-chart-shade, 0)) c h);--_spatial-surface-chart-rule: oklch(from var(--_spatial-surface-chart-lit) calc(l + clamp(-0.1, (0.6 - l) * 1000, 0.14)) c h);fill: var(--_spatial-surface-chart-lit);stroke: var(--_spatial-surface-chart-rule);stroke-linejoin: round;stroke-width: var(--helix-border-thin);vector-effect: non-scaling-stroke}foreignObject > [part="mark"] {translate: -50% -50%}[part="ring"] {fill: none;pointer-events: none;stroke: var(--helix-color-foreground);stroke-width: var(--helix-border-thick);vector-effect: non-scaling-stroke}[part="live"], [part="summary"], [part="table"] {block-size: 1px;clip-path: inset(50%);inline-size: 1px;margin: var(--helix-space-none);overflow: hidden;position: absolute;white-space: nowrap}[part="empty"], [part="loading"] {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="face"] {stroke: var(--helix-color-border)}}@media (forced-colors: active) {[part="face"] {forced-color-adjust: none;stroke: CanvasText}[part="grid"] {stroke: CanvasText}[part="tick"], [part="axis-name"] {fill: CanvasText}[part="ring"] {stroke: Highlight}}`);

package/dist/spatial-surface-chart/root/spatial-surface-chart-root.d.ts

@@ -5,8 +5,8 @@ import '../../tooltip/index.js';
  * @summary A chart that draws a height over a grid as a surface in three dimensions, for a measure that varies over two others.
  *
  * @description
- * The surface is drawn in 3D by a renderer the page connects, and as a flat
- * grid seen from above until it has drawn. Every height is shaded along one
+ * The chart draws the surface in 3D in SVG, and `@fusion.dev/helix-plot` can
+ * draw it with three.js. Every height is shaded along one
  * ramp from the theme's primary color, quiet where it is low and strong where
  * it is high, so the two drawings agree.
  *

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

@@ -39,6 +39,8 @@ import '../../checkbox/index.js';
  * @cssproperty --table-title-color - The color of the words in the `heading` slot.
  * @cssproperty --table-title-gap - The space between the `heading` slot and the grid.
  * @cssproperty --table-title-text - The font size of the words in the `heading` slot.
+ *
+ * @replaces table
  */
 export declare class HelixTable extends HelixHeadlessTable {
     static tier: string;

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

@@ -48,6 +48,8 @@ import type { CSSResultGroup, PropertyValues } from 'lit';
  * @cssproperty --text-font-weight - The weight. Overrides the ramp's.
  * @cssproperty --text-letter-spacing - The tracking. Overrides the ramp's.
  * @cssproperty --text-line-height - The leading. Overrides the ramp's.
+ *
+ * @replaces h1, h2, h3, h4, h5, h6, p
  */
 export declare class HelixText extends HelixElement {
     /**

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

@@ -19,6 +19,8 @@ import type { CSSResultGroup } from 'lit';
  * @cssproperty --textarea-padding - Space between the edge of the field and the text.
  * @cssproperty --textarea-radius - Corner radius of the field.
  * @cssproperty --textarea-resize - Which way a reader can drag the field: `vertical` by default, `none`, `both` or `horizontal`. A field under `auto-grow` has nothing to drag.
+ *
+ * @replaces textarea
  */
 export declare class HelixTextarea extends HelixHeadlessTextarea {
     static styles: CSSResultGroup;

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

@@ -35,6 +35,8 @@ import '../../time-picker/index.js';
  *   with nothing in it, in `segmented`. It matches the text field's placeholder.
  * @cssproperty --time-input-shadow - Shadow under the panel. Defaults to
  *   `--helix-shadow-floating`, because the panel can sit over any content.
+ *
+ * @replaces input[type=time]
  */
 export declare class HelixTimeInput extends HelixHeadlessTimeInput {
     static tier: string;

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

@@ -32,6 +32,8 @@ import '../../menu/index.js';
  * does not shift when the number changes.
  * @cssproperty --video-start-size - Width of the large play button.
  * @cssproperty --video-well-color - Color behind the picture and in the letterbox bars.
+ *
+ * @replaces video
  */
 export declare class HelixVideo extends HelixHeadlessVideo {
     /**