@fusion.dev/helix 0.146.0 → 0.147.0

package/dist/shared/chart/tooltip.css.js

@@ -1,69 +1,2 @@
 import { createSheet } from '@fusion.dev/helix-core';
-export const styles = createSheet(`[part="mark"] {
-block-size: 1px;
-inline-size: 1px;
-pointer-events: none;
-position: absolute;
-}
-
-[part="tooltip-anchor"] {
-inset: 0;
-pointer-events: none;
-position: absolute;
-}
-
-[part="tooltip-label"] {
-display: block;
-font-weight: var(--helix-weight-medium);
-margin-block-end: var(--helix-space-2xs);
-}
-
-[part~="tooltip-cell"] {
-align-items: baseline;
-column-gap: var(--helix-space-sm);
-display: grid;
-grid-template-columns: 0.5em minmax(0, 1fr) auto;
-}
-
-[part="tooltip-name"] {
-grid-column: 2;
-
-opacity: 0.72;
-}
-
-[part="tooltip-value"] {
-font-variant-numeric: tabular-nums;
-grid-column: 3;
-}
-
-[part~="tooltip-cell"][data-series]::before {
-background-color: var(--chart-series);
-block-size: 0.5em;
-border-radius: var(--helix-radii-full);
-content: "";
-grid-column: 1;
-inline-size: 0.5em;
-}
-
-[part~="tooltip-cell-current"] {
-font-weight: var(--helix-weight-medium);
-}
-
-[part~="tooltip-cell-current"] [part="tooltip-name"] {
-opacity: 1;
-}
-
-[part="plot"]:focus-visible {
-outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);
-outline-offset: var(--helix-size-focus-offset);
-}
-
-[part="live"] {
-block-size: 1px;
-clip-path: inset(50%);
-inline-size: 1px;
-margin: var(--helix-space-none);
-overflow: hidden;
-position: absolute;
-white-space: nowrap;
-}`);
+export const styles = createSheet(`[part="mark"] {block-size: 1px;inline-size: 1px;pointer-events: none;position: absolute;}[part="tooltip-anchor"] {inset: 0;pointer-events: none;position: absolute;}[part="tooltip-label"] {display: block;font-weight: var(--helix-weight-medium);margin-block-end: var(--helix-space-2xs);}[part~="tooltip-cell"] {align-items: baseline;column-gap: var(--helix-space-sm);display: grid;grid-template-columns: 0.5em minmax(0, 1fr) auto;}[part="tooltip-name"] {grid-column: 2;opacity: 0.72;}[part="tooltip-value"] {font-variant-numeric: tabular-nums;grid-column: 3;}[part~="tooltip-cell"][data-series]::before {background-color: var(--chart-series);block-size: 0.5em;border-radius: var(--helix-radii-full);content: "";grid-column: 1;inline-size: 0.5em;}[part~="tooltip-cell-current"] {font-weight: var(--helix-weight-medium);}[part~="tooltip-cell-current"] [part="tooltip-name"] {opacity: 1;}[part="plot"]:focus-visible {outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);outline-offset: var(--helix-size-focus-offset);}[part="live"] {block-size: 1px;clip-path: inset(50%);inline-size: 1px;margin: var(--helix-space-none);overflow: hidden;position: absolute;white-space: nowrap;}`);

package/dist/shared/collection/state.css.js

