@ebay/skin 19.34.0 → 19.35.0

package/dist/lightbox-dialog/lightbox-dialog.css

@@ -5,11 +5,12 @@
     --dialog-lightbox-wide-max-width: 896px;
     --dialog-lightbox-narrow-max-width: 480px;
 }
+
 .lightbox-dialog[role="dialog"] {
     align-items: flex-start;
+    justify-content: center;
     background-color: var(--dialog-scrim-color-show);
     inset: 0;
-    justify-content: center;
     position: fixed;
     will-change: background-color;
     z-index: 100000;
@@ -17,22 +18,24 @@
 .lightbox-dialog[role="dialog"]:not([hidden]) {
     display: flex;
 }
+
 .lightbox-dialog__window {
     background-color: var(
         --dialog-window-background-color,
         var(--color-background-primary)
     );
-    border-radius: var(--lightbox-border-radius, var(--border-radius-150));
     display: flex;
     flex: 1 0 auto;
     flex-direction: column;
+    min-height: 55px;
+    will-change: opacity, transform;
+    border-radius: var(--lightbox-border-radius, var(--border-radius-150));
     margin: auto auto 16px;
     max-height: 90%;
     max-width: calc(100% - 32px);
-    min-height: 55px;
     min-width: 208px;
-    will-change: opacity, transform;
 }
+
 .lightbox-dialog__header {
     display: flex;
     flex-shrink: 0;
@@ -53,11 +56,12 @@
 .lightbox-dialog__header > :last-child:not(:only-child) {
     margin-inline-start: var(--spacing-200);
 }
+
 .lightbox-dialog__main {
-    box-sizing: border-box;
-    flex: 1 1 auto;
     min-height: 18px;
     overflow: auto;
+    box-sizing: border-box;
+    flex: 1 1 auto;
     padding: var(--spacing-200);
     position: relative;
 }
@@ -67,6 +71,7 @@
 .lightbox-dialog__main > :last-child {
     margin-bottom: 0;
 }
+
 .lightbox-dialog__footer {
     border-top: 1px solid
         var(--dialog-lightbox-separator-color, var(--color-border-subtle));
@@ -79,6 +84,7 @@
 .lightbox-dialog__footer > :not(:first-child) {
     margin-top: var(--spacing-200);
 }
+
 .lightbox-dialog__image {
     background-position: 50%;
     background-repeat: no-repeat;
@@ -88,15 +94,19 @@
     position: absolute;
     width: 100%;
 }
+
 .lightbox-dialog--expressive .lightbox-dialog__window {
     padding-bottom: var(--spacing-100);
 }
+
 .lightbox-dialog--expressive .lightbox-dialog__header > * {
     margin-top: 218px;
 }
+
 .lightbox-dialog--expressive .lightbox-dialog__header {
     margin: var(--spacing-300) var(--spacing-300) 0;
 }
+
 .lightbox-dialog--expressive .lightbox-dialog__footer,
 .lightbox-dialog--expressive .lightbox-dialog__main {
     padding: var(--spacing-200) var(--spacing-300);
@@ -111,20 +121,25 @@ button.icon-btn.lightbox-dialog__prev {
     width: 32px;
     z-index: 1;
 }
+
 button.icon-btn.lightbox-dialog__prev {
     margin-inline-end: var(--spacing-200);
 }
+
 .lightbox-dialog--expressive button.icon-btn.lightbox-dialog__close,
 .lightbox-dialog--expressive button.icon-btn.lightbox-dialog__prev {
     align-self: self-start;
     margin: 0;
 }
+
 .lightbox-dialog--expressive button.icon-btn.lightbox-dialog__prev + * {
     margin-left: -32px;
 }
+
 .lightbox-dialog__title:not(:first-child) {
     margin-left: var(--spacing-200);
 }
+
 .lightbox-dialog__title--center {
     text-align: center;
 }
@@ -164,6 +179,7 @@ button.icon-btn.lightbox-dialog__prev {
     transition: opacity var(--motion-duration-medium-2)
         var(--motion-easing-continuous) var(--motion-duration-short-3);
 }
+
 .lightbox-dialog--hide.lightbox-dialog--hide,
 .lightbox-dialog--hide.lightbox-dialog--show-init,
 .lightbox-dialog--show-init.lightbox-dialog--hide,
@@ -184,6 +200,7 @@ button.icon-btn.lightbox-dialog__prev {
 .lightbox-dialog--show-init .lightbox-dialog__window--fade {
     opacity: 0;
 }
+
 .lightbox-dialog--hide-init.lightbox-dialog--hide-init,
 .lightbox-dialog--hide-init.lightbox-dialog--show,
 .lightbox-dialog--show.lightbox-dialog--hide-init,
@@ -204,6 +221,7 @@ button.icon-btn.lightbox-dialog__prev {
 .lightbox-dialog--show .lightbox-dialog__window--fade {
     opacity: 1;
 }
+
 @media (prefers-reduced-motion) {
     .lightbox-dialog--hide.lightbox-dialog--mask-fade,
     .lightbox-dialog--hide.lightbox-dialog--mask-fade-slow {
@@ -238,6 +256,7 @@ button.icon-btn.lightbox-dialog__prev {
 .lightbox-dialog--show .lightbox-dialog__window--animate {
     transform: translateY(0);
 }
+
 .lightbox-dialog--hide .lightbox-dialog__window--animate,
 .lightbox-dialog--show-init .lightbox-dialog__window--animate {
     transform: translateY(100%);
@@ -250,9 +269,11 @@ button.icon-btn.lightbox-dialog__prev {
     height: 2px;
     width: 24px;
 }
+
 [dir="rtl"] button.icon-btn.lightbox-dialog__prev .icon--16 {
     transform: rotate(180deg);
 }
+
 .lightbox-dialog--fullscreen .lightbox-dialog__window,
 .lightbox-dialog--large .lightbox-dialog__window {
     align-self: center;
@@ -260,6 +281,7 @@ button.icon-btn.lightbox-dialog__prev {
     margin: var(--spacing-100);
     max-height: 95%;
 }
+
 @media (max-width: 512px) {
     .lightbox-dialog--large .lightbox-dialog__window {
         height: 95%;
@@ -277,8 +299,8 @@ button.icon-btn.lightbox-dialog__prev {
 }
 @media (min-width: 512px) {
     .lightbox-dialog__window {
-        border-radius: var(--lightbox-border-radius, var(--border-radius-100));
         margin: auto;
+        border-radius: var(--lightbox-border-radius, var(--border-radius-100));
         max-width: 88%;
     }
     .lightbox-dialog--narrow .lightbox-dialog__window {

package/dist/link/link.css

@@ -31,17 +31,18 @@ a.standalone-link[aria-disabled="true"] {
     );
     text-decoration: none;
 }
+
 button.fake-link {
     background-color: initial;
     border: 0;
-    color: var(
-        --fake-link-foreground-color,
-        var(--color-foreground-link-primary)
-    );
     font-family: inherit;
     font-size: inherit;
     padding: 0;
     text-decoration: underline;
+    color: var(
+        --fake-link-foreground-color,
+        var(--color-foreground-link-primary)
+    );
 }
 button.fake-link:hover {
     color: var(
@@ -56,6 +57,7 @@ button.fake-link[disabled] {
         var(--color-foreground-disabled)
     );
 }
+
 a.legal-link,
 button.legal-link {
     text-decoration: underline;

package/dist/list/list.css

@@ -2,25 +2,29 @@
     --state-layer-neutral-on-strong: rgb(var(--color-neutral-900-rgb), 0);
     --state-layer-neutral: rgb(var(--color-neutral-900-rgb), 0);
 }
+
 .list {
     max-width: 480px;
 }
+
 .list ol,
 .list ul {
     margin: 0;
     padding: 0;
 }
+
 .list li::marker {
     content: "";
     font-size: 0;
 }
+
 .list fieldset > *,
 .list li > * {
-    align-items: center;
     background-color: var(
         --list-background-color,
         var(--color-background-primary)
     );
+    align-items: center;
     box-sizing: border-box;
     color: var(--color-foreground-primary);
     display: inline-flex;
@@ -30,30 +34,36 @@
     padding: var(--spacing-150) var(--spacing-200);
     width: 100%;
 }
+
 .list__leading {
     margin-inline-end: var(--spacing-200);
 }
+
 .list__trailing {
     margin-inline-start: var(--spacing-200);
 }
+
 .list__body {
     flex: 1;
 }
+
 .list ol li {
     counter-increment: item;
 }
+
 .list ol li > :before {
     content: counter(item) ".";
     margin-inline-end: var(--spacing-200);
     width: var(--spacing-300);
 }
+
 .list li > a,
 .list li > button {
     border: none;
-    overflow: hidden;
-    position: relative;
     text-align: left;
     text-decoration: none;
+    overflow: hidden;
+    position: relative;
 }
 .list li > a:after,
 .list li > button:after {
@@ -81,6 +91,7 @@
 .list li > button[href]:active:after {
     background-color: var(--color-state-layer-pressed);
 }
+
 .list hr {
     border: 0;
     border-top: 1px solid var(--color-border-subtle);
@@ -88,6 +99,7 @@
     margin-inline: var(--spacing-200);
     padding: 0;
 }
+
 [dir="rtl"] .list li > a,
 [dir="rtl"] .list li > button {
     text-align: right;

package/dist/listbox/listbox.css

@@ -3,46 +3,54 @@
     --state-layer-neutral-on-strong: rgb(var(--color-neutral-900-rgb), 0);
     --state-layer-neutral: rgb(var(--color-neutral-900-rgb), 0);
 }
+
 div.listbox {
     margin: var(--spacing-200) 0;
 }
+
 span.listbox {
     display: inline-block;
     vertical-align: bottom;
 }
+
 div.listbox__options[role="listbox"] {
+    cursor: default;
     background-color: var(
         --listbox-background-color,
         var(--color-background-primary)
     );
-    cursor: default;
 }
+
 span.listbox__options[role="listbox"] {
     display: inline-block;
 }
+
 div.listbox__options--fix-width[role="listbox"] {
     width: 100%;
 }
+
 div.listbox__options--reverse[role="listbox"] {
     right: 0;
 }
+
 .listbox__description {
-    color: var(
-        --listbox-button-subtitle-color,
-        var(--color-foreground-secondary)
-    );
     font-size: var(--font-size-small);
     font-weight: 400;
     grid-column: 1 2;
     grid-row: 2;
+    color: var(
+        --listbox-button-subtitle-color,
+        var(--color-foreground-secondary)
+    );
 }
+
 div.listbox__option[role="option"] {
-    background-color: initial;
     border-color: var(--color-background-primary);
+    color: var(--color-foreground-primary);
+    background-color: initial;
     border-style: solid;
     border-width: 1px;
     box-sizing: border-box;
-    color: var(--color-foreground-primary);
     display: inline-grid;
     font-family: inherit;
     grid-template-columns: auto auto;
@@ -98,26 +106,29 @@ div.listbox__option[role="option"]:disabled,
 div.listbox__option[role="option"]:disabled .listbox__description,
 div.listbox__option[role="option"][aria-disabled="true"],
 div.listbox__option[role="option"][aria-disabled="true"] .listbox__description {
-    background-color: unset;
     color: var(
         --listbox-option-disabled-foreground-color,
         var(--color-foreground-disabled)
     );
+    background-color: unset;
     font-weight: unset;
 }
+
 span.listbox__value {
     flex: 1;
     white-space: nowrap;
 }
+
 div.listbox__option svg.icon {
+    margin-inline-start: var(--spacing-100);
     align-self: center;
     fill: currentColor;
-    margin-inline-start: var(--spacing-100);
     margin: 0 auto;
     opacity: 0;
     stroke: currentColor;
     stroke-width: 0;
 }
+
 div.listbox__options[role="listbox"]:focus
     .listbox__option--active[role="option"] {
     overflow: hidden;
@@ -126,12 +137,13 @@ div.listbox__options[role="listbox"]:focus
 div.listbox__options[role="listbox"]:focus
     .listbox__option--active[role="option"]:after {
     background-color: var(--color-state-layer-neutral);
-    background-color: var(--color-state-layer-hover);
     content: "";
     inset: 0;
     pointer-events: none;
     position: absolute;
+    background-color: var(--color-state-layer-hover);
 }
+
 div.listbox__option[aria-selected="true"] svg.icon {
     opacity: 1;
 }

package/dist/listbox-button/listbox-button.css

@@ -3,24 +3,29 @@
     --state-layer-neutral-on-strong: rgb(var(--color-neutral-900-rgb), 0);
     --state-layer-neutral: rgb(var(--color-neutral-900-rgb), 0);
 }
+
 .listbox-button {
     line-height: normal;
     position: relative;
     vertical-align: bottom;
 }
+
 span.listbox-button {
     display: inline-block;
 }
+
 .listbox-button .btn {
     padding-left: 15px;
     padding-right: 15px;
 }
+
 span.listbox-button--fluid,
 span.listbox-button--fluid .btn,
 span.listbox-button--fluid .expand-btn,
 span.listbox-button--fluid div.listbox-button__listbox {
     width: 100%;
 }
+
 div.listbox-button__listbox {
     background-color: var(--color-background-elevated);
     border-radius: var(--border-radius-50);
@@ -47,16 +52,19 @@ div.listbox-button__listbox--fixed {
     left: unset;
     right: 0;
 }
+
 .listbox-button button.btn[aria-expanded="true"] ~ div.listbox-button__listbox,
 button.expand-btn[aria-expanded="true"] ~ div.listbox-button__listbox {
     display: block;
 }
+
 .listbox-button button[aria-invalid="true"] {
     border-color: var(
         --listbox-button-invalid-border-color,
         var(--color-border-attention)
     );
 }
+
 .listbox-button:not(.listbox-button--error)
     button:not(
         [disabled],
@@ -88,6 +96,7 @@ button.expand-btn[aria-expanded="true"] ~ div.listbox-button__listbox {
     ).btn--form:hover {
     border-color: inherit;
 }
+
 .listbox-button button.btn--borderless,
 .listbox-button button.expand-btn--borderless {
     background-color: initial;
@@ -108,6 +117,7 @@ button.expand-btn[aria-expanded="true"] ~ div.listbox-button__listbox {
     ~ .listbox-button__listbox {
     top: 41px;
 }
+
 .listbox-button.listbox-button--form button {
     background-color: var(
         --listbox-button-background-color,
@@ -122,6 +132,7 @@ button.expand-btn[aria-expanded="true"] ~ div.listbox-button__listbox {
         var(--color-foreground-primary)
     );
 }
+
 .listbox-button.listbox-button--form button[aria-disabled="true"],
 .listbox-button.listbox-button--form button[disabled] {
     border-color: var(
@@ -133,18 +144,21 @@ button.expand-btn[aria-expanded="true"] ~ div.listbox-button__listbox {
         var(--color-foreground-disabled)
     );
 }
+
 .listbox-button.listbox-button--form button:focus {
     background-color: var(
         --combobox-textbox-focus-background-color,
         var(--color-background-primary)
     );
 }
+
 .listbox-button.listbox-button--form button[aria-invalid="true"] {
     border-color: var(
         --listbox-button-invalid-border-color,
         var(--color-border-attention)
     );
 }
+
 .listbox-button.listbox-button--error button:not(.btn--borderless) {
     background-color: var(
         --listbox-button-background-color,
@@ -155,24 +169,30 @@ button.expand-btn[aria-expanded="true"] ~ div.listbox-button__listbox {
         var(--color-border-attention)
     );
 }
+
 .listbox-button .btn__label {
     color: var(--listbox-button-label-color, var(--color-foreground-secondary));
     margin-right: 3px;
 }
+
 .listbox-button--expanded .btn__label {
     color: var(--listbox-button-label-color, var(--color-foreground-primary));
 }
+
 .listbox-button.listbox-button--error button .btn__floating-label,
 .listbox-button.listbox-button--error button .btn__label {
     color: var(--listbox-button-label-color, var(--color-foreground-attention));
 }
+
 .listbox-button .btn__text {
     font-weight: 700;
     margin-right: auto;
 }
+
 .listbox-button__options {
     border-radius: var(--listbox-button-border-radius, var(--border-radius-50));
 }
+
 .listbox-button__options[role="listbox"]:focus
     .listbox-button__option--active[role="option"] {
     overflow: hidden;
@@ -181,24 +201,27 @@ button.expand-btn[aria-expanded="true"] ~ div.listbox-button__listbox {
 .listbox-button__options[role="listbox"]:focus
     .listbox-button__option--active[role="option"]:after {
     background-color: var(--color-state-layer-neutral);
-    background-color: var(--color-state-layer-hover);
     content: "";
     inset: 0;
     pointer-events: none;
     position: absolute;
+    background-color: var(--color-state-layer-hover);
 }
+
 .listbox-button__option svg.icon {
     align-self: center;
     fill: currentColor;
     margin: 0 auto;
-    margin-inline-start: var(--spacing-100);
     opacity: 0;
     stroke: currentColor;
     stroke-width: 0;
+    margin-inline-start: var(--spacing-100);
 }
+
 div.listbox-button__option[role="option"][aria-selected="true"] svg.icon {
     opacity: 1;
 }
+
 .listbox-button__description {
     color: var(
         --listbox-button-subtitle-color,
@@ -209,14 +232,15 @@ div.listbox-button__option[role="option"][aria-selected="true"] svg.icon {
     grid-column: 1 2;
     grid-row: 2;
 }
+
 div.listbox-button__option[role="option"] {
-    background-color: initial;
+    cursor: default;
     border-color: var(--color-background-primary);
+    color: var(--color-foreground-primary);
+    background-color: initial;
     border-style: solid;
     border-width: 1px;
     box-sizing: border-box;
-    color: var(--color-foreground-primary);
-    cursor: default;
     display: inline-grid;
     font-family: inherit;
     grid-template-columns: auto auto;
@@ -270,11 +294,11 @@ div.listbox-button__option[role="option"]:active {
 }
 div.listbox-button__option[role="option"]:disabled,
 div.listbox-button__option[role="option"][aria-disabled="true"] {
-    background-color: unset;
     color: var(
         --listbox-option-disabled-foreground-color,
         var(--color-foreground-disabled)
     );
+    background-color: unset;
     font-weight: unset;
 }
 div.listbox-button__option[role="option"]:first-child {
@@ -300,16 +324,18 @@ div.listbox-button__option[role="option"]:last-child {
 div.listbox-button__option[role="option"]:disabled .listbox-button__description,
 div.listbox-button__option[role="option"][aria-disabled="true"]
     .listbox-button__description {
-    background-color: unset;
     color: var(
         --listbox-option-disabled-foreground-color,
         var(--color-foreground-disabled)
     );
+    background-color: unset;
     font-weight: unset;
 }
+
 div.listbox-button__option--active[role="option"] {
     font-weight: 700;
 }
+
 span.listbox-button__value {
     flex: 1 0 auto;
     white-space: nowrap;
@@ -318,7 +344,7 @@ span.listbox-button__value {
     outline: none;
 }
 [dir="rtl"] .listbox-button .btn__label {
-    color: var(--listbox-button-label-color, var(--color-foreground-secondary));
     margin-left: 3px;
     margin-right: 0;
+    color: var(--listbox-button-label-color, var(--color-foreground-secondary));
 }