@ebay/skin 18.5.0 → 19.0.0

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

@@ -38,7 +38,6 @@
     min-height: 55px;
     min-width: 208px;
     padding: var(--spacing-200);
-    text-align: center;
     will-change: opacity, transform;
 }
 
@@ -49,6 +48,10 @@
     margin: 0;
 }
 
+.alert-dialog__footer {
+    text-align: right;
+}
+
 .alert-dialog__main {
     margin: var(--spacing-200) 0;
     min-height: var(--spacing-200);

package/dist/bundles/skin-default.css

@@ -656,7 +656,6 @@ ul.accordion details svg.details__collapse,ul.accordion details[open] svg.detail
   min-height:55px;
   min-width:208px;
   padding:var(--spacing-200);
-  text-align:center;
   will-change:opacity, transform;
 }
 
@@ -667,6 +666,10 @@ ul.accordion details svg.details__collapse,ul.accordion details[open] svg.detail
   margin:0;
 }
 
+.alert-dialog__footer{
+  text-align:right;
+}
+
 .alert-dialog__main{
   margin:var(--spacing-200) 0;
   min-height:var(--spacing-200);
@@ -2107,7 +2110,7 @@ button.chip__button>svg{
   transition:transform .2s linear;
 }
 
-.chips-combobox .combobox__listbox{
+.chips-combobox .combobox__listbox--set-position{
   top:calc(100% + var(--spacing-150));
 }
 
@@ -2184,12 +2187,17 @@ span.combobox{
   display:none;
   left:0;
   max-height:400px;
-  min-width:100%;
   overflow-y:auto;
   position:absolute;
+  top:0;
+  width:-moz-fit-content;
+  width:fit-content;
+  z-index:2;
+}
+.combobox__listbox--set-position{
+  min-width:100%;
   top:calc(100% + 4px);
   width:auto;
-  z-index:2;
 }
 
 .combobox__listbox--reverse,[dir=rtl] .combobox__listbox{
@@ -2430,7 +2438,6 @@ span.combobox{
   min-height:55px;
   min-width:208px;
   padding:var(--spacing-200);
-  text-align:center;
   will-change:opacity, transform;
 }
 
@@ -2452,6 +2459,10 @@ span.combobox{
   margin-bottom:0;
 }
 
+.confirm-dialog__footer{
+  text-align:right;
+}
+
 a.confirm-dialog__confirm,button.confirm-dialog__confirm{
   margin-left:var(--spacing-100);
 }
@@ -2609,6 +2620,7 @@ a.cta-btn--large{
 }
 .date-textbox{
   --calendar-month-width:311px;
+  display:inline-block;
 }
 
 .date-textbox>.textbox+.textbox{
@@ -2774,6 +2786,7 @@ details.details summary:focus:not(:focus-visible){
     }
   }
 }
+/*! DEPRECATED COMPONENT. Will be removed next major version */
 .drawer-dialog[role=dialog]{
   background-color:var(--dialog-scrim-color-show);
   bottom:0;
@@ -3942,22 +3955,25 @@ button.filter-menu-button__button[aria-pressed=true][aria-disabled=true]:hover,b
   border-radius:16px;
   box-shadow:var(--bubble-shadow);
   display:none;
-  max-width:288px;
   min-width:144px;
   overflow:hidden;
   position:absolute;
-  top:calc(100% + 8px);
+  top:0;
   width:max-content;
   z-index:1;
 }
 
+.filter-menu-button__menu--set-position{
+  top:calc(100% + 8px);
+}
+
 button.filter-menu-button__button[aria-expanded=true]+.filter-menu-button__menu{
   display:block;
 }
 
 .filter-menu-button__items{
   margin-top:8px;
-  max-height:calc(50vh - 40px);
+  max-height:400px;
   min-width:100%;
   overflow-y:auto;
   position:relative;
@@ -5161,7 +5177,7 @@ div.floating-label{
 
 label.floating-label__label{
   background-color:initial;
-  color:var(--floating-label-color, var(--color-foreground-primary));
+  color:var(--floating-label-color, var(--color-foreground-secondary));
   display:inline-block;
   left:16px;
   overflow:hidden;
@@ -5184,7 +5200,7 @@ label.floating-label__label{
 }
 
 label.floating-label__label--focus{
-  color:var(--color-background-inverse);
+  color:var(--floating-label-focus-color, var(--color-foreground-primary));
 }
 
 .floating-label--opaque label.floating-label__label--focus{
@@ -5255,6 +5271,8 @@ label.floating-label__label.floating-label__label--inline:has(+.textbox>:autofil
 .floating-label--large label.floating-label__label.floating-label__label--inline:has(+.textbox>:autofill){
   transform:scale(.75) translateY(3px);
 }
+
+/*! DEPRECATED COMPONENT. Will be removed next major version */
 .fullscreen-dialog[role=dialog]{
   background-color:var(--dialog-scrim-color-show);
   bottom:0;
@@ -5720,8 +5738,9 @@ span.infotip__mask{
 
 .infotip__cell{
   display:flex;
+  overflow-wrap:anywhere;
   padding:var(--spacing-100) var(--spacing-200);
-  word-break:break-word;
+  word-break:normal;
 }
 
 .infotip__content{
@@ -6042,18 +6061,6 @@ button.icon-btn.lightbox-dialog__prev{
   opacity:1;
   transform:translateY(0);
 }
-
-.lightbox-dialog__handle{
-  background-color:initial;
-  border:none;
-  left:0;
-  margin:-11px auto;
-  padding:8px;
-  position:relative;
-  right:0;
-  top:11px;
-  z-index:2;
-}
 .lightbox-dialog__handle:after{
   background-color:var(--dialog-handle-color, var(--color-stroke-default));
   border-radius:3px;
@@ -6063,11 +6070,6 @@ button.icon-btn.lightbox-dialog__prev{
   width:24px;
 }
 
-.lightbox-dialog__window--expanded{
-  height:95%;
-  max-height:95%;
-}
-
 [dir=rtl] button.icon-btn.lightbox-dialog__prev .icon--16{
   transform:rotate(180deg);
 }
@@ -6093,9 +6095,6 @@ button.icon-btn.lightbox-dialog__prev{
     max-width:100%;
     width:100%;
   }
-  .lightbox-dialog--fullscreen .lightbox-dialog__handle,.lightbox-dialog--large .lightbox-dialog__handle{
-    display:none;
-  }
 }
 @media (min-width:512px){
   .lightbox-dialog__window{
@@ -6103,9 +6102,6 @@ button.icon-btn.lightbox-dialog__prev{
     margin:auto;
     max-width:calc(88% - var(--spacing-400));
   }
-  .lightbox-dialog__handle{
-    display:none;
-  }
   .lightbox-dialog--narrow .lightbox-dialog__window{
     max-width:var(--dialog-lightbox-narrow-max-width);
   }
@@ -6358,12 +6354,17 @@ div.listbox-button__listbox{
   display:none;
   left:0;
   max-height:400px;
-  min-width:100%;
   overflow-y:auto;
   position:absolute;
+  top:0;
+  width:-moz-fit-content;
+  width:fit-content;
+  z-index:2;
+}
+div.listbox-button__listbox--set-position{
+  min-width:100%;
   top:calc(100% + 4px);
   width:auto;
-  z-index:2;
 }
 [dir=rtl] div.listbox-button__listbox{
   left:unset;
@@ -6687,13 +6688,18 @@ div.menu__item[role^=menuitem]:focus:not(:focus-visible){
   display:none;
   left:0;
   max-height:400px;
-  min-width:100%;
   outline:0;
   overflow-y:auto;
   position:absolute;
+  top:0;
+  width:-moz-fit-content;
+  width:fit-content;
+  z-index:2;
+}
+.fake-menu-button__menu--set-position,.menu-button__menu--set-position{
+  min-width:100%;
   top:calc(100% + 4px);
   width:auto;
-  z-index:2;
 }
 [dir=rtl] .fake-menu-button__menu,[dir=rtl] .menu-button__menu{
   left:unset;
@@ -8594,9 +8600,6 @@ span.skeleton__avatar:not(:last-child),span.skeleton__button:not(:last-child),sp
 div.skeleton__avatar:not(:last-child),div.skeleton__button:not(:last-child),div.skeleton__image:not(:last-child),div.skeleton__text:not(:last-child),div.skeleton__textbox:not(:last-child){
   margin-block-end:var(--spacing-150);
 }
-.skeleton--elevated{
-  --skeleton-background:var(--color-loading-fill-elevated);
-}
 
 .skeleton--on-secondary{
   --skeleton-background:var(--color-loading-fill-on-secondary);
@@ -8606,9 +8609,6 @@ div.skeleton__avatar:not(:last-child),div.skeleton__button:not(:last-child),div.
   .skeleton{
     --skeleton-background:var(--color-loading-shimmer);
   }
-  .skeleton--elevated{
-    --skeleton-background:var(--color-loading-shimmer-elevated);
-  }
   .skeleton--on-secondary{
     --skeleton-background:var(--color-loading-shimmer-on-secondary);
   }
@@ -9067,14 +9067,7 @@ span.switch__control:focus:not(:focus-visible){
   text-align:left;
 }
 
-.table-cell--numeric{
-  text-align:right;
-}
-.table__cell{
-  text-align:left;
-}
-
-.table__cell--numeric{
+.table-cell--numeric,.table__cell--numeric{
   text-align:right;
 }
 
@@ -10459,8 +10452,9 @@ span.tooltip__mask{
 
 .tooltip__cell{
   display:flex;
+  overflow-wrap:anywhere;
   padding:var(--spacing-100) var(--spacing-200);
-  word-break:break-word;
+  word-break:normal;
 }
 .tooltip__cell a{
   color:var(--tooltip-foreground-color, var(--color-foreground-primary));
@@ -10620,8 +10614,9 @@ span.tourtip__mask{
 .tourtip__cell{
   display:flex;
   flex-wrap:wrap;
+  overflow-wrap:anywhere;
   padding:var(--spacing-200);
-  word-break:break-word;
+  word-break:normal;
 }
 .tourtip__cell a{
   color:var(--tourtip-foreground-color, var(--color-foreground-on-inverse));

package/dist/bundles/skin-full.css

@@ -847,7 +847,6 @@ ul.accordion details svg.details__collapse,ul.accordion details[open] svg.detail
   min-height:55px;
   min-width:208px;
   padding:var(--spacing-200);
-  text-align:center;
   will-change:opacity, transform;
 }
 
@@ -858,6 +857,10 @@ ul.accordion details svg.details__collapse,ul.accordion details[open] svg.detail
   margin:0;
 }
 
+.alert-dialog__footer{
+  text-align:right;
+}
+
 .alert-dialog__main{
   margin:var(--spacing-200) 0;
   min-height:var(--spacing-200);
@@ -2298,7 +2301,7 @@ button.chip__button>svg{
   transition:transform .2s linear;
 }
 
-.chips-combobox .combobox__listbox{
+.chips-combobox .combobox__listbox--set-position{
   top:calc(100% + var(--spacing-150));
 }
 
@@ -2375,12 +2378,17 @@ span.combobox{
   display:none;
   left:0;
   max-height:400px;
-  min-width:100%;
   overflow-y:auto;
   position:absolute;
+  top:0;
+  width:-moz-fit-content;
+  width:fit-content;
+  z-index:2;
+}
+.combobox__listbox--set-position{
+  min-width:100%;
   top:calc(100% + 4px);
   width:auto;
-  z-index:2;
 }
 
 .combobox__listbox--reverse,[dir=rtl] .combobox__listbox{
@@ -2621,7 +2629,6 @@ span.combobox{
   min-height:55px;
   min-width:208px;
   padding:var(--spacing-200);
-  text-align:center;
   will-change:opacity, transform;
 }
 
@@ -2643,6 +2650,10 @@ span.combobox{
   margin-bottom:0;
 }
 
+.confirm-dialog__footer{
+  text-align:right;
+}
+
 a.confirm-dialog__confirm,button.confirm-dialog__confirm{
   margin-left:var(--spacing-100);
 }
@@ -2800,6 +2811,7 @@ a.cta-btn--large{
 }
 .date-textbox{
   --calendar-month-width:311px;
+  display:inline-block;
 }
 
 .date-textbox>.textbox+.textbox{
@@ -2965,6 +2977,7 @@ details.details summary:focus:not(:focus-visible){
     }
   }
 }
+/*! DEPRECATED COMPONENT. Will be removed next major version */
 .drawer-dialog[role=dialog]{
   background-color:var(--dialog-scrim-color-show);
   bottom:0;
@@ -4133,22 +4146,25 @@ button.filter-menu-button__button[aria-pressed=true][aria-disabled=true]:hover,b
   border-radius:16px;
   box-shadow:var(--bubble-shadow);
   display:none;
-  max-width:288px;
   min-width:144px;
   overflow:hidden;
   position:absolute;
-  top:calc(100% + 8px);
+  top:0;
   width:max-content;
   z-index:1;
 }
 
+.filter-menu-button__menu--set-position{
+  top:calc(100% + 8px);
+}
+
 button.filter-menu-button__button[aria-expanded=true]+.filter-menu-button__menu{
   display:block;
 }
 
 .filter-menu-button__items{
   margin-top:8px;
-  max-height:calc(50vh - 40px);
+  max-height:400px;
   min-width:100%;
   overflow-y:auto;
   position:relative;
@@ -5352,7 +5368,7 @@ div.floating-label{
 
 label.floating-label__label{
   background-color:initial;
-  color:var(--floating-label-color, var(--color-foreground-primary));
+  color:var(--floating-label-color, var(--color-foreground-secondary));
   display:inline-block;
   left:16px;
   overflow:hidden;
@@ -5375,7 +5391,7 @@ label.floating-label__label{
 }
 
 label.floating-label__label--focus{
-  color:var(--color-background-inverse);
+  color:var(--floating-label-focus-color, var(--color-foreground-primary));
 }
 
 .floating-label--opaque label.floating-label__label--focus{
@@ -5446,6 +5462,8 @@ label.floating-label__label.floating-label__label--inline:has(+.textbox>:autofil
 .floating-label--large label.floating-label__label.floating-label__label--inline:has(+.textbox>:autofill){
   transform:scale(.75) translateY(3px);
 }
+
+/*! DEPRECATED COMPONENT. Will be removed next major version */
 .fullscreen-dialog[role=dialog]{
   background-color:var(--dialog-scrim-color-show);
   bottom:0;
@@ -5911,8 +5929,9 @@ span.infotip__mask{
 
 .infotip__cell{
   display:flex;
+  overflow-wrap:anywhere;
   padding:var(--spacing-100) var(--spacing-200);
-  word-break:break-word;
+  word-break:normal;
 }
 
 .infotip__content{
@@ -6233,18 +6252,6 @@ button.icon-btn.lightbox-dialog__prev{
   opacity:1;
   transform:translateY(0);
 }
-
-.lightbox-dialog__handle{
-  background-color:initial;
-  border:none;
-  left:0;
-  margin:-11px auto;
-  padding:8px;
-  position:relative;
-  right:0;
-  top:11px;
-  z-index:2;
-}
 .lightbox-dialog__handle:after{
   background-color:var(--dialog-handle-color, var(--color-stroke-default));
   border-radius:3px;
@@ -6254,11 +6261,6 @@ button.icon-btn.lightbox-dialog__prev{
   width:24px;
 }
 
-.lightbox-dialog__window--expanded{
-  height:95%;
-  max-height:95%;
-}
-
 [dir=rtl] button.icon-btn.lightbox-dialog__prev .icon--16{
   transform:rotate(180deg);
 }
@@ -6284,9 +6286,6 @@ button.icon-btn.lightbox-dialog__prev{
     max-width:100%;
     width:100%;
   }
-  .lightbox-dialog--fullscreen .lightbox-dialog__handle,.lightbox-dialog--large .lightbox-dialog__handle{
-    display:none;
-  }
 }
 @media (min-width:512px){
   .lightbox-dialog__window{
@@ -6294,9 +6293,6 @@ button.icon-btn.lightbox-dialog__prev{
     margin:auto;
     max-width:calc(88% - var(--spacing-400));
   }
-  .lightbox-dialog__handle{
-    display:none;
-  }
   .lightbox-dialog--narrow .lightbox-dialog__window{
     max-width:var(--dialog-lightbox-narrow-max-width);
   }
@@ -6549,12 +6545,17 @@ div.listbox-button__listbox{
   display:none;
   left:0;
   max-height:400px;
-  min-width:100%;
   overflow-y:auto;
   position:absolute;
+  top:0;
+  width:-moz-fit-content;
+  width:fit-content;
+  z-index:2;
+}
+div.listbox-button__listbox--set-position{
+  min-width:100%;
   top:calc(100% + 4px);
   width:auto;
-  z-index:2;
 }
 [dir=rtl] div.listbox-button__listbox{
   left:unset;
@@ -6878,13 +6879,18 @@ div.menu__item[role^=menuitem]:focus:not(:focus-visible){
   display:none;
   left:0;
   max-height:400px;
-  min-width:100%;
   outline:0;
   overflow-y:auto;
   position:absolute;
+  top:0;
+  width:-moz-fit-content;
+  width:fit-content;
+  z-index:2;
+}
+.fake-menu-button__menu--set-position,.menu-button__menu--set-position{
+  min-width:100%;
   top:calc(100% + 4px);
   width:auto;
-  z-index:2;
 }
 [dir=rtl] .fake-menu-button__menu,[dir=rtl] .menu-button__menu{
   left:unset;
@@ -8785,9 +8791,6 @@ span.skeleton__avatar:not(:last-child),span.skeleton__button:not(:last-child),sp
 div.skeleton__avatar:not(:last-child),div.skeleton__button:not(:last-child),div.skeleton__image:not(:last-child),div.skeleton__text:not(:last-child),div.skeleton__textbox:not(:last-child){
   margin-block-end:var(--spacing-150);
 }
-.skeleton--elevated{
-  --skeleton-background:var(--color-loading-fill-elevated);
-}
 
 .skeleton--on-secondary{
   --skeleton-background:var(--color-loading-fill-on-secondary);
@@ -8797,9 +8800,6 @@ div.skeleton__avatar:not(:last-child),div.skeleton__button:not(:last-child),div.
   .skeleton{
     --skeleton-background:var(--color-loading-shimmer);
   }
-  .skeleton--elevated{
-    --skeleton-background:var(--color-loading-shimmer-elevated);
-  }
   .skeleton--on-secondary{
     --skeleton-background:var(--color-loading-shimmer-on-secondary);
   }
@@ -9258,14 +9258,7 @@ span.switch__control:focus:not(:focus-visible){
   text-align:left;
 }
 
-.table-cell--numeric{
-  text-align:right;
-}
-.table__cell{
-  text-align:left;
-}
-
-.table__cell--numeric{
+.table-cell--numeric,.table__cell--numeric{
   text-align:right;
 }
 
@@ -10650,8 +10643,9 @@ span.tooltip__mask{
 
 .tooltip__cell{
   display:flex;
+  overflow-wrap:anywhere;
   padding:var(--spacing-100) var(--spacing-200);
-  word-break:break-word;
+  word-break:normal;
 }
 .tooltip__cell a{
   color:var(--tooltip-foreground-color, var(--color-foreground-primary));
@@ -10811,8 +10805,9 @@ span.tourtip__mask{
 .tourtip__cell{
   display:flex;
   flex-wrap:wrap;
+  overflow-wrap:anywhere;
   padding:var(--spacing-200);
-  word-break:break-word;
+  word-break:normal;
 }
 .tourtip__cell a{
   color:var(--tourtip-foreground-color, var(--color-foreground-on-inverse));