@fusion.dev/helix 0.146.0 → 0.148.0

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

@@ -1,139 +1,8 @@
 import { createSheet } from '@fusion.dev/helix-core';
-export const styles = createSheet(`:host {
-column-gap: var(--helix-space-md);
-display: grid;
-
-grid-template-columns: var(--_timeline-columns, auto minmax(0, 1fr));
-grid-template-rows: var(--_timeline-rows, auto minmax(0, 1fr));
-}
-
-[part="rail"] {
-align-items: var(--_timeline-rail-align, normal);
-display: grid;
-grid-column: var(--_timeline-rail-column, auto);
-grid-row: var(--_timeline-rail-row, 1 / -1);
-grid-template-columns: var(--_timeline-rail-columns, none);
-grid-template-rows: var(--_timeline-rail-rows, subgrid);
-justify-items: var(--_timeline-rail-justify, center);
-}
-
-[part="rail"]::before {
-background-color: var(--helix-color-border);
-block-size: 100%;
-content: "";
-display: var(--_timeline-arrive-display, block);
-grid-column: 1;
-grid-row: 1;
-inline-size: var(--timeline-rail-size, var(--helix-border-thin));
-}
-
-:host(:first-child) [part="rail"]::before {
-visibility: hidden;
-}
-
-[part="rail"]::after {
-align-self: var(--_timeline-leave-align, stretch);
-background-color: var(--helix-color-border);
-block-size: var(--_timeline-leave-block-size, auto);
-content: "";
-
-grid-column: var(--_timeline-leave-column, 1);
-grid-row: var(--_timeline-leave-row, 2);
-inline-size: var(
+export const styles = createSheet(`:host {column-gap: var(--helix-space-md);display: grid;grid-template-columns: var(--_timeline-columns, auto minmax(0, 1fr));grid-template-rows: var(--_timeline-rows, auto minmax(0, 1fr));}[part="rail"] {align-items: var(--_timeline-rail-align, normal);display: grid;grid-column: var(--_timeline-rail-column, auto);grid-row: var(--_timeline-rail-row, 1 / -1);grid-template-columns: var(--_timeline-rail-columns, none);grid-template-rows: var(--_timeline-rail-rows, subgrid);justify-items: var(--_timeline-rail-justify, center);}[part="rail"]::before {background-color: var(--helix-color-border);block-size: 100%;content: "";display: var(--_timeline-arrive-display, block);grid-column: 1;grid-row: 1;inline-size: var(--timeline-rail-size, var(--helix-border-thin));}:host(:first-child) [part="rail"]::before {visibility: hidden;}[part="rail"]::after {align-self: var(--_timeline-leave-align, stretch);background-color: var(--helix-color-border);block-size: var(--_timeline-leave-block-size, auto);content: "";grid-column: var(--_timeline-leave-column, 1);grid-row: var(--_timeline-leave-row, 2);inline-size: var(
 --_timeline-leave-inline-size,
 var(--timeline-rail-size, var(--helix-border-thin))
-);
-justify-self: var(--_timeline-leave-justify, auto);
-margin-block-start: var(
+);justify-self: var(--_timeline-leave-justify, auto);margin-block-start: var(
 --_timeline-leave-margin-block,
 var(--timeline-marker-size, var(--helix-size-icon-md))
-);
-}
-
-:host(:last-child) [part="rail"]::after {
-visibility: hidden;
-}
-
-[part="marker"] {
---icon-size: var(--helix-size-icon-sm);
-
-align-items: center;
-align-self: start;
-aspect-ratio: 1;
-
-border-radius: var(--timeline-marker-radius, var(--helix-radii-full));
-color: var(--_timeline-tone, var(--helix-color-foreground-subtle));
-display: inline-flex;
-grid-column: 1;
-grid-row: var(--_timeline-marker-row, 2);
-inline-size: var(--timeline-marker-size, var(--helix-size-icon-md));
-justify-content: center;
-}
-
-[part="dot"] {
-
-block-size: var(--helix-size-icon-sm);
-inline-size: var(--helix-size-icon-sm);
-}
-
-:host([tone="danger"]) {
---_timeline-tone: var(--helix-color-danger);
-}
-
-:host([tone="info"]) {
---_timeline-tone: var(--helix-color-info);
-}
-
-:host([tone="neutral"]) {
---_timeline-tone: var(--helix-color-foreground-muted);
-}
-
-:host([tone="primary"]) {
---_timeline-tone: var(--helix-color-primary);
-}
-
-:host([tone="success"]) {
---_timeline-tone: var(--helix-color-success);
-}
-
-:host([tone="warning"]) {
---_timeline-tone: var(--helix-color-warning);
-}
-
-[part="time"] {
-color: var(--helix-color-foreground-muted);
-font-family: var(--helix-font-sans);
-font-size: var(--helix-text-xs);
-font-weight: var(--helix-weight-medium);
-grid-column: var(--_timeline-time-column, 2);
-grid-row: var(--_timeline-time-row, 1);
-padding-block-end: var(--helix-space-2xs);
-
-text-align: var(--_timeline-time-align);
-}
-
-[part="content"] {
-display: flex;
-flex-direction: column;
-gap: var(--helix-space-2xs);
-grid-column: var(--_timeline-content-column, 2);
-grid-row: var(--_timeline-content-row, 2);
-min-inline-size: 0;
-padding-block-end: var(--_timeline-content-block-end, var(--timeline-gap, var(--helix-space-lg)));
-padding-inline-end: var(--_timeline-content-inline-end, var(--helix-space-none));
-}
-
-:host(:last-child) [part="content"] {
-padding-block-end: var(--helix-space-none);
-padding-inline-end: var(--helix-space-none);
-}
-
-:host(:nth-child(even)) [part="time"] {
-grid-column: var(--_timeline-even-column, var(--_timeline-time-column, 2));
-text-align: var(--_timeline-even-align, var(--_timeline-time-align));
-}
-
-:host(:nth-child(even)) [part="content"] {
-grid-column: var(--_timeline-even-column, var(--_timeline-content-column, 2));
-text-align: var(--_timeline-even-align);
-}`);
+);}:host(:last-child) [part="rail"]::after {visibility: hidden;}[part="marker"] {--icon-size: var(--helix-size-icon-sm);align-items: center;align-self: start;aspect-ratio: 1;border-radius: var(--timeline-marker-radius, var(--helix-radii-full));color: var(--_timeline-tone, var(--helix-color-foreground-subtle));display: inline-flex;grid-column: 1;grid-row: var(--_timeline-marker-row, 2);inline-size: var(--timeline-marker-size, var(--helix-size-icon-md));justify-content: center;}[part="dot"] {block-size: var(--helix-size-icon-sm);inline-size: var(--helix-size-icon-sm);}:host([tone="danger"]) {--_timeline-tone: var(--helix-color-danger);}:host([tone="info"]) {--_timeline-tone: var(--helix-color-info);}:host([tone="neutral"]) {--_timeline-tone: var(--helix-color-foreground-muted);}:host([tone="primary"]) {--_timeline-tone: var(--helix-color-primary);}:host([tone="success"]) {--_timeline-tone: var(--helix-color-success);}:host([tone="warning"]) {--_timeline-tone: var(--helix-color-warning);}[part="time"] {color: var(--helix-color-foreground-muted);font-family: var(--helix-font-sans);font-size: var(--helix-text-xs);font-weight: var(--helix-weight-medium);grid-column: var(--_timeline-time-column, 2);grid-row: var(--_timeline-time-row, 1);padding-block-end: var(--helix-space-2xs);text-align: var(--_timeline-time-align);}[part="content"] {display: flex;flex-direction: column;gap: var(--helix-space-2xs);grid-column: var(--_timeline-content-column, 2);grid-row: var(--_timeline-content-row, 2);min-inline-size: 0;padding-block-end: var(--_timeline-content-block-end, var(--timeline-gap, var(--helix-space-lg)));padding-inline-end: var(--_timeline-content-inline-end, var(--helix-space-none));}:host(:last-child) [part="content"] {padding-block-end: var(--helix-space-none);padding-inline-end: var(--helix-space-none);}:host(:nth-child(even)) [part="time"] {grid-column: var(--_timeline-even-column, var(--_timeline-time-column, 2));text-align: var(--_timeline-even-align, var(--_timeline-time-align));}:host(:nth-child(even)) [part="content"] {grid-column: var(--_timeline-even-column, var(--_timeline-content-column, 2));text-align: var(--_timeline-even-align);}`);

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

