@q1travel/design-system 0.7.2 → 0.8.0

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);
@@ -5206,52 +5262,124 @@ a.q1-card:focus-visible {
 .choicebox--checkbox:has(.choicebox__input:disabled:checked) .choicebox__indicator {
   background: var(--q1-color-gray-500);
 }
-/* 实测外部参考:裸轨(无外框/无背景/无 padding),图标抽离文字块、绝对定位在 28px 凹槽外；
-   悬停只把文字/图标从 text-secondary 加深到 text-primary,无背景浸染、无品牌色——
-   这是页面间的纯导航链(chrome),不是行动号召,indigo 只守「动作」。 */
+/* 数据集分页：数字页码、已知总数与未知尾页。数据请求和 URL 状态由消费方控制。 */
 .pagination {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--q1-space-3);
+  width: 100%;
+}
+.pagination__summary {
+  min-width: 0;
+  font-size: 13px;
+  line-height: 20px;
+  color: var(--q1-color-text-secondary);
+}
+.pagination__controls {
+  display: inline-flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: var(--q1-space-1);
+}
+.pagination__page-size {
+  display: inline-flex;
+  align-items: center;
+  margin-right: var(--q1-space-2);
+}
+.pagination__button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 32px;
+  min-height: 32px;
+  padding: 4px 8px;
+  border: 1px solid transparent;
+  border-radius: var(--q1-radius-2);
+  background: transparent;
+  color: var(--q1-color-text-secondary);
+  font: inherit;
+  font-size: 14px;
+  line-height: 20px;
+  font-variant-numeric: tabular-nums;
+  cursor: pointer;
+}
+.pagination__button:hover:not(:disabled) {
+  background: var(--q1-color-bg-subtle);
+  color: var(--q1-color-text-primary);
+}
+.pagination__button:focus-visible {
+  outline: none;
+  box-shadow: var(--q1-shadow-focus);
+}
+.pagination__button--nav {
+  border-color: var(--q1-color-border);
+}
+.pagination__button--current {
+  color: var(--q1-color-text-primary);
+  background: var(--q1-color-bg-subtle);
+  font-weight: var(--q1-font-weight-medium);
+}
+.pagination__button:disabled {
+  border-color: var(--q1-color-border);
+  background: var(--q1-color-bg-subtle);
+  color: var(--q1-color-text-muted);
+  cursor: not-allowed;
+}
+.pagination__ellipsis {
+  min-width: 24px;
+  color: var(--q1-color-text-muted);
+  text-align: center;
+}
+@media (pointer: coarse) {
+  .pagination__button {
+    min-width: 44px;
+    min-height: 44px;
+  }
+}
+
+/* 文档顺序导航：裸轨，无外框/背景；图标锚在标题文字块内。 */
+.docs-pagination {
   display: flex;
   flex-wrap: wrap;
   align-items: flex-start;
   justify-content: space-between;
   width: 100%;
 }
-.pagination__link {
+.docs-pagination__link {
   display: block;
   padding: 4px var(--q1-space-2);
   border-radius: var(--q1-radius-2);
   text-decoration: none;
 }
-.pagination__link--prev {
+.docs-pagination__link--prev {
   padding-left: 28px;
 }
-.pagination__link--next {
+.docs-pagination__link--next {
   padding-right: 28px;
   margin-left: auto;
   text-align: right;
 }
-.pagination__link:focus-visible {
+.docs-pagination__link:focus-visible {
   outline: none;
   box-shadow: var(--q1-shadow-focus);
 }
-.pagination__label {
+.docs-pagination__label {
   display: block;
   margin-bottom: 2px;
   font-size: 13px;
   color: var(--q1-color-text-secondary);
-  transition: color 0.2s ease-in-out;
 }
-.pagination__link:hover .pagination__label {
+.docs-pagination__link:hover .docs-pagination__label {
   color: var(--q1-color-text-primary);
 }
-/* 定位上下文钉在标题文字块（实测外部参考：图标是标题块的子节点，随文字宽度走，
-   而不是钉在整条链接上）——否则图标会漂出链接可点/可聚焦的框外。 */
-.pagination__title-frame {
+.docs-pagination__title-frame {
   position: relative;
   display: inline-block;
   max-width: 20em;
 }
-.pagination__title {
+.docs-pagination__title {
   display: block;
   overflow: hidden;
   white-space: nowrap;
@@ -5261,28 +5389,27 @@ a.q1-card:focus-visible {
   font-weight: var(--q1-font-weight-medium);
   color: var(--q1-color-text-primary);
 }
-.pagination__chevron-slot {
+.docs-pagination__chevron-slot {
   position: absolute;
   top: 2px;
   display: block;
   color: var(--q1-color-text-secondary);
-  transition: color 0.2s ease-in-out;
 }
-.pagination__link--prev .pagination__chevron-slot {
+.docs-pagination__link--prev .docs-pagination__chevron-slot {
   left: -26px;
 }
-.pagination__link--next .pagination__chevron-slot {
+.docs-pagination__link--next .docs-pagination__chevron-slot {
   right: -26px;
 }
-.pagination__link:hover .pagination__chevron-slot {
+.docs-pagination__link:hover .docs-pagination__chevron-slot {
   color: var(--q1-color-text-primary);
 }
-.pagination__chevron {
+.docs-pagination__chevron {
   display: block;
   width: 20px;
   height: 20px;
 }
-.pagination__slot {
+.docs-pagination__slot {
   display: block;
 }
 .feedback {
@@ -5783,8 +5910,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 +7074,6 @@ a.q1-card:focus-visible {
 .modal {
   position: fixed;
   inset: 0;
-  z-index: 80;
   display: flex;
   align-items: center;
   justify-content: center;
@@ -7125,7 +7251,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 +7335,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 +7353,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 +8160,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 +8184,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.8.0",
   "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 && node --test scripts/check-pagination-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",