@fusion.dev/helix 0.144.0 → 0.145.0

package/dist/accordion/item/accordion-item.css.js

@@ -31,15 +31,26 @@ transform: scaleY(1);
 transition: transform var(--helix-duration-fast) var(--helix-easing-standard);
 }
 
-:host(:not([chevron-placement="start"])) [part="chevron"] {
+::slotted([slot="chevron"]) {
+block-size: 1em;
+color: var(--helix-color-foreground-subtle);
+flex: 0 0 auto;
+inline-size: 1em;
+transition: transform var(--helix-duration-fast) var(--helix-easing-standard);
+}
+
+:host(:not([chevron-placement="start"])) [part="chevron"],
+:host(:not([chevron-placement="start"])) ::slotted([slot="chevron"]) {
 margin-inline-start: auto;
 }
 
-:host(:state(open)) [part="chevron"] {
+:host(:state(open)) [part="chevron"],
+:host(:state(open)) ::slotted([slot="chevron"]) {
 transform: scaleY(-1);
 }
 
-[part="trigger"]:hover:not(:disabled) [part="chevron"] {
+[part="trigger"]:hover:not(:disabled) [part="chevron"],
+[part="trigger"]:hover:not(:disabled) ::slotted([slot="chevron"]) {
 color: var(--helix-color-foreground);
 }
 

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

@@ -16,6 +16,8 @@ import type { CSSResultGroup } from 'lit';
  * @documentation https://fusion.dev/helix/components/accordion
  *
  * @slot - The content shown when the section is open.
+ * @slot chevron - Replaces the open and close indicator. A slotted icon is sized, colored and
+ *   turned like the drawn one.
  * @slot summary - The text of the button that opens and closes the section. Always shown.
  *
  * @csspart chevron - The open and close indicator.

package/dist/aura/palette.d.ts

@@ -0,0 +1,38 @@
+import type { ColorBytes, TokenColor } from '@fusion.dev/helix-core';
+/** The four ramp stops a shape is drawn through, as channels in `0..1`. */
+export interface AuraPalette {
+    glow: TokenColor;
+    ground: TokenColor;
+    haze: TokenColor;
+    peak: TokenColor;
+}
+/** The computed colors the canvas carries, one per stop and two for the peak. */
+export type PaletteStyle = Pick<CSSStyleDeclaration, 'caretColor' | 'color' | 'columnRuleColor' | 'outlineColor' | 'textDecorationColor'>;
+/** The default theme's dark page, ink on black, which is drawn until a read. */
+export declare const RESTING_PALETTE: AuraPalette;
+/**
+ * The ramp, from the colors the canvas's stylesheet resolved for it.
+ *
+ * **Carried on color properties of the canvas, which a canvas never paints**,
+ * because a custom property is handed back as the text that was written and a
+ * color property is resolved by the engine first. Read there, each stop takes
+ * the `--aura-*` hook a page wrote anywhere above the aura, and the token
+ * otherwise, the same way the fallback gradient on the host does:
+ *
+ * - `color`: `--aura-glow`, or `primary`.
+ * - `text-decoration-color`: `--aura-haze`, or `primary-subtle`.
+ * - `outline-color`: `--aura-ground`, or the background.
+ * - `column-rule-color` and `caret-color`: `--aura-peak`, or the light and the
+ *   dark page's own peak.
+ *
+ * **Light pages peak on the pressed `primary-active` and dark ones on the
+ * foreground**, and the ground is what says which: mixing a saturated hue
+ * toward near-black takes the chroma out of exactly the pixels carrying the
+ * most of it. Read from the ground's own luminance rather than asked of the
+ * color mode, which is a private token this tier may not reach for. A page
+ * that sets `--aura-peak` sets both, so its peak is used either way.
+ *
+ * @param style The canvas's computed style.
+ * @param read Turns a resolved color into bytes, `undefined` where it cannot.
+ */
+export declare const paletteOf: (style: PaletteStyle, read: (value: string) => ColorBytes | undefined) => AuraPalette;

package/dist/aura/palette.js

@@ -0,0 +1,22 @@
+export const RESTING_PALETTE = {
+    glow: [0.88, 0.88, 0.88],
+    ground: [0, 0, 0],
+    haze: [0.16, 0.16, 0.16],
+    peak: [1, 1, 1],
+};
+export const paletteOf = (style, read) => {
+    const channels = (value, fallback) => {
+        const bytes = read(value);
+        return bytes ? [bytes[0] / 255, bytes[1] / 255, bytes[2] / 255] : [...fallback];
+    };
+    const ground = channels(style.outlineColor, RESTING_PALETTE.ground);
+    const light = ground[0] * 0.2126 + ground[1] * 0.7152 + ground[2] * 0.0722 > 0.5;
+    return {
+        glow: channels(style.color, RESTING_PALETTE.glow),
+        ground,
+        haze: channels(style.textDecorationColor, RESTING_PALETTE.haze),
+        peak: light
+            ? channels(style.columnRuleColor, [0.02, 0.02, 0.02])
+            : channels(style.caretColor, RESTING_PALETTE.peak),
+    };
+};

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

@@ -1,5 +1,10 @@
 import { createSheet } from '@fusion.dev/helix-core';
 export const styles = createSheet(`:host {
+
+--_aura-glow: var(--aura-glow, var(--helix-color-primary));
+--_aura-ground: var(--aura-ground, var(--helix-color-background));
+--_aura-haze: var(--aura-haze, var(--helix-color-primary-subtle));
+
 position: relative;
 display: block;
 inline-size: 100%;
@@ -7,9 +12,9 @@ block-size: 100%;
 
 background-image: radial-gradient(
 120% 90% at 62% 12%,
-color-mix(in oklab, var(--helix-color-primary) 38%, var(--helix-color-background)) 0%,
-var(--helix-color-primary-subtle) 38%,
-var(--helix-color-background) 78%
+color-mix(in oklab, var(--_aura-glow) 38%, var(--_aura-ground)) 0%,
+var(--_aura-haze) 38%,
+var(--_aura-ground) 78%
 );
 }
 
@@ -25,6 +30,22 @@ pointer-events: auto;
 display: block;
 inline-size: 100%;
 block-size: 100%;
+
+caret-color: var(--aura-peak, var(--helix-color-foreground));
+color: var(--_aura-glow);
+column-rule-color: var(--aura-peak, var(--helix-color-primary-active));
+outline-color: var(--_aura-ground);
+text-decoration-color: var(--_aura-haze);
+}
+
+[part="content"] {
+inset: 0;
+pointer-events: none;
+position: absolute;
+}
+
+::slotted(*) {
+pointer-events: auto;
 }
 
 [part="canvas"][hidden] {

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

@@ -33,13 +33,37 @@ import type { CSSResultGroup, PropertyValues, TemplateResult } from 'lit';
  * allow. Its behavior is drawing to a canvas, so there is no structure for you
  * to restyle and nothing for a headless version to hold.
  *
+ * **Content placed inside sits over the field**, in a `content` part that
+ * covers the aura, so an interactive aura answers the pointer over the
+ * content too. Clicks still reach the content. Style `::part(content)` to
+ * place it, such as centering a hero's heading.
+ *
+ * **The colors are the theme's, and each has a hook**: `--aura-ground`,
+ * `--aura-haze`, `--aura-glow` and `--aura-peak`, read by the shader and by the
+ * fallback gradient alike, from wherever on the page you set them.
+ *
+ * Where the gradient shows in place of the shader, the aura matches
+ * `:state(fallback)` and sends `helix-aura-fallback` with the reason.
+ *
  * @since 0.1.0
  * @status stable
  * @category media
  * @aliases Backdrop, Background, Atmosphere, Gradient
  * @documentation https://fusion.dev/helix/components/aura
  *
+ * @slot - Content drawn over the field, such as a heading.
+ *
+ * @event {HelixAuraFallbackEvent} helix-aura-fallback - Fired each time the aura stops drawing its shader and shows its gradient, with the reason.
+ *
  * @csspart canvas - The surface the shader draws into.
+ * @csspart content - The box over the field that holds the content. It covers the aura.
+ *
+ * @cssproperty --aura-glow - The bright stop of the ramp. Defaults to `--helix-color-primary`.
+ * @cssproperty --aura-ground - The page the field fades into. Defaults to `--helix-color-background`.
+ * @cssproperty --aura-haze - The faint stop between the ground and the glow. Defaults to `--helix-color-primary-subtle`.
+ * @cssproperty --aura-peak - The hottest stop, at the center of a shape. Defaults to `--helix-color-primary-active` on a light page and `--helix-color-foreground` on a dark one.
+ *
+ * @cssstate fallback - The aura shows its gradient: the renderer draws on the CPU, there is no WebGL, or the browser took the context back. Cleared once the shader draws again.
  */
 export declare class HelixAura extends HelixElement {
     static styles: CSSResultGroup;
@@ -173,8 +197,7 @@ export declare class HelixAura extends HelixElement {
      * states.
      */
     variant?: 'aurora' | 'braid' | 'caustics' | 'flow' | 'fracture' | 'lattice' | 'particles' | 'rays' | 'streaks' | 'threads' | 'waves';
-    /** Repaints when the palette moves, which no re-render would do on its own. */
-    private readonly tokens;
+    constructor();
     /**
      * The four ramp stops, resolved.
      *
@@ -186,6 +209,10 @@ export declare class HelixAura extends HelixElement {
      * that happens, so this is filled from there and from the first paint.
      */
     private palette;
+    /** Why the gradient shows, while it does, or `undefined` while the shader draws. */
+    private fallback;
+    /** Why the last `build` drew nothing, for the fallback it leads to. */
+    private refused;
     private canvas;
     private gl;
     private program;
@@ -413,6 +440,15 @@ export declare class HelixAura extends HelixElement {
      * loss was canceled.
      */
     private readonly handleLost;
+    /**
+     * Shows the gradient, and says so once for each time it starts to.
+     *
+     * The state is what a stylesheet reads, and the event is what a script
+     * logs, such as to count how many readers see the gradient. Sent again only
+     * after the shader has drawn in between, so a context that is lost while
+     * the gradient already shows is not said twice.
+     */
+    private fallBack;
     /**
      * Draws again on the context the browser gave back.
      *
@@ -424,11 +460,10 @@ export declare class HelixAura extends HelixElement {
     /**
      * Resolves the ramp. Called when the palette moves, not when a frame draws.
      *
-     * Light pages peak on the pressed `primary-active` and dark ones on the
-     * foreground, and the ground is what says which: mixing a saturated hue
-     * toward near-black takes the chroma out of exactly the pixels carrying the
-     * most of it. Read from the ground's own luminance rather than asked of the
-     * color mode, which is a private token this tier may not reach for.
+     * From the canvas's own computed style, which carries each stop on a color
+     * property: the `--aura-*` hook where a page set one, and the token
+     * otherwise. `paletteOf` says which property is which, and how the peak is
+     * chosen for a light page or a dark one.
      */
     private readPalette;
     private link;

package/dist/aura/root/aura-root.js

@@ -5,10 +5,11 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
 var HelixAura_1;
-import { customElement, HelixElement, MAX_FRAME_STEP, PaintGateController, TokenColorController, } from '@fusion.dev/helix-core';
+import { customElement, HelixAuraFallbackEvent, HelixElement, MAX_FRAME_STEP, PaintGateController, readColor, TokenColorController, } from '@fusion.dev/helix-core';
 import { html } from 'lit';
 import { property } from 'lit/decorators.js';
 import { tiltFor } from '../axis.js';
+import { paletteOf, RESTING_PALETTE } from '../palette.js';
 import { FRAGMENT, INTERACTIONS, SHAPES, VERTEX } from '../shader.js';
 import { styles } from './aura-root.css.js';
 const MAX_CANVAS_EDGE = 4096;
@@ -16,8 +17,10 @@ const MAX_CANVAS_PIXELS = 4_194_304;
 const OPENING_PATIENCE = 500;
 const SOFTWARE_RENDERER = /swiftshader|llvmpipe|softpipe|software rasterizer|basic render/i;
 let HelixAura = class HelixAura extends HelixElement {
+    static { HelixAura_1 = this; }
+    static { this.styles = styles; }
     constructor() {
-        super(...arguments);
+        super();
         this.bloom = 0.5;
         this.drift = 0;
         this.gain = 1;
@@ -27,16 +30,8 @@ let HelixAura = class HelixAura extends HelixElement {
         this.speed = 1;
         this.tilt = 14;
         this.variance = 1;
-        this.tokens = new TokenColorController(this, () => {
-            this.readPalette();
-            this.paintOnce();
-        });
-        this.palette = {
-            glow: [0.88, 0.88, 0.88],
-            ground: [0, 0, 0],
-            haze: [0.16, 0.16, 0.16],
-            peak: [1, 1, 1],
-        };
+        this.palette = { ...RESTING_PALETTE };
+        this.refused = 'unavailable';
         this.canvas = null;
         this.gl = null;
         this.program = null;
@@ -87,6 +82,7 @@ let HelixAura = class HelixAura extends HelixElement {
             }
             this.program = null;
             this.canvas?.toggleAttribute('hidden', true);
+            this.fallBack('lost');
         };
         this.handleRestored = () => {
             if (!this.prepare()) {
@@ -121,9 +117,11 @@ let HelixAura = class HelixAura extends HelixElement {
             const rect = this.getBoundingClientRect();
             this.box = { ...this.box, left: rect.left, top: rect.top };
         };
+        new TokenColorController(this, () => {
+            this.readPalette();
+            this.paintOnce();
+        });
     }
-    static { HelixAura_1 = this; }
-    static { this.styles = styles; }
     static { this.CONTEXT = {
         alpha: true,
         antialias: false,
@@ -132,7 +130,8 @@ let HelixAura = class HelixAura extends HelixElement {
         stencil: false,
     }; }
     render() {
-        return html `<canvas part="canvas" aria-hidden="true"></canvas>`;
+        return html `<canvas part="canvas" aria-hidden="true"></canvas>
+      <div part="content"><slot></slot></div>`;
     }
     firstUpdated(changed) {
         super.firstUpdated(changed);
@@ -150,6 +149,7 @@ let HelixAura = class HelixAura extends HelixElement {
             this.gl = null;
         }
         if (!this.program && !this.gl?.isContextLost() && !this.build()) {
+            this.fallBack(this.refused);
             return;
         }
         this.canvas?.addEventListener('webglcontextlost', this.handleLost);
@@ -182,8 +182,10 @@ let HelixAura = class HelixAura extends HelixElement {
             return false;
         }
         if (HelixAura_1.drawsInSoftware()) {
+            this.refused = 'software';
             return false;
         }
+        this.refused = 'unavailable';
         let gl = canvas.getContext('webgl2', HelixAura_1.CONTEXT);
         if (gl?.isContextLost()) {
             const fresh = document.createElement('canvas');
@@ -212,6 +214,8 @@ let HelixAura = class HelixAura extends HelixElement {
             return false;
         }
         this.canvas?.toggleAttribute('hidden', false);
+        this.fallback = undefined;
+        this.toggleState('fallback', false);
         gl.useProgram(this.program);
         for (const name of [
             'uBloom',
@@ -263,17 +267,19 @@ let HelixAura = class HelixAura extends HelixElement {
         window.removeEventListener('scroll', this.handleScroll, { capture: true });
         this.release = window.setTimeout(this.drop, 0);
     }
+    fallBack(reason) {
+        if (this.fallback !== undefined) {
+            return;
+        }
+        this.fallback = reason;
+        this.toggleState('fallback', true);
+        this.dispatchEvent(new HelixAuraFallbackEvent({ reason }));
+    }
     readPalette() {
-        const ground = this.tokens.read('--helix-color-background', [0, 0, 0]);
-        const light = ground[0] * 0.2126 + ground[1] * 0.7152 + ground[2] * 0.0722 > 0.5;
-        this.palette = {
-            glow: this.tokens.read('--helix-color-primary', [0.88, 0.88, 0.88]),
-            ground,
-            haze: this.tokens.read('--helix-color-primary-subtle', [0.16, 0.16, 0.16]),
-            peak: light
-                ? this.tokens.read('--helix-color-primary-active', [0.02, 0.02, 0.02])
-                : this.tokens.read('--helix-color-foreground', [1, 1, 1]),
-        };
+        const canvas = this.renderRoot.querySelector('canvas');
+        if (canvas) {
+            this.palette = paletteOf(getComputedStyle(canvas), readColor);
+        }
     }
     link(vertex, fragment) {
         const gl = this.gl;

package/dist/breadcrumbs/breadcrumb/breadcrumb.css.js

@@ -38,7 +38,7 @@ display: none;
 
 ::slotted(a) {
 background-color: transparent;
-border-radius: var(--helix-radii-sm);
+border-radius: var(--breadcrumbs-radius, var(--helix-radii-sm));
 padding: var(--helix-space-2xs) var(--helix-space-xs);
 transition: background-color var(--helix-duration-fast) var(--helix-easing-standard);
 }
@@ -61,17 +61,17 @@ outline-offset: var(--helix-size-focus-offset);
 }
 
 :host {
-font-weight: var(--helix-weight-medium);
+font-weight: var(--breadcrumbs-font-weight, var(--helix-weight-medium));
 }
 
 :host([current]) {
-color: var(--helix-color-foreground);
+color: var(--breadcrumbs-current-color, var(--helix-color-foreground));
 }
 
 [part="link"] {
 align-items: center;
-border-radius: var(--helix-radii-sm);
-color: var(--helix-color-foreground-muted);
+border-radius: var(--breadcrumbs-radius, var(--helix-radii-sm));
+color: var(--breadcrumbs-link-color, var(--helix-color-foreground-muted));
 display: inline-flex;
 gap: var(--helix-space-xs);
 padding: var(--helix-space-2xs) var(--helix-space-xs);
@@ -95,11 +95,11 @@ background-color: var(
 --breadcrumbs-hover-color,
 color-mix(in oklab, var(--helix-color-foreground) 8%, transparent)
 );
-color: var(--helix-color-foreground);
+color: var(--breadcrumbs-current-color, var(--helix-color-foreground));
 }
 
 :host([current]) [part="link"] {
-color: var(--helix-color-foreground);
+color: var(--breadcrumbs-current-color, var(--helix-color-foreground));
 }
 
 :host([hidden]) {

package/dist/breadcrumbs/breadcrumb/breadcrumb.d.ts

@@ -25,7 +25,12 @@ import type { CSSResultGroup } from 'lit';
  *
  * @cssproperty --breadcrumbs-control-padding-inline - Inline padding of a control slotted into a crumb, matching the steps either side of it.
  * @cssproperty --breadcrumbs-control-size - How tall a control slotted into a crumb is.
+ * @cssproperty --breadcrumbs-current-color - Text color of the current page's crumb.
+ * @cssproperty --breadcrumbs-font-weight - Weight of every crumb's text.
  * @cssproperty --breadcrumbs-hover-color - Fill behind a step under the pointer.
+ * @cssproperty --breadcrumbs-link-color - Text color of a crumb that is not the current page. A link
+ *   you slot inherits it unless your own styles set a color.
+ * @cssproperty --breadcrumbs-radius - Corner radius of the fill behind a step under the pointer.
  * @cssproperty --breadcrumbs-separator-color - Color of the chevron.
  */
 export declare class HelixBreadcrumb extends HelixHeadlessBreadcrumb {

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

@@ -7,7 +7,7 @@ display: block;
 align-items: center;
 display: flex;
 flex-wrap: wrap;
-font-size: var(--helix-text-sm);
+font-size: var(--breadcrumbs-font-size, var(--helix-text-sm));
 gap: var(--breadcrumbs-gap, var(--helix-space-xs));
 
 list-style: none;

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

@@ -1,5 +1,6 @@
 import { HelixHeadlessBreadcrumbs } from '@fusion.dev/helix-headless/breadcrumbs';
 import type { CSSResultGroup } from 'lit';
+import '../breadcrumb/breadcrumb.js';
 /**
  * @summary Shows the path to the current page.
  *
@@ -17,9 +18,11 @@ import type { CSSResultGroup } from 'lit';
  *
  * @csspart list - The ordered list.
  *
+ * @cssproperty --breadcrumbs-font-size - Size of the trail's text.
  * @cssproperty --breadcrumbs-gap - Space between items and separators.
  */
 export declare class HelixBreadcrumbs extends HelixHeadlessBreadcrumbs {
+    static tier: string;
     static styles: CSSResultGroup;
 }
 declare global {

package/dist/breadcrumbs/root/breadcrumbs-root.js

@@ -7,7 +7,9 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 import { customElement } from '@fusion.dev/helix-core';
 import { HelixHeadlessBreadcrumbs } from '@fusion.dev/helix-headless/breadcrumbs';
 import { styles } from './breadcrumbs-root.css.js';
+import '../breadcrumb/breadcrumb.js';
 let HelixBreadcrumbs = class HelixBreadcrumbs extends HelixHeadlessBreadcrumbs {
+    static { this.tier = 'helix-'; }
     static { this.styles = styles; }
 };
 HelixBreadcrumbs = __decorate([

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/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/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/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

package/dist/description-list/item/description-list-item.css.js

@@ -24,6 +24,17 @@ overflow-wrap: anywhere;
 text-align: var(--_description-list-value-align, start);
 }
 
+::slotted(dd) {
+color: var(--helix-color-foreground);
+font-variant-numeric: var(--_description-list-value-figures, normal);
+grid-column: -2 / -1;
+justify-self: var(--_description-list-value-align, stretch);
+margin: 0;
+min-inline-size: 0;
+overflow-wrap: anywhere;
+text-align: var(--_description-list-value-align, start);
+}
+
 @media print {
 :host {
 break-inside: avoid;

package/dist/drilldown/item/drilldown-item.css.js

@@ -27,7 +27,8 @@ text-overflow: ellipsis;
 white-space: nowrap;
 }
 
-[part="mark"] {
+[part="mark"],
+slot[name="chevron"]::slotted(*) {
 block-size: var(--helix-size-icon-tight);
 color: var(--helix-color-foreground-subtle);
 flex: none;

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

@@ -31,7 +31,8 @@ inline-size: var(--helix-size-control-tight);
 justify-content: center;
 }
 
-[part="back"] svg {
+[part="back"] svg,
+slot[name="back-icon"]::slotted(*) {
 block-size: var(--helix-size-icon-tight);
 inline-size: var(--helix-size-icon-tight);
 }