@astryx-vue/core 0.4.1 → 0.5.0

package/dist/{useResizable-1MHPNaRD.d.ts → useResizable-BJ0DaMml.d.ts}

@@ -4,7 +4,7 @@ import { CSSProperties, MaybeRefOrGetter, Ref, VNode, VNodeChild } from "vue";
 //#region src/Toolbar/types.d.ts
 type ToolbarSize = 'sm' | 'md' | 'lg';
 type ToolbarOrientation = 'horizontal' | 'vertical';
-type ToolbarVariant = 'transparent' | 'muted';
+type ToolbarVariant = 'section' | 'transparent' | 'muted';
 type ToolbarDivider = 'top' | 'bottom' | 'start' | 'end';
 interface ToolbarProps {
   /** 工具栏的无障碍名称。 */
@@ -15,7 +15,7 @@ interface ToolbarProps {
   gap?: SpacingStep;
   /** 方向键沿哪一根轴移动焦点。 @default 'horizontal' */
   orientation?: ToolbarOrientation;
-  /** 底色。muted 用来标出批量操作条。 @default 'transparent' */
+  /** 底色，和 Section 的 variant 一致。muted 用来标出批量操作条。 @default 'transparent' */
   variant?: ToolbarVariant;
   /** 在指定边上画分隔线。 */
   dividers?: ToolbarDivider[];
@@ -105,9 +105,14 @@ interface TableSortEntry<TSortKey extends string = string> {
   direction: TableSortDirection;
 }
 type TableSortState<TSortKey extends string = string> = TableSortEntry<TSortKey>[];
+type TableColumnHeader = string | (() => VNodeChild);
 interface TableColumn<T extends Record<string, unknown> = Record<string, unknown>> {
   key: string;
-  header?: string;
+  /**
+   * 列头内容。字符串直接显示；函数返回的 VNode 用函数式组件渲染（对应原版收
+   * ReactNode）。可访问名称等需要纯文本的地方，函数形式回退到 `key`。
+   */
+  header?: TableColumnHeader;
   width?: ColumnWidth;
   align?: TableColumnAlign;
   verticalAlign?: TableVerticalAlign;

package/dist/{useTranslator-PEXMxDpv.js → useTranslator-BQ1KFNSZ.js}

@@ -1,5 +1,5 @@
-import { s as useAstryxMessages } from "./context-CM-cjGg_.js";
-import { t as upstreamMessageMap } from "./upstreamMap-ocuIRfI2.js";
+import { s as useAstryxMessages } from "./context-CVUee2tp.js";
+import { t as upstreamMessageMap } from "./upstreamMap-BFXZHlnp.js";
 //#region src/locale/useTranslator.ts
 /**
 * 对应原版 Astryx 的 `hooks/useTranslator`。

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@astryx-vue/core",
   "type": "module",
-  "version": "0.4.1",
+  "version": "0.5.0",
   "description": "Vue 3 components for the unofficial astryx-vue port of Astryx. Not affiliated with Meta.",
   "author": "ShenQingchuan",
   "license": "MIT",

package/styles/icon.css

@@ -56,6 +56,14 @@
     display: block;
     width: 100%;
     height: 100%;
+  }
+
+  /*
+   * An SVG that declares its own fill (a stroked glyph says fill="none") keeps
+   * it. Only artwork without a fill attribute is painted with the current color.
+   */
+  .astryx-icon > svg:not([fill]),
+  .astryx-icon__svg > svg:not([fill]) {
     fill: currentcolor;
   }
 

package/styles/link.css

@@ -55,15 +55,16 @@
     line-height: 1;
   }
 
-  .astryx-link--size-sm { font-size: var(--astryx-text-sm-size, 0.75rem); }
-  .astryx-link--size-md { font-size: var(--astryx-text-md-size, 0.875rem); }
-  .astryx-link--size-lg { font-size: var(--astryx-text-lg-size, 1rem); }
-  .astryx-link--size-xl { font-size: var(--astryx-text-xl-size, 1.25rem); }
-
-  .astryx-link--weight-regular { font-weight: var(--astryx-font-weight-regular, 400); }
-  .astryx-link--weight-medium { font-weight: var(--astryx-font-weight-medium, 500); }
-  .astryx-link--weight-semibold { font-weight: var(--astryx-font-weight-semibold, 600); }
-  .astryx-link--weight-bold { font-weight: var(--astryx-font-weight-bold, 700); }
+  /* 修饰类与基础规则同特异性，排在后面所以生效：基础里的 `font: inherit` 不会盖掉它们。 */
+  .astryx-link.astryx-link--size-sm { font-size: var(--astryx-text-sm-size, 0.75rem); }
+  .astryx-link.astryx-link--size-md { font-size: var(--astryx-text-md-size, 0.875rem); }
+  .astryx-link.astryx-link--size-lg { font-size: var(--astryx-text-lg-size, 1rem); }
+  .astryx-link.astryx-link--size-xl { font-size: var(--astryx-text-xl-size, 1.25rem); }
+
+  .astryx-link.astryx-link--weight-regular { font-weight: var(--astryx-font-weight-regular, 400); }
+  .astryx-link.astryx-link--weight-medium { font-weight: var(--astryx-font-weight-medium, 500); }
+  .astryx-link.astryx-link--weight-semibold { font-weight: var(--astryx-font-weight-semibold, 600); }
+  .astryx-link.astryx-link--weight-bold { font-weight: var(--astryx-font-weight-bold, 700); }
 
   .astryx-link__label {
     min-width: 0;

package/styles/markdown.css

@@ -34,14 +34,18 @@
     margin-inline: auto;
   }
 
-  .astryx-markdown :is(h1, h2, h3, h4, h5, h6).astryx-heading.astryx-markdown__heading {
-    margin-block: var(--astryx-spacing-4, 16px) var(--astryx-spacing-2, 8px);
+  /* 标题间距看源文档里的标题深度（data-depth），不看渲染出来的 h 级别：
+     `headingLevelStart` 把 `#` 渲染成 h2 时，它仍然是"深度 1"，取大间距。
+     深度 1–3 是大标题（上 24 / 下 12），4–6 是小标题（上 16 / 下 8）。 */
+  .astryx-markdown .astryx-heading.astryx-markdown__heading {
+    margin-block: var(--_md-heading-top, var(--astryx-spacing-4, 16px)) var(--_md-heading-bottom, var(--astryx-spacing-2, 8px));
     color: var(--astryx-color-text-primary, #171717);
     font-family: var(--astryx-font-family-heading, Figtree, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif);
   }
 
-  .astryx-markdown :is(h1, h2).astryx-heading.astryx-markdown__heading {
-    margin-block: var(--astryx-spacing-6, 24px) var(--astryx-spacing-3, 12px);
+  .astryx-markdown__heading:is([data-depth='1'], [data-depth='2'], [data-depth='3']) {
+    --_md-heading-top: var(--astryx-spacing-6, 24px);
+    --_md-heading-bottom: var(--astryx-spacing-3, 12px);
   }
 
   .astryx-markdown h1.astryx-heading.astryx-markdown__heading {
@@ -113,12 +117,14 @@
     border-block-start: var(--astryx-border-width, 1px) solid var(--astryx-color-border, #ebebeb);
   }
 
-  .astryx-markdown[data-density='compact'] :is(h1, h2).astryx-heading.astryx-markdown__heading {
-    margin-block: var(--astryx-spacing-4, 16px) var(--astryx-spacing-2, 8px);
+  .astryx-markdown[data-density='compact'] .astryx-markdown__heading {
+    --_md-heading-top: var(--astryx-spacing-3, 12px);
+    --_md-heading-bottom: var(--astryx-spacing-1, 4px);
   }
 
-  .astryx-markdown[data-density='compact'] :is(h3, h4, h5, h6).astryx-heading.astryx-markdown__heading {
-    margin-block: var(--astryx-spacing-3, 12px) var(--astryx-spacing-1, 4px);
+  .astryx-markdown[data-density='compact'] .astryx-markdown__heading:is([data-depth='1'], [data-depth='2'], [data-depth='3']) {
+    --_md-heading-top: var(--astryx-spacing-4, 16px);
+    --_md-heading-bottom: var(--astryx-spacing-2, 8px);
   }
 
   .astryx-markdown[data-density='compact'] :is(.astryx-markdown__paragraph, .astryx-markdown__list) {
@@ -145,6 +151,15 @@
     margin-block-end: 0;
   }
 
+  /* 标题自己的间距规则特异性更高，首尾去边距要跟上。 */
+  .astryx-markdown > .astryx-heading.astryx-markdown__heading:first-child {
+    margin-block-start: 0;
+  }
+
+  .astryx-markdown > .astryx-heading.astryx-markdown__heading:last-child {
+    margin-block-end: 0;
+  }
+
   .astryx-markdown strong {
     font-weight: var(--astryx-font-weight-semibold, 600);
   }

package/styles/power-search.css

@@ -94,9 +94,10 @@
     cursor: pointer;
   }
 
+  /* 空着不占位：剩余宽度全给输入框（原版 Tokenizer 里输入框 flex 1 1 40px）。 */
   .astryx-power-search-tokens {
     display: flex;
-    flex: 1 1 auto;
+    flex: 0 1 auto;
     flex-wrap: wrap;
     align-items: center;
     gap: var(--astryx-spacing-1, 4px);
@@ -138,10 +139,11 @@
     white-space: nowrap;
   }
 
+  /* 高度交给内容（原版输入框不定高），字段的 min-height 和 padding 说了算。 */
   .astryx-power-search-input {
     flex: 1 1 8rem;
     min-width: 4rem;
-    height: var(--astryx-input-height-sm, 28px);
+    height: auto;
     margin: 0;
     padding: 0 var(--astryx-spacing-1, 4px);
     border: 0;

package/styles/progress-bar.css

@@ -6,7 +6,8 @@
     display: flex;
     flex-direction: column;
     gap: var(--astryx-spacing-1, 4px);
-    min-width: 0;
+    width: 100%;
+    min-width: 48px;
   }
 
   .astryx-progress-bar-header {
@@ -133,6 +134,11 @@
     background: var(--astryx-progress-bar-info-fill, var(--astryx-input-info, #6d9cfe));
   }
 
+  /* 原版 neutral 填充是 disabled 灰，不是前景近黑。 */
+  .astryx-progress-bar[data-variant='neutral'] .astryx-progress-bar-fill {
+    background: var(--astryx-progress-bar-neutral-fill, var(--astryx-color-text-disabled, light-dark(#a3a3a3, #525252)));
+  }
+
   /* 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. */

package/styles/status-dot.css

@@ -13,6 +13,10 @@
     background-color: var(--astryx-status-dot-neutral-background, #a3a3a3);
   }
 
+  .astryx-status-dot[data-variant='accent'] {
+    background-color: var(--astryx-status-dot-accent-background, var(--astryx-color-accent, #1b1b1b));
+  }
+
   .astryx-status-dot[data-variant='info'] {
     background-color: var(--astryx-status-dot-info-background, #0074e2);
   }
@@ -43,6 +47,10 @@
     height: 75%;
   }
 
+  .astryx-status-dot[data-variant='accent'] .astryx-status-dot__icon {
+    color: var(--astryx-status-dot-accent-icon-foreground, var(--astryx-color-on-accent, #fff));
+  }
+
   .astryx-status-dot[data-variant='warning'] .astryx-status-dot__icon {
     color: var(--astryx-status-dot-warning-icon-foreground, #171717);
   }

package/styles/tab-list.css

@@ -187,19 +187,20 @@
     flex: 1 1 0;
   }
 
+  /* 原版三个尺寸都用 label 字号（14px），不随尺寸变化。 */
   .astryx-tab--size-sm {
     min-height: 28px;
-    font-size: 0.8125rem;
+    font-size: var(--astryx-text-label-size, 0.875rem);
   }
 
   .astryx-tab--size-md {
     min-height: 32px;
-    font-size: var(--astryx-text-body-size, 0.875rem);
+    font-size: var(--astryx-text-label-size, 0.875rem);
   }
 
   .astryx-tab--size-lg {
     min-height: 36px;
-    font-size: 0.9375rem;
+    font-size: var(--astryx-text-label-size, 0.875rem);
   }
 
   .astryx-tab:hover:not(:disabled, [aria-disabled='true']) {

package/styles/table.css

@@ -22,7 +22,13 @@
     border-spacing: 0;
     color: var(--astryx-color-text-primary, light-dark(#171717, #fafafa));
     font-family: inherit;
-    font-size: var(--astryx-text-body-size, 1rem);
+    /* 原版表格元素不设字号：分组头等自定义内容继承环境字号（16px），
+       数据格的字号由 td 自己带（见下），所以两边分开。 */
+  }
+
+  /* 数据模式（传 data 和 columns）按声明的列宽比例严格分配；手写行列的模式按内容定宽。 */
+  .astryx-table[data-layout='fixed'] {
+    table-layout: fixed;
   }
 
   .astryx-table :is(th, td) {
@@ -39,43 +45,47 @@
     vertical-align: bottom;
   }
 
-  .astryx-table[data-density='compact'] :is(th, td) {
-    padding-block: var(--astryx-spacing-1, 4px);
-    padding-inline: var(--astryx-spacing-2, 8px);
-  }
-
-  .astryx-table[data-density='balanced'] :is(th, td) {
-    padding-block: var(--astryx-spacing-2, 8px);
-    padding-inline: var(--astryx-spacing-3, 12px);
+  /* 密度只决定两个变量。内边距由下面一条规则读变量，并且只管表格自己的格子：
+     分组头、展开面板是插件渲染的整行格，内边距归它们自己的规则（__group、__panel）。
+     用 :where 排除它们，不抬特异性，插件格子也就不必和密度规则比特异性。 */
+  .astryx-table[data-density='compact'] {
+    --_cell-block: var(--astryx-spacing-1, 4px);
+    --_cell-inline: var(--astryx-spacing-2, 8px);
   }
 
-  .astryx-table[data-density='spacious'] :is(th, td) {
-    padding-block: var(--astryx-spacing-3, 12px);
-    padding-inline: var(--astryx-spacing-4, 16px);
+  .astryx-table[data-density='balanced'] {
+    --_cell-block: var(--astryx-spacing-2, 8px);
+    --_cell-inline: var(--astryx-spacing-3, 12px);
   }
 
-  .astryx-table[data-density='compact'] :is(th, td):first-child {
-    padding-inline-start: max(var(--container-padding-inline-start, var(--astryx-spacing-2, 8px)), var(--astryx-spacing-2, 8px));
+  .astryx-table[data-density='spacious'] {
+    --_cell-block: var(--astryx-spacing-3, 12px);
+    --_cell-inline: var(--astryx-spacing-4, 16px);
   }
 
-  .astryx-table[data-density='compact'] :is(th, td):last-child {
-    padding-inline-end: max(var(--container-padding-inline-end, var(--astryx-spacing-2, 8px)), var(--astryx-spacing-2, 8px));
+  .astryx-table :is(th, td):where(:not(.astryx-table__group, .astryx-table__panel)) {
+    padding-block: var(--_cell-block, var(--astryx-spacing-2, 8px));
+    padding-inline: var(--_cell-inline, var(--astryx-spacing-3, 12px));
   }
 
-  .astryx-table[data-density='balanced'] :is(th, td):first-child {
-    padding-inline-start: max(var(--container-padding-inline-start, var(--astryx-spacing-3, 12px)), var(--astryx-spacing-2, 8px));
+  /* 原版里带右键菜单的格子（可展开行的每一格）把内边距挪给了菜单触发层，
+     `<td>` 自己只剩浏览器默认的 1px，所以这些格子上下各比普通格多 1px。 */
+  .astryx-table td[data-row-menu] {
+    padding-block: calc(var(--_cell-block, var(--astryx-spacing-2, 8px)) + 1px);
   }
 
-  .astryx-table[data-density='balanced'] :is(th, td):last-child {
-    padding-inline-end: max(var(--container-padding-inline-end, var(--astryx-spacing-3, 12px)), var(--astryx-spacing-2, 8px));
+  .astryx-table :is(th, td):where(:not(.astryx-table__group, .astryx-table__panel)):first-child {
+    padding-inline-start: max(var(--container-padding-inline-start, var(--_cell-inline, var(--astryx-spacing-3, 12px))), var(--astryx-spacing-2, 8px));
   }
 
-  .astryx-table[data-density='spacious'] :is(th, td):first-child {
-    padding-inline-start: max(var(--container-padding-inline-start, var(--astryx-spacing-4, 16px)), var(--astryx-spacing-2, 8px));
+  .astryx-table :is(th, td):where(:not(.astryx-table__group, .astryx-table__panel)):last-child {
+    padding-inline-end: max(var(--container-padding-inline-end, var(--_cell-inline, var(--astryx-spacing-3, 12px))), var(--astryx-spacing-2, 8px));
   }
 
-  .astryx-table[data-density='spacious'] :is(th, td):last-child {
-    padding-inline-end: max(var(--container-padding-inline-end, var(--astryx-spacing-4, 16px)), var(--astryx-spacing-2, 8px));
+  /* 原版 TableCell 给普通数据格带正文字号；分组头、展开面板、空态这些
+     插件渲染的格子不设字号，继承环境字号。 */
+  .astryx-table td:not(.astryx-table__group, .astryx-table__panel, .astryx-table__empty) {
+    font-size: var(--astryx-text-body-size, 0.875rem);
   }
 
   .astryx-table th {
@@ -292,12 +302,6 @@
     text-align: center;
   }
 
-  .astryx-table__select {
-    width: 48px;
-    min-width: 48px;
-    max-width: 48px;
-  }
-
   .astryx-table__filter {
     min-width: 0;
   }
@@ -381,11 +385,6 @@
    * 选择工具栏复用 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);
@@ -412,10 +411,13 @@
     border-bottom: var(--astryx-border-width, 1px) solid var(--astryx-color-border, light-dark(#ebebeb, #ffffff1a));
   }
 
+  /* 原版分组头固定 8px 12px 8px 0（块向 8、结束侧 12、起始侧 0），不随密度变。 */
   .astryx-table td.astryx-table__group {
     max-width: none;
     overflow: visible;
+    padding-block: var(--astryx-spacing-2, 8px);
     padding-inline-start: 0;
+    padding-inline-end: var(--astryx-spacing-3, 12px);
     background: var(--astryx-color-background-muted, light-dark(#f1f1f1, #1b1b1b));
   }
 
@@ -529,20 +531,12 @@
     width: 40px;
     min-width: 40px;
     max-width: 40px;
-    padding-inline-start: 0;
     padding-inline-end: 0;
   }
 
-  .astryx-table[data-density='compact'] .astryx-table__expander--column {
-    margin-inline-start: calc((40px - min(var(--astryx-spacing-6, 24px), 40px)) / 2 - var(--astryx-spacing-2, 8px));
-  }
-
-  .astryx-table[data-density='balanced'] .astryx-table__expander--column {
-    margin-inline-start: calc((40px - min(var(--astryx-spacing-6, 24px), 40px)) / 2 - var(--astryx-spacing-3, 12px));
-  }
-
-  .astryx-table[data-density='spacious'] .astryx-table__expander--column {
-    margin-inline-start: calc((40px - min(var(--astryx-spacing-6, 24px), 40px)) / 2 - var(--astryx-spacing-4, 16px));
+  /* 展开列的起始侧内边距就是密度的横向内边距，按钮往回缩这一段，居中在 40px 的列里。 */
+  .astryx-table .astryx-table__expander--column {
+    margin-inline-start: calc((40px - min(var(--astryx-spacing-6, 24px), 40px)) / 2 - var(--_cell-inline, var(--astryx-spacing-3, 12px)));
   }
 
   .astryx-table[data-dividers='rows'] tbody tr[data-expanded] > td,
@@ -554,30 +548,23 @@
     background: var(--astryx-color-background-muted, light-dark(#f1f1f1, #1b1b1b));
   }
 
-  .astryx-table__panel {
+  /* 面板的块向 16、结束侧 20 固定不变；起始侧让出 40px 的展开列再加密度的横向内边距。 */
+  .astryx-table td.astryx-table__panel {
     max-width: none;
     padding-inline-end: var(--astryx-spacing-5, 20px);
     padding-block: var(--astryx-spacing-4, 16px);
   }
 
-  .astryx-table[data-density='compact'] .astryx-table__panel {
-    padding-inline-start: calc(40px + var(--astryx-spacing-2, 8px));
-  }
-
-  .astryx-table[data-density='balanced'] .astryx-table__panel {
-    padding-inline-start: calc(40px + var(--astryx-spacing-3, 12px));
-  }
-
-  .astryx-table[data-density='spacious'] .astryx-table__panel {
-    padding-inline-start: calc(40px + var(--astryx-spacing-4, 16px));
+  .astryx-table td.astryx-table__panel {
+    padding-inline-start: calc(40px + var(--_cell-inline, var(--astryx-spacing-3, 12px)));
   }
 
-  .astryx-table[data-dividers='rows'] .astryx-table__panel,
-  .astryx-table[data-dividers='grid'] .astryx-table__panel {
+  .astryx-table[data-dividers='rows'] td.astryx-table__panel,
+  .astryx-table[data-dividers='grid'] td.astryx-table__panel {
     border-bottom: var(--astryx-border-width, 1px) solid var(--astryx-color-border, light-dark(#ebebeb, #ffffff1a));
   }
 
-  .astryx-table tbody tr:last-child > .astryx-table__panel {
+  .astryx-table tbody tr:last-child > td.astryx-table__panel {
     border-bottom-width: 0;
   }
 

package/styles/text-input.css

@@ -47,7 +47,6 @@
     box-sizing: border-box;
     display: block;
     flex: 1;
-    width: 100%;
     min-width: 0;
     min-height: 0;
     padding: 0;

package/styles/text.css

@@ -13,22 +13,6 @@
     display: block;
   }
 
-  .astryx-text--weight-regular {
-    font-weight: var(--astryx-font-weight-regular, 400);
-  }
-
-  .astryx-text--weight-medium {
-    font-weight: var(--astryx-font-weight-medium, 500);
-  }
-
-  .astryx-text--weight-semibold {
-    font-weight: var(--astryx-font-weight-semibold, 600);
-  }
-
-  .astryx-text--weight-bold {
-    font-weight: var(--astryx-font-weight-bold, 700);
-  }
-
   .astryx-text--type-body {
     font-size: var(--astryx-text-body-size, 0.875rem);
     line-height: var(--astryx-text-body-leading, 1.4286);
@@ -75,6 +59,24 @@
     line-height: var(--astryx-text-display-3-leading, 1.2);
   }
 
+  /* 显式 weight 排在 type 规则之后：调用方写了 weight 就赢过 display-* 的默认 300。 */
+
+  .astryx-text--weight-regular {
+    font-weight: var(--astryx-font-weight-regular, 400);
+  }
+
+  .astryx-text--weight-medium {
+    font-weight: var(--astryx-font-weight-medium, 500);
+  }
+
+  .astryx-text--weight-semibold {
+    font-weight: var(--astryx-font-weight-semibold, 600);
+  }
+
+  .astryx-text--weight-bold {
+    font-weight: var(--astryx-font-weight-bold, 700);
+  }
+
   .astryx-text--color-primary {
     color: var(--astryx-color-text-primary, light-dark(#171717, #fafafa));
   }

package/styles/token.css

@@ -19,13 +19,12 @@
     line-height: var(--astryx-text-supporting-leading, 1.6667);
     text-decoration: none;
     white-space: nowrap;
-    vertical-align: middle;
     transition: background-color var(--astryx-duration-fast-max, 165ms) var(--astryx-ease-standard, cubic-bezier(0.24, 1, 0.4, 1));
   }
 
+  /* 原版 sm 不换内边距，和 md/lg 一样留 8px。 */
   .astryx-token.size-sm {
     height: calc(var(--astryx-input-height-sm, 28px) - 8px);
-    padding-inline: var(--astryx-spacing-1, 4px);
   }
 
   .astryx-token.size-lg {

package/styles/toolbar.css

@@ -9,22 +9,10 @@
     gap: var(--astryx-toolbar-gap, var(--astryx-spacing-2, 8px));
     width: 100%;
     min-width: 0;
-    padding-block: var(--astryx-spacing-2, 8px);
+    /* 原版三个尺寸的最小高度都是小号控件高；更高的尺寸由里面的按钮撑开。 */
+    min-height: var(--astryx-input-height-sm, 28px);
   }
 
-  .astryx-toolbar--muted {
-    background: var(--astryx-color-background-muted);
-  }
-
-  .astryx-toolbar--divider-top { border-top: var(--astryx-border-width, 1px) solid var(--astryx-color-border); }
-  .astryx-toolbar--divider-bottom { border-bottom: var(--astryx-border-width, 1px) solid var(--astryx-color-border); }
-  .astryx-toolbar--divider-start { border-inline-start: var(--astryx-border-width, 1px) solid var(--astryx-color-border); }
-  .astryx-toolbar--divider-end { border-inline-end: var(--astryx-border-width, 1px) solid var(--astryx-color-border); }
-
-  .astryx-toolbar--sm { min-height: 28px; }
-  .astryx-toolbar--md { min-height: 32px; }
-  .astryx-toolbar--lg { min-height: 36px; }
-
   .astryx-toolbar--centered {
     display: grid;
     grid-template-columns: 1fr auto 1fr;
@@ -58,6 +46,22 @@
     min-width: 0;
   }
 
+  /*
+   * 首尾的幽灵按钮自带透明内边距。工具栏把这一侧的槽往外拉回
+   * 「容器内边距 − 工具栏块向内边距」，按钮的字形才落在内容边上。
+   */
+  .astryx-toolbar__slot {
+    --_edge-comp-inset: calc(var(--container-padding-inline-start, var(--astryx-spacing-4, 16px)) - var(--astryx-spacing-2, 8px));
+  }
+
+  .astryx-toolbar__slot:has(> [data-astryx-edge-comp]:first-child) {
+    margin-inline-start: calc(-1 * var(--_edge-comp-inset));
+  }
+
+  .astryx-toolbar__slot:has(> [data-astryx-edge-comp]:last-child) {
+    margin-inline-end: calc(-1 * var(--_edge-comp-inset));
+  }
+
   .astryx-toolbar__slot--center {
     justify-content: center;
     min-width: 0;

package/dist/Toolbar-C0pMWL4S.js

@@ -1,73 +0,0 @@
-import { t as useListFocus } from "./useListFocus-ChxLg0b4.js";
-import { Fragment, computed, createCommentVNode, createElementBlock, createElementVNode, defineComponent, normalizeClass, normalizeStyle, openBlock, renderSlot, unref } from "vue";
-import "../styles/toolbar.css";
-//#region src/Toolbar/Toolbar.vue
-const _hoisted_1 = ["aria-label", "aria-orientation"];
-const _hoisted_2 = {
-	key: 0,
-	class: "astryx-toolbar__slot astryx-toolbar__slot--start"
-};
-const _hoisted_3 = {
-	key: 1,
-	class: "astryx-toolbar__slot astryx-toolbar__slot--center"
-};
-const _hoisted_4 = {
-	key: 2,
-	class: "astryx-toolbar__slot astryx-toolbar__slot--end"
-};
-const _sfc_main = /*@__PURE__*/ defineComponent({
-	name: "AstryxToolbar",
-	__name: "Toolbar",
-	props: {
-		label: {},
-		size: { default: "md" },
-		gap: { default: 1 },
-		orientation: { default: "horizontal" },
-		variant: { default: "transparent" },
-		dividers: {}
-	},
-	setup(__props) {
-		const props = __props;
-		const gapToken = computed(() => String(props.gap).replace(".", "-"));
-		const { listRef, handleKeyDown, handleFocus } = useListFocus({
-			boundarySelector: "[role=\"toolbar\"], [role=\"menu\"], [role=\"dialog\"]",
-			hasHomeEnd: true,
-			hasRovingTabIndex: true,
-			itemSelector: "a[href], button:not([disabled]), input:not([disabled]):not([type=\"hidden\"]), select:not([disabled]), textarea:not([disabled])",
-			hasCaretGuard: true,
-			orientation: props.orientation === "vertical" ? "vertical" : "horizontal",
-			wrap: true
-		});
-		listRef.value;
-		return (_ctx, _cache) => {
-			return openBlock(), createElementBlock(Fragment, null, [createCommentVNode(" eslint-disable-next-line vue-a11y/no-static-element-interactions -- role=\"toolbar\" 的焦点在内部控件上循环，容器只接收冒泡的方向键。 "), createElementVNode("div", {
-				ref_key: "listRef",
-				ref: listRef,
-				class: normalizeClass(["astryx-toolbar", [
-					`astryx-toolbar--${__props.size}`,
-					`astryx-toolbar--${__props.orientation}`,
-					{
-						"astryx-toolbar--centered": _ctx.$slots.center,
-						"astryx-toolbar--muted": __props.variant === "muted",
-						"astryx-toolbar--divider-top": __props.dividers?.includes("top"),
-						"astryx-toolbar--divider-bottom": __props.dividers?.includes("bottom"),
-						"astryx-toolbar--divider-start": __props.dividers?.includes("start"),
-						"astryx-toolbar--divider-end": __props.dividers?.includes("end")
-					}
-				]]),
-				role: "toolbar",
-				"aria-label": __props.label,
-				"aria-orientation": __props.orientation,
-				style: normalizeStyle({ "--astryx-toolbar-gap": `var(--astryx-spacing-${gapToken.value})` }),
-				onFocusin: _cache[0] || (_cache[0] = (...args) => unref(handleFocus) && unref(handleFocus)(...args)),
-				onKeydown: _cache[1] || (_cache[1] = (...args) => unref(handleKeyDown) && unref(handleKeyDown)(...args))
-			}, [
-				_ctx.$slots.start ? (openBlock(), createElementBlock("div", _hoisted_2, [renderSlot(_ctx.$slots, "start")])) : createCommentVNode("v-if", true),
-				_ctx.$slots.center ? (openBlock(), createElementBlock("div", _hoisted_3, [renderSlot(_ctx.$slots, "center")])) : createCommentVNode("v-if", true),
-				_ctx.$slots.end ? (openBlock(), createElementBlock("div", _hoisted_4, [renderSlot(_ctx.$slots, "end")])) : createCommentVNode("v-if", true)
-			], 46, _hoisted_1)], 2112);
-		};
-	}
-});
-//#endregion
-export { _sfc_main as t };

package/dist/context-pjBxaMSh.js

@@ -1,28 +0,0 @@
-import { n as readLayerScoped, t as defineLayerScopedKey } from "./scopedProvide-C-Df7c15.js";
-import { computed, provide, toValue } from "vue";
-//#region src/Icon/context.ts
-/**
-* The size an owning component supplies to the icons in its slots.
-*
-* The value is stored as given, so a caller can pass a ref or a computed and
-* keep the default in step with its own props.
-*/
-const ICON_DEFAULT_SIZE_KEY = defineLayerScopedKey("astryx-icon-default-size", void 0);
-/**
-* Let the icons inside a component follow that component's own size.
-*
-* Call it in the component's setup with a ref or computed so the inherited size
-* stays reactive.
-*/
-function provideIconSize(size) {
-	provide(ICON_DEFAULT_SIZE_KEY, size);
-}
-/**
-* The size inherited from the nearest owner, or `undefined` when there is none.
-*/
-function useIconDefaultSize() {
-	const inherited = readLayerScoped(ICON_DEFAULT_SIZE_KEY);
-	return computed(() => inherited == null ? void 0 : toValue(inherited));
-}
-//#endregion
-export { useIconDefaultSize as n, provideIconSize as t };