@ebay/skin 16.9.2 → 17.0.0-0

package/dist/chips-combobox/chips-combobox.css

@@ -0,0 +1,100 @@
+.chips-combobox {
+  background-color: var(--color-background-secondary);
+  border: 1px solid var(--color-stroke-default);
+  border-radius: var(--border-radius-50);
+  display: inline-block;
+  padding-bottom: var(--spacing-100);
+  -webkit-padding-end: var(--spacing-200);
+          padding-inline-end: var(--spacing-200);
+  -webkit-padding-start: var(--spacing-100);
+          padding-inline-start: var(--spacing-100);
+  padding-top: var(--spacing-100);
+  position: relative;
+}
+.chips-combobox--fluid {
+  display: block;
+}
+.chips-combobox__items {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+  list-style: none;
+  margin: 0;
+  margin-bottom: var(--spacing-100);
+  padding: 0;
+}
+.chips-combobox__items:empty {
+  display: none;
+}
+.chips-combobox__items li {
+  display: inline-block;
+}
+.chips-combobox .combobox__control > input {
+  background-color: inherit;
+  border: none;
+  border-radius: 0;
+  height: auto;
+  margin: 0 var(--spacing-100);
+  padding: var(--spacing-75) 0;
+  width: calc(100% - var(--spacing-200));
+}
+.chips-combobox .combobox__control > input:focus {
+  outline: none;
+}
+.chips-combobox .combobox {
+  -webkit-margin-start: calc(var(--spacing-100) * -1);
+          margin-inline-start: calc(var(--spacing-100) * -1);
+  width: calc(100% + var(--spacing-300));
+}
+.chips-combobox .combobox svg.icon {
+  pointer-events: none;
+  position: absolute;
+  right: var(--spacing-200);
+  top: calc(50% - var(--spacing-100));
+  transform: rotateX(0deg);
+  transition: transform 200ms linear;
+}
+.chips-combobox .combobox__listbox {
+  top: calc(100% + var(--spacing-150));
+}
+.chips-combobox .combobox__option[role^="option"] {
+  border-style: none;
+}
+.chips-combobox .combobox__option span {
+  pointer-events: none;
+}
+.chips-combobox:focus-within {
+  background-color: var(--color-background-primary);
+  border-color: var(--color-stroke-strong);
+}
+.chips-combobox .combobox--expanded svg.icon {
+  transform: rotateX(180deg);
+}
+/** Error State **/
+.chips-combobox--error {
+  border-color: var(--color-stroke-attention);
+}
+.chips-combobox--error:focus-within {
+  border-color: var(--color-stroke-attention);
+}
+/** Disabled State **/
+.chips-combobox[aria-disabled] {
+  border-color: var(--color-stroke-disabled);
+  pointer-events: none;
+}
+.chips-combobox[aria-disabled] .chip {
+  color: var(--color-foreground-disabled);
+}
+.chips-combobox[aria-disabled] svg.icon {
+  fill: var(--color-foreground-disabled);
+}
+.chips-combobox[aria-disabled] .combobox__control > input {
+  border: none;
+  color: var(--color-foreground-disabled);
+}
+.chips-combobox[aria-disabled] .combobox__control > input::placeholder {
+  color: var(--color-foreground-disabled);
+}
+[dir="rtl"] .chips-combobox .combobox__control > input {
+  padding: var(--spacing-75) 0;
+}

package/dist/combobox/combobox.css

@@ -210,7 +210,7 @@ span.combobox {
   width: 100%;
 }
 .combobox--large .combobox__control > input {
-  font-size: var(--font-size-18);
+  font-size: var(--font-size-medium);
   height: 48px;
 }
 .combobox__control > input[disabled] {

package/dist/cta-button/cta-button.css

@@ -105,25 +105,6 @@ a.cta-btn--large {
   font-size: var(--font-size-medium);
   min-height: 48px;
 }
-a.cta-btn--large-truncated {
-  border-radius: 24px;
-  display: inline-flex;
-  font-size: var(--font-size-medium);
-  height: 48px;
-}
-a.cta-btn--large-truncated,
-a.cta-btn--large-truncated span {
-  line-height: 1.4em;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-a.cta-btn--large-fixed-height {
-  border-radius: 24px;
-  display: inline-flex;
-  font-size: var(--font-size-medium);
-  height: 48px;
-}
 [dir="rtl"] a.cta-btn svg.icon--arrow-right-24 {
   transform: rotate(180deg);
 }