@ebay/skin 17.5.0-next.0 → 18.0.0-next.0

package/dist/combobox/combobox.css

@@ -1,247 +1,330 @@
 :root {
-  --bubble-shadow: 0 2px 7px rgba(0, 0, 0, 0.15),
+    --bubble-shadow: 0 2px 7px rgba(0, 0, 0, 0.15),
         0 5px 17px rgba(0, 0, 0, 0.2);
 }
 .combobox {
-  box-sizing: border-box;
-  line-height: normal;
-  position: relative;
+    box-sizing: border-box;
+    line-height: normal;
+    position: relative;
 }
+
 span.combobox {
-  display: inline-block;
-  vertical-align: bottom;
+    display: inline-block;
+    vertical-align: bottom;
 }
+
 .combobox__value {
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  flex: 1 0 auto;
+    flex: 1 0 auto;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
 }
+
 .combobox__options--fix-width[role="listbox"] {
-  width: 100%;
+    width: 100%;
 }
+
 .combobox__listbox {
-  background-color: var(--combobox-listbox-background-color, var(--color-background-elevated));
-  border-radius: var(--combobox-listbox-border-radius, var(--border-radius-50));
-  box-shadow: var(--bubble-shadow);
-  box-sizing: border-box;
-  display: none;
-  left: 0;
-  max-height: 400px;
-  min-width: 100%;
-  overflow-y: auto;
-  position: absolute;
-  top: calc(100% + 4px);
-  width: auto;
-  z-index: 2;
-}
+    background-color: var(
+        --combobox-listbox-background-color,
+        var(--color-background-elevated)
+    );
+    border-radius: var(
+        --combobox-listbox-border-radius,
+        var(--border-radius-50)
+    );
+    box-shadow: var(--bubble-shadow);
+    box-sizing: border-box;
+    display: none;
+    left: 0;
+    max-height: 400px;
+    min-width: 100%;
+    overflow-y: auto;
+    position: absolute;
+    top: calc(100% + 4px);
+    width: auto;
+    z-index: 2;
+}
+
+.combobox__listbox--reverse,
 [dir="rtl"] .combobox__listbox {
-  left: unset;
-  right: 0;
-}
-.combobox__listbox--reverse {
-  left: unset;
-  right: 0;
+    left: unset;
+    right: 0;
 }
 [dir="rtl"] .combobox__listbox--reverse {
-  left: 0;
-  right: unset;
+    left: 0;
+    right: unset;
 }
