@empathyco/x-components 5.0.0-alpha.7 → 5.0.0-alpha.9

package/CHANGELOG.md

@@ -3,6 +3,29 @@
 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.9](https://github.com/empathyco/x/compare/@empathyco/x-components@5.0.0-alpha.8...@empathyco/x-components@5.0.0-alpha.9) (2024-05-09)
+
+
+### Features
+
+* migrate `ItemsListInjection` mixin (#1460) ([a89fb51](https://github.com/empathyco/x/commit/a89fb5179de040695f13d56f43de50917e1c7f97))
+
+
+
+## [5.0.0-alpha.8](https://github.com/empathyco/x/compare/@empathyco/x-components@5.0.0-alpha.7...@empathyco/x-components@5.0.0-alpha.8) (2024-05-08)
+
+
+### ⚠ BREAKING CHANGES
+
+* `MainScroll` drops the usage of `NoElement` as root element and uses a div instead. This extra div could break the style of an application that relies on `MainScroll` rendering their content directly.
+`MainScrollItem` drops the usage of `NoElement` if no `tag` prop is passed and uses a div as fallback.
+
+### Features
+
+* migrate `MainScroll` and `MainScrollItem` components (#1456) ([b720132](https://github.com/empathyco/x/commit/b7201322bbf1f5696e80e00622d21d653228177c))
+
+
+
 ## [5.0.0-alpha.7](https://github.com/empathyco/x/compare/@empathyco/x-components@5.0.0-alpha.6...@empathyco/x-components@5.0.0-alpha.7) (2024-05-06)
 
 

package/core/index.js

@@ -144,7 +144,6 @@ export { Debounce } from '../js/components/decorators/debounce.decorators.js';
 export { DISABLE_ANIMATIONS_KEY, HAS_MORE_ITEMS_KEY, LIST_ITEMS_KEY, QUERY_KEY, RESULT_WITH_VARIANTS_KEY, SELECTED_VARIANTS_KEY, SELECT_RESULT_VARIANT_KEY } from '../js/components/decorators/injection.consts.js';
 export { XInject, XProvide } from '../js/components/decorators/injection.decorators.js';
 export { Getter, State } from '../js/components/decorators/store.decorators.js';
-export { ItemsListInjectionMixin } from '../js/components/items-list-injection.mixin.js';
 export { xComponentMixin } from '../js/components/x-component.mixin.js';
 export { getRootXComponent, getXComponentXModuleName, isXComponent } from '../js/components/x-component.utils.js';
 export { createUseDevice } from '../js/composables/create-use-device.composable.js';

package/core/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

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

@@ -1,3 +1,5 @@
+
+
 .x-uppercase {
   text-transform: uppercase;
 }
@@ -13,26 +15,6 @@
 .x-normal-case {
   text-transform: none;
 }
-.x-underline {
-  -webkit-text-decoration-line: underline;
-          text-decoration-line: underline;
-}
-
-.x-overline {
-  -webkit-text-decoration-line: overline;
-          text-decoration-line: overline;
-}
-
-.x-line-through {
-  -webkit-text-decoration-line: line-through;
-          text-decoration-line: line-through;
-}
-
-.x-no-underline {
-  -webkit-text-decoration-line: none;
-          text-decoration-line: none;
-}
-
 .x-static {
   position: static !important;
 }
@@ -955,6 +937,48 @@
 [dir="rtl"] .x-margin--left-20 {
   margin-right: var(--x-size-base-20) !important;
 }
+.x-line-height--none {
+  line-height: 1 !important;
+}
+
+.x-line-height--tight {
+  line-height: 1.25 !important;
+}
+
+.x-line-height--snug {
+  line-height: 1.375 !important;
+}
+
+.x-line-height--normal {
+  line-height: 1.5 !important;
+}
+
+.x-line-height--relaxed {
+  line-height: 1.625 !important;
+}
+
+.x-line-height--loose {
+  line-height: 2 !important;
+}
+.x-underline {
+  -webkit-text-decoration-line: underline;
+          text-decoration-line: underline;
+}
+
+.x-overline {
+  -webkit-text-decoration-line: overline;
+          text-decoration-line: overline;
+}
+
+.x-line-through {
+  -webkit-text-decoration-line: line-through;
+          text-decoration-line: line-through;
+}
+
+.x-no-underline {
+  -webkit-text-decoration-line: none;
+          text-decoration-line: none;
+}
 .x-line-clamp--2 {
   overflow: hidden !important;
   display: -webkit-box !important;
@@ -989,29 +1013,6 @@
   -webkit-box-orient: vertical !important;
   -webkit-line-clamp: 6 !important;
 }
-.x-line-height--none {
-  line-height: 1 !important;
-}
-
-.x-line-height--tight {
-  line-height: 1.25 !important;
-}
-
-.x-line-height--snug {
-  line-height: 1.375 !important;
-}
-
-.x-line-height--normal {
-  line-height: 1.5 !important;
-}
-
-.x-line-height--relaxed {
-  line-height: 1.625 !important;
-}
-
-.x-line-height--loose {
-  line-height: 2 !important;
-}
 .x-font-weight--light {
   font-weight: var(--x-number-font-weight-base-light) !important;
 }
@@ -3285,49 +3286,6 @@
 [dir="rtl"] .x-border-radius--bottom-right-20 {
   border-bottom-left-radius: var(--x-size-base-20) !important;
 }
-.x-border-color--lead {
-  border-color: var(--x-color-base-lead) !important;
-}
-
-.x-border-color--auxiliary {
-  border-color: var(--x-color-base-auxiliary) !important;
-}
-
-.x-border-color--neutral-10 {
-  border-color: var(--x-color-base-neutral-10) !important;
-}
-
-.x-border-color--neutral-35 {
-  border-color: var(--x-color-base-neutral-35) !important;
-}
-
-.x-border-color--neutral-70 {
-  border-color: var(--x-color-base-neutral-70) !important;
-}
-
-.x-border-color--neutral-95 {
-  border-color: var(--x-color-base-neutral-95) !important;
-}
-
-.x-border-color--neutral-100 {
-  border-color: var(--x-color-base-neutral-100) !important;
-}
-
-.x-border-color--accent {
-  border-color: var(--x-color-base-accent) !important;
-}
-
-.x-border-color--enable {
-  border-color: var(--x-color-base-enable) !important;
-}
-
-.x-border-color--disable {
-  border-color: var(--x-color-base-disable) !important;
-}
-
-.x-border-color--transparent {
-  border-color: var(--x-color-base-transparent) !important;
-}
 .x-background--lead {
   background-color: var(--x-color-base-lead) !important;
 }
@@ -3371,6 +3329,49 @@
 .x-background--transparent {
   background-color: var(--x-color-base-transparent) !important;
 }
+.x-border-color--lead {
+  border-color: var(--x-color-base-lead) !important;
+}
+
+.x-border-color--auxiliary {
+  border-color: var(--x-color-base-auxiliary) !important;
+}
+
+.x-border-color--neutral-10 {
+  border-color: var(--x-color-base-neutral-10) !important;
+}
+
+.x-border-color--neutral-35 {
+  border-color: var(--x-color-base-neutral-35) !important;
+}
+
+.x-border-color--neutral-70 {
+  border-color: var(--x-color-base-neutral-70) !important;
+}
+
+.x-border-color--neutral-95 {
+  border-color: var(--x-color-base-neutral-95) !important;
+}
+
+.x-border-color--neutral-100 {
+  border-color: var(--x-color-base-neutral-100) !important;
+}
+
+.x-border-color--accent {
+  border-color: var(--x-color-base-accent) !important;
+}
+
+.x-border-color--enable {
+  border-color: var(--x-color-base-enable) !important;
+}
+
+.x-border-color--disable {
+  border-color: var(--x-color-base-disable) !important;
+}
+
+.x-border-color--transparent {
+  border-color: var(--x-color-base-transparent) !important;
+}
 .x-text--stroke.x-text {
   --x-string-text-decoration: line-through;
 }
@@ -3389,6 +3390,9 @@
 :root {
   --x-color-text-secondary: var(--x-color-base-neutral-35);
 }
+.x-text--secondary {
+  --x-color-text-default: var(--x-color-text-secondary);
+}
 .x-text--light.x-text {
   --x-number-font-weight-text: var(--x-number-font-weight-base-light);
 }
@@ -3680,52 +3684,6 @@
     --x-number-font-weight-tag-default-selected
   );
 }
-:root {
-  --x-color-background-tag-default: var(--x-color-base-neutral-100);
-  --x-color-border-tag-default: var(--x-color-text-tag-default);
-  --x-color-text-tag-default: var(--x-color-text-default);
-  --x-color-background-tag-default-selected: var(--x-color-base-neutral-95);
-  --x-color-border-tag-default-selected: var(--x-color-border-tag-default);
-  --x-color-text-tag-default-selected: var(--x-color-text-tag-default);
-  --x-color-background-tag-default-curated: var(--x-color-background-tag-default);
-  --x-color-border-tag-default-curated: var(--x-color-border-tag-default);
-  --x-color-text-tag-default-curated: var(--x-color-text-tag-default);
-  --x-color-background-tag-default-curated-selected: var(--x-color-background-tag-default-selected);
-  --x-color-border-tag-default-curated-selected: var(--x-color-border-tag-default-selected);
-  --x-color-text-tag-default-curated-selected: var(--x-color-text-tag-default-selected);
-  --x-size-border-width-tag-default: var(--x-size-border-width-base);
-  --x-size-border-width-top-tag-default: var(--x-size-border-width-tag-default);
-  --x-size-border-width-right-tag-default: var(--x-size-border-width-tag-default);
-  --x-size-border-width-bottom-tag-default: var(--x-size-border-width-tag-default);
-  --x-size-border-width-left-tag-default: var(--x-size-border-width-tag-default);
-  --x-size-border-radius-tag-default: var(--x-size-border-radius-base-none);
-  --x-size-border-radius-top-left-tag-default: var(--x-size-border-radius-tag-default);
-  --x-size-border-radius-top-right-tag-default: var(--x-size-border-radius-tag-default);
-  --x-size-border-radius-bottom-right-tag-default: var(--x-size-border-radius-tag-default);
-  --x-size-border-radius-bottom-left-tag-default: var(--x-size-border-radius-tag-default);
-  --x-size-height-tag-default: var(--x-size-base-07);
-  --x-size-padding-right-tag-default: var(--x-size-base-04);
-  --x-size-padding-left-tag-default: var(--x-size-base-04);
-  --x-size-gap-tag-default: var(--x-size-base-02);
-  --x-font-family-tag-default: var(--x-font-family-text);
-  --x-size-font-tag-default: var(--x-size-font-text);
-  --x-size-line-height-tag-default: var(--x-size-line-height-text);
-  --x-number-font-weight-tag-default: var(--x-number-font-weight-text);
-  --x-font-family-tag-default-selected: var(--x-font-family-tag-default);
-  --x-size-font-tag-default-selected: var(--x-size-font-tag-default);
-  --x-size-line-height-tag-default-selected: var(--x-size-line-height-tag-default);
-  --x-number-font-weight-tag-default-selected: var(--x-number-font-weight-tag-default);
-  --x-font-family-tag-default-curated: var(--x-font-family-tag-default);
-  --x-size-font-tag-default-curated: var(--x-size-font-tag-default);
-  --x-size-line-height-tag-default-curated: var(--x-size-line-height-tag-default);
-  --x-number-font-weight-tag-default-curated: var(--x-number-font-weight-tag-default);
-  --x-font-family-tag-default-curated-selected: var(--x-font-family-tag-default-selected);
-  --x-size-font-tag-default-curated-selected: var(--x-size-font-tag-default-selected);
-  --x-size-line-height-tag-default-curated-selected: var(--x-size-line-height-tag-default-selected);
-  --x-number-font-weight-tag-default-curated-selected: var(
-    --x-number-font-weight-tag-default-selected
-  );
-}
 
 [dir="ltr"] .x-tag {
   border-left-width: var(--x-size-border-width-left-tag-default);
@@ -4563,14 +4521,6 @@
   --x-size-gap-row-19: var(--x-size-base-19);
   --x-size-gap-row-20: var(--x-size-base-20);
 }
-:root {
-  --x-size-gap-row: 0;
-  --x-size-padding-row: 0;
-  --x-size-justify-row: stretch;
-  --x-size-align-row: center;
-  --x-size-span-row-item: 1;
-  --x-size-start-row-item: 0;
-}
 :root {
   --x-size-gap-row-01: var(--x-size-base-01);
   --x-size-gap-row-02: var(--x-size-base-02);
@@ -4681,6 +4631,14 @@
   --x-size-span-row-item: 1;
   --x-size-start-row-item: 0;
 }
+:root {
+  --x-size-gap-row: 0;
+  --x-size-padding-row: 0;
+  --x-size-justify-row: stretch;
+  --x-size-align-row: center;
+  --x-size-span-row-item: 1;
+  --x-size-start-row-item: 0;
+}
 
 .x-row {
   display: grid;
@@ -4891,6 +4849,9 @@
 :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;
@@ -4905,9 +4866,6 @@
   --x-size-border-radius-progress-bar-default: var(--x-size-border-radius-base-pill);
   --x-size-border-width-progress-bar-default: 0;
 }
-:root {
-  --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);
   --x-size-width-progress-bar-line-default: var(--x-size-base-20);
@@ -8429,6 +8387,16 @@
   --x-size-border-width-bottom-button-tertiary: var(--x-size-border-width-button-tertiary);
   --x-size-border-width-left-button-tertiary: var(--x-size-border-width-button-tertiary);
 }