@@ -1,11 +1,3 @@
 import { createSheet } from '@fusion.dev/helix-core';
 export const styles = createSheet(`[part="empty"],
-[part="loading"] {
-color: var(--helix-color-foreground-subtle);
-font-family: var(--helix-font-sans);
-font-size: var(--helix-text-sm);
-margin: var(--helix-space-none);
-padding-block: var(--_collection-inset-block, var(--helix-space-md));
-padding-inline: var(--_collection-inset-inline, var(--helix-space-sm));
-text-align: center;
-}`);
+[part="loading"] {color: var(--helix-color-foreground-subtle);font-family: var(--helix-font-sans);font-size: var(--helix-text-sm);margin: var(--helix-space-none);padding-block: var(--_collection-inset-block, var(--helix-space-md));padding-inline: var(--_collection-inset-inline, var(--helix-space-sm));text-align: center;}`);

package/dist/shared/field/field-frame.css.js

@@ -1,36 +1,6 @@
 import { createSheet } from '@fusion.dev/helix-core';
-export const styles = createSheet(`:host {
-display: flex;
-flex-direction: column;
-gap: var(--helix-space-2xs);
-}
-
-:host(:not(:disabled)) [part="field"]:hover {
-border-color: var(--helix-color-primary);
-}
-
-:host(:focus-within) [part="field"],
-:host(:focus-within) [part="field"]:hover {
-border-color: var(--helix-color-primary);
-outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);
-outline-offset: 0;
-}
-
-:host(:state(invalid)) [part="field"],
+export const styles = createSheet(`:host {display: flex;flex-direction: column;gap: var(--helix-space-2xs);}:host(:not(:disabled)) [part="field"]:hover {border-color: var(--helix-color-primary);}:host(:focus-within) [part="field"],
+:host(:focus-within) [part="field"]:hover {border-color: var(--helix-color-primary);outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);outline-offset: 0;}:host(:state(invalid)) [part="field"],
 :host(:state(invalid)) [part="field"]:hover,
 :host(:state(invalid):focus-within) [part="field"],
-:host(:state(invalid):focus-within) [part="field"]:hover {
-border-color: var(--helix-color-danger);
-outline-color: var(--helix-color-danger);
-}
-
-[part="control"] {
-all: unset;
-box-sizing: border-box;
-color: var(--helix-color-foreground);
-flex: 1 1 auto;
-font-family: var(--helix-font-sans);
-font-size: var(--helix-text-md);
-font-weight: var(--helix-weight-medium);
-min-inline-size: 0;
-}`);
+:host(:state(invalid):focus-within) [part="field"]:hover {border-color: var(--helix-color-danger);outline-color: var(--helix-color-danger);}[part="control"] {all: unset;box-sizing: border-box;color: var(--helix-color-foreground);flex: 1 1 auto;font-family: var(--helix-font-sans);font-size: var(--helix-text-md);font-weight: var(--helix-weight-medium);min-inline-size: 0;}`);

package/dist/shared/field/field-inline.css.js

@@ -1,6 +1,3 @@
 import { createSheet } from '@fusion.dev/helix-core';
 export const styles = createSheet(`[part="hint"],
-[part="feedback"] {
-
-padding-inline-start: calc(var(--_field-control-inline-size, 0px) + var(--helix-space-xs));
-}`);
+[part="feedback"] {padding-inline-start: calc(var(--_field-control-inline-size, 0px) + var(--helix-space-xs));}`);

package/dist/shared/field/field-segments.css.js

@@ -1,40 +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/shared/field/field-stacked.css.js

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

package/dist/shared/field/field.css.js

@@ -1,58 +1,4 @@
 import { createSheet } from '@fusion.dev/helix-core';
-export const styles = createSheet(`::placeholder {
-color: var(--helix-color-foreground-subtle);
-font-weight: var(--helix-weight-medium);
-}
-
-[part="label"] {
-color: var(--helix-color-foreground);
-font-family: var(--helix-font-sans);
-font-size: var(--helix-text-sm);
-font-weight: var(--helix-weight-medium);
-line-height: var(--helix-leading-tight);
-}
-
-:host([required]) [part="label"]::after {
-color: var(--helix-color-danger);
-content: "*";
-margin-inline-start: var(--helix-space-2xs);
-}
-
-@supports (content: "*" / "") {
-:host([required]) [part="label"]::after {
-content: "*" / "";
-}
-}
-
-[part="hint"],
-[part="feedback"] {
-font-family: var(--helix-font-sans);
-font-size: var(--helix-text-xs);
-line-height: var(--helix-leading-normal);
-margin: var(--helix-space-none);
-margin-block-start: var(--helix-space-2xs);
-}
-
-[part="hint"] {
-color: var(--helix-color-foreground-subtle);
-}
-
-[part="feedback"] {
-color: var(--helix-color-danger);
-
-font-weight: var(--helix-weight-medium);
-}
-
-:host(:disabled) [part="label"],
-:host(:disabled) [part="hint"] {
-opacity: 0.5;
-}
-
-[part="label"][data-hidden] {
-block-size: 1px;
-clip-path: inset(50%);
-inline-size: 1px;
-overflow: hidden;
-position: absolute;
-white-space: nowrap;
-}`);
+export const styles = createSheet(`::placeholder {color: var(--helix-color-foreground-subtle);font-weight: var(--helix-weight-medium);}[part="label"] {color: var(--helix-color-foreground);font-family: var(--helix-font-sans);font-size: var(--helix-text-sm);font-weight: var(--helix-weight-medium);line-height: var(--helix-leading-tight);}:host([required]) [part="label"]::after {color: var(--helix-color-danger);content: "*";margin-inline-start: var(--helix-space-2xs);}@supports (content: "*" / "") {:host([required]) [part="label"]::after {content: "*" / "";}}[part="hint"],
+[part="feedback"] {font-family: var(--helix-font-sans);font-size: var(--helix-text-xs);line-height: var(--helix-leading-normal);margin: var(--helix-space-none);margin-block-start: var(--helix-space-2xs);}[part="hint"] {color: var(--helix-color-foreground-subtle);}[part="feedback"] {color: var(--helix-color-danger);font-weight: var(--helix-weight-medium);}:host(:disabled) [part="label"],
+:host(:disabled) [part="hint"] {opacity: 0.5;}[part="label"][data-hidden] {block-size: 1px;clip-path: inset(50%);inline-size: 1px;overflow: hidden;position: absolute;white-space: nowrap;}`);

