@astryx-vue/core 0.3.0 → 0.4.1

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));
@@ -24,7 +23,6 @@
     color: var(--astryx-color-text-primary, light-dark(#171717, #fafafa));
     font-family: inherit;
     font-size: var(--astryx-text-body-size, 1rem);
-    line-height: var(--astryx-text-body-leading, 1.4286);
   }
 
   .astryx-table :is(th, td) {
@@ -167,6 +165,10 @@
     cursor: pointer;
   }
 
+  .astryx-table__sort:is(:disabled, [aria-disabled='true']) {
+    cursor: default;
+  }
+
   .astryx-table__sort[data-align='center'] {
     justify-content: center;
   }
@@ -207,16 +209,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 +250,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 +264,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 +302,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 +401,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 +457,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 +474,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);
@@ -27,6 +27,12 @@
     color: var(--astryx-color-text-secondary, #525252);
   }
 
+  .astryx-text-area-count {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--astryx-spacing-1, 4px);
+  }
+
   .astryx-text-area-count[data-over='true'] {
     color: var(--astryx-input-error, #e33f4a);
   }

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

package/styles/toolbar.css

@@ -58,7 +58,10 @@
     min-width: 0;
   }
 
-  .astryx-toolbar__slot--center { justify-content: center; overflow: hidden; }
+  .astryx-toolbar__slot--center {
+    justify-content: center;
+    min-width: 0;
+  }
   .astryx-toolbar__slot--end { justify-content: flex-end; margin-inline-start: auto; }
   .astryx-toolbar--centered .astryx-toolbar__slot--end { margin-inline-start: 0; }
 }

package/styles/tree-list.css

@@ -92,7 +92,7 @@
   }
 
   @media (hover: hover) {
-    .astryx-tree-list__content[data-interactive='true']:hover::before {
+    .astryx-tree-list__content[data-interactive='true']:not([data-disabled='true']):hover::before {
       background-color: var(--astryx-color-overlay-hover, light-dark(#0000000d, #ffffff0d));
     }
 

package/styles/typeahead.css

@@ -32,6 +32,15 @@
     min-width: 0;
   }
 
+  /*
+   * 横排里 100% 会变成整行的 flex 基准，旁边的标题只剩很窄一截，文字折成两行。
+   * 没传 width 时固定 20rem，flex 不再伸长；显式 width 仍走变量。
+   */
+  .astryx-stack[data-direction='horizontal'] > .astryx-field.astryx-typeahead {
+    width: var(--astryx-field-width, 20rem);
+    flex-grow: 0;
+  }
+
   .astryx-typeahead-control {
     box-sizing: border-box;
     position: relative;
@@ -41,7 +50,7 @@
     width: 100%;
     min-width: 0;
     min-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);
@@ -211,6 +220,30 @@
     outline: none;
   }
 
+  .astryx-typeahead-listbox[role='grid'] .astryx-typeahead-option {
+    display: grid;
+    grid-template-columns: minmax(0, 1fr) auto;
+    align-items: stretch;
+    padding: 0;
+  }
+
+  .astryx-typeahead-option-main,
+  .astryx-typeahead-option-action {
+    display: flex;
+    align-items: center;
+    min-width: 0;
+    gap: var(--astryx-spacing-2, 8px);
+  }
+
+  .astryx-typeahead-option-main {
+    padding: var(--astryx-spacing-1-5, 6px) var(--astryx-spacing-2, 8px);
+  }
+
+  .astryx-typeahead-option-action.is-active {
+    outline: var(--astryx-focus-outline-width, 2px) solid var(--astryx-focus-outline-color, currentcolor);
+    outline-offset: -2px;
+  }
+
   .astryx-typeahead-option.is-active,
   .astryx-typeahead-option:hover:not(.is-disabled) {
     background: var(--astryx-dropdown-menu-hover-background, light-dark(#0536590c, #ffffff0c));

package/styles.css

@@ -45,6 +45,7 @@
 @import './styles/indicator-focus-ring.css';
 @import './styles/kbd.css';
 @import './styles/keyboard-hint.css';
+@import './styles/layer.css';
 @import './styles/layout.css';
 @import './styles/lightbox.css';
 @import './styles/link.css';