@fusion.dev/helix 0.0.0-dev → 0.0.2

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

@@ -1,4 +1,4 @@
-// Generated from src/meter/root/meter-root.css by `bun run styles`. Do not edit.
+// Generated from src/meter/root/meter-root.css by `turbo run styles`. Do not edit.
 import { createSheet } from '@fusion.dev/helix-core';
 export const styles = createSheet(`:host {
 display: block;
@@ -89,12 +89,6 @@ translate: -50%;
 z-index: var(--helix-layer-raised);
 }
 
-@media (prefers-reduced-motion: reduce) {
-[part="indicator"] {
-transition: none;
-}
-}
-
 :host([shape="arc"]),
 :host([shape="ring"]) {
 display: inline-grid;
@@ -186,13 +180,6 @@ stroke: var(--_meter-hue);
 grid-area: 1 / 1;
 }
 
-@media (prefers-reduced-motion: reduce) {
-:host([shape="arc"]) [part="indicator"],
-:host([shape="ring"]) [part="indicator"] {
-transition: none;
-}
-}
-
 @media print {
 :host {
 box-shadow: none;

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

@@ -7,17 +7,15 @@ import type { CSSResultGroup } from 'lit';
  * The bar `Progress` draws, at twice the height and on the house corner rather
  * than its pill.
  *
- * It shipped at the progress height, on the argument that the two stand beside
- * each other in a panel. Rendered side by side that turned out backwards: they
- * *are* two unrelated controls, and a reader telling a level from a task at a
- * glance is the point rather than the cost. A meter also carries more, a fill
- * and a mark at each threshold, and at eight pixels those marks are hairlines.
- * At sixteen they are unmistakable.
+ * Taller than a progress bar rather than matched to it. The two are unrelated
+ * controls, and a reader telling a level from a task at a glance is the point
+ * rather than the cost. A meter also carries more, a fill and a mark at each
+ * threshold, and at eight pixels those marks are hairlines. At sixteen they are
+ * unmistakable.
  *
  * The corner is the ticks' doing: they cut the fill into segments, and a
  * pill-ended bar comes out as a run whose outer ends are round and whose inner
- * ends are square. `radii-full` on an eight pixel bar was a four pixel pill
- * anyway, so this is only a change at all because the bar grew.
+ * ends are square.
  *
  * What else differs is what the color means. A progress bar is one color because
  * there is one thing to say; a meter's fill takes the success, warning or danger
@@ -57,17 +55,19 @@ export declare class HelixMeter extends HelixHeadlessMeter {
      * How much ink the reading claims.
      *
      * `subtle` is the reading as a wash of its own color: still legible, no longer
-     * the loudest thing in the region. The case is a dashboard: several meters where one is the number being watched and the rest are context, which is a fact about the region rather than about any one of them and is exactly what this axis is for.
+     * the loudest thing in the region. The case is a dashboard of several meters
+     * where one is the number being watched and the rest are context, which is a
+     * fact about the region rather than about any one of them.
      *
-     * **One value and not the four, which is the judgment this axis asks for
-     * rather than a partial sweep.** `ghost` would leave a track with nothing in
-     * it, which is not a quiet reading but an absent one. `outlined` is the
-     * interesting refusal: `BarChart` makes it work by keeping the area and fading
-     * it toward the page, so an outlined column still encodes its value, and the
-     * reason it earns the value there is that a chart has other series for the
-     * outlined one to be a *different kind of fact from* (a forecast, a target,
-     * a budget). A meter reports one quantity against its own range, and the bands it already carries say which part of that range it is in, so there is no second kind of fact for an outline to name. `solid` is the resting state and is written by not
-     * writing it, per the rule that a reflected property takes no default.
+     * **One value and not the four.** `ghost` would leave a track with nothing in
+     * it, which is not a quiet reading but an absent one. `outlined` earns its
+     * place in `BarChart`, which keeps the area and fades it toward the page, only
+     * because a chart has other series for the outlined one to be a *different
+     * kind of fact from* (a forecast, a target, a budget). A meter reports one
+     * quantity against its own range, and the bands it carries already say which
+     * part of that range it is in, so there is no second kind of fact for an
+     * outline to name. `solid` is the resting state and is written by not writing
+     * it, per the rule that a reflected property takes no default.
      */
     emphasis?: 'subtle';
     static styles: CSSResultGroup;

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

@@ -15,17 +15,15 @@ import { styles } from './meter-root.css.js';
  * The bar `Progress` draws, at twice the height and on the house corner rather
  * than its pill.
  *
- * It shipped at the progress height, on the argument that the two stand beside
- * each other in a panel. Rendered side by side that turned out backwards: they
- * *are* two unrelated controls, and a reader telling a level from a task at a
- * glance is the point rather than the cost. A meter also carries more, a fill
- * and a mark at each threshold, and at eight pixels those marks are hairlines.
- * At sixteen they are unmistakable.
+ * Taller than a progress bar rather than matched to it. The two are unrelated
+ * controls, and a reader telling a level from a task at a glance is the point
+ * rather than the cost. A meter also carries more, a fill and a mark at each
+ * threshold, and at eight pixels those marks are hairlines. At sixteen they are
+ * unmistakable.
  *
  * The corner is the ticks' doing: they cut the fill into segments, and a
  * pill-ended bar comes out as a run whose outer ends are round and whose inner
- * ends are square. `radii-full` on an eight pixel bar was a four pixel pill
- * anyway, so this is only a change at all because the bar grew.
+ * ends are square.
  *
  * What else differs is what the color means. A progress bar is one color because
  * there is one thing to say; a meter's fill takes the success, warning or danger

package/dist/mixins/mixin-control-surface/mixin-control-surface.d.ts

@@ -3,7 +3,7 @@ type Constructor<T> = new (...args: any[]) => T;
 /**
  * How much ink a control claims and what it means, for the three that are buttons.
  *
- * **The first mixin in `helix/styled`, and it belongs here rather than in core.**
+ * **It belongs here rather than in `core`.**
  * `helix/core` is consumed by the headless tier, which must never take styling,
  * and these two properties are purely presentational: they carry no behavior,
  * no ARIA and no form participation, only which rules a stylesheet applies.

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

@@ -1,4 +1,4 @@
-// Generated from src/navigation/root/navigation-root.css by `bun run styles`. Do not edit.
+// Generated from src/navigation/root/navigation-root.css by `turbo run styles`. Do not edit.
 import { createSheet } from '@fusion.dev/helix-core';
 export const styles = createSheet(`:host {
 display: block;
@@ -37,12 +37,6 @@ z-index: var(--helix-layer-base);
 opacity: 1;
 }
 
-@media (prefers-reduced-motion: reduce) {
-[part="indicator"] {
-transition: opacity var(--helix-duration-fast) var(--helix-easing-standard);
-}
-}
-
 @media print {
 :host {
 display: none;

package/dist/notifications/notification/notification.css.js

@@ -1,4 +1,4 @@
-// Generated from src/notifications/notification/notification.css by `bun run styles`. Do not edit.
+// Generated from src/notifications/notification/notification.css by `turbo run styles`. Do not edit.
 import { createSheet } from '@fusion.dev/helix-core';
 export const styles = createSheet(`:host {
 
@@ -127,12 +127,6 @@ pointer-events: auto;
 }
 }
 
-@media (prefers-reduced-motion: reduce) {
-[part="trailing"] > * {
-transition: none;
-}
-}
-
 [part="actions"] {
 align-items: center;
 display: flex;

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

@@ -1,4 +1,4 @@
-// Generated from src/notifications/root/notifications-root.css by `bun run styles`. Do not edit.
+// Generated from src/notifications/root/notifications-root.css by `turbo run styles`. Do not edit.
 import { createSheet } from '@fusion.dev/helix-core';
 export const styles = createSheet(`:host {
 

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

@@ -1,4 +1,4 @@
-// Generated from src/number-input/root/number-input-root.css by `bun run styles`. Do not edit.
+// Generated from src/number-input/root/number-input-root.css by `turbo run styles`. Do not edit.
 import { createSheet } from '@fusion.dev/helix-core';
 export const styles = createSheet(`:host {
 display: flex;
@@ -122,14 +122,6 @@ block-size: var(--helix-size-icon-tight);
 inline-size: var(--helix-size-icon-tight);
 }
 
-@media (prefers-reduced-motion: reduce) {
-[part="field"],
-[part="decrement"],
-[part="increment"] {
-transition: none;
-}
-}
-
 :host([scrub]) [part="label"] {
 cursor: ew-resize;
 touch-action: none;

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

@@ -1,4 +1,4 @@
-// Generated from src/option/group/option-group.css by `bun run styles`. Do not edit.
+// Generated from src/option/group/option-group.css by `turbo run styles`. Do not edit.
 import { createSheet } from '@fusion.dev/helix-core';
 export const styles = createSheet(`:host {
 display: block;

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

@@ -1,4 +1,4 @@
-// Generated from src/option/root/option-root.css by `bun run styles`. Do not edit.
+// Generated from src/option/root/option-root.css by `turbo run styles`. Do not edit.
 import { createSheet } from '@fusion.dev/helix-core';
 export const styles = createSheet(`:host {
 

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

@@ -1,4 +1,4 @@
-// Generated from src/outline/root/outline-root.css by `bun run styles`. Do not edit.
+// Generated from src/outline/root/outline-root.css by `turbo run styles`. Do not edit.
 import { createSheet } from '@fusion.dev/helix-core';
 export const styles = createSheet(`:host {
 display: block;
@@ -58,13 +58,6 @@ inset-inline-start var(--helix-duration-fast) var(--helix-easing-decelerate),
 opacity var(--helix-duration-fast) var(--helix-easing-standard);
 }
 
-@media (prefers-reduced-motion: reduce) {
-[part="indicator"],
-[part="indicator"][data-moving] {
-transition: opacity var(--helix-duration-fast) var(--helix-easing-standard);
-}
-}
-
 ::slotted(a) {
 border-radius: var(--helix-radii-sm);
 color: var(--helix-color-foreground-muted);
@@ -131,12 +124,6 @@ var(--outline-indent, var(--helix-space-sm))
 );
 }
 
-@media (prefers-reduced-motion: reduce) {
-::slotted(a) {
-transition: none;
-}
-}
-
 @media print {
 :host {
 box-shadow: none;

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

@@ -8,7 +8,7 @@ import type { CSSResultGroup } from 'lit';
  * the shape a table of contents has taken since printed marginalia: the line
  * says the list is one thing, and the lit segment says where in it you are.
  *
- * Nesting is the consumer's, expressed as `data-level` on a link. A outline
+ * Nesting is the consumer's, expressed as `data-level` on a link. An outline
  * that read heading levels itself would have to look at the document, and the
  * document is not always where the headings are.
  *

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

@@ -15,7 +15,7 @@ import { styles } from './outline-root.css.js';
  * the shape a table of contents has taken since printed marginalia: the line
  * says the list is one thing, and the lit segment says where in it you are.
  *
- * Nesting is the consumer's, expressed as `data-level` on a link. A outline
+ * Nesting is the consumer's, expressed as `data-level` on a link. An outline
  * that read heading levels itself would have to look at the document, and the
  * document is not always where the headings are.
  *

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

@@ -1,4 +1,4 @@
-// Generated from src/pagination/root/pagination-root.css by `bun run styles`. Do not edit.
+// Generated from src/pagination/root/pagination-root.css by `turbo run styles`. Do not edit.
 import { createSheet } from '@fusion.dev/helix-core';
 export const styles = createSheet(`:host {
 align-items: center;
@@ -140,17 +140,6 @@ font-weight: var(--helix-weight-medium);
 padding-inline: var(--helix-space-xs);
 }
 
-@media (prefers-reduced-motion: reduce) {
-[part="first"],
-[part="gap"],
-[part="last"],
-[part="page"],
-[part="previous"],
-[part="next"] {
-transition: none;
-}
-}
-
 @media print {
 :host {
 display: none;

package/dist/pagination/size/pagination-size.css.js

@@ -1,4 +1,4 @@
-// Generated from src/pagination/size/pagination-size.css by `bun run styles`. Do not edit.
+// Generated from src/pagination/size/pagination-size.css by `turbo run styles`. Do not edit.
 import { createSheet } from '@fusion.dev/helix-core';
 export const styles = createSheet(`:host {
 display: inline-flex;

package/dist/pagination/summary/pagination-summary.css.js

@@ -1,4 +1,4 @@
-// Generated from src/pagination/summary/pagination-summary.css by `bun run styles`. Do not edit.
+// Generated from src/pagination/summary/pagination-summary.css by `turbo run styles`. Do not edit.
 import { createSheet } from '@fusion.dev/helix-core';
 export const styles = createSheet(`:host {
 color: var(--helix-color-foreground-subtle);

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

@@ -1,4 +1,4 @@
-// Generated from src/pin-input/root/pin-input-root.css by `bun run styles`. Do not edit.
+// Generated from src/pin-input/root/pin-input-root.css by `turbo run styles`. Do not edit.
 import { createSheet } from '@fusion.dev/helix-core';
 export const styles = createSheet(`:host {
 display: flex;
@@ -56,12 +56,6 @@ background-color: transparent;
 font-size: var(--helix-text-xl);
 }
 
-@media (prefers-reduced-motion: reduce) {
-[part="cell"] {
-transition: none;
-}
-}
-
 [part="cell"]::placeholder {
 color: var(--helix-color-foreground-subtle);
 }

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

@@ -1,4 +1,4 @@
-// Generated from src/popover/root/popover-root.css by `bun run styles`. Do not edit.
+// Generated from src/popover/root/popover-root.css by `turbo run styles`. Do not edit.
 import { createSheet } from '@fusion.dev/helix-core';
 export const styles = createSheet(`:host {
 
@@ -36,8 +36,10 @@ padding: var(--popover-padding, var(--helix-space-none));
 [part="popover"] {
 opacity: 0;
 --_travel: calc(var(--helix-space-2xs) * -1);
+
+--_popover-from: 0.96;
 transform: translateY(var(--_travel));
-scale: var(--_popover-from, 0.96);
+scale: var(--_popover-from);
 transition:
 opacity var(--helix-duration-fast) var(--helix-easing-standard),
 scale var(--helix-duration-fast) var(--helix-easing-emphasized),

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

@@ -1,4 +1,4 @@
-// Generated from src/progress/root/progress-root.css by `bun run styles`. Do not edit.
+// Generated from src/progress/root/progress-root.css by `turbo run styles`. Do not edit.
 import { createSheet } from '@fusion.dev/helix-core';
 export const styles = createSheet(`:host {
 display: block;
@@ -43,12 +43,6 @@ transition: scale var(--helix-duration-normal) var(--helix-easing-decelerate);
 transform-origin: right center;
 }
 
-@media (prefers-reduced-motion: reduce) {
-[part="indicator"] {
-transition: none;
-}
-}
-
 :host([indeterminate]) {
 --_progress-cycle: calc(var(--helix-duration-slow) * 5);
 }

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

@@ -30,17 +30,18 @@ export declare class HelixProgress extends HelixHeadlessProgress {
      * How much ink the bar claims.
      *
      * `subtle` is the bar as a wash of its own color: still legible, no longer
-     * the loudest thing in the region. The case is a background task: something uploading while the reader is doing something else has to be visible and must not compete with what they are actually looking at.
+     * the loudest thing in the region. The case is a background task, which has to
+     * be visible and must not compete with what the reader is actually looking at.
      *
-     * **One value and not the four, which is the judgment this axis asks for
-     * rather than a partial sweep.** `ghost` would leave a track with nothing in
+     * **One value and not the four.** `ghost` would leave a track with nothing in
      * it, which is not a quiet reading but an absent one. `outlined` is the
-     * interesting refusal: `BarChart` makes it work by keeping the area and fading
-     * it toward the page, so an outlined column still encodes its value, and the
-     * reason it earns the value there is that a chart has other series for the
-     * outlined one to be a *different kind of fact from* (a forecast, a target,
-     * a budget). A progress bar is alone in its region and has nothing to differ from, so an outline there costs legibility and buys no distinction. `solid` is the resting state and is written by not
-     * writing it, per the rule that a reflected property takes no default.
+     * interesting refusal: `BarChart` earns it by keeping the area and fading it
+     * toward the page, so an outlined column still encodes its value and stands as
+     * a *different kind of fact* from the series beside it (a forecast, a target,
+     * a budget). A progress bar is alone in its region and has nothing to differ
+     * from, so an outline there costs legibility and buys no distinction. `solid`
+     * is the resting state and is written by not writing it, per the rule that a
+     * reflected property takes no default.
      * @cssproperty --progress-size - Thickness of the bar.
      * @cssproperty --progress-track-color - Fill of the part that is not.
      */

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

@@ -1,4 +1,4 @@
-// Generated from src/qr-code/root/qr-code-root.css by `bun run styles`. Do not edit.
+// Generated from src/qr-code/root/qr-code-root.css by `turbo run styles`. Do not edit.
 import { createSheet } from '@fusion.dev/helix-core';
 export const styles = createSheet(`:host {
 --_qr-size: var(--qr-code-size, 12rem);

package/dist/qr-code/root/qr-code-root.d.ts

@@ -5,7 +5,7 @@ import type { CSSResultGroup } from 'lit';
  *
  * @description
  * The picture is the headless tier's. What this adds is a size that can be set
- * once, the colours a scanner needs, and the box that holds a center mark.
+ * once, the colors a scanner needs, and the box that holds a center mark.
  *
  * **The ink is `currentColor` and the ground is a real fill.** A code has to be
  * dark on light to read, and the pair that guarantees it is not the page's

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

@@ -12,7 +12,7 @@ import { styles } from './qr-code-root.css.js';
  *
  * @description
  * The picture is the headless tier's. What this adds is a size that can be set
- * once, the colours a scanner needs, and the box that holds a center mark.
+ * once, the colors a scanner needs, and the box that holds a center mark.
  *
  * **The ink is `currentColor` and the ground is a real fill.** A code has to be
  * dark on light to read, and the pair that guarantees it is not the page's

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

@@ -1,4 +1,4 @@
-// Generated from src/quote/root/quote-root.css by `bun run styles`. Do not edit.
+// Generated from src/quote/root/quote-root.css by `turbo run styles`. Do not edit.
 import { createSheet } from '@fusion.dev/helix-core';
 export const styles = createSheet(`:host {
 display: inline;

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

@@ -1,4 +1,4 @@
-// Generated from src/radio/group/radio-group.css by `bun run styles`. Do not edit.
+// Generated from src/radio/group/radio-group.css by `turbo run styles`. Do not edit.
 import { createSheet } from '@fusion.dev/helix-core';
 export const styles = createSheet(`:host {
 display: flex;

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

@@ -1,4 +1,4 @@
-// Generated from src/radio/root/radio-root.css by `bun run styles`. Do not edit.
+// Generated from src/radio/root/radio-root.css by `turbo run styles`. Do not edit.
 import { createSheet } from '@fusion.dev/helix-core';
 export const styles = createSheet(`:host {
 display: block;
@@ -72,13 +72,6 @@ font-weight: var(--helix-weight-medium);
 line-height: var(--helix-leading-tight);
 }
 
-@media (prefers-reduced-motion: reduce) {
-[part="mark"],
-[part="box"] {
-transition: none;
-}
-}
-
 :host([variant="card"]) {
 display: block;
 }
@@ -127,12 +120,6 @@ margin-block-start: calc(
 display: none;
 }
 
-@media (prefers-reduced-motion: reduce) {
-:host([variant="card"]) [part="item"] {
-transition: none;
-}
-}
-
 :host([variant="chip"]) [part="box"] {
 display: none;
 }

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

@@ -30,21 +30,6 @@ import type { CSSResultGroup } from 'lit';
  */
 export declare class HelixRadio extends HelixHeadlessRadio {
     static styles: CSSResultGroup;
-    /**
-     * How the choice presents itself.
-     *
-     * - `plain` is the default and is never written: a circle beside its words,
-     *   which is what a list of choices should be almost always.
-     * - `card` puts it in a bounded surface, for options that need room to
-     *   explain themselves: a description, an icon, a price. It is the half a
-     *   `data-card` link cannot do, because a link reports no value and belongs
-     *   to no group, so a card that is genuinely an answer has to be this.
-     *
-     * The circle stays in both. A card whose only marker was its own border would
-     * ask a reader to compare surfaces across a row to find the answer, and would
-     * leave nothing for a high-contrast display.
-     */
-    variant?: 'chip' | 'plain' | 'card';
     /**
      * Takes the circle away, leaving the card as the whole control.
      *
@@ -56,15 +41,32 @@ export declare class HelixRadio extends HelixHeadlessRadio {
      * reported to a screen reader, and still the thing a form submits.
      *
      * Safe because the card already carries the answer in its surface, a raised
-     * fill inside a primary edge and a three-pixel ring of it. That ring is
-     * recent, and before it there was nothing left saying which card was chosen,
-     * which is why this is a property now and could not have been one then.
+     * fill inside a primary edge and a three-pixel ring of it. Without that ring
+     * nothing would be left saying which card was chosen.
      *
      * Not on `Checkbox`, deliberately. A radio card with no circle is still
      * unmistakably one-of-many because its siblings behave that way; a checkbox
      * card with no box loses the only thing that says you may pick several.
      */
     hideControl: boolean;
+    /**
+     * How the choice presents itself.
+     *
+     * - `plain` is the default and is never written: a circle beside its words,
+     *   which is what a list of choices should be almost always.
+     * - `card` puts it in a bounded surface, for options that need room to
+     *   explain themselves: a description, an icon, a price. It is the half a
+     *   `data-card` link cannot do, because a link reports no value and belongs
+     *   to no group, so a card that is genuinely an answer has to be this.
+     * - `chip` is the answer as its own small surface, for a row of short
+     *   choices read at a glance. It hides the circle, the surface being the
+     *   whole mark, which is why `hide-control` says it is unnecessary here.
+     *
+     * The circle stays in both. A card whose only marker was its own border would
+     * ask a reader to compare surfaces across a row to find the answer, and would
+     * leave nothing for a high-contrast display.
+     */
+    variant?: 'chip' | 'plain' | 'card';
 }
 declare global {
     interface HTMLElementTagNameMap {

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

@@ -50,9 +50,8 @@ let HelixRadio = class HelixRadio extends HelixHeadlessRadio {
          * reported to a screen reader, and still the thing a form submits.
          *
          * Safe because the card already carries the answer in its surface, a raised
-         * fill inside a primary edge and a three-pixel ring of it. That ring is
-         * recent, and before it there was nothing left saying which card was chosen,
-         * which is why this is a property now and could not have been one then.
+         * fill inside a primary edge and a three-pixel ring of it. Without that ring
+         * nothing would be left saying which card was chosen.
          *
          * Not on `Checkbox`, deliberately. A radio card with no circle is still
          * unmistakably one-of-many because its siblings behave that way; a checkbox
@@ -62,12 +61,12 @@ let HelixRadio = class HelixRadio extends HelixHeadlessRadio {
     }
     static { this.styles = styles; }
 };
-__decorate([
-    property({ reflect: true })
-], HelixRadio.prototype, "variant", void 0);
 __decorate([
     property({ attribute: 'hide-control', reflect: true, type: Boolean })
 ], HelixRadio.prototype, "hideControl", void 0);
+__decorate([
+    property({ reflect: true })
+], HelixRadio.prototype, "variant", void 0);
 HelixRadio = __decorate([
     customElement('helix-radio')
 ], HelixRadio);

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

@@ -1,4 +1,4 @@
-// Generated from src/rating/root/rating-root.css by `bun run styles`. Do not edit.
+// Generated from src/rating/root/rating-root.css by `turbo run styles`. Do not edit.
 import { createSheet } from '@fusion.dev/helix-core';
 export const styles = createSheet(`:host {
 

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

@@ -37,11 +37,10 @@ export declare class HelixRating extends HelixHeadlessRating {
      * *different* drawings is a set of choices rather than a quantity: that is
      * `Radio.Group`, whose options already carry a value and a name each.
      *
-     * **Undefaulted, because it reflects.** Defaulted to `marks` it wrote
-     * `appearance="marks"` onto every rating the server rendered, which React
-     * held no prop for and reported as a hydration mismatch. The stylesheet was
-     * already written the right way round, naming only `dots`, so marks is what
-     * an unset one draws and nothing else had to move.
+     * **Undefaulted, because it reflects.** A default of `marks` writes
+     * `appearance="marks"` onto every server-rendered rating, which React holds no
+     * prop for and reports as a hydration mismatch. The stylesheet names only
+     * `dots`, so an unset one draws marks anyway.
      */
     variant?: 'dots' | 'marks';
 }

package/dist/sandbox/preview/sandbox-preview.css.js

@@ -1,4 +1,4 @@
-// Generated from src/sandbox/preview/sandbox-preview.css by `bun run styles`. Do not edit.
+// Generated from src/sandbox/preview/sandbox-preview.css by `turbo run styles`. Do not edit.
 import { createSheet } from '@fusion.dev/helix-core';
 export const styles = createSheet(`:host {
 display: block;