@ebay/skin 19.18.0 → 19.19.0

package/dist/bundles/skin-headless.css

@@ -95,14 +95,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;
@@ -120,14 +117,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;
@@ -144,7 +138,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;
@@ -232,13 +225,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;
 }
@@ -387,14 +376,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;
@@ -490,10 +476,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;
@@ -1215,14 +1201,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;
@@ -1240,14 +1223,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;
@@ -1375,7 +1355,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;
@@ -2019,9 +1998,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;
@@ -2131,13 +2109,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;
 }
@@ -2535,13 +2509,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;
 }
@@ -2634,9 +2604,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%;
@@ -3441,14 +3410,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;
@@ -4877,12 +4843,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;
 }
@@ -4898,10 +4860,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;
@@ -5012,16 +4973,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;
@@ -6457,13 +6418,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;
 }
@@ -8052,14 +8009,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;
 }
@@ -8073,10 +8026,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;
@@ -8373,10 +8325,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;
@@ -9722,7 +9672,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;
@@ -9848,10 +9797,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;
@@ -9990,11 +9937,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:"";
@@ -10004,19 +9951,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{
@@ -10150,12 +10103,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;
@@ -10165,7 +10117,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;
@@ -10196,7 +10148,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;
@@ -10233,7 +10185,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;
 }
@@ -10254,17 +10205,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);
 }
@@ -10273,7 +10225,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;
@@ -10434,12 +10386,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{
@@ -10563,12 +10512,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{

package/dist/carousel/carousel.css

@@ -62,14 +62,11 @@
 }
 .carousel__list--image-treatment > li: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;
 }
 .carousel__list--image-treatment > li > img {
     display: inline-block;
@@ -87,14 +84,11 @@
 }
 .carousel__list--image-treatment-large > li: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;
 }
 .carousel__list--image-treatment-large > li > img {
     display: inline-block;
@@ -256,7 +250,6 @@ 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;

package/dist/combobox/combobox.css

@@ -176,9 +176,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;

package/dist/confirm-dialog/confirm-dialog.css

@@ -6,13 +6,9 @@
 .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;
 }

package/dist/drawer-dialog/drawer-dialog.css

@@ -8,13 +8,9 @@
 .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;
 }
@@ -115,9 +111,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%;

package/dist/filter-chip/filter-chip.css

@@ -126,14 +126,11 @@ button.filter-chip--expressive {
 
 .filter-chip__media: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;
 }
 
 .filter-chip__media > img {

package/dist/fullscreen-dialog/fullscreen-dialog.css

@@ -7,12 +7,8 @@
 }
 .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;
 }
@@ -31,10 +27,9 @@
     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;

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

@@ -8,13 +8,9 @@
 .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;
 }

package/dist/mixins/_utility.scss

@@ -33,14 +33,11 @@
 
     &::after {
         background: rgb(0 0 0 / 0.05);
-        bottom: 0;
         content: "";
         display: block;
-        left: 0;
+        inset: 0;
         pointer-events: none;
         position: absolute;
-        right: 0;
-        top: 0;
     }
 
     > img {
@@ -63,7 +60,6 @@
 
 @mixin scrollbars-permanent($target) {
     #{$target} {
-        -webkit-overflow-scrolling: touch;
         scroll-behavior: smooth;
         /* stylelint-disable declaration-block-no-duplicate-properties */
         -webkit-scroll-snap-type: mandatory;

package/dist/mixins/utility-mixins.less

@@ -35,14 +35,11 @@
 
     &::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;
     }
 
     > img {

package/dist/panel-dialog/panel-dialog.css

@@ -5,14 +5,10 @@
 }
 .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;
 }
@@ -29,10 +25,9 @@
     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;

package/dist/progress-bar-expressive/progress-bar-expressive.css

@@ -53,10 +53,8 @@
     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;