@fusion.dev/helix 0.177.1 → 0.177.2

package/custom-elements.json

@@ -42364,6 +42364,21 @@
                 "module": "src/mixins/mixin-picker-field/mixin-picker-field.ts"
               }
             },
+            {
+              "kind": "method",
+              "name": "dismiss",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "description": "Escape's close, which hands focus back to the control that opened the\npanel: the trigger after its press, which is the APG date picker\ndialog's rule, and the field otherwise.\n\n**Here rather than in each family.** Color Input had the rule alone, and\nDate Input and Time Input, on the same code, put focus in the text after\nthe trigger's press: one control before where the reader had been.",
+              "inheritedFrom": {
+                "name": "MixinPickerField",
+                "module": "src/mixins/mixin-picker-field/mixin-picker-field.ts"
+              }
+            },
             {
               "kind": "field",
               "name": "handleFocusOut",
@@ -42400,6 +42415,20 @@
                 "module": "src/mixins/mixin-picker-field/mixin-picker-field.ts"
               }
             },
+            {
+              "kind": "field",
+              "name": "pressedOpen",
+              "type": {
+                "text": "boolean"
+              },
+              "privacy": "private",
+              "default": "false",
+              "description": "Whether the trigger's press opened the panel that is open now, so Escape returns there.",
+              "inheritedFrom": {
+                "name": "MixinPickerField",
+                "module": "src/mixins/mixin-picker-field/mixin-picker-field.ts"
+              }
+            },
             {
               "kind": "field",
               "name": "handleKeypress",
@@ -43475,31 +43504,6 @@
                 "module": "src/color-input/root/color-input-root.ts"
               }
             },
-            {
-              "kind": "field",
-              "name": "pressedOpen",
-              "type": {
-                "text": "boolean"
-              },
-              "privacy": "private",
-              "default": "false",
-              "description": "Whether the trigger's press opened the panel that is open now.",
-              "inheritedFrom": {
-                "name": "HelixHeadlessColorInput",
-                "module": "src/color-input/root/color-input-root.ts"
-              }
-            },
-            {
-              "kind": "field",
-              "name": "handlePress",
-              "privacy": "private",
-              "readonly": true,
-              "description": "The trigger's press, which notes that it opened the panel, so Escape hands\nfocus back to the trigger.",
-              "inheritedFrom": {
-                "name": "HelixHeadlessColorInput",
-                "module": "src/color-input/root/color-input-root.ts"
-              }
-            },
             {
               "kind": "method",
               "name": "renderPicker",
@@ -63472,6 +63476,21 @@
                 "module": "src/mixins/mixin-picker-field/mixin-picker-field.ts"
               }
             },
+            {
+              "kind": "method",
+              "name": "dismiss",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "description": "Escape's close, which hands focus back to the control that opened the\npanel: the trigger after its press, which is the APG date picker\ndialog's rule, and the field otherwise.\n\n**Here rather than in each family.** Color Input had the rule alone, and\nDate Input and Time Input, on the same code, put focus in the text after\nthe trigger's press: one control before where the reader had been.",
+              "inheritedFrom": {
+                "name": "MixinPickerField",
+                "module": "src/mixins/mixin-picker-field/mixin-picker-field.ts"
+              }
+            },
             {
               "kind": "field",
               "name": "handleFocusOut",
@@ -63508,6 +63527,20 @@
                 "module": "src/mixins/mixin-picker-field/mixin-picker-field.ts"
               }
             },
