@ebay/skin 19.14.3 → 19.16.0

package/dist/floating-label/floating-label.css

@@ -1,15 +1,12 @@
 .floating-label {
     position: relative;
 }
-
 span.floating-label {
     display: inline-block;
 }
-
 div.floating-label {
     display: block;
 }
-
 label.floating-label__label {
     background-color: initial;
     color: var(--floating-label-color, var(--color-foreground-secondary));
@@ -23,10 +20,9 @@ label.floating-label__label {
     transform: scale(0.75) translateY(2px);
     transform-origin: left;
     white-space: nowrap;
-    width: calc(100% - 40px);
+    width: calc(133.33333% - var(--spacing-200) * 2 / 0.75 - 2.66667px);
     z-index: 1;
 }
-
 .floating-label--opaque label.floating-label__label {
     background-color: var(
         --floating-label-background-color,
@@ -36,64 +32,55 @@ label.floating-label__label {
     top: -3px;
     width: calc(100% - 40px);
 }
-
 label.floating-label__label--focus {
     color: var(--floating-label-focus-color, var(--color-foreground-primary));
 }
-
 .floating-label--opaque label.floating-label__label--focus {
     background-color: var(
         --floating-label-focus-background-color,
         var(--color-background-primary)
     );
 }
-
 .floating-label--large label.floating-label__label {
     transform: scale(0.75) translateY(3px);
 }
-
 label.floating-label__label--inline {
-    font-size: var(--font-size-default);
+    font-size: var(--font-size-body);
     transform: translateY(12px);
+    width: calc(100% - 40px);
 }
-
 .floating-label--large label.floating-label__label--inline {
     transform: translateY(16px);
 }
-
 label.floating-label__label--animate {
     transition:
         transform 0.3s ease,
+        width 0.3s ease,
         bottom 0.3s ease;
 }
-
 label.floating-label__label--disabled {
     color: var(
         --floating-label-disabled-color,
         var(--color-foreground-disabled)
     );
 }
-
 .floating-label--opaque label.floating-label__label--disabled {
     background-color: var(
         --floating-label-disabled-background-color,
         var(--color-background-secondary)
     );
 }
-
 label.floating-label__label--invalid {
     color: var(
         --floating-label-invalid-color,
         var(--color-foreground-attention)
     );
 }
-
 .floating-label .combobox__control > input,
 .floating-label .textbox__control {
     padding-bottom: 2px;
     padding-top: 18px;
 }
-
 .floating-label--large .combobox__control > input,
 .floating-label--large .textbox__control {
     padding-bottom: 5px;
@@ -102,7 +89,6 @@ label.floating-label__label--invalid {
 .floating-label .select select {
     line-height: 52px !important;
 }
-
 .floating-label .select--large select {
     line-height: 60px !important;
 }
@@ -121,14 +107,12 @@ label.floating-label__label.floating-label__label--inline:has(
     ) {
     transform: scale(0.75) translateY(2px);
 }
-
 .floating-label--large
     label.floating-label__label.floating-label__label--inline:has(
         + .textbox > :-webkit-autofill
     ) {
     transform: scale(0.75) translateY(3px);
 }
-
 .floating-label--large
     label.floating-label__label.floating-label__label--inline:has(
         + .textbox > :autofill

package/dist/fullscreen-dialog/fullscreen-dialog.css

@@ -19,11 +19,9 @@
 .fullscreen-dialog[role="dialog"]:not([hidden]) {
     display: flex;
 }
-
 .fullscreen-dialog--no-mask[role="dialog"] {
     background-color: initial;
 }
-
 .fullscreen-dialog__window {
     background-color: var(
         --dialog-window-background-color,
@@ -38,7 +36,6 @@
     overflow-y: auto;
     width: 100%;
 }
-
 .fullscreen-dialog__header {
     display: flex;
     flex-shrink: 0;
@@ -59,13 +56,11 @@
 .fullscreen-dialog__header > :last-child:not(:only-child) {
     margin-inline-start: var(--spacing-200);
 }
-
 .fullscreen-dialog__header .fake-link {
     align-self: flex-start;
     outline-offset: 4px;
     text-decoration: none;
 }
-
 .fullscreen-dialog__main {
     box-sizing: border-box;
     flex: 1 1 auto;
@@ -79,7 +74,6 @@
 .fullscreen-dialog__main > :last-child {
     margin-bottom: 0;
 }
-
 .fullscreen-dialog__footer {
     display: flex;
     flex-direction: column;
@@ -90,7 +84,6 @@
 .fullscreen-dialog__footer > :not(:first-child) {
     margin-top: var(--spacing-200);
 }
-
 button.icon-btn.fullscreen-dialog__close {
     height: 32px;
     min-width: 32px;
@@ -104,7 +97,6 @@ button.fullscreen-dialog__close {
     position: relative;
     z-index: 1;
 }
-
 .fullscreen-dialog--hide.fullscreen-dialog--mask-fade,
 .fullscreen-dialog--show.fullscreen-dialog--mask-fade {
     transition: background-color 0.16s ease-out;
@@ -123,7 +115,6 @@ button.fullscreen-dialog__close {
 .fullscreen-dialog--show .fullscreen-dialog__window--slide-end {
     transition: transform 0.32s ease-out;
 }
-
 .fullscreen-dialog--hide.fullscreen-dialog--hide,
 .fullscreen-dialog--hide.fullscreen-dialog--show-init,
 .fullscreen-dialog--show-init.fullscreen-dialog--hide,
@@ -148,7 +139,6 @@ button.fullscreen-dialog__close {
 .fullscreen-dialog--show-init .fullscreen-dialog__window--slide-end {
     transform: translateX(100%);
 }
-
 .fullscreen-dialog--hide-init.fullscreen-dialog--hide-init,
 .fullscreen-dialog--hide-init.fullscreen-dialog--show,
 .fullscreen-dialog--show.fullscreen-dialog--hide-init,

package/dist/global/global.css

@@ -5,24 +5,20 @@ body {
         Market Sans,
         Arial,
         sans-serif;
-    font-size: var(--font-size-default);
-    line-height: var(--font-line-height-default);
+    font-size: var(--font-size-body);
+    line-height: var(--font-line-height-250);
     -webkit-text-size-adjust: 100%;
 }
-
 button {
     font-family: inherit;
 }
-
 fieldset {
     border: 0;
     padding: 0;
 }
-
 legend {
     margin-bottom: var(--spacing-100);
 }
-
 a {
     color: var(--color-foreground-link-primary);
 }

package/dist/icon/icon.css

@@ -85,8 +85,8 @@ svg.icon--attention-filled {
     color: var(--color-foreground-attention);
 }
 svg.icon--confirmation-filled {
-    color: var(--color-foreground-confirmation);
+    color: var(--color-foreground-success);
 }
 svg.icon--information-filled {
-    color: var(--color-foreground-information);
+    color: var(--color-foreground-accent);
 }

package/dist/icon-button/icon-button.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);
+}
 a.icon-link {
     align-items: center;
     display: inline-flex;
@@ -5,7 +9,38 @@ a.icon-link {
 a.icon-link > svg {
     margin: 0 auto;
 }
-
+a.icon-link,
+button.icon-btn {
+    overflow: hidden;
+    position: relative;
+}
+a.icon-link:after,
+button.icon-btn:after {
+    background-color: var(--color-state-layer-neutral);
+    border-radius: 50px;
+    content: "";
+    inset: 0;
+    pointer-events: none;
+    position: absolute;
+}
+a.icon-link:not([disabled], [aria-disabled="true"]):hover:after,
+a.icon-link[href]:hover:after,
+button.icon-btn:not([disabled], [aria-disabled="true"]):hover:after,
+button.icon-btn[href]:hover:after {
+    background-color: var(--color-state-layer-hover);
+}
+a.icon-link:not([disabled], [aria-disabled="true"]):focus-visible:after,
+a.icon-link[href]:focus-visible:after,
+button.icon-btn:not([disabled], [aria-disabled="true"]):focus-visible:after,
+button.icon-btn[href]:focus-visible:after {
+    background-color: var(--color-state-layer-focus);
+}
+a.icon-link:not([disabled], [aria-disabled="true"]):active:after,
+a.icon-link[href]:active:after,
+button.icon-btn:not([disabled], [aria-disabled="true"]):active:after,
+button.icon-btn[href]:active:after {
+    background-color: var(--color-state-layer-pressed);
+}
 a.icon-link,
 button.icon-btn {
     align-items: center;
@@ -28,75 +63,76 @@ button.icon-btn > svg {
     max-width: 75%;
     position: relative;
 }
-a.icon-link:focus,
-a.icon-link:hover,
-button.icon-btn:focus,
-button.icon-btn:hover {
-    background-color: var(--color-state-secondary-hover);
-}
-a.icon-link:active,
-button.icon-btn:active {
-    background-color: var(--color-state-secondary-active);
-}
 a.icon-link:not(:focus-visible),
 button.icon-btn:not(:focus-visible) {
     outline: none;
 }
-
 a.icon-link.icon-link--primary,
 button.icon-btn.icon-btn--primary {
     background-color: var(--color-background-accent);
-    border-color: var(--color-stroke-accent);
+    border-color: var(--color-border-accent);
     color: var(--color-foreground-on-accent);
 }
-
 a.icon-link.icon-link--primary > svg,
 button.icon-btn.icon-btn--primary > svg {
     fill: var(--color-foreground-on-accent);
 }
-
 a.icon-link.icon-link--secondary > svg,
 button.icon-btn.icon-btn--secondary > svg {
     fill: var(--color-foreground-accent);
 }
-
 a.icon-link.icon-link--small .progress-spinner,
 button.icon-btn.icon-btn--small .progress-spinner {
     height: 20px;
     width: 20px;
 }
-
 a.icon-link.icon-link--transparent > svg,
 button.icon-btn.icon-btn--transparent > svg {
     max-width: 100%;
 }
-
 a.icon-link.icon-link--small,
 button.icon-btn.icon-btn--small {
     height: 32px;
     width: 32px;
 }
-
 a.icon-link.icon-link--large,
 button.icon-btn.icon-btn--large {
     height: 48px;
     width: 48px;
 }
 a.icon-link--transparent,
-a.icon-link--transparent:active,
-a.icon-link--transparent:focus,
-a.icon-link--transparent:hover,
-button.icon-btn--transparent,
-button.icon-btn--transparent:active,
-button.icon-btn--transparent:focus,
-button.icon-btn--transparent:hover {
+button.icon-btn--transparent {
+    background-color: initial;
+}
+a.icon-link--transparent:not([disabled], [aria-disabled="true"]):active:after,
+a.icon-link--transparent:not(
+        [disabled],
+        [aria-disabled="true"]
+    ):focus-visible:after,
+a.icon-link--transparent:not([disabled], [aria-disabled="true"]):hover:after,
+a.icon-link--transparent[href]:active:after,
+a.icon-link--transparent[href]:focus-visible:after,
+a.icon-link--transparent[href]:hover:after,
+button.icon-btn--transparent:not(
+        [disabled],
+        [aria-disabled="true"]
+    ):active:after,
+button.icon-btn--transparent:not(
+        [disabled],
+        [aria-disabled="true"]
+    ):focus-visible:after,
+button.icon-btn--transparent:not(
+        [disabled],
+        [aria-disabled="true"]
+    ):hover:after,
+button.icon-btn--transparent[href]:active:after,
+button.icon-btn--transparent[href]:focus-visible:after,
+button.icon-btn--transparent[href]:hover:after {
     background-color: initial;
 }
-
 a.icon-link:visited > svg {
     fill: var(--color-foreground-primary);
 }
-
 a:not([href]).icon-link > svg,
 a[aria-disabled="true"].icon-link > svg,
 button[aria-disabled="true"].icon-btn > svg,
@@ -114,16 +150,13 @@ button[disabled].icon-btn:focus > svg,
 button[disabled].icon-btn:hover > svg {
     fill: var(--color-background-disabled);
 }
-
 a.icon-link:visited:focus > svg,
 a.icon-link:visited:hover > svg {
     fill: var(--color-foreground-primary);
 }
-
 a.icon-link.icon-link--primary:visited > svg {
     fill: var(--color-foreground-on-accent);
 }
-
 a.icon-link--badged,
 button.icon-btn--badged {
     overflow: visible;
@@ -145,7 +178,7 @@ button.icon-btn > svg.icon--confirmation-filled-16,
 button.icon-btn > svg.icon--confirmation-filled-16:hover,
 button.icon-btn > svg.icon--confirmation-filled-24,
 button.icon-btn > svg.icon--confirmation-filled-24:hover {
-    fill: var(--color-foreground-confirmation);
+    fill: var(--color-foreground-success);
 }
 a.icon-link > svg.icon--attention-filled-16,
 a.icon-link > svg.icon--attention-filled-16:hover,
@@ -165,9 +198,8 @@ button.icon-btn > svg.icon--information-filled-16,
 button.icon-btn > svg.icon--information-filled-16:hover,
 button.icon-btn > svg.icon--information-filled-24,
 button.icon-btn > svg.icon--information-filled-24:hover {
-    fill: var(--color-foreground-information);
+    fill: var(--color-foreground-accent);
 }
-
 a.icon-link.icon-link--primary,
 a.icon-link.icon-link--secondary,
 a.icon-link.icon-link--tertiary,
@@ -176,35 +208,30 @@ button.icon-btn.icon-btn--secondary,
 button.icon-btn.icon-btn--tertiary {
     border-width: 1px;
 }
-
 a:not([href]).icon-link.icon-link--primary,
 a[aria-disabled="true"].icon-link.icon-link--primary,
 button[aria-disabled="true"].icon-btn.icon-btn--primary,
 button[disabled].icon-btn.icon-btn--primary {
     background-color: var(--color-background-disabled);
-    border-color: var(--color-stroke-disabled);
+    border-color: var(--color-border-disabled);
 }
-
 a:not([href]).icon-link.icon-link--primary > svg,
 a[aria-disabled="true"].icon-link.icon-link--primary > svg,
 button[aria-disabled="true"].icon-btn.icon-btn--primary > svg,
 button[disabled].icon-btn.icon-btn--primary > svg {
     fill: var(--color-foreground-on-accent);
 }
-
 a.icon-link.icon-link--primary .progress-spinner,
 button.icon-btn.icon-btn--primary .progress-spinner {
     --color-spinner-icon-background: var(--color-background-primary);
     --color-spinner-icon-foreground: #8fa3f8;
 }
-
 a.icon-link.icon-link--secondary,
 button.icon-btn.icon-btn--secondary {
     background-color: initial;
-    border-color: var(--color-stroke-accent);
+    border-color: var(--color-border-accent);
     color: var(--color-foreground-accent);
 }
-
 a.icon-link.icon-link--primary:not([disabled], [aria-disabled="true"]):focus,
 a.icon-link.icon-link--primary:not([disabled], [aria-disabled="true"]):hover,
 button.icon-btn.icon-btn--primary:not([disabled], [aria-disabled="true"]):focus,
@@ -222,78 +249,33 @@ button.icon-btn.icon-btn--primary:not(
     ):active {
     filter: brightness(92%);
 }
-
 a.icon-link.icon-link--secondary .progress-spinner,
 a.icon-link.icon-link--tertiary .progress-spinner,
 button.icon-btn.icon-btn--secondary .progress-spinner,
 button.icon-btn.icon-btn--tertiary .progress-spinner {
     --color-spinner-icon-foreground: #3665f366;
 }
-
 a:not([href]).icon-link.icon-link--secondary,
 a[aria-disabled="true"].icon-link.icon-link--secondary,
 button[aria-disabled="true"].icon-btn.icon-btn--secondary,
 button[disabled].icon-btn.icon-btn--secondary {
-    border-color: var(--color-stroke-disabled);
+    border-color: var(--color-border-disabled);
 }
-
 a:not([href]).icon-link.icon-blinktn--secondary > svg,
 a[aria-disabled="true"].icon-link.icon-link--secondary > svg,
 button[aria-disabled="true"].icon-btn.icon-btn--secondary > svg,
 button[disabled].icon-btn.icon-btn--secondary > svg {
     fill: var(--color-foreground-disabled);
 }
-
-a.icon-link.icon-link--secondary:not([disabled], [aria-disabled="true"]):focus,
-a.icon-link.icon-link--secondary:not([disabled], [aria-disabled="true"]):hover,
-button.icon-btn.icon-btn--secondary:not(
-        [disabled],
-        [aria-disabled="true"]
-    ):focus,
-button.icon-btn.icon-btn--secondary:not(
-        [disabled],
-        [aria-disabled="true"]
-    ):hover {
-    background-color: var(--color-state-secondary-hover);
-}
-a.icon-link.icon-link--secondary:not([disabled], [aria-disabled="true"]):active,
-button.icon-btn.icon-btn--secondary:not(
-        [disabled],
-        [aria-disabled="true"]
-    ):active {
-    background-color: var(--color-state-secondary-active);
-}
-
 a.icon-link.icon-link--tertiary,
 button.icon-btn.icon-btn--tertiary {
     background-color: initial;
-    border-color: var(--color-stroke-default);
+    border-color: var(--color-border-medium);
     color: var(--color-foreground-accent);
 }
-
 a:not([href]).icon-link.icon-link--tertiary,
 a[aria-disabled="true"].icon-link.icon-link--tertiary,
 button[aria-disabled="true"].icon-btn.icon-btn--tertiary,
 button[disabled].icon-btn.icon-btn--tertiary {
-    border-color: var(--color-stroke-disabled);
-}
-
-a.icon-link.icon-link--tertiary:not([disabled], [aria-disabled="true"]):focus,
-a.icon-link.icon-link--tertiary:not([disabled], [aria-disabled="true"]):hover,
-button.icon-btn.icon-btn--tertiary:not(
-        [disabled],
-        [aria-disabled="true"]
-    ):focus,
-button.icon-btn.icon-btn--tertiary:not(
-        [disabled],
-        [aria-disabled="true"]
-    ):hover {
-    background-color: var(--color-state-secondary-hover);
-}
-a.icon-link.icon-link--tertiary:not([disabled], [aria-disabled="true"]):active,
-button.icon-btn.icon-btn--tertiary:not(
-        [disabled],
-        [aria-disabled="true"]
-    ):active {
-    background-color: var(--color-state-secondary-active);
+    border-color: var(--color-border-disabled);
 }

package/dist/infotip/infotip.css

@@ -4,11 +4,9 @@
 .infotip {
     position: relative;
 }
-
 span.infotip {
     display: inline-block;
 }
-
 .infotip__overlay {
     box-shadow: var(--bubble-shadow);
     display: none;
@@ -20,7 +18,6 @@ span.infotip {
     transform: scaleX(1);
     width: max-content;
 }
-
 .infotip__mask,
 .infotip__overlay {
     background-color: var(
@@ -31,22 +28,18 @@ span.infotip {
     color: var(--infotip-foreground-color, var(--color-foreground-primary));
     z-index: 1;
 }
-
 .infotip__mask {
     position: relative;
 }
-
 span.infotip__mask {
     display: block;
 }
-
 .infotip__cell {
     display: flex;
     overflow-wrap: anywhere;
     padding: var(--spacing-100) var(--spacing-200);
     word-break: normal;
 }
-
 .infotip__content {
     flex-grow: 1;
 }
@@ -56,7 +49,6 @@ span.infotip__mask {
 .infotip__content p:not(:first-of-type) {
     margin-top: var(--spacing-50);
 }
-
 .infotip__pointer {
     background-color: var(
         --infotip-background-color,
@@ -68,83 +60,69 @@ span.infotip__mask {
     width: 8px;
     z-index: 0;
 }
-
 .infotip__pointer--top-left {
     left: 12px;
     top: -4px;
 }
-
 .infotip__pointer--top {
     left: calc(50% - 4px);
     top: -4px;
 }
-
 .infotip__pointer--top-right {
     left: auto;
     right: 12px;
     top: -4px;
 }
-
 .infotip__pointer--bottom-left {
     bottom: -4px;
     left: 12px;
     top: auto;
 }
-
 .infotip__pointer--bottom {
     bottom: -4px;
     left: calc(50% - 4px);
     top: auto;
 }
-
 .infotip__pointer--bottom-right {
     bottom: -4px;
     left: auto;
     right: 12px;
     top: auto;
 }
-
 .infotip__pointer--left {
     left: -4px;
     top: calc(50% - 4px);
 }
-
 .infotip__pointer--left-bottom {
     bottom: 12px;
     left: -4px;
     top: auto;
 }
-
 .infotip__pointer--left-top {
     left: -4px;
     top: 12px;
 }
-
 .infotip__pointer--right {
     left: auto;
     right: -4px;
     top: calc(50% - 4px);
 }
-
 .infotip__pointer--right-bottom {
     bottom: 12px;
     left: auto;
     right: -4px;
     top: auto;
 }
-
 .infotip__pointer--right-top {
     left: auto;
     right: -4px;
     top: 12px;
 }
-
 .infotip__heading {
     font-size: 1em;
     font-weight: 700;
     margin: 0 0 var(--spacing-50);
 }
-
 .infotip__host[aria-expanded="true"] ~ .infotip__overlay,
 span.infotip__heading {
     display: block;
@@ -158,12 +136,10 @@ span.infotip__heading {
     overflow: visible;
     width: 20px;
 }
-
 .infotip__close,
 button.infotip__close {
     margin-left: var(--spacing-200);
 }
-
 @media (min-width: 512px) {
     .infotip__overlay {
         max-width: 400px;

package/dist/inline-notice/inline-notice.css

@@ -1,25 +1,20 @@
 .inline-notice {
     margin: var(--spacing-100) 0;
 }
-
 div.inline-notice {
     display: flex;
 }
-
 span.inline-notice {
     display: inline-flex;
 }
-
 .inline-notice__header {
     display: flex;
     margin-inline-end: var(--spacing-100);
     margin-top: var(--spacing-50);
 }
-
 .inline-notice p {
     margin: 3px 0;
 }
-
 .inline-notice a,
 .inline-notice button.fake-link {
     color: var(--color-foreground-primary);