@ebay/skin 19.33.0 → 19.35.0

package/dist/textbox/textbox.css

@@ -4,17 +4,17 @@
 }
 
 .textbox {
-    align-items: center;
+    color: var(--textbox-foreground-color, var(--color-foreground-primary));
     background-color: var(
         --textbox-background-color,
         var(--color-background-secondary)
     );
     border-color: var(--textbox-border-color, var(--color-border-medium));
     border-radius: var(--textbox-border-radius, var(--border-radius-50));
+    align-items: center;
     border-style: solid;
     border-width: 1px;
     box-sizing: border-box;
-    color: var(--textbox-foreground-color, var(--color-foreground-primary));
     display: inline-flex;
     font-size: var(--font-size-body);
     gap: var(--spacing-100);
@@ -22,30 +22,26 @@
     position: relative;
     width: fit-content;
 }
-
 .textbox button.icon-btn {
     background-color: initial;
     padding: 0;
 }
-
 .textbox--focus,
 .textbox:has(> .textbox__control:focus):not(.textbox--readonly):not(
         :has(> .textbox__control[readonly])
     ) {
+    box-shadow: 0 0 0 1px var(--color-border-strong);
+    border-color: var(--textbox-focus-border-color, var(--color-border-strong));
     background-color: var(
         --textbox-focus-background-color,
         var(--color-background-primary)
     );
-    border-color: var(--textbox-focus-border-color, var(--color-border-strong));
-    box-shadow: 0 0 0 1px var(--color-border-strong);
 }
-
 .textbox--readonly,
 .textbox:has(> .textbox__control[readonly]) {
     background-color: initial;
     border: none;
 }
-
 .textbox--disabled,
 .textbox:has(> .textbox__control[disabled]) {
     border-color: var(
@@ -57,7 +53,6 @@
         var(--color-foreground-disabled)
     );
 }
