@ebay/skin 19.34.0 → 19.35.0

package/dist/accordion/accordion.css

@@ -3,7 +3,6 @@ ul.accordion {
     padding: 0;
     width: 100%;
 }
-
 ul.accordion ::marker {
     font-size: 0;
 }
@@ -60,7 +59,6 @@ ul.accordion--animated
     animation: chevron-bounce-open var(--motion-duration-medium-1)
         var(--motion-easing-standard) var(--motion-duration-short-1);
 }
-
 ul.accordion details svg.details__expand,
 ul.accordion details[open] svg.details__collapse {
     display: inline-block;

package/dist/alert-dialog/alert-dialog.css

@@ -5,9 +5,9 @@
 }
 .alert-dialog[role="alertdialog"] {
     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,34 +15,38 @@
 .alert-dialog[role="alertdialog"]:not([hidden]) {
     display: flex;
 }
+
 .alert-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;
 }
+
 .alert-dialog__title {
     font-size: var(--font-size-large-1);
     font-weight: var(--font-weight-600);
     line-height: 28px;
     margin: 0;
 }
+
 .alert-dialog__footer {
     text-align: right;
 }
+
 .alert-dialog__main {
     margin: var(--spacing-200) 0;
     min-height: var(--spacing-200);
@@ -53,6 +57,7 @@
 .alert-dialog__main > :last-child {
     margin-bottom: 0;
 }
+
 .alert-dialog--hide.alert-dialog--mask-fade,
 .alert-dialog--show.alert-dialog--mask-fade {
     transition: background-color 0.16s ease-out;
@@ -101,6 +106,7 @@
     transition: opacity var(--motion-duration-medium-2)
         var(--motion-easing-continuous) var(--motion-duration-short-3);
 }
+
 .alert-dialog--hide.alert-dialog--hide,
 .alert-dialog--hide.alert-dialog--show-init,
 .alert-dialog--show-init.alert-dialog--hide,
@@ -121,6 +127,7 @@
 .alert-dialog--show-init .alert-dialog__window--fade {
     opacity: 0;
 }
+
 .alert-dialog--hide-init.alert-dialog--hide-init,
 .alert-dialog--hide-init.alert-dialog--show,
 .alert-dialog--show.alert-dialog--hide-init,
@@ -141,6 +148,7 @@
 .alert-dialog--show .alert-dialog__window--fade {
     opacity: 1;
 }
+
 @media (prefers-reduced-motion) {
     .alert-dialog--hide.alert-dialog--mask-fade,
     .alert-dialog--hide.alert-dialog--mask-fade-slow {
@@ -175,10 +183,12 @@
 .alert-dialog--show .alert-dialog__window--animate {
     transform: scale(1);
 }
+
 .alert-dialog--hide .alert-dialog__window--animate,
 .alert-dialog--show-init .alert-dialog__window--animate {
     transform: scale(0.75);
 }
+
 @media (prefers-reduced-motion) {
     .alert-dialog--hide .alert-dialog__window--animate,
     .alert-dialog--hide-init .alert-dialog__window--animate,

package/dist/avatar/avatar.css

@@ -1,15 +1,15 @@
 .avatar {
-    align-items: center;
-    border-radius: 50%;
-    display: inline-flex;
     font-size: var(--font-size-large-2);
     font-weight: var(--font-weight-600);
     height: 48px;
-    justify-content: center;
     line-height: 48px;
+    width: 48px;
+    align-items: center;
+    border-radius: 50%;
+    display: inline-flex;
+    justify-content: center;
     overflow: hidden;
     position: relative;
-    width: 48px;
 }
 .avatar:after {
     background: rgba(0, 0, 0, 0.05);
@@ -25,50 +25,62 @@
     max-width: 100%;
     object-fit: contain;
 }
+
 .avatar > svg {
     height: 100%;
     width: 100%;
 }
+
 .avatar > img {
     height: 48px;
     object-fit: cover;
     width: 48px;
 }
+
 .avatar--fit > img {
     object-fit: contain;
 }
+
 .avatar--teal {
     background-color: #84b4fb;
     color: #002a69;
 }
+
 .avatar--light-teal {
     background-color: #44ccd5;
     color: #07465a;
 }
+
 .avatar--green {
     background-color: #4ce160;
     color: #1b561a;
 }
+
 .avatar--lime {
     background-color: #c1d737;
     color: #4e4e0c;
 }
+
 .avatar--yellow {
     background-color: #ffbd14;
     color: #553b06;
 }
+
 .avatar--orange {
     background-color: #ff8806;
     color: #562501;
 }
+
 .avatar--magenta {
     background-color: #cc9ef0;
     color: #3e135f;
 }
+
 .avatar--pink {
     background-color: #f79cc8;
     color: #4b112d;
 }
+
 .avatar--32,
 .avatar--32 > img {
     font-size: var(--font-size-medium);
@@ -76,6 +88,7 @@
     line-height: 32px;
     width: 32px;
 }
+
 .avatar--40,
 .avatar--40 > img {
     font-size: var(--font-size-large-1);
@@ -83,6 +96,7 @@
     line-height: 40px;
     width: 40px;
 }
+
 .avatar--48,
 .avatar--48 > img {
     font-size: var(--font-size-large-2);
@@ -90,6 +104,7 @@
     line-height: 48px;
     width: 48px;
 }
+
 .avatar--56,
 .avatar--56 > img {
     font-size: var(--font-size-giant-1);
@@ -97,6 +112,7 @@
     line-height: 56px;
     width: 56px;
 }
+
 .avatar--64,
 .avatar--64 > img {
     font-size: var(--font-size-giant-2);
@@ -104,6 +120,7 @@
     line-height: 64px;
     width: 64px;
 }
+
 .avatar--96,
 .avatar--96 > img {
     font-size: var(--font-size-giant-3);
@@ -111,6 +128,7 @@
     line-height: 96px;
     width: 96px;
 }
+
 .avatar--128,
 .avatar--128 > img {
     font-size: var(--font-size-giant-4);

package/dist/breadcrumbs/breadcrumbs.css

@@ -12,6 +12,7 @@ nav.breadcrumbs {
     scrollbar-width: none;
     white-space: nowrap;
 }
+
 nav.breadcrumbs > ul {
     display: inline-block;
     margin: 0;
@@ -24,20 +25,25 @@ nav.breadcrumbs > ul > li {
     display: inline-flex;
     vertical-align: middle;
 }
+
 nav.breadcrumbs > ul > li[hidden] {
     display: none;
 }
+
 nav.breadcrumbs > ul > li svg {
     margin-left: 3px;
     margin-right: 3px;
 }
+
 nav.breadcrumbs > ul > li svg.icon--12 {
     margin-left: var(--spacing-75);
     margin-right: var(--spacing-75);
 }
+
 nav.breadcrumbs > ul > li > a {
     text-decoration: none;
 }
+
 nav.breadcrumbs > ul > li > button {
     background: none;
     border: none;
@@ -46,6 +52,7 @@ nav.breadcrumbs > ul > li > button {
     margin: 0;
     padding: 0;
 }
+
 nav.breadcrumbs > ul > li > a,
 nav.breadcrumbs > ul > li > button {
     color: inherit;
@@ -68,6 +75,7 @@ nav.breadcrumbs > ul > li > button[aria-current] {
     );
     text-decoration: none;
 }
+
 nav.breadcrumbs > ul > li > a:focus:not(:focus-visible),
 nav.breadcrumbs > ul > li > button:focus:not(:focus-visible) {
     outline: none;
@@ -79,6 +87,7 @@ nav.breadcrumbs.breadcrumb--overflow {
     overflow-x: unset;
     scrollbar-width: unset;
 }
+
 nav.breadcrumbs .fake-menu-button__button,
 nav.breadcrumbs .menu-button__button {
     background-color: var(
@@ -91,6 +100,7 @@ nav.breadcrumbs .menu-button__button {
     outline-offset: 1px;
     width: var(--spacing-300);
 }
+
 nav.breadcrumbs .fake-menu-button__button svg.icon,
 nav.breadcrumbs .menu-button__button svg.icon {
     fill: var(
@@ -98,13 +108,16 @@ nav.breadcrumbs .menu-button__button svg.icon {
         var(--color-foreground-secondary)
     );
 }
+
 nav.breadcrumbs .fake-menu-button__menu,
 nav.breadcrumbs .menu-button__menu {
     font-size: var(--font-size-body);
 }
+
 [dir="rtl"] nav.breadcrumbs svg.icon--12 {
     transform: rotate(180deg);
 }
+
 @media (min-width: 512px) {
     nav.breadcrumbs {
         margin: 16px 0;