@q1travel/design-system 0.29.2 → 0.30.0

package/dist-pkg/style.css

@@ -4594,6 +4594,7 @@ a[href]:has(> .book):focus-visible {
 .spinner--danger { color: var(--q1-color-status-danger); }
 .spinner--success { color: var(--q1-color-status-success); }
 .spinner--info { color: var(--q1-color-status-info); }
+.spinner--inherit { color: inherit; }
 
 /* 辐条角度与动画延迟由组件按辐条数内联计算（辐条数随尺寸增减）。 */
 .spinner__bar {
@@ -8650,11 +8651,6 @@ a.q1-card:focus-visible {
   font-size: 14px;
   text-align: center;
 }
-.multi-select__empty:focus-visible {
-  outline: none;
-  box-shadow: var(--q1-shadow-focus);
-  border-radius: var(--q1-radius-2);
-}
 @media (hover: hover) and (pointer: fine) {
   .multi-select__trigger:hover,
   .multi-select__option:hover {
@@ -11299,6 +11295,10 @@ a.q1-navigation__item[aria-disabled='true'] {
   transition: color var(--q1-duration-press) var(--q1-ease-state);
 }
 
+.q1-navigation__item-line-content {
+  display: contents;
+}
+
 /* viewport 边缘留白保护横向外扩的环；基线仍从 nav 内容左缘开始。 */
 .q1-navigation--horizontal.q1-navigation--line .q1-navigation__item:focus-visible {
   box-shadow: none;
@@ -11345,7 +11345,29 @@ a.q1-navigation__item[aria-disabled='true'] {
   }
 
   .q1-navigation--horizontal.q1-navigation--line .q1-navigation__item {
-    min-height: var(--q1-touch-target-min);
+    min-block-size: var(--q1-touch-target-min);
+    min-inline-size: var(--q1-touch-target-min);
+    justify-content: center;
+  }
+
+  .q1-navigation--line .q1-navigation__item:is(.q1-navigation__item--active, [aria-current='page']) {
+    border-bottom-color: transparent;
+  }
+
+  .q1-navigation__item-line-content {
+    display: flex;
+    align-items: center;
+    gap: inherit;
+    position: relative;
+  }
+
+  .q1-navigation--line .q1-navigation__item:is(.q1-navigation__item--active, [aria-current='page']) > .q1-navigation__item-line-content::after {
+    content: '';
+    position: absolute;
+    inset-inline: 0;
+    bottom: calc(-1 * (var(--q1-space-3) + var(--q1-space-1) / 2));
+    border-bottom: calc(var(--q1-space-1) / 2) solid currentColor;
+    pointer-events: none;
   }
 
   .q1-navigation--line .q1-navigation__item::before {
@@ -11353,7 +11375,7 @@ a.q1-navigation__item[aria-disabled='true'] {
     position: absolute;
     inset-block: 0;
     inset-inline-start: calc(var(--q1-navigation-line-gap) / -2);
-    width: max(var(--q1-touch-target-min), calc(100% + var(--q1-navigation-line-gap)));
+    width: calc(100% + var(--q1-navigation-line-gap));
   }
 }
 
@@ -12015,6 +12037,41 @@ a.q1-navigation__item[aria-disabled='true'] {
   }
 }
 
+.multi-combobox { min-width: 0; }
+.multi-combobox__control { box-sizing: border-box; position: relative; display: flex; align-items: center; gap: var(--q1-space-2); min-height: var(--q1-control-height-default); padding: var(--q1-space-1) var(--q1-space-3); border: calc(var(--q1-space-1) / 4) solid var(--q1-color-border-control); border-radius: var(--q1-radius-2); background: var(--q1-color-bg-sunken); }
+.multi-combobox__trigger { position: absolute; inset: 0; width: 100%; border: 0; border-radius: inherit; background: transparent; cursor: pointer; }
+.multi-combobox__trigger:focus { outline: none; }
+.multi-combobox__control:has(.multi-combobox__trigger:focus-visible) { box-shadow: var(--q1-shadow-focus); }
+.multi-combobox__control[data-invalid] { border-color: var(--q1-color-status-danger); box-shadow: 0 0 0 calc(var(--q1-space-1) / 4) var(--q1-color-status-danger), 0 0 0 var(--q1-space-1) var(--q1-color-red-100); }
+.multi-combobox__control[data-invalid]:has(.multi-combobox__trigger:focus-visible) { box-shadow: var(--q1-shadow-focus-input-danger); }
+.multi-combobox__control[data-disabled] { opacity: 0.5; }
+.multi-combobox__trigger:disabled, .multi-combobox__trigger[aria-disabled] { cursor: default; }
+.multi-combobox__values { display: flex; flex: 1; flex-wrap: wrap; align-items: center; gap: var(--q1-space-1); min-width: 0; pointer-events: none; font-size: var(--q1-font-size-label-14); line-height: var(--q1-line-height-label-14); }
+.multi-combobox__tag { position: relative; display: inline-flex; align-items: center; gap: var(--q1-space-1); max-width: 100%; padding-inline-start: var(--q1-space-2); border-radius: var(--q1-radius-1); background: var(--q1-color-bg-hover); color: var(--q1-color-text-primary); }
+.multi-combobox__tag > span { min-width: 0; overflow-wrap: anywhere; }
+.multi-combobox__remove { position: relative; display: inline-flex; align-items: center; justify-content: center; flex: none; min-width: var(--q1-space-6); min-height: var(--q1-space-6); padding: 0; border: 0; border-radius: var(--q1-radius-1); background: transparent; color: inherit; pointer-events: auto; cursor: pointer; }
+.multi-combobox__remove:disabled { cursor: default; }
+.multi-combobox__remove:focus-visible { outline: none; box-shadow: var(--q1-shadow-focus); }
+.multi-combobox__placeholder { color: var(--q1-color-text-muted); }
+.multi-combobox__arrow { flex: none; pointer-events: none; color: var(--q1-color-text-secondary); }
+.multi-combobox__popup { box-sizing: border-box; max-width: calc(100vw - var(--q1-space-6)); }
+.multi-combobox__panel { display: grid; gap: var(--q1-space-2); min-width: 0; }
+.multi-combobox__search { min-width: 0; width: 100%; }
+.multi-combobox__list { list-style: none; margin: 0; padding: 0; max-height: min(calc(var(--q1-space-10) * 6), 40vh); overflow-y: auto; overscroll-behavior: contain; }
+.multi-combobox__option { box-sizing: border-box; min-height: var(--q1-control-height-default); justify-content: space-between; }
+.multi-combobox__option[data-active] { background: var(--q1-color-bg-hover); }
+.multi-combobox__option[aria-disabled] { color: var(--q1-color-text-muted); cursor: default; }
+.multi-combobox__copy { display: grid; min-width: 0; overflow-wrap: anywhere; }
+.multi-combobox__description { color: var(--q1-color-text-secondary); font-size: var(--q1-font-size-label-13); }
+.multi-combobox__option svg { flex-shrink: 0; }
+.multi-combobox__status { display: grid; justify-items: start; gap: var(--q1-space-3); padding: var(--q1-space-3); color: var(--q1-color-text-secondary); overflow-wrap: anywhere; }
+.multi-select__trigger[aria-invalid='true'] { border-color: var(--q1-color-status-danger); box-shadow: var(--q1-shadow-focus-input-danger); }
+@media (hover: none), (pointer: coarse), (any-pointer: coarse) {
+  .multi-combobox__control, .multi-combobox__option, .multi-combobox__remove { min-height: var(--q1-touch-target-min); }
+  .multi-combobox__remove { min-width: var(--q1-touch-target-min); }
+  .multi-combobox__search { font-size: var(--q1-font-size-copy-16); }
+}
+
 /* Command Menu：Foundation portal 内的全屏阻断层与可滚动命令列表。 */
 .command-palette__trigger {
   display: inline-flex;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@q1travel/design-system",
-  "version": "0.29.2",
+  "version": "0.30.0",
   "description": "React components, design tokens, and interface contracts for q1travel products.",
   "keywords": [
     "react",
@@ -54,7 +54,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": "node --test scripts/devtools-connection.test.mjs && npm run check:browser:strictmode && node scripts/check-browser.mjs --note && 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-q1-design-lint.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 && 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-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:package-api": "node scripts/check-package-api.mjs && node --test scripts/check-multi-combobox-contract.test.mjs && node --test scripts/check-q1-design-lint.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-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",
     "check:release-sync": "node --test scripts/release-sync.test.mjs",