@@ -1,67 +1,2 @@
 import { createSheet } from '@fusion.dev/helix-core';
-export const styles = createSheet(`:host {
-display: flex;
-flex-direction: column;
-}
-
-:host([layout="opposite"]) {
---_timeline-columns: minmax(0, 1fr) auto minmax(0, 1fr);
---_timeline-content-column: 3;
---_timeline-rail-column: 2;
---_timeline-time-align: end;
---_timeline-time-column: 1;
---_timeline-time-row: 2;
-}
-
-:host([layout="alternate"]) {
---_timeline-columns: minmax(0, 1fr) auto minmax(0, 1fr);
---_timeline-content-column: 3;
---_timeline-even-align: end;
---_timeline-even-column: 1;
---_timeline-rail-column: 2;
---_timeline-time-column: 3;
-}
-
-:host([orientation="horizontal"]) {
---_timeline-arrive-display: none;
---_timeline-columns: minmax(0, 1fr);
---_timeline-content-block-end: var(--helix-space-none);
---_timeline-content-column: 1;
---_timeline-content-inline-end: var(--timeline-gap, var(--helix-space-lg));
---_timeline-content-row: 3;
---_timeline-direction: row;
---_timeline-entry-flex: 1 1 0;
---_timeline-even-align: initial;
---_timeline-even-column: initial;
---_timeline-leave-align: center;
---_timeline-leave-block-size: var(--timeline-rail-size, var(--helix-border-thin));
---_timeline-leave-column: 2;
---_timeline-leave-inline-size: auto;
---_timeline-leave-justify: stretch;
---_timeline-leave-margin-block: var(--helix-space-none);
---_timeline-leave-row: 1;
---_timeline-marker-row: 1;
---_timeline-rail-align: center;
---_timeline-rail-column: 1;
---_timeline-rail-columns: auto minmax(0, 1fr);
---_timeline-rail-justify: start;
---_timeline-rail-row: 1;
---_timeline-rail-rows: auto;
---_timeline-rows: auto auto minmax(0, 1fr);
---_timeline-time-align: initial;
---_timeline-time-column: 1;
---_timeline-time-row: 2;
-
-flex-direction: row;
-}
-
-:host([orientation="horizontal"]) ::slotted(*) {
-flex: 1 1 0;
-min-inline-size: 0;
-}
-
-@media print {
-:host {
-print-color-adjust: economy;
-}
-}`);
+export const styles = createSheet(`:host {display: flex;flex-direction: column;}:host([layout="opposite"]) {--_timeline-columns: minmax(0, 1fr) auto minmax(0, 1fr);--_timeline-content-column: 3;--_timeline-rail-column: 2;--_timeline-time-align: end;--_timeline-time-column: 1;--_timeline-time-row: 2;}:host([layout="alternate"]) {--_timeline-columns: minmax(0, 1fr) auto minmax(0, 1fr);--_timeline-content-column: 3;--_timeline-even-align: end;--_timeline-even-column: 1;--_timeline-rail-column: 2;--_timeline-time-column: 3;}:host([orientation="horizontal"]) {--_timeline-arrive-display: none;--_timeline-columns: minmax(0, 1fr);--_timeline-content-block-end: var(--helix-space-none);--_timeline-content-column: 1;--_timeline-content-inline-end: var(--timeline-gap, var(--helix-space-lg));--_timeline-content-row: 3;--_timeline-direction: row;--_timeline-entry-flex: 1 1 0;--_timeline-even-align: initial;--_timeline-even-column: initial;--_timeline-leave-align: center;--_timeline-leave-block-size: var(--timeline-rail-size, var(--helix-border-thin));--_timeline-leave-column: 2;--_timeline-leave-inline-size: auto;--_timeline-leave-justify: stretch;--_timeline-leave-margin-block: var(--helix-space-none);--_timeline-leave-row: 1;--_timeline-marker-row: 1;--_timeline-rail-align: center;--_timeline-rail-column: 1;--_timeline-rail-columns: auto minmax(0, 1fr);--_timeline-rail-justify: start;--_timeline-rail-row: 1;--_timeline-rail-rows: auto;--_timeline-rows: auto auto minmax(0, 1fr);--_timeline-time-align: initial;--_timeline-time-column: 1;--_timeline-time-row: 2;flex-direction: row;}:host([orientation="horizontal"]) ::slotted(*) {flex: 1 1 0;min-inline-size: 0;}@media print {:host {print-color-adjust: economy;}}`);

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

