@fusion.dev/helix 0.146.0 → 0.148.0

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

@@ -1,77 +1,8 @@
 import { createSheet } from '@fusion.dev/helix-core';
-export const styles = createSheet(`:host {
-display: block;
-}
-
-[part="item"] {
-align-items: center;
-background: none;
-border: none;
-color: inherit;
-cursor: pointer;
-display: inline-flex;
-flex-direction: var(--_speed-dial-row, row-reverse);
-font: inherit;
-gap: var(--helix-space-sm);
-padding: var(--helix-space-none);
-}
-
-[part="item"]:disabled {
-cursor: not-allowed;
-opacity: var(--speed-dial-item-disabled-opacity, 0.5);
-}
-
-[part="icon"] {
---icon-size: var(--helix-size-icon);
-
-align-items: center;
-aspect-ratio: 1;
-background-color: var(--speed-dial-item-background-color, var(--helix-color-surface-overlay));
-border-radius: var(--helix-radii-full);
-box-shadow: var(--helix-shadow-md);
-color: var(--speed-dial-item-color, var(--helix-color-foreground));
-display: inline-flex;
-inline-size: var(--speed-dial-item-size, var(--helix-size-control-tight));
-justify-content: center;
-
-pointer-events: auto;
-transition:
+export const styles = createSheet(`:host {display: block;}[part="item"] {align-items: center;background: none;border: none;color: inherit;cursor: pointer;display: inline-flex;flex-direction: var(--_speed-dial-row, row-reverse);font: inherit;gap: var(--helix-space-sm);padding: var(--helix-space-none);}[part="item"]:disabled {cursor: not-allowed;opacity: var(--speed-dial-item-disabled-opacity, 0.5);}[part="icon"] {--icon-size: var(--helix-size-icon);align-items: center;aspect-ratio: 1;background-color: var(--speed-dial-item-background-color, var(--helix-color-surface-overlay));border-radius: var(--helix-radii-full);box-shadow: var(--helix-shadow-md);color: var(--speed-dial-item-color, var(--helix-color-foreground));display: inline-flex;inline-size: var(--speed-dial-item-size, var(--helix-size-control-tight));justify-content: center;pointer-events: auto;transition:
 background-color var(--helix-duration-fast) var(--helix-easing-standard),
-box-shadow var(--helix-duration-fast) var(--helix-easing-standard);
-}
-
-[part="item"]:not(:disabled):hover [part="icon"] {
-background-color: var(
+box-shadow var(--helix-duration-fast) var(--helix-easing-standard);}[part="item"]:not(:disabled):hover [part="icon"] {background-color: var(
 --speed-dial-item-hover-background-color,
 color-mix(in oklab, var(--helix-color-foreground) 6%, var(--helix-color-surface-overlay))
-);
-box-shadow: var(--helix-shadow-lg);
-}
-
-[part="item"]:focus-visible {
-outline: none;
-}
-
-[part="item"]:focus-visible [part="icon"] {
-outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);
-outline-offset: var(--helix-size-focus-offset);
-}
-
-[part="label"] {
-background-color: var(--speed-dial-label-background-color, var(--helix-color-surface-overlay));
-border-radius: var(--helix-radii-sm);
-box-shadow: var(--helix-shadow-sm);
-color: var(--speed-dial-label-color, var(--helix-color-foreground));
-font-family: var(--helix-font-sans);
-font-size: var(--speed-dial-label-font-size, var(--helix-text-sm));
-font-weight: var(--helix-weight-medium);
-opacity: var(--_speed-dial-label-opacity, 1);
-padding: var(--helix-space-2xs) var(--helix-space-xs);
-transition: opacity var(--helix-duration-fast) var(--helix-easing-standard);
-white-space: nowrap;
-}
-
-[part="item"]:hover [part="label"],
-[part="item"]:focus-visible [part="label"] {
-opacity: 1;
-}`);
+);box-shadow: var(--helix-shadow-lg);}[part="item"]:focus-visible {outline: none;}[part="item"]:focus-visible [part="icon"] {outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);outline-offset: var(--helix-size-focus-offset);}[part="label"] {background-color: var(--speed-dial-label-background-color, var(--helix-color-surface-overlay));border-radius: var(--helix-radii-sm);box-shadow: var(--helix-shadow-sm);color: var(--speed-dial-label-color, var(--helix-color-foreground));font-family: var(--helix-font-sans);font-size: var(--speed-dial-label-font-size, var(--helix-text-sm));font-weight: var(--helix-weight-medium);opacity: var(--_speed-dial-label-opacity, 1);padding: var(--helix-space-2xs) var(--helix-space-xs);transition: opacity var(--helix-duration-fast) var(--helix-easing-standard);white-space: nowrap;}[part="item"]:hover [part="label"],
+[part="item"]:focus-visible [part="label"] {opacity: 1;}[part="shortcut"] {color: var(--speed-dial-shortcut-color, var(--helix-color-foreground-muted));margin-inline-start: var(--helix-space-sm);}[part="shortcut"][hidden] {display: none;}`);