package/dist/shared/floating/entrance.css.js

@@ -1,39 +1,8 @@
 import { createSheet } from '@fusion.dev/helix-core';
-export const styles = createSheet(`[part="surface"] {
---_travel: calc(var(--helix-space-2xs) * -1);
-
-opacity: 0;
-scale: 0.96;
-transform: translateY(var(--_travel));
-transition:
+export const styles = createSheet(`[part="surface"] {--_travel: calc(var(--helix-space-2xs) * -1);opacity: 0;scale: 0.96;transform: translateY(var(--_travel));transition:
 opacity var(--helix-duration-fast) var(--helix-easing-standard),
 scale var(--helix-duration-fast) var(--helix-easing-emphasized),
 transform var(--helix-duration-fast) var(--helix-easing-emphasized),
 display var(--helix-duration-fast) allow-discrete,
-overlay var(--helix-duration-fast) allow-discrete;
-}
-
-[part="surface"][data-placement^="top"] {
---_travel: var(--helix-space-2xs);
-
-transform-origin: var(--floating-arrow-x, 50%) 100%;
-}
-
-[part="surface"][data-placement^="bottom"] {
-transform-origin: var(--floating-arrow-x, 50%) 0;
-}
-
-[part="surface"][data-placed] {
-opacity: 1;
-scale: 1;
-transform: none;
-}
-
-@media (prefers-reduced-motion: reduce) {
-[part="surface"],
-[part="surface"][data-placed] {
-scale: 1;
-transform: none;
-transition: none;
-}
-}`);
+overlay var(--helix-duration-fast) allow-discrete;}[part="surface"][data-placement^="top"] {--_travel: var(--helix-space-2xs);transform-origin: var(--floating-arrow-x, 50%) 100%;}[part="surface"][data-placement^="bottom"] {transform-origin: var(--floating-arrow-x, 50%) 0;}[part="surface"][data-placed] {opacity: 1;scale: 1;transform: none;}@media (prefers-reduced-motion: reduce) {[part="surface"],
+[part="surface"][data-placed] {scale: 1;transform: none;transition: none;}}`);

package/dist/shared/floating/panel.css.js

@@ -1,18 +1,3 @@
 import { createSheet } from '@fusion.dev/helix-core';
-export const styles = createSheet(`[part="surface"] {
-background-color: var(--_floating-background-color, var(--helix-color-surface-overlay));
-border: var(--_floating-border-width, var(--helix-border-floating)) solid
-var(--_floating-border-color, var(--helix-color-border));
-border-radius: var(--helix-radii-sm);
-box-shadow: var(--_floating-shadow, var(--helix-shadow-floating));
-inset: auto;
-margin: var(--helix-space-none);
-}
-
-[part="surface"][hidden] {
-display: none;
-}
-
-[part="surface"]:not(:popover-open) {
-display: none;
-}`);
+export const styles = createSheet(`[part="surface"] {background-color: var(--_floating-background-color, var(--helix-color-surface-overlay));border: var(--_floating-border-width, var(--helix-border-floating)) solid
+var(--_floating-border-color, var(--helix-color-border));border-radius: var(--helix-radii-sm);box-shadow: var(--_floating-shadow, var(--helix-shadow-floating));inset: auto;margin: var(--helix-space-none);}[part="surface"][hidden] {display: none;}[part="surface"]:not(:popover-open) {display: none;}`);

