@ebay/skin 19.15.0 → 19.16.0

package/dist/number-input/number-input.css

@@ -77,7 +77,6 @@
 .number-input .textbox {
     background: transparent;
 }
-
 .number-input--increment .textbox__control {
     animation:
         number-input-increment-before var(--motion-duration-short-2)
@@ -85,7 +84,6 @@
         number-input-increment-after var(--motion-duration-medium-1)
             var(--motion-easing-quick-enter) var(--motion-duration-short-2);
 }
-
 .number-input--decrement .textbox__control {
     animation:
         number-input-decrement-before var(--motion-duration-short-2)
@@ -93,7 +91,6 @@
         number-input-decrement-after var(--motion-duration-medium-1)
             var(--motion-easing-quick-enter) var(--motion-duration-short-2);
 }
-
 .number-input--decrement-disabled .textbox__control {
     animation:
         number-input-decrement-before var(--motion-duration-short-2)
@@ -101,7 +98,6 @@
         number-input-decrement-after-disabled var(--motion-duration-medium-2)
             var(--motion-easing-standard) var(--motion-duration-short-2);
 }
-
 .number-input--increment-disabled .textbox__control {
     animation:
         number-input-increment-before var(--motion-duration-short-2)
@@ -109,31 +105,25 @@
         number-input-increment-after-disabled var(--motion-duration-medium-2)
             var(--motion-easing-standard) var(--motion-duration-short-2);
 }
-
 .number-input label:first-child {
     flex-grow: 1;
     padding-left: var(--spacing-200);
 }
-
 .number-input label:first-child ~ input.textbox__control {
     flex-grow: 0;
 }
-
 .icon-btn.number-input__delete {
     display: none;
     margin-inline-end: calc(var(--spacing-100) * -1);
     order: -1;
     padding-inline-start: var(--spacing-200);
 }
-
 .number-input--show-delete .number-input__delete {
     display: block;
 }
-
 .number-input--show-delete .number-input__decrement {
     display: none;
 }
-
 .number-input .textbox .textbox__control {
     font-weight: 700;
     text-align: center;
@@ -148,31 +138,25 @@
     -webkit-appearance: textfield;
     appearance: textfield;
 }
-
 .number-input .icon-btn {
     transform: scale(1);
     transition: transform var(--motion-duration-short-3)
         var(--motion-easing-standard);
 }
-
 .number-input .icon-btn:hover:not(:disabled) {
     background-color: var(--state-layer-hover);
 }
-
 .number-input .icon-btn:active {
     transform: scale(0.97);
 }
-
 .number-input .textbox .icon-btn:not(:disabled) svg {
     color: var(--color-foreground-primary);
     fill: currentColor;
 }
-
 .number-input__decrement:disabled {
     animation: number-decrement-disabled var(--motion-duration-short-2)
         var(--motion-easing-standard);
 }
-
 .number-input__increment:disabled {
     animation: number-increment-disabled var(--motion-duration-short-2)
         var(--motion-easing-standard);

package/dist/page-grid/page-grid.css

@@ -33,7 +33,6 @@
     position: relative;
     width: 100%;
 }