package/dist/speed-dial/item/speed-dial-item.d.ts

@@ -22,6 +22,7 @@ import type { CSSResultGroup } from 'lit';
  * @cssproperty --speed-dial-label-background-color - Fill of the chip holding the action's name.
  * @cssproperty --speed-dial-label-color - Color of the action's name.
  * @cssproperty --speed-dial-label-font-size - Size of the action's name.
+ * @cssproperty --speed-dial-shortcut-color - Color of the shortcut drawn after the action's name.
  */
 export declare class HelixSpeedDialItem extends HelixHeadlessSpeedDialItem {
     static styles: CSSResultGroup;

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

@@ -1,152 +1,6 @@
 import { createSheet } from '@fusion.dev/helix-core';
-export const styles = createSheet(`:host {
-display: inline-flex;
-}
-
-[part="actions"] {
-background-color: transparent;
-border: none;
-display: flex;
-flex-direction: column;
-gap: var(--speed-dial-gap, var(--helix-space-sm));
-margin: var(--helix-space-none);
-overflow: visible;
-padding: var(--helix-space-none);
-}
-
-[part="actions"] {
---_speed-dial-row: row-reverse;
-
-align-items: flex-end;
-}
-
-[part="actions"][data-placement$="-start"] {
---_speed-dial-row: row;
-
-align-items: flex-start;
-}
-
-[part="actions"][hidden] {
-display: none;
-}
-
-[part="actions"] {
---_dial-from: var(--speed-dial-travel, var(--helix-space-md));
-}
-
-[part="actions"][data-placement^="bottom"] {
---_dial-from: calc(var(--speed-dial-travel, var(--helix-space-md)) * -1);
-}
-
-[part="actions"] ::slotted(*) {
-opacity: 0;
-scale: 0.8;
-transition:
+export const styles = createSheet(`:host {display: inline-flex;}[part="actions"] {background-color: transparent;border: none;display: flex;flex-direction: column;gap: var(--speed-dial-gap, var(--helix-space-sm));margin: var(--helix-space-none);overflow: visible;padding: var(--helix-space-none);}[part="actions"] {--_speed-dial-row: row-reverse;align-items: flex-end;}[part="actions"][data-placement$="-start"] {--_speed-dial-align: flex-start;--_speed-dial-row: row;align-items: flex-start;}[part="actions"][hidden] {display: none;}[part="actions"] {--_dial-from: var(--speed-dial-travel, var(--helix-space-md));}[part="actions"][data-placement^="bottom"] {--_dial-from: calc(var(--speed-dial-travel, var(--helix-space-md)) * -1);}[part="actions"] ::slotted(*) {opacity: 0;scale: 0.8;transition:
 opacity var(--helix-duration-fast) var(--helix-easing-standard),
 scale var(--helix-duration-fast) var(--helix-easing-emphasized),
-translate var(--helix-duration-fast) var(--helix-easing-emphasized);
-translate: 0 var(--_dial-from);
-}
-
-[part="actions"][data-placed] ::slotted(*) {
-opacity: 1;
-scale: 1;
-translate: 0 0;
-}
-
-[part="actions"] {
---_speed-dial-stagger: var(--speed-dial-stagger, calc(var(--helix-duration-fast) / 3));
-}
-
-[part="actions"][data-placed] ::slotted(:nth-last-child(2)) {
-transition-delay: var(--_speed-dial-stagger);
-}
-
-[part="actions"][data-placed] ::slotted(:nth-last-child(3)) {
-transition-delay: calc(var(--_speed-dial-stagger) * 2);
-}
-
-[part="actions"][data-placed] ::slotted(:nth-last-child(4)) {
-transition-delay: calc(var(--_speed-dial-stagger) * 3);
-}
-
-[part="actions"][data-placed] ::slotted(:nth-last-child(n + 5)) {
-transition-delay: calc(var(--_speed-dial-stagger) * 4);
-}
-
-[part="actions"][data-placement^="bottom"][data-placed] ::slotted(:nth-child(2)) {
-transition-delay: var(--_speed-dial-stagger);
-}
-
-[part="actions"][data-placement^="bottom"][data-placed] ::slotted(:nth-child(3)) {
-transition-delay: calc(var(--_speed-dial-stagger) * 2);
-}
-
-[part="actions"][data-placement^="bottom"][data-placed] ::slotted(:nth-child(4)) {
-transition-delay: calc(var(--_speed-dial-stagger) * 3);
-}
-
-[part="actions"][data-placement^="bottom"][data-placed] ::slotted(:nth-child(n + 5)) {
-transition-delay: calc(var(--_speed-dial-stagger) * 4);
-}
-
-@media (prefers-reduced-motion: reduce) {
-[part="actions"] ::slotted(*) {
-opacity: 1;
-scale: 1;
-transition: none;
-transition-delay: 0s;
-translate: 0 0;
-}
-
-[part="trigger"] {
-transition: none;
-}
-}
-
-[part="trigger"] {
---icon-size: var(--helix-size-icon);
-all: unset;
-
-align-items: center;
-
-background-color: var(--speed-dial-background-color, var(--helix-color-primary-surface));
-block-size: var(--speed-dial-size, var(--helix-size-control));
-border-radius: var(--helix-radii-full);
-box-shadow: var(--speed-dial-shadow, var(--helix-shadow-md));
-box-sizing: border-box;
-color: var(--speed-dial-color, var(--helix-color-foreground-on-primary));
-cursor: pointer;
-display: inline-flex;
-inline-size: var(--speed-dial-size, var(--helix-size-control));
-justify-content: center;
-transition: box-shadow var(--helix-duration-fast) var(--helix-easing-standard);
-}
-
-[part="trigger"]:hover {
-box-shadow: var(--helix-shadow-lg);
-}
-
-[part="trigger"]:active {
-box-shadow: var(--helix-shadow-sm);
-}
-
-[part="trigger"]: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;
-}
-}
-
-:host([labels="hover"]) {
---_speed-dial-label-opacity: 0;
-}
-
-:host([labels="hover"]) [part="actions"],
-:host([labels="hover"]) [part="actions"] ::slotted(*) {
-pointer-events: none;
-}`);
+translate var(--helix-duration-fast) var(--helix-easing-emphasized);translate: 0 var(--_dial-from);}[part="actions"][data-placed] ::slotted(*) {opacity: 1;scale: 1;translate: 0 0;}[part="actions"] {--_speed-dial-stagger: var(--speed-dial-stagger, calc(var(--helix-duration-fast) / 3));}[part="actions"][data-placed] ::slotted(:nth-last-child(2)) {transition-delay: var(--_speed-dial-stagger);}[part="actions"][data-placed] ::slotted(:nth-last-child(3)) {transition-delay: calc(var(--_speed-dial-stagger) * 2);}[part="actions"][data-placed] ::slotted(:nth-last-child(4)) {transition-delay: calc(var(--_speed-dial-stagger) * 3);}[part="actions"][data-placed] ::slotted(:nth-last-child(n + 5)) {transition-delay: calc(var(--_speed-dial-stagger) * 4);}[part="actions"][data-placement^="bottom"][data-placed] ::slotted(:nth-child(2)) {transition-delay: var(--_speed-dial-stagger);}[part="actions"][data-placement^="bottom"][data-placed] ::slotted(:nth-child(3)) {transition-delay: calc(var(--_speed-dial-stagger) * 2);}[part="actions"][data-placement^="bottom"][data-placed] ::slotted(:nth-child(4)) {transition-delay: calc(var(--_speed-dial-stagger) * 3);}[part="actions"][data-placement^="bottom"][data-placed] ::slotted(:nth-child(n + 5)) {transition-delay: calc(var(--_speed-dial-stagger) * 4);}@media (prefers-reduced-motion: reduce) {[part="actions"] ::slotted(*) {opacity: 1;scale: 1;transition: none;transition-delay: 0s;translate: 0 0;}[part="trigger"] {transition: none;}}[part="trigger"] {--icon-size: var(--helix-size-icon);all: unset;align-items: center;background-color: var(--speed-dial-background-color, var(--helix-color-primary-surface));block-size: var(--speed-dial-size, var(--helix-size-control));border-radius: var(--helix-radii-full);box-shadow: var(--speed-dial-shadow, var(--helix-shadow-md));box-sizing: border-box;color: var(--speed-dial-color, var(--helix-color-foreground-on-primary));cursor: pointer;display: inline-flex;inline-size: var(--speed-dial-size, var(--helix-size-control));justify-content: center;transition: box-shadow var(--helix-duration-fast) var(--helix-easing-standard);}[part="trigger"]:hover {box-shadow: var(--helix-shadow-lg);}[part="trigger"]:active {box-shadow: var(--helix-shadow-sm);}[part="trigger"]: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;}}:host([labels="hover"]) {--_speed-dial-label-opacity: 0;}:host([labels="hover"]) [part="actions"],
+:host([labels="hover"]) [part="actions"] ::slotted(*) {pointer-events: none;}`);

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

