@fusion.dev/helix 0.4.1 → 0.4.3

package/dist/copy-button/root/copy-button-root.js

@@ -7,7 +7,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 import { customElement } from '@fusion.dev/helix-core';
 import { HelixHeadlessCopyButton } from '@fusion.dev/helix-headless/copy-button';
 import { HelixIconButton } from '../../icon-button/root/icon-button-root.js';
-import { MixinControlSurface } from '../../mixins/mixin-control-surface/mixin-control-surface.js';
+import { MixinControlSurface } from '../../shared/mixin-control-surface/mixin-control-surface.js';
 import { styles } from './copy-button-root.css.js';
 import '../../tooltip/index.js';
 let HelixCopyButton = class HelixCopyButton extends MixinControlSurface(HelixHeadlessCopyButton) {

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

@@ -77,8 +77,8 @@ position: absolute;
 }
 
 [part="surface"] {
-opacity: 0;
 --_travel: calc(var(--helix-space-2xs) * -1);
+opacity: 0;
 transform: translateY(var(--_travel));
 scale: 0.96;
 transition:

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

@@ -1,10 +1,10 @@
 import { createSheet } from '@fusion.dev/helix-core';
 export const styles = createSheet(`:host {
-display: inline-block;
 
 --_calendar-track: var(--date-picker-track-size, 2.5rem);
 --_calendar-row: var(--date-picker-row-size, 2.25rem);
 --_calendar-day: var(--date-picker-day-size, 1.875rem);
+display: inline-block;
 }
 
 [part="months"] {

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

@@ -1,9 +1,9 @@
 import { createSheet } from '@fusion.dev/helix-core';
 export const styles = createSheet(`:host {
-align-items: center;
-display: flex;
 
 --_divider-thickness: var(--divider-thickness, var(--helix-border-thin));
+align-items: center;
+display: flex;
 }
 
 [part="content"] {

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

@@ -1,9 +1,8 @@
 import { createSheet } from '@fusion.dev/helix-core';
 export const styles = createSheet(`:host {
+--_drawer-size: var(--drawer-size, 20rem);
 
 display: contents;
-
---_drawer-size: var(--drawer-size, 20rem);
 }
 
 :host {

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

@@ -119,8 +119,8 @@ overflow-wrap: anywhere;
 }
 
 [part="remove"] {
-all: unset;
 --icon-size: var(--helix-size-icon-tight);
+all: unset;
 
 align-items: center;
 border-radius: var(--helix-radii-sm);

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

@@ -1,9 +1,6 @@
 import { createSheet } from '@fusion.dev/helix-core';
 export const styles = createSheet(`:host {
 
-display: grid;
-grid-template-columns: minmax(0, max-content);
-
 --_heatmap-cell-width: var(--heatmap-cell-inline-size, var(--heatmap-cell-size, 0.75rem));
 --_heatmap-cell-height: var(--heatmap-cell-height, var(--heatmap-cell-size, 0.75rem));
 
@@ -36,6 +33,9 @@ var(--helix-color-primary-active) 80%,
 var(--helix-color-surface-sunken)
 );
 --heatmap-tone-5: var(--helix-color-primary-active);
+
+display: grid;
+grid-template-columns: minmax(0, max-content);
 }
 
 [part="strip"] {

package/dist/icon-button/root/icon-button-root.css.js

@@ -1,8 +1,7 @@
 import { createSheet } from '@fusion.dev/helix-core';
 export const styles = createSheet(`:host {
-display: inline-flex;
-
 --_icon-button-size: var(--icon-button-size, var(--helix-size-control));
+display: inline-flex;
 }
 
 :host {

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

@@ -1,6 +1,6 @@
 import { HelixHeadlessIconButton } from '@fusion.dev/helix-headless/icon-button';
 import type { CSSResultGroup } from 'lit';
-declare const HelixIconButton_base: (new (...args: any[]) => import("../../mixins/mixin-control-surface/mixin-control-surface.js").MixinControlSurfaceInterface) & typeof HelixHeadlessIconButton;
+declare const HelixIconButton_base: (new (...args: any[]) => import("../../shared/mixin-control-surface/mixin-control-surface.js").MixinControlSurfaceInterface) & typeof HelixHeadlessIconButton;
 /**
  * @summary A square button whose content is an icon.
  *

package/dist/icon-button/root/icon-button-root.js

@@ -7,7 +7,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 import { customElement } from '@fusion.dev/helix-core';
 import { HelixHeadlessIconButton } from '@fusion.dev/helix-headless/icon-button';
 import { property } from 'lit/decorators.js';
-import { MixinControlSurface } from '../../mixins/mixin-control-surface/mixin-control-surface.js';
+import { MixinControlSurface } from '../../shared/mixin-control-surface/mixin-control-surface.js';
 import { styles } from './icon-button-root.css.js';
 let HelixIconButton = class HelixIconButton extends MixinControlSurface(HelixHeadlessIconButton) {
     constructor() {

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

@@ -1,10 +1,9 @@
 import { createSheet } from '@fusion.dev/helix-core';
 export const styles = createSheet(`:host {
+--_input-size: var(--input-size, var(--helix-size-control));
 display: flex;
 flex-direction: column;
 gap: var(--helix-space-2xs);
-
---_input-size: var(--input-size, var(--helix-size-control));
 }
 
 [part="field"] {
@@ -75,8 +74,8 @@ background-color: transparent;
 
 [part="clear"],
 [part="reveal"] {
-all: unset;
 --icon-size: var(--helix-size-icon-tight);
+all: unset;
 
 align-items: center;
 border-radius: var(--helix-radii-sm);

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

@@ -1,13 +1,13 @@
 import { createSheet } from '@fusion.dev/helix-core';
 export const styles = createSheet(`:host {
-display: inline-flex;
-font: inherit;
-
-vertical-align: -0.05em;
 
 --_kbd-size: 0.85em;
 --_kbd-height: 1.5em;
 --_kbd-inset: 0.4em;
+display: inline-flex;
+font: inherit;
+
+vertical-align: -0.05em;
 }
 
 [part="kbd"] {

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

@@ -62,10 +62,9 @@ color-mix(in oklab, var(--chart-series) calc(var(--_legend-through, 1) * 100%),
 
 [part="entry"][data-emphasis="subtle"] [part="swatch"],
 :host([emphasis="subtle"]) [part="entry"]:not([data-emphasis]) [part="swatch"] {
+--_legend-area: 0.2;
 border: var(--legend-swatch-stroke, var(--helix-border-thick)) solid
 color-mix(in oklab, var(--chart-series) calc(var(--_legend-through, 1) * 100%), transparent);
-
---_legend-area: 0.2;
 }
 
 [part="swatch"] {

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

@@ -1,13 +1,13 @@
 import { createSheet } from '@fusion.dev/helix-core';
 export const styles = createSheet(`:host {
+
+--_loader-size: var(--helix-size-loader-md);
 color: inherit;
 
 display: inline-grid;
 flex-shrink: 0;
 place-items: center;
 vertical-align: middle;
-
---_loader-size: var(--helix-size-loader-md);
 }
 
 :host([size="sm"]) {

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

@@ -6,12 +6,12 @@ display: contents;
 
 [part="surface"] {
 
-max-block-size: var(--menu-max-block-size, var(--floating-available-block-size, none));
-overflow-y: auto;
-
 --helix-size-control: var(--helix-size-control-sm);
 --helix-size-icon: var(--helix-size-icon-sm);
 
+max-block-size: var(--menu-max-block-size, var(--floating-available-block-size, none));
+overflow-y: auto;
+
 background-color: var(--menu-background-color, var(--helix-color-surface-overlay));
 
 border: var(--menu-border-width, var(--helix-border-floating)) solid
@@ -33,8 +33,8 @@ display: none;
 }
 
 [part="surface"] {
-opacity: 0;
 --_travel: calc(var(--helix-space-2xs) * -1);
+opacity: 0;
 transform: translateY(var(--_travel));
 scale: 0.96;
 transition:

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

@@ -31,9 +31,8 @@ position: relative;
 }
 
 [part="indicator"] {
-background-color: var(--_meter-hue);
-
 --_meter-hue: var(--meter-color, var(--helix-color-primary));
+background-color: var(--_meter-hue);
 block-size: 100%;
 border-radius: inherit;
 inline-size: 100%;
@@ -49,21 +48,18 @@ transform-origin: right center;
 }
 
 [part="indicator"][data-band="good"] {
-background-color: var(--_meter-hue);
-
 --_meter-hue: var(--meter-color, var(--helix-color-success));
+background-color: var(--_meter-hue);
 }
 
 [part="indicator"][data-band="fair"] {
-background-color: var(--_meter-hue);
-
 --_meter-hue: var(--meter-color, var(--helix-color-warning));
+background-color: var(--_meter-hue);
 }
 
 [part="indicator"][data-band="poor"] {
-background-color: var(--_meter-hue);
-
 --_meter-hue: var(--meter-color, var(--helix-color-danger));
+background-color: var(--_meter-hue);
 }
 
 [part="indicator"][data-beyond="over"] {
@@ -134,10 +130,10 @@ stroke-dasharray: var(--meter-sweep) 100;
 
 :host([shape="arc"]) [part="indicator"],
 :host([shape="ring"]) [part="indicator"] {
-scale: none;
-stroke: var(--_meter-hue);
 
 --_meter-hue: var(--helix-color-foreground-muted);
+scale: none;
+stroke: var(--_meter-hue);
 stroke-dasharray: var(--meter-along) 100;
 stroke-linecap: round;
 transition: stroke-dasharray var(--helix-duration-normal) var(--helix-easing-standard);
@@ -155,23 +151,20 @@ stroke-dashoffset: calc(var(--meter-along) * -1);
 
 :host([shape="arc"]) [part="indicator"][data-band="good"],
 :host([shape="ring"]) [part="indicator"][data-band="good"] {
-stroke: var(--_meter-hue);
-
 --_meter-hue: var(--helix-color-success);
+stroke: var(--_meter-hue);
 }
 
 :host([shape="arc"]) [part="indicator"][data-band="fair"],
 :host([shape="ring"]) [part="indicator"][data-band="fair"] {
-stroke: var(--_meter-hue);
-
 --_meter-hue: var(--helix-color-warning);
+stroke: var(--_meter-hue);
 }
 
 :host([shape="arc"]) [part="indicator"][data-band="poor"],
 :host([shape="ring"]) [part="indicator"][data-band="poor"] {
-stroke: var(--_meter-hue);
-
 --_meter-hue: var(--helix-color-danger);
+stroke: var(--_meter-hue);
 }
 
 :host([shape="arc"]) [part="value"],

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

@@ -1,8 +1,8 @@
 import { createSheet } from '@fusion.dev/helix-core';
 export const styles = createSheet(`:host {
-display: block;
 
 --outline-rail: var(--helix-space-2xs);
+display: block;
 }
 
 [part="nav"] {

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

@@ -33,10 +33,10 @@ padding: var(--popover-padding, var(--helix-space-none));
 }
 
 [part="popover"] {
-opacity: 0;
 --_travel: calc(var(--helix-space-2xs) * -1);
 
 --_popover-from: 0.96;
+opacity: 0;
 transform: translateY(var(--_travel));
 scale: var(--_popover-from);
 transition:

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

@@ -1,8 +1,7 @@
 import { createSheet } from '@fusion.dev/helix-core';
 export const styles = createSheet(`:host {
-display: block;
-
 --_radio-size: var(--radio-size, var(--helix-size-checkbox));
+display: block;
 }
 
 [part="item"] {

package/dist/sandbox/preview/sandbox-preview.d.ts

@@ -42,41 +42,21 @@ export type PreviewMessage = PreviewConsole | PreviewPress | PreviewReady | Prev
  * @summary Renders sandbox source in a frame of its own.
  *
  * @description
- * A sandboxed `<iframe>` pointed at `src`, which is a document the consumer
- * provides. That document imports whatever the examples need, listens for a
- * render message, and writes the markup into itself.
+ * A sandboxed `<iframe>` pointed at `src`, a document the consumer provides.
+ * That document imports whatever the examples need, listens for a render
+ * message, and writes the markup into itself.
  *
  * **A frame rather than the page.** Rendering into the page meant an example
- * was styled by whatever surrounded it, which flatters the preview and lies
- * about it: an example that restyles `helix-card` restyled the sandbox too, a
- * script in an example ran against the real document, and a stray
- * `position: fixed` escaped the pane. It also left nothing to capture console
- * output from, and the terminal has to come from somewhere.
- *
- * The cost is that the frame starts empty. Styles and element definitions do
- * not cross into it, because a document has its own stylesheets and a window
- * has its own custom element registry, so `src` has to load them. That is the
- * consumer's document rather than something guessed at here.
+ * was styled by whatever surrounded it: an example restyling `helix-card`
+ * restyled the sandbox too, a script ran against the real document, and a stray
+ * `position: fixed` escaped the pane. The cost is that the frame starts empty,
+ * a document having its own stylesheets and a window its own registry, so `src`
+ * has to load them.
  *
  * **The source is not trusted, and the frame is what makes that safe.**
- * `sandbox="allow-scripts"` and no `allow-same-origin`, so the document runs on
- * an opaque origin: script in an example cannot reach this page, its storage,
- * its cookies, or the editor the source was typed into. Without it they could,
- * measured, through an `onerror` handler on an image that fails to load, which
- * `innerHTML` does not strip the way it refuses a `<script>` tag. That is what
- * lets a sandbox hold markup a reader pasted from somewhere, or one day arrived
- * in a shared link, rather than only what its owner typed.
- *
- * `allow-forms` is granted because examples have forms in them and a submit
- * that silently does nothing is a worse lie than one that navigates a frame
- * nobody is looking at. Top-level navigation, popups and modals are not.
- *
- * **`allow="clipboard-write *; fullscreen *"`, and the stars matter.** Both
- * policies default to `self`, and a frame on an opaque origin is not `self`, so
- * the default denies both: a component that copies to the clipboard and a video
- * offering a fullscreen button each become a control that silently does nothing,
- * a denied request rejecting a promise nobody was watching. Nothing else is
- * granted, and a copy still needs the reader's own gesture.
+ * `sandbox="allow-scripts"` and never `allow-same-origin`: the two together are
+ * the same as no sandbox at all, a document on its own origin being able to
+ * reach up and remove the attribute.
  *
  * @since 0.1.0
  * @status experimental

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

@@ -5,41 +5,20 @@ import type { CSSResultGroup, PropertyValues, TemplateResult } from 'lit';
  * @summary Pairs an editable source pane with a live preview.
  *
  * @description
- * Coordination is by event, the same way the accordion does it: a source pane
- * dispatches `helix-before-edit`, which bubbles, and the sandbox hands the value to
- * whatever preview is slotted into it. Neither child knows the other exists, so
- * either can be replaced or used alone.
+ * Coordination is by event: a source pane dispatches `helix-before-edit`, which
+ * bubbles, and the sandbox hands the value to whatever preview is slotted into
+ * it. Neither child knows the other exists, so either can be replaced or used
+ * alone.
  *
  * The event carries the pane's `name`, which is what lets one sandbox hold
- * several panes without the root identifying senders by reference. `html` is
- * the preview's markup and `css` is its stylesheet. A pane named anything else
- * is showing something rather than driving it, and is ignored: the sandbox has
- * a pane rendering the example as JSX, and guessing would have put the text of
- * a React component into the preview.
+ * several panes: `html` is the preview's markup and `css` its stylesheet. A
+ * pane named anything else is showing something rather than driving it, and is
+ * ignored.
  *
- * **The dividers are two nested `helix-splitter`s, not a grid this element
- * drags itself.** The pointer handling, the keyboard handling and the corner are
- * all the splitter's, and the corner arrives on its own wherever a nested
- * splitter crosses the one it is in.
- *
- * The panes are the inner splitter and the panel is the outer one, which is the
- * order that makes the panel span the full width: the outer divider runs edge to
- * edge and the inner stops at it.
- *
- * **Both are controlled from here, so `split` and `panel-size` stay the truth.**
- * A splitter that owned its own position would leave this element reporting one
- * arrangement and showing another, and a consumer restoring a saved layout
- * writes to these two properties. Each splitter announces where it wants to go
- * and this answers, which is the same contract a form control has with a
- * framework.
- *
- * **The panel is in pixels here and a percentage in the splitter, and the
- * conversion belongs here.** A terminal wants a number of lines rather than a
- * share of the window, so its height should not change when the window does. A
- * splitter has no business knowing that, so it stays percentage-pure and this
- * element, which does know what is in the panel, holds the box and converts.
- * That is also what keeps a stored `panelSize` from a previous visit meaning
- * what it meant when it was written.
+ * **The dividers are two nested `helix-splitter`s**, not a grid this element
+ * drags itself, so the pointer handling, the keyboard handling and the corner
+ * are all the splitter's. The panes are the inner splitter and the panel is the
+ * outer one, which is the order that makes the panel span the full width.
  *
  * @since 0.1.0
  * @status experimental

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

@@ -99,8 +99,8 @@ margin: var(--helix-space-none);
 }
 
 [part="surface"] {
-opacity: 0;
 --_travel: calc(var(--helix-space-2xs) * -1);
+opacity: 0;
 transform: translateY(var(--_travel));
 
 scale: 0.96;

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

@@ -1,8 +1,5 @@
 import { createSheet } from '@fusion.dev/helix-core';
 export const styles = createSheet(`:host {
-display: flex;
-flex-direction: column;
-gap: var(--helix-space-2xs);
 
 --_slider-track: var(--slider-track-size, var(--helix-size-progress));
 
@@ -17,6 +14,9 @@ transparent
 );
 
 --_slider-track-color: var(--slider-track-color, var(--helix-color-border));
+display: flex;
+flex-direction: column;
+gap: var(--helix-space-2xs);
 }
 
 [part="field"] {
@@ -285,11 +285,6 @@ grid-template-rows: 1fr auto;
 }
 
 :host([orientation="vertical"]) [part="control"] {
-direction: rtl;
-inline-size: var(--slider-length, 9rem);
-margin-block: calc(var(--_slider-thumb-length) / 2);
-margin-inline: 0;
-writing-mode: vertical-lr;
 
 --_slider-track-image: var(
 --slider-track-image,
@@ -299,6 +294,11 @@ var(--slider-fill-color, var(--helix-color-primary)) calc(var(--slider-fraction,
 var(--_slider-track-color) calc(var(--slider-fraction, 0) * 100%)
 )
 );
+direction: rtl;
+inline-size: var(--slider-length, 9rem);
+margin-block: calc(var(--_slider-thumb-length) / 2);
+margin-inline: 0;
+writing-mode: vertical-lr;
 }
 
 :host([orientation="vertical"]) [part="marker"] {

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

@@ -1,11 +1,10 @@
 import { createSheet } from '@fusion.dev/helix-core';
 export const styles = createSheet(`:host {
+--_sparkline-ink: var(--sparkline-color, var(--helix-color-series-1));
 block-size: var(--sparkline-block-size, 2.5em);
 
 color: var(--_sparkline-ink);
 
---_sparkline-ink: var(--sparkline-color, var(--helix-color-series-1));
-
 position: relative;
 
 display: inline-block;

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

@@ -101,8 +101,8 @@ transition: none;
 }
 
 [part="trigger"] {
-all: unset;
 --icon-size: var(--helix-size-icon);
+all: unset;
 
 align-items: center;
 

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

@@ -1,9 +1,5 @@
 import { createSheet } from '@fusion.dev/helix-core';
 export const styles = createSheet(`:host {
-counter-reset: helix-step;
-display: flex;
-gap: var(--steps-gap, var(--helix-space-md));
-
 --_steps-m: var(--steps-marker-size, var(--helix-size-icon));
 --_steps-mark-box: var(--_steps-m);
 
@@ -44,6 +40,9 @@ var(--_steps-connector-inset)
 );
 --_steps-trail-block-start: calc(var(--_steps-mark-box) / 2);
 --_steps-trail-block-size: var(--helix-border-thin);
+counter-reset: helix-step;
+display: flex;
+gap: var(--steps-gap, var(--helix-space-md));
 }
 
 :host(:not([orientation="vertical"])) ::slotted(*) {
@@ -52,8 +51,6 @@ min-inline-size: 0;
 }
 
 :host([orientation="vertical"]) {
-flex-direction: column;
-
 --_steps-mark-box: var(--helix-size-control-tight);
 --_steps-columns: auto minmax(0, 1fr);
 --_steps-marker-justify: start;
@@ -76,6 +73,7 @@ var(--_steps-mark-box) +
 var(--steps-gap, var(--helix-space-md)) /
 2
 );
+flex-direction: column;
 }
 
 :host([variant="numeric"]) {

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

@@ -1,5 +1,7 @@
 import { createSheet } from '@fusion.dev/helix-core';
 export const styles = createSheet(`:host {
+
+--_step-inset: var(--helix-space-sm);
 align-items: start;
 column-gap: var(--helix-space-2xs);
 counter-increment: helix-step;
@@ -9,8 +11,6 @@ grid-template-columns: var(--_steps-columns, minmax(0, 1fr));
 min-inline-size: 0;
 position: relative;
 row-gap: var(--_steps-row-gap, var(--helix-space-2xs));
-
---_step-inset: var(--helix-space-sm);
 }
 
 [part="lead"],

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

@@ -1,9 +1,5 @@
 import { createSheet } from '@fusion.dev/helix-core';
 export const styles = createSheet(`:host {
-display: inline-flex;
-flex-direction: column;
-gap: var(--helix-space-2xs);
-
 --_switch-height: var(--switch-block-size, var(--helix-size-switch));
 
 --_switch-width: var(--switch-inline-size, calc(var(--_switch-height) * 1.75));
@@ -11,6 +7,9 @@ gap: var(--helix-space-2xs);
 --_switch-inset: calc(var(--helix-space-2xs) / 2);
 
 --_field-control-inline-size: var(--_switch-width);
+display: inline-flex;
+flex-direction: column;
+gap: var(--helix-space-2xs);
 }
 
 [part="field"] {

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

@@ -1,5 +1,14 @@
 import { createSheet } from '@fusion.dev/helix-core';
 export const styles = createSheet(`:host {
+--_tag-height: var(--helix-size-tag);
+
+--_tag-color: var(--helix-color-foreground-muted);
+--_tag-text: var(--helix-text-xs);
+--_tag-inset: var(--helix-space-xs);
+
+--_tag-fill: color-mix(in srgb, var(--_tag-color) 14%, var(--helix-color-background));
+--_tag-edge: color-mix(in srgb, var(--_tag-color) 28%, var(--helix-color-background));
+--_tag-label: color-mix(in oklab, var(--_tag-color) 55%, var(--helix-color-foreground));
 align-items: center;
 background-color: var(--tag-background-color, var(--_tag-fill));
 block-size: var(--_tag-height);
@@ -13,16 +22,6 @@ gap: var(--helix-space-2xs);
 line-height: var(--helix-leading-tight);
 padding-inline: var(--_tag-inset);
 white-space: nowrap;
-
---_tag-height: var(--helix-size-tag);
-
---_tag-color: var(--helix-color-foreground-muted);
---_tag-text: var(--helix-text-xs);
---_tag-inset: var(--helix-space-xs);
-
---_tag-fill: color-mix(in srgb, var(--_tag-color) 14%, var(--helix-color-background));
---_tag-edge: color-mix(in srgb, var(--_tag-color) 28%, var(--helix-color-background));
---_tag-label: color-mix(in oklab, var(--_tag-color) 55%, var(--helix-color-foreground));
 }
 
 slot:not([name]) {

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

@@ -46,8 +46,8 @@ color: var(--helix-color-foreground-subtle);
 }
 
 [part="trigger"] {
-all: unset;
 --icon-size: var(--helix-size-icon);
+all: unset;
 
 align-items: center;
 color: var(--helix-color-foreground-muted);

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

@@ -1,6 +1,11 @@
 import { createSheet } from '@fusion.dev/helix-core';
 export const styles = createSheet(`:host {
 
+--helix-size-icon: var(--helix-size-icon-sm);
+--helix-size-control: var(--helix-size-control-sm);
+
+--_toast-line: calc(var(--helix-text-sm) * var(--helix-leading-normal));
+
 display: grid;
 
 grid-template-rows: minmax(0, 1fr);
@@ -12,11 +17,6 @@ margin-block-start var(--helix-duration-normal) var(--helix-easing-standard),
 opacity var(--helix-duration-fast) var(--helix-easing-standard),
 translate var(--helix-duration-normal) var(--helix-easing-standard);
 
---helix-size-icon: var(--helix-size-icon-sm);
---helix-size-control: var(--helix-size-control-sm);
-
---_toast-line: calc(var(--helix-text-sm) * var(--helix-leading-normal));
-
 inline-size: var(--toast-inline-size, 22rem);
 max-inline-size: calc(100vw - var(--helix-space-xl));
 }