-.combobox__control > svg.icon,
-.combobox__control > button {
-  -webkit-margin-start: 8px;
-          margin-inline-start: 8px;
+
+.combobox__control > button,
+.combobox__control > svg.icon {
+    -webkit-margin-start: 8px;
+    margin-inline-start: 8px;
 }
+
 .combobox__option[role^="option"] {
-  background-color: transparent;
-  border-style: solid;
-  border-width: 1px;
-  box-sizing: border-box;
-  display: inline-grid;
-  font-family: inherit;
-  grid-template-columns: auto auto;
-  justify-content: space-between;
-  padding: 8px 15px;
-  width: 100%;
-  border-color: var(--listbox-option-border-color, var(--color-background-primary));
-  color: var(--listbox-option-foreground-color, var(--color-foreground-primary));
-  cursor: default;
-  position: relative;
-}
-.combobox__option[role^="option"]:not(:last-child) {
-  margin-bottom: 1px;
+    background-color: initial;
+    border-color: var(
+        --listbox-option-border-color,
+        var(--color-background-primary)
+    );
+    border-style: solid;
+    border-width: 1px;
+    box-sizing: border-box;
+    color: var(
+        --listbox-option-foreground-color,
+        var(--color-foreground-primary)
+    );
+    cursor: default;
+    display: inline-grid;
+    font-family: inherit;
+    grid-template-columns: auto auto;
+    justify-content: space-between;
+    padding: 8px 15px;
+    position: relative;
+    width: 100%;
 }
 .combobox__option[role^="option"]:focus {
-  outline-offset: -4px;
+    outline-offset: -4px;
 }
 .combobox__option[role^="option"][hidden] {
-  display: none;
+    display: none;
 }
 .combobox__option[role^="option"]:hover {
-  background-color: var(--color-state-primary-hover);
-  color: var(--listbox-option-hover-foreground-color, var(--color-foreground-primary));
+    color: var(
+        --listbox-option-hover-foreground-color,
+        var(--color-foreground-primary)
+    );
 }
 .combobox__option[role^="option"]:active {
-  font-weight: bold;
+    font-weight: 700;
 }
 .combobox__option[role^="option"]:disabled,
 .combobox__option[role^="option"][aria-disabled="true"] {
-  color: var(--listbox-option-disabled-foreground-color, var(--color-foreground-disabled));
-  background-color: unset;
-  font-weight: unset;
+    background-color: unset;
+    color: var(
+        --listbox-option-disabled-foreground-color,
+        var(--color-foreground-disabled)
+    );
+    font-weight: unset;
 }
 .combobox__option[role^="option"]:first-child {
-  border-top-left-radius: var(--combobox-listbox-border-radius, var(--border-radius-50));
-  border-top-right-radius: var(--combobox-listbox-border-radius, var(--border-radius-50));
+    border-top-left-radius: var(
+        --combobox-listbox-border-radius,
+        var(--border-radius-50)
+    );
+    border-top-right-radius: var(
+        --combobox-listbox-border-radius,
+        var(--border-radius-50)
+    );
 }
 .combobox__option[role^="option"]:last-child {
-  border-bottom-left-radius: var(--combobox-listbox-border-radius, var(--border-radius-50));
-  border-bottom-right-radius: var(--combobox-listbox-border-radius, var(--border-radius-50));
+    border-bottom-left-radius: var(
+        --combobox-listbox-border-radius,
+        var(--border-radius-50)
+    );
+    border-bottom-right-radius: var(
+        --combobox-listbox-border-radius,
+        var(--border-radius-50)
+    );
 }
 .combobox__option[role^="option"]:not(:last-child) {
-  margin-bottom: 1px;
+    margin-bottom: 1px;
 }
 .combobox__option[role^="option"]:hover {
-  background-color: var(--color-state-primary-hover);
+    background-color: var(--color-state-primary-hover);
 }
 .combobox__option[role^="option"] svg.icon {
-  align-self: center;
-  fill: currentColor;
-  margin: 0 auto;
-  opacity: 0;
-  stroke: currentColor;
-  stroke-width: 0;
-}
+    align-self: center;
+    fill: currentColor;
+    margin: 0 auto;
+    opacity: 0;
+    stroke: currentColor;
+    stroke-width: 0;
+}
+
 .combobox__option--active[role^="option"] {
-  background-color: var(--color-state-primary-active);
+    background-color: var(--color-state-primary-active);
 }
 .combobox__option--active[role^="option"] svg.icon {
-  opacity: 1;
+    opacity: 1;
 }
+
 .combobox__control button.icon-btn {
-  height: 38px;
-  padding: 0;
-  position: absolute;
-  right: 1px;
-  top: 1px;
-  width: 38px;
-}
+    height: 38px;
+    padding: 0;
+    position: absolute;
+    right: 1px;
+    top: 1px;
+    width: 38px;
+}
+
 .combobox__control button.icon-btn svg {
-  left: 0;
-  margin: 0;
-  right: 0;
+    left: 0;
+    margin: 0;
+    right: 0;
 }
+
 .combobox--expanded .combobox__listbox {
-  display: block;
+    display: block;
 }
+
 .combobox--expanded svg.icon--chevron-down-12 {
-  transform: rotate(180deg);
+    transform: rotate(180deg);
 }
+
 .combobox__control > svg.icon--chevron-down-12 {
-  color: var(--combobox-textbox-icon-color, var(--color-foreground-primary));
-  pointer-events: none;
-  position: absolute;
-  right: 17px;
-  top: calc(50% - 8px);
+    color: var(--combobox-textbox-icon-color, var(--color-foreground-primary));
+    pointer-events: none;
+    position: absolute;
+    right: 17px;
+    top: calc(50% - 8px);
 }
