@q1travel/design-system 0.17.2 → 0.18.0

package/dist-pkg/style.css

@@ -3,9 +3,10 @@
   /* color-scheme 不在此声明：tokens.css 随包发布，全局副作用交消费方应用掌管（门户侧在 global.css）。 */
   --q1-color-background-100: #ffffff;
   --q1-color-background-200: #fafafa;
+  --q1-color-gray-50: #fafafa;
   --q1-color-gray-100: #f2f2f2;
-  --q1-color-gray-200: #ebebeb;
-  --q1-color-gray-300: #e6e6e6;
+  --q1-color-gray-200: #eeeeee;
+  --q1-color-gray-300: #ebebeb;
   --q1-color-gray-400: #eaeaea;
   --q1-color-gray-500: #c9c9c9;
   --q1-color-gray-600: #a8a8a8;
@@ -119,27 +120,45 @@
   --q1-color-bg-canvas: var(--q1-color-background-100);
   --q1-color-bg-subtle: var(--q1-color-background-200);
   --q1-color-bg-panel: var(--q1-color-background-100);
+  --q1-color-bg-sunken: var(--q1-color-background-100);
+  --q1-color-bg-raised: var(--q1-color-background-100);
+  --q1-color-bg-overlay: var(--q1-color-background-100);
+  --q1-color-bg-hover: color-mix(in srgb, var(--q1-color-text-primary) 4%, transparent);
+  --q1-color-bg-selected: var(--q1-color-primary-100);
+  --q1-color-bg-inverse: var(--q1-color-gray-1000);
+  --q1-color-text-on-inverse: var(--q1-color-background-100);
   --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-border-active: var(--q1-color-primary-700);
   --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-text-disabled: #b7b7b7;
   --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-success-text: var(--q1-color-green-900);
+  --q1-color-status-success-surface: var(--q1-color-green-100);
+  --q1-color-status-success-border: #a8d9ad;
   --q1-color-status-warning: var(--q1-color-amber-900);
+  --q1-color-status-warning-text: var(--q1-color-amber-900);
+  --q1-color-status-warning-surface: var(--q1-color-amber-100);
+  --q1-color-status-warning-border: #edc47d;
   --q1-color-status-danger: var(--q1-color-red-700);
   /* status-danger 是亮红，只用于填充和描边；文字或无下划线弱提示使用 danger-text。 */
-  --q1-color-status-danger-text: #d32f2f;
+  --q1-color-status-danger-text: #c62828;
   --q1-color-status-danger-surface: var(--q1-color-red-100);
-  --q1-color-status-danger-border: #d32f2f;
+  --q1-color-status-danger-border: #f5b9b8;
   --q1-color-status-info: var(--q1-color-blue-700);
+  --q1-color-status-info-text: #0064b8;
+  --q1-color-status-info-surface: var(--q1-color-blue-100);
+  --q1-color-status-info-border: #abcff0;
   --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;
   --q1-font-weight-regular: 400;
@@ -240,7 +259,9 @@
   --q1-radius-5: 16px;
   /* 胶囊：半径大于任何可能的半高即可，具体数值不参与计算。 */
   --q1-radius-full: 9999px;
-  --q1-shadow-focus: 0 0 0 1px var(--q1-color-bg-canvas), 0 0 0 3px var(--q1-color-focus);
+  --q1-shadow-focus: 0 0 0 2px var(--q1-color-bg-canvas), 0 0 0 4px var(--q1-color-focus);
+  --q1-shadow-focus-input: inset 0 0 0 1px var(--q1-color-border-active), 0 0 0 3px color-mix(in srgb, var(--q1-color-focus) 24%, transparent);
+  --q1-shadow-focus-input-danger: inset 0 0 0 1px var(--q1-color-status-danger), 0 0 0 3px color-mix(in srgb, var(--q1-color-status-danger) 24%, transparent);
   /* 危险态环：字段家族错误态与危险动作共用。比默认焦点环宽一档、淡一档——红色本身已经足够响，
  同样浓度会盖过 1px 红描边。取值沿用字段错误态的既有标定，status-danger 明暗各有取值。 */
   --q1-shadow-focus-danger: 0 0 0 4px color-mix(in srgb, var(--q1-color-status-danger) 16%, transparent);