+:root {
+  --x-color-background-button-tertiary: var(--x-color-base-neutral-95);
+  --x-color-border-button-tertiary: var(--x-color-base-neutral-70);
+  --x-color-text-button-tertiary: var(--x-color-text-default);
+  --x-size-border-width-button-tertiary: var(--x-size-border-width-base);
+  --x-size-border-width-top-button-tertiary: var(--x-size-border-width-button-tertiary);
+  --x-size-border-width-right-button-tertiary: var(--x-size-border-width-button-tertiary);
+  --x-size-border-width-bottom-button-tertiary: var(--x-size-border-width-button-tertiary);
+  --x-size-border-width-left-button-tertiary: var(--x-size-border-width-button-tertiary);
+}
 
 .x-button--tertiary.x-button,
 .x-button--tertiary .x-button {
@@ -8440,16 +8408,6 @@
   --x-size-border-width-bottom-button-default: var(--x-size-border-width-bottom-button-tertiary);
   --x-size-border-width-left-button-default: var(--x-size-border-width-left-button-tertiary);
 }
-:root {
-  --x-color-background-button-tertiary: var(--x-color-base-neutral-95);
-  --x-color-border-button-tertiary: var(--x-color-base-neutral-70);
-  --x-color-text-button-tertiary: var(--x-color-text-default);
-  --x-size-border-width-button-tertiary: var(--x-size-border-width-base);
-  --x-size-border-width-top-button-tertiary: var(--x-size-border-width-button-tertiary);
-  --x-size-border-width-right-button-tertiary: var(--x-size-border-width-button-tertiary);
-  --x-size-border-width-bottom-button-tertiary: var(--x-size-border-width-button-tertiary);
-  --x-size-border-width-left-button-tertiary: var(--x-size-border-width-button-tertiary);
-}
 :root {
   --x-color-background-button-secondary: transparent;
   --x-color-border-button-secondary: var(--x-color-border-button-default);
@@ -8838,6 +8796,49 @@
   --x-size-border-radius-base-pill: 99999px;
   --x-size-border-width-base: 1px;
 }
