@astryx-vue/core 0.2.6 → 0.4.0

package/styles/pressable.css

@@ -1,44 +1,85 @@
 @layer astryx.reset, astryx.tokens, astryx.base, astryx.components, astryx.overrides;
 
 /*
- * 按压反馈。`usePressFeedback` 给元素加 `data-astryx-pressable`，
- * 手指按实了再临时加 `data-astryx-pressed`。
+ * 触屏按压模型的样式。
  *
- * 按下时立刻亮（不给过渡），抬手后靠 200ms 的 opacity 过渡淡出。
- * 鼠标不看按压模型，仍然用 `:active`；手指走的是 `@media (pointer: coarse)` 之外不生效的那条。
+ * 鼠标和手指走两套：
+ * - 鼠标保留 `:active`；
+ * - 粗指针（`@media (pointer: coarse)`）下丢掉 `:active`，改看控制器写的
+ *   `data-astryx-press`：`on` 是按压成立、手指还在，`fading` 是抬手后的淡出。
+ *
+ * 两条触屏分支都通过同一个数画颜色：`--astryx-press-alpha`，按压强度，0 到 1。
+ * 它是注册过的自定义属性（`@property`，`<number>`），所以能做动画；
+ * 按压色 `--_press-paint` 是「按压 token 乘以这个强度」，作为背景图片画出来。
+ * 图片的切换不会被组件自己的颜色过渡拖慢，所以按下的第一帧就是满强度。
+ * `fading` 用关键帧把强度从 1 降到 0，时长和控制器里的 PRESS_FADE_MS 是同一个数（200ms）。
+ *
+ * 组件怎么接：在画按压的元素上带 `data-astryx-pressable`，
+ * 在自己的样式里用 `var(--_press-paint-image)` 或 `var(--_press-paint)` 画两条触屏分支，
+ * 鼠标的 `:active` 放进 `@media not all and (pointer: coarse)`。
+ * 本地组件不想自己写样式时，用 `usePressFeedback()` 返回的 `astryx-pressable` 类，
+ * 它在 `::after` 上画一层按压色。
  */
