@fusion.dev/helix 0.158.0 → 0.160.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/date-input/root/date-input-root.css.js

@@ -2,8 +2,9 @@ import { createSheet } from '@fusion.dev/helix-core';
 export const styles = createSheet(`[part="field"] {align-items: center;background-color: var(--date-input-background-color, var(--helix-color-well));border: var(--helix-border-thin) solid var(--helix-color-border);border-radius: var(--helix-radii-sm);display: flex;flex-wrap: wrap;gap: var(--helix-space-2xs);min-block-size: var(--helix-size-control);padding-block: 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);}slot[name="start"]::slotted(*),
-slot[name="end"]::slotted(*) {color: var(--helix-color-foreground-subtle);flex: none;}[part="trigger"] {all: unset;block-size: var(--helix-size-icon);box-sizing: border-box;color: var(--helix-color-foreground-muted);cursor: pointer;flex: none;inline-size: var(--helix-size-icon);mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Crect x='3' y='5' width='18' height='16' rx='2'/%3E%3Cpath d='M3 10h18M8 3v4M16 3v4'/%3E%3C/svg%3E");mask-position: center;mask-repeat: no-repeat;mask-size: 100%;background-color: currentColor;transition: color var(--helix-duration-fast) var(--helix-easing-standard);}[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);}[part="surface"] {--_floating-border-color: var(--date-input-border-color, var(--helix-color-border));--_floating-border-width: var(--date-input-border-width, var(--helix-border-floating));--_floating-shadow: var(--date-input-shadow, var(--helix-shadow-floating));inline-size: max-content;padding: var(--helix-space-sm);position: absolute;}::slotted([slot="panel-header"]) {display: block;margin-block-end: var(--helix-space-sm);}::slotted([slot="panel-footer"]) {display: block;margin-block-start: var(--helix-space-sm);}:host(:disabled) [part="field"] {color: var(--helix-color-foreground-subtle);}:host(:disabled) [part="control"],
-:host(:disabled) [part="trigger"] {cursor: not-allowed;}@media (prefers-reduced-motion: reduce) {[part="field"],
+slot[name="end"]::slotted(*) {color: var(--helix-color-foreground-subtle);flex: none;}[part="trigger"] {all: unset;block-size: var(--helix-size-icon);box-sizing: border-box;color: var(--helix-color-foreground-muted);cursor: pointer;flex: none;inline-size: var(--helix-size-icon);mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Crect x='3' y='5' width='18' height='16' rx='2'/%3E%3Cpath d='M3 10h18M8 3v4M16 3v4'/%3E%3C/svg%3E");mask-position: center;mask-repeat: no-repeat;mask-size: 100%;background-color: currentColor;transition: color var(--helix-duration-fast) var(--helix-easing-standard);}[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);}[part="clear"] {--icon-size: var(--helix-size-icon-tight);all: unset;align-items: center;border-radius: var(--helix-radii-sm);box-sizing: border-box;color: var(--helix-color-foreground-muted);cursor: pointer;display: flex;flex: 0 0 auto;justify-content: center;min-block-size: var(--helix-size-icon-loose);min-inline-size: var(--helix-size-icon-loose);transition: color var(--helix-duration-fast) var(--helix-easing-standard);}[part="clear"]:hover {color: var(--helix-color-foreground);}[part="clear"]:focus-visible {outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);outline-offset: var(--helix-size-focus-offset);}[part="surface"] {--_floating-border-color: var(--date-input-border-color, var(--helix-color-border));--_floating-border-width: var(--date-input-border-width, var(--helix-border-floating));--_floating-shadow: var(--date-input-shadow, var(--helix-shadow-floating));inline-size: max-content;padding: var(--helix-space-sm);position: absolute;}::slotted([slot="panel-header"]) {display: block;margin-block-end: var(--helix-space-sm);}::slotted([slot="panel-footer"]) {display: block;margin-block-start: var(--helix-space-sm);}:host(:disabled) [part="field"] {color: var(--helix-color-foreground-subtle);}:host(:disabled) [part="control"],
+:host(:disabled) [part="trigger"] {cursor: not-allowed;}@media (prefers-reduced-motion: reduce) {[part="clear"],
+[part="field"],
 [part="trigger"] {transition: none;}}[part="date"] {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(
 --date-input-segment-focus-background-color,
 var(--helix-color-primary)

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

@@ -15,6 +15,12 @@ light-dark(
 color-mix(in oklab, var(--helix-color-foreground) 10%, transparent),
 color-mix(in oklab, var(--helix-color-foreground) 14%, transparent)
 )
+);}[part~="cell"][data-range-preview]:is([data-range-start], [data-range-middle], [data-range-end]) {background-color: var(
+--date-picker-range-preview-color,
+light-dark(
+color-mix(in oklab, var(--helix-color-foreground) 5%, transparent),
+color-mix(in oklab, var(--helix-color-foreground) 8%, transparent)
+)
 );}[part~="cell"][aria-selected]:not([data-range-start]):not([data-range-middle]):not([data-range-end])
 [part~="day"] {box-shadow: 0 0 0 calc((var(--_calendar-row) - var(--_calendar-day)) / 2)
 var(

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

@@ -28,6 +28,7 @@ import type { CSSResultGroup } from 'lit';
  * @cssproperty --date-picker-feedback-color - The color of the message under the calendar, while `feedback` is set.
  * @cssproperty --date-picker-period-size - Height of a month or a year in the months and years views, where `max-view` is set.
  * @cssproperty --date-picker-range-color - Band behind the days in a range.
+ * @cssproperty --date-picker-range-preview-color - Band behind the days a waiting range is drawn to, before its second end is chosen.
  * @cssproperty --date-picker-row-size - Height of a week row.
  * @cssproperty --date-picker-selected-color - Fill behind a selected day.
  * @cssproperty --date-picker-track-size - Width of a column, which is what sets the space between days.

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'],
@@ -88,6 +88,7 @@ registerElementEvents({
         'helix-before-change',
         'helix-before-close',
         'helix-before-open',
+        'helix-clear',
         'input',
         'toggle',
     ],
@@ -248,6 +249,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',
@@ -266,6 +268,7 @@ registerElementEvents({
         'helix-before-change',
         'helix-before-close',
         'helix-before-open',
+        'helix-clear',
         'input',
         'toggle',
     ],

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/shared/field/field-segments.css.js

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

package/dist/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/time-input/root/time-input-root.css.js

@@ -2,7 +2,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);}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"],
+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);}[part="clear"] {--icon-size: var(--helix-size-icon-tight);all: unset;align-items: center;border-radius: var(--helix-radii-sm);box-sizing: border-box;color: var(--helix-color-foreground-muted);cursor: pointer;display: flex;flex: 0 0 auto;justify-content: center;min-block-size: var(--helix-size-icon-loose);min-inline-size: var(--helix-size-icon-loose);transition: color var(--helix-duration-fast) var(--helix-easing-standard);}[part="clear"]:hover {color: var(--helix-color-foreground);}[part="clear"]: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="clear"],
+[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/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),