package/dist/shared/glyph/glyph.css.js

@@ -1,6 +1,2 @@
 import { createSheet } from '@fusion.dev/helix-core';
-export const styles = createSheet(`[data-glyph] {
-block-size: var(--icon-size, var(--helix-size-icon));
-flex: 0 0 auto;
-inline-size: var(--icon-size, var(--helix-size-icon));
-}`);
+export const styles = createSheet(`[data-glyph] {block-size: var(--icon-size, var(--helix-size-icon));flex: 0 0 auto;inline-size: var(--icon-size, var(--helix-size-icon));}`);

package/dist/shared/live/live.css.js

@@ -1,9 +1,2 @@
 import { createSheet } from '@fusion.dev/helix-core';
-export const styles = createSheet(`[part="live"] {
-block-size: 1px;
-clip-path: inset(50%);
-inline-size: 1px;
-overflow: hidden;
-position: absolute;
-white-space: nowrap;
-}`);
+export const styles = createSheet(`[part="live"] {block-size: 1px;clip-path: inset(50%);inline-size: 1px;overflow: hidden;position: absolute;white-space: nowrap;}`);

package/dist/shared/tags/tags.css.js

@@ -1,40 +1,2 @@
 import { createSheet } from '@fusion.dev/helix-core';
-export const styles = createSheet(`[part="tags"] {
-display: contents;
-}
-
-:where(button)[part="rest"] {
-all: unset;
-box-sizing: border-box;
-}
-
-[part="rest"] {
-align-self: center;
-color: var(--helix-color-foreground-subtle);
-flex: 0 0 auto;
-font-family: var(--helix-font-sans);
-font-size: var(--helix-text-xs);
-font-weight: var(--helix-weight-medium);
-white-space: nowrap;
-}
-
-button[part="rest"] {
-border-radius: var(--helix-radii-sm);
-cursor: pointer;
-transition: color var(--helix-duration-fast) var(--helix-easing-standard);
-}
-
-button[part="rest"]:hover {
-color: var(--helix-color-foreground);
-}
-
-button[part="rest"]:focus-visible {
-outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);
-outline-offset: var(--helix-size-focus-offset);
-}
-
-button[part="rest"] svg {
-block-size: var(--helix-size-icon-tight);
-flex: 0 0 auto;
-inline-size: var(--helix-size-icon-tight);
-}`);
+export const styles = createSheet(`[part="tags"] {display: contents;}:where(button)[part="rest"] {all: unset;box-sizing: border-box;}[part="rest"] {align-self: center;color: var(--helix-color-foreground-subtle);flex: 0 0 auto;font-family: var(--helix-font-sans);font-size: var(--helix-text-xs);font-weight: var(--helix-weight-medium);white-space: nowrap;}button[part="rest"] {border-radius: var(--helix-radii-sm);cursor: pointer;transition: color var(--helix-duration-fast) var(--helix-easing-standard);}button[part="rest"]:hover {color: var(--helix-color-foreground);}button[part="rest"]:focus-visible {outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);outline-offset: var(--helix-size-focus-offset);}button[part="rest"] svg {block-size: var(--helix-size-icon-tight);flex: 0 0 auto;inline-size: var(--helix-size-icon-tight);}`);

package/dist/shared/viewport/viewport.css.js

@@ -1,148 +1,21 @@
 import { createSheet } from '@fusion.dev/helix-core';
