@fusion.dev/helix 0.154.0 → 0.156.0

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

@@ -2,5 +2,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-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"],
+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);}::slotted([slot="icon"]) {block-size: var(--icon-size);inline-size: var(--icon-size);}@media print {:host {display: none;}}:host([labels="hover"]) {--_speed-dial-label-opacity: 0;}:host([labels="hover"]) [part="actions"],
 :host([labels="hover"]) [part="actions"] ::slotted(*) {pointer-events: none;}`);

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

@@ -1,4 +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);}[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
+[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);}[part="error"] {color: var(--table-error-color, var(--helix-color-foreground));font-family: var(--helix-font-sans);font-size: var(--helix-text-sm);margin: var(--helix-space-none);padding-block: var(--helix-space-md);padding-inline: var(--helix-space-sm);text-align: center;}: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

@@ -15,6 +15,7 @@ import '../../checkbox/index.js';
  *
  * @slot - The table's rows.
  * @slot empty - Content shown when there are no rows and none are loading, such as a picture and a link. Falls back to `empty-text`, which the live region still says.
+ * @slot error - Content shown while `error-text` is set, such as a button that tries again. Falls back to `error-text`, which the live region still says.
  * @slot heading - Words that name the table, shown above it in the weight of a heading.
  * @slot loading - Content shown while the rows load, such as a spinner. Falls back to `loading-text`, which the live region still says.
  *
@@ -29,6 +30,7 @@ import '../../checkbox/index.js';
  * @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-error-color - The color of the words in the line shown while `error-text` is set.
  * @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/tabs/root/tabs-root.css.js

@@ -1,5 +1,9 @@
 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;}:host([variant="underlined"]) {--_tabs-rule: linear-gradient(
+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"]: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))
 );--_tab-radius: var(--helix-radii-none);--_tab-selected-shadow: none;--_tab-selected-surface: transparent;}:host([variant="segmented"]) [part="tabs"] {--_tab-selected-surface: var(--helix-color-surface-overlay);--_tab-height: 100%;background-color: var(--helix-color-surface-sunken);block-size: var(--helix-size-control);border: var(--helix-border-thin) solid var(--helix-color-border);border-radius: var(--helix-radii-sm);justify-self: start;padding: var(--helix-space-2xs);inline-size: fit-content;}[part="panels"] {display: grid;grid-template-rows: minmax(0, 1fr);min-block-size: 0;min-inline-size: 0;}[part="indicator"] {background-color: var(--_indicator-color, transparent);block-size: var(--_indicator-block, var(--helix-border-thick));border: var(--_indicator-border, 0) solid var(--_indicator-border-color, transparent);border-radius: var(--tabs-indicator-radius, var(--_indicator-radius, var(--helix-radii-none)));box-shadow: var(--tabs-indicator-shadow, var(--_indicator-shadow, none));inline-size: var(--indicator-inline-size, 0);inset-block-start: 0;inset-inline-start: 0;opacity: 0;position: absolute;translate: calc(var(--indicator-x, 0px) + var(--_indicator-offset-x, 0px))

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

@@ -27,6 +27,8 @@ import type { CSSResultGroup } from 'lit';
  *
  * @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-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 tabs - The tab list.
  *
  * @cssproperty --tabs-gap - The space between tabs.
@@ -35,6 +37,7 @@ import type { CSSResultGroup } from 'lit';
  * @cssproperty --tabs-indicator-shadow - The shadow under the mark, which the pill and `segmented` draw.
  * @cssproperty --tabs-indicator-thickness - The height of the bar under `underlined`.
  * @cssproperty --tabs-rule-color - The color of the rule under the row in `underlined`.
+ * @cssproperty --tabs-scroll-background-color - The fill behind the scroll buttons, over the tabs that pass under them.
  */
 export declare class HelixTabs extends HelixHeadlessTabs {
     static styles: CSSResultGroup;

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="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);}`);

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

@@ -15,11 +15,13 @@ import type { CSSResultGroup } from 'lit';
  *
  * @slot - The tab's label.
  *
