@empathyco/x-components 5.0.0-alpha.20 → 5.0.0-alpha.22

package/CHANGELOG.md

@@ -3,6 +3,24 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [5.0.0-alpha.22](https://github.com/empathyco/x/compare/@empathyco/x-components@5.0.0-alpha.21...@empathyco/x-components@5.0.0-alpha.22) (2024-05-28)
+
+
+### Code Refactoring
+
+* migrate `BaseVariableColumnGrid` to Composition API (#1482) ([b7e292a](https://github.com/empathyco/x/commit/b7e292ae55560f557dd7db3cfbceed993c7b318e))
+
+
+
+## [5.0.0-alpha.21](https://github.com/empathyco/x/compare/@empathyco/x-components@5.0.0-alpha.20...@empathyco/x-components@5.0.0-alpha.21) (2024-05-28)
+
+
+### Features
+
+* replace extra divs with `NoElement` (#1484) ([cc7042e](https://github.com/empathyco/x/commit/cc7042e5f144f2abc9eb39e3834c8a153795f558))
+
+
+
 ## [5.0.0-alpha.20](https://github.com/empathyco/x/compare/@empathyco/x-components@5.0.0-alpha.19...@empathyco/x-components@5.0.0-alpha.20) (2024-05-28)
 
 

package/design-system/deprecated-full-theme.css

@@ -1,5 +1,4 @@
 
-
 .x-uppercase {
   text-transform: uppercase;
 }
@@ -15,6 +14,7 @@
 .x-normal-case {
   text-transform: none;
 }
+
 .x-underline {
   -webkit-text-decoration-line: underline;
           text-decoration-line: underline;
@@ -3550,6 +3550,24 @@
   overflow: hidden;
   white-space: nowrap;
 }
+.x-text--bold.x-text {
+  --x-number-font-weight-text: var(--x-number-font-weight-base-bold);
+}
+.x-text--bold.x-title1 {
+  --x-number-font-weight-title1: var(--x-number-font-weight-base-bold);
+}
+.x-text--bold.x-title2 {
+  --x-number-font-weight-title2: var(--x-number-font-weight-base-bold);
+}
+.x-text--bold.x-title3 {
+  --x-number-font-weight-title3: var(--x-number-font-weight-base-bold);
+}
+.x-text--bold.x-small {
+  --x-number-font-weight-small: var(--x-number-font-weight-base-bold);
+}
+:root {
+  --x-color-text-accent: var(--x-color-base-accent);
+}
 .x-text--accent {
   --x-color-text-default: var(--x-color-text-accent);
 }
@@ -3620,9 +3638,6 @@
     --x-number-font-weight-tag-curated-selected-ghost
   );
 }
-:root {
-  --x-color-text-accent: var(--x-color-base-accent);
-}
 :root {
   --x-color-background-tag-default: var(--x-color-base-neutral-100);
   --x-color-border-tag-default: var(--x-color-text-tag-default);
@@ -4880,22 +4895,13 @@
 :root {
   --x-size-border-radius-result-card: var(--x-size-border-radius-base-s);
 }
-:root {
-  --x-size-border-radius-result-card: var(--x-size-border-radius-base-s);
-}
 
 .x-result.x-result--card {
   overflow: hidden;
   --x-size-border-radius-result-default: var(--x-size-border-radius-result-card);
 }
 :root {
-  --x-size-height-progress-bar-line-default: var(--x-size-base-02);
-  --x-size-width-progress-bar-line-default: var(--x-size-base-20);
-  --x-color-background-progress-bar-default: var(--x-color-base-neutral-70);
-  --x-color-border-progress-bar-default: var(--x-color-background-progress-bar-default);
-  --x-color-background-progress-bar-line-default: var(--x-color-base-neutral-10);
-  --x-size-border-radius-progress-bar-default: var(--x-size-border-radius-base-pill);
-  --x-size-border-width-progress-bar-default: 0;
+  --x-size-border-radius-result-card: var(--x-size-border-radius-base-s);
 }
 :root {
   --x-size-height-progress-bar-line-default: var(--x-size-base-02);
@@ -4922,6 +4928,15 @@
   border-radius: var(--x-size-border-radius-progress-bar-default);
   background-color: var(--x-color-background-progress-bar-line-default);
 }
+:root {
+  --x-size-height-progress-bar-line-default: var(--x-size-base-02);
+  --x-size-width-progress-bar-line-default: var(--x-size-base-20);
+  --x-color-background-progress-bar-default: var(--x-color-base-neutral-70);
+  --x-color-border-progress-bar-default: var(--x-color-background-progress-bar-default);
+  --x-color-background-progress-bar-line-default: var(--x-color-base-neutral-10);
+  --x-size-border-radius-progress-bar-default: var(--x-size-border-radius-base-pill);
+  --x-size-border-width-progress-bar-default: 0;
+}
 :root {
   --x-number-zoom-scale-picture: 1.1;
   --x-number-zoom-duration-picture: 0.3s;
@@ -5026,10 +5041,6 @@
   --x-color-background-picture-cover-hover-from: rgba(0, 0, 0, 0);
   --x-color-background-picture-cover-hover-to: rgba(0, 0, 0, 0.5);
 }
-:root {
-  --x-color-background-picture-cover-hover-from: rgba(0, 0, 0, 0);
-  --x-color-background-picture-cover-hover-to: rgba(0, 0, 0, 0.5);
-}
 
 .x-picture--cover.x-picture {
   position: relative;
@@ -5046,6 +5057,10 @@
   width: 100%;
   height: 100%;
 }
+:root {
+  --x-color-background-picture-cover-hover-from: rgba(0, 0, 0, 0);
+  --x-color-background-picture-cover-hover-to: rgba(0, 0, 0, 0.5);
+}
 :root {
   --x-color-background-picture-colored: var(--x-color-base-neutral-95);
   --x-mix-blend-mode-picture-colored: multiply;
@@ -5078,6 +5093,21 @@
   --x-size-border-radius-bottom-picture-card: var(--x-size-border-radius-picture-card);
   --x-size-border-radius-left-picture-card: var(--x-size-border-radius-picture-card);
 }
+
+.x-picture--card.x-picture {
+  --x-size-border-radius-picture-default: var(--x-size-border-radius-picture-card);
+  --x-size-border-radius-top-picture-default: var(--x-size-border-radius-top-picture-card);
+  --x-size-border-radius-right-picture-default: var(--x-size-border-radius-right-picture-card);
+  --x-size-border-radius-bottom-picture-default: var(--x-size-border-radius-bottom-picture-card);
+  --x-size-border-radius-left-picture-default: var(--x-size-border-radius-left-picture-card);
+}
+:root {
+  --x-size-border-radius-picture-card: var(--x-size-border-radius-base-s);
+  --x-size-border-radius-top-picture-card: var(--x-size-border-radius-picture-card);
+  --x-size-border-radius-right-picture-card: var(--x-size-border-radius-picture-card);
+  --x-size-border-radius-bottom-picture-card: var(--x-size-border-radius-picture-card);
+  --x-size-border-radius-left-picture-card: var(--x-size-border-radius-picture-card);
+}
 :root {
   --x-color-background-option-list-button-default: transparent;
   --x-color-border-option-list-button-default: transparent;
@@ -5158,21 +5188,6 @@
   --x-number-font-weight-option-list-button-default: var(--x-number-font-weight-base-regular);
   --x-number-font-weight-option-list-button-default-selected: var(--x-number-font-weight-base-bold);
 }
-:root {
-  --x-size-border-radius-picture-card: var(--x-size-border-radius-base-s);
-  --x-size-border-radius-top-picture-card: var(--x-size-border-radius-picture-card);
-  --x-size-border-radius-right-picture-card: var(--x-size-border-radius-picture-card);
-  --x-size-border-radius-bottom-picture-card: var(--x-size-border-radius-picture-card);
-  --x-size-border-radius-left-picture-card: var(--x-size-border-radius-picture-card);
-}
-
-.x-picture--card.x-picture {
-  --x-size-border-radius-picture-default: var(--x-size-border-radius-picture-card);
-  --x-size-border-radius-top-picture-default: var(--x-size-border-radius-top-picture-card);
-  --x-size-border-radius-right-picture-default: var(--x-size-border-radius-right-picture-card);
-  --x-size-border-radius-bottom-picture-default: var(--x-size-border-radius-bottom-picture-card);
-  --x-size-border-radius-left-picture-default: var(--x-size-border-radius-left-picture-card);
-}
 :root {
   --x-color-background-option-list-button-default: transparent;
   --x-color-border-option-list-button-default: transparent;
@@ -5545,15 +5560,15 @@
   --x-modal-overlay-color: rgb(0, 0, 0);
   --x-modal-overlay-opacity: 0.7;
 }
-:root {
-  --x-modal-overlay-color: rgb(0, 0, 0);
-  --x-modal-overlay-opacity: 0.7;
-}
 
 .x-modal__overlay {
   background-color: var(--x-modal-overlay-color) !important;
   opacity: var(--x-modal-overlay-opacity) !important;
 }
+:root {
+  --x-modal-overlay-color: rgb(0, 0, 0);
+  --x-modal-overlay-opacity: 0.7;
+}
 :root {
   --x-string-justify-message-default: center;
   --x-size-gap-message-default: var(--x-size-base-03);
@@ -5662,22 +5677,6 @@
   --x-size-padding-list-12: var(--x-size-base-12);
   --x-size-padding-list-13: var(--x-size-base-13);
 }
-/* @deprecated */
-:root {
-  --x-size-padding-list-01: var(--x-size-base-01);
-  --x-size-padding-list-02: var(--x-size-base-02);
-  --x-size-padding-list-03: var(--x-size-base-03);
-  --x-size-padding-list-04: var(--x-size-base-04);
-  --x-size-padding-list-05: var(--x-size-base-05);
-  --x-size-padding-list-06: var(--x-size-base-06);
-  --x-size-padding-list-07: var(--x-size-base-07);
-  --x-size-padding-list-08: var(--x-size-base-08);
-  --x-size-padding-list-09: var(--x-size-base-09);
-  --x-size-padding-list-10: var(--x-size-base-10);
-  --x-size-padding-list-11: var(--x-size-base-11);
-  --x-size-padding-list-12: var(--x-size-base-12);
-  --x-size-padding-list-13: var(--x-size-base-13);
-}
 
 /* @deprecated */
 [class*=x-list--padding-].x-list.x-list--padding-top:not(.x-list--padding-right) {
@@ -6002,6 +6001,22 @@
     margin-right: var(--x-size-gap-list-13);
   }
 }
+/* @deprecated */
+:root {
+  --x-size-padding-list-01: var(--x-size-base-01);
+  --x-size-padding-list-02: var(--x-size-base-02);
+  --x-size-padding-list-03: var(--x-size-base-03);
+  --x-size-padding-list-04: var(--x-size-base-04);
+  --x-size-padding-list-05: var(--x-size-base-05);
+  --x-size-padding-list-06: var(--x-size-base-06);
+  --x-size-padding-list-07: var(--x-size-base-07);
+  --x-size-padding-list-08: var(--x-size-base-08);
+  --x-size-padding-list-09: var(--x-size-base-09);
+  --x-size-padding-list-10: var(--x-size-base-10);
+  --x-size-padding-list-11: var(--x-size-base-11);
+  --x-size-padding-list-12: var(--x-size-base-12);
+  --x-size-padding-list-13: var(--x-size-base-13);
+}
 :root {
   --x-size-gap-list-01: var(--x-size-base-01);
   --x-size-gap-list-02: var(--x-size-base-02);
@@ -6554,14 +6569,6 @@
   --x-size-align-list: stretch;
   --x-size-align-list-stretch: stretch;
 }
-:root {
-  --x-string-flow-list: column nowrap;
-  --x-size-padding-list: 0;
-  --x-size-gap-list: 0;
-  --x-size-justify-list: stretch;
-  --x-size-align-list: stretch;
-  --x-size-align-list-stretch: stretch;
-}
 
 .x-list {
   display: flex;
@@ -6702,6 +6709,14 @@
 .x-list > .x-list__item--12 {
   flex: 12 1 auto;
 }
+:root {
+  --x-string-flow-list: column nowrap;
+  --x-size-padding-list: 0;
+  --x-size-gap-list: 0;
+  --x-size-justify-list: stretch;
+  --x-size-align-list: stretch;
+  --x-size-align-list-stretch: stretch;
+}
 :root {
   --x-size-border-radius-input-group-pill: var(--x-size-border-radius-base-pill);
   --x-size-border-radius-top-left-input-group-pill: var(--x-size-border-radius-input-group-pill);
@@ -6746,15 +6761,6 @@
   --x-size-border-width-bottom-input-group-line: var(--x-size-border-width-input-group-line);
   --x-size-border-width-left-input-group-line: 0;
 }
-:root {
-  --x-size-padding-left-input-group-line: 0;
-  --x-size-padding-right-input-group-line: 0;
-  --x-size-border-width-input-group-line: var(--x-size-border-width-input-group-default);
-  --x-size-border-width-top-input-group-line: 0;
-  --x-size-border-width-right-input-group-line: 0;
-  --x-size-border-width-bottom-input-group-line: var(--x-size-border-width-input-group-line);
-  --x-size-border-width-left-input-group-line: 0;
-}
 
 .x-input-group--line .x-input-group,
 .x-input-group--line.x-input-group {
@@ -6793,6 +6799,15 @@
   margin-top: calc(var(--x-size-border-width-top-input-group-line) * -1) !important;
   margin-bottom: calc(var(--x-size-border-width-bottom-input-group-line) * -1) !important;
 }
+:root {
+  --x-size-padding-left-input-group-line: 0;
+  --x-size-padding-right-input-group-line: 0;
+  --x-size-border-width-input-group-line: var(--x-size-border-width-input-group-default);
+  --x-size-border-width-top-input-group-line: 0;
+  --x-size-border-width-right-input-group-line: 0;
+  --x-size-border-width-bottom-input-group-line: var(--x-size-border-width-input-group-line);
+  --x-size-border-width-left-input-group-line: 0;
+}
 :root {
   --x-color-background-input-group-default: var(--x-color-background-input-default);
   --x-color-border-input-group-default: var(--x-color-border-input-default);
@@ -7022,15 +7037,6 @@
   );
   --x-size-border-radius-bottom-left-input-group-card: var(--x-size-border-radius-input-group-card);
 }
-:root {
-  --x-size-border-radius-input-group-card: var(--x-size-border-radius-base-s);
-  --x-size-border-radius-top-left-input-group-card: var(--x-size-border-radius-input-group-card);
-  --x-size-border-radius-top-right-input-group-card: var(--x-size-border-radius-input-group-card);
-  --x-size-border-radius-bottom-right-input-group-card: var(
-    --x-size-border-radius-input-group-card
-  );
-  --x-size-border-radius-bottom-left-input-group-card: var(--x-size-border-radius-input-group-card);
-}
 
 .x-input-group--card.x-input-group,
 .x-input-group--card .x-input-group {
@@ -7058,6 +7064,15 @@
   --x-size-border-radius-top-left-input-group-default: 0;
   --x-size-border-radius-bottom-left-input-group-default: 0;
 }
+:root {
+  --x-size-border-radius-input-group-card: var(--x-size-border-radius-base-s);
+  --x-size-border-radius-top-left-input-group-card: var(--x-size-border-radius-input-group-card);
+  --x-size-border-radius-top-right-input-group-card: var(--x-size-border-radius-input-group-card);
+  --x-size-border-radius-bottom-right-input-group-card: var(
+    --x-size-border-radius-input-group-card
+  );
+  --x-size-border-radius-bottom-left-input-group-card: var(--x-size-border-radius-input-group-card);
+}
 :root {
   --x-size-border-radius-input-pill: var(--x-size-border-radius-base-pill);
   --x-size-border-radius-top-left-input-pill: var(--x-size-border-radius-input-pill);
@@ -7091,16 +7106,6 @@
   --x-size-border-width-bottom-input-line: var(--x-size-border-width-base);
   --x-size-border-width-left-input-line: 0;
 }
-:root {
-  --x-size-padding-top-input-line: var(--x-size-base-03);
-  --x-size-padding-right-input-line: 0;
-  --x-size-padding-bottom-input-line: var(--x-size-base-03);
-  --x-size-padding-left-input-line: 0;
-  --x-size-border-width-top-input-line: 0;
-  --x-size-border-width-right-input-line: 0;
-  --x-size-border-width-bottom-input-line: var(--x-size-border-width-base);
-  --x-size-border-width-left-input-line: 0;
-}
 
 .x-input--line .x-input,
 .x-input--line.x-input {
@@ -7113,6 +7118,16 @@
   --x-size-border-width-bottom-input-default: var(--x-size-border-width-bottom-input-line);
   --x-size-border-width-left-input-default: var(--x-size-border-width-left-input-line);
 }
+:root {
+  --x-size-padding-top-input-line: var(--x-size-base-03);
+  --x-size-padding-right-input-line: 0;
+  --x-size-padding-bottom-input-line: var(--x-size-base-03);
+  --x-size-padding-left-input-line: 0;
+  --x-size-border-width-top-input-line: 0;
+  --x-size-border-width-right-input-line: 0;
+  --x-size-border-width-bottom-input-line: var(--x-size-border-width-base);
+  --x-size-border-width-left-input-line: 0;
+}
 :root {
   --x-color-background-input-default: var(--x-color-base-neutral-100);
   --x-color-border-input-default: var(--x-color-base-neutral-70);
@@ -7337,20 +7352,6 @@
   --x-string-stroke-linejoin-icon-default: mitter;
   --x-size-stroke-width-icon-default: 1px;
 }
-:root {
-  --x-size-padding-grid: 0;
-  --x-size-gap-grid: var(--x-size-base-03);
-  --x-size-min-width-grid-item: 150px;
-}
-:root {
-  --x-color-stroke-icon-default: currentColor;
-  --x-color-fill-icon-default: none;
-  --x-size-width-icon-default: var(--x-size-width-icon-m);
-  --x-size-height-icon-default: var(--x-size-height-icon-m);
-  --x-string-stroke-linecap-icon-default: butt;
-  --x-string-stroke-linejoin-icon-default: mitter;
-  --x-size-stroke-width-icon-default: 1px;
-}
 
 .x-icon {
   stroke: var(--x-color-stroke-icon-default);
@@ -7372,6 +7373,20 @@
   stroke: none;
   fill: var(--x-color-stroke-icon-default);
 }
+:root {
+  --x-color-stroke-icon-default: currentColor;
+  --x-color-fill-icon-default: none;
+  --x-size-width-icon-default: var(--x-size-width-icon-m);
+  --x-size-height-icon-default: var(--x-size-height-icon-m);
+  --x-string-stroke-linecap-icon-default: butt;
+  --x-string-stroke-linejoin-icon-default: mitter;
+  --x-size-stroke-width-icon-default: 1px;
+}
+:root {
+  --x-size-padding-grid: 0;
+  --x-size-gap-grid: var(--x-size-base-03);
+  --x-size-min-width-grid-item: 150px;
+}
 :root {
   --x-size-padding-grid: 0;
   --x-size-gap-grid: var(--x-size-base-03);
@@ -7411,38 +7426,6 @@
   --x-size-padding-bottom-filter-children: 0;
   --x-size-padding-left-filter-children: var(--x-size-base-05);
 }
-:root {
-  --x-size-margin-filter-children: 0;
-  --x-size-padding-top-filter-children: 0;
-  --x-size-padding-right-filter-children: 0;
-  --x-size-padding-bottom-filter-children: 0;
-  --x-size-padding-left-filter-children: var(--x-size-base-05);
-}
-
-.x-hierarchical-filter-container {
-  list-style: none;
-}
-[dir="ltr"] .x-hierarchical-filter-container .x-hierarchical-filter__children,[dir="ltr"]  .x-hierarchical-filter-container .x-hierarchical-filter__children.x-list {
-  padding-left: var(--x-size-padding-left-filter-children);
-}
-[dir="rtl"] .x-hierarchical-filter-container .x-hierarchical-filter__children,[dir="rtl"]  .x-hierarchical-filter-container .x-hierarchical-filter__children.x-list {
-  padding-right: var(--x-size-padding-left-filter-children);
-}
-[dir="ltr"] .x-hierarchical-filter-container .x-hierarchical-filter__children,[dir="ltr"]  .x-hierarchical-filter-container .x-hierarchical-filter__children.x-list {
-  padding-right: var(--x-size-padding-right-filter-children);
-}
-[dir="rtl"] .x-hierarchical-filter-container .x-hierarchical-filter__children,[dir="rtl"]  .x-hierarchical-filter-container .x-hierarchical-filter__children.x-list {
-  padding-left: var(--x-size-padding-right-filter-children);
-}
-.x-hierarchical-filter-container .x-hierarchical-filter__children, .x-hierarchical-filter-container .x-hierarchical-filter__children.x-list {
-  margin: var(--x-size-margin-filter-children);
-  padding-top: var(--x-size-padding-top-filter-children);
-  padding-bottom: var(--x-size-padding-bottom-filter-children);
-}
-.x-hierarchical-filter-container .x-hierarchical-filter-container,
-.x-hierarchical-filter-container .x-filter, .x-hierarchical-filter-container .x-facet-filter {
-  width: 100%;
-}
 :root {
   --x-color-background-filter-default: transparent;
   --x-color-border-filter-default: var(--x-color-background-filter-default);
@@ -7475,6 +7458,38 @@
   );
   --x-size-line-height-filter-default: var(--x-size-line-height-text);
 }
