@q1travel/design-system 0.17.0 → 0.17.1

package/contracts/design.dark.md

@@ -128,15 +128,22 @@ semantic-colors:
   text-on-media: "#ffffff"
   border: "{colors.gray-200}"
   border-strong: "{colors.gray-400}"
+  border-subtle: "#1f1f1f"
   text-primary: "{colors.text-primary}"
   text-secondary: "{colors.text-secondary}"
   text-muted: "{colors.text-muted}"
+  text-soft: "#9a9a9c"
+  overlay-scrim: "rgba(2, 6, 23, 0.44)"
   selection-background: "{colors.text-primary}"
   selection-foreground: "{colors.background-100}"
   focus-ring: "{colors.primary}"
+  focus: "{colors.primary-700}"
   status-success: "{colors.green-900}"
   status-warning: "{colors.amber-700}"
   status-danger: "{colors.red-900}"
+  status-danger-text: "#ef5350"
+  status-danger-surface: "{colors.red-100}"
+  status-danger-border: "#ef5350"
 typography:
   heading-72:
     fontFamily: Noto Sans SC

package/contracts/design.md

@@ -128,15 +128,22 @@ semantic-colors:
   text-on-media: "#ffffff"
   border: "{colors.gray-400}"
   border-strong: "{colors.gray-500}"
+  border-subtle: "rgba(203, 213, 225, 0.82)"
   text-primary: "{colors.text-primary}"
   text-secondary: "{colors.text-secondary}"
   text-muted: "{colors.text-muted}"
+  text-soft: "#6e6e73"
+  overlay-scrim: "rgba(2, 6, 23, 0.44)"
   selection-background: "{colors.text-primary}"
   selection-foreground: "{colors.background-100}"
   focus-ring: "{colors.primary}"
+  focus: "{colors.primary-700}"
   status-success: "{colors.green-700}"
   status-warning: "{colors.amber-900}"
   status-danger: "{colors.red-700}"
+  status-danger-text: "#d32f2f"
+  status-danger-surface: "{colors.red-100}"
+  status-danger-border: "#d32f2f"
 typography:
   heading-72:
     fontFamily: Noto Sans SC

package/contracts/overlay-shadow-migration.md

@@ -27,7 +27,7 @@ Decision date: 2026-08-26
 
 **为什么环境层要降不透明度**：新增的接触层已经补上了元件根部的密度。若环境层沿用原不透明度，两层叠加后整体偏重，浮层看起来像是"脏"了而不是"浮起来"。popover 16%→14%、modal 32%→28% 是为抵消这部分叠加。
 
-`--q1-shadow-focus` 不在本次范围内：焦点环是独立语义，不参与光照模型，保持单层。
+`--q1-shadow-focus` 不在本次浮层阴影迁移范围内：焦点环是独立语义，不参与光照模型。其后续双层对比环见 `contracts/token-naming.md`。
 
 方向性面板（Drawer / Sheet）的阴影在组件内自持，不消费这两个 token，因此不受影响。
 
@@ -78,5 +78,5 @@ q1travel-web 当前停留在 0.7.3，与本仓 0.9.0 之间还隔着其他变更
 
 - 不修改 q1travel-web，不代下游提交。
 - 不新增第三档阴影，不为 Drawer / Sheet 引入共享阴影 token。
-- 不改动 `--q1-shadow-focus`。
+- 本次浮层阴影迁移不改动 `--q1-shadow-focus`；后续焦点环调整独立进行。
 - 不在本合同内处理 `contracts/interface-guidelines.md` Design 章节的其余条款（嵌套圆角见 #141，色相一致见 #142）。

package/contracts/table-migration.md

@@ -95,7 +95,11 @@ requires each capability.
   receives the sort-change event, and owns data ordering or server requests.
 - A sortable heading is a native button inside the heading cell. The heading
   exposes `aria-sort` with the applicable `none`, `ascending`, or `descending`
-  value. The sort icon is decorative and is not the only state cue.
+  value for the current state. Its button name describes the direction after
+  activation. A column may provide `nextSortDirection` when the consumer's
+  sorting policy differs from the default ascending-first toggle; that same
+  direction is sent to `onSortChange`. The sort icon is decorative and is not
+  the only state cue.
 - Table does not silently sort data, fetch a new page, mutate URL/query state,
   or fabricate a total while sorting.
 

package/contracts/token-naming.md

@@ -94,7 +94,9 @@ Examples:
 - `--q1-shadow-focus`
 - `--q1-shadow-focus-danger`
 
