@ticatec/topside-elements 1.0.3 → 1.0.6

package/CHANGELOG.md

@@ -1,5 +1,28 @@
 # Changelog
 
+## 1.0.6
+
+### 变更
+- **应用布局组件样式调整**：`SidebarLayout`、`HeaderLayout` 与 `ClassicLayout` 移除多余的容器外间距 `gap` 与面板硬编码边框，统一配合内置拖拽分割线（`Split`）实现无间距贴合与平滑拖拽。
+
+### 测试与文档
+- **AppLayout 测试演示套件完善**：在 `topside-test-suite` 中补充「应用布局」完整演示路由（包含 `/test/app-layout` 总览，以及 `sidebar-layout`、`header-layout`、`classic-layout`、`columns-layout`、`rows-layout` 独立演示页面），完善测试站首页与侧边栏导航入口。
+
+## 1.0.5
+
+### 修复
+- **Dialog 暗色主题**：`.topside-dialog-box` 不再硬编码 `#ffffff` 背景，改读 `--topside-dialog-color-surface`（默认 `var(--topside-color-surface)`）；原先只在组件内 `:global(:root)` 定义、且暗色下无覆盖的 `--topside-dialog-border-color` / `--topside-dialog-action-button-color` / `--topside-dialog-action-button-hover-background-color`，以及从未定义只靠回退值的 `--topside-dialog-divider-color` / `--topside-dialog-header-color`，统一移到 `topside-root.scss`，亮色保持原值，`[data-theme=dark]` 下分别跟随 `--topside-color-border-primary` / `--topside-color-border-secondary` / `--topside-primary-color-font` / `--topside-secondary-color-font` / `--topside-color-surface-variant`。对话框（含基于 Dialog 的 MessageBox 等）在暗色主题下随主题切换。
+
+## 1.0.4
+
+### 变更
+- **ProgressStepBar 布局重做**：横向改为圆圈在上、标题 / comment 居中在圆圈下方，步骤等分宽度、长标题截断；连接线不再用贯穿整块的 `linear-gradient`，改为指示器上的伪元素只在相邻圆圈之间画线段（横向 `::before` / `::after` 两段，纵向一段），首尾圆圈外侧无线。线的颜色跟随左侧 / 上方步骤：该步 `Completed` 为蓝，否则为灰；横向两个半段由内部 `connected` 标记保持一致。
+- **纵向不再要求父容器有高度**：按内容撑开、步骤间距 12px；父容器给了高度时步骤才拉伸均分。
+- 连接线不再依赖 `--topside-progress-step-bar-color-surface` 是纯色，透明 / 图片 / 渐变背景下圆圈处不会漏线；该变量现在只是容器背景。
+
+### 文档
+- 更新 `progress_step_bar/README(_CN).md`、AI 编码指南中步骤条示例（原示例用的 `steps` / `activeIndex` 并不存在，改为 `items` + `status`）；测试套件 `/test/navigation/progress-step-bar` 扩充为横向 / 纵向 / 窄容器 / 动态 / 非纯色背景 / 自定义颜色等示例。
+
 ## 1.0.3
 
 ### 变更

package/dist/app_layout/ClassicLayout.svelte

@@ -115,7 +115,6 @@
         flex: 0 0 auto;
         overflow: auto;
         width: 100%;
-        border-right: 1px solid var(--topside-color-border-secondary);
     }
 
     .content-area {
@@ -127,7 +126,6 @@
         flex: 0 0 auto;
         overflow: auto;
         width: 100%;
-        border-left: 1px solid var(--topside-color-border-secondary);
     }
 
     .bottom-area {
@@ -135,6 +133,5 @@
         position: relative;
         width: 100%;
         overflow: hidden;
-        border-top: 1px solid var(--topside-color-border-secondary);
     }
 </style>

package/dist/app_layout/HeaderLayout.svelte

@@ -82,7 +82,6 @@
         height: 100%;
         flex: 0 0 auto;
         overflow: auto;
