@fusion.dev/helix 0.147.0 → 0.149.0

package/dist/sandbox/terminal/sandbox-terminal.js

@@ -4,17 +4,11 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
-import { customElement, HelixBeforeChangeEvent, HelixElement, requestChange, wordsConverter, } from '@fusion.dev/helix-core';
+import { customElement, formatWords, HelixBeforeChangeEvent, HelixElement, requestChange, words, wordsConverter, } from '@fusion.dev/helix-core';
 import { html, nothing } from 'lit';
 import { property, state } from 'lit/decorators.js';
 import { LEVELS, shows } from '../levels.js';
 import { styles } from './sandbox-terminal.css.js';
-const LEVEL_WORDS = {
-    error: 'Errors',
-    info: 'Info and above',
-    log: 'All levels',
-    warn: 'Warnings and errors',
-};
 const LIMIT = 200;
 const stop = (event) => event.stopPropagation();
 let HelixSandboxTerminal = class HelixSandboxTerminal extends HelixElement {
@@ -25,7 +19,13 @@ let HelixSandboxTerminal = class HelixSandboxTerminal extends HelixElement {
         this.emptyLabel = 'Nothing written to the console yet.';
         this.label = 'Console output';
         this.levelLabel = 'Levels shown';
-        this.levelWords = {};
+        this.levelWords = {
+            error: 'Errors',
+            info: 'Info and above',
+            log: 'All levels',
+            warn: 'Warnings and errors',
+        };
+        this.timesLabel = '{count} times';
         this.entries = [];
         this.following = true;
         this.handleLevel = (event) => {
@@ -46,6 +46,7 @@ let HelixSandboxTerminal = class HelixSandboxTerminal extends HelixElement {
             }
         };
     }
+    static { this.words = 'helix-sandbox-terminal'; }
     get log() {
         return this.renderRoot.querySelector('[part="log"]');
     }
@@ -77,13 +78,14 @@ let HelixSandboxTerminal = class HelixSandboxTerminal extends HelixElement {
         if (!this.controls) {
             return nothing;
         }
+        const clear = this.clearLabel;
         return html `<div part="controls">
       <select part="filter" aria-label=${this.levelLabel} @change=${this.handleLevel} @input=${stop}>
         ${LEVELS.map((one) => html `<option value=${one} ?selected=${(this.level ?? 'log') === one}>
-              ${this.levelWords?.[one] ?? LEVEL_WORDS[one]}
+              ${this.levelWords[one]}
             </option>`)}
       </select>
-      <button part="clear" type="button" @click=${() => this.clear()}>${this.clearLabel}</button>
+      <button part="clear" type="button" @click=${() => this.clear()}>${clear}</button>
     </div>`;
     }
     render() {
@@ -97,7 +99,7 @@ let HelixSandboxTerminal = class HelixSandboxTerminal extends HelixElement {
                 >
                 <span part="message">${entry.text}</span>
                 ${entry.count > 1
-                ? html `<span part="count" aria-label="${entry.count} times"
+                ? html `<span part="count" aria-label=${formatWords(this, 'timesLabel', { count: entry.count })}
                         >${entry.count}</span
                       >`
                 : nothing}
@@ -107,26 +109,35 @@ let HelixSandboxTerminal = class HelixSandboxTerminal extends HelixElement {
     static { this.styles = styles; }
 };
 __decorate([
+    words,
     property({ attribute: 'clear-label' })
 ], HelixSandboxTerminal.prototype, "clearLabel", void 0);
 __decorate([
     property({ reflect: true, type: Boolean })
 ], HelixSandboxTerminal.prototype, "controls", void 0);
 __decorate([
+    words,
     property({ attribute: 'empty-label' })
 ], HelixSandboxTerminal.prototype, "emptyLabel", void 0);
 __decorate([
+    words,
     property()
 ], HelixSandboxTerminal.prototype, "label", void 0);
 __decorate([
     property()
 ], HelixSandboxTerminal.prototype, "level", void 0);
 __decorate([
+    words,
     property({ attribute: 'level-label' })
 ], HelixSandboxTerminal.prototype, "levelLabel", void 0);
 __decorate([
+    words,
     property({ attribute: 'level-words', converter: wordsConverter })
 ], HelixSandboxTerminal.prototype, "levelWords", void 0);
+__decorate([
+    words,
+    property({ attribute: 'times-label' })
+], HelixSandboxTerminal.prototype, "timesLabel", void 0);
 __decorate([
     state()
 ], HelixSandboxTerminal.prototype, "entries", void 0);

package/dist/scroll-area/root/scroll-area-root.css.js

@@ -1,16 +1,17 @@
 import { createSheet } from '@fusion.dev/helix-core';
-export const styles = createSheet(`:host {display: block;position: relative;}[part="viewport"] {block-size: 100%;overflow: auto;overscroll-behavior: contain;}[part="viewport"]:focus-visible {outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);outline-offset: calc(var(--helix-size-focus-offset) * -1);}[part="viewport"] {scrollbar-color: var(--scroll-area-thumb-color, var(--helix-color-border))
-var(--scroll-area-track-color, transparent);scrollbar-width: var(--scroll-area-scrollbar, thin);}:host([scrollbars]) [part="viewport"] {scrollbar-width: none;}[part~="scrollbar"] {--_scroll-area-thumb: max(
+export const styles = createSheet(`:host {display: block;position: relative;}[part="viewport"] {block-size: 100%;overflow: auto;overscroll-behavior: contain;}[part="viewport"]:focus-visible {outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);outline-offset: calc(var(--helix-size-focus-offset) * -1);}[part="viewport"] {scrollbar-color: var(--scroll-area-thumb-color, var(--helix-scrollbar-thumb-color))
+var(--scroll-area-track-color, var(--helix-scrollbar-track-color));scrollbar-width: var(--scroll-area-scrollbar, thin);}[part="viewport"]:hover {scrollbar-color: var(--scroll-area-thumb-hover-color, var(--helix-scrollbar-thumb-hover-color))
+var(--scroll-area-track-color, var(--helix-scrollbar-track-color));}:host([scrollbars]) [part="viewport"] {scrollbar-width: none;}[part~="scrollbar"] {--_scroll-area-thumb: max(
 var(--scroll-area-thumb-min-size, var(--helix-space-lg)),
 var(--scroll-area-thumb-fraction, 1) *
 100%
-);background-color: var(--scroll-area-track-color, transparent);opacity: 0;position: absolute;touch-action: none;transition: opacity var(--helix-duration-fast) var(--helix-easing-standard);user-select: none;z-index: calc(var(--helix-layer-raised) + 1);}[part~="scrollbar-visible"] {opacity: 1;}[part~="scrollbar-vertical"] {inline-size: var(--scroll-area-scrollbar-size, var(--helix-space-sm));inset-block: 0;inset-inline-end: 0;}[part~="scrollbar-horizontal"] {block-size: var(--scroll-area-scrollbar-size, var(--helix-space-sm));inset-block-end: 0;inset-inline: 0;}:host(:state(scrollbar-horizontal)) [part~="scrollbar-vertical"] {inset-block-end: var(--scroll-area-scrollbar-size, var(--helix-space-sm));}:host(:state(scrollbar-vertical)) [part~="scrollbar-horizontal"] {inset-inline-end: var(--scroll-area-scrollbar-size, var(--helix-space-sm));}[part~="thumb"] {background-color: var(--scroll-area-thumb-color, var(--helix-color-border));border-radius: var(--helix-radii-full);position: absolute;}[part~="thumb"]:hover {background-color: var(--scroll-area-thumb-hover-color, var(--helix-color-foreground-subtle));}[part~="thumb-vertical"] {block-size: var(--_scroll-area-thumb);inset-block-start: calc(
+);background-color: var(--scroll-area-track-color, var(--helix-scrollbar-track-color));opacity: 0;position: absolute;touch-action: none;transition: opacity var(--helix-duration-fast) var(--helix-easing-standard);user-select: none;z-index: calc(var(--helix-layer-raised) + 1);}[part~="scrollbar-visible"] {opacity: 1;}[part~="scrollbar-vertical"] {inline-size: var(--scroll-area-scrollbar-size, var(--helix-space-sm));inset-block: 0;inset-inline-end: 0;}[part~="scrollbar-horizontal"] {block-size: var(--scroll-area-scrollbar-size, var(--helix-space-sm));inset-block-end: 0;inset-inline: 0;}:host(:state(scrollbar-horizontal)) [part~="scrollbar-vertical"] {inset-block-end: var(--scroll-area-scrollbar-size, var(--helix-space-sm));}:host(:state(scrollbar-vertical)) [part~="scrollbar-horizontal"] {inset-inline-end: var(--scroll-area-scrollbar-size, var(--helix-space-sm));}[part~="thumb"] {background-color: var(--scroll-area-thumb-color, var(--helix-scrollbar-thumb-color));border-radius: var(--helix-radii-full);position: absolute;}[part~="thumb"]:hover {background-color: var(--scroll-area-thumb-hover-color, var(--helix-scrollbar-thumb-hover-color));}[part~="thumb-vertical"] {block-size: var(--_scroll-area-thumb);inset-block-start: calc(
 var(--scroll-area-scroll-fraction, 0) *
 (100% - var(--_scroll-area-thumb))
 );inset-inline: var(--helix-border-thick);}[part~="thumb-horizontal"] {inline-size: var(--_scroll-area-thumb);inset-block: var(--helix-border-thick);inset-inline-start: calc(
 var(--scroll-area-scroll-fraction, 0) *
 (100% - var(--_scroll-area-thumb))
-);}[part="corner"] {background-color: var(--scroll-area-track-color, transparent);block-size: var(--scroll-area-scrollbar-size, var(--helix-space-sm));inline-size: var(--scroll-area-scrollbar-size, var(--helix-space-sm));inset-block-end: 0;inset-inline-end: 0;position: absolute;}:host::before,
+);}[part="corner"] {background-color: var(--scroll-area-track-color, var(--helix-scrollbar-track-color));block-size: var(--scroll-area-scrollbar-size, var(--helix-space-sm));inline-size: var(--scroll-area-scrollbar-size, var(--helix-space-sm));inset-block-end: 0;inset-inline-end: 0;position: absolute;}:host::before,
 :host::after {content: "";opacity: 0;pointer-events: none;position: absolute;transition: opacity var(--helix-duration-fast) var(--helix-easing-standard);z-index: var(--helix-layer-raised);}:host::before {background: linear-gradient(
 to bottom,
 var(--scroll-area-fade-color, var(--helix-color-background)),

package/dist/scroll-area/root/scroll-area-root.d.ts

@@ -25,10 +25,10 @@ import type { CSSResultGroup } from 'lit';
  * @cssproperty --scroll-area-fade-inline-start - The depth of the fade at the inline start, or `0` to remove it.
  * @cssproperty --scroll-area-scrollbar - The scrollbar width, as a `scrollbar-width` keyword.
  * @cssproperty --scroll-area-scrollbar-size - The thickness of each scrollbar drawn under `scrollbars`, and the size of the corner.
- * @cssproperty --scroll-area-thumb-color - The color of the scrollbar's thumb.
- * @cssproperty --scroll-area-thumb-hover-color - The color of a thumb drawn under `scrollbars` while the pointer is over it.
+ * @cssproperty --scroll-area-thumb-color - The color of the scrollbar's thumb. Defaults to `--helix-scrollbar-thumb-color`.
+ * @cssproperty --scroll-area-thumb-hover-color - The color of the browser's thumb while the pointer is over the scroll area, and of a thumb drawn under `scrollbars` while the pointer is over it. Defaults to `--helix-scrollbar-thumb-hover-color`.
  * @cssproperty --scroll-area-thumb-min-size - The shortest a thumb drawn under `scrollbars` gets, however long the content.
- * @cssproperty --scroll-area-track-color - The color of the scrollbar's track.
+ * @cssproperty --scroll-area-track-color - The color of the scrollbar's track. Defaults to `--helix-scrollbar-track-color`.
  */
 export declare class HelixScrollArea extends HelixHeadlessScrollArea {
     static styles: CSSResultGroup;

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

@@ -1,6 +1,9 @@
 import { createSheet } from '@fusion.dev/helix-core';
 export const styles = createSheet(`:host {display: flex;flex-direction: column;gap: var(--helix-space-2xs);position: relative;}[part="trigger"] {all: unset;align-items: center;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;color: var(--helix-color-foreground);cursor: pointer;display: flex;font-family: var(--helix-font-sans);font-size: var(--helix-text-sm);gap: var(--helix-space-xs);justify-content: space-between;padding-inline: var(--helix-space-xs);transition: border-color var(--helix-duration-fast) var(--helix-easing-standard);}:host(:not(:disabled)) [part="trigger"]:hover {border-color: var(--helix-color-primary);}[part="trigger"]:focus-visible {border-color: var(--helix-color-primary);outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);outline-offset: 0;}:host(:state(invalid)) [part="trigger"],
 :host(:state(invalid)) [part="trigger"]:hover,
-:host(:state(invalid)) [part="trigger"]:focus-visible {border-color: var(--helix-color-danger);outline-color: var(--helix-color-danger);}:host(:disabled) [part="trigger"] {cursor: not-allowed;opacity: 0.5;}:host([emphasis="ghost"]) {inline-size: fit-content;}:host([emphasis="ghost"]) [part="trigger"] {background-color: transparent;block-size: var(--helix-size-control-tight);border-color: transparent;justify-content: start;padding-inline: var(--helix-space-2xs);}:host([emphasis="ghost"]:not(:disabled)) [part="trigger"]:hover {background-color: color-mix(in oklab, var(--helix-color-foreground) 8%, transparent);border-color: transparent;}:host([emphasis="ghost"]) [part="trigger"]:focus-visible {border-color: var(--helix-color-primary);}[part="value"] {flex: 1;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;}[part="surface"] {--_floating-border-color: var(--select-border-color, var(--helix-color-border));--_floating-border-width: var(--select-border-width, var(--helix-border-floating));--_floating-shadow: var(--select-shadow, var(--helix-shadow-floating));--option-radius: var(--helix-radii-none);inline-size: var(--floating-anchor-inline-size, 100%);min-inline-size: max-content;max-block-size: var(--floating-available-block-size, none);padding-block: var(--helix-space-xs);padding-inline: var(--helix-space-none);}[part="indicator"],
+:host(:state(invalid)) [part="trigger"]:focus-visible {border-color: var(--helix-color-danger);outline-color: var(--helix-color-danger);}:host(:disabled) [part="trigger"] {cursor: not-allowed;opacity: 0.5;}:host([emphasis="ghost"]) {inline-size: fit-content;}:host([emphasis="ghost"]) [part="trigger"] {background-color: transparent;block-size: var(--helix-size-control-tight);border-color: transparent;justify-content: start;padding-inline: var(--helix-space-2xs);}:host([emphasis="ghost"]:not(:disabled)) [part="trigger"]:hover {background-color: color-mix(in oklab, var(--helix-color-foreground) 8%, transparent);border-color: transparent;}:host([emphasis="ghost"]) [part="trigger"]:focus-visible {border-color: var(--helix-color-primary);}[part="value"] {flex: 1;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;}[part="surface"] {--_floating-border-color: var(--select-border-color, var(--helix-color-border));--_floating-border-width: var(--select-border-width, var(--helix-border-floating));--_floating-shadow: var(--select-shadow, var(--helix-shadow-floating));--option-radius: var(--helix-radii-none);inline-size: max-content;max-inline-size: calc(100vw - var(--helix-space-xs) * 2);min-inline-size: min(
+var(--floating-anchor-inline-size, 100%),
+calc(100vw - var(--helix-space-xs) * 2)
+);max-block-size: var(--floating-available-block-size, none);padding-block: var(--helix-space-xs);padding-inline: var(--helix-space-none);}[part="indicator"],
 ::slotted([slot="indicator"]) {transition: scale var(--helix-duration-fast) var(--helix-easing-standard);}:host(:state(open)) [part="indicator"],
 :host(:state(open)) ::slotted([slot="indicator"]) {scale: 1 -1;}[part="listbox"]::part(items) {background-color: transparent;border: none;border-radius: var(--helix-radii-none);max-block-size: var(--select-surface-max-block-size, 14rem);padding: var(--helix-space-none);}[part="listbox"]::part(items):focus-visible {outline: none;}[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);}@media print {:host {print-color-adjust: exact;}}`);

package/dist/select/root/select-root.js

@@ -11,12 +11,14 @@ import { styles as fieldStyles } from '../../shared/field/field.css.js';
 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 } from './select-root.css.js';
 import '../../listbox/index.js';
 import '../../option/index.js';
 let HelixSelect = class HelixSelect extends HelixHeadlessSelect {
     static { this.tier = 'helix-'; }
     static { this.styles = [
+        liveStyles,
         fieldStyles,
         fieldStackedStyles,
         floatingPanelStyles,

package/dist/shared/viewport/viewport.css.js

@@ -8,7 +8,7 @@ export const styles = createSheet(`[part="controls"] {display: grid;gap: var(--h
 ".      down  full";}[part="controls"]:not(:has([part="pan-up"])) {grid-template-areas:
 "zoomin"
 "zoomout"
-"full";}:host(:fullscreen) {display: block;}:host(:state(fullscreen)) [part="region"] {block-size: 100dvh;border: none;border-radius: 0;}:host([controls-placement="top-end"]) [part="controls"] {inset-block: var(--helix-space-sm) auto;inset-inline: auto var(--helix-space-sm);}:host([controls-placement="top-start"]) [part="controls"] {inset-block: var(--helix-space-sm) auto;inset-inline: var(--helix-space-sm) auto;}:host([controls-placement="bottom-end"]) [part="controls"] {inset-block: auto var(--helix-space-sm);inset-inline: auto var(--helix-space-sm);}:host([controls-placement="bottom-start"]) [part="controls"] {inset-block: auto var(--helix-space-sm);inset-inline: var(--helix-space-sm) auto;}[part="pan-up"] {grid-area: up;}[part="pan-down"] {grid-area: down;}[part="pan-start"] {grid-area: start;}[part="pan-end"] {grid-area: end;}[part="zoom-in"] {grid-area: zoomin;}[part="zoom-out"] {grid-area: zoomout;}[part="fullscreen"] {grid-area: full;}[part="controls"] button {align-items: center;background-color: var(--viewport-control-background-color, var(--helix-color-surface-overlay));border: var(--helix-border-floating) solid var(--helix-color-border);border-radius: var(--helix-radii-sm);box-shadow: var(--helix-shadow-floating);block-size: var(--helix-size-control-sm);color: var(--helix-color-foreground);cursor: pointer;display: inline-flex;font-family: var(--helix-font-sans);font-size: var(--helix-text-sm);inline-size: var(--helix-size-control-sm);justify-content: center;padding: 0;}[part="controls"] button:focus-visible {outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);outline-offset: var(--helix-size-focus-offset);}[part="controls"] button:hover {background-color: color-mix(
+"full";}:host(:fullscreen) {display: block;}:host(:state(fullscreen)) [part="region"] {block-size: 100dvh;border: none;border-radius: 0;}:host([controls-placement="top-end"]) [part="controls"] {inset-block: var(--helix-space-sm) auto;inset-inline: auto var(--helix-space-sm);}:host([controls-placement="top-start"]) [part="controls"] {inset-block: var(--helix-space-sm) auto;inset-inline: var(--helix-space-sm) auto;}:host([controls-placement="bottom-end"]) [part="controls"] {inset-block: auto var(--helix-space-sm);inset-inline: auto var(--helix-space-sm);}:host([controls-placement="bottom-start"]) [part="controls"] {inset-block: auto var(--helix-space-sm);inset-inline: var(--helix-space-sm) auto;}[part="pan-up"] {grid-area: up;}[part="pan-down"] {grid-area: down;}[part="pan-start"] {grid-area: start;}[part="pan-end"] {grid-area: end;}[part="zoom-in"] {grid-area: zoomin;}[part="zoom-out"] {grid-area: zoomout;}[part="fullscreen"] {grid-area: full;}[part="controls"] button {align-items: center;background-color: var(--viewport-control-background-color, var(--helix-color-surface-overlay));border: var(--helix-border-floating) solid var(--helix-color-border);border-radius: var(--helix-radii-sm);box-shadow: var(--helix-shadow-floating);block-size: var(--helix-size-control-sm);color: var(--helix-color-foreground);cursor: pointer;display: inline-flex;font-family: var(--helix-font-sans);font-size: var(--helix-text-sm);inline-size: var(--helix-size-control-sm);justify-content: center;padding: 0;}[part="controls"] button ::slotted(*) {--icon-size: var(--helix-size-icon-sm);block-size: var(--helix-size-icon-sm);inline-size: var(--helix-size-icon-sm);}[part="controls"] button:focus-visible {outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);outline-offset: var(--helix-size-focus-offset);}[part="controls"] button:hover {background-color: color-mix(
 in oklab,
 var(--helix-color-foreground) 10%,
 var(--viewport-control-background-color, var(--helix-color-surface-overlay))

package/dist/speed-dial/group/speed-dial-group.css.d.ts

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

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

@@ -0,0 +1,2 @@
+import { createSheet } from '@fusion.dev/helix-core';
+export const styles = createSheet(`:host {display: block;}[part="group"] {align-items: var(--_speed-dial-align, flex-end);display: flex;flex-direction: column;gap: var(--speed-dial-gap, var(--helix-space-sm));}[part="label"] {background-color: var(--speed-dial-label-background-color, var(--helix-color-surface-overlay));border-radius: var(--helix-radii-sm);color: var(--speed-dial-group-label-color, var(--helix-color-foreground-muted));font-family: var(--helix-font-sans);font-size: var(--speed-dial-group-label-font-size, var(--helix-text-xs));font-weight: var(--helix-weight-medium);padding: var(--helix-space-2xs) var(--helix-space-xs);white-space: nowrap;}[part="label"][hidden] {display: none;}`);

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

@@ -0,0 +1,27 @@
+import { HelixHeadlessSpeedDialGroup } from '@fusion.dev/helix-headless/speed-dial';
+import type { CSSResultGroup } from 'lit';
+/**
+ * @summary A named set of actions inside a speed dial, set apart from the rest.
+ *
+ * @description
+ * A column of actions with its name above them, in the small muted words a
+ * menu heads its sections with, lined up on the side the trigger is on. The
+ * space between two groups is the space between two actions.
+ *
+ * @since 0.141.0
+ * @status stable
+ * @category actions
+ * @aliases Speed dial section, Action group
+ * @documentation https://fusion.dev/helix/components/speed-dial
+ *
+ * @cssproperty --speed-dial-group-label-color - Color of the group's name.
+ * @cssproperty --speed-dial-group-label-font-size - Size of the group's name.
+ */
+export declare class HelixSpeedDialGroup extends HelixHeadlessSpeedDialGroup {
+    static styles: CSSResultGroup;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'helix-speed-dial-group': HelixSpeedDialGroup;
+    }
+}

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

@@ -0,0 +1,16 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { customElement } from '@fusion.dev/helix-core';
+import { HelixHeadlessSpeedDialGroup } from '@fusion.dev/helix-headless/speed-dial';
+import { styles } from './speed-dial-group.css.js';
+let HelixSpeedDialGroup = class HelixSpeedDialGroup extends HelixHeadlessSpeedDialGroup {
+    static { this.styles = styles; }
+};
+HelixSpeedDialGroup = __decorate([
+    customElement('helix-speed-dial-group')
+], HelixSpeedDialGroup);
+export { HelixSpeedDialGroup };

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

@@ -1,2 +1,3 @@
+export * from './group/speed-dial-group.js';
 export * from './item/speed-dial-item.js';
 export * from './root/speed-dial-root.js';

package/dist/speed-dial/index.js

@@ -1,2 +1,3 @@
+export * from './group/speed-dial-group.js';
 export * from './item/speed-dial-item.js';
 export * from './root/speed-dial-root.js';

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

@@ -5,4 +5,4 @@ box-shadow var(--helix-duration-fast) var(--helix-easing-standard);}[part="item"
 --speed-dial-item-hover-background-color,
 color-mix(in oklab, var(--helix-color-foreground) 6%, var(--helix-color-surface-overlay))
 );box-shadow: var(--helix-shadow-lg);}[part="item"]:focus-visible {outline: none;}[part="item"]:focus-visible [part="icon"] {outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);outline-offset: var(--helix-size-focus-offset);}[part="label"] {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(--speed-dial-label-color, var(--helix-color-foreground));font-family: var(--helix-font-sans);font-size: var(--speed-dial-label-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;}`);
+[part="item"]:focus-visible [part="label"] {opacity: 1;}[part="shortcut"] {color: var(--speed-dial-shortcut-color, var(--helix-color-foreground-muted));margin-inline-start: var(--helix-space-sm);}[part="shortcut"][hidden] {display: none;}`);

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

@@ -22,6 +22,7 @@ import type { CSSResultGroup } from 'lit';
  * @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.
  * @cssproperty --speed-dial-label-font-size - Size of the action's name.
+ * @cssproperty --speed-dial-shortcut-color - Color of the shortcut drawn after the action's name.
  */
 export declare class HelixSpeedDialItem extends HelixHeadlessSpeedDialItem {
     static styles: CSSResultGroup;

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

@@ -1,5 +1,5 @@
 import { createSheet } from '@fusion.dev/helix-core';
-export const styles = createSheet(`:host {display: inline-flex;}[part="actions"] {background-color: transparent;border: none;display: flex;flex-direction: column;gap: var(--speed-dial-gap, var(--helix-space-sm));margin: var(--helix-space-none);overflow: visible;padding: var(--helix-space-none);}[part="actions"] {--_speed-dial-row: row-reverse;align-items: flex-end;}[part="actions"][data-placement$="-start"] {--_speed-dial-row: row;align-items: flex-start;}[part="actions"][hidden] {display: none;}[part="actions"] {--_dial-from: var(--speed-dial-travel, var(--helix-space-md));}[part="actions"][data-placement^="bottom"] {--_dial-from: calc(var(--speed-dial-travel, var(--helix-space-md)) * -1);}[part="actions"] ::slotted(*) {opacity: 0;scale: 0.8;transition:
+export const styles = createSheet(`:host {display: inline-flex;}[part="actions"] {background-color: transparent;border: none;display: flex;flex-direction: column;gap: var(--speed-dial-gap, var(--helix-space-sm));margin: var(--helix-space-none);overflow: visible;padding: var(--helix-space-none);}[part="actions"] {--_speed-dial-row: row-reverse;align-items: flex-end;}[part="actions"][data-placement$="-start"] {--_speed-dial-align: flex-start;--_speed-dial-row: row;align-items: flex-start;}[part="actions"][hidden] {display: none;}[part="actions"] {--_dial-from: var(--speed-dial-travel, var(--helix-space-md));}[part="actions"][data-placement^="bottom"] {--_dial-from: calc(var(--speed-dial-travel, var(--helix-space-md)) * -1);}[part="actions"] ::slotted(*) {opacity: 0;scale: 0.8;transition:
 opacity var(--helix-duration-fast) var(--helix-easing-standard),
 scale var(--helix-duration-fast) var(--helix-easing-emphasized),
 translate var(--helix-duration-fast) var(--helix-easing-emphasized);translate: 0 var(--_dial-from);}[part="actions"][data-placed] ::slotted(*) {opacity: 1;scale: 1;translate: 0 0;}[part="actions"] {--_speed-dial-stagger: var(--speed-dial-stagger, calc(var(--helix-duration-fast) / 3));}[part="actions"][data-placed] ::slotted(:nth-last-child(2)) {transition-delay: var(--_speed-dial-stagger);}[part="actions"][data-placed] ::slotted(:nth-last-child(3)) {transition-delay: calc(var(--_speed-dial-stagger) * 2);}[part="actions"][data-placed] ::slotted(:nth-last-child(4)) {transition-delay: calc(var(--_speed-dial-stagger) * 3);}[part="actions"][data-placed] ::slotted(:nth-last-child(n + 5)) {transition-delay: calc(var(--_speed-dial-stagger) * 4);}[part="actions"][data-placement^="bottom"][data-placed] ::slotted(:nth-child(2)) {transition-delay: var(--_speed-dial-stagger);}[part="actions"][data-placement^="bottom"][data-placed] ::slotted(:nth-child(3)) {transition-delay: calc(var(--_speed-dial-stagger) * 2);}[part="actions"][data-placement^="bottom"][data-placed] ::slotted(:nth-child(4)) {transition-delay: calc(var(--_speed-dial-stagger) * 3);}[part="actions"][data-placement^="bottom"][data-placed] ::slotted(:nth-child(n + 5)) {transition-delay: calc(var(--_speed-dial-stagger) * 4);}@media (prefers-reduced-motion: reduce) {[part="actions"] ::slotted(*) {opacity: 1;scale: 1;transition: none;transition-delay: 0s;translate: 0 0;}[part="trigger"] {transition: none;}}[part="trigger"] {--icon-size: var(--helix-size-icon);all: unset;align-items: center;background-color: var(--speed-dial-background-color, var(--helix-color-primary-surface));block-size: var(--speed-dial-size, var(--helix-size-control));border-radius: var(--helix-radii-full);box-shadow: var(--speed-dial-shadow, var(--helix-shadow-md));box-sizing: border-box;color: var(--speed-dial-color, var(--helix-color-foreground-on-primary));cursor: pointer;display: inline-flex;inline-size: var(--speed-dial-size, var(--helix-size-control));justify-content: center;transition: box-shadow var(--helix-duration-fast) var(--helix-easing-standard);}[part="trigger"]:hover {box-shadow: var(--helix-shadow-lg);}[part="trigger"]:active {box-shadow: var(--helix-shadow-sm);}[part="trigger"]:focus-visible {outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);outline-offset: var(--helix-size-focus-offset);}@media print {:host {display: none;}}:host([labels="hover"]) {--_speed-dial-label-opacity: 0;}:host([labels="hover"]) [part="actions"],

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

@@ -1,22 +1,30 @@
 import { createSheet } from '@fusion.dev/helix-core';
-export const styles = createSheet(`:host {display: flex;min-block-size: 0;min-inline-size: 0;position: relative;}:host(:is([orientation="vertical"], [data-axis="vertical"])) {flex-direction: column;}[part="start"] {flex: 0 0 var(--splitter-position, 50%);min-block-size: 0;min-inline-size: 0;overflow: auto;}[part="end"] {flex: 1 1 0;min-block-size: 0;min-inline-size: 0;overflow: auto;}[part="separator"] {background-color: transparent;box-sizing: border-box;cursor: col-resize;flex: none;inline-size: var(--splitter-target, var(--helix-space-xs));margin-inline: calc(var(--splitter-target, var(--helix-space-xs)) / -2);position: relative;touch-action: none;user-select: none;z-index: var(--helix-layer-raised);}[part="separator"]::before {background-color: var(--splitter-color, var(--helix-color-border));content: "";inline-size: var(--helix-border-thin);inset-block: 0;inset-inline-start: 50%;margin-inline-start: calc(var(--helix-border-thin) / -2);position: absolute;transition:
+export const styles = createSheet(`:host {display: flex;min-block-size: 0;min-inline-size: 0;position: relative;}:host(:is([orientation="vertical"], [data-axis="vertical"])) {flex-direction: column;}[part="start"] {flex: 0 0 var(--splitter-position, 50%);min-block-size: 0;min-inline-size: 0;overflow: auto;}[part="end"] {flex: 1 1 0;min-block-size: 0;min-inline-size: 0;overflow: auto;}[part="separator"] {background-color: transparent;box-sizing: border-box;cursor: col-resize;display: grid;flex: none;place-content: center;place-items: center;inline-size: var(--splitter-target, var(--helix-space-xs));margin-inline: calc(var(--splitter-target, var(--helix-space-xs)) / -2);position: relative;touch-action: none;user-select: none;z-index: var(--helix-layer-raised);}[part="separator"]::before {background-color: var(--splitter-color, var(--helix-color-border));content: "";inline-size: var(--splitter-thickness, var(--helix-border-thin));inset-block: 0;inset-inline-start: 50%;margin-inline-start: calc(var(--splitter-thickness, var(--helix-border-thin)) / -2);position: absolute;transition:
 background-color var(--helix-duration-fast) var(--helix-easing-standard),
-inline-size var(--helix-duration-fast) var(--helix-easing-standard);}:host(:is([orientation="vertical"], [data-axis="vertical"])) [part="separator"] {block-size: var(--splitter-target, var(--helix-space-xs));cursor: row-resize;inline-size: auto;margin-block: calc(var(--splitter-target, var(--helix-space-xs)) / -2);margin-inline: 0;}:host(:is([orientation="vertical"], [data-axis="vertical"])) [part="separator"]::before {block-size: var(--helix-border-thin);inline-size: auto;inset-block-start: 50%;inset-inline: 0;margin-block-start: calc(var(--helix-border-thin) / -2);transition:
+inline-size var(--helix-duration-fast) var(--helix-easing-standard);}:host(:is([orientation="vertical"], [data-axis="vertical"])) [part="separator"] {block-size: var(--splitter-target, var(--helix-space-xs));cursor: row-resize;inline-size: auto;margin-block: calc(var(--splitter-target, var(--helix-space-xs)) / -2);margin-inline: 0;}:host(:is([orientation="vertical"], [data-axis="vertical"])) [part="separator"]::before {block-size: var(--splitter-thickness, var(--helix-border-thin));inline-size: auto;inset-block-start: 50%;inset-inline: 0;margin-block-start: calc(var(--splitter-thickness, var(--helix-border-thin)) / -2);transition:
 background-color var(--helix-duration-fast) var(--helix-easing-standard),
 block-size var(--helix-duration-fast) var(--helix-easing-standard);}[part="separator"]:hover,
 [part="separator"]:focus-visible,
 [part="separator"][data-dragging] {z-index: calc(var(--helix-layer-raised) + 1);}[part="separator"][data-flush]::before {background-color: transparent;}:host(:not([variant="grip"])) [part="separator"]:hover::before,
 :host(:not([variant="grip"])) [part="separator"]:focus-visible::before,
-:host(:not([variant="grip"])) [part="separator"][data-dragging]::before {background-color: var(--splitter-hover-color, var(--helix-color-foreground-muted));inline-size: var(--helix-border-thick);}:host(:not([variant="grip"])) [part="separator"][data-dragging]::before {background-color: var(--splitter-drag-color, var(--helix-color-primary));}:host(:is([orientation="vertical"], [data-axis="vertical"]):not([variant="grip"]))
+:host(:not([variant="grip"])) [part="separator"][data-dragging]::before {background-color: var(--splitter-hover-color, var(--helix-color-foreground-muted));inline-size: var(--splitter-hover-thickness, var(--helix-border-thick));}:host(:not([variant="grip"])) [part="separator"][data-dragging]::before {background-color: var(--splitter-drag-color, var(--helix-color-primary));}:host(:is([orientation="vertical"], [data-axis="vertical"]):not([variant="grip"]))
 [part="separator"]:hover::before,
 :host(:is([orientation="vertical"], [data-axis="vertical"]):not([variant="grip"]))
 [part="separator"]:focus-visible::before,
 :host(:is([orientation="vertical"], [data-axis="vertical"]):not([variant="grip"]))
-[part="separator"][data-dragging]::before {block-size: var(--helix-border-thick);inline-size: auto;}[part="separator"]:focus-visible {outline: none;}[part="separator"]:focus-visible::before {outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);outline-offset: var(--helix-size-focus-offset);}[part="corner"] {block-size: var(--splitter-corner, var(--helix-space-md));cursor: move;inline-size: var(--splitter-corner, var(--helix-space-md));inset-block-start: var(--splitter-corner-at);inset-inline-start: var(--splitter-position);margin-block-start: calc(var(--splitter-corner, var(--helix-space-md)) / -2);margin-inline-start: calc(var(--splitter-corner, var(--helix-space-md)) / -2);position: absolute;touch-action: none;user-select: none;z-index: calc(var(--helix-layer-raised) + 2);}:host(:is([orientation="vertical"], [data-axis="vertical"])) [part="corner"] {inset-block-start: var(--splitter-position);inset-inline-start: var(--splitter-corner-at);}[part="corner"]:focus-visible {outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);outline-offset: var(--helix-size-focus-offset);}:host([variant="grip"]) [part="separator"]::after {background-color: var(--splitter-grip-color, var(--helix-color-foreground-muted));border-radius: var(--helix-radii-full);content: "";opacity: 0;position: absolute;transition:
+[part="separator"][data-dragging]::before {block-size: var(--splitter-hover-thickness, var(--helix-border-thick));inline-size: auto;}[part="separator"]:focus-visible {outline: none;}[part="separator"]:focus-visible::before {outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);outline-offset: var(--helix-size-focus-offset);}[part="corner"] {block-size: var(--splitter-corner, var(--helix-space-md));cursor: move;inline-size: var(--splitter-corner, var(--helix-space-md));inset-block-start: var(--splitter-corner-at);inset-inline-start: var(--splitter-position);margin-block-start: calc(var(--splitter-corner, var(--helix-space-md)) / -2);margin-inline-start: calc(var(--splitter-corner, var(--helix-space-md)) / -2);position: absolute;touch-action: none;user-select: none;z-index: calc(var(--helix-layer-raised) + 2);}:host(:is([orientation="vertical"], [data-axis="vertical"])) [part="corner"] {inset-block-start: var(--splitter-position);inset-inline-start: var(--splitter-corner-at);}[part="corner"]:focus-visible {outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);outline-offset: var(--helix-size-focus-offset);}:host([variant="grip"]) [part="separator"]::after {background-color: var(--splitter-grip-color, var(--helix-color-foreground-muted));border-radius: var(--helix-radii-full);content: "";opacity: 0;position: absolute;transition:
 background-color var(--helix-duration-fast) var(--helix-easing-standard),
 opacity var(--helix-duration-fast) var(--helix-easing-standard);}:host([variant="grip"]:not(:is([orientation="vertical"], [data-axis="vertical"])))
-[part="separator"]::after {block-size: var(--splitter-grip-length, 2rem);inline-size: var(--helix-border-thick);inset-block-start: calc(50% - var(--splitter-grip-length, 2rem) / 2);inset-inline-start: calc(50% - var(--helix-border-thick) - var(--helix-space-2xs));}:host([variant="grip"]:is([orientation="vertical"], [data-axis="vertical"]))
-[part="separator"]::after {block-size: var(--helix-border-thick);inline-size: var(--splitter-grip-length, 2rem);inset-block-start: calc(50% - var(--helix-border-thick) - var(--helix-space-2xs));inset-inline-start: calc(50% - var(--splitter-grip-length, 2rem) / 2);}:host([variant="grip"]) [part="separator"]:hover::after,
+[part="separator"]::after {block-size: var(--splitter-grip-length, 2rem);inline-size: var(--splitter-grip-thickness, var(--helix-border-thick));inset-block-start: calc(50% - var(--splitter-grip-length, 2rem) / 2);inset-inline-start: calc(
+50% -
+var(--splitter-grip-thickness, var(--helix-border-thick)) -
+var(--helix-space-2xs)
+);}:host([variant="grip"]:is([orientation="vertical"], [data-axis="vertical"]))
+[part="separator"]::after {block-size: var(--splitter-grip-thickness, var(--helix-border-thick));inline-size: var(--splitter-grip-length, 2rem);inset-block-start: calc(
+50% -
+var(--splitter-grip-thickness, var(--helix-border-thick)) -
+var(--helix-space-2xs)
+);inset-inline-start: calc(50% - var(--splitter-grip-length, 2rem) / 2);}:host([variant="grip"]) [part="separator"]:hover::after,
 :host([variant="grip"]) [part="separator"]:focus-visible::after,
-:host([variant="grip"]) [part="separator"][data-dragging]::after {opacity: 1;}:host([variant="grip"]) [part="separator"][data-dragging]::after {background-color: var(--splitter-drag-color, var(--helix-color-primary));}[part="start"][data-dragging],
+:host([variant="grip"]) [part="separator"][data-dragging]::after {opacity: 1;}:host([variant="grip"]) [part="separator"][data-dragging]::after {background-color: var(--splitter-drag-color, var(--helix-color-primary));}::slotted([slot="handle"]) {color: var(--splitter-handle-color, var(--helix-color-foreground-muted));pointer-events: none;position: relative;}[part="start"][data-dragging],
 [part="end"][data-dragging] {pointer-events: none;}@media print {:host {overflow: visible;}}`);

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

@@ -38,8 +38,12 @@ import type { CSSResultGroup } from 'lit';
  * @cssproperty --splitter-drag-color - Color of the line while it is being moved.
  * @cssproperty --splitter-grip-color - Color of the grip beside the line, when the grip is shown.
  * @cssproperty --splitter-grip-length - How far the grip runs along the divider.
+ * @cssproperty --splitter-grip-thickness - How thick the grip is, across the divider.
+ * @cssproperty --splitter-handle-color - Color of a mark slotted into `handle`.
  * @cssproperty --splitter-hover-color - Color of the divider's target under the pointer.
+ * @cssproperty --splitter-hover-thickness - How thick the line is under the pointer, with focus and while it moves.
  * @cssproperty --splitter-target - Width of the area you can drag.
+ * @cssproperty --splitter-thickness - How thick the line is at rest.
  */
 export declare class HelixSplitter extends HelixHeadlessSplitter {
     /**

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

@@ -1,2 +1,2 @@
 import { createSheet } from '@fusion.dev/helix-core';
-export const styles = createSheet(`:host {align-items: center;border-block-end: var(--helix-border-thin) solid var(--helix-color-border);box-sizing: border-box;color: var(--helix-color-foreground);display: flex;font-size: var(--helix-text-sm);justify-content: var(--table-cell-align);min-block-size: var(--helix-size-control);min-inline-size: 0;overflow-wrap: anywhere;padding-block: var(--helix-space-xs);padding-inline: var(--helix-space-none) var(--helix-space-md);text-align: var(--table-cell-align);}:host(:state(text)) slot {display: block;min-inline-size: 0;}::slotted(*) {min-inline-size: 0;}:host([header]) {font-weight: var(--helix-weight-medium);}`);
+export const styles = createSheet(`:host {align-items: center;border-block-end: var(--helix-border-thin) solid var(--helix-color-border);box-sizing: border-box;color: var(--helix-color-foreground);display: flex;font-size: var(--helix-text-sm);justify-content: var(--table-cell-align);min-block-size: var(--helix-size-control);min-inline-size: 0;overflow-wrap: anywhere;padding-block: var(--helix-space-xs);padding-inline: var(--helix-space-none) var(--helix-space-md);text-align: var(--table-cell-align);}:host(:state(text)) slot {display: block;min-inline-size: 0;}::slotted(*) {min-inline-size: 0;}:host([header]) {font-weight: var(--helix-weight-medium);}:host(:focus-visible) {outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);outline-offset: calc(var(--helix-size-focus-offset) * -1);}`);

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

@@ -1,2 +1,4 @@
 import { createSheet } from '@fusion.dev/helix-core';
-export const styles = createSheet(`:host {display: block;overflow-x: auto;}[part="table"] {display: grid;grid-template-columns: var(--table-columns, var(--table-template, minmax(0, 1fr)));inline-size: 100%;}[part="head"] {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;}@media print {:host {print-color-adjust: economy;}}`);
+export const styles = createSheet(`:host {display: block;overflow-x: auto;}[part="table"] {display: grid;grid-template-columns: var(--table-columns, var(--table-template, minmax(0, 1fr)));inline-size: 100%;}[part="head"] {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);}[part="grip-head"] {border-block-end: var(--helix-border-thin) solid var(--helix-color-border);box-sizing: border-box;min-block-size: var(--helix-size-control-loose);}[part="grip-head"]: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);}:host([loading]) [part="table"] {opacity: 0.5;}[part="drag-preview"] {background-color: var(--table-drag-preview-background-color, var(--helix-color-surface-raised));border: var(--table-drag-preview-border-width, var(--helix-border-floating)) solid
+var(--table-drag-preview-border-color, var(--helix-color-border));border-radius: var(--table-drag-preview-radius, var(--helix-radii-sm));box-shadow: var(--table-drag-preview-shadow, var(--helix-shadow-floating));opacity: var(--table-drag-preview-opacity, 0.9);}@media print {:host {print-color-adjust: economy;}}`);

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

@@ -16,10 +16,17 @@ import '../../checkbox/index.js';
  * @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 drag-preview - A copy of the row a pointer drags by its grip, which follows the pointer in the top layer until the row is let go, in a `reorderable` table. Hidden from assistive technology.
+ * @csspart live - A live region that repeats the empty and loading text, and says each step of a move, 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-drag-preview-background-color - The fill behind the copy of a row a pointer drags.
+ * @cssproperty --table-drag-preview-border-color - The color of the edge around the copy of a row a pointer drags.
+ * @cssproperty --table-drag-preview-border-width - The width of the edge around the copy of a row a pointer drags. None by default, where the shadow lifts it.
+ * @cssproperty --table-drag-preview-opacity - The opacity of the copy of a row a pointer drags.
+ * @cssproperty --table-drag-preview-radius - The corner radius of the copy of a row a pointer drags.
+ * @cssproperty --table-drag-preview-shadow - The shadow that raises the copy of a row a pointer drags over the page.
  * @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.

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

@@ -7,4 +7,12 @@ var(--helix-color-background)
 );}:host(:state(link)) ::slotted(*) {cursor: pointer;}:host(:state(link):hover) ::slotted(*) {background-color: var(
 --table-row-hover-background-color,
 color-mix(in oklab, var(--helix-color-foreground) 5%, transparent)
-);}`);
+);}[part~="select"]:focus-visible {outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);outline-offset: calc(var(--helix-size-focus-offset) * -1);}[part~="grip"] {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);padding-inline: var(--helix-space-2xs) var(--helix-space-sm);}[part~="grip"]:focus-visible {outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);outline-offset: calc(var(--helix-size-focus-offset) * -1);}[part="grip-button"] {all: unset;align-items: center;border-radius: var(--helix-radii-sm);box-sizing: border-box;color: var(--table-grip-color, var(--helix-color-foreground-muted));cursor: grab;display: inline-flex;touch-action: none;}[part="grip-button"]:active {cursor: grabbing;}[part="grip-button"]:focus-visible {outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);outline-offset: var(--helix-size-focus-offset);}[part="grip-button"][aria-disabled="true"] {cursor: default;opacity: var(--table-grip-disabled-opacity, 0.4);}[part="grip-mark"] {block-size: 1em;inline-size: 1em;}:host(:state(dragging)) [part~="grip"],
+:host(:state(dragging)) [part~="select"],
+:host(:state(dragging)) ::slotted(*) {opacity: var(--table-dragging-opacity, 0.5);}:host(:state(drop-before)) [part~="grip"],
+:host(:state(drop-before)) [part~="select"],
+:host(:state(drop-before)) ::slotted(*) {box-shadow: inset 0 var(--table-drop-indicator-size, var(--helix-border-thick)) 0 0
+var(--table-drop-indicator-color, var(--helix-color-primary));}:host(:state(drop-after)) [part~="grip"],
+:host(:state(drop-after)) [part~="select"],
+:host(:state(drop-after)) ::slotted(*) {box-shadow: inset 0 calc(var(--table-drop-indicator-size, var(--helix-border-thick)) * -1) 0 0
+var(--table-drop-indicator-color, var(--helix-color-primary));}`);

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

@@ -16,6 +16,11 @@ import '../../checkbox/index.js';
  *
  * @slot - The row's cells.
  *
+ * @cssproperty --table-dragging-opacity - The opacity of a row being moved, in a `reorderable` table.
+ * @cssproperty --table-drop-indicator-color - The color of the line where a moved row would land.
+ * @cssproperty --table-drop-indicator-size - The thickness of the line where a moved row would land.
+ * @cssproperty --table-grip-color - The color of a row's grip, in a `reorderable` table.
+ * @cssproperty --table-grip-disabled-opacity - The opacity of a row's grip while a sort decides the order.
  * @cssproperty --table-row-hover-background-color - The wash across the cells of a row with `href` under the pointer.
  */
 export declare class HelixTableRow extends HelixHeadlessTableRow {

package/dist/time-picker/root/time-picker-root.css.js

@@ -8,11 +8,16 @@ light-dark(
 color-mix(in oklab, var(--helix-color-foreground) 10%, transparent),
 color-mix(in oklab, var(--helix-color-foreground) 14%, transparent)
 )
-);}[part~="option"][data-between]::part(item)::after {content: "";background-color: currentColor;block-size: var(--helix-size-icon-tight);border-radius: var(--helix-radii-full);flex: 0 0 auto;inline-size: var(--helix-size-icon-tight);margin-inline-start: auto;opacity: 0.4;scale: 0.3;}[part="columns"] {display: flex;}[part="column"] {--_time-row: var(--time-picker-row-size, var(--helix-size-control));--listbox-max-block-size: var(--time-picker-wheel-block-size, calc(var(--_time-row) * 5));flex: 1 1 auto;min-inline-size: max-content;}[part="column"]::part(items) {background-color: transparent;border: none;border-radius: var(--helix-radii-none);mask-image: linear-gradient(to bottom, transparent, black 25%, black 75%, transparent);padding-block: calc((var(--listbox-max-block-size) - var(--_time-row)) / 2);scroll-snap-type: y mandatory;scrollbar-width: none;}[part="column"] [part~="option"] {scroll-snap-align: center;}[part="column"] [part~="option"]::part(item) {justify-content: center;}[part="column"] [part~="option"]::part(label) {text-align: center;}[part="column"] [part~="option"]::part(item) {min-block-size: var(--_time-row);min-inline-size: var(--_time-row);padding-block: var(--helix-space-none);padding-inline: var(--helix-space-sm);}[part="column"] [part~="option"]::part(item) {background-color: transparent;}[part="column"] [part~="option"]::part(label) {align-items: center;block-size: var(--_time-row);border-radius: var(--helix-radii-sm);display: inline-flex;justify-content: center;min-inline-size: var(--_time-row);padding-inline: var(--helix-space-2xs);transition: background-color var(--helix-duration-fast) var(--helix-easing-standard);}[part="column"] [part~="option"]:not([disabled]):hover::part(label),
-[part="column"] [part~="option"]:state(active)::part(label) {background-color: var(--helix-color-surface-sunken);}[part="column"] [part~="option"]:state(selected)::part(label) {background-color: var(--time-picker-selected-color, var(--helix-color-surface-inverse));color: var(--helix-color-foreground-inverse);}[part="column"] [part~="option"]::part(item)::after {content: none;}:host([invalid]) [part~="option"]:state(selected)::part(item),
+);}[part~="option"][data-between]::part(item)::after {content: "";background-color: currentColor;block-size: var(--helix-size-icon-tight);border-radius: var(--helix-radii-full);flex: 0 0 auto;inline-size: var(--helix-size-icon-tight);margin-inline-start: auto;opacity: 0.4;scale: 0.3;}[part="columns"] {display: flex;gap: var(--time-picker-columns-gap, var(--helix-space-none));}[part="column"] {--_time-row: var(--time-picker-row-size, var(--helix-size-control));--listbox-max-block-size: var(--time-picker-wheel-block-size, calc(var(--_time-row) * 5));flex: 1 1 auto;min-inline-size: max-content;}[part="column"]::part(items) {background-color: transparent;border: none;border-radius: var(--helix-radii-none);mask-image: var(
+--time-picker-wheel-mask,
+linear-gradient(to bottom, transparent, black 25%, black 75%, transparent)
+);padding-block: calc((var(--listbox-max-block-size) - var(--_time-row)) / 2);scroll-snap-type: y mandatory;scrollbar-width: none;}[part="column"] [part~="option"] {scroll-snap-align: center;}[part="column"] [part~="option"]::part(item) {justify-content: center;}[part="column"] [part~="option"]::part(label) {text-align: center;}[part="column"] [part~="option"]::part(item) {min-block-size: var(--_time-row);min-inline-size: var(--_time-row);padding-block: var(--helix-space-none);padding-inline: var(--helix-space-sm);}[part="column"] [part~="option"]::part(item) {background-color: transparent;}[part="column"] [part~="option"]::part(label) {align-items: center;block-size: var(--_time-row);border-radius: var(--time-picker-mark-radius, var(--helix-radii-sm));display: inline-flex;justify-content: center;min-inline-size: var(--_time-row);padding-inline: var(--helix-space-2xs);transition: background-color var(--helix-duration-fast) var(--helix-easing-standard);}[part="column"] [part~="option"]:not([disabled]):hover::part(label),
+[part="column"] [part~="option"]:state(active)::part(label) {background-color: var(--time-picker-hover-background-color, var(--helix-color-surface-sunken));}[part="column"] [part~="option"]:state(selected)::part(label) {background-color: var(--time-picker-selected-color, var(--helix-color-surface-inverse));color: var(--time-picker-selected-foreground-color, var(--helix-color-foreground-inverse));}[part="column"] [part~="option"]::part(item)::after {content: none;}:host([invalid]) [part~="option"]:state(selected)::part(item),
 :host([invalid]) [part="column"] [part~="option"]:state(selected)::part(label),
 :host(:state(invalid)) [part~="option"]:state(selected)::part(item),
-:host(:state(invalid)) [part="column"] [part~="option"]:state(selected)::part(label) {outline: var(--helix-size-focus-ring) solid var(--helix-color-danger);outline-offset: var(--helix-size-focus-offset);}:host([invalid]) [part="list"][data-unset],
+:host(:state(invalid)) [part="column"] [part~="option"]:state(selected)::part(label) {outline: var(--helix-size-focus-ring) solid
+var(--time-picker-invalid-color, var(--helix-color-danger));outline-offset: var(--helix-size-focus-offset);}:host([invalid]) [part="list"][data-unset],
 :host([invalid]) [part="columns"][data-unset],
 :host(:state(invalid)) [part="list"][data-unset],
-:host(:state(invalid)) [part="columns"][data-unset] {border-radius: var(--helix-radii-sm);outline: var(--helix-size-focus-ring) solid var(--helix-color-danger);outline-offset: var(--helix-size-focus-offset);}[part="feedback"] {color: var(--time-picker-feedback-color, var(--helix-color-danger));font-family: var(--helix-font-sans);font-size: var(--helix-text-sm);margin: var(--helix-space-sm) var(--helix-space-none) var(--helix-space-none);}@media print {:host {print-color-adjust: exact;}}`);
+:host(:state(invalid)) [part="columns"][data-unset] {border-radius: var(--helix-radii-sm);outline: var(--helix-size-focus-ring) solid
+var(--time-picker-invalid-color, var(--helix-color-danger));outline-offset: var(--helix-size-focus-offset);}[part="feedback"] {color: var(--time-picker-feedback-color, var(--helix-color-danger));font-family: var(--helix-font-sans);font-size: var(--helix-text-sm);margin: var(--helix-space-sm) var(--helix-space-none) var(--helix-space-none);}@media print {:host {print-color-adjust: exact;}}`);

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

@@ -19,12 +19,18 @@ import '../../option/index.js';
  * @aliases Time, TimeList
  * @documentation https://fusion.dev/helix/components/time-picker
  *
+ * @cssproperty --time-picker-columns-gap - The space between the wheels. None by default.
  * @cssproperty --time-picker-feedback-color - The color of the message under the times, while `feedback` is set.
+ * @cssproperty --time-picker-hover-background-color - Fill on a wheel's row under the pointer or the keyboard.
+ * @cssproperty --time-picker-invalid-color - The ring around the chosen time, or around the times while nothing is chosen, while the picker is invalid.
  * @cssproperty --time-picker-list-block-size - How tall the list is before it scrolls.
+ * @cssproperty --time-picker-mark-radius - The corners of the mark on a wheel's row.
  * @cssproperty --time-picker-range-color - Fill behind the times inside a range.
  * @cssproperty --time-picker-row-size - Height and minimum width of one row in a wheel.
  * @cssproperty --time-picker-selected-color - Fill on the chosen row of a wheel.
+ * @cssproperty --time-picker-selected-foreground-color - Ink on the chosen row of a wheel.
  * @cssproperty --time-picker-wheel-block-size - How tall a wheel is. Five rows by default.
+ * @cssproperty --time-picker-wheel-mask - The mask that fades a wheel toward its ends, as a `mask-image`. Set `none` for no fade.
  */
 export declare class HelixTimePicker extends HelixHeadlessTimePicker {
     static tier: string;

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

@@ -1,19 +1,22 @@
 import { createSheet } from '@fusion.dev/helix-core';
-export const styles = createSheet(`:host {--helix-size-icon: var(--helix-size-icon-sm);--helix-size-icon-loose: calc(var(--helix-size-icon) * 1.2);--helix-size-icon-tight: calc(var(--helix-size-icon) * 0.8);--helix-size-control: var(--helix-size-control-sm);--helix-size-control-loose: calc(var(--helix-size-control) * 1.2);--helix-size-control-tight: calc(var(--helix-size-control) * 0.8);--_toast-line: calc(var(--helix-text-sm) * var(--helix-leading-normal));display: grid;grid-template-rows: minmax(0, 1fr);margin-block-start: var(--_toast-gap, var(--helix-space-xs));transition:
+export const styles = createSheet(`:host {--helix-size-icon: var(--helix-size-icon-sm);--helix-size-icon-loose: calc(var(--helix-size-icon) * 1.2);--helix-size-icon-tight: calc(var(--helix-size-icon) * 0.8);--helix-size-control: var(--helix-size-control-sm);--helix-size-control-loose: calc(var(--helix-size-control) * 1.2);--helix-size-control-tight: calc(var(--helix-size-control) * 0.8);--_toast-line: calc(var(--toast-font-size, var(--helix-text-sm)) * var(--helix-leading-normal));display: grid;grid-template-rows: minmax(0, 1fr);margin-block-start: var(--_toast-gap, var(--helix-space-xs));transition:
 grid-template-rows var(--helix-duration-normal) var(--helix-easing-decelerate),
 margin-block-start var(--helix-duration-normal) var(--helix-easing-decelerate),
 opacity var(--helix-duration-normal) var(--helix-easing-decelerate),
-translate var(--helix-duration-normal) var(--helix-easing-decelerate);inline-size: var(--toast-inline-size, 22rem);max-inline-size: calc(100vw - var(--helix-space-xl));}[part="item"] {align-items: start;display: grid;grid-template-columns: auto 1fr;background-color: var(--helix-color-surface-overlay);border-radius: var(--helix-radii-sm);border: var(--toast-border-width, var(--helix-border-floating)) solid
-var(--toast-border-color, var(--helix-color-border));box-shadow: var(--toast-shadow, var(--helix-shadow-floating));box-sizing: border-box;color: var(--helix-color-foreground);font-family: var(--helix-font-sans);font-size: var(--helix-text-sm);line-height: var(--helix-leading-normal);padding: var(--toast-item-padding, var(--helix-space-sm));padding-inline-end: calc(
+translate var(--helix-duration-normal) var(--helix-easing-decelerate);inline-size: var(--toast-inline-size, 22rem);max-inline-size: calc(100vw - var(--helix-space-xl));}[part="item"] {align-items: start;display: grid;grid-template-columns: auto 1fr;background-color: var(--toast-background-color, var(--helix-color-surface-overlay));border-radius: var(--toast-radius, var(--helix-radii-sm));border: var(--toast-border-width, var(--helix-border-floating)) solid
+var(--toast-border-color, var(--helix-color-border));box-shadow: var(--toast-shadow, var(--helix-shadow-floating));box-sizing: border-box;color: var(--toast-color, var(--helix-color-foreground));font-family: var(--helix-font-sans);font-size: var(--toast-font-size, var(--helix-text-sm));line-height: var(--helix-leading-normal);padding: var(--toast-item-padding, var(--helix-space-sm));padding-inline-end: calc(
 var(--helix-space-sm) +
 var(--helix-size-control) +
 var(--helix-space-2xs)
-);min-block-size: 0;position: relative;overflow: hidden;}[part="icon"] {color: var(--_toast-severity, var(--helix-color-foreground-muted));display: inline-flex;grid-area: 1 / 1;margin-inline-end: var(--helix-space-sm);margin-block-start: calc((var(--_toast-line) - var(--helix-size-icon)) / 2);}[part="icon"] svg {block-size: var(--helix-size-icon);inline-size: var(--helix-size-icon);}slot[name="icon"]::slotted(*) {--icon-size: var(--helix-size-icon);block-size: var(--helix-size-icon);inline-size: var(--helix-size-icon);}[part="content"] {grid-area: 1 / 2;min-inline-size: 0;}::slotted([slot="heading"]) {display: block;font-weight: var(--helix-weight-semibold);}::slotted([slot="description"]) {color: var(--helix-color-foreground-muted);display: block;}[part="actions"] {display: flex;gap: var(--helix-space-2xs);grid-area: 2 / 2;}[part="actions"] slot::slotted(*) {margin-block-start: var(--helix-space-xs);}:host([tone="info"]) {--_toast-severity: var(--helix-color-primary);}:host([tone="success"]) {--_toast-severity: var(--helix-color-success);}:host([tone="warning"]) {--_toast-severity: var(--helix-color-warning);}:host([tone="danger"]) {--_toast-severity: var(--helix-color-danger);}[part="dismiss"] {all: unset;box-sizing: border-box;position: absolute;inset-block-start: calc(
+);min-block-size: 0;position: relative;overflow: hidden;}[part="icon"] {color: var(--toast-tone-color, var(--_toast-severity, var(--helix-color-foreground-muted)));display: inline-flex;grid-area: 1 / 1;margin-inline-end: var(--helix-space-sm);margin-block-start: calc((var(--_toast-line) - var(--helix-size-icon)) / 2);}[part="icon"] svg {block-size: var(--helix-size-icon);inline-size: var(--helix-size-icon);}slot[name="icon"]::slotted(*) {--icon-size: var(--helix-size-icon);block-size: var(--helix-size-icon);inline-size: var(--helix-size-icon);}[part="content"] {grid-area: 1 / 2;min-inline-size: 0;}::slotted([slot="heading"]) {display: block;font-weight: var(--toast-heading-weight, var(--helix-weight-semibold));}::slotted([slot="description"]) {color: var(--toast-description-color, var(--helix-color-foreground-muted));display: block;}[part="actions"] {display: flex;gap: var(--helix-space-2xs);grid-area: 2 / 2;}[part="actions"] slot::slotted(*) {margin-block-start: var(--helix-space-xs);}:host([tone="info"]) {--_toast-severity: var(--helix-color-primary);}:host([tone="success"]) {--_toast-severity: var(--helix-color-success);}:host([tone="warning"]) {--_toast-severity: var(--helix-color-warning);}:host([tone="danger"]) {--_toast-severity: var(--helix-color-danger);}[part="dismiss"] {all: unset;box-sizing: border-box;position: absolute;inset-block-start: calc(
 var(--toast-item-padding, var(--helix-space-sm)) +
 (var(--_toast-line) - var(--helix-size-control)) /
 2
-);inset-inline-end: var(--helix-space-sm);block-size: var(--helix-size-control);border-radius: var(--helix-radii-sm);color: var(--helix-color-foreground-muted);cursor: pointer;display: inline-flex;flex: 0 0 auto;inline-size: var(--helix-size-control);place-content: center;place-items: center;transition: color var(--helix-duration-fast) var(--helix-easing-standard);}[part="dismiss"] svg {block-size: var(--helix-size-icon);inline-size: var(--helix-size-icon);}[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="item"],
-[part="item"] > * {touch-action: pan-y;}[part="content"] > slot {display: block;touch-action: pan-y;}[part="item"][data-swiping] {transition: none;translate: var(--toast-swipe-x, 0) 0;user-select: none;}[part="timer"] {animation: helix-toast-drain var(--toast-duration, 0ms) linear forwards;background-color: var(--_toast-severity, var(--helix-color-foreground-muted));block-size: var(--helix-space-2xs);inset-block-start: 0;inset-inline: 0;position: absolute;transform-origin: 0 50%;}[part="timer"]:dir(rtl) {transform-origin: 100% 50%;}:host([data-paused]) [part="timer"] {animation-play-state: paused;}@keyframes helix-toast-drain {to {scale: 0 1;}}@media (prefers-reduced-motion: no-preference) {[part="item"] {animation: helix-toast-in var(--helix-duration-normal) var(--helix-easing-decelerate) backwards;}}@keyframes helix-toast-in {from {opacity: 0;translate: 0 var(--_toast-enter, var(--helix-space-lg));}}:host([data-closed]) [part="item"] {padding-block: 0;transition: padding-block var(--helix-duration-normal) var(--helix-easing-accelerate);}:host([hidden]:not([hidden="until-found"])) {display: grid;}:host([data-closed]) {grid-template-rows: minmax(0, 0fr);margin-block-start: 0;opacity: 0;translate: 0 var(--_toast-enter, var(--helix-space-lg));visibility: hidden;transition:
+);inset-inline-end: var(--helix-space-sm);block-size: var(--helix-size-control);border-radius: var(--helix-radii-sm);color: var(--toast-dismiss-color, var(--helix-color-foreground-muted));cursor: pointer;display: inline-flex;flex: 0 0 auto;inline-size: var(--helix-size-control);place-content: center;place-items: center;transition: color var(--helix-duration-fast) var(--helix-easing-standard);}[part="dismiss"] svg {block-size: var(--helix-size-icon);inline-size: var(--helix-size-icon);}[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="item"],
+[part="item"] > * {touch-action: pan-y;}[part="content"] > slot {display: block;touch-action: pan-y;}[part="item"][data-swiping] {transition: none;translate: var(--toast-swipe-x, 0) 0;user-select: none;}[part="timer"] {animation: helix-toast-drain var(--toast-duration, 0ms) linear forwards;background-color: var(
+--toast-tone-color,
+var(--_toast-severity, var(--helix-color-foreground-muted))
+);block-size: var(--toast-timer-size, var(--helix-space-2xs));inset-block-start: 0;inset-inline: 0;position: absolute;transform-origin: 0 50%;}[part="timer"]:dir(rtl) {transform-origin: 100% 50%;}:host([data-paused]) [part="timer"] {animation-play-state: paused;}@keyframes helix-toast-drain {to {scale: 0 1;}}@media (prefers-reduced-motion: no-preference) {[part="item"] {animation: helix-toast-in var(--helix-duration-normal) var(--helix-easing-decelerate) backwards;}}@keyframes helix-toast-in {from {opacity: 0;translate: 0 var(--_toast-enter, var(--helix-space-lg));}}:host([data-closed]) [part="item"] {padding-block: 0;transition: padding-block var(--helix-duration-normal) var(--helix-easing-accelerate);}:host([hidden]:not([hidden="until-found"])) {display: grid;}:host([data-closed]) {grid-template-rows: minmax(0, 0fr);margin-block-start: 0;opacity: 0;translate: 0 var(--_toast-enter, var(--helix-space-lg));visibility: hidden;transition:
 grid-template-rows var(--helix-duration-normal) var(--helix-easing-accelerate),
 margin-block-start var(--helix-duration-normal) var(--helix-easing-accelerate),
 opacity var(--helix-duration-normal) var(--helix-easing-accelerate),

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

@@ -12,13 +12,23 @@ import type { CSSResultGroup } from 'lit';
  * @status stable
  * @documentation https://fusion.dev/helix/components/toast
  *
+ * @cssproperty --toast-background-color - The panel's color. Follows `--helix-color-surface-overlay`.
  * @cssproperty --toast-border-color - Color of the panel's edge.
  * @cssproperty --toast-border-width - Width of the panel's edge. Follows
  *   `--helix-border-floating`, which is `0`, so the panel stands out by its shadow unless your
  *   theme sets a border.
+ * @cssproperty --toast-color - Color of the message's text.
+ * @cssproperty --toast-description-color - Color of the line in the `description` slot, under the heading.
+ * @cssproperty --toast-dismiss-color - Color of the dismiss control's mark at rest.
+ * @cssproperty --toast-font-size - Size of the message's text. The first line's controls and mark stay centered on it.
+ * @cssproperty --toast-heading-weight - Weight of the heading in the `heading` slot.
  * @cssproperty --toast-item-padding - Space between the message's edge and its contents.
+ * @cssproperty --toast-radius - Rounding of the panel's corners.
  * @cssproperty --toast-shadow - Shadow under the panel. Follows `--helix-shadow-floating`. A
  *   floating surface can sit over any content, so it has a shadow by default.
+ * @cssproperty --toast-timer-size - Thickness of the bar that counts down a timed message.
+ * @cssproperty --toast-tone-color - Color of the mark and the countdown bar. Unset, each `tone`
+ *   takes its own color, so set it per tone, as in `helix-toast-item[tone="danger"]`.
  */
 export declare class HelixToastItem extends HelixHeadlessToastItem {
     static styles: CSSResultGroup;

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

@@ -1,2 +1,2 @@
 import { createSheet } from '@fusion.dev/helix-core';
-export const styles = createSheet(`:host {--helix-size-checkbox: var(--helix-size-checkbox-sm);--helix-size-checkbox-loose: calc(var(--helix-size-checkbox) * 1.2);--helix-size-checkbox-tight: calc(var(--helix-size-checkbox) * 0.8);--helix-size-icon: var(--helix-size-icon-sm);--helix-size-icon-loose: calc(var(--helix-size-icon) * 1.2);--helix-size-icon-tight: calc(var(--helix-size-icon) * 0.8);--helix-size-control: var(--helix-size-control-sm);--helix-size-control-loose: calc(var(--helix-size-control) * 1.2);--helix-size-control-tight: calc(var(--helix-size-control) * 0.8);--helix-size-tag: var(--helix-size-tag-sm);display: inline-flex;}[part="toolbar"] {align-items: var(--toolbar-align, center);background-color: var(--toolbar-background-color, transparent);border: var(--toolbar-border-width, 0) solid var(--toolbar-border-color, transparent);border-radius: var(--toolbar-radius, var(--helix-radii-none));display: flex;gap: var(--toolbar-gap, var(--helix-space-2xs));padding: var(--toolbar-padding, var(--helix-space-none));}:host([orientation="vertical"]) [part="toolbar"] {flex-direction: column;}::slotted(helix-divider) {margin-inline: var(--toolbar-separator-gap, 0);}:host([orientation="vertical"]) ::slotted(helix-divider) {margin-block: var(--toolbar-separator-gap, 0);margin-inline: 0;}@media print {:host {display: none;}}`);
+export const styles = createSheet(`:host {--helix-size-checkbox: var(--helix-size-checkbox-sm);--helix-size-checkbox-loose: calc(var(--helix-size-checkbox) * 1.2);--helix-size-checkbox-tight: calc(var(--helix-size-checkbox) * 0.8);--helix-size-icon: var(--helix-size-icon-sm);--helix-size-icon-loose: calc(var(--helix-size-icon) * 1.2);--helix-size-icon-tight: calc(var(--helix-size-icon) * 0.8);--helix-size-control: var(--helix-size-control-sm);--helix-size-control-loose: calc(var(--helix-size-control) * 1.2);--helix-size-control-tight: calc(var(--helix-size-control) * 0.8);--helix-size-tag: var(--helix-size-tag-sm);display: inline-flex;}:host([size="md"]) {--helix-size-checkbox: var(--helix-size-checkbox-md);--helix-size-checkbox-loose: calc(var(--helix-size-checkbox) * 1.2);--helix-size-checkbox-tight: calc(var(--helix-size-checkbox) * 0.8);--helix-size-icon: var(--helix-size-icon-md);--helix-size-icon-loose: calc(var(--helix-size-icon) * 1.2);--helix-size-icon-tight: calc(var(--helix-size-icon) * 0.8);--helix-size-control: var(--helix-size-control-md);--helix-size-control-loose: calc(var(--helix-size-control) * 1.2);--helix-size-control-tight: calc(var(--helix-size-control) * 0.8);--helix-size-tag: var(--helix-size-tag-md);}:host([size="lg"]) {--helix-size-checkbox: var(--helix-size-checkbox-lg);--helix-size-checkbox-loose: calc(var(--helix-size-checkbox) * 1.2);--helix-size-checkbox-tight: calc(var(--helix-size-checkbox) * 0.8);--helix-size-icon: var(--helix-size-icon-lg);--helix-size-icon-loose: calc(var(--helix-size-icon) * 1.2);--helix-size-icon-tight: calc(var(--helix-size-icon) * 0.8);--helix-size-control: var(--helix-size-control-lg);--helix-size-control-loose: calc(var(--helix-size-control) * 1.2);--helix-size-control-tight: calc(var(--helix-size-control) * 0.8);--helix-size-tag: var(--helix-size-tag-lg);}[part="toolbar"] {align-items: var(--toolbar-align, center);background-color: var(--toolbar-background-color, transparent);border: var(--toolbar-border-width, 0) solid var(--toolbar-border-color, transparent);border-radius: var(--toolbar-radius, var(--helix-radii-none));display: flex;gap: var(--toolbar-gap, var(--helix-space-2xs));padding: var(--toolbar-padding, var(--helix-space-none));}:host([orientation="vertical"]) [part="toolbar"] {flex-direction: column;}::slotted(helix-divider) {margin-inline: var(--toolbar-separator-gap, 0);}:host([orientation="vertical"]) ::slotted(helix-divider) {align-self: stretch;margin-block: var(--toolbar-separator-gap, 0);margin-inline: 0;}@media print {:host {display: none;}}`);