-.x-text--secondary {
-  --x-color-text-default: var(--x-color-text-secondary);
-}
+:root {
+  --x-color-background-tag-default: var(--x-color-base-neutral-100);
+  --x-color-border-tag-default: var(--x-color-text-tag-default);
+  --x-color-text-tag-default: var(--x-color-text-default);
+  --x-color-background-tag-default-selected: var(--x-color-base-neutral-95);
+  --x-color-border-tag-default-selected: var(--x-color-border-tag-default);
+  --x-color-text-tag-default-selected: var(--x-color-text-tag-default);
+  --x-color-background-tag-default-curated: var(--x-color-background-tag-default);
+  --x-color-border-tag-default-curated: var(--x-color-border-tag-default);
+  --x-color-text-tag-default-curated: var(--x-color-text-tag-default);
+  --x-color-background-tag-default-curated-selected: var(--x-color-background-tag-default-selected);
+  --x-color-border-tag-default-curated-selected: var(--x-color-border-tag-default-selected);
+  --x-color-text-tag-default-curated-selected: var(--x-color-text-tag-default-selected);
+  --x-size-border-width-tag-default: var(--x-size-border-width-base);
+  --x-size-border-width-top-tag-default: var(--x-size-border-width-tag-default);
+  --x-size-border-width-right-tag-default: var(--x-size-border-width-tag-default);
+  --x-size-border-width-bottom-tag-default: var(--x-size-border-width-tag-default);
+  --x-size-border-width-left-tag-default: var(--x-size-border-width-tag-default);
+  --x-size-border-radius-tag-default: var(--x-size-border-radius-base-none);
+  --x-size-border-radius-top-left-tag-default: var(--x-size-border-radius-tag-default);
+  --x-size-border-radius-top-right-tag-default: var(--x-size-border-radius-tag-default);
+  --x-size-border-radius-bottom-right-tag-default: var(--x-size-border-radius-tag-default);
+  --x-size-border-radius-bottom-left-tag-default: var(--x-size-border-radius-tag-default);
+  --x-size-height-tag-default: var(--x-size-base-07);
+  --x-size-padding-right-tag-default: var(--x-size-base-04);
+  --x-size-padding-left-tag-default: var(--x-size-base-04);
+  --x-size-gap-tag-default: var(--x-size-base-02);
+  --x-font-family-tag-default: var(--x-font-family-text);
+  --x-size-font-tag-default: var(--x-size-font-text);
+  --x-size-line-height-tag-default: var(--x-size-line-height-text);
+  --x-number-font-weight-tag-default: var(--x-number-font-weight-text);
+  --x-font-family-tag-default-selected: var(--x-font-family-tag-default);
+  --x-size-font-tag-default-selected: var(--x-size-font-tag-default);
+  --x-size-line-height-tag-default-selected: var(--x-size-line-height-tag-default);
+  --x-number-font-weight-tag-default-selected: var(--x-number-font-weight-tag-default);
+  --x-font-family-tag-default-curated: var(--x-font-family-tag-default);
+  --x-size-font-tag-default-curated: var(--x-size-font-tag-default);
+  --x-size-line-height-tag-default-curated: var(--x-size-line-height-tag-default);
+  --x-number-font-weight-tag-default-curated: var(--x-number-font-weight-tag-default);
+  --x-font-family-tag-default-curated-selected: var(--x-font-family-tag-default-selected);
+  --x-size-font-tag-default-curated-selected: var(--x-size-font-tag-default-selected);
+  --x-size-line-height-tag-default-curated-selected: var(--x-size-line-height-tag-default-selected);
+  --x-number-font-weight-tag-default-curated-selected: var(
+    --x-number-font-weight-tag-default-selected
+  );
+}

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

