@q1travel/design-system 0.31.1 → 0.31.2

package/dist-pkg/style.css

@@ -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);
@@ -10307,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) {
@@ -11738,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) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@q1travel/design-system",
-  "version": "0.31.1",
+  "version": "0.31.2",
   "description": "React components, design tokens, and interface contracts for q1travel products.",
   "keywords": [
     "react",