@ebay/skin 19.33.0 → 19.35.0

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

@@ -1,15 +1,18 @@
 .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));
+    background-color: initial;
     display: inline-block;
     left: 16px;
     overflow: hidden;
@@ -20,9 +23,10 @@ label.floating-label__label {
     transform: scale(0.75) translateY(2px);
     transform-origin: left;
     white-space: nowrap;
-    width: calc(133.33333% - var(--spacing-200) * 2 / 0.75 - 2.66667px);
+    width: calc(1.33333 * (100% - 2px - 2 * var(--spacing-200)));
     z-index: 1;
 }
+
 .floating-label--opaque label.floating-label__label {
     background-color: var(
         --floating-label-background-color,
@@ -32,55 +36,66 @@ 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-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;
@@ -89,6 +104,7 @@ label.floating-label__label--invalid {
 .floating-label .select select {
     line-height: 52px !important;
 }
+
 .floating-label .select--large select {
     line-height: 60px !important;
 }
@@ -107,12 +123,14 @@ 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

@@ -15,9 +15,11 @@
 .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,
@@ -27,10 +29,11 @@
     flex: 1 0 auto;
     flex-direction: column;
     min-height: 55px;
+    will-change: opacity, transform;
     overflow-y: auto;
     width: 100%;
-    will-change: opacity, transform;
 }
+
 .fullscreen-dialog__header {
     display: flex;
     flex-shrink: 0;
@@ -51,15 +54,17 @@
 .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 {
+    min-height: auto;
     box-sizing: border-box;
     flex: 1 1 auto;
-    min-height: auto;
     padding: var(--spacing-200);
     position: relative;
 }
@@ -69,6 +74,7 @@
 .fullscreen-dialog__main > :last-child {
     margin-bottom: 0;
 }
+
 .fullscreen-dialog__footer {
     display: flex;
     flex-direction: column;
@@ -79,6 +85,7 @@
 .fullscreen-dialog__footer > :not(:first-child) {
     margin-top: var(--spacing-200);
 }
+
 button.icon-btn.fullscreen-dialog__close {
     height: 32px;
     min-width: 32px;
@@ -92,6 +99,7 @@ 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;
@@ -110,6 +118,7 @@ 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,
@@ -134,6 +143,7 @@ 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

@@ -9,16 +9,20 @@ body {
     line-height: var(--font-line-height-default);
     -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-button/icon-button.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);
 }
+
 a.icon-link {
     align-items: center;
     display: inline-flex;
@@ -9,6 +10,7 @@ a.icon-link {
 a.icon-link > svg {
     margin: 0 auto;
 }
+
 a.icon-link,
 button.icon-btn {
     overflow: hidden;
@@ -91,34 +93,41 @@ button.icon-btn:not(
     ):after {
     inset: -2px;
 }
+
 a.icon-link.icon-link--primary,
 button.icon-btn.icon-btn--primary {
     background-color: var(--color-background-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;
@@ -152,9 +161,11 @@ 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,
@@ -172,10 +183,12 @@ 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);
 }
@@ -226,6 +239,7 @@ button.icon-btn > svg.icon--information-filled-24,
 button.icon-btn > svg.icon--information-filled-24:hover {
     fill: var(--color-foreground-accent);
 }
+
 a.icon-link.icon-link--primary,
 a.icon-link.icon-link--secondary,
 a.icon-link.icon-link--tertiary,
@@ -234,6 +248,7 @@ 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,
@@ -241,23 +256,27 @@ button[disabled].icon-btn.icon-btn--primary {
     background-color: var(--color-background-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-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,
@@ -275,30 +294,35 @@ 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-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--tertiary,
 button.icon-btn.icon-btn--tertiary {
     background-color: initial;
     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,

package/dist/infotip/infotip.css

@@ -4,12 +4,13 @@
 .infotip {
     position: relative;
 }
+
 span.infotip {
     display: inline-block;
 }
+
 .infotip__overlay {
     box-shadow: var(--bubble-shadow);
-    display: none;
     font-size: 14px;
     left: 0;
     max-width: min(344px, 80vw);
@@ -17,29 +18,35 @@ span.infotip {
     top: 0;
     transform: scaleX(1);
     width: max-content;
+    display: none;
 }
+
 .infotip__mask,
 .infotip__overlay {
+    border-radius: var(--bubble-border-radius, var(--border-radius-50));
+    z-index: 1;
     background-color: var(
         --infotip-background-color,
         var(--color-background-elevated)
     );
-    border-radius: var(--bubble-border-radius, var(--border-radius-50));
     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;
 }
@@ -49,6 +56,7 @@ span.infotip__mask {
 .infotip__content p:not(:first-of-type) {
     margin-top: var(--spacing-50);
 }
+
 .infotip__pointer {
     background-color: var(
         --infotip-background-color,
@@ -60,69 +68,83 @@ span.infotip__mask {
     width: 8px;
     z-index: 0;
 }
+
 .infotip__pointer--top-left {
-    left: 12px;
     top: -4px;
+    left: 12px;
 }
+
 .infotip__pointer--top {
-    left: calc(50% - 4px);
     top: -4px;
+    left: calc(50% - 4px);
 }
+
 .infotip__pointer--top-right {
+    top: -4px;
     left: auto;
     right: 12px;
-    top: -4px;
 }
+
 .infotip__pointer--bottom-left {
     bottom: -4px;
-    left: 12px;
     top: auto;
+    left: 12px;
 }
+
 .infotip__pointer--bottom {
     bottom: -4px;
-    left: calc(50% - 4px);
     top: auto;
+    left: calc(50% - 4px);
 }
+
 .infotip__pointer--bottom-right {
     bottom: -4px;
+    top: auto;
     left: auto;
     right: 12px;
-    top: auto;
 }
+
 .infotip__pointer--left {
-    left: -4px;
     top: calc(50% - 4px);
+    left: -4px;
 }
+
 .infotip__pointer--left-bottom {
     bottom: 12px;
     left: -4px;
     top: auto;
 }
+
 .infotip__pointer--left-top {
     left: -4px;
     top: 12px;
 }
+
 .infotip__pointer--right {
+    top: calc(50% - 4px);
     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;
@@ -136,10 +158,12 @@ 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,20 +1,25 @@
 .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);

package/dist/item-tile/item-tile.css

@@ -62,7 +62,6 @@
 .item-tile__section-tertiary {
     grid-area: section-tertiary;
 }
-
 .item-tile__section-tertiary p {
     margin-block-end: 0.2143em;
     margin-block-start: 0;

package/dist/layout-grid/layout-grid.css

@@ -12,18 +12,23 @@
     --layout-grid-columns-xl4: 14;
     container: layout-grid-container/inline-size;
 }
+
 .layout-grid[data-columns-min="1"] > ul {
     grid-template-columns: repeat(1, 1fr);
 }
+
 .layout-grid[data-columns-min="2"] > ul {
     grid-template-columns: repeat(2, 1fr);
 }
+
 .layout-grid[data-columns-min="3"] > ul {
     grid-template-columns: repeat(3, 1fr);
 }
+
 .layout-grid[data-columns-min="4"] > ul {
     grid-template-columns: repeat(4, 1fr);
 }
+
 @container layout-grid-container (inline-size < 320px) {
     .layout-grid[data-columns-min="1"] > ul {
         grid-template-columns: repeat(1, 1fr);
@@ -47,11 +52,13 @@
     padding: 0;
     width: 100%;
 }
+
 .layout-grid > ul > li {
     display: inline-block;
     min-height: var(--layout-grid-cell-height-min);
     width: 100%;
 }
+
 .layout-grid > ul > li::marker {
     content: "";
     font-size: 0;