@pine-ds/core 5.0.0-mercury.0 → 5.0.0

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

@@ -0,0 +1,953 @@
+:host {
+  display: block;
+}
+
+:host([truncate]) {
+  display: block;
+  min-width: 0;
+}
+
+:host([aria-disabled=true]) .pds-combobox__input-icon {
+  color: var(--pine-color-text-disabled);
+  pointer-events: none;
+}
+
+.pds-combobox {
+  position: relative;
+}
+
+.pds-combobox__label {
+  color: var(--pine-color-text-label);
+  display: block;
+  font: var(--pine-typography-body-medium);
+  letter-spacing: var(--pine-letter-spacing);
+  margin-block-end: var(--pine-dimension-2xs);
+}
+
+.pds-combobox__input-wrapper {
+  align-items: center;
+  display: flex;
+  position: relative;
+  width: 100%;
+}
+
+.pds-combobox__input {
+  background: var(--pine-color-background-container);
+  border: var(--pine-border);
+  border-radius: var(--pine-dimension-125);
+  box-sizing: border-box;
+  color: var(--pine-color-text-strong);
+  flex: 1;
+  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%;
+}
+.pds-combobox__input:hover:not(:disabled) {
+  border-color: var(--pine-color-border-hover);
+}
+.pds-combobox__input:disabled {
+  background: var(--pine-color-background-container-disabled);
+  border-color: var(--pine-color-border-disabled);
+  color: var(--pine-color-text-disabled);
+  cursor: not-allowed;
+}
+.pds-combobox__input:disabled::placeholder {
+  color: var(--pine-color-text-placeholder-disabled);
+}
+.pds-combobox__input:focus-visible {
+  border-color: var(--pine-color-border-active);
+  outline: var(--pine-outline-focus);
+  outline-offset: var(--pine-border-width);
+}
+.pds-combobox__input::placeholder {
+  color: var(--pine-color-text-placeholder);
+}
+.pds-combobox__input.pds-combobox__input--invalid {
+  background: var(--pine-color-red-050);
+  border-color: var(--pine-color-border-danger);
+}
+:host-context([data-theme=dark]) .pds-combobox__input.pds-combobox__input--invalid {
+  background: var(--pine-color-red-950);
+}
+.pds-combobox__input.pds-combobox__input--invalid:hover:not(:disabled) {
+  border-color: var(--pine-color-border-danger);
+}
+.pds-combobox__input.pds-combobox__input--invalid:focus-visible {
+  outline-color: var(--pine-color-focus-ring-danger);
+}
+
+.pds-combobox__input-icon {
+  color: var(--pine-color-text-secondary);
+  inset-inline-end: var(--pine-dimension-150);
+  pointer-events: none;
+  position: absolute;
+  z-index: calc(var(--pine-z-index-raised) - 1);
+}
+
+.pds-combobox__helper {
+  color: var(--pine-color-text-message);
+  font: var(--pine-typography-body-sm-medium);
+  margin-block-start: var(--pine-dimension-2xs);
+}
+
+.pds-combobox__error {
+  align-items: flex-start;
+  color: var(--pine-color-text-message-danger);
+  display: flex;
+  font: var(--pine-typography-body-sm-medium);
+  gap: var(--pine-dimension-2xs);
+  margin-block-start: var(--pine-dimension-2xs);
+}
+.pds-combobox__error pds-icon {
+  flex-shrink: 0;
+  margin-block-start: var(--pine-dimension-025);
+}
+
+.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: 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-xs);
+  color: var(--pine-color-text-secondary);
+  cursor: pointer;
+  display: flex;
+  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:focus-visible {
+  outline: 0;
+}
+
+.pds-combobox__option.pds-combobox__option--layout .pds-combobox__option-layout-wrapper {
+  align-items: center;
+  display: flex;
+  width: 100%;
+}
+
+.pds-combobox__option:last-child {
+  margin-block-end: 0;
+}
+
+.pds-combobox__option--highlighted {
+  background: var(--pine-color-background-muted);
+}
+
+.pds-combobox__option--disabled,
+.pds-combobox__group-row--disabled > .pds-combobox__group-row-trigger,
+.pds-combobox__group-back--disabled > .pds-combobox__group-back-trigger,
+.pds-combobox__group--disabled > .pds-combobox__group-label {
+  color: var(--pine-color-text-disabled);
+}
+
+.pds-combobox__option--disabled {
+  cursor: not-allowed;
+}
+
+.pds-combobox__option--disabled .pds-combobox__option-chip,
+.pds-combobox__option--disabled .pds-combobox__option-layout-wrapper,
+.pds-combobox__option--disabled .pds-combobox__option-badge,
+.pds-combobox__group-row--disabled > .pds-combobox__group-row-trigger > .pds-combobox__group-badge,
+.pds-combobox__group--disabled > .pds-combobox__group-label > .pds-combobox__group-badge {
+  opacity: 0.5;
+}
+
+.pds-combobox__option-label {
+  align-items: center;
+  display: flex;
+  gap: var(--pine-dimension-xs);
+  min-width: 0;
+  overflow-wrap: anywhere;
+}
+
+.pds-combobox__option-icon {
+  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;
+}
+.pds-combobox__listbox--truncate .pds-combobox__option-check {
+  flex-shrink: 0;
+}
+
+.pds-combobox__option--with-badge {
+  column-gap: var(--pine-dimension-xs);
+}
+
+.pds-combobox__option-badge,
+.pds-combobox__group-badge {
+  flex-shrink: 0;
+  isolation: isolate;
+  margin-block: calc(var(--pine-dimension-025) * -1);
+  margin-inline-start: auto;
+}
+
+.pds-combobox__option--with-badge .pds-combobox__option-check {
+  margin-inline-start: calc(var(--pine-dimension-150) - var(--pine-dimension-xs));
+}
+
+.pds-combobox__option-check {
+  color: currentColor;
+  font-size: var(--pine-dimension-150);
+  margin-inline-start: var(--pine-dimension-150);
+}
+
+.pds-combobox__group-label {
+  color: var(--pine-color-text-tertiary);
+  cursor: default;
+  font: var(--pine-typography-heading-caption);
+  margin-block-end: var(--pine-dimension-2xs);
+  margin-block-start: var(--pine-dimension-150);
+  padding: var(--pine-dimension-2xs) var(--pine-dimension-sm);
+  text-transform: uppercase;
+}
+.pds-combobox__group-label:first-child {
+  margin-block-start: 0;
+}
+
+.pds-combobox__group {
+  list-style: none;
+  margin-block-start: var(--pine-dimension-150);
+}
+.pds-combobox__group:first-child {
+  margin-block-start: 0;
+}
+
+.pds-combobox__group-list {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+.pds-combobox__listbox--grouped .pds-combobox__group-list {
+  display: flex;
+  flex-direction: column;
+}
+
+.pds-combobox__group-label--with-icon {
+  align-items: center;
+  display: flex;
+  gap: var(--pine-dimension-xs);
+}
+
+.pds-combobox__group-icon {
+  flex-shrink: 0;
+}
+
+.pds-combobox__group-label--with-badge {
+  align-items: center;
+  column-gap: var(--pine-dimension-xs);
+  display: flex;
+}
+
+.pds-combobox__group-label-text {
+  min-width: 0;
+  overflow-wrap: anywhere;
+}
+
+.pds-combobox__group-label > .pds-combobox__group-badge {
+  margin-block: calc(var(--pine-dimension-xs) * -1);
+  text-transform: none;
+}
+
+.pds-combobox__group-row {
+  list-style: none;
+  position: relative;
+}
+
+.pds-combobox__group-row-trigger {
+  align-items: center;
+  border-radius: var(--pine-dimension-xs);
+  color: var(--pine-color-text-secondary);
+  cursor: pointer;
+  display: flex;
+  font: var(--pine-typography-body);
+  gap: var(--pine-dimension-xs);
+  justify-content: space-between;
+  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--highlighted > .pds-combobox__group-row-trigger,
+.pds-combobox__group-back--highlighted > .pds-combobox__group-row-trigger {
+  background: var(--pine-color-background-muted);
+}
+
+.pds-combobox__listbox--pointer-hover .pds-combobox__group-row-trigger:hover {
+  background: var(--pine-color-background-muted);
+}
+
+.pds-combobox__listbox--drill-in,
+.pds-combobox__listbox--drill-out {
+  overflow-x: hidden;
+}
+
+.pds-combobox__listbox--drill-in,
+.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__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,
+.pds-combobox__panel-search--drill-out > * {
+  animation: pds-combobox-drill var(--pine-motion-duration-slow) var(--pine-motion-easing-out);
+}
+
+@keyframes pds-combobox-drill {
+  from {
+    opacity: 0;
+    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__option.pds-combobox__option--keyboard {
+  outline: var(--pine-outline-focus);
+  outline-offset: calc(var(--pine-border-width) * -2);
+}
+
+.pds-combobox__group-row-label {
+  align-items: center;
+  display: flex;
+  gap: var(--pine-dimension-xs);
+  min-width: 0;
+  overflow-wrap: anywhere;
+}
+
+.pds-combobox__group-row-caret {
+  flex-shrink: 0;
+}
+
+.pds-combobox__listbox--grouped,
+.pds-combobox__flyout {
+  display: flex;
+  flex-direction: column;
+  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;
+  position: fixed;
+  visibility: hidden;
+  width: max-content;
+  z-index: 1;
+}
+
+.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 {
+  flex: 1;
+  list-style: none;
+  margin: 0;
+  min-height: 0;
+  overflow-y: auto;
+  padding: var(--pine-dimension-xs);
+}
+
+.pds-combobox__listbox-options.pds-combobox__listbox--grouped {
+  padding: var(--pine-dimension-2xs);
+}
+
+.pds-combobox__panel-search {
+  align-items: center;
+  border-block-end: var(--pine-border);
+  border-block-end-color: var(--pine-color-border-active);
+  display: flex;
+  flex-shrink: 0;
+  gap: var(--pine-dimension-xs);
+  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-input {
+  background: transparent;
+  border: 0;
+  color: var(--pine-color-text-strong);
+  flex: 1;
+  font: var(--pine-typography-body);
+  letter-spacing: var(--pine-letter-spacing);
+  min-width: 0;
+  outline: none;
+  padding: 0;
+}
+.pds-combobox__panel-search-input::placeholder {
+  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;
+  list-style: none;
+  min-height: 0;
+}
+
+.pds-combobox__group-back-trigger {
+  flex-shrink: 0;
+  justify-content: flex-start;
+}
+
+.pds-combobox__listbox-options--drilled-in:focus {
+  outline: none;
+}
+
+: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-active);
+  border-radius: 0;
+  color: var(--pine-color-text-secondary);
+  font: var(--pine-typography-body);
+  letter-spacing: var(--pine-letter-spacing);
+  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;
+  list-style: none;
+  margin: 0;
+  min-height: 0;
+  overflow-x: hidden;
+  overflow-y: auto;
+  padding: var(--pine-dimension-2xs);
+}
+
+.visually-hidden {
+  border: 0;
+  clip: rect(0 0 0 0);
+  clip-path: polygon(0 0, 0 0, 0 0);
+  height: 1px;
+  margin: -1px;
+  overflow: hidden;
+  padding: 0;
+  position: absolute;
+  white-space: nowrap;
+  width: 1px;
+}
+
+.pds-combobox__loading {
+  align-items: center;
+  display: flex;
+  justify-content: center;
+  padding: var(--pine-dimension-150);
+}
+
+.pds-combobox__empty {
+  color: var(--pine-color-text-tertiary);
+  padding: var(--pine-dimension-150) var(--pine-dimension-sm);
+  text-align: center;
+}
+
+.pds-combobox__load-more {
+  align-items: center;
+  display: flex;
+  justify-content: center;
+  padding: var(--pine-dimension-150);
+}
+
+:host(.pds-combobox-dropdown-portal) .pds-combobox__listbox {
+  position: fixed;
+  z-index: var(--pine-z-index-priority);
+}
+
+.pds-combobox__button-trigger {
+  align-items: center;
+  background: var(--color-background-default, var(--pine-color-secondary));
+  border: var(--pine-border);
+  border-radius: var(--pine-border-radius-full);
+  box-sizing: border-box;
+  color: var(--color-text-default, var(--pine-color-text-inverse-emphasis));
+  cursor: pointer;
+  display: flex;
+  font: var(--pine-typography-body);
+  justify-content: space-between;
+  min-height: var(--pine-dimension-450);
+  outline: none;
+  padding: 0 var(--pine-dimension-sm);
+  /* stylelint-disable-next-line pine-design-system/no-hardcoded-motion -- 0.15s off-grid micro-transition; no exact motion token */
+  transition: border-color 0.15s, box-shadow 0.15s, background 0.15s;
+  width: fit-content;
+}
+.pds-combobox__button-trigger .pds-combobox__button-trigger-layout-wrapper {
+  align-items: center;
+  display: flex;
+  flex: 1;
+}
+.pds-combobox__button-trigger .trigger-content {
+  align-items: center;
+  display: flex;
+  width: 100%;
+}
+
+.pds-combobox__button-trigger:focus-visible {
+  border-color: var(--color-border-focus, var(--pine-color-border));
+  box-shadow: 0 0 0 2px var(--color-outline, var(--pine-color-focus-ring));
+}
+
+.pds-combobox__button-trigger:hover {
+  background: var(--color-background-hover, var(--pine-color-secondary-hover));
+  border-color: var(--color-border-hover, var(--pine-color-border-hover));
+}
+
+.pds-combobox__button-trigger[aria-disabled=true],
+.pds-combobox__button-trigger:disabled {
+  background: var(--color-background-disabled, var(--pine-color-secondary-disabled));
+  border-color: var(--color-border-disabled, var(--pine-color-border-disabled));
+  color: var(--color-text-disabled, var(--pine-color-text-secondary-disabled));
+  cursor: not-allowed;
+  opacity: 0.6;
+}
+
+.pds-combobox__button-trigger-label {
+  color: inherit;
+  flex: 1 1 auto;
+  min-width: 0;
+  overflow-wrap: anywhere;
+  text-align: start;
+}
+
+.pds-combobox__button-trigger-label--with-icon {
+  align-items: center;
+  display: flex;
+  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 {
+  max-width: 100%;
+}
+.pds-combobox__button-trigger--truncate .pds-combobox__button-trigger-label {
+  overflow-wrap: normal;
+}
+.pds-combobox__button-trigger--truncate .pds-combobox__button-trigger-chevron {
+  flex-shrink: 0;
+}
+
+.pds-combobox__button-trigger-text,
+.pds-combobox__listbox--truncate .pds-combobox__option-text {
+  display: block;
+  flex: 1 1 auto;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.pds-combobox__button-trigger--input-shape {
+  border-radius: var(--pine-dimension-125);
+  font: var(--pine-typography-body);
+  letter-spacing: var(--pine-letter-spacing);
+  min-height: var(--pine-dimension-450);
+  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);
+}
+
+.pds-combobox__button-trigger-chevron {
+  color: currentColor;
+  margin-inline-start: var(--pine-dimension-150);
+}
+
+.pds-combobox__button-trigger--primary {
+  --color-background-default: var(--pine-color-primary);
+  --color-background-hover: var(--pine-color-primary-hover);
+  --color-background-disabled: var(--pine-color-primary-disabled);
+  --color-border-default: var(--pine-color-primary);
+  --color-border-hover: var(--pine-color-primary-hover);
+  --color-border-disabled: var(--pine-color-primary-disabled);
+  --color-border-focus: var(--pine-color-primary);
+  --color-text-default: var(--pine-color-text-primary);
+  --color-text-disabled: var(--pine-color-text-primary-disabled);
+  --color-outline: var(--pine-color-focus-ring);
+}
+
+.pds-combobox__button-trigger--accent {
+  --color-background-default: var(--pine-color-accent);
+  --color-background-hover: var(--pine-color-accent-hover);
+  --color-background-disabled: var(--pine-color-accent-disabled);
+  --color-border-default: var(--pine-color-accent);
+  --color-border-hover: var(--pine-color-accent-hover);
+  --color-border-disabled: var(--pine-color-accent-disabled);
+  --color-border-focus: var(--pine-color-accent);
+  --color-text-default: var(--pine-color-text-primary);
+  --color-text-disabled: var(--pine-color-text-accent-disabled);
+  --color-outline: var(--pine-color-focus-ring);
+}
+
+.pds-combobox__button-trigger--secondary {
+  --color-background-default: var(--pine-color-secondary);
+  --color-background-hover: var(--pine-color-secondary-hover);
+  --color-background-disabled: var(--pine-color-secondary-disabled);
+  --color-border-default: var(--pine-color-border);
+  --color-border-hover: var(--pine-color-border-hover);
+  --color-border-disabled: var(--pine-color-border-disabled);
+  --color-border-focus: var(--pine-color-border);
+  --color-text-default: var(--pine-color-text-secondary);
+  --color-text-disabled: var(--pine-color-text-secondary-disabled);
+  --color-outline: var(--pine-color-focus-ring);
+}
+
+.pds-combobox__button-trigger--destructive {
+  --color-background-default: var(--pine-color-danger);
+  --color-background-hover: var(--pine-color-danger-hover);
+  --color-background-disabled: var(--pine-color-danger-disabled);
+  --color-border-default: var(--pine-color-danger);
+  --color-border-hover: var(--pine-color-danger-hover);
+  --color-border-disabled: var(--pine-color-danger-disabled);
+  --color-border-focus: var(--pine-color-danger);
+  /* stylelint-disable-next-line pine-design-system/prefer-semantic-tokens */
+  --color-text-default: var(--pine-color-white);
+  --color-text-disabled: var(--pine-color-text-danger-disabled);
+  --color-outline: var(--pine-color-focus-ring-danger);
+}
+
+[data-layout] {
+  border-radius: var(--pine-dimension-125);
+  padding-block: var(--pine-dimension-xs);
+}
+
+.pds-combobox__chip-trigger {
+  align-items: center;
+  border-radius: var(--pine-dimension-sm);
+  box-sizing: border-box;
+  cursor: pointer;
+  display: inline-flex;
+  font: var(--pine-typography-body-medium);
+  justify-content: space-between;
+  outline: none;
+  padding-block: var(--pine-dimension-025);
+  padding-inline: var(--pine-dimension-150);
+  /* stylelint-disable-next-line pine-design-system/no-hardcoded-motion -- 0.15s off-grid micro-transition; no exact motion token */
+  transition: all 0.15s ease;
+  width: fit-content;
+}
+.pds-combobox__chip-trigger .pds-combobox__chip-trigger-layout-wrapper {
+  align-items: center;
+  display: flex;
+  flex: 1;
+}
+.pds-combobox__chip-trigger .trigger-content {
+  align-items: center;
+  display: flex;
+  width: 100%;
+}
+.pds-combobox__chip-trigger:focus-visible {
+  outline: var(--pine-outline-focus);
+  outline-offset: var(--pine-border-width);
+}
+.pds-combobox__chip-trigger[aria-disabled=true] {
+  cursor: not-allowed;
+  opacity: 0.6;
+}
+
+.pds-combobox__chip-trigger-label {
+  color: inherit;
+  flex: 1 1 auto;
+  text-align: start;
+}
+
+.pds-combobox__chip-trigger-chevron {
+  color: currentColor;
+  margin-inline-start: var(--pine-dimension-150);
+}
+
+.pds-combobox__chip-trigger-icon {
+  margin-inline-end: var(--pine-dimension-2xs);
+}
+
+.pds-combobox__chip-trigger--neutral,
+.pds-combobox__chip-trigger--accent,
+.pds-combobox__chip-trigger--success,
+.pds-combobox__chip-trigger--warning,
+.pds-combobox__chip-trigger--danger,
+.pds-combobox__chip-trigger--info {
+  background: var(--chip-bg);
+  border: var(--pine-border-width) solid var(--chip-border);
+  color: var(--chip-text);
+}
+.pds-combobox__chip-trigger--neutral:hover:not([aria-disabled=true]),
+.pds-combobox__chip-trigger--accent:hover:not([aria-disabled=true]),
+.pds-combobox__chip-trigger--success:hover:not([aria-disabled=true]),
+.pds-combobox__chip-trigger--warning:hover:not([aria-disabled=true]),
+.pds-combobox__chip-trigger--danger:hover:not([aria-disabled=true]),
+.pds-combobox__chip-trigger--info:hover:not([aria-disabled=true]) {
+  background: var(--chip-bg-hover);
+}
+.pds-combobox__chip-trigger--neutral:focus-visible,
+.pds-combobox__chip-trigger--accent:focus-visible,
+.pds-combobox__chip-trigger--success:focus-visible,
+.pds-combobox__chip-trigger--warning:focus-visible,
+.pds-combobox__chip-trigger--danger:focus-visible,
+.pds-combobox__chip-trigger--info:focus-visible {
+  border-color: var(--chip-border);
+}
+
+.pds-combobox__chip-trigger--neutral {
+  --chip-bg: var(--pine-chip-color-neutral);
+  --chip-bg-hover: var(--pine-chip-color-neutral-hover);
+  --chip-border: var(--pine-chip-color-neutral-hover);
+  --chip-text: var(--pine-color-text-neutral);
+}
+
+.pds-combobox__chip-trigger--accent {
+  --chip-bg: var(--pine-chip-color-accent);
+  --chip-bg-hover: var(--pine-chip-color-accent-hover);
+  --chip-border: var(--pine-chip-color-accent-hover);
+  --chip-text: var(--pine-color-text-accent);
+}
+
+.pds-combobox__chip-trigger--success {
+  --chip-bg: var(--pine-chip-color-success);
+  --chip-bg-hover: var(--pine-chip-color-success-hover);
+  --chip-border: var(--pine-chip-color-success-hover);
+  --chip-text: var(--pine-color-text-success);
+}
+
+.pds-combobox__chip-trigger--warning {
+  --chip-bg: var(--pine-chip-color-warning);
+  --chip-bg-hover: var(--pine-chip-color-warning-hover);
+  --chip-border: var(--pine-chip-color-warning-hover);
+  --chip-text: var(--pine-color-text-warning);
+}
+
+.pds-combobox__chip-trigger--danger {
+  --chip-bg: var(--pine-chip-color-danger);
+  --chip-bg-hover: var(--pine-chip-color-danger-hover);
+  --chip-border: var(--pine-chip-color-danger-hover);
+  --chip-text: var(--pine-color-text-danger);
+}
+
+.pds-combobox__chip-trigger--info {
+  --chip-bg: var(--pine-chip-color-info);
+  --chip-bg-hover: var(--pine-chip-color-info-hover);
+  --chip-border: var(--pine-chip-color-info-hover);
+  --chip-text: var(--pine-color-text-info);
+}
+
+.pds-combobox__chip-trigger--brand {
+  /* stylelint-disable-next-line pine-design-system/no-hardcoded-colors */
+  background: linear-gradient(90deg, #FF3E14 0%, #6B62F2 100%);
+  border: 0;
+  color: var(--pine-color-text-neutral);
+  padding: 1px;
+  position: relative;
+}
+.pds-combobox__chip-trigger--brand .pds-combobox__chip-trigger-label {
+  /* stylelint-disable-next-line pine-design-system/no-hardcoded-colors */
+  background: rgba(255, 255, 255, 0.9);
+  border-radius: calc(var(--pine-dimension-sm) - 1px);
+  color: var(--pine-color-text-neutral);
+  font-weight: var(--pine-font-weight-medium);
+  padding: var(--pine-dimension-025) var(--pine-dimension-150);
+  position: relative;
+  z-index: 1;
+}
+.pds-combobox__chip-trigger--brand .pds-combobox__chip-trigger-chevron {
+  position: relative;
+  z-index: 1;
+}
+.pds-combobox__chip-trigger--brand:hover:not([aria-disabled=true]) .pds-combobox__chip-trigger-label {
+  /* stylelint-disable-next-line pine-design-system/no-hardcoded-colors */
+  background: rgba(255, 255, 255, 0.8);
+}
+
+.pds-combobox__chip-trigger--dropdown:not(.pds-combobox__chip-trigger--brand) {
+  padding: var(--pine-dimension-none);
+}
+.pds-combobox__chip-trigger--dropdown:not(.pds-combobox__chip-trigger--brand) .pds-combobox__chip-trigger-label {
+  padding: var(--pine-dimension-025) var(--pine-dimension-150);
+}
+
+.pds-combobox__chip-trigger--large .pds-combobox__chip-trigger-label {
+  font-family: var(--pine-font-family-heading);
+  font-size: var(--pine-font-size-heading-6);
+  font-weight: var(--pine-font-weight-medium);
+  letter-spacing: var(--pine-letter-spacing-heading-6);
+}
+
+.pds-combobox__chip-trigger--dot .pds-combobox__chip-trigger-label::before {
+  border: var(--pine-border-width) solid transparent;
+  border-radius: var(--pine-border-radius-full);
+  content: "";
+  display: inline-block;
+  height: var(--pine-dimension-2xs);
+  margin-inline-end: var(--pine-dimension-2xs);
+  width: var(--pine-dimension-2xs);
+}