@ebay/skin 19.34.0 → 19.35.0

package/dist/progress-spinner/progress-spinner.css

@@ -22,10 +22,12 @@
     max-width: inherit;
     width: inherit;
 }
+
 .progress-spinner--small {
     height: 20px;
     width: 20px;
 }
+
 .progress-spinner--large {
     height: 30px;
     width: 30px;

package/dist/progress-stepper/progress-stepper.css

@@ -2,12 +2,14 @@
     align-items: flex-start;
     display: flex;
 }
+
 .progress-stepper__item {
     align-items: center;
     display: flex;
     flex-direction: column;
     width: 32px;
 }
+
 hr.progress-stepper__separator {
     background-color: var(
         --progress-stepper-active-color,
@@ -22,6 +24,7 @@ hr.progress-stepper__separator {
     position: relative;
     top: 10px;
 }
+
 .progress-stepper__text {
     font-size: var(--font-size-body);
     justify-self: center;
@@ -29,6 +32,7 @@ hr.progress-stepper__separator {
     text-align: center;
     width: 80px;
 }
+
 .progress-stepper__text h2,
 .progress-stepper__text h3,
 .progress-stepper__text h4,
@@ -38,6 +42,7 @@ hr.progress-stepper__separator {
     font-size: var(--font-size-body);
     font-weight: 400;
 }
+
 .progress-stepper__items--upcoming .progress-stepper__text h2,
 .progress-stepper__items--upcoming .progress-stepper__text h3,
 .progress-stepper__items--upcoming .progress-stepper__text h4,
@@ -48,6 +53,7 @@ hr.progress-stepper__separator {
         var(--color-foreground-secondary)
     );
 }
+
 .progress-stepper__item[aria-current] .progress-stepper__text h2,
 .progress-stepper__item[aria-current] .progress-stepper__text h3,
 .progress-stepper__item[aria-current] .progress-stepper__text h4,
@@ -55,6 +61,7 @@ hr.progress-stepper__separator {
 .progress-stepper__item[aria-current] .progress-stepper__text h6 {
     font-weight: 700;
 }
+
 .progress-stepper__item[aria-current]
     ~ .progress-stepper__item
     .progress-stepper__text
@@ -81,11 +88,13 @@ hr.progress-stepper__separator {
         var(--color-foreground-secondary)
     );
 }
+
 .progress-stepper__icon {
     height: 24px;
     margin: auto;
     width: 24px;
 }
+
 .progress-stepper__item[aria-current] ~ hr.progress-stepper__separator,
 .progress-stepper__items--upcoming hr.progress-stepper__separator {
     background-color: var(
@@ -94,6 +103,7 @@ hr.progress-stepper__separator {
     );
     background-image: none;
 }
+
 .progress-stepper__item[aria-current] + hr.progress-stepper__separator {
     background-image: linear-gradient(
         90deg,
@@ -102,6 +112,7 @@ hr.progress-stepper__separator {
             50%
     );
 }
+
 .progress-stepper__item--attention[aria-current]
     ~ hr.progress-stepper__separator {
     background-color: var(
@@ -110,29 +121,35 @@ hr.progress-stepper__separator {
     );
     background-image: none;
 }
+
 .progress-stepper__text > * {
     margin: 0;
 }
+
 .progress-stepper {
     overflow: auto;
     padding: var(--spacing-200) 0;
 }
+
 .progress-stepper__item:first-child .progress-stepper__text {
     align-self: flex-start;
     margin-inline-start: var(--spacing-50);
     text-align: left;
 }
+
 .progress-stepper__item:last-child .progress-stepper__text {
     align-self: flex-end;
     margin-inline-end: var(--spacing-50);
     text-align: right;
 }
+
 .progress-stepper--vertical .progress-stepper__item {
     align-items: flex-start;
     flex-direction: row;
     height: 24px;
     width: auto;
 }
+
 .progress-stepper--vertical
     .progress-stepper__item[aria-current]
     + hr.progress-stepper__separator {
@@ -143,6 +160,7 @@ hr.progress-stepper__separator {
             50%
     );
 }
+
 .progress-stepper--vertical
     .progress-stepper__item--attention[aria-current]
     ~ hr.progress-stepper__separator {
@@ -152,9 +170,11 @@ hr.progress-stepper__separator {
     );
     background-image: none;
 }
+
 .progress-stepper--vertical .progress-stepper__items {
     display: block;
 }
+
 .progress-stepper--vertical .progress-stepper__item .progress-stepper__text {
     align-self: center;
     margin-inline-start: var(--spacing-200);
@@ -163,12 +183,14 @@ hr.progress-stepper__separator {
     white-space: nowrap;
     width: auto;
 }
+
 .progress-stepper--vertical .progress-stepper__icon {
     display: inline-block;
     height: 24px;
     margin: inherit;
     width: 24px;
 }
+
 .progress-stepper--vertical .progress-stepper__separator {
     display: inline-block;
     flex: inherit;
@@ -179,6 +201,7 @@ hr.progress-stepper__separator {
     min-width: inherit;
     width: 4px;
 }
+
 [dir="rtl"] .progress-stepper__item:first-child .progress-stepper__text {
     text-align: right;
 }
@@ -227,6 +250,7 @@ hr.progress-stepper__separator {
     margin-left: inherit;
     margin-right: 11px;
 }
+
 @media (min-width: 512px) {
     hr.progress-stepper__separator {
         min-width: 120px;

package/dist/radio/radio.css

@@ -3,33 +3,40 @@
     position: relative;
     vertical-align: text-bottom;
 }
+
 .radio__control[type="radio"] {
     height: 18px;
     min-width: 18px;
     width: 18px;
 }
+
 .radio--large .radio__control[type="radio"] {
     height: 24px;
     min-width: 24px;
     width: 24px;
 }
+
 span.radio__icon {
     display: inline-flex;
     height: 18px;
     outline-offset: 1px;
 }
+
 .radio--large span.radio__icon {
     height: 24px;
 }
 span.radio__icon[hidden] {
     display: inline-flex;
 }
+
 svg.radio__checked {
     color: var(--radio-checked-color, var(--color-foreground-primary));
 }
+
 svg.radio__unchecked {
     color: var(--radio-unchecked-color, var(--color-foreground-primary));
 }
+
 input.radio__control[type="radio"] {
     font-size: 100%;
     margin: 0;
@@ -38,34 +45,40 @@ input.radio__control[type="radio"] {
     position: absolute;
     z-index: 1;
 }
+
 .radio svg {
     display: inline-block;
     fill: currentColor;
-    height: 18px;
     pointer-events: none;
     stroke: currentColor;
     stroke-width: 0;
     vertical-align: middle;
+    height: 18px;
     width: 18px;
 }
+
 .radio--large svg {
     height: 24px;
     width: 24px;
 }
+
 input.radio__control[type="radio"] + span.radio__icon svg.radio__checked {
     display: none;
 }
+
 input.radio__control[type="radio"] + span.radio__icon svg.radio__unchecked,
 input.radio__control[type="radio"]:checked
     + span.radio__icon
     svg.radio__checked {
     display: inline-block;
 }
+
 input.radio__control[type="radio"]:checked
     + span.radio__icon
     svg.radio__unchecked {
     display: none;
 }
+
 input.radio__control[type="radio"][disabled] + span.radio__icon {
     opacity: 1;
 }
@@ -74,9 +87,10 @@ input.radio__control[type="radio"][disabled] + span.radio__icon svg {
 }
 input.radio__control[type="radio"]:focus + span.radio__icon {
     outline: 1px auto;
-    outline-color: var(--radio-outline, var(--color-foreground-secondary));
     outline-offset: 2px;
+    outline-color: var(--radio-outline, var(--color-foreground-secondary));
 }
+
 input.radio__control[type="radio"]:focus:not(:focus-visible)
     + span.radio__icon {
     outline: none;

package/dist/section-notice/section-notice.css

@@ -8,15 +8,18 @@
     margin: 8px 0;
     padding: 16px;
 }
+
 div[role="region"].section-notice,
 section.section-notice {
     display: grid;
     grid-template-columns: 32px auto auto;
 }
+
 div[role="region"].section-notice:has(.section-notice__cta),
 section.section-notice:has(.section-notice__cta) {
     grid-template-columns: 32px auto auto min-content;
 }
+
 div[role="region"].section-notice:has(.section-notice__cta)
     .section-notice__footer,
 section.section-notice:has(.section-notice__cta) .section-notice__footer {
@@ -28,9 +31,11 @@ section.section-notice:has(.section-notice__cta) .section-notice__footer {
         var(--color-background-education)
     );
 }
+
 span[role="region"].section-notice {
     display: grid;
 }
+
 .section-notice__title {
     font-size: var(--font-size-body);
     font-weight: 400;
@@ -42,9 +47,11 @@ span[role="region"].section-notice {
 .section-notice__title:not(:only-child) {
     font-weight: 700;
 }
+
 .section-notice button.fake-link {
     font-size: var(--font-size-body);
 }
+
 .section-notice a,
 .section-notice button.fake-link,
 .section-notice button.fake-link:hover {
@@ -53,18 +60,22 @@ span[role="region"].section-notice {
         var(--color-foreground-primary)
     );
 }
+
 .section-notice a {
     font-size: var(--font-size-body);
 }
+
 .section-notice a:hover {
     color: var(
         --section-notice-foreground-color,
         var(--color-foreground-primary)
     );
 }
+
 .section-notice .icon {
     vertical-align: top;
 }
+
 .section-notice__header {
     grid-column: 1;
     grid-row: 1;
@@ -72,25 +83,30 @@ span[role="region"].section-notice {
     margin-inline-end: var(--spacing-200);
     margin-top: 1px;
 }
+
 .section-notice__main {
     grid-column: 1 / 3;
     grid-row: 1;
     margin-inline-end: var(--spacing-200);
 }
+
 .section-notice__header + .section-notice__main,
 .section-notice__header ~ .section-notice__cta {
     grid-column: 2;
 }
+
 .section-notice__footer {
     grid-column: 3;
     grid-row: 1;
     justify-self: flex-end;
     margin-top: 2px;
 }
+
 .section-notice__main p {
     font-size: var(--font-size-body);
     margin: 0;
 }
+
 p.section-notice__cta {
     grid-column: 1 / 3;
     grid-row: 2;

package/dist/section-title/section-title.css

@@ -3,37 +3,44 @@
     display: flex;
     margin: 30px 0 10px;
 }
+
 .section-title__title-container {
     margin-inline-end: var(--spacing-300);
 }
+
 .section-title__title {
     font-size: var(--font-size-large-1);
     font-weight: var(--font-weight-600);
     line-height: 28px;
     margin: 0;
 }
+
 .section-title__subtitle {
+    font-size: var(--font-size-body);
+    line-height: 20px;
     color: var(
         --section-title-subtitle-color,
         var(--color-foreground-secondary)
     );
-    font-size: var(--font-size-body);
-    line-height: 20px;
 }
+
 .section-title__title svg.icon {
     background-color: var(--color-background-secondary);
     border-radius: 12px;
     margin-inline-start: var(--spacing-100);
     padding: 7px;
 }
+
 .section-title__info {
     bottom: -3px;
     margin: 0 var(--spacing-300) 0 var(--spacing-100);
     position: relative;
 }
+
 .section-title__overflow {
     margin: 0 var(--spacing-300) 0 auto;
 }
+
 .section-title__cta,
 .section-title__overflow {
     align-items: baseline;
@@ -42,15 +49,18 @@
     margin-left: auto;
     margin-right: 0;
 }
+
 .section-title button.icon-btn,
 .section-title__overflow button.icon-btn {
     height: var(--spacing-400);
     min-width: var(--spacing-400);
     width: var(--spacing-400);
 }
+
 .section-title__title-container + button.icon-btn {
     margin-left: var(--spacing-100);
 }
+
 .section-title--large .section-title__title {
     font-size: var(--font-size-large-1);
     font-weight: var(--font-weight-600);
@@ -61,6 +71,7 @@
 .section-title--large > .section-title__overflow {
     height: var(--spacing-400);
 }
+
 [dir="rtl"] .section-title__title svg.icon {
     transform: rotate(180deg);
 }
@@ -72,6 +83,7 @@
 [dir="rtl"] .section-title__info {
     margin: 0 var(--spacing-100) 0 var(--spacing-300);
 }
+
 @media (min-width: 512px) {
     .section-title__title {
         font-size: var(--font-size-large-2);

package/dist/segmented-buttons/segmented-buttons.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);
 }
+
 .segmented-buttons {
     border: 1px solid var(--color-border-medium);
     border-radius: var(--segmented-button-border-radius, 24px);
@@ -9,19 +10,23 @@
     min-width: 215px;
     padding: var(--spacing-50);
 }
+
 .segmented-buttons > ul {
     display: flex;
     list-style: none;
     margin: 0;
     padding: 0;
 }
+
 .segmented-buttons > ul > li {
     display: flex;
     flex: 1;
 }
+
 .segmented-buttons > ul > li:not(:first-child) {
     margin-inline-start: var(--spacing-100);
 }
+
 .segmented-buttons__button {
     background-color: initial;
     border: none;
@@ -29,19 +34,22 @@
     color: var(--color-foreground-primary);
     font-family: inherit;
     font-size: var(--font-size-body);
-    min-height: calc(40px - var(--spacing-50) * 2);
+    min-height: calc(40px - 2 * var(--spacing-50));
     padding: var(--spacing-100) var(--spacing-200);
     width: 100%;
 }
+
 .segmented-buttons--large .segmented-buttons__button {
-    min-height: calc(48px - var(--spacing-50) * 2);
+    min-height: calc(48px - 2 * var(--spacing-50));
 }
+
 .segmented-buttons__button-cell {
     align-items: center;
     display: flex;
-    justify-content: center;
     width: 100%;
+    justify-content: center;
 }
+
 .segmented-buttons__button svg.icon {
     align-self: center;
 }
@@ -54,10 +62,12 @@
 .segmented-buttons__button svg.icon:only-child {
     margin: 0;
 }
+
 .segmented-buttons__button[aria-current] {
     background-color: var(--color-foreground-primary);
     color: var(--color-foreground-on-inverse);
 }
+
 .segmented-buttons__button:not([aria-current]) {
     overflow: hidden;
     position: relative;

package/dist/select/select.css

@@ -3,16 +3,13 @@
     font-size: var(--font-size-body);
     position: relative;
 }
+
 span.select {
     display: inline-block;
 }
+
 .select select {
     appearance: none;
-    background-color: var(
-        --select-background-color,
-        var(--color-background-secondary)
-    );
-    border-color: var(--select-border-color, var(--color-border-medium));
     border-radius: var(--select-border-radius, var(--border-radius-50));
     border-style: solid;
     border-width: 1px;
@@ -22,7 +19,13 @@ span.select {
     height: 40px;
     padding: 0 var(--spacing-400) 0 var(--spacing-200);
     vertical-align: middle;
+    background-color: var(
+        --select-background-color,
+        var(--color-background-secondary)
+    );
+    border-color: var(--select-border-color, var(--color-border-medium));
 }
+
 .select svg.icon--12 {
     height: 100%;
     pointer-events: none;
@@ -30,14 +33,17 @@ span.select {
     right: 16px;
     top: 0;
 }
+
 .select--large select {
     font-size: var(--font-size-medium);
     height: 48px;
 }
+
 .select--fluid,
 .select--fluid select {
     width: 100%;
 }
+
 .select--borderless select {
     background-color: initial;
     border: 0;
@@ -48,12 +54,14 @@ span.select {
     background-color: initial;
     text-decoration: underline;
 }
+
 .select select:focus {
     background-color: var(
         --select-focus-background-color,
         var(--color-background-primary)
     );
 }
+
 .select select:focus:not(:read-only) {
     background-color: var(
         --select-focus-background-color,
@@ -66,6 +74,7 @@ span.select {
 .select select::-ms-expand {
     display: none;
 }
+
 .select select[disabled] {
     border-color: var(
         --textbox-disabled-border-color,
@@ -77,16 +86,19 @@ span.select {
     );
     opacity: 1;
 }
+
 .select select[disabled] + svg {
     color: var(
         --select-disabled-foregound-color,
         var(--color-foreground-on-disabled)
     );
 }
+
 .select select[readonly] {
     background-color: initial;
     border: none;
 }
+
 .select select[aria-invalid="true"] {
     border-color: var(
         --select-invalid-border-color,

package/dist/selection-chip/selection-chip.css

@@ -15,18 +15,10 @@
         background-size: 100% 100%;
     }
 }
-
 .selection-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-50);
-    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);
@@ -36,20 +28,24 @@
     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;
 }
-
 .selection-chip:active {
     transform: scale(0.97);
 }
-
 .selection-chip {
     overflow: hidden;
     position: relative;
 }
-
 .selection-chip:after {
     background-color: var(--color-state-layer-neutral);
     content: "";
@@ -57,17 +53,14 @@
     pointer-events: none;
     position: absolute;
 }
-
 .selection-chip:not([disabled], [aria-disabled="true"]):hover:after,
 .selection-chip[href]:hover:after {
     background-color: var(--color-state-layer-hover);
 }
-
 .selection-chip:not([disabled], [aria-disabled="true"]):focus-visible:after,
 .selection-chip[href]:focus-visible:after {
     background-color: var(--color-state-layer-focus);
 }
-
 .selection-chip:not([disabled], [aria-disabled="true"]):active:after,
 .selection-chip[href]:active:after {
     background-color: var(--color-state-layer-pressed);
@@ -94,7 +87,6 @@
     overflow: hidden;
     position: relative;
 }
-
 .selection-chip[aria-pressed="true"]:after {
     background-color: var(--color-state-layer-neutral-on-strong);
     content: "";
@@ -102,7 +94,6 @@
     pointer-events: none;
     position: absolute;
 }
-
 .selection-chip[aria-pressed="true"]:not(
         [disabled],
         [aria-disabled="true"]
@@ -110,7 +101,6 @@
 .selection-chip[aria-pressed="true"][href]:hover:after {
     background-color: var(--color-state-layer-hover-on-strong);
 }
-
 .selection-chip[aria-pressed="true"]:not(
         [disabled],
         [aria-disabled="true"]
@@ -118,7 +108,6 @@
 .selection-chip[aria-pressed="true"][href]:focus-visible:after {
     background-color: var(--color-state-layer-focus-on-strong);
 }
-
 .selection-chip[aria-pressed="true"]:not(
         [disabled],
         [aria-disabled="true"]