@@ -1,265 +1,26 @@
 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),
 translate var(--helix-duration-normal) var(--helix-easing-accelerate),
-visibility var(--helix-duration-normal) step-end;
-}
-
-@media (prefers-reduced-motion: reduce) {
-[part="item"] {
-animation: none;
-}
-
-[part="dismiss"] {
-transition: none;
-}
-}
-
-@media (prefers-reduced-motion: reduce) {
-:host,
+visibility var(--helix-duration-normal) step-end;}@media (prefers-reduced-motion: reduce) {[part="item"] {animation: none;}[part="dismiss"] {transition: none;}}@media (prefers-reduced-motion: reduce) {:host,
 :host([data-closed]),
-:host([data-closed]) [part="item"] {
-transition: none;
-}
-
-[part="timer"] {
-animation: helix-toast-drain var(--toast-duration, 0ms) linear forwards;
-}
-}`);
+:host([data-closed]) [part="item"] {transition: none;}[part="timer"] {animation: helix-toast-drain var(--toast-duration, 0ms) linear forwards;}}`);

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

@@ -1,86 +1,2 @@
 import { createSheet } from '@fusion.dev/helix-core';
-export const styles = createSheet(`:host {
---_toast-inset: var(--toast-inset, var(--helix-space-lg));
-display: contents;
-}
-
-:host(:not([placement])) {
---_toast-enter: var(--helix-space-lg);
-}
-
-[part="region"] {
-
---_toast-gap: var(--toast-gap, var(--helix-space-xs));
-background: none;
-block-size: auto;
-border: none;
-color: inherit;
-display: flex;
-flex-direction: column;
-inline-size: auto;
-inset: auto;
-inset-inline: var(--_toast-inset);
-margin: var(--helix-space-none);
-max-block-size: none;
-max-inline-size: none;
-overflow: visible;
-padding: var(--helix-space-none);
-pointer-events: none;
-position: fixed;
-
-z-index: var(--helix-layer-toast);
-}
-
-:host(:not([placement])) [part="region"] {
-inset-block-end: var(--_toast-inset);
-}
-
-[part="region"]:not(:popover-open) {
-display: none;
-}
-
-::slotted(*) {
-pointer-events: auto;
-}
-
-:host([placement^="bottom"]) {
---_toast-enter: var(--helix-space-lg);
-}
-
-:host([placement^="bottom"]) [part="region"] {
-inset-block-end: var(--_toast-inset);
-}
-
-:host([placement^="top"]) {
---_toast-enter: calc(var(--helix-space-lg) * -1);
-}
-
-:host([placement^="top"]) [part="region"] {
-inset-block-start: var(--_toast-inset);
-}
-
-:host([placement^="top"]) [part="region"] {
-flex-direction: column-reverse;
-}
-
-:host(:not([placement])) [part="region"] {
-align-items: flex-end;
-}
-
-:host([placement$="start"]) [part="region"] {
-align-items: flex-start;
-}
-
-:host([placement$="end"]) [part="region"] {
-align-items: flex-end;
-}
-
-:host([placement$="center"]) [part="region"] {
-align-items: center;
-}
-
-@media print {
-:host {
-display: none;
-}
-}`);
+export const styles = createSheet(`:host {--_toast-inset: var(--toast-inset, var(--helix-space-lg));display: contents;}:host(:not([placement])) {--_toast-enter: var(--helix-space-lg);}[part="region"] {--_toast-gap: var(--toast-gap, var(--helix-space-xs));background: none;block-size: auto;border: none;color: inherit;display: flex;flex-direction: column;inline-size: auto;inset: auto;inset-inline: var(--_toast-inset);margin: var(--helix-space-none);max-block-size: none;max-inline-size: none;overflow: visible;padding: var(--helix-space-none);pointer-events: none;position: fixed;z-index: var(--helix-layer-toast);}:host(:not([placement])) [part="region"] {inset-block-end: var(--_toast-inset);}[part="region"]:not(:popover-open) {display: none;}::slotted(*) {pointer-events: auto;}:host([placement^="bottom"]) {--_toast-enter: var(--helix-space-lg);}:host([placement^="bottom"]) [part="region"] {inset-block-end: var(--_toast-inset);}:host([placement^="top"]) {--_toast-enter: calc(var(--helix-space-lg) * -1);}:host([placement^="top"]) [part="region"] {inset-block-start: var(--_toast-inset);}:host([placement^="top"]) [part="region"] {flex-direction: column-reverse;}:host(:not([placement])) [part="region"] {align-items: flex-end;}:host([placement$="start"]) [part="region"] {align-items: flex-start;}:host([placement$="end"]) [part="region"] {align-items: flex-end;}:host([placement$="center"]) [part="region"] {align-items: center;}@media print {:host {display: none;}}`);

package/dist/toast/root/toast-root.js

@@ -6,10 +6,11 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 };
 import { customElement } from '@fusion.dev/helix-core';
 import { HelixHeadlessToast } from '@fusion.dev/helix-headless/toast';
+import { styles as liveStyles } from '../../shared/live/live.css.js';
 import { styles } from './toast-root.css.js';
 let HelixToast = class HelixToast extends HelixHeadlessToast {
     static { this.tier = 'helix-'; }
-    static { this.styles = styles; }
+    static { this.styles = [liveStyles, styles]; }
 };
 HelixToast = __decorate([
     customElement('helix-toast')