@q1travel/design-system 0.31.0 → 0.31.2

package/dist-pkg/style.css

@@ -326,9 +326,9 @@
   /* 胶囊：半径大于任何可能的半高即可，具体数值不参与计算。 */
   --q1-radius-full: 9999px;
   --q1-shadow-focus: 0 0 0 1px color-mix(in srgb, var(--q1-color-focus) 34%, transparent), 0 0 0 4px color-mix(in srgb, var(--q1-color-focus) 16%, transparent);
-  --q1-shadow-focus-input: var(--q1-shadow-focus);
-  --q1-shadow-focus-input-danger: 0 0 0 1px color-mix(in srgb, var(--q1-color-status-danger) 34%, transparent), 0 0 0 4px color-mix(in srgb, var(--q1-color-status-danger) 16%, transparent);
-  --q1-shadow-focus-danger: var(--q1-shadow-focus-input-danger);
+  --q1-shadow-focus-input: 0 0 0 4px color-mix(in srgb, var(--q1-color-focus) 16%, transparent);
+  --q1-shadow-focus-input-danger: 0 0 0 4px color-mix(in srgb, var(--q1-color-status-danger) 16%, transparent);
+  --q1-shadow-focus-danger: 0 0 0 1px color-mix(in srgb, var(--q1-color-status-danger) 34%, transparent), 0 0 0 4px color-mix(in srgb, var(--q1-color-status-danger) 16%, transparent);
   /* 浮层发丝边与两层淡阴影；Drawer / Sheet 共用 modal，Toast 共用 popover。 */
   --q1-shadow-popover:
     0 0 0 1px var(--q1-color-gray-alpha-200),
@@ -2133,6 +2133,16 @@
 .table th.table__cell--select,
 .table td.table__cell--select {
   width: var(--q1-space-10);
+  text-align: center;
+}
+
+.table__cell--select > .control-option--bare {
+  display: grid;
+  margin: calc(-1 * var(--q1-space-1)) calc(-1 * var(--q1-space-2));
+}
+
+.table__cell--select .control-option__visual {
+  transform: none;
 }
 
 .table th.table__cell--align-center,
@@ -2163,7 +2173,7 @@
   background: var(--table-cell-bg);
 }
 
-.table tbody tr:has(.table__checkbox-control input:checked) {
+.table tbody tr:has(.table__cell--select input:checked) {
   --table-cell-bg: var(--q1-table-row-bg-selected, var(--q1-color-bg-selected));
 }
 
@@ -2231,27 +2241,11 @@
   color: var(--q1-color-text-primary);
 }
 
-.table__sort:focus-visible,
-.table input[type='checkbox']:focus-visible {
+.table__sort:focus-visible {
   outline: none;
   box-shadow: var(--q1-shadow-focus);
 }
 
-.table__checkbox-control {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  min-width: var(--q1-space-6);
-  min-height: var(--q1-space-6);
-  margin: calc(-1 * var(--q1-space-1)) calc(-1 * var(--q1-space-2));
-  border-radius: var(--q1-radius-1);
-  cursor: pointer;
-}
-
-.table__checkbox-control:has(input:disabled) {
-  cursor: not-allowed;
-}
-
 /* 焦点环画在单元格上：单元格自带不透明底色，行上的阴影或 outline 会被单元格底色、
  以及消费方的 sticky 列盖住。每格画上下两边，首末格补外侧一边，拼成整行的一圈。 */
 .table tbody tr[tabindex='0']:focus-visible {
@@ -2293,7 +2287,7 @@
     --table-cell-bg: var(--q1-table-row-bg-hover, var(--q1-color-bg-subtle));
   }
 
-  .table tbody tr.table__row--interactive:hover:has(.table__checkbox-control input:checked) {
+  .table tbody tr.table__row--interactive:hover:has(.table__cell--select input:checked) {
     --table-cell-bg: var(--q1-table-row-bg-selected-hover, var(--q1-color-bg-selected));
   }
 }
@@ -2304,7 +2298,7 @@
   --table-cell-bg: color-mix(in srgb, var(--q1-table-row-bg-hover, var(--q1-color-bg-subtle)), var(--q1-color-text-primary) 8%);
 }
 
