@fusion.dev/helix 0.157.0 → 0.159.0

package/dist/app-header/root/app-header-root.css.js

@@ -6,5 +6,5 @@ border-color var(--helix-duration-normal) var(--helix-easing-standard);}:host([m
 backdrop-filter var(--helix-duration-normal) var(--helix-easing-standard),
 background-color var(--helix-duration-normal) var(--helix-easing-standard),
 border-color var(--helix-duration-normal) var(--helix-easing-standard),
-translate var(--helix-duration-normal) var(--helix-easing-standard);}:host([sticky]:state(hidden)) {translate: 0 -100%;}:host(:state(folded)) [part="row"] {block-size: auto;grid-template-columns: minmax(0, 1fr) auto;grid-template-rows: var(--app-header-block-size, var(--helix-size-header));row-gap: var(--helix-space-none);}:host(:state(folded)) [part="content"] {align-items: stretch;flex-direction: column;grid-column: 1 / -1;grid-row: 2;justify-content: flex-start;overflow-x: visible;padding-block-end: var(--helix-space-sm);}[part="content"][hidden] {display: none;}[part="toggle"] {all: unset;box-sizing: border-box;align-items: center;block-size: var(--helix-size-control);border-radius: var(--helix-radii-sm);color: var(--helix-color-foreground-muted);cursor: pointer;display: inline-flex;inline-size: var(--helix-size-control);justify-content: center;}[part="toggle"] svg {block-size: var(--helix-size-icon);inline-size: var(--helix-size-icon);}[part="toggle"]:hover,
+translate var(--helix-duration-normal) var(--helix-easing-standard);}:host([sticky]:state(hidden)) {translate: 0 -100%;}:host(:state(folded)) [part="row"] {block-size: auto;grid-template-columns: minmax(0, 1fr) auto;grid-template-rows: var(--app-header-block-size, var(--helix-size-header));row-gap: var(--helix-space-none);}:host(:state(folded)) [part="content"] {align-items: stretch;flex-direction: column;grid-column: 1 / -1;grid-row: 2;justify-content: flex-start;overflow-x: visible;padding-block-end: var(--helix-space-sm);}[part="content"][hidden] {display: none;}[part="toggle"] {all: unset;box-sizing: border-box;align-items: center;block-size: var(--helix-size-control);border-radius: var(--helix-radii-sm);color: var(--helix-color-foreground-muted);cursor: pointer;display: inline-flex;inline-size: var(--helix-size-control);justify-content: center;}[part="start"] > [part="toggle"] {margin-inline-end: var(--helix-space-xs);}[part="toggle"] svg {block-size: var(--helix-size-icon);inline-size: var(--helix-size-icon);}[part="toggle"]:hover,
 :host(:state(open)) [part="toggle"] {background-color: color-mix(in oklab, var(--helix-color-foreground) 8%, transparent);color: var(--helix-color-foreground);}[part="toggle"]:focus-visible {outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);outline-offset: var(--helix-size-focus-offset);}@media (prefers-reduced-motion: reduce) {:host([sticky]) {transition: none;}}@media print {:host {display: none;}}`);

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

@@ -49,6 +49,7 @@ declare const HelixButton_base: (new (...args: any[]) => import("../../shared/mi
  * @cssproperty --button-spinner-size - Size of the ring a pending button turns. Defaults to the size of its icons.
  *
  * @cssstate pending - The button is pending: `pending` is set. A ring turns over its hidden words.
+ * @cssstate pressed - A Button Group in a selection mode has this button pressed.
  */
 export declare class HelixButton extends HelixButton_base {
     /**

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

@@ -8,10 +8,11 @@ import { customElement } from '@fusion.dev/helix-core';
 import { HelixHeadlessCommand } from '@fusion.dev/helix-headless/command';
 import '../../dialog/index.js';
 import '../../listbox/index.js';
+import { styles as liveStyles } from '../../shared/live/live.css.js';
 import { styles } from './command-root.css.js';
 let HelixCommand = class HelixCommand extends HelixHeadlessCommand {
     static { this.tier = 'helix-'; }
-    static { this.styles = styles; }
+    static { this.styles = [liveStyles, styles]; }
 };
 HelixCommand = __decorate([
     customElement('helix-command')

package/dist/element-events.generated.js

@@ -2,7 +2,7 @@ import { registerElementEvents } from '@fusion.dev/helix-core';
 registerElementEvents({
     'helix-accordion-item': ['helix-before-close', 'helix-before-open', 'toggle'],
     'helix-announcement': ['helix-dismiss'],
-    'helix-app-header': ['helix-scrolled'],
+    'helix-app-header': ['helix-before-close', 'helix-before-open', 'helix-scrolled', 'toggle'],
     'helix-area-chart': ['helix-reading-change', 'helix-reading-press'],
     'helix-aura': ['helix-aura-fallback'],
     'helix-avatar': ['error', 'load'],
@@ -248,6 +248,7 @@ registerElementEvents({
     'helix-steps': ['helix-activate', 'helix-before-activate', 'helix-select'],
     'helix-switch': ['change', 'helix-before-toggle', 'input'],
     'helix-tab': ['helix-dismiss', 'helix-select'],
+    'helix-tab-panel': ['helix-load'],
     'helix-table': [
         'helix-before-reorder',
         'helix-reorder',

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

@@ -38,6 +38,7 @@ declare const HelixIconButton_base: (new (...args: any[]) => import("../../share
  * @cssproperty --icon-button-spinner-size - Size of the ring a pending button turns.
  *
  * @cssstate pending - The button is pending: `pending` is set. A ring turns over its hidden icon.
+ * @cssstate pressed - A Button Group in a selection mode has this button pressed.
  */
 export declare class HelixIconButton extends HelixIconButton_base {
     /**

package/dist/steps/step/step.css.js

@@ -3,4 +3,6 @@ export const styles = createSheet(`:host {--_step-inset: var(--helix-space-sm);a
 :host::after {background-color: var(--steps-connector-color, var(--helix-color-border));content: "";position: absolute;z-index: 0;}:host::before {block-size: var(--_steps-lead-block-size, var(--helix-border-thin));inline-size: var(--_steps-lead-inline-size, 0);inset-block-start: var(--_steps-lead-block-start, 50%);inset-inline-start: var(--_steps-lead-inline-start, 0);}:host::after {block-size: var(--_steps-trail-block-size, var(--helix-border-thin));inline-size: var(--_steps-trail-inline-size, 0);inset-block-start: var(--_steps-trail-block-start, 50%);inset-inline-start: var(--_steps-trail-inline-start, 0);}:host(:first-child)::before,
 :host(:last-child)::after {display: none;}[part="marker"] {align-items: center;grid-column: var(--_steps-marker-column, 1);grid-row: 1;justify-self: var(--_steps-marker-justify, center);block-size: var(--_steps-mark-box, var(--helix-size-icon));box-sizing: border-box;color: var(--_steps-marker-color, var(--helix-color-border));display: inline-flex;flex: 0 0 auto;font-family: var(--helix-font-sans);font-size: var(--helix-text-xs);font-weight: var(--helix-weight-semibold);inline-size: var(--_steps-mark-box, var(--helix-size-icon));justify-content: center;position: relative;transition: color var(--helix-duration-fast) var(--helix-easing-standard);z-index: 1;}[part="marker"] slot {align-items: center;display: inline-flex;justify-content: center;}[part="marker"]::after {content: var(--_steps-count, none);}[part="marker"] svg {block-size: var(--_steps-m, var(--helix-size-icon));display: var(--_steps-mark, inline);flex: 0 0 auto;inline-size: var(--_steps-m, var(--helix-size-icon));}slot[name="marker"]::slotted(*) {--icon-size: var(--_steps-m, var(--helix-size-icon));}:host([complete]) [part="marker"] {color: var(--steps-complete-color, var(--_steps-ink-complete, var(--helix-color-success)));}:host([current]) [part="marker"] {color: var(--steps-current-color, var(--_steps-ink-current, var(--helix-color-primary)));}:host([complete][current]) [part="marker"] {color: var(--steps-complete-color, var(--_steps-ink-complete, var(--helix-color-success)));}[part="body"] {align-items: var(--_steps-body-align, center);grid-column: var(--_steps-body-column, 1);grid-row: var(--_steps-body-row, 2);display: flex;flex-direction: column;min-inline-size: 0;position: relative;z-index: 1;}[part="label"] {--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-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-space-control: var(--_step-inset);--helix-text-control: var(--helix-text-sm);--button-foreground-color: var(--helix-color-foreground-muted);max-inline-size: 100%;}:host([complete]) [part="label"],
 :host([current]) [part="label"] {--button-foreground-color: var(--helix-color-foreground);}[part="description"] {color: var(--helix-color-foreground-subtle);font-family: var(--helix-font-sans);font-size: var(--helix-text-xs);padding-inline: var(--_step-inset);}:host([disabled]) [part="marker"],
-:host([disabled]) [part="description"] {opacity: 0.5;}[part="content"] {display: var(--_steps-content, none);grid-column: var(--_steps-body-column, 1);grid-row: calc(var(--_steps-body-row, 2) + 1);grid-template-rows: 0fr;padding-inline: var(--_step-inset);transition: grid-template-rows var(--helix-duration-normal) var(--helix-easing-standard);}:host([current]) [part="content"] {grid-template-rows: 1fr;}[part="content"] > slot {display: block;min-block-size: 0;overflow: hidden;transition: visibility var(--helix-duration-normal) var(--helix-easing-standard);visibility: hidden;}:host([current]) [part="content"] > slot {visibility: visible;}`);
+:host([disabled]) [part="description"] {opacity: 0.5;}[part="content"] {display: var(--_steps-content, none);grid-column: var(--_steps-body-column, 1);grid-row: calc(var(--_steps-body-row, 2) + 1);grid-template-rows: 0fr;padding-inline: var(--_step-inset);transition:
+grid-template-rows var(--helix-duration-normal) var(--helix-easing-standard),
+visibility var(--helix-duration-normal) var(--helix-easing-standard);visibility: hidden;}:host([current]) [part="content"] {grid-template-rows: 1fr;visibility: visible;}[part="content"] > slot {display: block;min-block-size: 0;overflow: hidden;}`);

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

