@ebay/skin 19.34.0 → 19.35.0

package/dist/file-preview-card/file-preview-card.css

@@ -2,14 +2,12 @@
     --state-layer-neutral-on-strong: rgb(var(--color-neutral-900-rgb), 0);
     --state-layer-neutral: rgb(var(--color-neutral-900-rgb), 0);
 }
-
 .file-preview-card {
     display: flex;
     flex-direction: column;
 }
 
 .file-preview-card__body {
-    aspect-ratio: 1/1;
     background-color: var(
         --file-preview-card-background-color,
         var(--color-background-secondary)
@@ -18,6 +16,7 @@
         --file-preview-card-border-radius,
         var(--border-radius-100)
     );
+    aspect-ratio: 1/1;
     display: flex;
     max-width: 396px;
     min-height: 120px;
@@ -31,11 +30,11 @@
 
 img.file-preview-card__asset,
 video.file-preview-card__asset {
-    align-self: center;
     border-radius: var(
         --file-preview-card-border-radius,
         var(--border-radius-100)
     );
+    align-self: center;
     height: 100%;
     object-fit: contain;
     width: 100%;
@@ -76,11 +75,11 @@ video.file-preview-card__asset {
 }
 
 .file-preview-card__info {
-    align-items: center;
     background-color: var(
         --file-preview-card-info-background-color,
         var(--color-background-primary)
     );
+    align-items: center;
     border-radius: 1em;
     bottom: var(--spacing-100);
     display: flex;
@@ -107,7 +106,6 @@ video.file-preview-card__asset {
     overflow: hidden;
     position: relative;
 }
-
 .file-preview-card__see-more:after {
     background-color: var(--color-state-layer-neutral);
     content: "";
@@ -115,7 +113,6 @@ video.file-preview-card__asset {
     pointer-events: none;
     position: absolute;
 }
-
 .file-preview-card__see-more:not(
         [disabled],
         [aria-disabled="true"]
@@ -123,7 +120,6 @@ video.file-preview-card__asset {
 .file-preview-card__see-more[href]:hover:after {
     background-color: var(--color-state-layer-hover);
 }
-
 .file-preview-card__see-more:not(
         [disabled],
         [aria-disabled="true"]
@@ -131,7 +127,6 @@ video.file-preview-card__asset {
 .file-preview-card__see-more[href]:focus-visible:after {
     background-color: var(--color-state-layer-focus);
 }
-
 .file-preview-card__see-more:not(
         [disabled],
         [aria-disabled="true"]
@@ -139,7 +134,6 @@ video.file-preview-card__asset {
 .file-preview-card__see-more[href]:active:after {
     background-color: var(--color-state-layer-pressed);
 }
-
 .file-preview-card__see-more {
     aspect-ratio: 1/1;
     background-color: var(--color-background-inverse);

package/dist/file-preview-card-group/file-preview-card-group.css

@@ -1,6 +1,7 @@
 div.file-preview-card-group {
     container: file-preview-cards-container/inline-size;
 }
+
 div.file-preview-card-group ul {
     display: grid;
     gap: var(--spacing-100);
@@ -10,9 +11,11 @@ div.file-preview-card-group ul {
     padding: 0;
     width: 100%;
 }
+
 div.file-preview-card-group ul li {
     height: max-content;
 }
+
 @supports not (contain: inline-size) {
     @media (min-width: 512px) {
         div.file-preview-card-group ul {

package/dist/filter-button/filter-button.css

@@ -6,10 +6,12 @@ div.filter-group {
     display: flex;
     flex-wrap: wrap;
 }
+
 a.filter-link,
 button.filter-button {
-    align-items: center;
     background-color: var(--color-background-secondary);
+    border-color: var(--color-border-medium);
+    align-items: center;
     border: 1px solid transparent;
     border-radius: 16px;
     box-sizing: border-box;
@@ -69,6 +71,7 @@ button.filter-button:not([disabled], [aria-disabled="true"]):active:after,
 button.filter-button[href]:active:after {
     background-color: var(--color-state-layer-pressed);
 }
+
 a.filter-link .filter-link__cell,
 button.filter-button .filter-button__cell {
     display: inline-block;
@@ -78,16 +81,19 @@ button.filter-button .filter-button__cell {
     text-overflow: ellipsis;
     white-space: nowrap;
 }
+
 a.filter-link:visited {
     color: var(
         --filter-button-foreground-color,
         var(--color-foreground-primary)
     );
 }
+
 a.filter-link--selected,
 button.filter-button[aria-pressed="true"] {
     font-weight: 700;
 }
+
 a.filter-link--selected,
 a.filter-link--selected:visited,
 button.filter-button[aria-pressed="true"] {
@@ -96,6 +102,7 @@ button.filter-button[aria-pressed="true"] {
         var(--color-border-strong)
     );
 }
+
 a.filter-link--selected:not([href]),
 a.filter-link--selected[aria-disabled="true"],
 a.filter-link:not([href]),

package/dist/filter-chip/filter-chip.css

@@ -15,7 +15,6 @@
         background-size: 100% 100%;
     }
 }
-
 @keyframes chevron-bounce-open {
     0% {
         transform: translateY(0);
@@ -27,7 +26,6 @@
         transform: translateY(0);
     }
 }
-
 @keyframes chevron-bounce-close {
     0% {
         transform: translateY(0);
@@ -39,19 +37,11 @@
         transform: translateY(0);
     }
 }
-
 a.filter-chip,
 button.filter-chip {
-    align-items: center;
-    background-color: var(--color-background-primary);
-    background-position: 50%;
-    background-repeat: no-repeat;
-    background-size: 0 100%;
-    border: 1px solid var(--color-border-medium);
     border-radius: var(--border-radius-100);
-    box-shadow: none;
+    align-items: center;
     box-sizing: border-box;
-    color: var(--color-foreground-primary);
     display: inline-flex;
     font-size: var(--font-size-body);
     gap: var(--spacing-75);
@@ -61,22 +51,26 @@ button.filter-chip {
     min-width: 32px;
     padding: 0 var(--spacing-150);
     text-decoration: none;
+    vertical-align: bottom;
+    background-color: var(--color-background-primary);
+    background-position: 50%;
+    background-repeat: no-repeat;
+    background-size: 0 100%;
+    border: 1px solid var(--color-border-medium);
+    box-shadow: none;
+    color: var(--color-foreground-primary);
     transition: all var(--motion-duration-short-3)
         var(--motion-easing-quick-enter);
-    vertical-align: bottom;
 }
-
 a.filter-chip:active,
 button.filter-chip:active {
     transform: scale(0.97);
 }
-
 a.filter-chip,
 button.filter-chip {
     overflow: hidden;
     position: relative;
 }
-
 a.filter-chip:after,
 button.filter-chip:after {
     background-color: var(--color-state-layer-neutral);
@@ -85,21 +79,18 @@ button.filter-chip:after {
     pointer-events: none;
     position: absolute;
 }
-
 a.filter-chip:not([disabled], [aria-disabled="true"]):hover:after,
 a.filter-chip[href]:hover:after,
 button.filter-chip:not([disabled], [aria-disabled="true"]):hover:after,
 button.filter-chip[href]:hover:after {
     background-color: var(--color-state-layer-hover);
 }
-
 a.filter-chip:not([disabled], [aria-disabled="true"]):focus-visible:after,
 a.filter-chip[href]:focus-visible:after,
 button.filter-chip:not([disabled], [aria-disabled="true"]):focus-visible:after,
 button.filter-chip[href]:focus-visible:after {
     background-color: var(--color-state-layer-focus);
 }
-
 a.filter-chip:not([disabled], [aria-disabled="true"]):active:after,
 a.filter-chip[href]:active:after,
 button.filter-chip:not([disabled], [aria-disabled="true"]):active:after,
@@ -114,15 +105,14 @@ button.filter-chip--expressive {
 }
 
 .filter-chip__media {
+    margin-inline-start: -8px;
     align-items: center;
     border-radius: var(--spacing-400);
     display: flex;
     justify-content: center;
-    margin-inline-start: -8px;
     overflow: hidden;
     position: relative;
 }
-
 .filter-chip__media:after {
     background: rgba(0, 0, 0, 0.05);
     content: "";
@@ -131,13 +121,12 @@ button.filter-chip--expressive {
     pointer-events: none;
     position: absolute;
 }
-
 .filter-chip__media > img {
     display: inline-block;
-    height: var(--spacing-400);
     max-height: 100%;
     max-width: 100%;
     object-fit: contain;
+    height: var(--spacing-400);
     object-fit: cover;
     width: var(--spacing-400);
 }
@@ -156,7 +145,6 @@ button.filter-chip[aria-pressed="true"] {
     overflow: hidden;
     position: relative;
 }
-
 a.filter-chip--selected:after,
 button.filter-chip.filter-chip--selected:after,
 button.filter-chip[aria-pressed="true"]:after {
@@ -166,7 +154,6 @@ button.filter-chip[aria-pressed="true"]:after {
     pointer-events: none;
     position: absolute;
 }
-
 a.filter-chip--selected:not([disabled], [aria-disabled="true"]):hover:after,
 a.filter-chip--selected[href]:hover:after,
 button.filter-chip.filter-chip--selected:not(
@@ -181,7 +168,6 @@ button.filter-chip[aria-pressed="true"]:not(
 button.filter-chip[aria-pressed="true"][href]:hover:after {
     background-color: var(--color-state-layer-hover-on-strong);
 }
-
 a.filter-chip--selected:not(
         [disabled],
         [aria-disabled="true"]
@@ -199,7 +185,6 @@ button.filter-chip[aria-pressed="true"]:not(
 button.filter-chip[aria-pressed="true"][href]:focus-visible:after {
     background-color: var(--color-state-layer-focus-on-strong);
 }
-
 a.filter-chip--selected:not([disabled], [aria-disabled="true"]):active:after,
 a.filter-chip--selected[href]:active:after,
 button.filter-chip.filter-chip--selected:not(
@@ -223,9 +208,9 @@ button.filter-chip--animated[aria-pressed="true"] {
 }
 
 button.filter-chip[aria-expanded="false"]:active .filter-chip__trailing {
+    rotate: 180deg;
     animation: chevron-bounce-close var(--motion-duration-medium-1)
         var(--motion-easing-standard);
-    rotate: 180deg;
 }
 
 button.filter-chip[aria-expanded="false"] .filter-chip__trailing {
@@ -234,9 +219,9 @@ button.filter-chip[aria-expanded="false"] .filter-chip__trailing {
 }
 
 button.filter-chip[aria-expanded="true"]:active .filter-chip__trailing {
+    rotate: 0deg;
     animation: chevron-bounce-open var(--motion-duration-medium-1)
         var(--motion-easing-standard) var(--motion-duration-short-1);
-    rotate: 0deg;
 }
 
 button.filter-chip[aria-expanded="true"] .filter-chip__trailing {

package/dist/filter-menu/filter-menu.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);
 }
+
 .filter-menu,
 .filter-menu-form {
     background-color: var(
@@ -10,20 +11,24 @@
     );
     min-width: 144px;
 }
+
 span.filter-menu,
 span.filter-menu-form {
     display: inline-block;
 }
+
 .filter-menu-form__items,
 .filter-menu__items {
     margin-top: 8px;
     min-width: 100%;
     position: relative;
 }
+
 span.filter-menu-form__items,
 span.filter-menu__items[role="menu"] {
     display: inline-block;
 }
+
 span.filter-menu__checkbox,
 span.filter-menu__radio {
     display: block;
@@ -38,6 +43,7 @@ span.filter-menu__radio svg {
     height: 18px;
     width: 18px;
 }
+
 .filter-menu-form__item span.checkbox,
 .filter-menu-form__item span.radio {
     align-items: flex-start;
@@ -52,14 +58,16 @@ span.filter-menu__radio svg {
         var(--color-foreground-primary)
     );
 }
+
 span.filter-menu-form__item,
 span.filter-menu__item[role^="menuitem"] {
     display: block;
 }
+
 .filter-menu-form__item,
 .filter-menu__item[role^="menuitem"] {
-    overflow: hidden;
     padding: 8px 16px;
+    overflow: hidden;
     position: relative;
 }
 .filter-menu-form__item:after,
@@ -132,6 +140,7 @@ span.filter-menu__item[role^="menuitem"] {
 .filter-menu__item[role^="menuitem"]:last-child {
     margin-bottom: 8px;
 }
+
 .filter-menu__header {
     align-items: center;
     background-color: var(--color-background-secondary);
@@ -139,9 +148,11 @@ span.filter-menu__item[role^="menuitem"] {
     gap: var(--spacing-100);
     padding: 14px var(--spacing-200);
 }
+
 .filter-menu__header svg {
     color: var(--color-foreground-secondary);
 }
+
 .filter-menu__header input {
     background-color: inherit;
     border: none;
@@ -149,6 +160,7 @@ span.filter-menu__item[role^="menuitem"] {
     flex-grow: 1;
     font-size: var(--font-size-body);
 }
+
 .filter-menu__header button.btn {
     border: none;
     min-height: var(--spacing-250);
@@ -156,17 +168,20 @@ span.filter-menu__item[role^="menuitem"] {
     padding: 0;
     width: var(--spacing-250);
 }
+
 .filter-menu__header button:focus-visible {
     outline-style: solid;
 }
+
 button.filter-menu-form__footer[type="submit"],
 button.filter-menu__footer {
     border: none;
-    border-top: 1px solid;
-    border-color: var(--filter-menu-border-color, var(--color-border-subtle));
+    border-top-style: solid;
+    border-top-width: 1px;
     bottom: 0;
-    overflow: hidden;
     padding: 16px;
+    border-color: var(--filter-menu-border-color, var(--color-border-subtle));
+    overflow: hidden;
     position: relative;
 }
 button.filter-menu-form__footer[type="submit"]:after,
@@ -235,25 +250,30 @@ button.filter-menu__footer:disabled:hover,
 button.filter-menu__footer[aria-disabled="true"]:hover {
     background-color: inherit;
 }
+
 .filter-menu-form__text,
 .filter-menu__text {
     flex-grow: 1;
     margin-inline-start: 8px;
 }
+
 .filter-menu__item[role="menuitemcheckbox"] svg.icon--checked,
 .filter-menu__item[role="menuitemradio"] svg.icon--checked {
     display: none;
 }
+
 .filter-menu__item[role="menuitemcheckbox"] svg.icon--unchecked,
 .filter-menu__item[role="menuitemradio"] svg.icon--unchecked {
     display: block;
 }
+
 .filter-menu__item[role="menuitemcheckbox"][aria-checked="true"]
     svg.icon--unchecked,
 .filter-menu__item[role="menuitemradio"][aria-checked="true"]
     svg.icon--unchecked {
     display: none;
 }
+
 .filter-menu__item[role="menuitemcheckbox"][aria-checked="true"]
     svg.icon--checked,
 .filter-menu__item[role="menuitemradio"][aria-checked="true"]

package/dist/filter-menu-button/filter-menu-button.css

@@ -7,6 +7,7 @@ div.filter-group {
     display: flex;
     flex-wrap: wrap;
 }
+
 span.filter-menu-button {
     display: inline-block;
     position: relative;
@@ -14,9 +15,11 @@ span.filter-menu-button {
 span.filter-menu-button + span.filter-menu-button {
     margin-left: 8px;
 }
+
 button.filter-menu-button__button {
-    align-items: center;
     background-color: var(--color-background-secondary);
+    border-color: var(--color-border-medium);
+    align-items: center;
     border: 1px solid transparent;
     border-radius: 16px;
     box-sizing: border-box;
@@ -71,17 +74,19 @@ button.filter-menu-button__button:not(
 button.filter-menu-button__button[href]:active:after {
     background-color: var(--color-state-layer-pressed);
 }
+
 .filter-menu-button__button-cell {
     display: flex;
 }
 .filter-menu-button__button-cell svg.icon--12 {
     align-self: center;
+    margin-inline-start: 8px;
     color: var(
         --filter-menu-button-icon-color,
         var(--color-foreground-primary)
     );
-    margin-inline-start: 8px;
 }
+
 .filter-menu-button__button-text {
     display: inline-block;
     max-width: 238px;
@@ -89,9 +94,11 @@ button.filter-menu-button__button[href]:active:after {
     text-overflow: ellipsis;
     white-space: nowrap;
 }
+
 .filter-menu-button__button[aria-expanded="true"] svg.icon {
     transform: rotate(180deg);
 }
+
 button.filter-menu-button__button--selected {
     border-color: var(
         --filter-button-foreground-color,
@@ -99,6 +106,7 @@ button.filter-menu-button__button--selected {
     );
     font-weight: 700;
 }
+
 button.filter-menu-button__button--selected[aria-disabled="true"],
 button.filter-menu-button__button--selected[disabled],
 button.filter-menu-button__button[aria-disabled="true"],
@@ -150,6 +158,7 @@ button.filter-menu-button__button--selected[disabled]:hover {
         var(--color-background-secondary)
     );
 }
+
 .filter-menu-button__menu {
     background-color: var(
         --filter-menu-item-background-color,
@@ -166,13 +175,16 @@ button.filter-menu-button__button--selected[disabled]:hover {
     width: max-content;
     z-index: 1;
 }
+
 .filter-menu-button__menu--set-position {
     top: calc(100% + 8px);
 }
+
 button.filter-menu-button__button[aria-expanded="true"]
     + .filter-menu-button__menu {
     display: block;
 }
+
 .filter-menu-button__items {
     margin-top: 8px;
     max-height: 400px;
@@ -181,9 +193,11 @@ button.filter-menu-button__button[aria-expanded="true"]
     position: relative;
     transform: translateZ(0);
 }
+
 span.filter-menu-button__items {
     display: inline-block;
 }
+
 span.filter-menu-button__checkbox,
 span.filter-menu-button__radio {
     display: block;
@@ -192,6 +206,7 @@ span.filter-menu-button__radio {
     min-width: 18px;
     width: 18px;
 }
+
 span.filter-menu-button__checkbox svg.icon--unchecked {
     color: var(
         --filter-menu-item-unchecked-color,
@@ -210,6 +225,7 @@ span.filter-menu-button__checkbox svg.icon--checked {
     height: 18px;
     width: 18px;
 }
+
 span.filter-menu-button__radio svg.icon--unchecked {
     color: var(
         --filter-menu-item-unchecked-color,
@@ -313,9 +329,11 @@ span.filter-menu-button__radio svg.icon--checked {
         var(--color-foreground-primary)
     );
 }
+
 span.filter-menu-button__item {
     display: block;
 }
+
 button.filter-menu-button__footer {
     border: none;
     border-color: var(--color-border-subtle);
@@ -323,10 +341,10 @@ button.filter-menu-button__footer {
     border-top-width: 1px;
     bottom: 0;
     outline-offset: -10;
-    overflow: hidden;
     padding: 16px;
-    position: relative;
     transform: translateZ(0);
+    overflow: hidden;
+    position: relative;
 }
 button.filter-menu-button__footer:after {
     background-color: var(--color-state-layer-neutral);
@@ -377,10 +395,12 @@ button.filter-menu-button__footer:disabled:hover,
 button.filter-menu-button__footer[aria-disabled="true"]:hover {
     background-color: inherit;
 }
+
 .filter-menu-button__text {
     flex-grow: 1;
     margin-left: 8px;
 }
+
 .filter-menu-button__item[role="menuitemcheckbox"][aria-checked="true"]
     svg.icon--unchecked {
     display: none;
@@ -389,6 +409,7 @@ button.filter-menu-button__footer[aria-disabled="true"]:hover {
     svg.icon--checked {
     display: block;
 }
+
 .filter-menu-button__item[role="menuitemradio"][aria-checked="true"]
     svg.icon--unchecked {
     display: none;
@@ -400,6 +421,7 @@ button.filter-menu-button__footer[aria-disabled="true"]:hover {
 div.filter-menu-button__item[role^="menuitem"]:focus:not(:focus-visible) {
     outline: none;
 }
+
 [dir="rtl"] .filter-menu-button__checkbox {
     margin-left: 8px;
 }