@ebay/skin 19.34.0 → 19.35.0

package/dist/pagination/pagination.css

@@ -2,30 +2,33 @@
     --state-layer-neutral-on-strong: rgb(var(--color-neutral-900-rgb), 0);
     --state-layer-neutral: rgb(var(--color-neutral-900-rgb), 0);
 }
+
 nav.pagination {
     align-items: center;
+    display: inline-flex;
+    justify-content: center;
     color: var(
         --pagination-item-foreground-color,
         var(--color-foreground-secondary)
     );
-    display: inline-flex;
     font-family: inherit;
     font-size: 1rem;
-    justify-content: center;
     margin: var(--spacing-100) 0;
     max-width: 100%;
 }
+
 nav.pagination a,
 nav.pagination button {
     color: inherit;
     font-size: 1em;
 }
+
 ol.pagination__items {
     align-items: center;
-    box-sizing: border-box;
     display: inline-flex;
-    height: 44px;
     justify-content: center;
+    box-sizing: border-box;
+    height: 44px;
     list-style-type: none;
     margin: 0;
     padding: 0;
@@ -35,6 +38,7 @@ ol.pagination__items li:not([hidden]) {
     display: flex;
     justify-content: center;
 }
+
 a.pagination__next,
 a.pagination__previous,
 button.pagination__next,
@@ -43,31 +47,37 @@ button.pagination__previous {
     display: inline-flex;
     justify-content: center;
 }
+
 a.pagination__next,
 button.pagination__next {
     margin-inline-start: var(--spacing-100);
 }
+
 a.pagination__previous,
 button.pagination__previous {
     margin-inline-end: var(--spacing-100);
 }
+
 .pagination__item {
     align-items: center;
-    box-sizing: border-box;
     display: inline-flex;
+    justify-content: center;
+    box-sizing: border-box;
     font-weight: var(--font-weight-400);
     height: 44px;
-    justify-content: center;
     width: 44px;
 }
+
 button.pagination__item {
     background: none;
     border: none;
     font-family: inherit;
 }
+
 a.pagination__item {
     text-decoration: none;
 }
+
 a.pagination__item,
 button.pagination__item {
     position: relative;
@@ -122,6 +132,7 @@ a.pagination__item:focus:not(:focus-visible),
 button.pagination__item:focus:not(:focus-visible) {
     outline: none;
 }
+
 span.pagination__item button.icon-btn--transparent {
     overflow: hidden;
     position: relative;
@@ -157,20 +168,25 @@ span.pagination__item
 span.pagination__item button.icon-btn--transparent[href]:active:after {
     background-color: var(--color-state-layer-pressed);
 }
+
 nav.pagination--fluid {
     width: 100%;
 }
+
 nav.pagination--fluid ol.pagination__items {
     flex-grow: 1;
     max-width: none;
 }
+
 nav.pagination--fluid ol.pagination__items li {
     flex: 1 0 var(--spacing-600);
 }
+
 [dir="rtl"] nav.pagination svg.icon--arrow-left-16,
 [dir="rtl"] nav.pagination svg.icon--arrow-right-16 {
     transform: rotate(180deg);
 }
+
 @media (min-width: 768px) {
     nav.pagination {
         margin: var(--spacing-200) 0;

package/dist/panel-dialog/panel-dialog.css

@@ -4,10 +4,10 @@
     --dialog-lightbox-max-width: 616px;
 }
 .panel-dialog[role="dialog"] {
-    background-color: var(--dialog-scrim-color-show);
     flex-direction: column;
-    inset: 0;
     overflow: hidden;
+    background-color: var(--dialog-scrim-color-show);
+    inset: 0;
     position: fixed;
     will-change: background-color;
     z-index: 100000;
@@ -15,24 +15,27 @@
 .panel-dialog[role="dialog"]:not([hidden]) {
     display: flex;
 }
+
 .panel-dialog__window {
     background-color: var(
         --dialog-window-background-color,
         var(--color-background-primary)
     );
-    border-right: 1px solid rgba(153, 153, 153, 0.18);
     display: flex;
     flex: 1 0 auto;
     flex-direction: column;
     min-height: 55px;
+    will-change: opacity, transform;
+    border-right: 1px solid rgba(153, 153, 153, 0.18);
     overflow-y: auto;
     width: 100%;
-    will-change: opacity, transform;
 }
+
 .panel-dialog__window--end {
     align-self: flex-end;
     border-left: 1px solid rgba(153, 153, 153, 0.18);
 }
+
 .panel-dialog__header {
     display: flex;
     flex-shrink: 0;
@@ -53,16 +56,18 @@
 .panel-dialog__header > :last-child:not(:only-child) {
     margin-inline-start: var(--spacing-200);
 }
+
 .panel-dialog__header .fake-link {
     align-self: flex-start;
     outline-offset: 4px;
     text-decoration: none;
 }
+
 .panel-dialog__main {
-    box-sizing: border-box;
-    flex: 1 1 auto;
     height: 1px;
     overflow-y: auto;
+    box-sizing: border-box;
+    flex: 1 1 auto;
     padding: var(--spacing-200);
     position: relative;
 }
@@ -72,6 +77,7 @@
 .panel-dialog__main > :last-child {
     margin-bottom: 0;
 }
+
 .panel-dialog__footer {
     display: flex;
     flex-direction: column;
@@ -93,12 +99,15 @@ button.icon-btn.panel-dialog__prev {
     width: 32px;
     z-index: 1;
 }
+
 button.icon-btn.panel-dialog__prev {
     margin-inline-end: var(--spacing-200);
 }
+
 .panel-dialog__title:not(:first-child) {
     margin-left: var(--spacing-200);
 }
+
 .panel-dialog--hide.panel-dialog--mask-fade,
 .panel-dialog--show.panel-dialog--mask-fade {
     transition: background-color 0.16s ease-out;
@@ -111,6 +120,7 @@ button.icon-btn.panel-dialog__prev {
 .panel-dialog--show .panel-dialog__window--slide {
     transition: transform 0.32s ease-out;
 }
+
 .panel-dialog--hide.panel-dialog--hide,
 .panel-dialog--hide.panel-dialog--show-init,
 .panel-dialog--show-init.panel-dialog--hide,
@@ -131,15 +141,18 @@ button.icon-btn.panel-dialog__prev {
 .panel-dialog--show-init .panel-dialog__window--slide-right {
     transform: translateX(100%);
 }
+
 .panel-dialog--hide .panel-dialog__window--slide,
 .panel-dialog--show-init .panel-dialog__window--slide {
     transform: translateX(-100%);
 }
+
 .panel-dialog--hide .panel-dialog__window--end.panel-dialog__window--slide,
 .panel-dialog--show-init
     .panel-dialog__window--end.panel-dialog__window--slide {
     transform: translateX(100%);
 }
+
 .panel-dialog--hide-init.panel-dialog--hide-init,
 .panel-dialog--hide-init.panel-dialog--show,
 .panel-dialog--show.panel-dialog--hide-init,
@@ -156,6 +169,7 @@ button.icon-btn.panel-dialog__prev {
 .panel-dialog--show .panel-dialog__window--slide {
     transform: translateX(0);
 }
+
 [dir="rtl"] button.icon-btn.panel-dialog__prev .icon {
     transform: rotate(180deg);
 }

package/dist/phone-input/phone-input.css

@@ -2,26 +2,31 @@
 .phone-input .listbox-button {
     display: inline-flex;
 }
+
 .phone-input button.btn {
     border-radius: 8px 0 0 8px;
     border-right-style: none;
     min-width: 64px;
     padding-inline: var(--spacing-200) var(--spacing-100);
 }
+
 .phone-input button.btn:focus-visible {
     border-right-style: solid;
     box-shadow: 0 0 0 1px var(--color-border-strong);
     outline: none;
     z-index: 1;
 }
+
 .phone-input button.btn svg.icon:last-child {
     margin-inline-start: var(--spacing-50);
 }
+
 .phone-input .listbox-button span.fflag,
 .phone-input .listbox-button svg.flag {
     height: 18px;
     width: 24px;
 }
+
 .phone-input .listbox-button__value,
 .phone-input .listbox__value {
     display: inline-flex;
@@ -38,32 +43,39 @@
 .phone-input .listbox__value span:last-child {
     color: var(--color-foreground-secondary);
 }
+
 .phone-input .listbox-button__value span:first-of-type,
 .phone-input .listbox__value span:first-of-type {
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
 }
+
 .phone-input .textbox {
     border-radius: 0 var(--border-radius-50) var(--border-radius-50) 0;
 }
+
 .phone-input--large {
     height: 48px;
 }
+
 .phone-input--fluid,
 .phone-input--fluid .textbox {
     width: 100%;
 }
+
 .phone-input--readonly .listbox-button button[aria-disabled="true"],
 .phone-input--readonly .listbox-button button[disabled] {
     border-color: var(--textbox-border-color, var(--color-border-medium));
 }
+
 .phone-input--readonly .textbox span:first-child {
     color: var(
         --textbox-disabled-foreground-color,
         var(--color-foreground-secondary)
     );
 }
+
 .phone-input.phone-input--readonly .textbox.textbox {
     background-color: var(
         --textbox-background-color,
@@ -73,25 +85,30 @@
     border-style: solid;
     border-width: 1px;
 }
+
 .phone-input--readonly input.textbox__control[readonly] {
     color: var(--textbox-foreground-color, var(--color-foreground-secondary));
 }
+
 .phone-input--disabled span.fflag,
 .phone-input--disabled svg.flag {
     filter: var(--color-media-disabled-filter);
 }
+
 .phone-input--disabled .textbox {
     border-color: var(
         --textbox-disabled-border-color,
         var(--color-background-disabled)
     );
 }
+
 .phone-input--disabled .textbox span:first-child {
     color: var(
         --textbox-disabled-foreground-color,
         var(--color-foreground-disabled)
     );
 }
+
 .phone-input.phone-input--error .textbox.textbox {
     border-color: var(
         --textbox-invalid-foreground-color,
@@ -102,14 +119,17 @@
 .phone-input .floating-label .floating-label__label {
     z-index: 2;
 }
+
 .phone-input .floating-label .textbox > span:first-child {
     padding-bottom: 2px;
     padding-top: 18px;
 }
+
 .phone-input .floating-label--large .textbox > span:first-child {
     padding-bottom: 5px;
     padding-top: 23px;
 }
+
 @media screen and (min-width: 320px) {
     .phone-input .listbox-button__value span:first-of-type,
     .phone-input .listbox__value span:first-of-type {

package/dist/progress-bar/progress-bar.css

@@ -1,9 +1,10 @@
 .progress-bar {
     border: none;
-    color: var(--progress-bar-foreground-color, var(--color-foreground-accent));
     height: 4px;
     margin: var(--spacing-100) 0;
+    color: var(--progress-bar-foreground-color, var(--color-foreground-accent));
 }
+
 .progress-bar::-webkit-progress-bar {
     background-color: var(
         --progress-bar-background-color,
@@ -11,6 +12,7 @@
     );
     border-radius: 8px;
 }
+
 .progress-bar::-webkit-progress-value {
     background-color: var(
         --progress-bar-foreground-color,
@@ -20,6 +22,7 @@
     -webkit-transition: width 0.45s ease-in-out;
     transition: width 0.45s ease-in-out;
 }
+
 .progress-bar::-moz-progress-bar {
     background-color: var(
         --progress-bar-foreground-color,
@@ -27,9 +30,11 @@
     );
     border-radius: 8px;
 }
+
 .progress-bar--fluid {
     width: 100%;
 }
+
 @media (min-width: 512px) {
     .progress-bar {
         margin: var(--spacing-200) 0;

package/dist/progress-bar-expressive/progress-bar-expressive.css

@@ -24,6 +24,7 @@
     --progress-bar-expressive-message-animatein-duration: 833ms;
     --progress-bar-expressive-message-animateout-duration: 400ms;
 }
+
 .progress-bar-expressive {
     align-items: stretch;
     display: grid;
@@ -34,9 +35,11 @@
     row-gap: var(--spacing-300);
     width: 100%;
 }
+
 .progress-bar-expressive--loaded {
     display: none;
 }
+
 .progress-bar-expressive__messages {
     color: var(--color-foreground-primary);
     font-size: var(--font-size-large-1);
@@ -47,11 +50,13 @@
     position: relative;
     text-align: center;
 }
+
 .progress-bar-expressive__messages--medium {
     font-size: var(--font-size-medium);
     font-weight: var(--font-weight-600);
     line-height: var(--spacing-300);
 }
+
 .progress-bar-expressive__message {
     inset: auto 0 0;
     position: absolute;
@@ -62,26 +67,31 @@
 .progress-bar-expressive__message[aria-hidden="true"] {
     opacity: 0;
 }
+
 .progress-bar-expressive__message--in {
     animation: progress-bar-expressive-message-animatein
         var(--progress-bar-expressive-message-animatein-duration)
         cubic-bezier(0.3, 0, 0, 1) both;
 }
+
 .progress-bar-expressive__message--out {
     animation: progress-bar-expressive-message-animateout
         var(--progress-bar-expressive-message-animateout-duration)
         cubic-bezier(0.3, 0, 0, 1) both;
 }
+
 .progress-bar-expressive__progress[role="progressbar"] {
     border-radius: var(--progress-bar-expressive-line-border-radius);
     margin: 0 var(--spacing-200);
     overflow: hidden;
 }
+
 .progress-bar-expressive__lines {
     display: flex;
     overflow: visible;
-    width: calc(100% - var(--progress-bar-expressive-line-gap) * 3);
+    width: calc(100% - 3 * var(--progress-bar-expressive-line-gap));
 }
+
 .progress-bar-expressive__line {
     animation:
         progress-bar-expressive-line-reorder
@@ -99,144 +109,158 @@
 .progress-bar-expressive__line:nth-child(4n + 1) {
     background-color: var(--progress-bar-expressive-color-4);
 }
+
 .progress-bar-expressive__line:nth-child(4n + 2) {
     background-color: var(--progress-bar-expressive-color-3);
 }
+
 .progress-bar-expressive__line:nth-child(4n + 3) {
     background-color: var(--progress-bar-expressive-color-2);
 }
+
 .progress-bar-expressive__line:nth-child(4n + 4) {
     background-color: var(--progress-bar-expressive-color-1);
 }
 .progress-bar-expressive__line:first-child {
     animation-delay: calc(
-        (
+        -1 *
+            (
                 var(--progress-bar-expressive-line-scale-duration) -
                     var(--progress-bar-expressive-line-scale-duration) /
                     var(--progress-bar-expressive-line-count)
-            ) *
-            -1
+            )
     );
     width: var(--progress-bar-expressive-line-width-a1);
 }
+
 .progress-bar-expressive__line:nth-child(2) {
     animation-delay: calc(
-        (
-                var(--progress-bar-expressive-line-scale-duration) -
+        -1 *
+            (
+                var(--progress-bar-expressive-line-scale-duration) - 2 *
                     var(--progress-bar-expressive-line-scale-duration) /
-                    var(--progress-bar-expressive-line-count) * 2
-            ) *
-            -1
+                    var(--progress-bar-expressive-line-count)
+            )
     );
     width: var(--progress-bar-expressive-line-width-a2);
 }
+
 .progress-bar-expressive__line:nth-child(3) {
     animation-delay: calc(
-        (
-                var(--progress-bar-expressive-line-scale-duration) -
+        -1 *
+            (
+                var(--progress-bar-expressive-line-scale-duration) - 3 *
                     var(--progress-bar-expressive-line-scale-duration) /
-                    var(--progress-bar-expressive-line-count) * 3
-            ) *
-            -1
+                    var(--progress-bar-expressive-line-count)
+            )
     );
     width: var(--progress-bar-expressive-line-width-a3);
 }
+
 .progress-bar-expressive__line:nth-child(4) {
     animation-delay: calc(
-        (
-                var(--progress-bar-expressive-line-scale-duration) -
+        -1 *
+            (
+                var(--progress-bar-expressive-line-scale-duration) - 4 *
                     var(--progress-bar-expressive-line-scale-duration) /
-                    var(--progress-bar-expressive-line-count) * 4
-            ) *
-            -1
+                    var(--progress-bar-expressive-line-count)
+            )
     );
     width: var(--progress-bar-expressive-line-width-a4);
 }
+
 .progress-bar-expressive__line:nth-child(5) {
     animation-delay: calc(
-        (
-                var(--progress-bar-expressive-line-scale-duration) -
+        -1 *
+            (
+                var(--progress-bar-expressive-line-scale-duration) - 5 *
                     var(--progress-bar-expressive-line-scale-duration) /
-                    var(--progress-bar-expressive-line-count) * 5
-            ) *
-            -1
+                    var(--progress-bar-expressive-line-count)
+            )
     );
     width: var(--progress-bar-expressive-line-width-b1);
 }
+
 .progress-bar-expressive__line:nth-child(6) {
     animation-delay: calc(
-        (
-                var(--progress-bar-expressive-line-scale-duration) -
+        -1 *
+            (
+                var(--progress-bar-expressive-line-scale-duration) - 6 *
                     var(--progress-bar-expressive-line-scale-duration) /
-                    var(--progress-bar-expressive-line-count) * 6
-            ) *
-            -1
+                    var(--progress-bar-expressive-line-count)
+            )
     );
     width: var(--progress-bar-expressive-line-width-b2);
 }
+
 .progress-bar-expressive__line:nth-child(7) {
     animation-delay: calc(
-        (
-                var(--progress-bar-expressive-line-scale-duration) -
+        -1 *
+            (
+                var(--progress-bar-expressive-line-scale-duration) - 7 *
                     var(--progress-bar-expressive-line-scale-duration) /
-                    var(--progress-bar-expressive-line-count) * 7
-            ) *
-            -1
+                    var(--progress-bar-expressive-line-count)
+            )
     );
     width: var(--progress-bar-expressive-line-width-b3);
 }
+
 .progress-bar-expressive__line:nth-child(8) {
     animation-delay: calc(
-        (
-                var(--progress-bar-expressive-line-scale-duration) -
+        -1 *
+            (
+                var(--progress-bar-expressive-line-scale-duration) - 8 *
                     var(--progress-bar-expressive-line-scale-duration) /
-                    var(--progress-bar-expressive-line-count) * 8
-            ) *
-            -1
+                    var(--progress-bar-expressive-line-count)
+            )
     );
     width: var(--progress-bar-expressive-line-width-b4);
 }
+
 .progress-bar-expressive__line:nth-child(9) {
     animation-delay: calc(
-        (
-                var(--progress-bar-expressive-line-scale-duration) -
+        -1 *
+            (
+                var(--progress-bar-expressive-line-scale-duration) - 9 *
                     var(--progress-bar-expressive-line-scale-duration) /
-                    var(--progress-bar-expressive-line-count) * 9
-            ) *
-            -1
+                    var(--progress-bar-expressive-line-count)
+            )
     );
     width: var(--progress-bar-expressive-line-width-c1);
 }
+
 .progress-bar-expressive__line:nth-child(10) {
     animation-delay: calc(
-        (
-                var(--progress-bar-expressive-line-scale-duration) -
+        -1 *
+            (
+                var(--progress-bar-expressive-line-scale-duration) - 10 *
                     var(--progress-bar-expressive-line-scale-duration) /
-                    var(--progress-bar-expressive-line-count) * 10
-            ) *
-            -1
+                    var(--progress-bar-expressive-line-count)
+            )
     );
     width: var(--progress-bar-expressive-line-width-c2);
 }
+
 .progress-bar-expressive__line:nth-child(11) {
     animation-delay: calc(
-        (
-                var(--progress-bar-expressive-line-scale-duration) -
+        -1 *
+            (
+                var(--progress-bar-expressive-line-scale-duration) - 11 *
                     var(--progress-bar-expressive-line-scale-duration) /
-                    var(--progress-bar-expressive-line-count) * 11
-            ) *
-            -1
+                    var(--progress-bar-expressive-line-count)
+            )
     );
     width: var(--progress-bar-expressive-line-width-c3);
 }
+
 .progress-bar-expressive__line:nth-child(12) {
     animation-delay: calc(
-        (
-                var(--progress-bar-expressive-line-scale-duration) -
+        -1 *
+            (
+                var(--progress-bar-expressive-line-scale-duration) - 12 *
                     var(--progress-bar-expressive-line-scale-duration) /
-                    var(--progress-bar-expressive-line-count) * 12
-            ) *
-            -1
+                    var(--progress-bar-expressive-line-count)
+            )
     );
     width: var(--progress-bar-expressive-line-width-c4);
 }
@@ -298,7 +322,7 @@
     }
     to {
         opacity: 0;
-        transform: translateY(calc(var(--font-size-large-2) * -1));
+        transform: translateY(calc(-1 * var(--font-size-large-2)));
     }
 }
 @keyframes progress-bar-expressive-message-animatein {
@@ -343,7 +367,7 @@
 @keyframes progress-bar-expressive-reduced-motion-line-scroll {
     0% {
         transform: translateX(
-            calc(-200% - var(--progress-bar-expressive-line-gap) * 8)
+            calc(-200% - 8 * var(--progress-bar-expressive-line-gap))
         );
     }
     to {