@ebay/skin 19.33.0 → 19.35.0

package/dist/carousel/carousel.css

@@ -2,6 +2,7 @@
     --state-layer-neutral-on-strong: rgb(var(--color-neutral-900-rgb), 0);
     --state-layer-neutral: rgb(var(--color-neutral-900-rgb), 0);
 }
+
 .carousel {
     position: relative;
 }
@@ -32,10 +33,6 @@
     border-radius: 50%;
     bottom: 16px;
     box-sizing: border-box;
-    color: var(
-        --carousel-playback-foreground-color,
-        var(--color-foreground-on-inverse)
-    );
     height: 40px;
     margin-bottom: 19px;
     margin-right: 19px;
@@ -45,6 +42,10 @@
     text-align: center;
     width: 40px;
     z-index: 2;
+    color: var(
+        --carousel-playback-foreground-color,
+        var(--color-foreground-on-inverse)
+    );
 }
 .carousel__playback svg {
     opacity: 0.75;
@@ -52,6 +53,7 @@
 .carousel__playback .icon--play {
     padding-left: 1px;
 }
+
 .carousel__list--image-treatment > li {
     align-items: center;
     border-radius: 8px;
@@ -74,6 +76,7 @@
     max-width: 100%;
     object-fit: contain;
 }
+
 .carousel__list--image-treatment-large > li {
     align-items: center;
     border-radius: 16px;
@@ -96,9 +99,11 @@
     max-width: 100%;
     object-fit: contain;
 }
+
 div.carousel {
     margin: 16px 0;
 }
+
 .carousel__control {
     background-color: var(
         --carousel-paddle-background-color,
@@ -129,10 +134,6 @@ div.carousel {
 .carousel__control {
     align-items: center;
     border: 1px solid;
-    border-color: var(
-        --carousel-paddle-border-color,
-        var(--color-border-subtle)
-    );
     border-radius: 16px;
     box-shadow:
         0 2px 2px 0 rgba(0, 0, 0, 0.24),
@@ -149,14 +150,18 @@ div.carousel {
     transition: opacity 0.45s ease-in-out;
     width: 32px;
     z-index: 1;
+    border-color: var(
+        --carousel-paddle-border-color,
+        var(--color-border-subtle)
+    );
 }
 .carousel__control--prev {
-    left: calc(var(--spacing-200) * -1);
+    left: calc(-1 * var(--spacing-200));
     margin-inline-end: 1px;
 }
 .carousel__control--next {
     margin-inline-start: 1px;
-    right: calc(var(--spacing-200) * -1);
+    right: calc(-1 * var(--spacing-200));
 }
 .carousel__control svg {
     color: var(--color-foreground-primary);
@@ -191,13 +196,16 @@ div.carousel {
 .carousel__control:hover svg {
     color: var(--color-foreground-primary);
 }
+
 .carousel__playback:focus:not(:focus-visible) {
     outline: none;
 }
+
 span.carousel,
 span.carousel__container {
     display: inline-block;
 }
+
 .carousel__viewport--mask {
     -webkit-mask-image: linear-gradient(
         to right,
@@ -210,12 +218,13 @@ span.carousel__container {
         rgba(0, 0, 0, 0) 100%
     );
 }
+
 [dir="rtl"] .carousel__control--prev {
     left: unset;
-    right: calc(var(--spacing-200) * -1);
+    right: calc(-1 * var(--spacing-200));
 }
 [dir="rtl"] .carousel__control--next {
-    left: calc(var(--spacing-200) * -1);
+    left: calc(-1 * var(--spacing-200));
     right: unset;
 }
 [dir="rtl"] .carousel__control .icon--12 {
@@ -291,12 +300,15 @@ span.carousel__container {
 .carousel.carousel--hidden-scrollbar:not(.carousel__autoplay) {
     overflow: hidden;
 }
+
 .carousel--hidden-scrollbar .carousel__container {
     margin-bottom: -80px;
 }
+
 .carousel--hidden-scrollbar .carousel__container .carousel__control {
     margin-top: -40px;
 }
+
 .carousel--hidden-scrollbar .carousel__container .carousel__list {
     padding-bottom: 80px;
 }

package/dist/ccd/ccd.css

@@ -11,10 +11,12 @@
         sans-serif;
     gap: 8px;
 }
+
 .ccd__charger-icon {
     height: 57px;
     width: 42px;
 }
+
 .ccd__description-figure {
     align-items: center;
     display: flex;
@@ -22,10 +24,12 @@
     justify-content: center;
     width: 39px;
 }
+
 .ccd__top-icon {
     height: 18px;
     width: 27px;
 }
+
 .ccd__body {
     align-items: center;
     border: 1px solid var(--color-foreground-primary);

package/dist/checkbox/checkbox.css

@@ -3,33 +3,40 @@
     position: relative;
     vertical-align: text-bottom;
 }
+
 .checkbox__control[type="checkbox"] {
     height: 18px;
     min-width: 18px;
     width: 18px;
 }
+
 .checkbox--large .checkbox__control[type="checkbox"] {
     height: 24px;
     min-width: 24px;
     width: 24px;
 }
+
 span.checkbox__icon {
     display: inline-flex;
     height: 18px;
     outline-offset: 1px;
 }
+
 .checkbox--large span.checkbox__icon {
     height: 24px;
 }
 span.checkbox__icon[hidden] {
     display: inline-flex;
 }
+
 svg.checkbox__checked {
     color: var(--checkbox-checked-color, var(--color-foreground-primary));
 }
+
 svg.checkbox__unchecked {
     color: var(--checkbox-unchecked-color, var(--color-foreground-primary));
 }
+
 input.checkbox__control[type="checkbox"] {
     font-size: 100%;
     margin: 0;
@@ -38,25 +45,29 @@ input.checkbox__control[type="checkbox"] {
     position: absolute;
     z-index: 1;
 }
+
 .checkbox svg {
     display: inline-block;
     fill: currentColor;
-    height: 18px;
     pointer-events: none;
     stroke: currentColor;
     stroke-width: 0;
     vertical-align: middle;
+    height: 18px;
     width: 18px;
 }
+
 .checkbox--large svg {
     height: 24px;
     width: 24px;
 }
+
 input.checkbox__control[type="checkbox"]
     + span.checkbox__icon
     svg.checkbox__checked {
     display: none;
 }
+
 input.checkbox__control[type="checkbox"]
     + span.checkbox__icon
     svg.checkbox__unchecked,
@@ -65,11 +76,13 @@ input.checkbox__control[type="checkbox"]:checked
     svg.checkbox__checked {
     display: inline-block;
 }
+
 input.checkbox__control[type="checkbox"]:checked
     + span.checkbox__icon
     svg.checkbox__unchecked {
     display: none;
 }
+
 input.checkbox__control[type="checkbox"][disabled] + span.checkbox__icon {
     opacity: 1;
 }
@@ -78,9 +91,10 @@ input.checkbox__control[type="checkbox"][disabled] + span.checkbox__icon svg {
 }
 input.checkbox__control[type="checkbox"]:focus + span.checkbox__icon {
     outline: 1px auto;
-    outline-color: var(--checkbox-outline, var(--color-foreground-secondary));
     outline-offset: 2px;
+    outline-color: var(--checkbox-outline, var(--color-foreground-secondary));
 }
+
 input.checkbox__control[type="checkbox"]:focus:not(:focus-visible)
     + span.checkbox__icon {
     outline: none;

package/dist/chip/chip.css

@@ -1,9 +1,6 @@
 .chip {
     align-items: center;
-    background-color: var(--color-background-strong);
-    border-radius: var(--border-radius-50);
     box-sizing: border-box;
-    color: var(--color-foreground-on-strong);
     display: inline-flex;
     font-size: var(--font-size-body);
     gap: var(--spacing-75);
@@ -14,13 +11,18 @@
     padding: 0 var(--spacing-150);
     text-decoration: none;
     vertical-align: bottom;
+    background-color: var(--color-background-strong);
+    border-radius: var(--border-radius-50);
+    color: var(--color-foreground-on-strong);
 }
+
 .chip__text {
     overflow: hidden;
     padding: var(--spacing-75) 0;
     text-overflow: ellipsis;
     white-space: nowrap;
 }
+
 .chip button.chip__button {
     align-items: center;
     background-color: initial;
@@ -37,6 +39,7 @@
     padding: 0;
     width: var(--spacing-300);
 }
+
 .chip button.chip__button:focus-visible {
     background-color: var(--state-layer-focus);
     outline-color: var(--color-foreground-on-strong);
@@ -44,6 +47,7 @@
     outline-style: solid;
     outline-width: 2px;
 }
+
 .chip button.chip__button:hover {
     background-color: var(--state-layer-hover);
 }

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

@@ -7,9 +7,11 @@
     padding-inline: var(--spacing-100) var(--spacing-200);
     position: relative;
 }
+
 .chips-combobox--fluid {
     display: block;
 }
+
 .chips-combobox__items {
     display: flex;
     flex-wrap: wrap;
@@ -19,12 +21,15 @@
     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;
@@ -34,13 +39,16 @@
     padding: var(--spacing-75) 0;
     width: calc(100% - var(--spacing-200));
 }
+
 .chips-combobox .combobox__control > input:focus {
     outline: none;
 }
+
 .chips-combobox .combobox {
-    margin-inline-start: calc(var(--spacing-100) * -1);
+    margin-inline-start: calc(-1 * var(--spacing-100));
     width: calc(100% + var(--spacing-300));
 }
+
 .chips-combobox .combobox svg.icon {
     pointer-events: none;
     position: absolute;
@@ -49,15 +57,19 @@
     transform: rotateX(0deg);
     transition: transform 0.2s linear;
 }
+
 .chips-combobox .combobox__listbox--set-position {
     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-border-strong);
@@ -65,6 +77,7 @@
 .chips-combobox .combobox--expanded svg.icon {
     transform: rotateX(180deg);
 }
+
 .chips-combobox--error,
 .chips-combobox--error:focus-within {
     border-color: var(--color-border-attention);
@@ -73,16 +86,20 @@
     border-color: var(--color-border-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);
 }

package/dist/combobox/combobox.css

@@ -3,24 +3,29 @@
     --state-layer-neutral-on-strong: rgb(var(--color-neutral-900-rgb), 0);
     --state-layer-neutral: rgb(var(--color-neutral-900-rgb), 0);
 }
+
 .combobox {
     box-sizing: border-box;
     line-height: normal;
     position: relative;
 }
+
 span.combobox {
     display: inline-block;
     vertical-align: bottom;
 }
+
 .combobox__value {
-    flex: 1 0 auto;
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
+    flex: 1 0 auto;
 }
+
 .combobox__options--fix-width[role="listbox"] {
     width: 100%;
 }
+
 .combobox__listbox {
     background-color: var(--color-background-elevated);
     border-radius: var(--border-radius-50);
@@ -43,6 +48,7 @@ span.combobox {
 .combobox__listbox--fixed {
     position: fixed;
 }
+
 .combobox__listbox--reverse,
 [dir="rtl"] .combobox__listbox {
     left: unset;
@@ -52,18 +58,20 @@ span.combobox {
     left: 0;
     right: unset;
 }
+
 .combobox__control > button,
 .combobox__control > svg.icon {
     margin-inline-start: 8px;
 }
+
 .combobox__option[role^="option"] {
-    background-color: initial;
+    cursor: default;
     border-color: var(--color-background-primary);
+    color: var(--color-foreground-primary);
+    background-color: initial;
     border-style: solid;
     border-width: 1px;
     box-sizing: border-box;
-    color: var(--color-foreground-primary);
-    cursor: default;
     display: inline-grid;
     font-family: inherit;
     grid-template-columns: auto auto;
@@ -114,11 +122,11 @@ span.combobox {
 }
 .combobox__option[role^="option"]:disabled,
 .combobox__option[role^="option"][aria-disabled="true"] {
-    background-color: unset;
     color: var(
         --listbox-option-disabled-foreground-color,
         var(--color-foreground-disabled)
     );
+    background-color: unset;
     font-weight: unset;
 }
 .combobox__option[role^="option"]:first-child {
@@ -152,21 +160,23 @@ span.combobox {
     stroke: currentColor;
     stroke-width: 0;
 }
+
 .combobox__option--active[role^="option"] {
     overflow: hidden;
     position: relative;
 }
 .combobox__option--active[role^="option"]:after {
     background-color: var(--color-state-layer-neutral);
-    background-color: var(--color-state-layer-pressed);
     content: "";
     inset: 0;
     pointer-events: none;
     position: absolute;
+    background-color: var(--color-state-layer-pressed);
 }
 .combobox__option--active[role^="option"] svg.icon {
     opacity: 1;
 }
+
 .combobox__control button.icon-btn {
     height: 38px;
     padding: 0;
@@ -175,33 +185,30 @@ span.combobox {
     top: 1px;
     width: 38px;
 }
+
 .combobox__control button.icon-btn svg {
     inset: auto 0;
     margin: 0;
 }
+
 .combobox--expanded .combobox__listbox {
     display: block;
 }
+
 .combobox--expanded svg.icon--12 {
     transform: rotate(180deg);
 }
+
 .combobox__control > svg.icon--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));
 }
+
 .combobox__control > input {
     appearance: none;
-    background-color: var(
-        --combobox-textbox-background-color,
-        var(--color-background-secondary)
-    );
-    border-color: var(
-        --combobox-textbox-border-color,
-        var(--color-border-medium)
-    );
     border-radius: var(
         --combobox-textbox-border-radius,
         var(--border-radius-50)
@@ -215,6 +222,14 @@ span.combobox {
     margin-left: 0;
     margin-right: 0;
     padding: 0 32px 0 16px;
+    background-color: var(
+        --combobox-textbox-background-color,
+        var(--color-background-secondary)
+    );
+    border-color: var(
+        --combobox-textbox-border-color,
+        var(--color-border-medium)
+    );
 }
 .combobox__control > input,
 .combobox__control > input[readonly] {
@@ -263,11 +278,13 @@ span.combobox {
 .combobox__control > input::-ms-clear {
     display: none;
 }
+
 .combobox__control--borderless > input {
     background-color: initial;
     border-color: transparent;
     padding-left: 0;
 }
+
 .combobox__control > input:focus {
     background-color: var(
         --combobox-textbox-focus-background-color,
@@ -278,6 +295,7 @@ span.combobox {
         var(--color-foreground-primary)
     );
 }
+
 .combobox__control--borderless > input:focus {
     border-color: transparent;
     outline: none;
@@ -286,16 +304,19 @@ span.combobox {
 .combobox--fluid .combobox__control > input {
     width: 100%;
 }
+
 .combobox--large .combobox__control > input {
     font-size: var(--font-size-medium);
     height: 48px;
 }
+
 .combobox__control > input[disabled] {
     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,
@@ -303,6 +324,7 @@ span.combobox {
     );
     font-weight: 700;
 }
+
 @media (-ms-high-contrast: active), all and (-ms-high-contrast: none) {
     .combobox__value,
     ::-ms-backdrop {

package/dist/confirm-dialog/confirm-dialog.css

@@ -5,9 +5,9 @@
 }
 .confirm-dialog[role="dialog"] {
     align-items: flex-start;
+    justify-content: center;
     background-color: var(--dialog-scrim-color-show);
     inset: 0;
-    justify-content: center;
     position: fixed;
     will-change: background-color;
     z-index: 100000;
@@ -15,31 +15,34 @@
 .confirm-dialog[role="dialog"]:not([hidden]) {
     display: flex;
 }
+
 .confirm-dialog__window {
     background-color: var(
         --dialog-window-background-color,
         var(--color-background-primary)
     );
-    border-radius: var(--lightbox-border-radius, var(--border-radius-100));
     display: flex;
     flex: 1 0 auto;
     flex-direction: column;
+    min-height: 55px;
+    will-change: opacity, transform;
+    border-radius: var(--lightbox-border-radius, var(--border-radius-100));
     margin: auto;
-    margin-left: var(--spacing-200);
-    margin-right: var(--spacing-200);
     max-height: 90%;
     max-width: calc(100% - 32px);
-    min-height: 55px;
     min-width: 208px;
+    margin-left: var(--spacing-200);
+    margin-right: var(--spacing-200);
     padding: var(--spacing-200);
-    will-change: opacity, transform;
 }
+
 .confirm-dialog__title {
     font-size: var(--font-size-large-1);
     font-weight: var(--font-weight-600);
     line-height: 28px;
     margin: 0;
 }
+
 .confirm-dialog__main {
     margin: var(--spacing-200) 0;
     min-height: var(--spacing-200);
@@ -50,9 +53,11 @@
 .confirm-dialog__main > :last-child {
     margin-bottom: 0;
 }
+
 .confirm-dialog__footer {
     text-align: right;
 }
+
 a.confirm-dialog__confirm,
 button.confirm-dialog__confirm {
     margin-left: var(--spacing-100);
@@ -93,6 +98,7 @@ button.confirm-dialog__confirm {
     transition: opacity var(--motion-duration-medium-2)
         var(--motion-easing-continuous) var(--motion-duration-short-3);
 }
+
 .confirm-dialog--hide.confirm-dialog--hide,
 .confirm-dialog--hide.confirm-dialog--show-init,
 .confirm-dialog--show-init.confirm-dialog--hide,
@@ -113,6 +119,7 @@ button.confirm-dialog__confirm {
 .confirm-dialog--show-init .confirm-dialog__window--fade {
     opacity: 0;
 }
+
 .confirm-dialog--hide-init.confirm-dialog--hide-init,
 .confirm-dialog--hide-init.confirm-dialog--show,
 .confirm-dialog--show.confirm-dialog--hide-init,
@@ -133,6 +140,7 @@ button.confirm-dialog__confirm {
 .confirm-dialog--show .confirm-dialog__window--fade {
     opacity: 1;
 }
+
 @media (prefers-reduced-motion) {
     .confirm-dialog--hide.confirm-dialog--mask-fade,
     .confirm-dialog--hide.confirm-dialog--mask-fade-slow {
@@ -167,10 +175,12 @@ button.confirm-dialog__confirm {
 .confirm-dialog--show .confirm-dialog__window--animate {
     transform: scale(1);
 }
+
 .confirm-dialog--hide .confirm-dialog__window--animate,
 .confirm-dialog--show-init .confirm-dialog__window--animate {
     transform: scale(0.75);
 }
+
 @media (prefers-reduced-motion) {
     .confirm-dialog--hide .confirm-dialog__window--animate,
     .confirm-dialog--hide-init .confirm-dialog__window--animate,