@@ -1,187 +1,30 @@
 import { createSheet } from '@fusion.dev/helix-core';
-export const styles = createSheet(`:host {
-display: flex;
-min-block-size: 0;
-min-inline-size: 0;
-
-position: relative;
-}
-
-:host(:is([orientation="vertical"], [data-axis="vertical"])) {
-flex-direction: column;
-}
-
-[part="start"] {
-flex: 0 0 var(--splitter-position, 50%);
-
-min-block-size: 0;
-min-inline-size: 0;
-overflow: auto;
-}
-
-[part="end"] {
-flex: 1 1 0;
-min-block-size: 0;
-min-inline-size: 0;
-overflow: auto;
-}
-
-[part="separator"] {
-background-color: transparent;
-box-sizing: border-box;
-cursor: col-resize;
-flex: none;
-inline-size: var(--splitter-target, var(--helix-space-xs));
-margin-inline: calc(var(--splitter-target, var(--helix-space-xs)) / -2);
-position: relative;
-
-touch-action: none;
-user-select: none;
-
-z-index: var(--helix-layer-raised);
-}
-
-[part="separator"]::before {
-background-color: var(--splitter-color, var(--helix-color-border));
-content: "";
-inline-size: var(--helix-border-thin);
-inset-block: 0;
-inset-inline-start: 50%;
-margin-inline-start: calc(var(--helix-border-thin) / -2);
-position: absolute;
-transition:
+export const styles = createSheet(`:host {display: flex;min-block-size: 0;min-inline-size: 0;position: relative;}:host(:is([orientation="vertical"], [data-axis="vertical"])) {flex-direction: column;}[part="start"] {flex: 0 0 var(--splitter-position, 50%);min-block-size: 0;min-inline-size: 0;overflow: auto;}[part="end"] {flex: 1 1 0;min-block-size: 0;min-inline-size: 0;overflow: auto;}[part="separator"] {background-color: transparent;box-sizing: border-box;cursor: col-resize;display: grid;flex: none;place-content: center;place-items: center;inline-size: var(--splitter-target, var(--helix-space-xs));margin-inline: calc(var(--splitter-target, var(--helix-space-xs)) / -2);position: relative;touch-action: none;user-select: none;z-index: var(--helix-layer-raised);}[part="separator"]::before {background-color: var(--splitter-color, var(--helix-color-border));content: "";inline-size: var(--splitter-thickness, var(--helix-border-thin));inset-block: 0;inset-inline-start: 50%;margin-inline-start: calc(var(--splitter-thickness, var(--helix-border-thin)) / -2);position: absolute;transition:
 background-color var(--helix-duration-fast) var(--helix-easing-standard),
-inline-size var(--helix-duration-fast) var(--helix-easing-standard);
-}
-
-:host(:is([orientation="vertical"], [data-axis="vertical"])) [part="separator"] {
-block-size: var(--splitter-target, var(--helix-space-xs));
-cursor: row-resize;
-inline-size: auto;
-margin-block: calc(var(--splitter-target, var(--helix-space-xs)) / -2);
-margin-inline: 0;
-}
-
-:host(:is([orientation="vertical"], [data-axis="vertical"])) [part="separator"]::before {
-block-size: var(--helix-border-thin);
-inline-size: auto;
-inset-block-start: 50%;
-inset-inline: 0;
-margin-block-start: calc(var(--helix-border-thin) / -2);
-transition:
+inline-size var(--helix-duration-fast) var(--helix-easing-standard);}:host(:is([orientation="vertical"], [data-axis="vertical"])) [part="separator"] {block-size: var(--splitter-target, var(--helix-space-xs));cursor: row-resize;inline-size: auto;margin-block: calc(var(--splitter-target, var(--helix-space-xs)) / -2);margin-inline: 0;}:host(:is([orientation="vertical"], [data-axis="vertical"])) [part="separator"]::before {block-size: var(--splitter-thickness, var(--helix-border-thin));inline-size: auto;inset-block-start: 50%;inset-inline: 0;margin-block-start: calc(var(--splitter-thickness, var(--helix-border-thin)) / -2);transition:
 background-color var(--helix-duration-fast) var(--helix-easing-standard),
-block-size var(--helix-duration-fast) var(--helix-easing-standard);
-}
-
-[part="separator"]:hover,
+block-size var(--helix-duration-fast) var(--helix-easing-standard);}[part="separator"]:hover,
 [part="separator"]:focus-visible,
