@fusion.dev/helix 0.145.0 → 0.147.0

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

@@ -1,130 +1,14 @@
 import { createSheet } from '@fusion.dev/helix-core';
-export const styles = createSheet(`:host {
-display: inline-flex;
-flex-direction: column;
-gap: var(--helix-space-2xs);
-}
-
-:host([label-placement="start"]) [part="label"] {
-align-self: center;
-margin-block: 0;
-
-order: -2;
-
-padding-block: 0;
-padding-inline-start: var(--helix-space-xs);
-white-space: nowrap;
-}
-
-:host([label-placement="start"]) [part="track"]::before {
-align-self: center;
-background-color: var(--helix-color-border);
-block-size: calc(var(--_toggle-height) * 0.6);
-content: "";
-flex: none;
-inline-size: var(--helix-border-thin);
-margin-inline: var(--helix-space-xs);
-order: -1;
-}
-
-:host([label-placement="start"]) {
-align-items: start;
-}
-
-[part="track"] {
---_toggle-height: calc(var(--helix-size-control) - var(--helix-space-2xs) * 2);
-
---_toggle-radius: var(--helix-radii-sm);
-
---_indicator-surface: var(--helix-color-surface-raised);
-display: inline-flex;
-position: relative;
-
-align-content: flex-start;
-flex-wrap: wrap;
-
-min-block-size: var(--helix-size-control);
-
-padding: var(--helix-space-2xs);
-}
-
-:host(:not([separation])) [part="track"],
-:host([separation="outlined"]) [part="track"] {
-
---_toggle-radius: calc(var(--helix-radii-sm) - var(--helix-border-thin));
-
---_toggle-height: calc(
+export const styles = createSheet(`:host {display: inline-flex;flex-direction: column;gap: var(--helix-space-2xs);}:host([label-placement="start"]) [part="label"] {align-self: center;margin-block: 0;order: -2;padding-block: 0;padding-inline-start: var(--helix-space-xs);white-space: nowrap;}:host([label-placement="start"]) [part="track"]::before {align-self: center;background-color: var(--helix-color-border);block-size: calc(var(--_toggle-height) * 0.6);content: "";flex: none;inline-size: var(--helix-border-thin);margin-inline: var(--helix-space-xs);order: -1;}:host([label-placement="start"]) {align-items: start;}[part="track"] {--_toggle-height: calc(var(--helix-size-control) - var(--helix-space-2xs) * 2);--_toggle-radius: var(--toggle-group-item-radius, var(--helix-radii-sm));--_indicator-surface: var(--helix-color-surface-raised);display: inline-flex;flex: 1 1 auto;position: relative;align-content: flex-start;flex-wrap: wrap;min-block-size: var(--helix-size-control);padding: var(--helix-space-2xs);}:host(:not([separation])) [part="track"],
+:host([separation="outlined"]) [part="track"] {--_toggle-radius: var(
+--toggle-group-item-radius,
+calc(var(--toggle-group-radius, var(--helix-radii-sm)) - var(--helix-border-thin))
+);--_toggle-height: calc(
 var(--helix-size-control) -
-var(--helix-space-2xs) *
-2 -
-var(--helix-border-thin) *
+(var(--helix-space-2xs) + var(--helix-border-thin)) *
 2
-);
-
---_indicator-surface: var(--helix-color-surface-overlay);
-background-color: var(--helix-color-surface-sunken);
-border: var(--helix-border-thin) solid var(--helix-color-border);
-border-radius: var(--helix-radii-sm);
-padding: var(--helix-space-2xs);
-}
-
-::slotted(helix-toggle) {
-
-block-size: var(--_toggle-height);
-flex: 1 1 auto;
-}
-
-[part="indicator"] {
-
-background-color: var(--toggle-group-indicator-color, var(--_indicator-surface));
-block-size: var(--indicator-block-size, 0);
-border-radius: var(--_toggle-radius, var(--helix-radii-sm));
-box-shadow: var(--helix-shadow-sm);
-inline-size: var(--indicator-inline-size, 0);
-inset-block-start: 0;
-inset-inline-start: 0;
-opacity: 0;
-position: absolute;
-translate: var(--indicator-x, 0) var(--indicator-y, 0);
-
-transition:
+);--_indicator-surface: var(--helix-color-surface-overlay);background-color: var(--toggle-group-background-color, var(--helix-color-surface-sunken));border: var(--helix-border-thin) solid var(--toggle-group-border-color, var(--helix-color-border));border-radius: var(--toggle-group-radius, var(--helix-radii-sm));}::slotted(helix-toggle) {block-size: var(--_toggle-height);flex: 1 1 auto;}[part="indicator"],
+:host([selection-mode="multiple"]) ::slotted(helix-toggle:state(pressed)) {background-color: var(--toggle-group-indicator-color, var(--_indicator-surface));border-radius: var(--_toggle-radius);box-shadow: var(--toggle-group-indicator-shadow, var(--helix-shadow-sm));}[part="indicator"] {block-size: var(--indicator-block-size, 0);inline-size: var(--indicator-inline-size, 0);inset-block-start: 0;inset-inline-start: 0;position: absolute;translate: var(--indicator-x, 0) var(--indicator-y, 0);transition:
 translate var(--helix-duration-normal) var(--helix-easing-emphasized),
 inline-size var(--helix-duration-normal) var(--helix-easing-emphasized),
-opacity var(--helix-duration-fast) var(--helix-easing-standard);
-z-index: var(--helix-layer-base);
-}
-
-[part="indicator"][data-placed] {
-opacity: 1;
-}
-
-:host(:state(invalid)) [part="track"] {
-outline: var(--helix-size-focus-ring) solid var(--helix-color-danger);
-outline-offset: calc(var(--helix-size-focus-offset) * -1);
-}
-
-[part="row"] {
-align-items: center;
-display: flex;
-gap: var(--helix-space-sm);
-}
-
-[part="row"] [part="track"] {
-flex: 1 1 auto;
-}
-
-:host([selection-mode="multiple"]) ::slotted(helix-toggle:state(pressed)) {
-background-color: var(--toggle-group-indicator-color, var(--_indicator-surface));
-border-radius: var(--_toggle-radius, var(--helix-radii-sm));
-box-shadow: var(--helix-shadow-sm);
-}
-
-:host([orientation="vertical"]) [part="track"] {
-align-items: stretch;
-flex-direction: column;
-flex-wrap: nowrap;
-}
-
-:host([orientation="vertical"]) ::slotted(helix-toggle) {
-flex: 0 0 auto;
-}`);
+opacity var(--helix-duration-fast) var(--helix-easing-standard);z-index: var(--helix-layer-base);}[part="indicator"]:not([data-placed]) {opacity: 0;}:host(:state(invalid)) [part="track"] {outline: var(--helix-size-focus-ring) solid var(--helix-color-danger);outline-offset: calc(var(--helix-size-focus-offset) * -1);}[part="row"] {align-items: center;display: flex;gap: var(--helix-space-sm);}:host([orientation="vertical"]) [part="track"] {align-items: stretch;flex-direction: column;flex-wrap: nowrap;}:host([orientation="vertical"]) ::slotted(helix-toggle) {flex: 0 0 auto;}`);

