@astryx-vue/core 0.3.0 → 0.4.0

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/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;
     }
   }

package/styles/stepper.css

@@ -5,6 +5,14 @@
     width: 100%;
   }
 
+  .astryx-stepper-frame {
+    --astryx-step-connector-gap: 0px;
+  }
+
+  .astryx-stepper {
+    --astryx-step-connector-gap: inherit;
+  }
+
   .astryx-stepper-root[data-collapsed] {
     display: flex;
     flex-direction: column;
@@ -57,6 +65,14 @@
     gap: var(--astryx-spacing-2, 8px);
   }
 
+  /* 控件和内容合成一列：竖向流程里内容落在标签下面，而不是被排到标签右边。 */
+  .astryx-step-body {
+    display: flex;
+    flex: 1 1 auto;
+    flex-direction: column;
+    min-width: 0;
+  }
+
   .astryx-step[data-density='compact'] { --_step-space: var(--astryx-spacing-1, 4px); }
   .astryx-step[data-density='balanced'] { --_step-space: var(--astryx-spacing-2, 8px); }
   .astryx-step[data-density='spacious'] { --_step-space: var(--astryx-spacing-3, 12px); }
@@ -108,11 +124,36 @@
   }
 
   .astryx-step-connector {
+    --_step-connector-gap: max(0px, min(var(--astryx-step-connector-gap, 0px), var(--astryx-spacing-2, 8px)));
     flex: 1 1 auto;
     min-width: var(--astryx-spacing-2, 8px);
     border-radius: 0;
   }
 
+  .astryx-step[data-orientation='vertical'][data-indicator-position='on-track']:not([data-glyph='none']) .astryx-step-connector-lead {
+    clip-path: inset(0 0 var(--_step-connector-gap) 0);
+  }
+
+  .astryx-step[data-orientation='vertical'][data-indicator-position='on-track']:not([data-glyph='none']) .astryx-step-connector-trail {
+    clip-path: inset(var(--_step-connector-gap) 0 0 0);
+  }
+
+  .astryx-step[data-orientation='horizontal'][data-indicator-position='on-track']:not([data-glyph='none']) .astryx-step-connector-lead {
+    clip-path: inset(0 var(--_step-connector-gap) 0 0);
+  }
+
+  .astryx-step[data-orientation='horizontal'][data-indicator-position='on-track']:not([data-glyph='none']) .astryx-step-connector-trail {
+    clip-path: inset(0 0 0 var(--_step-connector-gap));
+  }
+
+  :is([dir='rtl'] .astryx-step[data-orientation='horizontal'][data-indicator-position='on-track']:not([data-glyph='none'])) .astryx-step-connector-lead {
+    clip-path: inset(0 0 0 var(--_step-connector-gap));
+  }
+
+  :is([dir='rtl'] .astryx-step[data-orientation='horizontal'][data-indicator-position='on-track']:not([data-glyph='none'])) .astryx-step-connector-trail {
+    clip-path: inset(0 var(--_step-connector-gap) 0 0);
+  }
+
   .astryx-step[data-orientation='horizontal'] .astryx-step-connector {
     height: var(--astryx-spacing-1, 4px);
   }
