@ebay/skin 19.15.0 → 19.17.0

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

@@ -62,6 +62,7 @@
 .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,23 +12,18 @@
     --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);
@@ -52,13 +47,11 @@
     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;

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

@@ -5,7 +5,6 @@
     --dialog-lightbox-wide-max-width: 896px;
     --dialog-lightbox-narrow-max-width: 480px;
 }
-
 .lightbox-dialog[role="dialog"] {
     align-items: flex-start;
     background-color: var(--dialog-scrim-color-show);
@@ -22,7 +21,6 @@
 .lightbox-dialog[role="dialog"]:not([hidden]) {
     display: flex;
 }
-
 .lightbox-dialog__window {
     background-color: var(
         --dialog-window-background-color,
@@ -39,7 +37,6 @@
     min-width: 208px;
     will-change: opacity, transform;
 }
-
 .lightbox-dialog__header {
     display: flex;
     flex-shrink: 0;
@@ -60,7 +57,6 @@
 .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;
@@ -75,10 +71,9 @@
 .lightbox-dialog__main > :last-child {
     margin-bottom: 0;
 }
-
 .lightbox-dialog__footer {
     border-top: 1px solid
-        var(--dialog-lightbox-separator-color, var(--color-stroke-subtle));
+        var(--dialog-lightbox-separator-color, var(--color-border-subtle));
     display: flex;
     flex-direction: column;
     justify-content: center;
@@ -88,7 +83,6 @@
 .lightbox-dialog__footer > :not(:first-child) {
     margin-top: var(--spacing-200);
 }
-
 .lightbox-dialog__image {
     background-position: 50%;
     background-repeat: no-repeat;
@@ -98,19 +92,15 @@
     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);
@@ -125,25 +115,20 @@ 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;
 }
@@ -183,7 +168,6 @@ 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,
@@ -204,7 +188,6 @@ 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,
@@ -225,7 +208,6 @@ 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 {
@@ -260,24 +242,21 @@ 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%);
 }
 .lightbox-dialog__handle:after {
-    background-color: var(--dialog-handle-color, var(--color-stroke-default));
+    background-color: var(--dialog-handle-color, var(--color-border-medium));
     border-radius: 3px;
     content: "";
     display: block;
     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;
@@ -285,7 +264,6 @@ 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%;

package/dist/link/link.css

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

package/dist/list/list.css

@@ -1,18 +1,19 @@
+:root {
+    --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;
@@ -21,71 +22,72 @@
         var(--color-background-primary)
     );
     box-sizing: border-box;
-    color: var(--color-foreground-on-primary);
+    color: var(--color-foreground-primary);
     display: inline-flex;
-    font-size: var(--font-size-16);
+    font-size: var(--font-size-medium);
     margin-block: 1px;
     min-height: var(--spacing-600);
     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;
 }
-
-.list li > a:focus,
-.list li > a:hover,
-.list li > button:focus,
-.list li > button:hover {
-    color: var(--color-foreground-on-primary);
-}
-
-.list li > a:active,
-.list li > a:focus,
-.list li > a:hover,
-.list li > button:active,
-.list li > button:focus,
-.list li > button:hover {
-    background-color: var(
-        --list-background-hover-color,
-        var(--color-state-primary-hover)
-    );
+.list li > a:after,
+.list li > button:after {
+    background-color: var(--color-state-layer-neutral);
+    content: "";
+    inset: 0;
+    pointer-events: none;
+    position: absolute;
+}
+.list li > a:not([disabled], [aria-disabled="true"]):hover:after,
+.list li > a[href]:hover:after,
+.list li > button:not([disabled], [aria-disabled="true"]):hover:after,
+.list li > button[href]:hover:after {
+    background-color: var(--color-state-layer-hover);
+}
+.list li > a:not([disabled], [aria-disabled="true"]):focus-visible:after,
+.list li > a[href]:focus-visible:after,
+.list li > button:not([disabled], [aria-disabled="true"]):focus-visible:after,
+.list li > button[href]:focus-visible:after {
+    background-color: var(--color-state-layer-focus);
+}
+.list li > a:not([disabled], [aria-disabled="true"]):active:after,
+.list li > a[href]:active:after,
+.list li > button:not([disabled], [aria-disabled="true"]):active:after,
+.list li > button[href]:active:after {
+    background-color: var(--color-state-layer-pressed);
 }
-
 .list hr {
     border: 0;
-    border-top: 1px solid var(--color-stroke-subtle);
+    border-top: 1px solid var(--color-border-subtle);
     height: 1px;
     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

@@ -1,15 +1,15 @@
 :root {
     --bubble-shadow: 0 2px 7px rgb(0 0 0 / 0.15), 0 5px 17px rgb(0 0 0 / 0.2);
+    --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"] {
     background-color: var(
         --listbox-background-color,
@@ -17,19 +17,15 @@ div.listbox__options[role="listbox"] {
     );
     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,
@@ -40,7 +36,6 @@ div.listbox__options--reverse[role="listbox"] {
     grid-column: 1 2;
     grid-row: 2;
 }
-
 div.listbox__option[role="option"] {
     background-color: initial;
     border-color: var(--color-background-primary);
@@ -61,13 +56,41 @@ div.listbox__option[role="option"]:not(:last-child) {
 div.listbox__option[role="option"]:focus {
     outline-offset: -4px;
 }
+div.listbox__option[role="option"] {
+    overflow: hidden;
+    position: relative;
+}
+div.listbox__option[role="option"]:after {
+    background-color: var(--color-state-layer-neutral);
+    content: "";
+    inset: 0;
+    pointer-events: none;
+    position: absolute;
+}
+div.listbox__option[role="option"]:not(
+        [disabled],
+        [aria-disabled="true"]
+    ):hover:after,
+div.listbox__option[role="option"][href]:hover:after {
+    background-color: var(--color-state-layer-hover);
+}
+div.listbox__option[role="option"]:not(
+        [disabled],
+        [aria-disabled="true"]
+    ):focus-visible:after,
+div.listbox__option[role="option"][href]:focus-visible:after {
+    background-color: var(--color-state-layer-focus);
+}
+div.listbox__option[role="option"]:not(
+        [disabled],
+        [aria-disabled="true"]
+    ):active:after,
+div.listbox__option[role="option"][href]:active:after {
+    background-color: var(--color-state-layer-pressed);
+}
 div.listbox__option[role="option"][hidden] {
     display: none;
 }
-div.listbox__option[role="option"]:hover {
-    background-color: var(--color-state-primary-hover);
-    color: var(--color-foreground-primary);
-}
 div.listbox__option[role="option"]:active {
     font-weight: 700;
 }
@@ -82,12 +105,10 @@ div.listbox__option[role="option"][aria-disabled="true"] .listbox__description {
     );
     font-weight: unset;
 }
-
 span.listbox__value {
     flex: 1;
     white-space: nowrap;
 }
-
 div.listbox__option svg.icon {
     align-self: center;
     fill: currentColor;
@@ -97,12 +118,20 @@ div.listbox__option svg.icon {
     stroke: currentColor;
     stroke-width: 0;
 }
-
 div.listbox__options[role="listbox"]:focus
     .listbox__option--active[role="option"] {
-    background-color: var(--color-state-primary-hover);
+    overflow: hidden;
+    position: relative;
+}
+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;
 }
-
 div.listbox__option[aria-selected="true"] svg.icon {
     opacity: 1;
 }

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

@@ -1,28 +1,26 @@
 :root {
     --bubble-shadow: 0 2px 7px rgb(0 0 0 / 0.15), 0 5px 17px rgb(0 0 0 / 0.2);
+    --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);
@@ -49,19 +47,16 @@ 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-stroke-attention)
+        var(--color-border-attention)
     );
 }
-
 .listbox-button:not(.listbox-button--error)
     button:not(
         [disabled],
@@ -70,7 +65,7 @@ button.expand-btn[aria-expanded="true"] ~ div.listbox-button__listbox {
     ).btn--form {
     border-color: var(
         --listbox-button-border-color,
-        var(--color-stroke-default)
+        var(--color-border-medium)
     );
 }
 .listbox-button:not(.listbox-button--error)
@@ -93,7 +88,6 @@ 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;
@@ -114,7 +108,6 @@ 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,14 +115,13 @@ button.expand-btn[aria-expanded="true"] ~ div.listbox-button__listbox {
     );
     border-color: var(
         --listbox-button-border-color,
-        var(--color-stroke-default)
+        var(--color-border-medium)
     );
     color: var(
         --listbox-button-foreground-color,
         var(--color-foreground-primary)
     );
 }
-
 .listbox-button.listbox-button--form button[aria-disabled="true"],
 .listbox-button.listbox-button--form button[disabled] {
     border-color: var(
@@ -141,21 +133,18 @@ 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-stroke-attention)
+        var(--color-border-attention)
     );
 }
-
 .listbox-button.listbox-button--error button:not(.btn--borderless) {
     background-color: var(
         --listbox-button-background-color,
@@ -163,38 +152,41 @@ button.expand-btn[aria-expanded="true"] ~ div.listbox-button__listbox {
     );
     border-color: var(
         --listbox-button-border-color,
-        var(--color-stroke-attention)
+        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"] {
-    background-color: var(--color-state-primary-hover);
+    overflow: hidden;
+    position: relative;
+}
+.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;
 }
-
 .listbox-button__option svg.icon {
     align-self: center;
     fill: currentColor;
@@ -204,11 +196,9 @@ button.expand-btn[aria-expanded="true"] ~ div.listbox-button__listbox {
     stroke: currentColor;
     stroke-width: 0;
 }
-
 div.listbox-button__option[role="option"][aria-selected="true"] svg.icon {
     opacity: 1;
 }
-
 .listbox-button__description {
     color: var(
         --listbox-button-subtitle-color,
@@ -219,7 +209,6 @@ 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;
     border-color: var(--color-background-primary);
@@ -241,13 +230,41 @@ div.listbox-button__option[role="option"]:not(:last-child) {
 div.listbox-button__option[role="option"]:focus {
     outline-offset: -4px;
 }
+div.listbox-button__option[role="option"] {
+    overflow: hidden;
+    position: relative;
+}
+div.listbox-button__option[role="option"]:after {
+    background-color: var(--color-state-layer-neutral);
+    content: "";
+    inset: 0;
+    pointer-events: none;
+    position: absolute;
+}
+div.listbox-button__option[role="option"]:not(
+        [disabled],
+        [aria-disabled="true"]
+    ):hover:after,
+div.listbox-button__option[role="option"][href]:hover:after {
+    background-color: var(--color-state-layer-hover);
+}
+div.listbox-button__option[role="option"]:not(
+        [disabled],
+        [aria-disabled="true"]
+    ):focus-visible:after,
+div.listbox-button__option[role="option"][href]:focus-visible:after {
+    background-color: var(--color-state-layer-focus);
+}
+div.listbox-button__option[role="option"]:not(
+        [disabled],
+        [aria-disabled="true"]
+    ):active:after,
+div.listbox-button__option[role="option"][href]:active:after {
+    background-color: var(--color-state-layer-pressed);
+}
 div.listbox-button__option[role="option"][hidden] {
     display: none;
 }
-div.listbox-button__option[role="option"]:hover {
-    background-color: var(--color-state-primary-hover);
-    color: var(--color-foreground-primary);
-}
 div.listbox-button__option[role="option"]:active {
     font-weight: 700;
 }
@@ -290,11 +307,9 @@ div.listbox-button__option[role="option"][aria-disabled="true"]
     );
     font-weight: unset;
 }
-
 div.listbox-button__option--active[role="option"] {
     font-weight: 700;
 }
-
 span.listbox-button__value {
     flex: 1 0 auto;
     white-space: nowrap;