@empathyco/x-components 6.0.0-alpha.237 → 6.0.0-alpha.239

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.
 
+## [6.0.0-alpha.239](https://github.com/empathyco/x/compare/@empathyco/x-components@6.0.0-alpha.238...@empathyco/x-components@6.0.0-alpha.239) (2026-04-13)
+
+### ⚠ BREAKING CHANGES
+
+* **x-components:** migrate `x-components` package from deprecated `x-tailwindcss` to the new `x-design-system` and Tailwind 3 to 4. That implies migrating the prefix from `x-` to `xds:`. Keeping `x-` for BEM conventions.
+
+### Features
+
+* **x-components:** integrate `xds` with `x-components` (#1993)
+
+
+## [6.0.0-alpha.238](https://github.com/empathyco/x/compare/@empathyco/x-components@6.0.0-alpha.237...@empathyco/x-components@6.0.0-alpha.238) (2026-04-10)
+
+### Bug Fixes
+
+* **ai-carousel:** deleted expand button and fixed tagging twice
+
+
 ## [6.0.0-alpha.237](https://github.com/empathyco/x/compare/@empathyco/x-components@6.0.0-alpha.236...@empathyco/x-components@6.0.0-alpha.237) (2026-04-08)
 
 ### Features

package/core/index.d.ts

@@ -1,6 +1,5 @@
 /**
  * X-Components is a library usable everywhere not only for search experiences.
- *
  * @packageDocumentation
  */
 export * from '../types/src/components';

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

@@ -15,14 +15,6 @@ _default: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
         type: StringConstructor;
         default: string;
     };
-    expandText: {
-        type: StringConstructor;
-        default: string;
-    };
-    collapseText: {
-        type: StringConstructor;
-        default: string;
-    };
     autoExpandInSearchNoResults: {
         type: BooleanConstructor;
         default: boolean;
@@ -41,14 +33,12 @@ _default: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
     };
 }>, {
     aiOverviewRef: import("vue").Ref<HTMLDivElement | null, HTMLDivElement | null>;
-    buttonText: import("vue").ComputedRef<string>;
     emptyTaggingRequest: TaggingRequest;
     expanded: import("vue").Ref<boolean, boolean>;
     parsedResponseText: import("vue").ComputedRef<string | Promise<string>>;
     suggestionsLoading: import("vue").ComputedRef<boolean>;
     suggestionsSearch: import("vue").ComputedRef<import("@empathyco/x-types").AiSuggestionSearch[]>;
     suggestionText: import("vue").ComputedRef<string>;
-    emitAndSetExpand: (isExpanded: boolean) => void;
     shouldAnimateSuggestion: import("vue").Ref<boolean, boolean>;
     query: import("vue").ComputedRef<string>;
     tagging: import("vue").ComputedRef<import("@empathyco/x-types").AiSuggestionTagging | undefined>;
@@ -62,14 +52,6 @@ _default: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
         type: StringConstructor;
         default: string;
     };
-    expandText: {
-        type: StringConstructor;
-        default: string;
-    };
-    collapseText: {
-        type: StringConstructor;
-        default: string;
-    };
     autoExpandInSearchNoResults: {
         type: BooleanConstructor;
         default: boolean;
@@ -88,14 +70,11 @@ _default: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
     };
 }>> & Readonly<{}>, {
     titleLoading: string;
-    expandText: string;
-    collapseText: string;
     autoExpandInSearchNoResults: boolean;
 }, {}, {
     AIStarIcon: import("vue").DefineComponent<{}, {}, any>;
     ArrowRightIcon: import("vue").DefineComponent<{}, {}, any>;
     BaseEventButton: import("vue").DefineComponent<{}, {}, any>;
-    ChevronDownIcon: import("vue").DefineComponent<{}, {}, any>;
     CollapseHeight: import("vue").DefineComponent<{}, {}, any>;
     ChangeHeight: import("vue").DefineComponent<{}, {}, any>;
     Fade: import("vue").DefineComponent<{}, {}, any>;

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

@@ -17,7 +17,7 @@ _default: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
 }>, {
     clickEvent: import("vue").ComputedRef<Partial<XEventsTypes>>;
     cssClasses: import("vue").ComputedRef<{
-        'x-selected x-all-filter--is-selected': boolean;
+        'xds:selected x-all-filter--is-selected': boolean;
     }>;
     isSelected: import("vue").ComputedRef<boolean>;
 }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{

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

@@ -40,7 +40,7 @@ _default: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
     dynamicCSSClasses: import("vue").ComputedRef<{
         [x: string]: boolean;
         'x-highlight--has-match': boolean;
-        'x-highlight-text': boolean;
+        'xds:highlight-text': boolean;
     }>;
 }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     text: {

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

@@ -7404,17 +7404,6 @@ Default implementation for the [TaggingActions.track](./x-components.taggingacti
 Performs a track of a result added to the cart.
 
 
-</td></tr>
-<tr><td>
-
-[trackAiOverviewButtonClickedWire](./x-components.trackaioverviewbuttonclickedwire.md)
-
-
-</td><td>
-
-Performs a track of clicking the AI overview expand button when the playload (expanded) is false.
-
-
 </td></tr>
 <tr><td>
 

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

@@ -38,8 +38,8 @@ _default: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
         bottom: boolean;
     };
     cssClasses: import("vue").ComputedRef<{
-        'x-sliding-panel-at-start': boolean;
-        'x-sliding-panel-at-end': boolean;
+        'xds:sliding-panel-at-start': boolean;
+        'xds:sliding-panel-at-end': boolean;
     }>;
     scrollContainerRef: import("vue").Ref<HTMLDivElement | undefined, HTMLDivElement | undefined>;
     slotContainerWidth: import("vue").ShallowRef<number, number>;

package/docs/API-reference/components/ai/x-components.ai-overview.md

@@ -12,8 +12,6 @@ title: AiOverview
 | ------------------------------------------ | ----------- | -------------------- | ----------------------------------------- |
 | <code>title</code>                         |             | <code>string</code>  | <code></code>                             |
 | <code>titleLoading</code>                  |             | <code>string</code>  | <code>'Generating with Empathy AI'</code> |
-| <code>expandText</code>                    |             | <code>string</code>  | <code>'Show more'</code>                  |
-| <code>collapseText</code>                  |             | <code>string</code>  | <code>'Show less'</code>                  |
 | <code>autoExpandInSearchNoResults</code>   |             | <code>boolean</code> | <code>true</code>                         |
 | <code>contentClasses</code>                |             | <code>string</code>  | <code></code>                             |
 | <code>slidingPanelsClasses</code>          |             | <code>string</code>  | <code></code>                             |
@@ -32,7 +30,6 @@ title: AiOverview
 | <code>sliding-panels-right-button</code> |                        | None                                      |
 | <code>result</code>                      | (required) result card |                                           |
 | <code>suggestions-extra-content</code>   |                        | None                                      |
-| <code>cta-button</code>                  |                        | None                                      |
 
 ## AI Overview Examples
 

package/docs/API-reference/components/common/column-picker/x-components.base-column-picker-list.md

@@ -124,7 +124,7 @@ The `buttonClass` prop can be used to add classes to the buttons.
 
 ```vue live
 <template>
-  <BaseColumnPickerList :columns="columns" buttonClass="x-button--round" />
+  <BaseColumnPickerList :columns="columns" buttonClass="xds:button-circle" />
 </template>
 
 <script setup>

package/docs/API-reference/components/common/x-components.base-slider.md

@@ -115,7 +115,7 @@ manually.
   <BaseSlider v-model="selectedRange" :threshold="threshold">
     <input
       @change="selectedRange.min = $event.target?.valueAsNumber || 0"
-      class="x-input"
+      class="xds:input"
       name="min"
       type="number"
       :value="selectedRange.min"
@@ -125,7 +125,7 @@ manually.
     <input
       @change="selectedRange.max = $event.target?.valueAsNumber || 1000000"
       style="display: block"
-      class="x-input"
+      class="xds:input"
       name="max"
       type="number"
       :value="selectedRange.max"

package/js/components/animations/change-height.vue.js.map

@@ -1 +1 @@
-{"version":3,"file":"change-height.vue.js","sources":["../../../../src/components/animations/change-height.vue"],"sourcesContent":["<template>\n  <div class=\"x-change-height\">\n    <div ref=\"wrapper\">\n      <slot />\n    </div>\n  </div>\n</template>\n\n<script lang=\"ts\">\nimport { defineComponent, onMounted, onUnmounted, ref } from 'vue'\n\nexport default defineComponent({\n  setup() {\n    const wrapper = ref<HTMLElement>()\n    const observer = new ResizeObserver(entries => {\n      for (const entry of entries) {\n        if (entry.target.parentElement) {\n          entry.target.parentElement.style.height = `${entry.contentRect.height}px`\n        }\n      }\n    })\n\n    onMounted(() => {\n      if (wrapper.value?.parentElement) {\n        const height = wrapper.value.getBoundingClientRect().height\n        wrapper.value.parentElement.style.height = `${height}px`\n        observer.observe(wrapper.value)\n      }\n    })\n\n    onUnmounted(() => {\n      if (wrapper.value) {\n        observer.unobserve(wrapper.value)\n      }\n    })\n\n    return {\n      wrapper,\n    }\n  },\n})\n</script>\n<style lang=\"css\">\n.x-change-height {\n  --x-change-height-duration: 0.3s;\n  overflow: hidden;\n  transition: all var(--x-change-height-duration) ease-out;\n}\n</style>\n\n<docs lang=\"mdx\">\n## Examples\n\nThe ChangeHeight component automatically animates the height of its content when it changes size.\n\n### Basic usage:\n\n```vue\n<template>\n  <ChangeHeight>\n    <div>Content whose height will be animated</div>\n  </ChangeHeight>\n</template>\n\n<script setup>\nimport ChangeHeight from '@empathyco/x-components/js/components/animations/change-height.vue'\n</script>\n```\n\n### Example with dynamic content:\n\n```vue\n<template>\n  <div>\n    <button @click=\"expanded = !expanded\">Toggle</button>\n    <ChangeHeight>\n      <div v-if=\"expanded\" style=\"height: 200px; background: #eee;\">Expanded content</div>\n      <div v-else style=\"height: 50px; background: #ccc;\">Collapsed content</div>\n    </ChangeHeight>\n  </div>\n</template>\n\n<script setup>\nimport { ref } from 'vue'\nimport ChangeHeight from '@empathyco/x-components/js/components/animations/change-height.vue'\n\nconst expanded = ref(false)\n</script>\n```\n</docs>\n"],"names":["_openBlock","_createElementBlock","_createElementVNode","_renderSlot"],"mappings":";;;;;AACO,MAAA,UAAA,GAAA,EAAA,KAAA,EAAM,iBAAA,EAAiB;AACrB,MAAA,UAAA,GAAA,EAAA,GAAA,EAAI,SAAA,EAAS;;AADpB,EAAA,OAAAA,SAAA,EAAA,EAAAC,kBAAA,CAIM,OAJN,UAAA,EAIM;AAAA,IAHJC,kBAAA;AAAA,MAEM,KAAA;AAAA,MAFN,UAAA;AAAA,MAEM;AAAA,QADJC,UAAA,CAAQ,IAAA,CAAA,MAAA,EAAA,SAAA;AAAA,OAAA;;;;;;;;;;"}
+{"version":3,"file":"change-height.vue.js","sources":["../../../../src/components/animations/change-height.vue"],"sourcesContent":["<template>\n  <div class=\"x-change-height\">\n    <div ref=\"wrapper\">\n      <slot />\n    </div>\n  </div>\n</template>\n\n<script lang=\"ts\">\nimport { defineComponent, onMounted, onUnmounted, ref } from 'vue'\n\nexport default defineComponent({\n  setup() {\n    const wrapper = ref<HTMLElement>()\n    const observer = new ResizeObserver(entries => {\n      for (const entry of entries) {\n        if (entry.target.parentElement) {\n          entry.target.parentElement.style.height = `${entry.contentRect.height}px`\n        }\n      }\n    })\n\n    onMounted(() => {\n      if (wrapper.value?.parentElement) {\n        const height = wrapper.value.getBoundingClientRect().height\n        wrapper.value.parentElement.style.height = `${height}px`\n        observer.observe(wrapper.value)\n      }\n    })\n\n    onUnmounted(() => {\n      if (wrapper.value) {\n        observer.unobserve(wrapper.value)\n      }\n    })\n\n    return {\n      wrapper,\n    }\n  },\n})\n</script>\n\n<style lang=\"css\">\n.x-change-height {\n  --x-change-height-duration: 0.3s;\n  overflow: hidden;\n  transition: all var(--x-change-height-duration) ease-out;\n}\n</style>\n\n<docs lang=\"mdx\">\n## Examples\n\nThe ChangeHeight component automatically animates the height of its content when it changes size.\n\n### Basic usage:\n\n```vue\n<template>\n  <ChangeHeight>\n    <div>Content whose height will be animated</div>\n  </ChangeHeight>\n</template>\n\n<script setup>\nimport ChangeHeight from '@empathyco/x-components/js/components/animations/change-height.vue'\n</script>\n```\n\n### Example with dynamic content:\n\n```vue\n<template>\n  <div>\n    <button @click=\"expanded = !expanded\">Toggle</button>\n    <ChangeHeight>\n      <div v-if=\"expanded\" style=\"height: 200px; background: #eee;\">Expanded content</div>\n      <div v-else style=\"height: 50px; background: #ccc;\">Collapsed content</div>\n    </ChangeHeight>\n  </div>\n</template>\n\n<script setup>\nimport { ref } from 'vue'\nimport ChangeHeight from '@empathyco/x-components/js/components/animations/change-height.vue'\n\nconst expanded = ref(false)\n</script>\n```\n</docs>\n"],"names":["_openBlock","_createElementBlock","_createElementVNode","_renderSlot"],"mappings":";;;;;AACO,MAAA,UAAA,GAAA,EAAA,KAAA,EAAM,iBAAA,EAAiB;AACrB,MAAA,UAAA,GAAA,EAAA,GAAA,EAAI,SAAA,EAAS;;AADpB,EAAA,OAAAA,SAAA,EAAA,EAAAC,kBAAA,CAIM,OAJN,UAAA,EAIM;AAAA,IAHJC,kBAAA;AAAA,MAEM,KAAA;AAAA,MAFN,UAAA;AAAA,MAEM;AAAA,QADJC,UAAA,CAAQ,IAAA,CAAA,MAAA,EAAA,SAAA;AAAA,OAAA;;;;;;;;;;"}

package/js/components/animations/change-height.vue2.js.map