-.table tbody tr.table__row--interactive:active:has(.table__checkbox-control input:checked) {
+.table tbody tr.table__row--interactive:active:has(.table__cell--select input:checked) {
   --table-cell-bg: color-mix(
     in srgb,
     var(--q1-table-row-bg-selected-hover, var(--q1-color-bg-selected)),
@@ -2326,10 +2320,10 @@
 }
 
 @media (pointer: coarse), (any-pointer: coarse) {
-  .table__checkbox-control,
+  .table__cell--select .control-option--bare,
   .table__sort {
-    min-width: 44px;
-    min-height: 44px;
+    min-width: var(--q1-touch-target-min);
+    min-height: var(--q1-touch-target-min);
   }
 }
 
@@ -2803,6 +2797,22 @@
   }
 }
 
+.banner:not(.banner--announcement) .banner__button-action:not(:focus-visible) {
+  box-shadow: none;
+}
+
+.banner:not(.banner--announcement) .banner__button-action:not(:disabled, [aria-disabled='true']) {
+  border: calc(var(--q1-space-1) / 4) solid var(--q1-color-border);
+  background: var(--q1-color-bg-panel);
+}
+
+@media (hover: hover) and (pointer: fine) {
+  .banner:not(.banner--announcement) .banner__button-action:hover:not(:disabled, [aria-disabled='true']) {
+    background: var(--q1-color-bg-subtle);
+    border-color: var(--q1-color-border-strong);
+  }
+}
+
 /* 页顶公告形态：透明底无边框、内容居中、16px 文案；
  与页内卡条（tone 变体）分工，两种定位见页面使用原则。 */
 .banner--announcement {
@@ -2980,18 +2990,21 @@
 
   .banner--with-icon .banner__content,
   .banner--with-icon > .banner__action,
+  .banner--with-icon > .banner__button-action,
   .banner--with-icon > .banner__close,
   .banner--with-icon > .banner__actions {
     grid-column: 2;
   }
 
   .banner:not(.banner--with-icon) > .banner__action,
+  .banner:not(.banner--with-icon) > .banner__button-action,
   .banner:not(.banner--with-icon) > .banner__close,
   .banner:not(.banner--with-icon) > .banner__actions {
     grid-column: 1;
   }
 
   .banner > .banner__action,
+  .banner > .banner__button-action,
   .banner > .banner__close,
   .banner > .banner__actions {
     justify-self: start;
@@ -3026,6 +3039,7 @@
 
 @media (max-width: 48rem), (pointer: coarse), (any-pointer: coarse) {
   .banner__action,
+  .banner__button-action,
   .banner__cta,
   .banner__close {
     min-height: calc(var(--q1-space-10) + var(--q1-space-1));
@@ -4231,10 +4245,14 @@ a[href]:has(> .book):focus-visible {
 }
 
 .tabs-control--line .tabs-control__tab:disabled {
-  color: var(--q1-color-text-disabled);
+  color: var(--q1-color-text-muted);
   border-bottom-color: transparent;
 }
 
+.tabs-control--line .tabs-control__tab:disabled[aria-selected='true'] {
+  border-bottom-color: currentColor;
+}
+
 /* 面板承载任意内容：文字样式继承所在页面，自身不加内边距；与标签栏的间距由 .tabs-root 的 gap 提供，左缘与标签栏对齐。 */
 .tabs-control__panel {
   border-radius: var(--q1-radius-3);
@@ -5496,6 +5514,11 @@ a[href]:has(> .book):focus-visible {
   padding: var(--q1-space-8) var(--q1-space-6);
 }
 
+.empty-state--title-hidden:has(> .empty-state__title:last-child) > .empty-state__icon,
+.empty-state--title-hidden:has(> .empty-state__title:last-child) > .empty-state__illustration {
+  margin-block-end: 0;
+}
+
 .empty-state__icon {
   display: grid;
   place-items: center;
@@ -10302,6 +10325,18 @@ a.q1-navigation__item[aria-disabled='true'] {
   color: var(--q1-color-text-primary);
 }
 
+.q1-navigation--horizontal .q1-navigation__item--disabled {
+  color: var(--q1-color-text-muted);
+}
+
+.q1-navigation .q1-navigation__item--disabled :is(.q1-navigation__item-description, .q1-navigation__item-badge, .q1-navigation__item-badge *) {
+  color: inherit;
+}
+
+.q1-navigation .q1-navigation__item--disabled .q1-navigation__item-badge .badge {
+  background: var(--q1-color-bg-subtle);
+}
+
 @media (hover: hover) and (pointer: fine) {
   .q1-navigation__item:hover:not(.q1-navigation__item--active):not(:active):not([aria-disabled='true']):not(:disabled),
   .q1-navigation__group-trigger:hover:not(:active) {
@@ -11733,8 +11768,13 @@ a.q1-navigation__item[aria-disabled='true'] {
   color: var(--q1-color-text-primary);
 }
 
-.q1-navigation--line .q1-navigation__item--disabled {
+.q1-navigation--horizontal.q1-navigation--line .q1-navigation__item--disabled {
   color: var(--q1-color-text-muted);
+  border-bottom-color: currentColor;
+}
+
+.q1-navigation--line .q1-navigation__item--disabled:not([aria-current]) {
+  border-bottom-color: transparent;
 }
 
 @media (hover: hover) and (pointer: fine) {
@@ -13697,6 +13737,121 @@ a.q1-navigation__item[aria-disabled='true'] {
   vertical-align: baseline;
 }
 
+.stepper {
+  display: flex;
+  gap: var(--q1-space-1);
+  margin: 0;
+  padding: 0;
+  min-width: 0;
+  list-style: none;
+}
+
+.stepper__step {
+  position: relative;
+  flex: 1;
+  min-width: 0;
+  padding-inline: var(--q1-space-2);
+  text-align: center;
+  overflow-wrap: anywhere;
+}
+
+.stepper__step:not(:last-child)::after {
+  content: '';
+  position: absolute;
+  inset-inline-start: calc(50% + var(--q1-space-4));
+  inset-block-start: calc(var(--q1-space-3) - var(--q1-space-1) / 8);
+  width: calc(100% + var(--q1-space-1) - var(--q1-space-8));
+  height: calc(var(--q1-space-1) / 4);
+  background: var(--q1-color-border-strong);
+}
+
+.stepper__step--complete:not(:last-child)::after {
+  background: var(--q1-color-text-primary);
+}
+
+.stepper__indicator {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  box-sizing: border-box;
+  width: var(--q1-space-6);
+  height: var(--q1-space-6);
+  margin: 0 auto var(--q1-space-2);
+  border: calc(var(--q1-space-1) / 4) solid var(--q1-color-border-strong);
+  border-radius: var(--q1-radius-full);
+  color: var(--q1-color-text-muted);
+  font-size: var(--q1-font-size-label-13);
+  line-height: var(--q1-line-height-label-13);
+  font-weight: var(--q1-font-weight-medium);
+}
+
+.stepper__step--current .stepper__indicator {
+  border-color: var(--q1-color-text-primary);
+  background: var(--q1-color-text-primary);
+  color: var(--q1-color-text-on-inverse);
+}
+
+.stepper__step--complete .stepper__indicator {
+  border: 0;
+}
+
+.stepper__label {
+  display: block;
+  color: var(--q1-color-text-primary);
+  font-size: var(--q1-font-size-label-14);
+  line-height: var(--q1-line-height-label-14);
+  font-weight: var(--q1-font-weight-medium);
+}
+
+.stepper__description {
+  display: block;
+  margin-block-start: var(--q1-space-1);
+  color: var(--q1-color-text-muted);
+  font-size: var(--q1-font-size-label-13);
+  line-height: var(--q1-line-height-label-13);
+}
+
+.stepper__status {
+  position: absolute;
+  width: calc(var(--q1-space-1) / 4);
+  height: calc(var(--q1-space-1) / 4);
+  overflow: hidden;
+  clip: rect(0 0 0 0);
+  clip-path: inset(50%);
+  white-space: nowrap;
+}
+
+.file-input {
+  display: flex;
+  align-items: center;
+  gap: var(--q1-space-3);
+  min-width: 0;
+  max-width: 100%;
+}
+
+.file-input__trigger {
+  flex-shrink: 0;
+}
+
+.file-input__trigger[aria-invalid='true']:not(:disabled),
+.file-input__trigger.button--primary[aria-invalid='true']:not(.button--icon):not(.button--selected):not(:disabled):not([aria-disabled='true']):is(:hover, :active) {
+  border-color: var(--q1-color-status-danger);
+}
+
+.file-input__trigger[aria-invalid='true']:not(:disabled):focus-visible {
+  box-shadow: var(--q1-shadow-focus-input-danger);
+}
+
+.file-input__status {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  color: var(--q1-color-text-primary);
+  font-size: var(--q1-font-size-label-14);
+  line-height: var(--q1-line-height-label-14);
+}
+
 /* Label + InfoTip：标签与说明微图标同行；常驻面板换行铺满整行。 */
 .label-row,
 .form-field__label-row {
@@ -14158,6 +14313,14 @@ a.q1-navigation__item[aria-disabled='true'] {
   margin-block-end: var(--q1-space-2);
 }
 
+.empty-state--inline > .empty-state__illustration {
+  grid-template-columns: minmax(0, 1fr);
+  flex-shrink: 0;
+  inline-size: var(--q1-space-16);
+  max-inline-size: var(--q1-space-16);
+  margin-block-end: 0;
+}
+
 .empty-list-illustration {
   position: relative;
   display: inline-block;

package/dist-pkg/tokens.css

@@ -302,9 +302,9 @@
   --q1-radius-5: 16px;
   --q1-radius-full: 9999px;
   --q1-shadow-focus: 0 0 0 1px color-mix(in srgb, var(--q1-color-focus) 34%, transparent), 0 0 0 4px color-mix(in srgb, var(--q1-color-focus) 16%, transparent);
-  --q1-shadow-focus-input: var(--q1-shadow-focus);
-  --q1-shadow-focus-input-danger: 0 0 0 1px color-mix(in srgb, var(--q1-color-status-danger) 34%, transparent), 0 0 0 4px color-mix(in srgb, var(--q1-color-status-danger) 16%, transparent);
-  --q1-shadow-focus-danger: var(--q1-shadow-focus-input-danger);
+  --q1-shadow-focus-input: 0 0 0 4px color-mix(in srgb, var(--q1-color-focus) 16%, transparent);
+  --q1-shadow-focus-input-danger: 0 0 0 4px color-mix(in srgb, var(--q1-color-status-danger) 16%, transparent);
+  --q1-shadow-focus-danger: 0 0 0 1px color-mix(in srgb, var(--q1-color-status-danger) 34%, transparent), 0 0 0 4px color-mix(in srgb, var(--q1-color-status-danger) 16%, transparent);
   --q1-shadow-popover: 0 0 0 1px var(--q1-color-gray-alpha-200),
     0 1px 1px color-mix(in srgb, var(--q1-color-shadow) 2%, transparent),
     0 4px 8px -4px color-mix(in srgb, var(--q1-color-shadow) 4%, transparent),
@@ -629,9 +629,9 @@
   --q1-radius-5: 16px;
   --q1-radius-full: 9999px;
   --q1-shadow-focus: 0 0 0 1px color-mix(in srgb, var(--q1-color-focus) 34%, transparent), 0 0 0 4px color-mix(in srgb, var(--q1-color-focus) 16%, transparent);
-  --q1-shadow-focus-input: var(--q1-shadow-focus);
-  --q1-shadow-focus-input-danger: 0 0 0 1px color-mix(in srgb, var(--q1-color-status-danger) 34%, transparent), 0 0 0 4px color-mix(in srgb, var(--q1-color-status-danger) 16%, transparent);
-  --q1-shadow-focus-danger: var(--q1-shadow-focus-input-danger);
+  --q1-shadow-focus-input: 0 0 0 4px color-mix(in srgb, var(--q1-color-focus) 16%, transparent);
+  --q1-shadow-focus-input-danger: 0 0 0 4px color-mix(in srgb, var(--q1-color-status-danger) 16%, transparent);
+  --q1-shadow-focus-danger: 0 0 0 1px color-mix(in srgb, var(--q1-color-status-danger) 34%, transparent), 0 0 0 4px color-mix(in srgb, var(--q1-color-status-danger) 16%, transparent);
   --q1-shadow-popover: 0 0 0 1px var(--q1-color-gray-alpha-200),
     0 4px 8px -4px color-mix(in srgb, var(--q1-color-shadow) 12%, transparent),
     0 16px 24px -8px color-mix(in srgb, var(--q1-color-shadow) 18%, transparent);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@q1travel/design-system",
-  "version": "0.31.0",
+  "version": "0.31.2",
   "description": "React components, design tokens, and interface contracts for q1travel products.",
   "keywords": [
     "react",
@@ -55,7 +55,7 @@
     "preview": "vite preview --host 127.0.0.1",
     "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": "node --test scripts/cascader-browser-lifecycle.test.mjs scripts/devtools-connection.test.mjs scripts/browser-exit-deadline.test.mjs scripts/chromium-teardown.test.mjs scripts/vite-server-lifecycle.test.mjs scripts/chromium-launch.test.mjs scripts/chromium-recovery.test.mjs scripts/chromium-ownership.test.mjs scripts/cdp-recovery.test.mjs scripts/load-response-timeout.test.mjs && node scripts/wait-host-idle.mjs && npm run check:browser:strictmode && node scripts/check-browser.mjs --note && node scripts/check-browser.mjs --combobox-panel && node scripts/check-browser.mjs && node scripts/check-clearable-input-browser.mjs && node scripts/check-calendar-browser.mjs && node scripts/check-banner-browser.mjs && node scripts/check-button-link-browser.mjs && node scripts/check-button-browser.mjs && node scripts/check-trailing-icon-padding-browser.mjs && node scripts/check-overlay-theme-browser.mjs && node scripts/check-browser-component-browser.mjs",
+    "check:browser": "node --test scripts/cascader-browser-lifecycle.test.mjs scripts/devtools-connection.test.mjs scripts/combobox-panel-readiness.test.mjs scripts/browser-exit-deadline.test.mjs scripts/chromium-teardown.test.mjs scripts/vite-server-lifecycle.test.mjs scripts/chromium-launch.test.mjs scripts/chromium-recovery.test.mjs scripts/chromium-ownership.test.mjs scripts/cdp-recovery.test.mjs scripts/load-response-timeout.test.mjs && node scripts/wait-host-idle.mjs && npm run check:browser:strictmode && node scripts/check-browser.mjs --note && node scripts/check-browser.mjs --combobox-panel && node scripts/check-browser.mjs && node scripts/check-clearable-input-browser.mjs && node scripts/check-calendar-browser.mjs && node scripts/check-banner-browser.mjs && node scripts/check-button-link-browser.mjs && node scripts/check-button-browser.mjs && node scripts/check-trailing-icon-padding-browser.mjs && node scripts/check-overlay-theme-browser.mjs && node scripts/check-browser-component-browser.mjs",
     "check:package-api": "node scripts/check-package-api.mjs && node --test scripts/check-public-type-global-augmentations.test.mjs && node --test scripts/check-combobox-required.test.mjs scripts/check-multi-combobox-contract.test.mjs && node --test scripts/check-q1-design-lint.test.mjs scripts/check-q1-design-component-enums.test.mjs scripts/check-q1-design-bin-entry.test.mjs && node --test scripts/check-json-view-contract.test.mjs && node --test scripts/check-verification-code-input.test.mjs && node --test scripts/check-bare-field-error.test.mjs scripts/check-label-hidden-contract.test.mjs scripts/check-required-indicator-contract.test.mjs scripts/check-spinner-inherit-contract.test.mjs && node --test scripts/check-controls-contract.test.mjs && node --test scripts/check-pagination-contract.test.mjs && node --test scripts/check-table-core.test.mjs scripts/check-table-interaction.test.mjs scripts/check-table-layout.test.mjs && node --test scripts/check-contrast-contract.test.mjs && node --test scripts/check-optical-alignment-contract.test.mjs && node --test scripts/check-overlay-coordination.test.mjs scripts/check-sheet-contract.test.mjs && node --test scripts/check-choicebox-contract.test.mjs && node --test scripts/check-radio-group-contract.test.mjs && node --test scripts/check-clearable-input-contract.test.mjs && node --test scripts/check-card-contract.test.mjs && node --test scripts/check-book-contract.test.mjs && node --test scripts/check-breadcrumbs-contract.test.mjs && node --test scripts/check-description-contract.test.mjs && node --test scripts/check-error-message-contract.test.mjs && node --test scripts/check-show-more-contract.test.mjs && node --test scripts/check-load-more-button-contract.test.mjs && node --test scripts/check-banner-contract.test.mjs && node --test scripts/check-project-banner-contract.test.mjs && node --test scripts/check-note-contract.test.mjs && node --test scripts/check-feedback-contract.test.mjs && node --test scripts/check-page-feedback-contract.test.mjs && node --test scripts/check-drawer-gesture.test.mjs && node --test scripts/check-checkbox-circle-contract.test.mjs && node --test scripts/check-chat-contract.test.mjs && node --test scripts/check-calendar-single-contract.test.mjs && node --test scripts/check-hover-card-contract.test.mjs && node --test scripts/check-bare-field-error.test.mjs && node --test scripts/check-controls-contract.test.mjs scripts/check-control-size-contract.test.mjs && node --test scripts/check-composer-dots-menu-contract.test.mjs && node --test scripts/check-filter-option-panel-contract.test.mjs && npm run check:release-diff",
     "check:release-diff": "node --test scripts/check-release-artifact-diff.test.mjs && node scripts/check-release-artifact-diff.mjs",
     "check:release-provenance": "node --test scripts/check-release-provenance.test.mjs && node scripts/check-release-provenance.mjs",