-export const styles = createSheet(`[part="controls"] {
-display: grid;
-gap: var(--helix-space-2xs);
-
-grid-template-areas:
+export const styles = createSheet(`[part="controls"] {display: grid;gap: var(--helix-space-2xs);grid-template-areas:
 ".      up    .      zoomin"
 "start  .     end    zoomout"
-".      down  .      full";
-position: absolute;
-
-inset-block-start: var(--helix-space-sm);
-inset-inline-end: var(--helix-space-sm);
-transition: opacity var(--helix-duration-fast) var(--helix-easing-standard);
-}
-
-[part="controls"]:not(:has([part="zoom-in"])) {
-grid-template-areas:
+".      down  .      full";position: absolute;inset-block-start: var(--helix-space-sm);inset-inline-end: var(--helix-space-sm);transition: opacity var(--helix-duration-fast) var(--helix-easing-standard);}[part="controls"]:not(:has([part="zoom-in"])) {grid-template-areas:
 ".      up    ."
 "start  .     end"
-".      down  full";
-}
-
-[part="controls"]:not(:has([part="pan-up"])) {
-grid-template-areas:
+".      down  full";}[part="controls"]:not(:has([part="pan-up"])) {grid-template-areas:
 "zoomin"
 "zoomout"
-"full";
-}
-
-:host(:fullscreen) {
-display: block;
-}
-
-:host(:state(fullscreen)) [part="region"] {
-block-size: 100dvh;
-border: none;
-border-radius: 0;
-}
-
-:host([controls-placement="top-end"]) [part="controls"] {
-inset-block: var(--helix-space-sm) auto;
-inset-inline: auto var(--helix-space-sm);
-}
-
-:host([controls-placement="top-start"]) [part="controls"] {
-inset-block: var(--helix-space-sm) auto;
-inset-inline: var(--helix-space-sm) auto;
-}
-
-:host([controls-placement="bottom-end"]) [part="controls"] {
-inset-block: auto var(--helix-space-sm);
-inset-inline: auto var(--helix-space-sm);
-}
-
-:host([controls-placement="bottom-start"]) [part="controls"] {
-inset-block: auto var(--helix-space-sm);
-inset-inline: var(--helix-space-sm) auto;
-}
-
-[part="pan-up"] {
-grid-area: up;
-}
-[part="pan-down"] {
-grid-area: down;
-}
-[part="pan-start"] {
-grid-area: start;
-}
-[part="pan-end"] {
-grid-area: end;
-}
-[part="zoom-in"] {
-grid-area: zoomin;
-}
-[part="zoom-out"] {
-grid-area: zoomout;
-}
-[part="fullscreen"] {
-grid-area: full;
-}
-
-[part="controls"] button {
-align-items: center;
-background-color: var(--viewport-control-background-color, var(--helix-color-surface-overlay));
-border: var(--helix-border-floating) solid var(--helix-color-border);
-border-radius: var(--helix-radii-sm);
-box-shadow: var(--helix-shadow-floating);
-block-size: var(--helix-size-control-sm);
-color: var(--helix-color-foreground);
-cursor: pointer;
-display: inline-flex;
-font-family: var(--helix-font-sans);
-font-size: var(--helix-text-sm);
-inline-size: var(--helix-size-control-sm);
-justify-content: center;
-padding: 0;
-}
-
-[part="controls"] button:focus-visible {
-outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);
-outline-offset: var(--helix-size-focus-offset);
-}
-
-[part="controls"] button:hover {
-background-color: color-mix(
+"full";}:host(:fullscreen) {display: block;}:host(:state(fullscreen)) [part="region"] {block-size: 100dvh;border: none;border-radius: 0;}:host([controls-placement="top-end"]) [part="controls"] {inset-block: var(--helix-space-sm) auto;inset-inline: auto var(--helix-space-sm);}:host([controls-placement="top-start"]) [part="controls"] {inset-block: var(--helix-space-sm) auto;inset-inline: var(--helix-space-sm) auto;}:host([controls-placement="bottom-end"]) [part="controls"] {inset-block: auto var(--helix-space-sm);inset-inline: auto var(--helix-space-sm);}:host([controls-placement="bottom-start"]) [part="controls"] {inset-block: auto var(--helix-space-sm);inset-inline: var(--helix-space-sm) auto;}[part="pan-up"] {grid-area: up;}[part="pan-down"] {grid-area: down;}[part="pan-start"] {grid-area: start;}[part="pan-end"] {grid-area: end;}[part="zoom-in"] {grid-area: zoomin;}[part="zoom-out"] {grid-area: zoomout;}[part="fullscreen"] {grid-area: full;}[part="controls"] button {align-items: center;background-color: var(--viewport-control-background-color, var(--helix-color-surface-overlay));border: var(--helix-border-floating) solid var(--helix-color-border);border-radius: var(--helix-radii-sm);box-shadow: var(--helix-shadow-floating);block-size: var(--helix-size-control-sm);color: var(--helix-color-foreground);cursor: pointer;display: inline-flex;font-family: var(--helix-font-sans);font-size: var(--helix-text-sm);inline-size: var(--helix-size-control-sm);justify-content: center;padding: 0;}[part="controls"] button:focus-visible {outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);outline-offset: var(--helix-size-focus-offset);}[part="controls"] button:hover {background-color: color-mix(
 in oklab,
 var(--helix-color-foreground) 10%,
 var(--viewport-control-background-color, var(--helix-color-surface-overlay))
-);
-}
-
-[part="gesture-hint"],
-[part="gesture-status"] {
-background-color: var(--helix-color-surface-inverse);
-border-radius: var(--helix-radii-sm);
-color: var(--helix-color-foreground-inverse);
-
-left: 50%;
-max-inline-size: calc(100% - var(--helix-space-lg) * 2);
-pointer-events: none;
-position: absolute;
-text-align: center;
-z-index: calc(var(--helix-layer-raised) + 2);
-}
-
-[part="gesture-hint"] {
-font-size: var(--helix-text-sm);
-inset-block-start: clamp(
+);}[part="gesture-hint"],
+[part="gesture-status"] {background-color: var(--helix-color-surface-inverse);border-radius: var(--helix-radii-sm);color: var(--helix-color-foreground-inverse);left: 50%;max-inline-size: calc(100% - var(--helix-space-lg) * 2);pointer-events: none;position: absolute;text-align: center;z-index: calc(var(--helix-layer-raised) + 2);}[part="gesture-hint"] {font-size: var(--helix-text-sm);inset-block-start: clamp(
 var(--helix-space-2xl),
 var(--_viewport-hint-y, 50%),
 calc(100% - var(--helix-space-2xl))
-);
-padding: var(--helix-space-xs) var(--helix-space-sm);
-translate: -50% -50%;
-}
-
-[part="gesture-status"] {
-font-size: var(--helix-text-xs);
-inset-block-start: var(--helix-space-xs);
-padding: var(--helix-space-2xs) var(--helix-space-xs);
-translate: -50% 0;
-}
-
-[part="gesture-hint"][hidden],
-[part="gesture-status"][hidden] {
-display: none;
-}`);
+);padding: var(--helix-space-xs) var(--helix-space-sm);translate: -50% -50%;}[part="gesture-status"] {font-size: var(--helix-text-xs);inset-block-start: var(--helix-space-xs);padding: var(--helix-space-2xs) var(--helix-space-xs);translate: -50% 0;}[part="gesture-hint"][hidden],
+[part="gesture-status"][hidden] {display: none;}`);

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