@@ -274,17 +295,18 @@
 
 :root[data-theme='dark'] {
   /* 画布抬灰：表面自带浮起感，纯黑仅留给 background-200 底壳。 */
-  --q1-color-background-100: #0a0a0a;
+  --q1-color-background-100: #121212;
   --q1-color-background-200: #000000;
+  --q1-color-gray-50: #161616;
   --q1-color-gray-100: #1a1a1a;
-  --q1-color-gray-200: #1f1f1f;
-  --q1-color-gray-300: #292929;
-  --q1-color-gray-400: #2e2e2e;
-  --q1-color-gray-500: #454545;
-  --q1-color-gray-600: #878787;
-  --q1-color-gray-700: #8f8f8f;
-  --q1-color-gray-800: #7d7d7d;
-  --q1-color-gray-900: #a0a0a0;
+  --q1-color-gray-200: #222222;
+  --q1-color-gray-300: #2b2b2b;
+  --q1-color-gray-400: #333333;
+  --q1-color-gray-500: #585858;
+  --q1-color-gray-600: #7d7d7d;
+  --q1-color-gray-700: #878787;
+  --q1-color-gray-800: #8f8f8f;
+  --q1-color-gray-900: #b4b4b4;
   --q1-color-gray-1000: #ededed;
   /* Dark Primary ramp — interpolated between the dark Blue and Purple ramps
  (Primary #533afd sits between them in hue), left-dark to right-light to
@@ -377,28 +399,46 @@
   --q1-color-scale-green: var(--q1-color-green-700);
   --q1-color-scale-teal: var(--q1-color-teal-700);
   --q1-color-bg-canvas: var(--q1-color-background-100);
-  --q1-color-bg-subtle: var(--q1-color-gray-100);
-  --q1-color-bg-panel: var(--q1-color-background-100);
+  --q1-color-bg-subtle: var(--q1-color-gray-50);
+  --q1-color-bg-panel: var(--q1-color-gray-100);
+  --q1-color-bg-sunken: var(--q1-color-bg-subtle);
+  --q1-color-bg-raised: var(--q1-color-gray-200);
+  --q1-color-bg-overlay: var(--q1-color-gray-300);
+  --q1-color-bg-hover: color-mix(in srgb, var(--q1-color-text-primary) 6%, transparent);
+  --q1-color-bg-selected: #1f1e38;
+  --q1-color-bg-inverse: var(--q1-color-gray-1000);
+  --q1-color-text-on-inverse: #0a0a0a;
   --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: var(--q1-color-gray-400);
+  --q1-color-border-subtle: #2a2a2a;
   /* 降档：控件描边不再泛白。 */
   --q1-color-border-strong: var(--q1-color-gray-400);
+  --q1-color-border-active: var(--q1-color-primary-900);
   --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-muted: var(--q1-color-gray-800);
   --q1-color-text-soft: #9a9a9c;
+  --q1-color-text-disabled: var(--q1-color-gray-500);
   --q1-color-overlay-scrim: rgba(2, 6, 23, 0.44);
-  --q1-color-focus: var(--q1-color-primary-700);
+  --q1-color-focus: var(--q1-color-primary-900);
   --q1-color-status-success: var(--q1-color-green-900);
+  --q1-color-status-success-text: var(--q1-color-green-900);
+  --q1-color-status-success-surface: var(--q1-color-green-100);
+  --q1-color-status-success-border: #255a2f;
   --q1-color-status-warning: var(--q1-color-amber-700);
+  --q1-color-status-warning-text: #fac053;
+  --q1-color-status-warning-surface: var(--q1-color-amber-100);
+  --q1-color-status-warning-border: #754b10;
   --q1-color-status-danger: var(--q1-color-red-900);
-  --q1-color-status-danger-text: #ef5350;
+  --q1-color-status-danger-text: #f97770;
   --q1-color-status-danger-surface: var(--q1-color-red-100);
-  --q1-color-status-danger-border: #ef5350;
+  --q1-color-status-danger-border: #7e2f31;
   --q1-color-status-info: var(--q1-color-blue-900);
+  --q1-color-status-info-text: var(--q1-color-blue-900);
+  --q1-color-status-info-surface: var(--q1-color-blue-100);
+  --q1-color-status-info-border: #194f81;
   /* 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
  step so default -> hover -> press keeps getting darker (hover still
@@ -461,8 +501,9 @@
 }
 
 .button:focus-visible {
-  outline: none;
-  box-shadow: var(--q1-shadow-focus);
+  outline: 2px solid var(--q1-color-focus);
+  outline-offset: 2px;
+  box-shadow: none;
 }
 
 .button--primary {
@@ -591,7 +632,7 @@
 @media (hover: hover) and (pointer: fine) {
   .button:not(.button--icon):not(.button--selected):not(:disabled):not([aria-disabled='true']):hover {
     border-color: var(--q1-color-text-secondary);
-    background: var(--q1-color-bg-subtle);
+    background: var(--q1-color-bg-hover);
   }
 
   .button--primary:not(.button--icon):not(.button--selected):not(:disabled):not([aria-disabled='true']):hover {
@@ -848,7 +889,7 @@
   overflow: hidden;
   border: 1px solid var(--q1-input-border, var(--q1-color-border-strong));
   border-radius: var(--q1-radius-2);
-  background: var(--q1-input-bg, var(--q1-color-bg-panel));
+  background: var(--q1-input-bg, var(--q1-color-bg-sunken));
   font-size: var(--q1-font-size-label-14);
 }
 
@@ -858,25 +899,25 @@
   border-color: var(--q1-color-text-secondary);
 }
 
-.input-control:focus-within {
-  border-color: var(--q1-input-border-focus, var(--q1-color-action-primary));
-  box-shadow: var(--q1-input-focus-ring, var(--q1-shadow-focus));
+.input-control:has(.form-control:focus) {
+  border-color: var(--q1-input-border-focus, var(--q1-color-border-active));
+  box-shadow: var(--q1-input-focus-ring, var(--q1-shadow-focus-input));
 }
 
 .form-field--error .input-control,
 .input-control:has(.form-control[aria-invalid='true']) {
   border-color: var(--q1-color-status-danger);
-  box-shadow: var(--q1-shadow-focus-danger);
+  box-shadow: none;
 }
 
-.form-field--error .input-control:focus-within,
-.input-control:has(.form-control[aria-invalid='true']):focus-within {
+.form-field--error .input-control:has(.form-control:focus),
+.input-control:has(.form-control[aria-invalid='true']:focus) {
   border-color: var(--q1-color-status-danger);
-  box-shadow: var(--q1-input-focus-ring, var(--q1-shadow-focus));
+  box-shadow: var(--q1-shadow-focus-input-danger);
 }
 
 .input-control:has(.form-control:disabled) {
-  background: var(--q1-color-bg-subtle);
+  background: var(--q1-color-gray-100);
 }
 
 .input-control:has(.form-control:disabled) .input-control__prefix,
@@ -910,7 +951,6 @@
 }
 
 .input-control .form-control:focus,
-.input-control .form-control:focus-visible,
 .form-field--error .input-control .form-control,
 .input-control .form-control[aria-invalid='true'] {
   box-shadow: none;
@@ -920,7 +960,7 @@
   background: transparent;
 }
 
-/* 前后缀默认带灰块底色 + 朝向 input 一侧的 1px 分隔线；禁用态下外框同为 bg-subtle，块与外框同色成扁平、仅剩分隔线，属本品牌层取舍。 */
+/* 前后缀默认带灰块底色 + 朝向 input 一侧的 1px 分隔线；禁用态下外框改用 gray-100，前后缀块保持分隔线，属本品牌层取舍。 */
 .input-control__prefix {
   flex: none;
   display: inline-flex;
@@ -1048,7 +1088,7 @@
   min-height: 40px;
   border: 1px solid var(--q1-input-border, var(--q1-color-border-strong));
   border-radius: var(--q1-radius-2);
-  background: var(--q1-input-bg, var(--q1-color-bg-panel));
+  background: var(--q1-input-bg, var(--q1-color-bg-sunken));
   color: var(--q1-input-fg, var(--q1-color-text-primary));
   font: inherit;
   font-size: var(--q1-font-size-label-14);
@@ -1139,26 +1179,32 @@
   overflow: hidden;
   border: 1px solid var(--q1-color-border-strong);
   border-radius: var(--q1-radius-2);
-  background: var(--q1-color-bg-panel);
+  background: var(--q1-color-bg-sunken);
 }
 
 .textarea-control:hover:not(:has(.form-control:disabled)) {
   border-color: var(--q1-color-text-secondary);
 }
 
-.textarea-control:focus-within {
-  border-color: var(--q1-color-action-primary);
-  box-shadow: var(--q1-shadow-focus);
+.textarea-control:has(.form-control:focus) {
+  border-color: var(--q1-color-border-active);
+  box-shadow: var(--q1-shadow-focus-input);
 }
 
 .form-field--error .textarea-control,
 .textarea-control:has(.form-control[aria-invalid='true']) {
   border-color: var(--q1-color-status-danger);
-  box-shadow: var(--q1-shadow-focus-danger);
+  box-shadow: none;
+}
+
+.form-field--error .textarea-control:has(.form-control:focus),
+.textarea-control:has(.form-control[aria-invalid='true']:focus) {
+  border-color: var(--q1-color-status-danger);
+  box-shadow: var(--q1-shadow-focus-input-danger);
 }
 
 .textarea-control:has(.form-control:disabled) {
-  background: var(--q1-color-bg-subtle);
+  background: var(--q1-color-gray-100);
 }
 
 /* 尺寸档圆角随内部控件对齐（同 input-control 的 :has 尺寸档规则）。 */
@@ -1177,7 +1223,6 @@
 }
 
 .textarea-control .form-control:focus,
-.textarea-control .form-control:focus-visible,
 .form-field--error .textarea-control .form-control,
 .textarea-control .form-control[aria-invalid='true'] {
   box-shadow: none;
@@ -1211,37 +1256,31 @@
   border-color: var(--q1-color-text-secondary);
 }
 
-/* 焦点态自带 `outline: none`（见 .form-control 基类），消费方**不需要**再写一遍——
-   实测那 18 处焦点环覆写全都多写了这一行，因为从调用点看不到组件内部已经处理过。
-   文本输入用 :focus 与 :focus-visible 行为一致：规范规定文本输入获焦时 :focus-visible
-   无条件匹配，焦点环在点击时也该出现，否则用户不知道自己在往哪儿打字。 */
+/* 输入类指针与键盘焦点一致，边框与半透明光晕紧贴。 */
 .form-control:focus,
-.form-control:focus-visible,
 .q1-verification-code:has(input:focus-visible) .q1-verification-code__slot[data-active] {
-  border-color: var(--q1-input-border-focus, var(--q1-color-action-primary));
-  box-shadow: var(--q1-input-focus-ring, var(--q1-shadow-focus));
+  border-color: var(--q1-input-border-focus, var(--q1-color-border-active));
+  box-shadow: var(--q1-input-focus-ring, var(--q1-shadow-focus-input));
 }
 
-/* 错误态：纯红 1px 环 + 红 16% 的 4px 外晕，字段家族共享。 */
+/* 静止错误态保留红边，聚焦时加红色内描边与光晕。 */
 .form-field--error .form-control,
 .form-control[aria-invalid='true'],
 .q1-verification-code:has(input[aria-invalid='true']) .q1-verification-code__slot {
   border-color: var(--q1-color-status-danger);
-  box-shadow: var(--q1-shadow-focus-danger);
+  box-shadow: none;
 }
 
 .form-field--error > .form-control--input:focus,
-.form-field--error > .form-control--input:focus-visible,
-.form-control--input[aria-invalid='true']:not(.input-control .form-control):focus,
-.form-control--input[aria-invalid='true']:not(.input-control .form-control):focus-visible {
+.form-control--input[aria-invalid='true']:not(.input-control .form-control):focus {
   border-color: var(--q1-color-status-danger);
-  box-shadow: var(--q1-input-focus-ring, var(--q1-shadow-focus));
+  box-shadow: var(--q1-shadow-focus-input-danger);
 }
 
 /* 禁用态：底色抬灰而非降透明度；opacity:1 归零 Chrome UA 对禁用控件的默认 0.7。 */
 .q1-verification-code:has(input:disabled) .q1-verification-code__slot,
 .form-control:disabled {
-  background: var(--q1-color-bg-subtle);
+  background: var(--q1-color-gray-100);
   color: var(--q1-color-text-muted);
   cursor: not-allowed;
   opacity: 1;
@@ -1615,14 +1654,12 @@
  flex 居中，不是 padding 自然撑开)，radius-2(6px) 已一致；禁用项只换色不降 opacity（
  Radio/Note/Modal 已建立的「禁用色彩降级、opacity 恒 1」家族规则）。 */
 .menu__popup {
-  position: absolute;
-  z-index: 40;
   min-width: 200px;
   max-width: 20rem;
   padding: var(--q1-space-2);
   border: 1px solid var(--q1-color-border-overlay);
   border-radius: var(--q1-radius-4);
-  background: var(--q1-color-bg-panel);
+  background: var(--q1-color-bg-overlay);
   box-shadow: var(--q1-shadow-popover);
 }
 .menu__popup[data-state] {
@@ -1632,19 +1669,6 @@
     opacity var(--q1-duration-fast) var(--q1-ease-out),
     transform var(--q1-duration-fast) var(--q1-ease-out);
 }
-.menu__popup--start {
-  left: 0;
-}
-.menu__popup--end {
-  right: 0;
-}
-.menu__popup--bottom {
-  top: calc(100% + var(--q1-space-2));
-}
-/* 位置碰撞检测：向下展开会超出视口底部时翻转到触发器上方。 */
-.menu__popup--top {
-  bottom: calc(100% + var(--q1-space-2));
-}
 .menu__popup[data-state].menu__popup--start.menu__popup--bottom {
   transform-origin: left top;
 }
@@ -1708,7 +1732,7 @@
 .menu__item:hover:not([aria-disabled='true']),
 .menu__item:focus-visible {
   outline: none;
-  background: color-mix(in srgb, var(--q1-color-text-primary) 6%, transparent);
+  background: var(--q1-color-bg-hover);
 }
 .menu__item[aria-disabled='true'],
 .menu__item--locked {
@@ -3471,11 +3495,11 @@ a[href]:has(> .book):focus-visible {
   color: var(--q1-color-text-muted);
 }
 
-/* 错误边框保留校验含义，键盘焦点另用共享 focus token 表达当前位置。 */
-.form-field--error .select-control .form-control--select:focus-visible,
-.select-control .form-control--select[aria-invalid='true']:focus-visible {
+/* 错误边框保留校验含义，焦点再加同色内描边与光晕。 */
+.form-field--error .select-control .form-control--select:focus,
+.select-control .form-control--select[aria-invalid='true']:focus {
   border-color: var(--q1-color-status-danger);
-  box-shadow: var(--q1-input-focus-ring, var(--q1-shadow-focus));
+  box-shadow: var(--q1-shadow-focus-input-danger);
 }
 
 .select-control--prefixed .form-control {
@@ -3933,7 +3957,7 @@ a[href]:has(> .book):focus-visible {
   padding: var(--q1-space-4);
   border: 1px solid var(--q1-color-border-overlay);
   border-radius: var(--q1-radius-3);
-  background: var(--q1-color-bg-panel);
+  background: var(--q1-color-bg-overlay);
   box-shadow: var(--q1-shadow-popover);
 }
 
@@ -4191,15 +4215,11 @@ a[href]:has(> .book):focus-visible {
 }
 
 .cal-period__menu {
-  position: absolute;
-  top: calc(100% + var(--q1-space-2));
-  left: 0;
-  z-index: 20;
   display: flex;
   min-width: 380px;
   border: 1px solid var(--q1-color-border-overlay);
   border-radius: var(--q1-radius-3);
-  background: var(--q1-color-bg-panel);
+  background: var(--q1-color-bg-overlay);
   box-shadow: var(--q1-shadow-popover);
   overflow: hidden;
 }
@@ -5365,7 +5385,7 @@ a.context-card__trigger {
   padding: var(--q1-space-3) var(--q1-space-4);
   border: 1px solid var(--q1-color-border-overlay);
   border-radius: var(--q1-radius-2);
-  background: var(--q1-color-bg-panel);
+  background: var(--q1-color-bg-overlay);
   box-shadow: var(--q1-shadow-popover);
   opacity: 0;
   visibility: hidden;
@@ -5591,7 +5611,7 @@ a.context-card__trigger {
   /* 浮层家族规则：发丝边框 + 恒黑阴影（此前用 mask-opaque 混色躲过了阴影清扫）。 */
   border: 1px solid var(--q1-color-border-overlay);
   border-radius: var(--q1-radius-2);
-  background: var(--q1-color-bg-panel);
+  background: var(--q1-color-bg-overlay);
   box-shadow: var(--q1-shadow-popover);
   opacity: 0;
   visibility: hidden;
@@ -6293,7 +6313,7 @@ a.q1-card:focus-visible {
 }
 
 .show-more__trigger[data-pointer-pressed='true'] {
-  background: var(--q1-color-bg-subtle);
+  background: var(--q1-color-bg-hover);
   border-color: var(--q1-color-border-strong);
   color: var(--q1-color-text-primary);
   opacity: 0.96;
@@ -6413,8 +6433,8 @@ a.q1-card:focus-visible {
   background-color: color-mix(in srgb, var(--q1-color-text-primary) 8%, transparent);
 }
 .collapse__trigger:focus-visible {
-  outline: none;
-  box-shadow: inset 0 0 0 1px var(--q1-color-bg-canvas), inset 0 0 0 3px var(--q1-color-focus);
+  outline: 2px solid var(--q1-color-focus);
+  outline-offset: 2px;
 }
 .collapse__title {
   font-size: 14px;
@@ -7872,8 +7892,9 @@ a.q1-card:focus-visible {
 }
 .split-button__primary:focus-visible,
 .split-button__toggle:focus-visible {
-  outline: none;
-  box-shadow: var(--q1-shadow-focus);
+  outline: 2px solid var(--q1-color-focus);
+  outline-offset: 2px;
+  box-shadow: none;
   z-index: 1;
 }
 .split-button__icon {
@@ -8049,7 +8070,7 @@ a.q1-card:focus-visible {
   padding: 0 var(--q1-space-3);
   border: 1px solid var(--q1-color-border-strong);
   border-radius: var(--q1-radius-2);
-  background: var(--q1-color-bg-panel);
+  background: var(--q1-color-bg-sunken);
 }
 
 .combobox--sm .combobox__control {
@@ -8066,18 +8087,21 @@ a.q1-card:focus-visible {
   font-size: var(--q1-font-size-copy-16);
   line-height: var(--q1-line-height-copy-16);
 }
-.combobox__control:focus-within {
-  border-color: var(--q1-color-action-primary);
-  box-shadow: var(--q1-shadow-focus);
+.combobox__control:has(.combobox__input:focus) {
+  border-color: var(--q1-color-border-active);
+  box-shadow: var(--q1-shadow-focus-input);
 }
 .combobox--error .combobox__control {
-  border-color: var(--q1-color-red-700);
+  border-color: var(--q1-color-status-danger);
 }
-.combobox--error .combobox__control:focus-within {
-  box-shadow: 0 0 0 3px color-mix(in srgb, var(--q1-color-red-700) 24%, transparent);
+.combobox--error .combobox__control:has(.combobox__input:focus) {
+  border-color: var(--q1-color-status-danger);
+  box-shadow: var(--q1-shadow-focus-input-danger);
 }
 .combobox--disabled .combobox__control {
-  opacity: 0.55;
+  background: var(--q1-color-gray-100);
+  color: var(--q1-color-text-disabled);
+  opacity: 1;
 }
 .combobox--readonly .combobox__input {
   caret-color: transparent;
@@ -8122,11 +8146,6 @@ a.q1-card:focus-visible {
   box-shadow: var(--q1-shadow-focus);
 }
 .combobox__popup {
-  position: absolute;
-  top: calc(100% + var(--q1-space-1));
-  left: 0;
-  right: 0;
-  z-index: 40;
   max-height: 240px;
   overflow-y: auto;
   overflow-x: hidden;
@@ -8135,7 +8154,7 @@ a.q1-card:focus-visible {
   list-style: none;
   border: 1px solid var(--q1-color-border-overlay);
   border-radius: var(--q1-radius-3);
-  background: var(--q1-color-bg-panel);
+  background: var(--q1-color-bg-overlay);
   box-shadow: var(--q1-shadow-popover);
 }
 .combobox__listbox {
@@ -8232,16 +8251,22 @@ a.q1-card:focus-visible {
   padding: var(--q1-space-2) var(--q1-space-3);
   border: 1px solid var(--q1-color-border-strong);
   border-radius: var(--q1-radius-2);
-  background: var(--q1-color-bg-panel);
+  background: var(--q1-color-bg-sunken);
   color: var(--q1-color-text-primary);
   font: inherit;
   font-size: 14px;
   font-weight: 500;
   cursor: pointer;
 }
-.multi-select__trigger:focus-visible {
+.multi-select__trigger:focus {
   outline: none;
-  box-shadow: var(--q1-shadow-focus);
+  border-color: var(--q1-color-border-active);
+  box-shadow: var(--q1-shadow-focus-input);
+}
+.multi-select__trigger:disabled {
+  background: var(--q1-color-gray-100);
+  color: var(--q1-color-text-disabled);
+  opacity: 1;
 }
 .multi-select__placeholder {
   color: var(--q1-color-text-secondary);
@@ -8249,15 +8274,11 @@ a.q1-card:focus-visible {
 }
 /* 菜单 radius-4(12px)、padding space-2(8px)、行高 32px。 */
 .multi-select__menu {
-  position: absolute;
-  top: calc(100% + var(--q1-space-1));
-  left: 0;
-  z-index: 40;
   min-width: 240px;
   padding: var(--q1-space-2);
   border: 1px solid var(--q1-color-border-overlay);
   border-radius: var(--q1-radius-4);
-  background: var(--q1-color-bg-panel);
+  background: var(--q1-color-bg-overlay);
   box-shadow: var(--q1-shadow-popover);
 }
 .multi-select__bulk {
@@ -8429,7 +8450,7 @@ a.q1-card:focus-visible {
   overflow: hidden;
   border: 1px solid var(--q1-color-border-overlay);
   border-radius: var(--q1-radius-4);
-  background: var(--q1-color-bg-panel);
+  background: var(--q1-color-bg-raised);
   box-shadow: var(--q1-shadow-modal);
 }
 .search-dialog__search {
@@ -8705,7 +8726,7 @@ a.q1-card:focus-visible {
   max-width: 540px;
   border: 1px solid var(--q1-color-border-overlay);
   border-radius: var(--q1-radius-4);
-  background: var(--q1-color-bg-panel);
+  background: var(--q1-color-bg-raised);
   box-shadow: var(--q1-shadow-modal);
 }
 .modal__header {
@@ -8885,7 +8906,7 @@ a.q1-card:focus-visible {
   border: 1px solid var(--q1-color-border-overlay);
   border-bottom: 0;
   border-radius: var(--q1-radius-4) var(--q1-radius-4) 0 0;
-  background: var(--q1-color-bg-panel);
+  background: var(--q1-color-bg-raised);
   /* 方向性面板自持阴影（不走 --q1-shadow-popover/modal，两者的偏移都朝下）。
  两层同向朝上：接触层交代面板压在页面底边，环境层交代它离底面多高。 */
   box-shadow:
@@ -9030,7 +9051,7 @@ a.q1-card:focus-visible {
   flex-direction: column;
   border: 1px solid var(--q1-color-border-overlay);
   border-radius: var(--q1-radius-4);
-  background: var(--q1-color-bg-panel);
+  background: var(--q1-color-bg-raised);
   /* 方向性面板自持阴影，理由同 Drawer。接触层不带方向：Sheet 四个方向共用此规则，
  带方向的接触层在 top 档会朝错边。 */
   box-shadow:
@@ -10010,7 +10031,7 @@ a.q1-navigation__item[aria-disabled='true'] {
   overflow: hidden;
   border: 1px solid var(--q1-color-border-overlay);
   border-radius: var(--q1-radius-3);
-  background: var(--q1-color-bg-panel);
+  background: var(--q1-color-bg-overlay);
   color: var(--q1-color-text-primary);
   box-shadow: var(--q1-shadow-popover);
 }
@@ -10796,6 +10817,7 @@ a.q1-navigation__item[aria-disabled='true'] {
   color: var(--q1-color-action-text);
   text-decoration: underline;
   text-decoration-thickness: 1px;
+  text-decoration-color: color-mix(in srgb, currentColor 55%, transparent);
   text-underline-offset: 0.2em;
   text-decoration-skip-ink: auto;
   border-radius: var(--q1-radius-1);
@@ -10809,11 +10831,17 @@ a.q1-navigation__item[aria-disabled='true'] {
 
 .q1-link:hover {
   color: var(--q1-color-text-primary);
+  text-decoration-thickness: 2px;
+  text-decoration-color: currentColor;
 }
 
 .q1-link:focus-visible {
-  outline: 2px solid currentColor;
-  outline-offset: 2px;
+  outline: none;
+  color: var(--q1-color-text-primary);
+  text-decoration-thickness: 3px;
+  text-decoration-color: var(--q1-color-focus);
+  text-underline-offset: 0.25em;
+  transition: none;
 }
 
 /* muted：正文密度很高、链接很多的段落里，主色会把整段打成一片蓝。
@@ -10831,6 +10859,38 @@ a.q1-navigation__item[aria-disabled='true'] {
   text-decoration-thickness: 2px;
 }
 
+@media (forced-colors: active) {
+  :focus-visible,
+  .control-option:has(input:focus-visible) .control-option__visual,
+  .theme-switcher__option:has(input:focus-visible),
+  .radio-headless-card:has(input:focus-visible) {
+    outline: 2px solid Highlight;
+    outline-offset: 2px;
+  }
+
+  .form-control:focus,
+  .input-control:has(.form-control:focus),
+  .textarea-control:has(.form-control:focus),
+  .combobox__control:has(.combobox__input:focus),
+  .multi-select__trigger:focus,
+  .cal-period__trigger:focus,
+  .q1-verification-code:has(input:focus) {
+    outline: 2px solid Highlight;
+    outline-offset: 0;
+  }
+
+  .input-control .form-control:focus,
+  .textarea-control .form-control:focus,
+  .combobox__input:focus {
+    outline: none;
+  }
+
+  .q1-link:focus-visible {
+    outline: 2px solid Highlight;
+    outline-offset: 2px;
+  }
+}
+
 /* 无 href 的静态文本：不是链接，因此不给链接色也不给下划线，避免看起来能点。 */
 .q1-link--static {
   color: var(--q1-color-text-secondary);
@@ -10998,12 +11058,17 @@ a.q1-navigation__item[aria-disabled='true'] {
 .cal-field__clear:focus-visible,
 .cal-field__caret:focus-visible,
 .cal-inputs__apply:focus-visible,
-.cal-period__trigger:focus-visible,
 .cal-period__option:focus-visible {
   outline: none;
   box-shadow: var(--q1-shadow-focus);
 }
 
+.cal-period__trigger:focus {
+  outline: none;
+  border-color: var(--q1-color-border-active);
+  box-shadow: var(--q1-shadow-focus-input);
+}
+
 .calendar__nav-btn:disabled,
 .calendar__nav-btn:disabled:hover {
   background: transparent;
@@ -12339,10 +12404,9 @@ a.q1-navigation__item[aria-disabled='true'] {
     calc(100vw - 2 * var(--q1-space-2))
   );
   max-width: calc(100vw - 2 * var(--q1-space-2));
-  max-height: var(--dots-menu-max-height, calc(100vh - 2 * var(--q1-space-2)));
+  max-height: calc(100vh - 2 * var(--q1-space-2));
   overflow-y: auto;
   opacity: 1;
-  translate: var(--dots-menu-offset-x, 0) 0;
   transform: scale(1);
 }