@astryx-vue/core 0.2.5 → 0.3.0

package/styles/dialog-header.css

@@ -9,6 +9,10 @@
     gap: var(--astryx-spacing-3, 12px);
   }
 
+  .astryx-dialog-header--divider {
+    border-block-end: var(--astryx-dialog-header-divider-width, 1px) solid var(--astryx-color-border, light-dark(#ebebeb, #ffffff1a));
+  }
+
   .astryx-dialog-header__title-block {
     display: flex;
     flex: 1 1 auto;
@@ -32,7 +36,7 @@
   .astryx-dialog-header__subtitle {
     color: var(--astryx-color-text-secondary, #525252);
     font-size: var(--astryx-text-supporting-size, 0.75rem);
-    line-height: var(--astryx-text-supporting-leading, 1.6667);
+    line-height: var(--astryx-text-body-leading, 1.4286);
   }
 
   .astryx-dialog-header__actions {

package/styles/field.css

@@ -199,6 +199,17 @@
     color: var(--astryx-input-status-color, var(--astryx-color-text-secondary, #525252));
   }
 
+  /* 标签旁的提示图标和上游一样是 16px 方块，独立的 FieldLabel 里也一样。 */
+  .astryx-field-label-row .astryx-field-info-tip {
+    flex: none;
+    width: 16px;
+    height: 16px;
+    min-height: 0;
+    padding: 0;
+    border-radius: var(--astryx-radius-inner, 0.375rem);
+    color: var(--astryx-color-text-secondary, #525252);
+  }
+
   .astryx-field-info-tip:focus-visible,
   .astryx-input-clear-button:focus-visible {
     outline-offset: 1px;

package/styles/heading.css

@@ -176,4 +176,13 @@
     overflow: hidden;
     -webkit-box-orient: vertical;
   }
+
+  /* Optical alignment: trim the leading above the cap height and below the
+     alphabetic baseline so the glyphs sit flush with the box edges. Kept last
+     so it also wins over the truncation display mode, like the original. */
+  .astryx-heading--capsize {
+    display: block;
+    text-box-trim: trim-both;
+    text-box-edge: cap alphabetic;
+  }
 }

package/styles/indicator-focus-ring.css

@@ -0,0 +1,18 @@
+@layer astryx.reset, astryx.tokens, astryx.base, astryx.components, astryx.overrides;
+
+/*
+ * 焦点环画在指示器自己的元素上，只有它自己的圆角能决定环的形状。
+ * `useIndicatorFocusRing` 负责在 `:focus-visible` 时加上这个属性。
+ */
+@layer astryx.components {
+  [data-astryx-focus-ring] {
+    outline: var(--astryx-focus-outline-width, 2px) var(--astryx-focus-outline-style, solid) var(--astryx-focus-outline-color, currentcolor);
+    outline-offset: 2px;
+  }
+
+  @media (forced-colors: active) {
+    [data-astryx-focus-ring] {
+      outline-color: Highlight;
+    }
+  }
+}

package/styles/number-input.css

@@ -27,17 +27,46 @@
   }
 
   .astryx-number-input[data-status='error'] {
+    --astryx-input-status-color: var(--astryx-input-error, #e33f4a);
     border-color: var(--astryx-input-error, #e33f4a);
   }
 
   .astryx-number-input[data-status='warning'] {
+    --astryx-input-status-color: var(--astryx-input-warning, #a67a00);
     border-color: var(--astryx-input-warning, #a67a00);
   }
 
   .astryx-number-input[data-status='success'] {
+    --astryx-input-status-color: var(--astryx-input-success, #198100);
     border-color: var(--astryx-input-success, #198100);
   }
 
+  /* The icon before the input text. */
+  .astryx-number-input-icon {
+    display: inline-flex;
+    flex: none;
+    align-items: center;
+    padding-inline-start: var(--astryx-spacing-2, 8px);
+    color: var(--astryx-color-text-secondary, #525252);
+  }
+
+  .astryx-number-input-icon > * {
+    width: 16px;
+    height: 16px;
+  }
+
+  /* The status glyph and the info-tip button sit after the input. */
+  .astryx-number-input > .astryx-field-icon,
+  .astryx-number-input > .astryx-field-info-tip {
+    flex: none;
+    align-self: center;
+    margin-inline-end: var(--astryx-spacing-2, 8px);
+  }
+
+  .astryx-number-input > .astryx-field-icon {
+    color: var(--astryx-input-status-color, var(--astryx-color-text-secondary, #525252));
+  }
+
   .astryx-number-input-units,
   .astryx-number-input-clear {
     display: inline-flex;
@@ -80,6 +109,10 @@
     cursor: default;
   }
 
+  .astryx-number-input[data-readonly='true'] .astryx-number-input-field {
+    cursor: default;
+  }
+
   .astryx-number-input-buttons {
     display: flex;
     flex-direction: column;

package/styles/pressable.css

@@ -0,0 +1,44 @@
+@layer astryx.reset, astryx.tokens, astryx.base, astryx.components, astryx.overrides;
+
+/*
+ * 按压反馈。`usePressFeedback` 给元素加 `data-astryx-pressable`，
+ * 手指按实了再临时加 `data-astryx-pressed`。
+ *
+ * 按下时立刻亮（不给过渡），抬手后靠 200ms 的 opacity 过渡淡出。
+ * 鼠标不看按压模型，仍然用 `:active`；手指走的是 `@media (pointer: coarse)` 之外不生效的那条。
+ */
+@layer astryx.components {
+  [data-astryx-pressable] {
+    position: relative;
+    --astryx-pressable-fade: 200ms;
+  }
+
+  [data-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 (prefers-reduced-motion: reduce) {
+    [data-astryx-pressable]::after {
+      transition: none;
+    }
+  }
+}

package/styles/progress-bar.css

@@ -133,6 +133,24 @@
     background: var(--astryx-progress-bar-info-fill, var(--astryx-input-info, #6d9cfe));
   }
 
+  /* A disabled bar dims everything it draws: the fill drops the variant color
+     for the disabled foreground, and the label, value and marks step down to
+     the muted ramp. */
+  .astryx-progress-bar[data-disabled] .astryx-progress-bar-fill {
+    background: var(--astryx-color-text-disabled, light-dark(#a3a3a3, #525252));
+  }
+
+  .astryx-progress-bar[data-disabled] .astryx-progress-bar-label,
+  .astryx-progress-bar[data-disabled] .astryx-progress-bar-value {
+    color: var(--astryx-color-text-disabled, light-dark(#a3a3a3, #525252));
+  }
+
+  /* The attribute selector is repeated so this also outranks the variant plus
+     placement rules above, which carry the same specificity. */
+  .astryx-progress-bar[data-disabled] .astryx-progress-bar-mark[data-placement] {
+    background: var(--astryx-color-text-secondary, light-dark(#525252, #a3a3a3));
+  }
+
   .astryx-progress-bar[data-indeterminate='true'] .astryx-progress-bar-fill {
     width: 40%;
     animation: astryx-progress-bar-indeterminate 1.2s ease-in-out infinite;

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/side-nav.css

@@ -74,13 +74,17 @@
     align-items: center;
   }
 
+  .astryx-side-nav__bottom {
+    padding-block-start: var(--astryx-spacing-1, 4px);
+  }
+
   .astryx-side-nav__body {
     display: flex;
     flex: 1 1 auto;
     flex-direction: column;
     gap: var(--astryx-spacing-1, 4px);
     min-height: 0;
-    padding-inline: var(--astryx-spacing-2, 8px);
+    padding: var(--astryx-spacing-1, 4px) var(--astryx-spacing-2, 8px);
     overflow: auto;
   }
 
@@ -261,12 +265,12 @@
     text-decoration: underline;
   }
 
-  .astryx-side-nav-heading__chevron,
-  .astryx-side-nav-collapse {
+  .astryx-side-nav-heading__chevron {
     display: inline-flex;
     flex: none;
     align-items: center;
     justify-content: center;
+    gap: var(--astryx-spacing-1, 4px);
     width: 28px;
     height: 28px;
     padding: 0;
@@ -274,16 +278,26 @@
     border-radius: var(--astryx-radius-element, 0.625rem);
     background: transparent;
     color: var(--astryx-color-text-secondary, #525252);
+    font: inherit;
     cursor: pointer;
   }
 
-  .astryx-side-nav-heading__chevron:hover,
-  .astryx-side-nav-collapse:hover {
+  /* The collapse button itself is a ghost Button; only SideNav's placement stays here. */
+  .astryx-side-nav-collapse {
+    flex: none;
+  }
+
+  /* 图标按钮在上下两栏里保持方块，靠起始侧，不被列方向拉成整行。 */
+  .astryx-side-nav__top > .astryx-side-nav-collapse[data-icon-only='true'],
+  .astryx-side-nav__bottom > .astryx-side-nav-collapse[data-icon-only='true'] {
+    align-self: flex-start;
+  }
+
+  .astryx-side-nav-heading__chevron:hover {
     background: var(--astryx-color-overlay-hover);
   }
 
   .astryx-side-nav-heading__chevron:focus-visible,
-  .astryx-side-nav-collapse:focus-visible,
   .astryx-side-nav-heading--collapsed:focus-visible {
     outline: var(--astryx-focus-outline-width) var(--astryx-focus-outline-style) var(--astryx-focus-outline-color);
     outline-offset: var(--astryx-focus-outline-offset);

package/styles/stack.css

@@ -5,8 +5,10 @@
     box-sizing: border-box;
     display: flex;
     gap: var(--astryx-stack-gap, normal);
-    padding-block: var(--astryx-stack-padding-block, 0);
-    padding-inline: var(--astryx-stack-padding-inline, 0);
+    padding-block-start: var(--astryx-stack-padding-block-start, var(--astryx-stack-padding-block, 0));
+    padding-block-end: var(--astryx-stack-padding-block-end, var(--astryx-stack-padding-block, 0));
+    padding-inline-start: var(--astryx-stack-padding-inline-start, var(--astryx-stack-padding-inline, 0));
+    padding-inline-end: var(--astryx-stack-padding-inline-end, var(--astryx-stack-padding-inline, 0));
   }
 
   .astryx-stack[data-direction='horizontal'] {

package/styles/status-dot.css

@@ -29,6 +29,24 @@
     background-color: var(--astryx-status-dot-error-background, #e33f4a);
   }
 
+  .astryx-status-dot__icon {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 100%;
+    height: 100%;
+    color: var(--astryx-status-dot-icon-foreground, #fff);
+  }
+
+  .astryx-status-dot__icon > * {
+    width: 75%;
+    height: 75%;
+  }
+
+  .astryx-status-dot[data-variant='warning'] .astryx-status-dot__icon {
+    color: var(--astryx-status-dot-warning-icon-foreground, #171717);
+  }
+
   .astryx-status-dot--pulsing {
     animation: astryx-status-dot-pulse 2s ease-in-out infinite;
   }

package/styles/tab-list.css

@@ -49,7 +49,7 @@
     display: inline-flex;
     align-items: center;
     justify-content: center;
-    gap: var(--astryx-spacing-0-5, 2px);
+    gap: var(--astryx-spacing-1, 4px);
     flex: 0 0 auto;
     padding-inline: var(--astryx-spacing-3, 12px);
     border: 0;
@@ -57,7 +57,7 @@
     background: transparent;
     color: var(--astryx-color-text-secondary, #525252);
     font: inherit;
-    font-weight: var(--astryx-font-weight-medium, 500);
+    font-weight: var(--astryx-font-weight-regular, 400);
     text-decoration: none;
     white-space: nowrap;
     cursor: pointer;
@@ -90,6 +90,7 @@
 
   .astryx-tab--selected {
     color: var(--astryx-color-text-primary, #171717);
+    font-weight: var(--astryx-font-weight-semibold, 600);
   }
 
   .astryx-tab--selected::after {
@@ -119,7 +120,42 @@
   }
 
   .astryx-tab__label {
+    display: inline-grid;
+    align-items: center;
+  }
+
+  .astryx-tab__label-text,
+  .astryx-tab__label-sizer {
+    grid-area: 1 / 1;
+    display: inline-flex;
+    align-items: center;
+    gap: var(--astryx-spacing-1, 4px);
+  }
+
+  /* 同一格里叠一份半粗字重的隐形副本，选中前后标签宽度不变。 */
+  .astryx-tab__label-sizer {
+    visibility: hidden;
+    font-weight: var(--astryx-font-weight-semibold, 600);
+    pointer-events: none;
+  }
+
+  .astryx-tab__icon {
+    display: inline-flex;
+    flex: none;
+    align-items: center;
+    justify-content: center;
+    width: 16px;
+    height: 16px;
+  }
+
+  .astryx-tab__icon > * {
+    width: 100%;
+    height: 100%;
+  }
+
+  .astryx-tab__end {
     display: inline-flex;
+    flex: none;
     align-items: center;
     gap: inherit;
   }

package/styles/table.css

@@ -136,6 +136,12 @@
     background-color: var(--astryx-color-accent-muted, light-dark(#f1f1f1, #262626));
   }
 
+  /* 行底色被别的含义占用时不铺这层色，aria-selected 照旧保留。 */
+  .astryx-table[data-row-highlight='off'] tbody tr[aria-selected='true'] {
+    --table-row-overlay: transparent;
+    background-color: transparent;
+  }
+
   .astryx-table :is(th, td)[data-align='center'] {
     text-align: center;
   }
@@ -206,6 +212,11 @@
     min-width: 0;
   }
 
+  .astryx-table :where(thead th) {
+    /* 拖动把手贴在表头的行末，需要一个定位上下文。固定列的 inline 样式会盖过它。 */
+    position: relative;
+  }
+
   .astryx-table__resize {
     position: absolute;
     top: 0;
@@ -214,6 +225,33 @@
     height: 100%;
     cursor: col-resize;
     touch-action: none;
+    border-radius: var(--astryx-radius-inner, 0.375rem);
+  }
+
+  .astryx-table__resize::after {
+    content: '';
+    position: absolute;
+    top: 0;
+    inset-inline-end: 2px;
+    width: 2px;
+    height: 100%;
+    background-color: transparent;
+  }
+
+  @media (hover: hover) {
+    .astryx-table__resize:hover::after {
+      background-color: var(--astryx-color-border-strong, light-dark(#a3a3a3, #525252));
+    }
+  }
+
+  .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:focus-visible {
+    outline: 2px solid var(--astryx-color-accent, light-dark(#0064e0, #4d9bff));
+    outline-offset: -2px;
   }
 
   .astryx-table__empty {
@@ -231,6 +269,11 @@
     min-width: 0;
   }
 
+  /* 行内紧凑档：控件离表头更近，占的高度更小。 */
+  .astryx-table__filter[data-variant='inline-compact'] {
+    margin-block-start: calc(-1 * var(--astryx-spacing-1, 4px));
+  }
+
   .astryx-table__filter-popover {
     display: flex;
     flex-direction: column;
@@ -249,6 +292,11 @@
     margin-top: var(--astryx-spacing-2, 8px);
   }
 
+  .astryx-table__pagination[data-place='above'] {
+    margin-top: 0;
+    margin-bottom: var(--astryx-spacing-2, 8px);
+  }
+
   .astryx-table__pagination[data-align='start'] {
     justify-content: flex-start;
   }
@@ -261,12 +309,24 @@
     justify-content: flex-end;
   }
 
-  .astryx-table-selection-toolbar {
-    display: flex;
-    flex-wrap: wrap;
-    align-items: center;
-    gap: var(--astryx-spacing-2, 8px);
-    margin-bottom: var(--astryx-spacing-2, 8px);
+  /*
+   * 选择工具栏复用 Toolbar 的骨架：产品操作排在逻辑起点，计数文字和清空命令排在末端。
+   */
+
+  /* Toolbar 只有透明和弱化底，表面色这一档在这里补上。 */
+  .astryx-table-selection-toolbar--section {
+    background: var(--astryx-color-background-surface, #fff);
+  }
+
+  .astryx-table-selection-toolbar__label {
+    font-size: var(--astryx-text-body-size, 0.875rem);
+    line-height: var(--astryx-text-body-leading, 1.4286);
+    white-space: nowrap;
+  }
+
+  /* 按钮按文字宽度排，空间紧张时不被压扁。 */
+  .astryx-table-selection-toolbar__clear {
+    flex: none;
   }
 
   .astryx-table__clickable {

package/styles/text.css

@@ -181,4 +181,13 @@
     overflow: hidden;
     -webkit-box-orient: vertical;
   }
+
+  /* Optical alignment: trim the leading above the cap height and below the
+     alphabetic baseline so the glyphs sit flush with the box edges. Kept last
+     so it also wins over the truncation display mode, like the original. */
+  .astryx-text--capsize {
+    display: block;
+    text-box-trim: trim-both;
+    text-box-edge: cap alphabetic;
+  }
 }

package/styles/time-input.css

@@ -49,3 +49,44 @@
 .astryx-time-input-control:focus-visible {
   outline: none;
 }
+
+@layer astryx.components {
+  /* 预设时间列表：贴着时间字段下方弹出，宽度随内容，最高 300px 滚动。 */
+  .astryx-time-input-options {
+    box-sizing: border-box;
+    position: fixed;
+    z-index: var(--astryx-popover-z-index, 1000);
+    width: max-content;
+    max-width: calc(100vw - 16px);
+    max-block-size: min(300px, calc(100dvh - 16px));
+    padding: var(--astryx-spacing-1, 4px);
+    overflow: auto;
+    overscroll-behavior: contain;
+    border-radius: var(--astryx-popover-radius, var(--astryx-radius-container, 0.75rem));
+    background: var(--astryx-popover-background, light-dark(#ffffff, #1b1b1b));
+    color: var(--astryx-popover-foreground, light-dark(#171717, #fafafa));
+    box-shadow: var(
+      --astryx-popover-shadow,
+      0 2px 4px light-dark(oklch(0 0 0 / 5%), oklch(0 0 0 / 25%)),
+      0 4px 8px light-dark(oklch(0 0 0 / 10%), oklch(0 0 0 / 40%)),
+      inset 0 0 0 1px light-dark(transparent, oklch(1 0 0 / 8%))
+    );
+    font-family: var(--astryx-font-family-body, Figtree, sans-serif);
+    font-size: var(--astryx-text-body-size, 0.875rem);
+    line-height: var(--astryx-text-body-leading, 1.4286);
+    outline: none;
+  }
+
+  .astryx-time-input-option {
+    box-sizing: border-box;
+    padding: var(--astryx-spacing-1-5, 6px) var(--astryx-spacing-2, 8px);
+    border-radius: max(0px, calc(var(--astryx-radius-container, 0.75rem) - var(--astryx-spacing-1, 4px)));
+    white-space: nowrap;
+    cursor: pointer;
+  }
+
+  .astryx-time-input-option.is-active,
+  .astryx-time-input-option:hover {
+    background: var(--astryx-dropdown-menu-hover-background, light-dark(#0536590c, #ffffff0c));
+  }
+}