@q1travel/design-system 0.31.2 → 0.31.4

package/dist-pkg/style.css

@@ -747,10 +747,21 @@
   animation: none;
 }
 
-/* 加载态的状态区与按钮内其他图标一样按 flex 居中；普通行内 span 会让 SVG 坐在文字基线上，偏高约 1px。 */
+/* 加载内容保留尺寸与可访问名称，状态指示覆盖在按钮中央。 */
+.button--loading {
+  position: relative;
+}
+
+.button--loading:not(.button--busy) > .button__text {
+  opacity: 0;
+}
+
 .button__loading-status {
+  position: absolute;
+  inset: 0;
   display: inline-flex;
   align-items: center;
+  justify-content: center;
 }
 
 .button__icon-slot {
@@ -7131,12 +7142,11 @@ a.q1-card:focus-visible {
   flex: none;
   display: inline-block;
   border-radius: var(--q1-radius-full);
-  background: var(--q1-color-gray-400);
+  background: var(--q1-color-gray-700);
   border: 0;
-  transform: scale(1);
+  transform: none;
   transition:
-    background var(--q1-duration-fast) var(--q1-ease-state),
-    transform var(--q1-duration-press) var(--q1-ease-out);
+    background var(--q1-duration-fast) var(--q1-ease-state);
 }
 .toggle__thumb {
   position: absolute;
@@ -7203,17 +7213,23 @@ a.q1-card:focus-visible {
 
 @media (hover: hover) and (pointer: fine) {
   .toggle-field:not(:disabled):hover .toggle {
-    background: var(--q1-color-gray-500);
+    background: var(--q1-color-gray-800);
   }
   .toggle-field[aria-checked='true']:not(:disabled):hover .toggle {
     background: var(--toggle-on, var(--q1-color-action-primary-hover));
   }
 }
 
-/* pointer-down 只压缩视觉轨道；按钮命中区和文字不动，thumb 保留自己的位移 transform。 */
+/* pointer-down 保持悬停轨道色，仅增加圆点阴影；定位与命中区保持稳定。 */
 @media (prefers-reduced-motion: no-preference) {
   .toggle-field[data-pointer-pressed='true']:not(:disabled) .toggle {
-    transform: scale(0.97);
+    background: var(--q1-color-gray-800);
+  }
+  .toggle-field[aria-checked='true'][data-pointer-pressed='true']:not(:disabled) .toggle {
+    background: var(--toggle-on, var(--q1-color-action-primary-hover));
+  }
+  .toggle-field[data-pointer-pressed='true']:not(:disabled) .toggle__thumb {
+    box-shadow: var(--q1-shadow-popover);
   }
 }
 
@@ -8432,7 +8448,7 @@ a.q1-card:focus-visible {
   visibility: hidden;
 }
 /* 变体：default 是浅灰底 + border-strong 外框，分割线与外框同为 border-strong，在浅灰底上保持清晰；
-   secondary 是面板底 + 与 Button 次要档一致的外框（亮色 border、暗色 border-control）；分割线始终与外框同色同粗。 */
+   secondary 是面板底 + 与 Button 次要档一致的外框（亮色 border-strong、暗色 border-control）；分割线始终与外框同色同粗。 */
 .split-button--default .split-button__primary,
 .split-button--default .split-button__toggle {
   background: var(--q1-color-bg-subtle);
@@ -8469,6 +8485,21 @@ a.q1-card:focus-visible {
 .split-button__toggle[aria-disabled='true'] {
   cursor: progress;
 }
+/* 亮色次要按钮的常态与交互边框；暗色和纯图标悬停沿用既有配方。 */
+:where(:root:not([data-theme='dark']), [data-q1-theme='light']) .button:where(:not(.button--primary, .button--ghost, .button--warning, .button--danger, .button--selected)):not(:where([data-q1-theme='dark'], [data-q1-theme='dark'] *)),
+:where(:root:not([data-theme='dark']), [data-q1-theme='light']) .split-button--secondary :is(.split-button__primary, .split-button__toggle):not(:where([data-q1-theme='dark'], [data-q1-theme='dark'] *)) {
+  border-color: var(--q1-color-border-strong);
+}
+:where(:root:not([data-theme='dark']), [data-q1-theme='light']) .button:where(:not(.button--primary, .button--ghost, .button--warning, .button--danger, .button--selected, .button--icon)):not(:where([data-q1-theme='dark'], [data-q1-theme='dark'] *)):active:not(:disabled, [aria-disabled='true']),
+:where(:root:not([data-theme='dark']), [data-q1-theme='light']) .split-button--secondary :is(.split-button__primary, .split-button__toggle):not(:where([data-q1-theme='dark'], [data-q1-theme='dark'] *)):active:not(:disabled, [aria-disabled='true']) {
+  border-color: var(--q1-color-gray-600);
+}
+@media (hover: hover) and (pointer: fine) {
+  :where(:root:not([data-theme='dark']), [data-q1-theme='light']) .button:where(:not(.button--primary, .button--ghost, .button--warning, .button--danger, .button--selected, .button--icon)):not(:where([data-q1-theme='dark'], [data-q1-theme='dark'] *)):hover:not(:disabled, [aria-disabled='true']),
+  :where(:root:not([data-theme='dark']), [data-q1-theme='light']) .split-button--secondary :is(.split-button__primary, .split-button__toggle):not(:where([data-q1-theme='dark'], [data-q1-theme='dark'] *)):hover:not(:disabled, [aria-disabled='true']) {
+    border-color: var(--q1-color-gray-600);
+  }
+}
 /* 尺寸（与 Button 家族共享刻度：高 32/40/48、radius 6/6/8、字号 14/14/16） */
 .split-button--sm .split-button__primary {
   min-height: 32px;
@@ -8559,6 +8590,7 @@ a.q1-card:focus-visible {
   }
 }
 .combobox {
+  min-width: 0;
   position: relative;
 }
 .combobox__label {
@@ -8596,23 +8628,39 @@ a.q1-card:focus-visible {
   line-height: var(--q1-line-height-heading-16);
 }
 /* 悬停加深与 Input（.input-control:hover）同档同条件；聚焦、禁用、错误态不加深。 */
-.combobox__control:hover:not(:focus-within):not(:has(:disabled, [aria-invalid='true'])):not(.combobox--error .combobox__control):not(
-    .combobox--disabled .combobox__control
-  ) {
-  border-color: var(--q1-color-gray-800);
+@media (hover: hover) and (pointer: fine) {
+  .combobox__control:hover:not(.combobox--readonly .combobox__control):not(:focus-within):not(:has(:disabled, [aria-invalid='true'])):not(.combobox--error .combobox__control):not(
+      .combobox--disabled .combobox__control
+    ) {
+    border-color: var(--q1-color-gray-800);
+  }
 }
 .combobox__control:has(.combobox__input:focus) {
   box-shadow: var(--q1-shadow-focus-input);
 }
 .combobox--disabled .combobox__control {
   background: var(--q1-color-gray-100);
-  color: var(--q1-color-text-disabled);
+  color: var(--q1-color-text-muted);
+  opacity: 1;
+}
+.combobox--disabled:not(.combobox--error) .combobox__control {
+  border-color: var(--q1-color-border);
+}
+.combobox--disabled .combobox__input,
+.combobox--disabled .combobox__input::placeholder {
+  color: var(--q1-color-text-muted);
   opacity: 1;
 }
+.combobox--disabled .combobox__panel-trigger > svg {
+  color: var(--q1-color-text-disabled);
+}
 .combobox--readonly .combobox__input {
   caret-color: transparent;
   cursor: default;
 }
+.combobox--readonly:not(.combobox--disabled) .combobox__input::placeholder {
+  color: var(--q1-color-text-secondary);
+}
 .combobox__leading {
   flex: none;
   color: var(--q1-color-text-secondary);
@@ -8626,6 +8674,66 @@ a.q1-card:focus-visible {
   font: inherit;
   font-size: 14px;
 }
+.combobox__input:not(:focus) {
+  text-overflow: ellipsis;
+}
+.combobox__leading[data-selected-prefix] {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--q1-space-6);
+  height: var(--q1-space-6);
+  overflow: hidden;
+  pointer-events: none;
+}
+.combobox .combobox__leading[data-selected-prefix-slot] {
+  box-sizing: border-box;
+  width: var(--q1-space-6);
+  height: var(--q1-space-6);
+  padding: calc((var(--q1-space-6) - var(--q1-space-4)) / 2);
+}
+.combobox--sm .combobox__leading[data-selected-prefix-slot] {
+  box-sizing: border-box;
+  width: var(--q1-space-5);
+  height: var(--q1-space-5);
+  padding: calc((var(--q1-space-5) - var(--q1-space-4)) / 2);
+}
+.combobox--sm .combobox__leading[data-selected-prefix] {
+  width: var(--q1-space-5);
+  height: var(--q1-space-5);
+}
+.combobox--lg .combobox__leading[data-selected-prefix-slot] {
+  box-sizing: border-box;
+  width: var(--q1-space-7);
+  height: var(--q1-space-7);
+  padding: calc((var(--q1-space-7) - var(--q1-space-4)) / 2);
+}
+.combobox--lg .combobox__leading[data-selected-prefix] {
+  width: var(--q1-space-7);
+  height: var(--q1-space-7);
+}
+.combobox__leading[data-selected-prefix] > * {
+  flex: none;
+  max-width: 100%;
+  max-height: 100%;
+  object-fit: contain;
+}
+.combobox--disabled [data-selected-prefix] {
+  color: var(--q1-color-text-muted);
+}
+.combobox__input::placeholder {
+  color: var(--q1-color-text-secondary);
+  opacity: 1;
+}
+:where(.combobox:not(.combobox--sm):not(.combobox--lg)) .combobox__control {
+  box-sizing: border-box;
+  min-height: var(--q1-control-height-default);
+}
+:where(.combobox:not(.combobox--sm):not(.combobox--lg)) .combobox__input {
+  font-size: var(--q1-font-size-label-14);
+  line-height: var(--q1-line-height-label-14);
+  font-weight: var(--q1-font-weight-regular);
+}
 .combobox__input:focus {
   outline: none;
 }
@@ -8745,24 +8853,32 @@ a.q1-card:focus-visible {
   }
 }
 .multi-select {
+  min-width: 0;
   position: relative;
   display: inline-block;
+  max-width: 100%;
+}
+.multi-select > .q1-sr-only {
+  inset-inline-start: 0;
 }
 .multi-select__trigger {
+  max-width: 100%;
   display: inline-flex;
   align-items: center;
   justify-content: space-between;
   gap: var(--q1-space-3);
   min-width: 200px;
-  /* 末尾 chevron 一侧收一档，抵消图标框自带空白。 */
-  padding: var(--q1-space-2) var(--q1-space-2-5) var(--q1-space-2) var(--q1-space-3);
+  box-sizing: border-box;
+  min-height: var(--q1-control-height-default);
+  padding: 0 var(--q1-space-2-5) 0 var(--q1-space-3);
   border: 1px solid var(--q1-color-border-control);
   border-radius: var(--q1-radius-2);
   background: var(--q1-color-bg-sunken);
   color: var(--q1-color-text-primary);
   font: inherit;
-  font-size: 14px;
-  font-weight: 500;
+  font-size: var(--q1-font-size-label-14);
+  line-height: var(--q1-line-height-label-14);
+  font-weight: var(--q1-font-weight-regular);
   cursor: pointer;
 }
 .multi-select__trigger:focus {
@@ -8771,13 +8887,28 @@ a.q1-card:focus-visible {
 }
 .multi-select__trigger:disabled {
   background: var(--q1-color-gray-100);
-  color: var(--q1-color-text-disabled);
+  color: var(--q1-color-text-muted);
   opacity: 1;
 }
+.multi-select__trigger > span {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.multi-select__trigger > svg {
+  flex: none;
+}
 .multi-select__placeholder {
   color: var(--q1-color-text-secondary);
   font-weight: 400;
 }
+.multi-select__trigger:disabled .multi-select__placeholder {
+  color: var(--q1-color-text-muted);
+}
+.multi-select__trigger:disabled > svg {
+  color: var(--q1-color-text-disabled);
+}
 /* 菜单 radius-4(12px)、padding space-2(8px)、行高 32px。 */
 .multi-select__menu {
   min-width: 240px;
@@ -8902,7 +9033,9 @@ a.q1-card:focus-visible {
   text-align: center;
 }
 @media (hover: hover) and (pointer: fine) {
-  .multi-select__trigger:hover,
+  .multi-select__trigger:hover:not(:disabled):not([aria-disabled='true']):not([aria-invalid='true']):not(:focus-within) {
+    border-color: var(--q1-color-gray-800);
+  }
   .multi-select__option:hover {
     background: color-mix(in srgb, var(--q1-color-text-primary) 5%, transparent);
   }
@@ -11566,17 +11699,87 @@ a.q1-navigation__item[aria-disabled='true'] {
   display: none;
 }
 
+.empty-state--panel {
+  box-sizing: border-box;
+  inline-size: 100%;
+  max-inline-size: none;
+  max-width: none;
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--q1-space-4);
+  padding: var(--q1-space-4) var(--q1-space-6);
+  border: calc(var(--q1-space-1) / 4) solid var(--q1-color-border-subtle);
+  border-radius: var(--q1-radius-3);
+  background: var(--q1-color-bg-subtle);
+  text-align: start;
+}
+
+.empty-state--panel > .empty-state__body {
+  min-inline-size: 0;
+  display: grid;
+  gap: var(--q1-space-1);
+  overflow-wrap: anywhere;
+}
+
+.empty-state--panel .empty-state__title,
+.empty-state--panel .empty-state__desc {
+  font-size: var(--q1-font-size-copy-14);
+  line-height: var(--q1-line-height-copy-14);
+}
+
+.empty-state--panel .empty-state__title {
+  font-weight: var(--q1-font-weight-semibold);
+  color: var(--q1-color-text-primary);
+}
+
+.empty-state--panel .empty-state__desc {
+  font-weight: var(--q1-font-weight-regular);
+  color: var(--q1-color-text-secondary);
+}
+
+.empty-state--panel > .empty-state__actions {
+  flex-shrink: 0;
+  justify-content: start;
+  margin: 0;
+}
+
+@media (max-width: 30rem) {
+  .empty-state--panel {
+    flex-direction: column;
+    align-items: start;
+  }
+
+  .empty-state--panel > .empty-state__actions {
+    max-inline-size: 100%;
+  }
+}
+
 .q1-cascader { display: grid; gap: var(--q1-space-2); min-inline-size: 0; }
 .q1-cascader__label { color: var(--q1-color-text-primary); font-size: var(--q1-font-size-label-14); line-height: var(--q1-line-height-label-14); }
-.q1-cascader__control { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: var(--q1-space-2); 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); }
-.q1-cascader__trigger { display: flex; align-items: center; justify-content: space-between; flex: 1; gap: var(--q1-space-2); min-inline-size: 0; min-block-size: var(--q1-control-height-default); padding: var(--q1-space-2) var(--q1-space-3); border: none; background: none; border-radius: var(--q1-radius-2); color: var(--q1-color-text-primary); font: inherit; font-size: var(--q1-font-size-label-14); line-height: var(--q1-line-height-label-14); cursor: pointer; text-align: start; overflow-wrap: anywhere; }
+.q1-cascader__control { box-sizing: border-box; min-block-size: var(--q1-control-height-default); position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: var(--q1-space-2); 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); }
+.q1-cascader__trigger { display: flex; align-items: center; justify-content: space-between; flex: 1; gap: var(--q1-space-2); min-inline-size: 0; min-block-size: calc(var(--q1-control-height-default) - var(--q1-space-1) / 2); padding: 0 var(--q1-space-3); border: none; background: none; border-radius: var(--q1-radius-2); color: var(--q1-color-text-primary); font: inherit; font-size: var(--q1-font-size-label-14); line-height: var(--q1-line-height-label-14); font-weight: var(--q1-font-weight-regular); cursor: pointer; text-align: start; overflow-wrap: anywhere; }
+.q1-cascader__control:not([data-tags]) { min-inline-size: 0; }
+.q1-cascader__control:not([data-tags]) .q1-cascader__trigger > span {
+  min-inline-size: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
 .q1-cascader__trigger svg, .q1-cascader__option svg { flex: none; }
+@media (hover: hover) and (pointer: fine) {
+  .q1-cascader__control:hover:not(:focus-within):not([data-disabled]):not([data-invalid]):not(:has(.q1-cascader__trigger[aria-disabled])) { border-color: var(--q1-color-gray-800); }
+}
 .q1-cascader__control:focus-within { box-shadow: var(--q1-shadow-focus-input); }
 .q1-cascader__control[data-invalid] { border-color: var(--q1-color-status-danger); }
 .q1-cascader__control[data-invalid]:focus-within { box-shadow: var(--q1-shadow-focus-input-danger); }
 .q1-cascader__trigger:focus-visible { outline: none; }
-.q1-cascader__placeholder, .q1-cascader__path { color: var(--q1-color-text-muted); }
-.q1-cascader__control[data-disabled], .q1-cascader__trigger[aria-disabled], .q1-cascader__option[aria-disabled] { color: var(--q1-color-text-disabled); cursor: default; }
+.q1-cascader__placeholder { color: var(--q1-color-text-secondary); }
+.q1-cascader__path { color: var(--q1-color-text-muted); }
+.q1-cascader__control[data-disabled], .q1-cascader__trigger:disabled, .q1-cascader__option[aria-disabled] { color: var(--q1-color-text-muted); cursor: default; }
+.q1-cascader__control[data-disabled] :is(.q1-cascader__tag > span, .q1-cascader__placeholder) { color: var(--q1-color-text-muted); }
+.q1-cascader__control[data-disabled] .q1-cascader__trigger > svg, .q1-cascader__control[data-disabled] .q1-cascader__tag svg, .q1-cascader__option[aria-disabled] svg { color: var(--q1-color-text-disabled); }
+.q1-cascader__control[data-disabled] { background: var(--q1-color-gray-100); }
 .q1-cascader__control[data-disabled]:not([data-invalid]) { border-color: var(--q1-color-border); }
 .q1-cascader__control[data-disabled] .q1-cascader__trigger { color: inherit; }
 .q1-cascader__control[data-tags] { align-items: start; flex-wrap: nowrap; padding-inline-end: calc(var(--q1-control-height-default) + var(--q1-space-3)); }
@@ -11589,7 +11792,7 @@ a.q1-navigation__item[aria-disabled='true'] {
 .q1-cascader__control > .q1-cascader__remove { position: absolute; inset-block-start: 0; inset-inline-end: 0; }
 .q1-cascader__tags { position: relative; pointer-events: none; min-inline-size: 0; flex: 1; display: flex; flex-wrap: wrap; gap: var(--q1-space-1); padding: var(--q1-space-2); }
 .q1-cascader__tag { font-size: var(--q1-font-size-label-14); line-height: var(--q1-line-height-label-14); max-inline-size: 100%; min-inline-size: 0; display: inline-flex; align-items: center; gap: var(--q1-space-1); background: var(--q1-color-bg-hover); border-radius: var(--q1-radius-1); padding-inline-start: var(--q1-space-2); overflow-wrap: anywhere; }
-.q1-cascader__tag > span { min-inline-size: 0; }
+.q1-cascader__tag > span { min-inline-size: 0; color: var(--q1-color-text-primary); font-weight: var(--q1-font-weight-regular); }
 .q1-cascader__tag .q1-cascader__remove { pointer-events: auto; flex: none; min-block-size: var(--q1-space-6); min-inline-size: var(--q1-space-6); padding: 0; border-radius: var(--q1-radius-1); color: inherit; }
 .q1-cascader__option [data-selection-area] { display: inline-flex; align-items: center; justify-content: center; flex: none; align-self: stretch; inline-size: var(--q1-control-height-default); margin: calc(var(--q1-space-2) * -1) 0 calc(var(--q1-space-2) * -1) calc(var(--q1-space-3) * -1); }
 .q1-cascader__remove, .q1-cascader__back { display: inline-flex; align-items: center; justify-content: center; min-block-size: var(--q1-control-height-default); min-inline-size: var(--q1-control-height-default); padding: var(--q1-space-2); border: none; border-radius: var(--q1-radius-2); background: none; color: var(--q1-color-text-secondary); font: inherit; cursor: pointer; }
@@ -11603,7 +11806,7 @@ a.q1-navigation__item[aria-disabled='true'] {
 .q1-cascader__column + .q1-cascader__column { border-inline-start: calc(var(--q1-space-1) / 4) solid var(--q1-color-border); }
 .q1-cascader__list { box-sizing: border-box; list-style: none; margin: var(--q1-space-1); padding: var(--q1-space-1); overflow-y: auto; outline: none; border-radius: var(--q1-radius-2); max-block-size: min(calc(var(--q1-space-10) * 6), 40dvh); min-block-size: var(--q1-control-height-default); overscroll-behavior: contain; }
 .q1-cascader__option { box-sizing: border-box; display: flex; align-items: center; gap: var(--q1-space-2); min-block-size: var(--q1-control-height-default); padding: var(--q1-space-2) var(--q1-space-3); border-radius: var(--q1-radius-2); color: var(--q1-color-text-primary); font-size: var(--q1-font-size-label-14); line-height: var(--q1-line-height-label-14); cursor: pointer; overflow-wrap: anywhere; }
-.q1-cascader__option[aria-disabled] { color: var(--q1-color-text-disabled); }
+.q1-cascader__option[aria-disabled] { color: var(--q1-color-text-muted); }
 .q1-cascader__option[data-active] { background: var(--q1-color-bg-hover); }
 .q1-cascader__option[aria-selected='true'] { background: var(--q1-color-bg-selected); }
 .q1-cascader__copy { display: grid; flex: 1; min-inline-size: 0; gap: var(--q1-space-1); }
@@ -12583,7 +12786,8 @@ a.q1-navigation__item[aria-disabled='true'] {
 .multi-combobox__copy { display: grid; min-width: 0; overflow-wrap: anywhere; }
 .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); }
+.multi-select__trigger[aria-invalid='true'] { border-color: var(--q1-color-status-danger); }
+.multi-select__trigger[aria-invalid='true']:focus { 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__trigger { inset: calc(var(--q1-space-1) / -4); width: auto; }
@@ -12599,10 +12803,24 @@ a.q1-navigation__item[aria-disabled='true'] {
 .combobox__footer a:focus-visible,
 .multi-combobox__footer a:focus-visible { outline: none; box-shadow: var(--q1-shadow-focus); }
 .combobox__panel-trigger { display: flex; align-items: center; justify-content: space-between; gap: var(--q1-space-2); width: 100%; min-width: 0; padding: 0; border: 0; background: transparent; color: inherit; font: inherit; text-align: start; cursor: pointer; }
-.combobox__panel-trigger > span { overflow-wrap: anywhere; }
+:where(.combobox:not(.combobox--sm):not(.combobox--lg)) .combobox__panel-trigger { font-size: var(--q1-font-size-label-14); line-height: var(--q1-line-height-label-14); font-weight: var(--q1-font-weight-regular); }
+.combobox__panel-trigger > span:not([data-selected-prefix]) {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.combobox__panel-trigger:has([data-selected-prefix]) > span:not([data-selected-prefix]) { flex: 1; }
+.combobox__panel-trigger > [data-selected-prefix] { display: inline-flex; flex: none; align-items: center; justify-content: center; width: var(--q1-space-6); height: var(--q1-space-6); overflow: hidden; color: var(--q1-color-text-secondary); pointer-events: none; }
+.combobox--sm .combobox__panel-trigger > [data-selected-prefix] { width: var(--q1-space-5); height: var(--q1-space-5); }
+.combobox--lg .combobox__panel-trigger > [data-selected-prefix] { width: var(--q1-space-7); height: var(--q1-space-7); }
+.combobox--disabled .combobox__panel-trigger > [data-selected-prefix] { color: var(--q1-color-text-muted); }
+.combobox__panel-trigger > [data-selected-prefix] > * { flex: none; max-width: 100%; max-height: 100%; object-fit: contain; }
+.combobox:not(.combobox--disabled) .combobox__panel-trigger > [data-placeholder] { color: var(--q1-color-text-secondary); }
 .combobox__panel-trigger > svg { flex: none; }
 .combobox__panel-trigger:focus { outline: none; }
 .combobox__control:has(.combobox__panel-trigger:focus-visible) { box-shadow: var(--q1-shadow-focus); }
+.combobox--error .combobox__control:has(.combobox__panel-trigger:focus-visible) { box-shadow: var(--q1-shadow-focus-input-danger); }
 .combobox__panel-trigger[aria-disabled], .combobox__panel-trigger:disabled { cursor: default; }
 .combobox__popup--panel { box-sizing: border-box; display: flex; flex-direction: column; gap: var(--q1-space-2); overflow: hidden; }
 .combobox__popup--panel > :not(.combobox__listbox) { flex: none; }
@@ -13258,6 +13476,27 @@ a.q1-navigation__item[aria-disabled='true'] {
   }
 }
 
+.copy-button__feedback {
+  pointer-events: none;
+  position: fixed;
+  width: max-content;
+  max-width: calc(100vw - var(--q1-space-6));
+  padding: var(--q1-space-2) var(--q1-space-3);
+  border-radius: var(--q1-radius-2);
+  background: var(--q1-color-bg-overlay);
+  color: var(--q1-color-text-primary);
+  box-shadow: var(--q1-shadow-popover);
+  font-size: var(--q1-font-size-label-14);
+  line-height: var(--q1-line-height-label-14);
+  display: inline-flex;
+  align-items: center;
+  gap: var(--q1-space-1);
+}
+
+[data-q1-portal='overlay'] > .copy-button__feedback {
+  z-index: var(--q1-z-popover);
+}
+
 .clearable {
   position: relative;
   display: block;
@@ -14308,16 +14547,17 @@ a.q1-navigation__item[aria-disabled='true'] {
 
 .empty-state__illustration {
   display: grid;
+  grid-template-columns: minmax(0, 1fr);
   place-items: center;
-  max-inline-size: calc(var(--q1-space-6) * 4);
-  margin-block-end: var(--q1-space-2);
+  max-inline-size: var(--q1-space-16);
+  margin-block-end: 0;
 }
 
 .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);
+  inline-size: var(--q1-space-10);
+  max-inline-size: var(--q1-space-10);
   margin-block-end: 0;
 }
 
@@ -14337,7 +14577,7 @@ a.q1-navigation__item[aria-disabled='true'] {
 
 .empty-list-illustration__back { fill: var(--q1-color-gray-400); }
 .empty-list-illustration__card { fill: var(--q1-color-gray-500); stroke: var(--q1-color-border-strong); }
-.empty-list-illustration rect { rx: var(--q1-radius-3); }
+.empty-list-illustration rect:not(:where(.empty-illustration-redraw *)) { rx: var(--q1-radius-3); }
 .empty-list-illustration .empty-list-illustration__clip { rx: var(--q1-radius-1); }
 .empty-list-illustration__rows { fill: none; stroke: var(--q1-color-gray-600); }
 .empty-list-illustration__lens { stroke: var(--q1-color-border-control); }
@@ -14391,6 +14631,72 @@ a.q1-navigation__item[aria-disabled='true'] {
   }
 }
 
+.empty-list-illustration .empty-illustration-redraw .empty-illustration-redraw__surface { fill: var(--q1-color-background-100); }
+.empty-illustration-redraw__outline { stroke: var(--q1-color-gray-700); }
+.empty-illustration-redraw__detail { fill: none; stroke: var(--q1-color-gray-700); }
+.empty-illustration-redraw__tint { fill: var(--q1-color-teal-300); stroke: var(--q1-color-teal-900); }
+.empty-illustration-redraw__tint-detail { fill: none; stroke: var(--q1-color-teal-900); }
+.empty-illustration-redraw__shadow { fill: var(--q1-color-gray-alpha-100); stroke: none; }
+.empty-illustration-redraw__brand { fill: var(--q1-color-primary-700); stroke: none; }
+.empty-illustration-redraw__brand-line { fill: none; stroke: var(--q1-color-primary-700); }
+
+[data-scene='inventory'] .empty-illustration-redraw__tint { fill: var(--q1-color-amber-300); stroke: var(--q1-color-amber-900); }
+[data-scene='orders'] .empty-illustration-redraw__tint { fill: var(--q1-color-green-300); stroke: var(--q1-color-green-900); }
+[data-scene='orders'] .empty-illustration-redraw__tint-detail { stroke: var(--q1-color-green-900); }
+[data-scene='activity'] .empty-illustration-redraw__tint { fill: var(--q1-color-blue-300); stroke: var(--q1-color-blue-900); }
+[data-scene='activity'] .empty-illustration-redraw__tint-detail { stroke: var(--q1-color-blue-900); }
+
+[data-scene='purchase'] .empty-illustration-redraw__tint { fill: var(--q1-color-green-300); stroke: var(--q1-color-green-900); }
+[data-scene='purchase'] .empty-illustration-redraw__tint-detail { stroke: var(--q1-color-green-900); }
+[data-scene='search'] .empty-illustration-redraw__tint { fill: var(--q1-color-blue-300); stroke: var(--q1-color-blue-900); }
+[data-scene='search'] .empty-illustration-redraw__tint-detail { stroke: var(--q1-color-blue-900); }
+[data-scene='supplier'] .empty-illustration-redraw__tint { fill: var(--q1-color-blue-300); stroke: var(--q1-color-blue-900); }
+[data-scene='supplier'] .empty-illustration-redraw__tint-detail { stroke: var(--q1-color-blue-900); }
+[data-scene='product'] .empty-illustration-redraw__tint { fill: var(--q1-color-teal-300); stroke: var(--q1-color-teal-900); }
+[data-scene='product'] .empty-illustration-redraw__tint-detail { stroke: var(--q1-color-teal-900); }
+[data-scene='team'] .empty-illustration-redraw__tint { fill: var(--q1-color-green-300); stroke: var(--q1-color-green-900); }
+[data-scene='team'] .empty-illustration-redraw__tint-detail { stroke: var(--q1-color-green-900); }
+[data-scene='store'] .empty-illustration-redraw__tint { fill: var(--q1-color-blue-300); stroke: var(--q1-color-blue-900); }
+[data-scene='store'] .empty-illustration-redraw__tint-detail { stroke: var(--q1-color-blue-900); }
+
+:is(:root[data-theme='dark'], [data-q1-theme='dark']) .empty-illustration-redraw__tint:not(:where([data-q1-theme='light'], [data-q1-theme='light'] *)),
+:is(:root[data-theme='dark'], [data-q1-theme='dark']) .empty-illustration-redraw__tint-detail:not(:where([data-q1-theme='light'], [data-q1-theme='light'] *)) { stroke: var(--q1-color-gray-700); }
+:is(:root[data-theme='dark'], [data-q1-theme='dark']) [data-scene='inventory'] .empty-illustration-redraw__tint:not(:where([data-q1-theme='light'], [data-q1-theme='light'] *)) { fill: var(--q1-color-blue-300); }
+:is(:root[data-theme='dark'], [data-q1-theme='dark']) .empty-illustration-redraw__shadow:not(:where([data-q1-theme='light'], [data-q1-theme='light'] *)) { fill: var(--q1-color-gray-alpha-200); }
+:is(:root[data-theme='dark'], [data-q1-theme='dark']) .empty-illustration-redraw__brand:not(:where([data-q1-theme='light'], [data-q1-theme='light'] *)) { fill: var(--q1-color-primary-900); }
+:is(:root[data-theme='dark'], [data-q1-theme='dark']) .empty-illustration-redraw__brand-line:not(:where([data-q1-theme='light'], [data-q1-theme='light'] *)) { stroke: var(--q1-color-primary-900); }
+
+@media (forced-colors: active) {
+  .empty-illustration-redraw :is(.empty-illustration-redraw__surface, .empty-illustration-redraw__tint) { fill: Canvas !important; stroke: CanvasText !important; }
+  .empty-illustration-redraw :is(.empty-illustration-redraw__outline, .empty-illustration-redraw__detail, .empty-illustration-redraw__tint-detail, .empty-illustration-redraw__brand-line) { stroke: CanvasText !important; }
+  .empty-illustration-redraw__brand { fill: CanvasText !important; }
+  .empty-illustration-redraw__shadow { fill: none !important; }
+}
+
+.empty-state--inline { padding-inline: 0; }
+.empty-state--inline .empty-state__title { color: var(--q1-color-text-primary); }
+.empty-state--inline .empty-illustration-inline :is(rect, path, circle) { vector-effect: non-scaling-stroke; }
+[data-scene='complete'] .empty-illustration-redraw__tint { fill: var(--q1-color-green-300); stroke: var(--q1-color-green-900); }
+[data-scene='complete'] .empty-illustration-redraw__tint-detail { stroke: var(--q1-color-green-900); }
+[data-scene='permission'] .empty-illustration-redraw__tint { fill: var(--q1-color-blue-300); stroke: var(--q1-color-blue-900); }
+[data-scene='permission'] .empty-illustration-redraw__tint-detail { stroke: var(--q1-color-blue-900); }
+[data-scene='notification'] .empty-illustration-redraw__tint { fill: var(--q1-color-teal-300); stroke: var(--q1-color-teal-900); }
+[data-scene='notification'] .empty-illustration-redraw__tint-detail { stroke: var(--q1-color-teal-900); }
+[data-scene='session'] .empty-illustration-redraw__tint { fill: var(--q1-color-blue-300); stroke: var(--q1-color-blue-900); }
+[data-scene='session'] .empty-illustration-redraw__tint-detail { stroke: var(--q1-color-blue-900); }
+[data-scene='integration'] .empty-illustration-redraw__tint { fill: var(--q1-color-teal-300); stroke: var(--q1-color-teal-900); }
+[data-scene='integration'] .empty-illustration-redraw__tint-detail { stroke: var(--q1-color-teal-900); }
+[data-scene='payment'] .empty-illustration-redraw__tint { fill: var(--q1-color-green-300); stroke: var(--q1-color-green-900); }
+[data-scene='payment'] .empty-illustration-redraw__tint-detail { stroke: var(--q1-color-green-900); }
+[data-scene='security'] .empty-illustration-redraw__tint { fill: var(--q1-color-blue-300); stroke: var(--q1-color-blue-900); }
+[data-scene='security'] .empty-illustration-redraw__tint-detail { stroke: var(--q1-color-blue-900); }
+
+:is(:root[data-theme='dark'], [data-q1-theme='dark']) .empty-illustration-redraw__tint:not(:where([data-q1-theme='light'], [data-q1-theme='light'] *)),
+:is(:root[data-theme='dark'], [data-q1-theme='dark']) .empty-illustration-redraw__tint-detail:not(:where([data-q1-theme='light'], [data-q1-theme='light'] *)) { stroke: var(--q1-color-gray-700); }
+
+[data-scene='activity'] .empty-illustration-inline__solid { fill: var(--q1-color-blue-900); stroke: none; }
+:is(:root[data-theme='dark'], [data-q1-theme='dark']) [data-scene='activity'] .empty-illustration-inline__solid:not(:where([data-q1-theme='light'], [data-q1-theme='light'] *)) { fill: var(--q1-color-blue-900); stroke: none; }
+
 /* Private geometry derives from existing spacing; no new consumer token surface. */
 .control-option.checkbox-circle {
   --checkbox-circle-diameter: calc(var(--q1-space-4) + var(--q1-space-1) / 2);
@@ -15382,7 +15688,6 @@ a.q1-navigation__item[aria-disabled='true'] {
 .form-field--error .form-control:not(.input-control .form-control):not(.textarea-control .form-control):not(.q1-verification-code__slot):not(.q1-verification-code__input),
 .form-control[aria-invalid='true']:not(.input-control .form-control):not(.textarea-control .form-control):not(.q1-verification-code__slot):not(.q1-verification-code__input),
 .q1-verification-code:has(input[aria-invalid='true']),
-.combobox--error .combobox__control,
 .control-option input[aria-invalid='true'] + .control-option__visual,
 .control-option--error .control-option__visual {
   --field-error-shadow: 0 0 0 calc(var(--q1-space-1) / 4) var(--q1-color-status-danger),
@@ -15699,7 +16004,7 @@ a.q1-navigation__item[aria-disabled='true'] {
 
 :is(:root[data-theme='dark'], [data-q1-theme='dark']) :is(
   .combobox__control:not(:has(:disabled, [aria-invalid='true'])),
-  .multi-select__trigger:not(:disabled),
+  .multi-select__trigger:not(:disabled):not([aria-invalid='true']),
   .composer__box:not(:has(textarea:disabled)),
   .feedback__select:not(:disabled),
   .feedback__textarea:not(:disabled),
@@ -15729,7 +16034,7 @@ a.q1-navigation__item[aria-disabled='true'] {
 .feedback__select:disabled,
 .feedback__textarea:disabled,
 .range-slider__number:disabled,
-.multi-select__trigger:disabled {
+.multi-select__trigger:disabled:not([aria-invalid='true']) {
   border-color: var(--q1-color-border);
 }
 
@@ -15738,7 +16043,9 @@ a.q1-navigation__item[aria-disabled='true'] {
     .form-control:not(.input-control .form-control):not(.textarea-control .form-control):not(:disabled):not([aria-invalid='true']):not(.form-field--error .form-control),
     .input-control:not(:has(:disabled, [aria-invalid='true'])):not(.form-field--error .input-control),
     .textarea-control:not(:has(:disabled, [aria-invalid='true'])):not(.form-field--error .textarea-control),
-    .combobox__control:not(:has(:disabled, [aria-invalid='true'])),
+    .combobox__control:not(:has(:disabled, [aria-invalid='true'])):not(.combobox--readonly .combobox__control),
+    .multi-select__trigger:not(:disabled):not([aria-disabled='true']):not([aria-invalid='true']),
+    .q1-cascader__control:not([data-disabled]):not([data-invalid]):not(:has(.q1-cascader__trigger[aria-disabled])),
     .choicebox:not(:has(:checked, :disabled))
   ):hover:not(:focus-within):not(:where([data-q1-theme='light'], [data-q1-theme='light'] *)) {
     border-color: var(--q1-color-gray-700);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@q1travel/design-system",
-  "version": "0.31.2",
+  "version": "0.31.4",
   "description": "React components, design tokens, and interface contracts for q1travel products.",
   "keywords": [
     "react",
@@ -55,11 +55,13 @@
     "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/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:browser:selected-prefix": "node scripts/lib/check-combobox-selected-prefix-browser.mjs",
+    "check:browser": "node --test scripts/devtools-timeout-telemetry.test.mjs scripts/devtools-renderer-map.test.mjs 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 --test --test-concurrency=2 scripts/browser-style-ready-browser.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-browser.mjs --button-loading-size && node scripts/check-browser.mjs --toggle-contrast && node scripts/check-browser.mjs --field-appearance && node scripts/check-browser.mjs --disabled-text-muted && node scripts/check-browser.mjs --cascader-disabled-background && node scripts/check-copy-button-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 && npm run check:browser:selected-prefix",
+    "check:package-api": "node scripts/check-package-api.mjs && node scripts/lib/check-combobox-selected-prefix-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",
-    "check:release-sync": "node --test scripts/release-sync.test.mjs scripts/release-preview-version.test.mjs",
+    "check:release-sync": "node --test scripts/release-sync.test.mjs scripts/release-preview-version.test.mjs scripts/release-record.test.mjs",
+    "release:record": "node scripts/release-record.mjs",
     "release:verify": "node scripts/release-sync.mjs --verify-only",
     "release:sync": "node scripts/release-sync.mjs",
     "check": "npm run check:release-sync && npm run build && npm run check:shell && npm run check:browser && npm run build:pkg",