@q1travel/design-system 0.30.11 → 0.30.13

package/dist-pkg/style.css

@@ -157,6 +157,7 @@
   --q1-color-text-soft: #6e6e73;
   --q1-color-text-disabled: #b7b7b7;
   --q1-color-overlay-scrim: rgba(2, 6, 23, 0.44);
+  --q1-color-media-scrim: rgba(2, 6, 23, 0.56);
   --q1-color-focus: var(--q1-color-shadow);
   --q1-color-selection-bg: var(--q1-color-text-primary);
   --q1-color-selection-fg: var(--q1-color-bg-canvas);
@@ -502,6 +503,7 @@
   --q1-color-text-soft: #9a9a9c;
   --q1-color-text-disabled: var(--q1-color-gray-500);
   --q1-color-overlay-scrim: rgba(2, 6, 23, 0.44);
+  --q1-color-media-scrim: rgba(2, 6, 23, 0.56);
   --q1-color-focus: var(--q1-color-action-on-primary);
   --q1-color-status-success: var(--q1-color-green-900);
   --q1-color-status-success-text: var(--q1-color-green-900);
@@ -1985,6 +1987,29 @@
   text-overflow: ellipsis;
   color: var(--q1-color-text-secondary);
 }
+.menu__item--locked {
+  height: auto;
+  min-height: var(--q1-control-height-default);
+  align-items: flex-start;
+  padding-block: var(--q1-space-2);
+  line-height: var(--q1-line-height-label-14);
+}
+.menu__item-content {
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  min-width: 0;
+}
+.menu__item--locked .menu__item-icon {
+  margin-top: calc((var(--q1-line-height-label-14) - var(--q1-space-4)) / 2);
+}
+.menu__item-reason {
+  font-size: var(--q1-font-size-label-13);
+  line-height: var(--q1-line-height-label-13);
+  white-space: normal;
+  overflow-wrap: anywhere;
+  color: var(--q1-color-text-secondary);
+}
 .menu__section {
   padding: var(--q1-space-2) var(--q1-space-3) var(--q1-space-1);
   font-size: 12px;
@@ -2869,6 +2894,7 @@
 }
 
 .banner__close {
+  font: inherit;
   box-sizing: border-box;
   display: inline-flex;
   align-items: center;
@@ -3070,6 +3096,7 @@ a.breadcrumb__link:hover {
 }
 
 .breadcrumb__toggle {
+  font: inherit;
   display: inline-flex;
   align-items: center;
   justify-content: center;
@@ -3363,6 +3390,7 @@ a.breadcrumb__link:hover {
  可见焦点环——它可聚焦，chrome 整体不再 aria-hidden 正是为了让它可达。
  点击目标 24×24（WCAG 2.2 最小目标），图标仍 12px 居中——负 margin 抵消撑高，不改地址栏高度。 */
 .browser__address-copy {
+  font: inherit;
   flex-shrink: 0;
   display: grid;
   place-items: center;
@@ -4313,6 +4341,7 @@ a[href]:has(> .book):focus-visible {
 }
 
 .cal-field__trigger {
+  font: inherit;
   display: inline-flex;
   align-items: center;
   gap: var(--q1-space-2);
@@ -4335,6 +4364,7 @@ a[href]:has(> .book):focus-visible {
 
 .cal-field__clear,
 .cal-field__caret {
+  font: inherit;
   display: grid;
   place-items: center;
   min-height: var(--q1-space-6);
@@ -4454,6 +4484,7 @@ a[href]:has(> .book):focus-visible {
 }
 
 .calendar__nav-btn {
+  font: inherit;
   display: grid;
   place-items: center;
   width: 28px;
@@ -4515,6 +4546,7 @@ a[href]:has(> .book):focus-visible {
 }
 
 .calendar__day {
+  font: inherit;
   position: relative;
   display: grid;
   place-items: center;
@@ -4576,6 +4608,7 @@ a[href]:has(> .book):focus-visible {
 }
 
 .cal-period__trigger {
+  font: inherit;
   display: inline-flex;
   align-items: center;
   gap: var(--q1-space-2);
@@ -4613,6 +4646,7 @@ a[href]:has(> .book):focus-visible {
 }
 
 .cal-period__option {
+  font: inherit;
   width: 100%;
   text-align: left;
   padding: var(--q1-space-2) var(--q1-space-3);
@@ -5037,6 +5071,7 @@ a[href]:has(> .book):focus-visible {
 }
 
 .snippet__copy {
+  font: inherit;
   position: absolute;
   top: 50%;
   right: var(--q1-space-1);
@@ -5310,6 +5345,7 @@ a[href]:has(> .book):focus-visible {
 
 /* 行动按钮。 */
 .note__action {
+  font: inherit;
   flex-shrink: 0;
   display: inline-flex;
   align-items: center;
@@ -6392,6 +6428,7 @@ a.q1-card:focus-visible {
 }
 
 .twc__copy {
+  font: inherit;
   display: grid;
   place-items: center;
   width: 24px;
@@ -6507,6 +6544,7 @@ a.q1-card:focus-visible {
 
 /* 清除按钮：视觉走字段家族的通用 X；Esc 仍是即时键盘路径。 */
 .search-input__clear {
+  font: inherit;
   position: absolute;
   top: 50%;
   right: var(--q1-space-2);
@@ -6716,6 +6754,7 @@ a.q1-card:focus-visible {
 
 /* 药丸触发器：h32 / font 14/500 / 全圆角；颜色走家族 panel+border。 */
 .show-more__trigger {
+  font: inherit;
   display: inline-flex;
   align-items: center;
   gap: var(--q1-space-1);
@@ -7512,6 +7551,7 @@ a.q1-card:focus-visible {
   min-height: 0;
 }
 .scroller-buttons__control {
+  font: inherit;
   flex: none;
   display: grid;
   place-items: center;
@@ -7576,9 +7616,8 @@ a.q1-card:focus-visible {
   place-items: center;
 }
 .theme-switcher__option:has(input:checked) {
-  background: var(--q1-color-bg-subtle);
+  background: var(--q1-color-bg-selected-neutral);
   color: var(--q1-color-text-primary);
-  box-shadow: inset 0 0 0 1px var(--q1-color-gray-400);
 }
 .theme-switcher__option:has(input:focus-visible) {
   outline: none;
@@ -7935,6 +7974,7 @@ a.q1-card:focus-visible {
   box-shadow: var(--q1-shadow-focus);
 }
 .q1-toast__close {
+  font: inherit;
   flex: none;
   display: grid;
   place-items: center;
@@ -8243,6 +8283,7 @@ a.q1-card:focus-visible {
   display: inline-block;
 }
 .dots-menu__trigger {
+  font: inherit;
   display: grid;
   place-items: center;
   border: 0;
@@ -8548,6 +8589,7 @@ a.q1-card:focus-visible {
   outline: none;
 }
 .combobox__clear {
+  font: inherit;
   flex: none;
   display: grid;
   place-items: center;
@@ -8862,6 +8904,7 @@ a.q1-card:focus-visible {
 }
 /* 遮罩颜色与 Modal 同源，见 overlay-surfaces.css：浅色为白纱，暗色压暗。 */
 .search-dialog__backdrop {
+  font: inherit;
   position: absolute;
   inset: 0;
   border: 0;
@@ -8913,6 +8956,7 @@ a.q1-card:focus-visible {
 }
 /* 关闭入口以 Esc 键帽呈现：键盘优先、视觉更轻；粗指针下由 TouchTarget 扩展到 44px 命中区。 */
 .search-dialog__close {
+  font: inherit;
   position: relative;
   display: inline-flex;
   flex: none;
@@ -9146,6 +9190,7 @@ a.q1-card:focus-visible {
   padding: var(--q1-space-4);
 }
 .modal__backdrop {
+  font: inherit;
   position: absolute;
   inset: 0;
   border: 0;
@@ -9329,6 +9374,7 @@ a.q1-card:focus-visible {
   align-items: center;
 }
 .drawer__backdrop {
+  font: inherit;
   position: absolute;
   inset: 0;
   border: 0;
@@ -9348,6 +9394,7 @@ a.q1-card:focus-visible {
 /* 抓手把是真按钮（点击/Enter/Space 关闭，下滑手势保留给触屏）——原 role=button+tabIndex=-1
  是读屏能发现却无法激活的矛盾信号。清按钮默认样式，触控目标保持至少 44px。 */
 .drawer__handle {
+  font: inherit;
   display: grid;
   place-items: center;
   width: 100%;
@@ -9663,6 +9710,7 @@ a.q1-card:focus-visible {
   color: var(--q1-color-text-primary);
 }
 .sheet__close {
+  font: inherit;
   flex: none;
   display: grid;
   place-items: center;
@@ -10532,6 +10580,7 @@ a.q1-navigation__item[aria-disabled='true'] {
 
 .q1-context-switcher__popup[role='dialog'] input[type='search'],
 .q1-context-switcher__popup--stacked input[type='search'] {
+  font: inherit;
   width: 100%;
   min-width: 0;
   min-height: var(--q1-space-8);
@@ -11466,7 +11515,7 @@ a.q1-navigation__item[aria-disabled='true'] {
 
 .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); border-radius: var(--q1-radius-2); background: var(--q1-color-bg-sunken); }
+.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__trigger svg, .q1-cascader__option svg { flex: none; }
 .q1-cascader__control:focus-within { box-shadow: var(--q1-shadow-focus-input); }
@@ -11475,25 +11524,26 @@ a.q1-navigation__item[aria-disabled='true'] {
 .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__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)); }
 .q1-cascader__control[data-tags] .q1-cascader__trigger { position: absolute; inset: 0; inline-size: 100%; padding: 0; }
 .q1-cascader__control[data-tags][data-clearable] { padding-inline-end: calc(var(--q1-control-height-default) * 2 + var(--q1-space-3)); }
 .q1-cascader__control[data-clearable]:not([data-tags]) .q1-cascader__trigger { margin-inline-end: var(--q1-control-height-default); }
-.q1-cascader__control[data-tags] .q1-cascader__trigger > svg { position: absolute; inset-block-start: var(--q1-space-2); inset-inline-end: var(--q1-space-2); }
+.q1-cascader__control[data-tags] .q1-cascader__trigger > svg { position: absolute; inset-block-start: calc((var(--q1-control-height-default) - var(--q1-space-4)) / 2); inset-inline-end: var(--q1-space-2); }
 .q1-cascader__control[data-tags][data-clearable] .q1-cascader__trigger > svg { inset-inline-end: calc(var(--q1-control-height-default) + var(--q1-space-2)); }
 .q1-cascader__remove { position: relative; z-index: 1; pointer-events: auto; }
 .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-2); padding: var(--q1-space-2); }
-.q1-cascader__tag { max-inline-size: 100%; min-inline-size: 0; display: inline-flex; align-items: center; gap: var(--q1-space-2); background: var(--q1-color-bg-selected); border-radius: var(--q1-radius-2); padding-inline-start: var(--q1-space-2); overflow-wrap: anywhere; }
+.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 .q1-cascader__remove { pointer-events: auto; flex: none; }
+.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; }
 .q1-cascader__remove:focus-visible, .q1-cascader__back:focus-visible, .q1-cascader__search:focus-visible, .q1-cascader__list:focus-visible { outline: none; box-shadow: var(--q1-shadow-focus-input); }
 .q1-cascader__popup.popover-panel { max-inline-size: calc(100vw - var(--q1-space-6)); padding: var(--q1-space-2); border-radius: var(--q1-radius-3); background: var(--q1-color-bg-overlay); }
 .q1-cascader__panel { display: grid; gap: var(--q1-space-2); min-inline-size: 0; }
-.q1-cascader__search { box-sizing: border-box; inline-size: 100%; min-block-size: var(--q1-control-height-default); padding: var(--q1-space-2) var(--q1-space-3); border: calc(var(--q1-space-1) / 4) solid var(--q1-color-border); border-radius: var(--q1-radius-2); background: var(--q1-color-bg-sunken); color: var(--q1-color-text-primary); font: inherit; font-size: var(--q1-font-size-label-14); }
+.q1-cascader__search { box-sizing: border-box; inline-size: 100%; min-block-size: var(--q1-control-height-default); padding: var(--q1-space-2) 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); color: var(--q1-color-text-primary); font: inherit; font-size: var(--q1-font-size-label-14); }
 .q1-cascader__columns { display: flex; overflow-x: auto; min-inline-size: 0; max-inline-size: calc(100vw - var(--q1-space-6) * 2); }
 .q1-cascader__column { flex: 0 0 auto; inline-size: calc(var(--q1-space-10) * 6); min-inline-size: 0; max-inline-size: 100%; }
 .q1-cascader__column[hidden] { display: none; }
@@ -11519,7 +11569,7 @@ a.q1-navigation__item[aria-disabled='true'] {
   .q1-cascader__control[data-clearable]:not([data-tags]) .q1-cascader__trigger { margin-inline-end: var(--q1-touch-target-min); }
   .q1-cascader__control[data-tags] .q1-cascader__trigger > svg { inset-block-start: calc((var(--q1-touch-target-min) - var(--q1-space-4)) / 2); }
   .q1-cascader__control[data-tags][data-clearable] .q1-cascader__trigger > svg { inset-inline-end: calc(var(--q1-touch-target-min) + var(--q1-space-2)); }
-  .q1-cascader__remove { min-inline-size: var(--q1-touch-target-min); }
+  .q1-cascader__remove, .q1-cascader__tag .q1-cascader__remove { min-inline-size: var(--q1-touch-target-min); min-block-size: var(--q1-touch-target-min); }
 }
 
 /* 未知总量以往返移动表示持续等待；减弱动态时保留居中填充段，不伪装完成比例。 */
@@ -12449,7 +12499,7 @@ 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 { font: inherit; 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); }
@@ -12459,7 +12509,7 @@ a.q1-navigation__item[aria-disabled='true'] {
 .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 { font: inherit; 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); }
@@ -12535,6 +12585,7 @@ a.q1-navigation__item[aria-disabled='true'] {
 .command-palette__hint,
 .command-palette__close,
 .command-palette__kbd {
+  font: inherit;
   border-radius: var(--q1-radius-1);
   background: color-mix(in srgb, var(--q1-color-text-primary) 8%, transparent);
   color: var(--q1-color-text-secondary);
@@ -12558,6 +12609,7 @@ a.q1-navigation__item[aria-disabled='true'] {
 }
 
 .command-palette__backdrop {
+  font: inherit;
   position: absolute;
   inset: 0;
   border: 0;
@@ -13048,6 +13100,7 @@ a.q1-navigation__item[aria-disabled='true'] {
 }
 
 .copy-button {
+  font: inherit;
   display: grid;
   place-items: center;
   width: var(--q1-space-8);
@@ -13172,6 +13225,7 @@ a.q1-navigation__item[aria-disabled='true'] {
 }
 
 .clearable__clear {
+  font: inherit;
   display: grid;
   place-items: center;
   width: var(--q1-space-6);
@@ -13265,6 +13319,7 @@ a.q1-navigation__item[aria-disabled='true'] {
 }
 
 .codeblock__tab {
+  font: inherit;
   min-height: var(--q1-space-6);
   padding: calc(var(--q1-space-1) / 2) var(--q1-space-3);
   border: none;
@@ -13461,6 +13516,7 @@ a.q1-navigation__item[aria-disabled='true'] {
 }
 
 .description__hint {
+  font: inherit;
   display: inline-grid;
   place-items: center;
   width: var(--q1-space-6);
@@ -13614,6 +13670,7 @@ a.q1-navigation__item[aria-disabled='true'] {
  触屏下 TouchTarget 再扩到 --q1-touch-target-min。 */
 .info-tip__trigger,
 .info-tip__close {
+  font: inherit;
   position: relative;
   display: inline-grid;
   place-items: center;
@@ -13934,6 +13991,7 @@ a.q1-navigation__item[aria-disabled='true'] {
 }
 
 .corner-remove-button {
+  font: inherit;
   position: absolute;
   top: 0;
   right: 0;
@@ -14856,7 +14914,7 @@ a.q1-navigation__item[aria-disabled='true'] {
 .composer textarea::placeholder { color: var(--q1-color-text-muted); }
 .composer__tools { display: flex; align-items: center; gap: var(--q1-space-3); padding: var(--q1-space-2); }
 .composer__tools > .button { margin-left: auto; }
-.composer__icon { position: relative; --touch-target-border-width: 0px; display: grid; place-items: center; border: 0; background: transparent; color: var(--q1-color-text-secondary); width: var(--q1-space-7); height: var(--q1-space-7); border-radius: var(--q1-radius-2); }
+.composer__icon { font: inherit; position: relative; --touch-target-border-width: 0px; display: grid; place-items: center; border: 0; background: transparent; color: var(--q1-color-text-secondary); width: var(--q1-space-7); height: var(--q1-space-7); border-radius: var(--q1-radius-2); }
 .composer__icon:hover { background: var(--q1-color-bg-hover); }
 .composer__icon:focus-visible { outline: none; box-shadow: var(--q1-shadow-focus); }
 .composer__attachments { display: flex; flex-wrap: wrap; gap: var(--q1-space-2); padding: var(--q1-space-2); }
@@ -14884,7 +14942,7 @@ a.q1-navigation__item[aria-disabled='true'] {
 .attachment__retry { position: relative; --touch-target-border-width: 0px; border: 0; padding: 0; background: transparent; color: var(--q1-color-text-primary); font: inherit; font-weight: var(--q1-font-weight-medium); border-radius: var(--q1-radius-1); cursor: pointer; }
 .attachment__retry:hover { text-decoration: underline; }
 .attachment__retry:focus-visible { outline: none; box-shadow: var(--q1-shadow-focus); }
-.attachment__remove { position: relative; --touch-target-border-width: 0px; border: 0; background: transparent; color: var(--q1-color-text-muted); display: grid; place-items: center; width: var(--q1-space-6); height: var(--q1-space-6); border-radius: var(--q1-radius-1); flex-shrink: 0; }
+.attachment__remove { font: inherit; position: relative; --touch-target-border-width: 0px; border: 0; background: transparent; color: var(--q1-color-text-muted); display: grid; place-items: center; width: var(--q1-space-6); height: var(--q1-space-6); border-radius: var(--q1-radius-1); flex-shrink: 0; }
 .attachment__remove:hover { background: var(--q1-color-bg-hover); }
 .attachment__remove:focus-visible { outline: none; box-shadow: var(--q1-shadow-focus); }
 @media (pointer: coarse), (any-pointer: coarse) { .attachment { gap: var(--q1-space-4); padding: var(--q1-space-3); } }
@@ -14976,6 +15034,7 @@ a.q1-navigation__item[aria-disabled='true'] {
 }
 
 .feedback__emotion {
+  font: inherit;
   display: grid;
   place-items: center;
   width: var(--q1-space-8);

package/dist-pkg/tokens.css

@@ -144,6 +144,7 @@
   --q1-color-text-soft: #6e6e73;
   --q1-color-text-disabled: #b7b7b7;
   --q1-color-overlay-scrim: rgba(2, 6, 23, 0.44);
+  --q1-color-media-scrim: rgba(2, 6, 23, 0.56);
   --q1-color-focus: var(--q1-color-shadow);
   --q1-color-selection-bg: var(--q1-color-text-primary);
   --q1-color-selection-fg: var(--q1-color-bg-canvas);
@@ -470,6 +471,7 @@
   --q1-color-text-soft: #9a9a9c;
   --q1-color-text-disabled: var(--q1-color-gray-500);
   --q1-color-overlay-scrim: rgba(2, 6, 23, 0.44);
+  --q1-color-media-scrim: rgba(2, 6, 23, 0.56);
   --q1-color-focus: var(--q1-color-action-on-primary);
   --q1-color-selection-bg: var(--q1-color-text-primary);
   --q1-color-selection-fg: var(--q1-color-bg-canvas);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@q1travel/design-system",
-  "version": "0.30.11",
+  "version": "0.30.13",
   "description": "React components, design tokens, and interface contracts for q1travel products.",
   "keywords": [
     "react",
@@ -49,20 +49,21 @@
   ],
   "scripts": {
     "dev": "vite --host 127.0.0.1",
+    "changelog:assemble": "node scripts/changelog-assemble.mjs",
     "sync:contracts": "node scripts/sync-design-contracts.mjs",
     "build": "npm run sync:contracts && tsc -b && vite build",
     "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/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 && 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-combobox-required.test.mjs 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-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": "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 && 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",
     "check:release-sync": "node --test scripts/release-sync.test.mjs scripts/release-preview-version.test.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",
-    "build:lib": "vite build --config vite.lib.config.ts",
+    "build:lib": "vite build --config vite.lib.config.ts && node scripts/build-component-enums.mjs",
     "build:style": "node scripts/build-style.mjs",
     "build:pkg": "npm run build:lib && npm run build:style && npm run check:package-api",
     "prepack": "npm run build:pkg"
@@ -75,12 +76,13 @@
     "react-dom": "^19.0.0"
   },
   "devDependencies": {
+    "@microsoft/api-extractor": "^7.60.1",
     "@types/react": "^19.2.17",
     "@types/react-dom": "^19.2.3",
     "@vitejs/plugin-react": "^5.0.0",
     "axe-core": "4.14.0",
     "typescript": "^5.8.0",
     "vite": "^7.3.6",
-    "vite-plugin-dts": "^4.5.0"
+    "vite-plugin-dts": "^5.1.2"
   }
 }

package/tooling/README.md

@@ -6,4 +6,10 @@
 - `evals/fixtures.json` —— eval fixture 索引。
 - `evals/<fixture>/{before,after}/` —— 每条规则的前后态样例,用来测 skill / linter 是否产出预期改动。
 
-**现状**:`q1-design lint` 已实现 `Q1-DS-001`(`--ds-*`)/`Q1-DS-401`(`transition: all`)/`Q1-DS-404`(裸 duration/easing)/`Q1-DS-501`(裸颜色字面量)四条纯机械规则;`q1-design eval` 已实现,对每个 fixture 校验 before 命中且 after 零命中。`q1-design overrides` 统计消费方对组件的 className 覆写并按「重画外观/仅布局」分类——它不是 pass/fail 规则,因为覆写布局是正当用法,拦它的规则最后会被整体关掉。其余 `kind=deterministic` 规则(含判断成分)与全部 `kind=judgment` 规则待后续批次。见 `../.agents/skills/product-design/references/coverage-gaps.md`。
+**现状**:`q1-design lint` 已实现 `Q1-DS-001`(`--ds-*`)/`Q1-DS-401`(`transition: all`)/`Q1-DS-404`(裸 duration/easing)/`Q1-DS-501`(裸颜色字面量)与 `Q1-DS-002`（组件 `variant` / `size` 非法字符串字面量）五条纯机械规则;`q1-design eval` 已实现,对每个 fixture 校验 before 命中且 after 零命中。`q1-design overrides` 统计消费方对组件的 className 覆写并按「重画外观/仅布局」分类——它不是 pass/fail 规则,因为覆写布局是正当用法,拦它的规则最后会被整体关掉。其余 `kind=deterministic` 规则(含判断成分)与全部 `kind=judgment` 规则待后续批次。见 `../.agents/skills/product-design/references/coverage-gaps.md`。
+
+`Q1-DS-002` 为 error：仅检查直接从 `@q1travel/design-system` 导入的组件（含命名别名、命名空间），不追踪消费方再导出或运行时赋值；局部同名组件不受影响。允许值来自随包 `dist-pkg/design-system.d.ts` 中组件 props 的有限字符串联合，覆盖 `Button` 及其他声明了此类 `variant` / `size` 的导出组件。`variant="quiet"`、`variant={'quiet'}` 会检查，`variant={value}` 与条件表达式交给消费方类型检查。诊断包含文件、行号、组件、属性、非法值和允许值；命中退出 1，支持现有文件、区间和下一行 pragma。检测到相关字面量却缺少类型声明时退出 1 并提示修复，不能静默跳过。
+
+CLI 通过运行时依赖 TypeScript 解析 JSX 与词法绑定，避免把注释、字符串或被遮蔽的同名组件误当成包组件；不依赖消费方开发依赖或本仓源码。
+
+在本仓直跑组件规则或对应 CLI 测试前，运行 `npm run build:lib` 生成类型声明；仅扫描 CSS 不要求该产物。

package/tooling/scripts/evals/rules-checklist.json

@@ -1,5 +1,5 @@
 {
-  "note": "q1travel 产品设计确定性规则清单。每条带稳定 ID + canonical 出处。kind=deterministic 的可由 linter 静态强制;kind=judgment 的留给 product-design skill / Review。linter CLI 与 eval runner 已实现:`q1-design lint`(Q1-DS-001/401/501)与 `q1-design eval`(bin/q1-design.mjs);覆盖缺口见 ../../../.agents/skills/product-design/references/coverage-gaps.md。",
+  "note": "q1travel 产品设计确定性规则清单。每条带稳定 ID + canonical 出处。kind=deterministic 的可由 linter 静态强制;kind=judgment 的留给 product-design skill / Review。linter CLI 与 eval runner 已实现:`q1-design lint`(Q1-DS-001/002/401/404/501)与 `q1-design eval`(bin/q1-design.mjs);覆盖缺口见 ../../../.agents/skills/product-design/references/coverage-gaps.md。",
   "version": 0,
   "idScheme": {
     "0xx": "token 与事实源",
@@ -11,6 +11,7 @@
   },
   "rules": [
     { "id": "Q1-DS-001", "title": "新代码用 --q1-*,不用 --ds-*", "source": "contracts/token-naming.md", "severity": "error", "kind": "deterministic", "detect": "新增/改动代码里出现 --ds-* 声明或作为新决策源名", "fix": "改用 --q1-* canonical token" },
+    { "id": "Q1-DS-002", "title": "组件枚举属性仅使用公开值", "source": "dist-pkg/design-system.d.ts", "severity": "error", "kind": "deterministic", "detect": "直接从包导入的组件，其 variant / size 字符串字面量不在 props 有限联合中", "fix": "使用诊断列出的公开允许值，动态表达式交给类型检查" },
     { "id": "Q1-DS-101", "title": "导航用原生 link、动作用原生 button", "source": "contracts/interface-guidelines.md#interactions", "severity": "error", "kind": "judgment", "detect": "用 div/span + onClick 承载导航或动作", "fix": "导航用 <a href>,动作用 <button>" },
     { "id": "Q1-DS-102", "title": "命中区 ≥24px(触摸 44px)", "source": "contracts/interface-guidelines.md#interactions", "severity": "warn", "kind": "judgment", "detect": "可点击元素视觉/命中区小于 24px 且未扩大命中区", "fix": "min-width/height + 负 margin 扩大命中区,不撑高容器" },
     { "id": "Q1-DS-301", "title": "icon-only 控件必须有可访问名", "source": "contracts/interface-guidelines.md#content-and-accessibility", "severity": "error", "kind": "judgment", "detect": "只含图标的 button/link 无 aria-label / 可访问名", "fix": "补 aria-label 或视觉隐藏文本" },