@fusion.dev/helix 0.143.0 → 0.145.0

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

@@ -26,9 +26,11 @@ declare const HelixButton_base: (new (...args: any[]) => import("../../shared/mi
  * @slot start - Content before the label, usually an icon.
  *
  * @csspart button - The inner control.
+ * @csspart live - The live region that says `pending-label` when the button becomes pending under focus. It is clipped out of view and still read.
  *
  * @cssproperty --button-background-color - Fill behind the button, in every state.
  * @cssproperty --button-background-color-hover - Fill behind the button under the pointer. Without it, `--button-background-color` also applies on hover.
+ * @cssproperty --button-border-color - Edge color of an outlined button. The other emphases draw no edge.
  * @cssproperty --button-foreground-color - Label and icon color.
  * @cssproperty --button-gap - Space between the label and the content on either side of it.
  * @cssproperty --button-inline-size - Minimum width. It inherits, so you can set it once on a section for every button inside it.
@@ -41,6 +43,9 @@ declare const HelixButton_base: (new (...args: any[]) => import("../../shared/mi
  * @cssproperty --button-radius-start-end - The top trailing corner, for a group stacking down.
  * @cssproperty --button-radius-start-start - The top leading corner, for a group stacking down.
  * @cssproperty --button-size - Height of the control, for a row height outside the density steps.
+ * @cssproperty --button-spinner-size - Size of the ring a pending button turns. Defaults to the size of its icons.
+ *
+ * @cssstate pending - The button is pending: `pending` is set. A ring turns over its hidden words.
  */
 export declare class HelixButton extends HelixButton_base {
     /**

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

@@ -7,10 +7,11 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 import { customElement } from '@fusion.dev/helix-core';
 import { HelixHeadlessButton } from '@fusion.dev/helix-headless/button';
 import { property } from 'lit/decorators.js';
+import { styles as liveStyles } from '../../shared/live/live.css.js';
 import { MixinControlSurface } from '../../shared/mixin-control-surface/mixin-control-surface.js';
 import { styles } from './button-root.css.js';
 let HelixButton = class HelixButton extends MixinControlSurface(HelixHeadlessButton) {
-    static { this.styles = styles; }
+    static { this.styles = [liveStyles, styles]; }
 };
 __decorate([
     property({ reflect: true })

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

@@ -12,6 +12,9 @@ import type { CSSResultGroup } from 'lit';
  * shadow root, where this component's styles cannot reach. The same rule works
  * for your own anchor styled as a button.
  *
+ * The buttons take their height from the region, so set `data-density` on the
+ * group to make every button in it smaller or larger together.
+ *
  * @since 0.1.0
  * @status stable
  * @category actions

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

@@ -1,8 +1,12 @@
 import { createSheet } from '@fusion.dev/helix-core';
 export const styles = createSheet(`:host {
---_callout-color: var(--helix-color-info);
+--_callout-tone: var(--helix-color-info);
 
-font-size: var(--helix-text-sm);
+--_callout-color: var(--callout-accent-color, var(--_callout-tone));
+--_callout-bar: var(--callout-bar-thickness, var(--helix-border-thick));
+--_callout-inset: var(--callout-padding, var(--helix-space-md));
+
+font-size: var(--callout-font-size, var(--helix-text-sm));
 background-color: var(
 --callout-background-color,
 color-mix(in oklab, var(--_callout-color) 10%, transparent)
@@ -13,35 +17,45 @@ position: relative;
 border-radius: var(--callout-radius, var(--helix-radii-sm));
 color: var(--helix-color-foreground);
 display: flex;
-gap: var(--helix-space-sm);
+gap: var(--callout-gap, var(--helix-space-sm));
 
-padding: var(--helix-space-md);
-padding-inline-start: calc(var(--helix-space-md) + var(--helix-border-thick));
+padding: var(--_callout-inset);
+padding-inline-start: calc(var(--_callout-inset) + var(--_callout-bar));
 }
 
 :host::before {
 background-color: var(--_callout-color);
 content: "";
-inline-size: var(--helix-border-thick);
+inline-size: var(--_callout-bar);
 inset-block: 0;
 inset-inline-start: 0;
 position: absolute;
 }
 
 :host([tone="neutral"]) {
---_callout-color: var(--helix-color-foreground-muted);
+--_callout-tone: var(--helix-color-foreground-muted);
 }
 
 :host([tone="success"]) {
---_callout-color: var(--helix-color-success);
+--_callout-tone: var(--helix-color-success);
 }
 
 :host([tone="warning"]) {
---_callout-color: var(--helix-color-warning);
+--_callout-tone: var(--helix-color-warning);
 }
 
 :host([tone="danger"]) {
---_callout-color: var(--helix-color-danger);
+--_callout-tone: var(--helix-color-danger);
+}
+
+:host([separation="outlined"]) {
+background-color: var(--callout-background-color, transparent);
+box-shadow: inset 0 0 0 var(--helix-border-thin)
+color-mix(in oklab, var(--_callout-color) 45%, var(--helix-color-background));
+}
+
+:host([separation="plain"]) {
+background-color: var(--callout-background-color, transparent);
 }
 
 [part="icon"] {
@@ -67,11 +81,55 @@ line-height: var(--helix-leading-normal);
 min-inline-size: 0;
 }
 
+[part="dismiss"] {
+all: unset;
+
+box-sizing: border-box;
+block-size: calc(var(--helix-size-icon) + var(--helix-space-2xs) * 2);
+border-radius: var(--helix-radii-sm);
+color: var(--helix-color-foreground-muted);
+cursor: pointer;
+display: inline-flex;
+flex: 0 0 auto;
+inline-size: calc(var(--helix-size-icon) + var(--helix-space-2xs) * 2);
+margin-block: calc(var(--helix-space-2xs) * -1);
+margin-inline: auto calc(var(--helix-space-2xs) * -1);
+place-content: center;
+place-items: center;
+transition:
+background-color var(--helix-duration-fast) var(--helix-easing-standard),
+color var(--helix-duration-fast) var(--helix-easing-standard);
+}
+
+[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);
+}
+
+[part="dismiss"] svg,
+slot[name="dismiss-icon"]::slotted(*) {
+--icon-size: var(--helix-size-icon);
+
+block-size: var(--helix-size-icon);
+inline-size: var(--helix-size-icon);
+}
+
+@media (prefers-reduced-motion: reduce) {
+[part="dismiss"] {
+transition: none;
+}
+}
+
 slot[name="heading"]::slotted(*) {
 color: var(--helix-color-foreground);
 
 display: block;
-font-size: var(--helix-text-sm);
+font-size: var(--callout-font-size, var(--helix-text-sm));
 font-weight: var(--helix-weight-semibold);
 margin: var(--helix-space-none);
 }

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

@@ -10,8 +10,9 @@ import type { CSSResultGroup } from 'lit';
  * A bar on the inline start edge also marks the tone, so it still shows in
  * grayscale and for people who do not distinguish the hues.
  *
- * This tier has no treatment property. `tone` is set on the headless tier and
- * carries the meaning, and this tier draws it.
+ * `tone` is set on the headless tier and carries the meaning, and this tier
+ * draws it. `separation` is where the box ends: absent is the tint with the
+ * bar, `outlined` an edge with no fill, and `plain` the bar and the mark alone.
  *
  * @since 0.1.0
  * @status stable
@@ -20,15 +21,37 @@ import type { CSSResultGroup } from 'lit';
  * @documentation https://fusion.dev/helix/components/callout
  *
  * @slot - The callout's content.
+ * @slot dismiss-icon - Replaces the cross inside the dismiss button.
+ * @slot heading - A heading above the content.
  * @slot icon - Replaces the icon chosen by `tone`.
  *
  * @csspart content - The content region.
+ * @csspart dismiss - The button that dismisses the callout, shown when `dismissible` is set.
+ * @csspart dismiss-mark - The cross on the dismiss button, shown when the `dismiss-icon` slot is empty.
  * @csspart icon - The icon region.
  *
+ * @cssproperty --callout-accent-color - The color of the bar, the mark and the tint, in place of the tone's.
  * @cssproperty --callout-background-color - The fill behind the callout.
+ * @cssproperty --callout-bar-thickness - The thickness of the bar on the inline start edge.
+ * @cssproperty --callout-font-size - The size of the callout's text.
+ * @cssproperty --callout-gap - The space between the mark and the content.
+ * @cssproperty --callout-padding - The inset around the content, to which the bar's width is added at the start.
  * @cssproperty --callout-radius - The corner radius of the callout.
  */
 export declare class HelixCallout extends HelixHeadlessCallout {
+    /**
+     * Where the callout's box ends, whatever its tone.
+     *
+     * Absent, or `filled`, is the tint with the bar, the resting look.
+     * `outlined` draws the tone at the edge with no fill, and `plain` keeps only
+     * the bar and the mark, for an aside in running prose. The bar stays in
+     * every one, being what says the tone where the hue is not seen.
+     *
+     * Web Awesome calls this `appearance`. It is `separation` here, as on
+     * `Announcement` and `Card`, since a box's edge and its meaning are two
+     * choices.
+     */
+    separation?: 'filled' | 'outlined' | 'plain';
     static styles: CSSResultGroup;
 }
 declare global {

package/dist/callout/root/callout-root.js

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

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

@@ -84,6 +84,7 @@ transition: none;
 inset: 0;
 overflow: visible;
 position: absolute;
+z-index: var(--helix-layer-beneath);
 }
 
 [part="edge"] {

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

@@ -17,7 +17,7 @@ color: var(--helix-color-foreground-muted);
 
 align-content: var(--card-align, start);
 display: grid;
-gap: var(--helix-space-sm);
+gap: var(--card-gap, var(--helix-space-sm));
 grid-template-columns: minmax(0, 1fr);
 line-height: var(--helix-leading-normal);
 
@@ -68,6 +68,31 @@ slot[name="footer"]::slotted(*) {
 justify-self: end;
 }
 
+[part="header-row"],
+[part="footer-row"] {
+align-items: center;
+display: flex;
+
+flex-wrap: wrap;
+gap: var(--card-gap, var(--helix-space-sm));
+min-inline-size: 0;
+}
+
+[part="header-row"] slot[name="header"]::slotted(*) {
+flex: 1 1 auto;
+min-inline-size: 0;
+}
+
+slot[name="header-actions"]::slotted(*),
+slot[name="footer-actions"]::slotted(*) {
+flex: none;
+justify-self: end;
+}
+
+[part="footer-row"] slot[name="footer-actions"]::slotted(*) {
+margin-inline-start: auto;
+}
+
 :host([orientation="horizontal"]) {
 padding-inline-start: calc(var(--_card-media) + var(--_card-inset));
 position: relative;

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

@@ -10,6 +10,11 @@ import type { CSSResultGroup } from 'lit';
  * slotted content directly: a header is the element you slotted, so there is no
  * part to target.
  *
+ * `header-actions` and `footer-actions` put controls at the end of the header's
+ * and the footer's line; the footer then moves to the start of its line. Put a
+ * header of more than one element in one wrapper, since the header and its
+ * actions share a line.
+ *
  * `media` runs edge to edge and clips to the card's corners, so an image needs
  * no inset. Set `orientation="horizontal"` to put the media beside the header,
  * content, and footer. Set `media-placement="end"` to put it below the content,
@@ -23,9 +28,14 @@ import type { CSSResultGroup } from 'lit';
  *
  * @slot - The card's main content.
  * @slot footer - Actions that conclude the card.
+ * @slot footer-actions - Controls at the end of the footer's line, with the footer at its start.
  * @slot header - Title and any actions for the whole card.
+ * @slot header-actions - Controls for the whole card at the end of the header's line, such as a menu.
  * @slot media - Image, video, or chart that runs edge to edge, outside the inset.
  *
+ * @csspart footer-row - The line holding `footer` and `footer-actions`, drawn only while `footer-actions` holds something.
+ * @csspart header-row - The line holding `header` and `header-actions`, drawn only while `header-actions` holds something.
+ *
  * @cssproperty --card-align - How the regions pack when the card is stretched
  *   taller than its content. `start` by default, so the slack is at the bottom;
  *   `space-between` puts a footer on the floor.
@@ -36,6 +46,7 @@ import type { CSSResultGroup } from 'lit';
  * @cssproperty --card-border-width - Width of the surface's edge. Follows
  *   `--helix-border-surface`, which is a hairline unless your theme sets another width.
  *   The edge is what sets the surface apart.
+ * @cssproperty --card-gap - Space between the regions, and between a header or footer and its actions.
  * @cssproperty --card-media-block-size - Height of the media region. Defaults to
  *   `auto`, which follows an image's own proportions. A chart has no height of its own,
  *   so set one here for a chart.

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

@@ -170,11 +170,27 @@ outline-offset: var(--helix-size-focus-offset);
 
 [part="rotation"] svg,
 [part="previous"] svg,
-[part="next"] svg {
+[part="next"] svg,
+::slotted([slot="previous-icon"]),
+::slotted([slot="next-icon"]) {
 block-size: 1em;
 inline-size: 1em;
 }
 
+:host(:dir(rtl)) ::slotted([slot="previous-icon"]),
+:host(:dir(rtl)) ::slotted([slot="next-icon"]) {
+scale: -1 1;
+}
+
+:host([mouse-drag]) [part="track"] {
+cursor: grab;
+}
+
+:host(:state(dragging)) [part="track"] {
+cursor: grabbing;
+user-select: none;
+}
+
 [part="track"] {
 
 --_carousel-share: calc(

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

@@ -1,5 +1,6 @@
 import { HelixHeadlessCheckboxGroup } from '@fusion.dev/helix-headless/checkbox-group';
 import type { CSSResultGroup } from 'lit';
+import '../../checkbox/index.js';
 /**
  * @summary A group of related checkboxes under one label, with one value for the set.
  *
@@ -16,6 +17,7 @@ import type { CSSResultGroup } from 'lit';
  * @cssproperty --checkbox-group-gap - The space between the checkboxes.
  */
 export declare class HelixCheckboxGroup extends HelixHeadlessCheckboxGroup {
+    static tier: string;
     /**
      * The direction the checkboxes run. Set `horizontal` for a row. Unset is a
      * column.

package/dist/checkbox-group/root/checkbox-group-root.js

@@ -10,7 +10,9 @@ import { property } from 'lit/decorators.js';
 import { styles as fieldStyles } from '../../shared/field/field.css.js';
 import { styles as fieldStackedStyles } from '../../shared/field/field-stacked.css.js';
 import { styles } from './checkbox-group-root.css.js';
+import '../../checkbox/index.js';
 let HelixCheckboxGroup = class HelixCheckboxGroup extends HelixHeadlessCheckboxGroup {
+    static { this.tier = 'helix-'; }
     static { this.styles = [fieldStyles, fieldStackedStyles, styles]; }
 };
 __decorate([

package/dist/code-block/root/code-block-root.css.js

@@ -101,9 +101,32 @@ line-height: var(--helix-leading-normal);
 
 :host(:not([diff])) [part="code"] {
 display: block;
+
+max-block-size: var(--code-block-max-block-size, none);
 overflow-x: auto;
 }
 
+:host([wrap]:not([diff], [line-numbers])) [part="code"] {
+overflow-wrap: anywhere;
+white-space: pre-wrap;
+}
+
+:host([line-numbers]:not([diff])) [part="block"] {
+column-gap: var(--helix-space-md);
+display: grid;
+grid-template-columns: auto minmax(0, 1fr);
+}
+
+[part="gutter"] {
+color: var(--code-block-gutter-color, var(--helix-color-foreground-subtle));
+font-family: var(--helix-font-mono);
+font-size: var(--helix-text-sm);
+font-variant-numeric: tabular-nums;
+line-height: var(--helix-leading-normal);
+text-align: end;
+user-select: none;
+}
+
 :host([diff]) {
 gap: var(--helix-space-md);
 }

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

@@ -16,6 +16,10 @@ import '../../copy-button/index.js';
  * backgrounds. A split diff stacks its two versions when the file is narrower
  * than about 40rem.
  *
+ * Long lines scroll by default. Set `wrap` to wrap them instead, for prose-like
+ * code such as a long command, and set `--code-block-max-block-size` to cap the
+ * height of a long file, which then scrolls.
+ *
  * @since 0.1.0
  * @status stable
  * @category typography
@@ -24,11 +28,22 @@ import '../../copy-button/index.js';
  * @cssproperty --code-block-backdrop - A backdrop filter for the block and its header, for a translucent background.
  * @cssproperty --code-block-background-color - The background behind the code. Set it for a block that sits on a surface other than the page background.
  * @cssproperty --code-block-border-color - The line around the block and its header.
+ * @cssproperty --code-block-gutter-color - The color of the line numbers.
  * @cssproperty --code-block-header-background-color - The background behind the name. The default is `surface-raised`.
+ * @cssproperty --code-block-max-block-size - The tallest the code grows before it scrolls. 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.
  */
 export declare class HelixCodeBlock extends HelixHeadlessCodeBlock {
     static tier: string;
+    /**
+     * Whether long lines wrap.
+     *
+     * Off by default, so long lines scroll, because a line break can be
+     * significant in code and a wrapped line reads as two. For prose-like code, such as a long command or
+     * a log line, a wrap reads better than a scroll. Line numbers keep the lines
+     * unwrapped, since a wrapped line would take one number and several rows.
+     */
+    wrap: boolean;
     static styles: CSSResultGroup;
 }
 declare global {

package/dist/code-block/root/code-block-root.js

@@ -6,12 +6,20 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 };
 import { customElement } from '@fusion.dev/helix-core';
 import { HelixHeadlessCodeBlock } from '@fusion.dev/helix-headless/code-block';
+import { property } from 'lit/decorators.js';
 import { styles } from './code-block-root.css.js';
 import '../../copy-button/index.js';
 let HelixCodeBlock = class HelixCodeBlock extends HelixHeadlessCodeBlock {
+    constructor() {
+        super(...arguments);
+        this.wrap = false;
+    }
     static { this.tier = 'helix-'; }
     static { this.styles = styles; }
 };
+__decorate([
+    property({ reflect: true, type: Boolean })
+], HelixCodeBlock.prototype, "wrap", void 0);
 HelixCodeBlock = __decorate([
     customElement('helix-code-block')
 ], HelixCodeBlock);

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/data-table/root/data-table-root.css.js

@@ -87,6 +87,7 @@ 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);
@@ -142,6 +143,68 @@ margin-inline-start: auto;
 grid-column: 1 / -1;
 }
 
+:host([child-field]) [part~="cell-header"] {
+--_data-table-gutter: calc(var(--helix-size-icon-tight) + 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(
+(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(--helix-size-icon-tight);
+border: none;
+color: var(--helix-color-foreground-muted);
+cursor: pointer;
+display: inline-flex;
+inline-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(--helix-color-border);
+border-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(--helix-color-surface-raised);
+}
+
 :host([windowed]) [part="table"] {
 block-size: var(--data-table-block-size, 24em);
 overflow-y: auto;

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

@@ -44,6 +44,7 @@ import '../../table/index.js';
  * @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-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