@ebay/skin 19.33.0 → 19.35.0

package/dist/cta-button/cta-button.css

@@ -1,21 +1,21 @@
 a.cta-btn {
     align-content: center;
-    align-items: center;
+    border-radius: var(--cta-btn-border-radius, 20px);
+    display: inline-block;
+    font-size: var(--font-size-body);
+    max-width: 100%;
+    min-height: 40px;
+    padding: 0 20px;
     background-color: var(
         --cta-btn-background-color,
         var(--color-background-primary)
     );
+    color: var(--cta-btn-foreground-color, var(--color-foreground-primary));
+    align-items: center;
     border: 1px solid;
-    border-radius: var(--cta-btn-border-radius, 20px);
     box-sizing: border-box;
-    color: var(--cta-btn-foreground-color, var(--color-foreground-primary));
-    display: inline-block;
     font-family: inherit;
-    font-size: var(--font-size-body);
     margin: 0;
-    max-width: 100%;
-    min-height: 40px;
-    padding: 0 20px;
     text-align: center;
     text-decoration: none;
     vertical-align: bottom;
@@ -32,12 +32,14 @@ a.cta-btn:focus-visible {
 a.cta-btn:focus:not(:focus-visible) {
     outline: none;
 }
+
 a.cta-btn:visited {
     color: var(
         --cta-btn-visited-foreground-color,
         var(--color-foreground-primary)
     );
 }
+
 a.cta-btn:focus,
 a.cta-btn:hover {
     background-color: var(
@@ -53,6 +55,7 @@ a.cta-btn:hover {
         var(--color-background-primary)
     );
 }
+
 a.cta-btn:not([href]),
 a.cta-btn[aria-disabled="true"] {
     background-color: var(
@@ -68,14 +71,16 @@ a.cta-btn[aria-disabled="true"] {
         var(--color-foreground-disabled)
     );
 }
+
 a.cta-btn--fluid {
     width: 100%;
 }
+
 span.cta-btn__cell {
     align-items: center;
     display: flex;
-    justify-content: center;
     width: 100%;
+    justify-content: center;
 }
 span.cta-btn__cell--fixed-height {
     display: inline-flex;
@@ -91,11 +96,12 @@ span.cta-btn__cell--truncated > svg {
     align-self: baseline;
     max-width: calc(100% - 32px);
 }
+
 a.cta-btn svg.icon {
-    align-self: center;
     flex-shrink: 0;
     height: 10px;
     width: 10px;
+    align-self: center;
 }
 a.cta-btn svg.icon:first-child {
     margin-inline-end: 8px;
@@ -106,12 +112,14 @@ a.cta-btn svg.icon:last-child {
 a.cta-btn svg.icon:only-child {
     margin: 0;
 }
+
 span.cta-btn__cell--fixed-height svg.icon {
     align-self: center;
     height: 1rem;
     overflow: visible;
     width: 1rem;
 }
+
 a.cta-btn--truncated,
 a.cta-btn--truncated span {
     line-height: 1.4em;
@@ -119,12 +127,14 @@ a.cta-btn--truncated span {
     text-overflow: ellipsis;
     white-space: nowrap;
 }
+
 a.cta-btn--large {
     border-radius: 24px;
     display: inline-flex;
     font-size: var(--font-size-medium);
     min-height: 48px;
 }
+
 [dir="rtl"] a.cta-btn svg.icon--arrow-right-24 {
     transform: rotate(180deg);
 }

package/dist/date-textbox/date-textbox.css

@@ -5,9 +5,11 @@
     --calendar-month-width: 311px;
     display: inline-block;
 }
+
 .date-textbox > .textbox + .textbox {
     margin-left: var(--spacing-100);
 }
+
 .date-textbox__popover {
     background-color: var(
         --calendar-background-color,
@@ -15,17 +17,20 @@
     );
     border-radius: var(--spacing-200);
     box-shadow: var(--bubble-shadow);
-    margin-left: calc(var(--spacing-100) * -1);
+    margin-left: calc(-1 * var(--spacing-100));
     padding: var(--spacing-200);
     position: absolute;
     z-index: 1;
 }
+
 .date-textbox__popover--fixed {
     position: fixed;
 }
+
 .date-textbox__popover[hidden] {
     display: none;
 }
+
 @media only screen and (max-width: 512px) {
     .date-textbox__popover {
         left: 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;