-[part="separator"][data-dragging] {
-z-index: calc(var(--helix-layer-raised) + 1);
-}
-
-[part="separator"][data-flush]::before {
-background-color: transparent;
-}
-
-:host(:not([variant="grip"])) [part="separator"]:hover::before,
+[part="separator"][data-dragging] {z-index: calc(var(--helix-layer-raised) + 1);}[part="separator"][data-flush]::before {background-color: transparent;}:host(:not([variant="grip"])) [part="separator"]:hover::before,
 :host(:not([variant="grip"])) [part="separator"]:focus-visible::before,
-:host(:not([variant="grip"])) [part="separator"][data-dragging]::before {
-background-color: var(--splitter-hover-color, var(--helix-color-foreground-muted));
-inline-size: var(--helix-border-thick);
-}
-
-:host(:not([variant="grip"])) [part="separator"][data-dragging]::before {
-background-color: var(--splitter-drag-color, var(--helix-color-primary));
-}
-
-:host(:is([orientation="vertical"], [data-axis="vertical"]):not([variant="grip"]))
+:host(:not([variant="grip"])) [part="separator"][data-dragging]::before {background-color: var(--splitter-hover-color, var(--helix-color-foreground-muted));inline-size: var(--splitter-hover-thickness, var(--helix-border-thick));}:host(:not([variant="grip"])) [part="separator"][data-dragging]::before {background-color: var(--splitter-drag-color, var(--helix-color-primary));}:host(:is([orientation="vertical"], [data-axis="vertical"]):not([variant="grip"]))
 [part="separator"]:hover::before,
 :host(:is([orientation="vertical"], [data-axis="vertical"]):not([variant="grip"]))
 [part="separator"]:focus-visible::before,
 :host(:is([orientation="vertical"], [data-axis="vertical"]):not([variant="grip"]))
