@fusion.dev/helix 0.146.0 → 0.147.0

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

@@ -1,132 +1,11 @@
 import { createSheet } from '@fusion.dev/helix-core';
-export const styles = createSheet(`:host {
-
-display: contents;
-}
-
-[part="popover"] {
-overflow: visible;
-background-color: var(--helix-color-surface-overlay);
-
-border: var(--popover-border-width, var(--helix-border-floating)) solid
-var(--popover-border-color, var(--helix-color-border));
-
---_popover-edge: var(--popover-border-width, var(--helix-border-floating)) solid
-var(--popover-border-color, var(--helix-color-border));
-
-border-radius: var(--helix-radii-sm);
-box-shadow: var(--popover-shadow, var(--helix-shadow-floating));
-box-sizing: border-box;
-color: var(--helix-color-foreground);
-
-inset: auto;
-margin: var(--helix-space-none);
-
-max-inline-size: calc(100vw - var(--helix-space-lg));
-
-padding: var(--helix-space-none);
-inline-size: var(--popover-inline-size, max-content);
-}
-
-[part="popover"]:not(:popover-open) {
-display: none;
-}
-
-[part="popover"] {
---_travel: calc(var(--helix-space-2xs) * -1);
-
---_popover-from: 0.96;
-opacity: 0;
-transform: translateY(var(--_travel));
-scale: var(--_popover-from);
-transition:
+export const styles = createSheet(`:host {display: contents;}[part="popover"] {overflow: visible;background-color: var(--helix-color-surface-overlay);border: var(--popover-border-width, var(--helix-border-floating)) solid
+var(--popover-border-color, var(--helix-color-border));--_popover-edge: var(--popover-border-width, var(--helix-border-floating)) solid
+var(--popover-border-color, var(--helix-color-border));border-radius: var(--helix-radii-sm);box-shadow: var(--popover-shadow, var(--helix-shadow-floating));box-sizing: border-box;color: var(--helix-color-foreground);inset: auto;margin: var(--helix-space-none);max-inline-size: calc(100vw - var(--helix-space-lg));padding: var(--helix-space-none);inline-size: var(--popover-inline-size, max-content);}[part="popover"]:not(:popover-open) {display: none;}[part="popover"] {--_travel: calc(var(--helix-space-2xs) * -1);--_popover-from: 0.96;opacity: 0;transform: translateY(var(--_travel));scale: var(--_popover-from);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="popover"][data-placement^="top"] {
---_travel: var(--helix-space-2xs);
-}
-
-[part="popover"][data-placed] {
-opacity: 1;
-scale: 1;
-transform: none;
-}
-
-[part="popover"][data-placement^="top"] {
-transform-origin: var(--floating-arrow-x, 50%) 100%;
-}
-
-[part="popover"][data-placement^="bottom"] {
-transform-origin: var(--floating-arrow-x, 50%) 0;
-}
-
-[part="popover"][data-placement^="left"] {
-transform-origin: 100% var(--floating-arrow-y, 50%);
-}
-
-[part="popover"][data-placement^="right"] {
-transform-origin: 0 var(--floating-arrow-y, 50%);
-}
-
-@media (prefers-reduced-motion: reduce) {
-[part="popover"],
-[part="popover"][data-placed] {
-scale: 1;
-transform: none;
-transition: none;
-}
-}
-
-[part="content"] {
-max-block-size: var(--popover-max-block-size, var(--floating-available-block-size, none));
-overflow: auto;
-padding: var(--popover-padding, var(--helix-space-md));
-}
-
-:host([separation="plain"]) [part="content"] {
-padding: var(--popover-padding, var(--helix-space-none));
-}
-
-[part="popover"]:focus,
-[part="popover"]:focus-visible {
-outline: none;
-}
-
-[part~="arrow"] {
-background-color: var(--helix-color-surface-overlay);
-block-size: var(--popover-arrow-size, 0.5rem);
-inline-size: var(--popover-arrow-size, 0.5rem);
-position: absolute;
-rotate: 45deg;
-}
-
-[part="popover"][data-placement^="bottom"] [part~="arrow"] {
-border-left: var(--_popover-edge);
-border-top: var(--_popover-edge);
-}
-
-[part="popover"][data-placement^="top"] [part~="arrow"] {
-border-bottom: var(--_popover-edge);
-border-right: var(--_popover-edge);
-}
-
-[part="popover"][data-placement^="right"] [part~="arrow"] {
-border-bottom: var(--_popover-edge);
-border-left: var(--_popover-edge);
-}
-
-[part="popover"][data-placement^="left"] [part~="arrow"] {
-border-right: var(--_popover-edge);
-border-top: var(--_popover-edge);
-}
-
-@media print {
-:host {
-display: none;
-}
-}`);
+overlay var(--helix-duration-fast) allow-discrete;}[part="popover"][data-placement^="top"] {--_travel: var(--helix-space-2xs);}[part="popover"][data-placed] {opacity: 1;scale: 1;transform: none;}[part="popover"][data-placement^="top"] {transform-origin: var(--floating-arrow-x, 50%) 100%;}[part="popover"][data-placement^="bottom"] {transform-origin: var(--floating-arrow-x, 50%) 0;}[part="popover"][data-placement^="left"] {transform-origin: 100% var(--floating-arrow-y, 50%);}[part="popover"][data-placement^="right"] {transform-origin: 0 var(--floating-arrow-y, 50%);}@media (prefers-reduced-motion: reduce) {[part="popover"],
+[part="popover"][data-placed] {scale: 1;transform: none;transition: none;}}[part="content"] {max-block-size: var(--popover-max-block-size, var(--floating-available-block-size, none));overflow: auto;padding: var(--popover-padding, var(--helix-space-md));}:host([separation="plain"]) [part="content"] {padding: var(--popover-padding, var(--helix-space-none));}[part="popover"]:focus,
+[part="popover"]:focus-visible {outline: none;}[part~="arrow"] {background-color: var(--helix-color-surface-overlay);block-size: var(--popover-arrow-size, 0.5rem);inline-size: var(--popover-arrow-size, 0.5rem);position: absolute;rotate: 45deg;}[part="popover"][data-placement^="bottom"] [part~="arrow"] {border-left: var(--_popover-edge);border-top: var(--_popover-edge);}[part="popover"][data-placement^="top"] [part~="arrow"] {border-bottom: var(--_popover-edge);border-right: var(--_popover-edge);}[part="popover"][data-placement^="right"] [part~="arrow"] {border-bottom: var(--_popover-edge);border-left: var(--_popover-edge);}[part="popover"][data-placement^="left"] [part~="arrow"] {border-right: var(--_popover-edge);border-top: var(--_popover-edge);}@media print {:host {display: none;}}`);

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

