@fusion.dev/helix 0.143.0 → 0.145.0

package/dist/shared/chart/tooltip.css.js

@@ -18,7 +18,7 @@ font-weight: var(--helix-weight-medium);
 margin-block-end: var(--helix-space-2xs);
 }
 
-[part="tooltip-cell"] {
+[part~="tooltip-cell"] {
 align-items: baseline;
 column-gap: var(--helix-space-sm);
 display: grid;
@@ -36,11 +36,34 @@ font-variant-numeric: tabular-nums;
 grid-column: 3;
 }
 
-[part="tooltip-cell"][data-series]::before {
+[part~="tooltip-cell"][data-series]::before {
 background-color: var(--chart-series);
 block-size: 0.5em;
 border-radius: var(--helix-radii-full);
 content: "";
 grid-column: 1;
 inline-size: 0.5em;
+}
+
+[part~="tooltip-cell-current"] {
+font-weight: var(--helix-weight-medium);
+}
+
+[part~="tooltip-cell-current"] [part="tooltip-name"] {
+opacity: 1;
+}
+
+[part="plot"]:focus-visible {
+outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);
+outline-offset: var(--helix-size-focus-offset);
+}
+
+[part="live"] {
+block-size: 1px;
+clip-path: inset(50%);
+inline-size: 1px;
+margin: var(--helix-space-none);
+overflow: hidden;
+position: absolute;
+white-space: nowrap;
 }`);

package/dist/shared/field/field-segments.css.d.ts

@@ -0,0 +1 @@
+export declare const styles: import("lit").CSSResult;

package/dist/shared/field/field-segments.css.js

@@ -0,0 +1,40 @@
+import { createSheet } from '@fusion.dev/helix-core';
+export const styles = createSheet(`[part="segments"] {
+align-items: center;
+color: var(--helix-color-foreground);
+display: flex;
+flex: 1 1 auto;
+font-family: var(--helix-font-sans);
+font-size: var(--helix-text-md);
+
+font-variant-numeric: tabular-nums;
+font-weight: var(--helix-weight-medium);
+min-inline-size: 0;
+white-space: nowrap;
+}
+
+[part~="segment"] {
+border-radius: var(--helix-radii-sm);
+caret-color: transparent;
+outline: none;
+padding-inline: calc(var(--helix-space-2xs) / 2);
+}
+
+[part~="segment"]:focus {
+background-color: var(--_segment-focus-background-color, var(--helix-color-primary));
+color: var(--_segment-focus-color, var(--helix-color-foreground-on-primary));
+}
+
+[part~="segment-placeholder"] {
+color: var(--_segment-placeholder-color, var(--helix-color-foreground-subtle));
+}
+
+[part="literal"] {
+color: var(--_segment-literal-color, var(--helix-color-foreground-muted));
+white-space: pre;
+}
+
+:host(:disabled) [part="segments"] {
+color: var(--helix-color-foreground-subtle);
+cursor: not-allowed;
+}`);

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

@@ -19,9 +19,12 @@ inline-size: var(--skeleton-size, var(--helix-size-control));
 }
 
 [part="skeleton"] {
-background-color: color-mix(in oklab, var(--helix-color-foreground) 8%, transparent);
+background-color: var(
+--skeleton-color,
+color-mix(in oklab, var(--helix-color-foreground) 8%, transparent)
+);
 block-size: 100%;
-border-radius: var(--helix-radii-sm);
+border-radius: var(--skeleton-radius, var(--helix-radii-sm));
 display: block;
 inline-size: 100%;
 
@@ -30,11 +33,13 @@ position: relative;
 }
 
 [part="skeleton"]::after {
-animation: helix-skeleton-sweep calc(var(--helix-duration-slow) * 4) ease-in-out infinite;
+animation: helix-skeleton-sweep var(--skeleton-duration, calc(var(--helix-duration-slow) * 4))
+ease-in-out infinite;
 background-image: linear-gradient(
 90deg,
 transparent 0%,
-color-mix(in oklab, var(--helix-color-foreground) 8%, transparent) 50%,
+var(--skeleton-sheen-color, color-mix(in oklab, var(--helix-color-foreground) 8%, transparent))
+50%,
 transparent 100%
 );
 content: "";
@@ -53,6 +58,48 @@ border-radius: var(--helix-radii-full);
 border-radius: var(--helix-radii-full);
 }
 
+:host([effect="pulse"]) [part="skeleton"]::after,
+:host([effect="none"]) [part="skeleton"]::after {
+animation: none;
+background-image: none;
+}
+
+:host([effect="pulse"]) [part="skeleton"] {
+animation: helix-skeleton-pulse var(--skeleton-duration, calc(var(--helix-duration-slow) * 4))
+ease-in-out infinite;
+}
+
+@keyframes helix-skeleton-pulse {
+50% {
+opacity: 0.4;
+}
+}
+
+:host(:not(:empty)) {
+block-size: auto;
+inline-size: fit-content;
+max-inline-size: 100%;
+position: relative;
+}
+
+:host(:not(:empty)) [part="content"] {
+display: block;
+}
+
+:host(:not(:empty)) [part="skeleton"] {
+block-size: auto;
+inset: 0;
+position: absolute;
+}
+
+:host(:not(:empty):not([loading])) [part="skeleton"] {
+display: none;
+}
+
+:host([loading]:not(:empty)) [part="content"] {
+visibility: hidden;
+}
+
 @keyframes helix-skeleton-sweep {
 from {
 translate: -50% 0;
@@ -64,8 +111,12 @@ translate: 50% 0;
 }
 
 @media (prefers-reduced-motion: reduce) {
-[part="skeleton"]::after {
+[part="skeleton"]::after,
+:host([effect="pulse"]) [part="skeleton"] {
 animation: none;
+}
+
+[part="skeleton"]::after {
 background-image: none;
 }
 }

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

@@ -5,7 +5,11 @@ import type { CSSResultGroup } from 'lit';
  *
  * @description
  * Animates a highlight sweeping across the block, which reads as work in
- * progress. A block fading in and out can look broken.
+ * progress. A block fading in and out can look broken, so `effect="pulse"` is
+ * a choice rather than the default.
+ *
+ * Around content with `loading`, the skeleton takes the content's box and
+ * paints over it, and the content is hidden until `loading` is taken off.
  *
  * @since 0.1.0
  * @status stable
@@ -13,12 +17,24 @@ import type { CSSResultGroup } from 'lit';
  * @aliases Placeholder, Shimmer, Ghost
  * @documentation https://fusion.dev/helix/components/skeleton
  *
+ * @csspart content - The box around the content, hidden while `loading`.
  * @csspart skeleton - The placeholder shape.
  *
  * @cssproperty --skeleton-block-size - The height of the block shape, which is the shape when `shape` is unset. Defaults to the control height.
+ * @cssproperty --skeleton-color - The placeholder's fill.
+ * @cssproperty --skeleton-duration - How long one sweep or one pulse takes.
+ * @cssproperty --skeleton-radius - The corner of the block shape.
+ * @cssproperty --skeleton-sheen-color - The highlight the sweep carries across the fill.
  * @cssproperty --skeleton-size - The diameter of the circle shape.
  */
 export declare class HelixSkeleton extends HelixHeadlessSkeleton {
+    /**
+     * How the placeholder shows it is waiting: a sweep when unset, `pulse` to
+     * fade the fill in and out, or `none` to sit still.
+     *
+     * Reduced motion stills both.
+     */
+    effect?: 'none' | 'pulse';
     /**
      * The shape of the placeholder: `text`, `circle`, or a block when unset.
      *

package/dist/skeleton/root/skeleton-root.js

@@ -11,6 +11,9 @@ import { styles } from './skeleton-root.css.js';
 let HelixSkeleton = class HelixSkeleton extends HelixHeadlessSkeleton {
     static { this.styles = styles; }
 };
+__decorate([
+    property({ reflect: true })
+], HelixSkeleton.prototype, "effect", void 0);
 __decorate([
     property({ reflect: true })
 ], HelixSkeleton.prototype, "shape", void 0);

package/dist/skip-link/root/skip-link-root.css.js

@@ -1,26 +1,26 @@
 import { createSheet } from '@fusion.dev/helix-core';
 export const styles = createSheet(`:host {
 display: block;
-inset-block-start: var(--helix-space-sm);
-inset-inline-start: var(--helix-space-sm);
+inset-block-start: var(--skip-link-inset-block, var(--helix-space-sm));
+inset-inline-start: var(--skip-link-inset-inline, var(--helix-space-sm));
 position: fixed;
 z-index: var(--helix-layer-overlay);
 }
 
 [part="link"] {
-background-color: var(--helix-color-surface-inverse);
+background-color: var(--skip-link-background-color, var(--helix-color-surface-inverse));
 border: var(--skip-link-border-width, var(--helix-border-floating)) solid
 var(--skip-link-border-color, var(--helix-color-border));
-border-radius: var(--helix-radii-sm);
+border-radius: var(--skip-link-radius, var(--helix-radii-sm));
 box-shadow: var(--skip-link-shadow, var(--helix-shadow-floating));
-color: var(--helix-color-foreground-inverse);
+color: var(--skip-link-color, var(--helix-color-foreground-inverse));
 display: inline-block;
 font-family: var(--helix-font-sans);
-font-size: var(--helix-text-sm);
+font-size: var(--skip-link-font-size, var(--helix-text-sm));
 font-weight: var(--helix-weight-medium);
 line-height: var(--helix-leading-normal);
-padding-block: var(--helix-space-sm);
-padding-inline: var(--helix-space-md);
+padding-block: var(--skip-link-padding-block, var(--helix-space-sm));
+padding-inline: var(--skip-link-padding-inline, var(--helix-space-md));
 text-decoration: none;
 }
 

package/dist/skip-link/root/skip-link-root.d.ts

@@ -22,10 +22,19 @@ import type { CSSResultGroup } from 'lit';
  * @aliases Skip navigation, Skip to content
  * @documentation https://fusion.dev/helix/components/skip-link
  *
+ * @cssproperty --skip-link-background-color - The background of the link while it is shown.
  * @cssproperty --skip-link-border-color - The border color of the link while it is shown.
  * @cssproperty --skip-link-border-width - The border width of the link while it is shown. Follows
  *   `--helix-border-floating`, which is `0`, so the link is set apart by its shadow unless a
  *   theme sets a border.
+ * @cssproperty --skip-link-color - The text color of the link while it is shown.
+ * @cssproperty --skip-link-font-size - The size of the link's text.
+ * @cssproperty --skip-link-inset-block - How far the shown link sits from the top of the viewport.
+ * @cssproperty --skip-link-inset-inline - How far the shown link sits from the start edge of the
+ *   viewport.
+ * @cssproperty --skip-link-padding-block - The space above and below the link's text.
+ * @cssproperty --skip-link-padding-inline - The space either side of the link's text.
+ * @cssproperty --skip-link-radius - The corner radius of the link.
  * @cssproperty --skip-link-shadow - The shadow under the link while it is shown. Follows
  *   `--helix-shadow-floating`, because the link sits over the corner of the page.
  */

package/dist/speed-dial/item/speed-dial-item.css.js

@@ -26,10 +26,10 @@ opacity: 0.5;
 
 align-items: center;
 aspect-ratio: 1;
-background-color: var(--helix-color-surface-overlay);
+background-color: var(--speed-dial-item-background-color, var(--helix-color-surface-overlay));
 border-radius: var(--helix-radii-full);
 box-shadow: var(--helix-shadow-md);
-color: var(--helix-color-foreground);
+color: var(--speed-dial-item-color, var(--helix-color-foreground));
 display: inline-flex;
 inline-size: var(--speed-dial-item-size, var(--helix-size-control-tight));
 justify-content: center;
@@ -57,13 +57,20 @@ outline-offset: var(--helix-size-focus-offset);
 }
 
 [part="label"] {
-background-color: var(--helix-color-surface-overlay);
+background-color: var(--speed-dial-label-background-color, var(--helix-color-surface-overlay));
 border-radius: var(--helix-radii-sm);
 box-shadow: var(--helix-shadow-sm);
-color: var(--helix-color-foreground);
+color: var(--speed-dial-label-color, var(--helix-color-foreground));
 font-family: var(--helix-font-sans);
 font-size: var(--helix-text-sm);
 font-weight: var(--helix-weight-medium);
+opacity: var(--_speed-dial-label-opacity, 1);
 padding: var(--helix-space-2xs) var(--helix-space-xs);
+transition: opacity var(--helix-duration-fast) var(--helix-easing-standard);
 white-space: nowrap;
+}
+
+[part="item"]:hover [part="label"],
+[part="item"]:focus-visible [part="label"] {
+opacity: 1;
 }`);

package/dist/speed-dial/item/speed-dial-item.d.ts

@@ -14,7 +14,11 @@ import type { CSSResultGroup } from 'lit';
  * @aliases Speed dial action, FAB action, Quick action
  * @documentation https://fusion.dev/helix/components/speed-dial
  *
+ * @cssproperty --speed-dial-item-background-color - Fill of the round icon.
+ * @cssproperty --speed-dial-item-color - Color of the icon.
  * @cssproperty --speed-dial-item-size - Edge length of the icon.
+ * @cssproperty --speed-dial-label-background-color - Fill of the chip holding the action's name.
+ * @cssproperty --speed-dial-label-color - Color of the action's name.
  */
 export declare class HelixSpeedDialItem extends HelixHeadlessSpeedDialItem {
     static styles: CSSResultGroup;

package/dist/speed-dial/root/speed-dial-root.css.js

@@ -31,11 +31,11 @@ display: none;
 }
 
 [part="actions"] {
---_dial-from: var(--helix-space-md);
+--_dial-from: var(--speed-dial-travel, var(--helix-space-md));
 }
 
 [part="actions"][data-placement^="bottom"] {
---_dial-from: calc(var(--helix-space-md) * -1);
+--_dial-from: calc(var(--speed-dial-travel, var(--helix-space-md)) * -1);
 }
 
 [part="actions"] ::slotted(*) {
@@ -55,7 +55,7 @@ translate: 0 0;
 }
 
 [part="actions"] {
---_speed-dial-stagger: calc(var(--helix-duration-fast) / 3);
+--_speed-dial-stagger: var(--speed-dial-stagger, calc(var(--helix-duration-fast) / 3));
 }
 
 [part="actions"][data-placed] ::slotted(:nth-last-child(2)) {
@@ -140,4 +140,8 @@ outline-offset: var(--helix-size-focus-offset);
 :host {
 display: none;
 }
+}
+
+:host([labels="hover"]) {
+--_speed-dial-label-opacity: 0;
 }`);