+:root {
+  --x-size-margin-filter-children: 0;
+  --x-size-padding-top-filter-children: 0;
+  --x-size-padding-right-filter-children: 0;
+  --x-size-padding-bottom-filter-children: 0;
+  --x-size-padding-left-filter-children: var(--x-size-base-05);
+}
+
+.x-hierarchical-filter-container {
+  list-style: none;
+}
+[dir="ltr"] .x-hierarchical-filter-container .x-hierarchical-filter__children,[dir="ltr"]  .x-hierarchical-filter-container .x-hierarchical-filter__children.x-list {
+  padding-left: var(--x-size-padding-left-filter-children);
+}
+[dir="rtl"] .x-hierarchical-filter-container .x-hierarchical-filter__children,[dir="rtl"]  .x-hierarchical-filter-container .x-hierarchical-filter__children.x-list {
+  padding-right: var(--x-size-padding-left-filter-children);
+}
+[dir="ltr"] .x-hierarchical-filter-container .x-hierarchical-filter__children,[dir="ltr"]  .x-hierarchical-filter-container .x-hierarchical-filter__children.x-list {
+  padding-right: var(--x-size-padding-right-filter-children);
+}
+[dir="rtl"] .x-hierarchical-filter-container .x-hierarchical-filter__children,[dir="rtl"]  .x-hierarchical-filter-container .x-hierarchical-filter__children.x-list {
+  padding-left: var(--x-size-padding-right-filter-children);
+}
+.x-hierarchical-filter-container .x-hierarchical-filter__children, .x-hierarchical-filter-container .x-hierarchical-filter__children.x-list {
+  margin: var(--x-size-margin-filter-children);
+  padding-top: var(--x-size-padding-top-filter-children);
+  padding-bottom: var(--x-size-padding-bottom-filter-children);
+}
+.x-hierarchical-filter-container .x-hierarchical-filter-container,
+.x-hierarchical-filter-container .x-filter, .x-hierarchical-filter-container .x-facet-filter {
+  width: 100%;
+}
 :root {
   --x-color-background-filter-default: transparent;
   --x-color-border-filter-default: var(--x-color-background-filter-default);
@@ -7887,9 +7902,6 @@
   --x-size-border-width-bottom-dropdown-list-pill: var(--x-size-border-width-dropdown-list-pill);
   --x-size-border-width-left-dropdown-list-pill: var(--x-size-border-width-dropdown-list-pill);
 }