-
 .page-grid {
     column-gap: var(--page-grid-column-gaps);
     grid-template-columns: repeat(

package/dist/page-notice/page-notice.css

@@ -10,54 +10,45 @@
     border-style: solid;
     border-width: 1px;
     color: var(--page-notice-color, var(--color-foreground-on-inverse));
-    font-size: var(--font-size-default);
+    font-size: var(--font-size-body);
     margin: var(--spacing-100) 0;
     padding: var(--spacing-200);
 }
-
 div[role="region"].page-notice,
 section.page-notice {
     display: grid;
     grid-template-columns: 32px auto auto auto;
 }
-
 span[role="region"].page-notice {
     display: grid;
 }
-
 .page-notice__title {
-    font-size: var(--font-size-default);
+    font-size: var(--font-size-body);
     font-weight: 400;
     margin: 1px 0 0;
 }
-
 .page-notice a,
 .page-notice__title:not(:only-child) {
     font-weight: 700;
 }
-
 .page-notice a {
     color: var(--page-notice-color, var(--color-foreground-on-inverse));
-    font-size: var(--font-size-default);
+    font-size: var(--font-size-body);
 }
 .page-notice__cta a {
     white-space: nowrap;
 }
-
 .page-notice__dismiss {
     cursor: pointer;
 }
-
 .page-notice a:hover,
 .page-notice button.fake-link {
     color: var(--page-notice-color, var(--color-foreground-on-inverse));
 }
-
 .page-notice button.fake-link {
-    font-size: var(--font-size-default);
+    font-size: var(--font-size-body);
     font-weight: 700;
 }
-
 .page-notice button.fake-link:hover {
     color: var(--page-notice-color, var(--color-foreground-on-inverse));
 }
@@ -66,7 +57,6 @@ span[role="region"].page-notice {
     outline: 2px solid var(--color-foreground-on-inverse);
     outline-offset: 2px;
 }
-
 .page-notice--attention {
     background-color: var(
         --page-notice-attention-background-color,
@@ -74,7 +64,7 @@ span[role="region"].page-notice {
     );
     border-color: var(
         --page-notice-attention-border-color,
-        var(--color-stroke-attention)
+        var(--color-border-attention)
     );
 }
 .page-notice--attention .page-notice__header svg {
@@ -83,80 +73,70 @@ span[role="region"].page-notice {
         var(--color-foreground-on-attention)
     );
 }
-
 .page-notice--confirmation {
     background-color: var(
         --page-notice-confirmation-background-color,
-        var(--color-background-confirmation)
+        var(--color-background-success)
     );
     border-color: var(
         --page-notice-confirmation-border-color,
-        var(--color-stroke-confirmation)
+        var(--color-border-confirmation)
     );
 }
 .page-notice--confirmation .page-notice__header svg {
     color: var(
         --page-notice-confirmation-icon-color,
-        var(--color-foreground-on-confirmation)
+        var(--color-foreground-on-success)
     );
 }
-
 .page-notice--information {
     background-color: var(
         --page-notice-information-background-color,
-        var(--color-background-information)
+        var(--color-background-accent)
     );
     border-color: var(
         --page-notice-information-border-color,
-        var(--color-stroke-information)
+        var(--color-border-accent)
     );
 }
 .page-notice--information .page-notice__header svg {
     color: var(
         --page-notice-information-icon-color,
-        var(--color-foreground-on-information)
+        var(--color-foreground-on-success)
     );
 }
-
 .page-notice--general {
     background-color: var(
         --page-notice-general-background-color,
         var(--color-background-inverse)
     );
 }
-
 .page-notice__header {
     grid-column: 1;
 }
-
 .page-notice__header,
 .page-notice__main {
     grid-row: 1;
     margin-inline-end: var(--spacing-200);
 }
-
 .page-notice__main {
     grid-column: 1 / 3;
 }
-
 .page-notice__header + .page-notice__main {
     grid-column: 2;
 }
-
 .page-notice__footer {
     grid-column: 4;
     grid-row: 1;
     text-align: right;
 }
-
 .page-notice__main p {
-    font-size: var(--font-size-default);
+    font-size: var(--font-size-body);
     margin: 2px 0 0;
 }
 .page-notice__main .page-notice__title ~ p {
     margin: var(--spacing-50) 0 0;
 }
-
 p.page-notice__cta {
     grid-column: 2;
     grid-row: 2;
@@ -165,7 +145,6 @@ p.page-notice__cta {
     margin-right: var(--spacing-200);
     margin-top: var(--spacing-200);
 }
-
 @media (min-width: 512px) {
     div[role="region"].page-notice,
     section.page-notice {

package/dist/pagination/pagination.css

@@ -1,3 +1,7 @@
+:root {
+    --state-layer-neutral-on-strong: rgb(var(--color-neutral-900-rgb), 0);
+    --state-layer-neutral: rgb(var(--color-neutral-900-rgb), 0);
+}
 nav.pagination {
     align-items: center;
     color: var(
@@ -11,13 +15,11 @@ nav.pagination {
     margin: var(--spacing-100) 0;
     max-width: 100%;
 }
-
 nav.pagination a,
 nav.pagination button {
     color: inherit;
     font-size: 1em;
 }
-
 ol.pagination__items {
     align-items: center;
     box-sizing: border-box;
@@ -33,7 +35,6 @@ ol.pagination__items li:not([hidden]) {
     display: flex;
     justify-content: center;
 }
-
 a.pagination__next,
 a.pagination__previous,
 button.pagination__next,
@@ -42,37 +43,31 @@ button.pagination__previous {
     display: inline-flex;
     justify-content: center;
 }
-
 a.pagination__next,
 button.pagination__next {
     margin-inline-start: var(--spacing-100);
 }
-
 a.pagination__previous,
 button.pagination__previous {
     margin-inline-end: var(--spacing-100);
 }
-
 .pagination__item {
     align-items: center;
     box-sizing: border-box;
     display: inline-flex;
-    font-weight: var(--font-weight-regular);
+    font-weight: var(--font-weight-400);
     height: 44px;
     justify-content: center;
     width: 44px;
 }
-
 button.pagination__item {
     background: none;
     border: none;
     font-family: inherit;
 }
-
 a.pagination__item {
     text-decoration: none;
 }
-
 a.pagination__item,
 button.pagination__item {
     position: relative;
@@ -95,7 +90,7 @@ button.pagination__item[aria-current="page"] {
         --pagination-item-current-foreground-color,
         var(--color-foreground-primary)
     );
-    font-weight: var(--font-weight-bold);
+    font-weight: var(--font-weight-600);
 }
 a.pagination__item[aria-current="page"]:after,
 button.pagination__item[aria-current="page"]:after {
@@ -127,33 +122,55 @@ a.pagination__item:focus:not(:focus-visible),
 button.pagination__item:focus:not(:focus-visible) {
     outline: none;
 }
-
-span.pagination__item button.icon-btn--transparent:focus,
-span.pagination__item button.icon-btn--transparent:hover {
-    background-color: var(--color-state-primary-hover);
+span.pagination__item button.icon-btn--transparent {
+    overflow: hidden;
+    position: relative;
+}
+span.pagination__item button.icon-btn--transparent:after {
+    background-color: var(--color-state-layer-neutral);
+    content: "";
+    inset: 0;
+    pointer-events: none;
+    position: absolute;
 }
-span.pagination__item button.icon-btn--transparent:active {
-    background-color: var(--color-state-primary-active);
+span.pagination__item
+    button.icon-btn--transparent:not(
+        [disabled],
+        [aria-disabled="true"]
+    ):hover:after,
+span.pagination__item button.icon-btn--transparent[href]:hover:after {
+    background-color: var(--color-state-layer-hover);
+}
+span.pagination__item
+    button.icon-btn--transparent:not(
+        [disabled],
+        [aria-disabled="true"]
+    ):focus-visible:after,
+span.pagination__item button.icon-btn--transparent[href]:focus-visible:after {
+    background-color: var(--color-state-layer-focus);
+}
+span.pagination__item
+    button.icon-btn--transparent:not(
+        [disabled],
+        [aria-disabled="true"]
+    ):active:after,
+span.pagination__item button.icon-btn--transparent[href]:active:after {
+    background-color: var(--color-state-layer-pressed);
 }
-
 nav.pagination--fluid {
     width: 100%;
 }
-
 nav.pagination--fluid ol.pagination__items {
     flex-grow: 1;
     max-width: none;
 }
-
 nav.pagination--fluid ol.pagination__items li {
     flex: 1 0 var(--spacing-600);
 }
-
 [dir="rtl"] nav.pagination svg.icon--arrow-left-16,
 [dir="rtl"] nav.pagination svg.icon--arrow-right-16 {
     transform: rotate(180deg);
 }
-
 @media (min-width: 768px) {
     nav.pagination {
         margin: var(--spacing-200) 0;

package/dist/panel-dialog/panel-dialog.css

@@ -19,7 +19,6 @@
 .panel-dialog[role="dialog"]:not([hidden]) {
     display: flex;
 }
-
 .panel-dialog__window {
     background-color: var(
         --dialog-window-background-color,
@@ -35,12 +34,10 @@
     overflow-y: auto;
     width: 100%;
 }
-
 .panel-dialog__window--end {
     align-self: flex-end;
     border-left: 1px solid rgba(153, 153, 153, 0.18);
 }
-
 .panel-dialog__header {
     display: flex;
     flex-shrink: 0;
@@ -61,13 +58,11 @@
 .panel-dialog__header > :last-child:not(:only-child) {
     margin-inline-start: var(--spacing-200);
 }
-
 .panel-dialog__header .fake-link {
     align-self: flex-start;
     outline-offset: 4px;
     text-decoration: none;
 }
-
 .panel-dialog__main {
     box-sizing: border-box;
     flex: 1 1 auto;
@@ -82,7 +77,6 @@
 .panel-dialog__main > :last-child {
     margin-bottom: 0;
 }
-
 .panel-dialog__footer {
     display: flex;
     flex-direction: column;
@@ -104,15 +98,12 @@ button.icon-btn.panel-dialog__prev {
     width: 32px;
     z-index: 1;
 }
-
 button.icon-btn.panel-dialog__prev {
     margin-inline-end: var(--spacing-200);
 }
-
 .panel-dialog__title:not(:first-child) {
     margin-left: var(--spacing-200);
 }
-
 .panel-dialog--hide.panel-dialog--mask-fade,
 .panel-dialog--show.panel-dialog--mask-fade {
     transition: background-color 0.16s ease-out;
@@ -125,7 +116,6 @@ button.icon-btn.panel-dialog__prev {
 .panel-dialog--show .panel-dialog__window--slide {
     transition: transform 0.32s ease-out;
 }
-
 .panel-dialog--hide.panel-dialog--hide,
 .panel-dialog--hide.panel-dialog--show-init,
 .panel-dialog--show-init.panel-dialog--hide,
@@ -146,18 +136,15 @@ button.icon-btn.panel-dialog__prev {
 .panel-dialog--show-init .panel-dialog__window--slide-right {
     transform: translateX(100%);
 }
-
 .panel-dialog--hide .panel-dialog__window--slide,
 .panel-dialog--show-init .panel-dialog__window--slide {
     transform: translateX(-100%);
 }
-
 .panel-dialog--hide .panel-dialog__window--end.panel-dialog__window--slide,
 .panel-dialog--show-init
     .panel-dialog__window--end.panel-dialog__window--slide {
     transform: translateX(100%);
 }
-
 .panel-dialog--hide-init.panel-dialog--hide-init,
 .panel-dialog--hide-init.panel-dialog--show,
 .panel-dialog--show.panel-dialog--hide-init,
@@ -174,7 +161,6 @@ button.icon-btn.panel-dialog__prev {
 .panel-dialog--show .panel-dialog__window--slide {
     transform: translateX(0);
 }
-
 [dir="rtl"] button.icon-btn.panel-dialog__prev .icon {
     transform: rotate(180deg);
 }

package/dist/phone-input/phone-input.css

@@ -2,31 +2,26 @@
 .phone-input .listbox-button {
     display: inline-flex;
 }
-
 .phone-input button.btn {
     border-radius: 8px 0 0 8px;
     border-right-style: none;
     min-width: 64px;
     padding-inline: var(--spacing-200) var(--spacing-100);
 }
-
 .phone-input button.btn:focus-visible {
     border-right-style: solid;
-    box-shadow: 0 0 0 1px var(--color-stroke-strong);
+    box-shadow: 0 0 0 1px var(--color-border-strong);
     outline: none;
     z-index: 1;
 }
-
 .phone-input button.btn svg.icon:last-child {
     margin-inline-start: var(--spacing-50);
 }
-
 .phone-input .listbox-button span.fflag,
 .phone-input .listbox-button svg.flag {
     height: 18px;
     width: 24px;
 }
-
 .phone-input .listbox-button__value,
 .phone-input .listbox__value {
     display: inline-flex;
@@ -43,93 +38,78 @@
 .phone-input .listbox__value span:last-child {
     color: var(--color-foreground-secondary);
 }
-
 .phone-input .listbox-button__value span:first-of-type,
 .phone-input .listbox__value span:first-of-type {
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
 }
-
 .phone-input .textbox {
     border-radius: 0 var(--border-radius-50) var(--border-radius-50) 0;
 }
-
 .phone-input--large {
     height: 48px;
 }
-
 .phone-input--fluid,
 .phone-input--fluid .textbox {
     width: 100%;
 }
-
 .phone-input--readonly .listbox-button button[aria-disabled="true"],
 .phone-input--readonly .listbox-button button[disabled] {
-    border-color: var(--textbox-border-color, var(--color-stroke-default));
+    border-color: var(--textbox-border-color, var(--color-border-medium));
 }
-
 .phone-input--readonly .textbox span:first-child {
     color: var(
         --textbox-disabled-foreground-color,
         var(--color-foreground-secondary)
     );
 }
-
 .phone-input.phone-input--readonly .textbox.textbox {
     background-color: var(
         --textbox-background-color,
         var(--color-background-secondary)
     );
-    border-color: var(--textbox-border-color, var(--color-stroke-default));
+    border-color: var(--textbox-border-color, var(--color-border-medium));
     border-style: solid;
     border-width: 1px;
 }
-
 .phone-input--readonly input.textbox__control[readonly] {
     color: var(--textbox-foreground-color, var(--color-foreground-secondary));
 }
-
 .phone-input--disabled span.fflag,
 .phone-input--disabled svg.flag {
     filter: var(--color-media-disabled-filter);
 }
-
 .phone-input--disabled .textbox {
     border-color: var(
         --textbox-disabled-border-color,
         var(--color-background-disabled)
     );
 }
-
 .phone-input--disabled .textbox span:first-child {
     color: var(
         --textbox-disabled-foreground-color,
         var(--color-foreground-disabled)
     );
 }
-
 .phone-input.phone-input--error .textbox.textbox {
     border-color: var(
         --textbox-invalid-foreground-color,
-        var(--color-stroke-attention)
+        var(--color-border-attention)
     );
-    border-left-color: var(--textbox-border-color, var(--color-stroke-default));
+    border-left-color: var(--textbox-border-color, var(--color-border-medium));
 }
 .phone-input .floating-label .floating-label__label {
     z-index: 2;
 }
-
 .phone-input .floating-label .textbox > span:first-child {
     padding-bottom: 2px;
     padding-top: 18px;
 }
-
 .phone-input .floating-label--large .textbox > span:first-child {
     padding-bottom: 5px;
     padding-top: 23px;
 }
-
 @media screen and (min-width: 320px) {
     .phone-input .listbox-button__value span:first-of-type,
     .phone-input .listbox__value span:first-of-type {

package/dist/progress-bar/progress-bar.css

@@ -4,15 +4,13 @@
     height: 4px;
     margin: var(--spacing-100) 0;
 }
-
 .progress-bar::-webkit-progress-bar {
     background-color: var(
         --progress-bar-background-color,
-        var(--color-stroke-subtle)
+        var(--color-border-subtle)
     );
     border-radius: 8px;
 }
-
 .progress-bar::-webkit-progress-value {
     background-color: var(
         --progress-bar-foreground-color,
@@ -22,7 +20,6 @@
     -webkit-transition: width 0.45s ease-in-out;
     transition: width 0.45s ease-in-out;
 }
-
 .progress-bar::-moz-progress-bar {
     background-color: var(
         --progress-bar-foreground-color,
@@ -30,11 +27,9 @@
     );
     border-radius: 8px;
 }
-
 .progress-bar--fluid {
     width: 100%;
 }
-
 @media (min-width: 512px) {
     .progress-bar {
         margin: var(--spacing-200) 0;