-[part="separator"][data-dragging]::before {
-block-size: var(--helix-border-thick);
-inline-size: auto;
-}
-
-[part="separator"]:focus-visible {
-outline: none;
-}
-
-[part="separator"]:focus-visible::before {
-outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);
-outline-offset: var(--helix-size-focus-offset);
-}
-
-[part="corner"] {
-block-size: var(--splitter-corner, var(--helix-space-md));
-
-cursor: move;
-inline-size: var(--splitter-corner, var(--helix-space-md));
-inset-block-start: var(--splitter-corner-at);
-inset-inline-start: var(--splitter-position);
-margin-block-start: calc(var(--splitter-corner, var(--helix-space-md)) / -2);
-margin-inline-start: calc(var(--splitter-corner, var(--helix-space-md)) / -2);
-position: absolute;
-touch-action: none;
-user-select: none;
-z-index: calc(var(--helix-layer-raised) + 2);
-}
-
-:host(:is([orientation="vertical"], [data-axis="vertical"])) [part="corner"] {
-inset-block-start: var(--splitter-position);
-inset-inline-start: var(--splitter-corner-at);
-}
-
-[part="corner"]:focus-visible {
-outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);
-outline-offset: var(--helix-size-focus-offset);
-}
-
-:host([variant="grip"]) [part="separator"]::after {
-background-color: var(--splitter-grip-color, var(--helix-color-foreground-muted));
-border-radius: var(--helix-radii-full);
-content: "";
-opacity: 0;
-position: absolute;
-transition:
+[part="separator"][data-dragging]::before {block-size: var(--splitter-hover-thickness, var(--helix-border-thick));inline-size: auto;}[part="separator"]:focus-visible {outline: none;}[part="separator"]:focus-visible::before {outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);outline-offset: var(--helix-size-focus-offset);}[part="corner"] {block-size: var(--splitter-corner, var(--helix-space-md));cursor: move;inline-size: var(--splitter-corner, var(--helix-space-md));inset-block-start: var(--splitter-corner-at);inset-inline-start: var(--splitter-position);margin-block-start: calc(var(--splitter-corner, var(--helix-space-md)) / -2);margin-inline-start: calc(var(--splitter-corner, var(--helix-space-md)) / -2);position: absolute;touch-action: none;user-select: none;z-index: calc(var(--helix-layer-raised) + 2);}:host(:is([orientation="vertical"], [data-axis="vertical"])) [part="corner"] {inset-block-start: var(--splitter-position);inset-inline-start: var(--splitter-corner-at);}[part="corner"]:focus-visible {outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);outline-offset: var(--helix-size-focus-offset);}:host([variant="grip"]) [part="separator"]::after {background-color: var(--splitter-grip-color, var(--helix-color-foreground-muted));border-radius: var(--helix-radii-full);content: "";opacity: 0;position: absolute;transition:
 background-color var(--helix-duration-fast) var(--helix-easing-standard),
-opacity var(--helix-duration-fast) var(--helix-easing-standard);
-}
-
-:host([variant="grip"]:not(:is([orientation="vertical"], [data-axis="vertical"])))
-[part="separator"]::after {
-block-size: var(--splitter-grip-length, 2rem);
-inline-size: var(--helix-border-thick);
-inset-block-start: calc(50% - var(--splitter-grip-length, 2rem) / 2);
-inset-inline-start: calc(50% - var(--helix-border-thick) - var(--helix-space-2xs));
-}
-
-:host([variant="grip"]:is([orientation="vertical"], [data-axis="vertical"]))
-[part="separator"]::after {
-block-size: var(--helix-border-thick);
-inline-size: var(--splitter-grip-length, 2rem);
-inset-block-start: calc(50% - var(--helix-border-thick) - var(--helix-space-2xs));
-inset-inline-start: calc(50% - var(--splitter-grip-length, 2rem) / 2);
-}
-
-:host([variant="grip"]) [part="separator"]:hover::after,
+opacity var(--helix-duration-fast) var(--helix-easing-standard);}:host([variant="grip"]:not(:is([orientation="vertical"], [data-axis="vertical"])))
+[part="separator"]::after {block-size: var(--splitter-grip-length, 2rem);inline-size: var(--splitter-grip-thickness, var(--helix-border-thick));inset-block-start: calc(50% - var(--splitter-grip-length, 2rem) / 2);inset-inline-start: calc(
+50% -
+var(--splitter-grip-thickness, var(--helix-border-thick)) -
+var(--helix-space-2xs)
+);}:host([variant="grip"]:is([orientation="vertical"], [data-axis="vertical"]))
+[part="separator"]::after {block-size: var(--splitter-grip-thickness, var(--helix-border-thick));inline-size: var(--splitter-grip-length, 2rem);inset-block-start: calc(
+50% -
+var(--splitter-grip-thickness, var(--helix-border-thick)) -
+var(--helix-space-2xs)
+);inset-inline-start: calc(50% - var(--splitter-grip-length, 2rem) / 2);}:host([variant="grip"]) [part="separator"]:hover::after,
 :host([variant="grip"]) [part="separator"]:focus-visible::after,
