@ebay/skin 18.6.0 → 19.0.0

package/dist/bundles/skin-default.css

@@ -2110,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));
 }
 
@@ -2187,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{
@@ -2615,6 +2620,7 @@ a.cta-btn--large{
 }
 .date-textbox{
   --calendar-month-width:311px;
+  display:inline-block;
 }
 
 .date-textbox>.textbox+.textbox{
@@ -2780,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;
@@ -3948,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;
@@ -5261,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;
@@ -5726,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{
@@ -6048,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;
@@ -6069,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);
 }
@@ -6099,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{
@@ -6109,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);
   }
@@ -6364,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;
@@ -6693,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;
@@ -8600,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);
@@ -8612,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);
   }
@@ -9073,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;
 }
 
@@ -10465,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));
@@ -10626,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

@@ -2301,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));
 }
 
@@ -2378,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{
@@ -2806,6 +2811,7 @@ a.cta-btn--large{
 }
 .date-textbox{
   --calendar-month-width:311px;
+  display:inline-block;
 }
 
 .date-textbox>.textbox+.textbox{
@@ -2971,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;
@@ -4139,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;
@@ -5452,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;
@@ -5917,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{
@@ -6239,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;
@@ -6260,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);
 }
@@ -6290,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{
@@ -6300,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);
   }
@@ -6555,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;
@@ -6884,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;
@@ -8791,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);
@@ -8803,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);
   }
@@ -9264,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;
 }
 
@@ -10656,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));
@@ -10817,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));

package/dist/bundles/skin-headless.css

@@ -1713,7 +1713,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));
 }
 
@@ -1790,12 +1790,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{
@@ -2218,6 +2223,7 @@ a.cta-btn--large{
 }
 .date-textbox{
   --calendar-month-width:311px;
+  display:inline-block;
 }
 
 .date-textbox>.textbox+.textbox{
@@ -2383,6 +2389,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;
@@ -3551,22 +3558,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;
@@ -4864,6 +4874,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;
@@ -5329,8 +5341,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{
@@ -5651,18 +5664,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;
@@ -5672,11 +5673,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);
 }
@@ -5702,9 +5698,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{
@@ -5712,9 +5705,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);
   }
@@ -5967,12 +5957,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;
@@ -6296,13 +6291,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;
@@ -8203,9 +8203,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);
@@ -8215,9 +8212,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);
   }
@@ -8676,14 +8670,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;
 }
 
@@ -10068,8 +10055,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));
@@ -10229,8 +10217,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/chips-combobox/chips-combobox.css

@@ -60,7 +60,7 @@
     transition: transform 0.2s linear;
 }
 
-.chips-combobox .combobox__listbox {
+.chips-combobox .combobox__listbox--set-position {
     top: calc(100% + var(--spacing-150));
 }