+
 .combobox__control > input {
-  -webkit-appearance: none;
-     -moz-appearance: none;
-          appearance: none;
-  background-color: var(--combobox-textbox-background-color, var(--color-background-secondary));
-  border-color: var(--combobox-textbox-border-color, var(--color-stroke-default));
-  border-radius: var(--combobox-textbox-border-radius, var(--border-radius-50));
-  border-style: solid;
-  border-width: 1px;
-  box-sizing: border-box;
-  color: var(--combobox-textbox-foreground-color, var(--color-foreground-on-secondary));
-  font-family: inherit;
-  font-size: inherit;
-  height: 40px;
-  margin-left: 0;
-  margin-right: 0;
-  padding: 0 32px 0 16px;
+    -webkit-appearance: none;
+    -moz-appearance: none;
+    appearance: none;
+    background-color: var(
+        --combobox-textbox-background-color,
+        var(--color-background-secondary)
+    );
+    border-color: var(
+        --combobox-textbox-border-color,
+        var(--color-stroke-default)
+    );
+    border-radius: var(
+        --combobox-textbox-border-radius,
+        var(--border-radius-50)
+    );
+    border-style: solid;
+    border-width: 1px;
+    box-sizing: border-box;
+    color: var(
+        --combobox-textbox-foreground-color,
+        var(--color-foreground-on-secondary)
+    );
+    font-family: inherit;
+    font-size: inherit;
+    height: 40px;
+    margin-left: 0;
+    margin-right: 0;
+    padding: 0 32px 0 16px;
 }
 .combobox__control > input[readonly] {
-  color: var(--combobox-textbox-foreground-color, var(--color-foreground-primary));
-  cursor: default;
-  text-shadow: 0 0 0 inherit;
-  -webkit-user-select: none;
+    color: var(
+        --combobox-textbox-foreground-color,
+        var(--color-foreground-primary)
+    );
+    cursor: default;
+    text-shadow: 0 0 0 inherit;
+    --webkit-user-select: none;
 }
 .combobox__control > input[readonly]::-moz-selection,
 .combobox__control > input[readonly]::selection {
-  background-color: var(--combobox-textbox-readonly-selection-background, var(--color-background-primary));
-}
-.combobox__control > input[disabled],
-.combobox__control > input[aria-disabled="true"] {
-  border-color: var(--combobox-textbox-disabled-border-color, var(--color-background-disabled));
-  color: var(--combobox-textbox-disabled-foreground-color, var(--color-foreground-disabled));
+    background-color: var(
+        --combobox-textbox-readonly-selection-background,
+        var(--color-background-primary)
+    );
 }
-.combobox__control > input[disabled][readonly],
-.combobox__control > input[aria-disabled="true"][readonly] {
-  text-shadow: 0 0 0 var(--color-foreground-disabled);
-}
-.combobox__control > input[disabled] + svg,
-.combobox__control > input[aria-disabled="true"] + svg {
-  opacity: 0.5;
+.combobox__control > input[aria-disabled="true"],
+.combobox__control > input[disabled] {
+    border-color: var(
+        --combobox-textbox-disabled-border-color,
+        var(--color-background-disabled)
+    );
+    color: var(
+        --combobox-textbox-disabled-foreground-color,
+        var(--color-foreground-disabled)
+    );
+}
+.combobox__control > input[aria-disabled="true"][readonly],
+.combobox__control > input[disabled][readonly] {
+    text-shadow: 0 0 0 var(--color-foreground-disabled);
+}
+.combobox__control > input[aria-disabled="true"] + svg,
+.combobox__control > input[disabled] + svg {
+    opacity: 0.5;
 }
 .combobox__control > input[aria-invalid="true"] {
-  border-color: var(--combobox-textbox-invalid-foreground-color, var(--color-stroke-attention));
+    border-color: var(
+        --combobox-textbox-invalid-foreground-color,
+        var(--color-stroke-attention)
+    );
 }
 .combobox__control > input::-ms-clear {
-  display: none;
+    display: none;
 }
+
 .combobox__control--borderless > input {
-  background-color: transparent;
-  border-color: transparent;
-  padding-left: 0;
+    background-color: initial;
+    border-color: transparent;
+    padding-left: 0;
 }
+
 .combobox__control > input:focus {
-  background-color: var(--combobox-textbox-focus-background-color, var(--color-background-primary));
-  border-color: var(--combobox-textbox-focus-border-color, var(--color-foreground-primary));
-}
+    background-color: var(
+        --combobox-textbox-focus-background-color,
+        var(--color-background-primary)
+    );
+    border-color: var(
+        --combobox-textbox-focus-border-color,
+        var(--color-foreground-primary)
+    );
+}
+
 .combobox__control--borderless > input:focus {
-  border-color: transparent;
-  outline: none;
-}
-.combobox--fluid {
-  width: 100%;
+    border-color: transparent;
+    outline: none;
 }
