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

package/js/components/icons/user-filled.vue.js

@@ -4,7 +4,7 @@ import _export_sfc from '../../_virtual/_plugin-vue_export-helper.js';
 const _sfc_main = {  };
 
 const _hoisted_1 = {
-  class: "x-icon",
+  class: "xds:icon",
   viewBox: "0 0 8 8",
   fill: "none",
   xmlns: "http://www.w3.org/2000/svg"

package/js/components/icons/user-filled.vue.js.map

@@ -1 +1 @@
-{"version":3,"file":"user-filled.vue.js","sources":["../../../../src/components/icons/user-filled.vue"],"sourcesContent":["<template>\n  <svg class=\"x-icon\" viewBox=\"0 0 8 8\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n    <path\n      d=\"M7 7V6.333C7 5.597 6.328 5 5.5 5H2.5C1.672 5 1 5.597 1 6.333V7M5.5 2.5C5.5 2.89782 5.34196 3.27936 5.06066 3.56066C4.77936 3.84196 4.39782 4 4 4C3.60218 4 3.22064 3.84196 2.93934 3.56066C2.65804 3.27936 2.5 2.89782 2.5 2.5C2.5 2.10218 2.65804 1.72064 2.93934 1.43934C3.22064 1.15804 3.60218 1 4 1C4.39782 1 4.77936 1.15804 5.06066 1.43934C5.34196 1.72064 5.5 2.10218 5.5 2.5Z\"\n      fill=\"currentColor\"\n    />\n    <path\n      d=\"M7 7V6.333C7 5.597 6.328 5 5.5 5H2.5C1.672 5 1 5.597 1 6.333V7H7ZM5.5 2.5C5.5 2.89782 5.34196 3.27936 5.06066 3.56066C4.77936 3.84196 4.39782 4 4 4C3.60218 4 3.22064 3.84196 2.93934 3.56066C2.65804 3.27936 2.5 2.89782 2.5 2.5C2.5 2.10218 2.65804 1.72064 2.93934 1.43934C3.22064 1.15804 3.60218 1 4 1C4.39782 1 4.77936 1.15804 5.06066 1.43934C5.34196 1.72064 5.5 2.10218 5.5 2.5Z\"\n      stroke=\"currentColor\"\n      stroke-width=\"0.4\"\n      stroke-linecap=\"round\"\n      stroke-linejoin=\"round\"\n    />\n  </svg>\n</template>\n"],"names":["_openBlock","_createElementBlock","_createElementVNode"],"mappings":";;;;;;AACO,EAAA,KAAK,EAAC,QAAQ;AAAC,EAAA,OAAO,EAAC,SAAS;AAAC,EAAA,IAAI,EAAC,MAAM;AAAC,EAAA,KAAK,EAAC;;;;AAAxD,EAAA,QAAAA,SAAA,EAAA,EAAAC,kBAAA,CAYM,OAZN,UAYM,EAAA,CAAA,IAAA,MAAA,CAAA,CAAA,CAAA,KAAA,MAAA,CAAA,CAAA,CAAA,GAAA;IAXJC,kBAAA,CAGE,MAAA,EAAA;AAFA,MAAA,CAAC,EAAC,yXAAyX;AAC3X,MAAA,IAAI,EAAC;;IAEPA,kBAAA,CAME,MAAA,EAAA;AALA,MAAA,CAAC,EAAC,4XAA4X;AAC9X,MAAA,MAAM,EAAC,cAAc;AACrB,MAAA,cAAY,EAAC,KAAK;AAClB,MAAA,gBAAc,EAAC,OAAO;AACtB,MAAA,iBAAe,EAAC;;;;;;;;"}
+{"version":3,"file":"user-filled.vue.js","sources":["../../../../src/components/icons/user-filled.vue"],"sourcesContent":["<template>\n  <svg class=\"xds:icon\" viewBox=\"0 0 8 8\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n    <path\n      d=\"M7 7V6.333C7 5.597 6.328 5 5.5 5H2.5C1.672 5 1 5.597 1 6.333V7M5.5 2.5C5.5 2.89782 5.34196 3.27936 5.06066 3.56066C4.77936 3.84196 4.39782 4 4 4C3.60218 4 3.22064 3.84196 2.93934 3.56066C2.65804 3.27936 2.5 2.89782 2.5 2.5C2.5 2.10218 2.65804 1.72064 2.93934 1.43934C3.22064 1.15804 3.60218 1 4 1C4.39782 1 4.77936 1.15804 5.06066 1.43934C5.34196 1.72064 5.5 2.10218 5.5 2.5Z\"\n      fill=\"currentColor\"\n    />\n    <path\n      d=\"M7 7V6.333C7 5.597 6.328 5 5.5 5H2.5C1.672 5 1 5.597 1 6.333V7H7ZM5.5 2.5C5.5 2.89782 5.34196 3.27936 5.06066 3.56066C4.77936 3.84196 4.39782 4 4 4C3.60218 4 3.22064 3.84196 2.93934 3.56066C2.65804 3.27936 2.5 2.89782 2.5 2.5C2.5 2.10218 2.65804 1.72064 2.93934 1.43934C3.22064 1.15804 3.60218 1 4 1C4.39782 1 4.77936 1.15804 5.06066 1.43934C5.34196 1.72064 5.5 2.10218 5.5 2.5Z\"\n      stroke=\"currentColor\"\n      stroke-width=\"0.4\"\n      stroke-linecap=\"round\"\n      stroke-linejoin=\"round\"\n    />\n  </svg>\n</template>\n"],"names":["_openBlock","_createElementBlock","_createElementVNode"],"mappings":";;;;;;AACO,EAAA,KAAK,EAAC,UAAU;AAAC,EAAA,OAAO,EAAC,SAAS;AAAC,EAAA,IAAI,EAAC,MAAM;AAAC,EAAA,KAAK,EAAC;;;;AAA1D,EAAA,QAAAA,SAAA,EAAA,EAAAC,kBAAA,CAYM,OAZN,UAYM,EAAA,CAAA,IAAA,MAAA,CAAA,CAAA,CAAA,KAAA,MAAA,CAAA,CAAA,CAAA,GAAA;IAXJC,kBAAA,CAGE,MAAA,EAAA;AAFA,MAAA,CAAC,EAAC,yXAAyX;AAC3X,MAAA,IAAI,EAAC;;IAEPA,kBAAA,CAME,MAAA,EAAA;AALA,MAAA,CAAC,EAAC,4XAA4X;AAC9X,MAAA,MAAM,EAAC,cAAc;AACrB,MAAA,cAAY,EAAC,KAAK;AAClB,MAAA,gBAAc,EAAC,OAAO;AACtB,MAAA,iBAAe,EAAC;;;;;;;;"}

package/js/components/icons/user.vue.js

@@ -4,7 +4,7 @@ import _export_sfc from '../../_virtual/_plugin-vue_export-helper.js';
 const _sfc_main = {  };
 
 const _hoisted_1 = {
-  class: "x-icon",
+  class: "xds:icon",
   viewBox: "0 0 8 8",
   fill: "none",
   xmlns: "http://www.w3.org/2000/svg"

package/js/components/icons/user.vue.js.map

@@ -1 +1 @@
-{"version":3,"file":"user.vue.js","sources":["../../../../src/components/icons/user.vue"],"sourcesContent":["<template>\n  <svg class=\"x-icon\" viewBox=\"0 0 8 8\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n    <path\n      d=\"M7 7V6.333C7 5.597 6.328 5 5.5 5H2.5C1.672 5 1 5.597 1 6.333V7M5.5 2.5C5.5 2.89782 5.34196 3.27936 5.06066 3.56066C4.77936 3.84196 4.39782 4 4 4C3.60218 4 3.22064 3.84196 2.93934 3.56066C2.65804 3.27936 2.5 2.89782 2.5 2.5C2.5 2.10218 2.65804 1.72064 2.93934 1.43934C3.22064 1.15804 3.60218 1 4 1C4.39782 1 4.77936 1.15804 5.06066 1.43934C5.34196 1.72064 5.5 2.10218 5.5 2.5V2.5Z\"\n      stroke=\"currentColor\"\n      stroke-width=\"0.4\"\n      stroke-linecap=\"round\"\n      stroke-linejoin=\"round\"\n    />\n  </svg>\n</template>\n"],"names":["_openBlock","_createElementBlock","_createElementVNode"],"mappings":";;;;;;AACO,EAAA,KAAK,EAAC,QAAQ;AAAC,EAAA,OAAO,EAAC,SAAS;AAAC,EAAA,IAAI,EAAC,MAAM;AAAC,EAAA,KAAK,EAAC;;;;AAAxD,EAAA,QAAAA,SAAA,EAAA,EAAAC,kBAAA,CAQM,OARN,UAQM,EAAA,CAAA,IAAA,MAAA,CAAA,CAAA,CAAA,KAAA,MAAA,CAAA,CAAA,CAAA,GAAA;IAPJC,kBAAA,CAME,MAAA,EAAA;AALA,MAAA,CAAC,EAAC,6XAA6X;AAC/X,MAAA,MAAM,EAAC,cAAc;AACrB,MAAA,cAAY,EAAC,KAAK;AAClB,MAAA,gBAAc,EAAC,OAAO;AACtB,MAAA,iBAAe,EAAC;;;;;;;;"}
+{"version":3,"file":"user.vue.js","sources":["../../../../src/components/icons/user.vue"],"sourcesContent":["<template>\n  <svg class=\"xds:icon\" viewBox=\"0 0 8 8\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n    <path\n      d=\"M7 7V6.333C7 5.597 6.328 5 5.5 5H2.5C1.672 5 1 5.597 1 6.333V7M5.5 2.5C5.5 2.89782 5.34196 3.27936 5.06066 3.56066C4.77936 3.84196 4.39782 4 4 4C3.60218 4 3.22064 3.84196 2.93934 3.56066C2.65804 3.27936 2.5 2.89782 2.5 2.5C2.5 2.10218 2.65804 1.72064 2.93934 1.43934C3.22064 1.15804 3.60218 1 4 1C4.39782 1 4.77936 1.15804 5.06066 1.43934C5.34196 1.72064 5.5 2.10218 5.5 2.5V2.5Z\"\n      stroke=\"currentColor\"\n      stroke-width=\"0.4\"\n      stroke-linecap=\"round\"\n      stroke-linejoin=\"round\"\n    />\n  </svg>\n</template>\n"],"names":["_openBlock","_createElementBlock","_createElementVNode"],"mappings":";;;;;;AACO,EAAA,KAAK,EAAC,UAAU;AAAC,EAAA,OAAO,EAAC,SAAS;AAAC,EAAA,IAAI,EAAC,MAAM;AAAC,EAAA,KAAK,EAAC;;;;AAA1D,EAAA,QAAAA,SAAA,EAAA,EAAAC,kBAAA,CAQM,OARN,UAQM,EAAA,CAAA,IAAA,MAAA,CAAA,CAAA,CAAA,KAAA,MAAA,CAAA,CAAA,CAAA,GAAA;IAPJC,kBAAA,CAME,MAAA,EAAA;AALA,MAAA,CAAC,EAAC,6XAA6X;AAC/X,MAAA,MAAM,EAAC,cAAc;AACrB,MAAA,cAAY,EAAC,KAAK;AAClB,MAAA,gBAAc,EAAC,OAAO;AACtB,MAAA,iBAAe,EAAC;;;;;;;;"}

package/js/components/layouts/multi-column-max-width-layout.vue4.js

@@ -1,6 +1,6 @@
 import injectCss from '../../../tools/inject-css.js';
 
-var css = ".dev-mode .slot-helper[data-v-5319aaa7]{align-items:center;border:1px dashed grey;border-radius:10px;box-sizing:border-box;color:grey;display:flex;font-family:inherit;height:100%;justify-content:center;width:100%}.x-layout[data-v-5319aaa7]{--x-size-gap-default:var(--x-size-column-gap-layout-columns,20px);--x-size-margin-max-width:calc((100vw - var(--x-size-max-width-layout-columns, 1440px))/2);--x-size-margin-layout-columns:max(var(--x-size-min-margin-layout-columns,20px),var(--x-size-margin-max-width));--x-number-columns-header-middle:calc(var(--x-number-columns-layout-columns, 5) - 2);--x-number-columns-sub-header-content:var(--x-number-columns-header-middle);--x-number-columns-toolbar-body:calc(var(--x-number-columns-layout-columns, 5) - 1);align-content:stretch;display:grid;grid-template-columns:[page-start] 1fr [scroll-to-top-start] calc(var(--x-size-margin-layout-columns) + var(--x-size-gap-default)) [scroll-to-top-end page-end];grid-template-rows:[page-start header-start] auto [header-end sub-header-start] auto [sub-header-end toolbar-start] auto [toolbar-end main-start] 1fr [scroll-to-top-start] auto [main-end scroll-to-top-end page-end];max-height:100%}.x-layout__header[data-v-5319aaa7]{background-color:var(--x-color-background-layout-columns-header,transparent);border-color:var(--x-color-border-layout-columns-header,transparent);border-style:solid;border-width:var(--x-size-border-width-layout-columns-header,0);column-gap:var(--x-size-gap-default);display:grid;grid-column:page;grid-row:header;grid-template-columns:[header-start] var(--x-size-margin-layout-columns) [start-content-start] 1fr [start-content-end middle-content-start] repeat(var(--x-number-columns-header-middle),1fr) [middle-content-end end-content-start] 1fr [end-content-end] var(--x-size-margin-layout-columns) [header-end];margin-bottom:var(--x-size-margin-bottom-layout-columns-header,0);margin-top:var(--x-size-margin-top-layout-columns-header,0);padding-bottom:var(--x-size-padding-bottom-layout-columns-header,0);padding-top:var(--x-size-padding-top-layout-columns-header,0)}.x-layout__header-start[data-v-5319aaa7]{grid-column:start-content}.x-layout__header-start.x-list[data-v-5319aaa7]{align-items:var(--x-size-align-layout-columns-header-start,flex start);flex-flow:var(--x-flow-layout-columns-header-start,row nowrap);justify-content:var(--x-size-justify-layout-columns-header-start,flex start)}.x-layout__header-middle[data-v-5319aaa7]{grid-column:middle-content}.x-layout__header-middle.x-list[data-v-5319aaa7]{align-items:var(--x-size-align-layout-columns-header-middle,flex start);flex-flow:var(--x-flow-layout-columns-header-middle,row nowrap);justify-content:var(--x-size-justify-layout-columns-header-middle,center)}.x-layout__header-end[data-v-5319aaa7]{grid-column:end-content}.x-layout__header-end.x-list[data-v-5319aaa7]{align-items:var(--x-size-align-layout-columns-header-end,flex-start);flex-flow:var(--x-flow-layout-columns-header-end,row nowrap);justify-content:var(--x-size-justify-layout-columns-header-end,flex-end)}.x-layout__sub-header[data-v-5319aaa7]{background-color:var(--x-color-background-layout-columns-sub-header,transparent);border-color:var(--x-color-border-layout-columns-sub-header,transparent);border-style:solid;border-width:var(--x-size-border-width-layout-columns-sub-header,0);column-gap:var(--x-size-gap-default);display:grid;grid-column:page;grid-row:sub-header;grid-template-columns:[sub-header-start] var(--x-size-margin-layout-columns) 1fr [sub-header-content-start] repeat(var(--x-number-columns-sub-header-content),1fr) [sub-header-content-end] 1fr var(--x-size-margin-layout-columns) [sub-header-end];margin-bottom:var(--x-size-margin-bottom-layout-columns-sub-header,0);margin-top:var(--x-size-margin-top-layout-columns-sub-header,0);padding-bottom:var(--x-size-padding-bottom-layout-columns-sub-header),0;padding-top:var(--x-size-padding-top-layout-columns-sub-header,0)}.x-layout__sub-header-content[data-v-5319aaa7]{grid-column:sub-header-content}.x-layout__sub-header-content.x-list[data-v-5319aaa7]{align-items:var(--x-size-align-layout-columns-sub-header,flex-start);flex-flow:var(--x-flow-layout-columns-sub-header,row nowrap);justify-content:var(--x-size-justify-layout-columns-sub-header,flex-start)}.x-layout__toolbar[data-v-5319aaa7]{background-color:var(--x-color-background-layout-columns-toolbar,transparent);border-color:var(--x-color-border-layout-columns-toolbar,transparent);border-style:solid;border-width:var(--x-size-border-width-layout-columns-toolbar,0);column-gap:var(--x-size-gap-default);display:grid;grid-column:page;grid-row:toolbar;grid-template-columns:[toolbar-start] var(--x-size-margin-layout-columns) [toolbar-aside-start] 1fr [toolbar-aside-end toolbar-body-start] repeat(var(--x-number-columns-toolbar-body),1fr) [toolbar-body-end] var(--x-size-margin-layout-columns) [toolbar-end];margin-bottom:var(--x-size-margin-bottom-layout-columns-toolbar,0);margin-top:var(--x-size-margin-top-layout-columns-toolbar,0);padding-bottom:var(--x-size-padding-bottom-layout-columns-toolbar,0);padding-top:var(--x-size-padding-top-layout-columns-toolbar,0)}.x-layout__toolbar-aside[data-v-5319aaa7]{grid-column:toolbar-aside}.x-layout__toolbar-aside.x-list[data-v-5319aaa7]{align-items:var(--x-size-align-layout-columns-toolbar-aside,center);flex-flow:var(--x-flow-layout-columns-toolbar-aside,row nowrap);justify-content:var(--x-size-justify-layout-columns-toolbar-aside,flex-start)}.x-layout__toolbar-body[data-v-5319aaa7]{grid-column:toolbar-body}.x-layout__toolbar-body.x-list[data-v-5319aaa7]{align-items:var(--x-size-align-layout-columns-toolbar-body,center);flex-flow:var(--x-flow-layout-columns-toolbar-body,row nowrap);justify-content:var(--x-size-justify-layout-columns-toolbar-body,flex-end)}.x-layout__main[data-v-5319aaa7]{background-color:var(--x-color-background-layout-columns-main,transparent);border-color:var(--x-color-border-layout-columns-main,transparent);border-style:solid;border-width:var(--x-size-border-width-layout-columns-main,0);display:flex;flex-flow:row nowrap;grid-column:page;grid-row:main;justify-content:stretch;margin-bottom:var(--x-size-margin-bottom-layout-columns-main,0);margin-top:var(--x-size-margin-top-layout-columns-main,0);min-height:0;padding-bottom:var(--x-size-padding-bottom-layout-columns-main,0);padding-left:calc(var(--x-size-margin-layout-columns) + var(--x-size-gap-default));padding-top:var(--x-size-padding-top-layout-columns-main,0)}.x-layout__collapse-aside[data-v-5319aaa7]{width:calc((100% - var(--x-size-gap-default)*(var(--x-number-columns-layout-columns, 5)) - var(--x-size-margin-layout-columns))/var(--x-number-columns-layout-columns, 5) + var(--x-size-gap-default))}.x-layout__aside-scroll[data-v-5319aaa7]{height:100%;margin-right:var(--x-size-gap-default)}.x-layout__body-scroll[data-v-5319aaa7]{flex:1 1 auto;padding-right:calc(var(--x-size-margin-layout-columns) + var(--x-size-gap-default) - 16px);width:0}.x-layout__body-scroll.x-scroll[data-v-5319aaa7]{overflow-y:scroll}.x-layout__main-body[data-v-5319aaa7]{overflow-x:hidden}.x-layout__scroll-to-top[data-v-5319aaa7]{display:flex;grid-area:scroll-to-top;justify-content:flex-end;pointer-events:none;width:100%;z-index:1}[dir=ltr] .x-layout__scroll-to-top-content[data-v-5319aaa7]{padding-left:var(--x-size-margin-left-layout-columns-scroll-to-top,10px)}[dir=rtl] .x-layout__scroll-to-top-content[data-v-5319aaa7]{padding-right:var(--x-size-margin-left-layout-columns-scroll-to-top,10px)}.x-layout__scroll-to-top-content[data-v-5319aaa7]{flex:1 0 auto;padding-bottom:var(--x-size-margin-bottom-layout-columns-scroll-to-top,10px)}.x-layout__scroll-to-top-content[data-v-5319aaa7]>*{pointer-events:all}";
+var css = ".dev-mode .slot-helper[data-v-5319aaa7]{align-items:center;border:1px dashed grey;border-radius:10px;box-sizing:border-box;color:grey;display:flex;font-family:inherit;height:100%;justify-content:center;width:100%}.x-layout[data-v-5319aaa7]{--x-size-gap-default:var(--x-size-column-gap-layout-columns,20px);--x-size-margin-max-width:calc((100vw - var(--x-size-max-width-layout-columns, 1440px))/2);--x-size-margin-layout-columns:max(var(--x-size-min-margin-layout-columns,20px),var(--x-size-margin-max-width));--x-number-columns-header-middle:calc(var(--x-number-columns-layout-columns, 5) - 2);--x-number-columns-sub-header-content:var(--x-number-columns-header-middle);--x-number-columns-toolbar-body:calc(var(--x-number-columns-layout-columns, 5) - 1);align-content:stretch;display:grid;grid-template-columns:[page-start] 1fr [scroll-to-top-start] calc(var(--x-size-margin-layout-columns) + var(--x-size-gap-default)) [scroll-to-top-end page-end];grid-template-rows:[page-start header-start] auto [header-end sub-header-start] auto [sub-header-end toolbar-start] auto [toolbar-end main-start] 1fr [scroll-to-top-start] auto [main-end scroll-to-top-end page-end];max-height:100%}.x-layout__header[data-v-5319aaa7]{background-color:var(--x-color-background-layout-columns-header,transparent);border-color:var(--x-color-border-layout-columns-header,transparent);border-style:solid;border-width:var(--x-size-border-width-layout-columns-header,0);column-gap:var(--x-size-gap-default);display:grid;grid-column:page;grid-row:header;grid-template-columns:[header-start] var(--x-size-margin-layout-columns) [start-content-start] 1fr [start-content-end middle-content-start] repeat(var(--x-number-columns-header-middle),1fr) [middle-content-end end-content-start] 1fr [end-content-end] var(--x-size-margin-layout-columns) [header-end];margin-block-end:var(--x-size-margin-bottom-layout-columns-header,0);margin-block-start:var(--x-size-margin-top-layout-columns-header,0);padding-block-end:var(--x-size-padding-bottom-layout-columns-header,0);padding-block-start:var(--x-size-padding-top-layout-columns-header,0)}.x-layout__header-start[data-v-5319aaa7]{grid-column:start-content}.x-layout__header-start.x-list[data-v-5319aaa7]{align-items:var(--x-size-align-layout-columns-header-start,flex start);flex-flow:var(--x-flow-layout-columns-header-start,row nowrap);justify-content:var(--x-size-justify-layout-columns-header-start,flex start)}.x-layout__header-middle[data-v-5319aaa7]{grid-column:middle-content}.x-layout__header-middle.x-list[data-v-5319aaa7]{align-items:var(--x-size-align-layout-columns-header-middle,flex start);flex-flow:var(--x-flow-layout-columns-header-middle,row nowrap);justify-content:var(--x-size-justify-layout-columns-header-middle,center)}.x-layout__header-end[data-v-5319aaa7]{grid-column:end-content}.x-layout__header-end.x-list[data-v-5319aaa7]{align-items:var(--x-size-align-layout-columns-header-end,flex-start);flex-flow:var(--x-flow-layout-columns-header-end,row nowrap);justify-content:var(--x-size-justify-layout-columns-header-end,flex-end)}.x-layout__sub-header[data-v-5319aaa7]{background-color:var(--x-color-background-layout-columns-sub-header,transparent);border-color:var(--x-color-border-layout-columns-sub-header,transparent);border-style:solid;border-width:var(--x-size-border-width-layout-columns-sub-header,0);column-gap:var(--x-size-gap-default);display:grid;grid-column:page;grid-row:sub-header;grid-template-columns:[sub-header-start] var(--x-size-margin-layout-columns) 1fr [sub-header-content-start] repeat(var(--x-number-columns-sub-header-content),1fr) [sub-header-content-end] 1fr var(--x-size-margin-layout-columns) [sub-header-end];margin-block-end:var(--x-size-margin-bottom-layout-columns-sub-header,0);margin-block-start:var(--x-size-margin-top-layout-columns-sub-header,0);padding-block-end:var(--x-size-padding-bottom-layout-columns-sub-header),0;padding-block-start:var(--x-size-padding-top-layout-columns-sub-header,0)}.x-layout__sub-header-content[data-v-5319aaa7]{grid-column:sub-header-content}.x-layout__sub-header-content.x-list[data-v-5319aaa7]{align-items:var(--x-size-align-layout-columns-sub-header,flex-start);flex-flow:var(--x-flow-layout-columns-sub-header,row nowrap);justify-content:var(--x-size-justify-layout-columns-sub-header,flex-start)}.x-layout__toolbar[data-v-5319aaa7]{background-color:var(--x-color-background-layout-columns-toolbar,transparent);border-color:var(--x-color-border-layout-columns-toolbar,transparent);border-style:solid;border-width:var(--x-size-border-width-layout-columns-toolbar,0);column-gap:var(--x-size-gap-default);display:grid;grid-column:page;grid-row:toolbar;grid-template-columns:[toolbar-start] var(--x-size-margin-layout-columns) [toolbar-aside-start] 1fr [toolbar-aside-end toolbar-body-start] repeat(var(--x-number-columns-toolbar-body),1fr) [toolbar-body-end] var(--x-size-margin-layout-columns) [toolbar-end];margin-block-end:var(--x-size-margin-bottom-layout-columns-toolbar,0);margin-block-start:var(--x-size-margin-top-layout-columns-toolbar,0);padding-block-end:var(--x-size-padding-bottom-layout-columns-toolbar,0);padding-block-start:var(--x-size-padding-top-layout-columns-toolbar,0)}.x-layout__toolbar-aside[data-v-5319aaa7]{grid-column:toolbar-aside}.x-layout__toolbar-aside.x-list[data-v-5319aaa7]{align-items:var(--x-size-align-layout-columns-toolbar-aside,center);flex-flow:var(--x-flow-layout-columns-toolbar-aside,row nowrap);justify-content:var(--x-size-justify-layout-columns-toolbar-aside,flex-start)}.x-layout__toolbar-body[data-v-5319aaa7]{grid-column:toolbar-body}.x-layout__toolbar-body.x-list[data-v-5319aaa7]{align-items:var(--x-size-align-layout-columns-toolbar-body,center);flex-flow:var(--x-flow-layout-columns-toolbar-body,row nowrap);justify-content:var(--x-size-justify-layout-columns-toolbar-body,flex-end)}.x-layout__main[data-v-5319aaa7]{background-color:var(--x-color-background-layout-columns-main,transparent);border-color:var(--x-color-border-layout-columns-main,transparent);border-style:solid;border-width:var(--x-size-border-width-layout-columns-main,0);display:flex;flex-flow:row nowrap;grid-column:page;grid-row:main;justify-content:stretch;margin-block-end:var(--x-size-margin-bottom-layout-columns-main,0);margin-block-start:var(--x-size-margin-top-layout-columns-main,0);min-height:0;padding-left:calc(var(--x-size-margin-layout-columns) + var(--x-size-gap-default));padding-block-end:var(--x-size-padding-bottom-layout-columns-main,0);padding-block-start:var(--x-size-padding-top-layout-columns-main,0)}.x-layout__collapse-aside[data-v-5319aaa7]{width:calc((100% - var(--x-size-gap-default)*(var(--x-number-columns-layout-columns, 5)) - var(--x-size-margin-layout-columns))/var(--x-number-columns-layout-columns, 5) + var(--x-size-gap-default))}.x-layout__aside-scroll[data-v-5319aaa7]{height:100%;margin-right:var(--x-size-gap-default)}.x-layout__body-scroll[data-v-5319aaa7]{flex:1 1 auto;padding-right:calc(var(--x-size-margin-layout-columns) + var(--x-size-gap-default) - 16px);width:0}.x-layout__body-scroll.x-scroll[data-v-5319aaa7]{overflow-y:scroll}.x-layout__main-body[data-v-5319aaa7]{overflow-x:hidden}.x-layout__scroll-to-top[data-v-5319aaa7]{display:flex;grid-area:scroll-to-top;justify-content:flex-end;pointer-events:none;width:100%;z-index:1}.x-layout__scroll-to-top-content[data-v-5319aaa7]{flex:1 0 auto;padding-block-end:var(--x-size-margin-bottom-layout-columns-scroll-to-top,10px);padding-inline-start:var(--x-size-margin-left-layout-columns-scroll-to-top,10px)}.x-layout__scroll-to-top-content[data-v-5319aaa7]>*{pointer-events:all}";
 injectCss(css);
 
 export { css };

package/js/components/layouts/single-column-layout.vue3.js

@@ -1,6 +1,6 @@
 import injectCss from '../../../tools/inject-css.js';
 
-var css = ".dev-mode .slot-helper[data-v-9dd00b61]{align-items:center;border:1px dashed grey;border-radius:10px;box-sizing:border-box;color:grey;display:flex;font-family:inherit;height:100%;justify-content:center;width:100%}.x-layout[data-v-9dd00b61]{align-content:stretch;display:grid;grid-template-columns:1fr;grid-template-rows:[page-start header-start] auto [header-end sub-header-start] auto [sub-header-end toolbar-start] auto [toolbar-end main-start] 1fr [floating-start] auto [main-end floating-end footer-start] auto [footer-end page-end];height:100%;justify-content:stretch}.x-layout[data-v-9dd00b61]>*{display:flex;grid-column:1/-1;min-height:0;min-width:0}.x-layout__header[data-v-9dd00b61]{grid-row:header;z-index:1}.x-layout__sub-header[data-v-9dd00b61]{grid-row:sub-header;z-index:1}.x-layout__toolbar[data-v-9dd00b61]{grid-row:toolbar;z-index:1}.x-layout__predictive[data-v-9dd00b61]{flex-flow:column nowrap;grid-row-end:page-end;grid-row-start:header-end;z-index:2}.x-layout__main[data-v-9dd00b61]{flex-flow:column nowrap;grid-row:main}.x-layout__floating[data-v-9dd00b61]{grid-row:floating;z-index:1}.x-layout__footer[data-v-9dd00b61]{grid-row:footer}.x-layout__aside[data-v-9dd00b61]{grid-row:page;z-index:3}[dir=ltr] .x-layout[data-v-9dd00b61] .x-layout__aside .x-modal__content{margin-left:var(--x-size-margin-left-layout-single-column,0)}[dir=rtl] .x-layout[data-v-9dd00b61] .x-layout__aside .x-modal__content{margin-right:var(--x-size-margin-left-layout-single-column,0)}.x-layout[data-v-9dd00b61] .x-layout__aside .x-modal__content{height:100%;width:100%}.x-layout[data-v-9dd00b61] .x-layout__aside>:not(.slot-helper){pointer-events:all}";
+var css = ".dev-mode .slot-helper[data-v-9dd00b61]{align-items:center;border:1px dashed grey;border-radius:10px;box-sizing:border-box;color:grey;display:flex;font-family:inherit;height:100%;justify-content:center;width:100%}.x-layout[data-v-9dd00b61]{align-content:stretch;display:grid;grid-template-columns:1fr;grid-template-rows:[page-start header-start] auto [header-end sub-header-start] auto [sub-header-end toolbar-start] auto [toolbar-end main-start] 1fr [floating-start] auto [main-end floating-end footer-start] auto [footer-end page-end];height:100%;justify-content:stretch}.x-layout[data-v-9dd00b61]>*{display:flex;grid-column:1/-1;min-height:0;min-width:0}.x-layout__header[data-v-9dd00b61]{grid-row:header;z-index:1}.x-layout__sub-header[data-v-9dd00b61]{grid-row:sub-header;z-index:1}.x-layout__toolbar[data-v-9dd00b61]{grid-row:toolbar;z-index:1}.x-layout__predictive[data-v-9dd00b61]{flex-flow:column nowrap;grid-row-end:page-end;grid-row-start:header-end;z-index:2}.x-layout__main[data-v-9dd00b61]{flex-flow:column nowrap;grid-row:main}.x-layout__floating[data-v-9dd00b61]{grid-row:floating;z-index:1}.x-layout__footer[data-v-9dd00b61]{grid-row:footer}.x-layout__aside[data-v-9dd00b61]{grid-row:page;z-index:3}.x-layout[data-v-9dd00b61] .x-layout__aside .x-modal__content{height:100%;margin-inline-start:var(--x-size-margin-left-layout-single-column,0);width:100%}.x-layout[data-v-9dd00b61] .x-layout__aside>:not(.slot-helper){pointer-events:all}";
 injectCss(css);
 
 export { css };

package/js/components/modals/base-events-modal-close.vue.js

@@ -6,7 +6,7 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_BaseEventButton = resolveComponent("BaseEventButton");
   return openBlock(), createBlock(_component_BaseEventButton, {
     events: _ctx.events,
-    class: "x-events-modal-close-button x-button",
+    class: "x-events-modal-close-button xds:button",
     "data-test": "close-modal",
     "aria-label": "Close"
   }, {

package/js/components/modals/base-events-modal-close.vue.js.map

@@ -1 +1 @@
-{"version":3,"file":"base-events-modal-close.vue.js","sources":["../../../../src/components/modals/base-events-modal-close.vue"],"sourcesContent":["<template>\n  <BaseEventButton\n    :events=\"events\"\n    class=\"x-events-modal-close-button x-button\"\n    data-test=\"close-modal\"\n    aria-label=\"Close\"\n  >\n    <!-- @slot (Required) Button content with a text, an icon or both -->\n    <slot />\n  </BaseEventButton>\n</template>\n\n<script lang=\"ts\">\nimport type { PropType } from 'vue'\nimport type { PropsWithType } from '../../utils/types'\nimport type { XEventsTypes } from '../../wiring/events.types'\nimport { computed, defineComponent } from 'vue'\nimport BaseEventButton from '../base-event-button.vue'\n\n/**\n * Component contains an event button that emits {@link XEventsTypes.UserClickedCloseEventsModal}\n * when clicked. It has a default slot to customize its contents.\n *\n * @public\n */\nexport default defineComponent({\n  components: {\n    BaseEventButton,\n  },\n  props: {\n    /**\n     * Event name to use for closing the modal.\n     *\n     * @public\n     */\n    closingEvent: {\n      type: String as PropType<PropsWithType<XEventsTypes, void>>,\n      default: 'UserClickedCloseEventsModal',\n    },\n  },\n  setup(props) {\n    const events = computed<Partial<XEventsTypes>>(() => ({ [props.closingEvent]: undefined }))\n    return {\n      events,\n    }\n  },\n})\n</script>\n\n<docs lang=\"mdx\">\n## Events\n\nA list of events that the component will emit:\n\n- [`UserClickedCloseEventsModal`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts):\n  the event is emitted after the user clicks the button.\n\n## Examples\n\nThe `BaseEventsModalClose` component can be used to close the `BaseEventsModal` component.\n\n### Basic example\n\nOn click, the component closes the `BaseEventsModal`. The only required part is the content that\nthe button should render, which can be anything: text, image, icon, or a combination.\n\n```vue\n<template>\n  <BaseEventsModalClose>\n    <img src=\"./close-button-icon.svg\" />\n  </BaseEventsModalClose>\n</template>\n\n<script setup>\nimport { BaseEventsModalClose } from '@empathyco/x-components'\n</script>\n```\n\n### Defining another event to emit when clicking the button\n\nBy default, it uses the same `closingEvent` that the `BaseEventsModal` is listening to. This event can be changed using the `closingEvent` prop.\n\n```vue\n<template>\n  <BaseEventsModalClose closingEvent=\"UserClosedEmpathize\">×</BaseEventsModalClose>\n</template>\n\n<script setup>\nimport { BaseEventsModalClose } from '@empathyco/x-components'\n</script>\n```\n</docs>\n"],"names":["_createBlock","_renderSlot"],"mappings":";;;;;;sBACEA,WAAA,CAQkB,0BAAA,EAAA;AAAA,IAPf,MAAA,EAAQ,IAAA,CAAA,MAAA;AAAA,IACT,KAAA,EAAM,sCAAA;AAAA,IACN,WAAA,EAAU,aAAA;AAAA,IACV,YAAA,EAAW;AAAA,GAAA,EAAA;qBAGX,MAAQ;AAAA,MAARC,UAAA,CAAQ,IAAA,CAAA,MAAA,EAAA,SAAA;AAAA,KAAA,CAAA;;;;;;;;;"}
+{"version":3,"file":"base-events-modal-close.vue.js","sources":["../../../../src/components/modals/base-events-modal-close.vue"],"sourcesContent":["<template>\n  <BaseEventButton\n    :events=\"events\"\n    class=\"x-events-modal-close-button xds:button\"\n    data-test=\"close-modal\"\n    aria-label=\"Close\"\n  >\n    <!-- @slot (Required) Button content with a text, an icon or both -->\n    <slot />\n  </BaseEventButton>\n</template>\n\n<script lang=\"ts\">\nimport type { PropType } from 'vue'\nimport type { PropsWithType } from '../../utils/types'\nimport type { XEventsTypes } from '../../wiring/events.types'\nimport { computed, defineComponent } from 'vue'\nimport BaseEventButton from '../base-event-button.vue'\n\n/**\n * Component contains an event button that emits {@link XEventsTypes.UserClickedCloseEventsModal}\n * when clicked. It has a default slot to customize its contents.\n *\n * @public\n */\nexport default defineComponent({\n  components: {\n    BaseEventButton,\n  },\n  props: {\n    /**\n     * Event name to use for closing the modal.\n     *\n     * @public\n     */\n    closingEvent: {\n      type: String as PropType<PropsWithType<XEventsTypes, void>>,\n      default: 'UserClickedCloseEventsModal',\n    },\n  },\n  setup(props) {\n    const events = computed<Partial<XEventsTypes>>(() => ({ [props.closingEvent]: undefined }))\n    return {\n      events,\n    }\n  },\n})\n</script>\n\n<docs lang=\"mdx\">\n## Events\n\nA list of events that the component will emit:\n\n- [`UserClickedCloseEventsModal`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts):\n  the event is emitted after the user clicks the button.\n\n## Examples\n\nThe `BaseEventsModalClose` component can be used to close the `BaseEventsModal` component.\n\n### Basic example\n\nOn click, the component closes the `BaseEventsModal`. The only required part is the content that\nthe button should render, which can be anything: text, image, icon, or a combination.\n\n```vue\n<template>\n  <BaseEventsModalClose>\n    <img src=\"./close-button-icon.svg\" />\n  </BaseEventsModalClose>\n</template>\n\n<script setup>\nimport { BaseEventsModalClose } from '@empathyco/x-components'\n</script>\n```\n\n### Defining another event to emit when clicking the button\n\nBy default, it uses the same `closingEvent` that the `BaseEventsModal` is listening to. This event can be changed using the `closingEvent` prop.\n\n```vue\n<template>\n  <BaseEventsModalClose closingEvent=\"UserClosedEmpathize\">×</BaseEventsModalClose>\n</template>\n\n<script setup>\nimport { BaseEventsModalClose } from '@empathyco/x-components'\n</script>\n```\n</docs>\n"],"names":["_createBlock","_renderSlot"],"mappings":";;;;;;sBACEA,WAAA,CAQkB,0BAAA,EAAA;AAAA,IAPf,MAAA,EAAQ,IAAA,CAAA,MAAA;AAAA,IACT,KAAA,EAAM,wCAAA;AAAA,IACN,WAAA,EAAU,aAAA;AAAA,IACV,YAAA,EAAW;AAAA,GAAA,EAAA;qBAGX,MAAQ;AAAA,MAARC,UAAA,CAAQ,IAAA,CAAA,MAAA,EAAA,SAAA;AAAA,KAAA,CAAA;;;;;;;;;"}

package/js/components/modals/base-events-modal-close.vue2.js.map

@@ -1 +1 @@
-{"version":3,"file":"base-events-modal-close.vue2.js","sources":["../../../../src/components/modals/base-events-modal-close.vue"],"sourcesContent":["<template>\n  <BaseEventButton\n    :events=\"events\"\n    class=\"x-events-modal-close-button x-button\"\n    data-test=\"close-modal\"\n    aria-label=\"Close\"\n  >\n    <!-- @slot (Required) Button content with a text, an icon or both -->\n    <slot />\n  </BaseEventButton>\n</template>\n\n<script lang=\"ts\">\nimport type { PropType } from 'vue'\nimport type { PropsWithType } from '../../utils/types'\nimport type { XEventsTypes } from '../../wiring/events.types'\nimport { computed, defineComponent } from 'vue'\nimport BaseEventButton from '../base-event-button.vue'\n\n/**\n * Component contains an event button that emits {@link XEventsTypes.UserClickedCloseEventsModal}\n * when clicked. It has a default slot to customize its contents.\n *\n * @public\n */\nexport default defineComponent({\n  components: {\n    BaseEventButton,\n  },\n  props: {\n    /**\n     * Event name to use for closing the modal.\n     *\n     * @public\n     */\n    closingEvent: {\n      type: String as PropType<PropsWithType<XEventsTypes, void>>,\n      default: 'UserClickedCloseEventsModal',\n    },\n  },\n  setup(props) {\n    const events = computed<Partial<XEventsTypes>>(() => ({ [props.closingEvent]: undefined }))\n    return {\n      events,\n    }\n  },\n})\n</script>\n\n<docs lang=\"mdx\">\n## Events\n\nA list of events that the component will emit:\n\n- [`UserClickedCloseEventsModal`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts):\n  the event is emitted after the user clicks the button.\n\n## Examples\n\nThe `BaseEventsModalClose` component can be used to close the `BaseEventsModal` component.\n\n### Basic example\n\nOn click, the component closes the `BaseEventsModal`. The only required part is the content that\nthe button should render, which can be anything: text, image, icon, or a combination.\n\n```vue\n<template>\n  <BaseEventsModalClose>\n    <img src=\"./close-button-icon.svg\" />\n  </BaseEventsModalClose>\n</template>\n\n<script setup>\nimport { BaseEventsModalClose } from '@empathyco/x-components'\n</script>\n```\n\n### Defining another event to emit when clicking the button\n\nBy default, it uses the same `closingEvent` that the `BaseEventsModal` is listening to. This event can be changed using the `closingEvent` prop.\n\n```vue\n<template>\n  <BaseEventsModalClose closingEvent=\"UserClosedEmpathize\">×</BaseEventsModalClose>\n</template>\n\n<script setup>\nimport { BaseEventsModalClose } from '@empathyco/x-components'\n</script>\n```\n</docs>\n"],"names":[],"mappings":";;;AAmBA;;;;;AAKE;AACF,gBAAe,eAAe,CAAC;AAC7B,IAAA,UAAU,EAAE;QACV,eAAe;AAChB,KAAA;AACD,IAAA,KAAK,EAAE;AACL;;;;AAIE;AACF,QAAA,YAAY,EAAE;AACZ,YAAA,IAAI,EAAE,MAAqD;AAC3D,YAAA,OAAO,EAAE,6BAA6B;AACvC,SAAA;AACF,KAAA;AACD,IAAA,KAAK,CAAC,KAAK,EAAA;AACT,QAAA,MAAM,MAAK,GAAI,QAAQ,CAAwB,OAAO,EAAE,CAAC,KAAK,CAAC,YAAY,GAAG,SAAQ,EAAG,CAAC,CAAA;QAC1F,OAAO;YACL,MAAM;SACR;IACF,CAAC;AACF,CAAA,CAAA;;;;"}
+{"version":3,"file":"base-events-modal-close.vue2.js","sources":["../../../../src/components/modals/base-events-modal-close.vue"],"sourcesContent":["<template>\n  <BaseEventButton\n    :events=\"events\"\n    class=\"x-events-modal-close-button xds:button\"\n    data-test=\"close-modal\"\n    aria-label=\"Close\"\n  >\n    <!-- @slot (Required) Button content with a text, an icon or both -->\n    <slot />\n  </BaseEventButton>\n</template>\n\n<script lang=\"ts\">\nimport type { PropType } from 'vue'\nimport type { PropsWithType } from '../../utils/types'\nimport type { XEventsTypes } from '../../wiring/events.types'\nimport { computed, defineComponent } from 'vue'\nimport BaseEventButton from '../base-event-button.vue'\n\n/**\n * Component contains an event button that emits {@link XEventsTypes.UserClickedCloseEventsModal}\n * when clicked. It has a default slot to customize its contents.\n *\n * @public\n */\nexport default defineComponent({\n  components: {\n    BaseEventButton,\n  },\n  props: {\n    /**\n     * Event name to use for closing the modal.\n     *\n     * @public\n     */\n    closingEvent: {\n      type: String as PropType<PropsWithType<XEventsTypes, void>>,\n      default: 'UserClickedCloseEventsModal',\n    },\n  },\n  setup(props) {\n    const events = computed<Partial<XEventsTypes>>(() => ({ [props.closingEvent]: undefined }))\n    return {\n      events,\n    }\n  },\n})\n</script>\n\n<docs lang=\"mdx\">\n## Events\n\nA list of events that the component will emit:\n\n- [`UserClickedCloseEventsModal`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts):\n  the event is emitted after the user clicks the button.\n\n## Examples\n\nThe `BaseEventsModalClose` component can be used to close the `BaseEventsModal` component.\n\n### Basic example\n\nOn click, the component closes the `BaseEventsModal`. The only required part is the content that\nthe button should render, which can be anything: text, image, icon, or a combination.\n\n```vue\n<template>\n  <BaseEventsModalClose>\n    <img src=\"./close-button-icon.svg\" />\n  </BaseEventsModalClose>\n</template>\n\n<script setup>\nimport { BaseEventsModalClose } from '@empathyco/x-components'\n</script>\n```\n\n### Defining another event to emit when clicking the button\n\nBy default, it uses the same `closingEvent` that the `BaseEventsModal` is listening to. This event can be changed using the `closingEvent` prop.\n\n```vue\n<template>\n  <BaseEventsModalClose closingEvent=\"UserClosedEmpathize\">×</BaseEventsModalClose>\n</template>\n\n<script setup>\nimport { BaseEventsModalClose } from '@empathyco/x-components'\n</script>\n```\n</docs>\n"],"names":[],"mappings":";;;AAmBA;;;;;AAKE;AACF,gBAAe,eAAe,CAAC;AAC7B,IAAA,UAAU,EAAE;QACV,eAAe;AAChB,KAAA;AACD,IAAA,KAAK,EAAE;AACL;;;;AAIE;AACF,QAAA,YAAY,EAAE;AACZ,YAAA,IAAI,EAAE,MAAqD;AAC3D,YAAA,OAAO,EAAE,6BAA6B;AACvC,SAAA;AACF,KAAA;AACD,IAAA,KAAK,CAAC,KAAK,EAAA;AACT,QAAA,MAAM,MAAK,GAAI,QAAQ,CAAwB,OAAO,EAAE,CAAC,KAAK,CAAC,YAAY,GAAG,SAAQ,EAAG,CAAC,CAAA;QAC1F,OAAO;YACL,MAAM;SACR;IACF,CAAC;AACF,CAAA,CAAA;;;;"}

package/js/components/modals/base-events-modal-open.vue.js

@@ -6,7 +6,7 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_BaseEventButton = resolveComponent("BaseEventButton");
   return openBlock(), createBlock(_component_BaseEventButton, {
     events: _ctx.events,
-    class: "x-events-modal-open-button x-button",
+    class: "x-events-modal-open-button xds:button",
     "data-test": "open-modal",
     "aria-label": "Open"
   }, {

package/js/components/modals/base-events-modal-open.vue.js.map

@@ -1 +1 @@
-{"version":3,"file":"base-events-modal-open.vue.js","sources":["../../../../src/components/modals/base-events-modal-open.vue"],"sourcesContent":["<template>\n  <BaseEventButton\n    :events=\"events\"\n    class=\"x-events-modal-open-button x-button\"\n    data-test=\"open-modal\"\n    aria-label=\"Open\"\n  >\n    <!-- @slot (Required) Button content with a text, an icon or both -->\n    <slot />\n  </BaseEventButton>\n</template>\n\n<script lang=\"ts\">\nimport type { PropType } from 'vue'\nimport type { PropsWithType } from '../../utils/types'\nimport type { XEventsTypes } from '../../wiring/events.types'\nimport { computed, defineComponent } from 'vue'\nimport BaseEventButton from '../base-event-button.vue'\n\n/**\n * Component contains an event button that emits {@link XEventsTypes.UserClickedOpenEventsModal}\n * when clicked. It has a default slot to customize its contents.\n *\n * @public\n */\nexport default defineComponent({\n  components: {\n    BaseEventButton,\n  },\n  props: {\n    /**\n     * Event name to use for opening the modal.\n     *\n     * @public\n     */\n    openingEvent: {\n      type: String as PropType<PropsWithType<XEventsTypes, void>>,\n      default: 'UserClickedOpenEventsModal',\n    },\n  },\n  setup(props) {\n    const events = computed<Partial<XEventsTypes>>(() => ({ [props.openingEvent]: undefined }))\n\n    return {\n      events,\n    }\n  },\n})\n</script>\n\n<docs lang=\"mdx\">\n## Events\n\nA list of events that the component will emit:\n\n- [`UserClickedOpenEventsModal`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts):\n  the event is emitted after the user clicks the button.\n\n## Examples\n\nThis component serves to open the `BaseEventsModal`.\n\n### Basic example\n\nOn click, the component opens the `BaseEventsModal`. The only required part is the content that\nthe button should render, which can be anything: text, image, icon, or a combination.\n\n```vue\n<template>\n  <BaseEventsModalOpen>\n    <img src=\"./open-button-icon.svg\" />\n    <span>Open</span>\n  </BaseEventsModalOpen>\n</template>\n\n<script setup>\nimport { BaseEventsModalOpen } from '@empathyco/x-components'\n</script>\n```\n\n### Defining another event to emit when clicking the button\n\nBy default, it uses the same `openingEvent` that the `BaseEventsModal` is listening to by default.\nThis event can be changed using the `openingEvent` prop, but remember to change it in the target `BaseEventsModal` too.\n\n```vue\n<template>\n  <BaseEventsModalOpen openingEvent=\"UserOpenedEmpathize\">\n    <span>Open</span>\n  </BaseEventsModalOpen>\n</template>\n\n<script setup>\nimport { BaseEventsModalOpen } from '@empathyco/x-components'\n</script>\n```\n</docs>\n"],"names":["_createBlock","_renderSlot"],"mappings":";;;;;;sBACEA,WAAA,CAQkB,0BAAA,EAAA;AAAA,IAPf,MAAA,EAAQ,IAAA,CAAA,MAAA;AAAA,IACT,KAAA,EAAM,qCAAA;AAAA,IACN,WAAA,EAAU,YAAA;AAAA,IACV,YAAA,EAAW;AAAA,GAAA,EAAA;qBAGX,MAAQ;AAAA,MAARC,UAAA,CAAQ,IAAA,CAAA,MAAA,EAAA,SAAA;AAAA,KAAA,CAAA;;;;;;;;;"}
+{"version":3,"file":"base-events-modal-open.vue.js","sources":["../../../../src/components/modals/base-events-modal-open.vue"],"sourcesContent":["<template>\n  <BaseEventButton\n    :events=\"events\"\n    class=\"x-events-modal-open-button xds:button\"\n    data-test=\"open-modal\"\n    aria-label=\"Open\"\n  >\n    <!-- @slot (Required) Button content with a text, an icon or both -->\n    <slot />\n  </BaseEventButton>\n</template>\n\n<script lang=\"ts\">\nimport type { PropType } from 'vue'\nimport type { PropsWithType } from '../../utils/types'\nimport type { XEventsTypes } from '../../wiring/events.types'\nimport { computed, defineComponent } from 'vue'\nimport BaseEventButton from '../base-event-button.vue'\n\n/**\n * Component contains an event button that emits {@link XEventsTypes.UserClickedOpenEventsModal}\n * when clicked. It has a default slot to customize its contents.\n *\n * @public\n */\nexport default defineComponent({\n  components: {\n    BaseEventButton,\n  },\n  props: {\n    /**\n     * Event name to use for opening the modal.\n     *\n     * @public\n     */\n    openingEvent: {\n      type: String as PropType<PropsWithType<XEventsTypes, void>>,\n      default: 'UserClickedOpenEventsModal',\n    },\n  },\n  setup(props) {\n    const events = computed<Partial<XEventsTypes>>(() => ({ [props.openingEvent]: undefined }))\n\n    return {\n      events,\n    }\n  },\n})\n</script>\n\n<docs lang=\"mdx\">\n## Events\n\nA list of events that the component will emit:\n\n- [`UserClickedOpenEventsModal`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts):\n  the event is emitted after the user clicks the button.\n\n## Examples\n\nThis component serves to open the `BaseEventsModal`.\n\n### Basic example\n\nOn click, the component opens the `BaseEventsModal`. The only required part is the content that\nthe button should render, which can be anything: text, image, icon, or a combination.\n\n```vue\n<template>\n  <BaseEventsModalOpen>\n    <img src=\"./open-button-icon.svg\" />\n    <span>Open</span>\n  </BaseEventsModalOpen>\n</template>\n\n<script setup>\nimport { BaseEventsModalOpen } from '@empathyco/x-components'\n</script>\n```\n\n### Defining another event to emit when clicking the button\n\nBy default, it uses the same `openingEvent` that the `BaseEventsModal` is listening to by default.\nThis event can be changed using the `openingEvent` prop, but remember to change it in the target `BaseEventsModal` too.\n\n```vue\n<template>\n  <BaseEventsModalOpen openingEvent=\"UserOpenedEmpathize\">\n    <span>Open</span>\n  </BaseEventsModalOpen>\n</template>\n\n<script setup>\nimport { BaseEventsModalOpen } from '@empathyco/x-components'\n</script>\n```\n</docs>\n"],"names":["_createBlock","_renderSlot"],"mappings":";;;;;;sBACEA,WAAA,CAQkB,0BAAA,EAAA;AAAA,IAPf,MAAA,EAAQ,IAAA,CAAA,MAAA;AAAA,IACT,KAAA,EAAM,uCAAA;AAAA,IACN,WAAA,EAAU,YAAA;AAAA,IACV,YAAA,EAAW;AAAA,GAAA,EAAA;qBAGX,MAAQ;AAAA,MAARC,UAAA,CAAQ,IAAA,CAAA,MAAA,EAAA,SAAA;AAAA,KAAA,CAAA;;;;;;;;;"}

package/js/components/modals/base-events-modal-open.vue2.js.map

@@ -1 +1 @@
-{"version":3,"file":"base-events-modal-open.vue2.js","sources":["../../../../src/components/modals/base-events-modal-open.vue"],"sourcesContent":["<template>\n  <BaseEventButton\n    :events=\"events\"\n    class=\"x-events-modal-open-button x-button\"\n    data-test=\"open-modal\"\n    aria-label=\"Open\"\n  >\n    <!-- @slot (Required) Button content with a text, an icon or both -->\n    <slot />\n  </BaseEventButton>\n</template>\n\n<script lang=\"ts\">\nimport type { PropType } from 'vue'\nimport type { PropsWithType } from '../../utils/types'\nimport type { XEventsTypes } from '../../wiring/events.types'\nimport { computed, defineComponent } from 'vue'\nimport BaseEventButton from '../base-event-button.vue'\n\n/**\n * Component contains an event button that emits {@link XEventsTypes.UserClickedOpenEventsModal}\n * when clicked. It has a default slot to customize its contents.\n *\n * @public\n */\nexport default defineComponent({\n  components: {\n    BaseEventButton,\n  },\n  props: {\n    /**\n     * Event name to use for opening the modal.\n     *\n     * @public\n     */\n    openingEvent: {\n      type: String as PropType<PropsWithType<XEventsTypes, void>>,\n      default: 'UserClickedOpenEventsModal',\n    },\n  },\n  setup(props) {\n    const events = computed<Partial<XEventsTypes>>(() => ({ [props.openingEvent]: undefined }))\n\n    return {\n      events,\n    }\n  },\n})\n</script>\n\n<docs lang=\"mdx\">\n## Events\n\nA list of events that the component will emit:\n\n- [`UserClickedOpenEventsModal`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts):\n  the event is emitted after the user clicks the button.\n\n## Examples\n\nThis component serves to open the `BaseEventsModal`.\n\n### Basic example\n\nOn click, the component opens the `BaseEventsModal`. The only required part is the content that\nthe button should render, which can be anything: text, image, icon, or a combination.\n\n```vue\n<template>\n  <BaseEventsModalOpen>\n    <img src=\"./open-button-icon.svg\" />\n    <span>Open</span>\n  </BaseEventsModalOpen>\n</template>\n\n<script setup>\nimport { BaseEventsModalOpen } from '@empathyco/x-components'\n</script>\n```\n\n### Defining another event to emit when clicking the button\n\nBy default, it uses the same `openingEvent` that the `BaseEventsModal` is listening to by default.\nThis event can be changed using the `openingEvent` prop, but remember to change it in the target `BaseEventsModal` too.\n\n```vue\n<template>\n  <BaseEventsModalOpen openingEvent=\"UserOpenedEmpathize\">\n    <span>Open</span>\n  </BaseEventsModalOpen>\n</template>\n\n<script setup>\nimport { BaseEventsModalOpen } from '@empathyco/x-components'\n</script>\n```\n</docs>\n"],"names":[],"mappings":";;;AAmBA;;;;;AAKE;AACF,gBAAe,eAAe,CAAC;AAC7B,IAAA,UAAU,EAAE;QACV,eAAe;AAChB,KAAA;AACD,IAAA,KAAK,EAAE;AACL;;;;AAIE;AACF,QAAA,YAAY,EAAE;AACZ,YAAA,IAAI,EAAE,MAAqD;AAC3D,YAAA,OAAO,EAAE,4BAA4B;AACtC,SAAA;AACF,KAAA;AACD,IAAA,KAAK,CAAC,KAAK,EAAA;AACT,QAAA,MAAM,MAAK,GAAI,QAAQ,CAAwB,OAAO,EAAE,CAAC,KAAK,CAAC,YAAY,GAAG,SAAQ,EAAG,CAAC,CAAA;QAE1F,OAAO;YACL,MAAM;SACR;IACF,CAAC;AACF,CAAA,CAAA;;;;"}
+{"version":3,"file":"base-events-modal-open.vue2.js","sources":["../../../../src/components/modals/base-events-modal-open.vue"],"sourcesContent":["<template>\n  <BaseEventButton\n    :events=\"events\"\n    class=\"x-events-modal-open-button xds:button\"\n    data-test=\"open-modal\"\n    aria-label=\"Open\"\n  >\n    <!-- @slot (Required) Button content with a text, an icon or both -->\n    <slot />\n  </BaseEventButton>\n</template>\n\n<script lang=\"ts\">\nimport type { PropType } from 'vue'\nimport type { PropsWithType } from '../../utils/types'\nimport type { XEventsTypes } from '../../wiring/events.types'\nimport { computed, defineComponent } from 'vue'\nimport BaseEventButton from '../base-event-button.vue'\n\n/**\n * Component contains an event button that emits {@link XEventsTypes.UserClickedOpenEventsModal}\n * when clicked. It has a default slot to customize its contents.\n *\n * @public\n */\nexport default defineComponent({\n  components: {\n    BaseEventButton,\n  },\n  props: {\n    /**\n     * Event name to use for opening the modal.\n     *\n     * @public\n     */\n    openingEvent: {\n      type: String as PropType<PropsWithType<XEventsTypes, void>>,\n      default: 'UserClickedOpenEventsModal',\n    },\n  },\n  setup(props) {\n    const events = computed<Partial<XEventsTypes>>(() => ({ [props.openingEvent]: undefined }))\n\n    return {\n      events,\n    }\n  },\n})\n</script>\n\n<docs lang=\"mdx\">\n## Events\n\nA list of events that the component will emit:\n\n- [`UserClickedOpenEventsModal`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts):\n  the event is emitted after the user clicks the button.\n\n## Examples\n\nThis component serves to open the `BaseEventsModal`.\n\n### Basic example\n\nOn click, the component opens the `BaseEventsModal`. The only required part is the content that\nthe button should render, which can be anything: text, image, icon, or a combination.\n\n```vue\n<template>\n  <BaseEventsModalOpen>\n    <img src=\"./open-button-icon.svg\" />\n    <span>Open</span>\n  </BaseEventsModalOpen>\n</template>\n\n<script setup>\nimport { BaseEventsModalOpen } from '@empathyco/x-components'\n</script>\n```\n\n### Defining another event to emit when clicking the button\n\nBy default, it uses the same `openingEvent` that the `BaseEventsModal` is listening to by default.\nThis event can be changed using the `openingEvent` prop, but remember to change it in the target `BaseEventsModal` too.\n\n```vue\n<template>\n  <BaseEventsModalOpen openingEvent=\"UserOpenedEmpathize\">\n    <span>Open</span>\n  </BaseEventsModalOpen>\n</template>\n\n<script setup>\nimport { BaseEventsModalOpen } from '@empathyco/x-components'\n</script>\n```\n</docs>\n"],"names":[],"mappings":";;;AAmBA;;;;;AAKE;AACF,gBAAe,eAAe,CAAC;AAC7B,IAAA,UAAU,EAAE;QACV,eAAe;AAChB,KAAA;AACD,IAAA,KAAK,EAAE;AACL;;;;AAIE;AACF,QAAA,YAAY,EAAE;AACZ,YAAA,IAAI,EAAE,MAAqD;AAC3D,YAAA,OAAO,EAAE,4BAA4B;AACtC,SAAA;AACF,KAAA;AACD,IAAA,KAAK,CAAC,KAAK,EAAA;AACT,QAAA,MAAM,MAAK,GAAI,QAAQ,CAAwB,OAAO,EAAE,CAAC,KAAK,CAAC,YAAY,GAAG,SAAQ,EAAG,CAAC,CAAA;QAE1F,OAAO;YACL,MAAM;SACR;IACF,CAAC;AACF,CAAA,CAAA;;;;"}

package/js/components/modals/base-id-modal-close.vue.js

@@ -4,7 +4,7 @@ import _export_sfc from '../../_virtual/_plugin-vue_export-helper.js';
 
 function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
   return openBlock(), createElementBlock("button", {
-    class: "x-events-modal-id-close-button x-button",
+    class: "x-events-modal-id-close-button xds:button",
     "data-test": "close-modal-id",
     onClick: _cache[0] || (_cache[0] = (...args) => _ctx.closeModal && _ctx.closeModal(...args))
   }, [

package/js/components/modals/base-id-modal-close.vue.js.map

@@ -1 +1 @@
-{"version":3,"file":"base-id-modal-close.vue.js","sources":["../../../../src/components/modals/base-id-modal-close.vue"],"sourcesContent":["<template>\n  <button\n    class=\"x-events-modal-id-close-button x-button\"\n    data-test=\"close-modal-id\"\n    @click=\"closeModal\"\n  >\n    <!-- @slot (Required) Button content with a text, an icon or both -->\n    <slot />\n  </button>\n</template>\n\n<script lang=\"ts\">\nimport { defineComponent } from 'vue'\nimport { use$x } from '../../composables'\n\n/**\n * Component that allows to close a modal by emitting\n * {@link XEventsTypes.UserClickedCloseModal}.\n * It allows full customization with the 'closing-element' slot and exposes the 'closeModal'\n * function.\n *\n * @public\n */\nexport default defineComponent({\n  name: 'BaseIdModalClose',\n  props: {\n    /** The modalId of the modal that will be closed. */\n    modalId: {\n      type: String,\n      required: true,\n    },\n  },\n  setup(props, { slots }) {\n    const $x = use$x()\n\n    /**\n     * Emits the {@link XEventsTypes.UserClickedCloseModal} event with the modalId as payload.\n     *\n     * @param event - The event triggering the function.\n     * @param event.target - Event target.\n     */\n    function closeModal({ target }: Event) {\n      $x.emit('UserClickedCloseModal', props.modalId, { target: target as HTMLElement })\n    }\n\n    /* Hack to render through a render-function, the `closing-element` slot or, in its absence,\n       the component itself. It is the alternative for the NoElement antipattern. */\n    const innerProps = { closeModal }\n    return (\n      slots['closing-element'] ? () => slots['closing-element']?.(innerProps)[0] : innerProps\n    ) as typeof innerProps\n  },\n})\n</script>\n\n<docs lang=\"mdx\">\n## Events\n\nA list of events that the component will emit:\n\n- [`UserClickedCloseModal`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts):\n  the event is emitted after the user clicks the button. The event payload is the id of the modal\n  that is going to be closed.\n\n## Examples\n\nComponent containing an event button that emits `UserClickedCloseModal` when clicked with the\nmodalId as payload. It has a default slot to customize its contents and can also be fully\ncustomized, replacing the default button with any other element.\n\n### Basic example\n\nThe component renders whatever is passed to it in the default slot inside the button and closes the\nmodal with modalId `my-modal`.\n\n```vue\n<template>\n  <BaseIdModalClose modalId=\"my-modal\">\n    <img src=\"./close-button-icon.svg\" />\n  </BaseIdModalClose>\n</template>\n\n<script setup>\nimport { BaseIdModalClose } from '@empathyco/x-components'\n</script>\n```\n\n### Replacing the default button\n\nThe component renders whatever element is passed, replacing the default button and exposing the\nfunction to close the modal with modalId `my-modal`.\n\n```vue\n<template>\n  <BaseIdModalClose modalId=\"my-modal\">\n    <template #closing-element=\"{ closeModal }\">\n      <ul>\n        <li @click=\"closeModal\">Close here</li>\n        <li>Not here</li>\n      </ul>\n    </template>\n  </BaseIdModalClose>\n</template>\n\n<script setup>\nimport { BaseIdModalClose } from '@empathyco/x-components'\n</script>\n```\n</docs>\n"],"names":["_createElementBlock","_renderSlot"],"mappings":";;;;;sBACEA,kBAAA,CAOS,QAAA,EAAA;AAAA,IANP,KAAA,EAAM,yCAAA;AAAA,IACN,WAAA,EAAU,gBAAA;AAAA,IACT,SAAK,MAAA,CAAA,CAAA,CAAA,KAAA,MAAA,CAAA,CAAA,CAAA,GAAA,CAAA,GAAA,IAAA,KAAE,IAAA,CAAA,UAAA,IAAA,IAAA,CAAA,UAAA,CAAA,GAAA,IAAA,CAAA;AAAA,GAAA,EAAA;IAGRC,UAAA,CAAQ,IAAA,CAAA,MAAA,EAAA,SAAA;AAAA,GAAA,CAAA;;;;;;"}
+{"version":3,"file":"base-id-modal-close.vue.js","sources":["../../../../src/components/modals/base-id-modal-close.vue"],"sourcesContent":["<template>\n  <button\n    class=\"x-events-modal-id-close-button xds:button\"\n    data-test=\"close-modal-id\"\n    @click=\"closeModal\"\n  >\n    <!-- @slot (Required) Button content with a text, an icon or both -->\n    <slot />\n  </button>\n</template>\n\n<script lang=\"ts\">\nimport { defineComponent } from 'vue'\nimport { use$x } from '../../composables'\n\n/**\n * Component that allows to close a modal by emitting\n * {@link XEventsTypes.UserClickedCloseModal}.\n * It allows full customization with the 'closing-element' slot and exposes the 'closeModal'\n * function.\n *\n * @public\n */\nexport default defineComponent({\n  name: 'BaseIdModalClose',\n  props: {\n    /** The modalId of the modal that will be closed. */\n    modalId: {\n      type: String,\n      required: true,\n    },\n  },\n  setup(props, { slots }) {\n    const $x = use$x()\n\n    /**\n     * Emits the {@link XEventsTypes.UserClickedCloseModal} event with the modalId as payload.\n     *\n     * @param event - The event triggering the function.\n     * @param event.target - Event target.\n     */\n    function closeModal({ target }: Event) {\n      $x.emit('UserClickedCloseModal', props.modalId, { target: target as HTMLElement })\n    }\n\n    /* Hack to render through a render-function, the `closing-element` slot or, in its absence,\n       the component itself. It is the alternative for the NoElement antipattern. */\n    const innerProps = { closeModal }\n    return (\n      slots['closing-element'] ? () => slots['closing-element']?.(innerProps)[0] : innerProps\n    ) as typeof innerProps\n  },\n})\n</script>\n\n<docs lang=\"mdx\">\n## Events\n\nA list of events that the component will emit:\n\n- [`UserClickedCloseModal`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts):\n  the event is emitted after the user clicks the button. The event payload is the id of the modal\n  that is going to be closed.\n\n## Examples\n\nComponent containing an event button that emits `UserClickedCloseModal` when clicked with the\nmodalId as payload. It has a default slot to customize its contents and can also be fully\ncustomized, replacing the default button with any other element.\n\n### Basic example\n\nThe component renders whatever is passed to it in the default slot inside the button and closes the\nmodal with modalId `my-modal`.\n\n```vue\n<template>\n  <BaseIdModalClose modalId=\"my-modal\">\n    <img src=\"./close-button-icon.svg\" />\n  </BaseIdModalClose>\n</template>\n\n<script setup>\nimport { BaseIdModalClose } from '@empathyco/x-components'\n</script>\n```\n\n### Replacing the default button\n\nThe component renders whatever element is passed, replacing the default button and exposing the\nfunction to close the modal with modalId `my-modal`.\n\n```vue\n<template>\n  <BaseIdModalClose modalId=\"my-modal\">\n    <template #closing-element=\"{ closeModal }\">\n      <ul>\n        <li @click=\"closeModal\">Close here</li>\n        <li>Not here</li>\n      </ul>\n    </template>\n  </BaseIdModalClose>\n</template>\n\n<script setup>\nimport { BaseIdModalClose } from '@empathyco/x-components'\n</script>\n```\n</docs>\n"],"names":["_createElementBlock","_renderSlot"],"mappings":";;;;;sBACEA,kBAAA,CAOS,QAAA,EAAA;AAAA,IANP,KAAA,EAAM,2CAAA;AAAA,IACN,WAAA,EAAU,gBAAA;AAAA,IACT,SAAK,MAAA,CAAA,CAAA,CAAA,KAAA,MAAA,CAAA,CAAA,CAAA,GAAA,CAAA,GAAA,IAAA,KAAE,IAAA,CAAA,UAAA,IAAA,IAAA,CAAA,UAAA,CAAA,GAAA,IAAA,CAAA;AAAA,GAAA,EAAA;IAGRC,UAAA,CAAQ,IAAA,CAAA,MAAA,EAAA,SAAA;AAAA,GAAA,CAAA;;;;;;"}

package/js/components/modals/base-id-modal-close.vue2.js.map

@@ -1 +1 @@
-{"version":3,"file":"base-id-modal-close.vue2.js","sources":["../../../../src/components/modals/base-id-modal-close.vue"],"sourcesContent":["<template>\n  <button\n    class=\"x-events-modal-id-close-button x-button\"\n    data-test=\"close-modal-id\"\n    @click=\"closeModal\"\n  >\n    <!-- @slot (Required) Button content with a text, an icon or both -->\n    <slot />\n  </button>\n</template>\n\n<script lang=\"ts\">\nimport { defineComponent } from 'vue'\nimport { use$x } from '../../composables'\n\n/**\n * Component that allows to close a modal by emitting\n * {@link XEventsTypes.UserClickedCloseModal}.\n * It allows full customization with the 'closing-element' slot and exposes the 'closeModal'\n * function.\n *\n * @public\n */\nexport default defineComponent({\n  name: 'BaseIdModalClose',\n  props: {\n    /** The modalId of the modal that will be closed. */\n    modalId: {\n      type: String,\n      required: true,\n    },\n  },\n  setup(props, { slots }) {\n    const $x = use$x()\n\n    /**\n     * Emits the {@link XEventsTypes.UserClickedCloseModal} event with the modalId as payload.\n     *\n     * @param event - The event triggering the function.\n     * @param event.target - Event target.\n     */\n    function closeModal({ target }: Event) {\n      $x.emit('UserClickedCloseModal', props.modalId, { target: target as HTMLElement })\n    }\n\n    /* Hack to render through a render-function, the `closing-element` slot or, in its absence,\n       the component itself. It is the alternative for the NoElement antipattern. */\n    const innerProps = { closeModal }\n    return (\n      slots['closing-element'] ? () => slots['closing-element']?.(innerProps)[0] : innerProps\n    ) as typeof innerProps\n  },\n})\n</script>\n\n<docs lang=\"mdx\">\n## Events\n\nA list of events that the component will emit:\n\n- [`UserClickedCloseModal`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts):\n  the event is emitted after the user clicks the button. The event payload is the id of the modal\n  that is going to be closed.\n\n## Examples\n\nComponent containing an event button that emits `UserClickedCloseModal` when clicked with the\nmodalId as payload. It has a default slot to customize its contents and can also be fully\ncustomized, replacing the default button with any other element.\n\n### Basic example\n\nThe component renders whatever is passed to it in the default slot inside the button and closes the\nmodal with modalId `my-modal`.\n\n```vue\n<template>\n  <BaseIdModalClose modalId=\"my-modal\">\n    <img src=\"./close-button-icon.svg\" />\n  </BaseIdModalClose>\n</template>\n\n<script setup>\nimport { BaseIdModalClose } from '@empathyco/x-components'\n</script>\n```\n\n### Replacing the default button\n\nThe component renders whatever element is passed, replacing the default button and exposing the\nfunction to close the modal with modalId `my-modal`.\n\n```vue\n<template>\n  <BaseIdModalClose modalId=\"my-modal\">\n    <template #closing-element=\"{ closeModal }\">\n      <ul>\n        <li @click=\"closeModal\">Close here</li>\n        <li>Not here</li>\n      </ul>\n    </template>\n  </BaseIdModalClose>\n</template>\n\n<script setup>\nimport { BaseIdModalClose } from '@empathyco/x-components'\n</script>\n```\n</docs>\n"],"names":[],"mappings":";;;;;;;;;;AAeA;;;;;;;AAOE;AACF,gBAAe,eAAe,CAAC;AAC7B,IAAA,IAAI,EAAE,kBAAkB;AACxB,IAAA,KAAK,EAAE;;AAEL,QAAA,OAAO,EAAE;AACP,YAAA,IAAI,EAAE,MAAM;AACZ,YAAA,QAAQ,EAAE,IAAI;AACf,SAAA;AACF,KAAA;AACD,IAAA,KAAK,CAAC,KAAK,EAAE,EAAE,KAAI,EAAG,EAAA;AACpB,QAAA,MAAM,EAAC,GAAI,KAAK,EAAC;AAEjB;;;;;AAKE;AACF,QAAA,SAAS,UAAU,CAAC,EAAE,MAAK,EAAU,EAAA;AACnC,YAAA,EAAE,CAAC,IAAI,CAAC,uBAAuB,EAAE,KAAK,CAAC,OAAO,EAAE,EAAE,MAAM,EAAE,QAAuB,CAAA;QACnF;AAEA;AAC+E;AAC/E,QAAA,MAAM,UAAS,GAAI,EAAE,UAAS,EAAE;QAChC,QACE,KAAK,CAAC,iBAAiB,CAAA,GAAI,MAAM,KAAK,CAAC,iBAAiB,CAAC,GAAG,UAAU,CAAC,CAAC,CAAC,CAAA,GAAI,UAAS;IAE1F,CAAC;AACF,CAAA,CAAA;;;;"}
+{"version":3,"file":"base-id-modal-close.vue2.js","sources":["../../../../src/components/modals/base-id-modal-close.vue"],"sourcesContent":["<template>\n  <button\n    class=\"x-events-modal-id-close-button xds:button\"\n    data-test=\"close-modal-id\"\n    @click=\"closeModal\"\n  >\n    <!-- @slot (Required) Button content with a text, an icon or both -->\n    <slot />\n  </button>\n</template>\n\n<script lang=\"ts\">\nimport { defineComponent } from 'vue'\nimport { use$x } from '../../composables'\n\n/**\n * Component that allows to close a modal by emitting\n * {@link XEventsTypes.UserClickedCloseModal}.\n * It allows full customization with the 'closing-element' slot and exposes the 'closeModal'\n * function.\n *\n * @public\n */\nexport default defineComponent({\n  name: 'BaseIdModalClose',\n  props: {\n    /** The modalId of the modal that will be closed. */\n    modalId: {\n      type: String,\n      required: true,\n    },\n  },\n  setup(props, { slots }) {\n    const $x = use$x()\n\n    /**\n     * Emits the {@link XEventsTypes.UserClickedCloseModal} event with the modalId as payload.\n     *\n     * @param event - The event triggering the function.\n     * @param event.target - Event target.\n     */\n    function closeModal({ target }: Event) {\n      $x.emit('UserClickedCloseModal', props.modalId, { target: target as HTMLElement })\n    }\n\n    /* Hack to render through a render-function, the `closing-element` slot or, in its absence,\n       the component itself. It is the alternative for the NoElement antipattern. */\n    const innerProps = { closeModal }\n    return (\n      slots['closing-element'] ? () => slots['closing-element']?.(innerProps)[0] : innerProps\n    ) as typeof innerProps\n  },\n})\n</script>\n\n<docs lang=\"mdx\">\n## Events\n\nA list of events that the component will emit:\n\n- [`UserClickedCloseModal`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts):\n  the event is emitted after the user clicks the button. The event payload is the id of the modal\n  that is going to be closed.\n\n## Examples\n\nComponent containing an event button that emits `UserClickedCloseModal` when clicked with the\nmodalId as payload. It has a default slot to customize its contents and can also be fully\ncustomized, replacing the default button with any other element.\n\n### Basic example\n\nThe component renders whatever is passed to it in the default slot inside the button and closes the\nmodal with modalId `my-modal`.\n\n```vue\n<template>\n  <BaseIdModalClose modalId=\"my-modal\">\n    <img src=\"./close-button-icon.svg\" />\n  </BaseIdModalClose>\n</template>\n\n<script setup>\nimport { BaseIdModalClose } from '@empathyco/x-components'\n</script>\n```\n\n### Replacing the default button\n\nThe component renders whatever element is passed, replacing the default button and exposing the\nfunction to close the modal with modalId `my-modal`.\n\n```vue\n<template>\n  <BaseIdModalClose modalId=\"my-modal\">\n    <template #closing-element=\"{ closeModal }\">\n      <ul>\n        <li @click=\"closeModal\">Close here</li>\n        <li>Not here</li>\n      </ul>\n    </template>\n  </BaseIdModalClose>\n</template>\n\n<script setup>\nimport { BaseIdModalClose } from '@empathyco/x-components'\n</script>\n```\n</docs>\n"],"names":[],"mappings":";;;;;;;;;;AAeA;;;;;;;AAOE;AACF,gBAAe,eAAe,CAAC;AAC7B,IAAA,IAAI,EAAE,kBAAkB;AACxB,IAAA,KAAK,EAAE;;AAEL,QAAA,OAAO,EAAE;AACP,YAAA,IAAI,EAAE,MAAM;AACZ,YAAA,QAAQ,EAAE,IAAI;AACf,SAAA;AACF,KAAA;AACD,IAAA,KAAK,CAAC,KAAK,EAAE,EAAE,KAAI,EAAG,EAAA;AACpB,QAAA,MAAM,EAAC,GAAI,KAAK,EAAC;AAEjB;;;;;AAKE;AACF,QAAA,SAAS,UAAU,CAAC,EAAE,MAAK,EAAU,EAAA;AACnC,YAAA,EAAE,CAAC,IAAI,CAAC,uBAAuB,EAAE,KAAK,CAAC,OAAO,EAAE,EAAE,MAAM,EAAE,QAAuB,CAAA;QACnF;AAEA;AAC+E;AAC/E,QAAA,MAAM,UAAS,GAAI,EAAE,UAAS,EAAE;QAChC,QACE,KAAK,CAAC,iBAAiB,CAAA,GAAI,MAAM,KAAK,CAAC,iBAAiB,CAAC,GAAG,UAAU,CAAC,CAAC,CAAC,CAAA,GAAI,UAAS;IAE1F,CAAC;AACF,CAAA,CAAA;;;;"}

package/js/components/modals/base-id-modal-open.vue.js

@@ -4,7 +4,7 @@ import _export_sfc from '../../_virtual/_plugin-vue_export-helper.js';
 
 function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
   return openBlock(), createElementBlock("button", {
-    class: "x-events-modal-id-open-button x-button",
+    class: "x-events-modal-id-open-button xds:button",
     "data-test": "open-modal-id",
     onClick: _cache[0] || (_cache[0] = (...args) => _ctx.openModal && _ctx.openModal(...args))
   }, [

package/js/components/modals/base-id-modal-open.vue.js.map

@@ -1 +1 @@
-{"version":3,"file":"base-id-modal-open.vue.js","sources":["../../../../src/components/modals/base-id-modal-open.vue"],"sourcesContent":["<template>\n  <button\n    class=\"x-events-modal-id-open-button x-button\"\n    data-test=\"open-modal-id\"\n    @click=\"openModal\"\n  >\n    <!-- @slot (Required) Button content with a text, an icon or both -->\n    <slot />\n  </button>\n</template>\n\n<script lang=\"ts\">\nimport { defineComponent } from 'vue'\nimport { use$x } from '../../composables'\n\n/**\n * Component that allows to open a modal by emitting {@link XEventsTypes.UserClickedOpenModal}\n * with the modalId as payload. It allows full customization with the 'opening-element' slot and\n * exposes the 'openModal' function.\n *\n * @public\n */\nexport default defineComponent({\n  name: 'BaseIdModalOpen',\n  props: {\n    /** The modalId of the modal that will be opened. */\n    modalId: {\n      type: String,\n      required: true,\n    },\n  },\n  setup(props, { slots }) {\n    const $x = use$x()\n\n    /**\n     * Emits the {@link XEventsTypes.UserClickedOpenModal} event with the modalId as payload.\n     *\n     * @param event - The event triggering the function.\n     * @param event.target - Event target.\n     */\n    function openModal({ target }: Event) {\n      $x.emit('UserClickedOpenModal', props.modalId, { target: target as HTMLElement })\n    }\n\n    /* Hack to render through a render-function, the `opening-element` slot or, in its absence,\n       the component itself. It is the alternative for the NoElement antipattern. */\n    const innerProps = { openModal }\n    return (\n      slots['opening-element'] ? () => slots['opening-element']?.(innerProps)[0] : innerProps\n    ) as typeof innerProps\n  },\n})\n</script>\n\n<docs lang=\"mdx\">\n## Events\n\nA list of events that the component will emit:\n\n- [`UserClickedOpenModal`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts):\n  the event is emitted after the user clicks the button. The event payload is the id of the modal\n  that is going to be opened.\n\n## Examples\n\nComponent containing an event button that emits `UserClickedOpenModal` when it is clicked with the\nmodalId as payload. It has a default slot to customize its contents and can also be fully\ncustomized, replacing the default button with any other element.\n\n### Basic example\n\nThe component rendering content passed to the default slot inside the button and opening the modal\nwith modalId `my-modal`.\n\n```vue\n<template>\n  <BaseIdModalOpen modalId=\"my-modal\">\n    <img src=\"./open-button-icon.svg\" />\n    <span>Open</span>\n  </BaseIdModalOpen>\n</template>\n\n<script setup>\nimport { BaseIdModalOpen } from '@empathyco/x-components'\n</script>\n```\n\n### Replacing the default button\n\nThe component renders whatever element is passed, replacing the default button and exposing the\nfunction to open the modal with modalId `my-modal`.\n\n```vue\n<template>\n  <BaseIdModalOpen modalId=\"my-modal\">\n    <template #opening-element=\"{ openModal }\">\n      <ul>\n        <li @click=\"openModal\">Open here</li>\n        <li>Not here</li>\n      </ul>\n    </template>\n  </BaseIdModalOpen>\n</template>\n\n<script setup>\nimport { BaseIdModalOpen } from '@empathyco/x-components'\n</script>\n```\n</docs>\n"],"names":["_createElementBlock","_renderSlot"],"mappings":";;;;;sBACEA,kBAAA,CAOS,QAAA,EAAA;AAAA,IANP,KAAA,EAAM,wCAAA;AAAA,IACN,WAAA,EAAU,eAAA;AAAA,IACT,SAAK,MAAA,CAAA,CAAA,CAAA,KAAA,MAAA,CAAA,CAAA,CAAA,GAAA,CAAA,GAAA,IAAA,KAAE,IAAA,CAAA,SAAA,IAAA,IAAA,CAAA,SAAA,CAAA,GAAA,IAAA,CAAA;AAAA,GAAA,EAAA;IAGRC,UAAA,CAAQ,IAAA,CAAA,MAAA,EAAA,SAAA;AAAA,GAAA,CAAA;;;;;;"}
+{"version":3,"file":"base-id-modal-open.vue.js","sources":["../../../../src/components/modals/base-id-modal-open.vue"],"sourcesContent":["<template>\n  <button\n    class=\"x-events-modal-id-open-button xds:button\"\n    data-test=\"open-modal-id\"\n    @click=\"openModal\"\n  >\n    <!-- @slot (Required) Button content with a text, an icon or both -->\n    <slot />\n  </button>\n</template>\n\n<script lang=\"ts\">\nimport { defineComponent } from 'vue'\nimport { use$x } from '../../composables'\n\n/**\n * Component that allows to open a modal by emitting {@link XEventsTypes.UserClickedOpenModal}\n * with the modalId as payload. It allows full customization with the 'opening-element' slot and\n * exposes the 'openModal' function.\n *\n * @public\n */\nexport default defineComponent({\n  name: 'BaseIdModalOpen',\n  props: {\n    /** The modalId of the modal that will be opened. */\n    modalId: {\n      type: String,\n      required: true,\n    },\n  },\n  setup(props, { slots }) {\n    const $x = use$x()\n\n    /**\n     * Emits the {@link XEventsTypes.UserClickedOpenModal} event with the modalId as payload.\n     *\n     * @param event - The event triggering the function.\n     * @param event.target - Event target.\n     */\n    function openModal({ target }: Event) {\n      $x.emit('UserClickedOpenModal', props.modalId, { target: target as HTMLElement })\n    }\n\n    /* Hack to render through a render-function, the `opening-element` slot or, in its absence,\n       the component itself. It is the alternative for the NoElement antipattern. */\n    const innerProps = { openModal }\n    return (\n      slots['opening-element'] ? () => slots['opening-element']?.(innerProps)[0] : innerProps\n    ) as typeof innerProps\n  },\n})\n</script>\n\n<docs lang=\"mdx\">\n## Events\n\nA list of events that the component will emit:\n\n- [`UserClickedOpenModal`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts):\n  the event is emitted after the user clicks the button. The event payload is the id of the modal\n  that is going to be opened.\n\n## Examples\n\nComponent containing an event button that emits `UserClickedOpenModal` when it is clicked with the\nmodalId as payload. It has a default slot to customize its contents and can also be fully\ncustomized, replacing the default button with any other element.\n\n### Basic example\n\nThe component rendering content passed to the default slot inside the button and opening the modal\nwith modalId `my-modal`.\n\n```vue\n<template>\n  <BaseIdModalOpen modalId=\"my-modal\">\n    <img src=\"./open-button-icon.svg\" />\n    <span>Open</span>\n  </BaseIdModalOpen>\n</template>\n\n<script setup>\nimport { BaseIdModalOpen } from '@empathyco/x-components'\n</script>\n```\n\n### Replacing the default button\n\nThe component renders whatever element is passed, replacing the default button and exposing the\nfunction to open the modal with modalId `my-modal`.\n\n```vue\n<template>\n  <BaseIdModalOpen modalId=\"my-modal\">\n    <template #opening-element=\"{ openModal }\">\n      <ul>\n        <li @click=\"openModal\">Open here</li>\n        <li>Not here</li>\n      </ul>\n    </template>\n  </BaseIdModalOpen>\n</template>\n\n<script setup>\nimport { BaseIdModalOpen } from '@empathyco/x-components'\n</script>\n```\n</docs>\n"],"names":["_createElementBlock","_renderSlot"],"mappings":";;;;;sBACEA,kBAAA,CAOS,QAAA,EAAA;AAAA,IANP,KAAA,EAAM,0CAAA;AAAA,IACN,WAAA,EAAU,eAAA;AAAA,IACT,SAAK,MAAA,CAAA,CAAA,CAAA,KAAA,MAAA,CAAA,CAAA,CAAA,GAAA,CAAA,GAAA,IAAA,KAAE,IAAA,CAAA,SAAA,IAAA,IAAA,CAAA,SAAA,CAAA,GAAA,IAAA,CAAA;AAAA,GAAA,EAAA;IAGRC,UAAA,CAAQ,IAAA,CAAA,MAAA,EAAA,SAAA;AAAA,GAAA,CAAA;;;;;;"}

package/js/components/modals/base-id-modal-open.vue2.js.map

@@ -1 +1 @@
-{"version":3,"file":"base-id-modal-open.vue2.js","sources":["../../../../src/components/modals/base-id-modal-open.vue"],"sourcesContent":["<template>\n  <button\n    class=\"x-events-modal-id-open-button x-button\"\n    data-test=\"open-modal-id\"\n    @click=\"openModal\"\n  >\n    <!-- @slot (Required) Button content with a text, an icon or both -->\n    <slot />\n  </button>\n</template>\n\n<script lang=\"ts\">\nimport { defineComponent } from 'vue'\nimport { use$x } from '../../composables'\n\n/**\n * Component that allows to open a modal by emitting {@link XEventsTypes.UserClickedOpenModal}\n * with the modalId as payload. It allows full customization with the 'opening-element' slot and\n * exposes the 'openModal' function.\n *\n * @public\n */\nexport default defineComponent({\n  name: 'BaseIdModalOpen',\n  props: {\n    /** The modalId of the modal that will be opened. */\n    modalId: {\n      type: String,\n      required: true,\n    },\n  },\n  setup(props, { slots }) {\n    const $x = use$x()\n\n    /**\n     * Emits the {@link XEventsTypes.UserClickedOpenModal} event with the modalId as payload.\n     *\n     * @param event - The event triggering the function.\n     * @param event.target - Event target.\n     */\n    function openModal({ target }: Event) {\n      $x.emit('UserClickedOpenModal', props.modalId, { target: target as HTMLElement })\n    }\n\n    /* Hack to render through a render-function, the `opening-element` slot or, in its absence,\n       the component itself. It is the alternative for the NoElement antipattern. */\n    const innerProps = { openModal }\n    return (\n      slots['opening-element'] ? () => slots['opening-element']?.(innerProps)[0] : innerProps\n    ) as typeof innerProps\n  },\n})\n</script>\n\n<docs lang=\"mdx\">\n## Events\n\nA list of events that the component will emit:\n\n- [`UserClickedOpenModal`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts):\n  the event is emitted after the user clicks the button. The event payload is the id of the modal\n  that is going to be opened.\n\n## Examples\n\nComponent containing an event button that emits `UserClickedOpenModal` when it is clicked with the\nmodalId as payload. It has a default slot to customize its contents and can also be fully\ncustomized, replacing the default button with any other element.\n\n### Basic example\n\nThe component rendering content passed to the default slot inside the button and opening the modal\nwith modalId `my-modal`.\n\n```vue\n<template>\n  <BaseIdModalOpen modalId=\"my-modal\">\n    <img src=\"./open-button-icon.svg\" />\n    <span>Open</span>\n  </BaseIdModalOpen>\n</template>\n\n<script setup>\nimport { BaseIdModalOpen } from '@empathyco/x-components'\n</script>\n```\n\n### Replacing the default button\n\nThe component renders whatever element is passed, replacing the default button and exposing the\nfunction to open the modal with modalId `my-modal`.\n\n```vue\n<template>\n  <BaseIdModalOpen modalId=\"my-modal\">\n    <template #opening-element=\"{ openModal }\">\n      <ul>\n        <li @click=\"openModal\">Open here</li>\n        <li>Not here</li>\n      </ul>\n    </template>\n  </BaseIdModalOpen>\n</template>\n\n<script setup>\nimport { BaseIdModalOpen } from '@empathyco/x-components'\n</script>\n```\n</docs>\n"],"names":[],"mappings":";;;;;;;;;;AAeA;;;;;;AAME;AACF,gBAAe,eAAe,CAAC;AAC7B,IAAA,IAAI,EAAE,iBAAiB;AACvB,IAAA,KAAK,EAAE;;AAEL,QAAA,OAAO,EAAE;AACP,YAAA,IAAI,EAAE,MAAM;AACZ,YAAA,QAAQ,EAAE,IAAI;AACf,SAAA;AACF,KAAA;AACD,IAAA,KAAK,CAAC,KAAK,EAAE,EAAE,KAAI,EAAG,EAAA;AACpB,QAAA,MAAM,EAAC,GAAI,KAAK,EAAC;AAEjB;;;;;AAKE;AACF,QAAA,SAAS,SAAS,CAAC,EAAE,MAAK,EAAU,EAAA;AAClC,YAAA,EAAE,CAAC,IAAI,CAAC,sBAAsB,EAAE,KAAK,CAAC,OAAO,EAAE,EAAE,MAAM,EAAE,QAAuB,CAAA;QAClF;AAEA;AAC+E;AAC/E,QAAA,MAAM,UAAS,GAAI,EAAE,SAAQ,EAAE;QAC/B,QACE,KAAK,CAAC,iBAAiB,CAAA,GAAI,MAAM,KAAK,CAAC,iBAAiB,CAAC,GAAG,UAAU,CAAC,CAAC,CAAC,CAAA,GAAI,UAAS;IAE1F,CAAC;AACF,CAAA,CAAA;;;;"}
+{"version":3,"file":"base-id-modal-open.vue2.js","sources":["../../../../src/components/modals/base-id-modal-open.vue"],"sourcesContent":["<template>\n  <button\n    class=\"x-events-modal-id-open-button xds:button\"\n    data-test=\"open-modal-id\"\n    @click=\"openModal\"\n  >\n    <!-- @slot (Required) Button content with a text, an icon or both -->\n    <slot />\n  </button>\n</template>\n\n<script lang=\"ts\">\nimport { defineComponent } from 'vue'\nimport { use$x } from '../../composables'\n\n/**\n * Component that allows to open a modal by emitting {@link XEventsTypes.UserClickedOpenModal}\n * with the modalId as payload. It allows full customization with the 'opening-element' slot and\n * exposes the 'openModal' function.\n *\n * @public\n */\nexport default defineComponent({\n  name: 'BaseIdModalOpen',\n  props: {\n    /** The modalId of the modal that will be opened. */\n    modalId: {\n      type: String,\n      required: true,\n    },\n  },\n  setup(props, { slots }) {\n    const $x = use$x()\n\n    /**\n     * Emits the {@link XEventsTypes.UserClickedOpenModal} event with the modalId as payload.\n     *\n     * @param event - The event triggering the function.\n     * @param event.target - Event target.\n     */\n    function openModal({ target }: Event) {\n      $x.emit('UserClickedOpenModal', props.modalId, { target: target as HTMLElement })\n    }\n\n    /* Hack to render through a render-function, the `opening-element` slot or, in its absence,\n       the component itself. It is the alternative for the NoElement antipattern. */\n    const innerProps = { openModal }\n    return (\n      slots['opening-element'] ? () => slots['opening-element']?.(innerProps)[0] : innerProps\n    ) as typeof innerProps\n  },\n})\n</script>\n\n<docs lang=\"mdx\">\n## Events\n\nA list of events that the component will emit:\n\n- [`UserClickedOpenModal`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts):\n  the event is emitted after the user clicks the button. The event payload is the id of the modal\n  that is going to be opened.\n\n## Examples\n\nComponent containing an event button that emits `UserClickedOpenModal` when it is clicked with the\nmodalId as payload. It has a default slot to customize its contents and can also be fully\ncustomized, replacing the default button with any other element.\n\n### Basic example\n\nThe component rendering content passed to the default slot inside the button and opening the modal\nwith modalId `my-modal`.\n\n```vue\n<template>\n  <BaseIdModalOpen modalId=\"my-modal\">\n    <img src=\"./open-button-icon.svg\" />\n    <span>Open</span>\n  </BaseIdModalOpen>\n</template>\n\n<script setup>\nimport { BaseIdModalOpen } from '@empathyco/x-components'\n</script>\n```\n\n### Replacing the default button\n\nThe component renders whatever element is passed, replacing the default button and exposing the\nfunction to open the modal with modalId `my-modal`.\n\n```vue\n<template>\n  <BaseIdModalOpen modalId=\"my-modal\">\n    <template #opening-element=\"{ openModal }\">\n      <ul>\n        <li @click=\"openModal\">Open here</li>\n        <li>Not here</li>\n      </ul>\n    </template>\n  </BaseIdModalOpen>\n</template>\n\n<script setup>\nimport { BaseIdModalOpen } from '@empathyco/x-components'\n</script>\n```\n</docs>\n"],"names":[],"mappings":";;;;;;;;;;AAeA;;;;;;AAME;AACF,gBAAe,eAAe,CAAC;AAC7B,IAAA,IAAI,EAAE,iBAAiB;AACvB,IAAA,KAAK,EAAE;;AAEL,QAAA,OAAO,EAAE;AACP,YAAA,IAAI,EAAE,MAAM;AACZ,YAAA,QAAQ,EAAE,IAAI;AACf,SAAA;AACF,KAAA;AACD,IAAA,KAAK,CAAC,KAAK,EAAE,EAAE,KAAI,EAAG,EAAA;AACpB,QAAA,MAAM,EAAC,GAAI,KAAK,EAAC;AAEjB;;;;;AAKE;AACF,QAAA,SAAS,SAAS,CAAC,EAAE,MAAK,EAAU,EAAA;AAClC,YAAA,EAAE,CAAC,IAAI,CAAC,sBAAsB,EAAE,KAAK,CAAC,OAAO,EAAE,EAAE,MAAM,EAAE,QAAuB,CAAA;QAClF;AAEA;AAC+E;AAC/E,QAAA,MAAM,UAAS,GAAI,EAAE,SAAQ,EAAE;QAC/B,QACE,KAAK,CAAC,iBAAiB,CAAA,GAAI,MAAM,KAAK,CAAC,iBAAiB,CAAC,GAAG,UAAU,CAAC,CAAC,CAAC,CAAA,GAAI,UAAS;IAE1F,CAAC;AACF,CAAA,CAAA;;;;"}

package/js/components/page-loader-button.vue.js

@@ -28,7 +28,7 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
         )
       ], true),
       createVNode(_component_BaseEventButton, {
-        class: normalizeClass(["x-button", _ctx.buttonClasses]),
+        class: normalizeClass(["xds:button", _ctx.buttonClasses]),
         events: _ctx.events,
         "data-test": "load-content",
         "aria-label": "Load"

package/js/components/page-loader-button.vue.js.map

@@ -1 +1 @@
-{"version":3,"file":"page-loader-button.vue.js","sources":["../../../src/components/page-loader-button.vue"],"sourcesContent":["<template>\n  <div class=\"x-page-loader\" data-test=\"page-loader\">\n    <!--\n      @slot default\n          @binding {number} resultsLength - The search result's length\n          @binding {number} totalResults - The totalResults of a searched query\n      -->\n    <slot v-bind=\"{ resultsLength, totalResults }\">\n      <!-- @slot Rendered count with a text and the number of results displayed & remaining. -->\n      <slot name=\"textContent\" :results-length=\"resultsLength\" :total-results=\"totalResults\">\n        <p class=\"x-page-loader__text-content\" data-test=\"text-content\">\n          You are seeing {{ resultsLength }} of {{ totalResults }} results\n        </p>\n      </slot>\n      <BaseEventButton\n        class=\"x-button\"\n        :class=\"buttonClasses\"\n        :events=\"events\"\n        data-test=\"load-content\"\n        aria-label=\"Load\"\n      >\n        <!-- @slot Button content with a text, an icon or both -->\n        <slot name=\"buttonContent\">Load</slot>\n      </BaseEventButton>\n    </slot>\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 } from 'vue'\nimport { use$x } from '../composables'\nimport BaseEventButton from './base-event-button.vue'\n\n/**\n * Component that renders a text with the number of rendered results and\n * the remaining ones and a `<BaseEventButton>` with the logic of emitting\n * the event \"UserReachedResultsListEnd\" to load more results on click.\n *\n * @public\n */\nexport default defineComponent({\n  name: 'PageLoaderButton',\n  components: { BaseEventButton },\n  props: {\n    /**\n     * CSS classes to customize the loader button.\n     *\n     * @internal\n     */\n    buttonClasses: {\n      type: String as PropType<VueCSSClasses>,\n      default: '',\n    },\n    /**\n     * Events to customize what will be emitted by the loader button.\n     *\n     * @internal\n     */\n    buttonEvents: {\n      type: Object as PropType<Partial<XEventsTypes>>,\n    },\n  },\n  setup(props) {\n    const $x = use$x()\n    const resultsLength = computed(() => $x.results.length)\n    const totalResults = computed(() => $x.totalResults)\n\n    /**\n     * The events that will be emitted when clicking on the loader button.\n     *\n     * @returns The {@link XEvent} to emit.\n     * @public\n     */\n    const events = computed<Partial<XEventsTypes>>(() => {\n      return { UserReachedResultsListEnd: undefined, ...props.buttonEvents }\n    })\n\n    return {\n      resultsLength,\n      totalResults,\n      events,\n    }\n  },\n})\n</script>\n\n<style scoped>\n.x-page-loader {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  padding: 32px 0;\n}\n\n.x-page-loader__text-content {\n  padding: 16px 0;\n}\n</style>\n\n<docs lang=\"mdx\">\n## Events\n\nThis component emits the \"UserReachedResultsListEnd\" event by default. This can be changed using the\nbuttonEvents prop:\n\n```vue live\n<template>\n  <PageLoaderButton :buttonEvents=\"{ UserClickedCloseX: undefined }\" />\n</template>\n\n<script>\nimport { PageLoaderButton } from '@empathyco/x-components'\n\nexport default {\n  name: 'PageLoaderButtonDemo',\n  components: {\n    PageLoaderButton,\n  },\n}\n</script>\n```\n\n## See it in action\n\nHere you have a basic example of how the page loader component is rendered.\n\n```vue live\n<template>\n  <PageLoaderButton />\n</template>\n\n<script>\nimport { PageLoaderButton } from '@empathyco/x-components'\n\nexport default {\n  name: 'PageLoaderButtonDemo',\n  components: {\n    PageLoaderButton,\n  },\n}\n</script>\n```\n\n### Customise the default layout\n\nThis component has a default slot which allows to customise the entire layout.\n\n```vue live\n<template>\n  <PageLoaderButton>\n    <template #default=\"{ resultsLength, totalResults }\">\n      <div class=\"x-flex x-flex-col\">\n        <div class=\"x-flex x-gap-4 x-text\">\n          <span class=\"x-text-accent-50 x-font-bold\">{{ resultsLength }}</span>\n          <span>of</span>\n          <span class=\"x-text-accent-50\">{{ totalResults }}</span>\n        </div>\n        <button\n          @click=\"$x.emit('UserReachedResultsListEnd', undefined)\"\n          class=\"x-button x-button-ghost\"\n        >\n          Load more\n        </button>\n      </div>\n    </template>\n  </PageLoaderButton>\n</template>\n\n<script>\nimport { PageLoaderButton } from '@empathyco/x-components'\n\nexport default {\n  name: 'PageLoaderButtonDemo',\n  components: {\n    PageLoaderButton,\n  },\n}\n</script>\n```\n\n### Customise the slots\n\nThis component allows to customise both the textContent and the buttonContent slots. The\ntextContent's slot layout can be replaced entirely, while the buttonContent's slot enables wrapping\ncontent inside and customizing its style using the buttonClasses prop.\n\n```vue live\n<template>\n  <PageLoaderButton :buttonClasses=\"buttonClasses\">\n    <template #textContent=\"{ resultsLength, totalResults }\">\n      <div class=\"x-flex x-gap-4 x-text\">\n        <span class=\"x-text-accent-50 x-font-bold\">{{ resultsLength }}</span>\n        <span>of</span>\n        <span class=\"x-text-accent-50\">{{ totalResults }}</span>\n      </div>\n    </template>\n    <template #buttonContent>Load more results</template>\n  </PageLoaderButton>\n</template>\n\n<script>\nimport { PageLoaderButton } from '@empathyco/x-components'\n\nexport default {\n  name: 'PageLoaderButtonDemo',\n  components: {\n    PageLoaderButton,\n  },\n  data() {\n    return {\n      buttonClasses: 'x-rounded-full',\n    }\n  },\n}\n</script>\n```\n</docs>\n"],"names":["_openBlock","_createElementBlock","_renderSlot","_normalizeProps","_guardReactiveProps","_createElementVNode","_toDisplayString","_createVNode","_normalizeClass","_createTextVNode"],"mappings":";;;;;;EACO,KAAA,EAAM,eAAA;AAAA,EAAgB,WAAA,EAAU;;;EAS5B,KAAA,EAAM,6BAAA;AAAA,EAA8B,WAAA,EAAU;;;;AATvD,EAAA,OAAAA,SAAA,EAAA,EAAAC,kBAAA,CAwBM,OAxBN,UAAA,EAwBM;AAAA,IAlBJC,WAiBO,IAAA,CAAA,MAAA,EAAA,SAAA,EAAAC,cAAA,CAAAC,kBAAA,CAAA,EAAA,aAAA,EAjBS,IAAA,CAAA,aAAA,EAAa,YAAA,EAAE,IAAA,CAAA,YAAA,MAA/B,MAiBO;AAAA,MAfLF,UAAA,CAIO,IAAA,CAAA,MAAA,EAAA,aAAA,EAAA;AAAA,QAJmB,aAAA,EAAgB,IAAA,CAAA,aAAA;AAAA,QAAgB,YAAA,EAAe,IAAA,CAAA;AAAA,OAAA,EAAzE,MAIO;AAAA,QAHLG,kBAAA;AAAA,UAEI,GAAA;AAAA,UAFJ,UAAA;AAAA,UAAgE,qBAC/CC,eAAA,CAAG,IAAA,CAAA,aAAa,IAAG,MAAA,GAAIA,eAAA,CAAG,iBAAY,CAAA,GAAG,WAAA;AAAA,UAC1D;AAAA;AAAA;AAAA,OAAA,EAAA,IAAA,CAAA;MAEFC,WAAA,CASkB,0BAAA,EAAA;AAAA,QARhB,KAAA,EAAKC,cAAA,CAAA,CAAC,UAAA,EACE,IAAA,CAAA,aAAa,CAAA,CAAA;AAAA,QACpB,MAAA,EAAQ,IAAA,CAAA,MAAA;AAAA,QACT,WAAA,EAAU,cAAA;AAAA,QACV,YAAA,EAAW;AAAA,OAAA,EAAA;yBAGX,MAAsC;AAAA,UAAtCN,UAAA,CAAsC,kCAAtC,MAAsC;AAAA,YAAA,MAAA,CAAA,CAAA,CAAA,KAAA,MAAA,CAAA,CAAA,CAAA,GAAAO,eAAA;AAAX,cAAA,MAAA;AAAA,cAAI;AAAA;AAAA,aAAA;AAAA,WAAA,EAAA,IAAA;;;;;;;;;;;;"}
+{"version":3,"file":"page-loader-button.vue.js","sources":["../../../src/components/page-loader-button.vue"],"sourcesContent":["<template>\n  <div class=\"x-page-loader\" data-test=\"page-loader\">\n    <!--\n      @slot default\n          @binding {number} resultsLength - The search result's length\n          @binding {number} totalResults - The totalResults of a searched query\n      -->\n    <slot v-bind=\"{ resultsLength, totalResults }\">\n      <!-- @slot Rendered count with a text and the number of results displayed & remaining. -->\n      <slot name=\"textContent\" :results-length=\"resultsLength\" :total-results=\"totalResults\">\n        <p class=\"x-page-loader__text-content\" data-test=\"text-content\">\n          You are seeing {{ resultsLength }} of {{ totalResults }} results\n        </p>\n      </slot>\n      <BaseEventButton\n        class=\"xds:button\"\n        :class=\"buttonClasses\"\n        :events=\"events\"\n        data-test=\"load-content\"\n        aria-label=\"Load\"\n      >\n        <!-- @slot Button content with a text, an icon or both -->\n        <slot name=\"buttonContent\">Load</slot>\n      </BaseEventButton>\n    </slot>\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 } from 'vue'\nimport { use$x } from '../composables'\nimport BaseEventButton from './base-event-button.vue'\n\n/**\n * Component that renders a text with the number of rendered results and\n * the remaining ones and a `<BaseEventButton>` with the logic of emitting\n * the event \"UserReachedResultsListEnd\" to load more results on click.\n *\n * @public\n */\nexport default defineComponent({\n  name: 'PageLoaderButton',\n  components: { BaseEventButton },\n  props: {\n    /**\n     * CSS classes to customize the loader button.\n     *\n     * @internal\n     */\n    buttonClasses: {\n      type: String as PropType<VueCSSClasses>,\n      default: '',\n    },\n    /**\n     * Events to customize what will be emitted by the loader button.\n     *\n     * @internal\n     */\n    buttonEvents: {\n      type: Object as PropType<Partial<XEventsTypes>>,\n    },\n  },\n  setup(props) {\n    const $x = use$x()\n    const resultsLength = computed(() => $x.results.length)\n    const totalResults = computed(() => $x.totalResults)\n\n    /**\n     * The events that will be emitted when clicking on the loader button.\n     *\n     * @returns The {@link XEvent} to emit.\n     * @public\n     */\n    const events = computed<Partial<XEventsTypes>>(() => {\n      return { UserReachedResultsListEnd: undefined, ...props.buttonEvents }\n    })\n\n    return {\n      resultsLength,\n      totalResults,\n      events,\n    }\n  },\n})\n</script>\n\n<style scoped>\n.x-page-loader {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  padding: 32px 0;\n}\n\n.x-page-loader__text-content {\n  padding: 16px 0;\n}\n</style>\n\n<docs lang=\"mdx\">\n## Events\n\nThis component emits the \"UserReachedResultsListEnd\" event by default. This can be changed using the\nbuttonEvents prop:\n\n```vue live\n<template>\n  <PageLoaderButton :buttonEvents=\"{ UserClickedCloseX: undefined }\" />\n</template>\n\n<script>\nimport { PageLoaderButton } from '@empathyco/x-components'\n\nexport default {\n  name: 'PageLoaderButtonDemo',\n  components: {\n    PageLoaderButton,\n  },\n}\n</script>\n```\n\n## See it in action\n\nHere you have a basic example of how the page loader component is rendered.\n\n```vue live\n<template>\n  <PageLoaderButton />\n</template>\n\n<script>\nimport { PageLoaderButton } from '@empathyco/x-components'\n\nexport default {\n  name: 'PageLoaderButtonDemo',\n  components: {\n    PageLoaderButton,\n  },\n}\n</script>\n```\n\n### Customise the default layout\n\nThis component has a default slot which allows to customise the entire layout.\n\n```vue live\n<template>\n  <PageLoaderButton>\n    <template #default=\"{ resultsLength, totalResults }\">\n      <div class=\"x-flex x-flex-col\">\n        <div class=\"x-flex x-gap-4 x-text\">\n          <span class=\"x-text-accent-50 x-font-bold\">{{ resultsLength }}</span>\n          <span>of</span>\n          <span class=\"x-text-accent-50\">{{ totalResults }}</span>\n        </div>\n        <button\n          @click=\"$x.emit('UserReachedResultsListEnd', undefined)\"\n          class=\"x-button x-button-ghost\"\n        >\n          Load more\n        </button>\n      </div>\n    </template>\n  </PageLoaderButton>\n</template>\n\n<script>\nimport { PageLoaderButton } from '@empathyco/x-components'\n\nexport default {\n  name: 'PageLoaderButtonDemo',\n  components: {\n    PageLoaderButton,\n  },\n}\n</script>\n```\n\n### Customise the slots\n\nThis component allows to customise both the textContent and the buttonContent slots. The\ntextContent's slot layout can be replaced entirely, while the buttonContent's slot enables wrapping\ncontent inside and customizing its style using the buttonClasses prop.\n\n```vue live\n<template>\n  <PageLoaderButton :buttonClasses=\"buttonClasses\">\n    <template #textContent=\"{ resultsLength, totalResults }\">\n      <div class=\"x-flex x-gap-4 x-text\">\n        <span class=\"x-text-accent-50 x-font-bold\">{{ resultsLength }}</span>\n        <span>of</span>\n        <span class=\"x-text-accent-50\">{{ totalResults }}</span>\n      </div>\n    </template>\n    <template #buttonContent>Load more results</template>\n  </PageLoaderButton>\n</template>\n\n<script>\nimport { PageLoaderButton } from '@empathyco/x-components'\n\nexport default {\n  name: 'PageLoaderButtonDemo',\n  components: {\n    PageLoaderButton,\n  },\n  data() {\n    return {\n      buttonClasses: 'x-rounded-full',\n    }\n  },\n}\n</script>\n```\n</docs>\n"],"names":["_openBlock","_createElementBlock","_renderSlot","_normalizeProps","_guardReactiveProps","_createElementVNode","_toDisplayString","_createVNode","_normalizeClass","_createTextVNode"],"mappings":";;;;;;EACO,KAAA,EAAM,eAAA;AAAA,EAAgB,WAAA,EAAU;;;EAS5B,KAAA,EAAM,6BAAA;AAAA,EAA8B,WAAA,EAAU;;;;AATvD,EAAA,OAAAA,SAAA,EAAA,EAAAC,kBAAA,CAwBM,OAxBN,UAAA,EAwBM;AAAA,IAlBJC,WAiBO,IAAA,CAAA,MAAA,EAAA,SAAA,EAAAC,cAAA,CAAAC,kBAAA,CAAA,EAAA,aAAA,EAjBS,IAAA,CAAA,aAAA,EAAa,YAAA,EAAE,IAAA,CAAA,YAAA,MAA/B,MAiBO;AAAA,MAfLF,UAAA,CAIO,IAAA,CAAA,MAAA,EAAA,aAAA,EAAA;AAAA,QAJmB,aAAA,EAAgB,IAAA,CAAA,aAAA;AAAA,QAAgB,YAAA,EAAe,IAAA,CAAA;AAAA,OAAA,EAAzE,MAIO;AAAA,QAHLG,kBAAA;AAAA,UAEI,GAAA;AAAA,UAFJ,UAAA;AAAA,UAAgE,qBAC/CC,eAAA,CAAG,IAAA,CAAA,aAAa,IAAG,MAAA,GAAIA,eAAA,CAAG,iBAAY,CAAA,GAAG,WAAA;AAAA,UAC1D;AAAA;AAAA;AAAA,OAAA,EAAA,IAAA,CAAA;MAEFC,WAAA,CASkB,0BAAA,EAAA;AAAA,QARhB,KAAA,EAAKC,cAAA,CAAA,CAAC,YAAA,EACE,IAAA,CAAA,aAAa,CAAA,CAAA;AAAA,QACpB,MAAA,EAAQ,IAAA,CAAA,MAAA;AAAA,QACT,WAAA,EAAU,cAAA;AAAA,QACV,YAAA,EAAW;AAAA,OAAA,EAAA;yBAGX,MAAsC;AAAA,UAAtCN,UAAA,CAAsC,kCAAtC,MAAsC;AAAA,YAAA,MAAA,CAAA,CAAA,CAAA,KAAA,MAAA,CAAA,CAAA,CAAA,GAAAO,eAAA;AAAX,cAAA,MAAA;AAAA,cAAI;AAAA;AAAA,aAAA;AAAA,WAAA,EAAA,IAAA;;;;;;;;;;;;"}

package/js/components/page-loader-button.vue2.js.map

@@ -1 +1 @@
-{"version":3,"file":"page-loader-button.vue2.js","sources":["../../../src/components/page-loader-button.vue"],"sourcesContent":["<template>\n  <div class=\"x-page-loader\" data-test=\"page-loader\">\n    <!--\n      @slot default\n          @binding {number} resultsLength - The search result's length\n          @binding {number} totalResults - The totalResults of a searched query\n      -->\n    <slot v-bind=\"{ resultsLength, totalResults }\">\n      <!-- @slot Rendered count with a text and the number of results displayed & remaining. -->\n      <slot name=\"textContent\" :results-length=\"resultsLength\" :total-results=\"totalResults\">\n        <p class=\"x-page-loader__text-content\" data-test=\"text-content\">\n          You are seeing {{ resultsLength }} of {{ totalResults }} results\n        </p>\n      </slot>\n      <BaseEventButton\n        class=\"x-button\"\n        :class=\"buttonClasses\"\n        :events=\"events\"\n        data-test=\"load-content\"\n        aria-label=\"Load\"\n      >\n        <!-- @slot Button content with a text, an icon or both -->\n        <slot name=\"buttonContent\">Load</slot>\n      </BaseEventButton>\n    </slot>\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 } from 'vue'\nimport { use$x } from '../composables'\nimport BaseEventButton from './base-event-button.vue'\n\n/**\n * Component that renders a text with the number of rendered results and\n * the remaining ones and a `<BaseEventButton>` with the logic of emitting\n * the event \"UserReachedResultsListEnd\" to load more results on click.\n *\n * @public\n */\nexport default defineComponent({\n  name: 'PageLoaderButton',\n  components: { BaseEventButton },\n  props: {\n    /**\n     * CSS classes to customize the loader button.\n     *\n     * @internal\n     */\n    buttonClasses: {\n      type: String as PropType<VueCSSClasses>,\n      default: '',\n    },\n    /**\n     * Events to customize what will be emitted by the loader button.\n     *\n     * @internal\n     */\n    buttonEvents: {\n      type: Object as PropType<Partial<XEventsTypes>>,\n    },\n  },\n  setup(props) {\n    const $x = use$x()\n    const resultsLength = computed(() => $x.results.length)\n    const totalResults = computed(() => $x.totalResults)\n\n    /**\n     * The events that will be emitted when clicking on the loader button.\n     *\n     * @returns The {@link XEvent} to emit.\n     * @public\n     */\n    const events = computed<Partial<XEventsTypes>>(() => {\n      return { UserReachedResultsListEnd: undefined, ...props.buttonEvents }\n    })\n\n    return {\n      resultsLength,\n      totalResults,\n      events,\n    }\n  },\n})\n</script>\n\n<style scoped>\n.x-page-loader {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  padding: 32px 0;\n}\n\n.x-page-loader__text-content {\n  padding: 16px 0;\n}\n</style>\n\n<docs lang=\"mdx\">\n## Events\n\nThis component emits the \"UserReachedResultsListEnd\" event by default. This can be changed using the\nbuttonEvents prop:\n\n```vue live\n<template>\n  <PageLoaderButton :buttonEvents=\"{ UserClickedCloseX: undefined }\" />\n</template>\n\n<script>\nimport { PageLoaderButton } from '@empathyco/x-components'\n\nexport default {\n  name: 'PageLoaderButtonDemo',\n  components: {\n    PageLoaderButton,\n  },\n}\n</script>\n```\n\n## See it in action\n\nHere you have a basic example of how the page loader component is rendered.\n\n```vue live\n<template>\n  <PageLoaderButton />\n</template>\n\n<script>\nimport { PageLoaderButton } from '@empathyco/x-components'\n\nexport default {\n  name: 'PageLoaderButtonDemo',\n  components: {\n    PageLoaderButton,\n  },\n}\n</script>\n```\n\n### Customise the default layout\n\nThis component has a default slot which allows to customise the entire layout.\n\n```vue live\n<template>\n  <PageLoaderButton>\n    <template #default=\"{ resultsLength, totalResults }\">\n      <div class=\"x-flex x-flex-col\">\n        <div class=\"x-flex x-gap-4 x-text\">\n          <span class=\"x-text-accent-50 x-font-bold\">{{ resultsLength }}</span>\n          <span>of</span>\n          <span class=\"x-text-accent-50\">{{ totalResults }}</span>\n        </div>\n        <button\n          @click=\"$x.emit('UserReachedResultsListEnd', undefined)\"\n          class=\"x-button x-button-ghost\"\n        >\n          Load more\n        </button>\n      </div>\n    </template>\n  </PageLoaderButton>\n</template>\n\n<script>\nimport { PageLoaderButton } from '@empathyco/x-components'\n\nexport default {\n  name: 'PageLoaderButtonDemo',\n  components: {\n    PageLoaderButton,\n  },\n}\n</script>\n```\n\n### Customise the slots\n\nThis component allows to customise both the textContent and the buttonContent slots. The\ntextContent's slot layout can be replaced entirely, while the buttonContent's slot enables wrapping\ncontent inside and customizing its style using the buttonClasses prop.\n\n```vue live\n<template>\n  <PageLoaderButton :buttonClasses=\"buttonClasses\">\n    <template #textContent=\"{ resultsLength, totalResults }\">\n      <div class=\"x-flex x-gap-4 x-text\">\n        <span class=\"x-text-accent-50 x-font-bold\">{{ resultsLength }}</span>\n        <span>of</span>\n        <span class=\"x-text-accent-50\">{{ totalResults }}</span>\n      </div>\n    </template>\n    <template #buttonContent>Load more results</template>\n  </PageLoaderButton>\n</template>\n\n<script>\nimport { PageLoaderButton } from '@empathyco/x-components'\n\nexport default {\n  name: 'PageLoaderButtonDemo',\n  components: {\n    PageLoaderButton,\n  },\n  data() {\n    return {\n      buttonClasses: 'x-rounded-full',\n    }\n  },\n}\n</script>\n```\n</docs>\n"],"names":[],"mappings":";;;;;;;;;;;AAoCA;;;;;;AAME;AACF,gBAAe,eAAe,CAAC;AAC7B,IAAA,IAAI,EAAE,kBAAkB;IACxB,UAAU,EAAE,EAAE,eAAc,EAAG;AAC/B,IAAA,KAAK,EAAE;AACL;;;;AAIE;AACF,QAAA,aAAa,EAAE;AACb,YAAA,IAAI,EAAE,MAAiC;AACvC,YAAA,OAAO,EAAE,EAAE;AACZ,SAAA;AACD;;;;AAIE;AACF,QAAA,YAAY,EAAE;AACZ,YAAA,IAAI,EAAE,MAAyC;AAChD,SAAA;AACF,KAAA;AACD,IAAA,KAAK,CAAC,KAAK,EAAA;AACT,QAAA,MAAM,EAAC,GAAI,KAAK,EAAC;AACjB,QAAA,MAAM,gBAAgB,QAAQ,CAAC,MAAM,EAAE,CAAC,OAAO,CAAC,MAAM,CAAA;QACtD,MAAM,YAAW,GAAI,QAAQ,CAAC,MAAM,EAAE,CAAC,YAAY,CAAA;AAEnD;;;;;AAKE;AACF,QAAA,MAAM,MAAK,GAAI,QAAQ,CAAwB,MAAI;YACjD,OAAO,EAAE,yBAAyB,EAAE,SAAS,EAAE,GAAG,KAAK,CAAC,YAAW,EAAE;AACvE,QAAA,CAAC,CAAA;QAED,OAAO;YACL,aAAa;YACb,YAAY;YACZ,MAAM;SACR;IACF,CAAC;AACF,CAAA,CAAA;;;;"}
+{"version":3,"file":"page-loader-button.vue2.js","sources":["../../../src/components/page-loader-button.vue"],"sourcesContent":["<template>\n  <div class=\"x-page-loader\" data-test=\"page-loader\">\n    <!--\n      @slot default\n          @binding {number} resultsLength - The search result's length\n          @binding {number} totalResults - The totalResults of a searched query\n      -->\n    <slot v-bind=\"{ resultsLength, totalResults }\">\n      <!-- @slot Rendered count with a text and the number of results displayed & remaining. -->\n      <slot name=\"textContent\" :results-length=\"resultsLength\" :total-results=\"totalResults\">\n        <p class=\"x-page-loader__text-content\" data-test=\"text-content\">\n          You are seeing {{ resultsLength }} of {{ totalResults }} results\n        </p>\n      </slot>\n      <BaseEventButton\n        class=\"xds:button\"\n        :class=\"buttonClasses\"\n        :events=\"events\"\n        data-test=\"load-content\"\n        aria-label=\"Load\"\n      >\n        <!-- @slot Button content with a text, an icon or both -->\n        <slot name=\"buttonContent\">Load</slot>\n      </BaseEventButton>\n    </slot>\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 } from 'vue'\nimport { use$x } from '../composables'\nimport BaseEventButton from './base-event-button.vue'\n\n/**\n * Component that renders a text with the number of rendered results and\n * the remaining ones and a `<BaseEventButton>` with the logic of emitting\n * the event \"UserReachedResultsListEnd\" to load more results on click.\n *\n * @public\n */\nexport default defineComponent({\n  name: 'PageLoaderButton',\n  components: { BaseEventButton },\n  props: {\n    /**\n     * CSS classes to customize the loader button.\n     *\n     * @internal\n     */\n    buttonClasses: {\n      type: String as PropType<VueCSSClasses>,\n      default: '',\n    },\n    /**\n     * Events to customize what will be emitted by the loader button.\n     *\n     * @internal\n     */\n    buttonEvents: {\n      type: Object as PropType<Partial<XEventsTypes>>,\n    },\n  },\n  setup(props) {\n    const $x = use$x()\n    const resultsLength = computed(() => $x.results.length)\n    const totalResults = computed(() => $x.totalResults)\n\n    /**\n     * The events that will be emitted when clicking on the loader button.\n     *\n     * @returns The {@link XEvent} to emit.\n     * @public\n     */\n    const events = computed<Partial<XEventsTypes>>(() => {\n      return { UserReachedResultsListEnd: undefined, ...props.buttonEvents }\n    })\n\n    return {\n      resultsLength,\n      totalResults,\n      events,\n    }\n  },\n})\n</script>\n\n<style scoped>\n.x-page-loader {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  padding: 32px 0;\n}\n\n.x-page-loader__text-content {\n  padding: 16px 0;\n}\n</style>\n\n<docs lang=\"mdx\">\n## Events\n\nThis component emits the \"UserReachedResultsListEnd\" event by default. This can be changed using the\nbuttonEvents prop:\n\n```vue live\n<template>\n  <PageLoaderButton :buttonEvents=\"{ UserClickedCloseX: undefined }\" />\n</template>\n\n<script>\nimport { PageLoaderButton } from '@empathyco/x-components'\n\nexport default {\n  name: 'PageLoaderButtonDemo',\n  components: {\n    PageLoaderButton,\n  },\n}\n</script>\n```\n\n## See it in action\n\nHere you have a basic example of how the page loader component is rendered.\n\n```vue live\n<template>\n  <PageLoaderButton />\n</template>\n\n<script>\nimport { PageLoaderButton } from '@empathyco/x-components'\n\nexport default {\n  name: 'PageLoaderButtonDemo',\n  components: {\n    PageLoaderButton,\n  },\n}\n</script>\n```\n\n### Customise the default layout\n\nThis component has a default slot which allows to customise the entire layout.\n\n```vue live\n<template>\n  <PageLoaderButton>\n    <template #default=\"{ resultsLength, totalResults }\">\n      <div class=\"x-flex x-flex-col\">\n        <div class=\"x-flex x-gap-4 x-text\">\n          <span class=\"x-text-accent-50 x-font-bold\">{{ resultsLength }}</span>\n          <span>of</span>\n          <span class=\"x-text-accent-50\">{{ totalResults }}</span>\n        </div>\n        <button\n          @click=\"$x.emit('UserReachedResultsListEnd', undefined)\"\n          class=\"x-button x-button-ghost\"\n        >\n          Load more\n        </button>\n      </div>\n    </template>\n  </PageLoaderButton>\n</template>\n\n<script>\nimport { PageLoaderButton } from '@empathyco/x-components'\n\nexport default {\n  name: 'PageLoaderButtonDemo',\n  components: {\n    PageLoaderButton,\n  },\n}\n</script>\n```\n\n### Customise the slots\n\nThis component allows to customise both the textContent and the buttonContent slots. The\ntextContent's slot layout can be replaced entirely, while the buttonContent's slot enables wrapping\ncontent inside and customizing its style using the buttonClasses prop.\n\n```vue live\n<template>\n  <PageLoaderButton :buttonClasses=\"buttonClasses\">\n    <template #textContent=\"{ resultsLength, totalResults }\">\n      <div class=\"x-flex x-gap-4 x-text\">\n        <span class=\"x-text-accent-50 x-font-bold\">{{ resultsLength }}</span>\n        <span>of</span>\n        <span class=\"x-text-accent-50\">{{ totalResults }}</span>\n      </div>\n    </template>\n    <template #buttonContent>Load more results</template>\n  </PageLoaderButton>\n</template>\n\n<script>\nimport { PageLoaderButton } from '@empathyco/x-components'\n\nexport default {\n  name: 'PageLoaderButtonDemo',\n  components: {\n    PageLoaderButton,\n  },\n  data() {\n    return {\n      buttonClasses: 'x-rounded-full',\n    }\n  },\n}\n</script>\n```\n</docs>\n"],"names":[],"mappings":";;;;;;;;;;;AAoCA;;;;;;AAME;AACF,gBAAe,eAAe,CAAC;AAC7B,IAAA,IAAI,EAAE,kBAAkB;IACxB,UAAU,EAAE,EAAE,eAAc,EAAG;AAC/B,IAAA,KAAK,EAAE;AACL;;;;AAIE;AACF,QAAA,aAAa,EAAE;AACb,YAAA,IAAI,EAAE,MAAiC;AACvC,YAAA,OAAO,EAAE,EAAE;AACZ,SAAA;AACD;;;;AAIE;AACF,QAAA,YAAY,EAAE;AACZ,YAAA,IAAI,EAAE,MAAyC;AAChD,SAAA;AACF,KAAA;AACD,IAAA,KAAK,CAAC,KAAK,EAAA;AACT,QAAA,MAAM,EAAC,GAAI,KAAK,EAAC;AACjB,QAAA,MAAM,gBAAgB,QAAQ,CAAC,MAAM,EAAE,CAAC,OAAO,CAAC,MAAM,CAAA;QACtD,MAAM,YAAW,GAAI,QAAQ,CAAC,MAAM,EAAE,CAAC,YAAY,CAAA;AAEnD;;;;;AAKE;AACF,QAAA,MAAM,MAAK,GAAI,QAAQ,CAAwB,MAAI;YACjD,OAAO,EAAE,yBAAyB,EAAE,SAAS,EAAE,GAAG,KAAK,CAAC,YAAW,EAAE;AACvE,QAAA,CAAC,CAAA;QAED,OAAO;YACL,aAAa;YACb,YAAY;YACZ,MAAM;SACR;IACF,CAAC;AACF,CAAA,CAAA;;;;"}

package/js/components/page-selector.vue.js

@@ -14,7 +14,7 @@ const _hoisted_4 = ["disabled", "aria-disabled"];
 function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
   return _ctx.visiblePages?.length > 1 ? (openBlock(), createElementBlock("nav", _hoisted_1, [
     createElementVNode("button", {
-      class: normalizeClass(["x-button", _ctx.buttonClasses]),
+      class: normalizeClass(["xds:button", _ctx.buttonClasses]),
       disabled: _ctx.currentPage === 1,
       "data-test": "previous-page-button",
       "aria-label": "Previous page",
@@ -35,7 +35,7 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
       renderList(_ctx.visiblePages, (page) => {
         return openBlock(), createElementBlock("button", {
           key: page.value,
-          class: normalizeClass(["x-button x-page-selector__page", [
+          class: normalizeClass(["x-page-selector__page xds:button", [
             _ctx.itemClasses(page.isSelected),
             {
               "x-page-selector__page--current": page.isSelected,
@@ -63,7 +63,7 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
       /* KEYED_FRAGMENT */
     )),
     createElementVNode("button", {
-      class: normalizeClass(["x-button", _ctx.buttonClasses]),
+      class: normalizeClass(["xds:button", _ctx.buttonClasses]),
       disabled: _ctx.currentPage === _ctx.totalPages,
       "data-test": "next-page-button",
       "aria-label": "Next page",

package/js/components/page-selector.vue.js.map

@@ -1 +1 @@
-{"version":3,"file":"page-selector.vue.js","sources":["../../../src/components/page-selector.vue"],"sourcesContent":["<template>\n  <nav v-if=\"visiblePages?.length > 1\" class=\"x-page-selector\" aria-label=\"Pagination\">\n    <button\n      class=\"x-button\"\n      :class=\"buttonClasses\"\n      :disabled=\"currentPage === 1\"\n      data-test=\"previous-page-button\"\n      aria-label=\"Previous page\"\n      :aria-disabled=\"currentPage === 1\"\n      @click=\"selectPage(currentPage - 1)\"\n    >\n      <slot name=\"previous-page-button\">Prev</slot>\n    </button>\n\n    <button\n      v-for=\"page in visiblePages\"\n      :key=\"page.value\"\n      class=\"x-button x-page-selector__page\"\n      :class=\"[\n        itemClasses(page.isSelected),\n        {\n          'x-page-selector__page--current': page.isSelected,\n          'x-page-selector__page--hidden': page.value === hiddenPage,\n        },\n      ]\"\n      :data-test=\"`page-button-${page.value}`\"\n      :aria-label=\"`Page ${page.value}`\"\n      :aria-current=\"page.isSelected ? 'page' : undefined\"\n      @click=\"selectPage(page.value)\"\n    >\n      <slot name=\"page-button\" :page=\"page.value\" :is-selected=\"page.isSelected\">\n        {{ page.value }}\n      </slot>\n    </button>\n\n    <button\n      class=\"x-button\"\n      :class=\"buttonClasses\"\n      :disabled=\"currentPage === totalPages\"\n      data-test=\"next-page-button\"\n      aria-label=\"Next page\"\n      :aria-disabled=\"currentPage === totalPages\"\n      @click=\"selectPage(currentPage + 1)\"\n    >\n      <slot name=\"next-page-button\">Next</slot>\n    </button>\n  </nav>\n</template>\n\n<script lang=\"ts\">\nimport type { Dictionary } from '@empathyco/x-utils'\nimport type { PropType } from 'vue'\nimport { computed, defineComponent } from 'vue'\nimport { useXBus } from '../composables'\n\ninterface PageItem {\n  value: number | string\n  isSelected: boolean\n}\n\n/**\n * Component that renders a pagination control with buttons for navigating\n * between pages. It displays the current page, allows selecting other pages,\n * and emits events when a page is selected.\n *\n * @public\n */\nexport default defineComponent({\n  name: 'PageSelector',\n  props: {\n    /**\n     * CSS classes to customize the prev/next buttons.\n     */\n    buttonClasses: {\n      type: Array as PropType<(string | Dictionary<boolean>)[]>,\n      default: () => [],\n    },\n    /**\n     * The current page number.\n     */\n    currentPage: {\n      type: Number,\n      required: true,\n    },\n    /**\n     * The string content of the hidden pages.\n     */\n    hiddenPage: {\n      type: String,\n      default: '...',\n    },\n    /**\n     * CSS classes to customize the page items.\n     */\n    itemClasses: {\n      type: Function as PropType<\n        (isSelected: boolean) => string | Dictionary<boolean> | (string | Dictionary<boolean>)[]\n      >,\n      default: () => [],\n    },\n    /**\n     * The number of pages to show before and after the current page.\n     */\n    range: {\n      type: Number,\n      default: 2,\n    },\n    /**\n     * The class of the scroll container to scroll to top when a page is selected.\n     */\n    scrollTarget: {\n      type: String,\n      default: 'main-scroll',\n    },\n    /**\n     * The total number of pages.\n     */\n    totalPages: {\n      type: Number,\n      required: true,\n    },\n  },\n  setup(props) {\n    const bus = useXBus()\n\n    const visiblePages = computed(() => {\n      const start = Math.max(props.currentPage - props.range, 1)\n      const end = Math.min(props.currentPage + props.range, props.totalPages)\n      const pages: PageItem[] = Array.from({ length: end - start + 1 }, (_, i) => {\n        const pageValue: string | number = start + i\n        return { value: pageValue, isSelected: pageValue === props.currentPage }\n      })\n\n      // Ensure first and last pages are always visible when needed\n      if (start > 1) {\n        pages.unshift({ value: 1, isSelected: props.currentPage === 1 })\n        if (start > 2) {\n          pages.splice(1, 0, { value: props.hiddenPage, isSelected: false })\n        }\n      }\n      if (end < props.totalPages) {\n        if (end < props.totalPages - 1) {\n          pages.push({ value: props.hiddenPage, isSelected: false })\n        }\n        pages.push({\n          value: props.totalPages,\n          isSelected: props.totalPages === props.currentPage,\n        })\n      }\n\n      return pages\n    })\n\n    /**\n     * Handles the selection of a page.\n     *\n     * @param page - The page to select. Can be a number representing the page number or a string '...' indicating an ellipsis.\n     */\n    const selectPage = (page: number | string): void => {\n      if (page === '...') {\n        return\n      }\n      if (typeof page === 'number' && page > 0 && page <= props.totalPages) {\n        bus.emit('UserSelectedAPage', page)\n        /**\n         * Emits scroll to top to prevent keeping the position if there is more content\n         * after results, as for example Next Queries Preview.\n         */\n        bus.emit('UserClickedScrollToTop', props.scrollTarget)\n      }\n    }\n\n    return {\n      visiblePages,\n      selectPage,\n    }\n  },\n})\n</script>\n\n<style scoped>\n.x-page-selector {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  gap: 2px;\n}\n\n.x-page-selector__page--current,\n.x-page-selector__page--hidden {\n  cursor: default;\n}\n</style>\n\n<docs lang=\"mdx\">\n## Events\n\nThis component emits the \"UserSelectedAPage\" and the UserClickedScrollToTop events by default.\n\n## See it in action\n\nBasic example of how the component is rendered.\n\n```vue live\n<template>\n  <PageSelector :current-page=\"page\" :total-pages=\"totalPages\" />\n</template>\n\n<script>\nimport { PageSelector } from '@empathyco/x-components'\n\nexport default {\n  name: 'PageSelectorDemo',\n  components: {\n    PageSelector,\n  },\n  data() {\n    return {\n      page: 0,\n      totalPages: 10,\n    }\n  },\n}\n</script>\n```\n\n### Customize the slots\n\nThis component allows to customise its content using slots.\n\n```vue live\n<template>\n  <PageSelector\n    :total-pages=\"totalPages\"\n    :currentPage=\"page\"\n    :item-classes=\"\n      (isSelected: boolean) =>\n        isSelected\n          ? 'x-button-lead x-text-neutral-10'\n          : 'x-text-neutral-90 x-button-outlined'\n    \"\n    :buttonClasses=\"['x-rounded-md']\"\n  >\n    <template #previous-page-button>\n      <span>Back</span>\n    </template>\n    <template #page-button=\"{ page, isSelected }\">\n      <h2 :class=\"{ 'x-text1': !isSelected }\">\n        {{ page }}\n      </h2>\n    </template>\n    <template #next-page-button>\n      <span>Forward</span>\n    </template>\n  </PageSelector>\n</template>\n\n<script>\nimport { PageSelector } from '@empathyco/x-components'\n\nexport default {\n  name: 'PageSelectorDemo',\n  components: {\n    PageSelector,\n  },\n  data() {\n    return {\n      page: 2,\n      totalPages: 10,\n    }\n  },\n}\n</script>\n```\n\n### Customize the number of pages to show before and after the current page by changing the range default value.\n\n```vue live\n<template>\n  <PageSelector :current-page=\"page\" :total-pages=\"totalPages\" :range=\"range\" />\n</template>\n\n<script>\nimport { PageSelector } from '@empathyco/x-components'\n\nexport default {\n  name: 'PageSelectorDemo',\n  components: {\n    PageSelector,\n  },\n  data() {\n    return {\n      page: 6,\n      totalPages: 100,\n      range: 4,\n    }\n  },\n}\n</script>\n```\n</docs>\n"],"names":["_openBlock","_createElementBlock","_createElementVNode","_normalizeClass","_renderSlot","_createTextVNode","_Fragment","_renderList","_toDisplayString"],"mappings":"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"}
+{"version":3,"file":"page-selector.vue.js","sources":["../../../src/components/page-selector.vue"],"sourcesContent":["<template>\n  <nav v-if=\"visiblePages?.length > 1\" class=\"x-page-selector\" aria-label=\"Pagination\">\n    <button\n      class=\"xds:button\"\n      :class=\"buttonClasses\"\n      :disabled=\"currentPage === 1\"\n      data-test=\"previous-page-button\"\n      aria-label=\"Previous page\"\n      :aria-disabled=\"currentPage === 1\"\n      @click=\"selectPage(currentPage - 1)\"\n    >\n      <slot name=\"previous-page-button\">Prev</slot>\n    </button>\n\n    <button\n      v-for=\"page in visiblePages\"\n      :key=\"page.value\"\n      class=\"x-page-selector__page xds:button\"\n      :class=\"[\n        itemClasses(page.isSelected),\n        {\n          'x-page-selector__page--current': page.isSelected,\n          'x-page-selector__page--hidden': page.value === hiddenPage,\n        },\n      ]\"\n      :data-test=\"`page-button-${page.value}`\"\n      :aria-label=\"`Page ${page.value}`\"\n      :aria-current=\"page.isSelected ? 'page' : undefined\"\n      @click=\"selectPage(page.value)\"\n    >\n      <slot name=\"page-button\" :page=\"page.value\" :is-selected=\"page.isSelected\">\n        {{ page.value }}\n      </slot>\n    </button>\n\n    <button\n      class=\"xds:button\"\n      :class=\"buttonClasses\"\n      :disabled=\"currentPage === totalPages\"\n      data-test=\"next-page-button\"\n      aria-label=\"Next page\"\n      :aria-disabled=\"currentPage === totalPages\"\n      @click=\"selectPage(currentPage + 1)\"\n    >\n      <slot name=\"next-page-button\">Next</slot>\n    </button>\n  </nav>\n</template>\n\n<script lang=\"ts\">\nimport type { Dictionary } from '@empathyco/x-utils'\nimport type { PropType } from 'vue'\nimport { computed, defineComponent } from 'vue'\nimport { useXBus } from '../composables'\n\ninterface PageItem {\n  value: number | string\n  isSelected: boolean\n}\n\n/**\n * Component that renders a pagination control with buttons for navigating\n * between pages. It displays the current page, allows selecting other pages,\n * and emits events when a page is selected.\n *\n * @public\n */\nexport default defineComponent({\n  name: 'PageSelector',\n  props: {\n    /**\n     * CSS classes to customize the prev/next buttons.\n     */\n    buttonClasses: {\n      type: Array as PropType<(string | Dictionary<boolean>)[]>,\n      default: () => [],\n    },\n    /**\n     * The current page number.\n     */\n    currentPage: {\n      type: Number,\n      required: true,\n    },\n    /**\n     * The string content of the hidden pages.\n     */\n    hiddenPage: {\n      type: String,\n      default: '...',\n    },\n    /**\n     * CSS classes to customize the page items.\n     */\n    itemClasses: {\n      type: Function as PropType<\n        (isSelected: boolean) => string | Dictionary<boolean> | (string | Dictionary<boolean>)[]\n      >,\n      default: () => [],\n    },\n    /**\n     * The number of pages to show before and after the current page.\n     */\n    range: {\n      type: Number,\n      default: 2,\n    },\n    /**\n     * The class of the scroll container to scroll to top when a page is selected.\n     */\n    scrollTarget: {\n      type: String,\n      default: 'main-scroll',\n    },\n    /**\n     * The total number of pages.\n     */\n    totalPages: {\n      type: Number,\n      required: true,\n    },\n  },\n  setup(props) {\n    const bus = useXBus()\n\n    const visiblePages = computed(() => {\n      const start = Math.max(props.currentPage - props.range, 1)\n      const end = Math.min(props.currentPage + props.range, props.totalPages)\n      const pages: PageItem[] = Array.from({ length: end - start + 1 }, (_, i) => {\n        const pageValue: string | number = start + i\n        return { value: pageValue, isSelected: pageValue === props.currentPage }\n      })\n\n      // Ensure first and last pages are always visible when needed\n      if (start > 1) {\n        pages.unshift({ value: 1, isSelected: props.currentPage === 1 })\n        if (start > 2) {\n          pages.splice(1, 0, { value: props.hiddenPage, isSelected: false })\n        }\n      }\n      if (end < props.totalPages) {\n        if (end < props.totalPages - 1) {\n          pages.push({ value: props.hiddenPage, isSelected: false })\n        }\n        pages.push({\n          value: props.totalPages,\n          isSelected: props.totalPages === props.currentPage,\n        })\n      }\n\n      return pages\n    })\n\n    /**\n     * Handles the selection of a page.\n     *\n     * @param page - The page to select. Can be a number representing the page number or a string '...' indicating an ellipsis.\n     */\n    const selectPage = (page: number | string): void => {\n      if (page === '...') {\n        return\n      }\n      if (typeof page === 'number' && page > 0 && page <= props.totalPages) {\n        bus.emit('UserSelectedAPage', page)\n        /**\n         * Emits scroll to top to prevent keeping the position if there is more content\n         * after results, as for example Next Queries Preview.\n         */\n        bus.emit('UserClickedScrollToTop', props.scrollTarget)\n      }\n    }\n\n    return {\n      visiblePages,\n      selectPage,\n    }\n  },\n})\n</script>\n\n<style scoped>\n.x-page-selector {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  gap: 2px;\n}\n\n.x-page-selector__page--current,\n.x-page-selector__page--hidden {\n  cursor: default;\n}\n</style>\n\n<docs lang=\"mdx\">\n## Events\n\nThis component emits the \"UserSelectedAPage\" and the UserClickedScrollToTop events by default.\n\n## See it in action\n\nBasic example of how the component is rendered.\n\n```vue live\n<template>\n  <PageSelector :current-page=\"page\" :total-pages=\"totalPages\" />\n</template>\n\n<script>\nimport { PageSelector } from '@empathyco/x-components'\n\nexport default {\n  name: 'PageSelectorDemo',\n  components: {\n    PageSelector,\n  },\n  data() {\n    return {\n      page: 0,\n      totalPages: 10,\n    }\n  },\n}\n</script>\n```\n\n### Customize the slots\n\nThis component allows to customise its content using slots.\n\n```vue live\n<template>\n  <PageSelector\n    :total-pages=\"totalPages\"\n    :currentPage=\"page\"\n    :item-classes=\"\n      (isSelected: boolean) =>\n        isSelected\n          ? 'x-button-lead x-text-neutral-10'\n          : 'x-text-neutral-90 x-button-outlined'\n    \"\n    :buttonClasses=\"['x-rounded-md']\"\n  >\n    <template #previous-page-button>\n      <span>Back</span>\n    </template>\n    <template #page-button=\"{ page, isSelected }\">\n      <h2 :class=\"{ 'x-text1': !isSelected }\">\n        {{ page }}\n      </h2>\n    </template>\n    <template #next-page-button>\n      <span>Forward</span>\n    </template>\n  </PageSelector>\n</template>\n\n<script>\nimport { PageSelector } from '@empathyco/x-components'\n\nexport default {\n  name: 'PageSelectorDemo',\n  components: {\n    PageSelector,\n  },\n  data() {\n    return {\n      page: 2,\n      totalPages: 10,\n    }\n  },\n}\n</script>\n```\n\n### Customize the number of pages to show before and after the current page by changing the range default value.\n\n```vue live\n<template>\n  <PageSelector :current-page=\"page\" :total-pages=\"totalPages\" :range=\"range\" />\n</template>\n\n<script>\nimport { PageSelector } from '@empathyco/x-components'\n\nexport default {\n  name: 'PageSelectorDemo',\n  components: {\n    PageSelector,\n  },\n  data() {\n    return {\n      page: 6,\n      totalPages: 100,\n      range: 4,\n    }\n  },\n}\n</script>\n```\n</docs>\n"],"names":["_openBlock","_createElementBlock","_createElementVNode","_normalizeClass","_renderSlot","_createTextVNode","_Fragment","_renderList","_toDisplayString"],"mappings":"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"}

package/js/components/page-selector.vue2.js.map

@@ -1 +1 @@
-{"version":3,"file":"page-selector.vue2.js","sources":["../../../src/components/page-selector.vue"],"sourcesContent":["<template>\n  <nav v-if=\"visiblePages?.length > 1\" class=\"x-page-selector\" aria-label=\"Pagination\">\n    <button\n      class=\"x-button\"\n      :class=\"buttonClasses\"\n      :disabled=\"currentPage === 1\"\n      data-test=\"previous-page-button\"\n      aria-label=\"Previous page\"\n      :aria-disabled=\"currentPage === 1\"\n      @click=\"selectPage(currentPage - 1)\"\n    >\n      <slot name=\"previous-page-button\">Prev</slot>\n    </button>\n\n    <button\n      v-for=\"page in visiblePages\"\n      :key=\"page.value\"\n      class=\"x-button x-page-selector__page\"\n      :class=\"[\n        itemClasses(page.isSelected),\n        {\n          'x-page-selector__page--current': page.isSelected,\n          'x-page-selector__page--hidden': page.value === hiddenPage,\n        },\n      ]\"\n      :data-test=\"`page-button-${page.value}`\"\n      :aria-label=\"`Page ${page.value}`\"\n      :aria-current=\"page.isSelected ? 'page' : undefined\"\n      @click=\"selectPage(page.value)\"\n    >\n      <slot name=\"page-button\" :page=\"page.value\" :is-selected=\"page.isSelected\">\n        {{ page.value }}\n      </slot>\n    </button>\n\n    <button\n      class=\"x-button\"\n      :class=\"buttonClasses\"\n      :disabled=\"currentPage === totalPages\"\n      data-test=\"next-page-button\"\n      aria-label=\"Next page\"\n      :aria-disabled=\"currentPage === totalPages\"\n      @click=\"selectPage(currentPage + 1)\"\n    >\n      <slot name=\"next-page-button\">Next</slot>\n    </button>\n  </nav>\n</template>\n\n<script lang=\"ts\">\nimport type { Dictionary } from '@empathyco/x-utils'\nimport type { PropType } from 'vue'\nimport { computed, defineComponent } from 'vue'\nimport { useXBus } from '../composables'\n\ninterface PageItem {\n  value: number | string\n  isSelected: boolean\n}\n\n/**\n * Component that renders a pagination control with buttons for navigating\n * between pages. It displays the current page, allows selecting other pages,\n * and emits events when a page is selected.\n *\n * @public\n */\nexport default defineComponent({\n  name: 'PageSelector',\n  props: {\n    /**\n     * CSS classes to customize the prev/next buttons.\n     */\n    buttonClasses: {\n      type: Array as PropType<(string | Dictionary<boolean>)[]>,\n      default: () => [],\n    },\n    /**\n     * The current page number.\n     */\n    currentPage: {\n      type: Number,\n      required: true,\n    },\n    /**\n     * The string content of the hidden pages.\n     */\n    hiddenPage: {\n      type: String,\n      default: '...',\n    },\n    /**\n     * CSS classes to customize the page items.\n     */\n    itemClasses: {\n      type: Function as PropType<\n        (isSelected: boolean) => string | Dictionary<boolean> | (string | Dictionary<boolean>)[]\n      >,\n      default: () => [],\n    },\n    /**\n     * The number of pages to show before and after the current page.\n     */\n    range: {\n      type: Number,\n      default: 2,\n    },\n    /**\n     * The class of the scroll container to scroll to top when a page is selected.\n     */\n    scrollTarget: {\n      type: String,\n      default: 'main-scroll',\n    },\n    /**\n     * The total number of pages.\n     */\n    totalPages: {\n      type: Number,\n      required: true,\n    },\n  },\n  setup(props) {\n    const bus = useXBus()\n\n    const visiblePages = computed(() => {\n      const start = Math.max(props.currentPage - props.range, 1)\n      const end = Math.min(props.currentPage + props.range, props.totalPages)\n      const pages: PageItem[] = Array.from({ length: end - start + 1 }, (_, i) => {\n        const pageValue: string | number = start + i\n        return { value: pageValue, isSelected: pageValue === props.currentPage }\n      })\n\n      // Ensure first and last pages are always visible when needed\n      if (start > 1) {\n        pages.unshift({ value: 1, isSelected: props.currentPage === 1 })\n        if (start > 2) {\n          pages.splice(1, 0, { value: props.hiddenPage, isSelected: false })\n        }\n      }\n      if (end < props.totalPages) {\n        if (end < props.totalPages - 1) {\n          pages.push({ value: props.hiddenPage, isSelected: false })\n        }\n        pages.push({\n          value: props.totalPages,\n          isSelected: props.totalPages === props.currentPage,\n        })\n      }\n\n      return pages\n    })\n\n    /**\n     * Handles the selection of a page.\n     *\n     * @param page - The page to select. Can be a number representing the page number or a string '...' indicating an ellipsis.\n     */\n    const selectPage = (page: number | string): void => {\n      if (page === '...') {\n        return\n      }\n      if (typeof page === 'number' && page > 0 && page <= props.totalPages) {\n        bus.emit('UserSelectedAPage', page)\n        /**\n         * Emits scroll to top to prevent keeping the position if there is more content\n         * after results, as for example Next Queries Preview.\n         */\n        bus.emit('UserClickedScrollToTop', props.scrollTarget)\n      }\n    }\n\n    return {\n      visiblePages,\n      selectPage,\n    }\n  },\n})\n</script>\n\n<style scoped>\n.x-page-selector {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  gap: 2px;\n}\n\n.x-page-selector__page--current,\n.x-page-selector__page--hidden {\n  cursor: default;\n}\n</style>\n\n<docs lang=\"mdx\">\n## Events\n\nThis component emits the \"UserSelectedAPage\" and the UserClickedScrollToTop events by default.\n\n## See it in action\n\nBasic example of how the component is rendered.\n\n```vue live\n<template>\n  <PageSelector :current-page=\"page\" :total-pages=\"totalPages\" />\n</template>\n\n<script>\nimport { PageSelector } from '@empathyco/x-components'\n\nexport default {\n  name: 'PageSelectorDemo',\n  components: {\n    PageSelector,\n  },\n  data() {\n    return {\n      page: 0,\n      totalPages: 10,\n    }\n  },\n}\n</script>\n```\n\n### Customize the slots\n\nThis component allows to customise its content using slots.\n\n```vue live\n<template>\n  <PageSelector\n    :total-pages=\"totalPages\"\n    :currentPage=\"page\"\n    :item-classes=\"\n      (isSelected: boolean) =>\n        isSelected\n          ? 'x-button-lead x-text-neutral-10'\n          : 'x-text-neutral-90 x-button-outlined'\n    \"\n    :buttonClasses=\"['x-rounded-md']\"\n  >\n    <template #previous-page-button>\n      <span>Back</span>\n    </template>\n    <template #page-button=\"{ page, isSelected }\">\n      <h2 :class=\"{ 'x-text1': !isSelected }\">\n        {{ page }}\n      </h2>\n    </template>\n    <template #next-page-button>\n      <span>Forward</span>\n    </template>\n  </PageSelector>\n</template>\n\n<script>\nimport { PageSelector } from '@empathyco/x-components'\n\nexport default {\n  name: 'PageSelectorDemo',\n  components: {\n    PageSelector,\n  },\n  data() {\n    return {\n      page: 2,\n      totalPages: 10,\n    }\n  },\n}\n</script>\n```\n\n### Customize the number of pages to show before and after the current page by changing the range default value.\n\n```vue live\n<template>\n  <PageSelector :current-page=\"page\" :total-pages=\"totalPages\" :range=\"range\" />\n</template>\n\n<script>\nimport { PageSelector } from '@empathyco/x-components'\n\nexport default {\n  name: 'PageSelectorDemo',\n  components: {\n    PageSelector,\n  },\n  data() {\n    return {\n      page: 6,\n      totalPages: 100,\n      range: 4,\n    }\n  },\n}\n</script>\n```\n</docs>\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"page-selector.vue2.js","sources":["../../../src/components/page-selector.vue"],"sourcesContent":["<template>\n  <nav v-if=\"visiblePages?.length > 1\" class=\"x-page-selector\" aria-label=\"Pagination\">\n    <button\n      class=\"xds:button\"\n      :class=\"buttonClasses\"\n      :disabled=\"currentPage === 1\"\n      data-test=\"previous-page-button\"\n      aria-label=\"Previous page\"\n      :aria-disabled=\"currentPage === 1\"\n      @click=\"selectPage(currentPage - 1)\"\n    >\n      <slot name=\"previous-page-button\">Prev</slot>\n    </button>\n\n    <button\n      v-for=\"page in visiblePages\"\n      :key=\"page.value\"\n      class=\"x-page-selector__page xds:button\"\n      :class=\"[\n        itemClasses(page.isSelected),\n        {\n          'x-page-selector__page--current': page.isSelected,\n          'x-page-selector__page--hidden': page.value === hiddenPage,\n        },\n      ]\"\n      :data-test=\"`page-button-${page.value}`\"\n      :aria-label=\"`Page ${page.value}`\"\n      :aria-current=\"page.isSelected ? 'page' : undefined\"\n      @click=\"selectPage(page.value)\"\n    >\n      <slot name=\"page-button\" :page=\"page.value\" :is-selected=\"page.isSelected\">\n        {{ page.value }}\n      </slot>\n    </button>\n\n    <button\n      class=\"xds:button\"\n      :class=\"buttonClasses\"\n      :disabled=\"currentPage === totalPages\"\n      data-test=\"next-page-button\"\n      aria-label=\"Next page\"\n      :aria-disabled=\"currentPage === totalPages\"\n      @click=\"selectPage(currentPage + 1)\"\n    >\n      <slot name=\"next-page-button\">Next</slot>\n    </button>\n  </nav>\n</template>\n\n<script lang=\"ts\">\nimport type { Dictionary } from '@empathyco/x-utils'\nimport type { PropType } from 'vue'\nimport { computed, defineComponent } from 'vue'\nimport { useXBus } from '../composables'\n\ninterface PageItem {\n  value: number | string\n  isSelected: boolean\n}\n\n/**\n * Component that renders a pagination control with buttons for navigating\n * between pages. It displays the current page, allows selecting other pages,\n * and emits events when a page is selected.\n *\n * @public\n */\nexport default defineComponent({\n  name: 'PageSelector',\n  props: {\n    /**\n     * CSS classes to customize the prev/next buttons.\n     */\n    buttonClasses: {\n      type: Array as PropType<(string | Dictionary<boolean>)[]>,\n      default: () => [],\n    },\n    /**\n     * The current page number.\n     */\n    currentPage: {\n      type: Number,\n      required: true,\n    },\n    /**\n     * The string content of the hidden pages.\n     */\n    hiddenPage: {\n      type: String,\n      default: '...',\n    },\n    /**\n     * CSS classes to customize the page items.\n     */\n    itemClasses: {\n      type: Function as PropType<\n        (isSelected: boolean) => string | Dictionary<boolean> | (string | Dictionary<boolean>)[]\n      >,\n      default: () => [],\n    },\n    /**\n     * The number of pages to show before and after the current page.\n     */\n    range: {\n      type: Number,\n      default: 2,\n    },\n    /**\n     * The class of the scroll container to scroll to top when a page is selected.\n     */\n    scrollTarget: {\n      type: String,\n      default: 'main-scroll',\n    },\n    /**\n     * The total number of pages.\n     */\n    totalPages: {\n      type: Number,\n      required: true,\n    },\n  },\n  setup(props) {\n    const bus = useXBus()\n\n    const visiblePages = computed(() => {\n      const start = Math.max(props.currentPage - props.range, 1)\n      const end = Math.min(props.currentPage + props.range, props.totalPages)\n      const pages: PageItem[] = Array.from({ length: end - start + 1 }, (_, i) => {\n        const pageValue: string | number = start + i\n        return { value: pageValue, isSelected: pageValue === props.currentPage }\n      })\n\n      // Ensure first and last pages are always visible when needed\n      if (start > 1) {\n        pages.unshift({ value: 1, isSelected: props.currentPage === 1 })\n        if (start > 2) {\n          pages.splice(1, 0, { value: props.hiddenPage, isSelected: false })\n        }\n      }\n      if (end < props.totalPages) {\n        if (end < props.totalPages - 1) {\n          pages.push({ value: props.hiddenPage, isSelected: false })\n        }\n        pages.push({\n          value: props.totalPages,\n          isSelected: props.totalPages === props.currentPage,\n        })\n      }\n\n      return pages\n    })\n\n    /**\n     * Handles the selection of a page.\n     *\n     * @param page - The page to select. Can be a number representing the page number or a string '...' indicating an ellipsis.\n     */\n    const selectPage = (page: number | string): void => {\n      if (page === '...') {\n        return\n      }\n      if (typeof page === 'number' && page > 0 && page <= props.totalPages) {\n        bus.emit('UserSelectedAPage', page)\n        /**\n         * Emits scroll to top to prevent keeping the position if there is more content\n         * after results, as for example Next Queries Preview.\n         */\n        bus.emit('UserClickedScrollToTop', props.scrollTarget)\n      }\n    }\n\n    return {\n      visiblePages,\n      selectPage,\n    }\n  },\n})\n</script>\n\n<style scoped>\n.x-page-selector {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  gap: 2px;\n}\n\n.x-page-selector__page--current,\n.x-page-selector__page--hidden {\n  cursor: default;\n}\n</style>\n\n<docs lang=\"mdx\">\n## Events\n\nThis component emits the \"UserSelectedAPage\" and the UserClickedScrollToTop events by default.\n\n## See it in action\n\nBasic example of how the component is rendered.\n\n```vue live\n<template>\n  <PageSelector :current-page=\"page\" :total-pages=\"totalPages\" />\n</template>\n\n<script>\nimport { PageSelector } from '@empathyco/x-components'\n\nexport default {\n  name: 'PageSelectorDemo',\n  components: {\n    PageSelector,\n  },\n  data() {\n    return {\n      page: 0,\n      totalPages: 10,\n    }\n  },\n}\n</script>\n```\n\n### Customize the slots\n\nThis component allows to customise its content using slots.\n\n```vue live\n<template>\n  <PageSelector\n    :total-pages=\"totalPages\"\n    :currentPage=\"page\"\n    :item-classes=\"\n      (isSelected: boolean) =>\n        isSelected\n          ? 'x-button-lead x-text-neutral-10'\n          : 'x-text-neutral-90 x-button-outlined'\n    \"\n    :buttonClasses=\"['x-rounded-md']\"\n  >\n    <template #previous-page-button>\n      <span>Back</span>\n    </template>\n    <template #page-button=\"{ page, isSelected }\">\n      <h2 :class=\"{ 'x-text1': !isSelected }\">\n        {{ page }}\n      </h2>\n    </template>\n    <template #next-page-button>\n      <span>Forward</span>\n    </template>\n  </PageSelector>\n</template>\n\n<script>\nimport { PageSelector } from '@empathyco/x-components'\n\nexport default {\n  name: 'PageSelectorDemo',\n  components: {\n    PageSelector,\n  },\n  data() {\n    return {\n      page: 2,\n      totalPages: 10,\n    }\n  },\n}\n</script>\n```\n\n### Customize the number of pages to show before and after the current page by changing the range default value.\n\n```vue live\n<template>\n  <PageSelector :current-page=\"page\" :total-pages=\"totalPages\" :range=\"range\" />\n</template>\n\n<script>\nimport { PageSelector } from '@empathyco/x-components'\n\nexport default {\n  name: 'PageSelectorDemo',\n  components: {\n    PageSelector,\n  },\n  data() {\n    return {\n      page: 6,\n      totalPages: 100,\n      range: 4,\n    }\n  },\n}\n</script>\n```\n</docs>\n"],"names":[],"mappings":"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"}

package/js/components/panels/base-id-toggle-panel-button.vue.js

@@ -6,7 +6,7 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_BaseEventButton = resolveComponent("BaseEventButton");
   return openBlock(), createBlock(_component_BaseEventButton, {
     events: _ctx.events,
-    class: "x-base-id-toggle-panel-button x-button",
+    class: "x-base-id-toggle-panel-button xds:button",
     "data-test": "base-id-toggle-button",
     "aria-pressed": _ctx.isPanelOpen.toString()
   }, {