@pine-ds/core 4.10.0 → 4.12.0

package/dist/collection/components/pds-combobox/pds-combobox.css

@@ -38,7 +38,7 @@
   box-sizing: border-box;
   color: var(--pine-color-text-strong);
   flex: 1;
-  font: var(--pine-typography-body-medium);
+  font: var(--pine-typography-body);
   padding: var(--pine-dimension-xs) var(--pine-dimension-450) var(--pine-dimension-xs) var(--pine-dimension-150);
   transition: border-color var(--pine-motion-duration-base) ease;
   width: 100%;
@@ -105,36 +105,50 @@
 }
 
 .pds-combobox__listbox {
+  --pds-combobox-open-from: calc(var(--pine-dimension-2xs) * -1);
+  animation: pds-combobox-open var(--pine-motion-duration-base) var(--pine-motion-easing-out);
   background: var(--pine-color-background-overlay);
   border: 0;
   border-radius: var(--pine-dimension-125);
   box-shadow: var(--pine-box-shadow);
+  box-sizing: border-box;
   list-style: none;
   margin: 0;
-  min-width: 220px;
+  min-width: calc(220px + var(--pine-dimension-xs) * 2);
   overflow-y: auto;
   padding: var(--pine-dimension-xs);
   position: absolute;
+  width: calc(236px + var(--pine-dimension-xs) * 2);
   z-index: var(--pine-z-index-raised);
 }
 
+.pds-combobox__listbox[data-placement^=top] {
+  --pds-combobox-open-from: var(--pine-dimension-2xs);
+}
+
+@keyframes pds-combobox-open {
+  0% {
+    margin-block-start: var(--pds-combobox-open-from);
+    opacity: 0;
+  }
+  40% {
+    opacity: 1;
+  }
+}
 .pds-combobox__option {
   align-items: center;
   background: transparent;
-  border-radius: var(--pine-dimension-125);
+  border-radius: var(--pine-dimension-xs);
   color: var(--pine-color-text-secondary);
   cursor: pointer;
   display: flex;
-  font: var(--pine-typography-body-medium);
+  font: var(--pine-typography-body);
   justify-content: space-between;
   padding: var(--pine-dimension-xs) var(--pine-dimension-sm);
   position: relative;
   /* stylelint-disable-next-line pine-design-system/no-hardcoded-motion -- 0.15s off-grid micro-transition; no exact motion token */
   transition: background 0.15s;
 }
-.pds-combobox__option[aria-selected=true] {
-  background: var(--pine-color-background-muted);
-}
 .pds-combobox__option:focus-visible {
   outline: 0;
 }
@@ -145,19 +159,11 @@
   width: 100%;
 }
 
-.pds-combobox__option.pds-combobox__option--chip .pds-combobox__option-chip {
-  align-items: center;
-  display: flex;
-  width: 100%;
-}
-
 .pds-combobox__option:last-child {
   margin-block-end: 0;
 }
 
-.pds-combobox__option--highlighted,
-.pds-combobox__option[selected],
-.pds-combobox__option--selected {
+.pds-combobox__option--highlighted {
   background: var(--pine-color-background-muted);
 }
 
@@ -192,6 +198,11 @@
   flex-shrink: 0;
 }
 
