@fusion.dev/helix 0.147.0 → 0.148.0

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

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

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

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

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

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

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

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

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

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

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

@@ -7,6 +7,10 @@ import type { CSSResultGroup } from 'lit';
  * The toolbar draws no frame of its own, so it does not add a second frame
  * inside whatever already frames the bar.
  *
+ * Its controls are the small size, since a toolbar is dense by nature, and a
+ * control added later takes it without being told. `size="md"` or `"lg"`
+ * makes every control in it larger together.
+ *
  * @since 0.1.0
  * @status stable
  * @category layout
@@ -28,6 +32,11 @@ import type { CSSResultGroup } from 'lit';
  */
 export declare class HelixToolbar extends HelixHeadlessToolbar {
     static styles: CSSResultGroup;
+    /**
+     * The size of every control in the toolbar: their height, icons, boxes and
+     * tags. Unset is the small size, as a toolbar is dense by nature.
+     */
+    size?: 'sm' | 'md' | 'lg';
 }
 declare global {
     interface HTMLElementTagNameMap {

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

@@ -6,10 +6,14 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 };
 import { customElement } from '@fusion.dev/helix-core';
 import { HelixHeadlessToolbar } from '@fusion.dev/helix-headless/toolbar';
+import { property } from 'lit/decorators.js';
 import { styles } from './toolbar-root.css.js';
 let HelixToolbar = class HelixToolbar extends HelixHeadlessToolbar {
     static { this.styles = styles; }
 };
+__decorate([
+    property({ reflect: true })
+], HelixToolbar.prototype, "size", void 0);
 HelixToolbar = __decorate([
     customElement('helix-toolbar')
 ], HelixToolbar);