-:root {
-  --x-size-width-dropdown-m: 130px;
-}
 :root {
   --x-size-gap-dropdown-pill: var(--x-size-base-03);
   --x-size-border-width-dropdown-list-pill: var(--x-size-border-width-base);
@@ -7936,6 +7948,9 @@
 :root {
   --x-size-width-dropdown-m: 130px;
 }
+:root {
+  --x-size-width-dropdown-m: 130px;
+}
 
 .x-dropdown.x-dropdown--m {
   --x-size-width-dropdown-toggle-default: var(--x-size-width-dropdown-m);
@@ -8477,13 +8492,6 @@
   --x-size-border-radius-bottom-right-button-round: var(--x-size-border-radius-button-round);
   --x-size-border-radius-bottom-left-button-round: var(--x-size-border-radius-button-round);
 }
-:root {
-  --x-size-border-radius-button-round: var(--x-size-border-radius-base-pill);
-  --x-size-border-radius-top-left-button-round: var(--x-size-border-radius-button-round);
-  --x-size-border-radius-top-right-button-round: var(--x-size-border-radius-button-round);
-  --x-size-border-radius-bottom-right-button-round: var(--x-size-border-radius-button-round);
-  --x-size-border-radius-bottom-left-button-round: var(--x-size-border-radius-button-round);
-}
 
 .x-button--round.x-button,
 .x-button--round .x-button {
@@ -8502,6 +8510,13 @@
   --x-size-padding-left-button-default: 0;
   --x-size-padding-right-button-default: 0;
 }
+:root {
+  --x-size-border-radius-button-round: var(--x-size-border-radius-base-pill);
+  --x-size-border-radius-top-left-button-round: var(--x-size-border-radius-button-round);
+  --x-size-border-radius-top-right-button-round: var(--x-size-border-radius-button-round);
+  --x-size-border-radius-bottom-right-button-round: var(--x-size-border-radius-button-round);
+  --x-size-border-radius-bottom-left-button-round: var(--x-size-border-radius-button-round);
+}
 :root {
   --x-color-background-button-primary: var(--x-color-background-button-default);
   --x-color-border-button-primary: var(--x-color-border-button-default);
@@ -8567,11 +8582,6 @@
   --x-color-border-button-ghost: transparent;
   --x-color-text-button-ghost: var(--x-color-base-lead);
 }
-:root {
-  --x-color-background-button-ghost: transparent;
-  --x-color-border-button-ghost: transparent;
-  --x-color-text-button-ghost: var(--x-color-base-lead);
-}
 
 .x-button--ghost.x-button,
 .x-button--ghost .x-button {
@@ -8589,6 +8599,11 @@
 .x-button--ghost.x-button--ghost-end .x-button {
   --x-size-padding-right-button-default: 0;
 }
+:root {
+  --x-color-background-button-ghost: transparent;
+  --x-color-border-button-ghost: transparent;
+  --x-color-text-button-ghost: var(--x-color-base-lead);
+}
 :root {
   --x-color-background-button-default: var(--x-color-base-lead);
   --x-color-border-button-default: var(--x-color-background-button-default);
@@ -8704,13 +8719,6 @@
   --x-size-border-radius-bottom-right-button-card: var(--x-size-border-radius-button-card);
   --x-size-border-radius-bottom-left-button-card: var(--x-size-border-radius-button-card);
 }
-:root {
-  --x-size-border-radius-button-card: var(--x-size-border-radius-base-s);
-  --x-size-border-radius-top-left-button-card: var(--x-size-border-radius-button-card);
-  --x-size-border-radius-top-right-button-card: var(--x-size-border-radius-button-card);
-  --x-size-border-radius-bottom-right-button-card: var(--x-size-border-radius-button-card);
-  --x-size-border-radius-bottom-left-button-card: var(--x-size-border-radius-button-card);
-}
 
 .x-button--card.x-button,
 .x-button--card .x-button {
@@ -8726,6 +8734,13 @@
     --x-size-border-radius-bottom-left-button-card
   );
 }
+:root {
+  --x-size-border-radius-button-card: var(--x-size-border-radius-base-s);
+  --x-size-border-radius-top-left-button-card: var(--x-size-border-radius-button-card);
+  --x-size-border-radius-top-right-button-card: var(--x-size-border-radius-button-card);
+  --x-size-border-radius-bottom-right-button-card: var(--x-size-border-radius-button-card);
+  --x-size-border-radius-bottom-left-button-card: var(--x-size-border-radius-button-card);
+}
 :root {
   --x-color-background-badge-default: var(--x-color-base-neutral-10);
   --x-color-text-badge-default: var(--x-color-base-neutral-100);
@@ -8826,19 +8841,4 @@
   --x-size-border-radius-base-m: var(--x-size-base-06);
   --x-size-border-radius-base-pill: 99999px;
   --x-size-border-width-base: 1px;
-}
-.x-text--bold.x-text {
-  --x-number-font-weight-text: var(--x-number-font-weight-base-bold);
-}
-.x-text--bold.x-title1 {
-  --x-number-font-weight-title1: var(--x-number-font-weight-base-bold);
-}
-.x-text--bold.x-title2 {
-  --x-number-font-weight-title2: var(--x-number-font-weight-base-bold);
-}
-.x-text--bold.x-title3 {
-  --x-number-font-weight-title3: var(--x-number-font-weight-base-bold);
-}
-.x-text--bold.x-small {
-  --x-number-font-weight-small: var(--x-number-font-weight-base-bold);
 }

package/docs/API-reference/api/x-components.basevariablecolumngrid.md

@@ -2,21 +2,40 @@
 
 [Home](./index.md) > [@empathyco/x-components](./x-components.md) > [BaseVariableColumnGrid](./x-components.basevariablecolumngrid.md)
 
-## BaseVariableColumnGrid class
+## BaseVariableColumnGrid variable
 
 The `BaseVariableColumnGrid` component is a wrapper of the `BaseGrid` component that listens to the `UserClickedColumnPicker` and the `ColumnsNumberProvided` events and passes the selected number of columns to the grid. It also allows to customize the grid items using the available `scopedSlots`<!-- -->.
 
 **Signature:**
 
 ```typescript
-export default class BaseVariableColumnGrid extends Vue 
+_default: import("vue").DefineComponent<{
+    animation: {
+        type: PropType<string | import("vue").DefineComponent<{}, {}, {}, import("vue").ComponentComputedOptions, import("vue").ComponentMethodOptions, import("vue/types/v3-component-options").ComponentOptionsMixin, import("vue/types/v3-component-options").ComponentOptionsMixin, {}, string, Readonly<import("vue").ExtractPropTypes<{}>>, {}>>;
+        default: string;
+    };
+    items: PropType<ListItem[]>;
+    columns: {
+        type: NumberConstructor;
+        default: number;
+    };
+}, {
+    columnsToRender: import("vue").ComputedRef<number>;
+    slots: import("vue/types/v3-setup-context").Slots;
+}, {}, {}, {}, import("vue/types/v3-component-options").ComponentOptionsMixin, import("vue/types/v3-component-options").ComponentOptionsMixin, {}, string, Readonly<import("vue").ExtractPropTypes<{
+    animation: {
+        type: PropType<string | import("vue").DefineComponent<{}, {}, {}, import("vue").ComponentComputedOptions, import("vue").ComponentMethodOptions, import("vue/types/v3-component-options").ComponentOptionsMixin, import("vue/types/v3-component-options").ComponentOptionsMixin, {}, string, Readonly<import("vue").ExtractPropTypes<{}>>, {}>>;
+        default: string;
+    };
+    items: PropType<ListItem[]>;
+    columns: {
+        type: NumberConstructor;
+        default: number;
+    };
+}>>, {
+    animation: string | import("vue").DefineComponent<{}, {}, {}, import("vue").ComponentComputedOptions, import("vue").ComponentMethodOptions, import("vue/types/v3-component-options").ComponentOptionsMixin, import("vue/types/v3-component-options").ComponentOptionsMixin, {}, string, Readonly<import("vue").ExtractPropTypes<{}>>, {}> | (import("vue/types/v3-component-public-instance").ComponentPublicInstanceConstructor<import("vue/types/v3-component-public-instance").Vue3Instance<{}, Readonly<import("vue").ExtractPropTypes<{}>>, Readonly<import("vue").ExtractPropTypes<{}>>, {}, {}, true, import("vue/types/v3-component-options").ComponentOptionsBase<any, any, any, any, any, any, any, any, any, any>> & Readonly<Readonly<import("vue").ExtractPropTypes<{}>>> & import("vue").ShallowUnwrapRef<{}> & import("vue/types/v3-component-options").ExtractComputedReturns<import("vue").ComponentComputedOptions> & import("vue").ComponentMethodOptions & import("vue").ComponentCustomProperties & Readonly<import("vue").ExtractPropTypes<{}>>, any, any, any, import("vue").ComponentComputedOptions, import("vue").ComponentMethodOptions> & import("vue/types/v3-component-options").ComponentOptionsBase<Readonly<import("vue").ExtractPropTypes<{}>>, {}, {}, import("vue").ComponentComputedOptions, import("vue").ComponentMethodOptions, import("vue/types/v3-component-options").ComponentOptionsMixin, import("vue/types/v3-component-options").ComponentOptionsMixin, {}, string, {}> & {
+        props: {};
+    });
+    columns: number;
+}>
 ```
-**Extends:** Vue
-
-## Properties
-
-|  Property | Modifiers | Type | Description |
-|  --- | --- | --- | --- |
-|  [animation](./x-components.basevariablecolumngrid.animation.md) | <code>protected</code> | Vue \| string | Animation component that will be used to animate the grid. |
-|  [items?](./x-components.basevariablecolumngrid.items.md) | <code>protected</code> | [ListItem](./x-components.listitem.md)<!-- -->\[\] | _(Optional)_ The list of items to be rendered. |
-

package/docs/API-reference/api/x-components.mainscroll.md

@@ -29,7 +29,7 @@ _default: import("vue").DefineComponent<{
         default: string;
     };
 }, {
-    rootRef: import("vue").Ref<HTMLDivElement | null>;
+    rootRef: import("vue").Ref<import("vue").DefineComponent<{}, () => import("vue").VNode | import("vue").VNode[], {}, {}, {}, import("vue/types/v3-component-options").ComponentOptionsMixin, import("vue/types/v3-component-options").ComponentOptionsMixin, {}, string, Readonly<import("vue").ExtractPropTypes<{}>>, {}> | null>;
     dynamicClasses: import("vue").ComputedRef<VueCSSClasses>;
     firstVisibleElement: import("vue").ComputedRef<string>;
     visibleElementsObserver: import("vue").ComputedRef<ScrollVisibilityObserver | null>;

package/docs/API-reference/api/x-components.md

@@ -22,7 +22,6 @@ X-Components is a library usable everywhere not only for search experiences.
 |  [BaseModal](./x-components.basemodal.md) | Base component with no XPlugin dependencies that serves as a utility for constructing more complex modals. |
 |  [BaseSuggestions](./x-components.basesuggestions.md) | Paints a list of suggestions passed in by prop. Requires a component for a single suggestion in the default slot for working. |
 |  [BaseTabsPanel](./x-components.basetabspanel.md) | Base Tabs Panel. |
-|  [BaseVariableColumnGrid](./x-components.basevariablecolumngrid.md) | The <code>BaseVariableColumnGrid</code> component is a wrapper of the <code>BaseGrid</code> component that listens to the <code>UserClickedColumnPicker</code> and the <code>ColumnsNumberProvided</code> events and passes the selected number of columns to the grid. It also allows to customize the grid items using the available <code>scopedSlots</code>. |
 |  [BaseXAPI](./x-components.basexapi.md) | Default implementation for [XAPI](./x-components.xapi.md)<!-- -->. |
 |  [ClearHistoryQueries](./x-components.clearhistoryqueries.md) | A button that when is pressed, emits the [HistoryQueriesXEvents.UserPressedClearHistoryQueries](./x-components.historyqueriesxevents.userpressedclearhistoryqueries.md) event, expressing the user intention to clear the whole history of queries. |
 |  [DefaultFacetsService](./x-components.defaultfacetsservice.md) | Default implementation for the [FacetsService](./x-components.facetsservice.md)<!-- -->. |
@@ -384,6 +383,7 @@ X-Components is a library usable everywhere not only for search experiences.
 |  [BaseSuggestion](./x-components.basesuggestion.md) | <p>Renders a button with a default slot. It receives a query, which should be the query of the module using this component, a suggestion, the [XEvent](./x-components.xevent.md) that will be emitted on click with a given feature.</p><p>The default slot receives the suggestion and the matched query has props.</p> |
 |  [BaseSwitch](./x-components.baseswitch.md) | Basic switch component to handle boolean values. This component receives its selected state using a prop, and emits a Vue event whenever the user clicks it. |
 |  [BaseTogglePanel](./x-components.basetogglepanel.md) | Simple panel that receives its open state via prop, which is responsible of rendering default slot inside a configurable transition. |
+|  [BaseVariableColumnGrid](./x-components.basevariablecolumngrid.md) | The <code>BaseVariableColumnGrid</code> component is a wrapper of the <code>BaseGrid</code> component that listens to the <code>UserClickedColumnPicker</code> and the <code>ColumnsNumberProvided</code> events and passes the selected number of columns to the grid. It also allows to customize the grid items using the available <code>scopedSlots</code>. |
 |  [bus](./x-components.bus.md) | Default  implementation. |
 |  [cancelFetchAndSaveControls](./x-components.cancelfetchandsavecontrols.md) | Default implementation for fetchAndSaveExperienceControls action. |
 |  [cancelFetchAndSaveIdentifierResults](./x-components.cancelfetchandsaveidentifierresults.md) | Default implementation for [IdentifierResultsActions.cancelFetchAndSaveIdentifierResults()](./x-components.identifierresultsactions.cancelfetchandsaveidentifierresults.md) action. |