+.combobox--fluid,
 .combobox--fluid .combobox__control > input {
-  width: 100%;
+    width: 100%;
 }
+
 .combobox--large .combobox__control > input {
-  font-size: var(--font-size-medium);
-  height: 48px;
+    font-size: var(--font-size-medium);
+    height: 48px;
 }
+
 .combobox__control > input[disabled] {
-  background-color: var(--combobox-textbox-disabled-background-color, var(--color-background-secondary));
+    background-color: var(
+        --combobox-textbox-disabled-background-color,
+        var(--color-background-secondary)
+    );
 }
+
 .combobox__option--active[role="option"] {
-  color: var(--combobox-listbox-option-hover-foreground-color, var(--color-foreground-primary));
-  font-weight: bold;
-}
-@media all and (-ms-high-contrast: active), all and (-ms-high-contrast: none) {
-  *::-ms-backdrop,
-  .combobox__value {
-    min-width: 100%;
-  }
+    color: var(
+        --combobox-listbox-option-hover-foreground-color,
+        var(--color-foreground-primary)
+    );
+    font-weight: 700;
+}
+
+@media (-ms-high-contrast: active), all and (-ms-high-contrast: none) {
+    .combobox__value,
+    ::-ms-backdrop {
+        min-width: 100%;
+    }
 }
 [dir="rtl"] .combobox__control > input {
-  padding: 0 16px 0 32px;
+    padding: 0 16px 0 32px;
 }