+            {
+              "kind": "field",
+              "name": "pressedOpen",
+              "type": {
+                "text": "boolean"
+              },
+              "privacy": "private",
+              "default": "false",
+              "description": "Whether the trigger's press opened the panel that is open now, so Escape returns there.",
+              "inheritedFrom": {
+                "name": "MixinPickerField",
+                "module": "src/mixins/mixin-picker-field/mixin-picker-field.ts"
+              }
+            },
             {
               "kind": "field",
               "name": "handleKeypress",
@@ -65198,8 +65231,8 @@
               "type": {
                 "text": "string"
               },
-              "default": "'{mode, select, single {Enter a date as YYYY-MM-DD.} other {Enter dates as YYYY-MM-DD, separated by commas.}}'",
-              "description": "The message for text that is no date, where `bad-input-message` is not\nset. `{mode}` is `single`, `range`, or `multiple`.",
+              "default": "'{mode, select, single {Enter a date such as {example}.} other {Enter dates such as {example}, separated by commas.}}'",
+              "description": "The message for text that is no date, where `bad-input-message` is not\nset. `{mode}` is `single`, `range`, or `multiple`, and `{example}` is a\ndate written as the field writes one, `August 24, 2026` in `en-US` and\n`24. August 2026` in `de-DE` at the default `date-style`.\n\n**The default names a date the field reads back.** It said \"Enter a date\nas YYYY-MM-DD.\" to a reader whose field showed `August 4, 2026`, and a\npattern token is words for a developer. Time Input says the same.",
               "attribute": "unreadable-message",
               "helix": {
                 "words": true
@@ -67025,8 +67058,8 @@
               "type": {
                 "text": "string"
               },
-              "default": "'{mode, select, single {Enter a date as YYYY-MM-DD.} other {Enter dates as YYYY-MM-DD, separated by commas.}}'",
-              "description": "The message for text that is no date, where `bad-input-message` is not\nset. `{mode}` is `single`, `range`, or `multiple`.",
+              "default": "'{mode, select, single {Enter a date such as {example}.} other {Enter dates such as {example}, separated by commas.}}'",
+              "description": "The message for text that is no date, where `bad-input-message` is not\nset. `{mode}` is `single`, `range`, or `multiple`, and `{example}` is a\ndate written as the field writes one, `August 24, 2026` in `en-US` and\n`24. August 2026` in `de-DE` at the default `date-style`.\n\n**The default names a date the field reads back.** It said \"Enter a date\nas YYYY-MM-DD.\" to a reader whose field showed `August 4, 2026`, and a\npattern token is words for a developer. Time Input says the same.",
               "fieldName": "unreadableMessage",
               "inheritedFrom": {
                 "name": "HelixHeadlessDateInput",
@@ -68088,8 +68121,8 @@
               "type": {
                 "text": "string"
               },
-              "default": "'{mode, select, single {Enter a date as YYYY-MM-DD.} other {Enter dates as YYYY-MM-DD, separated by commas.}}'",
-              "description": "The validation message for a value that is not a date.\n\n**Every sentence a control raises in the browser's bubble is a property**,\nnamed for the validity flag it reports, so a form in another language\nspeaks it. Unset is the sentence registered for the page's language, then\nthe English. `{mode}` is `single`, `range` or `multiple`, so each can have\nits own sentence.",
+              "default": "'{mode, select, single {Enter a date such as {example}.} other {Enter dates such as {example}, separated by commas.}}'",
+              "description": "The validation message for a value that is not a date.\n\n**Every sentence a control raises in the browser's bubble is a property**,\nnamed for the validity flag it reports, so a form in another language\nspeaks it. Unset is the sentence registered for the page's language, then\nthe English. `{example}` is a date written as the calendar names one,\n`August 24, 2026` in `en-US` and `24. August 2026` in `de-DE`, and `{mode}`\nis `single`, `range` or `multiple`, so each can have its own sentence.\n\n**The default names a date in words.** It said \"Enter a date as\nYYYY-MM-DD.\", and a pattern token is words for a developer.",
               "attribute": "bad-input-message",
               "helix": {
                 "words": true
@@ -70568,8 +70601,8 @@
               "type": {
                 "text": "string"
               },
-              "default": "'{mode, select, single {Enter a date as YYYY-MM-DD.} other {Enter dates as YYYY-MM-DD, separated by commas.}}'",
-              "description": "The validation message for a value that is not a date.\n\n**Every sentence a control raises in the browser's bubble is a property**,\nnamed for the validity flag it reports, so a form in another language\nspeaks it. Unset is the sentence registered for the page's language, then\nthe English. `{mode}` is `single`, `range` or `multiple`, so each can have\nits own sentence.",
+              "default": "'{mode, select, single {Enter a date such as {example}.} other {Enter dates such as {example}, separated by commas.}}'",
+              "description": "The validation message for a value that is not a date.\n\n**Every sentence a control raises in the browser's bubble is a property**,\nnamed for the validity flag it reports, so a form in another language\nspeaks it. Unset is the sentence registered for the page's language, then\nthe English. `{example}` is a date written as the calendar names one,\n`August 24, 2026` in `en-US` and `24. August 2026` in `de-DE`, and `{mode}`\nis `single`, `range` or `multiple`, so each can have its own sentence.\n\n**The default names a date in words.** It said \"Enter a date as\nYYYY-MM-DD.\", and a pattern token is words for a developer.",
               "fieldName": "badInputMessage",
               "inheritedFrom": {
                 "name": "HelixHeadlessDatePicker",
@@ -216114,6 +216147,21 @@
                 "module": "src/mixins/mixin-picker-field/mixin-picker-field.ts"
               }
             },
+            {
+              "kind": "method",
+              "name": "dismiss",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "description": "Escape's close, which hands focus back to the control that opened the\npanel: the trigger after its press, which is the APG date picker\ndialog's rule, and the field otherwise.\n\n**Here rather than in each family.** Color Input had the rule alone, and\nDate Input and Time Input, on the same code, put focus in the text after\nthe trigger's press: one control before where the reader had been.",
+              "inheritedFrom": {
+                "name": "MixinPickerField",
+                "module": "src/mixins/mixin-picker-field/mixin-picker-field.ts"
+              }
+            },
             {
               "kind": "field",
               "name": "handleFocusOut",
@@ -216150,6 +216198,20 @@
                 "module": "src/mixins/mixin-picker-field/mixin-picker-field.ts"
               }
             },
+            {
+              "kind": "field",
+              "name": "pressedOpen",
+              "type": {
+                "text": "boolean"
+              },
+              "privacy": "private",
+              "default": "false",
+              "description": "Whether the trigger's press opened the panel that is open now, so Escape returns there.",
+              "inheritedFrom": {
+                "name": "MixinPickerField",
+                "module": "src/mixins/mixin-picker-field/mixin-picker-field.ts"
+              }
+            },
             {
               "kind": "field",
               "name": "handleKeypress",
@@ -220332,8 +220394,8 @@
               "type": {
                 "text": "string"
               },
-              "default": "'{mode, select, single {Enter a time as {shape}.} other {Enter times as {shape}, separated by commas.}}'",
-              "description": "The validation message for a value that is not a time.\n\n**Every sentence a control raises in the browser's bubble is a property**,\nnamed for the validity flag it reports, so a form in another language\nspeaks it. Unset is the sentence registered for the page's language, then\nthe English. `{shape}` is how a time is written, `HH:mm` or `HH:mm:ss`, and\n`{mode}` is `single`, `range` or `multiple`, so each can have its own\nsentence.",
+              "default": "'{mode, select, single {Enter a time such as {example}.} other {Enter times such as {example}, separated by commas.}}'",
+              "description": "The validation message for a value that is not a time.\n\n**Every sentence a control raises in the browser's bubble is a property**,\nnamed for the validity flag it reports, so a form in another language\nspeaks it. Unset is the sentence registered for the page's language, then\nthe English. `{example}` is a time written as the picker writes one,\n`2:30 PM` in `en-US` and `14:30` in `de-DE`, `{shape}` is `HH:mm` or\n`HH:mm:ss`, and `{mode}` is `single`, `range` or `multiple`, so each can\nhave its own sentence.\n\n**The default names a time as the picker shows one.** It said \"Enter a\ntime as HH:mm.\" to a reader whose list showed `2:30 PM`, and a pattern\ntoken is words for a developer. Time Input says the same.",
               "attribute": "bad-input-message",
               "helix": {
                 "words": true
@@ -222492,8 +222554,8 @@
               "type": {
                 "text": "string"
               },
-              "default": "'{mode, select, single {Enter a time as {shape}.} other {Enter times as {shape}, separated by commas.}}'",
-              "description": "The validation message for a value that is not a time.\n\n**Every sentence a control raises in the browser's bubble is a property**,\nnamed for the validity flag it reports, so a form in another language\nspeaks it. Unset is the sentence registered for the page's language, then\nthe English. `{shape}` is how a time is written, `HH:mm` or `HH:mm:ss`, and\n`{mode}` is `single`, `range` or `multiple`, so each can have its own\nsentence.",
+              "default": "'{mode, select, single {Enter a time such as {example}.} other {Enter times such as {example}, separated by commas.}}'",
+              "description": "The validation message for a value that is not a time.\n\n**Every sentence a control raises in the browser's bubble is a property**,\nnamed for the validity flag it reports, so a form in another language\nspeaks it. Unset is the sentence registered for the page's language, then\nthe English. `{example}` is a time written as the picker writes one,\n`2:30 PM` in `en-US` and `14:30` in `de-DE`, `{shape}` is `HH:mm` or\n`HH:mm:ss`, and `{mode}` is `single`, `range` or `multiple`, so each can\nhave its own sentence.\n\n**The default names a time as the picker shows one.** It said \"Enter a\ntime as HH:mm.\" to a reader whose list showed `2:30 PM`, and a pattern\ntoken is words for a developer. Time Input says the same.",
               "fieldName": "badInputMessage",
               "inheritedFrom": {
                 "name": "HelixHeadlessTimePicker",
@@ -250187,6 +250249,6 @@
   ],
   "helix": {
     "package": "@fusion.dev/helix",
-    "version": "0.177.1"
+    "version": "0.177.2"
   }
 }

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

@@ -1,5 +1,5 @@
 import { createSheet } from '@fusion.dev/helix-core';
-export const styles = createSheet(`:host {display: inline-flex;min-inline-size: var(--button-inline-size, auto);max-inline-size: 100%;}:host {--_button-edge: var(--helix-color-border);--_button-fill: var(--_button-tone);--_button-fill-hover: var(--_button-tone-hover);--_button-on-tone: var(--helix-color-background);--_button-tone: var(--helix-color-foreground);--_button-turn: 0.8s;--_button-tone-hover: color-mix(
+export const styles = createSheet(`:host {display: inline-flex;min-inline-size: var(--button-inline-size, auto);max-inline-size: 100%;}:host {--_button-edge: var(--helix-color-border);--_button-fill: var(--_button-tone);--_button-fill-hover: var(--_button-tone-hover);--_button-on-tone: var(--helix-color-background);--_button-tone: var(--helix-color-foreground);--_button-crawl: 4s;--_button-turn: 0.8s;--_button-tone-hover: color-mix(
 in oklab,
 var(--helix-color-foreground) 86%,
 var(--helix-color-background)
@@ -44,4 +44,4 @@ var(--button-background-color, color-mix(in oklab, var(--_button-tone) 22%, tran
 --button-background-color-hover,
 var(--button-background-color, color-mix(in oklab, var(--_button-tone) 8%, transparent))
 );border-color: transparent;}:host([width="full"]) {display: flex;inline-size: 100%;}:host(:disabled) [part="button"] {cursor: not-allowed;opacity: 0.5;}@supports (text-box: trim-both cap alphabetic) {slot:not([name]) {display: block;padding-block: var(--helix-space-2xs);text-box: trim-both cap alphabetic;}}[part="button"] ::slotted(helix-icon) {--icon-size: 1.15em;}:host(:state(pending)) [part="button"] {cursor: progress;position: relative;}:host(:state(pending)) [part="button"] > slot {visibility: hidden;}[part="spinner"] {animation: helix-button-turn var(--button-spinner-duration, var(--_button-turn)) linear infinite;block-size: var(--button-spinner-size, 1.15em);border: var(--helix-border-thick) solid
-color-mix(in oklab, var(--button-spinner-color, currentColor) 30%, transparent);border-block-start-color: var(--button-spinner-color, currentColor);border-radius: var(--helix-radii-full);box-sizing: border-box;inline-size: var(--button-spinner-size, 1.15em);inset: 0;margin: auto;position: absolute;}@keyframes helix-button-turn {to {rotate: 1turn;}}@media (prefers-reduced-motion: reduce) {[part="spinner"] {animation-duration: calc(var(--helix-duration-slow) * 12);}}@media print {:host {display: none;}}`);
+color-mix(in oklab, var(--button-spinner-color, currentColor) 30%, transparent);border-block-start-color: var(--button-spinner-color, currentColor);border-radius: var(--helix-radii-full);box-sizing: border-box;inline-size: var(--button-spinner-size, 1.15em);inset: 0;margin: auto;position: absolute;}@keyframes helix-button-turn {to {rotate: 1turn;}}@media (prefers-reduced-motion: reduce) {[part="spinner"] {animation-duration: var(--_button-crawl);}}@media print {:host {display: none;}}`);

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

@@ -1,6 +1,6 @@
 import { createSheet } from '@fusion.dev/helix-core';
 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));min-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(
+var(--helix-easing-decelerate);}:host(:dir(rtl)) [part="indicator"] {transform-origin: right center;}:host([indeterminate]) {--_progress-crawl: 19.2s;--_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)
@@ -15,7 +15,7 @@ var(--_progress-under) var(--_progress-split)
 );}:host([indeterminate]) [part="content"],
 :host([emphasis="subtle"]) [part="content"] {--_progress-over: var(--_progress-under);}: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"]) [part="content"] {background-image: none;color: var(--progress-content-color, var(--helix-color-foreground));grid-area: 1 / 1;padding-inline: var(--helix-space-none);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 (forced-colors: active) {[part="track"] {outline: var(--helix-border-thin) solid CanvasText;}[part="indicator"] {background-color: Highlight;forced-color-adjust: none;}:host([shape="ring"]) [part="track"] {outline: none;}:host([shape="ring"]) [part="indicator"] {stroke: Highlight;}:host([shape="ring"]) [part="groove"] {stroke: CanvasText;}[part="content"] {--_progress-over: HighlightText;--_progress-under: CanvasText;forced-color-adjust: none;}:host([shape="ring"]) [part="content"] {color: CanvasText;}}@media print {:host {print-color-adjust: exact;}}:host([emphasis="subtle"]) [part="indicator"] {background-color: color-mix(
+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"]) [part="content"] {background-image: none;color: var(--progress-content-color, var(--helix-color-foreground));grid-area: 1 / 1;padding-inline: var(--helix-space-none);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: var(--_progress-crawl);}:host([shape="ring"][indeterminate]) [part="indicator"] {animation: none;stroke-dasharray: 25 100;}}@media (forced-colors: active) {[part="track"] {outline: var(--helix-border-thin) solid CanvasText;}[part="indicator"] {background-color: Highlight;forced-color-adjust: none;}:host([shape="ring"]) [part="track"] {outline: none;}:host([shape="ring"]) [part="indicator"] {stroke: Highlight;}:host([shape="ring"]) [part="groove"] {stroke: CanvasText;}[part="content"] {--_progress-over: HighlightText;--_progress-under: CanvasText;forced-color-adjust: none;}:host([shape="ring"]) [part="content"] {color: CanvasText;}}@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))