+.pds-combobox__option-chip {
+  min-width: 0;
+  overflow-wrap: anywhere;
+}
+
 .pds-combobox__listbox--truncate .pds-combobox__option-label {
   flex: 1 1 auto;
   overflow-wrap: normal;
@@ -252,7 +263,6 @@
 .pds-combobox__listbox--grouped .pds-combobox__group-list {
   display: flex;
   flex-direction: column;
-  gap: var(--pine-dimension-2xs);
 }
 
 .pds-combobox__group-label--with-icon {
@@ -288,20 +298,19 @@
 
 .pds-combobox__group-row-trigger {
   align-items: center;
-  border-radius: var(--pine-dimension-125);
+  border-radius: var(--pine-dimension-xs);
   color: var(--pine-color-text-secondary);
   cursor: pointer;
   display: flex;
-  font: var(--pine-typography-body-medium);
+  font: var(--pine-typography-body);
   gap: var(--pine-dimension-xs);
   justify-content: space-between;
-  padding: var(--pine-dimension-xs) var(--pine-dimension-sm);
+  padding: var(--pine-dimension-xs) var(--pine-dimension-150);
   /* stylelint-disable-next-line pine-design-system/no-hardcoded-motion -- matches .pds-combobox__option's 0.15s micro-transition */
   transition: background 0.15s;
 }
 
 .pds-combobox__group-row--open > .pds-combobox__group-row-trigger,
-.pds-combobox__group-row--has-selection > .pds-combobox__group-row-trigger,
 .pds-combobox__group-row--highlighted > .pds-combobox__group-row-trigger,
 .pds-combobox__group-back--highlighted > .pds-combobox__group-row-trigger {
   background: var(--pine-color-background-muted);
@@ -317,19 +326,22 @@
 }
 
 .pds-combobox__listbox--drill-in,
-.pds-combobox__listbox--drill-out:dir(rtl) {
+.pds-combobox__listbox--drill-out:dir(rtl),
+.pds-combobox__panel-search--drill-out:dir(rtl) {
   --pds-combobox-drill-from: var(--pine-dimension-sm);
 }
 
 .pds-combobox__listbox--drill-out,
-.pds-combobox__listbox--drill-in:dir(rtl) {
+.pds-combobox__listbox--drill-in:dir(rtl),
+.pds-combobox__panel-search--drill-out {
   --pds-combobox-drill-from: calc(var(--pine-dimension-sm) * -1);
 }
 
 .pds-combobox__listbox--drill-in .pds-combobox__drill-in-options > li,
-.pds-combobox__listbox--drill-in .pds-combobox__group-back-trigger,
-.pds-combobox__listbox--drill-out > li {
-  animation: pds-combobox-drill var(--pine-motion-duration-base) var(--pine-motion-easing-out);
+.pds-combobox__listbox--drill-in .pds-combobox__group-back-trigger > *,
+.pds-combobox__listbox--drill-out > li,
+.pds-combobox__panel-search--drill-out > * {
+  animation: pds-combobox-drill var(--pine-motion-duration-slow) var(--pine-motion-easing-out);
 }
 
 @keyframes pds-combobox-drill {
@@ -338,8 +350,30 @@
     transform: translateX(var(--pds-combobox-drill-from));
   }
 }
+.pds-combobox__listbox--height-glide {
+  animation: pds-combobox-open var(--pine-motion-duration-base) var(--pine-motion-easing-out), pds-combobox-height-glide var(--pine-motion-duration-base) var(--pine-motion-easing-out);
+}
+
+.pds-combobox__listbox--height-glide,
+.pds-combobox__listbox--height-glide .pds-combobox__listbox-options,
+.pds-combobox__listbox--height-glide .pds-combobox__drill-in-options,
+.pds-combobox__listbox--height-hold,
+.pds-combobox__listbox--height-hold .pds-combobox__listbox-options,
+.pds-combobox__listbox--height-hold .pds-combobox__drill-in-options {
+  overflow-y: hidden;
+}
+
+@keyframes pds-combobox-height-glide {
+  from {
+    height: var(--pds-combobox-glide-from);
+  }
+  to {
+    height: var(--pds-combobox-glide-to);
+  }
+}
 .pds-combobox__group-row--keyboard > .pds-combobox__group-row-trigger,
-.pds-combobox__group-back--keyboard > .pds-combobox__group-row-trigger {
+.pds-combobox__group-back--keyboard > .pds-combobox__group-row-trigger,
+.pds-combobox__option.pds-combobox__option--keyboard {
   outline: var(--pine-outline-focus);
   outline-offset: calc(var(--pine-border-width) * -2);
 }
@@ -360,14 +394,30 @@
 .pds-combobox__flyout {
   display: flex;
   flex-direction: column;
-  gap: var(--pine-dimension-2xs);
   padding: var(--pine-dimension-2xs);
 }
 
+.pds-combobox__listbox--grouped .pds-combobox__option,
+.pds-combobox__listbox--grouped .pds-combobox__group-label {
+  padding-inline: var(--pine-dimension-150);
+}
+
+.pds-combobox__listbox--grouped .pds-combobox__group-label {
+  font: var(--pine-typography-body-sm);
+  margin-block: 0;
+  padding-block: var(--pine-dimension-xs) var(--pine-dimension-2xs);
+  text-transform: none;
+}
+
+.pds-combobox__listbox--grouped .pds-combobox__group {
+  margin-block-start: 0;
+}
+
 .pds-combobox__flyout {
   background: var(--pine-color-background-overlay);
   border-radius: var(--pine-dimension-125);
   box-shadow: var(--pine-box-shadow);
+  box-sizing: border-box;
   list-style: none;
   margin: 0;
   overflow-y: auto;
@@ -377,11 +427,18 @@
   z-index: 1;
 }
 
-.pds-combobox__listbox--with-search {
+.pds-combobox__listbox.pds-combobox__listbox--grouped {
+  min-width: calc(220px + var(--pine-dimension-2xs) * 2);
+  width: calc(236px + var(--pine-dimension-2xs) * 2);
+}
+
+.pds-combobox__listbox.pds-combobox__listbox--with-search {
   display: flex;
   flex-direction: column;
+  min-width: 220px;
   overflow: hidden;
   padding: 0;
+  width: 236px;
 }
 
 .pds-combobox__listbox-options {
@@ -400,19 +457,16 @@
 .pds-combobox__panel-search {
   align-items: center;
   border-block-end: var(--pine-border);
-  border-block-end-color: var(--pine-color-border-subtle);
+  border-block-end-color: var(--pine-color-border-active);
   display: flex;
   flex-shrink: 0;
   gap: var(--pine-dimension-xs);
-  padding: var(--pine-dimension-sm);
+  padding: var(--pine-dimension-150) var(--pine-dimension-sm);
 }
 .pds-combobox__panel-search pds-icon {
   color: var(--pine-color-text-muted);
   flex-shrink: 0;
 }
-.pds-combobox__panel-search:focus-within {
-  border-block-end-color: var(--pine-color-border-active);
-}
 
 .pds-combobox__panel-search-input {
   background: transparent;
@@ -429,50 +483,90 @@
   color: var(--pine-color-text-placeholder);
 }
 
+.pds-combobox__listbox--grouped.pds-combobox__listbox--grouped:has(> .pds-combobox__group-back) {
+  display: flex;
+  flex-direction: column;
+  padding: 0;
+}
+
+.pds-combobox__listbox.pds-combobox__listbox--grouped:has(> .pds-combobox__group-back) {
+  min-width: 220px;
+  width: 236px;
+}
+
 .pds-combobox__group-back {
   display: flex;
+  flex: 1 1 auto;
   flex-direction: column;
-  gap: var(--pine-dimension-2xs);
   list-style: none;
+  min-height: 0;
 }
 
 .pds-combobox__group-back-trigger {
+  flex-shrink: 0;
   justify-content: flex-start;
 }
 
-.pds-combobox__listbox-options--drilled-in.pds-combobox__listbox--grouped {
-  padding-block-start: 0;
-}
-
 .pds-combobox__listbox-options--drilled-in:focus {
   outline: none;
 }
-.pds-combobox__listbox-options--drilled-in:focus .pds-combobox__group-back-trigger {
-  border-block-end-color: var(--pine-color-border-active);
-}
 
-:where(.pds-combobox__listbox-options--drilled-in) .pds-combobox__group-back-trigger {
+:where(.pds-combobox__listbox--grouped) .pds-combobox__group-back-trigger {
   background-color: var(--pine-color-background-overlay);
   border-block-end: var(--pine-border);
-  border-block-end-color: var(--pine-color-border-subtle);
+  border-block-end-color: var(--pine-color-border-active);
   border-radius: 0;
-  color: var(--pine-color-text-strong);
+  color: var(--pine-color-text-secondary);
   font: var(--pine-typography-body);
-  inset-block-start: 0;
   letter-spacing: var(--pine-letter-spacing);
-  margin-inline: calc(var(--pine-dimension-2xs) * -1);
-  padding: var(--pine-dimension-sm);
-  position: sticky;
-  z-index: 1;
+  padding: var(--pine-dimension-150) var(--pine-dimension-sm);
+  position: relative;
+}
+
+:where(.pds-combobox__listbox--grouped) .pds-combobox__group-back-trigger .pds-combobox__group-row-caret {
+  margin-inline: calc(var(--pine-dimension-2xs) * -1) var(--pine-dimension-2xs);
+}
+
+.pds-combobox__listbox--grouped .pds-combobox__group-back > .pds-combobox__group-back-trigger {
+  isolation: isolate;
+}
+.pds-combobox__listbox--grouped .pds-combobox__group-back > .pds-combobox__group-back-trigger::before {
+  border-radius: var(--pine-dimension-xs);
+  content: "";
+  inset: var(--pine-dimension-2xs);
+  position: absolute;
+  /* stylelint-disable-next-line pine-design-system/no-hardcoded-motion -- matches .pds-combobox__option's 0.15s micro-transition */
+  transition: background 0.15s;
+  z-index: -1;
+}
+
+.pds-combobox__listbox--pointer-hover.pds-combobox__listbox--grouped .pds-combobox__group-back > .pds-combobox__group-back-trigger:hover,
+.pds-combobox__listbox--grouped .pds-combobox__group-back--highlighted > .pds-combobox__group-back-trigger {
+  background-color: var(--pine-color-background-overlay);
+}
+.pds-combobox__listbox--pointer-hover.pds-combobox__listbox--grouped .pds-combobox__group-back > .pds-combobox__group-back-trigger:hover::before,
+.pds-combobox__listbox--grouped .pds-combobox__group-back--highlighted > .pds-combobox__group-back-trigger::before {
+  background: var(--pine-color-background-muted);
+}
+
+.pds-combobox__listbox--grouped .pds-combobox__group-back--keyboard > .pds-combobox__group-back-trigger {
+  outline: none;
+}
+.pds-combobox__listbox--grouped .pds-combobox__group-back--keyboard > .pds-combobox__group-back-trigger::before {
+  outline: var(--pine-outline-focus);
+  outline-offset: calc(var(--pine-border-width) * -2);
 }
 
 .pds-combobox__drill-in-options {
   display: flex;
+  flex: 1 1 auto;
   flex-direction: column;
-  gap: var(--pine-dimension-2xs);
   list-style: none;
   margin: 0;
-  padding: 0;
+  min-height: 0;
+  overflow-x: hidden;
+  overflow-y: auto;
+  padding: var(--pine-dimension-2xs);
 }
 
 .visually-hidden {
@@ -522,7 +616,7 @@
   color: var(--color-text-default, var(--pine-color-text-inverse-emphasis));
   cursor: pointer;
   display: flex;
-  font: var(--pine-typography-body-medium);
+  font: var(--pine-typography-body);
   justify-content: space-between;
   min-height: var(--pine-dimension-450);
   outline: none;
@@ -575,8 +669,19 @@
   gap: var(--pine-dimension-xs);
 }
 
+.pds-combobox__button-trigger-label--value-in {
+  animation: pds-combobox-value-in var(--pine-motion-duration-base) var(--pine-motion-easing-out);
+}
+
+@keyframes pds-combobox-value-in {
+  from {
+    opacity: 0;
+  }
+}
 .pds-combobox__button-trigger-icon {
+  block-size: var(--pine-dimension-sm);
   flex-shrink: 0;
+  inline-size: var(--pine-dimension-sm);
 }
 
 .pds-combobox__button-trigger--truncate {
@@ -607,6 +712,10 @@
   padding: calc(var(--pine-dimension-xs) - var(--pine-border-width)) var(--pine-dimension-150);
 }
 
+.pds-combobox__button-trigger--secondary.pds-combobox__button-trigger--input-shape {
+  --color-background-hover: var(--pine-color-secondary);
+}
+
 .pds-combobox__button-trigger--secondary.pds-combobox__button-trigger--input-shape:not([aria-disabled=true]) .pds-combobox__button-trigger-label--placeholder {
   color: var(--pine-color-text-muted);
 }