@astryx-vue/core 0.2.6 → 0.4.0

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,

package/styles/table.css

@@ -2,7 +2,6 @@
 
 @layer astryx.components {
   .astryx-table-scroll {
-    overflow-x: auto;
     -webkit-overflow-scrolling: touch;
     margin-inline-start: calc(-1 * var(--container-padding-inline-start, 0px));
     margin-inline-end: calc(-1 * var(--container-padding-inline-end, 0px));
@@ -167,6 +166,10 @@
     cursor: pointer;
   }
 
+  .astryx-table__sort:is(:disabled, [aria-disabled='true']) {
+    cursor: default;
+  }
+
   .astryx-table__sort[data-align='center'] {
     justify-content: center;
   }
@@ -207,16 +210,38 @@
     min-width: 0;
   }
 
+  /*
+   * 有筛选按钮时，排序按钮只占自己的宽度，标题、排序箭头、漏斗紧挨着排，
+   * 整行再按列的对齐方向放。没有筛选按钮时排序按钮照旧铺满整格，点哪都能排序。
+   */
   .astryx-table__header-line > .astryx-table__sort {
     flex: 1;
     min-width: 0;
   }
 
+  .astryx-table__header-line:has(> .astryx-table__filter) > .astryx-table__sort {
+    flex: 0 1 auto;
+    width: auto;
+  }
+
+  /* 列对齐也要管到这一行：没有排序按钮的列，靠 justify-content 把标题和筛选按钮推到位。 */
+  .astryx-table thead th[data-align='center'] .astryx-table__header-line {
+    justify-content: center;
+  }
+
+  .astryx-table thead th[data-align='end'] .astryx-table__header-line {
+    justify-content: flex-end;
+  }
+
   .astryx-table :where(thead th) {
     /* 拖动把手贴在表头的行末，需要一个定位上下文。固定列的 inline 样式会盖过它。 */
     position: relative;
   }
 