@@ -1,128 +1,20 @@
 import { createSheet } from '@fusion.dev/helix-core';
-export const styles = createSheet(`:host {
-display: block;
-inline-size: 100%;
-}
-
-:host(:not([shape])) {
-block-size: var(--skeleton-block-size, var(--helix-size-control));
-}
-
-:host([shape="text"]) {
-block-size: 1em;
-}
-
-:host([shape="circle"]) {
-aspect-ratio: 1 / 1;
-
-inline-size: var(--skeleton-size, var(--helix-size-control));
-}
-
-[part="skeleton"] {
-background-color: var(
+export const styles = createSheet(`:host {display: block;inline-size: 100%;}:host(:not([shape])) {block-size: var(--skeleton-block-size, var(--helix-size-control));}:host([shape="text"]) {block-size: 1em;}:host([shape="circle"]) {aspect-ratio: 1 / 1;inline-size: var(--skeleton-size, var(--helix-size-control));}[part="skeleton"] {background-color: var(
 --skeleton-color,
 color-mix(in oklab, var(--helix-color-foreground) 8%, transparent)
-);
-block-size: 100%;
-border-radius: var(--skeleton-radius, var(--helix-radii-sm));
-display: block;
-inline-size: 100%;
-
-overflow: hidden;
-position: relative;
-}
-
-[part="sheen"] {
-animation: helix-skeleton-sweep var(--skeleton-duration, calc(var(--helix-duration-slow) * 4))
-ease-in-out infinite;
-background-image: linear-gradient(
+);block-size: 100%;border-radius: var(--skeleton-radius, var(--helix-radii-sm));display: block;inline-size: 100%;overflow: hidden;position: relative;}[part="sheen"] {animation: helix-skeleton-sweep var(--skeleton-duration, calc(var(--helix-duration-slow) * 4))
+ease-in-out infinite;background-image: linear-gradient(
 90deg,
 transparent 0%,
 var(--skeleton-sheen-color, color-mix(in oklab, var(--helix-color-foreground) 8%, transparent))
 50%,
 transparent 100%
-);
-display: block;
-inline-size: 200%;
-inset-block: 0;
-inset-inline-start: 0;
-position: absolute;
-}
-
-:host([shape="text"]) [part="skeleton"] {
-border-radius: var(--helix-radii-full);
-}
-
-:host([shape="circle"]) [part="skeleton"] {
-
-border-radius: var(--helix-radii-full);
-}
-
-:host([effect="pulse"]) [part="sheen"],
-:host([effect="none"]) [part="sheen"] {
-animation: none;
-background-image: none;
-}
-
-:host([effect="pulse"]) [part="skeleton"] {
-animation: helix-skeleton-pulse var(--skeleton-duration, calc(var(--helix-duration-slow) * 4))
-ease-in-out infinite;
-}
-
-@keyframes helix-skeleton-pulse {
-50% {
-opacity: 0.4;
-}
-}
-
-:host(:state(wrapping)) {
-block-size: auto;
-inline-size: fit-content;
-max-inline-size: 100%;
-position: relative;
-}
-
-:host(:state(wrapping)) [part="content"] {
-display: block;
-}
-
-:host(:state(wrapping)) [part="skeleton"] {
-block-size: auto;
-inset: 0;
-position: absolute;
-}
-
-:host(:state(wrapping):not([loading])) [part="skeleton"] {
-display: none;
-}
-
-:host([loading]:state(wrapping)) [part="content"] {
-visibility: hidden;
-}
-
-@keyframes helix-skeleton-sweep {
-from {
-translate: -50% 0;
-}
-
-to {
-translate: 50% 0;
-}
-}
-
-@media (prefers-reduced-motion: reduce) {
-[part="sheen"],
-:host([effect="pulse"]) [part="skeleton"] {
-animation: none;
-}
-
-[part="sheen"] {
-background-image: none;
-}
-}
-
-@media print {
-:host {
-display: none;
-}
-}`);
+);display: block;inline-size: 200%;inset-block: 0;inset-inline-start: 0;position: absolute;}:host([shape="text"]) [part="skeleton"] {border-radius: var(--helix-radii-full);}:host([shape="circle"]) [part="skeleton"] {border-radius: var(--helix-radii-full);}:host([effect="pulse"]) [part="sheen"],
+:host([effect="none"]) [part="sheen"] {animation: none;background-image: none;}:host([effect="pulse"]) [part="skeleton"] {animation: helix-skeleton-pulse var(--skeleton-duration, calc(var(--helix-duration-slow) * 4))
+ease-in-out infinite;}@keyframes helix-skeleton-pulse {50% {opacity: 0.4;}}:host(:state(wrapping)),
+:host(:not(:defined):not(:empty)) {block-size: auto;inline-size: fit-content;max-inline-size: 100%;position: relative;}:host(:state(wrapping)) [part="content"],
+:host(:not(:defined):not(:empty)) [part="content"] {display: block;}:host(:state(wrapping)) [part="skeleton"],
+:host(:not(:defined):not(:empty)) [part="skeleton"] {block-size: auto;inset: 0;position: absolute;}:host(:state(wrapping):not([loading])) [part="skeleton"],
+:host(:not(:defined):not(:empty):not([loading])) [part="skeleton"] {display: none;}:host([loading]:state(wrapping)) [part="content"],
+:host([loading]:not(:defined):not(:empty)) [part="content"] {visibility: hidden;}@keyframes helix-skeleton-sweep {from {translate: -50% 0;}to {translate: 50% 0;}}@media (prefers-reduced-motion: reduce) {[part="sheen"],
+:host([effect="pulse"]) [part="skeleton"] {animation: none;}[part="sheen"] {background-image: none;}}@media print {:host {display: none;}}`);