@@ -1,240 +1,17 @@
 import { createSheet } from '@fusion.dev/helix-core';
-export const styles = createSheet(`:host {
-display: block;
-}
-
-:host([show-value]) {
-align-items: center;
-column-gap: var(--helix-space-sm);
-display: grid;
-grid-template-columns: 1fr auto;
-
-row-gap: var(--progress-label-gap, var(--helix-space-2xs));
-}
-
-slot[name="label"]::slotted(*) {
-color: var(--progress-label-color, var(--helix-color-foreground));
-display: block;
-font-size: var(--progress-label-size, var(--helix-text-sm));
-grid-column: 1 / -1;
-margin-block-end: var(--progress-label-gap, var(--helix-space-2xs));
-}
-
-:host([show-value]) slot[name="label"]::slotted(*) {
-margin-block-end: 0;
-}
-
-:host([shape="ring"]) slot[name="label"]::slotted(*) {
-
-grid-column: 1;
-margin-block: 0;
-}
-
-[part="value"] {
-color: var(--helix-color-foreground-muted);
-font-family: var(--helix-font-sans);
-font-size: var(--helix-text-xs);
-font-variant-numeric: tabular-nums;
-min-inline-size: 3ch;
-text-align: end;
-}
-
-[part="track"] {
-background-color: var(--progress-track-color, var(--helix-color-surface-sunken));
-block-size: var(--progress-size, var(--helix-size-progress));
-border-radius: var(--helix-radii-full);
-inline-size: 100%;
-
-overflow: hidden;
-}
-
-[part="indicator"] {
-background-color: var(--progress-color, var(--helix-color-primary));
-block-size: 100%;
-border-radius: inherit;
-inline-size: 100%;
-scale: var(--progress-fraction, 0) 1;
-transform-origin: left center;
-transition: scale var(--progress-transition-duration, var(--helix-duration-normal))
-var(--helix-easing-decelerate);
-}
-
-:host(:dir(rtl)) [part="indicator"] {
-transform-origin: right center;
-}
-
-:host([indeterminate]) {
---_progress-cycle: calc(var(--helix-duration-slow) * 5);
-}
-
-:host([indeterminate]) [part="indicator"] {
-animation: helix-progress-indeterminate var(--_progress-cycle) linear infinite;
-
-transition: none;
-}
-
-:host([indeterminate]) [part="indicator"] {
---_progress-way: 1;
-}
-
-:host([indeterminate]:dir(rtl)) [part="indicator"] {
---_progress-way: -1;
-}
-
-@keyframes helix-progress-indeterminate {
-0% {
-scale: 0.18 1;
-translate: calc(-18% * var(--_progress-way, 1));
-}
-
-35% {
-scale: 0.5 1;
-translate: calc(12% * var(--_progress-way, 1));
-}
-
-65% {
-scale: 0.5 1;
-translate: calc(52% * var(--_progress-way, 1));
-}
-
-100% {
-scale: 0.18 1;
-translate: calc(100% * var(--_progress-way, 1));
-}
-}
-
-@media (prefers-reduced-motion: reduce) {
-:host([indeterminate]) [part="indicator"] {
-animation: none;
-background-image: repeating-linear-gradient(
+export const styles = createSheet(`:host {display: block;}:host([show-value]) {align-items: center;column-gap: var(--progress-value-gap, var(--helix-space-sm));display: grid;grid-template-columns: 1fr auto;row-gap: var(--progress-label-gap, var(--helix-space-2xs));}slot[name="label"]::slotted(*) {color: var(--progress-label-color, var(--helix-color-foreground));display: block;font-size: var(--progress-label-size, var(--helix-text-sm));grid-column: 1 / -1;margin-block-end: var(--progress-label-gap, var(--helix-space-2xs));}:host([show-value]) slot[name="label"]::slotted(*) {margin-block-end: 0;}:host([shape="ring"]) slot[name="label"]::slotted(*) {grid-column: 1;margin-block: 0;}[part="value"] {color: var(--progress-value-color, var(--helix-color-foreground-muted));font-family: var(--helix-font-sans);font-size: var(--progress-value-size, var(--helix-text-xs));font-variant-numeric: tabular-nums;min-inline-size: 3ch;text-align: end;}[part="live"] {block-size: 1px;clip-path: inset(50%);inline-size: 1px;margin: var(--helix-space-none);overflow: hidden;position: absolute;white-space: nowrap;}[part="track"] {background-color: var(--progress-track-color, var(--helix-color-surface-sunken));block-size: var(--progress-size, var(--helix-size-progress));border-radius: var(--progress-radius, var(--helix-radii-full));inline-size: 100%;overflow: hidden;}[part="indicator"] {background-color: var(--progress-color, var(--helix-color-primary));block-size: 100%;border-radius: inherit;inline-size: 100%;scale: var(--progress-fraction, 0) 1;transform-origin: left center;transition: scale var(--progress-transition-duration, var(--helix-duration-normal))
+var(--helix-easing-decelerate);}:host(:dir(rtl)) [part="indicator"] {transform-origin: right center;}:host([indeterminate]) {--_progress-cycle: calc(var(--helix-duration-slow) * 5);}:host([indeterminate]) [part="indicator"] {animation: helix-progress-indeterminate var(--_progress-cycle) linear infinite;transition: none;}:host([indeterminate]) [part="indicator"] {--_progress-way: 1;}:host([indeterminate]:dir(rtl)) [part="indicator"] {--_progress-way: -1;}@keyframes helix-progress-indeterminate {0% {scale: 0.18 1;translate: calc(-18% * var(--_progress-way, 1));}35% {scale: 0.5 1;translate: calc(12% * var(--_progress-way, 1));}65% {scale: 0.5 1;translate: calc(52% * var(--_progress-way, 1));}100% {scale: 0.18 1;translate: calc(100% * var(--_progress-way, 1));}}@media (prefers-reduced-motion: reduce) {:host([indeterminate]) [part="indicator"] {animation: none;background-image: repeating-linear-gradient(
 -45deg,
 var(--helix-color-background) 0 var(--helix-space-xs),
 transparent var(--helix-space-xs) calc(var(--helix-space-xs) * 2)
-);
-scale: 1 1;
-translate: 0;
-}
-}
-
-:host([shape="ring"]) {
-display: inline-grid;
-place-items: center;
-row-gap: var(--progress-label-gap, var(--helix-space-2xs));
-}
-
-:host([shape="ring"]) [part="track"] {
---_ring-stroke: var(--progress-ring-width, var(--helix-size-progress));
-
-background-color: transparent;
-block-size: var(--progress-ring-size, 4rem);
-grid-area: 1 / 1;
-inline-size: var(--progress-ring-size, 4rem);
-
-rotate: -90deg;
-}
-
-:host([shape="ring"]) [part="groove"],
-:host([shape="ring"]) [part="indicator"] {
-cx: 50%;
-cy: 50%;
-fill: none;
-r: calc(50% - var(--_ring-stroke) / 2);
-stroke-width: var(--_ring-stroke);
-}
-
-:host([shape="ring"]) [part="groove"] {
-stroke: var(--progress-track-color, var(--helix-color-surface-sunken));
-}
-
-:host([shape="ring"]) [part="indicator"] {
-scale: none;
-stroke: var(--progress-color, var(--helix-color-primary));
-stroke-dasharray: calc(var(--progress-fraction) * 100) 100;
-stroke-linecap: round;
-transition: stroke-dasharray var(--progress-transition-duration, var(--helix-duration-normal))
-var(--helix-easing-decelerate);
-}
-
-:host([shape="ring"][show-value]) {
-gap: var(--helix-space-none);
-grid-template-columns: auto;
-}
-
-:host([shape="ring"]) [part="value"] {
-grid-area: 1 / 1;
-min-inline-size: 0;
-text-align: center;
-}
-
-:host([shape="ring"][indeterminate]) [part="track"] {
-animation: helix-progress-ring var(--_progress-cycle) linear infinite;
-}
-
-:host([shape="ring"][indeterminate]) [part="indicator"] {
-animation: helix-progress-ring-sweep calc(var(--_progress-cycle) * 0.7) ease-in-out infinite;
-transition: none;
-}
-
-@keyframes helix-progress-ring {
-from {
-rotate: -90deg;
-}
-
-to {
-rotate: 270deg;
-}
-}
-
-@keyframes helix-progress-ring-sweep {
-0% {
-stroke-dasharray: 10 100;
-stroke-dashoffset: 0;
-}
-
-50% {
-stroke-dasharray: 70 100;
-stroke-dashoffset: -25;
-}
-
-100% {
-stroke-dasharray: 10 100;
-stroke-dashoffset: -100;
-}
-}
-
-@media (prefers-reduced-motion: reduce) {
-:host([shape="ring"]) [part="indicator"] {
-transition: none;
-}
-
-:host([shape="ring"][indeterminate]) [part="track"] {
-animation-duration: calc(var(--_progress-cycle) * 12);
-}
-
-:host([shape="ring"][indeterminate]) [part="indicator"] {
-animation: none;
-stroke-dasharray: 25 100;
-}
-}
-
-@media print {
-:host {
-print-color-adjust: exact;
-}
-}
-
-:host([emphasis="subtle"]) [part="indicator"] {
-background-color: color-mix(
+);scale: 1 1;translate: 0;}}:host([shape="ring"]) {display: inline-grid;place-items: center;row-gap: var(--progress-label-gap, var(--helix-space-2xs));}:host([shape="ring"]) [part="track"] {--_ring-stroke: var(--progress-ring-width, var(--helix-size-progress));background-color: transparent;block-size: var(--progress-ring-size, 4rem);grid-area: 1 / 1;inline-size: var(--progress-ring-size, 4rem);rotate: -90deg;}:host([shape="ring"]) [part="groove"],
+:host([shape="ring"]) [part="indicator"] {cx: 50%;cy: 50%;fill: none;r: calc(50% - var(--_ring-stroke) / 2);stroke-width: var(--_ring-stroke);}:host([shape="ring"]) [part="groove"] {stroke: var(--progress-track-color, var(--helix-color-surface-sunken));}:host([shape="ring"]) [part="indicator"] {scale: none;stroke: var(--progress-color, var(--helix-color-primary));stroke-dasharray: calc(var(--progress-fraction) * 100) 100;stroke-linecap: round;transition: stroke-dasharray var(--progress-transition-duration, var(--helix-duration-normal))
+var(--helix-easing-decelerate);}:host([shape="ring"][show-value]) {gap: var(--helix-space-none);grid-template-columns: auto;}:host([shape="ring"]) [part="value"] {grid-area: 1 / 1;min-inline-size: 0;text-align: center;}:host([shape="ring"][indeterminate]) [part="track"] {animation: helix-progress-ring var(--_progress-cycle) linear infinite;}:host([shape="ring"][indeterminate]) [part="indicator"] {animation: helix-progress-ring-sweep calc(var(--_progress-cycle) * 0.7) ease-in-out infinite;transition: none;}@keyframes helix-progress-ring {from {rotate: -90deg;}to {rotate: 270deg;}}@keyframes helix-progress-ring-sweep {0% {stroke-dasharray: 10 100;stroke-dashoffset: 0;}50% {stroke-dasharray: 70 100;stroke-dashoffset: -25;}100% {stroke-dasharray: 10 100;stroke-dashoffset: -100;}}@media (prefers-reduced-motion: reduce) {:host([shape="ring"]) [part="indicator"] {transition: none;}:host([shape="ring"][indeterminate]) [part="track"] {animation-duration: calc(var(--_progress-cycle) * 12);}:host([shape="ring"][indeterminate]) [part="indicator"] {animation: none;stroke-dasharray: 25 100;}}@media print {:host {print-color-adjust: exact;}}:host([emphasis="subtle"]) [part="indicator"] {background-color: color-mix(
 in oklab,
 var(--progress-color, var(--helix-color-primary)) 30%,
 var(--progress-track-color, var(--helix-color-surface-sunken))
-);
-}
-
-:host([emphasis="subtle"][shape="ring"]) [part="indicator"] {
-stroke: color-mix(
+);}:host([emphasis="subtle"][shape="ring"]) [part="indicator"] {stroke: color-mix(
 in oklab,
 var(--progress-color, var(--helix-color-primary)) 30%,
 var(--progress-track-color, var(--helix-color-surface-sunken))
-);
-}`);
+);}`);

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

