@q1travel/design-system 0.7.1 → 0.7.2

package/dist-pkg/style.css

@@ -7706,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);
@@ -7728,6 +7728,10 @@ a.q1-navigation__item[aria-disabled='true'] {
   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;
@@ -7746,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,
@@ -7769,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 {
@@ -7793,25 +7812,50 @@ a.q1-navigation__item[aria-disabled='true'] {
 }
 
 .q1-context-switcher__popup[role='dialog'] {
+  width: min(17.5rem, calc(100vw - var(--q1-space-4)));
   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;
+.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'] {
+  .q1-context-switcher__popup[role='dialog'][data-open-modality='pointer'][data-side='bottom'] {
     opacity: 0;
+    transform: translateY(-2px) scale(.98);
   }
 
-  body:not(:has(.q1-context-switcher__trigger:focus-visible)) .q1-context-switcher__popup[role='dialog'] {
-    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);
   }
 }
 
@@ -7819,7 +7863,7 @@ a.q1-navigation__item[aria-disabled='true'] {
   min-height: 0;
   overflow-y: auto;
   overscroll-behavior: contain;
-  padding: var(--q1-space-2);
+  padding: var(--q1-space-1);
 }
 
 .q1-context-switcher__popup[role='dialog'] .q1-context-switcher__groups {
@@ -7827,17 +7871,58 @@ a.q1-navigation__item[aria-disabled='true'] {
   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: 44px;
-  margin-block: var(--q1-space-1);
-  border: 1px solid var(--q1-color-border);
+  min-height: 32px;
+  border: 1px solid transparent;
   border-radius: var(--q1-radius-2);
-  background: var(--q1-color-bg-panel);
-  padding: var(--q1-space-2) var(--q1-space-3);
+  background: transparent;
+  padding-block: var(--q1-space-1);
+  padding-inline: calc(var(--q1-space-2) * 4);
   color: var(--q1-color-text-primary);
-  font: inherit;
+  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 {
@@ -7858,6 +7943,13 @@ a.q1-navigation__item[aria-disabled='true'] {
   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 {
   margin-top: var(--q1-space-2);
   padding-top: var(--q1-space-2);
@@ -7870,9 +7962,9 @@ a.q1-navigation__item[aria-disabled='true'] {
   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;
@@ -7887,30 +7979,57 @@ a.q1-navigation__item[aria-disabled='true'] {
   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);
@@ -7919,7 +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,
+.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);
 }
@@ -7941,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 {
@@ -7949,10 +8072,15 @@ a.q1-navigation__item[aria-disabled='true'] {
 }
 
 @media (prefers-reduced-motion: reduce) {
-  .q1-context-switcher__popup[role='dialog'] {
+  .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;
   }
@@ -7961,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.1",
+  "version": "0.7.2",
   "private": false,
   "type": "module",
   "main": "./dist-pkg/design-system.js",