@q1travel/design-system 0.29.0 → 0.29.2

package/dist-pkg/style.css

@@ -2462,7 +2462,7 @@
 }
 
 .badge--sm {
-  height: 20px;
+  height: var(--q1-space-5);
   padding: 2px 6px;
   font-size: 11px;
 }
@@ -11275,29 +11275,31 @@ a.q1-navigation__item[aria-disabled='true'] {
 .q1-navigation--line {
   --q1-navigation-row-min-height: calc(var(--q1-space-10) + var(--q1-space-1));
 
-  scrollbar-width: none;
-  align-items: stretch;
-  gap: var(--q1-space-6);
-  /* 基线不占布局空间，绘于子项下方；滚动时下划线仍压在同一底边。 */
-  box-shadow: inset 0 calc(var(--q1-space-1) / -4) 0 var(--q1-color-border);
+  display: block;
+  width: 100%;
+  max-width: 100%;
+  min-width: 0;
+  overflow: visible;
 }
 
-.q1-navigation--line::-webkit-scrollbar {
-  display: none;
+/* 基线跟随完整内容轨道滚动，避免与外层重复叠色。 */
+.q1-navigation-line-track {
+  box-shadow: inset 0 calc(var(--q1-space-1) / -4) 0 var(--q1-color-border);
 }
 
-.q1-navigation--line .q1-navigation__item {
+.q1-navigation--horizontal.q1-navigation--line .q1-navigation__item {
   position: relative;
   border-bottom: calc(var(--q1-space-1) / 2) solid transparent;
   border-radius: 0;
-  padding: var(--q1-space-3) var(--q1-space-2);
+  padding: var(--q1-space-3) 0;
+  scroll-margin-inline: var(--q1-space-2);
   background: none;
   color: var(--q1-color-text-secondary);
   font-weight: var(--q1-font-weight-regular);
   transition: color var(--q1-duration-press) var(--q1-ease-state);
 }
 
-/* 焦点环仅纵向收进项内，底边与选中下划线保留一档间距。 */
+/* viewport 边缘留白保护横向外扩的环；基线仍从 nav 内容左缘开始。 */
 .q1-navigation--horizontal.q1-navigation--line .q1-navigation__item:focus-visible {
   box-shadow: none;
 }
@@ -11305,7 +11307,7 @@ a.q1-navigation__item[aria-disabled='true'] {
 .q1-navigation--line .q1-navigation__item:focus-visible::after {
   content: '';
   position: absolute;
-  inset: var(--q1-space-1) 0;
+  inset: var(--q1-space-1) calc(-1 * var(--q1-space-2));
   border-radius: var(--q1-radius-2);
   box-shadow: inset 0 0 0 calc(var(--q1-space-1) / 2) var(--q1-color-focus);
   pointer-events: none;
@@ -11332,11 +11334,123 @@ a.q1-navigation__item[aria-disabled='true'] {
 }
 
 @media (prefers-reduced-motion: reduce) {
-  .q1-navigation--line .q1-navigation__item {
+  .q1-navigation--horizontal.q1-navigation--line .q1-navigation__item {
     transition: none;
   }
 }
 
+@media (pointer: coarse), (any-pointer: coarse) {
+  .q1-navigation--line .q1-navigation-line-track > .q1-navigation__item-row {
+    min-width: var(--q1-touch-target-min);
+  }
+
+  .q1-navigation--horizontal.q1-navigation--line .q1-navigation__item {
+    min-height: var(--q1-touch-target-min);
+  }
+
+  .q1-navigation--line .q1-navigation__item::before {
+    content: '';
+    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)));
+  }
+}
+
+@property --q1-navigation-fade-start {
+  syntax: '<length>';
+  inherits: false;
+  initial-value: 0px;
+}
+
+@property --q1-navigation-fade-end {
+  syntax: '<length>';
+  inherits: false;
+  initial-value: 0px;
+}
+
+.q1-navigation-line-viewport {
+  --q1-navigation-line-gutter: var(--q1-space-2);
+
+  min-width: 0;
+  margin-inline: calc(-1 * var(--q1-navigation-line-gutter));
+  container-type: inline-size;
+  padding-inline: var(--q1-navigation-line-gutter);
+  overflow-x: auto;
+  overscroll-behavior-inline: contain;
+  scrollbar-width: none;
+  scroll-padding-inline: var(--q1-navigation-line-gutter);
+  mask-image: linear-gradient(to right, transparent, currentColor var(--q1-navigation-fade-start)),
+    linear-gradient(to left, transparent, currentColor var(--q1-navigation-fade-end));
+  mask-composite: intersect;
+}
+
+.q1-navigation-line-track {
+  --q1-navigation-line-gap: clamp(var(--q1-space-4), calc((100cqi - var(--q1-space-16) * 10) * 1000), var(--q1-space-6));
+
+  display: flex;
+  align-items: stretch;
+  gap: var(--q1-navigation-line-gap);
+  width: max-content;
+  min-width: 100%;
+}
+
+.q1-navigation-line-track > .q1-navigation__item-row {
+  flex: none;
+}
+
+.q1-navigation-line-viewport::-webkit-scrollbar {
+  display: none;
+}
+
+/* Keyboard focus must never be dimmed by an overflow hint. */
+.q1-navigation-line-viewport:focus-within {
+  mask-image: none;
+}
+
+@supports (animation-timeline: scroll(self inline)) {
+  .q1-navigation-line-viewport {
+    animation: q1-navigation-fade-start linear both, q1-navigation-fade-end linear both;
+    animation-timeline: scroll(self inline);
+  }
+}
+
+@keyframes q1-navigation-fade-start {
+  from { --q1-navigation-fade-start: 0px; }
+  0.01%, to { --q1-navigation-fade-start: var(--q1-space-4); }
+}
+
+@keyframes q1-navigation-fade-end {
+  from, 99.99% { --q1-navigation-fade-end: var(--q1-space-4); }
+  to { --q1-navigation-fade-end: 0px; }
+}
+
+@media (pointer: coarse), (any-pointer: coarse) {
+  .q1-navigation-line-viewport {
+    --q1-navigation-line-gutter: var(--q1-space-3);
+  }
+}
+
+.q1-navigation-line-viewport[data-overflow-start][data-overflow-end] {
+  animation: none;
+}
+
+.q1-navigation-line-viewport[data-overflow-start='false'] {
+  --q1-navigation-fade-start: 0px;
+}
+
+.q1-navigation-line-viewport[data-overflow-end='false'] {
+  --q1-navigation-fade-end: 0px;
+}
+
+.q1-navigation-line-viewport[data-overflow-start='true'] {
+  --q1-navigation-fade-start: var(--q1-space-4);
+}
+
+.q1-navigation-line-viewport[data-overflow-end='true'] {
+  --q1-navigation-fade-end: var(--q1-space-4);
+}
+
 /* Calendar grid rows, focus treatment, touch targets, and RangeField entrance motion. */
 .calendar__weekdays,
 .calendar__row {
@@ -13379,6 +13493,60 @@ a.q1-navigation__item[aria-disabled='true'] {
   color: var(--q1-color-text-muted);
 }
 
+.check-circle-fill {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex: none;
+  width: var(--q1-space-5);
+  height: var(--q1-space-5);
+  vertical-align: middle;
+  pointer-events: none;
+}
+
+.check-circle-fill > svg {
+  width: calc(var(--q1-space-5) * 0.9);
+  height: calc(var(--q1-space-5) * 0.9);
+  color: var(--q1-color-text-primary);
+  transform-origin: center;
+  animation: check-circle-fill-enter var(--q1-duration-fast) var(--q1-ease-out) both;
+}
+
+.check-circle-fill path {
+  color: var(--q1-color-text-on-inverse);
+  stroke-dasharray: 1;
+  stroke-dashoffset: 0;
+  animation: check-circle-fill-draw var(--q1-duration-press) var(--q1-ease-out) calc(var(--q1-duration-base) - var(--q1-duration-press)) both;
+}
+
+@keyframes check-circle-fill-enter {
+  from { transform: scale(0.6); opacity: 0; }
+  to { transform: scale(1); opacity: 1; }
+}
+
+@keyframes check-circle-fill-draw {
+  from { stroke-dashoffset: 1; opacity: 0; }
+  to { stroke-dashoffset: 0; opacity: 1; }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .check-circle-fill > svg,
+  .check-circle-fill path {
+    animation: none;
+  }
+}
+
+@media (forced-colors: active) {
+  .check-circle-fill > svg {
+    forced-color-adjust: none;
+    color: CanvasText;
+  }
+
+  .check-circle-fill path {
+    color: Canvas;
+  }
+}
+
 /* 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);

package/package.json

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