@q1travel/design-system 0.7.0 → 0.7.2

package/dist-pkg/style.css

@@ -1111,6 +1111,17 @@
   background: var(--q1-color-bg-panel);
   box-shadow: var(--q1-shadow-popover);
 }
+.menu__popup[data-state] {
+  --menu-motion-duration-enter: 180ms;
+  --menu-motion-duration-exit: 140ms;
+  --menu-motion-ease-out: cubic-bezier(0.23, 1, 0.32, 1);
+
+  opacity: 1;
+  transform: translateY(0) scale(1);
+  transition:
+    opacity var(--menu-motion-duration-enter) var(--menu-motion-ease-out),
+    transform var(--menu-motion-duration-enter) var(--menu-motion-ease-out);
+}
 .menu__popup--start {
   left: 0;
 }
@@ -1124,6 +1135,46 @@
 .menu__popup--top {
   bottom: calc(100% + var(--q1-space-2));
 }
+.menu__popup[data-state].menu__popup--start.menu__popup--bottom {
+  transform-origin: left top;
+}
+.menu__popup[data-state].menu__popup--end.menu__popup--bottom {
+  transform-origin: right top;
+}
+.menu__popup[data-state].menu__popup--start.menu__popup--top {
+  transform-origin: left bottom;
+}
+.menu__popup[data-state].menu__popup--end.menu__popup--top {
+  transform-origin: right bottom;
+}
+.menu__popup[data-state='closed'] {
+  opacity: 0;
+  pointer-events: none;
+  transition-duration: var(--menu-motion-duration-exit);
+}
+.menu__popup--bottom[data-state='closed'] {
+  transform: translateY(calc(0px - var(--q1-space-1))) scale(0.98);
+}
+.menu__popup--top[data-state='closed'] {
+  transform: translateY(var(--q1-space-1)) scale(0.98);
+}
+@starting-style {
+  .menu__popup[data-state='open'] {
+    opacity: 0;
+  }
+  .menu__popup--bottom[data-state='open'] {
+    transform: translateY(calc(0px - var(--q1-space-1))) scale(0.98);
+  }
+  .menu__popup--top[data-state='open'] {
+    transform: translateY(var(--q1-space-1)) scale(0.98);
+  }
+}
+@media (prefers-reduced-motion: reduce) {
+  .menu__popup[data-state] {
+    transform: none;
+    transition: none;
+  }
+}
 .menu__item {
   display: flex;
   align-items: center;
@@ -7655,14 +7706,14 @@ a.q1-navigation__item[aria-disabled='true'] {
   border: 1px solid var(--q1-color-border);
   border-radius: var(--q1-radius-3);
   background: var(--q1-color-bg-panel);
-  padding: var(--q1-space-2) var(--q1-space-3);
+  padding: var(--q1-space-1) var(--q1-space-2);
   color: var(--q1-color-text-primary);
   font: inherit;
   text-align: start;
   cursor: pointer;
+  transition: transform 100ms cubic-bezier(.23, 1, .32, 1);
 }
 
-.q1-context-switcher__trigger:hover,
 .q1-context-switcher__trigger[aria-expanded='true'] {
   background: var(--q1-color-bg-subtle);
   border-color: var(--q1-color-border-strong);
@@ -7671,11 +7722,16 @@ a.q1-navigation__item[aria-disabled='true'] {
 .q1-context-switcher__trigger:focus-visible,
 .q1-context-switcher__popup:focus-visible,
 .q1-context-switcher__item:focus-visible,
-.q1-context-switcher__action:focus-visible {
+.q1-context-switcher__action:focus-visible,
+.q1-context-switcher__popup[role='dialog'] input[type='search']:focus-visible {
   outline: none;
   box-shadow: var(--q1-shadow-focus);
 }
 
+.q1-context-switcher__popup[role='dialog']:has(> .q1-sr-only:focus) {
+  box-shadow: var(--q1-shadow-focus);
+}
+
 .q1-context-switcher__current,
 .q1-context-switcher__item-content {
   display: grid;
@@ -7694,16 +7750,16 @@ a.q1-navigation__item[aria-disabled='true'] {
 .q1-context-switcher__current-label,
 .q1-context-switcher__item-label {
   color: var(--q1-color-text-primary);
-  font-size: var(--q1-font-size-label-14);
+  font-size: var(--q1-font-size-label-13);
   font-weight: var(--q1-font-weight-medium);
-  line-height: var(--q1-line-height-label-14);
+  line-height: var(--q1-line-height-label-13);
 }
 
 .q1-context-switcher__description {
   color: var(--q1-color-text-secondary);
-  font-size: var(--q1-font-size-label-13);
+  font-size: 11px;
   font-weight: var(--q1-font-weight-regular);
-  line-height: var(--q1-line-height-label-13);
+  line-height: 14px;
 }
 
 .q1-context-switcher__avatar,
@@ -7717,9 +7773,24 @@ a.q1-navigation__item[aria-disabled='true'] {
   justify-content: center;
 }
 
+.q1-context-switcher__avatar {
+  width: 24px;
+  height: 24px;
+  overflow: hidden;
+  border-radius: var(--q1-radius-2);
+  background: var(--q1-color-bg-subtle);
+  color: var(--q1-color-text-secondary);
+  font-size: var(--q1-font-size-label-13);
+  font-weight: var(--q1-font-weight-semibold);
+}
+
+.q1-context-switcher__trigger .q1-context-switcher__avatar {
+  width: 28px;
+  height: 28px;
+}
+
 .q1-context-switcher__chevron {
   color: var(--q1-color-text-muted);
-  transition: transform 160ms ease;
 }
 
 .q1-context-switcher__trigger[aria-expanded='true'] .q1-context-switcher__chevron {
@@ -7740,11 +7811,143 @@ a.q1-navigation__item[aria-disabled='true'] {
   box-shadow: var(--q1-shadow-popover);
 }
 
+.q1-context-switcher__popup[role='dialog'] {
+  width: min(17.5rem, calc(100vw - var(--q1-space-4)));
+  opacity: 1;
+  transform: translateY(0) scale(1);
+}
+
+.q1-context-switcher__popup[role='dialog'][data-open-modality='pointer'] {
+  transition-property: opacity, transform;
+  transition-duration: 140ms;
+  transition-timing-function: cubic-bezier(.23, 1, .32, 1);
+}
+
+.q1-context-switcher__popup[role='dialog'][data-open-modality='keyboard'] {
+  transition: none;
+}
+
+.q1-context-switcher__popup[role='dialog'][data-side='bottom'][dir='ltr'][data-align='start'],
+.q1-context-switcher__popup[role='dialog'][data-side='bottom'][dir='rtl'][data-align='end'] {
+  transform-origin: top left;
+}
+
+.q1-context-switcher__popup[role='dialog'][data-side='bottom'][dir='ltr'][data-align='end'],
+.q1-context-switcher__popup[role='dialog'][data-side='bottom'][dir='rtl'][data-align='start'] {
+  transform-origin: top right;
+}
+
+.q1-context-switcher__popup[role='dialog'][data-side='top'][dir='ltr'][data-align='start'],
+.q1-context-switcher__popup[role='dialog'][data-side='top'][dir='rtl'][data-align='end'] {
+  transform-origin: bottom left;
+}
+
+.q1-context-switcher__popup[role='dialog'][data-side='top'][dir='ltr'][data-align='end'],
+.q1-context-switcher__popup[role='dialog'][data-side='top'][dir='rtl'][data-align='start'] {
+  transform-origin: bottom right;
+}
+
+@starting-style {
+  .q1-context-switcher__popup[role='dialog'][data-open-modality='pointer'][data-side='bottom'] {
+    opacity: 0;
+    transform: translateY(-2px) scale(.98);
+  }
+
+  .q1-context-switcher__popup[role='dialog'][data-open-modality='pointer'][data-side='top'] {
+    opacity: 0;
+    transform: translateY(2px) scale(.98);
+  }
+}
+
 .q1-context-switcher__groups {
   min-height: 0;
   overflow-y: auto;
   overscroll-behavior: contain;
+  padding: var(--q1-space-1);
+}
+
+.q1-context-switcher__popup[role='dialog'] .q1-context-switcher__groups {
+  display: grid;
+  overflow-y: hidden;
+}
+
+.q1-context-switcher__search {
+  position: relative;
+  display: flex;
+  align-items: center;
+  margin-block: var(--q1-space-1);
+}
+
+.q1-context-switcher__scope-summary {
+  display: flex;
+  min-width: 0;
+  min-height: 40px;
+  align-items: center;
+  gap: var(--q1-space-2);
+  padding: var(--q1-space-1) var(--q1-space-2);
+}
+
+.q1-context-switcher__search-icon {
+  position: absolute;
+  inset-inline-start: var(--q1-space-2);
+  z-index: 1;
+  display: inline-flex;
+  color: var(--q1-color-text-muted);
+  pointer-events: none;
+}
+
+.q1-context-switcher__popup[role='dialog'] input[type='search'] {
+  width: 100%;
+  min-width: 0;
+  min-height: 32px;
+  border: 1px solid transparent;
+  border-radius: var(--q1-radius-2);
+  background: transparent;
+  padding-block: var(--q1-space-1);
+  padding-inline: calc(var(--q1-space-2) * 4);
+  color: var(--q1-color-text-primary);
+  font-size: var(--q1-font-size-label-13);
+  font-weight: var(--q1-font-weight-regular);
+  line-height: var(--q1-line-height-label-13);
+}
+
+.q1-context-switcher__search-shortcut {
+  position: absolute;
+  inset-inline-end: var(--q1-space-2);
+  color: var(--q1-color-text-muted);
+  font-size: var(--q1-font-size-label-13);
+  font-weight: var(--q1-font-weight-medium);
+  line-height: var(--q1-line-height-label-13);
+  pointer-events: none;
+}
+
+.q1-context-switcher__search:focus-within .q1-context-switcher__search-shortcut {
+  visibility: hidden;
+}
+
+.q1-context-switcher__popup[role='dialog'] input[type='search']::placeholder {
+  color: var(--q1-color-text-muted);
+}
+
+.q1-context-switcher__popup[role='dialog'] [role='listbox'] {
+  min-height: 0;
+  max-block-size: calc(var(--q1-space-24) + var(--q1-space-24) + var(--q1-space-16));
+  overflow-x: hidden;
+  overflow-y: auto;
+  overscroll-behavior: contain;
+}
+
+.q1-context-switcher__popup[role='dialog'] [role='status'] {
+  min-width: 0;
   padding: var(--q1-space-2);
+  color: var(--q1-color-text-secondary);
+}
+
+.q1-context-switcher__empty-description {
+  color: var(--q1-color-text-secondary);
+  font-size: var(--q1-font-size-label-13);
+  font-weight: var(--q1-font-weight-regular);
+  line-height: var(--q1-line-height-label-13);
 }
 
 .q1-context-switcher__group + .q1-context-switcher__group {
@@ -7754,45 +7957,79 @@ a.q1-navigation__item[aria-disabled='true'] {
 }
 
 .q1-context-switcher__group-label {
+  display: flex;
+  justify-content: space-between;
+  gap: var(--q1-space-2);
   padding: var(--q1-space-1) var(--q1-space-2);
   color: var(--q1-color-text-muted);
-  font-size: var(--q1-font-size-label-13);
-  font-weight: var(--q1-font-weight-semibold);
-  line-height: var(--q1-line-height-label-13);
+  font-size: 11px;
+  font-weight: var(--q1-font-weight-medium);
+  line-height: 14px;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
 }
 
+.q1-context-switcher__popup[role='dialog'] .q1-context-switcher__group-label {
+  color: var(--q1-color-text-secondary);
+}
+
 .q1-context-switcher__item,
 .q1-context-switcher__action {
   display: flex;
   width: 100%;
   min-width: 0;
-  min-height: 44px;
+  min-height: 36px;
   align-items: center;
   gap: var(--q1-space-2);
   border: 0;
   border-radius: var(--q1-radius-2);
   background: transparent;
-  padding: var(--q1-space-2);
+  padding: var(--q1-space-1) var(--q1-space-2);
   color: var(--q1-color-text-primary);
   font: inherit;
   text-align: start;
 }
 
+.q1-context-switcher__item:has(.q1-context-switcher__description) {
+  min-height: 40px;
+}
+
 .q1-context-switcher__item:not([aria-disabled='true']),
 .q1-context-switcher__action:not(:disabled) {
   cursor: pointer;
 }
 
-.q1-context-switcher__item:hover:not([aria-disabled='true']),
-.q1-context-switcher__action:hover:not(:disabled),
 .q1-context-switcher__item:focus-visible,
 .q1-context-switcher__action:focus-visible {
   background: var(--q1-color-bg-subtle);
 }
 
+.q1-context-switcher__item[role='option'][aria-selected='true'] {
+  background: color-mix(in srgb, var(--q1-color-action-primary) 8%, var(--q1-color-bg-panel));
+}
+
+.q1-context-switcher__item[role='option'][aria-selected='true']:focus-visible {
+  background: color-mix(in srgb, var(--q1-color-action-primary) 12%, var(--q1-color-bg-panel));
+}
+
+@media (hover: hover) and (pointer: fine) {
+  .q1-context-switcher__trigger:hover {
+    background: var(--q1-color-bg-subtle);
+    border-color: var(--q1-color-border-strong);
+  }
+
+  .q1-context-switcher__search:hover input[type='search'],
+  .q1-context-switcher__item:hover:not([aria-disabled='true']),
+  .q1-context-switcher__action:hover:not(:disabled) {
+    background: var(--q1-color-bg-subtle);
+  }
+
+  .q1-context-switcher__item[role='option'][aria-selected='true']:hover {
+    background: color-mix(in srgb, var(--q1-color-action-primary) 12%, var(--q1-color-bg-panel));
+  }
+}
+
 .q1-context-switcher__item[aria-disabled='true'],
 .q1-context-switcher__action:disabled {
   color: var(--q1-color-text-muted);
@@ -7801,6 +8038,11 @@ a.q1-navigation__item[aria-disabled='true'] {
 }
 
 .q1-context-switcher__item[aria-checked='true'] .q1-context-switcher__item-label,
+.q1-context-switcher__item[aria-selected='true'] .q1-context-switcher__item-label {
+  color: var(--q1-color-text-primary);
+  font-weight: var(--q1-font-weight-semibold);
+}
+
 .q1-context-switcher__check {
   color: var(--q1-color-action-primary);
 }
@@ -7822,7 +8064,7 @@ a.q1-navigation__item[aria-disabled='true'] {
 
 .q1-context-switcher__footer {
   border-top: 1px solid var(--q1-color-border);
-  padding: var(--q1-space-2);
+  padding: var(--q1-space-1);
 }
 
 @keyframes q1-context-switcher-spin {
@@ -7830,6 +8072,15 @@ a.q1-navigation__item[aria-disabled='true'] {
 }
 
 @media (prefers-reduced-motion: reduce) {
+  .q1-context-switcher__trigger,
+  .q1-context-switcher__popup[role='dialog'][data-open-modality] {
+    transition: none;
+  }
+
+  .q1-context-switcher__trigger:active {
+    transform: none;
+  }
+
   .q1-context-switcher__chevron {
     transition: none;
   }
@@ -7838,3 +8089,28 @@ a.q1-navigation__item[aria-disabled='true'] {
     animation: none;
   }
 }
+
+@media (pointer: fine) and (prefers-reduced-motion: no-preference) {
+  .q1-context-switcher__trigger:active {
+    transform: scale(.985);
+  }
+}
+
+@media (max-width: 48rem), (pointer: coarse), (any-pointer: coarse) {
+  .q1-context-switcher__popup[role='dialog'] input[type='search'],
+  .q1-context-switcher__item,
+  .q1-context-switcher__scope-summary,
+  .q1-context-switcher__action {
+    min-height: 44px;
+  }
+
+  .q1-context-switcher__popup[role='dialog'] input[type='search'] {
+    font-size: var(--q1-font-size-copy-16);
+    line-height: var(--q1-line-height-copy-16);
+  }
+
+  .q1-context-switcher__scope-summary,
+  .q1-context-switcher__item:has(.q1-context-switcher__description) {
+    min-height: 48px;
+  }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@q1travel/design-system",
-  "version": "0.7.0",
+  "version": "0.7.2",
   "private": false,
   "type": "module",
   "main": "./dist-pkg/design-system.js",
@@ -56,6 +56,7 @@
     "@types/react": "^19.2.17",
     "@types/react-dom": "^19.2.3",
     "@vitejs/plugin-react": "^5.0.0",
+    "axe-core": "4.10.2",
     "typescript": "^5.8.0",
     "vite": "^7.0.0",
     "vite-plugin-dts": "^4.5.0"