@ebay/skin 19.2.0 → 19.4.0

package/README.md

@@ -4,7 +4,7 @@
 
 > Pure CSS framework designed & developed by eBay for a branded, e-commerce marketplace.
 
-Please visit the [Skin website](https://opensource.ebay.com/skin/) for all end-user documentation.
+Please visit the [Skin website](https://opensource.ebay.com/evo-web/skin/) for all end-user documentation.
 
 ## License
 
@@ -12,7 +12,7 @@ Skin is [MIT](LICENSE) licensed.
 
 ## Install
 
-Skin is available as the `@ebay/skin` package on [NPM](https://www.npmjs.com/). Skin is also available on our [CDN](https://opensource.ebay.com/skin/#cdn).
+Skin is available as the `@ebay/skin` package on [NPM](https://www.npmjs.com/). Skin is also available on our [CDN](https://opensource.ebay.com/evo-web/skin/#cdn).
 
 ## Versioning
 
@@ -26,13 +26,13 @@ More detailed insight into our versioning process can be found in our [contribut
 
 ## Releases
 
-Please refer to our [releases](https://github.com/eBay/skin/releases) page to view the change log for current and past releases.
+Please refer to our [releases](https://github.com/eBay/evo-web/releases) page to view the change log for current and past releases.
 
-Please refer to our [web archive](https://opensource.ebay.com/skin/archive/) for past examples and documentation.
+Please refer to our [web archive](https://opensource.ebay.com/evo-web/skin/archive/) for past examples and documentation.
 
 ## Roadmap
 
-Please refer to our [projects](https://github.com/eBay/skin/projects) page to see what's coming down the pipeline.
+Please refer to our [projects](https://github.com/eBay/evo-web/projects) page to see what's coming down the pipeline.
 
 ## Browser Support
 
@@ -46,7 +46,7 @@ We take accessibility very seriously. Very seriously indeed. Therefore all modul
 
 ## Issues
 
-Please use our [issues page](https://github.com/eBay/skin/issues) to ask questions, report issues or submit feature requests.
+Please use our [issues page](https://github.com/eBay/evo-web/issues) to ask questions, report issues or submit feature requests.
 
 To help track your issue, the Skin admins will assign it with a label from one or more issue categories.
 
@@ -74,4 +74,4 @@ The original creator of Skin is [Senthil Padmanabhan](https://github.com/senthil
 
 The current author and lead maintainer is [Ian McBurnie](https://github.com/ianmcburnie).
 
-[List of all contributors](https://github.com/eBay/skin/graphs/contributors).
+[List of all contributors](https://github.com/eBay/evo-web/graphs/contributors).

package/dist/accordion/accordion.css

@@ -7,7 +7,7 @@ ul.accordion ::marker {
     font-size: 0;
 }
 
-ul.accordion li:not(:last-child) {
+ul.accordion > li:not(:last-child) {
     border-bottom: 1px solid var(--color-stroke-subtle);
 }
 

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

@@ -1,6 +1,6 @@
 :root {
-    --dialog-scrim-color-hide: rgba(17, 24, 32, 0);
-    --dialog-scrim-color-show: rgba(17, 24, 32, 0.7);
+    --dialog-scrim-color-hide: rgb(17, 24, 32, 0);
+    --dialog-scrim-color-show: rgb(17, 24, 32, 0.7);
     --dialog-lightbox-max-width: 616px;
 }
 .alert-dialog[role="alertdialog"] {

package/dist/bundles/skin-default.css

@@ -610,7 +610,7 @@ ul.accordion ::marker{
   font-size:0;
 }
 
-ul.accordion li:not(:last-child){
+ul.accordion>li:not(:last-child){
   border-bottom:1px solid var(--color-stroke-subtle);
 }
 
@@ -1729,14 +1729,19 @@ span.carousel,span.carousel__container{
 .carousel--hidden-scrollbar .carousel__control--next{
   right:0;
 }
+@font-face{
+  font-family:Reddit Sans Condensed Bold;
+  src:url(https://ir.ebaystatic.com/cr/v/c01/Reddit_Sans_Condensed_Bold/RedditSansCondensed-Bold.ttf);
+}
 .ccd{
   display:inline-flex;
+  font-family:Reddit Sans Condensed Bold,Market Sans,Arial,sans-serif;
   gap:8px;
 }
 
 .ccd__charger-icon{
-  height:78px;
-  width:58px;
+  height:57px;
+  width:42px;
 }
 
 .ccd__description-figure{
@@ -1744,12 +1749,12 @@ span.carousel,span.carousel__container{
   display:flex;
   flex-direction:column;
   justify-content:center;
-  width:55px;
+  width:39px;
 }
 
 .ccd__top-icon{
-  height:24px;
-  width:35px;
+  height:18px;
+  width:27px;
 }
 
 .ccd__body{
@@ -1760,12 +1765,11 @@ span.carousel,span.carousel__container{
   flex-direction:column;
   font-size:.4375rem;
   font-weight:var(--font-weight-bold);
-  gap:2px;
-  height:53px;
+  height:37px;
   justify-content:center;
   overflow:hidden;
   text-align:center;
-  width:53px;
+  width:39px;
 }
 .calendar{
   color:var(--calendar-color-token, var(--color-foreground-primary));
@@ -2120,10 +2124,8 @@ button.chip__button>svg{
   border:1px solid var(--color-stroke-default);
   border-radius:var(--border-radius-50);
   display:inline-block;
-  padding-bottom:var(--spacing-100);
-  padding-inline-end:var(--spacing-200);
-  padding-inline-start:var(--spacing-100);
-  padding-top:var(--spacing-100);
+  padding-block:var(--spacing-100);
+  padding-inline:var(--spacing-100) var(--spacing-200);
   position:relative;
 }
 
@@ -3475,7 +3477,7 @@ img.file-preview-card__asset,video.file-preview-card__asset{
 
 .file-preview-card__see-more{
   aspect-ratio:1/1;
-  background-color:rgba(var(--file-preview-card-see-more-background-color-rgb, var(--color-background-strong-rgb)), .5);
+  background-color:rgb(var(--file-preview-card-see-more-background-color-rgb, var(--color-background-strong-rgb)), .5);
   border:none;
   border-radius:50%;
   color:var(--file-preview-card-see-more-color, var(--color-foreground-on-strong));
@@ -3496,11 +3498,11 @@ img.file-preview-card__asset,video.file-preview-card__asset{
 }
 
 .file-preview-card__see-more:focus-visible,.file-preview-card__see-more:hover{
-  background-color:rgba(var(--file-preview-card-see-more-interactive-background-color-rgb, var(--color-state-secondary-hover-rgb)), .5);
+  background-color:rgb(var(--file-preview-card-see-more-interactive-background-color-rgb, var(--color-state-secondary-hover-rgb)), .5);
 }
 
 .file-preview-card__see-more:active{
-  background-color:rgba(var(--file-preview-card-see-more-interactive-active-background-color-rgb, var(--color-state-secondary-active-rgb)), .5);
+  background-color:rgb(var(--file-preview-card-see-more-interactive-active-background-color-rgb, var(--color-state-secondary-active-rgb)), .5);
 }
 
 .file-preview-card__footer{
@@ -6051,6 +6053,30 @@ span.inline-notice{
   color:var(--color-foreground-secondary);
 }
 
+.layout-grid.item-tile-group{
+  --layout-grid-columns-min:2;
+  --layout-grid-columns-xs:2;
+  --layout-grid-columns-sm:2;
+  --layout-grid-columns-md:3;
+  --layout-grid-columns-lg:4;
+  --layout-grid-columns-xl:5;
+  --layout-grid-columns-xl2:5;
+  --layout-grid-columns-xl3:5;
+  --layout-grid-columns-xl4:5;
+}
+
+.layout-grid.item-tile-group--list-view{
+  --layout-grid-columns-min:1;
+  --layout-grid-columns-xs:1;
+  --layout-grid-columns-sm:1;
+  --layout-grid-columns-md:1;
+  --layout-grid-columns-lg:1;
+  --layout-grid-columns-xl:2;
+  --layout-grid-columns-xl2:2;
+  --layout-grid-columns-xl3:2;
+  --layout-grid-columns-xl4:2;
+}
+
 .item-tile-group .item-tile__title{
   -webkit-line-clamp:3;
 }
@@ -9281,7 +9307,7 @@ span[role=region].section-notice{
   margin-inline-end:var(--spacing-200);
 }
 
-.section-notice__header+.section-notice__main{
+.section-notice__header+.section-notice__main,.section-notice__header~.section-notice__cta{
   grid-column:2;
 }
 
@@ -9298,10 +9324,10 @@ span[role=region].section-notice{
 }
 
 p.section-notice__cta{
-  grid-column:2;
+  grid-column:1 /  3;
   grid-row:2;
   justify-self:flex-start;
-  margin-right:var(--spacing-200);
+  margin-bottom:0;
   margin-top:var(--spacing-200);
 }
 .section-notice__main .section-notice__title~p{
@@ -9315,10 +9341,13 @@ p.section-notice__cta{
     grid-column:4;
     grid-row:1;
     justify-self:flex-end;
-    margin-bottom:0;
+    margin-right:var(--spacing-200);
     margin-top:0;
     padding-right:var(--spacing-200);
   }
+  .section-notice__header~.section-notice__cta{
+    grid-column:4;
+  }
   .section-notice__footer{
     padding-left:var(--spacing-200);
   }
@@ -10579,8 +10608,8 @@ input.textbox__control[readonly]:focus,textarea.textbox__control[readonly]:focus
   width:100%;
 }
 :root{
-  --dialog-scrim-color-hide:rgba(17, 24, 32, 0);
-  --dialog-scrim-color-show:rgba(17, 24, 32, 0.7);
+  --dialog-scrim-color-hide:rgb(17, 24, 32, 0);
+  --dialog-scrim-color-show:rgb(17, 24, 32, 0.7);
   --dialog-lightbox-max-width:616px;
 }
 .toast-dialog{
@@ -11681,7 +11710,7 @@ button.tooltip__close{
   }
 }
 :root{
-  --bubble-shadow:0 2px 7px rgba(0, 0, 0, 0.15), 0 5px 17px rgba(0, 0, 0, 0.2);
+  --bubble-shadow:0 2px 7px rgb(0, 0, 0, 0.15), 0 5px 17px rgb(0, 0, 0, 0.2);
 }
 .tourtip{
   position:relative;

package/dist/bundles/skin-full.css

@@ -809,7 +809,7 @@ ul.accordion ::marker{
   font-size:0;
 }
 
-ul.accordion li:not(:last-child){
+ul.accordion>li:not(:last-child){
   border-bottom:1px solid var(--color-stroke-subtle);
 }
 
@@ -1928,14 +1928,19 @@ span.carousel,span.carousel__container{
 .carousel--hidden-scrollbar .carousel__control--next{
   right:0;
 }
+@font-face{
+  font-family:Reddit Sans Condensed Bold;
+  src:url(https://ir.ebaystatic.com/cr/v/c01/Reddit_Sans_Condensed_Bold/RedditSansCondensed-Bold.ttf);
+}
 .ccd{
   display:inline-flex;
+  font-family:Reddit Sans Condensed Bold,Market Sans,Arial,sans-serif;
   gap:8px;
 }
 
 .ccd__charger-icon{
-  height:78px;
-  width:58px;
+  height:57px;
+  width:42px;
 }
 
 .ccd__description-figure{
@@ -1943,12 +1948,12 @@ span.carousel,span.carousel__container{
   display:flex;
   flex-direction:column;
   justify-content:center;
-  width:55px;
+  width:39px;
 }
 
 .ccd__top-icon{
-  height:24px;
-  width:35px;
+  height:18px;
+  width:27px;
 }
 
 .ccd__body{
@@ -1959,12 +1964,11 @@ span.carousel,span.carousel__container{
   flex-direction:column;
   font-size:.4375rem;
   font-weight:var(--font-weight-bold);
-  gap:2px;
-  height:53px;
+  height:37px;
   justify-content:center;
   overflow:hidden;
   text-align:center;
-  width:53px;
+  width:39px;
 }
 .calendar{
   color:var(--calendar-color-token, var(--color-foreground-primary));
@@ -2319,10 +2323,8 @@ button.chip__button>svg{
   border:1px solid var(--color-stroke-default);
   border-radius:var(--border-radius-50);
   display:inline-block;
-  padding-bottom:var(--spacing-100);
-  padding-inline-end:var(--spacing-200);
-  padding-inline-start:var(--spacing-100);
-  padding-top:var(--spacing-100);
+  padding-block:var(--spacing-100);
+  padding-inline:var(--spacing-100) var(--spacing-200);
   position:relative;
 }
 
@@ -3674,7 +3676,7 @@ img.file-preview-card__asset,video.file-preview-card__asset{
 
 .file-preview-card__see-more{
   aspect-ratio:1/1;
-  background-color:rgba(var(--file-preview-card-see-more-background-color-rgb, var(--color-background-strong-rgb)), .5);
+  background-color:rgb(var(--file-preview-card-see-more-background-color-rgb, var(--color-background-strong-rgb)), .5);
   border:none;
   border-radius:50%;
   color:var(--file-preview-card-see-more-color, var(--color-foreground-on-strong));
@@ -3695,11 +3697,11 @@ img.file-preview-card__asset,video.file-preview-card__asset{
 }
 
 .file-preview-card__see-more:focus-visible,.file-preview-card__see-more:hover{
-  background-color:rgba(var(--file-preview-card-see-more-interactive-background-color-rgb, var(--color-state-secondary-hover-rgb)), .5);
+  background-color:rgb(var(--file-preview-card-see-more-interactive-background-color-rgb, var(--color-state-secondary-hover-rgb)), .5);
 }
 
 .file-preview-card__see-more:active{
-  background-color:rgba(var(--file-preview-card-see-more-interactive-active-background-color-rgb, var(--color-state-secondary-active-rgb)), .5);
+  background-color:rgb(var(--file-preview-card-see-more-interactive-active-background-color-rgb, var(--color-state-secondary-active-rgb)), .5);
 }
 
 .file-preview-card__footer{
@@ -6250,6 +6252,30 @@ span.inline-notice{
   color:var(--color-foreground-secondary);
 }
 
+.layout-grid.item-tile-group{
+  --layout-grid-columns-min:2;
+  --layout-grid-columns-xs:2;
+  --layout-grid-columns-sm:2;
+  --layout-grid-columns-md:3;
+  --layout-grid-columns-lg:4;
+  --layout-grid-columns-xl:5;
+  --layout-grid-columns-xl2:5;
+  --layout-grid-columns-xl3:5;
+  --layout-grid-columns-xl4:5;
+}
+
+.layout-grid.item-tile-group--list-view{
+  --layout-grid-columns-min:1;
+  --layout-grid-columns-xs:1;
+  --layout-grid-columns-sm:1;
+  --layout-grid-columns-md:1;
+  --layout-grid-columns-lg:1;
+  --layout-grid-columns-xl:2;
+  --layout-grid-columns-xl2:2;
+  --layout-grid-columns-xl3:2;
+  --layout-grid-columns-xl4:2;
+}
+
 .item-tile-group .item-tile__title{
   -webkit-line-clamp:3;
 }
@@ -9480,7 +9506,7 @@ span[role=region].section-notice{
   margin-inline-end:var(--spacing-200);
 }
 
-.section-notice__header+.section-notice__main{
+.section-notice__header+.section-notice__main,.section-notice__header~.section-notice__cta{
   grid-column:2;
 }
 
@@ -9497,10 +9523,10 @@ span[role=region].section-notice{
 }
 
 p.section-notice__cta{
-  grid-column:2;
+  grid-column:1 /  3;
   grid-row:2;
   justify-self:flex-start;
-  margin-right:var(--spacing-200);
+  margin-bottom:0;
   margin-top:var(--spacing-200);
 }
 .section-notice__main .section-notice__title~p{
@@ -9514,10 +9540,13 @@ p.section-notice__cta{
     grid-column:4;
     grid-row:1;
     justify-self:flex-end;
-    margin-bottom:0;
+    margin-right:var(--spacing-200);
     margin-top:0;
     padding-right:var(--spacing-200);
   }
+  .section-notice__header~.section-notice__cta{
+    grid-column:4;
+  }
   .section-notice__footer{
     padding-left:var(--spacing-200);
   }
@@ -10778,8 +10807,8 @@ input.textbox__control[readonly]:focus,textarea.textbox__control[readonly]:focus
   width:100%;
 }
 :root{
-  --dialog-scrim-color-hide:rgba(17, 24, 32, 0);
-  --dialog-scrim-color-show:rgba(17, 24, 32, 0.7);
+  --dialog-scrim-color-hide:rgb(17, 24, 32, 0);
+  --dialog-scrim-color-show:rgb(17, 24, 32, 0.7);
   --dialog-lightbox-max-width:616px;
 }
 .toast-dialog{
@@ -11880,7 +11909,7 @@ button.tooltip__close{
   }
 }
 :root{
-  --bubble-shadow:0 2px 7px rgba(0, 0, 0, 0.15), 0 5px 17px rgba(0, 0, 0, 0.2);
+  --bubble-shadow:0 2px 7px rgb(0, 0, 0, 0.15), 0 5px 17px rgb(0, 0, 0, 0.2);
 }
 .tourtip{
   position:relative;

package/dist/bundles/skin-headless.css

@@ -184,7 +184,7 @@ ul.accordion ::marker{
   font-size:0;
 }
 
-ul.accordion li:not(:last-child){
+ul.accordion>li:not(:last-child){
   border-bottom:1px solid var(--color-stroke-subtle);
 }
 
@@ -1303,14 +1303,19 @@ span.carousel,span.carousel__container{
 .carousel--hidden-scrollbar .carousel__control--next{
   right:0;
 }
+@font-face{
+  font-family:Reddit Sans Condensed Bold;
+  src:url(https://ir.ebaystatic.com/cr/v/c01/Reddit_Sans_Condensed_Bold/RedditSansCondensed-Bold.ttf);
+}
 .ccd{
   display:inline-flex;
+  font-family:Reddit Sans Condensed Bold,Market Sans,Arial,sans-serif;
   gap:8px;
 }
 
 .ccd__charger-icon{
-  height:78px;
-  width:58px;
+  height:57px;
+  width:42px;
 }
 
 .ccd__description-figure{
@@ -1318,12 +1323,12 @@ span.carousel,span.carousel__container{
   display:flex;
   flex-direction:column;
   justify-content:center;
-  width:55px;
+  width:39px;
 }
 
 .ccd__top-icon{
-  height:24px;
-  width:35px;
+  height:18px;
+  width:27px;
 }
 
 .ccd__body{
@@ -1334,12 +1339,11 @@ span.carousel,span.carousel__container{
   flex-direction:column;
   font-size:.4375rem;
   font-weight:var(--font-weight-bold);
-  gap:2px;
-  height:53px;
+  height:37px;
   justify-content:center;
   overflow:hidden;
   text-align:center;
-  width:53px;
+  width:39px;
 }
 .calendar{
   color:var(--calendar-color-token, var(--color-foreground-primary));
@@ -1694,10 +1698,8 @@ button.chip__button>svg{
   border:1px solid var(--color-stroke-default);
   border-radius:var(--border-radius-50);
   display:inline-block;
-  padding-bottom:var(--spacing-100);
-  padding-inline-end:var(--spacing-200);
-  padding-inline-start:var(--spacing-100);
-  padding-top:var(--spacing-100);
+  padding-block:var(--spacing-100);
+  padding-inline:var(--spacing-100) var(--spacing-200);
   position:relative;
 }
 
@@ -3049,7 +3051,7 @@ img.file-preview-card__asset,video.file-preview-card__asset{
 
 .file-preview-card__see-more{
   aspect-ratio:1/1;
-  background-color:rgba(var(--file-preview-card-see-more-background-color-rgb, var(--color-background-strong-rgb)), .5);
+  background-color:rgb(var(--file-preview-card-see-more-background-color-rgb, var(--color-background-strong-rgb)), .5);
   border:none;
   border-radius:50%;
   color:var(--file-preview-card-see-more-color, var(--color-foreground-on-strong));
@@ -3070,11 +3072,11 @@ img.file-preview-card__asset,video.file-preview-card__asset{
 }
 
 .file-preview-card__see-more:focus-visible,.file-preview-card__see-more:hover{
-  background-color:rgba(var(--file-preview-card-see-more-interactive-background-color-rgb, var(--color-state-secondary-hover-rgb)), .5);
+  background-color:rgb(var(--file-preview-card-see-more-interactive-background-color-rgb, var(--color-state-secondary-hover-rgb)), .5);
 }
 
 .file-preview-card__see-more:active{
-  background-color:rgba(var(--file-preview-card-see-more-interactive-active-background-color-rgb, var(--color-state-secondary-active-rgb)), .5);
+  background-color:rgb(var(--file-preview-card-see-more-interactive-active-background-color-rgb, var(--color-state-secondary-active-rgb)), .5);
 }
 
 .file-preview-card__footer{
@@ -5625,6 +5627,30 @@ span.inline-notice{
   color:var(--color-foreground-secondary);
 }
 
+.layout-grid.item-tile-group{
+  --layout-grid-columns-min:2;
+  --layout-grid-columns-xs:2;
+  --layout-grid-columns-sm:2;
+  --layout-grid-columns-md:3;
+  --layout-grid-columns-lg:4;
+  --layout-grid-columns-xl:5;
+  --layout-grid-columns-xl2:5;
+  --layout-grid-columns-xl3:5;
+  --layout-grid-columns-xl4:5;
+}
+
+.layout-grid.item-tile-group--list-view{
+  --layout-grid-columns-min:1;
+  --layout-grid-columns-xs:1;
+  --layout-grid-columns-sm:1;
+  --layout-grid-columns-md:1;
+  --layout-grid-columns-lg:1;
+  --layout-grid-columns-xl:2;
+  --layout-grid-columns-xl2:2;
+  --layout-grid-columns-xl3:2;
+  --layout-grid-columns-xl4:2;
+}
+
 .item-tile-group .item-tile__title{
   -webkit-line-clamp:3;
 }
@@ -8855,7 +8881,7 @@ span[role=region].section-notice{
   margin-inline-end:var(--spacing-200);
 }
 
-.section-notice__header+.section-notice__main{
+.section-notice__header+.section-notice__main,.section-notice__header~.section-notice__cta{
   grid-column:2;
 }
 
@@ -8872,10 +8898,10 @@ span[role=region].section-notice{
 }
 
 p.section-notice__cta{
-  grid-column:2;
+  grid-column:1 /  3;
   grid-row:2;
   justify-self:flex-start;
-  margin-right:var(--spacing-200);
+  margin-bottom:0;
   margin-top:var(--spacing-200);
 }
 .section-notice__main .section-notice__title~p{
@@ -8889,10 +8915,13 @@ p.section-notice__cta{
     grid-column:4;
     grid-row:1;
     justify-self:flex-end;
-    margin-bottom:0;
+    margin-right:var(--spacing-200);
     margin-top:0;
     padding-right:var(--spacing-200);
   }
+  .section-notice__header~.section-notice__cta{
+    grid-column:4;
+  }
   .section-notice__footer{
     padding-left:var(--spacing-200);
   }
@@ -10153,8 +10182,8 @@ input.textbox__control[readonly]:focus,textarea.textbox__control[readonly]:focus
   width:100%;
 }
 :root{
-  --dialog-scrim-color-hide:rgba(17, 24, 32, 0);
-  --dialog-scrim-color-show:rgba(17, 24, 32, 0.7);
+  --dialog-scrim-color-hide:rgb(17, 24, 32, 0);
+  --dialog-scrim-color-show:rgb(17, 24, 32, 0.7);
   --dialog-lightbox-max-width:616px;
 }
 .toast-dialog{
@@ -11255,7 +11284,7 @@ button.tooltip__close{
   }
 }
 :root{
-  --bubble-shadow:0 2px 7px rgba(0, 0, 0, 0.15), 0 5px 17px rgba(0, 0, 0, 0.2);
+  --bubble-shadow:0 2px 7px rgb(0, 0, 0, 0.15), 0 5px 17px rgb(0, 0, 0, 0.2);
 }
 .tourtip{
   position:relative;

package/dist/ccd/ccd.css

@@ -1,11 +1,20 @@
+@font-face {
+    font-family: Reddit Sans Condensed Bold;
+    src: url(https://ir.ebaystatic.com/cr/v/c01/Reddit_Sans_Condensed_Bold/RedditSansCondensed-Bold.ttf);
+}
 .ccd {
     display: inline-flex;
+    font-family:
+        Reddit Sans Condensed Bold,
+        Market Sans,
+        Arial,
+        sans-serif;
     gap: 8px;
 }
 
 .ccd__charger-icon {
-    height: 78px;
-    width: 58px;
+    height: 57px;
+    width: 42px;
 }
 
 .ccd__description-figure {
@@ -13,12 +22,12 @@
     display: flex;
     flex-direction: column;
     justify-content: center;
-    width: 55px;
+    width: 39px;
 }
 
 .ccd__top-icon {
-    height: 24px;
-    width: 35px;
+    height: 18px;
+    width: 27px;
 }
 
 .ccd__body {
@@ -29,10 +38,9 @@
     flex-direction: column;
     font-size: 0.4375rem;
     font-weight: var(--font-weight-bold);
-    gap: 2px;
-    height: 53px;
+    height: 37px;
     justify-content: center;
     overflow: hidden;
     text-align: center;
-    width: 53px;
+    width: 39px;
 }

package/dist/chips-combobox/chips-combobox.css

@@ -3,10 +3,8 @@
     border: 1px solid var(--color-stroke-default);
     border-radius: var(--border-radius-50);
     display: inline-block;
-    padding-bottom: var(--spacing-100);
-    padding-inline-end: var(--spacing-200);
-    padding-inline-start: var(--spacing-100);
-    padding-top: var(--spacing-100);
+    padding-block: var(--spacing-100);
+    padding-inline: var(--spacing-100) var(--spacing-200);
     position: relative;
 }
 

package/dist/combobox/combobox.css

@@ -1,6 +1,5 @@
 :root {
-    --bubble-shadow:
-        0 2px 7px rgba(0, 0, 0, 0.15), 0 5px 17px rgba(0, 0, 0, 0.2);
+    --bubble-shadow: 0 2px 7px rgb(0, 0, 0, 0.15), 0 5px 17px rgb(0, 0, 0, 0.2);
 }
 .combobox {
     box-sizing: border-box;