@@ -2,7 +2,7 @@
 
 [Home](./index.md) > [@empathyco/x-components](./x-components.md) > [BannersList](./x-components.bannerslist.md)
 
-## BannersList class
+## BannersList variable
 
 It renders a [ItemsList](./x-components.itemslist.md) list of banners from [SearchState.banners](./x-components.searchstate.banners.md) by default using the `ItemsInjectionMixin`<!-- -->.
 
@@ -13,14 +13,26 @@ It also provides the parent slots to customize the items.
 **Signature:**
 
 ```typescript
-export default class BannersList extends ItemsListInjectionMixin 
+_default: import("vue").DefineComponent<{
+    animation: {
+        type: import("vue").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: ComputedRef<ListItem[]>;
+    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: import("vue").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;
+    };
+}>>, {
+    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: {}; /**
+         * Animation component that will be used to animate the banners.
+         *
+         * @public
+         */
+    });
+}>
 ```
-**Extends:** [ItemsListInjectionMixin](./x-components.itemslistinjectionmixin.md)
-
-## Properties
-
-|  Property | Modifiers | Type | Description |
-|  --- | --- | --- | --- |
-|  [animation](./x-components.bannerslist.animation.md) | <code>protected</code> | Vue \| string | Animation component that will be used to animate the banners. |
-|  [stateItems](./x-components.bannerslist.stateitems.md) |  | Banner\[\] | The banners to render from the state. |
-

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

