@fusion.dev/helix 0.146.0 → 0.148.0

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

@@ -1,151 +1,12 @@
 import { createSheet } from '@fusion.dev/helix-core';
-export const styles = createSheet(`:host {
-position: relative;
-}
-
-[part="field"] {
-align-items: center;
-background-color: var(--combobox-background-color, var(--helix-color-well));
-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;
-display: flex;
-gap: var(--helix-space-xs);
-padding-inline: var(--helix-space-xs);
-transition:
+export const styles = createSheet(`:host {position: relative;}[part="field"] {align-items: center;background-color: var(--combobox-background-color, var(--helix-color-well));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;display: flex;gap: var(--helix-space-xs);padding-inline: var(--helix-space-xs);transition:
 background-color var(--helix-duration-fast) var(--helix-easing-standard),
-border-color var(--helix-duration-fast) var(--helix-easing-standard);
-}
-
-[part="field"]:has([part="tags"]) {
-block-size: auto;
-flex-wrap: wrap;
-min-block-size: var(--helix-size-control);
-
-padding-block: var(--helix-space-2xs);
-
-padding-inline-end: calc(var(--helix-space-xs) + var(--helix-size-icon-tight));
-position: relative;
-}
-
-[part="indicator"],
-::slotted([slot="indicator"]) {
-transition: scale var(--helix-duration-fast) var(--helix-easing-standard);
-}
-
-[part="field"]:has([part="tags"]) [part="indicator"],
-[part="field"]:has([part="tags"]) ::slotted([slot="indicator"]) {
-inset-block-start: 50%;
-inset-inline-end: var(--helix-space-xs);
-position: absolute;
-translate: 0 -50%;
-}
-
-[part="tag"] {
-flex: 0 0 auto;
-max-inline-size: 100%;
-}
-
-[part="field"]:has([part="tags"]) [part="control"] {
-flex: 1 1 var(--combobox-control-size, 4ch);
-}
-
-[part="control"]::placeholder {
-color: var(--helix-color-foreground-subtle);
-font-weight: var(--helix-weight-medium);
-}
-
-:host(:disabled) [part="field"] {
-color: var(--helix-color-foreground-subtle);
-cursor: not-allowed;
-opacity: 0.5;
-}
-
-[part="indicator"] {
-block-size: var(--helix-size-icon-tight);
-color: var(--helix-color-foreground-muted);
-flex: 0 0 auto;
-inline-size: var(--helix-size-icon-tight);
-}
-
-:host(:state(open)) [part="indicator"],
-:host(:state(open)) ::slotted([slot="indicator"]) {
-scale: 1 -1;
-}
-
-slot[name="start"]::slotted(*),
-slot[name="end"]::slotted(*) {
---icon-size: var(--helix-size-icon);
-
-color: var(--helix-color-foreground-muted);
-flex: 0 0 auto;
-}
-
-[part="surface"] {
---_floating-border-color: var(--combobox-border-color, var(--helix-color-border));
---_floating-border-width: var(--combobox-border-width, var(--helix-border-floating));
---_floating-shadow: var(--combobox-shadow, var(--helix-shadow-floating));
-
-box-sizing: border-box;
-inline-size: var(--combobox-panel-size, max-content);
-max-block-size: var(--floating-available-block-size, none);
-max-inline-size: calc(100vw - var(--helix-space-md) * 2);
-min-inline-size: var(--floating-anchor-inline-size, 100%);
-overflow: hidden;
-padding: var(--helix-space-none);
-position: absolute;
-}
-
-[part~="create"] {
-all: unset;
-
-border-block-start: var(--helix-border-thin) solid var(--helix-color-border);
-box-sizing: border-box;
-color: var(--helix-color-foreground);
-cursor: pointer;
-display: block;
-font-family: var(--helix-font-sans);
-font-size: var(--helix-text-sm);
-font-weight: var(--helix-weight-medium);
-inline-size: 100%;
-padding: var(--helix-space-xs) var(--helix-space-sm);
-text-align: start;
-transition: background-color var(--helix-duration-fast) var(--helix-easing-standard);
-}
-
-[part~="create"]:hover,
-[part~="create-active"] {
-background-color: light-dark(
+border-color var(--helix-duration-fast) var(--helix-easing-standard);}[part="field"]:has([part="tags"]) {block-size: auto;flex-wrap: wrap;min-block-size: var(--helix-size-control);padding-block: var(--helix-space-2xs);padding-inline-end: calc(var(--helix-space-xs) + var(--helix-size-icon-tight));position: relative;}[part="indicator"],
+::slotted([slot="indicator"]) {transition: scale var(--helix-duration-fast) var(--helix-easing-standard);}[part="field"]:has([part="tags"]) [part="indicator"],
+[part="field"]:has([part="tags"]) ::slotted([slot="indicator"]) {inset-block-start: 50%;inset-inline-end: var(--helix-space-xs);position: absolute;translate: 0 -50%;}[part="tag"] {flex: 0 0 auto;max-inline-size: 100%;}[part="field"]:has([part="tags"]) [part="control"] {flex: 1 1 var(--combobox-control-size, 4ch);}[part="control"]::placeholder {color: var(--helix-color-foreground-subtle);font-weight: var(--helix-weight-medium);}:host(:disabled) [part="field"] {color: var(--helix-color-foreground-subtle);cursor: not-allowed;opacity: 0.5;}[part="indicator"] {block-size: var(--helix-size-icon-tight);color: var(--helix-color-foreground-muted);flex: 0 0 auto;inline-size: var(--helix-size-icon-tight);}:host(:state(open)) [part="indicator"],
+:host(:state(open)) ::slotted([slot="indicator"]) {scale: 1 -1;}slot[name="start"]::slotted(*),
+slot[name="end"]::slotted(*) {--icon-size: var(--helix-size-icon);color: var(--helix-color-foreground-muted);flex: 0 0 auto;}[part="surface"] {--_floating-border-color: var(--combobox-border-color, var(--helix-color-border));--_floating-border-width: var(--combobox-border-width, var(--helix-border-floating));--_floating-shadow: var(--combobox-shadow, var(--helix-shadow-floating));box-sizing: border-box;inline-size: var(--combobox-panel-size, max-content);max-block-size: var(--floating-available-block-size, none);max-inline-size: calc(100vw - var(--helix-space-md) * 2);min-inline-size: var(--floating-anchor-inline-size, 100%);overflow: hidden;padding: var(--helix-space-none);position: absolute;}[part~="create"] {all: unset;border-block-start: var(--helix-border-thin) solid var(--helix-color-border);box-sizing: border-box;color: var(--helix-color-foreground);cursor: pointer;display: block;font-family: var(--helix-font-sans);font-size: var(--helix-text-sm);font-weight: var(--helix-weight-medium);inline-size: 100%;padding: var(--helix-space-xs) var(--helix-space-sm);text-align: start;transition: background-color var(--helix-duration-fast) var(--helix-easing-standard);}[part~="create"]:hover,
+[part~="create-active"] {background-color: light-dark(
 color-mix(in oklab, var(--helix-color-foreground) 8%, transparent),
 color-mix(in oklab, var(--helix-color-foreground) 12%, transparent)
-);
-}
-
-[part~="create"]:focus-visible {
-outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);
-outline-offset: calc(var(--helix-size-focus-offset) * -1);
-}
-
-[part="listbox"] {
---listbox-background-color: transparent;
-
-border: none;
-display: block;
-}
-
-@media (prefers-reduced-motion: reduce) {
-[part="field"] {
-transition: none;
-}
-
-[part~="create"] {
-transition: none;
-}
-}
-
-@media print {
-:host {
-print-color-adjust: exact;
-}
-}`);
+);}[part~="create"]:focus-visible {outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);outline-offset: calc(var(--helix-size-focus-offset) * -1);}[part="listbox"] {--listbox-background-color: transparent;border: none;display: block;}@media (prefers-reduced-motion: reduce) {[part="field"] {transition: none;}[part~="create"] {transition: none;}}@media print {:host {print-color-adjust: exact;}}`);

