@q1travel/design-system 0.7.2 → 0.7.3

package/dist-pkg/style.css

@@ -207,6 +207,8 @@
   --q1-shadow-popover: 0 8px 28px color-mix(in srgb, var(--q1-color-shadow) 16%, transparent);
   --q1-shadow-modal: 0 16px 48px color-mix(in srgb, var(--q1-color-shadow) 32%, transparent);
   --q1-z-popover: 1200;
+  --q1-z-overlay-root: 1300;
+  --q1-z-toast: 1400;
 }
 
 :root[data-theme='dark'] {
@@ -417,12 +419,47 @@
   opacity: 0.48;
 }
 
-.button--loading {
+.button--loading,
+.button--busy {
   cursor: progress;
 }
 
+.button__spinner-slot {
+  display: inline-flex;
+  flex: none;
+  align-items: center;
+}
+
 .button__spinner {
-  animation: button-spin 0.7s linear infinite;
+  animation: none;
+}
+
+.button__label-slot {
+  display: inline-grid;
+  min-width: 0;
+  align-items: center;
+}
+
+.button__label {
+  grid-area: 1 / 1;
+}
+
+.button__label--original-hidden {
+  opacity: 0;
+}
+
+.button__label--busy-hidden {
+  visibility: hidden;
+}
+
+.button__label--busy-visible {
+  visibility: visible;
+}
+
+@media (prefers-reduced-motion: no-preference) {
+  .button__spinner {
+    animation: button-spin 0.7s linear infinite;
+  }
 }
 
 .button__affix {
@@ -1258,6 +1295,12 @@
 
 /* 组件自身样式。发布进 npm 包，foundations.css 之后加载。 */
 
+[data-q1-portal='overlay'] {
+  position: relative;
+  z-index: var(--q1-z-overlay-root);
+  isolation: isolate;
+}
+
 @keyframes button-spin {
   to {
     transform: rotate(360deg);
@@ -2386,7 +2429,7 @@ a.breadcrumb__link:hover {
   padding: var(--q1-space-6);
 }
 
-/* 分段控件 Switch（对标外部参考 Switch）：一组互斥选项，选中段抬起；底层 q1-sr-only 单选组，方向键原生可用。 */
+/* 分段控件 Switch：一组互斥选项，采用 radiogroup/radio 复合语义，选中段抬起。 */
 .switch-control {
   display: inline-flex;
   align-items: center;
@@ -2411,6 +2454,9 @@ a.breadcrumb__link:hover {
   padding: 0 var(--q1-space-3);
   border-radius: var(--q1-radius-1);
   color: var(--q1-color-text-secondary);
+  border: 0;
+  background: transparent;
+  font: inherit;
   font-size: var(--q1-font-size-label-14);
   font-weight: var(--q1-font-weight-medium);
   line-height: var(--q1-line-height-label-14);
@@ -2422,22 +2468,22 @@ a.breadcrumb__link:hover {
   flex: 1 1 0;
 }
 
-.switch-control__option:hover {
+.switch-control__option:hover:not(:disabled) {
   color: var(--q1-color-text-primary);
 }
 
-.switch-control__option:has(input:checked) {
+.switch-control__option[aria-checked='true'] {
   background: var(--q1-color-bg-subtle);
   color: var(--q1-color-text-primary);
   box-shadow: inset 0 0 0 1px var(--q1-color-gray-400);
 }
 
-.switch-control__option:has(input:focus-visible) {
+.switch-control__option:focus-visible {
   outline: none;
   box-shadow: var(--q1-shadow-focus);
 }
 
-.switch-control__option:has(input:disabled) {
+.switch-control__option:disabled {
   cursor: not-allowed;
   opacity: 0.5;
 }
@@ -2457,6 +2503,16 @@ a.breadcrumb__link:hover {
   align-items: center;
 }
 
+.switch-control__meta {
+  color: var(--q1-color-text-muted);
+  font-size: var(--q1-font-size-label-13);
+  font-weight: var(--q1-font-weight-regular);
+}
+
+.switch-control__option[aria-checked='true'] .switch-control__meta {
+  color: var(--q1-color-text-secondary);
+}
+
 .tabs-root {
   display: grid;
   gap: var(--q1-space-4);
@@ -5783,8 +5839,8 @@ a.q1-card:focus-visible {
   position: fixed;
   right: var(--q1-space-6);
   bottom: var(--q1-space-6);
-  /* 高于 Modal/Drawer/Command Palette（均为 80）：全局通知即使在阻断式浮层打开时也应保持可见可点。 */
-  z-index: 90;
+  /* 通知保持可见；blocking overlay 打开时由 ToastProvider 禁止 action/close 交互。 */
+  z-index: var(--q1-z-toast);
   width: min(420px, calc(100vw - 2 * var(--q1-space-6)));
   height: var(--toast-stack-h, 0px);
 }
@@ -6947,7 +7003,6 @@ a.q1-card:focus-visible {
 .modal {
   position: fixed;
   inset: 0;
-  z-index: 80;
   display: flex;
   align-items: center;
   justify-content: center;
@@ -7125,7 +7180,6 @@ a.q1-card:focus-visible {
 .drawer {
   position: fixed;
   inset: 0;
-  z-index: 80;
   display: flex;
   flex-direction: column;
   justify-content: flex-end;
@@ -7210,7 +7264,6 @@ a.q1-card:focus-visible {
 .sheet__backdrop {
   position: fixed;
   inset: 0;
-  z-index: 69;
   background: color-mix(in srgb, var(--q1-color-shadow) 80%, transparent);
 }
 
@@ -7229,7 +7282,6 @@ a.q1-card:focus-visible {
 /* 悬浮圆角面板（对标外部参考形态）：四边不贴屏，inset 12 + 圆角 + 全边框。 */
 .sheet__panel {
   position: fixed;
-  z-index: 70;
   display: flex;
   flex-direction: column;
   border: 1px solid var(--q1-color-border-overlay);
@@ -8037,6 +8089,10 @@ a.q1-navigation__item[aria-disabled='true'] {
   opacity: 0.64;
 }
 
+.q1-context-switcher__item[aria-disabled='true'] .q1-context-switcher__description {
+  color: var(--q1-color-text-primary);
+}
+
 .q1-context-switcher__item[aria-checked='true'] .q1-context-switcher__item-label,
 .q1-context-switcher__item[aria-selected='true'] .q1-context-switcher__item-label {
   color: var(--q1-color-text-primary);
@@ -8057,7 +8113,7 @@ a.q1-navigation__item[aria-disabled='true'] {
   border-radius: var(--q1-radius-2);
   background: color-mix(in srgb, var(--q1-color-status-danger) 10%, transparent);
   padding: var(--q1-space-2) var(--q1-space-3);
-  color: var(--q1-color-status-danger);
+  color: color-mix(in srgb, var(--q1-color-status-danger) 70%, var(--q1-color-text-primary));
   font-size: var(--q1-font-size-label-13);
   line-height: var(--q1-line-height-label-13);
 }

package/dist-pkg/tokens.css

@@ -201,6 +201,8 @@
   --q1-shadow-popover: 0 8px 28px color-mix(in srgb, var(--q1-color-shadow) 16%, transparent);
   --q1-shadow-modal: 0 16px 48px color-mix(in srgb, var(--q1-color-shadow) 32%, transparent);
   --q1-z-popover: 1200;
+  --q1-z-overlay-root: 1300;
+  --q1-z-toast: 1400;
 }
 
 :root[data-theme='dark'] {
@@ -406,4 +408,6 @@
   --q1-shadow-popover: 0 8px 28px color-mix(in srgb, var(--q1-color-shadow) 16%, transparent);
   --q1-shadow-modal: 0 16px 48px color-mix(in srgb, var(--q1-color-shadow) 32%, transparent);
   --q1-z-popover: 1200;
+  --q1-z-overlay-root: 1300;
+  --q1-z-toast: 1400;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@q1travel/design-system",
-  "version": "0.7.2",
+  "version": "0.7.3",
   "private": false,
   "type": "module",
   "main": "./dist-pkg/design-system.js",
@@ -37,7 +37,7 @@
     "check:shell": "npm run sync:contracts && node scripts/check-shell.mjs && node scripts/check-token-package.mjs && npm run check:release-provenance",
     "check:browser:strictmode": "node scripts/check-browser.mjs --strictmode-ref",
     "check:browser": "npm run check:browser:strictmode && node scripts/check-browser.mjs",
-    "check:package-api": "node scripts/check-package-api.mjs",
+    "check:package-api": "node scripts/check-package-api.mjs && node --test scripts/check-controls-contract.test.mjs",
     "check:release-provenance": "node --test scripts/check-release-provenance.test.mjs && node scripts/check-release-provenance.mjs",
     "check": "npm run build && npm run check:shell && npm run check:browser",
     "build:lib": "vite build --config vite.lib.config.ts",