package/dist/speed-dial/root/speed-dial-root.d.ts

@@ -15,9 +15,18 @@ import '../../icon/index.js';
  * @documentation https://fusion.dev/helix/components/speed-dial
  *
  * @cssproperty --speed-dial-gap - Space between the actions.
+ * @cssproperty --speed-dial-stagger - The wait between one action arriving and the next.
+ * @cssproperty --speed-dial-travel - How far each action moves as it arrives.
  */
 export declare class HelixSpeedDial extends HelixHeadlessSpeedDial {
     static styles: CSSResultGroup;
+    /**
+     * When the actions' names show. Unset, always, beside each action. `hover`
+     * shows a name only while its action is under the pointer or has focus, as
+     * a tooltip does, for a dial whose icons speak for themselves. The names stay
+     * the actions' accessible names either way.
+     */
+    labels?: 'hover';
 }
 declare global {
     interface HTMLElementTagNameMap {

package/dist/speed-dial/root/speed-dial-root.js

@@ -6,12 +6,16 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 };
 import { customElement } from '@fusion.dev/helix-core';
 import { HelixHeadlessSpeedDial } from '@fusion.dev/helix-headless/speed-dial';
+import { property } from 'lit/decorators.js';
 import { styles as glyphStyles } from '../../shared/glyph/glyph.css.js';
 import { styles } from './speed-dial-root.css.js';
 import '../../icon/index.js';
 let HelixSpeedDial = class HelixSpeedDial extends HelixHeadlessSpeedDial {
     static { this.styles = [glyphStyles, styles]; }
 };
+__decorate([
+    property({ reflect: true })
+], HelixSpeedDial.prototype, "labels", void 0);
 HelixSpeedDial = __decorate([
     customElement('helix-speed-dial')
 ], HelixSpeedDial);

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

@@ -5,20 +5,20 @@ align-content: start;
 
 align-items: baseline;
 display: grid;
-gap: var(--helix-space-2xs);
+gap: var(--stat-gap, var(--helix-space-2xs));
 grid-template-columns: auto 1fr;
 }
 
 slot[name="label"]::slotted(*) {
-color: var(--helix-color-foreground-muted);
-font-size: calc(var(--helix-text-xs) / var(--helix-text-md) * 1em);
+color: var(--stat-label-color, var(--helix-color-foreground-muted));
+font-size: var(--stat-label-size, calc(var(--helix-text-xs) / var(--helix-text-md) * 1em));
 font-weight: var(--helix-weight-medium);
 grid-column: 1 / -1;
 letter-spacing: var(--helix-tracking-wide);
 }
 
 slot:not([name]) {
-color: var(--helix-color-foreground);
+color: var(--stat-value-color, var(--helix-color-foreground));
 font-family: var(--helix-font-display);
 font-size: var(--stat-value-size, calc(var(--helix-text-3xl) / var(--helix-text-md) * 1em));
 font-weight: var(--helix-weight-semibold);
@@ -27,8 +27,8 @@ line-height: var(--helix-leading-tight);
 }
 
 slot[name="unit"]::slotted(*) {
-color: var(--helix-color-foreground-muted);
-font-size: calc(var(--helix-text-md) / var(--helix-text-md) * 1em);
+color: var(--stat-unit-color, var(--helix-color-foreground-muted));
+font-size: var(--stat-unit-size, calc(var(--helix-text-md) / var(--helix-text-md) * 1em));
 font-weight: var(--helix-weight-medium);
 }
 
