@ebay/skin 19.34.0 → 19.35.0

package/dist/table/table.css

@@ -5,16 +5,20 @@
     scroll-snap-type: proximity;
     scroll-snap-type: x proximity;
 }
+
 .table::-webkit-scrollbar {
     background-color: var(--color-state-layer-focus);
     border-radius: 12px;
 }
+
 .table::-webkit-scrollbar:vertical {
     width: 6px;
 }
+
 .table::-webkit-scrollbar:horizontal {
     height: 6px;
 }
+
 .table::-webkit-scrollbar-thumb {
     background-color: var(--color-foreground-secondary);
     border-color: transparent;
@@ -22,11 +26,13 @@
     border-right-style: inset;
     box-shadow: none;
 }
+
 .table table {
     border-collapse: initial;
     border-spacing: 0;
     width: 100%;
 }
+
 .table td,
 .table th {
     background-color: var(--color-background-primary);
@@ -38,29 +44,35 @@
     min-width: 124px;
     padding: 12px;
 }
+
 .table th {
     white-space: nowrap;
 }
+
 .table--density-compact td,
 .table--density-compact th {
     height: 64px;
     max-height: 64px;
     padding: 12px;
 }
+
 .table--density-relaxed td,
 .table--density-relaxed th {
     height: 112px;
     max-height: 112px;
     padding: 16px;
 }
+
 .table--frozen-header {
     max-height: 90vh;
 }
+
 .table--frozen-header thead {
     position: sticky;
     top: 0;
     z-index: 3;
 }
+
 .table--freeze-column-1 tr td:nth-child(-n + 1),
 .table--freeze-column-1 tr th:nth-child(-n + 1),
 .table--freeze-column-2 tr td:nth-child(-n + 2),
@@ -71,12 +83,15 @@
     max-width: 124px;
     position: sticky;
 }
+
 .table--full-height {
     max-height: unset;
 }
+
 .table--constrained-height {
     max-height: 90vh;
 }
+
 .table th a,
 .table th button {
     align-items: center;
@@ -84,64 +99,80 @@
     font-weight: 700;
     text-decoration: none;
 }
+
 .table tbody tr:last-child td,
 .table tbody tr:last-child th {
     border-bottom: none;
 }
+
 .table-cell {
     text-align: left;
 }
+
 .table-cell--numeric,
 .table__cell--numeric {
     text-align: right;
 }
+
 .table-cell--icon-action {
     text-align: center;
     width: 64px;
 }
+
 .table [data-type="numeric"] {
     text-align: right;
 }
+
 .table-cell img {
     max-height: 56px;
     max-width: 56px;
 }
+
 .table--density-compact .table-cell img {
     max-height: 40px;
     max-width: 40px;
 }
+
 .table--density-relaxed .table-cell img {
     max-height: 72px;
     max-width: 72px;
 }
+
 .table th[scope="row"] {
     text-align: left;
 }
+
 .table td:last-child,
 .table th:last-child {
     padding-inline-end: 0;
 }
+
 .table--loading-state {
     overflow: hidden;
 }
+
 .table--loading-state table {
     opacity: 0.15;
     -webkit-user-select: none;
     user-select: none;
 }
+
 .table--loading-state .signal,
 .table--loading-state img {
     filter: var(--color-media-disabled-filter);
 }
+
 .table--loading-state a {
     cursor: default;
     pointer-events: none;
     text-decoration: none;
 }
+
 .table--loading-state .progress-bar-expressive {
     inset: auto 0 50%;
     position: absolute;
 }
+
 .table--mode-selection td:first-child,
 .table--mode-selection th:first-child {
     min-width: 48px;
@@ -151,9 +182,11 @@
 .table--mode-selection tr:has(input:checked) :where(td, th) {
     background-color: var(--color-background-secondary);
 }
+
 .table tbody th {
     font-weight: 400;
 }
+
 .table thead button {
     background-color: initial;
     border: 1px solid transparent;
@@ -173,16 +206,19 @@
     vertical-align: initial;
     white-space: nowrap;
 }
+
 .table-cell__data {
     line-height: var(--spacing-250);
     max-width: 400px;
     min-width: 124px;
 }
+
 .table-cell__data--secondary {
     color: var(--color-foreground-secondary);
     font-size: var(--font-size-small);
     line-height: var(--spacing-200);
 }
+
 .table-cell__thumbnail {
     align-items: center;
     background-color: var(--color-background-tertiary);
@@ -195,50 +231,61 @@
     text-align: center;
     width: 56px;
 }
+
 .table--density-compact .table-cell__thumbnail {
     border-radius: 4px;
     height: 40px;
     width: 40px;
 }
+
 .table--density-relaxed .table-cell__thumbnail {
     border-radius: 8px;
     height: 72px;
     width: 72px;
 }
+
 .table-cell__layout {
     align-items: center;
     display: flex;
     gap: var(--spacing-200);
     width: max-content;
 }
+
 .table-cell__layout > * {
     flex-shrink: 0;
 }
+
 .table-cell__multiline {
     max-height: 80px;
     max-width: 304px;
 }
+
 .table--density-compact .table-cell__multiline {
     max-height: 64px;
     max-width: 320px;
 }
+
 .table--density-relaxed .table-cell__multiline {
     max-height: 112px;
     max-width: 272px;
 }
+
 .table-cell__layout .table-cell__multiline .table-cell__data {
     margin-block-end: var(--spacing-50);
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
 }
+
 .table-cell .textbox,
 .table-cell .textbox__control {
     width: 100%;
 }
+
 .table-cell--numeric .textbox__control {
     text-align: right;
 }
+
 .table-cell .signal {
     white-space: nowrap;
 }

package/dist/tabs/tabs.css

@@ -45,7 +45,6 @@ li.fake-tabs__item > a {
     display: inline-block;
     padding: var(--spacing-150) var(--spacing-200);
 }
-
 div.tabs__item[role="tab"]:after,
 li.fake-tabs__item > a:after {
     background-color: initial;
@@ -64,12 +63,10 @@ li.fake-tabs__item > a[aria-current] {
         var(--color-foreground-primary)
     );
 }
-
 div.tabs__item[role="tab"][aria-selected="true"]:after,
 li.fake-tabs__item > a[aria-current]:after {
     background-color: currentColor;
 }
-
 div.tabs__item[role="tab"]:focus:not(:focus-visible),
 li.fake-tabs__item a:focus:not(:focus-visible) {
     outline: none;
@@ -87,7 +84,6 @@ li.fake-tabs__item > a:not([aria-current]):not([href]):focus,
 li.fake-tabs__item > a:not([aria-current]):not([href]):hover {
     color: var(--color-foreground-disabled);
 }
-
 div.tabs__item[role="tab"]:not(
         [aria-selected="true"]
     )[aria-disabled="true"]:after,
@@ -109,7 +105,6 @@ li.fake-tabs__item > a:not([aria-current]):focus,
 li.fake-tabs__item > a:not([aria-current]):hover {
     color: var(--color-foreground-secondary);
 }
-
 div.tabs__item[role="tab"]:not([aria-selected="true"]):focus:after,
 div.tabs__item[role="tab"]:not([aria-selected="true"]):hover:after,
 li.fake-tabs__item > a:not([aria-current]):focus:after,

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;
 }