@ebay/skin 19.18.0 → 19.19.0

package/dist/alert-dialog/alert-dialog.css

@@ -6,13 +6,9 @@
 .alert-dialog[role="alertdialog"] {
     align-items: flex-start;
     background-color: var(--dialog-scrim-color-show);
-    bottom: 0;
+    inset: 0;
     justify-content: center;
-    left: 0;
-    -webkit-overflow-scrolling: touch;
     position: fixed;
-    right: 0;
-    top: 0;
     will-change: background-color;
     z-index: 100000;
 }

package/dist/avatar/avatar.css

@@ -13,14 +13,11 @@
 }
 .avatar:after {
     background: rgba(0, 0, 0, 0.05);
-    bottom: 0;
     content: "";
     display: block;
-    left: 0;
+    inset: 0;
     pointer-events: none;
     position: absolute;
-    right: 0;
-    top: 0;
 }
 .avatar > img {
     display: inline-block;

package/dist/badge/badge.css

@@ -1,12 +1,9 @@
 .badge {
     align-items: center;
-    background-color: var(
-        --badge-background-color,
-        var(--color-background-attention)
-    );
+    background-color: var(--color-background-attention);
     border: 2px solid var(--color-border-on-attention);
     border-radius: 16px;
-    color: var(--badge-foreground-color, var(--color-foreground-on-attention));
+    color: var(--color-foreground-on-attention);
     display: inline-flex;
     font-size: 10px;
     height: 16px;

package/dist/bundles/skin-default.css

@@ -735,14 +735,11 @@ a:not([href]),a[aria-disabled=true]{
 }
 .image-treatment:after{
   background:rgba(0, 0, 0, .05);
-  bottom:0;
   content:"";
   display:block;
-  left:0;
+  inset:0;
   pointer-events:none;
   position:absolute;
-  right:0;
-  top:0;
 }
 .image-treatment>img{
   display:inline-block;
@@ -760,14 +757,11 @@ a:not([href]),a[aria-disabled=true]{
 }
 .image-treatment-large:after{
   background:rgba(0, 0, 0, .05);
-  bottom:0;
   content:"";
   display:block;
-  left:0;
+  inset:0;
   pointer-events:none;
   position:absolute;
-  right:0;
-  top:0;
 }
 .image-treatment-large>img{
   display:inline-block;
@@ -784,7 +778,6 @@ a:not([href]),a[aria-disabled=true]{
   white-space:nowrap;
 }
 .scrollbars-permanent{
-  -webkit-overflow-scrolling:touch;
   scroll-behavior:smooth;
   scroll-snap-type:proximity;
   scroll-snap-type:x proximity;
@@ -872,13 +865,9 @@ ul.accordion--large summary.details__summary{
 .alert-dialog[role=alertdialog]{
   align-items:flex-start;
   background-color:var(--dialog-scrim-color-show);
-  bottom:0;
+  inset:0;
   justify-content:center;
-  left:0;
-  -webkit-overflow-scrolling:touch;
   position:fixed;
-  right:0;
-  top:0;
   will-change:background-color;
   z-index:100000;
 }
@@ -1027,14 +1016,11 @@ ul.accordion--large summary.details__summary{
 }
 .avatar:after{
   background:rgba(0, 0, 0, .05);
-  bottom:0;
   content:"";
   display:block;
-  left:0;
+  inset:0;
   pointer-events:none;
   position:absolute;
-  right:0;
-  top:0;
 }
 .avatar>img{
   display:inline-block;
@@ -1130,10 +1116,10 @@ ul.accordion--large summary.details__summary{
 }
 .badge{
   align-items:center;
-  background-color:var(--badge-background-color, var(--color-background-attention));
+  background-color:var(--color-background-attention);
   border:2px solid var(--color-border-on-attention);
   border-radius:16px;
-  color:var(--badge-foreground-color, var(--color-foreground-on-attention));
+  color:var(--color-foreground-on-attention);
   display:inline-flex;
   font-size:10px;
   height:16px;
@@ -1855,14 +1841,11 @@ button.card:hover{
 }
 .carousel__list--image-treatment>li:after{
   background:rgba(0, 0, 0, .05);
-  bottom:0;
   content:"";
   display:block;
-  left:0;
+  inset:0;
   pointer-events:none;
   position:absolute;
-  right:0;
-  top:0;
 }
 .carousel__list--image-treatment>li>img{
   display:inline-block;
@@ -1880,14 +1863,11 @@ button.card:hover{
 }
 .carousel__list--image-treatment-large>li:after{
   background:rgba(0, 0, 0, .05);
-  bottom:0;
   content:"";
   display:block;
-  left:0;
+  inset:0;
   pointer-events:none;
   position:absolute;
-  right:0;
-  top:0;
 }
 .carousel__list--image-treatment-large>li>img{
   display:inline-block;
@@ -2015,7 +1995,6 @@ span.carousel,span.carousel__container{
   }
   .carousel:not(.carousel__autoplay) .carousel__list{
     border-color:rgba(0, 0, 0, 0);
-    -webkit-overflow-scrolling:touch;
     overflow-x:auto;
     overflow-y:hidden;
     padding-bottom:10px;
@@ -2659,9 +2638,8 @@ span.combobox{
   width:38px;
 }
 .combobox__control button.icon-btn svg{
-  left:0;
+  inset:auto 0;
   margin:0;
-  right:0;
 }
 .combobox--expanded .combobox__listbox{
   display:block;
@@ -2771,13 +2749,9 @@ span.combobox{
 .confirm-dialog[role=dialog]{
   align-items:flex-start;
   background-color:var(--dialog-scrim-color-show);
-  bottom:0;
+  inset:0;
   justify-content:center;
-  left:0;
-  -webkit-overflow-scrolling:touch;
   position:fixed;
-  right:0;
-  top:0;
   will-change:background-color;
   z-index:100000;
 }
@@ -3175,13 +3149,9 @@ details.details summary:focus:not(:focus-visible){
 .drawer-dialog[role=dialog]{
   align-items:flex-end;
   background-color:var(--dialog-scrim-color-show);
-  bottom:0;
-  left:0;
+  inset:0;
   overflow:hidden;
-  -webkit-overflow-scrolling:touch;
   position:fixed;
-  right:0;
-  top:0;
   will-change:background-color;
   z-index:100000;
 }
@@ -3274,9 +3244,8 @@ button.icon-btn.drawer-dialog__close{
   max-height:50%;
   max-width:100%;
   min-height:55px;
-  will-change:opacity, transform;
-  -webkit-overflow-scrolling:touch;
   overflow-y:hidden;
+  will-change:opacity, transform;
 }
 .drawer-dialog__window--expanded{
   height:95%;
@@ -4081,14 +4050,11 @@ a.filter-chip--expressive,button.filter-chip--expressive{
 }
 .filter-chip__media:after{
   background:rgba(0, 0, 0, .05);
-  bottom:0;
   content:"";
   display:block;
-  left:0;
+  inset:0;
   pointer-events:none;
   position:absolute;
-  right:0;
-  top:0;
 }
 .filter-chip__media>img{
   display:inline-block;
@@ -5517,12 +5483,8 @@ label.floating-label__label.floating-label__label--inline:has(+.textbox>:autofil
 /*! DEPRECATED COMPONENT. Will be removed next major version */
 .fullscreen-dialog[role=dialog]{
   background-color:var(--dialog-scrim-color-show);
-  bottom:0;
-  left:0;
-  -webkit-overflow-scrolling:touch;
+  inset:0;
   position:fixed;
-  right:0;
-  top:0;
   will-change:background-color;
   z-index:100000;
 }
@@ -5538,10 +5500,9 @@ label.floating-label__label.floating-label__label--inline:has(+.textbox>:autofil
   flex:1 0 auto;
   flex-direction:column;
   min-height:55px;
-  will-change:opacity, transform;
-  -webkit-overflow-scrolling:touch;
   overflow-y:auto;
   width:100%;
+  will-change:opacity, transform;
 }
 .fullscreen-dialog__header{
   display:flex;
@@ -5652,16 +5613,16 @@ button.fullscreen-dialog__back,button.fullscreen-dialog__close{
   text-transform:uppercase;
 }
 .signal--trustworthy{
-  color:var(--signal-trustworthy-color, var(--color-foreground-accent));
+  color:var(--color-foreground-accent);
 }
 .signal--recent{
-  color:var(--signal-recent-color, var(--color-foreground-success));
+  color:var(--color-foreground-success);
 }
 .signal--time-sensitive{
-  color:var(--signal-time-sensitive-color, var(--color-foreground-attention));
+  color:var(--color-foreground-attention);
 }
 .signal--neutral{
-  color:var(--signal-neutral-color, var(--color-foreground-secondary));
+  color:var(--color-foreground-secondary);
 }
 svg.icon{
   display:inline-block;
@@ -7097,13 +7058,9 @@ span.inline-notice{
 .lightbox-dialog[role=dialog]{
   align-items:flex-start;
   background-color:var(--dialog-scrim-color-show);
-  bottom:0;
+  inset:0;
   justify-content:center;
-  left:0;
-  -webkit-overflow-scrolling:touch;
   position:fixed;
-  right:0;
-  top:0;
   will-change:background-color;
   z-index:100000;
 }
@@ -8692,14 +8649,10 @@ nav.pagination--fluid ol.pagination__items li{
 }
 .panel-dialog[role=dialog]{
   background-color:var(--dialog-scrim-color-show);
-  bottom:0;
   flex-direction:column;
-  left:0;
+  inset:0;
   overflow:hidden;
-  -webkit-overflow-scrolling:touch;
   position:fixed;
-  right:0;
-  top:0;
   will-change:background-color;
   z-index:100000;
 }
@@ -8713,10 +8666,9 @@ nav.pagination--fluid ol.pagination__items li{
   flex:1 0 auto;
   flex-direction:column;
   min-height:55px;
-  will-change:opacity, transform;
-  -webkit-overflow-scrolling:touch;
   overflow-y:auto;
   width:100%;
+  will-change:opacity, transform;
 }
 .panel-dialog__window--end{
   align-self:flex-end;
@@ -9013,10 +8965,8 @@ button.icon-btn.panel-dialog__prev{
   line-height:var(--spacing-300);
 }
 .progress-bar-expressive__message{
-  bottom:0;
-  left:0;
+  inset:auto 0 0;
   position:absolute;
-  right:0;
 }
 .progress-bar-expressive__message[role=status]{
   opacity:1;
@@ -10362,7 +10312,6 @@ span.switch__control:focus:not(:focus-visible){
 .table{
   overflow-x:auto;
   position:relative;
-  -webkit-overflow-scrolling:touch;
   scroll-behavior:smooth;
   scroll-snap-type:proximity;
   scroll-snap-type:x proximity;
@@ -10488,10 +10437,8 @@ span.switch__control:focus:not(:focus-visible){
   text-decoration:none;
 }
 .table--loading-state .progress-bar-expressive{
-  bottom:50%;
-  left:0;
+  inset:auto 0 50%;
   position:absolute;
-  right:0;
 }
 .table--mode-selection td:first-child,.table--mode-selection th:first-child{
   min-width:48px;
@@ -10630,11 +10577,11 @@ li.fake-tabs__item>a{
 div.tabs__item[role=tab]>span{
   padding:2px 0;
 }
-div.tabs__item[role=tab]>span,li.fake-tabs__item>a{
+div.tabs__item[role=tab],li.fake-tabs__item>a{
   color:var(--tabs-item-foreground-color, var(--color-foreground-secondary));
   display:inline-block;
 }
-div.tabs__item[role=tab]>span:after,li.fake-tabs__item>a:after{
+div.tabs__item[role=tab]:after,li.fake-tabs__item>a:after{
   background-color:initial;
   border-radius:6px;
   content:"";
@@ -10644,19 +10591,25 @@ div.tabs__item[role=tab]>span:after,li.fake-tabs__item>a:after{
   position:absolute;
   width:100%;
 }
-div.tabs__item[role=tab][aria-selected=true]>span,li.fake-tabs__item>a[aria-current]{
+div.tabs__item[role=tab][aria-selected=true],li.fake-tabs__item>a[aria-current]{
   color:var(--tabs-item-selected-foreground-color, var(--color-foreground-primary));
 }
-div.tabs__item[role=tab][aria-selected=true]>span:after,li.fake-tabs__item>a[aria-current]:after{
+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;
 }
-div.tabs__item[role=tab]:not([aria-selected=true]):focus>span,div.tabs__item[role=tab]:not([aria-selected=true]):hover>span,li.fake-tabs__item>a:not([aria-current]):focus,li.fake-tabs__item>a:not([aria-current]):hover{
-  color:var(--tabs-item-hover-foreground-color, var(--color-foreground-secondary));
+div.tabs__item[role=tab]:not([aria-selected=true])[aria-disabled=true],div.tabs__item[role=tab]:not([aria-selected=true])[aria-disabled=true]:focus,div.tabs__item[role=tab]:not([aria-selected=true])[aria-disabled=true]:hover,li.fake-tabs__item>a:not([aria-current]):not([href]),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,div.tabs__item[role=tab]:not([aria-selected=true])[aria-disabled=true]:focus:after,div.tabs__item[role=tab]:not([aria-selected=true])[aria-disabled=true]:hover:after,li.fake-tabs__item>a:not([aria-current]):not([href]):after,li.fake-tabs__item>a:not([aria-current]):not([href]):focus:after,li.fake-tabs__item>a:not([aria-current]):not([href]):hover:after{
+  background-color:initial;
+}
+div.tabs__item[role=tab]:not([aria-selected=true]):focus,div.tabs__item[role=tab]:not([aria-selected=true]):hover,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>span:after,div.tabs__item[role=tab]:not([aria-selected=true]):hover>span:after,li.fake-tabs__item>a:not([aria-current]):focus:after,li.fake-tabs__item>a:not([aria-current]):hover:after{
+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,li.fake-tabs__item>a:not([aria-current]):hover:after{
   background-color:currentColor;
 }
 .fake-tabs__cell,.tabs__cell{
@@ -10790,12 +10743,11 @@ input.textbox__control[readonly]:focus,textarea.textbox__control[readonly]:focus
   width:100%;
 }
 .toast-dialog{
-  background-color:var(--toast-dialog-background-color, var(--color-background-accent));
-  border-top-left-radius:var(--toast-dialog-border-radius, var(--border-radius-100));
-  border-top-right-radius:var(--toast-dialog-border-radius, var(--border-radius-100));
-  bottom:0;
+  background-color:var(--color-background-accent);
+  border-top-left-radius:var(--border-radius-100);
+  border-top-right-radius:var(--border-radius-100);
   box-shadow:0 0 3px rgba(0, 0, 0, .28);
-  left:0;
+  inset:auto 0 0;
   max-height:40vh;
   min-width:320px;
   position:fixed;
@@ -10805,7 +10757,7 @@ input.textbox__control[readonly]:focus,textarea.textbox__control[readonly]:focus
   z-index:2;
 }
 .toast-dialog,.toast-dialog a{
-  color:var(--toast-dialog-foreground-color, var(--color-foreground-on-success));
+  color:var(--color-foreground-on-success);
 }
 .toast-dialog a:focus{
   outline:1px auto currentColor;
@@ -10836,7 +10788,7 @@ input.textbox__control[readonly]:focus,textarea.textbox__control[readonly]:focus
 button.icon-btn.toast-dialog__close{
   align-self:flex-start;
   border:0;
-  color:var(--toast-dialog-foreground-color, var(--color-foreground-on-success));
+  color:var(--color-foreground-on-success);
   flex-shrink:0;
   margin-inline-start:auto;
   overflow:hidden;
@@ -10873,7 +10825,6 @@ button.icon-btn.toast-dialog__close>svg{
   text-decoration:underline;
 }
 .toast-dialog__footer button.btn--primary,.toast-dialog__footer button.btn--secondary{
-  border-color:var(--toast-dialog-foreground-color, var(--color-foreground-on-accent));
   overflow:hidden;
   position:relative;
 }
@@ -10894,17 +10845,18 @@ button.icon-btn.toast-dialog__close>svg{
   background-color:var(--color-state-layer-pressed);
 }
 .toast-dialog__footer button.btn--primary,.toast-dialog__footer button.btn--secondary{
+  border-color:var(--color-foreground-on-accent);
   border-style:solid;
   border-width:1px;
   outline-offset:2px;
 }
 .toast-dialog__footer button.btn--primary{
-  background-color:var(--toast-dialog-foreground-color, var(--color-background-primary));
-  color:var(--toast-dialog-background-color, var(--color-foreground-accent));
+  background-color:var(--color-background-primary);
+  color:var(--color-foreground-accent);
 }
 .toast-dialog__footer button.btn--secondary{
   background-color:initial;
-  color:var(--toast-dialog-foreground-color, var(--color-background-primary));
+  color:var(--color-background-primary);
   font-weight:700;
   margin-inline-end:var(--spacing-100);
 }
@@ -10913,7 +10865,7 @@ button.icon-btn.toast-dialog__close>svg{
 }
 @media (min-width:512px){
   .toast-dialog{
-    border-radius:var(--toast-dialog-border-radius, var(--border-radius-100));
+    border-radius:var(--border-radius-100);
     bottom:var(--spacing-200);
     left:var(--spacing-200);
     max-width:480px;
@@ -11074,12 +11026,9 @@ button.icon-btn.toast-dialog__close>svg{
   width:100%;
 }
 .toggle-button--gallery-layout .toggle-button__image{
-  bottom:0;
   height:100%;
-  left:0;
+  inset:0;
   position:absolute;
-  right:0;
-  top:0;
   width:100%;
 }
 .toggle-button[aria-disabled=true] .toggle-button__icon,.toggle-button[aria-disabled=true] .toggle-button__image,.toggle-button[disabled] .toggle-button__icon,.toggle-button[disabled] .toggle-button__image{
@@ -11203,12 +11152,9 @@ button.icon-btn.toast-dialog__close>svg{
   width:100%;
 }
 .toggle-button-group--gallery-layout .toggle-button__image{
-  bottom:0;
   height:100%;
-  left:0;
+  inset:0;
   position:absolute;
-  right:0;
-  top:0;
   width:100%;
 }
 .toggle-button-group--gallery-layout .toggle-button__image-container img{