@@ -2,7 +2,8 @@ import { createSheet } from '@fusion.dev/helix-core';
 export const styles = createSheet(`:host {--_tabs-rule: none;--_tab-radius: var(--helix-radii-sm);--_tab-selected-shadow: var(--helix-shadow-sm);--_tab-selected-surface: var(--helix-color-surface-raised);display: grid;grid-template-rows: auto minmax(0, 1fr);min-block-size: 0;}[part="tabs"] {background-image: var(--_tabs-rule, none);background-position: bottom;background-repeat: repeat-x;background-size: 100% var(--helix-border-thin);display: flex;gap: var(--tabs-gap, var(--helix-space-2xs));overflow-x: auto;}[part="scroll-start"],
 [part="scroll-end"] {align-items: center;background-color: var(--tabs-scroll-background-color, var(--helix-color-surface));border: none;color: var(--helix-color-foreground-subtle);cursor: pointer;display: inline-flex;flex: none;justify-content: center;padding-inline: var(--helix-space-2xs);position: sticky;z-index: 1;}[part="scroll-start"] {inset-inline-start: 0;}[part="scroll-end"] {inset-inline-end: 0;}[part="scroll-start"][hidden],
 [part="scroll-end"][hidden] {display: none;}[part="scroll-start"] svg,
-[part="scroll-end"] svg {block-size: var(--helix-size-icon);inline-size: var(--helix-size-icon);}[part="scroll-start"]:hover,
+[part="scroll-end"] svg {block-size: var(--helix-size-icon);inline-size: var(--helix-size-icon);}slot[name="scroll-start-icon"]::slotted(*),
+slot[name="scroll-end-icon"]::slotted(*) {--icon-size: var(--helix-size-icon);block-size: var(--helix-size-icon);inline-size: var(--helix-size-icon);}[part="scroll-start"]:hover,
 [part="scroll-end"]:hover {color: var(--helix-color-foreground);}:host([orientation="vertical"]) [part="scroll-start"] {inset-block-start: 0;inset-inline-start: auto;padding-block: var(--helix-space-2xs);}:host([orientation="vertical"]) [part="scroll-end"] {inset-block-end: 0;inset-inline-end: auto;padding-block: var(--helix-space-2xs);}:host([variant="underlined"]) {--_tabs-rule: linear-gradient(
 var(--tabs-rule-color, var(--helix-color-border)),
 var(--tabs-rule-color, var(--helix-color-border))

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

@@ -24,11 +24,15 @@ import type { CSSResultGroup } from 'lit';
  * @slot - The tabs, as direct children of this element.
  * @slot indicator - A mark of your own, drawn inside the `indicator` part, where the selected tab's place and size reach it.
  * @slot panels - The panels, as direct children of this element. Panels inside a wrapper are not paired with tabs, because pairing reads only the direct children.
+ * @slot scroll-end-icon - Replaces the glyph on the button that scrolls the strip toward its end.
+ * @slot scroll-start-icon - Replaces the glyph on the button that scrolls the strip toward its start.
  *
  * @csspart indicator - The mark that moves to the selected tab. It carries the selected tab's place and size as `--indicator-x`, `--indicator-y`, `--indicator-inline-size` and `--indicator-block-size`.
  * @csspart panels - The panel container.
  * @csspart scroll-end - The button that scrolls the strip toward its end, shown under `scroll-controls` while there is more that way. It holds to the end of the strip.
+ * @csspart scroll-end-mark - The glyph on that button, where none is slotted.
  * @csspart scroll-start - The button that scrolls the strip toward its start, shown under `scroll-controls` while there is more that way. It holds to the start of the strip.
+ * @csspart scroll-start-mark - The glyph on that button, where none is slotted.
  * @csspart tabs - The tab list.
  *
  * @cssproperty --tabs-gap - The space between tabs.

package/dist/tabs/tab/tab.css.js

@@ -10,4 +10,4 @@ color-mix(in oklab, var(--helix-color-foreground) 5%, transparent)
 --tabs-tab-selected-background-color,
 var(--_tab-selected-surface, transparent)
 );box-shadow: var(--_tab-selected-shadow, none);color: var(--tabs-tab-selected-color, var(--helix-color-foreground));}[part="tab"]:disabled,
-[part="tab"][aria-disabled="true"] {cursor: not-allowed;opacity: var(--tabs-tab-disabled-opacity, 0.5);}[part="tab"]:focus-visible {outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);outline-offset: calc(var(--helix-size-focus-offset) * -1);}[part="dismiss"] {align-items: center;border-radius: var(--helix-radii-sm);color: var(--tabs-tab-dismiss-color, currentColor);display: inline-flex;margin-inline: var(--helix-space-2xs) calc(var(--helix-space-2xs) * -1);padding: var(--helix-space-none);}[part="dismiss"] svg {block-size: 1em;inline-size: 1em;}[part="dismiss"]:hover {background-color: color-mix(in oklab, var(--helix-color-foreground) 10%, transparent);}`);
+[part="tab"][aria-disabled="true"] {cursor: not-allowed;opacity: var(--tabs-tab-disabled-opacity, 0.5);}[part="tab"]:focus-visible {outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);outline-offset: calc(var(--helix-size-focus-offset) * -1);}[part="dismiss"] {align-items: center;border-radius: var(--helix-radii-sm);color: var(--tabs-tab-dismiss-color, currentColor);display: inline-flex;margin-inline: var(--helix-space-2xs) calc(var(--helix-space-2xs) * -1);padding: var(--helix-space-none);}[part="dismiss"] svg {block-size: 1em;inline-size: 1em;}slot[name="dismiss-icon"]::slotted(*) {--icon-size: 1em;block-size: 1em;inline-size: 1em;}[part="dismiss"]:hover {background-color: color-mix(in oklab, var(--helix-color-foreground) 10%, transparent);}`);

package/dist/tabs/tab/tab.d.ts

@@ -14,8 +14,10 @@ import type { CSSResultGroup } from 'lit';
  * @documentation https://fusion.dev/helix/components/tabs
  *
  * @slot - The tab's label.
+ * @slot dismiss-icon - Replaces the glyph on the mark that closes a `dismissible` tab.
  *
  * @csspart dismiss - The mark a pointer presses to close a `dismissible` tab.
+ * @csspart dismiss-mark - The glyph on that mark, where none is slotted.
  * @csspart tab - The tab itself.
  *
  * @cssproperty --tabs-tab-block-size - The height of a tab. `segmented` sizes its tabs to the track and does not read it.

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

@@ -13,10 +13,10 @@ 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(--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(
+[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) var(--toast-swipe-y, 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(:state(waiting)) {display: none;}: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:
+);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"], :state(waiting))) {display: grid;}:host(:state(waiting)) {display: none;}: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),