@@ -150,13 +191,21 @@
   }
 
   @media (hover: hover) {
-    button.astryx-step-control:hover {
+    button.astryx-step-control:where(:not(:disabled, [aria-disabled='true'])):hover {
       background: var(--astryx-color-overlay-hover, light-dark(#0536590c, #ffffff0c));
     }
   }
 
-  button.astryx-step-control:active {
-    background: var(--astryx-color-overlay-pressed, light-dark(#05365919, #ffffff19));
+  @media not all and (pointer: coarse) {
+    button.astryx-step-control:where(:not(:disabled, [aria-disabled='true'])):active {
+      background: var(--astryx-color-overlay-pressed, light-dark(#05365919, #ffffff19));
+    }
+  }
+
+  button.astryx-step-control[data-astryx-press='on'],
+  button.astryx-step-control[data-astryx-press='fading'] {
+    background-color: transparent;
+    background-image: var(--_press-paint-image);
   }
 
   button.astryx-step-control:focus-visible {
@@ -255,6 +304,11 @@
     padding-block-start: var(--astryx-spacing-2, 8px);
   }
 
+  /* 竖向的内容跟标签左对齐：缩进 = 控件内边距 + 指示点宽度和间距。 */
+  .astryx-step[data-orientation='vertical'] .astryx-step-content {
+    padding-inline: calc(var(--_step-space) + var(--astryx-spacing-4, 16px) + var(--astryx-spacing-2, 8px)) var(--_step-space);
+  }
+
   .astryx-step[data-orientation='horizontal'][data-indicator-position='separated'] .astryx-step-control {
     align-items: center;
   }
@@ -340,7 +394,7 @@
 
   .astryx-stepper-nav:disabled {
     opacity: 0.4;
-    cursor: not-allowed;
+    cursor: default;
   }
 
   @container astryx-stepper (max-width: 480px) {

package/styles/switch.css

@@ -58,6 +58,32 @@
     cursor: default;
   }
 
+  @media not all and (pointer: coarse) {
+    .astryx-switch:not([data-blocked='true']) .astryx-switch-row:active .astryx-switch-track,
+    .astryx-switch:not([data-blocked='true']) .astryx-switch-row:active .astryx-switch-thumb {
+      background-image: linear-gradient(var(--astryx-color-overlay-pressed, light-dark(#05365919, #ffffff19)), var(--astryx-color-overlay-pressed, light-dark(#05365919, #ffffff19)));
+    }
+  }
+
+  .astryx-switch-row[data-astryx-press] .astryx-switch-track,
+  .astryx-switch-row[data-astryx-press] .astryx-switch-thumb {
+    background-image: var(--_press-paint-image);
+  }
+
+  @media (pointer: coarse) {
+    .astryx-switch-control {
+      min-width: 24px;
+      min-height: 24px;
+    }
+
+    .astryx-switch-native {
+      inset: 50% auto auto 50%;
+      width: max(100%, 24px);
+      height: max(100%, 24px);
+      transform: translate(-50%, -50%);
+    }
+  }
+
   .astryx-switch-track {
     box-sizing: border-box;
     position: relative;

package/styles/tab-list.css

@@ -21,11 +21,129 @@
     padding: 0;
   }
 
+  /*
+   * 滚动容器在内边距盒处裁切，而焦点环和选中下划线都画在标签自己的盒子外面。
+   * 条用同样大小的内边距撑出去、再用负外边距收回来，什么都不会被裁，标签也不挪位。
+   * 焦点环那一份只在条里真的画着焦点环时才留，平时条和 TabList 一样大。
+   */
+  .astryx-tab-list__strip--scroll {
+    --_tab-strip-bleed: 0px;
+    --_tab-strip-edge-inset: calc(var(--_tab-strip-bleed) + var(--astryx-spacing-8, 32px));
+    --_tab-strip-block-end-bleed: max(var(--_tab-strip-bleed), calc(-1 * var(--_tab-indicator-bottom, 0px)));
+    align-self: flex-start;
+    overflow-x: auto;
+    overflow-y: hidden;
+    overscroll-behavior-x: contain;
+    scroll-behavior: smooth;
+    scroll-padding-inline: var(--_tab-strip-edge-inset);
+    scrollbar-width: none;
+    padding-block: var(--_tab-strip-bleed) var(--_tab-strip-block-end-bleed);
+    margin-block: calc(-1 * var(--_tab-strip-bleed)) calc(-1 * var(--_tab-strip-block-end-bleed));
+    padding-inline: var(--_tab-strip-bleed);
+    margin-inline: calc(-1 * var(--_tab-strip-bleed));
+    mask-image: none;
+    transition: mask-image var(--astryx-duration-medium, 240ms) var(--astryx-ease-standard, cubic-bezier(0.24, 1, 0.4, 1));
+  }
+
+  .astryx-tab-list__strip--scroll:has(:focus-visible) {
+    --_tab-strip-bleed: 4px;
+  }
+
+  .astryx-tab-list__strip--scroll::-webkit-scrollbar {
+    display: none;
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .astryx-tab-list__strip--scroll {
+      scroll-behavior: auto;
+      transition-duration: 0ms;
+    }
+  }
+
+  /* 渐隐在条自己的边上就到透明，不画到血边外面，也不压到箭头底下。 */
+  .astryx-tab-list__strip--fade-start {
+    mask-image: linear-gradient(to right, transparent var(--_tab-strip-bleed), #000 var(--_tab-strip-edge-inset));
+  }
+
+  .astryx-tab-list__strip--fade-end {
+    mask-image: linear-gradient(to left, transparent var(--_tab-strip-bleed), #000 var(--_tab-strip-edge-inset));
+  }
+
+  [dir='rtl'] .astryx-tab-list__strip--fade-start {
+    mask-image: linear-gradient(to left, transparent var(--_tab-strip-bleed), #000 var(--_tab-strip-edge-inset));
+  }
+
+  [dir='rtl'] .astryx-tab-list__strip--fade-end {
+    mask-image: linear-gradient(to right, transparent var(--_tab-strip-bleed), #000 var(--_tab-strip-edge-inset));
+  }
+
+  .astryx-tab-list__strip--fade-both {
+    mask-image: linear-gradient(
+      to right,
+      transparent var(--_tab-strip-bleed),
+      #000 var(--_tab-strip-edge-inset),
+      #000 calc(100% - var(--_tab-strip-edge-inset)),
+      transparent calc(100% - var(--_tab-strip-bleed))
+    );
+  }
+
+  /* 箭头只给能悬停的指针用。键盘和读屏用方向键走，焦点项会自己滚进来。 */
+  .astryx-tab-scroll-button {
+    position: absolute;
+    z-index: 1;
+    inset-block-start: 0;
+    display: none;
+    align-items: center;
+    justify-content: center;
+    width: var(--astryx-size-element-md, 32px);
+    height: var(--astryx-size-element-md, 32px);
+    padding: 0;
+    border: 0;
+    border-radius: 9999px;
+    background-color: var(--astryx-color-background-popover, light-dark(#fff, #262626));
+    box-shadow: var(--astryx-shadow-low, 0 1px 2px #0000001f);
+    color: var(--astryx-color-text-secondary, #525252);
+    cursor: pointer;
+  }
+
+  @media (hover: hover) {
+    .astryx-tab-scroll-button {
+      display: inline-flex;
+    }
+
+    .astryx-tab-scroll-button:hover {
+      color: var(--astryx-color-text-primary, #171717);
+    }
+  }
+
+  .astryx-tab-list--size-sm .astryx-tab-scroll-button {
+    width: var(--astryx-size-element-sm, 28px);
+    height: var(--astryx-size-element-sm, 28px);
+  }
+
+  .astryx-tab-list--size-lg .astryx-tab-scroll-button {
+    width: var(--astryx-size-element-lg, 36px);
+    height: var(--astryx-size-element-lg, 36px);
+  }
+
+  .astryx-tab-scroll-button--start { inset-inline-start: 0; }
+  .astryx-tab-scroll-button--end { inset-inline-end: 0; }
+
+  .astryx-tab-scroll-button:focus-visible {
+    outline: 2px solid var(--astryx-color-text-primary, #171717);
+    outline-offset: 2px;
+  }
+
+  [dir='rtl'] .astryx-tab-scroll-button__icon {
+    transform: scaleX(-1);
+  }
+
   .astryx-tab-list--layout-fill .astryx-tab-list__strip {
     width: 100%;
   }
 
   .astryx-tab-list--has-divider {
+    --_tab-indicator-bottom: calc(-1 * var(--astryx-spacing-1, 4px));
     border-bottom: var(--astryx-border-width, 1px) solid var(--astryx-color-border-emphasized, #d4d4d4);
     padding-bottom: var(--astryx-spacing-1, 4px);
   }
@@ -41,8 +159,8 @@
   }
 
   .astryx-tab-list--full-bleed .astryx-tab-list__strip {
-    padding-inline-start: max(var(--container-padding-inline-start, 0px) - var(--astryx-spacing-3, 12px), 0px);
-    padding-inline-end: max(var(--container-padding-inline-end, 0px) - var(--astryx-spacing-3, 12px), 0px);
+    padding-inline-start: calc(var(--_tab-strip-bleed, 0px) + max(var(--container-padding-inline-start, 0px) - var(--astryx-spacing-3, 12px), 0px));
+    padding-inline-end: calc(var(--_tab-strip-bleed, 0px) + max(var(--container-padding-inline-end, 0px) - var(--astryx-spacing-3, 12px), 0px));
   }
 
   .astryx-tab {
@@ -88,6 +206,17 @@
     background-color: color-mix(in srgb, currentColor 6%, transparent);
   }
 
+  /* 鼠标按下才用 :active。粗指针改看按压模型写的 data-astryx-press，滚动时不会误亮。 */
+  @media not all and (pointer: coarse) {
+    .astryx-tab:active:not(:disabled, [aria-disabled='true']) {
+      background-color: var(--astryx-color-overlay-pressed, color-mix(in srgb, currentColor 12%, transparent));
+    }
+  }
+
+  .astryx-tab[data-astryx-press]:not(:disabled, [aria-disabled='true']) {
+    background-image: var(--_press-paint-image);
+  }
+
   .astryx-tab--selected {
     color: var(--astryx-color-text-primary, #171717);
     font-weight: var(--astryx-font-weight-semibold, 600);
@@ -105,7 +234,7 @@
   }
 
   .astryx-tab-list--has-divider .astryx-tab--selected::after {
-    bottom: calc(-1 * var(--astryx-spacing-1, 4px));
+    bottom: var(--_tab-indicator-bottom);
   }
 
   .astryx-tab:disabled,