@fusion.dev/helix 0.145.0 → 0.147.0

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

@@ -1,238 +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(--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(--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,10 +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,58 +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="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,18 +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-style: var(--quote-font-style, italic);
-}
-
-@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/quote/root/quote-root.d.ts

@@ -14,7 +14,9 @@ import type { CSSResultGroup } from 'lit';
  * @documentation https://fusion.dev/helix/components/quote
  *
  * @cssproperty --quote-color - Color of the quoted text.
+ * @cssproperty --quote-font-family - The typeface of the quoted text, the paragraph's own by default.
  * @cssproperty --quote-font-style - The slant of the quoted text, `italic` by default. Set `normal` for a face whose italic is too loud, or `oblique` for one with no italic of its own.
+ * @cssproperty --quote-font-weight - The weight of the quoted text, the paragraph's own by default.
  */
 export declare class HelixQuote extends HelixHeadlessQuote {
     static styles: CSSResultGroup;

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);}`);

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

@@ -1,197 +1,10 @@
 import { createSheet } from '@fusion.dev/helix-core';
-export const styles = createSheet(`:host {
---_radio-size: var(--radio-size, var(--helix-size-checkbox));
-display: block;
-}
-
-[part="item"] {
-all: unset;
-align-items: center;
-box-sizing: border-box;
-cursor: pointer;
-display: inline-flex;
-gap: var(--helix-space-xs);
-}
-
-:host([disabled]) [part="item"] {
-cursor: default;
-}
-
-:host([disabled]) {
-opacity: 0.5;
-}
-
-[part="box"] {
-
-background-color: var(--radio-background-color, var(--helix-color-background));
-block-size: var(--_radio-size);
-border: var(--helix-border-thin) solid var(--radio-border-color, var(--helix-color-border));
-
-border-radius: var(--helix-radii-full);
-display: grid;
-flex: 0 0 auto;
-inline-size: var(--_radio-size);
-place-items: center;
-transition: border-color var(--helix-duration-fast) var(--helix-easing-standard);
-}
-
-:host(:not([disabled])) [part="item"]:hover [part="box"] {
-border-color: var(--radio-border-color, var(--helix-color-foreground-muted));
-}
-
-:host(:state(selected)) [part="box"] {
-border-color: var(--radio-border-color, var(--helix-color-foreground));
-}
-
-[part="box"]::after {
-background-color: var(--radio-mark-color, var(--helix-color-foreground));
-block-size: calc(var(--_radio-size) * 0.4);
-border-radius: var(--helix-radii-full);
-content: "";
-inline-size: calc(var(--_radio-size) * 0.4);
-
-scale: 0;
-transition: scale var(--helix-duration-fast) var(--helix-easing-emphasized);
-}
-
-:host(:state(selected)) [part="box"]::after {
-scale: 1;
-}
-
-[part="item"]:focus-visible [part="box"] {
-outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);
-outline-offset: var(--helix-size-focus-offset);
-}
-
-[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(:is([separation="filled"], [separation="outlined"])) {
-display: block;
-}
-
-:host(:is([separation="filled"], [separation="outlined"])) [part="item"] {
-align-items: start;
-background-color: var(--radio-card-background-color, var(--helix-color-surface));
-border: var(--helix-border-thin) solid var(--radio-card-border-color, var(--helix-color-border));
-border-radius: var(--helix-radii-sm);
-display: flex;
-gap: var(--helix-space-sm);
-inline-size: 100%;
-padding: var(--radio-card-padding, var(--helix-space-md));
-transition:
+export const styles = createSheet(`:host {--_radio-size: var(--radio-size, var(--helix-size-checkbox));display: block;}[part="item"] {all: unset;align-items: center;box-sizing: border-box;cursor: pointer;display: inline-flex;gap: var(--helix-space-xs);}:host([disabled]) [part="item"] {cursor: default;}:host([disabled]) {opacity: 0.5;}[part="box"] {background-color: var(--radio-background-color, var(--helix-color-background));block-size: var(--_radio-size);border: var(--helix-border-thin) solid var(--radio-border-color, var(--helix-color-border));border-radius: var(--helix-radii-full);display: grid;flex: 0 0 auto;inline-size: var(--_radio-size);place-items: center;transition: border-color var(--helix-duration-fast) var(--helix-easing-standard);}:host(:not([disabled])) [part="item"]:hover [part="box"] {border-color: var(--radio-border-color, var(--helix-color-foreground-muted));}:host(:state(selected)) [part="box"] {border-color: var(--radio-border-color, var(--helix-color-foreground));}[part="box"]::after {background-color: var(--radio-mark-color, var(--helix-color-foreground));block-size: calc(var(--_radio-size) * 0.4);border-radius: var(--helix-radii-full);content: "";inline-size: calc(var(--_radio-size) * 0.4);scale: 0;transition: scale var(--helix-duration-fast) var(--helix-easing-emphasized);}:host(:state(selected)) [part="box"]::after {scale: 1;}:host(:state(has-indicator)) [part="box"]::after {content: none;}slot[name="indicator"]::slotted(*) {block-size: var(--radio-indicator-size, calc(var(--_radio-size) * 0.75));color: var(--radio-mark-color, var(--helix-color-foreground));inline-size: var(--radio-indicator-size, calc(var(--_radio-size) * 0.75));scale: 0;transition: scale var(--helix-duration-fast) var(--helix-easing-emphasized);}:host(:state(selected)) slot[name="indicator"]::slotted(*) {scale: 1;}[part="item"]:focus-visible [part="box"] {outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);outline-offset: var(--helix-size-focus-offset);}[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(:is([separation="filled"], [separation="outlined"])) {display: block;}:host(:is([separation="filled"], [separation="outlined"])) [part="item"] {align-items: start;background-color: var(--radio-card-background-color, var(--helix-color-surface));border: var(--helix-border-thin) solid var(--radio-card-border-color, var(--helix-color-border));border-radius: var(--helix-radii-sm);display: flex;gap: var(--helix-space-sm);inline-size: 100%;padding: var(--radio-card-padding, var(--helix-space-md));transition:
 background-color var(--helix-duration-fast) var(--helix-easing-standard),
-border-color var(--helix-duration-fast) var(--helix-easing-standard);
-}
-
-:host([separation="filled"]) [part="item"] {
-border-color: transparent;
-}
-
-:host(:not([disabled]):is([separation="filled"], [separation="outlined"])) [part="item"]:hover {
-border-color: var(--helix-color-foreground-muted);
-}
-
-:host(:is([separation="filled"], [separation="outlined"]):state(selected)) [part="item"] {
-background-color: var(--helix-color-surface-raised);
-border-color: var(--helix-color-primary);
-box-shadow: 0 0 0 var(--helix-border-thick) var(--helix-color-primary);
-}
-
-:host(:is([separation="filled"], [separation="outlined"])) [part="item"]:focus-visible {
-outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);
-outline-offset: var(--helix-size-focus-offset);
-}
-
-:host(:is([separation="filled"], [separation="outlined"]))
+border-color var(--helix-duration-fast) var(--helix-easing-standard);}:host([separation="filled"]) [part="item"] {border-color: transparent;}:host(:not([disabled]):is([separation="filled"], [separation="outlined"])) [part="item"]:hover {border-color: var(--helix-color-foreground-muted);}:host(:is([separation="filled"], [separation="outlined"]):state(selected)) [part="item"] {background-color: var(--helix-color-surface-raised);border-color: var(--helix-color-primary);box-shadow: 0 0 0 var(--helix-border-thick) var(--helix-color-primary);}:host(:is([separation="filled"], [separation="outlined"])) [part="item"]:focus-visible {outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);outline-offset: var(--helix-size-focus-offset);}:host(:is([separation="filled"], [separation="outlined"]))
 [part="item"]:focus-visible
-[part="box"] {
-outline: none;
-}
-
-:host(:is([separation="filled"], [separation="outlined"])) [part="label"] {
-font-size: var(--helix-text-md);
-line-height: var(--helix-leading-normal);
-}
-
-:host(:is([separation="filled"], [separation="outlined"])) [part="box"] {
-font-size: var(--helix-text-md);
-line-height: var(--helix-leading-normal);
-margin-block-start: calc((1lh - var(--_radio-size)) / 2);
-}
-
-:host(:is([separation="filled"], [separation="outlined"])[hide-control]) [part="box"] {
-display: none;
-}
-
-:host([variant="chip"]) [part="box"] {
-display: none;
-}
-
-:host([variant="chip"]) [part="item"] {
-
---_radio-chip-lift: 2px;
-
-align-items: center;
-background-color: var(--helix-color-surface-sunken);
-block-size: var(--radio-chip-size, var(--helix-size-control));
-border-radius: var(--helix-radii-full);
-color: var(--helix-color-foreground-muted);
-cursor: pointer;
-display: inline-flex;
-inline-size: var(--radio-chip-size, var(--helix-size-control));
-justify-content: center;
-padding: 0;
-transition:
+[part="box"] {outline: none;}:host(:is([separation="filled"], [separation="outlined"])) [part="label"] {font-size: var(--helix-text-md);line-height: var(--helix-leading-normal);}:host(:is([separation="filled"], [separation="outlined"])) [part="box"] {font-size: var(--helix-text-md);line-height: var(--helix-leading-normal);margin-block-start: calc((1lh - var(--_radio-size)) / 2);}:host(:is([separation="filled"], [separation="outlined"])[hide-control]) [part="box"] {display: none;}:host([variant="chip"]) [part="box"] {display: none;}:host([variant="chip"]) [part="item"] {--_radio-chip-lift: 2px;align-items: center;background-color: var(--helix-color-surface-sunken);block-size: var(--radio-chip-size, var(--helix-size-control));border-radius: var(--helix-radii-full);color: var(--helix-color-foreground-muted);cursor: pointer;display: inline-flex;inline-size: var(--radio-chip-size, var(--helix-size-control));justify-content: center;padding: 0;transition:
 background-color var(--helix-duration-fast) var(--helix-easing-standard),
 box-shadow var(--helix-duration-fast) var(--helix-easing-standard),
-translate var(--helix-duration-fast) var(--helix-easing-standard);
-}
-
-:host([variant="chip"]:state(selected)) [part="item"] {
-background-color: var(--helix-color-surface-inverse);
-box-shadow: var(--helix-shadow-md);
-color: var(--helix-color-foreground-inverse);
-translate: 0 calc(var(--_radio-chip-lift) * -1);
-}
-
-:host(:not([disabled])[variant="chip"]) [part="item"]:hover {
-translate: 0 calc(var(--_radio-chip-lift) / -2);
-}
-
-:host([variant="chip"]) [part="item"]:focus-visible {
-outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);
-outline-offset: var(--helix-size-focus-offset);
-}
-
-:host([variant="chip"]) [part="label"] {
-clip-path: inset(50%);
-block-size: 1px;
-inline-size: 1px;
-overflow: hidden;
-position: absolute;
-white-space: nowrap;
-}
-
-@media (prefers-reduced-motion: reduce) {
-:host([variant="chip"]) [part="item"] {
-transition: none;
-}
-
-:host([variant="chip"]:state(selected)) [part="item"],
-:host(:not([disabled])[variant="chip"]) [part="item"]:hover {
-translate: none;
-}
-}
-
-@media print {
-:host {
-box-shadow: none;
-print-color-adjust: exact;
-}
-}`);
+translate var(--helix-duration-fast) var(--helix-easing-standard);}:host([variant="chip"]:state(selected)) [part="item"] {background-color: var(--helix-color-surface-inverse);box-shadow: var(--helix-shadow-md);color: var(--helix-color-foreground-inverse);translate: 0 calc(var(--_radio-chip-lift) * -1);}:host(:not([disabled])[variant="chip"]) [part="item"]:hover {translate: 0 calc(var(--_radio-chip-lift) / -2);}:host([variant="chip"]) [part="item"]:focus-visible {outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);outline-offset: var(--helix-size-focus-offset);}:host([variant="chip"]) [part="label"] {clip-path: inset(50%);block-size: 1px;inline-size: 1px;overflow: hidden;position: absolute;white-space: nowrap;}@media (prefers-reduced-motion: reduce) {:host([variant="chip"]) [part="item"] {transition: none;}:host([variant="chip"]:state(selected)) [part="item"],
+:host(:not([disabled])[variant="chip"]) [part="item"]:hover {translate: none;}}@media print {:host {box-shadow: none;print-color-adjust: exact;}}`);

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

@@ -23,7 +23,8 @@ import type { CSSResultGroup } from 'lit';
  * @cssproperty --radio-card-border-color - The border color of a card-shaped choice.
  * @cssproperty --radio-card-padding - The padding inside a card-shaped choice.
  * @cssproperty --radio-chip-size - The diameter of a chip.
- * @cssproperty --radio-mark-color - The color of the dot.
+ * @cssproperty --radio-indicator-size - The width and height of an icon slotted into `indicator`. Three quarters of the circle by default.
+ * @cssproperty --radio-mark-color - The color of the dot, or of an icon slotted into `indicator`.
  * @cssproperty --radio-size - The diameter of the circle.
  */
 export declare class HelixRadio extends HelixHeadlessRadio {