-        border-right: 1px solid var(--topside-color-border-secondary);
     }
 
     .main-content {

package/dist/app_layout/SidebarLayout.svelte

@@ -61,14 +61,12 @@
         box-sizing: border-box;
         display: flex;
         flex-direction: row;
-        gap: var(--topside-spacing-2);
     }
 
     .sidebar {
         height: 100%;
         flex: 0 0 auto;
         overflow: auto;
-        border-right: 1px solid var(--topside-color-border-secondary);
     }
 
     .main-content {

package/dist/navigation/progress_step_bar/ProgressStepBar.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
     import type ProgressStep from "./ProgressStep";
+    import {ProgressStepStatus} from "./ProgressStep";
     import ProgressStepBlock from "./ProgressStepBlock.svelte";
 
     interface Props {
@@ -22,7 +23,8 @@
 <div class="topside-progress-step-container {direction}" data-theme={theme} {style}>
     <div class="container-panel">
         {#each items as step, idx}
-            <ProgressStepBlock pos={idx+1} status={step.status} comment={step.comment} title={step.title} {direction}/>
+            <ProgressStepBlock pos={idx+1} status={step.status} comment={step.comment} title={step.title} {direction}
+                               connected={idx > 0 && items[idx - 1].status === ProgressStepStatus.Completed}/>
         {/each}
     </div>
 </div>
@@ -40,9 +42,8 @@
         width: 100%;
         display: flex;
         flex-direction: row;
-        justify-items: flex-start;
+        align-items: flex-start;
         background-color: inherit;
-        z-index: 2;
     }
 
     .topside-progress-step-container.vertical {

package/dist/navigation/progress_step_bar/ProgressStepBlock.svelte

@@ -8,6 +8,8 @@
         comment?: string;
         style?: string;
         direction: 'vertical' | 'horizontal';
+        /** 前一个步骤是否已完成（决定进入本步骤的连接线颜色，仅水平布局使用；纵向每段线只由上一步自身状态决定） */
+        connected?: boolean;
     }
 
     let {
@@ -16,13 +18,14 @@
         title,
         comment = '',
         style = '',
-        direction
+        direction,
+        connected = false
     }: Props = $props();
 
 
 </script>
 
-<div class="progress-step-block {status} {direction}" {style}>
+<div class="progress-step-block {status} {direction}" class:connected {style}>
     <div class="step-indicator">
         <div>
             {#if status === ProgressStepStatus.Completed}
@@ -46,38 +49,14 @@
 
 <style>
 
+    /* ---------- shared ---------- */
+
     .progress-step-block {
         flex: 1 1;
         min-width: 100px;
         display: flex;
-        flex-direction: row;
-        justify-items: flex-start;
         color: var(--topside-progress-step-pending-color, #B3BCCA);
-        margin-left: 8px;
         background-color: inherit;
-        background: linear-gradient(to bottom, transparent 12px,
-                var(--topside-progress-step-pending-color, #B3BCCA) 12px,
-                var(--topside-progress-step-pending-color, #B3BCCA) 14px,
-                transparent 14px);
-    }
-
-    .progress-step-block:first-child {
-        margin-left: 0;
-    }
-
-    .progress-step-block:first-child .step-indicator {
-        margin-left: 0;
-    }
-
-    .step-indicator {
-        flex: 0 0 auto;
-        padding-right: 12px;
-        margin-left: 12px;
-    }
-
-    .step-indicator > div {
-        background-color: var(--topside-progress-step-bar-color-surface);
-        display: inline-block;
     }
 
     .step-indicator span {
@@ -89,36 +68,32 @@
         border-radius: 50%;
         border: 1px solid var(--topside-progress-step-pending-color, #B3BCCA);
         font-size: 1.1em;
-    }
-
-    .progress-step-block.completed {
-        background: linear-gradient(to bottom, transparent 12px,
-                var(--topside-progress-step-completed-icon-color, #0061FF) 12px,
-                var(--topside-progress-step-completed-icon-color, #0061FF) 14px,
-                transparent 14px);
+        box-sizing: border-box;
     }
 
     .progress-step-block.completed .step-indicator span {
         border: 1px solid var(--topside-progress-step-completed-icon-color, #0061FF);
+        background-color: var(--topside-progress-step-completed-icon-bg, #0061FF1A);
+        color: var(--topside-progress-step-completed-icon-color, #0061FF);
+    }
+
+    .progress-step-block.processing .step-indicator span {
+        border-color: var(--topside-progress-step-processing-color, #0061FF);
+        background-color: var(--topside-progress-step-processing-color, #0061FF);
+        color: var(--topside-progress-step-bar-bg, #ffffff);
     }
 
     .step-text {
-        width: 100%;
         overflow: hidden;
     }
 
     .step-topic {
-        width: 100%;
-        background-color: transparent;
         line-height: 24px;
         overflow: hidden;
     }
 
     .step-topic span {
         display: inline-block;
-        background-color: var(--topside-progress-step-bar-color-surface);
-        padding-right: 6px;
-        padding-left: 6px;
         max-width: 100%;
         overflow: hidden;
         white-space: nowrap;
@@ -126,72 +101,136 @@
         vertical-align: top;
     }
 
-    .progress-step-block:last-child .step-topic {
-        background-color: var(--topside-progress-step-bar-color-surface);
-    }
-
     .progress-step-block.processing .step-topic {
         color: var(--topside-progress-step-processing-color, #0061FF);
     }
 
-    .progress-step-block.processing .step-indicator span {
-        background-color: var(--topside-progress-step-processing-color, #0061FF);
-        color: var(--topside-progress-step-bar-bg, #ffffff);
-    }
-
-    .progress-step-block.completed .step-topic {
+    .progress-step-block.completed .step-topic,
+    .progress-step-block.completed .step-comment {
         color: var(--topside-progress-step-completed-color, #374151);
     }
 
-    .progress-step-block.completed .step-indicator span {
-        background-color: var(--topside-progress-step-completed-icon-bg, #0061FF1A);
-        color: var(--topside-progress-step-completed-icon-color, #0061FF);
-    }
-
     .step-comment {
         line-height: 1.4;
         font-size: 0.9em;
     }
 
-    .progress-step-block.completed .step-comment {
-        color: var(--topside-progress-step-completed-color, #374151);
+    /* ---------- horizontal: circle on top, text below, connector between circles ---------- */
+
+    .progress-step-block.horizontal {
+        flex-direction: column;
+        align-items: center;
+        min-width: 0;
+        text-align: center;
+    }
+
+    .progress-step-block.horizontal .step-indicator {
+        position: relative;
+        width: 100%;
+        display: flex;
+        justify-content: center;
+        flex: 0 0 auto;
+    }
+
+    .progress-step-block.horizontal .step-indicator > div {
+        position: relative;
+        z-index: 1;
+        line-height: 0;
+    }
+
+    /* connector segments: ::before = incoming (left), ::after = outgoing (right) */
+    .progress-step-block.horizontal .step-indicator::before,
+    .progress-step-block.horizontal .step-indicator::after {
+        content: '';
+        position: absolute;
+        top: 11px;
+        height: 2px;
+        background-color: var(--topside-progress-step-pending-color, #B3BCCA);
+    }
+
+    .progress-step-block.horizontal .step-indicator::before {
+        left: 0;
+        right: calc(50% + 16px);
+    }
+
+    .progress-step-block.horizontal .step-indicator::after {
+        left: calc(50% + 16px);
+        right: 0;
+    }
+
+    .progress-step-block.horizontal:first-child .step-indicator::before,
+    .progress-step-block.horizontal:last-child .step-indicator::after {
+        display: none;
+    }
+
+    .progress-step-block.horizontal.completed .step-indicator::after,
+    .progress-step-block.horizontal.connected .step-indicator::before {
+        background-color: var(--topside-progress-step-completed-icon-color, #0061FF);
     }
 
-    /* Vertical styles */
+    .progress-step-block.horizontal .step-text {
+        width: 100%;
+        padding: 0 4px;
+        margin-top: 6px;
+        box-sizing: border-box;
+    }
+
+    .progress-step-block.horizontal .step-topic span {
+        padding: 0 2px;
+    }
+
+    /* ---------- vertical: circle on the left, text on the right, connector between circles ---------- */
+
     .progress-step-block.vertical {
-        margin-left: 0;
-        background: linear-gradient(to right, transparent 12px, var(--topside-progress-step-pending-color, #B3BCCA) 14px,
-                var(--topside-progress-step-pending-color, #B3BCCA) 14px, transparent 13px);
+        flex-direction: row;
+        align-items: flex-start;
+        min-width: 0;
+        padding-bottom: 12px;
     }
 
-    .progress-step-block.vertical.completed {
-        background: linear-gradient(to right, transparent 12px, var(--topside-progress-step-completed-icon-color, #0061FF) 14px,
-                var(--topside-progress-step-completed-icon-color, #0061FF) 14px, transparent 13px);
+    .progress-step-block.vertical:last-child {
+        padding-bottom: 0;
     }
 
     .progress-step-block.vertical .step-indicator {
-        margin-left: 0;
+        position: relative;
+        flex: 0 0 auto;
+        width: 24px;
+        align-self: stretch;
+        margin-right: 12px;
     }
 
     .progress-step-block.vertical .step-indicator > div {
-        background: var(--topside-progress-step-bar-color-surface);
-        padding: 4px 0;
+        position: relative;
+        z-index: 1;
+        line-height: 0;
     }
 
-    .progress-step-block.vertical:last-child {
-        background: unset;
+    /* connector segment: from just below the circle to the bottom of the block */
+    .progress-step-block.vertical .step-indicator::after {
+        content: '';
+        position: absolute;
+        left: 11px;
+        width: 2px;
+        top: 28px;
+        bottom: 4px;
+        background-color: var(--topside-progress-step-pending-color, #B3BCCA);
     }
 
-    .progress-step-block.vertical .step-topic span {
-        padding-left: 0;
-        display: block;
+    .progress-step-block.vertical:last-child .step-indicator::after {
+        display: none;
     }
 
-    .progress-step-block.vertical:last-child {
-        background: unset;
+    .progress-step-block.vertical.completed .step-indicator::after {
+        background-color: var(--topside-progress-step-completed-icon-color, #0061FF);
     }
 
-    .progress-step-block.vertical:last-child .step-indicator > div {
-        background: transparent;
+    .progress-step-block.vertical .step-text {
+        flex: 1 1 auto;
+        min-width: 0;
+    }
+
+    .progress-step-block.vertical .step-topic span {
+        display: block;
     }
 </style>

package/dist/navigation/progress_step_bar/ProgressStepBlock.svelte.d.ts

@@ -6,6 +6,8 @@ interface Props {
     comment?: string;
     style?: string;
     direction: 'vertical' | 'horizontal';
+    /** 前一个步骤是否已完成（决定进入本步骤的连接线颜色，仅水平布局使用；纵向每段线只由上一步自身状态决定） */
+    connected?: boolean;
 }
 declare const ProgressStepBlock: import("svelte").Component<Props, {}, "">;
 type ProgressStepBlock = ReturnType<typeof ProgressStepBlock>;

package/dist/navigation/progress_step_bar/README.md

@@ -2,12 +2,12 @@
 
 > **Renamed in 5.1.0**: this document uses the names from the [API Naming Guide](../../../docs/NAMING.md); the old names `steps`, `topic` were removed in 5.1.0 (no compatibility aliases are kept).
 
-A multi-step progress indicator showing sequential steps with their completion status. Renders numbered circles connected by a line; each step is `Pending`, `Processing`, or `Completed`. Supports horizontal (default) and vertical layouts. Pure display — no click handlers.
+A multi-step progress indicator showing sequential steps with their completion status. Renders numbered circles connected by a line; each step is `Pending`, `Processing`, or `Completed`. Supports horizontal (default — circle on top, title/comment centered below, connector segments between circles) and vertical layouts. Pure display — no click handlers.
 
 ## Features
 
 - **Three statuses per step**: `Pending` (gray number), `Processing` (solid blue circle), `Completed` (blue tinted circle with checkmark)
-- **Connector line**: drawn via CSS `linear-gradient` between adjacent circles; the line color follows step status (blue when completed, gray when pending)
+- **Connector line**: short segments drawn between adjacent circles with pseudo-elements on the indicator (never through the text, no dependence on the background color). The line after a step is blue once that step is `Completed`, gray otherwise
 - **Horizontal or vertical layout**: horizontal default, vertical for sidebars
 - **Optional comment per step**: smaller secondary text under the topic
 - **Theme hook**: `data-theme="{theme}"` on the outer wrapper
@@ -76,10 +76,10 @@ The enum value is also the CSS class on each step block (`Pending` → `.pending
 ```text
 Horizontal:
 
-   ●─────●─────○─────○
-   1     2     3     4
-   Reg   Ver   Setup Done
-   Done  ...
+   ●─────●─────●─────○─────○
+   1     2     3     4     5
+   Reg   Ver   Setup Review Done
+   note  note  note  note   note
 
 Vertical:
 
@@ -96,7 +96,7 @@ Vertical:
      Setup
 ```
 
-Filled circles (●) are completed or processing; outlined circles (○) are pending. The connecting line is blue when the step is `Completed`, gray when `Pending`.
+Filled circles (●) are completed or processing; outlined circles (○) are pending. In horizontal mode the title (and optional comment) sits centered under its circle, and the segment between two circles is blue when the step on its left is `Completed`, gray otherwise. The line never passes under the text.
 
 ## DOM Structure & CSS
 
@@ -106,7 +106,7 @@ Rendered output:
 <div class="topside-progress-step-container {direction}" data-theme="..." style="...">
   <div class="container-panel">
     <!-- per step -->
-    <div class="progress-step-block {status} {direction}">
+    <div class="progress-step-block {status} {direction} [connected]">  <!-- .connected = previous step is Completed (horizontal line color) -->
       <div class="step-indicator">
         <div>
           <span>✔</span>          <!-- Completed -->
@@ -129,7 +129,7 @@ Rendered output:
 
 | Variable | Purpose |
 |----------|---------|
-| `--topside-progress-step-bar-color-surface` | Container background (also used as the "background behind the line" so the line appears to break around the circle) |
+| `--topside-progress-step-bar-color-surface` | Container background |
 | `--topside-progress-step-bar-bg` | Foreground inside processing circle (default white) |
 | `--topside-progress-step-pending-color` | Pending circle border + line + text (gray) |
 | `--topside-progress-step-completed-color` | Completed title/comment text (dark gray) |
@@ -139,9 +139,11 @@ Rendered output:
 
 ### How the connector line works
 
-Each step's `background` is a `linear-gradient` that draws a 2px horizontal (or vertical) line at the indicator's center. The circle itself sits on top with a same-color background, making it look like the line breaks around the circle. Status-specific classes override the gradient color.
+**Horizontal**: each `.step-indicator` is `position: relative` and draws two 2px segments with `::before` (incoming, from the left edge to the circle) and `::after` (outgoing, from the circle to the right edge). The first step hides `::before`, the last hides `::after`. `::after` turns blue when the step itself is `Completed`; `::before` turns blue when the block has the `connected` class (previous step `Completed`), so both halves of one connector always match. Nothing depends on the surface color.
 
-This is fragile — if you change `--topside-progress-step-bar-color-surface` to a non-solid background (image, gradient), the line will visually leak through the circle.
+**Vertical**: the indicator column is `align-self: stretch`, and a single `::after` segment runs from just below the circle to the bottom of the block (4px gap on both ends, so the next circle starts cleanly). The last step hides it. It turns blue when the step itself is `Completed` — in vertical mode one segment covers the whole gap, so `connected` is not needed. Each block adds `padding-bottom: 12px` as the spacing between steps.
+
+Neither mode paints anything over the surface color, so any container background (transparent, image, gradient) works.
 
 ## Examples
 
@@ -185,12 +187,12 @@ This is fragile — if you change `--topside-progress-step-bar-color-surface` to
 ### Vertical Layout
 
 ```svelte
-<div style="height: 480px;">
+<div style="width: 240px;">
   <ProgressStepBar {items} direction="vertical" />
 </div>
 ```
 
-Vertical mode fills the parent's height — make sure the parent has a height or the layout collapses.
+Vertical mode sizes to its content; if the parent has an explicit height the steps stretch to fill it (`flex: 1`), otherwise each step takes its natural height with 12px spacing.
 
 ### Pure Display (Static Steps)
 
@@ -218,8 +220,8 @@ For a "your order is at step N" type view:
 - **Reactive.** Mutate `items[i].status` (with `$state` array) and the UI updates. The component re-renders via Svelte 5 reactivity.
 - **`title` truncates with `…`** (`white-space: nowrap; text-overflow: ellipsis`). Keep topics short.
 - **`comment` is multi-line** but doesn't have its own truncation — long comments can break the layout.
-- **First step has no left margin**; subsequent steps use `margin-left: 8px` (horizontal) or no margin (vertical, since the line connects vertically).
-- **Last step keeps the line** for visual continuity — there's a `.progress-step-block:last-child` rule but it's empty in horizontal mode. In vertical mode, the line is unset on the last step.
+- **Horizontal steps share the width equally** (`flex: 1 1 0`, `min-width: 0`) and center their text under the circle; long titles truncate instead of pushing siblings.
+- **No line outside the first/last circle** in either mode.
 
 ## Accessibility
 
@@ -230,15 +232,15 @@ For a "your order is at step N" type view:
 
 ## Known Quirks
 
-1. **The connector line is implemented via `background` gradient** on each step block. If you change the surface color (`--topside-progress-step-bar-color-surface`) to a non-solid background, the line will leak through the circles.
+None currently. The connector line is drawn with pseudo-elements in both modes, so it no longer depends on `--topside-progress-step-bar-color-surface` being a solid color.
 
 ## Best Practices
 
 1. **Use `$state` for the `items` array** if you want live progress updates. Mutating `items[i].status` re-renders.
 2. **Keep `title` short** — it truncates with `…`. Move detail to `comment`.
-3. **Use `direction="vertical"` only inside a height-constrained parent** (sidebar, drawer). Otherwise it collapses.
+3. **`direction="vertical"` works with or without a fixed-height parent** — give the parent a height only when you want the steps spread out evenly.
 4. **One `Processing` step at a time** — having multiple gives a confusing visual. Mark earlier steps `Completed`.
-5. **Override colors via CSS variables**, not by styling the inner classes — the structure is fragile (see connector line note).
+5. **Override colors via CSS variables**, not by styling the inner classes.
 6. **For interactive step nav, use [Navigator](../navigator/README.md)** instead — this component is display-only.
 
 ## Related Components

package/dist/navigation/progress_step_bar/README_CN.md

@@ -7,7 +7,7 @@
 ## 功能特性
 
 - **三种状态**：`Pending`（灰色数字）、`Processing`（实心蓝圆）、`Completed`（蓝色淡背景圆 + 对勾）
-- **连接线**：通过 CSS `linear-gradient` 在相邻圆圈之间画线；线颜色跟随步骤状态（已完成蓝、未开始灰）
+- **连接线**：两种方向都用指示器上的伪元素在相邻圆圈之间画短线段，不穿过文字、不依赖背景色。某步 `Completed` 后它之后的线段为蓝色，否则为灰色
 - **横向或纵向布局**：横向默认，纵向用于侧边栏
 - **每步可选注释**：在 topic 下方显示较小的次要文字
 - **主题钩子**：外层 wrapper 暴露 `data-theme="{theme}"`
@@ -96,7 +96,7 @@ enum ProgressStepStatus {
      设置
 ```
 
-实心圆（●）是已完成或进行中；空心圆（○）是未开始。连接线在步骤 `Completed` 时为蓝色，`Pending` 时为灰色。
+实心圆（●）是已完成或进行中；空心圆（○）是未开始。横向布局下标题（和可选注释）居中显示在圆圈正下方，两个圆圈之间的线段在左侧步骤 `Completed` 时为蓝色，否则为灰色；线不会从文字下方穿过。
 
 ## DOM 结构与 CSS
 
@@ -106,7 +106,7 @@ enum ProgressStepStatus {
 <div class="topside-progress-step-container {direction}" data-theme="..." style="...">
   <div class="container-panel">
     <!-- 每步 -->
-    <div class="progress-step-block {status} {direction}">
+    <div class="progress-step-block {status} {direction} [connected]">  <!-- .connected = 前一步已完成（决定横向进入线段颜色） -->
       <div class="step-indicator">
         <div>
           <span>✔</span>          <!-- Completed -->
@@ -129,7 +129,7 @@ enum ProgressStepStatus {
 
 | 变量 | 用途 |
 |------|------|
-| `--topside-progress-step-bar-color-surface` | 容器背景（也用作"线后面的背景"，让线看起来在圆圈处中断） |
+| `--topside-progress-step-bar-color-surface` | 容器背景 |
 | `--topside-progress-step-bar-bg` | 进行中圆圈内的前景色（默认白） |
 | `--topside-progress-step-pending-color` | 未开始圆圈边框 + 线 + 文字（灰） |
 | `--topside-progress-step-completed-color` | 已完成 title / comment 文字（深灰） |
@@ -139,9 +139,11 @@ enum ProgressStepStatus {
 
 ### 连接线怎么画的
 
-每个步骤的 `background` 是个 `linear-gradient`，在指示器中心画一条 2px 横线（或竖线）。圆圈本身在上面，背景同色，让线看起来在圆圈处断开。状态相关的类覆盖 gradient 颜色。
+**横向**：每个 `.step-indicator` 是 `position: relative`，用 `::before`（进入段：左边缘到圆圈）和 `::after`（离开段：圆圈到右边缘）各画一条 2px 线段。首步隐藏 `::before`，末步隐藏 `::after`。本步 `Completed` 时 `::after` 变蓝；块带 `connected` 类（前一步 `Completed`）时 `::before` 变蓝，所以同一条连接线的两半颜色总是一致。不依赖 surface 颜色。
 
-这个机制脆弱 —— 把 `--topside-progress-step-bar-color-surface` 改成非纯色背景（图片、渐变），线会从圆圈里漏出来。
+**纵向**：指示器列 `align-self: stretch`，用一条 `::after` 线段从圆圈下方画到块底部（上下各留 4px 空隙，下一个圆圈紧接着开始），末步隐藏。本步 `Completed` 时变蓝 —— 纵向一段线覆盖整个间隔，所以不需要 `connected`。每个块加 `padding-bottom: 12px` 作为步骤间距。
+
+两种模式都不会在 surface 颜色上盖任何东西，所以容器背景透明、图片、渐变都没问题。
 
 ## 示例
 
@@ -185,12 +187,12 @@ enum ProgressStepStatus {
 ### 纵向布局
 
 ```svelte
-<div style="height: 480px;">
+<div style="width: 240px;">
   <ProgressStepBar {items} direction="vertical" />
 </div>
 ```
 
-纵向模式会填满父容器高度 —— 确保父容器有高度，否则布局会塌。
+纵向模式按内容撑开；父容器给了明确高度时步骤会拉伸填满（`flex: 1`），否则每步取自然高度、间距 12px。
 
 ### 纯展示（静态步骤）
 
@@ -218,8 +220,8 @@ enum ProgressStepStatus {
 - **响应式。** 修改 `items[i].status`（用 `$state` 数组）UI 就更新。组件通过 Svelte 5 响应式重渲染
 - **`title` 用 `…` 截断**（`white-space: nowrap; text-overflow: ellipsis`）。保持 topic 简短
 - **`comment` 可多行**，但本身不截断 —— 长注释可能破坏布局
-- **首步无左 margin**；后续步骤横向 `margin-left: 8px`，纵向无 margin（因为线是竖向连接的）
-- **末步保留线**为了视觉连续 —— 有 `.progress-step-block:last-child` 规则但横向模式下为空。纵向模式下末步的线被 unset
+- **横向步骤等分宽度**（`flex: 1 1 0`、`min-width: 0`），文字在圆圈下方居中；长标题会截断而不是挤压相邻步骤
+- **首尾圆圈外侧没有线**，横向纵向都一样
 
 ## 无障碍访问
 
@@ -230,15 +232,15 @@ enum ProgressStepStatus {
 
 ## 已知怪异
 
-1. **连接线通过每个步骤块的 `background` gradient 实现。** 把 surface 色（`--topside-progress-step-bar-color-surface`）改成非纯色背景（图片、渐变），线会从圆圈里漏出来
+暂无。两种模式的连接线都用伪元素画，不再要求 `--topside-progress-step-bar-color-surface` 是纯色。
 
 ## 最佳实践
 
 1. **`items` 数组用 `$state`**，需要实时进度更新时。修改 `items[i].status` 触发重渲染
 2. **`title` 保持简短** —— 会用 `…` 截断。详情移到 `comment`
-3. **`direction="vertical"` 只在高度受限的父容器里用**（侧边栏、抽屉）。否则会塌
+3. **`direction="vertical"` 父容器有没有固定高度都可以** —— 想让步骤均匀铺开时再给父容器高度
 4. **同时只一个 `Processing` 步骤** —— 多了视觉混乱。把之前的标 `Completed`
-5. **颜色通过 CSS 变量覆盖**，不要改内部类样式 —— 结构脆弱（见连接线说明）
+5. **颜色通过 CSS 变量覆盖**，不要改内部类样式
 6. **需要交互式步骤导航用 [Navigator](../navigator/README_CN.md)** —— 这个组件是纯展示
 
 ## 相关组件

package/dist/overlay/dialog/Dialog.svelte

@@ -163,13 +163,7 @@
     </div>
 </div>
 
-<style>:global(:root) {
-  --topside-dialog-border-color: #0000000D;
-  --topside-dialog-action-button-hover-background-color: #E2E8F0;
-  --topside-dialog-action-button-color: #6B7280;
-}
-
-.topside-dialog {
+<style>.topside-dialog {
   position: fixed;
   top: 0;
   left: 0;
@@ -187,7 +181,7 @@
 }
 .topside-dialog .topside-dialog-box {
   margin: 0;
-  background-color: #ffffff;
+  background-color: var(--topside-dialog-color-surface, var(--topside-color-surface, #ffffff));
   position: relative;
   border-radius: 4px;
   border: 1px solid var(--topside-dialog-border-color, rgba(0, 0, 0, 0.0509803922));

package/dist/topside-elements.css

@@ -82,6 +82,13 @@
   --topside-dialog-action-bar-margin: 16px 24px;
   --topside-dialog-action-bar-text-align: right;
   --topside-dialog-action-button-color-hover-surface: rgba(0, 0, 0, 0.05);
+  /* Dialog box (light) */
+  --topside-dialog-color-surface: var(--topside-color-surface);
+  --topside-dialog-border-color: #0000000D;
+  --topside-dialog-divider-color: #F0F0F0;
+  --topside-dialog-header-color: #07123C;
+  --topside-dialog-action-button-color: #6B7280;
+  --topside-dialog-action-button-hover-background-color: #E2E8F0;
   /* Options popover layer tokens*/
   --topside-popover-layer-top-margin: 0;
   --topside-option-item-margin: 6px 8px;
@@ -547,6 +554,12 @@
   --topside-toast-color: var(--topside-color-primary); /* 文字依然保持高清晰度的白 */
   /* Dialog and message box*/
   --topside-dialog-action-button-color-hover-surface: rgba(0, 0, 0, 0.07);
+  --topside-dialog-color-surface: var(--topside-color-surface);
+  --topside-dialog-border-color: var(--topside-color-border-primary);
+  --topside-dialog-divider-color: var(--topside-color-border-secondary);
+  --topside-dialog-header-color: var(--topside-primary-color-font);
+  --topside-dialog-action-button-color: var(--topside-secondary-color-font);
+  --topside-dialog-action-button-hover-background-color: var(--topside-color-surface-variant);
   /* Options popover layer tokens*/
   --topside-popover-layer-color-surface: #262626;
   --topside-popover-layer-color: #e5e7eb;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ticatec/topside-elements",
-  "version": "1.0.3",
+  "version": "1.0.6",
   "description": "A comprehensive UI component library for Svelte applications with rich form controls, data tables, layouts and interactive elements",
   "keywords": [
     "svelte",