-:host([variant="grip"]) [part="separator"][data-dragging]::after {
-opacity: 1;
-}
-
-:host([variant="grip"]) [part="separator"][data-dragging]::after {
-background-color: var(--splitter-drag-color, var(--helix-color-primary));
-}
-
-[part="start"][data-dragging],
-[part="end"][data-dragging] {
-pointer-events: none;
-}
-
-@media print {
-:host {
-overflow: visible;
-}
-}`);
+:host([variant="grip"]) [part="separator"][data-dragging]::after {opacity: 1;}:host([variant="grip"]) [part="separator"][data-dragging]::after {background-color: var(--splitter-drag-color, var(--helix-color-primary));}::slotted([slot="handle"]) {color: var(--splitter-handle-color, var(--helix-color-foreground-muted));pointer-events: none;position: relative;}[part="start"][data-dragging],
+[part="end"][data-dragging] {pointer-events: none;}@media print {:host {overflow: visible;}}`);

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

@@ -38,8 +38,12 @@ import type { CSSResultGroup } from 'lit';
  * @cssproperty --splitter-drag-color - Color of the line while it is being moved.
  * @cssproperty --splitter-grip-color - Color of the grip beside the line, when the grip is shown.
  * @cssproperty --splitter-grip-length - How far the grip runs along the divider.
