@q1travel/design-system 0.7.1 → 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);
@@ -7706,14 +7758,14 @@ a.q1-navigation__item[aria-disabled='true'] {
   border: 1px solid var(--q1-color-border);
   border-radius: var(--q1-radius-3);
   background: var(--q1-color-bg-panel);
-  padding: var(--q1-space-2) var(--q1-space-3);
+  padding: var(--q1-space-1) var(--q1-space-2);
   color: var(--q1-color-text-primary);
   font: inherit;
   text-align: start;
   cursor: pointer;
+  transition: transform 100ms cubic-bezier(.23, 1, .32, 1);
 }
 
-.q1-context-switcher__trigger:hover,
 .q1-context-switcher__trigger[aria-expanded='true'] {
   background: var(--q1-color-bg-subtle);
   border-color: var(--q1-color-border-strong);
@@ -7728,6 +7780,10 @@ a.q1-navigation__item[aria-disabled='true'] {
   box-shadow: var(--q1-shadow-focus);
 }
 
+.q1-context-switcher__popup[role='dialog']:has(> .q1-sr-only:focus) {
+  box-shadow: var(--q1-shadow-focus);
+}
+
 .q1-context-switcher__current,
 .q1-context-switcher__item-content {
   display: grid;
@@ -7746,16 +7802,16 @@ a.q1-navigation__item[aria-disabled='true'] {
 .q1-context-switcher__current-label,
 .q1-context-switcher__item-label {
   color: var(--q1-color-text-primary);
-  font-size: var(--q1-font-size-label-14);
+  font-size: var(--q1-font-size-label-13);
   font-weight: var(--q1-font-weight-medium);
-  line-height: var(--q1-line-height-label-14);
+  line-height: var(--q1-line-height-label-13);
 }
 
 .q1-context-switcher__description {
   color: var(--q1-color-text-secondary);
-  font-size: var(--q1-font-size-label-13);
+  font-size: 11px;
   font-weight: var(--q1-font-weight-regular);
-  line-height: var(--q1-line-height-label-13);
+  line-height: 14px;
 }
 
 .q1-context-switcher__avatar,
@@ -7769,9 +7825,24 @@ a.q1-navigation__item[aria-disabled='true'] {
   justify-content: center;
 }
 
+.q1-context-switcher__avatar {
+  width: 24px;
+  height: 24px;
+  overflow: hidden;
+  border-radius: var(--q1-radius-2);
+  background: var(--q1-color-bg-subtle);
+  color: var(--q1-color-text-secondary);
+  font-size: var(--q1-font-size-label-13);
+  font-weight: var(--q1-font-weight-semibold);
+}
+
+.q1-context-switcher__trigger .q1-context-switcher__avatar {
+  width: 28px;
+  height: 28px;
+}
+
 .q1-context-switcher__chevron {
   color: var(--q1-color-text-muted);
-  transition: transform 160ms ease;
 }
 
 .q1-context-switcher__trigger[aria-expanded='true'] .q1-context-switcher__chevron {
@@ -7793,25 +7864,50 @@ a.q1-navigation__item[aria-disabled='true'] {
 }
 
 .q1-context-switcher__popup[role='dialog'] {
+  width: min(17.5rem, calc(100vw - var(--q1-space-4)));
   opacity: 1;
   transform: translateY(0) scale(1);
-  transform-origin: top center;
-  transition:
-    opacity 150ms ease,
-    transform 150ms ease;
 }
 
-.q1-context-switcher__popup[role='dialog'][data-side='top'] {
-  transform-origin: bottom center;
+.q1-context-switcher__popup[role='dialog'][data-open-modality='pointer'] {
+  transition-property: opacity, transform;
+  transition-duration: 140ms;
+  transition-timing-function: cubic-bezier(.23, 1, .32, 1);
+}
+
+.q1-context-switcher__popup[role='dialog'][data-open-modality='keyboard'] {
+  transition: none;
+}
+
+.q1-context-switcher__popup[role='dialog'][data-side='bottom'][dir='ltr'][data-align='start'],
+.q1-context-switcher__popup[role='dialog'][data-side='bottom'][dir='rtl'][data-align='end'] {
+  transform-origin: top left;
+}
+
+.q1-context-switcher__popup[role='dialog'][data-side='bottom'][dir='ltr'][data-align='end'],
+.q1-context-switcher__popup[role='dialog'][data-side='bottom'][dir='rtl'][data-align='start'] {
+  transform-origin: top right;
+}
+
+.q1-context-switcher__popup[role='dialog'][data-side='top'][dir='ltr'][data-align='start'],
+.q1-context-switcher__popup[role='dialog'][data-side='top'][dir='rtl'][data-align='end'] {
+  transform-origin: bottom left;
+}
+
+.q1-context-switcher__popup[role='dialog'][data-side='top'][dir='ltr'][data-align='end'],
+.q1-context-switcher__popup[role='dialog'][data-side='top'][dir='rtl'][data-align='start'] {
+  transform-origin: bottom right;
 }
 
 @starting-style {
-  .q1-context-switcher__popup[role='dialog'] {
+  .q1-context-switcher__popup[role='dialog'][data-open-modality='pointer'][data-side='bottom'] {
     opacity: 0;
+    transform: translateY(-2px) scale(.98);
   }
 
-  body:not(:has(.q1-context-switcher__trigger:focus-visible)) .q1-context-switcher__popup[role='dialog'] {
-    transform: translateY(-2px) scale(.98);
+  .q1-context-switcher__popup[role='dialog'][data-open-modality='pointer'][data-side='top'] {
+    opacity: 0;
+    transform: translateY(2px) scale(.98);
   }
 }
 
@@ -7819,7 +7915,7 @@ a.q1-navigation__item[aria-disabled='true'] {
   min-height: 0;
   overflow-y: auto;
   overscroll-behavior: contain;
-  padding: var(--q1-space-2);
+  padding: var(--q1-space-1);
 }
 
 .q1-context-switcher__popup[role='dialog'] .q1-context-switcher__groups {
@@ -7827,17 +7923,58 @@ a.q1-navigation__item[aria-disabled='true'] {
   overflow-y: hidden;
 }
 
+.q1-context-switcher__search {
+  position: relative;
+  display: flex;
+  align-items: center;
+  margin-block: var(--q1-space-1);
+}
+
+.q1-context-switcher__scope-summary {
+  display: flex;
+  min-width: 0;
+  min-height: 40px;
+  align-items: center;
+  gap: var(--q1-space-2);
+  padding: var(--q1-space-1) var(--q1-space-2);
+}
+
+.q1-context-switcher__search-icon {
+  position: absolute;
+  inset-inline-start: var(--q1-space-2);
+  z-index: 1;
+  display: inline-flex;
+  color: var(--q1-color-text-muted);
+  pointer-events: none;
+}
+
 .q1-context-switcher__popup[role='dialog'] input[type='search'] {
   width: 100%;
   min-width: 0;
-  min-height: 44px;
-  margin-block: var(--q1-space-1);
-  border: 1px solid var(--q1-color-border);
+  min-height: 32px;
+  border: 1px solid transparent;
   border-radius: var(--q1-radius-2);
-  background: var(--q1-color-bg-panel);
-  padding: var(--q1-space-2) var(--q1-space-3);
+  background: transparent;
+  padding-block: var(--q1-space-1);
+  padding-inline: calc(var(--q1-space-2) * 4);
   color: var(--q1-color-text-primary);
-  font: inherit;
+  font-size: var(--q1-font-size-label-13);
+  font-weight: var(--q1-font-weight-regular);
+  line-height: var(--q1-line-height-label-13);
+}
+
+.q1-context-switcher__search-shortcut {
+  position: absolute;
+  inset-inline-end: var(--q1-space-2);
+  color: var(--q1-color-text-muted);
+  font-size: var(--q1-font-size-label-13);
+  font-weight: var(--q1-font-weight-medium);
+  line-height: var(--q1-line-height-label-13);
+  pointer-events: none;
+}
+
+.q1-context-switcher__search:focus-within .q1-context-switcher__search-shortcut {
+  visibility: hidden;
 }
 
 .q1-context-switcher__popup[role='dialog'] input[type='search']::placeholder {
@@ -7858,6 +7995,13 @@ a.q1-navigation__item[aria-disabled='true'] {
   color: var(--q1-color-text-secondary);
 }
 
+.q1-context-switcher__empty-description {
+  color: var(--q1-color-text-secondary);
+  font-size: var(--q1-font-size-label-13);
+  font-weight: var(--q1-font-weight-regular);
+  line-height: var(--q1-line-height-label-13);
+}
+
 .q1-context-switcher__group + .q1-context-switcher__group {
   margin-top: var(--q1-space-2);
   padding-top: var(--q1-space-2);
@@ -7870,9 +8014,9 @@ a.q1-navigation__item[aria-disabled='true'] {
   gap: var(--q1-space-2);
   padding: var(--q1-space-1) var(--q1-space-2);
   color: var(--q1-color-text-muted);
-  font-size: var(--q1-font-size-label-13);
-  font-weight: var(--q1-font-weight-semibold);
-  line-height: var(--q1-line-height-label-13);
+  font-size: 11px;
+  font-weight: var(--q1-font-weight-medium);
+  line-height: 14px;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
@@ -7887,30 +8031,57 @@ a.q1-navigation__item[aria-disabled='true'] {
   display: flex;
   width: 100%;
   min-width: 0;
-  min-height: 44px;
+  min-height: 36px;
   align-items: center;
   gap: var(--q1-space-2);
   border: 0;
   border-radius: var(--q1-radius-2);
   background: transparent;
-  padding: var(--q1-space-2);
+  padding: var(--q1-space-1) var(--q1-space-2);
   color: var(--q1-color-text-primary);
   font: inherit;
   text-align: start;
 }
 
+.q1-context-switcher__item:has(.q1-context-switcher__description) {
+  min-height: 40px;
+}
+
 .q1-context-switcher__item:not([aria-disabled='true']),
 .q1-context-switcher__action:not(:disabled) {
   cursor: pointer;
 }
 
-.q1-context-switcher__item:hover:not([aria-disabled='true']),
-.q1-context-switcher__action:hover:not(:disabled),
 .q1-context-switcher__item:focus-visible,
 .q1-context-switcher__action:focus-visible {
   background: var(--q1-color-bg-subtle);
 }
 
+.q1-context-switcher__item[role='option'][aria-selected='true'] {
+  background: color-mix(in srgb, var(--q1-color-action-primary) 8%, var(--q1-color-bg-panel));
+}
+
+.q1-context-switcher__item[role='option'][aria-selected='true']:focus-visible {
+  background: color-mix(in srgb, var(--q1-color-action-primary) 12%, var(--q1-color-bg-panel));
+}
+
+@media (hover: hover) and (pointer: fine) {
+  .q1-context-switcher__trigger:hover {
+    background: var(--q1-color-bg-subtle);
+    border-color: var(--q1-color-border-strong);
+  }
+
+  .q1-context-switcher__search:hover input[type='search'],
+  .q1-context-switcher__item:hover:not([aria-disabled='true']),
+  .q1-context-switcher__action:hover:not(:disabled) {
+    background: var(--q1-color-bg-subtle);
+  }
+
+  .q1-context-switcher__item[role='option'][aria-selected='true']:hover {
+    background: color-mix(in srgb, var(--q1-color-action-primary) 12%, var(--q1-color-bg-panel));
+  }
+}
+
 .q1-context-switcher__item[aria-disabled='true'],
 .q1-context-switcher__action:disabled {
   color: var(--q1-color-text-muted);
@@ -7918,8 +8089,16 @@ 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,
+.q1-context-switcher__item[aria-selected='true'] .q1-context-switcher__item-label {
+  color: var(--q1-color-text-primary);
+  font-weight: var(--q1-font-weight-semibold);
+}
+
 .q1-context-switcher__check {
   color: var(--q1-color-action-primary);
 }
@@ -7934,14 +8113,14 @@ 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);
 }
 
 .q1-context-switcher__footer {
   border-top: 1px solid var(--q1-color-border);
-  padding: var(--q1-space-2);
+  padding: var(--q1-space-1);
 }
 
 @keyframes q1-context-switcher-spin {
@@ -7949,10 +8128,15 @@ a.q1-navigation__item[aria-disabled='true'] {
 }
 
 @media (prefers-reduced-motion: reduce) {
-  .q1-context-switcher__popup[role='dialog'] {
+  .q1-context-switcher__trigger,
+  .q1-context-switcher__popup[role='dialog'][data-open-modality] {
     transition: none;
   }
 
+  .q1-context-switcher__trigger:active {
+    transform: none;
+  }
+
   .q1-context-switcher__chevron {
     transition: none;
   }
@@ -7961,3 +8145,28 @@ a.q1-navigation__item[aria-disabled='true'] {
     animation: none;
   }
 }
+
+@media (pointer: fine) and (prefers-reduced-motion: no-preference) {
+  .q1-context-switcher__trigger:active {
+    transform: scale(.985);
+  }
+}
+
+@media (max-width: 48rem), (pointer: coarse), (any-pointer: coarse) {
+  .q1-context-switcher__popup[role='dialog'] input[type='search'],
+  .q1-context-switcher__item,
+  .q1-context-switcher__scope-summary,
+  .q1-context-switcher__action {
+    min-height: 44px;
+  }
+
+  .q1-context-switcher__popup[role='dialog'] input[type='search'] {
+    font-size: var(--q1-font-size-copy-16);
+    line-height: var(--q1-line-height-copy-16);
+  }
+
+  .q1-context-switcher__scope-summary,
+  .q1-context-switcher__item:has(.q1-context-switcher__description) {
+    min-height: 48px;
+  }
+}

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.1",
+  "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",