-[dir="rtl"] .combobox__control > svg.icon,
-[dir="rtl"] .combobox__control > button {
-  right: unset;
+[dir="rtl"] .combobox__control > button,
+[dir="rtl"] .combobox__control > svg.icon {
+    right: unset;
 }
 [dir="rtl"] .combobox__control > svg.icon {
-  left: 16px;
-  margin-top: 1.3px;
+    left: 16px;
+    margin-top: 1.3px;
 }
 [dir="rtl"] .combobox__control > button {
-  left: 0;
+    left: 0;
 }
 [dir="rtl"] .combobox__control button.icon-btn {
-  left: 1px;
-  right: inherit;
+    left: 1px;
+    right: inherit;
 }
+
+/*# sourceMappingURL=combobox.css.map */

package/dist/combobox/combobox.css.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/sass/mixins/private/_bubble-mixins.scss","combobox.css","../../src/sass/combobox/combobox.scss","../../src/sass/mixins/public/_utility-mixins.scss","../../src/sass/mixins/private/_token-mixins.scss","../../src/sass/mixins/private/_dropdown-mixins.scss","../../src/sass/mixins/private/_selection-list-mixins.scss","../../src/sass/mixins/private/_listbox-mixins.scss"],"names":[],"mappings":"AAEA;EAKI,4EAAA;ACQJ;ACPA;EACI,qBAAA;EACA,kBAAA;EACA,iBAAA;ADYJ;;ACTA;EACI,oBAAA;EACA,qBAAA;ADYJ;;ACTA;EAGI,aAAA;ECFA,eAAA;EACA,sBAAA;EACA,kBAAA;AFaJ;;ACVA;EACI,UAAA;ADaJ;;ACVA;EE3BQ,2FAAA;EAAA,4EAAA;ECOJ,+BAAA;EACA,qBAAA;EACA,YAAA;EACA,MAAA;EACA,gBAAA;EACA,cAAA;EACA,eAAA;EACA,iBAAA;EACA,oBAAA;EACA,UAAA;EACA,SAAA;AJoCJ;;ACtBA;EGLI,UAAA;EACA,OAAA;AJmCJ;AIjCI;EACI,MAAA;EACA,WAAA;AJmCR;;AC/BA;EAEI,wBAAA;UAAA,uBAAA;ADkCJ;;AC/BA;EIzCI,wBAAA;EFCI,gFAAA;EEAJ,kBAAA;EACA,gBAAA;EACA,qBAAA;EFFI,6EAAA;EF4CJ,cAAA;EIzCA,mBAAA;EACA,mBAAA;EACA,+BAAA;EACA,6BAAA;EACA,gBAAA;EJsCA,iBAAA;EIrCA,UAAA;ALgFJ;AK1EI;EACI,mBAAA;AL+ER;AMnFI;EACI,YAAA;ANqFR;AMlFI;EHfI,mFAAA;AHqGR;AM9EI;EACI,eAAA;ANgFR;AM7EI;EAYA,sBAAA;EHvCI,uFAAA;EGwCJ,iBAAA;ANqEJ;AIzEI;EDpCI,qFAAA;EAAA,sFAAA;AHiHR;AIlEI;ED/CI,wFAAA;EAAA,yFAAA;AHqHR;ACtEI;EACI,iBAAA;ADwER;ACrEI;EACI,iDAAA;ADuER;ACpEI;EInCA,iBAAA;EACA,iBAAA;EACA,aAAA;EACA,SAAA;EACA,mBAAA;EACA,cAAA;AL0GJ;;ACvEA;EACI,kDAAA;AD0EJ;ACxEI;EACI,SAAA;AD0ER;;ACtEA;EACI,WAAA;EACA,SAAA;EACA,iBAAA;EACA,SAAA;EACA,OAAA;EACA,UAAA;ADyEJ;;ACtEA;EACI,MAAA;EACA,QAAA;EACA,OAAA;ADyEJ;;ACtEA;EACI,aAAA;ADyEJ;;ACtEA;EACI,wBAAA;ADyEJ;;ACtEA;EE3FQ,yEAAA;EF8FJ,mBAAA;EACA,iBAAA;EACA,UAAA;EACA,mBAAA;ADwEJ;;ACrEA;EACI,uBAAA;KAAA,oBAAA;UAAA,eAAA;EErGI,4FAAA;EAAA,8EAAA;EF+GJ,4EAAA;EAIA,kBAAA;EACA,gBAAA;EACA,qBAAA;EErHI,oFAAA;EF2HJ,mBAAA;EACA,iBAAA;EACA,WAzHa;EA0Hb,aAAA;EACA,cAAA;EACA,qBAAA;AD0DJ;ACxDI;EElII,+EAAA;EFwIA,cAAA;EAEA,yBAAA;EAEA,yBAAA;ADsDR;ACpDQ;EE9IA,uGAAA;AHqMR;AC9CI;EEvJI,4FAAA;EAAA,yFAAA;AHyMR;ACvCQ;EACI,kDAAA;ADyCZ;ACtCQ;EACI,UAAA;ADwCZ;ACpCI;EE3KI,4FAAA;AHkNR;AChCI;EACI,YAAA;ADkCR;;AC9BA;EACI,wBAAA;EACA,wBAAA;EACA,cAAA;ADiCJ;;AC9BA;EE7LQ,gGAAA;EAAA,wFAAA;AHgOR;;ACxBA;EACI,wBAAA;EACA,YAAA;AD2BJ;ACrBI;EACI,UAAA;AD2BR;;ACvBA;EACI,iCAAA;EACA,WAAA;AD0BJ;;ACvBA;EE1NQ,qGAAA;AHqPR;;ACpBA;EEjOQ,4FAAA;EFuOJ,eAAA;ADmBJ;;AChBA;EACI;IAEI,cAAA;EDmBN;AACF;ACdI;EACI,qBAAA;ADiBR;ACdI;EAEI,WAAA;ADgBR;ACbI;EACI,SAAA;EACA,gBAAA;ADeR;ACZI;EACI,MAAA;ADcR;ACXI;EACI,QAAA;EACA,aAAA;ADaR","file":"combobox.css"}