+ * @cssproperty --splitter-grip-thickness - How thick the grip is, across the divider.
+ * @cssproperty --splitter-handle-color - Color of a mark slotted into `handle`.
  * @cssproperty --splitter-hover-color - Color of the divider's target under the pointer.
+ * @cssproperty --splitter-hover-thickness - How thick the line is under the pointer, with focus and while it moves.
  * @cssproperty --splitter-target - Width of the area you can drag.
+ * @cssproperty --splitter-thickness - How thick the line is at rest.
  */
 export declare class HelixSplitter extends HelixHeadlessSplitter {
     /**

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

@@ -1,37 +1,2 @@
 import { createSheet } from '@fusion.dev/helix-core';
-export const styles = createSheet(`:host {
---_stat-group-gap: var(--stat-group-gap, var(--helix-space-2xl));
-display: flex;
-flex-wrap: wrap;
-gap: var(--_stat-group-gap);
-}
-
-:host([columns]) {
-display: grid;
-}
-:host([columns="2"]) {
-grid-template-columns: var(--stat-group-columns, repeat(2, minmax(0, 1fr)));
-}
-:host([columns="3"]) {
-grid-template-columns: var(--stat-group-columns, repeat(3, minmax(0, 1fr)));
-}
-:host([columns="4"]) {
-grid-template-columns: var(--stat-group-columns, repeat(4, minmax(0, 1fr)));
-}
-:host([columns="5"]) {
-grid-template-columns: var(--stat-group-columns, repeat(5, minmax(0, 1fr)));
-}
-:host([columns="6"]) {
-grid-template-columns: var(--stat-group-columns, repeat(6, minmax(0, 1fr)));
-}
-
-:host([divided]) {
-column-gap: calc(var(--_stat-group-gap) * 2);
-overflow-x: clip;
-}
-
-:host([divided]) ::slotted(*) {
-border-inline-start: var(--helix-border-thin) solid var(--helix-color-border);
-margin-inline-start: calc(var(--_stat-group-gap) * -1 - var(--helix-border-thin));
-padding-inline-start: var(--_stat-group-gap);
-}`);
+export const styles = createSheet(`:host {--_stat-group-gap: var(--stat-group-gap, var(--helix-space-2xl));display: flex;flex-wrap: wrap;gap: var(--_stat-group-gap);}:host([columns]) {display: grid;}:host([columns="2"]) {grid-template-columns: var(--stat-group-columns, repeat(2, minmax(0, 1fr)));}:host([columns="3"]) {grid-template-columns: var(--stat-group-columns, repeat(3, minmax(0, 1fr)));}:host([columns="4"]) {grid-template-columns: var(--stat-group-columns, repeat(4, minmax(0, 1fr)));}:host([columns="5"]) {grid-template-columns: var(--stat-group-columns, repeat(5, minmax(0, 1fr)));}:host([columns="6"]) {grid-template-columns: var(--stat-group-columns, repeat(6, minmax(0, 1fr)));}:host([divided]) {column-gap: calc(var(--_stat-group-gap) * 2);overflow-x: clip;}:host([divided]) ::slotted(*) {border-inline-start: var(--helix-border-thin) solid var(--helix-color-border);margin-inline-start: calc(var(--_stat-group-gap) * -1 - var(--helix-border-thin));padding-inline-start: var(--_stat-group-gap);}`);

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

@@ -1,63 +1,4 @@
 import { createSheet } from '@fusion.dev/helix-core';
-export const styles = createSheet(`:host {
-
-align-content: start;
-
-align-items: baseline;
-display: grid;
-gap: var(--stat-gap, var(--helix-space-2xs));
-grid-template-columns: auto 1fr;
-}
-
-slot[name="label"]::slotted(*) {
-color: var(--stat-label-color, var(--helix-color-foreground-muted));
-font-size: var(--stat-label-size, calc(var(--helix-text-xs) / var(--helix-text-md) * 1em));
-font-weight: var(--helix-weight-medium);
-grid-column: 1 / -1;
-letter-spacing: var(--helix-tracking-wide);
-}
-
-slot:not([name]) {
-color: var(--stat-value-color, var(--helix-color-foreground));
-font-family: var(--helix-font-display);
-font-size: var(--stat-value-size, calc(var(--helix-text-3xl) / var(--helix-text-md) * 1em));
-font-weight: var(--helix-weight-semibold);
-letter-spacing: var(--helix-tracking-tight);
-line-height: var(--helix-leading-tight);
-}
-
-slot[name="unit"]::slotted(*) {
-color: var(--stat-unit-color, var(--helix-color-foreground-muted));
-font-size: var(--stat-unit-size, calc(var(--helix-text-md) / var(--helix-text-md) * 1em));
-font-weight: var(--helix-weight-medium);
-}
-
-slot[name="trend"]::slotted(*) {
-grid-column: 1 / -1;
-}
-
-:host([direction="column-reverse"]) slot[name="label"]::slotted(*) {
-order: 1;
-}
-
-:host([direction="row"]),
-:host([direction="row-reverse"]) {
-align-items: baseline;
-display: flex;
-gap: var(--stat-gap, var(--helix-space-xs));
-}
-
-:host([direction="row"]) slot[name="label"]::slotted(*),
-:host([direction="row-reverse"]) slot[name="label"]::slotted(*) {
-grid-column: auto;
-}
-
-:host([direction="row-reverse"]) slot[name="label"] {
-order: 1;
-}
-
-@media print {
-:host {
-print-color-adjust: economy;
-}
-}`);
+export const styles = createSheet(`:host {align-content: start;align-items: baseline;display: grid;gap: var(--stat-gap, var(--helix-space-2xs));grid-template-columns: auto 1fr;}slot[name="label"]::slotted(*) {color: var(--stat-label-color, var(--helix-color-foreground-muted));font-size: var(--stat-label-size, calc(var(--helix-text-xs) / var(--helix-text-md) * 1em));font-weight: var(--helix-weight-medium);grid-column: 1 / -1;letter-spacing: var(--helix-tracking-wide);}slot:not([name]) {color: var(--stat-value-color, var(--helix-color-foreground));font-family: var(--helix-font-display);font-size: var(--stat-value-size, calc(var(--helix-text-3xl) / var(--helix-text-md) * 1em));font-weight: var(--helix-weight-semibold);letter-spacing: var(--helix-tracking-tight);line-height: var(--helix-leading-tight);}slot[name="unit"]::slotted(*) {color: var(--stat-unit-color, var(--helix-color-foreground-muted));font-size: var(--stat-unit-size, calc(var(--helix-text-md) / var(--helix-text-md) * 1em));font-weight: var(--helix-weight-medium);}slot[name="trend"]::slotted(*) {grid-column: 1 / -1;}:host([direction="column-reverse"]) slot[name="label"]::slotted(*) {order: 1;}:host([direction="row"]),
+:host([direction="row-reverse"]) {align-items: baseline;display: flex;gap: var(--stat-gap, var(--helix-space-xs));}:host([direction="row"]) slot[name="label"]::slotted(*),
+:host([direction="row-reverse"]) slot[name="label"]::slotted(*) {grid-column: auto;}:host([direction="row-reverse"]) slot[name="label"] {order: 1;}@media print {:host {print-color-adjust: economy;}}`);