@ebay/skin 19.33.0 → 19.35.0

package/dist/menu/menu.css

@@ -3,7 +3,6 @@
     --state-layer-neutral: rgb(var(--color-neutral-900-rgb), 0);
     --bubble-shadow: 0 2px 7px rgb(0 0 0 / 0.15), 0 5px 17px rgb(0 0 0 / 0.2);
 }
-
 .fake-menu__items,
 .menu__items {
     background-color: var(
@@ -60,18 +59,18 @@ button.fake-menu__item {
 a.fake-menu__item,
 button.fake-menu__item,
 div.menu__item[role^="menuitem"] {
-    background-color: initial;
     border-color: var(
         --menu-menuitem-border-color,
         var(--color-background-primary)
     );
-    border-style: solid;
-    border-width: 1px;
-    box-sizing: border-box;
     color: var(
         --menu-menuitem-foreground-color,
         var(--color-foreground-primary)
     );
+    background-color: initial;
+    border-style: solid;
+    border-width: 1px;
+    box-sizing: border-box;
     display: inline-grid;
     font-family: inherit;
     grid-template-columns: auto auto;
@@ -79,26 +78,22 @@ div.menu__item[role^="menuitem"] {
     padding: 8px 15px;
     width: 100%;
 }
-
 a.fake-menu__item:not(:last-child),
 button.fake-menu__item:not(:last-child),
 div.menu__item[role^="menuitem"]:not(:last-child) {
     margin-bottom: 1px;
 }
-
 a.fake-menu__item:focus,
 button.fake-menu__item:focus,
 div.menu__item[role^="menuitem"]:focus {
     outline-offset: -4px;
 }
-
 a.fake-menu__item,
 button.fake-menu__item,
 div.menu__item[role^="menuitem"] {
     overflow: hidden;
     position: relative;
 }
-
 a.fake-menu__item:after,
 button.fake-menu__item:after,
 div.menu__item[role^="menuitem"]:after {
@@ -108,7 +103,6 @@ div.menu__item[role^="menuitem"]:after {
     pointer-events: none;
     position: absolute;
 }
-
 a.fake-menu__item:not([disabled], [aria-disabled="true"]):hover:after,
 a.fake-menu__item[href]:hover:after,
 button.fake-menu__item:not([disabled], [aria-disabled="true"]):hover:after,
@@ -120,7 +114,6 @@ div.menu__item[role^="menuitem"]:not(
 div.menu__item[role^="menuitem"][href]:hover:after {
     background-color: var(--color-state-layer-hover);
 }
-
 a.fake-menu__item:not([disabled], [aria-disabled="true"]):focus-visible:after,
 a.fake-menu__item[href]:focus-visible:after,
 button.fake-menu__item:not(
@@ -135,7 +128,6 @@ div.menu__item[role^="menuitem"]:not(
 div.menu__item[role^="menuitem"][href]:focus-visible:after {
     background-color: var(--color-state-layer-focus);
 }
-
 a.fake-menu__item:not([disabled], [aria-disabled="true"]):active:after,
 a.fake-menu__item[href]:active:after,
 button.fake-menu__item:not([disabled], [aria-disabled="true"]):active:after,
@@ -147,7 +139,6 @@ div.menu__item[role^="menuitem"]:not(
 div.menu__item[role^="menuitem"][href]:active:after {
     background-color: var(--color-state-layer-pressed);
 }
-
 a.fake-menu__item:active,
 button.fake-menu__item:active,
 div.menu__item[role^="menuitem"]:active {
@@ -166,11 +157,11 @@ button.fake-menu__item[aria-current="page"] svg.icon--16 {
 a.fake-menu__item:not([href]),
 button.fake-menu__item[disabled],
 div.menu__item[role^="menuitem"][aria-disabled="true"] {
-    background-color: unset;
     color: var(
         --menu-menuitem-disabled-foreground-color,
         var(--color-foreground-disabled)
     );
+    background-color: unset;
     font-weight: unset;
 }
 
@@ -211,30 +202,25 @@ div.menu__item[role^="menuitem"] span.badge {
 .menu__item[role="menuitemradio"][aria-checked="true"] svg.icon--unchecked {
     display: none;
 }
-
 .menu__item[role="menuitemcheckbox"][aria-checked="true"] svg.icon--checked,
 .menu__item[role="menuitemradio"][aria-checked="true"] svg.icon--checked {
     display: block;
 }
-
 .menu__item[role="menuitemcheckbox"] svg.icon--unchecked {
     color: var(--color-foreground-secondary);
     display: block;
     margin-right: var(--spacing-100);
 }
-
 .menu__item[role="menuitemcheckbox"] svg.icon--checked {
     color: var(--color-foreground-primary);
     display: none;
     margin-right: var(--spacing-100);
 }
-
 .menu__item[role="menuitemradio"] svg.icon--unchecked {
     color: var(--color-foreground-primary);
     display: block;
     margin-right: var(--spacing-100);
 }
-
 .menu__item[role="menuitemradio"] svg.icon--checked {
     color: var(--color-foreground-primary);
     display: none;
@@ -262,7 +248,6 @@ div.menu__item[role^="menuitem"] span.badge {
     padding-left: 0;
     vertical-align: initial;
 }
-
 .fake-menu button.expand-btn--borderless:focus,
 .menu button.expand-btn--borderless:focus {
     outline: none;
@@ -290,7 +275,6 @@ hr.menu__separator {
 .menu--filter div.menu__item[role^="menuitem"] {
     justify-content: flex-start;
 }
-
 div.menu__item[role^="menuitem"]:focus:not(:focus-visible) {
     outline: none;
 }

package/dist/menu-button/menu-button.css

@@ -3,13 +3,16 @@
     --state-layer-neutral-on-strong: rgb(var(--color-neutral-900-rgb), 0);
     --state-layer-neutral: rgb(var(--color-neutral-900-rgb), 0);
 }
+
 .fake-menu-button,
 .menu-button {
     line-height: normal;
     position: relative;
 }
+
 .fake-menu-button__menu,
 .menu-button__menu {
+    outline: 0;
     background-color: var(--color-background-elevated);
     border-radius: var(--border-radius-50);
     box-shadow: var(--bubble-shadow);
@@ -17,7 +20,6 @@
     display: none;
     left: 0;
     max-height: 400px;
-    outline: 0;
     overflow-y: auto;
     position: absolute;
     top: 0;
@@ -39,11 +41,13 @@
     left: unset;
     right: 0;
 }
+
 span.fake-menu-button__button,
 span.menu-button__button {
     display: inline-block;
     vertical-align: bottom;
 }
+
 .fake-menu-button__menu {
     list-style-type: none;
     margin: 0;
@@ -51,20 +55,21 @@ span.menu-button__button {
     overflow-y: auto;
     padding: 0;
 }
+
 div.menu-button__item[role^="menuitem"] {
-    background-color: initial;
+    cursor: default;
     border-color: var(
         --menu-button-menuitem-border-color,
         var(--color-background-primary)
     );
-    border-style: solid;
-    border-width: 1px;
-    box-sizing: border-box;
     color: var(
         --menu-button-menuitem-foreground-color,
         var(--color-foreground-primary)
     );
-    cursor: default;
+    background-color: initial;
+    border-style: solid;
+    border-width: 1px;
+    box-sizing: border-box;
     display: inline-grid;
     font-family: inherit;
     grid-template-columns: auto auto;
@@ -133,6 +138,7 @@ div.menu-button__item[role^="menuitem"]:last-child {
         var(--border-radius-50)
     );
 }
+
 .fake-menu-button__item > svg.icon--16,
 .menu-button__item > svg.icon--16 {
     align-self: center;
@@ -142,6 +148,7 @@ div.menu-button__item[role^="menuitem"]:last-child {
     stroke: currentColor;
     stroke-width: 0;
 }
+
 .fake-menu-button__item > svg.icon--16:last-child,
 .menu-button__item > svg.icon--16:last-child {
     margin-left: var(--spacing-100);
@@ -167,11 +174,13 @@ button.fake-menu-button__item {
     font-size: 1em;
     text-align: left;
 }
+
 a.fake-menu-button__item[aria-current="page"] svg.icon--16,
 button.fake-menu-button__item[aria-current="page"] svg.icon--16,
 div.menu-button__item[role^="menuitem"][aria-checked="true"] svg.icon--16 {
     opacity: 1;
 }
+
 .menu-button__item[role="menuitemcheckbox"][aria-checked="true"]
     svg.icon--unchecked,
 .menu-button__item[role="menuitemradio"][aria-checked="true"]
@@ -204,20 +213,21 @@ div.menu-button__item[role^="menuitem"][aria-checked="true"] svg.icon--16 {
     display: none;
     margin-right: var(--spacing-100);
 }
+
 .fake-menu-button__menu a.fake-menu-button__item,
 .fake-menu-button__menu button.fake-menu-button__item {
-    background-color: initial;
     border-color: var(
         --menu-button-menuitem-border-color,
         var(--color-background-primary)
     );
-    border-style: solid;
-    border-width: 1px;
-    box-sizing: border-box;
     color: var(
         --menu-button-menuitem-foreground-color,
         var(--color-foreground-primary)
     );
+    background-color: initial;
+    border-style: solid;
+    border-width: 1px;
+    box-sizing: border-box;
     display: inline-grid;
     font-family: inherit;
     grid-template-columns: auto auto;
@@ -293,6 +303,7 @@ div.menu-button__item[role^="menuitem"][aria-checked="true"] svg.icon--16 {
 .fake-menu-button__menu button.fake-menu-button__item:active {
     font-weight: 700;
 }
+
 .fake-menu-button__menu a.fake-menu-button__item:not([href]),
 .fake-menu-button__menu button.fake-menu-button__item[disabled],
 .menu-button__menu
@@ -302,6 +313,7 @@ div.menu-button__item[role^="menuitem"][aria-checked="true"] svg.icon--16 {
         var(--color-foreground-disabled)
     );
 }
+
 .fake-menu-button__menu > li:first-child a.fake-menu-button__item {
     border-top-left-radius: var(
         --menu-button-menu-border-radius,
@@ -312,6 +324,7 @@ div.menu-button__item[role^="menuitem"][aria-checked="true"] svg.icon--16 {
         var(--border-radius-50)
     );
 }
+
 .fake-menu-button__menu > li:last-child a.fake-menu-button__item {
     border-bottom-left-radius: var(
         --menu-button-menu-border-radius,
@@ -322,6 +335,7 @@ div.menu-button__item[role^="menuitem"][aria-checked="true"] svg.icon--16 {
         var(--border-radius-50)
     );
 }
+
 .fake-menu-button__menu--fix-width,
 .menu-button__menu--fix-width {
     width: 100%;
@@ -333,18 +347,21 @@ div.menu-button__item[role^="menuitem"][aria-checked="true"] svg.icon--16 {
     white-space: nowrap;
     width: 100%;
 }
+
 a.fake-menu-button__item > span,
 button.fake-menu-button__item > span,
 div.menu-button__item[role^="menuitem"] > span {
     flex: 1 0 auto;
     white-space: nowrap;
 }
+
 a.fake-menu-button__item--badged,
 button.fake-menu-button__item--badged,
 div.menu-button__item--badged[role^="menuitem"] {
     padding-right: 36px;
     position: relative;
 }
+
 a.fake-menu-button__item--badged .badge,
 button.fake-menu-button__item--badged .badge,
 div.menu-button__item--badged[role^="menuitem"] .badge {
@@ -353,9 +370,11 @@ div.menu-button__item--badged[role^="menuitem"] .badge {
     top: 6px;
     z-index: 1;
 }
+
 .menu-button__menu--scroll {
     overflow-y: scroll;
 }
+
 .fake-menu-button__menu--reverse,
 .menu-button__menu--reverse {
     left: unset;
@@ -366,6 +385,7 @@ div.menu-button__item--badged[role^="menuitem"] .badge {
     left: 0;
     right: unset;
 }
+
 .fake-menu-button .btn[aria-expanded="true"] ~ .fake-menu-button__menu,
 .fake-menu-button .expand-btn[aria-expanded="true"] ~ .fake-menu-button__menu,
 .fake-menu-button__button[aria-expanded="true"] ~ .fake-menu-button__menu,
@@ -375,6 +395,7 @@ div.menu-button__item--badged[role^="menuitem"] .badge {
 .menu-button__button[aria-expanded="true"] ~ .menu-button__menu {
     display: block;
 }
+
 .btn ~ .fake-menu-button__menu--static,
 .btn ~ .menu-button__menu--static,
 .expand-btn ~ .menu-button__menu--static,
@@ -384,9 +405,11 @@ div.menu-button__item--badged[role^="menuitem"] .badge {
 .menu-button__button ~ .menu-button__menu--static {
     position: static;
 }
+
 div.menu-button__option--active[role="option"] {
     font-weight: 700;
 }
+
 hr.menu-button__separator {
     border-color: var(
         --menu-button-separator-color,
@@ -396,6 +419,7 @@ hr.menu-button__separator {
     border-width: 1px;
     margin: 0;
 }
+
 .menu-button__footer {
     align-items: center;
     background-color: var(--color-background-elevated);
@@ -407,6 +431,7 @@ hr.menu-button__separator {
     justify-content: center;
     padding: var(--spacing-200);
 }
+
 .menu-button--filter div.menu-button__item[role^="menuitem"] {
     justify-content: flex-start;
 }

package/dist/number-input/number-input.css

@@ -77,6 +77,7 @@
 .number-input .textbox {
     background: transparent;
 }
+
 .number-input--increment .textbox__control {
     animation:
         number-input-increment-before var(--motion-duration-short-2)
@@ -84,6 +85,7 @@
         number-input-increment-after var(--motion-duration-medium-1)
             var(--motion-easing-quick-enter) var(--motion-duration-short-2);
 }
+
 .number-input--decrement .textbox__control {
     animation:
         number-input-decrement-before var(--motion-duration-short-2)
@@ -91,6 +93,7 @@
         number-input-decrement-after var(--motion-duration-medium-1)
             var(--motion-easing-quick-enter) var(--motion-duration-short-2);
 }
+
 .number-input--decrement-disabled .textbox__control {
     animation:
         number-input-decrement-before var(--motion-duration-short-2)
@@ -98,6 +101,7 @@
         number-input-decrement-after-disabled var(--motion-duration-medium-2)
             var(--motion-easing-standard) var(--motion-duration-short-2);
 }
+
 .number-input--increment-disabled .textbox__control {
     animation:
         number-input-increment-before var(--motion-duration-short-2)
@@ -105,25 +109,31 @@
         number-input-increment-after-disabled var(--motion-duration-medium-2)
             var(--motion-easing-standard) var(--motion-duration-short-2);
 }
+
 .number-input label:first-child {
     flex-grow: 1;
     padding-left: var(--spacing-200);
 }
+
 .number-input label:first-child ~ input.textbox__control {
     flex-grow: 0;
 }
+
 .icon-btn.number-input__delete {
     display: none;
-    margin-inline-end: calc(var(--spacing-100) * -1);
+    margin-inline-end: calc(-1 * var(--spacing-100));
     order: -1;
     padding-inline-start: var(--spacing-200);
 }
+
 .number-input--show-delete .number-input__delete {
     display: block;
 }
+
 .number-input--show-delete .number-input__decrement {
     display: none;
 }
+
 .number-input .textbox .textbox__control {
     font-weight: 700;
     text-align: center;
@@ -137,25 +147,31 @@
 .number-input .textbox .textbox__control[type="number"] {
     appearance: textfield;
 }
+
 .number-input .icon-btn {
     transform: scale(1);
     transition: transform var(--motion-duration-short-3)
         var(--motion-easing-standard);
 }
+
 .number-input .icon-btn:hover:not(:disabled) {
     background-color: var(--state-layer-hover);
 }
+
 .number-input .icon-btn:active {
     transform: scale(0.97);
 }
+
 .number-input .textbox .icon-btn:not(:disabled) svg {
     color: var(--color-foreground-primary);
     fill: currentColor;
 }
+
 .number-input__decrement:disabled {
     animation: number-decrement-disabled var(--motion-duration-short-2)
         var(--motion-easing-standard);
 }
+
 .number-input__increment:disabled {
     animation: number-increment-disabled var(--motion-duration-short-2)
         var(--motion-easing-standard);

package/dist/page-grid/page-grid.css

@@ -3,17 +3,17 @@
     --page-grid-outside-margins: 16px;
     --page-grid-column-gaps: var(--spacing-100);
     --page-grid-row-gaps: var(--spacing-200);
-    --page-grid-column-widths: calc(12.5% - var(--spacing-100) + 1px);
+    --page-grid-column-widths: calc(12.5% + 1px - var(--spacing-100));
     --page-grid-max-width: 1584px;
     --page-grid-total-max-width: calc(
-        var(--page-grid-max-width) + var(--page-grid-outside-margins) * 2
+        var(--page-grid-max-width) + 2 * var(--page-grid-outside-margins)
     );
 }
 @media (min-width: 512px) {
     :root {
         --page-grid-number-cols: 16;
         --page-grid-column-gaps: var(--spacing-200);
-        --page-grid-column-widths: calc(6.25% - var(--spacing-200) + 1px);
+        --page-grid-column-widths: calc(6.25% + 1px - var(--spacing-200));
         --page-grid-outside-margins: 32px;
     }
 }
@@ -33,6 +33,7 @@
     position: relative;
     width: 100%;
 }
+
 .page-grid {
     column-gap: var(--page-grid-column-gaps);
     grid-template-columns: repeat(

package/dist/page-notice/page-notice.css

@@ -9,19 +9,22 @@
     );
     border-style: solid;
     border-width: 1px;
-    color: var(--page-notice-color, var(--color-foreground-on-inverse));
     font-size: var(--font-size-body);
     margin: var(--spacing-100) 0;
     padding: var(--spacing-200);
+    color: var(--page-notice-color, var(--color-foreground-on-inverse));
 }
+
 div[role="region"].page-notice,
 section.page-notice {
     display: grid;
     grid-template-columns: 32px auto auto auto;
 }
+
 span[role="region"].page-notice {
     display: grid;
 }
+
 .page-notice__title {
     font-size: var(--font-size-body);
     font-weight: 400;
@@ -30,6 +33,7 @@ span[role="region"].page-notice {
 .page-notice__title:not(:only-child) {
     font-weight: 700;
 }
+
 .page-notice a {
     color: var(--page-notice-color, var(--color-foreground-on-inverse));
     font-size: var(--font-size-body);
@@ -37,16 +41,20 @@ span[role="region"].page-notice {
 .page-notice__cta a {
     white-space: nowrap;
 }
+
 .page-notice__dismiss {
     cursor: pointer;
 }
+
 .page-notice a:hover,
 .page-notice button.fake-link {
     color: var(--page-notice-color, var(--color-foreground-on-inverse));
 }
+
 .page-notice button.fake-link {
     font-size: var(--font-size-body);
 }
+
 .page-notice button.fake-link:hover {
     color: var(--page-notice-color, var(--color-foreground-on-inverse));
 }
@@ -55,6 +63,7 @@ span[role="region"].page-notice {
     outline: 2px solid var(--color-foreground-on-inverse);
     outline-offset: 2px;
 }
+
 .page-notice--attention {
     background-color: var(
         --page-notice-attention-background-color,
@@ -71,6 +80,7 @@ span[role="region"].page-notice {
         var(--color-foreground-on-attention)
     );
 }
+
 .page-notice--confirmation {
     background-color: var(
         --page-notice-confirmation-background-color,
@@ -87,6 +97,7 @@ span[role="region"].page-notice {
         var(--color-foreground-on-success)
     );
 }
+
 .page-notice--information {
     background-color: var(
         --page-notice-information-background-color,
@@ -103,31 +114,38 @@ span[role="region"].page-notice {
         var(--color-foreground-on-success)
     );
 }
+
 .page-notice--general {
     background-color: var(
         --page-notice-general-background-color,
         var(--color-background-inverse)
     );
 }
+
 .page-notice__header {
     grid-column: 1;
 }
+
 .page-notice__header,
 .page-notice__main {
     grid-row: 1;
     margin-inline-end: var(--spacing-200);
 }
+
 .page-notice__main {
     grid-column: 1 / 3;
 }
+
 .page-notice__header + .page-notice__main {
     grid-column: 2;
 }
+
 .page-notice__footer {
     grid-column: 4;
     grid-row: 1;
     text-align: right;
 }
+
 .page-notice__main p {
     font-size: var(--font-size-body);
     margin: 2px 0 0;
@@ -135,6 +153,7 @@ span[role="region"].page-notice {
 .page-notice__main .page-notice__title ~ p {
     margin: var(--spacing-50) 0 0;
 }
+
 p.page-notice__cta {
     grid-column: 2;
     grid-row: 2;
@@ -143,6 +162,7 @@ p.page-notice__cta {
     margin-right: var(--spacing-200);
     margin-top: var(--spacing-200);
 }
+
 @media (min-width: 512px) {
     div[role="region"].page-notice,
     section.page-notice {