-
 .textbox--invalid,
 .textbox:has(> .textbox__control[aria-invalid="true"]) {
     border-color: var(
@@ -105,7 +100,6 @@ textarea.textbox__control {
     margin: 0;
     outline: none;
 }
-
 input.textbox__control[disabled],
 textarea.textbox__control[disabled] {
     border-color: var(
@@ -117,7 +111,6 @@ textarea.textbox__control[disabled] {
         var(--color-foreground-disabled)
     );
 }
-
 input.textbox__control[disabled]::-webkit-input-placeholder,
 textarea.textbox__control[disabled]::-webkit-input-placeholder {
     color: var(
@@ -125,7 +118,6 @@ textarea.textbox__control[disabled]::-webkit-input-placeholder {
         var(--color-foreground-ghost)
     );
 }
-
 input.textbox__control[disabled]::-moz-placeholder,
 textarea.textbox__control[disabled]::-moz-placeholder {
     color: var(
@@ -133,7 +125,6 @@ textarea.textbox__control[disabled]::-moz-placeholder {
         var(--color-foreground-ghost)
     );
 }
-
 input.textbox__control[disabled]:-ms-input-placeholder,
 textarea.textbox__control[disabled]:-ms-input-placeholder {
     color: var(
@@ -141,7 +132,6 @@ textarea.textbox__control[disabled]:-ms-input-placeholder {
         var(--color-foreground-ghost)
     );
 }
-
 input.textbox__control[aria-invalid="true"],
 textarea.textbox__control[aria-invalid="true"] {
     border-color: var(
@@ -149,7 +139,6 @@ textarea.textbox__control[aria-invalid="true"] {
         var(--color-border-attention)
     );
 }
-
 input.textbox__control::placeholder,
 textarea.textbox__control::placeholder {
     color: var(--textbox-placeholder-color, var(--color-foreground-secondary));
@@ -158,20 +147,20 @@ textarea.textbox__control::placeholder {
 }
 
 input.textbox__control {
-    height: calc(var(--input-default-height) - 2px);
+    height: calc(-2px + var(--input-default-height));
 }
 
 .textbox--large input.textbox__control {
-    height: calc(var(--input-large-height) - 2px);
+    height: calc(-2px + var(--input-large-height));
 }
 
 .textbox .icon-btn > svg,
 .textbox > svg {
     color: var(--textbox-icon-color, var(--color-foreground-secondary));
     display: inline-flex;
-    fill: var(--textbox-icon-color, var(--color-foreground-secondary));
     height: 1lh;
     pointer-events: none;
+    fill: var(--textbox-icon-color, var(--color-foreground-secondary));
 }
 
 .textbox > span:first-child,
@@ -186,11 +175,11 @@ input.textbox__control {
 }
 
 .textbox .icon-btn:last-child {
-    margin-inline-start: calc(var(--spacing-100) * -1);
+    margin-inline-start: calc(-1 * var(--spacing-100));
 }
 
 .textbox .icon-btn:first-child {
-    margin-inline-end: calc(var(--spacing-100) * -1);
+    margin-inline-end: calc(-1 * var(--spacing-100));
 }
 
 input.textbox__control[readonly]:focus,

package/dist/toast-dialog/toast-dialog.css

@@ -5,6 +5,7 @@
     --state-layer-neutral-on-strong: rgb(var(--color-neutral-900-rgb), 0);
     --state-layer-neutral: rgb(var(--color-neutral-900-rgb), 0);
 }
+
 @keyframes toast-dialog-open {
     0% {
         opacity: 0;
@@ -52,9 +53,11 @@ dialog.toast-dialog {
 .toast-dialog[open].toast-dialog--close {
     animation: toast-dialog-close 0.2s cubic-bezier(0.21, 0.31, 1, 1.22);
 }
+
 .toast-dialog a {
     color: var(--color-foreground-on-success);
 }
+
 .toast-dialog a:focus {
     outline: 1px auto currentColor;
 }
@@ -75,9 +78,11 @@ dialog.toast-dialog {
     opacity: 0;
     transform: translateY(110%);
 }
+
 .toast-dialog__window {
     padding: var(--spacing-100) var(--spacing-200) var(--spacing-200);
 }
+
 .toast-dialog__header {
     align-items: center;
     display: flex;
@@ -92,8 +97,8 @@ button.icon-btn.toast-dialog__close {
     color: var(--color-foreground-on-success);
     flex-shrink: 0;
     margin-inline-start: auto;
-    overflow: hidden;
     padding: 0;
+    overflow: hidden;
     position: relative;
 }
 button.icon-btn.toast-dialog__close:after {
@@ -127,9 +132,11 @@ button.icon-btn.toast-dialog__close[href]:active:after {
 button.icon-btn.toast-dialog__close:focus {
     outline: 2px solid var(--color-foreground-on-success);
 }
+
 button.icon-btn.toast-dialog__close > svg {
     fill: currentColor;
 }
+
 .toast-dialog__footer {
     display: flex;
     justify-content: flex-end;
@@ -201,6 +208,7 @@ button.icon-btn.toast-dialog__close > svg {
 .toast-dialog__footer button.btn--secondary:focus {
     outline: 2px solid var(--color-foreground-on-success);
 }
+
 @media (min-width: 512px) {
     .toast-dialog {
         border-radius: var(--border-radius-100);

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

@@ -7,6 +7,7 @@
     --toggle-button-gallery-width-min: 168px;
     --toggle-button-gallery-width-max: 342px;
 }
+
 .toggle-button {
     background-color: var(--color-background-primary);
     border: 1px solid var(--color-border-medium);
@@ -30,58 +31,71 @@
     outline-style: outset;
     outline-width: 2px;
 }
+
 .toggle-button[aria-disabled="true"],
 .toggle-button[disabled] {
     border-color: var(--color-border-disabled);
 }
+
 .toggle-button * {
     pointer-events: none;
 }
+
 .toggle-button[aria-pressed="true"] {
     background-color: var(--color-background-secondary);
     border: 1px solid var(--color-border-strong);
     box-shadow: 0 0 0 1px var(--color-border-strong);
     font-weight: 700;
 }
+
 .toggle-button[aria-disabled="true"][aria-pressed="true"],
 .toggle-button[disabled][aria-pressed="true"] {
     border-color: var(--color-border-disabled);
     box-shadow: 0 0 0 1px var(--color-border-disabled);
 }
+
 .toggle-button:not([aria-disabled="true"], [disabled]):hover {
     background-color: var(--state-layer-hover);
 }
+
 .toggle-button:not([aria-disabled="true"], [disabled]):active {
     background-color: var(--state-layer-pressed);
 }
+
 .toggle-button__content {
     align-self: center;
     display: flex;
     flex-direction: column;
     text-align: left;
 }
+
 .toggle-button__icon,
 .toggle-button__image-container {
     margin-bottom: var(--spacing-200);
     margin-right: var(--spacing-200);
     margin-top: var(--spacing-200);
 }
+
 .toggle-button__image-container {
     align-self: center;
 }
+
 .toggle-button__image-container svg.icon {
     height: 100%;
 }
+
 .toggle-button__image-container img {
     height: 100%;
     max-height: 56px;
     max-width: 56px;
 }
+
 .toggle-button__image {
     display: inline-block;
     height: 56px;
     width: 56px;
 }
+
 .toggle-button__title {
     font-size: var(--font-size-medium);
     font-weight: 700;
@@ -89,13 +103,16 @@
     margin-bottom: var(--spacing-50);
     margin-top: var(--spacing-200);
 }
+
 .toggle-button__title:only-child {
     margin-bottom: var(--spacing-200);
 }
+
 .toggle-button[aria-disabled="true"] .toggle-button__title,
 .toggle-button[disabled] .toggle-button__title {
     color: var(--color-foreground-disabled);
 }
+
 .toggle-button
     .toggle-button__content:only-child
     .toggle-button__title:only-child {
@@ -105,27 +122,33 @@
     text-align: center;
     width: 100%;
 }
+
 .toggle-button:not([aria-pressed="true"])
     .toggle-button__content:only-child
     .toggle-button__title:only-child {
     font-weight: 400;
 }
+
 .toggle-button__subtitle {
     color: var(--color-foreground-secondary);
     line-height: var(--font-size-large-1);
     margin-bottom: var(--spacing-200);
 }
+
 .toggle-button[aria-disabled="true"] .toggle-button__subtitle,
 .toggle-button[disabled] .toggle-button__subtitle {
     color: var(--color-foreground-disabled);
 }
+
 .toggle-button__subtitle p {
     margin: 0;
 }
+
 .toggle-button[aria-pressed="true"] .toggle-button__subtitle {
     color: var(--color-foreground-primary);
     font-weight: 400;
 }
+
 .toggle-button[aria-disabled="true"][aria-pressed="true"]
     .toggle-button__subtitle,
 .toggle-button[disabled][aria-pressed="true"] .toggle-button__subtitle {
@@ -136,37 +159,44 @@
     max-width: var(--toggle-button-list-width-max);
     min-width: var(--toggle-button-list-width-min);
 }
+
 .toggle-button--list-layout .toggle-button__content:not(:only-child),
 .toggle-button--list-layout .toggle-button__image-container {
     align-self: self-start;
 }
+
 .toggle-button--gallery-layout {
     flex-direction: column;
     justify-content: left;
     max-width: var(--toggle-button-gallery-width-max);
     min-width: var(--toggle-button-gallery-width-min);
 }
+
 .toggle-button--gallery-layout .toggle-button__content {
     align-self: self-start;
 }
+
 .toggle-button--gallery-layout .toggle-button__icon,
 .toggle-button--gallery-layout .toggle-button__image-container {
     margin-bottom: 0;
     margin-right: 0;
     text-align: left;
 }
+
 .toggle-button--gallery-layout .toggle-button__image-container {
     padding-bottom: 60%;
     position: relative;
     text-align: center;
     width: 100%;
 }
+
 .toggle-button--gallery-layout .toggle-button__image {
     height: 100%;
     inset: 0;
     position: absolute;
     width: 100%;
 }
+
 .toggle-button[aria-disabled="true"] .toggle-button__icon,
 .toggle-button[aria-disabled="true"] .toggle-button__image,
 .toggle-button[disabled] .toggle-button__icon,
@@ -174,11 +204,13 @@
     filter: grayscale(1);
     opacity: 0.5;
 }
+
 .toggle-button--gallery-layout .toggle-button__image-container img {
     height: 100%;
     max-height: 200px;
     max-width: none;
 }
+
 .toggle-button--gallery-layout .toggle-button__icon ~ .toggle-button__content {
     align-self: flex-start;
 }

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;