@ebay/skin 19.34.0 → 19.35.0

package/dist/details/details.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);
 }
+
 summary.details__summary {
     border-radius: var(--expand-btn-border-radius, var(--border-radius-50));
     color: var(
@@ -50,10 +51,12 @@ summary.details__summary:before {
 summary.details__summary::-webkit-details-marker {
     display: none;
 }
+
 summary.details__summary--center {
     justify-content: center;
     width: 100%;
 }
+
 summary.details__summary--small {
     font-size: var(--font-size-small);
     padding: 4px 8px;
@@ -61,6 +64,7 @@ summary.details__summary--small {
 span.details__icon[hidden] {
     display: inline-flex;
 }
+
 details.details[open] span.details__icon {
     transform: rotate(180deg);
 }

package/dist/dialog/dialog.css

@@ -8,6 +8,7 @@
     --dialog-scrim-color: rgb(17 24 32 / 0.7);
     scrollbar-gutter: stable;
 }
+
 @keyframes dialog-open-scrim {
     0% {
         background: transparent;
@@ -59,6 +60,7 @@
 body:has(.dialog[open]) {
     overflow: hidden !important;
 }
+
 .dialog {
     background-color: var(--color-background-primary);
     border: none;
@@ -71,6 +73,7 @@ body:has(.dialog[open]) {
     min-width: 208px;
     padding: 0;
 }
+
 .dialog__header {
     display: flex;
     flex-shrink: 0;
@@ -92,6 +95,7 @@ body:has(.dialog[open]) {
     flex-shrink: 0;
     margin-inline-start: var(--spacing-200);
 }
+
 .dialog__main {
     box-sizing: border-box;
     flex: 1 1 auto;
@@ -105,6 +109,7 @@ body:has(.dialog[open]) {
 .dialog__main > :last-child {
     margin-bottom: 0;
 }
+
 .dialog__footer {
     display: flex;
     flex-direction: column;
@@ -115,6 +120,7 @@ body:has(.dialog[open]) {
 .dialog__footer > :not(:first-child) {
     margin-top: var(--spacing-200);
 }
+
 .dialog__image {
     background-position: 50%;
     background-repeat: no-repeat;
@@ -124,6 +130,7 @@ body:has(.dialog[open]) {
     position: absolute;
     width: 100%;
 }
+
 .dialog--expressive .dialog__header > * {
     margin-top: 218px;
 }
@@ -138,34 +145,43 @@ button.icon-btn.dialog__prev {
     width: 32px;
     z-index: 1;
 }
+
 button.icon-btn.dialog__prev {
     margin-inline-end: var(--spacing-200);
 }
+
 .dialog--expressive button.icon-btn.dialog__close,
 .dialog--expressive button.icon-btn.dialog__prev {
     margin: 0;
 }
+
 .dialog--expressive button.icon-btn.dialog__prev + * {
     margin-inline-start: -32px;
 }
+
 .dialog--expressive .dialog__header {
     padding: var(--spacing-300) var(--spacing-300) 0;
 }
+
 .dialog--expressive .dialog__footer,
 .dialog--expressive .dialog__main {
     padding: var(--spacing-200) var(--spacing-300);
 }
+
 .dialog[open] {
     display: flex;
 }
+
 .dialog[open].dialog--close::backdrop {
     animation: dialog-close-scrim var(--motion-duration-short-3)
         var(--motion-easing-continuous) forwards;
 }
+
 .dialog[open]::backdrop {
     animation: dialog-open-scrim var(--motion-duration-short-3)
         var(--motion-easing-continuous) forwards;
 }
+
 .dialog[open].dialog--close {
     animation:
         dialog-close-scale var(--motion-duration-medium-3)
@@ -176,6 +192,7 @@ button.icon-btn.dialog__prev {
         display var(--motion-duration-short-3) allow-discrete,
         overlay var(--motion-duration-short-3) allow-discrete;
 }
+
 .dialog[open] {
     animation:
         dialog-open-scale var(--motion-duration-medium-3)
@@ -183,11 +200,13 @@ button.icon-btn.dialog__prev {
         dialog-open-opacity var(--motion-duration-short-3)
             var(--motion-easing-continuous);
 }
+
 .dialog--large {
     height: 98%;
     max-height: 98%;
     width: 95%;
 }
+
 @media (min-width: 512px) {
     .dialog {
         border-radius: var(--border-radius-100);

package/dist/donut-chart/donut-chart.css

@@ -3,11 +3,13 @@
     --donut-chart-graph-size-sm: 140px;
     --donut-chart-graph-size-lg: 210px;
 }
+
 .donut-chart {
     container-name: donut-chart;
     container-type: inline-size;
     width: 100%;
 }
+
 .donut-chart__grid {
     column-gap: var(--spacing-400);
     display: grid;
@@ -17,10 +19,12 @@
     row-gap: var(--spacing-200);
     width: 100%;
 }
+
 .donut-chart__title {
     font-size: var(--font-size-medium);
     font-weight: var(--font-weight-600);
 }
+
 .donut-chart__graph {
     align-self: flex-end;
     grid-column: 2;
@@ -29,17 +33,21 @@
     position: relative;
     width: 100%;
 }
+
 .donut-chart__metric-value {
     font-size: var(--font-size-giant-1);
     font-weight: var(--font-weight-600);
 }
+
 .donut-chart__metric-label {
     font-size: var(--font-size-regular);
 }
+
 .donut-chart__legend {
     align-self: flex-end;
     grid-column: 1 / -1;
 }
+
 @container (width > 450px) {
     .donut-chart__grid {
         column-gap: var(--spacing-800);

package/dist/drawer-dialog/drawer-dialog.css

@@ -7,9 +7,9 @@
 }
 .drawer-dialog[role="dialog"] {
     align-items: flex-end;
+    overflow: hidden;
     background-color: var(--dialog-scrim-color-show);
     inset: 0;
-    overflow: hidden;
     position: fixed;
     will-change: background-color;
     z-index: 100000;
@@ -17,9 +17,11 @@
 .drawer-dialog[role="dialog"]:not([hidden]) {
     display: flex;
 }
+
 .drawer-dialog--no-mask[role="dialog"] {
     background-color: initial;
 }
+
 .drawer-dialog__header {
     display: flex;
     flex-shrink: 0;
@@ -40,10 +42,12 @@
 .drawer-dialog__header > :last-child:not(:only-child) {
     margin-inline-start: var(--spacing-200);
 }
+
 .drawer-dialog__header .fake-link {
     align-self: flex-start;
     text-decoration: none;
 }
+
 .drawer-dialog__handle {
     background-color: initial;
     border: none;
@@ -63,11 +67,12 @@
     height: 2px;
     width: 24px;
 }
+
 .drawer-dialog__main {
-    box-sizing: border-box;
-    flex: 1 1 auto;
     min-height: auto;
     overflow: auto;
+    box-sizing: border-box;
+    flex: 1 1 auto;
     padding: var(--spacing-200);
     position: relative;
 }
@@ -77,6 +82,7 @@
 .drawer-dialog__main > :last-child {
     margin-bottom: 0;
 }
+
 .drawer-dialog__footer {
     display: flex;
     flex-direction: row;
@@ -99,25 +105,28 @@ button.icon-btn.drawer-dialog__close {
     width: 32px;
     z-index: 1;
 }
+
 .drawer-dialog__window {
     background-color: var(
         --dialog-window-background-color,
         var(--color-background-primary)
     );
-    border-radius: var(--border-radius-100) var(--border-radius-100) 0 0;
     display: flex;
     flex: 1 0 auto;
     flex-direction: column;
+    min-height: 55px;
+    will-change: opacity, transform;
+    border-radius: var(--border-radius-100) var(--border-radius-100) 0 0;
     max-height: 50%;
     max-width: 100%;
-    min-height: 55px;
     overflow-y: hidden;
-    will-change: opacity, transform;
 }
+
 .drawer-dialog__window--expanded {
     height: 95%;
     max-height: 95%;
 }
+
 .drawer-dialog__window--slide {
     transition: max-height 0.32s ease-out;
 }
@@ -173,6 +182,7 @@ button.icon-btn.drawer-dialog__close {
 .drawer-dialog--show .drawer-dialog__window--slide {
     transform: translateX(0);
 }
+
 .drawer-dialog__handle:focus:not(:focus-visible) {
     outline: none;
 }

package/dist/education-notice/education-notice.css

@@ -11,16 +11,19 @@
     font-size: var(--font-size-body);
     padding: var(--spacing-300);
 }
+
 .education-notice--prominent {
     background-color: var(
         --education-notice-education-background-color,
         var(--color-background-education)
     );
 }
+
 .education-notice__header {
     align-items: center;
     display: flex;
 }
+
 .education-notice__title {
     flex-grow: 1;
     font-size: var(--font-size-medium);
@@ -29,18 +32,23 @@
     margin: 0;
     margin-inline-start: var(--spacing-150);
 }
+
 .education-notice__main {
     margin-top: var(--spacing-200);
 }
+
 .education-notice__dismiss {
     margin-inline-start: var(--spacing-150);
 }
+
 .education-notice button.icon-btn {
     background-color: initial;
 }
+
 .education-notice__header .icon--prominent {
     color: var(--color-foreground-accent);
 }
+
 .education-notice__footer a {
     color: var(
         --education-notice-foreground-color,
@@ -48,18 +56,22 @@
     );
     white-space: nowrap;
 }
+
 .education-notice__footer a,
 .education-notice__footer button.fake-link {
     font-size: var(--font-size-body);
     font-weight: 700;
 }
+
 .education-notice__main p {
     font-size: var(--font-size-body);
     margin: 0;
 }
+
 .education-notice__footer {
     margin-top: var(--spacing-200);
 }
+
 .education-notice__header button.fake-link,
 .education-notice__header button.fake-link:hover {
     color: var(

package/dist/eek/eek.css

@@ -7,9 +7,11 @@
     height: 24px;
     position: relative;
 }
+
 .eek--large {
     height: 32px;
 }
+
 .eek__container {
     align-items: center;
     border: 1px solid #000;
@@ -18,17 +20,21 @@
     display: inline-flex;
     flex-direction: row-reverse;
 }
+
 .eek .icon--eek-arrow {
     rotate: 180deg;
     width: 9px;
 }
+
 .eek--large .icon--eek-arrow {
     width: 12.5px;
 }
+
 .eek__arrow {
     overflow: hidden;
     width: 17px;
 }
+
 .eek__arrow:before {
     border: 0.5px solid #000;
     border-radius: 2px;
@@ -41,48 +47,63 @@
     transform: rotate(45deg);
     width: 19.7989898732px;
 }
+
 .eek--rating-1 .eek__container {
     background: #00a650;
 }
+
 .eek--rating-1 svg.icon--eek-arrow {
     fill: #00a650;
 }
+
 .eek--rating-2 .eek__container {
     background: #4dbd38;
 }
+
 .eek--rating-2 svg.icon--eek-arrow {
     fill: #4dbd38;
 }
+
 .eek--rating-3 .eek__container {
     background: #b3db18;
 }
+
 .eek--rating-3 svg.icon--eek-arrow {
     fill: #b3db18;
 }
+
 .eek--rating-4 .eek__container {
     background: #fff200;
 }
+
 .eek--rating-4 svg.icon--eek-arrow {
     fill: #fff200;
 }
+
 .eek--rating-5 .eek__container {
     background: #fab20b;
 }
+
 .eek--rating-5 svg.icon--eek-arrow {
     fill: #fab20b;
 }
+
 .eek--rating-6 .eek__container {
     background: #f25c19;
 }
+
 .eek--rating-6 svg.icon--eek-arrow {
     fill: #f25c19;
 }
+
 .eek--rating-7 .eek__container {
     background: #ed1c24;
 }
+
 .eek--rating-7 svg.icon--eek-arrow {
     fill: #ed1c24;
 }
+
 .eek__rating {
     color: #fff;
     display: inline-block;
@@ -95,9 +116,11 @@
         0.5px -0.5px 0 #000,
         -0.5px -0.5px 0 #000;
 }
+
 .eek--large .eek__rating {
     font-size: 24px;
 }
+
 .eek__rating-range {
     align-items: center;
     background-color: #fff;
@@ -109,21 +132,26 @@
     margin: 1px;
     padding: 0 1px;
 }
+
 .eek--large .eek__rating-range {
     height: 28px;
 }
+
 .eek__rating-range > .icon--eek-range-arrow {
     height: 6px;
     width: 5px;
 }
+
 .eek--large .eek__rating-range > .icon--eek-range-arrow {
     height: 7px;
     width: 6px;
 }
+
 .eek__rating-range > span {
     font-size: 8px;
     height: 8px;
 }
+
 .eek--large .eek__rating-range > span {
     font-size: 10px;
     height: 10px;

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);