@@ -40,7 +40,7 @@ order: 1;
 :host([direction="row-reverse"]) {
 align-items: baseline;
 display: flex;
-gap: var(--helix-space-xs);
+gap: var(--stat-gap, var(--helix-space-xs));
 }
 
 :host([direction="row"]) slot[name="label"]::slotted(*),

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

@@ -14,6 +14,14 @@ import type { CSSResultGroup } from 'lit';
  * @aliases Metric, KPI, Figure
  * @documentation https://fusion.dev/helix/components/stat
  *
+ * @csspart value - The slot the value is written in. A slot draws no box, so it takes the inherited properties, such as color and font, and passes them to the value.
+ *
+ * @cssproperty --stat-gap - Space between the label and the value, and between the value and the unit in a row.
+ * @cssproperty --stat-label-color - Color of the label.
+ * @cssproperty --stat-label-size - Size of the label.
+ * @cssproperty --stat-unit-color - Color of the unit.
+ * @cssproperty --stat-unit-size - Size of the unit.
+ * @cssproperty --stat-value-color - Color of the figure.
  * @cssproperty --stat-value-size - Size of the figure.
  */
 export declare class HelixStat extends HelixHeadlessStat {

package/dist/steps/step/step.js

@@ -7,10 +7,11 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 import { customElement } from '@fusion.dev/helix-core';
 import { HelixHeadlessStep } from '@fusion.dev/helix-headless/steps';
 import '../../button/index.js';
+import { styles as liveStyles } from '../../shared/live/live.css.js';
 import { styles } from './step.css.js';
 let HelixStep = class HelixStep extends HelixHeadlessStep {
     static { this.tier = 'helix-'; }
-    static { this.styles = styles; }
+    static { this.styles = [liveStyles, styles]; }
 };
 HelixStep = __decorate([
     customElement('helix-step')

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

@@ -41,13 +41,16 @@ background-color var(--helix-duration-fast) var(--helix-easing-standard),
 border-color var(--helix-duration-fast) var(--helix-easing-standard);
 }
 
-[part="track"]::after {
+[part="thumb"] {
+align-items: center;
+color: var(--switch-icon-color, var(--helix-color-foreground-muted));
+display: flex;
+justify-content: center;
 
 background-color: var(--switch-thumb-color, var(--helix-color-surface-overlay));
 block-size: calc(var(--_switch-height) - var(--_switch-inset) * 2);
 border: var(--helix-border-thin) solid var(--helix-color-border);
 border-radius: var(--helix-radii-full);
-content: "";
 inline-size: calc(var(--_switch-height) - var(--_switch-inset) * 2);
 inset-block-start: 50%;
 
@@ -58,8 +61,13 @@ translate: 0 -50%;
 transition: translate var(--helix-duration-fast) var(--helix-easing-emphasized);
 }
 
-:host(:state(checked)) [part="track"]::after {
+:host(:state(checked)) [part="thumb"] {
 border-color: transparent;
+color: var(--switch-icon-color, var(--switch-on-color, var(--helix-color-primary)));
+}
+
+[part="thumb"] ::slotted(*) {
+--icon-size: calc((var(--_switch-height) - var(--_switch-inset) * 2) * 0.7);
 }
 
 :host(:state(checked)) [part="track"] {
@@ -77,14 +85,14 @@ margin: var(--helix-space-none);
 opacity: 0;
 }
 
-:host(:state(checked)) [part="track"]::after {
+:host(:state(checked)) [part="thumb"] {
 
 background-color: var(--switch-thumb-color, var(--helix-color-foreground-on-primary));
 
 translate: calc(var(--_switch-width) - var(--_switch-height)) -50%;
 }
 
-[part="track"]:has([part="control"]:focus-visible)::after {
+[part="track"]:has([part="control"]:focus-visible) [part="thumb"] {
 outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);
 outline-offset: var(--helix-size-focus-offset);
 }

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

@@ -1,5 +1,5 @@
 import { HelixHeadlessSwitch } from '@fusion.dev/helix-headless/switch';
-import type { CSSResultGroup } from 'lit';
+import { type CSSResultGroup, type TemplateResult } from 'lit';
 /**
  * @summary A control that turns something on or off.
  *
@@ -17,19 +17,43 @@ import type { CSSResultGroup } from 'lit';
  * it, and the control looks like a small dash. The width follows the height, so
  * setting `--switch-block-size` widens the switch too and keeps the proportion.
  *
+ * The thumb is an element, the `thumb` part, and holds an icon for each state:
+ * one in the `on` slot shows while the switch is on, and one in the `off` slot
+ * while it is off.
+ *
  * @since 0.1.0
  * @status stable
  * @category forms
  * @aliases Toggle switch, On/off
  * @documentation https://fusion.dev/helix/components/switch
  *
+ * @slot - The label that names what the switch turns on.
+ * @slot feedback - The message that says what is wrong, for content richer than a string. It shows while there is a message.
+ * @slot hint - Help under the control, for content richer than the `hint` text.
+ * @slot off - An icon on the thumb while the switch is off.
+ * @slot on - An icon on the thumb while the switch is on.
+ *
+ * @csspart control - The input.
+ * @csspart feedback - The message that says what is wrong.
+ * @csspart field - The row: the track and its label.
+ * @csspart hint - Help under the control, while nothing is wrong.
+ * @csspart label - The label beside the track.
+ * @csspart thumb - The thumb that travels along the track, and the icon on it.
+ * @csspart track - The track.
+ *
  * @cssproperty --switch-block-size - Height of the track. The width follows it.
+ * @cssproperty --switch-icon-color - Color of the icon on the thumb. Without it, the icon is muted while off and takes the on color while on.
  * @cssproperty --switch-inline-size - Length of the track. Set it to override the length derived from the height.
  * @cssproperty --switch-on-color - Fill when the switch is on.
  * @cssproperty --switch-thumb-color - Color of the thumb, in both states.
  */
 export declare class HelixSwitch extends HelixHeadlessSwitch {
     static styles: CSSResultGroup;
+    /**
+     * The thumb as an element, so it is a part and holds an icon for each state.
+     * The slot for the other state is `hidden`, which takes its icon out.
+     */
+    protected renderThumb(): TemplateResult;
 }
 declare global {
     interface HTMLElementTagNameMap {

package/dist/switch/root/switch-root.js

@@ -6,11 +6,18 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 };
 import { customElement } from '@fusion.dev/helix-core';
 import { HelixHeadlessSwitch } from '@fusion.dev/helix-headless/switch';
+import { html } from 'lit';
 import { styles as fieldStyles } from '../../shared/field/field.css.js';
 import { styles as fieldInlineStyles } from '../../shared/field/field-inline.css.js';
 import { styles } from './switch-root.css.js';
 let HelixSwitch = class HelixSwitch extends HelixHeadlessSwitch {
     static { this.styles = [fieldStyles, fieldInlineStyles, styles]; }
+    renderThumb() {
+        return html `<span part="thumb" aria-hidden="true"
+      ><slot name="on" ?hidden=${!this.checked}></slot
+      ><slot name="off" ?hidden=${this.checked}></slot
+    ></span>`;
+    }
 };
 HelixSwitch = __decorate([
     customElement('helix-switch')

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

@@ -15,6 +15,24 @@ inline-size: 100%;
 display: contents;
 }
 
+::slotted([slot="heading"]) {
+color: var(--table-title-color, var(--helix-color-foreground));
+display: block;
+font-family: var(--helix-font-sans);
+font-size: var(--table-title-text, var(--helix-text-md));
+font-weight: var(--helix-weight-semibold);
+margin-block: var(--helix-space-none) var(--table-title-gap, var(--helix-space-sm));
+}
+
+[part="select-all"] {
+align-items: center;
+border-block-end: var(--helix-border-thin) solid var(--helix-color-border);
+box-sizing: border-box;
+display: flex;
+min-block-size: var(--helix-size-control-loose);
+padding-inline: var(--helix-space-none) var(--helix-space-md);
+}
+
 :host([loading]) [part="table"] {
 opacity: 0.5;
 }

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

@@ -1,5 +1,6 @@
 import { HelixHeadlessTable } from '@fusion.dev/helix-headless/table';
 import type { CSSResultGroup } from 'lit';
+import '../../checkbox/index.js';
 /**
  * @summary A table of data, laid out on a grid.
  *
@@ -13,13 +14,18 @@ import type { CSSResultGroup } from 'lit';
  * @documentation https://fusion.dev/helix/components/table
  *
  * @slot - The table's rows.
+ * @slot heading - Words that name the table, shown above it in the weight of a heading.
  *
  * @csspart live - A live region that repeats the empty and loading text, so screen readers announce it when it changes. Visually hidden in the styled tier.
  * @csspart table - The grid.
  *
  * @cssproperty --table-columns - Track list for the columns. It overrides the track list worked out from the columns.
+ * @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.
  */
 export declare class HelixTable extends HelixHeadlessTable {
+    static tier: string;
     static styles: CSSResultGroup;
 }
 declare global {

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

@@ -9,7 +9,9 @@ import { HelixHeadlessTable } from '@fusion.dev/helix-headless/table';
 import { styles as collectionStateStyles } from '../../shared/collection/state.css.js';
 import { styles as liveStyles } from '../../shared/live/live.css.js';
 import { styles } from './table-root.css.js';
+import '../../checkbox/index.js';
 let HelixTable = class HelixTable extends HelixHeadlessTable {
+    static { this.tier = 'helix-'; }
     static { this.styles = [liveStyles, collectionStateStyles, styles]; }
 };
 HelixTable = __decorate([