+
+@property --astryx-press-alpha {
+  syntax: '<number>';
+  inherits: true;
+  initial-value: 0;
+}
+
+@keyframes astryx-press-release {
+  from {
+    --astryx-press-alpha: 1;
+  }
+  to {
+    --astryx-press-alpha: 0;
+  }
+}
+
 @layer astryx.components {
   [data-astryx-pressable] {
+    --_press-paint: color-mix(
+      in srgb,
+      var(--astryx-color-overlay-pressed, light-dark(#05365919, #ffffff19)) calc(var(--astryx-press-alpha) * 100%),
+      transparent
+    );
+    --_press-paint-image: linear-gradient(var(--_press-paint), var(--_press-paint));
+  }
+
+  [data-astryx-pressable][data-astryx-press='on'],
+  [data-astryx-pressable][data-astryx-press='fading'] {
+    --astryx-press-alpha: 1;
+  }
+
+  /* 淡出的曲线是平缓的 ease-out，整段时长都在褪色，读起来像系统列表取消选中。 */
+  [data-astryx-pressable][data-astryx-press='fading'] {
+    animation-name: astryx-press-release;
+    animation-duration: 200ms;
+    animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
+    animation-fill-mode: both;
+  }
+
+  /* 默认的一层按压色，给不想自己写样式的本地组件用。 */
+  .astryx-pressable {
     position: relative;
-    --astryx-pressable-fade: 200ms;
   }
 
-  [data-astryx-pressable]::after {
+  .astryx-pressable::after {
     content: '';
     position: absolute;
     inset: 0;
     border-radius: inherit;
-    background: var(--astryx-color-overlay-pressed, light-dark(#05365919, #ffffff19));
-    opacity: 0;
     pointer-events: none;
-    transition: opacity var(--astryx-pressable-fade, 200ms) linear;
-  }
-
-  [data-astryx-pressed]::after {
-    opacity: 1;
-    transition: none;
   }
 
-  @media (pointer: fine) {
-    [data-astryx-pressable]:active::after {
-      opacity: 1;
-      transition: none;
+  @media not all and (pointer: coarse) {
+    .astryx-pressable:where(:not(:disabled, [aria-disabled='true'])):active::after {
+      background-color: var(--astryx-color-overlay-pressed, light-dark(#05365919, #ffffff19));
     }
   }
 
-  @media (prefers-reduced-motion: reduce) {
-    [data-astryx-pressable]::after {
-      transition: none;
-    }
+  .astryx-pressable:where(:not(:disabled, [aria-disabled='true']))[data-astryx-press]::after {
+    background-color: transparent;
+    background-image: var(--_press-paint-image);
   }
 }

package/styles/progress-bar.css

@@ -153,7 +153,11 @@
 
   .astryx-progress-bar[data-indeterminate='true'] .astryx-progress-bar-fill {
     width: 40%;
-    animation: astryx-progress-bar-indeterminate 1.2s ease-in-out infinite;
+    animation: astryx-progress-bar-indeterminate 1.5s ease-in-out infinite;
+  }
+
+  :is([dir='rtl'] .astryx-progress-bar[data-indeterminate='true']) .astryx-progress-bar-fill {
+    animation-name: astryx-progress-bar-indeterminate-rtl;
   }
 
   @keyframes astryx-progress-bar-indeterminate {
@@ -165,14 +169,22 @@
     }
   }
 
+  @keyframes astryx-progress-bar-indeterminate-rtl {
+    0% {
+      transform: translateX(100%);
+    }
+    100% {
+      transform: translateX(-250%);
+    }
+  }
+
   @media (prefers-reduced-motion: reduce) {
     .astryx-progress-bar-fill {
       transition: none;
     }
 
     .astryx-progress-bar[data-indeterminate='true'] .astryx-progress-bar-fill {
-      animation: none;
-      width: 100%;
+      animation-duration: 3s;
     }
   }
 }

package/styles/radio.css

@@ -50,6 +50,22 @@
     height: 8px;
   }
 
+  @media not all and (pointer: coarse) {
+    .astryx-radio:not([data-disabled='true']):active .astryx-radio-indicator {
+      background-image: linear-gradient(var(--astryx-color-overlay-pressed, light-dark(#05365919, #ffffff19)), var(--astryx-color-overlay-pressed, light-dark(#05365919, #ffffff19)));
+    }
+  }
+
+  .astryx-radio[data-astryx-press] .astryx-radio-indicator {
+    background-image: var(--_press-paint-image);
+  }
+
+  @media (pointer: coarse) {
+    .astryx-radio {
+      min-height: 24px;
+    }
+  }
+
   .astryx-radio-native:focus-visible + .astryx-radio-indicator {
     outline: 2px solid var(--astryx-focus-outline-color, var(--astryx-input-focus, #262626));
     outline-offset: 2px;

package/styles/resize-handle.css

@@ -89,6 +89,48 @@
     cursor: row-resize;
   }
 
+  /*
+   * 抓取区跟握把走同一套物理偏移。6.5px 是 (16px - 3px) / 2，用来把更宽的抓取区中心对齐握把。
+   * 这段位移在行内轴上，从右到左时要改号，否则抓取区会偏到握把旁边。
+   */
+  .astryx-resize-handle[data-direction='horizontal'] > .astryx-resize-handle__hit[data-bias='center'] {
+    inset-inline-start: 50%;
+    transform: translateX(-50%);
+  }
+
+  .astryx-resize-handle[data-direction='vertical'] > .astryx-resize-handle__hit[data-bias='center'] {
+    inset-block-start: 50%;
+    transform: translateY(-50%);
+  }
+
+  .astryx-resize-handle[data-direction='horizontal'] > .astryx-resize-handle__hit[data-bias='start'] {
+    inset-inline-start: 0;
+    transform: translateX(calc(-1 * (3px + var(--astryx-spacing-1, 4px)) - 6.5px));
+  }
+
+  .astryx-resize-handle[data-direction='horizontal'] > .astryx-resize-handle__hit[data-bias='end'] {
+    inset-inline-start: 0;
+    transform: translateX(calc(1 * (3px + var(--astryx-spacing-1, 4px)) - 6.5px));
+  }
+
+  :is([dir='rtl'] .astryx-resize-handle[data-direction='horizontal'] > .astryx-resize-handle__hit[data-bias='start']) {
+    transform: translateX(calc(-1 * (3px + var(--astryx-spacing-1, 4px)) + 6.5px));
+  }
+
+  :is([dir='rtl'] .astryx-resize-handle[data-direction='horizontal'] > .astryx-resize-handle__hit[data-bias='end']) {
+    transform: translateX(calc(1 * (3px + var(--astryx-spacing-1, 4px)) + 6.5px));
+  }
+
+  .astryx-resize-handle[data-direction='vertical'] > .astryx-resize-handle__hit[data-bias='start'] {
+    inset-block-start: 0;
+    transform: translateY(calc(-1 * (3px + var(--astryx-spacing-1, 4px)) - 6.5px));
+  }
+
+  .astryx-resize-handle[data-direction='vertical'] > .astryx-resize-handle__hit[data-bias='end'] {
+    inset-block-start: 0;
+    transform: translateY(calc(1 * (3px + var(--astryx-spacing-1, 4px)) - 6.5px));
+  }
+
   .astryx-resize-handle-pill {
     position: absolute;
     z-index: 2;

package/styles/scrollbars.css

@@ -0,0 +1,28 @@
+@layer astryx.reset, astryx.tokens, astryx.base, astryx.components, astryx.overrides;
+@import 'overlayscrollbars/overlayscrollbars.css' layer(astryx.base);
+
+@layer astryx.components {
+  .os-scrollbar.os-theme-astryx {
+    --os-size: var(--astryx-scrollbar-size, 10px);
+    --os-padding-perpendicular: 2px;
+    --os-padding-axis: 2px;
+    --os-track-border-radius: var(--astryx-scrollbar-radius, 9999px);
+    --os-track-bg: var(--astryx-scrollbar-track, transparent);
+    --os-handle-border-radius: var(--astryx-scrollbar-radius, 9999px);
+    --os-handle-bg: var(--astryx-scrollbar-thumb, color-mix(in srgb, var(--astryx-color-text-secondary, #737373) 45%, transparent));
+    --os-handle-bg-hover: var(--astryx-scrollbar-thumb-hover, color-mix(in srgb, var(--astryx-color-text-secondary, #737373) 70%, transparent));
+    --os-handle-bg-active: var(--astryx-scrollbar-thumb-hover, color-mix(in srgb, var(--astryx-color-text-secondary, #737373) 70%, transparent));
+    --os-handle-min-size: 32px;
+    --os-handle-interactive-area-offset: 4px;
+    box-sizing: border-box;
+    /* 盖在表格吸顶表头这类 z-index 1~2 的内容上面。 */
+    z-index: 3;
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .os-scrollbar.os-theme-astryx,
+    .os-scrollbar.os-theme-astryx .os-scrollbar-handle {
+      transition: none;
+    }
+  }
+}

package/styles/segmented-control.css

@@ -113,12 +113,20 @@
     forced-color-adjust: none;
   }
 
-  .astryx-segmented-control-item:not([aria-disabled='true']):not([data-selected='true']):hover {
-    background-color: var(--astryx-segmented-control-item-hover-background, light-dark(#0000000d, #ffffff0d));
+  @media (hover: hover) {
+    .astryx-segmented-control-item:not([aria-disabled='true']):not([data-selected='true']):hover {
+      background-color: var(--astryx-segmented-control-item-hover-background, light-dark(#0000000d, #ffffff0d));
+    }
+  }
+
+  @media not all and (pointer: coarse) {
+    .astryx-segmented-control-item:not([aria-disabled='true']):not([data-selected='true']):active {
+      background-color: var(--astryx-segmented-control-item-pressed-background, light-dark(#0000001a, #ffffff1a));
+    }
   }
 
-  .astryx-segmented-control-item:not([aria-disabled='true']):not([data-selected='true']):active {
-    background-color: var(--astryx-segmented-control-item-pressed-background, light-dark(#0000001a, #ffffff1a));
+  .astryx-segmented-control-item[data-astryx-press]:not([aria-disabled='true']):not([data-selected='true']) {
+    background-image: var(--_press-paint-image);
   }
 
   .astryx-segmented-control-item[aria-disabled='true'] {

package/styles/selector.css

@@ -41,7 +41,7 @@
     width: 100%;
     min-width: 0;
     height: var(--astryx-input-height-md, 32px);
-    padding: var(--astryx-spacing-1, 4px) var(--astryx-spacing-2, 8px);
+    padding: var(--astryx-input-padding-block, var(--astryx-spacing-1, 4px)) var(--astryx-input-padding-inline, var(--astryx-spacing-2, 8px));
     border: var(--astryx-border-width, 1px) solid var(--astryx-input-status-color, var(--astryx-input-border, #d4d4d4));
     border-radius: var(--astryx-radius-element, 0.625rem);
     background: var(--astryx-input-background, #fff);
@@ -121,6 +121,58 @@
     box-shadow: none;
   }
 
+  .astryx-selector-field[data-variant='secondary'] {
+    border-width: var(--astryx-button-secondary-border-width, 0);
+    border-style: var(--astryx-button-secondary-border-style, solid);
+    border-color: var(--astryx-button-secondary-border-color, transparent);
+    background-color: var(--astryx-button-secondary-background, #0000000f);
+    box-shadow: none;
+    color: var(--astryx-button-secondary-foreground, #171717);
+    font-weight: var(--astryx-font-weight-medium, 500);
+  }
+
+  @media (hover: hover) {
+    .astryx-selector-field[data-variant='secondary']:hover:not(.is-disabled):not(:focus-within) {
+      background-image: linear-gradient(var(--astryx-button-secondary-hover-overlay, var(--astryx-button-hover-overlay, #0000000d)), var(--astryx-button-secondary-hover-overlay, var(--astryx-button-hover-overlay, #0000000d)));
+      box-shadow: none;
+    }
+  }
+
+  .astryx-selector-field[data-variant='secondary']:focus-within,
+  .astryx-selector-field[data-variant='secondary'].is-open {
+    border-color: var(--astryx-button-secondary-border-color, transparent);
+    box-shadow: none;
+  }
+
+  .astryx-selector-listbox[role='grid'] .astryx-selector-option {
+    display: grid;
+    grid-template-columns: minmax(0, 1fr) auto;
+    align-items: stretch;
+    padding: 0;
+  }
+
+  .astryx-selector-option-main,
+  .astryx-selector-option-action {
+    display: flex;
+    align-items: center;
+    min-width: 0;
+  }
+
+  .astryx-selector-option-main {
+    gap: var(--astryx-spacing-2, 8px);
+    padding: var(--astryx-spacing-2, 8px);
+  }
+
+  .astryx-selector-option-action {
+    justify-content: flex-end;
+    padding-inline-end: var(--astryx-spacing-2, 8px);
+  }
+
+  .astryx-selector-option-action.is-active {
+    outline: var(--astryx-focus-outline-width, 2px) solid var(--astryx-focus-outline-color, currentcolor);
+    outline-offset: -2px;
+  }
+
   .astryx-selector:has(.astryx-selector-value.is-rich) .astryx-selector-field {
     height: auto;
     min-height: var(--astryx-input-height-md, 32px);

package/styles/side-nav.css

@@ -322,6 +322,25 @@
 
   .astryx-side-nav-item { width: 100%; }
 
+  .astryx-side-nav-item__main {
+    display: flex;
+    align-items: center;
+    gap: var(--astryx-spacing-1, 4px);
+    min-width: 0;
+  }
+
+  .astryx-side-nav-item__main > .astryx-nav-item,
+  .astryx-side-nav-item__main > .astryx-side-nav-item {
+    flex: 1 1 auto;
+    min-width: 0;
+  }
+
+  .astryx-side-nav-item__actions {
+    display: inline-flex;
+    flex: none;
+    align-items: center;
+  }
+
   .astryx-side-nav-item__split {
     min-width: 0;
   }

package/styles/slider.css

@@ -41,14 +41,15 @@
     transition: background-color 130ms ease-out;
   }
   .astryx-slider-thumb:dir(rtl) { transform: translate(50%, -50%); }
-  .astryx-slider-thumb:focus-visible:not([data-dragging='true']) {
+  .astryx-slider-thumb[data-keyboard-focus='true']:focus-visible:not([data-dragging='true']) {
     outline: 2px solid var(--astryx-slider-focus, #262626);
     outline-offset: 3px;
     z-index: 2;
   }
   .astryx-slider-thumb[data-dragging='true'] {
     cursor: grabbing;
-    background: color-mix(in srgb, var(--astryx-slider-accent, #262626), var(--astryx-slider-track, #e5e5e5) 20%);
+    background-color: color-mix(in srgb, var(--astryx-slider-accent, #262626), var(--astryx-slider-track, #e5e5e5) 20%);
+    background-image: var(--_press-paint-image);
     z-index: 2;
   }
   @media (hover: hover) {
@@ -106,6 +107,6 @@
     .astryx-slider-fill,
     .astryx-slider-thumb,
     .astryx-slider-mark[data-filled='true'] { background: Highlight; forced-color-adjust: none; }
-    .astryx-slider-thumb:focus-visible { outline-color: Highlight; }
+    .astryx-slider-thumb[data-keyboard-focus='true']:focus-visible { outline-color: Highlight; }
   }
 }

package/styles/spinner.css

@@ -1,125 +1,131 @@
 @layer astryx.reset, astryx.tokens, astryx.base, astryx.components, astryx.overrides;
 
-@keyframes astryx-spinner-rotate {
+@keyframes astryx-spinner-dash {
   from {
-    transform: rotate(0deg);
+    stroke-dashoffset: 0;
   }
 
   to {
-    transform: rotate(360deg);
+    stroke-dashoffset: calc(var(--_spinner-ring-diameter) * -3.141592653589793);
   }
 }
 
 @layer astryx.components {
+  .astryx-spinner {
+    --astryx-spinner-diameter: var(--astryx-spinner-diameter-md, 14px);
+    --astryx-spinner-stroke-width: var(--astryx-spinner-stroke-width-md, 3px);
+    --astryx-spinner-color: var(--astryx-spinner-color-accent, var(--astryx-color-accent, #262626));
+    --astryx-spinner-track-color: var(--astryx-spinner-color-track, var(--astryx-color-track, #ccd3db));
+    --astryx-spinner-arc-fraction: 0.375;
+    --_spinner-track-opacity: 1;
+    --_spinner-ring-diameter: var(--astryx-spinner-diameter);
+    --_spinner-ring-stroke: var(--astryx-spinner-stroke-width);
+    --_spinner-box-size: calc(var(--_spinner-ring-diameter) + var(--_spinner-ring-stroke) * 2);
+  }
+
   .astryx-spinner-group {
     box-sizing: border-box;
     display: inline-flex;
     flex-direction: column;
     align-items: center;
-    gap: var(--astryx-spinner-group-gap, 8px);
+    gap: var(--astryx-spinner-group-gap, var(--astryx-spacing-2, 8px));
   }
 
   .astryx-spinner-label {
-    color: var(--astryx-spinner-label-color, #171717);
+    color: var(--astryx-spinner-label-color, var(--astryx-color-text-primary, #171717));
     font-size: var(--astryx-text-body-size, 0.875rem);
     font-weight: var(--astryx-font-weight-bold, 700);
     line-height: var(--astryx-text-body-leading, 1.4286);
   }
 
-  .astryx-spinner {
-    --_spinner-diameter: var(--astryx-spinner-diameter-md, 14px);
-    --_spinner-stroke: var(--astryx-spinner-stroke-width-md, 3px);
-    --_spinner-color: var(--astryx-spinner-color-accent, #262626);
-    --_spinner-track: var(--astryx-spinner-color-track, #ccd3db);
-    --_spinner-track-opacity: 1;
-    --_spinner-arc-fraction: var(--astryx-spinner-arc-fraction, 0.375);
-
+  .astryx-spinner-box {
     box-sizing: content-box;
     display: inline-grid;
     flex-shrink: 0;
     place-items: center;
     vertical-align: middle;
-    width: calc(var(--_spinner-diameter) + var(--_spinner-stroke) * 2);
-    height: calc(var(--_spinner-diameter) + var(--_spinner-stroke) * 2);
-    animation: astryx-spinner-rotate var(--astryx-duration-slow-min, 525ms) linear infinite;
   }
 
   .astryx-spinner[data-size='sm'] {
-    --_spinner-diameter: var(--astryx-spinner-diameter-sm, 10px);
-    --_spinner-stroke: var(--astryx-spinner-stroke-width-sm, 2px);
+    --astryx-spinner-diameter: var(--astryx-spinner-diameter-sm, 10px);
+    --astryx-spinner-stroke-width: var(--astryx-spinner-stroke-width-sm, 2px);
   }
 
   .astryx-spinner[data-size='md'] {
-    --_spinner-diameter: var(--astryx-spinner-diameter-md, 14px);
-    --_spinner-stroke: var(--astryx-spinner-stroke-width-md, 3px);
+    --astryx-spinner-diameter: var(--astryx-spinner-diameter-md, 14px);
+    --astryx-spinner-stroke-width: var(--astryx-spinner-stroke-width-md, 3px);
   }
 
   .astryx-spinner[data-size='lg'] {
-    --_spinner-diameter: var(--astryx-spinner-diameter-lg, 18px);
-    --_spinner-stroke: var(--astryx-spinner-stroke-width-lg, 3px);
+    --astryx-spinner-diameter: var(--astryx-spinner-diameter-lg, 18px);
+    --astryx-spinner-stroke-width: var(--astryx-spinner-stroke-width-lg, 3px);
   }
 
   .astryx-spinner[data-size='xl'] {
-    --_spinner-diameter: var(--astryx-spinner-diameter-xl, 28px);
-    --_spinner-stroke: var(--astryx-spinner-stroke-width-xl, 4px);
+    --astryx-spinner-diameter: var(--astryx-spinner-diameter-xl, 28px);
+    --astryx-spinner-stroke-width: var(--astryx-spinner-stroke-width-xl, 4px);
   }
 
   .astryx-spinner[data-shade='default'] {
-    --_spinner-color: var(--astryx-spinner-color-accent, #262626);
-    --_spinner-track: var(--astryx-spinner-color-track, #ccd3db);
+    --astryx-spinner-color: var(--astryx-spinner-color-accent, var(--astryx-color-accent, #262626));
+    --astryx-spinner-track-color: var(--astryx-spinner-color-track, var(--astryx-color-track, #ccd3db));
     --_spinner-track-opacity: 1;
   }
 
   .astryx-spinner[data-shade='subtle'] {
-    --_spinner-color: var(--astryx-spinner-color-subtle, #525252);
-    --_spinner-track: var(--astryx-spinner-color-track, #ccd3db);
+    --astryx-spinner-color: var(--astryx-spinner-color-subtle, var(--astryx-color-text-secondary, #525252));
+    --astryx-spinner-track-color: var(--astryx-spinner-color-track, var(--astryx-color-track, #ccd3db));
     --_spinner-track-opacity: 1;
   }
 
   .astryx-spinner[data-shade='onMedia'] {
-    --_spinner-color: var(--astryx-spinner-color-on-dark, #fff);
-    --_spinner-track: var(--astryx-spinner-color-on-dark, #fff);
-    --_spinner-track-opacity: 0.3;
+    --astryx-spinner-color: var(--astryx-spinner-color-on-dark, var(--astryx-color-on-dark, #fff));
+    --astryx-spinner-track-color: var(--astryx-spinner-color-on-dark, var(--astryx-color-on-dark, #fff));
+    --_spinner-track-opacity: calc(77 / 255);
   }
 
   .astryx-spinner[data-shade='inherit'] {
-    --_spinner-color: currentcolor;
-    --_spinner-track: currentcolor;
+    --astryx-spinner-color: currentcolor;
+    --astryx-spinner-track-color: currentcolor;
     --_spinner-track-opacity: 0.3;
   }
 
   .astryx-spinner__ring {
     display: block;
-    width: calc(var(--_spinner-diameter) + var(--_spinner-stroke) * 2);
-    height: calc(var(--_spinner-diameter) + var(--_spinner-stroke) * 2);
+    width: var(--_spinner-box-size, 100%);
+    height: var(--_spinner-box-size, 100%);
     overflow: visible;
   }
 
   .astryx-spinner__track,
   .astryx-spinner__arc {
     fill: none;
-    r: calc(var(--_spinner-diameter) / 2);
-    stroke-width: var(--_spinner-stroke);
+    r: calc(var(--_spinner-ring-diameter) / 2);
+    stroke-width: var(--_spinner-ring-stroke);
     stroke-linecap: round;
     transform-box: fill-box;
     transform-origin: center;
   }
 
   .astryx-spinner__track {
-    stroke: var(--_spinner-track);
+    stroke: var(--astryx-spinner-track-color);
     stroke-opacity: var(--_spinner-track-opacity);
   }
 
   .astryx-spinner__arc {
-    stroke: var(--_spinner-color);
+    stroke: var(--astryx-spinner-color);
     transform: rotate(-90deg);
     stroke-dasharray:
-      calc(var(--_spinner-diameter) * 3.14159265 * var(--_spinner-arc-fraction))
-      calc(var(--_spinner-diameter) * 3.14159265 * (1 - var(--_spinner-arc-fraction)));
+      calc(var(--_spinner-ring-diameter) * 3.141592653589793 * var(--astryx-spinner-arc-fraction))
+      calc(var(--_spinner-ring-diameter) * 3.141592653589793 * (1 - var(--astryx-spinner-arc-fraction)));
+    animation-name: astryx-spinner-dash;
+    animation-duration: var(--astryx-duration-slow-min, 525ms);
+    animation-timing-function: linear;
+    animation-iteration-count: infinite;
   }
 
   @media (prefers-reduced-motion: reduce) {
-    .astryx-spinner {
+    .astryx-spinner__arc {
       animation-duration: 3s;
     }
   }