@q1travel/design-system 0.7.0 → 0.7.1

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;
@@ -7671,7 +7722,8 @@ 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);
 }
@@ -7740,6 +7792,29 @@ a.q1-navigation__item[aria-disabled='true'] {
   box-shadow: var(--q1-shadow-popover);
 }
 
+.q1-context-switcher__popup[role='dialog'] {
+  opacity: 1;
+  transform: translateY(0) scale(1);
+  transform-origin: top center;
+  transition:
+    opacity 150ms ease,
+    transform 150ms ease;
+}
+
+.q1-context-switcher__popup[role='dialog'][data-side='top'] {
+  transform-origin: bottom center;
+}
+
+@starting-style {
+  .q1-context-switcher__popup[role='dialog'] {
+    opacity: 0;
+  }
+
+  body:not(:has(.q1-context-switcher__trigger:focus-visible)) .q1-context-switcher__popup[role='dialog'] {
+    transform: translateY(-2px) scale(.98);
+  }
+}
+
 .q1-context-switcher__groups {
   min-height: 0;
   overflow-y: auto;
@@ -7747,6 +7822,42 @@ a.q1-navigation__item[aria-disabled='true'] {
   padding: var(--q1-space-2);
 }
 
+.q1-context-switcher__popup[role='dialog'] .q1-context-switcher__groups {
+  display: grid;
+  overflow-y: hidden;
+}
+
+.q1-context-switcher__popup[role='dialog'] input[type='search'] {
+  width: 100%;
+  min-width: 0;
+  min-height: 44px;
+  margin-block: var(--q1-space-1);
+  border: 1px solid var(--q1-color-border);
+  border-radius: var(--q1-radius-2);
+  background: var(--q1-color-bg-panel);
+  padding: var(--q1-space-2) var(--q1-space-3);
+  color: var(--q1-color-text-primary);
+  font: inherit;
+}
+
+.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__group + .q1-context-switcher__group {
   margin-top: var(--q1-space-2);
   padding-top: var(--q1-space-2);
@@ -7754,6 +7865,9 @@ 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);
@@ -7764,6 +7878,10 @@ a.q1-navigation__item[aria-disabled='true'] {
   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;
@@ -7801,6 +7919,7 @@ 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,
 .q1-context-switcher__check {
   color: var(--q1-color-action-primary);
 }
@@ -7830,6 +7949,10 @@ a.q1-navigation__item[aria-disabled='true'] {
 }
 
 @media (prefers-reduced-motion: reduce) {
+  .q1-context-switcher__popup[role='dialog'] {
+    transition: none;
+  }
+
   .q1-context-switcher__chevron {
     transition: none;
   }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@q1travel/design-system",
-  "version": "0.7.0",
+  "version": "0.7.1",
   "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"