+ * @csspart dismiss - The mark a pointer presses to close a `dismissible` tab.
  * @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.
  * @cssproperty --tabs-tab-color - The label color of a tab that is not current.
  * @cssproperty --tabs-tab-disabled-opacity - How faint a disabled tab is drawn.
+ * @cssproperty --tabs-tab-dismiss-color - The color of the mark that closes a `dismissible` tab.
  * @cssproperty --tabs-tab-font-size - The size of a tab's label.
  * @cssproperty --tabs-tab-font-weight - The weight of a tab's label.
  * @cssproperty --tabs-tab-hover-background-color - The wash under the pointer.

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

@@ -7,6 +7,11 @@ import type { CSSResultGroup } from 'lit';
  * Seven tones. The fill is a tint of the status color made with `color-mix`, so
  * when a theme changes its status colors, the tints change with them.
  *
+ * A tag takes its height from the region it is in, as the controls beside it
+ * do: `data-density="sm"`, `md`, or `lg` on the tag or on any element around
+ * it sets `--helix-size-tag` to the small, resting, or large step, so a row of
+ * tags and buttons stays one height. `shape="pill"` rounds its ends.
+ *
  * @since 0.1.0
  * @status stable
  * @category markers

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

@@ -1,7 +1,8 @@
 import { createSheet } from '@fusion.dev/helix-core';
 export const styles = createSheet(`[part="field"] {align-items: center;background-color: var(--time-input-background-color, var(--helix-color-well));flex-wrap: wrap;min-block-size: var(--helix-size-control);padding-block: var(--helix-space-2xs);border: var(--helix-border-thin) solid var(--helix-color-border);border-radius: var(--helix-radii-sm);display: flex;gap: var(--helix-space-2xs);padding-inline: var(--helix-space-xs);transition:
 background-color var(--helix-duration-fast) var(--helix-easing-standard),
-border-color var(--helix-duration-fast) var(--helix-easing-standard);}:host(:disabled) [part="field"] {color: var(--helix-color-foreground-subtle);}[part="trigger"] {--icon-size: var(--helix-size-icon);all: unset;align-items: center;box-sizing: border-box;color: var(--helix-color-foreground-muted);cursor: pointer;display: flex;flex: none;transition: color var(--helix-duration-fast) var(--helix-easing-standard);}:host(:not([mode="multiple"])) [part="field"] {flex-wrap: nowrap;}[part="trigger-icon"] {block-size: var(--icon-size);inline-size: var(--icon-size);}[part="trigger"]:hover {color: var(--helix-color-foreground);}[part="trigger"]:focus-visible {outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);outline-offset: var(--helix-size-focus-offset);}:host(:disabled) [part="trigger"] {cursor: not-allowed;}[part="surface"] {--_floating-border-color: var(--time-input-border-color, var(--helix-color-border));--_floating-border-width: var(--time-input-border-width, var(--helix-border-floating));--_floating-shadow: var(--time-input-shadow, var(--helix-shadow-floating));inline-size: var(--floating-anchor-inline-size, 100%);min-inline-size: max-content;overflow: hidden;padding-block: var(--helix-space-2xs);padding-inline: var(--helix-space-none);position: absolute;}::slotted([slot="panel-header"]) {display: block;margin-block-end: var(--helix-space-sm);margin-inline: var(--helix-space-sm);}::slotted([slot="panel-footer"]) {display: block;margin-block-start: var(--helix-space-sm);margin-inline: var(--helix-space-sm);}@media (prefers-reduced-motion: reduce) {[part="field"],
+border-color var(--helix-duration-fast) var(--helix-easing-standard);}slot[name="start"]::slotted(*),
+slot[name="end"]::slotted(*) {color: var(--helix-color-foreground-subtle);flex: none;}:host(:disabled) [part="field"] {color: var(--helix-color-foreground-subtle);}[part="trigger"] {--icon-size: var(--helix-size-icon);all: unset;align-items: center;box-sizing: border-box;color: var(--helix-color-foreground-muted);cursor: pointer;display: flex;flex: none;transition: color var(--helix-duration-fast) var(--helix-easing-standard);}:host(:not([mode="multiple"])) [part="field"] {flex-wrap: nowrap;}[part="trigger-icon"] {block-size: var(--icon-size);inline-size: var(--icon-size);}[part="trigger"]:hover {color: var(--helix-color-foreground);}[part="trigger"]:focus-visible {outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);outline-offset: var(--helix-size-focus-offset);}:host(:disabled) [part="trigger"] {cursor: not-allowed;}[part="surface"] {--_floating-border-color: var(--time-input-border-color, var(--helix-color-border));--_floating-border-width: var(--time-input-border-width, var(--helix-border-floating));--_floating-shadow: var(--time-input-shadow, var(--helix-shadow-floating));inline-size: var(--floating-anchor-inline-size, 100%);min-inline-size: max-content;overflow: hidden;padding-block: var(--helix-space-2xs);padding-inline: var(--helix-space-none);position: absolute;}::slotted([slot="panel-header"]) {display: block;margin-block-end: var(--helix-space-sm);margin-inline: var(--helix-space-sm);}::slotted([slot="panel-footer"]) {display: block;margin-block-start: var(--helix-space-sm);margin-inline: var(--helix-space-sm);}@media (prefers-reduced-motion: reduce) {[part="field"],
 [part="trigger"] {transition: none;}}:host([variant="wheels"]) [part="surface"] {inline-size: max-content;}[part="time"] {flex: none;}:host([mode="multiple"]) [part="control"] {flex-basis: 0;min-inline-size: var(--helix-size-icon-loose);}[part="segments"] {--_segment-focus-background-color: var(
 --time-input-segment-focus-background-color,
 var(--helix-color-primary)

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

@@ -1,5 +1,5 @@
 import { createSheet } from '@fusion.dev/helix-core';
-export const styles = createSheet(`:host {display: block;}[part="list"] {--listbox-max-block-size: var(
+export const styles = createSheet(`:host {display: block;}[part="label"] {color: var(--helix-color-foreground);display: block;font-family: var(--helix-font-sans);font-size: var(--helix-text-sm);font-weight: var(--helix-weight-medium);line-height: var(--helix-leading-tight);padding-block-end: var(--helix-space-2xs);}[part="list"] {--listbox-max-block-size: var(
 --time-picker-list-block-size,
 calc(var(--helix-size-control-tight) * 7)
 );display: block;}[part="list"]::part(items) {background-color: transparent;border: none;border-radius: var(--helix-radii-none);padding-block: var(--helix-space-none);}:host([mode="range"]) [part~="option"]:state(selected)::part(item) {background-color: var(--helix-color-surface-inverse);color: var(--helix-color-foreground-inverse);}[part~="option"][data-between]::part(item) {background-color: var(
@@ -20,4 +20,4 @@ var(--time-picker-invalid-color, var(--helix-color-danger));outline-offset: var(
 :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(--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;}}`);
+var(--time-picker-invalid-color, var(--helix-color-danger));outline-offset: var(--helix-size-focus-offset);}[part="hint"] {color: var(--helix-color-foreground-subtle);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);}[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/timeline/item/timeline-item.css.js

@@ -1,8 +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(--timeline-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(--timeline-rail-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(--timeline-rail-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(
 --_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(--timeline-marker-color, 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(--timeline-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/item/timeline-item.d.ts

@@ -13,9 +13,13 @@ import type { CSSResultGroup } from 'lit';
  * @aliases Activity item, History entry, Event
  * @documentation https://fusion.dev/helix/components/timeline
  *
+ * @cssproperty --timeline-column-gap - Space between the rail and the time and what happened.
+ * @cssproperty --timeline-marker-color - The color of the mark on an entry with no `tone`. A `tone` colors the mark itself.
  * @cssproperty --timeline-marker-radius - How round the mark is. Zero is a square, and half its size is a disc.
  * @cssproperty --timeline-marker-size - Edge length of the mark.
+ * @cssproperty --timeline-rail-color - The color of the line.
  * @cssproperty --timeline-rail-size - Width of the line.
+ * @cssproperty --timeline-time-color - The color of the time.
  */
 export declare class HelixTimelineItem extends HelixHeadlessTimelineItem {
     static styles: CSSResultGroup;

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

@@ -20,6 +20,10 @@ import type { CSSResultGroup } from 'lit';
  *   side by side in the order they are read, and the time over what happened
  *   under each mark. Use it for a few entries, since they share the width.
  *
+ * An entry's custom properties, such as `--timeline-rail-color` and
+ * `--timeline-marker-size`, inherit, so setting them on the timeline changes
+ * every entry in it.
+ *
  * @since 0.1.0
  * @status stable
  * @category data

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

@@ -1,2 +1,2 @@
 import { createSheet } from '@fusion.dev/helix-core';
-export const styles = createSheet(`:host {display: inline-flex;position: relative;z-index: var(--helix-layer-raised);}[part="item"] {all: unset;box-sizing: border-box;}[part="item"]: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;}}`);
+export const styles = createSheet(`:host {display: inline-flex;position: relative;z-index: var(--helix-layer-raised);}[part="item"] {all: unset;box-sizing: border-box;}::slotted([slot="start"]) {margin-inline-end: var(--helix-space-xs);}::slotted([slot="end"]) {margin-inline-start: var(--helix-space-xs);}[part="item"]: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;}}`);

package/dist/video-playlist/root/video-playlist-root.js

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

package/dist/virtual-list/root/virtual-list-root.css.js

@@ -7,5 +7,5 @@ var(--helix-scrollbar-thumb-hover-color)
 var(--virtual-list-scrollbar-track-color, var(--helix-scrollbar-track-color));}::slotted([data-index]:focus-visible) {outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);outline-offset: calc(var(--helix-size-focus-offset) * -1);}::slotted([aria-selected="true"]) {background-color: var(
 --virtual-list-selected-background-color,
 var(--helix-color-primary-subtle)
-);}[part="empty"] {color: var(--virtual-list-empty-color, var(--helix-color-foreground-muted));font-size: var(--helix-text-sm);padding: var(--virtual-list-empty-padding, var(--helix-space-md));text-align: center;}[part="loading"] {color: var(--virtual-list-loading-color, var(--helix-color-foreground-muted));font-size: var(--helix-text-sm);padding: var(--virtual-list-loading-padding, var(--helix-space-sm));text-align: center;}[part="after"],
+);color: var(--virtual-list-selected-color, inherit);}[part="empty"] {color: var(--virtual-list-empty-color, var(--helix-color-foreground-muted));font-size: var(--helix-text-sm);padding: var(--virtual-list-empty-padding, var(--helix-space-md));text-align: center;}[part="loading"] {color: var(--virtual-list-loading-color, var(--helix-color-foreground-muted));font-size: var(--helix-text-sm);padding: var(--virtual-list-loading-padding, var(--helix-space-sm));text-align: center;}[part="after"],
 [part="before"] {flex: none;}@media print {:host {overflow: visible;}}`);

package/dist/virtual-list/root/virtual-list-root.d.ts

@@ -31,6 +31,7 @@ import type { CSSResultGroup } from 'lit';
  * @cssproperty --virtual-list-scrollbar-thumb-hover-color - The thumb while the pointer is over the list. Defaults to `--helix-scrollbar-thumb-hover-color`.
  * @cssproperty --virtual-list-scrollbar-track-color - The track of the list's scrollbar. Defaults to `--helix-scrollbar-track-color`.
  * @cssproperty --virtual-list-selected-background-color - The fill behind a chosen row, in a list with `selection-mode`.
+ * @cssproperty --virtual-list-selected-color - The color of the text in a chosen row, in a list with `selection-mode`. Inherited by default.
  */
 export declare class HelixVirtualList extends HelixHeadlessVirtualList {
     static styles: CSSResultGroup;