package/dist/combobox/root/combobox-root.js

@@ -13,11 +13,13 @@ import { styles as fieldFrameStyles } from '../../shared/field/field-frame.css.j
 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';
+import { styles as liveStyles } from '../../shared/live/live.css.js';
 import { styles as tagRowStyles } from '../../shared/tags/tags.css.js';
 import { styles } from './combobox-root.css.js';
 let HelixCombobox = class HelixCombobox extends HelixHeadlessCombobox {
     static { this.tier = 'helix-'; }
     static { this.styles = [
+        liveStyles,
         fieldStyles,
         fieldFrameStyles,
         fieldStackedStyles,

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

@@ -1,75 +1,4 @@
 import { createSheet } from '@fusion.dev/helix-core';
-export const styles = createSheet(`helix-dialog::part(dialog) {
-align-self: start;
-inline-size: min(var(--command-size, 40rem), calc(100vw - var(--helix-space-xl) * 2));
-margin-block-start: 20vh;
-padding: var(--helix-space-none);
-}
-
-:host {
---option-padding: var(--helix-space-sm);
-}
-
-[part="listbox"] {
---listbox-background-color: transparent;
-
-border: none;
-display: block;
-}
-
-helix-listbox::part(items) {
-
-background-color: transparent;
-border: none;
-max-block-size: var(--command-list-size, 22rem);
-
-padding-block: var(--helix-space-xs);
-}
-
-helix-listbox::part(search) {
-border-block-end: var(--helix-border-thin) solid var(--helix-color-border);
-padding: var(--option-padding);
-}
-
-helix-listbox::part(search-field) {
-font-size: var(--helix-text-md);
-}
-
-:host {
---_command-row: var(--helix-space-sm);
-}
-
-:host([data-density="sm"]),
-:host(:where([data-density="sm"] *)) {
---_command-row: var(--helix-space-2xs);
-}
-
-:host([data-density="lg"]),
-:host(:where([data-density="lg"] *)) {
---_command-row: var(--helix-space-md);
-}
-
-:host {
---option-block-padding: var(--_command-row);
-}
-
-[part="footer"] {
-align-items: center;
-border-block-start: var(--helix-border-thin) solid var(--helix-color-border);
-color: var(--helix-color-foreground-muted);
-display: flex;
-font-size: var(--helix-text-xs);
-gap: var(--helix-space-sm);
-
-padding: var(--helix-space-xs) var(--option-padding);
-}
-
-[part="footer"][hidden] {
-display: none;
-}
-
-@media print {
-:host {
-display: none;
-}
-}`);
+export const styles = createSheet(`helix-dialog::part(dialog) {align-self: start;inline-size: min(var(--command-size, 40rem), calc(100vw - var(--helix-space-xl) * 2));margin-block-start: 20vh;padding: var(--helix-space-none);}:host {--option-padding: var(--helix-space-sm);}[part="listbox"] {--listbox-background-color: transparent;border: none;display: block;}helix-listbox::part(items) {background-color: transparent;border: none;max-block-size: var(--command-list-size, 22rem);padding-block: var(--helix-space-xs);}helix-listbox::part(search) {border-block-end: var(--helix-border-thin) solid var(--helix-color-border);padding: var(--option-padding);}helix-listbox::part(search-field) {font-size: var(--helix-text-md);}:host {--_command-row: var(--helix-space-sm);--option-block-padding: var(--_command-row);}:host([data-density="sm"]),
+:host(:where([data-density="sm"] *)) {--_command-row: var(--helix-space-2xs);}:host([data-density="lg"]),
+:host(:where([data-density="lg"] *)) {--_command-row: var(--helix-space-md);}[part="footer"] {align-items: center;border-block-start: var(--helix-border-thin) solid var(--helix-color-border);color: var(--helix-color-foreground-muted);display: flex;font-size: var(--helix-text-xs);gap: var(--helix-space-sm);padding: var(--helix-space-xs) var(--option-padding);}[part="footer"][hidden] {display: none;}@media print {:host {display: none;}}`);

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

@@ -1,46 +1,6 @@
 import { createSheet } from '@fusion.dev/helix-core';
-export const styles = createSheet(`:host {
---_icon-button-ink: var(--copy-button-color, var(--helix-color-foreground-muted));
---_icon-button-ink-hover: var(
+export const styles = createSheet(`:host {--_icon-button-ink: var(--copy-button-color, var(--helix-color-foreground-muted));--_icon-button-ink-hover: var(
 --copy-button-color-hover,
 var(--copy-button-color, var(--helix-color-foreground))
-);
---_icon-button-size: var(--copy-button-size, var(--icon-button-size, var(--helix-size-control)));
-}
-
-[part="button"] {
-display: inline-grid;
-place-items: center;
-}
-
-[part="button"] > slot {
-grid-area: 1 / 1;
-}
-
-slot[hidden] {
-display: none;
-}
-
-[part="button"][data-copied] {
-color: var(--copy-button-success-color, var(--helix-color-success));
-}
-
-:host(:not(:disabled)) [part="button"][data-copied]:hover {
-color: var(--copy-button-success-color, var(--helix-color-success));
-}
-
-[part="button"][data-failed],
-:host(:not(:disabled)) [part="button"][data-failed]:hover {
-color: var(--copy-button-error-color, var(--helix-color-danger));
-}
-
-slot > svg {
-block-size: var(--copy-button-icon-size, var(--helix-size-icon-tight));
-inline-size: var(--copy-button-icon-size, var(--helix-size-icon-tight));
-}
-
-@media print {
-:host {
-display: none;
-}
-}`);
+);--_icon-button-size: var(--copy-button-size, var(--icon-button-size, var(--helix-size-control)));}[part="button"] {display: inline-grid;place-items: center;}[part="button"] > slot {grid-area: 1 / 1;}slot[hidden] {display: none;}[part="button"][data-copied] {color: var(--copy-button-success-color, var(--helix-color-success));}:host(:not(:disabled)) [part="button"][data-copied]:hover {color: var(--copy-button-success-color, var(--helix-color-success));}[part="button"][data-failed],
+:host(:not(:disabled)) [part="button"][data-failed]:hover {color: var(--copy-button-error-color, var(--helix-color-danger));}slot > svg {block-size: var(--copy-button-icon-size, var(--helix-size-icon-tight));inline-size: var(--copy-button-icon-size, var(--helix-size-icon-tight));}@media print {:host {display: none;}}`);

package/dist/data-table/root/data-table-root.css.js

@@ -1,263 +1,39 @@
 import { createSheet } from '@fusion.dev/helix-core';
-export const styles = createSheet(`:host {
-display: block;
-}
-
-[part="table"] {
-display: grid;
-
-grid-template-columns: var(--data-table-columns, var(--data-table-template, minmax(0, 1fr)));
-inline-size: 100%;
-overflow-x: auto;
-}
-
-[part="table"] {
---_data-table-fade: to right;
-animation: data-table-edges linear both;
-animation-timeline: scroll(self inline);
-mask-image: linear-gradient(
+export const styles = createSheet(`:host {display: block;}[part="table"] {display: grid;grid-template-columns: var(--data-table-columns, var(--data-table-template, minmax(0, 1fr)));inline-size: 100%;overflow-x: auto;}[part="table"] {--_data-table-fade: to right;animation: data-table-edges linear both;animation-timeline: scroll(self inline);mask-image: linear-gradient(
 var(--_data-table-fade),
 transparent,
 #000 var(--_data-table-fade-start, 0rem),
 #000 calc(100% - var(--_data-table-fade-end, 0rem)),
 transparent
-);
-}
-
-:host(:dir(rtl)) [part="table"] {
---_data-table-fade: to left;
-}
-
-@keyframes data-table-edges {
-0% {
---_data-table-fade-end: var(--helix-space-xl);
---_data-table-fade-start: 0rem;
-}
-
-5%,
-95% {
---_data-table-fade-end: var(--helix-space-xl);
---_data-table-fade-start: var(--helix-space-xl);
-}
-
-100% {
---_data-table-fade-end: 0rem;
---_data-table-fade-start: var(--helix-space-xl);
-}
-}
-
-@media (prefers-reduced-motion: reduce) {
-[part="table"] {
-animation: none;
-}
-}
-
-[part="head"],
-[part="row"] {
-display: contents;
-}
-
-[part~="cell"] {
-border-block-end: var(--helix-border-thin) solid
-var(--data-table-rule-color, var(--helix-color-border));
-color: var(--data-table-color, var(--helix-color-foreground));
-font-family: var(--helix-font-sans);
-font-size: var(--data-table-text, var(--helix-text-sm));
-padding-block: var(--data-table-padding-block, var(--helix-space-sm));
-
-padding-inline: var(--data-table-padding-inline, var(--helix-space-none) var(--helix-space-md));
-
-text-align: var(--data-table-cell-align);
-}
-
-[part="row"]:last-of-type [part~="cell"] {
-border-block-end-color: transparent;
-}
-
-::slotted(helix-table-column) {
---_table-heading-color: var(--data-table-heading-color);
---_table-heading-padding-block: var(--data-table-padding-block);
---_table-heading-padding-inline: var(--data-table-padding-inline);
---_table-heading-rule-color: var(--data-table-rule-color);
---_table-heading-text: var(--data-table-text);
-}
-
-::slotted(helix-table-column[sortable]) {
-cursor: pointer;
-}
-
-[part~="cell"]:focus-visible,
+);}:host(:dir(rtl)) [part="table"] {--_data-table-fade: to left;}@keyframes data-table-edges {0% {--_data-table-fade-end: var(--helix-space-xl);--_data-table-fade-start: 0rem;}5%,
+95% {--_data-table-fade-end: var(--helix-space-xl);--_data-table-fade-start: var(--helix-space-xl);}100% {--_data-table-fade-end: 0rem;--_data-table-fade-start: var(--helix-space-xl);}}@media (prefers-reduced-motion: reduce) {[part="table"] {animation: none;}}[part="head"],
+[part="row"] {display: contents;}[part~="cell"] {border-block-end: var(--helix-border-thin) solid
+var(--data-table-rule-color, var(--helix-color-border));color: var(--data-table-color, var(--helix-color-foreground));font-family: var(--helix-font-sans);font-size: var(--data-table-text, var(--helix-text-sm));padding-block: var(--data-table-padding-block, var(--helix-space-sm));padding-inline: var(--data-table-padding-inline, var(--helix-space-none) var(--helix-space-md));text-align: var(--data-table-cell-align);}[part="row"]:last-of-type [part~="cell"] {border-block-end-color: transparent;}::slotted(helix-table-column) {--_table-heading-color: var(--data-table-heading-color);--_table-heading-padding-block: var(--data-table-padding-block);--_table-heading-padding-inline: var(--data-table-padding-inline);--_table-heading-rule-color: var(--data-table-rule-color);--_table-heading-text: var(--data-table-text);}::slotted(helix-table-column[sortable]) {cursor: pointer;}[part~="cell"]:focus-visible,
 [part="more-cell"]:focus-visible,
 [part~="select"]:focus-visible,
-[part="select-all"]:focus-visible {
-outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);
-outline-offset: calc(var(--helix-size-focus-offset) * -1);
-}
-
-[part~="select"],
-[part="select-all"] {
-align-items: center;
-border-block-end: var(--helix-border-thin) solid
-var(--data-table-rule-color, var(--helix-color-border));
-display: flex;
-justify-content: center;
-padding-block: var(--data-table-padding-block, var(--helix-space-sm));
-padding-inline: var(--data-table-padding-inline, var(--helix-space-sm));
-}
-
-[part="row"]:last-of-type [part~="select"] {
-border-block-end-color: transparent;
-}
-
-[part="row"][aria-selected="true"] > * {
-background-color: color-mix(
-in srgb,
-var(--helix-color-primary) 10%,
-var(--helix-color-background)
-);
-}
-
-[part="toolbar"][data-empty],
-[part="footer"][data-empty] {
-display: none;
-}
-
-[part="toolbar"] {
-padding-block-end: var(--helix-space-sm);
-}
-
-[part="footer"] {
-align-items: center;
-display: flex;
-flex-wrap: wrap;
-gap: var(--helix-space-md);
-padding-block-start: var(--helix-space-sm);
-}
-
-[part="pagination"] {
-margin-inline-start: auto;
-}
-
-[part="empty"],
-[part="loading"] {
-grid-column: 1 / -1;
-}
-
-:host([child-field]) [part~="cell-header"] {
---_data-table-gutter: calc(
+[part="select-all"]:focus-visible {outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);outline-offset: calc(var(--helix-size-focus-offset) * -1);}[part~="select"],
+[part="select-all"] {align-items: center;border-block-end: var(--helix-border-thin) solid
+var(--data-table-rule-color, var(--helix-color-border));display: flex;justify-content: center;padding-block: var(--data-table-padding-block, var(--helix-space-sm));padding-inline: var(--data-table-padding-inline, var(--helix-space-sm));}[part="row"]:last-of-type [part~="select"] {border-block-end-color: transparent;}[part="row"][aria-selected="true"] > * {background-color: var(
+--data-table-selected-background-color,
+color-mix(in srgb, var(--helix-color-primary) 10%, var(--helix-color-background))
+);}[part="toolbar"][data-empty],
+[part="footer"][data-empty] {display: none;}[part="toolbar"] {padding-block-end: var(--data-table-toolbar-gap, var(--helix-space-sm));}[part="footer"] {align-items: center;display: flex;flex-wrap: wrap;gap: var(--data-table-footer-item-gap, var(--helix-space-md));padding-block-start: var(--data-table-footer-gap, var(--helix-space-sm));}[part="pagination"] {margin-inline-start: auto;}[part="empty"],
+[part="loading"] {grid-column: 1 / -1;}:host([child-field]) [part~="cell-header"] {--_data-table-gutter: calc(
 var(--data-table-toggle-size, var(--helix-size-icon-tight)) +
-var(--helix-space-2xs)
-);
-padding-inline-start: calc(
+var(--data-table-toggle-gap, var(--helix-space-2xs))
+);padding-inline-start: calc(
 (var(--data-table-level, 1) - 1) *
 var(--data-table-indent, var(--_data-table-gutter))
-);
-}
-
-:host([child-field]) [part~="cell-header"]:not(:has([part~="toggle"])) {
-padding-inline-start: calc(
+);}:host([child-field]) [part~="cell-header"]:not(:has([part~="toggle"])) {padding-inline-start: calc(
 (var(--data-table-level, 1) - 1) *
 var(--data-table-indent, var(--_data-table-gutter)) +
 var(--_data-table-gutter)
-);
-}
-
-[part~="toggle"] {
-align-items: center;
-background: none;
-block-size: var(--data-table-toggle-size, var(--helix-size-icon-tight));
-border: none;
-color: var(--data-table-toggle-color, var(--helix-color-foreground-muted));
-cursor: pointer;
-display: inline-flex;
-inline-size: var(--data-table-toggle-size, var(--helix-size-icon-tight));
-justify-content: center;
-margin-inline-end: var(--helix-space-2xs);
-padding: 0;
-vertical-align: middle;
-}
-
-[part="toggle-mark"] {
-block-size: 100%;
-inline-size: 100%;
-}
-
-[part="more"] {
-display: contents;
-}
-
-[part="more-cell"] {
-display: flex;
-grid-column: 1 / -1;
-padding-block: var(--data-table-padding-block, var(--helix-space-sm));
-}
-
-[part="more-button"] {
-background: none;
-border: var(--helix-border-thin) solid
-var(--data-table-more-border-color, var(--helix-color-border));
-border-radius: var(--data-table-more-radius, var(--helix-radii-sm));
-color: var(--data-table-color, var(--helix-color-foreground));
-cursor: pointer;
-font-family: var(--helix-font-sans);
-font-size: var(--data-table-text, var(--helix-text-sm));
-padding-block: var(--helix-space-2xs);
-padding-inline: var(--helix-space-sm);
-}
-
-[part="more-button"]:hover {
-background-color: var(
+);}[part~="toggle"] {align-items: center;background: none;block-size: var(--data-table-toggle-size, var(--helix-size-icon-tight));border: none;color: var(--data-table-toggle-color, var(--helix-color-foreground-muted));cursor: pointer;display: inline-flex;inline-size: var(--data-table-toggle-size, var(--helix-size-icon-tight));justify-content: center;margin-inline-end: var(--data-table-toggle-gap, var(--helix-space-2xs));padding: 0;vertical-align: middle;}[part="toggle-mark"] {block-size: 100%;inline-size: 100%;}[part="more"] {display: contents;}[part="more-cell"] {display: flex;grid-column: 1 / -1;padding-block: var(--data-table-padding-block, var(--helix-space-sm));}[part="more-button"] {background: none;border: var(--helix-border-thin) solid
+var(--data-table-more-border-color, var(--helix-color-border));border-radius: var(--data-table-more-radius, var(--helix-radii-sm));color: var(--data-table-color, var(--helix-color-foreground));cursor: pointer;font-family: var(--helix-font-sans);font-size: var(--data-table-text, var(--helix-text-sm));padding-block: var(--data-table-more-padding-block, var(--helix-space-2xs));padding-inline: var(--data-table-more-padding-inline, var(--helix-space-sm));}[part="more-button"]:hover {background-color: var(
 --data-table-more-hover-background-color,
 var(--helix-color-surface-raised)
-);
-}
-
-:host([windowed]) [part="table"] {
-block-size: var(--data-table-block-size, 24em);
-overflow-y: auto;
-overscroll-behavior: contain;
-}
-
-:host([windowed]) ::slotted(helix-table-column) {
---_table-heading-background-color: var(
+);}:host([windowed]) [part="table"] {block-size: var(--data-table-block-size, 24em);overflow-y: auto;overscroll-behavior: contain;}:host([windowed]) ::slotted(helix-table-column) {--_table-heading-background-color: var(
 --data-table-heading-background-color,
 var(--helix-color-background)
-);
---_table-heading-layer: var(--helix-layer-sticky);
---_table-heading-position: sticky;
-}
-
-:host([windowed]) [part="select-all"] {
-background-color: var(--data-table-heading-background-color, var(--helix-color-background));
-inset-block-start: 0;
-position: sticky;
-z-index: var(--helix-layer-sticky);
-}
-
-[part="before"],
-[part="after"] {
-grid-column: 1 / -1;
-}
-
-:host([loading]) [part="table"] {
-opacity: 0.5;
-}
-
-@media print {
-:host {
-background-color: transparent;
-}
-
-[part="table"] {
-overflow-x: visible;
-}
-
-:host([windowed]) [part="table"] {
-block-size: auto;
-overflow-y: visible;
-}
-
-[part="footer"] {
-display: none;
-}
-}`);
+);--_table-heading-layer: var(--helix-layer-sticky);--_table-heading-position: sticky;}:host([windowed]) [part="select-all"] {background-color: var(--data-table-heading-background-color, var(--helix-color-background));inset-block-start: 0;position: sticky;z-index: var(--helix-layer-sticky);}[part="before"],
+[part="after"] {grid-column: 1 / -1;}:host([loading]) [part="table"] {opacity: 0.5;}@media print {:host {background-color: transparent;}[part="table"] {overflow-x: visible;}:host([windowed]) [part="table"] {block-size: auto;overflow-y: visible;}[part="footer"] {display: none;}}`);

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

@@ -41,21 +41,28 @@ import '../../table/index.js';
  * short result keeps the full box with space below it.
  * @cssproperty --data-table-color - The text color of a cell.
  * @cssproperty --data-table-columns - The grid track list for the columns. It overrides the list worked out from the columns.
+ * @cssproperty --data-table-footer-gap - The space between the grid and the footer below it.
+ * @cssproperty --data-table-footer-item-gap - The space between the pieces of the footer, such as a summary and the pagination.
  * @cssproperty --data-table-heading-background-color - The fill behind a heading while `windowed`.
  * It is opaque, because rows scroll under the sticky heading. Unset otherwise.
  * @cssproperty --data-table-heading-color - The text color of a heading.
  * @cssproperty --data-table-indent - How far a tree grid's row header steps in for each level. It defaults to the width of the mark that opens a row.
  * @cssproperty --data-table-more-border-color - The color of the edge around the button in the `load-more` row.
  * @cssproperty --data-table-more-hover-background-color - The fill behind the button in the `load-more` row while the pointer is over it.
+ * @cssproperty --data-table-more-padding-block - The space above and below the words of the button in the `load-more` row.
+ * @cssproperty --data-table-more-padding-inline - The space either side of the words of the button in the `load-more` row.
  * @cssproperty --data-table-more-radius - The corner radius of the button in the `load-more` row.
  * @cssproperty --data-table-padding-block - The space above and below a cell's content.
  * @cssproperty --data-table-padding-inline - The space on either side of a cell's content.
  * @cssproperty --data-table-rule-color - The color of the line between rows. It takes a
  * color only, because it fills the color in a border shorthand, and a full border value
  * makes the rule invalid. It is drawn on the cells, because the row is `display: contents`.
+ * @cssproperty --data-table-selected-background-color - The fill across a selected row.
  * @cssproperty --data-table-text - The font size of headings and cells.
  * @cssproperty --data-table-toggle-color - The color of the mark that opens and closes a row of a tree grid.
+ * @cssproperty --data-table-toggle-gap - The space between the mark that opens a row of a tree grid and the row's name, also kept by a row with no children.
  * @cssproperty --data-table-toggle-size - The size of the mark that opens and closes a row of a tree grid, and of the room a row with no children keeps for it.
+ * @cssproperty --data-table-toolbar-gap - The space between the toolbar and the grid below it.
  */
 export declare class HelixDataTable extends HelixHeadlessDataTable {
     static tier: string;