@@ -24,11 +24,15 @@ import type { CSSResultGroup } from 'lit';
  * @cssproperty --progress-label-color - Color of a slotted label.
  * @cssproperty --progress-label-gap - Space between a slotted label and the bar.
  * @cssproperty --progress-label-size - Type size of a slotted label.
+ * @cssproperty --progress-radius - How far the ends of the bar are rounded.
  * @cssproperty --progress-ring-size - Diameter of the ring.
  * @cssproperty --progress-ring-width - Thickness of the ring's stroke.
  * @cssproperty --progress-size - Thickness of the bar.
  * @cssproperty --progress-track-color - Fill of the part that is not done.
  * @cssproperty --progress-transition-duration - How long the fill takes to move to a new value. `0s` moves it at once.
+ * @cssproperty --progress-value-color - The color of the value shown under `show-value`.
+ * @cssproperty --progress-value-gap - The space between the bar and the value under `show-value`.
+ * @cssproperty --progress-value-size - The type size of the value shown under `show-value`.
  */
 export declare class HelixProgress extends HelixHeadlessProgress {
     /**

package/dist/qr-code/root/qr-code-root.css.js

@@ -1,69 +1,2 @@
 import { createSheet } from '@fusion.dev/helix-core';
-export const styles = createSheet(`:host {
---_qr-size: var(--qr-code-size, 12rem);
-
-background-color: var(--qr-code-background-color, var(--helix-color-foreground-media));
-block-size: var(--_qr-size);
-border-radius: var(--helix-radii-sm);
-color: var(--qr-code-color, var(--helix-color-surface-media));
-display: block;
-inline-size: var(--_qr-size);
-position: relative;
-}
-
-[part="code"] {
-block-size: 100%;
-display: block;
-inline-size: 100%;
-}
-
-[part="fallback"] {
-align-items: center;
-block-size: 100%;
-box-sizing: border-box;
-display: flex;
-justify-content: center;
-overflow-wrap: anywhere;
-padding: var(--helix-space-md);
-text-align: center;
-}
-
-[part="finders"] {
-fill: var(--qr-code-finder-color, currentColor);
-}
-
-[part="logo"] {
-align-items: center;
-
-background-color: var(--qr-code-background-color, var(--helix-color-foreground-media));
-border-radius: var(--helix-radii-sm);
-
-box-sizing: border-box;
-display: flex;
-inset-block-start: 50%;
-inset-inline-start: 50%;
-justify-content: center;
-max-block-size: var(--qr-code-logo-size, 27%);
-max-inline-size: var(--qr-code-logo-size, 27%);
-min-block-size: var(--qr-code-logo-size, 27%);
-min-inline-size: var(--qr-code-logo-size, 27%);
-padding: var(--qr-code-logo-padding, 6%);
-position: absolute;
-translate: -50% -50%;
-}
-
-[part="logo"] slot::slotted(*) {
-block-size: 100%;
-inline-size: 100%;
-object-fit: contain;
-}
-
-[part="logo"][hidden] {
-display: none;
-}
-
-@media print {
-:host {
-print-color-adjust: economy;
-}
-}`);
+export const styles = createSheet(`:host {--_qr-size: var(--qr-code-size, 12rem);background-color: var(--qr-code-background-color, var(--helix-color-foreground-media));block-size: var(--_qr-size);border-radius: var(--helix-radii-sm);color: var(--qr-code-color, var(--helix-color-surface-media));display: block;inline-size: var(--_qr-size);position: relative;}[part="code"] {block-size: 100%;display: block;inline-size: 100%;}[part="fallback"] {align-items: center;block-size: 100%;box-sizing: border-box;display: flex;justify-content: center;overflow-wrap: anywhere;padding: var(--helix-space-md);text-align: center;}[part="finders"] {fill: var(--qr-code-finder-color, currentColor);}[part="logo"] {align-items: center;background-color: var(--qr-code-background-color, var(--helix-color-foreground-media));border-radius: var(--helix-radii-sm);box-sizing: border-box;display: flex;inset-block-start: 50%;inset-inline-start: 50%;justify-content: center;max-block-size: var(--qr-code-logo-size, 27%);max-inline-size: var(--qr-code-logo-size, 27%);min-block-size: var(--qr-code-logo-size, 27%);min-inline-size: var(--qr-code-logo-size, 27%);padding: var(--qr-code-logo-padding, 6%);position: absolute;translate: -50% -50%;}[part="logo"] slot::slotted(*) {block-size: 100%;inline-size: 100%;object-fit: contain;}[part="logo"][hidden] {display: none;}@media print {:host {print-color-adjust: economy;}}`);

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

@@ -1,21 +1,2 @@
 import { createSheet } from '@fusion.dev/helix-core';
-export const styles = createSheet(`:host {
-display: inline;
-font: inherit;
-}
-
-[part="quote"] {
-
-color: var(--quote-color, var(--helix-color-foreground-muted));
-font: inherit;
-
-font-family: var(--quote-font-family, inherit);
-font-style: var(--quote-font-style, italic);
-font-weight: var(--quote-font-weight, inherit);
-}
-
-@media print {
-:host {
-print-color-adjust: economy;
-}
-}`);
+export const styles = createSheet(`:host {display: inline;font: inherit;}[part="quote"] {color: var(--quote-color, var(--helix-color-foreground-muted));font: inherit;font-family: var(--quote-font-family, inherit);font-style: var(--quote-font-style, italic);font-weight: var(--quote-font-weight, inherit);}@media print {:host {print-color-adjust: economy;}}`);

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

@@ -1,22 +1,2 @@
 import { createSheet } from '@fusion.dev/helix-core';
-export const styles = createSheet(`:host {
-display: flex;
-flex-direction: column;
-gap: var(--helix-space-2xs);
-}
-
-[part="items"] {
-display: flex;
-flex-direction: column;
-gap: var(--radio-group-gap, var(--helix-space-xs));
-}
-
-:host([orientation="horizontal"]) [part="items"] {
-column-gap: var(--radio-group-gap, var(--helix-space-md));
-flex-direction: row;
-flex-wrap: wrap;
-}
-
-:host(:state(invalid)) [part="items"] {
---radio-border-color: var(--helix-color-danger);
-}`);
+export const styles = createSheet(`:host {display: flex;flex-direction: column;gap: var(--helix-space-2xs);}[part="items"] {display: flex;flex-direction: column;gap: var(--radio-group-gap, var(--helix-space-xs));}:host([orientation="horizontal"]) [part="items"] {column-gap: var(--radio-group-gap, var(--helix-space-md));flex-direction: row;flex-wrap: wrap;}:host(:state(invalid)) [part="items"] {--radio-border-color: var(--helix-color-danger);}`);