@q1travel/design-system 0.6.0 → 0.7.0

package/dist-pkg/style.css

@@ -6629,6 +6629,207 @@ a.q1-card:focus-visible {
   color: var(--q1-color-text-secondary);
 }
 
+/* Search Dialog：受控搜索弹层，输入框持有焦点并以 aria-activedescendant 导航结果。 */
+.search-dialog__trigger {
+  display: inline-flex;
+}
+.search-dialog {
+  position: fixed;
+  inset: 0;
+  z-index: 80;
+  display: flex;
+  align-items: flex-start;
+  justify-content: center;
+  padding: var(--q1-space-6) var(--q1-space-4);
+}
+.search-dialog__backdrop {
+  position: absolute;
+  inset: 0;
+  border: 0;
+  background: color-mix(in srgb, var(--q1-color-shadow) 45%, transparent);
+  cursor: default;
+}
+.search-dialog__panel {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  width: min(640px, calc(100vw - 2 * var(--q1-space-4)));
+  max-height: calc(100dvh - 2 * var(--q1-space-6));
+  overflow: hidden;
+  border: 1px solid var(--q1-color-border-overlay);
+  border-radius: var(--q1-radius-4);
+  background: var(--q1-color-bg-panel);
+  box-shadow: var(--q1-shadow-modal);
+}
+.search-dialog__search {
+  display: flex;
+  flex: none;
+  align-items: center;
+  gap: var(--q1-space-3);
+  padding: var(--q1-space-3) var(--q1-space-4);
+  border-bottom: 1px solid var(--q1-color-border);
+}
+.search-dialog__field {
+  display: flex;
+  min-width: 0;
+  min-height: 44px;
+  flex: 1 1 auto;
+  align-items: center;
+  gap: var(--q1-space-2);
+  padding-inline: var(--q1-space-3);
+  border-radius: var(--q1-radius-2);
+  color: var(--q1-color-text-secondary);
+}
+.search-dialog__field:has(.search-dialog__input:focus-visible) {
+  box-shadow: var(--q1-shadow-focus);
+}
+.search-dialog__input {
+  min-width: 0;
+  min-height: 44px;
+  flex: 1 1 auto;
+  padding: 0;
+  border: 0;
+  background: transparent;
+  color: var(--q1-color-text-primary);
+  font: inherit;
+  font-size: var(--q1-font-size-copy-16);
+}
+.search-dialog__input:focus-visible {
+  outline: none;
+  box-shadow: none;
+}
+.search-dialog__close {
+  display: grid;
+  width: 44px;
+  height: 44px;
+  flex: none;
+  place-items: center;
+  border: 0;
+  border-radius: var(--q1-radius-2);
+  background: transparent;
+  color: var(--q1-color-text-secondary);
+  cursor: pointer;
+  transition: transform 120ms cubic-bezier(0.23, 1, 0.32, 1);
+}
+.search-dialog__close:hover {
+  background: var(--q1-color-bg-subtle);
+  color: var(--q1-color-text-primary);
+}
+.search-dialog__close:active,
+.search-dialog__clear:active {
+  transform: scale(0.97);
+}
+.search-dialog__close:focus-visible,
+.search-dialog__clear:focus-visible,
+.search-dialog__option:focus-visible {
+  outline: none;
+  box-shadow: var(--q1-shadow-focus);
+}
+.search-dialog__body {
+  min-height: 0;
+  overflow-y: auto;
+  overscroll-behavior: contain;
+  padding: var(--q1-space-2);
+}
+.search-dialog__group + .search-dialog__group {
+  margin-top: var(--q1-space-2);
+  padding-top: var(--q1-space-2);
+  border-top: 1px solid var(--q1-color-border);
+}
+.search-dialog__heading {
+  padding: var(--q1-space-2) var(--q1-space-3);
+  color: var(--q1-color-text-secondary);
+  font-size: var(--q1-font-size-label-13);
+  font-weight: var(--q1-font-weight-semibold);
+  line-height: var(--q1-line-height-label-13);
+}
+.search-dialog__option {
+  display: flex;
+  width: 100%;
+  min-height: 44px;
+  flex-direction: column;
+  justify-content: center;
+  gap: 0;
+  padding: var(--q1-space-1) var(--q1-space-3);
+  border: 0;
+  border-radius: var(--q1-radius-2);
+  background: transparent;
+  color: var(--q1-color-text-primary);
+  font: inherit;
+  text-align: left;
+  cursor: pointer;
+}
+.search-dialog__option--active {
+  background: var(--q1-color-bg-subtle);
+}
+@media (hover: hover) and (pointer: fine) {
+  .search-dialog__option:hover {
+    background: var(--q1-color-bg-subtle);
+  }
+}
+.search-dialog__option--disabled {
+  color: var(--q1-color-text-muted);
+  cursor: not-allowed;
+  opacity: 0.65;
+}
+.search-dialog__option-label {
+  font-size: var(--q1-font-size-copy-14);
+  font-weight: var(--q1-font-weight-medium);
+  line-height: var(--q1-line-height-copy-14);
+}
+.search-dialog__option-description {
+  color: var(--q1-color-text-secondary);
+  font-size: var(--q1-font-size-label-13);
+  line-height: var(--q1-line-height-label-13);
+}
+.search-dialog__empty {
+  display: grid;
+  justify-items: center;
+  gap: var(--q1-space-4);
+  padding: var(--q1-space-8) var(--q1-space-4);
+  color: var(--q1-color-text-secondary);
+  text-align: center;
+}
+.search-dialog__empty p {
+  margin: 0;
+}
+.search-dialog__clear {
+  min-height: 44px;
+  padding: var(--q1-space-2) var(--q1-space-4);
+  border: 1px solid var(--q1-color-border-strong);
+  border-radius: var(--q1-radius-2);
+  background: var(--q1-color-bg-panel);
+  color: var(--q1-color-action-primary);
+  font: inherit;
+  cursor: pointer;
+  transition: transform 120ms cubic-bezier(0.23, 1, 0.32, 1);
+}
+.search-dialog__clear:hover {
+  background: var(--q1-color-bg-subtle);
+}
+@media (max-width: 480px) {
+  .search-dialog {
+    padding: var(--q1-space-4);
+  }
+  .search-dialog__panel {
+    max-height: calc(100dvh - 2 * var(--q1-space-4));
+  }
+  .search-dialog__trigger-control {
+    min-width: 44px;
+    min-height: 44px;
+  }
+}
+@media (prefers-reduced-motion: reduce) {
+  .search-dialog,
+  .search-dialog__panel,
+  .search-dialog__close,
+  .search-dialog__clear {
+    animation: none;
+    transition: none;
+    transform: none;
+  }
+}
+
 /* Modal 模态框：阻断页面的对话框 */
 .modal-btn {
   padding: var(--q1-space-2) var(--q1-space-4);
@@ -7378,6 +7579,45 @@ a.q1-navigation__item[aria-disabled='true'] {
   padding-inline-start: var(--q1-space-6);
 }
 
+.q1-navigation--horizontal {
+  --q1-navigation-row-min-height: 44px;
+
+  display: flex;
+  align-items: center;
+  gap: var(--q1-space-1);
+  width: 100%;
+  overflow-x: auto;
+  overscroll-behavior-inline: contain;
+}
+
+.q1-navigation--horizontal > .q1-navigation__item-row {
+  flex: none;
+}
+
+.q1-navigation--horizontal .q1-navigation__item {
+  flex: none;
+  padding-inline: var(--q1-space-2);
+  color: var(--q1-color-text-secondary);
+  transition:
+    color 120ms cubic-bezier(0.23, 1, 0.32, 1),
+    background-color 120ms cubic-bezier(0.23, 1, 0.32, 1);
+}
+
+.q1-navigation--horizontal .q1-navigation__item--active {
+  color: var(--q1-color-action-primary);
+}
+
+@media (hover: hover) and (pointer: fine) {
+  .q1-navigation--horizontal .q1-navigation__item:hover:not([aria-disabled='true']):not(:disabled) {
+    color: var(--q1-color-text-primary);
+    background: var(--q1-color-bg-subtle);
+  }
+
+  .q1-navigation--horizontal .q1-navigation__item--active:hover:not([aria-disabled='true']):not(:disabled) {
+    color: var(--q1-color-action-primary);
+  }
+}
+
 @media (pointer: coarse) {
   .q1-navigation {
     --q1-navigation-row-min-height: 44px;
@@ -7395,7 +7635,8 @@ a.q1-navigation__item[aria-disabled='true'] {
 }
 
 @media (prefers-reduced-motion: reduce) {
-  .q1-navigation__group-chevron {
+  .q1-navigation__group-chevron,
+  .q1-navigation--horizontal .q1-navigation__item {
     transition: none;
   }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@q1travel/design-system",
-  "version": "0.6.0",
+  "version": "0.7.0",
   "private": false,
   "type": "module",
   "main": "./dist-pkg/design-system.js",