@ebay/skin 19.33.0 → 19.35.0

package/dist/field/field.css

@@ -1,13 +1,16 @@
 span.field {
     display: inline-block;
 }
+
 span.field + span.field {
     margin-left: 8px;
 }
+
 .field-group,
 div.field {
     margin: 16px 0;
 }
+
 .field-group {
     display: flex;
 }
@@ -17,60 +20,73 @@ div.field {
 span.field--table {
     display: inline-table;
 }
+
 div.field--table {
     display: table;
 }
+
 .field__description--group {
     display: flex;
     justify-content: flex-end;
 }
+
 .field__description--group > :last-child {
     margin-inline-start: 5px;
     text-align: right;
 }
+
 .field__description--group > :first-child {
     flex: 1;
 }
 .field__label {
     margin-right: 8px;
 }
+
 .field__description {
     color: var(--field-description-color, var(--color-foreground-secondary));
     font-size: var(--font-size-small);
     line-height: var(--spacing-200);
     margin-top: var(--spacing-50);
 }
+
 .field__description--confirmation {
     color: var(
         --field-description-confirmation-color,
         var(--color-foreground-success)
     );
 }
+
 .field__description--information {
     color: var(
         --field-description-information-color,
         var(--color-foreground-accent)
     );
 }
+
 .field__description--attention {
     color: var(
         --field-description-attention-color,
         var(--color-foreground-attention)
     );
 }
+
 .field__group > .field__description,
 .field__group > .field__label {
     align-self: center;
 }
+
 span.field__group {
     display: inline-flex;
 }
+
 div.field__group {
     display: flex;
 }
+
 .field__control + span.field__description {
     margin-left: 8px;
 }
+
 .field__description .icon {
     display: inline-block;
     margin-right: var(--spacing-50);
@@ -78,6 +94,7 @@ div.field__group {
 div.field__description {
     margin: var(--spacing-100) 0 0;
 }
+
 .field__row {
     display: table-row;
 }
@@ -104,13 +121,16 @@ div.field__description {
     margin-left: 4px;
     margin-right: auto;
 }
+
 .field__label--stacked {
     display: block;
     margin-bottom: 8px;
 }
+
 .field__label--disabled {
     color: var(--field-label-color-disabled, var(--color-foreground-disabled));
 }
+
 .field--fluid,
 .field__control--fluid,
 .field__group--fluid {
@@ -120,13 +140,16 @@ div.field__description {
     display: inline-block;
     margin-top: 16px;
 }
+
 .field--align-top .textbox {
     vertical-align: top;
 }
+
 .field__group--align-top > .field__label {
     align-self: flex-start;
     margin-top: 16px;
 }
+
 [dir="rtl"] .field__description--group > :last-child {
     text-align: left;
 }

package/dist/file-input/file-input.css

@@ -4,16 +4,19 @@ div.file-input {
     grid-template-columns: 1fr;
     grid-template-rows: 1fr;
 }
+
 div.file-input__container,
 input.file-input__input[type="file"] {
     border-radius: var(--file-input-border-radius, var(--border-radius-100));
     grid-area: center;
 }
+
 div.file-input__container {
     background-color: var(
         --file-input-background-color,
         var(--color-background-secondary)
     );
+    border-color: var(--file-input-border-color, var(--color-neutral-500));
     border: 1px dashed;
     display: flex;
     flex-direction: row;
@@ -23,26 +26,30 @@ div.file-input__container {
     pointer-events: none;
     z-index: 1;
 }
+
 div.file-input___container--dragged-over {
     background-color: var(
         --file-input-dragged-over-background-color,
         var(--color-background-tertiary)
     );
 }
+
 div.file-input__upload-icon {
-    align-self: center;
     background-color: var(
         --file-input-upload-icon-background-color,
         var(--color-background-primary)
     );
+    align-self: center;
     border-radius: 99px;
     padding: var(--spacing-150);
 }
+
 div.file-input__upload-icon svg {
     fill: var(--file-input-upload-icon-fill, var(--color-foreground-primary));
     height: var(--spacing-300);
     width: var(--spacing-300);
 }
+
 div.file-input__content {
     align-items: start;
     display: flex;
@@ -50,6 +57,7 @@ div.file-input__content {
     flex-grow: 1;
     justify-content: center;
 }
+
 .file-input__content-header {
     color: var(
         --file-input-content-header-color,
@@ -60,6 +68,7 @@ div.file-input__content {
     line-height: var(--spacing-250);
     margin-block: 0 var(--spacing-50);
 }
+
 span.file-input__content-subheader {
     color: var(
         --file-input-content-subheader-color,
@@ -70,9 +79,11 @@ span.file-input__content-subheader {
     line-height: var(--spacing-200);
     margin-block-end: var(--spacing-100);
 }
+
 span.file-input__content-cta {
     text-decoration-line: underline;
 }
+
 @media screen and (min-width: 768px) {
     div.file-input__container {
         gap: var(--spacing-300);

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"]