-`--q1-shadow-focus-danger` is the ring the field family already draws on an invalid control, now named: one step wider and one step lighter than `--q1-shadow-focus`, because red at the same opacity swallows the 1px red border it sits on. Both rings resolve their color through a semantic token, so light and dark need no separate declaration.
+`--q1-color-status-danger` is the bright red for fills and strokes only; use `--q1-color-status-danger-text` for text and weak notices without an underline. `--q1-color-status-danger-surface` and `--q1-color-status-danger-border` keep the background and stroke roles separate. `--q1-color-text-soft`, `--q1-color-border-subtle`, and `--q1-color-overlay-scrim` cover tertiary text, quiet separators, and overlay scrims.
+
+`--q1-color-focus` resolves to `--q1-color-primary-700`. `--q1-shadow-focus` draws a 1px canvas contrast ring and a 3px focus color ring, keeping keyboard focus visible against a purple control or dark surface. `--q1-shadow-focus-danger` remains the field family's invalid-control ring and does not change with this focus-ring migration.
 
 ### Component Tokens
 

package/dist-pkg/design-system.d.ts

@@ -1781,6 +1781,8 @@ export declare type TableColumn<T> = {
     render: (row: T, rowIndex: number) => ReactNode;
     sortable?: boolean;
     sortLabel?: string;
+    /** 下次点击此列时的排序方向；未提供时沿用默认的升序优先切换。 */
+    nextSortDirection?: TableSortDirection;
     /**
      * 横向对齐，默认 `start`。数值列用 `end`——个位对齐个位，一眼可比大小与位数；
      * 左对齐的数字列要逐行数位数才知道谁大。表头随单元格一起对齐，否则列会读成两栏。

package/dist-pkg/design-system.js

@@ -3447,8 +3447,11 @@ function Is({
   }, []);
   Z(() => {
     const R = D.current !== r;
-    D.current = r, k((j) => R ? r.trim() ? x[0]?.key : void 0 : x.some((G) => G.key === j) ? j : r.trim() ? x[0]?.key : void 0);
-  }, [x, r]), Z(() => {
+    D.current = r, k((j) => {
+      if (e)
+        return R ? r.trim() ? x[0]?.key : void 0 : x.some((G) => G.key === j) ? j : r.trim() ? x[0]?.key : void 0;
+    });
+  }, [x, e, r]), Z(() => {
     if (!e || !I) return;
     p.current?.querySelector('[data-search-dialog-active="true"]')?.scrollIntoView({ block: "nearest" });
   }, [e, I]), Z(() => {
@@ -8106,10 +8109,10 @@ function bc({
     !E || Wn(A.target, A.currentTarget) || A.key !== "Enter" && A.key !== " " || (A.preventDefault(), E.onActivate(T.row, T.rowIndex));
   }
   function j(T) {
-    return f === T && _ === "asc" ? "desc" : "asc";
+    return T.nextSortDirection ?? (f === T.key && _ === "asc" ? "desc" : "asc");
   }
   function G(T) {
-    N && N(T, j(T));
+    N && N(T.key, j(T));
   }
   function ee(T) {
     if (T.sortable)
@@ -8134,14 +8137,14 @@ function bc({
         }
       ) }) }) : null,
       t.map((T) => {
-        const A = ee(T), Y = T.sortable && f === T.key && _ ? _ === "asc" ? "升序" : "降序" : null, J = j(T.key) === "asc" ? "升序" : "降序", te = Y ? /* @__PURE__ */ n("span", { className: "table__sort-state", children: Y }) : null, B = T.sortLabel ?? (typeof T.header == "string" ? T.header : T.key), H = T.sortable ? /* @__PURE__ */ w(
+        const A = ee(T), Y = T.sortable && f === T.key && _ ? _ === "asc" ? "升序" : "降序" : null, J = j(T) === "asc" ? "升序" : "降序", te = Y ? /* @__PURE__ */ n("span", { className: "table__sort-state", children: Y }) : null, B = T.sortLabel ?? (typeof T.header == "string" ? T.header : T.key), H = T.sortable ? /* @__PURE__ */ w(
           "button",
           {
             type: "button",
             className: "table__sort",
-            "aria-label": `按${B}${J}排序`,
+            "aria-label": `点击后将按${B}${J}排序`,
             disabled: !N,
-            onClick: N ? () => G(T.key) : void 0,
+            onClick: N ? () => G(T) : void 0,
             children: [
               T.header,
               te

package/dist-pkg/style.css

@@ -122,15 +122,23 @@
   --q1-color-bg-media: #0a0a0a;
   --q1-color-text-on-media: #ffffff;
   --q1-color-border: var(--q1-color-gray-400);
+  --q1-color-border-subtle: rgba(203, 213, 225, 0.82);
   --q1-color-border-strong: var(--q1-color-gray-500);
   --q1-color-text-primary: var(--q1-color-gray-1000);
   --q1-color-text-secondary: var(--q1-color-gray-900);
   --q1-color-text-muted: #6b6b6b;
+  --q1-color-text-soft: #6e6e73;
+  --q1-color-overlay-scrim: rgba(2, 6, 23, 0.44);
+  --q1-color-focus: var(--q1-color-primary-700);
   --q1-color-selection-bg: var(--q1-color-text-primary);
   --q1-color-selection-fg: var(--q1-color-bg-canvas);
   --q1-color-status-success: var(--q1-color-green-700);
   --q1-color-status-warning: var(--q1-color-amber-900);
   --q1-color-status-danger: var(--q1-color-red-700);
+  /* status-danger 是亮红，只用于填充和描边；文字或无下划线弱提示使用 danger-text。 */
+  --q1-color-status-danger-text: #d32f2f;
+  --q1-color-status-danger-surface: var(--q1-color-red-100);
+  --q1-color-status-danger-border: #d32f2f;
   --q1-color-status-info: var(--q1-color-blue-700);
   --q1-font-sans: "Noto Sans SC", "PingFang SC", "Microsoft YaHei UI", sans-serif;
   --q1-font-mono: "Geist Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
@@ -232,7 +240,7 @@
   --q1-radius-5: 16px;
   /* 胶囊：半径大于任何可能的半高即可，具体数值不参与计算。 */
   --q1-radius-full: 9999px;
-  --q1-shadow-focus: 0 0 0 3px color-mix(in srgb, var(--q1-color-primary-700) 22%, transparent);
+  --q1-shadow-focus: 0 0 0 1px var(--q1-color-bg-canvas), 0 0 0 3px var(--q1-color-focus);
   /* 危险态环：字段家族错误态与危险动作共用。比默认焦点环宽一档、淡一档——红色本身已经足够响，
  同样浓度会盖过 1px 红描边。取值沿用字段错误态的既有标定，status-danger 明暗各有取值。 */
   --q1-shadow-focus-danger: 0 0 0 4px color-mix(in srgb, var(--q1-color-status-danger) 16%, transparent);
@@ -374,15 +382,22 @@
   --q1-color-bg-media: #0a0a0a;
   --q1-color-text-on-media: #ffffff;
   --q1-color-border: var(--q1-color-gray-200);
+  --q1-color-border-subtle: #1f1f1f;
   /* 降档：控件描边不再泛白。 */
   --q1-color-border-strong: var(--q1-color-gray-400);
   --q1-color-border-overlay: color-mix(in srgb, #ffffff 14%, transparent);
   --q1-color-text-primary: var(--q1-color-gray-1000);
   --q1-color-text-secondary: var(--q1-color-gray-900);
   --q1-color-text-muted: var(--q1-color-gray-700);
+  --q1-color-text-soft: #9a9a9c;
+  --q1-color-overlay-scrim: rgba(2, 6, 23, 0.44);
+  --q1-color-focus: var(--q1-color-primary-700);
   --q1-color-status-success: var(--q1-color-green-900);
   --q1-color-status-warning: var(--q1-color-amber-700);
   --q1-color-status-danger: var(--q1-color-red-900);
+  --q1-color-status-danger-text: #ef5350;
+  --q1-color-status-danger-surface: var(--q1-color-red-100);
+  --q1-color-status-danger-border: #ef5350;
   --q1-color-status-info: var(--q1-color-blue-900);
   /* Override only the press state: the dark Primary ramp runs left-dark to
  right-light, so Primary-900 is a light tint. Point action-press at a darker
@@ -6399,7 +6414,7 @@ a.q1-card:focus-visible {
 }
 .collapse__trigger:focus-visible {
   outline: none;
-  box-shadow: inset var(--q1-shadow-focus);
+  box-shadow: inset 0 0 0 1px var(--q1-color-bg-canvas), inset 0 0 0 3px var(--q1-color-focus);
 }
 .collapse__title {
   font-size: 14px;

package/dist-pkg/tokens.css

@@ -118,15 +118,22 @@
   --q1-color-bg-media: #0a0a0a;
   --q1-color-text-on-media: #ffffff;
   --q1-color-border: var(--q1-color-gray-400);
+  --q1-color-border-subtle: rgba(203, 213, 225, 0.82);
   --q1-color-border-strong: var(--q1-color-gray-500);
   --q1-color-text-primary: var(--q1-color-gray-1000);
   --q1-color-text-secondary: var(--q1-color-gray-900);
   --q1-color-text-muted: #6b6b6b;
+  --q1-color-text-soft: #6e6e73;
+  --q1-color-overlay-scrim: rgba(2, 6, 23, 0.44);
+  --q1-color-focus: var(--q1-color-primary-700);
   --q1-color-selection-bg: var(--q1-color-text-primary);
   --q1-color-selection-fg: var(--q1-color-bg-canvas);
   --q1-color-status-success: var(--q1-color-green-700);
   --q1-color-status-warning: var(--q1-color-amber-900);
   --q1-color-status-danger: var(--q1-color-red-700);
+  --q1-color-status-danger-text: #d32f2f;
+  --q1-color-status-danger-surface: var(--q1-color-red-100);
+  --q1-color-status-danger-border: #d32f2f;
   --q1-color-status-info: var(--q1-color-blue-700);
   --q1-font-sans: "Noto Sans SC", "PingFang SC", "Microsoft YaHei UI", sans-serif;
   --q1-font-mono: "Geist Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
@@ -220,7 +227,7 @@
   --q1-radius-4: 12px;
   --q1-radius-5: 16px;
   --q1-radius-full: 9999px;
-  --q1-shadow-focus: 0 0 0 3px color-mix(in srgb, var(--q1-color-primary-700) 22%, transparent);
+  --q1-shadow-focus: 0 0 0 1px var(--q1-color-bg-canvas), 0 0 0 3px var(--q1-color-focus);
   --q1-shadow-focus-danger: 0 0 0 4px color-mix(in srgb, var(--q1-color-status-danger) 16%, transparent);
   --q1-shadow-popover: 0 1px 3px color-mix(in srgb, var(--q1-color-shadow) 10%, transparent),
     0 8px 28px color-mix(in srgb, var(--q1-color-shadow) 14%, transparent);
@@ -358,15 +365,22 @@
   --q1-color-bg-media: #0a0a0a;
   --q1-color-text-on-media: #ffffff;
   --q1-color-border: var(--q1-color-gray-200);
+  --q1-color-border-subtle: #1f1f1f;
   --q1-color-border-strong: var(--q1-color-gray-400);
   --q1-color-text-primary: var(--q1-color-gray-1000);
   --q1-color-text-secondary: var(--q1-color-gray-900);
   --q1-color-text-muted: var(--q1-color-gray-700);
+  --q1-color-text-soft: #9a9a9c;
+  --q1-color-overlay-scrim: rgba(2, 6, 23, 0.44);
+  --q1-color-focus: var(--q1-color-primary-700);
   --q1-color-selection-bg: var(--q1-color-text-primary);
   --q1-color-selection-fg: var(--q1-color-bg-canvas);
   --q1-color-status-success: var(--q1-color-green-900);
   --q1-color-status-warning: var(--q1-color-amber-700);
   --q1-color-status-danger: var(--q1-color-red-900);
+  --q1-color-status-danger-text: #ef5350;
+  --q1-color-status-danger-surface: var(--q1-color-red-100);
+  --q1-color-status-danger-border: #ef5350;
   --q1-color-status-info: var(--q1-color-blue-900);
   --q1-font-sans: "Noto Sans SC", "PingFang SC", "Microsoft YaHei UI", sans-serif;
   --q1-font-mono: "Geist Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
@@ -460,7 +474,7 @@
   --q1-radius-4: 12px;
   --q1-radius-5: 16px;
   --q1-radius-full: 9999px;
-  --q1-shadow-focus: 0 0 0 3px color-mix(in srgb, var(--q1-color-primary-700) 22%, transparent);
+  --q1-shadow-focus: 0 0 0 1px var(--q1-color-bg-canvas), 0 0 0 3px var(--q1-color-focus);
   --q1-shadow-focus-danger: 0 0 0 4px color-mix(in srgb, var(--q1-color-status-danger) 16%, transparent);
   --q1-shadow-popover: 0 1px 3px color-mix(in srgb, var(--q1-color-shadow) 10%, transparent),
     0 8px 28px color-mix(in srgb, var(--q1-color-shadow) 14%, transparent);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@q1travel/design-system",
-  "version": "0.17.0",
+  "version": "0.17.1",
   "private": false,
   "type": "module",
   "repository": {