@@ -1 +1 @@
-{"version":3,"file":"change-height.vue2.js","sources":["../../../../src/components/animations/change-height.vue"],"sourcesContent":["<template>\n  <div class=\"x-change-height\">\n    <div ref=\"wrapper\">\n      <slot />\n    </div>\n  </div>\n</template>\n\n<script lang=\"ts\">\nimport { defineComponent, onMounted, onUnmounted, ref } from 'vue'\n\nexport default defineComponent({\n  setup() {\n    const wrapper = ref<HTMLElement>()\n    const observer = new ResizeObserver(entries => {\n      for (const entry of entries) {\n        if (entry.target.parentElement) {\n          entry.target.parentElement.style.height = `${entry.contentRect.height}px`\n        }\n      }\n    })\n\n    onMounted(() => {\n      if (wrapper.value?.parentElement) {\n        const height = wrapper.value.getBoundingClientRect().height\n        wrapper.value.parentElement.style.height = `${height}px`\n        observer.observe(wrapper.value)\n      }\n    })\n\n    onUnmounted(() => {\n      if (wrapper.value) {\n        observer.unobserve(wrapper.value)\n      }\n    })\n\n    return {\n      wrapper,\n    }\n  },\n})\n</script>\n<style lang=\"css\">\n.x-change-height {\n  --x-change-height-duration: 0.3s;\n  overflow: hidden;\n  transition: all var(--x-change-height-duration) ease-out;\n}\n</style>\n\n<docs lang=\"mdx\">\n## Examples\n\nThe ChangeHeight component automatically animates the height of its content when it changes size.\n\n### Basic usage:\n\n```vue\n<template>\n  <ChangeHeight>\n    <div>Content whose height will be animated</div>\n  </ChangeHeight>\n</template>\n\n<script setup>\nimport ChangeHeight from '@empathyco/x-components/js/components/animations/change-height.vue'\n</script>\n```\n\n### Example with dynamic content:\n\n```vue\n<template>\n  <div>\n    <button @click=\"expanded = !expanded\">Toggle</button>\n    <ChangeHeight>\n      <div v-if=\"expanded\" style=\"height: 200px; background: #eee;\">Expanded content</div>\n      <div v-else style=\"height: 50px; background: #ccc;\">Collapsed content</div>\n    </ChangeHeight>\n  </div>\n</template>\n\n<script setup>\nimport { ref } from 'vue'\nimport ChangeHeight from '@empathyco/x-components/js/components/animations/change-height.vue'\n\nconst expanded = ref(false)\n</script>\n```\n</docs>\n"],"names":[],"mappings":";;AAWA,gBAAe,eAAe,CAAC;IAC7B,KAAK,GAAA;AACH,QAAA,MAAM,OAAM,GAAI,GAAG,EAAc;AACjC,QAAA,MAAM,QAAO,GAAI,IAAI,cAAc,CAAC,OAAM,IAAG;AAC3C,YAAA,KAAK,MAAM,KAAI,IAAK,OAAO,EAAE;AAC3B,gBAAA,IAAI,KAAK,CAAC,MAAM,CAAC,aAAa,EAAE;AAC9B,oBAAA,KAAK,CAAC,MAAM,CAAC,aAAa,CAAC,KAAK,CAAC,MAAK,GAAI,CAAA,EAAG,KAAK,CAAC,WAAW,CAAC,MAAM,IAAG;gBAC1E;YACF;AACF,QAAA,CAAC,CAAA;QAED,SAAS,CAAC,MAAI;AACZ,YAAA,IAAI,OAAO,CAAC,KAAK,EAAE,aAAa,EAAE;gBAChC,MAAM,MAAK,GAAI,OAAO,CAAC,KAAK,CAAC,qBAAqB,EAAE,CAAC,MAAK;AAC1D,gBAAA,OAAO,CAAC,KAAK,CAAC,aAAa,CAAC,KAAK,CAAC,MAAK,GAAI,CAAA,EAAG,MAAM,CAAA,EAAA,CAAG;AACvD,gBAAA,QAAQ,CAAC,OAAO,CAAC,OAAO,CAAC,KAAK,CAAA;YAChC;AACF,QAAA,CAAC,CAAA;QAED,WAAW,CAAC,MAAI;AACd,YAAA,IAAI,OAAO,CAAC,KAAK,EAAE;AACjB,gBAAA,QAAQ,CAAC,SAAS,CAAC,OAAO,CAAC,KAAK,CAAA;YAClC;AACF,QAAA,CAAC,CAAA;QAED,OAAO;YACL,OAAO;SACT;IACF,CAAC;AACF,CAAA,CAAA;;;;"}
+{"version":3,"file":"change-height.vue2.js","sources":["../../../../src/components/animations/change-height.vue"],"sourcesContent":["<template>\n  <div class=\"x-change-height\">\n    <div ref=\"wrapper\">\n      <slot />\n    </div>\n  </div>\n</template>\n\n<script lang=\"ts\">\nimport { defineComponent, onMounted, onUnmounted, ref } from 'vue'\n\nexport default defineComponent({\n  setup() {\n    const wrapper = ref<HTMLElement>()\n    const observer = new ResizeObserver(entries => {\n      for (const entry of entries) {\n        if (entry.target.parentElement) {\n          entry.target.parentElement.style.height = `${entry.contentRect.height}px`\n        }\n      }\n    })\n\n    onMounted(() => {\n      if (wrapper.value?.parentElement) {\n        const height = wrapper.value.getBoundingClientRect().height\n        wrapper.value.parentElement.style.height = `${height}px`\n        observer.observe(wrapper.value)\n      }\n    })\n\n    onUnmounted(() => {\n      if (wrapper.value) {\n        observer.unobserve(wrapper.value)\n      }\n    })\n\n    return {\n      wrapper,\n    }\n  },\n})\n</script>\n\n<style lang=\"css\">\n.x-change-height {\n  --x-change-height-duration: 0.3s;\n  overflow: hidden;\n  transition: all var(--x-change-height-duration) ease-out;\n}\n</style>\n\n<docs lang=\"mdx\">\n## Examples\n\nThe ChangeHeight component automatically animates the height of its content when it changes size.\n\n### Basic usage:\n\n```vue\n<template>\n  <ChangeHeight>\n    <div>Content whose height will be animated</div>\n  </ChangeHeight>\n</template>\n\n<script setup>\nimport ChangeHeight from '@empathyco/x-components/js/components/animations/change-height.vue'\n</script>\n```\n\n### Example with dynamic content:\n\n```vue\n<template>\n  <div>\n    <button @click=\"expanded = !expanded\">Toggle</button>\n    <ChangeHeight>\n      <div v-if=\"expanded\" style=\"height: 200px; background: #eee;\">Expanded content</div>\n      <div v-else style=\"height: 50px; background: #ccc;\">Collapsed content</div>\n    </ChangeHeight>\n  </div>\n</template>\n\n<script setup>\nimport { ref } from 'vue'\nimport ChangeHeight from '@empathyco/x-components/js/components/animations/change-height.vue'\n\nconst expanded = ref(false)\n</script>\n```\n</docs>\n"],"names":[],"mappings":";;AAWA,gBAAe,eAAe,CAAC;IAC7B,KAAK,GAAA;AACH,QAAA,MAAM,OAAM,GAAI,GAAG,EAAc;AACjC,QAAA,MAAM,QAAO,GAAI,IAAI,cAAc,CAAC,OAAM,IAAG;AAC3C,YAAA,KAAK,MAAM,KAAI,IAAK,OAAO,EAAE;AAC3B,gBAAA,IAAI,KAAK,CAAC,MAAM,CAAC,aAAa,EAAE;AAC9B,oBAAA,KAAK,CAAC,MAAM,CAAC,aAAa,CAAC,KAAK,CAAC,MAAK,GAAI,CAAA,EAAG,KAAK,CAAC,WAAW,CAAC,MAAM,IAAG;gBAC1E;YACF;AACF,QAAA,CAAC,CAAA;QAED,SAAS,CAAC,MAAI;AACZ,YAAA,IAAI,OAAO,CAAC,KAAK,EAAE,aAAa,EAAE;gBAChC,MAAM,MAAK,GAAI,OAAO,CAAC,KAAK,CAAC,qBAAqB,EAAE,CAAC,MAAK;AAC1D,gBAAA,OAAO,CAAC,KAAK,CAAC,aAAa,CAAC,KAAK,CAAC,MAAK,GAAI,CAAA,EAAG,MAAM,CAAA,EAAA,CAAG;AACvD,gBAAA,QAAQ,CAAC,OAAO,CAAC,OAAO,CAAC,KAAK,CAAA;YAChC;AACF,QAAA,CAAC,CAAA;QAED,WAAW,CAAC,MAAI;AACd,YAAA,IAAI,OAAO,CAAC,KAAK,EAAE;AACjB,gBAAA,QAAQ,CAAC,SAAS,CAAC,OAAO,CAAC,KAAK,CAAA;YAClC;AACF,QAAA,CAAC,CAAA;QAED,OAAO;YACL,OAAO;SACT;IACF,CAAC;AACF,CAAA,CAAA;;;;"}

package/js/components/auto-progress-bar.vue.js

@@ -5,7 +5,7 @@ import _export_sfc from '../_virtual/_plugin-vue_export-helper.js';
 
 const _hoisted_1 = {
   key: 0,
-  class: "x-progress-bar",
+  class: "xds:progress-bar",
   "data-test": "progress-bar",
   role: "progressbar"
 };