+  .astryx-table thead tr {
+    --resize-hint: transparent;
+  }
+
   .astryx-table__resize {
     position: absolute;
     top: 0;
@@ -226,6 +251,11 @@
     cursor: col-resize;
     touch-action: none;
     border-radius: var(--astryx-radius-inner, 0.375rem);
+    --indicator-color: var(--resize-hint, transparent);
+  }
+
+  .astryx-table__resize:is(:disabled, [aria-disabled='true']) {
+    cursor: default;
   }
 
   .astryx-table__resize::after {
@@ -235,18 +265,22 @@
     inset-inline-end: 2px;
     width: 2px;
     height: 100%;
-    background-color: transparent;
+    background-color: var(--indicator-color);
   }
 
   @media (hover: hover) {
-    .astryx-table__resize:hover::after {
-      background-color: var(--astryx-color-border-strong, light-dark(#a3a3a3, #525252));
+    .astryx-table thead tr:hover {
+      --resize-hint: var(--astryx-color-border-strong, light-dark(#a3a3a3, #525252));
+    }
+
+    .astryx-table__resize:hover:where(:not(:disabled, [aria-disabled='true'])) {
+      --indicator-color: var(--astryx-color-accent, light-dark(#0064e0, #4d9bff));
     }
   }
 
-  .astryx-table__resize[data-resizing='true']::after,
-  .astryx-table__resize:focus-visible::after {
-    background-color: var(--astryx-color-accent, light-dark(#0064e0, #4d9bff));
+  .astryx-table__resize[data-resizing='true'],
+  .astryx-table__resize:focus-visible {
+    --indicator-color: var(--astryx-color-accent, light-dark(#0064e0, #4d9bff));
   }
 
   .astryx-table__resize:focus-visible {
@@ -269,6 +303,41 @@
     min-width: 0;
   }
 
+  /* 漏斗按钮和标题同一行：不参与压缩，也不挤掉标题。 */
+  .astryx-table__filter[data-variant='popover'] {
+    display: flex;
+    flex: none;
+    align-items: center;
+  }
+
+  /* 漏斗按钮只有图标那么大，窄列里也能和标题、排序箭头排在一行。 */
+  .astryx-table__filter-trigger {
+    display: inline-flex;
+    flex-shrink: 0;
+    align-items: center;
+    justify-content: center;
+    margin: 0;
+    padding: 0;
+    border: 0;
+    border-radius: var(--astryx-radius-element, 0.625rem);
+    background: transparent;
+    color: inherit;
+    cursor: pointer;
+  }
+
+  .astryx-table__filter-trigger:focus-visible {
+    outline: var(--astryx-focus-outline-width, 2px) var(--astryx-focus-outline-style, solid) var(--astryx-focus-outline-color, currentcolor);
+    outline-offset: 2px;
+  }
+
+  /* 粗指针设备上点击区至少 44px。 */
+  @media (pointer: coarse) {
+    .astryx-table__filter-trigger {
+      min-width: 44px;
+      min-height: 44px;
+    }
+  }
+
   /* 行内紧凑档：控件离表头更近，占的高度更小。 */
   .astryx-table__filter[data-variant='inline-compact'] {
     margin-block-start: calc(-1 * var(--astryx-spacing-1, 4px));
@@ -333,6 +402,10 @@
     cursor: pointer;
   }
 
+  .astryx-table__clickable:is(:disabled, [aria-disabled='true']) {
+    cursor: default;
+  }
+
   .astryx-table tr[data-group-header] {
     cursor: pointer;
     user-select: none;
@@ -385,6 +458,11 @@
     cursor: pointer;
   }
 
+  .astryx-table__group-chevron:is(:disabled, [aria-disabled='true']),
+  .astryx-table__expander:is(:disabled, [aria-disabled='true']) {
+    cursor: default;
+  }
+
   .astryx-table__group-chevron {
     color: var(--astryx-color-icon-secondary, light-dark(#737373, #a3a3a3));
   }
@@ -397,12 +475,12 @@
   }
 
   @media (hover: hover) {
-    .astryx-table__group-chevron:hover,
-    .astryx-table__expander:hover {
+    .astryx-table__group-chevron:hover:where(:not(:disabled, [aria-disabled='true'])),
+    .astryx-table__expander:hover:where(:not(:disabled, [aria-disabled='true'])) {
       color: var(--astryx-color-icon-primary, light-dark(#171717, #fafafa));
     }
 
-    .astryx-table__expander:hover {
+    .astryx-table__expander:hover:where(:not(:disabled, [aria-disabled='true'])) {
       background-image: linear-gradient(var(--astryx-color-overlay-hover, light-dark(#0000000d, #ffffff0d)), var(--astryx-color-overlay-hover, light-dark(#0000000d, #ffffff0d)));
     }
   }

package/styles/text-area.css

@@ -10,7 +10,7 @@
     gap: var(--astryx-spacing-2, 8px);
     min-width: 0;
     min-height: var(--astryx-text-area-min-height-md, 80px);
-    padding: var(--astryx-spacing-2, 8px);
+    padding: var(--astryx-input-padding-block, var(--astryx-spacing-2, 8px)) var(--astryx-input-padding-inline, var(--astryx-spacing-2, 8px));
     border: 1px solid var(--astryx-input-status-color, var(--astryx-input-border, #d4d4d4));
     border-radius: var(--astryx-radius-element, 0.625rem);
     color: var(--astryx-color-text-primary, #171717);

package/styles/text-input.css

@@ -10,7 +10,7 @@
     gap: var(--astryx-spacing-2, 8px);
     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: 1px solid var(--astryx-input-status-color, var(--astryx-input-border, #d4d4d4));
     border-radius: var(--astryx-radius-element, 0.625rem);
     color: var(--astryx-color-text-primary, #171717);

package/styles/text.css

@@ -59,20 +59,20 @@
 
   .astryx-text--type-display-1 {
     font-size: var(--astryx-text-display-1-size, 3rem);
-    font-weight: var(--astryx-text-display-weight, 300);
-    line-height: 1.1;
+    font-weight: var(--astryx-text-display-weight, var(--astryx-text-display-1-weight, 300));
+    line-height: var(--astryx-text-display-1-leading, 1.1);
   }
 
   .astryx-text--type-display-2 {
     font-size: var(--astryx-text-display-2-size, 2.25rem);
-    font-weight: var(--astryx-text-display-weight, 300);
-    line-height: 1.15;
+    font-weight: var(--astryx-text-display-weight, var(--astryx-text-display-2-weight, 300));
+    line-height: var(--astryx-text-display-2-leading, 1.15);
   }
 
   .astryx-text--type-display-3 {
     font-size: var(--astryx-text-display-3-size, 1.75rem);
-    font-weight: var(--astryx-text-display-weight, 300);
-    line-height: 1.2;
+    font-weight: var(--astryx-text-display-weight, var(--astryx-text-display-3-weight, 300));
+    line-height: var(--astryx-text-display-3-leading, 1.2);
   }
 
   .astryx-text--color-primary {

package/styles/thumbnail.css

@@ -88,9 +88,17 @@
     }
   }
 
-  .astryx-thumbnail__open:active::after,
-  .astryx-thumbnail__frame[data-interactive='true']:active::after {
-    background-color: var(--astryx-color-overlay-pressed, light-dark(#0000001a, #ffffff1a));
+  @media not all and (pointer: coarse) {
+    .astryx-thumbnail__open:active::after,
+    .astryx-thumbnail__frame[data-interactive='true']:active::after {
+      background-color: var(--astryx-color-overlay-pressed, light-dark(#0000001a, #ffffff1a));
+    }
+  }
+
+  .astryx-thumbnail__open[data-astryx-press]::after {
+    background-color: transparent;
+    background-image: var(--_press-paint-image);
+    transition-duration: 0s;
   }
 
   .astryx-thumbnail__loading {

package/styles/time-input.css

@@ -89,4 +89,12 @@
   .astryx-time-input-option:hover {
     background: var(--astryx-dropdown-menu-hover-background, light-dark(#0536590c, #ffffff0c));
   }
+
+  @media (pointer: coarse) {
+    @supports (-webkit-touch-callout: none) {
+      .astryx-time-input-control {
+        font-size: max(1rem, var(--astryx-text-body-size, 14px));
+      }
+    }
+  }
 }

package/styles/toast.css

@@ -12,15 +12,42 @@
     box-sizing: border-box;
     width: auto;
     margin: 0;
+    /* 先把浏览器给 popover 的默认外边距式 inset 清掉，再由下面的定位类定边。 */
+    inset: auto;
     inset-inline: 0;
+    /* popover="manual" 让视口进顶层，浏览器同时会给一份弹窗默认样式，这里清掉。 */
+    border: 0;
+    background: transparent;
+    color: inherit;
+    overflow: visible;
     padding: var(--astryx-spacing-4, 16px);
     pointer-events: none;
+    /* 行和卡片的过渡都读这一份，搬视口时的等待时间和它对得上。 */
+    --astryx-toast-motion-duration: var(--astryx-duration-fast-max, 165ms);
   }
 
   .astryx-toast-viewport > * {
     pointer-events: auto;
   }
 
+  /* 视口搬进/搬出模态对话框时，节点等于重新插入文档，浏览器会把 `@starting-style`
+     里的进场动画重放一遍：toast 会在原来的位置上下一跳。搬的这一帧先关掉过渡。 */
+  .astryx-toast-viewport--rehosting,
+  .astryx-toast-viewport--rehosting * {
+    transition-property: none;
+  }
+
+  /* 搬的这一下不要让「刚进来」的起始值生效：起始值一恢复就成了动画的起点，
+     toast 会从 8px 下方滑上来，看上去就是位置跳了一下。 */
+  .astryx-toast-viewport--rehosting .astryx-toast-viewport__row {
+    grid-template-rows: 1fr;
+  }
+
+  .astryx-toast-viewport--rehosting .astryx-toast:not(.astryx-toast--exiting) {
+    opacity: 1;
+    transform: none;
+  }
+
   .astryx-toast-viewport--placement-top-start,
   .astryx-toast-viewport--placement-top-center,
   .astryx-toast-viewport--placement-top-end {
@@ -59,7 +86,7 @@
     min-width: 0;
     padding-block-end: var(--astryx-spacing-2, 8px);
     transition-property: grid-template-rows, padding;
-    transition-duration: var(--astryx-duration-fast-max, 165ms);
+    transition-duration: var(--astryx-toast-motion-duration, 165ms);
     transition-timing-function: var(--astryx-ease-standard, cubic-bezier(0.24, 1, 0.4, 1));
 
     @starting-style {
@@ -119,9 +146,11 @@
     box-shadow: 0 4px 24px rgb(0 0 0 / 16%);
     font-size: var(--astryx-text-body-size, 0.875rem);
     line-height: var(--astryx-text-body-leading, 1.4286);
+    opacity: var(--_toast-swipe-opacity, 1);
     transition-property: opacity, transform;
-    transition-duration: var(--astryx-duration-fast-max, 165ms);
+    transition-duration: var(--astryx-toast-motion-duration, 165ms);
     transition-timing-function: var(--astryx-ease-standard, cubic-bezier(0.24, 1, 0.4, 1));
+    transform: translateY(var(--_toast-swipe-y, 0px)) scale(var(--_toast-swipe-scale, 1));
 
     @starting-style {
       opacity: 0;
@@ -131,7 +160,7 @@
 
   .astryx-toast--exiting {
     opacity: 0;
-    transform: translateY(var(--astryx-toast-slide-y, var(--astryx-spacing-2, 8px)));
+    transform: translateY(var(--_toast-swipe-exit-y, var(--astryx-toast-slide-y, var(--astryx-spacing-2, 8px)))) scale(var(--_toast-swipe-scale, 1));
   }
 
   .astryx-toast--type-success {
@@ -149,6 +178,11 @@
     color: var(--astryx-toast-type-foreground, #fff);
   }
 
+  /* 量到卡片底色后再选深浅，自己不占一层盒子，里面的按钮仍按卡片排成一行。 */
+  .astryx-toast__surface {
+    display: contents;
+  }
+
   .astryx-toast__body {
     flex: 1;
     min-width: 0;

package/styles/token.css

@@ -149,13 +149,13 @@
   }
 
   .astryx-token.is-disabled {
-    cursor: not-allowed;
+    cursor: default;
     opacity: 0.5;
   }
 
   .astryx-token.is-disabled .astryx-token-action,
   .astryx-token.is-disabled .astryx-token-remove {
-    cursor: not-allowed;
+    cursor: default;
   }
 
   @media (prefers-reduced-motion: reduce) {

package/styles/tokenizer.css

@@ -18,7 +18,7 @@
     width: 100%;
     min-width: 0;
     min-height: var(--astryx-input-height-md, 32px);
-    padding: var(--astryx-spacing-1, 4px);
+    padding: var(--astryx-input-padding-block, var(--astryx-spacing-1, 4px)) var(--astryx-input-padding-inline, var(--astryx-spacing-1, 4px));
     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);