@@ -25,7 +25,10 @@ _default: import("vue").DefineComponent<{
     gridItems: import("vue").ComputedRef<GridItem[]>;
     cssClasses: import("vue").ComputedRef<VueCSSClasses>;
     style: import("vue").ComputedRef<Partial<CSSStyleDeclaration>>;
-    gridEl: Ref<HTMLElement | null>;
+    gridEl: Ref<HTMLElement | {
+        $el: HTMLElement;
+    } | null>;
+    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<{}>>, {}>>;

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

@@ -2,21 +2,45 @@
 
 [Home](./index.md) > [@empathyco/x-components](./x-components.md) > [ItemsList](./x-components.itemslist.md)
 
-## ItemsList class
+## ItemsList variable
 
 It renders a list of [ListItem](./x-components.listitem.md) providing a slot for each `slotName` which depends on the `modelName`<!-- -->of the item.
 
 **Signature:**
 
 ```typescript
-export default class ItemsList extends ItemsList_base 
+_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: {
+        type: PropType<ListItem[]>;
+        required: true;
+    };
+    itemClass: {
+        type: StringConstructor;
+    };
+}, {
+    computedItems: import("vue").ComputedRef<{
+        dataTest: string;
+        class: Array<string | undefined>;
+    }[]>;
+}, {}, {}, {}, 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: {
+        type: PropType<ListItem[]>;
+        required: true;
+    };
+    itemClass: {
+        type: StringConstructor;
+    };
+}>>, {
+    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: {};
+    });
+}>
 ```
-**Extends:** ItemsList\_base
-
-## Properties
-
-|  Property | Modifiers | Type | Description |
-|  --- | --- | --- | --- |
-|  [animation](./x-components.itemslist.animation.md) | <code>protected</code> | Vue \| string | Animation component that will be used to animate the list. |
-|  [items](./x-components.itemslist.items.md) | <code>protected</code> | [ListItem](./x-components.listitem.md)<!-- -->\[\] | List of items. |
-

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

@@ -2,7 +2,7 @@
 
 [Home](./index.md) > [@empathyco/x-components](./x-components.md) > [MainScroll](./x-components.mainscroll.md)
 
-## MainScroll class
+## MainScroll variable
 
 Extends the scroll making it able to sync the first visible element, and allowing the children position to be restored.
 
@@ -11,23 +11,50 @@ Each child element that wants to have this support must be wrapped in a [MainScr
 **Signature:**
 
 ```typescript
-export default class MainScroll extends Vue 
+_default: import("vue").DefineComponent<{
+    useWindow: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    restoreScrollTimeoutMs: {
+        type: NumberConstructor;
+        default: number;
+    };
+    threshold: {
+        type: NumberConstructor;
+        default: number;
+    };
+    margin: {
+        type: StringConstructor;
+        default: string;
+    };
+}, {
+    rootRef: import("vue").Ref<HTMLDivElement | null>;
+    dynamicClasses: import("vue").ComputedRef<VueCSSClasses>;
+    firstVisibleElement: import("vue").ComputedRef<string>;
+    visibleElementsObserver: import("vue").ComputedRef<ScrollVisibilityObserver | null>;
+    intersectingElements: import("vue").Ref<HTMLElement[]>;
+}, {}, {}, {}, import("vue/types/v3-component-options").ComponentOptionsMixin, import("vue/types/v3-component-options").ComponentOptionsMixin, {}, string, Readonly<import("vue").ExtractPropTypes<{
+    useWindow: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    restoreScrollTimeoutMs: {
+        type: NumberConstructor;
+        default: number;
+    };
+    threshold: {
+        type: NumberConstructor;
+        default: number;
+    };
+    margin: {
+        type: StringConstructor;
+        default: string;
+    };
+}>>, {
+    useWindow: boolean;
+    restoreScrollTimeoutMs: number;
+    threshold: number;
+    margin: string;
+}>
 ```
-**Extends:** Vue
-
-## Properties
-
-|  Property | Modifiers | Type | Description |
-|  --- | --- | --- | --- |
-|  [margin](./x-components.mainscroll.margin.md) |  | string | Adjusts the size of the scroll container bounds. |
-|  [restoreScrollTimeoutMs](./x-components.mainscroll.restorescrolltimeoutms.md) |  | number | Timeout in milliseconds to abort trying to restore the scroll position to the target element. |
-|  [threshold](./x-components.mainscroll.threshold.md) |  | number | Intersection percentage to consider an element visible. |
-|  [useWindow](./x-components.mainscroll.usewindow.md) |  | boolean | If <code>true</code>, sets this scroll instance to the main of the application. Being the main scroll implies that features like restoring the scroll when the query changes, or storing the scroll position in the URL will be enabled for this container. |
-|  [visibleElementsObserver](./x-components.mainscroll.visibleelementsobserver.md) | <code>readonly</code> | [ScrollVisibilityObserver](./x-components.scrollvisibilityobserver.md) \| null | Creates an <code>IntersectionObserver</code> to detect the first visible elements. Children of this component should register themselves if they want to be observed. |
-
-## Methods
-
-|  Method | Modifiers | Description |
-|  --- | --- | --- |
-|  [mounted()](./x-components.mainscroll.mounted.md) |  | Initialise the observer after mounting the component. |
-