@ebay/skin 19.34.0 → 19.35.0

package/dist/toggle-button-group/toggle-button-group.css

@@ -15,9 +15,11 @@
     --row-gallery-toggle-buttons-md: 4;
     --row-gallery-toggle-buttons-xl: 6;
 }
+
 .toggle-button-group {
     container: toggle-buttons-container/inline-size;
 }
+
 @supports not (contain: inline-size) {
     @media (max-width: 320px) {
         .toggle-button-group[data-columns-min="1"] ul {
@@ -52,11 +54,13 @@
     padding: 0;
     width: 100%;
 }
+
 .toggle-button-group li {
     display: inline-block;
     min-height: var(--toggle-button-height-min);
     width: 100%;
 }
+
 .toggle-button-group .toggle-button {
     height: 100%;
     margin: 0;
@@ -66,34 +70,42 @@
 .toggle-button-group--list-layout ul {
     grid-template-columns: repeat(var(--row-list-toggle-buttons-min), 1fr);
 }
+
 .toggle-button-group--list-layout .toggle-button {
     justify-content: left;
     max-width: 100%;
     min-width: auto;
 }
+
 .toggle-button-group--gallery-layout ul {
     grid-template-columns: repeat(var(--row-gallery-toggle-buttons-min), 1fr);
 }
+
 .toggle-button-group--gallery-layout li {
     max-width: 100%;
 }
+
 .toggle-button-group--gallery-layout .toggle-button {
     flex-direction: column;
     max-width: 100%;
     min-width: auto;
 }
+
 .toggle-button-group--list-layout .toggle-button__content:not(:only-child),
 .toggle-button-group--list-layout .toggle-button__image-container {
     align-self: flex-start;
 }
+
 .toggle-button-group--gallery-layout .toggle-button {
     justify-content: flex-start;
 }
+
 .toggle-button-group--gallery-layout .toggle-button__icon,
 .toggle-button-group--gallery-layout .toggle-button__image {
     margin-bottom: 0;
     margin-right: 0;
 }
+
 .toggle-button-group--gallery-layout
     .toggle-button__icon
     ~ .toggle-button__content,
@@ -102,24 +114,28 @@
     ~ .toggle-button__content {
     align-self: flex-start;
 }
+
 .toggle-button-group--gallery-layout .toggle-button__icon,
 .toggle-button-group--gallery-layout .toggle-button__image-container {
     margin-bottom: 0;
     margin-right: 0;
     text-align: left;
 }
+
 .toggle-button-group--gallery-layout .toggle-button__image-container {
     padding-bottom: 60%;
     position: relative;
     text-align: center;
     width: 100%;
 }
+
 .toggle-button-group--gallery-layout .toggle-button__image {
     height: 100%;
     inset: 0;
     position: absolute;
     width: 100%;
 }
+
 .toggle-button-group--gallery-layout .toggle-button__image-container img {
     height: 100%;
     max-height: 200px;

package/dist/tooltip/tooltip.css

@@ -4,9 +4,11 @@
 .tooltip {
     position: relative;
 }
+
 span.tooltip {
     display: inline-block;
 }
+
 .tooltip__overlay {
     box-shadow: var(--bubble-shadow);
     display: none;
@@ -18,22 +20,26 @@ span.tooltip {
     transform: scaleX(1);
     width: max-content;
 }
+
 .tooltip__mask,
 .tooltip__overlay {
     border-radius: var(--bubble-border-radius, var(--border-radius-50));
     z-index: 1;
 }
+
 .tooltip__mask {
+    position: relative;
     background-color: var(
         --tooltip-background-color,
         var(--color-background-inverse)
     );
     color: var(--tooltip-foreground-color, var(--color-foreground-on-inverse));
-    position: relative;
 }
+
 span.tooltip__mask {
     display: block;
 }
+
 .tooltip__cell {
     display: flex;
     overflow-wrap: anywhere;
@@ -46,6 +52,7 @@ span.tooltip__mask {
 .tooltip__cell a:focus {
     outline: 1px dashed currentColor;
 }
+
 .tooltip__content {
     flex-grow: 1;
 }
@@ -55,91 +62,107 @@ span.tooltip__mask {
 .tooltip__content p:not(:first-of-type) {
     margin-top: var(--spacing-50);
 }
+
 button.tooltip__close {
     align-self: flex-start;
     background: none;
     border: 0;
     flex-shrink: 0;
     height: var(--spacing-400);
-    margin: calc(var(--spacing-100) * -1) calc(var(--spacing-100) * -1) 0
+    margin: calc(-1 * var(--spacing-100)) calc(-1 * var(--spacing-100)) 0
         var(--spacing-100);
     padding: 0;
     white-space: nowrap;
     width: 32px;
 }
+
 .tooltip__pointer {
-    background-color: var(
-        --tooltip-background-color,
-        var(--color-background-inverse)
-    );
     height: 8px;
     position: absolute;
     transform: rotate(45deg);
     width: 8px;
     z-index: 0;
+    background-color: var(
+        --tooltip-background-color,
+        var(--color-background-inverse)
+    );
 }
+
 .tooltip__pointer--top-left {
-    left: 12px;
     top: -4px;
+    left: 12px;
 }
+
 .tooltip__pointer--top {
-    left: calc(50% - 4px);
     top: -4px;
+    left: calc(50% - 4px);
 }
+
 .tooltip__pointer--top-right {
+    top: -4px;
     left: auto;
     right: 12px;
-    top: -4px;
 }
+
 .tooltip__pointer--bottom-left {
     bottom: -4px;
-    left: 12px;
     top: auto;
+    left: 12px;
 }
+
 .tooltip__pointer--bottom {
     bottom: -4px;
-    left: calc(50% - 4px);
     top: auto;
+    left: calc(50% - 4px);
 }
+
 .tooltip__pointer--bottom-right {
     bottom: -4px;
+    top: auto;
     left: auto;
     right: 12px;
-    top: auto;
 }
+
 .tooltip__pointer--left {
-    left: -4px;
     top: calc(50% - 4px);
+    left: -4px;
 }
+
 .tooltip__pointer--left-bottom {
     bottom: 12px;
     left: -4px;
     top: auto;
 }
+
 .tooltip__pointer--left-top {
     left: -4px;
     top: 12px;
 }
+
 .tooltip__pointer--right {
+    top: calc(50% - 4px);
     left: auto;
     right: -4px;
-    top: calc(50% - 4px);
 }
+
 .tooltip__pointer--right-bottom {
     bottom: 12px;
     left: auto;
     right: -4px;
     top: auto;
 }
+
 .tooltip__pointer--right-top {
     left: auto;
     right: -4px;
     top: 12px;
 }
+
 .tooltip--expanded .tooltip__overlay,
 .tooltip__host[aria-expanded="true"] ~ .tooltip__overlay {
     display: block;
 }
+
 @media (min-width: 512px) {
     .tooltip__overlay {
         max-width: 400px;

package/dist/tourtip/tourtip.css

@@ -4,9 +4,11 @@
 .tourtip {
     position: relative;
 }
+
 span.tourtip {
     display: inline-block;
 }
+
 .tourtip__overlay {
     box-shadow: var(--bubble-shadow);
     display: none;
@@ -18,28 +20,32 @@ span.tourtip {
     transform: scaleX(1);
     width: max-content;
 }
+
 .tourtip__mask,
 .tourtip__overlay {
     border-radius: var(--bubble-border-radius, var(--border-radius-100));
     z-index: 1;
 }
+
 .tourtip__mask {
+    position: relative;
     background-color: var(
         --tourtip-background-color,
         var(--color-background-inverse)
     );
     color: var(--tourtip-foreground-color, var(--color-foreground-on-inverse));
-    position: relative;
 }
+
 span.tourtip__mask {
     display: block;
 }
+
 .tourtip__cell {
     display: flex;
-    flex-wrap: wrap;
     overflow-wrap: anywhere;
     padding: var(--spacing-200);
     word-break: normal;
+    flex-wrap: wrap;
 }
 .tourtip__cell a {
     color: var(--tourtip-foreground-color, var(--color-foreground-on-inverse));
@@ -47,6 +53,7 @@ span.tourtip__mask {
 .tourtip__cell a:focus {
     outline: 1px dashed currentColor;
 }
+
 .tourtip__content {
     flex-basis: 0;
     flex-grow: 1;
@@ -57,15 +64,16 @@ span.tourtip__mask {
 .tourtip__content p:not(:first-of-type) {
     margin-top: var(--spacing-50);
 }
+
 .tourtip button.tourtip__close {
+    outline-offset: -2px;
     align-self: flex-start;
     background: none;
     border: 0;
     flex-shrink: 0;
     height: var(--spacing-400);
-    margin: calc(var(--spacing-100) * -1) calc(var(--spacing-100) * -1) 0
+    margin: calc(-1 * var(--spacing-100)) calc(-1 * var(--spacing-100)) 0
         var(--spacing-100);
-    outline-offset: -2px;
     padding: 0;
     white-space: nowrap;
     width: 32px;
@@ -73,84 +81,100 @@ span.tourtip__mask {
 .tourtip button.tourtip__close svg.icon {
     fill: var(--tourtip-foreground-color, var(--color-foreground-on-inverse));
 }
+
 .tourtip__pointer {
-    background-color: var(
-        --tourtip-background-color,
-        var(--color-background-inverse)
-    );
     height: 8px;
     position: absolute;
     transform: rotate(45deg);
     width: 8px;
     z-index: 0;
+    background-color: var(
+        --tourtip-background-color,
+        var(--color-background-inverse)
+    );
 }
+
 .tourtip__pointer--top-left {
-    left: 12px;
     top: -4px;
+    left: 12px;
 }
+
 .tourtip__pointer--top {
-    left: calc(50% - 4px);
     top: -4px;
+    left: calc(50% - 4px);
 }
+
 .tourtip__pointer--top-right {
+    top: -4px;
     left: auto;
     right: 12px;
-    top: -4px;
 }
+
 .tourtip__pointer--bottom-left {
     bottom: -4px;
-    left: 12px;
     top: auto;
+    left: 12px;
 }
+
 .tourtip__pointer--bottom {
     bottom: -4px;
-    left: calc(50% - 4px);
     top: auto;
+    left: calc(50% - 4px);
 }
+
 .tourtip__pointer--bottom-right {
     bottom: -4px;
+    top: auto;
     left: auto;
     right: 12px;
-    top: auto;
 }
+
 .tourtip__pointer--left {
-    left: -4px;
     top: calc(50% - 4px);
+    left: -4px;
 }
+
 .tourtip__pointer--left-bottom {
     bottom: 12px;
     left: -4px;
     top: auto;
 }
+
 .tourtip__pointer--left-top {
     left: -4px;
     top: 12px;
 }
+
 .tourtip__pointer--right {
+    top: calc(50% - 4px);
     left: auto;
     right: -4px;
-    top: calc(50% - 4px);
 }
+
 .tourtip__pointer--right-bottom {
     bottom: 12px;
     left: auto;
     right: -4px;
     top: auto;
 }
+
 .tourtip__pointer--right-top {
     left: auto;
     right: -4px;
     top: 12px;
 }
+
 .tourtip__heading {
     font-size: var(--font-size-large-1);
     font-weight: 700;
     margin: 0 0 var(--spacing-100);
 }
+
 .tourtip--expanded .tourtip__overlay,
 span.tourtip__heading {
     display: block;
 }
+
 .tourtip__footer {
     align-items: center;
     display: flex;
@@ -158,6 +182,7 @@ span.tourtip__heading {
     margin-top: 16px;
     width: 100%;
 }
+
 .tourtip__footer > button.btn--primary {
     background-color: var(
         --tourtip-background-color,
@@ -165,6 +190,7 @@ span.tourtip__heading {
     );
     color: var(--tourtip-foreground-color, var(--color-background-inverse));
 }
+
 .tourtip__footer > a:not(:last-child),
 .tourtip__footer > button:not(:last-child) {
     margin-right: var(--spacing-200);
@@ -182,6 +208,7 @@ span.tourtip__heading {
 .tourtip__index {
     flex: 1;
 }
+
 @media (min-width: 512px) {
     .tourtip__overlay {
         max-width: 400px;

package/dist/typography/typography.css

@@ -2,88 +2,108 @@
     font-size: var(--font-size-giant-3);
     line-height: 52px;
 }
+
 .giant-text-2,
 .giant-text-3 {
     font-weight: var(--font-weight-600);
 }
+
 .giant-text-2 {
     font-size: var(--font-size-giant-2);
     line-height: 46px;
 }
+
 .giant-text-1 {
     font-size: var(--font-size-giant-1);
     line-height: 40px;
 }
+
 .giant-text-1,
 .large-text-2 {
     font-weight: var(--font-weight-600);
 }
+
 .large-text-2 {
     font-size: var(--font-size-large-2);
     line-height: 32px;
 }
+
 .large-text-1 {
     font-size: var(--font-size-large-1);
     font-weight: var(--font-weight-600);
     line-height: 28px;
 }
+
 .medium-text {
     font-size: var(--font-size-medium);
     line-height: 24px;
 }
+
 .regular-text {
     font-size: var(--font-size-body);
     line-height: 20px;
 }
+
 .small-text {
     font-size: var(--font-size-small);
     line-height: 16px;
 }
+
 .bold-text {
     font-weight: var(--font-weight-600);
 }
+
 .secondary-text {
     color: var(
         --typography-secondary-text-color,
         var(--color-foreground-secondary)
     );
 }
+
 .emphasis-text,
 .negative-text {
     color: var(--color-foreground-attention);
 }
+
 .positive-text {
     color: var(--color-foreground-success);
 }
+
 .disabled-text {
     color: var(--color-foreground-disabled);
 }
+
 .giant-product-title,
 .giant-section-title {
     font-size: var(--font-size-large-2);
     line-height: 30px;
 }
+
 .large-product-title,
 .large-section-title {
     font-size: var(--font-size-large-1);
     line-height: 24px;
 }
+
 .medium-product-title,
 .medium-section-title {
     font-size: var(--font-size-medium);
     line-height: 20px;
 }
+
 .small-product-title,
 .small-section-title {
     font-size: var(--font-size-body);
     line-height: 16px;
 }
+
 .giant-section-title,
 .large-section-title,
 .medium-section-title,
 .small-section-title {
     font-weight: var(--font-weight-600);
 }
+
 @media (min-width: 512px) {
     .giant-product-title,
     .giant-section-title {

package/dist/utility/utility.css

@@ -85,29 +85,36 @@
     max-width: 100%;
     object-fit: contain;
 }
+
 .image-disabled {
     filter: var(--color-media-disabled-filter);
 }
+
 .text-truncate {
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
 }
+
 .scrollbars-permanent {
     scroll-behavior: smooth;
     scroll-snap-type: proximity;
     scroll-snap-type: x proximity;
 }
+
 .scrollbars-permanent::-webkit-scrollbar {
     background-color: var(--color-state-layer-focus);
     border-radius: 12px;
 }
+
 .scrollbars-permanent::-webkit-scrollbar:vertical {
     width: 6px;
 }
+
 .scrollbars-permanent::-webkit-scrollbar:horizontal {
     height: 6px;
 }
+
 .scrollbars-permanent::-webkit-scrollbar-thumb {
     background-color: var(--color-foreground-secondary);
     border-color: transparent;