@@ -14,7 +14,7 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
     createElementVNode(
       "div",
       {
-        class: "x-progress-bar-fill",
+        class: "xds:progress-bar-fill",
         style: normalizeStyle(_ctx.cssStyles),
         "data-test": "progress-bar-line"
       },

package/js/components/auto-progress-bar.vue.js.map

@@ -1 +1 @@
-{"version":3,"file":"auto-progress-bar.vue.js","sources":["../../../src/components/auto-progress-bar.vue"],"sourcesContent":["<template>\n  <div v-if=\"isLoading\" class=\"x-progress-bar\" data-test=\"progress-bar\" role=\"progressbar\">\n    <div class=\"x-progress-bar-fill\" :style=\"cssStyles\" data-test=\"progress-bar-line\" />\n  </div>\n</template>\n\n<script lang=\"ts\">\nimport type { StyleValue } from 'vue'\nimport { computed, defineComponent } from 'vue'\n\n/**\n * The auto progress bar component is useful for displaying a visual indicator of numerical data\n * in a bar shape.\n *\n * @public\n */\nexport default defineComponent({\n  name: 'AutoProgressBar',\n  props: {\n    /**\n     * A boolean flag indicating if the bar is loading.\n     *\n     * @public\n     */\n    isLoading: {\n      type: Boolean,\n      default: true,\n    },\n    /**\n     * The duration in seconds of the progress bar.\n     *\n     * @public\n     */\n    durationInSeconds: {\n      type: Number,\n      default: 5,\n    },\n  },\n  setup(props) {\n    /**\n     * Computed property to calculate the animation's duration.\n     *\n     * @returns The CSS styles of the animation.\n     *\n     * @internal\n     */\n    const cssStyles = computed<StyleValue>(() => ({\n      animationDuration: `${props.durationInSeconds}s`,\n    }))\n\n    return {\n      cssStyles,\n    }\n  },\n})\n</script>\n\n<style lang=\"css\" scoped>\n.x-progress-bar {\n  display: inline-block;\n  overflow: hidden;\n  background-color: #dbe2e5;\n  border-radius: 4px;\n}\n\n.x-progress-bar-fill {\n  height: 4px;\n  background-color: #283034;\n  animation: slide linear;\n  transform-origin: left;\n}\n\n@keyframes slide {\n  0% {\n    transform: translateX(-100%);\n  }\n  100% {\n    transform: translateX(0);\n  }\n}\n</style>\n\n<docs lang=\"mdx\">\n## Events\n\nThis component emits the following events:\n\n- [`UserClickedARedirection`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts)\n  after the user clicks the redirection button.\n- [`UserClickedAbortARedirection`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts)\n  after the user clicks the abort redirection button.\n\n## See it in action\n\nHere you have a basic example of how the auto progress bar is rendered.\n\n```vue live\n<template>\n  <AutoProgressBar :isLoading=\"isLoading\" :durationInSeconds=\"durationInSeconds\" />\n</template>\n\n<script setup>\nimport { AutoProgressBar } from '@empathyco/x-components'\nconst isLoading = true\nconst durationInSeconds = 100\n</script>\n```\n\n### Play with props\n\nIn this example, the auto progress bar has been set to do an animation for 5 seconds. There is a way\nto cancel the animation by sending the isLoading prop to false.\n\n```vue live\n<template>\n  <AutoProgressBar :durationInSeconds=\"5\" :isLoading=\"true\" />\n</template>\n\n<script setup>\nimport { AutoProgressBar } from '@empathyco/x-components'\n</script>\n```\n</docs>\n"],"names":["_openBlock","_createElementBlock","_createElementVNode","_normalizeStyle"],"mappings":";;;;;;;EACwB,KAAA,EAAM,gBAAA;AAAA,EAAiB,WAAA,EAAU,cAAA;AAAA,EAAe,IAAA,EAAK;;;SAAhE,IAAA,CAAA,SAAA,IAAAA,SAAA,EAAA,EAAXC,kBAAA,CAEM,OAFN,UAAA,EAEM;AAAA,IADJC,kBAAA;AAAA,MAAoF,KAAA;AAAA,MAAA;AAAA,QAA/E,KAAA,EAAM,qBAAA;AAAA,QAAuB,KAAA,EAAKC,eAAE,IAAA,CAAA,SAAS,CAAA;AAAA,QAAE,WAAA,EAAU;AAAA,OAAA;;;;;;;;;;;"}
+{"version":3,"file":"auto-progress-bar.vue.js","sources":["../../../src/components/auto-progress-bar.vue"],"sourcesContent":["<template>\n  <div v-if=\"isLoading\" class=\"xds:progress-bar\" data-test=\"progress-bar\" role=\"progressbar\">\n    <div class=\"xds:progress-bar-fill\" :style=\"cssStyles\" data-test=\"progress-bar-line\" />\n  </div>\n</template>\n\n<script lang=\"ts\">\nimport type { StyleValue } from 'vue'\nimport { computed, defineComponent } from 'vue'\n\n/**\n * The auto progress bar component is useful for displaying a visual indicator of numerical data\n * in a bar shape.\n *\n * @public\n */\nexport default defineComponent({\n  name: 'AutoProgressBar',\n  props: {\n    /**\n     * A boolean flag indicating if the bar is loading.\n     *\n     * @public\n     */\n    isLoading: {\n      type: Boolean,\n      default: true,\n    },\n    /**\n     * The duration in seconds of the progress bar.\n     *\n     * @public\n     */\n    durationInSeconds: {\n      type: Number,\n      default: 5,\n    },\n  },\n  setup(props) {\n    /**\n     * Computed property to calculate the animation's duration.\n     *\n     * @returns The CSS styles of the animation.\n     *\n     * @internal\n     */\n    const cssStyles = computed<StyleValue>(() => ({\n      animationDuration: `${props.durationInSeconds}s`,\n    }))\n\n    return {\n      cssStyles,\n    }\n  },\n})\n</script>\n\n<style lang=\"css\" scoped>\n.x-progress-bar {\n  display: inline-block;\n  overflow: hidden;\n  background-color: #dbe2e5;\n  border-radius: 4px;\n}\n\n.x-progress-bar-fill {\n  height: 4px;\n  background-color: #283034;\n  animation: slide linear;\n  transform-origin: left;\n}\n\n@keyframes slide {\n  0% {\n    transform: translateX(-100%);\n  }\n  100% {\n    transform: translateX(0);\n  }\n}\n</style>\n\n<docs lang=\"mdx\">\n## Events\n\nThis component emits the following events:\n\n- [`UserClickedARedirection`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts)\n  after the user clicks the redirection button.\n- [`UserClickedAbortARedirection`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts)\n  after the user clicks the abort redirection button.\n\n## See it in action\n\nHere you have a basic example of how the auto progress bar is rendered.\n\n```vue live\n<template>\n  <AutoProgressBar :isLoading=\"isLoading\" :durationInSeconds=\"durationInSeconds\" />\n</template>\n\n<script setup>\nimport { AutoProgressBar } from '@empathyco/x-components'\nconst isLoading = true\nconst durationInSeconds = 100\n</script>\n```\n\n### Play with props\n\nIn this example, the auto progress bar has been set to do an animation for 5 seconds. There is a way\nto cancel the animation by sending the isLoading prop to false.\n\n```vue live\n<template>\n  <AutoProgressBar :durationInSeconds=\"5\" :isLoading=\"true\" />\n</template>\n\n<script setup>\nimport { AutoProgressBar } from '@empathyco/x-components'\n</script>\n```\n</docs>\n"],"names":["_openBlock","_createElementBlock","_createElementVNode","_normalizeStyle"],"mappings":";;;;;;;EACwB,KAAA,EAAM,kBAAA;AAAA,EAAmB,WAAA,EAAU,cAAA;AAAA,EAAe,IAAA,EAAK;;;SAAlE,IAAA,CAAA,SAAA,IAAAA,SAAA,EAAA,EAAXC,kBAAA,CAEM,OAFN,UAAA,EAEM;AAAA,IADJC,kBAAA;AAAA,MAAsF,KAAA;AAAA,MAAA;AAAA,QAAjF,KAAA,EAAM,uBAAA;AAAA,QAAyB,KAAA,EAAKC,eAAE,IAAA,CAAA,SAAS,CAAA;AAAA,QAAE,WAAA,EAAU;AAAA,OAAA;;;;;;;;;;;"}

package/js/components/auto-progress-bar.vue2.js.map

@@ -1 +1 @@
-{"version":3,"file":"auto-progress-bar.vue2.js","sources":["../../../src/components/auto-progress-bar.vue"],"sourcesContent":["<template>\n  <div v-if=\"isLoading\" class=\"x-progress-bar\" data-test=\"progress-bar\" role=\"progressbar\">\n    <div class=\"x-progress-bar-fill\" :style=\"cssStyles\" data-test=\"progress-bar-line\" />\n  </div>\n</template>\n\n<script lang=\"ts\">\nimport type { StyleValue } from 'vue'\nimport { computed, defineComponent } from 'vue'\n\n/**\n * The auto progress bar component is useful for displaying a visual indicator of numerical data\n * in a bar shape.\n *\n * @public\n */\nexport default defineComponent({\n  name: 'AutoProgressBar',\n  props: {\n    /**\n     * A boolean flag indicating if the bar is loading.\n     *\n     * @public\n     */\n    isLoading: {\n      type: Boolean,\n      default: true,\n    },\n    /**\n     * The duration in seconds of the progress bar.\n     *\n     * @public\n     */\n    durationInSeconds: {\n      type: Number,\n      default: 5,\n    },\n  },\n  setup(props) {\n    /**\n     * Computed property to calculate the animation's duration.\n     *\n     * @returns The CSS styles of the animation.\n     *\n     * @internal\n     */\n    const cssStyles = computed<StyleValue>(() => ({\n      animationDuration: `${props.durationInSeconds}s`,\n    }))\n\n    return {\n      cssStyles,\n    }\n  },\n})\n</script>\n\n<style lang=\"css\" scoped>\n.x-progress-bar {\n  display: inline-block;\n  overflow: hidden;\n  background-color: #dbe2e5;\n  border-radius: 4px;\n}\n\n.x-progress-bar-fill {\n  height: 4px;\n  background-color: #283034;\n  animation: slide linear;\n  transform-origin: left;\n}\n\n@keyframes slide {\n  0% {\n    transform: translateX(-100%);\n  }\n  100% {\n    transform: translateX(0);\n  }\n}\n</style>\n\n<docs lang=\"mdx\">\n## Events\n\nThis component emits the following events:\n\n- [`UserClickedARedirection`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts)\n  after the user clicks the redirection button.\n- [`UserClickedAbortARedirection`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts)\n  after the user clicks the abort redirection button.\n\n## See it in action\n\nHere you have a basic example of how the auto progress bar is rendered.\n\n```vue live\n<template>\n  <AutoProgressBar :isLoading=\"isLoading\" :durationInSeconds=\"durationInSeconds\" />\n</template>\n\n<script setup>\nimport { AutoProgressBar } from '@empathyco/x-components'\nconst isLoading = true\nconst durationInSeconds = 100\n</script>\n```\n\n### Play with props\n\nIn this example, the auto progress bar has been set to do an animation for 5 seconds. There is a way\nto cancel the animation by sending the isLoading prop to false.\n\n```vue live\n<template>\n  <AutoProgressBar :durationInSeconds=\"5\" :isLoading=\"true\" />\n</template>\n\n<script setup>\nimport { AutoProgressBar } from '@empathyco/x-components'\n</script>\n```\n</docs>\n"],"names":[],"mappings":";;AAUA;;;;;AAKE;AACF,gBAAe,eAAe,CAAC;AAC7B,IAAA,IAAI,EAAE,iBAAiB;AACvB,IAAA,KAAK,EAAE;AACL;;;;AAIE;AACF,QAAA,SAAS,EAAE;AACT,YAAA,IAAI,EAAE,OAAO;AACb,YAAA,OAAO,EAAE,IAAI;AACd,SAAA;AACD;;;;AAIE;AACF,QAAA,iBAAiB,EAAE;AACjB,YAAA,IAAI,EAAE,MAAM;AACZ,YAAA,OAAO,EAAE,CAAC;AACX,SAAA;AACF,KAAA;AACD,IAAA,KAAK,CAAC,KAAK,EAAA;AACT;;;;;;AAME;AACF,QAAA,MAAM,SAAQ,GAAI,QAAQ,CAAa,OAAO;AAC5C,YAAA,iBAAiB,EAAE,CAAA,EAAG,KAAK,CAAC,iBAAiB,CAAA,CAAA,CAAG;AACjD,SAAA,CAAC,CAAA;QAEF,OAAO;YACL,SAAS;SACX;IACF,CAAC;AACF,CAAA,CAAA;;;;"}
+{"version":3,"file":"auto-progress-bar.vue2.js","sources":["../../../src/components/auto-progress-bar.vue"],"sourcesContent":["<template>\n  <div v-if=\"isLoading\" class=\"xds:progress-bar\" data-test=\"progress-bar\" role=\"progressbar\">\n    <div class=\"xds:progress-bar-fill\" :style=\"cssStyles\" data-test=\"progress-bar-line\" />\n  </div>\n</template>\n\n<script lang=\"ts\">\nimport type { StyleValue } from 'vue'\nimport { computed, defineComponent } from 'vue'\n\n/**\n * The auto progress bar component is useful for displaying a visual indicator of numerical data\n * in a bar shape.\n *\n * @public\n */\nexport default defineComponent({\n  name: 'AutoProgressBar',\n  props: {\n    /**\n     * A boolean flag indicating if the bar is loading.\n     *\n     * @public\n     */\n    isLoading: {\n      type: Boolean,\n      default: true,\n    },\n    /**\n     * The duration in seconds of the progress bar.\n     *\n     * @public\n     */\n    durationInSeconds: {\n      type: Number,\n      default: 5,\n    },\n  },\n  setup(props) {\n    /**\n     * Computed property to calculate the animation's duration.\n     *\n     * @returns The CSS styles of the animation.\n     *\n     * @internal\n     */\n    const cssStyles = computed<StyleValue>(() => ({\n      animationDuration: `${props.durationInSeconds}s`,\n    }))\n\n    return {\n      cssStyles,\n    }\n  },\n})\n</script>\n\n<style lang=\"css\" scoped>\n.x-progress-bar {\n  display: inline-block;\n  overflow: hidden;\n  background-color: #dbe2e5;\n  border-radius: 4px;\n}\n\n.x-progress-bar-fill {\n  height: 4px;\n  background-color: #283034;\n  animation: slide linear;\n  transform-origin: left;\n}\n\n@keyframes slide {\n  0% {\n    transform: translateX(-100%);\n  }\n  100% {\n    transform: translateX(0);\n  }\n}\n</style>\n\n<docs lang=\"mdx\">\n## Events\n\nThis component emits the following events:\n\n- [`UserClickedARedirection`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts)\n  after the user clicks the redirection button.\n- [`UserClickedAbortARedirection`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts)\n  after the user clicks the abort redirection button.\n\n## See it in action\n\nHere you have a basic example of how the auto progress bar is rendered.\n\n```vue live\n<template>\n  <AutoProgressBar :isLoading=\"isLoading\" :durationInSeconds=\"durationInSeconds\" />\n</template>\n\n<script setup>\nimport { AutoProgressBar } from '@empathyco/x-components'\nconst isLoading = true\nconst durationInSeconds = 100\n</script>\n```\n\n### Play with props\n\nIn this example, the auto progress bar has been set to do an animation for 5 seconds. There is a way\nto cancel the animation by sending the isLoading prop to false.\n\n```vue live\n<template>\n  <AutoProgressBar :durationInSeconds=\"5\" :isLoading=\"true\" />\n</template>\n\n<script setup>\nimport { AutoProgressBar } from '@empathyco/x-components'\n</script>\n```\n</docs>\n"],"names":[],"mappings":";;AAUA;;;;;AAKE;AACF,gBAAe,eAAe,CAAC;AAC7B,IAAA,IAAI,EAAE,iBAAiB;AACvB,IAAA,KAAK,EAAE;AACL;;;;AAIE;AACF,QAAA,SAAS,EAAE;AACT,YAAA,IAAI,EAAE,OAAO;AACb,YAAA,OAAO,EAAE,IAAI;AACd,SAAA;AACD;;;;AAIE;AACF,QAAA,iBAAiB,EAAE;AACjB,YAAA,IAAI,EAAE,MAAM;AACZ,YAAA,OAAO,EAAE,CAAC;AACX,SAAA;AACF,KAAA;AACD,IAAA,KAAK,CAAC,KAAK,EAAA;AACT;;;;;;AAME;AACF,QAAA,MAAM,SAAQ,GAAI,QAAQ,CAAa,OAAO;AAC5C,YAAA,iBAAiB,EAAE,CAAA,EAAG,KAAK,CAAC,iBAAiB,CAAA,CAAA,CAAG;AACjD,SAAA,CAAC,CAAA;QAEF,OAAO;YACL,SAAS;SACX;IACF,CAAC;AACF,CAAA,CAAA;;;;"}

package/js/components/base-slider.vue.js.map

@@ -1 +1 @@
-{"version":3,"file":"base-slider.vue.js","sources":["../../../src/components/base-slider.vue"],"sourcesContent":["<template>\n  <div class=\"x-base-slider\">\n    <div ref=\"slider\" :class=\"['x-base-slider__nouislider'].concat(`${contentClass}`)\" />\n    <div class=\"x-base-slider__selected\">\n      <!--\n        @slot Default selected range rendering. This slot will be used by default for rendering\n        the selected range without an specific slot implementation.\n            @binding {number[]} rangeSelected - The selected range values. Min position 0, Max position 1.\n      -->\n      <slot :range-selected=\"rangeSelected\">\n        <p class=\"x-base-slider__selected-min\">\n          <span>min value</span>\n          <span>\n            {{ rangeSelected[0] }}\n          </span>\n        </p>\n        <p class=\"x-base-slider__selected-max\">\n          <span>max value</span>\n          <span>\n            {{ rangeSelected[1] }}\n          </span>\n        </p>\n      </slot>\n    </div>\n  </div>\n</template>\n<script lang=\"ts\">\nimport type { API } from 'nouislider'\nimport type { PropType } from 'vue'\nimport { create } from 'nouislider'\nimport { computed, defineComponent, onMounted, onUnmounted, ref, watch } from 'vue'\n\n/**\n * This component implements a range slider and prints the selected values.\n * It receives a threshold prop to set the limits and uses v-model to get and set\n * the selected values.\n *\n * It makes use of the nouslider library @see https://refreshless.com/nouislider/\n * for the slider implementation.\n *\n */\nexport default defineComponent({\n  name: 'BaseSlider',\n  props: {\n    /** The threshold prop sets the limits for the slider. */\n    threshold: {\n      type: Object as PropType<{ min: number; max: number }>,\n      default: () => ({ min: 0, max: Number.MAX_SAFE_INTEGER }),\n    },\n    /** The modelValue prop sets the initial values for the slider. */\n    modelValue: {\n      type: Object as PropType<{ min: number; max: number }>,\n      required: true,\n    },\n    /** Class to be able to customize slider styles. */\n    contentClass: {\n      type: String,\n      default: '',\n    },\n  },\n  /**\n   * The component emits an event with the selected values whenever\n   * the user changes the slider.\n   */\n  emits: ['update:modelValue'],\n  setup(props, { emit }) {\n    /** The nouislider instance. */\n    let sliderInstance: API\n    /** The nouislider element reference. */\n    const slider = ref<HTMLElement>()\n\n    /** The selected min value. */\n    const minSelected = ref(props.modelValue?.min ?? props.threshold.min)\n    /** The selected max value. */\n    const maxSelected = ref(props.modelValue?.max ?? props.threshold.max)\n\n    /** The selected range as an array. */\n    const rangeSelected = computed(() => [minSelected.value, maxSelected.value])\n    /** The range for the nouislider. */\n    const slideRange = computed(() => ({ min: props.threshold.min, max: props.threshold.max }))\n\n    onMounted(() => {\n      // Create the slider instance\n      sliderInstance = create(slider.value!, {\n        start: rangeSelected.value,\n        range: slideRange.value,\n        step: 1,\n        connect: true,\n        margin: 1,\n      })\n\n      // Update the selected values when the slider update its values\n      sliderInstance.on('update', ([min, max]) => {\n        minSelected.value = Number(min)\n        maxSelected.value = Number(max)\n      })\n\n      // Emits the selected values when the slider values change\n      sliderInstance.on('change', () =>\n        emit('update:modelValue', { min: minSelected.value, max: maxSelected.value }),\n      )\n    })\n\n    onUnmounted(() => {\n      // Waiting to finish the collapse animation before destroying it\n      setTimeout(sliderInstance.destroy.bind(sliderInstance), 600)\n    })\n\n    /**\n     * Watch the threshold prop to update the slider state and emit the selected values.\n     */\n    watch(\n      () => props.threshold,\n      ({ min, max }) => {\n        sliderInstance.updateOptions({ range: slideRange.value, start: [min, max] }, false)\n        emit('update:modelValue', { min, max })\n      },\n    )\n\n    /**\n     * Watch the modelValue prop to update the slider state.\n     *\n     * @remarks It only update the values if the values are corrects. It means,\n     * values within the threshold limits and not equal to the current values.\n     *\n     * @returns Undefined.\n     */\n    watch([() => props.modelValue.min, () => props.modelValue.max], ([min, max]) => {\n      // Check if the values are the same\n      if (min === minSelected.value && max === maxSelected.value) {\n        return\n      }\n\n      // Validate the values\n      const minValidated = min < props.threshold.min ? props.threshold.min : min\n      const maxValidated = max > props.threshold.max ? props.threshold.max : max\n\n      // Update the nouislider values\n      sliderInstance.set([minValidated, maxValidated])\n\n      // Emit the selected values\n      if (minValidated !== min || maxValidated !== max) {\n        emit('update:modelValue', { min: minValidated, max: maxValidated })\n      }\n    })\n\n    return {\n      slider,\n      rangeSelected,\n    }\n  },\n})\n</script>\n<style lang=\"css\">\n@import 'nouislider/dist/nouislider.css';\n/** Customize nouislider styles: https://refreshless.com/nouislider/examples/#section-styling */\n\n.x-base-slider {\n  gap: 16px;\n}\n\n.x-base-slider,\n.x-base-slider__selected-min,\n.x-base-slider__selected-max {\n  display: flex;\n  flex-flow: column nowrap;\n}\n\n.x-base-slider__selected {\n  display: inline-flex;\n}\n\n.x-base-slider__selected-min,\n.x-base-slider__selected-max {\n  flex: 50%;\n}\n\n.x-base-slider__nouislider {\n  margin: 16px 0;\n  padding: 0 16px;\n}\n\n.x-base-slider__nouislider .noUi-handle {\n  box-shadow: none;\n}\n\n.x-base-slider__nouislider .noUi-handle:before,\n.x-base-slider__nouislider .noUi-handle:after {\n  content: none;\n}\n</style>\n<docs lang=\"mdx\">\n## Examples\n\nThis component renders a slider and the selected values. The component needs the threshold for the\nslider, although is not required (If not passed, fallback is min: 0, max: Number.MAX_SAFE_INTEGER ),\nwhich are passed using the `threshold` prop and the selected range, which is passed in using the\nv-model.\n\n### Default usage\n\nIt is required to send the value prop which holds the selected values.\n\n```vue live\n<template>\n  <BaseSlider v-model=\"selectedRange\" />\n</template>\n\n<script setup>\nimport { BaseSlider } from '@empathyco/x-components'\nimport { ref } from 'vue'\nconst selectedRange = ref({ min: 0, max: 1000 })\n</script>\n```\n\n#### With threshold\n\n```vue live\n<template>\n  <BaseSlider v-model=\"selectedRange\" :threshold=\"threshold\" />\n</template>\n\n<script setup>\nimport { BaseSlider } from '@empathyco/x-components'\nimport { ref } from 'vue'\nconst threshold = { min: 0, max: 1000 }\nconst selectedRange = ref({ ...threshold })\n</script>\n```\n\n### Customized usage\n\n#### Overriding the slots\n\nIt is possible to override the default slot to customize the layout for the selected values.\n\n```vue live\n<template>\n  <BaseSlider v-model=\"selectedRange\" :threshold=\"threshold\" v-slot=\"{ rangeSelected }\">\n    <p class=\"x-base-slider__selected-min\">\n      <span>min value</span>\n      <span>\n        {{ rangeSelected[0] }}\n      </span>\n    </p>\n    <p class=\"x-base-slider__selected-max\">\n      <span>max value</span>\n      <span>\n        {{ rangeSelected[1] }}\n      </span>\n    </p>\n  </BaseSlider>\n</template>\n\n<script setup>\nimport { BaseSlider } from '@empathyco/x-components'\nimport { ref } from 'vue'\nconst threshold = { min: 0, max: 1000 }\nconst selectedRange = ref({ ...threshold })\n</script>\n```\n\nIt is also possible to add inputs to complement the slider and allow to change the selected values\nmanually.\n\n```vue live\n<template>\n  <BaseSlider v-model=\"selectedRange\" :threshold=\"threshold\">\n    <input\n      @change=\"selectedRange.min = $event.target?.valueAsNumber || 0\"\n      class=\"x-input\"\n      name=\"min\"\n      type=\"number\"\n      :value=\"selectedRange.min\"\n      :aria-label=\"'min'\"\n    />\n\n    <input\n      @change=\"selectedRange.max = $event.target?.valueAsNumber || 1000000\"\n      style=\"display: block\"\n      class=\"x-input\"\n      name=\"max\"\n      type=\"number\"\n      :value=\"selectedRange.max\"\n      :aria-label=\"'max'\"\n    />\n  </BaseSlider>\n</template>\n\n<script setup>\nimport { BaseSlider } from '@empathyco/x-components'\nimport { ref } from 'vue'\nconst threshold = { min: 0, max: 1000 }\nconst selectedRange = ref({ ...threshold })\n</script>\n```\n</docs>\n"],"names":["_openBlock","_createElementBlock","_createElementVNode","_normalizeClass","_renderSlot","_toDisplayString"],"mappings":";;;;;AACO,MAAA,UAAA,GAAA,EAAA,KAAA,EAAM,eAAA,EAAe;AAEnB,MAAA,UAAA,GAAA,EAAA,KAAA,EAAM,yBAAA,EAAyB;AAO7B,MAAA,UAAA,GAAA,EAAA,KAAA,EAAM,6BAAA,EAA6B;AAMnC,MAAA,UAAA,GAAA,EAAA,KAAA,EAAM,6BAAA,EAA6B;;AAf5C,EAAA,OAAAA,SAAA,EAAA,EAAAC,kBAAA,CAuBM,OAvBN,UAAA,EAuBM;AAAA,IAtBJC,kBAAA;AAAA,MAAqF,KAAA;AAAA,MAAA;AAAA,QAAhF,GAAA,EAAI,QAAA;AAAA,QAAU,KAAA,EAAKC,cAAA,CAAA,CAAA,2BAAA,CAAA,CAAgC,MAAA,CAAM,CAAA,EAAI,IAAA,CAAA,YAAY,CAAA,CAAA,CAAA;AAAA,OAAA;;;;;AAC9E,IAAAD,kBAAA,CAoBM,OApBN,UAAA,EAoBM;AAAA,MAdJE,UAAA,CAaO,IAAA,CAAA,MAAA,EAAA,SAAA,EAAA,EAbA,aAAA,EAAgB,IAAA,CAAA,aAAA,IAAvB,MAaO;AAAA,QAZLF,kBAAA,CAKI,KALJ,UAAA,EAKI;AAAA,UAAA,MAAA,CAAA,CAAA,CAAA,KAAA,MAAA,CAAA,CAAA,CAAA,GAJFA,kBAAA;AAAA,YAAsB,MAAA;AAAA,YAAA,IAAA;AAAA,YAAhB,WAAA;AAAA,YAAS;AAAA;AAAA,WAAA,CAAA;AAAA,UACfA,kBAAA;AAAA,YAEO,MAAA;AAAA,YAAA,IAAA;AAAA,YAAAG,eAAA,CADF,IAAA,CAAA,aAAA,CAAa,CAAA,CAAA,CAAA;AAAA,YAAA;AAAA;AAAA;AAAA,SAAA,CAAA;AAGpB,QAAAH,kBAAA,CAKI,KALJ,UAAA,EAKI;AAAA,UAAA,MAAA,CAAA,CAAA,CAAA,KAAA,MAAA,CAAA,CAAA,CAAA,GAJFA,kBAAA;AAAA,YAAsB,MAAA;AAAA,YAAA,IAAA;AAAA,YAAhB,WAAA;AAAA,YAAS;AAAA;AAAA,WAAA,CAAA;AAAA,UACfA,kBAAA;AAAA,YAEO,MAAA;AAAA,YAAA,IAAA;AAAA,YAAAG,eAAA,CADF,IAAA,CAAA,aAAA,CAAa,CAAA,CAAA,CAAA;AAAA,YAAA;AAAA;AAAA;AAAA,SAAA;;;;;;;;;"}
+{"version":3,"file":"base-slider.vue.js","sources":["../../../src/components/base-slider.vue"],"sourcesContent":["<template>\n  <div class=\"x-base-slider\">\n    <div ref=\"slider\" :class=\"['x-base-slider__nouislider'].concat(`${contentClass}`)\" />\n    <div class=\"x-base-slider__selected\">\n      <!--\n        @slot Default selected range rendering. This slot will be used by default for rendering\n        the selected range without an specific slot implementation.\n            @binding {number[]} rangeSelected - The selected range values. Min position 0, Max position 1.\n      -->\n      <slot :range-selected=\"rangeSelected\">\n        <p class=\"x-base-slider__selected-min\">\n          <span>min value</span>\n          <span>\n            {{ rangeSelected[0] }}\n          </span>\n        </p>\n        <p class=\"x-base-slider__selected-max\">\n          <span>max value</span>\n          <span>\n            {{ rangeSelected[1] }}\n          </span>\n        </p>\n      </slot>\n    </div>\n  </div>\n</template>\n\n<script lang=\"ts\">\nimport type { API } from 'nouislider'\nimport type { PropType } from 'vue'\nimport { create } from 'nouislider'\nimport { computed, defineComponent, onMounted, onUnmounted, ref, watch } from 'vue'\n\n/**\n * This component implements a range slider and prints the selected values.\n * It receives a threshold prop to set the limits and uses v-model to get and set\n * the selected values.\n *\n * It makes use of the nouslider library @see https://refreshless.com/nouislider/\n * for the slider implementation.\n *\n */\nexport default defineComponent({\n  name: 'BaseSlider',\n  props: {\n    /** The threshold prop sets the limits for the slider. */\n    threshold: {\n      type: Object as PropType<{ min: number; max: number }>,\n      default: () => ({ min: 0, max: Number.MAX_SAFE_INTEGER }),\n    },\n    /** The modelValue prop sets the initial values for the slider. */\n    modelValue: {\n      type: Object as PropType<{ min: number; max: number }>,\n      required: true,\n    },\n    /** Class to be able to customize slider styles. */\n    contentClass: {\n      type: String,\n      default: '',\n    },\n  },\n  /**\n   * The component emits an event with the selected values whenever\n   * the user changes the slider.\n   */\n  emits: ['update:modelValue'],\n  setup(props, { emit }) {\n    /** The nouislider instance. */\n    let sliderInstance: API\n    /** The nouislider element reference. */\n    const slider = ref<HTMLElement>()\n\n    /** The selected min value. */\n    const minSelected = ref(props.modelValue?.min ?? props.threshold.min)\n    /** The selected max value. */\n    const maxSelected = ref(props.modelValue?.max ?? props.threshold.max)\n\n    /** The selected range as an array. */\n    const rangeSelected = computed(() => [minSelected.value, maxSelected.value])\n    /** The range for the nouislider. */\n    const slideRange = computed(() => ({ min: props.threshold.min, max: props.threshold.max }))\n\n    onMounted(() => {\n      // Create the slider instance\n      sliderInstance = create(slider.value!, {\n        start: rangeSelected.value,\n        range: slideRange.value,\n        step: 1,\n        connect: true,\n        margin: 1,\n      })\n\n      // Update the selected values when the slider update its values\n      sliderInstance.on('update', ([min, max]) => {\n        minSelected.value = Number(min)\n        maxSelected.value = Number(max)\n      })\n\n      // Emits the selected values when the slider values change\n      sliderInstance.on('change', () =>\n        emit('update:modelValue', { min: minSelected.value, max: maxSelected.value }),\n      )\n    })\n\n    onUnmounted(() => {\n      // Waiting to finish the collapse animation before destroying it\n      setTimeout(sliderInstance.destroy.bind(sliderInstance), 600)\n    })\n\n    /**\n     * Watch the threshold prop to update the slider state and emit the selected values.\n     */\n    watch(\n      () => props.threshold,\n      ({ min, max }) => {\n        sliderInstance.updateOptions({ range: slideRange.value, start: [min, max] }, false)\n        emit('update:modelValue', { min, max })\n      },\n    )\n\n    /**\n     * Watch the modelValue prop to update the slider state.\n     *\n     * @remarks It only update the values if the values are corrects. It means,\n     * values within the threshold limits and not equal to the current values.\n     *\n     * @returns Undefined.\n     */\n    watch([() => props.modelValue.min, () => props.modelValue.max], ([min, max]) => {\n      // Check if the values are the same\n      if (min === minSelected.value && max === maxSelected.value) {\n        return\n      }\n\n      // Validate the values\n      const minValidated = min < props.threshold.min ? props.threshold.min : min\n      const maxValidated = max > props.threshold.max ? props.threshold.max : max\n\n      // Update the nouislider values\n      sliderInstance.set([minValidated, maxValidated])\n\n      // Emit the selected values\n      if (minValidated !== min || maxValidated !== max) {\n        emit('update:modelValue', { min: minValidated, max: maxValidated })\n      }\n    })\n\n    return {\n      slider,\n      rangeSelected,\n    }\n  },\n})\n</script>\n<style lang=\"css\">\n@import 'nouislider/dist/nouislider.css';\n/** Customize nouislider styles: https://refreshless.com/nouislider/examples/#section-styling */\n\n.x-base-slider {\n  gap: 16px;\n}\n\n.x-base-slider,\n.x-base-slider__selected-min,\n.x-base-slider__selected-max {\n  display: flex;\n  flex-flow: column nowrap;\n}\n\n.x-base-slider__selected {\n  display: inline-flex;\n}\n\n.x-base-slider__selected-min,\n.x-base-slider__selected-max {\n  flex: 50%;\n}\n\n.x-base-slider__nouislider {\n  margin: 16px 0;\n  padding: 0 16px;\n}\n\n.x-base-slider__nouislider .noUi-handle {\n  box-shadow: none;\n}\n\n.x-base-slider__nouislider .noUi-handle:before,\n.x-base-slider__nouislider .noUi-handle:after {\n  content: none;\n}\n</style>\n\n<docs lang=\"mdx\">\n## Examples\n\nThis component renders a slider and the selected values. The component needs the threshold for the\nslider, although is not required (If not passed, fallback is min: 0, max: Number.MAX_SAFE_INTEGER ),\nwhich are passed using the `threshold` prop and the selected range, which is passed in using the\nv-model.\n\n### Default usage\n\nIt is required to send the value prop which holds the selected values.\n\n```vue live\n<template>\n  <BaseSlider v-model=\"selectedRange\" />\n</template>\n\n<script setup>\nimport { BaseSlider } from '@empathyco/x-components'\nimport { ref } from 'vue'\nconst selectedRange = ref({ min: 0, max: 1000 })\n</script>\n```\n\n#### With threshold\n\n```vue live\n<template>\n  <BaseSlider v-model=\"selectedRange\" :threshold=\"threshold\" />\n</template>\n\n<script setup>\nimport { BaseSlider } from '@empathyco/x-components'\nimport { ref } from 'vue'\nconst threshold = { min: 0, max: 1000 }\nconst selectedRange = ref({ ...threshold })\n</script>\n```\n\n### Customized usage\n\n#### Overriding the slots\n\nIt is possible to override the default slot to customize the layout for the selected values.\n\n```vue live\n<template>\n  <BaseSlider v-model=\"selectedRange\" :threshold=\"threshold\" v-slot=\"{ rangeSelected }\">\n    <p class=\"x-base-slider__selected-min\">\n      <span>min value</span>\n      <span>\n        {{ rangeSelected[0] }}\n      </span>\n    </p>\n    <p class=\"x-base-slider__selected-max\">\n      <span>max value</span>\n      <span>\n        {{ rangeSelected[1] }}\n      </span>\n    </p>\n  </BaseSlider>\n</template>\n\n<script setup>\nimport { BaseSlider } from '@empathyco/x-components'\nimport { ref } from 'vue'\nconst threshold = { min: 0, max: 1000 }\nconst selectedRange = ref({ ...threshold })\n</script>\n```\n\nIt is also possible to add inputs to complement the slider and allow to change the selected values\nmanually.\n\n```vue live\n<template>\n  <BaseSlider v-model=\"selectedRange\" :threshold=\"threshold\">\n    <input\n      @change=\"selectedRange.min = $event.target?.valueAsNumber || 0\"\n      class=\"xds:input\"\n      name=\"min\"\n      type=\"number\"\n      :value=\"selectedRange.min\"\n      :aria-label=\"'min'\"\n    />\n\n    <input\n      @change=\"selectedRange.max = $event.target?.valueAsNumber || 1000000\"\n      style=\"display: block\"\n      class=\"xds:input\"\n      name=\"max\"\n      type=\"number\"\n      :value=\"selectedRange.max\"\n      :aria-label=\"'max'\"\n    />\n  </BaseSlider>\n</template>\n\n<script setup>\nimport { BaseSlider } from '@empathyco/x-components'\nimport { ref } from 'vue'\nconst threshold = { min: 0, max: 1000 }\nconst selectedRange = ref({ ...threshold })\n</script>\n```\n</docs>\n"],"names":["_openBlock","_createElementBlock","_createElementVNode","_normalizeClass","_renderSlot","_toDisplayString"],"mappings":";;;;;AACO,MAAA,UAAA,GAAA,EAAA,KAAA,EAAM,eAAA,EAAe;AAEnB,MAAA,UAAA,GAAA,EAAA,KAAA,EAAM,yBAAA,EAAyB;AAO7B,MAAA,UAAA,GAAA,EAAA,KAAA,EAAM,6BAAA,EAA6B;AAMnC,MAAA,UAAA,GAAA,EAAA,KAAA,EAAM,6BAAA,EAA6B;;AAf5C,EAAA,OAAAA,SAAA,EAAA,EAAAC,kBAAA,CAuBM,OAvBN,UAAA,EAuBM;AAAA,IAtBJC,kBAAA;AAAA,MAAqF,KAAA;AAAA,MAAA;AAAA,QAAhF,GAAA,EAAI,QAAA;AAAA,QAAU,KAAA,EAAKC,cAAA,CAAA,CAAA,2BAAA,CAAA,CAAgC,MAAA,CAAM,CAAA,EAAI,IAAA,CAAA,YAAY,CAAA,CAAA,CAAA;AAAA,OAAA;;;;;AAC9E,IAAAD,kBAAA,CAoBM,OApBN,UAAA,EAoBM;AAAA,MAdJE,UAAA,CAaO,IAAA,CAAA,MAAA,EAAA,SAAA,EAAA,EAbA,aAAA,EAAgB,IAAA,CAAA,aAAA,IAAvB,MAaO;AAAA,QAZLF,kBAAA,CAKI,KALJ,UAAA,EAKI;AAAA,UAAA,MAAA,CAAA,CAAA,CAAA,KAAA,MAAA,CAAA,CAAA,CAAA,GAJFA,kBAAA;AAAA,YAAsB,MAAA;AAAA,YAAA,IAAA;AAAA,YAAhB,WAAA;AAAA,YAAS;AAAA;AAAA,WAAA,CAAA;AAAA,UACfA,kBAAA;AAAA,YAEO,MAAA;AAAA,YAAA,IAAA;AAAA,YAAAG,eAAA,CADF,IAAA,CAAA,aAAA,CAAa,CAAA,CAAA,CAAA;AAAA,YAAA;AAAA;AAAA;AAAA,SAAA,CAAA;AAGpB,QAAAH,kBAAA,CAKI,KALJ,UAAA,EAKI;AAAA,UAAA,MAAA,CAAA,CAAA,CAAA,KAAA,MAAA,CAAA,CAAA,CAAA,GAJFA,kBAAA;AAAA,YAAsB,MAAA;AAAA,YAAA,IAAA;AAAA,YAAhB,WAAA;AAAA,YAAS;AAAA;AAAA,WAAA,CAAA;AAAA,UACfA,kBAAA;AAAA,YAEO,MAAA;AAAA,YAAA,IAAA;AAAA,YAAAG,eAAA,CADF,IAAA,CAAA,aAAA,CAAa,CAAA,CAAA,CAAA;AAAA,YAAA;AAAA;AAAA;AAAA,SAAA;;;;;;;;;"}

package/js/components/base-slider.vue2.js.map

@@ -1 +1 @@
-{"version":3,"file":"base-slider.vue2.js","sources":["../../../src/components/base-slider.vue"],"sourcesContent":["<template>\n  <div class=\"x-base-slider\">\n    <div ref=\"slider\" :class=\"['x-base-slider__nouislider'].concat(`${contentClass}`)\" />\n    <div class=\"x-base-slider__selected\">\n      <!--\n        @slot Default selected range rendering. This slot will be used by default for rendering\n        the selected range without an specific slot implementation.\n            @binding {number[]} rangeSelected - The selected range values. Min position 0, Max position 1.\n      -->\n      <slot :range-selected=\"rangeSelected\">\n        <p class=\"x-base-slider__selected-min\">\n          <span>min value</span>\n          <span>\n            {{ rangeSelected[0] }}\n          </span>\n        </p>\n        <p class=\"x-base-slider__selected-max\">\n          <span>max value</span>\n          <span>\n            {{ rangeSelected[1] }}\n          </span>\n        </p>\n      </slot>\n    </div>\n  </div>\n</template>\n<script lang=\"ts\">\nimport type { API } from 'nouislider'\nimport type { PropType } from 'vue'\nimport { create } from 'nouislider'\nimport { computed, defineComponent, onMounted, onUnmounted, ref, watch } from 'vue'\n\n/**\n * This component implements a range slider and prints the selected values.\n * It receives a threshold prop to set the limits and uses v-model to get and set\n * the selected values.\n *\n * It makes use of the nouslider library @see https://refreshless.com/nouislider/\n * for the slider implementation.\n *\n */\nexport default defineComponent({\n  name: 'BaseSlider',\n  props: {\n    /** The threshold prop sets the limits for the slider. */\n    threshold: {\n      type: Object as PropType<{ min: number; max: number }>,\n      default: () => ({ min: 0, max: Number.MAX_SAFE_INTEGER }),\n    },\n    /** The modelValue prop sets the initial values for the slider. */\n    modelValue: {\n      type: Object as PropType<{ min: number; max: number }>,\n      required: true,\n    },\n    /** Class to be able to customize slider styles. */\n    contentClass: {\n      type: String,\n      default: '',\n    },\n  },\n  /**\n   * The component emits an event with the selected values whenever\n   * the user changes the slider.\n   */\n  emits: ['update:modelValue'],\n  setup(props, { emit }) {\n    /** The nouislider instance. */\n    let sliderInstance: API\n    /** The nouislider element reference. */\n    const slider = ref<HTMLElement>()\n\n    /** The selected min value. */\n    const minSelected = ref(props.modelValue?.min ?? props.threshold.min)\n    /** The selected max value. */\n    const maxSelected = ref(props.modelValue?.max ?? props.threshold.max)\n\n    /** The selected range as an array. */\n    const rangeSelected = computed(() => [minSelected.value, maxSelected.value])\n    /** The range for the nouislider. */\n    const slideRange = computed(() => ({ min: props.threshold.min, max: props.threshold.max }))\n\n    onMounted(() => {\n      // Create the slider instance\n      sliderInstance = create(slider.value!, {\n        start: rangeSelected.value,\n        range: slideRange.value,\n        step: 1,\n        connect: true,\n        margin: 1,\n      })\n\n      // Update the selected values when the slider update its values\n      sliderInstance.on('update', ([min, max]) => {\n        minSelected.value = Number(min)\n        maxSelected.value = Number(max)\n      })\n\n      // Emits the selected values when the slider values change\n      sliderInstance.on('change', () =>\n        emit('update:modelValue', { min: minSelected.value, max: maxSelected.value }),\n      )\n    })\n\n    onUnmounted(() => {\n      // Waiting to finish the collapse animation before destroying it\n      setTimeout(sliderInstance.destroy.bind(sliderInstance), 600)\n    })\n\n    /**\n     * Watch the threshold prop to update the slider state and emit the selected values.\n     */\n    watch(\n      () => props.threshold,\n      ({ min, max }) => {\n        sliderInstance.updateOptions({ range: slideRange.value, start: [min, max] }, false)\n        emit('update:modelValue', { min, max })\n      },\n    )\n\n    /**\n     * Watch the modelValue prop to update the slider state.\n     *\n     * @remarks It only update the values if the values are corrects. It means,\n     * values within the threshold limits and not equal to the current values.\n     *\n     * @returns Undefined.\n     */\n    watch([() => props.modelValue.min, () => props.modelValue.max], ([min, max]) => {\n      // Check if the values are the same\n      if (min === minSelected.value && max === maxSelected.value) {\n        return\n      }\n\n      // Validate the values\n      const minValidated = min < props.threshold.min ? props.threshold.min : min\n      const maxValidated = max > props.threshold.max ? props.threshold.max : max\n\n      // Update the nouislider values\n      sliderInstance.set([minValidated, maxValidated])\n\n      // Emit the selected values\n      if (minValidated !== min || maxValidated !== max) {\n        emit('update:modelValue', { min: minValidated, max: maxValidated })\n      }\n    })\n\n    return {\n      slider,\n      rangeSelected,\n    }\n  },\n})\n</script>\n<style lang=\"css\">\n@import 'nouislider/dist/nouislider.css';\n/** Customize nouislider styles: https://refreshless.com/nouislider/examples/#section-styling */\n\n.x-base-slider {\n  gap: 16px;\n}\n\n.x-base-slider,\n.x-base-slider__selected-min,\n.x-base-slider__selected-max {\n  display: flex;\n  flex-flow: column nowrap;\n}\n\n.x-base-slider__selected {\n  display: inline-flex;\n}\n\n.x-base-slider__selected-min,\n.x-base-slider__selected-max {\n  flex: 50%;\n}\n\n.x-base-slider__nouislider {\n  margin: 16px 0;\n  padding: 0 16px;\n}\n\n.x-base-slider__nouislider .noUi-handle {\n  box-shadow: none;\n}\n\n.x-base-slider__nouislider .noUi-handle:before,\n.x-base-slider__nouislider .noUi-handle:after {\n  content: none;\n}\n</style>\n<docs lang=\"mdx\">\n## Examples\n\nThis component renders a slider and the selected values. The component needs the threshold for the\nslider, although is not required (If not passed, fallback is min: 0, max: Number.MAX_SAFE_INTEGER ),\nwhich are passed using the `threshold` prop and the selected range, which is passed in using the\nv-model.\n\n### Default usage\n\nIt is required to send the value prop which holds the selected values.\n\n```vue live\n<template>\n  <BaseSlider v-model=\"selectedRange\" />\n</template>\n\n<script setup>\nimport { BaseSlider } from '@empathyco/x-components'\nimport { ref } from 'vue'\nconst selectedRange = ref({ min: 0, max: 1000 })\n</script>\n```\n\n#### With threshold\n\n```vue live\n<template>\n  <BaseSlider v-model=\"selectedRange\" :threshold=\"threshold\" />\n</template>\n\n<script setup>\nimport { BaseSlider } from '@empathyco/x-components'\nimport { ref } from 'vue'\nconst threshold = { min: 0, max: 1000 }\nconst selectedRange = ref({ ...threshold })\n</script>\n```\n\n### Customized usage\n\n#### Overriding the slots\n\nIt is possible to override the default slot to customize the layout for the selected values.\n\n```vue live\n<template>\n  <BaseSlider v-model=\"selectedRange\" :threshold=\"threshold\" v-slot=\"{ rangeSelected }\">\n    <p class=\"x-base-slider__selected-min\">\n      <span>min value</span>\n      <span>\n        {{ rangeSelected[0] }}\n      </span>\n    </p>\n    <p class=\"x-base-slider__selected-max\">\n      <span>max value</span>\n      <span>\n        {{ rangeSelected[1] }}\n      </span>\n    </p>\n  </BaseSlider>\n</template>\n\n<script setup>\nimport { BaseSlider } from '@empathyco/x-components'\nimport { ref } from 'vue'\nconst threshold = { min: 0, max: 1000 }\nconst selectedRange = ref({ ...threshold })\n</script>\n```\n\nIt is also possible to add inputs to complement the slider and allow to change the selected values\nmanually.\n\n```vue live\n<template>\n  <BaseSlider v-model=\"selectedRange\" :threshold=\"threshold\">\n    <input\n      @change=\"selectedRange.min = $event.target?.valueAsNumber || 0\"\n      class=\"x-input\"\n      name=\"min\"\n      type=\"number\"\n      :value=\"selectedRange.min\"\n      :aria-label=\"'min'\"\n    />\n\n    <input\n      @change=\"selectedRange.max = $event.target?.valueAsNumber || 1000000\"\n      style=\"display: block\"\n      class=\"x-input\"\n      name=\"max\"\n      type=\"number\"\n      :value=\"selectedRange.max\"\n      :aria-label=\"'max'\"\n    />\n  </BaseSlider>\n</template>\n\n<script setup>\nimport { BaseSlider } from '@empathyco/x-components'\nimport { ref } from 'vue'\nconst threshold = { min: 0, max: 1000 }\nconst selectedRange = ref({ ...threshold })\n</script>\n```\n</docs>\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"base-slider.vue2.js","sources":["../../../src/components/base-slider.vue"],"sourcesContent":["<template>\n  <div class=\"x-base-slider\">\n    <div ref=\"slider\" :class=\"['x-base-slider__nouislider'].concat(`${contentClass}`)\" />\n    <div class=\"x-base-slider__selected\">\n      <!--\n        @slot Default selected range rendering. This slot will be used by default for rendering\n        the selected range without an specific slot implementation.\n            @binding {number[]} rangeSelected - The selected range values. Min position 0, Max position 1.\n      -->\n      <slot :range-selected=\"rangeSelected\">\n        <p class=\"x-base-slider__selected-min\">\n          <span>min value</span>\n          <span>\n            {{ rangeSelected[0] }}\n          </span>\n        </p>\n        <p class=\"x-base-slider__selected-max\">\n          <span>max value</span>\n          <span>\n            {{ rangeSelected[1] }}\n          </span>\n        </p>\n      </slot>\n    </div>\n  </div>\n</template>\n\n<script lang=\"ts\">\nimport type { API } from 'nouislider'\nimport type { PropType } from 'vue'\nimport { create } from 'nouislider'\nimport { computed, defineComponent, onMounted, onUnmounted, ref, watch } from 'vue'\n\n/**\n * This component implements a range slider and prints the selected values.\n * It receives a threshold prop to set the limits and uses v-model to get and set\n * the selected values.\n *\n * It makes use of the nouslider library @see https://refreshless.com/nouislider/\n * for the slider implementation.\n *\n */\nexport default defineComponent({\n  name: 'BaseSlider',\n  props: {\n    /** The threshold prop sets the limits for the slider. */\n    threshold: {\n      type: Object as PropType<{ min: number; max: number }>,\n      default: () => ({ min: 0, max: Number.MAX_SAFE_INTEGER }),\n    },\n    /** The modelValue prop sets the initial values for the slider. */\n    modelValue: {\n      type: Object as PropType<{ min: number; max: number }>,\n      required: true,\n    },\n    /** Class to be able to customize slider styles. */\n    contentClass: {\n      type: String,\n      default: '',\n    },\n  },\n  /**\n   * The component emits an event with the selected values whenever\n   * the user changes the slider.\n   */\n  emits: ['update:modelValue'],\n  setup(props, { emit }) {\n    /** The nouislider instance. */\n    let sliderInstance: API\n    /** The nouislider element reference. */\n    const slider = ref<HTMLElement>()\n\n    /** The selected min value. */\n    const minSelected = ref(props.modelValue?.min ?? props.threshold.min)\n    /** The selected max value. */\n    const maxSelected = ref(props.modelValue?.max ?? props.threshold.max)\n\n    /** The selected range as an array. */\n    const rangeSelected = computed(() => [minSelected.value, maxSelected.value])\n    /** The range for the nouislider. */\n    const slideRange = computed(() => ({ min: props.threshold.min, max: props.threshold.max }))\n\n    onMounted(() => {\n      // Create the slider instance\n      sliderInstance = create(slider.value!, {\n        start: rangeSelected.value,\n        range: slideRange.value,\n        step: 1,\n        connect: true,\n        margin: 1,\n      })\n\n      // Update the selected values when the slider update its values\n      sliderInstance.on('update', ([min, max]) => {\n        minSelected.value = Number(min)\n        maxSelected.value = Number(max)\n      })\n\n      // Emits the selected values when the slider values change\n      sliderInstance.on('change', () =>\n        emit('update:modelValue', { min: minSelected.value, max: maxSelected.value }),\n      )\n    })\n\n    onUnmounted(() => {\n      // Waiting to finish the collapse animation before destroying it\n      setTimeout(sliderInstance.destroy.bind(sliderInstance), 600)\n    })\n\n    /**\n     * Watch the threshold prop to update the slider state and emit the selected values.\n     */\n    watch(\n      () => props.threshold,\n      ({ min, max }) => {\n        sliderInstance.updateOptions({ range: slideRange.value, start: [min, max] }, false)\n        emit('update:modelValue', { min, max })\n      },\n    )\n\n    /**\n     * Watch the modelValue prop to update the slider state.\n     *\n     * @remarks It only update the values if the values are corrects. It means,\n     * values within the threshold limits and not equal to the current values.\n     *\n     * @returns Undefined.\n     */\n    watch([() => props.modelValue.min, () => props.modelValue.max], ([min, max]) => {\n      // Check if the values are the same\n      if (min === minSelected.value && max === maxSelected.value) {\n        return\n      }\n\n      // Validate the values\n      const minValidated = min < props.threshold.min ? props.threshold.min : min\n      const maxValidated = max > props.threshold.max ? props.threshold.max : max\n\n      // Update the nouislider values\n      sliderInstance.set([minValidated, maxValidated])\n\n      // Emit the selected values\n      if (minValidated !== min || maxValidated !== max) {\n        emit('update:modelValue', { min: minValidated, max: maxValidated })\n      }\n    })\n\n    return {\n      slider,\n      rangeSelected,\n    }\n  },\n})\n</script>\n<style lang=\"css\">\n@import 'nouislider/dist/nouislider.css';\n/** Customize nouislider styles: https://refreshless.com/nouislider/examples/#section-styling */\n\n.x-base-slider {\n  gap: 16px;\n}\n\n.x-base-slider,\n.x-base-slider__selected-min,\n.x-base-slider__selected-max {\n  display: flex;\n  flex-flow: column nowrap;\n}\n\n.x-base-slider__selected {\n  display: inline-flex;\n}\n\n.x-base-slider__selected-min,\n.x-base-slider__selected-max {\n  flex: 50%;\n}\n\n.x-base-slider__nouislider {\n  margin: 16px 0;\n  padding: 0 16px;\n}\n\n.x-base-slider__nouislider .noUi-handle {\n  box-shadow: none;\n}\n\n.x-base-slider__nouislider .noUi-handle:before,\n.x-base-slider__nouislider .noUi-handle:after {\n  content: none;\n}\n</style>\n\n<docs lang=\"mdx\">\n## Examples\n\nThis component renders a slider and the selected values. The component needs the threshold for the\nslider, although is not required (If not passed, fallback is min: 0, max: Number.MAX_SAFE_INTEGER ),\nwhich are passed using the `threshold` prop and the selected range, which is passed in using the\nv-model.\n\n### Default usage\n\nIt is required to send the value prop which holds the selected values.\n\n```vue live\n<template>\n  <BaseSlider v-model=\"selectedRange\" />\n</template>\n\n<script setup>\nimport { BaseSlider } from '@empathyco/x-components'\nimport { ref } from 'vue'\nconst selectedRange = ref({ min: 0, max: 1000 })\n</script>\n```\n\n#### With threshold\n\n```vue live\n<template>\n  <BaseSlider v-model=\"selectedRange\" :threshold=\"threshold\" />\n</template>\n\n<script setup>\nimport { BaseSlider } from '@empathyco/x-components'\nimport { ref } from 'vue'\nconst threshold = { min: 0, max: 1000 }\nconst selectedRange = ref({ ...threshold })\n</script>\n```\n\n### Customized usage\n\n#### Overriding the slots\n\nIt is possible to override the default slot to customize the layout for the selected values.\n\n```vue live\n<template>\n  <BaseSlider v-model=\"selectedRange\" :threshold=\"threshold\" v-slot=\"{ rangeSelected }\">\n    <p class=\"x-base-slider__selected-min\">\n      <span>min value</span>\n      <span>\n        {{ rangeSelected[0] }}\n      </span>\n    </p>\n    <p class=\"x-base-slider__selected-max\">\n      <span>max value</span>\n      <span>\n        {{ rangeSelected[1] }}\n      </span>\n    </p>\n  </BaseSlider>\n</template>\n\n<script setup>\nimport { BaseSlider } from '@empathyco/x-components'\nimport { ref } from 'vue'\nconst threshold = { min: 0, max: 1000 }\nconst selectedRange = ref({ ...threshold })\n</script>\n```\n\nIt is also possible to add inputs to complement the slider and allow to change the selected values\nmanually.\n\n```vue live\n<template>\n  <BaseSlider v-model=\"selectedRange\" :threshold=\"threshold\">\n    <input\n      @change=\"selectedRange.min = $event.target?.valueAsNumber || 0\"\n      class=\"xds:input\"\n      name=\"min\"\n      type=\"number\"\n      :value=\"selectedRange.min\"\n      :aria-label=\"'min'\"\n    />\n\n    <input\n      @change=\"selectedRange.max = $event.target?.valueAsNumber || 1000000\"\n      style=\"display: block\"\n      class=\"xds:input\"\n      name=\"max\"\n      type=\"number\"\n      :value=\"selectedRange.max\"\n      :aria-label=\"'max'\"\n    />\n  </BaseSlider>\n</template>\n\n<script setup>\nimport { BaseSlider } from '@empathyco/x-components'\nimport { ref } from 'vue'\nconst threshold = { min: 0, max: 1000 }\nconst selectedRange = ref({ ...threshold })\n</script>\n```\n</docs>\n"],"names":[],"mappings":"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"}

package/js/components/base-slider.vue3.js

@@ -1,6 +1,6 @@
 import injectCss from '../../tools/inject-css.js';
 
-var css = ".noUi-target,.noUi-target *{-webkit-touch-callout:none;-webkit-tap-highlight-color:rgba(0,0,0,0);box-sizing:border-box;touch-action:none;-webkit-user-select:none;user-select:none}.noUi-target{position:relative}.noUi-base,.noUi-connects{height:100%;position:relative;width:100%;z-index:1}.noUi-connects{overflow:hidden;z-index:0}.noUi-connect,.noUi-origin{height:100%;position:absolute;right:0;top:0;-ms-transform-origin:0 0;-webkit-transform-origin:0 0;transform-origin:0 0;-webkit-transform-style:preserve-3d;transform-style:flat;width:100%;will-change:transform;z-index:1}.noUi-txt-dir-rtl.noUi-horizontal .noUi-origin{left:0;right:auto}.noUi-vertical .noUi-origin{top:-100%;width:0}.noUi-horizontal .noUi-origin{height:0}.noUi-handle{backface-visibility:hidden;position:absolute}.noUi-touch-area{height:100%;width:100%}.noUi-state-tap .noUi-connect,.noUi-state-tap .noUi-origin{transition:transform .3s}.noUi-state-drag *{cursor:inherit!important}.noUi-horizontal{height:18px}.noUi-horizontal .noUi-handle{height:28px;right:-17px;top:-6px;width:34px}.noUi-vertical{width:18px}.noUi-vertical .noUi-handle{bottom:-17px;height:34px;right:-6px;width:28px}.noUi-txt-dir-rtl.noUi-horizontal .noUi-handle{left:-17px;right:auto}.noUi-target{background:#fafafa;border:1px solid #d3d3d3;border-radius:4px;box-shadow:inset 0 1px 1px #f0f0f0,0 3px 6px -5px #bbb}.noUi-connects{border-radius:3px}.noUi-connect{background:#3fb8af}.noUi-draggable{cursor:ew-resize}.noUi-vertical .noUi-draggable{cursor:ns-resize}.noUi-handle{background:#fff;border:1px solid #d9d9d9;border-radius:3px;box-shadow:inset 0 0 1px #fff,inset 0 1px 7px #ebebeb,0 3px 6px -3px #bbb;cursor:default}.noUi-active{box-shadow:inset 0 0 1px #fff,inset 0 1px 7px #ddd,0 3px 6px -3px #bbb}.noUi-handle:after,.noUi-handle:before{background:#e8e7e6;content:\"\";display:block;height:14px;left:14px;position:absolute;top:6px;width:1px}.noUi-handle:after{left:17px}.noUi-vertical .noUi-handle:after,.noUi-vertical .noUi-handle:before{height:1px;left:6px;top:14px;width:14px}.noUi-vertical .noUi-handle:after{top:17px}[disabled] .noUi-connect{background:#b8b8b8}[disabled] .noUi-handle,[disabled].noUi-handle,[disabled].noUi-target{cursor:not-allowed}.noUi-pips,.noUi-pips *{box-sizing:border-box}.noUi-pips{color:#999;position:absolute}.noUi-value{position:absolute;text-align:center;white-space:nowrap}.noUi-value-sub{color:#ccc;font-size:10px}.noUi-marker{background:#ccc;position:absolute}.noUi-marker-large,.noUi-marker-sub{background:#aaa}.noUi-pips-horizontal{height:80px;left:0;padding:10px 0;top:100%;width:100%}.noUi-value-horizontal{transform:translate(-50%,50%)}.noUi-rtl .noUi-value-horizontal{transform:translate(50%,50%)}.noUi-marker-horizontal.noUi-marker{height:5px;margin-left:-1px;width:2px}.noUi-marker-horizontal.noUi-marker-sub{height:10px}.noUi-marker-horizontal.noUi-marker-large{height:15px}.noUi-pips-vertical{height:100%;left:100%;padding:0 10px;top:0}.noUi-value-vertical{padding-left:25px;transform:translateY(-50%)}.noUi-rtl .noUi-value-vertical{transform:translateY(50%)}.noUi-marker-vertical.noUi-marker{height:2px;margin-top:-1px;width:5px}.noUi-marker-vertical.noUi-marker-sub{width:10px}.noUi-marker-vertical.noUi-marker-large{width:15px}.noUi-tooltip{background:#fff;border:1px solid #d9d9d9;border-radius:3px;color:#000;display:block;padding:5px;position:absolute;text-align:center;white-space:nowrap}.noUi-horizontal .noUi-tooltip{bottom:120%;left:50%;transform:translate(-50%)}.noUi-vertical .noUi-tooltip{right:120%;top:50%;transform:translateY(-50%)}.noUi-horizontal .noUi-origin>.noUi-tooltip{bottom:10px;left:auto;transform:translate(50%)}.noUi-vertical .noUi-origin>.noUi-tooltip{right:28px;top:auto;transform:translateY(-18px)}.x-base-slider{gap:16px}.x-base-slider,.x-base-slider__selected-max,.x-base-slider__selected-min{display:flex;flex-flow:column nowrap}.x-base-slider__selected{display:inline-flex}.x-base-slider__selected-max,.x-base-slider__selected-min{flex:50%}.x-base-slider__nouislider{margin:16px 0;padding:0 16px}.x-base-slider__nouislider .noUi-handle{box-shadow:none}.x-base-slider__nouislider .noUi-handle:after,.x-base-slider__nouislider .noUi-handle:before{content:none}";
+var css = ".noUi-target,.noUi-target *{-webkit-touch-callout:none;-webkit-tap-highlight-color:rgba(0,0,0,0);-moz-box-sizing:border-box;box-sizing:border-box;-ms-touch-action:none;touch-action:none;-webkit-user-select:none;-ms-user-select:none;-moz-user-select:none;user-select:none}.noUi-target{position:relative}.noUi-base,.noUi-connects{height:100%;position:relative;width:100%;z-index:1}.noUi-connects{overflow:hidden;z-index:0}.noUi-connect,.noUi-origin{height:100%;position:absolute;right:0;top:0;-ms-transform-origin:0 0;-webkit-transform-origin:0 0;transform-origin:0 0;-webkit-transform-style:preserve-3d;transform-style:flat;width:100%;will-change:transform;z-index:1}.noUi-txt-dir-rtl.noUi-horizontal .noUi-origin{left:0;right:auto}.noUi-vertical .noUi-origin{top:-100%;width:0}.noUi-horizontal .noUi-origin{height:0}.noUi-handle{-webkit-backface-visibility:hidden;backface-visibility:hidden;position:absolute}.noUi-touch-area{height:100%;width:100%}.noUi-state-tap .noUi-connect,.noUi-state-tap .noUi-origin{-webkit-transition:transform .3s;transition:transform .3s}.noUi-state-drag *{cursor:inherit!important}.noUi-horizontal{height:18px}.noUi-horizontal .noUi-handle{height:28px;right:-17px;top:-6px;width:34px}.noUi-vertical{width:18px}.noUi-vertical .noUi-handle{bottom:-17px;height:34px;right:-6px;width:28px}.noUi-txt-dir-rtl.noUi-horizontal .noUi-handle{left:-17px;right:auto}.noUi-target{background:#fafafa;border:1px solid #d3d3d3;border-radius:4px;box-shadow:inset 0 1px 1px #f0f0f0,0 3px 6px -5px #bbb}.noUi-connects{border-radius:3px}.noUi-connect{background:#3fb8af}.noUi-draggable{cursor:ew-resize}.noUi-vertical .noUi-draggable{cursor:ns-resize}.noUi-handle{background:#fff;border:1px solid #d9d9d9;border-radius:3px;box-shadow:inset 0 0 1px #fff,inset 0 1px 7px #ebebeb,0 3px 6px -3px #bbb;cursor:default}.noUi-active{box-shadow:inset 0 0 1px #fff,inset 0 1px 7px #ddd,0 3px 6px -3px #bbb}.noUi-handle:after,.noUi-handle:before{background:#e8e7e6;content:\"\";display:block;height:14px;left:14px;position:absolute;top:6px;width:1px}.noUi-handle:after{left:17px}.noUi-vertical .noUi-handle:after,.noUi-vertical .noUi-handle:before{height:1px;left:6px;top:14px;width:14px}.noUi-vertical .noUi-handle:after{top:17px}[disabled] .noUi-connect{background:#b8b8b8}[disabled] .noUi-handle,[disabled].noUi-handle,[disabled].noUi-target{cursor:not-allowed}.noUi-pips,.noUi-pips *{-moz-box-sizing:border-box;box-sizing:border-box}.noUi-pips{color:#999;position:absolute}.noUi-value{position:absolute;text-align:center;white-space:nowrap}.noUi-value-sub{color:#ccc;font-size:10px}.noUi-marker{background:#ccc;position:absolute}.noUi-marker-large,.noUi-marker-sub{background:#aaa}.noUi-pips-horizontal{height:80px;left:0;padding:10px 0;top:100%;width:100%}.noUi-value-horizontal{-webkit-transform:translate(-50%,50%);transform:translate(-50%,50%)}.noUi-rtl .noUi-value-horizontal{-webkit-transform:translate(50%,50%);transform:translate(50%,50%)}.noUi-marker-horizontal.noUi-marker{height:5px;margin-left:-1px;width:2px}.noUi-marker-horizontal.noUi-marker-sub{height:10px}.noUi-marker-horizontal.noUi-marker-large{height:15px}.noUi-pips-vertical{height:100%;left:100%;padding:0 10px;top:0}.noUi-value-vertical{padding-left:25px;-webkit-transform:translateY(-50%);transform:translateY(-50%)}.noUi-rtl .noUi-value-vertical{-webkit-transform:translateY(50%);transform:translateY(50%)}.noUi-marker-vertical.noUi-marker{height:2px;margin-top:-1px;width:5px}.noUi-marker-vertical.noUi-marker-sub{width:10px}.noUi-marker-vertical.noUi-marker-large{width:15px}.noUi-tooltip{background:#fff;border:1px solid #d9d9d9;border-radius:3px;color:#000;display:block;padding:5px;position:absolute;text-align:center;white-space:nowrap}.noUi-horizontal .noUi-tooltip{bottom:120%;left:50%;-webkit-transform:translate(-50%);transform:translate(-50%)}.noUi-vertical .noUi-tooltip{right:120%;top:50%;-webkit-transform:translateY(-50%);transform:translateY(-50%)}.noUi-horizontal .noUi-origin>.noUi-tooltip{bottom:10px;left:auto;-webkit-transform:translate(50%);transform:translate(50%)}.noUi-vertical .noUi-origin>.noUi-tooltip{right:28px;top:auto;-webkit-transform:translateY(-18px);transform:translateY(-18px)}.x-base-slider{gap:16px}.x-base-slider,.x-base-slider__selected-max,.x-base-slider__selected-min{display:flex;flex-flow:column nowrap}.x-base-slider__selected{display:inline-flex}.x-base-slider__selected-max,.x-base-slider__selected-min{flex:50%}.x-base-slider__nouislider{margin:16px 0;padding:0 16px}.x-base-slider__nouislider .noUi-handle{box-shadow:none}.x-base-slider__nouislider .noUi-handle:after,.x-base-slider__nouislider .noUi-handle:before{content:none}";
 injectCss(css);
 
 export { css };

package/js/components/base-switch.vue.js.map

@@ -1 +1 @@
-{"version":3,"file":"base-switch.vue.js","sources":["../../../src/components/base-switch.vue"],"sourcesContent":["<template>\n  <button\n    :aria-checked=\"modelValue || undefined\"\n    :class=\"cssClasses\"\n    class=\"x-switch\"\n    role=\"switch\"\n    @click=\"toggle\"\n  >\n    <div class=\"x-switch__handle\" />\n  </button>\n</template>\n\n<script lang=\"ts\">\nimport type { VueCSSClasses } from '../utils/types'\nimport { computed, defineComponent } from 'vue'\n\n/**\n * Basic switch component to handle boolean values. This component receives\n * its selected state using a prop, and emits a Vue event whenever the user\n * clicks it.\n *\n * @public\n */\n\nexport default defineComponent({\n  name: 'BaseSwitch',\n  /**\n   * The selected value of the switch.\n   *\n   * @public\n   */\n  props: {\n    modelValue: {\n      type: Boolean,\n      default: false,\n    },\n  },\n  emits: ['update:modelValue'],\n  setup(props, { emit }) {\n    /**\n     * Dynamic CSS classes to add to the switch component\n     * depending on its internal state.\n     *\n     * @returns A boolean dictionary with dynamic CSS classes.\n     * @internal\n     */\n    const cssClasses = computed<VueCSSClasses>(() => ({\n      'x-switch--is-selected x-selected': props.modelValue,\n    }))\n\n    /**\n     * Emits an event with the new value of the switch.\n     *\n     * @internal\n     */\n    const toggle = (): void => {\n      const newValue = !props.modelValue\n      emit('update:modelValue', newValue)\n    }\n\n    return {\n      cssClasses,\n      toggle,\n    }\n  },\n})\n</script>\n\n<style lang=\"css\" scoped>\n.x-switch {\n  --x-switch-height: 16px;\n  --x-switch-width: calc(2 * (var(--x-switch-height)) + 2 * var(--x-switch-padding));\n  --x-switch-background: #b3b3b3;\n  --x-switch-padding: 2px;\n  --x-switch-handle-size: var(--x-switch-height);\n  box-sizing: content-box;\n  height: var(--x-switch-height);\n  padding: var(--x-switch-padding);\n  border-radius: 99999px;\n  background: var(--x-switch-background);\n  width: var(--x-switch-width);\n  border: none;\n  transition: 0.25s ease-out background-color;\n  cursor: pointer;\n}\n\n.x-switch__handle {\n  background: #ffffff;\n  border-radius: 50%;\n  height: var(--x-switch-handle-size);\n  width: var(--x-switch-handle-size);\n  transition: 0.25s ease-out transform;\n  transform: translateX(var(--x-switch-translate-x, 0%));\n}\n\n.x-switch--is-selected {\n  --x-switch-translate-x: calc(var(--x-switch-padding) + var(--x-switch-width) / 2);\n  --x-switch-background: #1a1a1a;\n}\n\n.x-switch--sm {\n  --x-switch-height: 12px;\n}\n\n.x-switch--lg {\n  --x-switch-height: 24px;\n}\n</style>\n\n<docs lang=\"mdx\">\n## Events\n\nThis component emits no events.\n\n## See it in action\n\nHere you have a basic example of how the switch is rendered.\n\n_Try clicking it to see how it changes its state_\n\n```vue live\n<template>\n  <BaseSwitch v-model=\"value\" />\n</template>\n\n<script setup>\nimport { BaseSwitch } from '@empathyco/x-components'\nimport { ref } from 'vue'\nconst value = ref(false)\n</script>\n```\n\nThe switch component also supports using the `v-model` directive, to automatically handle its state\nchange:\n\n```vue live\n<template>\n  <BaseSwitch v-model=\"value\" />\n</template>\n\n<script setup>\nimport { BaseSwitch } from '@empathyco/x-components'\nimport { ref } from 'vue'\nconst value = ref(false)\n</script>\n```\n</docs>\n"],"names":["_createElementBlock","_normalizeClass","_createElementVNode"],"mappings":";;;;;;;sBACEA,kBAAA,CAQS,QAAA,EAAA;AAAA,IAPN,gBAAc,IAAA,CAAA,UAAA,IAAc,MAAA;AAAA,IAC5B,KAAA,EAAKC,cAAA,CAAA,CAAE,IAAA,CAAA,UAAA,EACF,UAAU,CAAA,CAAA;AAAA,IAChB,IAAA,EAAK,QAAA;AAAA,IACJ,SAAK,MAAA,CAAA,CAAA,CAAA,KAAA,MAAA,CAAA,CAAA,CAAA,GAAA,CAAA,GAAA,IAAA,KAAE,IAAA,CAAA,MAAA,IAAA,IAAA,CAAA,MAAA,CAAA,GAAA,IAAA,CAAA;AAAA,GAAA,EAAA,CAAA,GAAA,MAAA,CAAA,CAAA,CAAA,KAAA,MAAA,CAAA,CAAA,CAAA,GAAA;AAER,IAAAC,kBAAA;AAAA,MAAgC,KAAA;AAAA,MAAA,EAA3B,OAAM,kBAAA,EAAkB;AAAA,MAAA,IAAA;AAAA,MAAA;AAAA;AAAA;AAAA,GAAA,CAAA,CAAA,EAAA,EAAA,EAAA,UAAA,CAAA;;;;;;"}
+{"version":3,"file":"base-switch.vue.js","sources":["../../../src/components/base-switch.vue"],"sourcesContent":["<template>\n  <button\n    :aria-checked=\"modelValue || undefined\"\n    :class=\"cssClasses\"\n    class=\"x-switch\"\n    role=\"switch\"\n    @click=\"toggle\"\n  >\n    <div class=\"x-switch__handle\" />\n  </button>\n</template>\n\n<script lang=\"ts\">\nimport type { VueCSSClasses } from '../utils/types'\nimport { computed, defineComponent } from 'vue'\n\n/**\n * Basic switch component to handle boolean values. This component receives\n * its selected state using a prop, and emits a Vue event whenever the user\n * clicks it.\n *\n * @public\n */\n\nexport default defineComponent({\n  name: 'BaseSwitch',\n  /**\n   * The selected value of the switch.\n   *\n   * @public\n   */\n  props: {\n    modelValue: {\n      type: Boolean,\n      default: false,\n    },\n  },\n  emits: ['update:modelValue'],\n  setup(props, { emit }) {\n    /**\n     * Dynamic CSS classes to add to the switch component\n     * depending on its internal state.\n     *\n     * @returns A boolean dictionary with dynamic CSS classes.\n     * @internal\n     */\n    const cssClasses = computed<VueCSSClasses>(() => ({\n      'x-switch--is-selected xds:selected': props.modelValue,\n    }))\n\n    /**\n     * Emits an event with the new value of the switch.\n     *\n     * @internal\n     */\n    const toggle = (): void => {\n      const newValue = !props.modelValue\n      emit('update:modelValue', newValue)\n    }\n\n    return {\n      cssClasses,\n      toggle,\n    }\n  },\n})\n</script>\n\n<style lang=\"css\" scoped>\n.x-switch {\n  --x-switch-height: 16px;\n  --x-switch-width: calc(2 * (var(--x-switch-height)) + 2 * var(--x-switch-padding));\n  --x-switch-background: #b3b3b3;\n  --x-switch-padding: 2px;\n  --x-switch-handle-size: var(--x-switch-height);\n  box-sizing: content-box;\n  height: var(--x-switch-height);\n  padding: var(--x-switch-padding);\n  border-radius: 99999px;\n  background: var(--x-switch-background);\n  width: var(--x-switch-width);\n  border: none;\n  transition: 0.25s ease-out background-color;\n  cursor: pointer;\n}\n\n.x-switch__handle {\n  background: #ffffff;\n  border-radius: 50%;\n  height: var(--x-switch-handle-size);\n  width: var(--x-switch-handle-size);\n  transition: 0.25s ease-out transform;\n  transform: translateX(var(--x-switch-translate-x, 0%));\n}\n\n.x-switch--is-selected {\n  --x-switch-translate-x: calc(var(--x-switch-padding) + var(--x-switch-width) / 2);\n  --x-switch-background: #1a1a1a;\n}\n\n.x-switch--sm {\n  --x-switch-height: 12px;\n}\n\n.x-switch--lg {\n  --x-switch-height: 24px;\n}\n</style>\n\n<docs lang=\"mdx\">\n## Events\n\nThis component emits no events.\n\n## See it in action\n\nHere you have a basic example of how the switch is rendered.\n\n_Try clicking it to see how it changes its state_\n\n```vue live\n<template>\n  <BaseSwitch v-model=\"value\" />\n</template>\n\n<script setup>\nimport { BaseSwitch } from '@empathyco/x-components'\nimport { ref } from 'vue'\nconst value = ref(false)\n</script>\n```\n\nThe switch component also supports using the `v-model` directive, to automatically handle its state\nchange:\n\n```vue live\n<template>\n  <BaseSwitch v-model=\"value\" />\n</template>\n\n<script setup>\nimport { BaseSwitch } from '@empathyco/x-components'\nimport { ref } from 'vue'\nconst value = ref(false)\n</script>\n```\n</docs>\n"],"names":["_createElementBlock","_normalizeClass","_createElementVNode"],"mappings":";;;;;;;sBACEA,kBAAA,CAQS,QAAA,EAAA;AAAA,IAPN,gBAAc,IAAA,CAAA,UAAA,IAAc,MAAA;AAAA,IAC5B,KAAA,EAAKC,cAAA,CAAA,CAAE,IAAA,CAAA,UAAA,EACF,UAAU,CAAA,CAAA;AAAA,IAChB,IAAA,EAAK,QAAA;AAAA,IACJ,SAAK,MAAA,CAAA,CAAA,CAAA,KAAA,MAAA,CAAA,CAAA,CAAA,GAAA,CAAA,GAAA,IAAA,KAAE,IAAA,CAAA,MAAA,IAAA,IAAA,CAAA,MAAA,CAAA,GAAA,IAAA,CAAA;AAAA,GAAA,EAAA,CAAA,GAAA,MAAA,CAAA,CAAA,CAAA,KAAA,MAAA,CAAA,CAAA,CAAA,GAAA;AAER,IAAAC,kBAAA;AAAA,MAAgC,KAAA;AAAA,MAAA,EAA3B,OAAM,kBAAA,EAAkB;AAAA,MAAA,IAAA;AAAA,MAAA;AAAA;AAAA;AAAA,GAAA,CAAA,CAAA,EAAA,EAAA,EAAA,UAAA,CAAA;;;;;;"}

package/js/components/base-switch.vue2.js

@@ -30,7 +30,7 @@ var _sfc_main = defineComponent({
          * @internal
          */
         const cssClasses = computed(() => ({
-            'x-switch--is-selected x-selected': props.modelValue,
+            'x-switch--is-selected xds:selected': props.modelValue,
         }));
         /**
          * Emits an event with the new value of the switch.

package/js/components/base-switch.vue2.js.map

@@ -1 +1 @@
-{"version":3,"file":"base-switch.vue2.js","sources":["../../../src/components/base-switch.vue"],"sourcesContent":["<template>\n  <button\n    :aria-checked=\"modelValue || undefined\"\n    :class=\"cssClasses\"\n    class=\"x-switch\"\n    role=\"switch\"\n    @click=\"toggle\"\n  >\n    <div class=\"x-switch__handle\" />\n  </button>\n</template>\n\n<script lang=\"ts\">\nimport type { VueCSSClasses } from '../utils/types'\nimport { computed, defineComponent } from 'vue'\n\n/**\n * Basic switch component to handle boolean values. This component receives\n * its selected state using a prop, and emits a Vue event whenever the user\n * clicks it.\n *\n * @public\n */\n\nexport default defineComponent({\n  name: 'BaseSwitch',\n  /**\n   * The selected value of the switch.\n   *\n   * @public\n   */\n  props: {\n    modelValue: {\n      type: Boolean,\n      default: false,\n    },\n  },\n  emits: ['update:modelValue'],\n  setup(props, { emit }) {\n    /**\n     * Dynamic CSS classes to add to the switch component\n     * depending on its internal state.\n     *\n     * @returns A boolean dictionary with dynamic CSS classes.\n     * @internal\n     */\n    const cssClasses = computed<VueCSSClasses>(() => ({\n      'x-switch--is-selected x-selected': props.modelValue,\n    }))\n\n    /**\n     * Emits an event with the new value of the switch.\n     *\n     * @internal\n     */\n    const toggle = (): void => {\n      const newValue = !props.modelValue\n      emit('update:modelValue', newValue)\n    }\n\n    return {\n      cssClasses,\n      toggle,\n    }\n  },\n})\n</script>\n\n<style lang=\"css\" scoped>\n.x-switch {\n  --x-switch-height: 16px;\n  --x-switch-width: calc(2 * (var(--x-switch-height)) + 2 * var(--x-switch-padding));\n  --x-switch-background: #b3b3b3;\n  --x-switch-padding: 2px;\n  --x-switch-handle-size: var(--x-switch-height);\n  box-sizing: content-box;\n  height: var(--x-switch-height);\n  padding: var(--x-switch-padding);\n  border-radius: 99999px;\n  background: var(--x-switch-background);\n  width: var(--x-switch-width);\n  border: none;\n  transition: 0.25s ease-out background-color;\n  cursor: pointer;\n}\n\n.x-switch__handle {\n  background: #ffffff;\n  border-radius: 50%;\n  height: var(--x-switch-handle-size);\n  width: var(--x-switch-handle-size);\n  transition: 0.25s ease-out transform;\n  transform: translateX(var(--x-switch-translate-x, 0%));\n}\n\n.x-switch--is-selected {\n  --x-switch-translate-x: calc(var(--x-switch-padding) + var(--x-switch-width) / 2);\n  --x-switch-background: #1a1a1a;\n}\n\n.x-switch--sm {\n  --x-switch-height: 12px;\n}\n\n.x-switch--lg {\n  --x-switch-height: 24px;\n}\n</style>\n\n<docs lang=\"mdx\">\n## Events\n\nThis component emits no events.\n\n## See it in action\n\nHere you have a basic example of how the switch is rendered.\n\n_Try clicking it to see how it changes its state_\n\n```vue live\n<template>\n  <BaseSwitch v-model=\"value\" />\n</template>\n\n<script setup>\nimport { BaseSwitch } from '@empathyco/x-components'\nimport { ref } from 'vue'\nconst value = ref(false)\n</script>\n```\n\nThe switch component also supports using the `v-model` directive, to automatically handle its state\nchange:\n\n```vue live\n<template>\n  <BaseSwitch v-model=\"value\" />\n</template>\n\n<script setup>\nimport { BaseSwitch } from '@empathyco/x-components'\nimport { ref } from 'vue'\nconst value = ref(false)\n</script>\n```\n</docs>\n"],"names":[],"mappings":";;AAgBA;;;;;;AAME;AAEF,gBAAe,eAAe,CAAC;AAC7B,IAAA,IAAI,EAAE,YAAY;AAClB;;;;AAIE;AACF,IAAA,KAAK,EAAE;AACL,QAAA,UAAU,EAAE;AACV,YAAA,IAAI,EAAE,OAAO;AACb,YAAA,OAAO,EAAE,KAAK;AACf,SAAA;AACF,KAAA;IACD,KAAK,EAAE,CAAC,mBAAmB,CAAC;AAC5B,IAAA,KAAK,CAAC,KAAK,EAAE,EAAE,IAAG,EAAG,EAAA;AACnB;;;;;;AAME;AACF,QAAA,MAAM,UAAS,GAAI,QAAQ,CAAgB,OAAO;YAChD,kCAAkC,EAAE,KAAK,CAAC,UAAU;AACrD,SAAA,CAAC,CAAA;AAEF;;;;AAIE;QACF,MAAM,SAAS,MAAU;AACvB,YAAA,MAAM,QAAO,GAAI,CAAC,KAAK,CAAC,UAAS;AACjC,YAAA,IAAI,CAAC,mBAAmB,EAAE,QAAQ,CAAA;AACpC,QAAA,CAAA;QAEA,OAAO;YACL,UAAU;YACV,MAAM;SACR;IACF,CAAC;AACF,CAAA,CAAA;;;;"}
+{"version":3,"file":"base-switch.vue2.js","sources":["../../../src/components/base-switch.vue"],"sourcesContent":["<template>\n  <button\n    :aria-checked=\"modelValue || undefined\"\n    :class=\"cssClasses\"\n    class=\"x-switch\"\n    role=\"switch\"\n    @click=\"toggle\"\n  >\n    <div class=\"x-switch__handle\" />\n  </button>\n</template>\n\n<script lang=\"ts\">\nimport type { VueCSSClasses } from '../utils/types'\nimport { computed, defineComponent } from 'vue'\n\n/**\n * Basic switch component to handle boolean values. This component receives\n * its selected state using a prop, and emits a Vue event whenever the user\n * clicks it.\n *\n * @public\n */\n\nexport default defineComponent({\n  name: 'BaseSwitch',\n  /**\n   * The selected value of the switch.\n   *\n   * @public\n   */\n  props: {\n    modelValue: {\n      type: Boolean,\n      default: false,\n    },\n  },\n  emits: ['update:modelValue'],\n  setup(props, { emit }) {\n    /**\n     * Dynamic CSS classes to add to the switch component\n     * depending on its internal state.\n     *\n     * @returns A boolean dictionary with dynamic CSS classes.\n     * @internal\n     */\n    const cssClasses = computed<VueCSSClasses>(() => ({\n      'x-switch--is-selected xds:selected': props.modelValue,\n    }))\n\n    /**\n     * Emits an event with the new value of the switch.\n     *\n     * @internal\n     */\n    const toggle = (): void => {\n      const newValue = !props.modelValue\n      emit('update:modelValue', newValue)\n    }\n\n    return {\n      cssClasses,\n      toggle,\n    }\n  },\n})\n</script>\n\n<style lang=\"css\" scoped>\n.x-switch {\n  --x-switch-height: 16px;\n  --x-switch-width: calc(2 * (var(--x-switch-height)) + 2 * var(--x-switch-padding));\n  --x-switch-background: #b3b3b3;\n  --x-switch-padding: 2px;\n  --x-switch-handle-size: var(--x-switch-height);\n  box-sizing: content-box;\n  height: var(--x-switch-height);\n  padding: var(--x-switch-padding);\n  border-radius: 99999px;\n  background: var(--x-switch-background);\n  width: var(--x-switch-width);\n  border: none;\n  transition: 0.25s ease-out background-color;\n  cursor: pointer;\n}\n\n.x-switch__handle {\n  background: #ffffff;\n  border-radius: 50%;\n  height: var(--x-switch-handle-size);\n  width: var(--x-switch-handle-size);\n  transition: 0.25s ease-out transform;\n  transform: translateX(var(--x-switch-translate-x, 0%));\n}\n\n.x-switch--is-selected {\n  --x-switch-translate-x: calc(var(--x-switch-padding) + var(--x-switch-width) / 2);\n  --x-switch-background: #1a1a1a;\n}\n\n.x-switch--sm {\n  --x-switch-height: 12px;\n}\n\n.x-switch--lg {\n  --x-switch-height: 24px;\n}\n</style>\n\n<docs lang=\"mdx\">\n## Events\n\nThis component emits no events.\n\n## See it in action\n\nHere you have a basic example of how the switch is rendered.\n\n_Try clicking it to see how it changes its state_\n\n```vue live\n<template>\n  <BaseSwitch v-model=\"value\" />\n</template>\n\n<script setup>\nimport { BaseSwitch } from '@empathyco/x-components'\nimport { ref } from 'vue'\nconst value = ref(false)\n</script>\n```\n\nThe switch component also supports using the `v-model` directive, to automatically handle its state\nchange:\n\n```vue live\n<template>\n  <BaseSwitch v-model=\"value\" />\n</template>\n\n<script setup>\nimport { BaseSwitch } from '@empathyco/x-components'\nimport { ref } from 'vue'\nconst value = ref(false)\n</script>\n```\n</docs>\n"],"names":[],"mappings":";;AAgBA;;;;;;AAME;AAEF,gBAAe,eAAe,CAAC;AAC7B,IAAA,IAAI,EAAE,YAAY;AAClB;;;;AAIE;AACF,IAAA,KAAK,EAAE;AACL,QAAA,UAAU,EAAE;AACV,YAAA,IAAI,EAAE,OAAO;AACb,YAAA,OAAO,EAAE,KAAK;AACf,SAAA;AACF,KAAA;IACD,KAAK,EAAE,CAAC,mBAAmB,CAAC;AAC5B,IAAA,KAAK,CAAC,KAAK,EAAE,EAAE,IAAG,EAAG,EAAA;AACnB;;;;;;AAME;AACF,QAAA,MAAM,UAAS,GAAI,QAAQ,CAAgB,OAAO;YAChD,oCAAoC,EAAE,KAAK,CAAC,UAAU;AACvD,SAAA,CAAC,CAAA;AAEF;;;;AAIE;QACF,MAAM,SAAS,MAAU;AACvB,YAAA,MAAM,QAAO,GAAI,CAAC,KAAK,CAAC,UAAS;AACjC,YAAA,IAAI,CAAC,mBAAmB,EAAE,QAAQ,CAAA;AACpC,QAAA,CAAA;QAEA,OAAO;YACL,UAAU;YACV,MAAM;SACR;IACF,CAAC;AACF,CAAA,CAAA;;;;"}

package/js/components/column-picker/base-column-picker-list.vue.js

@@ -3,7 +3,7 @@ import { resolveComponent, openBlock, createElementBlock, Fragment, renderList,
 import _export_sfc from '../../_virtual/_plugin-vue_export-helper.js';
 
 const _hoisted_1 = {
-  class: "x-column-picker-list x-button-group",
+  class: "x-column-picker-list xds:button-group",
   "data-test": "column-picker-list",
   role: "list"
 };
@@ -19,7 +19,7 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
           { key: column },
           [
             createVNode(_component_BaseEventButton, {
-              class: normalizeClass(["x-column-picker-list__button x-button", [_ctx.buttonClass, cssClasses]]),
+              class: normalizeClass(["x-column-picker-list__button xds:button", [_ctx.buttonClass, cssClasses]]),
               "data-test": "column-picker-button",
               "aria-pressed": isSelected.toString(),
               events,

package/js/components/column-picker/base-column-picker-list.vue.js.map

@@ -1 +1 @@
-{"version":3,"file":"base-column-picker-list.vue.js","sources":["../../../../src/components/column-picker/base-column-picker-list.vue"],"sourcesContent":["<template>\n  <div class=\"x-column-picker-list x-button-group\" data-test=\"column-picker-list\" role=\"list\">\n    <template\n      v-for=\"({ column, cssClasses, events, isSelected }, index) in columnsWithCssClasses\"\n      :key=\"column\"\n    >\n      <BaseEventButton\n        class=\"x-column-picker-list__button x-button\"\n        :class=\"[buttonClass, cssClasses]\"\n        data-test=\"column-picker-button\"\n        :aria-pressed=\"isSelected.toString()\"\n        :events=\"events\"\n        :aria-label=\"`${column} columns`\"\n        role=\"listitem\"\n      >\n        <!--\n          @slot Customized Column Picker Button content. Specifying a slot with the column value\n          will result in the column using that slot composition to render.\n            @binding {number} column - Columns Number to pick.\n            @binding {boolean} isSelected - True if the columns number are the chosen value.\n        -->\n        <slot v-bind=\"{ column, isSelected }\">\n          {{ column }}\n        </slot>\n      </BaseEventButton>\n\n      <!--\n          @slot Customized Column Picker divider. Specify an element to act as divider for\n          the items in the column picker. Empty by default.\n        -->\n      <slot v-if=\"index !== columnsWithCssClasses.length - 1\" name=\"divider\"></slot>\n    </template>\n  </div>\n</template>\n\n<script lang=\"ts\">\nimport type { PropType } from 'vue'\nimport type { ColumnPickerItem } from './base-column-picker-list.types'\nimport { computed, defineComponent, onBeforeMount, ref, watch } from 'vue'\nimport { use$x } from '../../composables/use-$x'\nimport BaseEventButton from '../base-event-button.vue'\n\n/**\n * Column picker list component renders a list of buttons to choose the columns number.\n *\n * Additionally, this component exposes the following props to modify the classes of the\n * elements: `buttonClass`.\n *\n * @public\n */\nexport default defineComponent({\n  name: 'BaseColumnPickerList',\n  components: { BaseEventButton },\n  props: {\n    /** An array of numbers that represents the number of columns to render. */\n    columns: {\n      type: Array as PropType<number[]>,\n      required: true,\n    },\n    /** The value of the selected columns number. */\n    modelValue: Number,\n    /** Class inherited by each button. */\n    buttonClass: String,\n  },\n  emits: ['update:modelValue'],\n  setup(props, { emit }) {\n    const $x = use$x()\n\n    const providedSelectedColumns = computed(() => props.modelValue ?? props.columns[0])\n    const selectedColumns = ref(providedSelectedColumns.value)\n\n    /**\n     * Assigns `selectedColumns` value and emits `ColumnsNumberProvided`.\n     *\n     * @param column - Column number provided.\n     */\n    function emitColumnsNumberProvided(column: number) {\n      selectedColumns.value = column\n      $x.emit('ColumnsNumberProvided', column)\n    }\n\n    /**\n     * Emits `update:modelValue` with the column selected.\n     *\n     * @param column - Column number selected.\n     */\n    function emitUpdateModelValue(column: number) {\n      if (props.modelValue !== column) {\n        emit('update:modelValue', column)\n      }\n    }\n\n    watch(providedSelectedColumns, emitColumnsNumberProvided)\n    watch(selectedColumns, emitUpdateModelValue)\n\n    $x.on('ColumnsNumberProvided', false).subscribe(column => (selectedColumns.value = column))\n\n    /**\n     * Synchronizes the columns number before mounting the component. If the real number of selected\n     * columns equals the provided columns, it emits the event to sync it with every other component.\n     * If it is not equal it means that the user has already selected a number of columns, so we emit\n     * a `update:modelValue` event so developers can sync the provided value.\n     */\n    onBeforeMount(() => {\n      if (selectedColumns.value === providedSelectedColumns.value) {\n        emitColumnsNumberProvided(selectedColumns.value)\n      } else {\n        emitUpdateModelValue(selectedColumns.value)\n      }\n    })\n\n    /**\n     * Maps the column to an object containing: the `column` and `CSS classes`.\n     *\n     * @returns An array of objects containing the column number and CSS classes.\n     */\n    const columnsWithCssClasses = computed<ColumnPickerItem[]>(() =>\n      props.columns.map(column => ({\n        column,\n        cssClasses: [\n          `x-column-picker-list__button--${column}-cols`,\n          { 'x-selected': selectedColumns.value === column },\n        ],\n        isSelected: selectedColumns.value === column,\n        events: {\n          UserClickedColumnPicker: column,\n          ColumnsNumberProvided: column,\n        },\n      })),\n    )\n\n    return { columnsWithCssClasses }\n  },\n})\n</script>\n\n<docs lang=\"mdx\">\n## Examples\n\nThis component renders a list of elements in different slots depending on the columns prop. Each\nbutton emits the needed events to sync other instances of column pickers or grids with the\nnumber of columns being selected when clicked.\n\n### Default usage\n\nIt is required to send the columns prop.\n\n```vue live\n<template>\n  <BaseColumnPickerList :columns=\"columns\" />\n</template>\n\n<script setup>\nimport { ref } from 'vue'\nimport BaseColumnPickerList from '@empathyco/x-components/js/components/column-picker/base-column-picker-list.vue'\n\nconst columns = ref([2, 4, 6])\n</script>\n```\n\n### Using v-model\n\nIt is possible to do two-way binding in order to synchronize the value with the parent. It will be\nupdated if the value changes or if the parent changes it.\n\n```vue live\n<template>\n  <BaseColumnPickerList :columns=\"columns\" v-model=\"selectedColumns\" />\n</template>\n\n<script setup>\nimport { ref } from 'vue'\nimport BaseColumnPickerList from '@empathyco/x-components/js/components/column-picker/base-column-picker-list.vue'\n\nconst columns = ref([2, 4, 6])\nconst selectedColumns = ref(4)\n</script>\n```\n\n### Customized usage\n\n#### Overriding the slots\n\nIt is possible to override the column picker button content.\n\n```vue live\n<template>\n  <BaseColumnPickerList :columns=\"columns\">\n    <template #default=\"{ column, isSelected }\">\n      <span>{{ column }} {{ isSelected ? '🟢' : '' }}</span>\n    </template>\n  </BaseColumnPickerList>\n</template>\n\n<script setup>\nimport { ref } from 'vue'\nimport BaseColumnPickerList from '@empathyco/x-components/js/components/column-picker/base-column-picker-list.vue'\n\nconst columns = ref([2, 4, 6])\n</script>\n```\n\nIt is also possible to add a divider element between the column picker buttons by overriding the\n`divider` slot.\n\n```vue live\n<template>\n  <BaseColumnPickerList :columns=\"columns\">\n    <template #divider>\n      <ChevronRightIcon aria-hidden=\"true\" />\n    </template>\n  </BaseColumnPickerList>\n</template>\n\n<script setup>\nimport { ref } from 'vue'\nimport BaseColumnPickerList from '@empathyco/x-components/js/components/column-picker/base-column-picker-list.vue'\nimport ChevronRightIcon from '@empathyco/x-components/js/components/icons/chevron-right.vue'\n\nconst columns = ref([2, 4, 6])\n</script>\n```\n\n#### Customizing the buttons with classes\n\nThe `buttonClass` prop can be used to add classes to the buttons.\n\n```vue live\n<template>\n  <BaseColumnPickerList :columns=\"columns\" buttonClass=\"x-button--round\" />\n</template>\n\n<script setup>\nimport { ref } from 'vue'\nimport BaseColumnPickerList from '@empathyco/x-components/js/components/column-picker/base-column-picker-list.vue'\n\nconst columns = ref([2, 4, 6])\n</script>\n```\n\n## Events\n\nA list of events that the component will emit:\n\n- [`UserClickedColumnPicker`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts):\n  the event is emitted after the user clicks an item. The event payload is the number of columns\n  that the clicked item represents.\n- [`ColumnsNumberProvided`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts):\n  the event is emitted on component mount. The event payload is the current `selectedColumns` value.\n</docs>\n"],"names":["_openBlock","_createElementBlock","_Fragment","_renderList","_createVNode","_normalizeClass","_renderSlot","_mergeProps","_createTextVNode","_createCommentVNode"],"mappings":";;;;;EACO,KAAA,EAAM,qCAAA;AAAA,EAAsC,WAAA,EAAU,oBAAA;AAAA,EAAqB,IAAA,EAAK;;;;AAArF,EAAA,OAAAA,SAAA,EAAA,EAAAC,kBAAA,CA+BM,OA/BN,UAAA,EA+BM;AAAA,KAAAD,SAAA,CAAA,IAAA,CAAA,EA9BJC,kBAAA;AAAA,MA6BWC,QAAA;AAAA,MAAA,IAAA;AAAA,MAAAC,UAAA,CA5BqD,4BAAqB,CAAA,EAAzE,MAAA,EAAQ,YAAY,MAAA,EAAQ,UAAA,IAAc,KAAA,KAAK;;;iBACnD,MAAA,EAAM;AAAA,UAAA;AAAA,YAEZC,WAAA,CAkBkB,0BAAA,EAAA;AAAA,cAjBhB,KAAA,EAAKC,cAAA,CAAA,CAAC,uCAAA,EAAuC,CACpC,kBAAa,UAAU,CAAA,CAAA,CAAA;AAAA,cAChC,WAAA,EAAU,sBAAA;AAAA,cACT,cAAA,EAAc,WAAW,QAAA,EAAQ;AAAA,cACjC,MAAA;AAAA,cACA,YAAA,EAAU,GAAK,MAAM,CAAA,QAAA,CAAA;AAAA,cACtB,IAAA,EAAK;AAAA,aAAA,EAAA;+BAQL,MAEO;AAAA,gBAFPC,WAEO,IAAA,CAAA,MAAA,EAAA,SAAA,EAFPC,UAAA,CAEO,qBAFS,MAAA,EAAQ,UAAA,KAAxB,MAEO;AAAA,kBAAAC,eAAA;oCADF,MAAM,CAAA;AAAA,oBAAA;AAAA;AAAA;AAAA,iBAAA;;;;;YAQD,KAAA,KAAU,IAAA,CAAA,qBAAA,CAAsB,MAAA,GAAM,CAAA,GAAlDF,UAAA,CAA8E,IAAA,CAAA,MAAA,EAAA,SAAA,EAAA,EAAA,GAAA,EAAA,CAAA,EAAA,CAAA,GAAAG,kBAAA,CAAA,MAAA,EAAA,IAAA;;;;;;;;;;;;;;;"}
+{"version":3,"file":"base-column-picker-list.vue.js","sources":["../../../../src/components/column-picker/base-column-picker-list.vue"],"sourcesContent":["<template>\n  <div class=\"x-column-picker-list xds:button-group\" data-test=\"column-picker-list\" role=\"list\">\n    <template\n      v-for=\"({ column, cssClasses, events, isSelected }, index) in columnsWithCssClasses\"\n      :key=\"column\"\n    >\n      <BaseEventButton\n        class=\"x-column-picker-list__button xds:button\"\n        :class=\"[buttonClass, cssClasses]\"\n        data-test=\"column-picker-button\"\n        :aria-pressed=\"isSelected.toString()\"\n        :events=\"events\"\n        :aria-label=\"`${column} columns`\"\n        role=\"listitem\"\n      >\n        <!--\n          @slot Customized Column Picker Button content. Specifying a slot with the column value\n          will result in the column using that slot composition to render.\n            @binding {number} column - Columns Number to pick.\n            @binding {boolean} isSelected - True if the columns number are the chosen value.\n        -->\n        <slot v-bind=\"{ column, isSelected }\">\n          {{ column }}\n        </slot>\n      </BaseEventButton>\n\n      <!--\n          @slot Customized Column Picker divider. Specify an element to act as divider for\n          the items in the column picker. Empty by default.\n        -->\n      <slot v-if=\"index !== columnsWithCssClasses.length - 1\" name=\"divider\"></slot>\n    </template>\n  </div>\n</template>\n\n<script lang=\"ts\">\nimport type { PropType } from 'vue'\nimport type { VueCSSClasses } from '../../utils/types'\nimport type { XEventsTypes } from '../../wiring'\nimport { computed, defineComponent, onBeforeMount, ref, watch } from 'vue'\nimport { use$x } from '../../composables/use-$x'\nimport BaseEventButton from '../base-event-button.vue'\n\nexport interface ColumnPickerItem {\n  column: number\n  cssClasses: VueCSSClasses\n  events: Partial<XEventsTypes>\n  isSelected: boolean\n}\n\n/**\n * Column picker list component renders a list of buttons to choose the columns number.\n *\n * Additionally, this component exposes the following props to modify the classes of the\n * elements: `buttonClass`.\n *\n * @public\n */\nexport default defineComponent({\n  name: 'BaseColumnPickerList',\n  components: { BaseEventButton },\n  props: {\n    /** An array of numbers that represents the number of columns to render. */\n    columns: {\n      type: Array as PropType<number[]>,\n      required: true,\n    },\n    /** The value of the selected columns number. */\n    modelValue: Number,\n    /** Class inherited by each button. */\n    buttonClass: String,\n  },\n  emits: ['update:modelValue'],\n  setup(props, { emit }) {\n    const $x = use$x()\n\n    const providedSelectedColumns = computed(() => props.modelValue ?? props.columns[0])\n    const selectedColumns = ref(providedSelectedColumns.value)\n\n    /**\n     * Assigns `selectedColumns` value and emits `ColumnsNumberProvided`.\n     *\n     * @param column - Column number provided.\n     */\n    function emitColumnsNumberProvided(column: number) {\n      selectedColumns.value = column\n      $x.emit('ColumnsNumberProvided', column)\n    }\n\n    /**\n     * Emits `update:modelValue` with the column selected.\n     *\n     * @param column - Column number selected.\n     */\n    function emitUpdateModelValue(column: number) {\n      if (props.modelValue !== column) {\n        emit('update:modelValue', column)\n      }\n    }\n\n    watch(providedSelectedColumns, emitColumnsNumberProvided)\n    watch(selectedColumns, emitUpdateModelValue)\n\n    $x.on('ColumnsNumberProvided', false).subscribe(column => (selectedColumns.value = column))\n\n    /**\n     * Synchronizes the columns number before mounting the component. If the real number of selected\n     * columns equals the provided columns, it emits the event to sync it with every other component.\n     * If it is not equal it means that the user has already selected a number of columns, so we emit\n     * a `update:modelValue` event so developers can sync the provided value.\n     */\n    onBeforeMount(() => {\n      if (selectedColumns.value === providedSelectedColumns.value) {\n        emitColumnsNumberProvided(selectedColumns.value)\n      } else {\n        emitUpdateModelValue(selectedColumns.value)\n      }\n    })\n\n    /**\n     * Maps the column to an object containing: the `column` and `CSS classes`.\n     *\n     * @returns An array of objects containing the column number and CSS classes.\n     */\n    const columnsWithCssClasses = computed<ColumnPickerItem[]>(() =>\n      props.columns.map(column => ({\n        column,\n        cssClasses: [\n          `x-column-picker-list__button--${column}-cols`,\n          { 'xds:selected': selectedColumns.value === column },\n        ],\n        isSelected: selectedColumns.value === column,\n        events: {\n          UserClickedColumnPicker: column,\n          ColumnsNumberProvided: column,\n        },\n      })),\n    )\n\n    return { columnsWithCssClasses }\n  },\n})\n</script>\n\n<docs lang=\"mdx\">\n## Examples\n\nThis component renders a list of elements in different slots depending on the columns prop. Each\nbutton emits the needed events to sync other instances of column pickers or grids with the\nnumber of columns being selected when clicked.\n\n### Default usage\n\nIt is required to send the columns prop.\n\n```vue live\n<template>\n  <BaseColumnPickerList :columns=\"columns\" />\n</template>\n\n<script setup>\nimport { ref } from 'vue'\nimport BaseColumnPickerList from '@empathyco/x-components/js/components/column-picker/base-column-picker-list.vue'\n\nconst columns = ref([2, 4, 6])\n</script>\n```\n\n### Using v-model\n\nIt is possible to do two-way binding in order to synchronize the value with the parent. It will be\nupdated if the value changes or if the parent changes it.\n\n```vue live\n<template>\n  <BaseColumnPickerList :columns=\"columns\" v-model=\"selectedColumns\" />\n</template>\n\n<script setup>\nimport { ref } from 'vue'\nimport BaseColumnPickerList from '@empathyco/x-components/js/components/column-picker/base-column-picker-list.vue'\n\nconst columns = ref([2, 4, 6])\nconst selectedColumns = ref(4)\n</script>\n```\n\n### Customized usage\n\n#### Overriding the slots\n\nIt is possible to override the column picker button content.\n\n```vue live\n<template>\n  <BaseColumnPickerList :columns=\"columns\">\n    <template #default=\"{ column, isSelected }\">\n      <span>{{ column }} {{ isSelected ? '🟢' : '' }}</span>\n    </template>\n  </BaseColumnPickerList>\n</template>\n\n<script setup>\nimport { ref } from 'vue'\nimport BaseColumnPickerList from '@empathyco/x-components/js/components/column-picker/base-column-picker-list.vue'\n\nconst columns = ref([2, 4, 6])\n</script>\n```\n\nIt is also possible to add a divider element between the column picker buttons by overriding the\n`divider` slot.\n\n```vue live\n<template>\n  <BaseColumnPickerList :columns=\"columns\">\n    <template #divider>\n      <ChevronRightIcon aria-hidden=\"true\" />\n    </template>\n  </BaseColumnPickerList>\n</template>\n\n<script setup>\nimport { ref } from 'vue'\nimport BaseColumnPickerList from '@empathyco/x-components/js/components/column-picker/base-column-picker-list.vue'\nimport ChevronRightIcon from '@empathyco/x-components/js/components/icons/chevron-right.vue'\n\nconst columns = ref([2, 4, 6])\n</script>\n```\n\n#### Customizing the buttons with classes\n\nThe `buttonClass` prop can be used to add classes to the buttons.\n\n```vue live\n<template>\n  <BaseColumnPickerList :columns=\"columns\" buttonClass=\"xds:button-circle\" />\n</template>\n\n<script setup>\nimport { ref } from 'vue'\nimport BaseColumnPickerList from '@empathyco/x-components/js/components/column-picker/base-column-picker-list.vue'\n\nconst columns = ref([2, 4, 6])\n</script>\n```\n\n## Events\n\nA list of events that the component will emit:\n\n- [`UserClickedColumnPicker`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts):\n  the event is emitted after the user clicks an item. The event payload is the number of columns\n  that the clicked item represents.\n- [`ColumnsNumberProvided`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts):\n  the event is emitted on component mount. The event payload is the current `selectedColumns` value.\n</docs>\n"],"names":["_openBlock","_createElementBlock","_Fragment","_renderList","_createVNode","_normalizeClass","_renderSlot","_mergeProps","_createTextVNode","_createCommentVNode"],"mappings":";;;;;EACO,KAAA,EAAM,uCAAA;AAAA,EAAwC,WAAA,EAAU,oBAAA;AAAA,EAAqB,IAAA,EAAK;;;;AAAvF,EAAA,OAAAA,SAAA,EAAA,EAAAC,kBAAA,CA+BM,OA/BN,UAAA,EA+BM;AAAA,KAAAD,SAAA,CAAA,IAAA,CAAA,EA9BJC,kBAAA;AAAA,MA6BWC,QAAA;AAAA,MAAA,IAAA;AAAA,MAAAC,UAAA,CA5BqD,4BAAqB,CAAA,EAAzE,MAAA,EAAQ,YAAY,MAAA,EAAQ,UAAA,IAAc,KAAA,KAAK;;;iBACnD,MAAA,EAAM;AAAA,UAAA;AAAA,YAEZC,WAAA,CAkBkB,0BAAA,EAAA;AAAA,cAjBhB,KAAA,EAAKC,cAAA,CAAA,CAAC,yCAAA,EAAyC,CACtC,kBAAa,UAAU,CAAA,CAAA,CAAA;AAAA,cAChC,WAAA,EAAU,sBAAA;AAAA,cACT,cAAA,EAAc,WAAW,QAAA,EAAQ;AAAA,cACjC,MAAA;AAAA,cACA,YAAA,EAAU,GAAK,MAAM,CAAA,QAAA,CAAA;AAAA,cACtB,IAAA,EAAK;AAAA,aAAA,EAAA;+BAQL,MAEO;AAAA,gBAFPC,WAEO,IAAA,CAAA,MAAA,EAAA,SAAA,EAFPC,UAAA,CAEO,qBAFS,MAAA,EAAQ,UAAA,KAAxB,MAEO;AAAA,kBAAAC,eAAA;oCADF,MAAM,CAAA;AAAA,oBAAA;AAAA;AAAA;AAAA,iBAAA;;;;;YAQD,KAAA,KAAU,IAAA,CAAA,qBAAA,CAAsB,MAAA,GAAM,CAAA,GAAlDF,UAAA,CAA8E,IAAA,CAAA,MAAA,EAAA,SAAA,EAAA,EAAA,GAAA,EAAA,CAAA,EAAA,CAAA,GAAAG,kBAAA,CAAA,MAAA,EAAA,IAAA;;;;;;;;;;;;;;;"}

package/js/components/column-picker/base-column-picker-list.vue2.js

@@ -74,7 +74,7 @@ var _sfc_main = defineComponent({
             column,
             cssClasses: [
                 `x-column-picker-list__button--${column}-cols`,
-                { 'x-selected': selectedColumns.value === column },
+                { 'xds:selected': selectedColumns.value === column },
             ],
             isSelected: selectedColumns.value === column,
             events: {