package/dist/toggle/group/toggle-group.d.ts

@@ -26,7 +26,12 @@ import type { CSSResultGroup } from 'lit';
  *
  * @csspart indicator - The moving marker behind the selected item.
  *
- * @cssproperty --toggle-group-indicator-color - The fill of the moving marker.
+ * @cssproperty --toggle-group-background-color - The groove behind the items, when the group is framed.
+ * @cssproperty --toggle-group-border-color - The edge of the groove, when the group is framed.
+ * @cssproperty --toggle-group-indicator-color - The fill of the moving marker, and of each pressed item under `selection-mode="multiple"`.
+ * @cssproperty --toggle-group-indicator-shadow - The shadow of the moving marker and of each pressed item.
+ * @cssproperty --toggle-group-item-radius - Corner radius of each item, the marker, and a pressed item's fill. Without it, the curve stays concentric with the groove.
+ * @cssproperty --toggle-group-radius - Corner radius of the groove, when the group is framed.
  */
 export declare class HelixToggleGroup extends HelixHeadlessToggleGroup {
     /**

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

@@ -1,24 +1,2 @@
 import { createSheet } from '@fusion.dev/helix-core';
-export const styles = createSheet(`:host {
-block-size: 100%;
-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;}[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/toggle/root/toggle-root.d.ts

@@ -16,6 +16,12 @@ import type { CSSResultGroup } from 'lit';
  * @slot - The item's label.
  *
  * @csspart item - The radio button.
+ *
+ * @cssproperty --toggle-item-color - Text color of an item that is not chosen. Read by the base
+ *   layer, which styles the `item` part.
+ * @cssproperty --toggle-item-color-selected - Text color of the chosen item, and of each pressed
+ *   item in a group that allows several.
+ * @cssproperty --toggle-item-padding-inline - Space either side of an item's label.
  */
 export declare class HelixToggle extends HelixHeadlessToggle {
     static styles: CSSResultGroup;

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

@@ -1,36 +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: center;
-background-color: var(--toolbar-background-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;
-}
-
-@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;}[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;}}`);

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

@@ -17,10 +17,14 @@ import type { CSSResultGroup } from 'lit';
  *
  * @csspart toolbar - The toolbar container.
  *
+ * @cssproperty --toolbar-align - How the controls line up across the toolbar's axis. Centered unless set; `stretch` makes a vertical toolbar's controls as wide as it is.
  * @cssproperty --toolbar-background-color - The fill behind the controls. Transparent unless set.
+ * @cssproperty --toolbar-border-color - The color of the toolbar's edge, once it has a width.
+ * @cssproperty --toolbar-border-width - The width of the toolbar's edge. None unless set.
  * @cssproperty --toolbar-gap - The space between controls.
  * @cssproperty --toolbar-padding - The space between the toolbar's edge and its controls.
  * @cssproperty --toolbar-radius - The corner radius of the toolbar's fill.
+ * @cssproperty --toolbar-separator-gap - Extra space either side of a `Divider` between controls, along the toolbar's axis. None unless set.
  */
 export declare class HelixToolbar extends HelixHeadlessToolbar {
     static styles: CSSResultGroup;

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

@@ -1,105 +1,9 @@
 import { createSheet } from '@fusion.dev/helix-core';
-export const styles = createSheet(`:host {
-display: contents;
-}
-
-[part~="tooltip"] {
-overflow: visible;
-align-items: center;
-display: flex;
-gap: var(--helix-space-2xs);
-
-background-color: var(--tooltip-background-color, var(--helix-color-surface-inverse));
-border: none;
-border-radius: var(--helix-radii-sm);
-color: var(--helix-color-foreground-inverse);
-font-family: var(--helix-font-sans);
-font-size: var(--helix-text-xs);
-
-font-weight: var(--helix-weight-regular);
-inline-size: max-content;
-line-height: var(--helix-leading-tight);
-margin: var(--helix-space-none);
-max-inline-size: var(--tooltip-max-inline-size, 16rem);
-
-opacity: 0;
-padding: var(--helix-space-2xs) var(--helix-space-xs);
-position: fixed;
-scale: 0;
-
-transition:
+export const styles = createSheet(`:host {display: contents;}[part~="tooltip"] {overflow: visible;align-items: center;display: flex;gap: var(--tooltip-gap, var(--helix-space-2xs));background-color: var(--tooltip-background-color, var(--helix-color-surface-inverse));border: none;border-radius: var(--tooltip-radius, var(--helix-radii-sm));color: var(--tooltip-color, var(--helix-color-foreground-inverse));font-family: var(--helix-font-sans);font-size: var(--tooltip-font-size, var(--helix-text-xs));font-weight: var(--helix-weight-regular);inline-size: max-content;line-height: var(--helix-leading-tight);margin: var(--helix-space-none);max-inline-size: var(--tooltip-max-inline-size, 16rem);opacity: 0;padding: var(--tooltip-padding, var(--helix-space-2xs) var(--helix-space-xs));position: fixed;scale: 0;transition:
 opacity var(--helix-duration-fast) var(--helix-easing-standard),
 scale var(--helix-duration-fast) var(--helix-easing-emphasized),
 display var(--helix-duration-fast) allow-discrete,
-overlay var(--helix-duration-fast) allow-discrete;
-}
-
-[part~="tooltip"][data-placed] {
-opacity: 1;
-scale: 1;
-}
-
-[part~="arrow"] {
-background-color: var(--tooltip-background-color, var(--helix-color-surface-inverse));
-
-block-size: var(--tooltip-arrow-size, 0.5rem);
-inline-size: var(--tooltip-arrow-size, 0.5rem);
-position: absolute;
-rotate: 45deg;
-}
-
-:host([material="glass"]) [part~="tooltip"],
-:host([material="glass"]) [part~="arrow"] {
-backdrop-filter: var(--tooltip-backdrop, var(--helix-material-backdrop));
-background-color: var(--tooltip-background-color, var(--helix-material-translucent));
-}
-
-:host([material="frosted"]) [part~="tooltip"],
-:host([material="frosted"]) [part~="arrow"] {
-backdrop-filter: var(--tooltip-backdrop, blur(var(--helix-material-blur-lg)));
-background-color: var(--tooltip-background-color, var(--helix-material-translucent-strong));
-}
-
-:host([material="frosted"]) [part~="tooltip"],
-:host([material="glass"]) [part~="tooltip"] {
-border: var(--helix-border-thin) solid var(--helix-color-border);
-color: var(--helix-color-foreground);
-}
-
-[part~="tooltip"][data-placement^="top"] {
-transform-origin: var(--floating-arrow-x, 50%) 100%;
-}
-
-[part~="tooltip"][data-placement^="bottom"] {
-transform-origin: var(--floating-arrow-x, 50%) 0;
-}
-
-[part~="tooltip"][data-placement^="left"] {
-transform-origin: 100% var(--floating-arrow-y, 50%);
-}
-
-[part~="tooltip"][data-placement^="right"] {
-transform-origin: 0 var(--floating-arrow-y, 50%);
-}
-
-[part~="tooltip"]:not(:popover-open) {
-display: none;
-}
-
-@media (prefers-reduced-motion: reduce) {
-
-[part~="tooltip"] {
-scale: 1;
-transition: none;
-}
-
-[part~="tooltip"][data-placed] {
-scale: 1;
-}
-}
-
-@media print {
-:host {
-display: none;
-}
-}`);
+overlay var(--helix-duration-fast) allow-discrete;}[part~="tooltip"][data-placed] {opacity: 1;scale: 1;}[part~="arrow"] {background-color: var(--tooltip-background-color, var(--helix-color-surface-inverse));block-size: var(--tooltip-arrow-size, 0.5rem);inline-size: var(--tooltip-arrow-size, 0.5rem);position: absolute;rotate: 45deg;}:host([material="glass"]) [part~="tooltip"],
+:host([material="glass"]) [part~="arrow"] {backdrop-filter: var(--tooltip-backdrop, var(--helix-material-backdrop));background-color: var(--tooltip-background-color, var(--helix-material-translucent));}:host([material="frosted"]) [part~="tooltip"],
+:host([material="frosted"]) [part~="arrow"] {backdrop-filter: var(--tooltip-backdrop, blur(var(--helix-material-blur-lg)));background-color: var(--tooltip-background-color, var(--helix-material-translucent-strong));}:host([material="frosted"]) [part~="tooltip"],
+:host([material="glass"]) [part~="tooltip"] {border: var(--helix-border-thin) solid var(--tooltip-border-color, var(--helix-color-border));color: var(--tooltip-color, var(--helix-color-foreground));}[part~="tooltip"][data-placement^="top"] {transform-origin: var(--floating-arrow-x, 50%) 100%;}[part~="tooltip"][data-placement^="bottom"] {transform-origin: var(--floating-arrow-x, 50%) 0;}[part~="tooltip"][data-placement^="left"] {transform-origin: 100% var(--floating-arrow-y, 50%);}[part~="tooltip"][data-placement^="right"] {transform-origin: 0 var(--floating-arrow-y, 50%);}[part~="tooltip"]:not(:popover-open) {display: none;}@media (prefers-reduced-motion: reduce) {[part~="tooltip"] {scale: 1;transition: none;}[part~="tooltip"][data-placed] {scale: 1;}}@media print {:host {display: none;}}`);

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

@@ -20,7 +20,13 @@ import type { CSSResultGroup } from 'lit';
  * @cssproperty --tooltip-arrow-size - The size of the arrow on the bubble's edge.
  * @cssproperty --tooltip-backdrop - The blur behind a `frosted` or `glass` bubble.
  * @cssproperty --tooltip-background-color - The fill of the bubble.
+ * @cssproperty --tooltip-border-color - The edge of a `frosted` or `glass` bubble, the only kind that draws one.
+ * @cssproperty --tooltip-color - The color of the bubble's words.
+ * @cssproperty --tooltip-font-size - The size of the bubble's words.
+ * @cssproperty --tooltip-gap - The space between two things slotted into the bubble, such as a glyph and its words.
  * @cssproperty --tooltip-max-inline-size - The widest the bubble grows before its text wraps.
+ * @cssproperty --tooltip-padding - The space between the bubble's edge and its words.
+ * @cssproperty --tooltip-radius - The bubble's corner radius.
  */
 export declare class HelixTooltip extends HelixHeadlessTooltip {
     /**

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

@@ -1,32 +1,6 @@
 import { createSheet } from '@fusion.dev/helix-core';
-export const styles = createSheet(`:host {
-display: contents;
-}
-
-[part="spotlight"] {
-border-radius: var(--tour-spotlight-radius, var(--helix-radii-md));
-box-shadow: 0 0 0 100vmax var(--tour-scrim-color, var(--helix-color-overlay));
-pointer-events: none;
-position: fixed;
-
-transition:
+export const styles = createSheet(`:host {display: contents;}[part="spotlight"] {border-radius: var(--tour-spotlight-radius, var(--helix-radii-md));box-shadow: 0 0 0 100vmax var(--tour-scrim-color, var(--helix-color-overlay));pointer-events: none;position: fixed;transition:
 left var(--helix-duration-normal) var(--helix-easing-standard),
 top var(--helix-duration-normal) var(--helix-easing-standard),
 block-size var(--helix-duration-normal) var(--helix-easing-standard),
-inline-size var(--helix-duration-normal) var(--helix-easing-standard);
-z-index: var(--helix-layer-overlay);
-}
-
-[part="backdrop"] {
-background-color: var(--tour-scrim-color, var(--helix-color-overlay));
-inset: 0;
-pointer-events: none;
-position: fixed;
-z-index: var(--helix-layer-overlay);
-}
-
-@media print {
-:host {
-display: none;
-}
-}`);
+inline-size var(--helix-duration-normal) var(--helix-easing-standard);z-index: var(--helix-layer-overlay);}[part="backdrop"] {background-color: var(--tour-scrim-color, var(--helix-color-overlay));inset: 0;pointer-events: none;position: fixed;z-index: var(--helix-layer-overlay);}@media print {:host {display: none;}}`);

package/dist/tour/stop/tour-stop.css.js

@@ -1,110 +1,3 @@
 import { createSheet } from '@fusion.dev/helix-core';
-export const styles = createSheet(`:host {
-display: contents;
-}
-
-[part="bubble"] {
-background-color: var(--tour-surface-color, var(--helix-color-surface-raised));
-border: var(--tour-border-width, var(--helix-border-thin)) solid var(--helix-color-border);
-border-radius: var(--helix-radii-sm);
-box-shadow: var(--tour-shadow, var(--helix-shadow-floating));
-box-sizing: border-box;
-color: var(--helix-color-foreground);
-display: flex;
-flex-direction: column;
-gap: var(--helix-space-md);
-inline-size: max-content;
-margin: var(--helix-space-none);
-max-inline-size: var(--tour-bubble-size, 22rem);
-
-overflow: visible;
-padding: var(--tour-padding, var(--helix-space-md));
-position: fixed;
-}
-
-[part="bubble"]:focus,
-[part="bubble"]:focus-visible {
-outline: none;
-}
-
-:host [part="bubble"][hidden] {
-display: none;
-}
-
-:host([type="dialog"]) [part="bubble"] {
-margin: auto;
-}
-
-:host([type="floating"]) [part="bubble"] {
-inset: auto;
-inset-block-end: var(--helix-space-lg);
-inset-inline-end: var(--helix-space-lg);
-}
-
-::slotted([slot="heading"]) {
-font-size: var(--helix-text-md);
-font-weight: var(--helix-weight-semibold);
-margin: var(--helix-space-none);
-}
-
-::slotted([slot="description"]) {
-color: var(--helix-color-foreground-muted);
-font-size: var(--helix-text-sm);
-margin: var(--helix-space-none);
-}
-
-[part="progress"] {
-color: var(--helix-color-foreground-muted);
-font-size: var(--helix-text-sm);
-font-variant-numeric: tabular-nums;
-}
-
-[part="content"] {
-display: flex;
-flex-direction: column;
-gap: var(--helix-space-xs);
-}
-
-[part="actions"] {
-align-items: center;
-display: flex;
-gap: var(--helix-space-xs);
-justify-content: flex-end;
-}
-
-[part="skip"] {
-margin-inline-end: auto;
-}
-
-[part~="arrow"] {
-background-color: var(--tour-surface-color, var(--helix-color-surface-raised));
-
-block-size: var(--tour-arrow-size, 0.5rem);
-inline-size: var(--tour-arrow-size, 0.5rem);
-position: absolute;
-rotate: 45deg;
-}
-
-[part="bubble"][data-placement^="bottom"] [part~="arrow"] {
-border-left: var(--helix-border-thin) solid var(--helix-color-border);
-border-top: var(--helix-border-thin) solid var(--helix-color-border);
-}
-
-[part="bubble"][data-placement^="top"] [part~="arrow"] {
-border-bottom: var(--helix-border-thin) solid var(--helix-color-border);
-border-right: var(--helix-border-thin) solid var(--helix-color-border);
-}
-
-[part="bubble"][data-placement^="right"] [part~="arrow"] {
-border-bottom: var(--helix-border-thin) solid var(--helix-color-border);
-border-left: var(--helix-border-thin) solid var(--helix-color-border);
-}
-
-[part="bubble"][data-placement^="left"] [part~="arrow"] {
-border-right: var(--helix-border-thin) solid var(--helix-color-border);
-border-top: var(--helix-border-thin) solid var(--helix-color-border);
-}
-
-:host([type]) [part~="arrow"] {
-display: none;
-}`);
+export const styles = createSheet(`:host {display: contents;}[part="bubble"] {background-color: var(--tour-surface-color, var(--helix-color-surface-raised));border: var(--tour-border-width, var(--helix-border-thin)) solid var(--helix-color-border);border-radius: var(--helix-radii-sm);box-shadow: var(--tour-shadow, var(--helix-shadow-floating));box-sizing: border-box;color: var(--helix-color-foreground);display: flex;flex-direction: column;gap: var(--helix-space-md);inline-size: max-content;margin: var(--helix-space-none);max-inline-size: var(--tour-bubble-size, 22rem);overflow: visible;padding: var(--tour-padding, var(--helix-space-md));position: fixed;}[part="bubble"]:focus,
+[part="bubble"]:focus-visible {outline: none;}:host [part="bubble"][hidden] {display: none;}:host([type="dialog"]) [part="bubble"] {margin: auto;}:host([type="floating"]) [part="bubble"] {inset: auto;inset-block-end: var(--helix-space-lg);inset-inline-end: var(--helix-space-lg);}::slotted([slot="heading"]) {font-size: var(--helix-text-md);font-weight: var(--helix-weight-semibold);margin: var(--helix-space-none);}::slotted([slot="description"]) {color: var(--helix-color-foreground-muted);font-size: var(--helix-text-sm);margin: var(--helix-space-none);}[part="progress"] {color: var(--helix-color-foreground-muted);font-size: var(--helix-text-sm);font-variant-numeric: tabular-nums;}[part="content"] {display: flex;flex-direction: column;gap: var(--helix-space-xs);}[part="actions"] {align-items: center;display: flex;gap: var(--helix-space-xs);justify-content: flex-end;}[part="skip"] {margin-inline-end: auto;}[part~="arrow"] {background-color: var(--tour-surface-color, var(--helix-color-surface-raised));block-size: var(--tour-arrow-size, 0.5rem);inline-size: var(--tour-arrow-size, 0.5rem);position: absolute;rotate: 45deg;}[part="bubble"][data-placement^="bottom"] [part~="arrow"] {border-left: var(--helix-border-thin) solid var(--helix-color-border);border-top: var(--helix-border-thin) solid var(--helix-color-border);}[part="bubble"][data-placement^="top"] [part~="arrow"] {border-bottom: var(--helix-border-thin) solid var(--helix-color-border);border-right: var(--helix-border-thin) solid var(--helix-color-border);}[part="bubble"][data-placement^="right"] [part~="arrow"] {border-bottom: var(--helix-border-thin) solid var(--helix-color-border);border-left: var(--helix-border-thin) solid var(--helix-color-border);}[part="bubble"][data-placement^="left"] [part~="arrow"] {border-right: var(--helix-border-thin) solid var(--helix-color-border);border-top: var(--helix-border-thin) solid var(--helix-color-border);}:host([type]) [part~="arrow"] {display: none;}`);