@empathyco/x-components 6.0.0-alpha.5 → 6.0.0-alpha.50

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

@@ -1,5 +1,5 @@
 import _sfc_main from './multi-column-max-width-layout.vue2.js';
-import { resolveComponent, openBlock, createElementBlock, normalizeClass, normalizeStyle, createElementVNode, createCommentVNode, renderSlot, createBlock, withCtx, createVNode } from 'vue';
+import { resolveComponent, openBlock, createElementBlock, normalizeClass, normalizeStyle, createElementVNode, renderSlot, createCommentVNode, createBlock, withCtx, createVNode } from 'vue';
 import './multi-column-max-width-layout.vue3.js';
 import './multi-column-max-width-layout.vue4.js';
 import _export_sfc from '../../_virtual/_plugin-vue_export-helper.js';
@@ -88,19 +88,16 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
     [
       createElementVNode("header", _hoisted_1, [
         _ctx.devMode || _ctx.$slots["header-start"] ? (openBlock(), createElementBlock("div", _hoisted_2, [
-          createCommentVNode(" @slot Slot that can be used to insert content into the left part of the header. "),
           renderSlot(_ctx.$slots, "header-start", {}, () => [
             _ctx.devMode ? (openBlock(), createElementBlock("span", _hoisted_3, "HEADER START")) : createCommentVNode("v-if", true)
           ], true)
         ])) : createCommentVNode("v-if", true),
         _ctx.devMode || _ctx.$slots["header-middle"] ? (openBlock(), createElementBlock("div", _hoisted_4, [
-          createCommentVNode(" @slot Slot that can be used to insert content into the center part of the header. "),
           renderSlot(_ctx.$slots, "header-middle", {}, () => [
             _ctx.devMode ? (openBlock(), createElementBlock("span", _hoisted_5, "HEADER MIDDLE")) : createCommentVNode("v-if", true)
           ], true)
         ])) : createCommentVNode("v-if", true),
         _ctx.devMode || _ctx.$slots["header-end"] ? (openBlock(), createElementBlock("div", _hoisted_6, [
-          createCommentVNode(" @slot Slot that can be used to insert content into the right part of the header. "),
           renderSlot(_ctx.$slots, "header-end", {}, () => [
             _ctx.devMode ? (openBlock(), createElementBlock("span", _hoisted_7, "HEADER END")) : createCommentVNode("v-if", true)
           ], true)
@@ -108,7 +105,6 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
       ]),
       _ctx.devMode || _ctx.$slots["sub-header"] ? (openBlock(), createElementBlock("div", _hoisted_8, [
         createElementVNode("div", _hoisted_9, [
-          createCommentVNode(" @slot Slot that can be used to insert content into below the header. "),
           renderSlot(_ctx.$slots, "sub-header", {}, () => [
             _ctx.devMode ? (openBlock(), createElementBlock("span", _hoisted_10, "SUB HEADER")) : createCommentVNode("v-if", true)
           ], true)
@@ -117,12 +113,10 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
       _ctx.devMode || _ctx.$slots["toolbar-aside"] || _ctx.$slots["toolbar-body"] ? (openBlock(), createElementBlock("section", _hoisted_11, [
         createElementVNode("aside", _hoisted_12, [
           renderSlot(_ctx.$slots, "toolbar-aside", {}, () => [
-            createCommentVNode(" @slot Slot that can be used to insert content above the left aside. "),
             _ctx.devMode ? (openBlock(), createElementBlock("span", _hoisted_13, "TOOLBAR ASIDE")) : createCommentVNode("v-if", true)
           ], true)
         ]),
         createElementVNode("div", _hoisted_14, [
-          createCommentVNode(" @slot Slot that can be used to insert content above the body. "),
           renderSlot(_ctx.$slots, "toolbar-body", {}, () => [
             _ctx.devMode ? (openBlock(), createElementBlock("span", _hoisted_15, "TOOLBAR BODY")) : createCommentVNode("v-if", true)
           ], true)
@@ -142,7 +136,6 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
             }, {
               default: withCtx(() => [
                 createElementVNode("div", _hoisted_17, [
-                  createCommentVNode(" @slot Slot that can be used to insert content into the left side bar. "),
                   renderSlot(_ctx.$slots, "main-aside", {}, () => [
                     _ctx.devMode ? (openBlock(), createElementBlock("span", _hoisted_18, "MAIN ASIDE")) : createCommentVNode("v-if", true)
                   ], true)
@@ -164,7 +157,6 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
             }, {
               default: withCtx(() => [
                 createElementVNode("section", _hoisted_19, [
-                  createCommentVNode(" @slot Slot that can be used to insert the body content. "),
                   renderSlot(_ctx.$slots, "main-body", {}, () => [
                     _ctx.devMode ? (openBlock(), createElementBlock("span", _hoisted_20, "MAIN BODY")) : createCommentVNode("v-if", true)
                   ], true)

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

@@ -1 +1 @@
-{"version":3,"file":"multi-column-max-width-layout.vue.js","sources":["../../../../src/components/layouts/multi-column-max-width-layout.vue"],"sourcesContent":["<template>\n  <div\n    class=\"x-layout x-layout--columns\"\n    :class=\"{ 'dev-mode': devMode }\"\n    :style=\"{ height: devMode || $slots['main-body'] ? '100%' : 'auto' }\"\n  >\n    <header class=\"x-layout__header\">\n      <div v-if=\"devMode || $slots['header-start']\" class=\"x-list x-layout__header-start\">\n        <!-- @slot Slot that can be used to insert content into the left part of the header. -->\n        <slot name=\"header-start\">\n          <span v-if=\"devMode\" class=\"slot-helper\">HEADER START</span>\n        </slot>\n      </div>\n\n      <div v-if=\"devMode || $slots['header-middle']\" class=\"x-list x-layout__header-middle\">\n        <!-- @slot Slot that can be used to insert content into the center part of the header. -->\n        <slot name=\"header-middle\">\n          <span v-if=\"devMode\" class=\"slot-helper\">HEADER MIDDLE</span>\n        </slot>\n      </div>\n\n      <div v-if=\"devMode || $slots['header-end']\" class=\"x-list x-layout__header-end\">\n        <!-- @slot Slot that can be used to insert content into the right part of the header. -->\n        <slot name=\"header-end\">\n          <span v-if=\"devMode\" class=\"slot-helper\">HEADER END</span>\n        </slot>\n      </div>\n    </header>\n\n    <div v-if=\"devMode || $slots['sub-header']\" class=\"x-layout__sub-header\">\n      <div class=\"x-layout__sub-header-content\">\n        <!-- @slot Slot that can be used to insert content into below the header. -->\n        <slot name=\"sub-header\">\n          <span v-if=\"devMode\" class=\"slot-helper\">SUB HEADER</span>\n        </slot>\n      </div>\n    </div>\n\n    <section\n      v-if=\"devMode || $slots['toolbar-aside'] || $slots['toolbar-body']\"\n      class=\"x-layout__toolbar\"\n    >\n      <aside class=\"x-list x-layout__toolbar-aside\">\n        <slot name=\"toolbar-aside\">\n          <!-- @slot Slot that can be used to insert content above the left aside. -->\n          <span v-if=\"devMode\" class=\"slot-helper\">TOOLBAR ASIDE</span>\n        </slot>\n      </aside>\n\n      <div class=\"x-list x-layout__toolbar-body\">\n        <!-- @slot Slot that can be used to insert content above the body. -->\n        <slot name=\"toolbar-body\">\n          <span v-if=\"devMode\" class=\"slot-helper\">TOOLBAR BODY</span>\n        </slot>\n      </div>\n    </section>\n\n    <main class=\"x-layout__main\">\n      <BaseIdTogglePanel\n        v-if=\"devMode || $slots['main-aside']\"\n        panelId=\"aside-panel\"\n        :animation=\"asideAnimation\"\n        class=\"x-layout__collapse-aside\"\n      >\n        <Scroll id=\"aside-scroll\" class=\"x-layout__aside-scroll\">\n          <div class=\"x-layout__main-aside x-list x-list--vertical\">\n            <!-- @slot Slot that can be used to insert content into the left side bar. -->\n            <slot name=\"main-aside\">\n              <span v-if=\"devMode\" class=\"slot-helper\" style=\"height: 110vh\">MAIN ASIDE</span>\n            </slot>\n          </div>\n        </Scroll>\n      </BaseIdTogglePanel>\n\n      <MainScroll class=\"x-flex x-flex-auto\">\n        <Scroll\n          v-if=\"devMode || $slots['main-body']\"\n          id=\"main-scroll\"\n          class=\"x-layout__body-scroll\"\n        >\n          <section class=\"x-layout__main-body x-list x-list--vertical\">\n            <!-- @slot Slot that can be used to insert the body content. -->\n            <slot name=\"main-body\">\n              <span v-if=\"devMode\" class=\"slot-helper\" style=\"height: 110vh\">MAIN BODY</span>\n            </slot>\n          </section>\n        </Scroll>\n      </MainScroll>\n    </main>\n\n    <div v-if=\"devMode || $slots['scroll-to-top']\" class=\"x-layout__scroll-to-top\">\n      <div class=\"x-layout__scroll-to-top-content\">\n        <slot name=\"scroll-to-top\">\n          <span v-if=\"devMode\" class=\"slot-helper\" style=\"height: 50px\">SCROLL TO TOP</span>\n        </slot>\n      </div>\n    </div>\n  </div>\n</template>\n\n<script lang=\"ts\">\n  import { defineComponent } from 'vue';\n  import Scroll from '../../x-modules/scroll/components/scroll.vue';\n  import MainScroll from '../../x-modules/scroll/components/main-scroll.vue';\n  import AnimateWidth from '../animations/animate-width.vue';\n  import BaseIdTogglePanel from '../panels/base-id-toggle-panel.vue';\n  import { AnimationProp } from '../../types';\n\n  /**\n   * Component for use as Layout to be filled with the rest of the Components.\n   *\n   * @deprecated - The layout has been deprecated in favor of using new XDS layout.\n   *\n   * @public\n   */\n  export default defineComponent({\n    name: 'MultiColumnMaxWidthLayout',\n    components: { BaseIdTogglePanel, MainScroll, Scroll },\n    props: {\n      /** The animation used for the Main Aside. */\n      asideAnimation: {\n        type: AnimationProp,\n        default: () => AnimateWidth\n      },\n      /** Enables the devMode, which shows the available slots to use with its names. */\n      devMode: Boolean\n    }\n  });\n</script>\n\n<style lang=\"css\">\n  :root {\n    /* layout */\n    --x-size-min-margin-layout-columns: var(--x-size-base-06);\n    --x-size-column-gap-layout-columns: var(--x-size-base-06);\n\n    /* spacing */\n\n    /* size - header */\n    --x-size-padding-top-layout-columns-header: var(--x-size-base-07);\n    --x-size-padding-bottom-layout-columns-header: var(--x-size-base-05);\n\n    /* size - toolbar */\n    --x-size-padding-top-layout-columns-toolbar: var(--x-size-base-05);\n    --x-size-padding-bottom-layout-columns-toolbar: var(--x-size-base-03);\n\n    /* size- scroll-to-top */\n    --x-size-margin-bottom-layout-columns-scroll-to-top: var(--x-size-base-03);\n    --x-size-margin-left-layout-columns-scroll-to-top: var(--x-size-base-03);\n\n    /* color */\n    --x-color-background-layout-columns: var(--x-color-base-neutral-100);\n    --x-color-border-layout-columns: var(--x-color-base-neutral-70);\n    --x-color-border-layout-columns-header: var(--x-color-border-layout-columns);\n    --x-color-border-layout-columns-sub-header: var(--x-color-border-layout-columns);\n    --x-color-border-layout-columns-toolbar: var(--x-color-border-layout-columns);\n    --x-color-border-layout-columns-main: var(--x-color-border-layout-columns);\n    --x-color-border-layout-columns-main-aside: var(--x-color-border-layout-columns);\n    --x-color-border-layout-columns-main-body: var(--x-color-border-layout-columns);\n\n    /* border */\n    --x-size-border-width-layout-columns-header: 0;\n    --x-size-border-width-layout-columns-toolbar: 1px 0 0;\n  }\n</style>\n\n<style lang=\"css\" scoped>\n  @import url('../../design-system-deprecated/utilities/dev-mode.css');\n\n  .x-layout {\n    /* custom properties */\n    --x-size-gap-default: var(--x-size-column-gap-layout-columns, 20px);\n    --x-size-margin-max-width: calc((100vw - var(--x-size-max-width-layout-columns, 1440px)) / 2);\n    --x-size-margin-layout-columns: max(\n      var(--x-size-min-margin-layout-columns, 20px),\n      var(--x-size-margin-max-width)\n    );\n    --x-number-columns-header-middle: calc(var(--x-number-columns-layout-columns, 5) - 2);\n    --x-number-columns-sub-header-content: var(--x-number-columns-header-middle);\n    --x-number-columns-toolbar-body: calc(var(--x-number-columns-layout-columns, 5) - 1);\n\n    /* layout */\n    display: grid;\n    align-content: stretch;\n    max-height: 100%;\n\n    grid-template-columns:\n      [page-start]\n      1fr\n      [scroll-to-top-start]\n      calc(var(--x-size-margin-layout-columns) + var(--x-size-gap-default))\n      [scroll-to-top-end page-end];\n\n    grid-template-rows:\n      [page-start header-start]\n      auto\n      [header-end sub-header-start]\n      auto\n      [sub-header-end toolbar-start]\n      auto\n      [toolbar-end main-start]\n      1fr\n      [scroll-to-top-start]\n      auto\n      [main-end scroll-to-top-end page-end];\n  }\n\n  .x-layout__header {\n    /* layout */\n    grid-column: page;\n    grid-row: header;\n    display: grid;\n    column-gap: var(--x-size-gap-default);\n\n    grid-template-columns:\n      [header-start]\n      var(--x-size-margin-layout-columns)\n      [start-content-start]\n      1fr\n      [start-content-end middle-content-start]\n      repeat(var(--x-number-columns-header-middle), 1fr)\n      [middle-content-end end-content-start]\n      1fr\n      [end-content-end]\n      var(--x-size-margin-layout-columns)\n      [header-end];\n\n    /* size */\n    padding-block-start: var(--x-size-padding-top-layout-columns-header, 0);\n    padding-block-end: var(--x-size-padding-bottom-layout-columns-header, 0);\n    margin-block-start: var(--x-size-margin-top-layout-columns-header, 0);\n    margin-block-end: var(--x-size-margin-bottom-layout-columns-header, 0);\n\n    /* color */\n    background-color: var(--x-color-background-layout-columns-header, transparent);\n    border-color: var(--x-color-border-layout-columns-header, transparent);\n\n    /* border */\n    border-style: solid;\n    border-width: var(--x-size-border-width-layout-columns-header, 0);\n  }\n\n  .x-layout__header-start {\n    /* layout */\n    grid-column: start-content;\n  }\n  .x-layout__header-start.x-list {\n    /* space */\n    flex-flow: var(--x-flow-layout-columns-header-start, row nowrap);\n    justify-content: var(--x-size-justify-layout-columns-header-start, flex start);\n    align-items: var(--x-size-align-layout-columns-header-start, flex start);\n  }\n\n  .x-layout__header-middle {\n    /* layout */\n    grid-column: middle-content;\n  }\n  .x-layout__header-middle.x-list {\n    /* space */\n    flex-flow: var(--x-flow-layout-columns-header-middle, row nowrap);\n    justify-content: var(--x-size-justify-layout-columns-header-middle, center);\n    align-items: var(--x-size-align-layout-columns-header-middle, flex start);\n  }\n\n  .x-layout__header-end {\n    /* layout */\n    grid-column: end-content;\n  }\n  .x-layout__header-end.x-list {\n    flex-flow: var(--x-flow-layout-columns-header-end, row nowrap);\n    justify-content: var(--x-size-justify-layout-columns-header-end, flex-end);\n    align-items: var(--x-size-align-layout-columns-header-end, flex-start);\n  }\n\n  .x-layout__sub-header {\n    /* layout */\n    grid-column: page;\n    grid-row: sub-header;\n    display: grid;\n    column-gap: var(--x-size-gap-default);\n\n    grid-template-columns:\n      [sub-header-start]\n      var(--x-size-margin-layout-columns)\n      1fr\n      [sub-header-content-start]\n      repeat(var(--x-number-columns-sub-header-content), 1fr)\n      [sub-header-content-end]\n      1fr\n      var(--x-size-margin-layout-columns)\n      [sub-header-end];\n\n    /* size */\n    padding-block-start: var(--x-size-padding-top-layout-columns-sub-header, 0);\n    padding-block-end: var(--x-size-padding-bottom-layout-columns-sub-header), 0;\n    margin-block-start: var(--x-size-margin-top-layout-columns-sub-header, 0);\n    margin-block-end: var(--x-size-margin-bottom-layout-columns-sub-header, 0);\n\n    /* color */\n    background-color: var(--x-color-background-layout-columns-sub-header, transparent);\n    border-color: var(--x-color-border-layout-columns-sub-header, transparent);\n\n    /* border */\n    border-style: solid;\n    border-width: var(--x-size-border-width-layout-columns-sub-header, 0);\n  }\n\n  .x-layout__sub-header-content {\n    /* layout */\n    grid-column: sub-header-content;\n  }\n  .x-layout__sub-header-content.x-list {\n    flex-flow: var(--x-flow-layout-columns-sub-header, row nowrap);\n    justify-content: var(--x-size-justify-layout-columns-sub-header, flex-start);\n    align-items: var(--x-size-align-layout-columns-sub-header, flex-start);\n  }\n\n  .x-layout__toolbar {\n    /* layout */\n    grid-column: page;\n    grid-row: toolbar;\n    display: grid;\n    column-gap: var(--x-size-gap-default);\n\n    grid-template-columns:\n      [toolbar-start]\n      var(--x-size-margin-layout-columns)\n      [toolbar-aside-start]\n      1fr\n      [toolbar-aside-end toolbar-body-start]\n      repeat(var(--x-number-columns-toolbar-body), 1fr)\n      [toolbar-body-end]\n      var(--x-size-margin-layout-columns)\n      [toolbar-end];\n\n    /* size */\n    padding-block-start: var(--x-size-padding-top-layout-columns-toolbar, 0);\n    padding-block-end: var(--x-size-padding-bottom-layout-columns-toolbar, 0);\n    margin-block-start: var(--x-size-margin-top-layout-columns-toolbar, 0);\n    margin-block-end: var(--x-size-margin-bottom-layout-columns-toolbar, 0);\n\n    /* color */\n    background-color: var(--x-color-background-layout-columns-toolbar, transparent);\n    border-color: var(--x-color-border-layout-columns-toolbar, transparent);\n\n    /* border */\n    border-style: solid;\n    border-width: var(--x-size-border-width-layout-columns-toolbar, 0);\n  }\n\n  .x-layout__toolbar-aside {\n    /* layout */\n    grid-column: toolbar-aside;\n  }\n  .x-layout__toolbar-aside.x-list {\n    flex-flow: var(--x-flow-layout-columns-toolbar-aside, row nowrap);\n    justify-content: var(--x-size-justify-layout-columns-toolbar-aside, flex-start);\n    align-items: var(--x-size-align-layout-columns-toolbar-aside, center);\n  }\n\n  .x-layout__toolbar-body {\n    /* layout */\n    grid-column: toolbar-body;\n  }\n  .x-layout__toolbar-body.x-list {\n    flex-flow: var(--x-flow-layout-columns-toolbar-body, row nowrap);\n    justify-content: var(--x-size-justify-layout-columns-toolbar-body, flex-end);\n    align-items: var(--x-size-align-layout-columns-toolbar-body, center);\n  }\n\n  .x-layout__main {\n    /* layout */\n    grid-column: page;\n    grid-row: main;\n    min-height: 0;\n    display: flex;\n    flex-flow: row nowrap;\n    justify-content: stretch;\n    padding-left: calc(var(--x-size-margin-layout-columns) + var(--x-size-gap-default));\n\n    /* size */\n    padding-block-start: var(--x-size-padding-top-layout-columns-main, 0);\n    padding-block-end: var(--x-size-padding-bottom-layout-columns-main, 0);\n    margin-block-start: var(--x-size-margin-top-layout-columns-main, 0);\n    margin-block-end: var(--x-size-margin-bottom-layout-columns-main, 0);\n\n    /* color */\n    background-color: var(--x-color-background-layout-columns-main, transparent);\n    border-color: var(--x-color-border-layout-columns-main, transparent);\n\n    /* border */\n    border-style: solid;\n    border-width: var(--x-size-border-width-layout-columns-main, 0);\n  }\n\n  .x-layout__collapse-aside {\n    width: calc(\n      (\n          100% - var(--x-size-gap-default) * (var(--x-number-columns-layout-columns, 5)) -\n            var(--x-size-margin-layout-columns)\n        ) / var(--x-number-columns-layout-columns, 5) + var(--x-size-gap-default)\n    );\n  }\n\n  .x-layout__aside-scroll {\n    height: 100%;\n    margin-right: var(--x-size-gap-default);\n  }\n\n  .x-layout__body-scroll {\n    flex: 1 1 auto;\n    width: 0;\n    padding-right: calc(var(--x-size-margin-layout-columns) + var(--x-size-gap-default) - 16px);\n  }\n  .x-layout__body-scroll.x-scroll {\n    overflow-y: scroll;\n  }\n\n  .x-layout__scroll-to-top {\n    /* layout */\n    grid-area: scroll-to-top;\n    justify-content: flex-end;\n    width: 100%;\n    display: flex;\n    z-index: 1;\n    pointer-events: none;\n  }\n  .x-layout__scroll-to-top-content {\n    flex: 1 0 auto;\n    padding-block-end: var(--x-size-margin-bottom-layout-columns-scroll-to-top, 10px);\n    padding-inline-start: var(--x-size-margin-left-layout-columns-scroll-to-top, 10px);\n  }\n  .x-layout__scroll-to-top-content > * {\n    pointer-events: all;\n  }\n</style>\n\n<docs lang=\"mdx\">\n## Layout\n\nThis component has the following layout with fixed headers and collapsible fixed asides:\n\n| header-start  | header-middle |  header-end   |\n| :-----------: | :-----------: | :-----------: |\n|  sub-header   |               |               |\n| toolbar-aside |    toolbar    |               |\n|  main-aside   |     main      |               |\n|               |               | scroll-to-top |\n\n## Design Tokens\n\nThe component has also the following `Design Tokens` to configure it:\n\n|                        token                        | default value |\n| :-------------------------------------------------: | :-----------: |\n|         --x-size-column-gap-layout-columns          |     20px      |\n|     --x-size-padding-top-layout-columns-header      |      0px      |\n|    --x-size-padding-bottom-layout-columns-header    |      0px      |\n|      --x-size-margin-top-layout-columns-header      |      0px      |\n|    --x-size-margin-bottom-layout-columns-header     |      0px      |\n|     --x-color-background-layout-columns-header      |  transparent  |\n|       --x-color-border-layout-columns-header        |  transparent  |\n|     --x-size-border-width-layout-columns-header     |      0px      |\n|        --x-flow-layout-columns-header-start         |  row nowrap   |\n|    --x-size-justify-layout-columns-header-start     |  flex-start   |\n|     --x-size-align-layout-columns-header-start      |  flex-start   |\n|        --x-flow-layout-columns-header-middle        |  row nowrap   |\n|    --x-size-justify-layout-columns-header-middle    |    center     |\n|     --x-size-align-layout-columns-header-middle     |  flex-start   |\n|         --x-flow-layout-columns-header-end          |  row nowrap   |\n|     --x-size-justify-layout-columns-header-end      |   flex-end    |\n|      --x-size-align-layout-columns-header-end       |   flex-end    |\n|   --x-size-padding-top-layout-columns-sub-header    |      0px      |\n|  --x-size-padding-bottom-layout-columns-sub-header  |      0px      |\n|    --x-size-margin-top-layout-columns-sub-header    |      0px      |\n|  --x-size-margin-bottom-layout-columns-sub-header   |      0px      |\n|   --x-color-background-layout-columns-sub-header    |  transparent  |\n|     --x-color-border-layout-columns-sub-header      |  transparent  |\n|   --x-size-border-width-layout-columns-sub-header   |      0px      |\n|         --x-flow-layout-columns-sub-header          |  row nowrap   |\n|     --x-size-justify-layout-columns-sub-header      |  flex-start   |\n|      --x-size-align-layout-columns-sub-header       |  flex-start   |\n|     --x-size-padding-top-layout-columns-toolbar     |      0px      |\n|   --x-size-padding-bottom-layout-columns-toolbar    |      0px      |\n|     --x-size-margin-top-layout-columns-toolbar      |      0px      |\n|    --x-size-margin-bottom-layout-columns-toolbar    |      0px      |\n|     --x-color-background-layout-columns-toolbar     |  transparent  |\n|     --x-color-border-layout-columns-sub-toolbar     |  transparent  |\n|    --x-size-border-width-layout-columns-toolbar     |      0px      |\n|        --x-flow-layout-columns-toolbar-aside        |  row nowrap   |\n|    --x-size-justify-layout-columns-toolbar-aside    |  flex-start   |\n|     --x-size-align-layout-columns-toolbar-aside     |    center     |\n|        --x-flow-layout-columns-toolbar-body         |  row nowrap   |\n|    --x-size-justify-layout-columns-toolbar-body     |  flex-start   |\n|     --x-size-align-layout-columns-toolbar-body      |    center     |\n|      --x-size-padding-top-layout-columns-main       |      0px      |\n|     --x-size-padding-bottom-layout-columns-main     |      0px      |\n|       --x-size-margin-top-layout-columns-main       |      0px      |\n|     --x-size-margin-bottom-layout-columns-main      |      0px      |\n|      --x-color-background-layout-columns-main       |  transparent  |\n|      --x-color-border-layout-columns-sub-main       |  transparent  |\n|      --x-size-border-width-layout-columns-main      |      0px      |\n|   --x-color-background-layout-columns-main-aside    |  transparent  |\n|   --x-color-border-layout-columns-sub-main-aside    |  transparent  |\n|   --x-size-border-width-layout-columns-main-aside   |      0px      |\n|    --x-color-background-layout-columns-main-body    |  transparent  |\n|    --x-color-border-layout-columns-sub-main-body    |  transparent  |\n|   --x-size-border-width-layout-columns-main-body    |      0px      |\n| --x-size-margin-bottom-layout-columns-scroll-to-top |     10px      |\n|  --x-size-margin-left-layout-columns-scroll-to-top  |     10px      |\n\n|                        token                        |                   use                    |\n| :-------------------------------------------------: | :--------------------------------------: |\n|         --x-size-column-gap-layout-columns          |         The gap between columns          |\n|     --x-size-padding-top-layout-columns-header      |      The padding top of the header       |\n|    --x-size-padding-bottom-layout-columns-header    |     The padding bottom of the header     |\n|      --x-size-margin-top-layout-columns-header      |       The margin top of the header       |\n|    --x-size-margin-bottom-layout-columns-header     |     The margin bottom of the header      |\n|     --x-color-background-layout-columns-header      |    The background color of the header    |\n|       --x-color-border-layout-columns-header        |      The border color of the header      |\n|     --x-size-border-width-layout-columns-header     |      The border width of the header      |\n|        --x-flow-layout-columns-header-start         |    The flex flow of the start header     |\n|    --x-size-justify-layout-columns-header-start     | The justify content of the start header  |\n|     --x-size-align-layout-columns-header-start      |   The align items of the start header    |\n|        --x-flow-layout-columns-header-middle        |    The flex flow of the middle header    |\n|    --x-size-justify-layout-columns-header-middle    | The justify content of the middle header |\n|     --x-size-align-layout-columns-header-middle     |   The align items of the middle header   |\n|         --x-flow-layout-columns-header-end          |     The flex flow of the end header      |\n|     --x-size-justify-layout-columns-header-end      |  The justify content of the end header   |\n|      --x-size-align-layout-columns-header-end       |    The align items of the end header     |\n|   --x-size-padding-top-layout-columns-sub-header    |   The padding bottom of the sub header   |\n|  --x-size-padding-bottom-layout-columns-sub-header  |    The padding top of the sub header     |\n|    --x-size-margin-top-layout-columns-sub-header    |   The margin bottom of the sub header    |\n|  --x-size-margin-bottom-layout-columns-sub-header   |     The margin top of the sub header     |\n|   --x-color-background-layout-columns-sub-header    |  The background color of the sub header  |\n|     --x-color-border-layout-columns-sub-header      |    The border color of the sub header    |\n|   --x-size-border-width-layout-columns-sub-header   |    The border width of the sub header    |\n|         --x-flow-layout-columns-sub-header          |     The flex flow of the sub header      |\n|     --x-size-justify-layout-columns-sub-header      |  The justify content of the sub header   |\n|      --x-size-align-layout-columns-sub-header       |    The align items of the sub header     |\n|     --x-size-padding-top-layout-columns-toolbar     |      The padding top of the toolbar      |\n|   --x-size-padding-bottom-layout-columns-toolbar    |    The padding bottom of the toolbar     |\n|     --x-size-margin-top-layout-columns-toolbar      |      The margin top of the toolbar       |\n|    --x-size-margin-bottom-layout-columns-toolbar    |     The margin bottom of the toolbar     |\n|     --x-color-background-layout-columns-toolbar     |   The background color of the toolbar    |\n|     --x-color-border-layout-columns-sub-toolbar     |     The border color of the toolbar      |\n|    --x-size-border-width-layout-columns-toolbar     |     The border width of the toolbar      |\n|        --x-flow-layout-columns-toolbar-aside        |    The flex flow of the toolbar aside    |\n|    --x-size-justify-layout-columns-toolbar-aside    | The justify content of the toolbar aside |\n|     --x-size-align-layout-columns-toolbar-aside     |   The align items of the toolbar aside   |\n|        --x-flow-layout-columns-toolbar-body         |  The flex flow of the end toolbar body   |\n|    --x-size-justify-layout-columns-toolbar-body     | Justify content of the end toolbar body  |\n|     --x-size-align-layout-columns-toolbar-body      |   The align items of the toolbar body    |\n|      --x-size-padding-top-layout-columns-main       |       The padding top of the main        |\n|     --x-size-padding-bottom-layout-columns-main     |      The padding bottom of the main      |\n|       --x-size-margin-top-layout-columns-main       |        The margin top of the main        |\n|     --x-size-margin-bottom-layout-columns-main      |      The margin bottom of the main       |\n|      --x-color-background-layout-columns-main       |     The background color of the main     |\n|        --x-color-border-layout-columns-main         |       The border color of the main       |\n|      --x-size-border-width-layout-columns-main      |       The border width of the main       |\n|   --x-color-background-layout-columns-main-aside    |  The background color of the main aside  |\n|     --x-color-border-layout-columns-main-aside      |    The border color of the main aside    |\n|   --x-size-border-width-layout-columns-main-aside   |  The border width of the sub main aside  |\n|    --x-color-background-layout-columns-main-body    |  The background color of the main body   |\n|      --x-color-border-layout-columns-main-body      |    The border color of the main body     |\n|   --x-size-border-width-layout-columns-main-body    |  The border width of the sub main body   |\n| --x-size-margin-bottom-layout-columns-scroll-to-top |  The margin bottom of the scroll to top  |\n|  --x-size-margin-left-layout-columns-scroll-to-top  |   The margin left of the scroll to top   |\n</docs>\n"],"names":["_resolveComponent","_openBlock","_createElementBlock","devMode","_normalizeClass","_normalizeStyle","_createCommentVNode","_renderSlot","$slots","_createElementVNode","_createBlock","_withCtx","_createVNode"],"mappings":"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"}
+{"version":3,"file":"multi-column-max-width-layout.vue.js","sources":["../../../../src/components/layouts/multi-column-max-width-layout.vue"],"sourcesContent":["<template>\n  <div\n    class=\"x-layout x-layout--columns\"\n    :class=\"{ 'dev-mode': devMode }\"\n    :style=\"{ height: devMode || $slots['main-body'] ? '100%' : 'auto' }\"\n  >\n    <header class=\"x-layout__header\">\n      <div v-if=\"devMode || $slots['header-start']\" class=\"x-list x-layout__header-start\">\n        <!-- @slot Slot that can be used to insert content into the left part of the header. -->\n        <slot name=\"header-start\">\n          <span v-if=\"devMode\" class=\"slot-helper\">HEADER START</span>\n        </slot>\n      </div>\n\n      <div v-if=\"devMode || $slots['header-middle']\" class=\"x-list x-layout__header-middle\">\n        <!-- @slot Slot that can be used to insert content into the center part of the header. -->\n        <slot name=\"header-middle\">\n          <span v-if=\"devMode\" class=\"slot-helper\">HEADER MIDDLE</span>\n        </slot>\n      </div>\n\n      <div v-if=\"devMode || $slots['header-end']\" class=\"x-list x-layout__header-end\">\n        <!-- @slot Slot that can be used to insert content into the right part of the header. -->\n        <slot name=\"header-end\">\n          <span v-if=\"devMode\" class=\"slot-helper\">HEADER END</span>\n        </slot>\n      </div>\n    </header>\n\n    <div v-if=\"devMode || $slots['sub-header']\" class=\"x-layout__sub-header\">\n      <div class=\"x-layout__sub-header-content\">\n        <!-- @slot Slot that can be used to insert content into below the header. -->\n        <slot name=\"sub-header\">\n          <span v-if=\"devMode\" class=\"slot-helper\">SUB HEADER</span>\n        </slot>\n      </div>\n    </div>\n\n    <section\n      v-if=\"devMode || $slots['toolbar-aside'] || $slots['toolbar-body']\"\n      class=\"x-layout__toolbar\"\n    >\n      <aside class=\"x-list x-layout__toolbar-aside\">\n        <slot name=\"toolbar-aside\">\n          <!-- @slot Slot that can be used to insert content above the left aside. -->\n          <span v-if=\"devMode\" class=\"slot-helper\">TOOLBAR ASIDE</span>\n        </slot>\n      </aside>\n\n      <div class=\"x-list x-layout__toolbar-body\">\n        <!-- @slot Slot that can be used to insert content above the body. -->\n        <slot name=\"toolbar-body\">\n          <span v-if=\"devMode\" class=\"slot-helper\">TOOLBAR BODY</span>\n        </slot>\n      </div>\n    </section>\n\n    <main class=\"x-layout__main\">\n      <BaseIdTogglePanel\n        v-if=\"devMode || $slots['main-aside']\"\n        panelId=\"aside-panel\"\n        :animation=\"asideAnimation\"\n        class=\"x-layout__collapse-aside\"\n      >\n        <Scroll id=\"aside-scroll\" class=\"x-layout__aside-scroll\">\n          <div class=\"x-layout__main-aside x-list x-list--vertical\">\n            <!-- @slot Slot that can be used to insert content into the left side bar. -->\n            <slot name=\"main-aside\">\n              <span v-if=\"devMode\" class=\"slot-helper\" style=\"height: 110vh\">MAIN ASIDE</span>\n            </slot>\n          </div>\n        </Scroll>\n      </BaseIdTogglePanel>\n\n      <MainScroll class=\"x-flex x-flex-auto\">\n        <Scroll\n          v-if=\"devMode || $slots['main-body']\"\n          id=\"main-scroll\"\n          class=\"x-layout__body-scroll\"\n        >\n          <section class=\"x-layout__main-body x-list x-list--vertical\">\n            <!-- @slot Slot that can be used to insert the body content. -->\n            <slot name=\"main-body\">\n              <span v-if=\"devMode\" class=\"slot-helper\" style=\"height: 110vh\">MAIN BODY</span>\n            </slot>\n          </section>\n        </Scroll>\n      </MainScroll>\n    </main>\n\n    <div v-if=\"devMode || $slots['scroll-to-top']\" class=\"x-layout__scroll-to-top\">\n      <div class=\"x-layout__scroll-to-top-content\">\n        <slot name=\"scroll-to-top\">\n          <span v-if=\"devMode\" class=\"slot-helper\" style=\"height: 50px\">SCROLL TO TOP</span>\n        </slot>\n      </div>\n    </div>\n  </div>\n</template>\n\n<script lang=\"ts\">\n  import { defineComponent } from 'vue';\n  import Scroll from '../../x-modules/scroll/components/scroll.vue';\n  import MainScroll from '../../x-modules/scroll/components/main-scroll.vue';\n  import AnimateWidth from '../animations/animate-width.vue';\n  import BaseIdTogglePanel from '../panels/base-id-toggle-panel.vue';\n  import { AnimationProp } from '../../types';\n\n  /**\n   * Component for use as Layout to be filled with the rest of the Components.\n   *\n   * @deprecated - The layout has been deprecated in favor of using new XDS layout.\n   *\n   * @public\n   */\n  export default defineComponent({\n    name: 'MultiColumnMaxWidthLayout',\n    components: { BaseIdTogglePanel, MainScroll, Scroll },\n    props: {\n      /** The animation used for the Main Aside. */\n      asideAnimation: {\n        type: AnimationProp,\n        default: () => AnimateWidth\n      },\n      /** Enables the devMode, which shows the available slots to use with its names. */\n      devMode: Boolean\n    }\n  });\n</script>\n\n<style lang=\"css\">\n  :root {\n    /* layout */\n    --x-size-min-margin-layout-columns: var(--x-size-base-06);\n    --x-size-column-gap-layout-columns: var(--x-size-base-06);\n\n    /* spacing */\n\n    /* size - header */\n    --x-size-padding-top-layout-columns-header: var(--x-size-base-07);\n    --x-size-padding-bottom-layout-columns-header: var(--x-size-base-05);\n\n    /* size - toolbar */\n    --x-size-padding-top-layout-columns-toolbar: var(--x-size-base-05);\n    --x-size-padding-bottom-layout-columns-toolbar: var(--x-size-base-03);\n\n    /* size- scroll-to-top */\n    --x-size-margin-bottom-layout-columns-scroll-to-top: var(--x-size-base-03);\n    --x-size-margin-left-layout-columns-scroll-to-top: var(--x-size-base-03);\n\n    /* color */\n    --x-color-background-layout-columns: var(--x-color-base-neutral-100);\n    --x-color-border-layout-columns: var(--x-color-base-neutral-70);\n    --x-color-border-layout-columns-header: var(--x-color-border-layout-columns);\n    --x-color-border-layout-columns-sub-header: var(--x-color-border-layout-columns);\n    --x-color-border-layout-columns-toolbar: var(--x-color-border-layout-columns);\n    --x-color-border-layout-columns-main: var(--x-color-border-layout-columns);\n    --x-color-border-layout-columns-main-aside: var(--x-color-border-layout-columns);\n    --x-color-border-layout-columns-main-body: var(--x-color-border-layout-columns);\n\n    /* border */\n    --x-size-border-width-layout-columns-header: 0;\n    --x-size-border-width-layout-columns-toolbar: 1px 0 0;\n  }\n</style>\n\n<style lang=\"css\" scoped>\n  @import url('../../design-system-deprecated/utilities/dev-mode.css');\n\n  .x-layout {\n    /* custom properties */\n    --x-size-gap-default: var(--x-size-column-gap-layout-columns, 20px);\n    --x-size-margin-max-width: calc((100vw - var(--x-size-max-width-layout-columns, 1440px)) / 2);\n    --x-size-margin-layout-columns: max(\n      var(--x-size-min-margin-layout-columns, 20px),\n      var(--x-size-margin-max-width)\n    );\n    --x-number-columns-header-middle: calc(var(--x-number-columns-layout-columns, 5) - 2);\n    --x-number-columns-sub-header-content: var(--x-number-columns-header-middle);\n    --x-number-columns-toolbar-body: calc(var(--x-number-columns-layout-columns, 5) - 1);\n\n    /* layout */\n    display: grid;\n    align-content: stretch;\n    max-height: 100%;\n\n    grid-template-columns:\n      [page-start]\n      1fr\n      [scroll-to-top-start]\n      calc(var(--x-size-margin-layout-columns) + var(--x-size-gap-default))\n      [scroll-to-top-end page-end];\n\n    grid-template-rows:\n      [page-start header-start]\n      auto\n      [header-end sub-header-start]\n      auto\n      [sub-header-end toolbar-start]\n      auto\n      [toolbar-end main-start]\n      1fr\n      [scroll-to-top-start]\n      auto\n      [main-end scroll-to-top-end page-end];\n  }\n\n  .x-layout__header {\n    /* layout */\n    grid-column: page;\n    grid-row: header;\n    display: grid;\n    column-gap: var(--x-size-gap-default);\n\n    grid-template-columns:\n      [header-start]\n      var(--x-size-margin-layout-columns)\n      [start-content-start]\n      1fr\n      [start-content-end middle-content-start]\n      repeat(var(--x-number-columns-header-middle), 1fr)\n      [middle-content-end end-content-start]\n      1fr\n      [end-content-end]\n      var(--x-size-margin-layout-columns)\n      [header-end];\n\n    /* size */\n    padding-block-start: var(--x-size-padding-top-layout-columns-header, 0);\n    padding-block-end: var(--x-size-padding-bottom-layout-columns-header, 0);\n    margin-block-start: var(--x-size-margin-top-layout-columns-header, 0);\n    margin-block-end: var(--x-size-margin-bottom-layout-columns-header, 0);\n\n    /* color */\n    background-color: var(--x-color-background-layout-columns-header, transparent);\n    border-color: var(--x-color-border-layout-columns-header, transparent);\n\n    /* border */\n    border-style: solid;\n    border-width: var(--x-size-border-width-layout-columns-header, 0);\n  }\n\n  .x-layout__header-start {\n    /* layout */\n    grid-column: start-content;\n  }\n  .x-layout__header-start.x-list {\n    /* space */\n    flex-flow: var(--x-flow-layout-columns-header-start, row nowrap);\n    justify-content: var(--x-size-justify-layout-columns-header-start, flex start);\n    align-items: var(--x-size-align-layout-columns-header-start, flex start);\n  }\n\n  .x-layout__header-middle {\n    /* layout */\n    grid-column: middle-content;\n  }\n  .x-layout__header-middle.x-list {\n    /* space */\n    flex-flow: var(--x-flow-layout-columns-header-middle, row nowrap);\n    justify-content: var(--x-size-justify-layout-columns-header-middle, center);\n    align-items: var(--x-size-align-layout-columns-header-middle, flex start);\n  }\n\n  .x-layout__header-end {\n    /* layout */\n    grid-column: end-content;\n  }\n  .x-layout__header-end.x-list {\n    flex-flow: var(--x-flow-layout-columns-header-end, row nowrap);\n    justify-content: var(--x-size-justify-layout-columns-header-end, flex-end);\n    align-items: var(--x-size-align-layout-columns-header-end, flex-start);\n  }\n\n  .x-layout__sub-header {\n    /* layout */\n    grid-column: page;\n    grid-row: sub-header;\n    display: grid;\n    column-gap: var(--x-size-gap-default);\n\n    grid-template-columns:\n      [sub-header-start]\n      var(--x-size-margin-layout-columns)\n      1fr\n      [sub-header-content-start]\n      repeat(var(--x-number-columns-sub-header-content), 1fr)\n      [sub-header-content-end]\n      1fr\n      var(--x-size-margin-layout-columns)\n      [sub-header-end];\n\n    /* size */\n    padding-block-start: var(--x-size-padding-top-layout-columns-sub-header, 0);\n    padding-block-end: var(--x-size-padding-bottom-layout-columns-sub-header), 0;\n    margin-block-start: var(--x-size-margin-top-layout-columns-sub-header, 0);\n    margin-block-end: var(--x-size-margin-bottom-layout-columns-sub-header, 0);\n\n    /* color */\n    background-color: var(--x-color-background-layout-columns-sub-header, transparent);\n    border-color: var(--x-color-border-layout-columns-sub-header, transparent);\n\n    /* border */\n    border-style: solid;\n    border-width: var(--x-size-border-width-layout-columns-sub-header, 0);\n  }\n\n  .x-layout__sub-header-content {\n    /* layout */\n    grid-column: sub-header-content;\n  }\n  .x-layout__sub-header-content.x-list {\n    flex-flow: var(--x-flow-layout-columns-sub-header, row nowrap);\n    justify-content: var(--x-size-justify-layout-columns-sub-header, flex-start);\n    align-items: var(--x-size-align-layout-columns-sub-header, flex-start);\n  }\n\n  .x-layout__toolbar {\n    /* layout */\n    grid-column: page;\n    grid-row: toolbar;\n    display: grid;\n    column-gap: var(--x-size-gap-default);\n\n    grid-template-columns:\n      [toolbar-start]\n      var(--x-size-margin-layout-columns)\n      [toolbar-aside-start]\n      1fr\n      [toolbar-aside-end toolbar-body-start]\n      repeat(var(--x-number-columns-toolbar-body), 1fr)\n      [toolbar-body-end]\n      var(--x-size-margin-layout-columns)\n      [toolbar-end];\n\n    /* size */\n    padding-block-start: var(--x-size-padding-top-layout-columns-toolbar, 0);\n    padding-block-end: var(--x-size-padding-bottom-layout-columns-toolbar, 0);\n    margin-block-start: var(--x-size-margin-top-layout-columns-toolbar, 0);\n    margin-block-end: var(--x-size-margin-bottom-layout-columns-toolbar, 0);\n\n    /* color */\n    background-color: var(--x-color-background-layout-columns-toolbar, transparent);\n    border-color: var(--x-color-border-layout-columns-toolbar, transparent);\n\n    /* border */\n    border-style: solid;\n    border-width: var(--x-size-border-width-layout-columns-toolbar, 0);\n  }\n\n  .x-layout__toolbar-aside {\n    /* layout */\n    grid-column: toolbar-aside;\n  }\n  .x-layout__toolbar-aside.x-list {\n    flex-flow: var(--x-flow-layout-columns-toolbar-aside, row nowrap);\n    justify-content: var(--x-size-justify-layout-columns-toolbar-aside, flex-start);\n    align-items: var(--x-size-align-layout-columns-toolbar-aside, center);\n  }\n\n  .x-layout__toolbar-body {\n    /* layout */\n    grid-column: toolbar-body;\n  }\n  .x-layout__toolbar-body.x-list {\n    flex-flow: var(--x-flow-layout-columns-toolbar-body, row nowrap);\n    justify-content: var(--x-size-justify-layout-columns-toolbar-body, flex-end);\n    align-items: var(--x-size-align-layout-columns-toolbar-body, center);\n  }\n\n  .x-layout__main {\n    /* layout */\n    grid-column: page;\n    grid-row: main;\n    min-height: 0;\n    display: flex;\n    flex-flow: row nowrap;\n    justify-content: stretch;\n    padding-left: calc(var(--x-size-margin-layout-columns) + var(--x-size-gap-default));\n\n    /* size */\n    padding-block-start: var(--x-size-padding-top-layout-columns-main, 0);\n    padding-block-end: var(--x-size-padding-bottom-layout-columns-main, 0);\n    margin-block-start: var(--x-size-margin-top-layout-columns-main, 0);\n    margin-block-end: var(--x-size-margin-bottom-layout-columns-main, 0);\n\n    /* color */\n    background-color: var(--x-color-background-layout-columns-main, transparent);\n    border-color: var(--x-color-border-layout-columns-main, transparent);\n\n    /* border */\n    border-style: solid;\n    border-width: var(--x-size-border-width-layout-columns-main, 0);\n  }\n\n  .x-layout__collapse-aside {\n    width: calc(\n      (\n          100% - var(--x-size-gap-default) * (var(--x-number-columns-layout-columns, 5)) -\n            var(--x-size-margin-layout-columns)\n        ) / var(--x-number-columns-layout-columns, 5) + var(--x-size-gap-default)\n    );\n  }\n\n  .x-layout__aside-scroll {\n    height: 100%;\n    margin-right: var(--x-size-gap-default);\n  }\n\n  .x-layout__body-scroll {\n    flex: 1 1 auto;\n    width: 0;\n    padding-right: calc(var(--x-size-margin-layout-columns) + var(--x-size-gap-default) - 16px);\n  }\n  .x-layout__body-scroll.x-scroll {\n    overflow-y: scroll;\n  }\n\n  .x-layout__scroll-to-top {\n    /* layout */\n    grid-area: scroll-to-top;\n    justify-content: flex-end;\n    width: 100%;\n    display: flex;\n    z-index: 1;\n    pointer-events: none;\n  }\n  .x-layout__scroll-to-top-content {\n    flex: 1 0 auto;\n    padding-block-end: var(--x-size-margin-bottom-layout-columns-scroll-to-top, 10px);\n    padding-inline-start: var(--x-size-margin-left-layout-columns-scroll-to-top, 10px);\n  }\n  .x-layout__scroll-to-top-content > * {\n    pointer-events: all;\n  }\n</style>\n\n<docs lang=\"mdx\">\n## Layout\n\nThis component has the following layout with fixed headers and collapsible fixed asides:\n\n| header-start  | header-middle |  header-end   |\n| :-----------: | :-----------: | :-----------: |\n|  sub-header   |               |               |\n| toolbar-aside |    toolbar    |               |\n|  main-aside   |     main      |               |\n|               |               | scroll-to-top |\n\n## Design Tokens\n\nThe component has also the following `Design Tokens` to configure it:\n\n|                        token                        | default value |\n| :-------------------------------------------------: | :-----------: |\n|         --x-size-column-gap-layout-columns          |     20px      |\n|     --x-size-padding-top-layout-columns-header      |      0px      |\n|    --x-size-padding-bottom-layout-columns-header    |      0px      |\n|      --x-size-margin-top-layout-columns-header      |      0px      |\n|    --x-size-margin-bottom-layout-columns-header     |      0px      |\n|     --x-color-background-layout-columns-header      |  transparent  |\n|       --x-color-border-layout-columns-header        |  transparent  |\n|     --x-size-border-width-layout-columns-header     |      0px      |\n|        --x-flow-layout-columns-header-start         |  row nowrap   |\n|    --x-size-justify-layout-columns-header-start     |  flex-start   |\n|     --x-size-align-layout-columns-header-start      |  flex-start   |\n|        --x-flow-layout-columns-header-middle        |  row nowrap   |\n|    --x-size-justify-layout-columns-header-middle    |    center     |\n|     --x-size-align-layout-columns-header-middle     |  flex-start   |\n|         --x-flow-layout-columns-header-end          |  row nowrap   |\n|     --x-size-justify-layout-columns-header-end      |   flex-end    |\n|      --x-size-align-layout-columns-header-end       |   flex-end    |\n|   --x-size-padding-top-layout-columns-sub-header    |      0px      |\n|  --x-size-padding-bottom-layout-columns-sub-header  |      0px      |\n|    --x-size-margin-top-layout-columns-sub-header    |      0px      |\n|  --x-size-margin-bottom-layout-columns-sub-header   |      0px      |\n|   --x-color-background-layout-columns-sub-header    |  transparent  |\n|     --x-color-border-layout-columns-sub-header      |  transparent  |\n|   --x-size-border-width-layout-columns-sub-header   |      0px      |\n|         --x-flow-layout-columns-sub-header          |  row nowrap   |\n|     --x-size-justify-layout-columns-sub-header      |  flex-start   |\n|      --x-size-align-layout-columns-sub-header       |  flex-start   |\n|     --x-size-padding-top-layout-columns-toolbar     |      0px      |\n|   --x-size-padding-bottom-layout-columns-toolbar    |      0px      |\n|     --x-size-margin-top-layout-columns-toolbar      |      0px      |\n|    --x-size-margin-bottom-layout-columns-toolbar    |      0px      |\n|     --x-color-background-layout-columns-toolbar     |  transparent  |\n|     --x-color-border-layout-columns-sub-toolbar     |  transparent  |\n|    --x-size-border-width-layout-columns-toolbar     |      0px      |\n|        --x-flow-layout-columns-toolbar-aside        |  row nowrap   |\n|    --x-size-justify-layout-columns-toolbar-aside    |  flex-start   |\n|     --x-size-align-layout-columns-toolbar-aside     |    center     |\n|        --x-flow-layout-columns-toolbar-body         |  row nowrap   |\n|    --x-size-justify-layout-columns-toolbar-body     |  flex-start   |\n|     --x-size-align-layout-columns-toolbar-body      |    center     |\n|      --x-size-padding-top-layout-columns-main       |      0px      |\n|     --x-size-padding-bottom-layout-columns-main     |      0px      |\n|       --x-size-margin-top-layout-columns-main       |      0px      |\n|     --x-size-margin-bottom-layout-columns-main      |      0px      |\n|      --x-color-background-layout-columns-main       |  transparent  |\n|      --x-color-border-layout-columns-sub-main       |  transparent  |\n|      --x-size-border-width-layout-columns-main      |      0px      |\n|   --x-color-background-layout-columns-main-aside    |  transparent  |\n|   --x-color-border-layout-columns-sub-main-aside    |  transparent  |\n|   --x-size-border-width-layout-columns-main-aside   |      0px      |\n|    --x-color-background-layout-columns-main-body    |  transparent  |\n|    --x-color-border-layout-columns-sub-main-body    |  transparent  |\n|   --x-size-border-width-layout-columns-main-body    |      0px      |\n| --x-size-margin-bottom-layout-columns-scroll-to-top |     10px      |\n|  --x-size-margin-left-layout-columns-scroll-to-top  |     10px      |\n\n|                        token                        |                   use                    |\n| :-------------------------------------------------: | :--------------------------------------: |\n|         --x-size-column-gap-layout-columns          |         The gap between columns          |\n|     --x-size-padding-top-layout-columns-header      |      The padding top of the header       |\n|    --x-size-padding-bottom-layout-columns-header    |     The padding bottom of the header     |\n|      --x-size-margin-top-layout-columns-header      |       The margin top of the header       |\n|    --x-size-margin-bottom-layout-columns-header     |     The margin bottom of the header      |\n|     --x-color-background-layout-columns-header      |    The background color of the header    |\n|       --x-color-border-layout-columns-header        |      The border color of the header      |\n|     --x-size-border-width-layout-columns-header     |      The border width of the header      |\n|        --x-flow-layout-columns-header-start         |    The flex flow of the start header     |\n|    --x-size-justify-layout-columns-header-start     | The justify content of the start header  |\n|     --x-size-align-layout-columns-header-start      |   The align items of the start header    |\n|        --x-flow-layout-columns-header-middle        |    The flex flow of the middle header    |\n|    --x-size-justify-layout-columns-header-middle    | The justify content of the middle header |\n|     --x-size-align-layout-columns-header-middle     |   The align items of the middle header   |\n|         --x-flow-layout-columns-header-end          |     The flex flow of the end header      |\n|     --x-size-justify-layout-columns-header-end      |  The justify content of the end header   |\n|      --x-size-align-layout-columns-header-end       |    The align items of the end header     |\n|   --x-size-padding-top-layout-columns-sub-header    |   The padding bottom of the sub header   |\n|  --x-size-padding-bottom-layout-columns-sub-header  |    The padding top of the sub header     |\n|    --x-size-margin-top-layout-columns-sub-header    |   The margin bottom of the sub header    |\n|  --x-size-margin-bottom-layout-columns-sub-header   |     The margin top of the sub header     |\n|   --x-color-background-layout-columns-sub-header    |  The background color of the sub header  |\n|     --x-color-border-layout-columns-sub-header      |    The border color of the sub header    |\n|   --x-size-border-width-layout-columns-sub-header   |    The border width of the sub header    |\n|         --x-flow-layout-columns-sub-header          |     The flex flow of the sub header      |\n|     --x-size-justify-layout-columns-sub-header      |  The justify content of the sub header   |\n|      --x-size-align-layout-columns-sub-header       |    The align items of the sub header     |\n|     --x-size-padding-top-layout-columns-toolbar     |      The padding top of the toolbar      |\n|   --x-size-padding-bottom-layout-columns-toolbar    |    The padding bottom of the toolbar     |\n|     --x-size-margin-top-layout-columns-toolbar      |      The margin top of the toolbar       |\n|    --x-size-margin-bottom-layout-columns-toolbar    |     The margin bottom of the toolbar     |\n|     --x-color-background-layout-columns-toolbar     |   The background color of the toolbar    |\n|     --x-color-border-layout-columns-sub-toolbar     |     The border color of the toolbar      |\n|    --x-size-border-width-layout-columns-toolbar     |     The border width of the toolbar      |\n|        --x-flow-layout-columns-toolbar-aside        |    The flex flow of the toolbar aside    |\n|    --x-size-justify-layout-columns-toolbar-aside    | The justify content of the toolbar aside |\n|     --x-size-align-layout-columns-toolbar-aside     |   The align items of the toolbar aside   |\n|        --x-flow-layout-columns-toolbar-body         |  The flex flow of the end toolbar body   |\n|    --x-size-justify-layout-columns-toolbar-body     | Justify content of the end toolbar body  |\n|     --x-size-align-layout-columns-toolbar-body      |   The align items of the toolbar body    |\n|      --x-size-padding-top-layout-columns-main       |       The padding top of the main        |\n|     --x-size-padding-bottom-layout-columns-main     |      The padding bottom of the main      |\n|       --x-size-margin-top-layout-columns-main       |        The margin top of the main        |\n|     --x-size-margin-bottom-layout-columns-main      |      The margin bottom of the main       |\n|      --x-color-background-layout-columns-main       |     The background color of the main     |\n|        --x-color-border-layout-columns-main         |       The border color of the main       |\n|      --x-size-border-width-layout-columns-main      |       The border width of the main       |\n|   --x-color-background-layout-columns-main-aside    |  The background color of the main aside  |\n|     --x-color-border-layout-columns-main-aside      |    The border color of the main aside    |\n|   --x-size-border-width-layout-columns-main-aside   |  The border width of the sub main aside  |\n|    --x-color-background-layout-columns-main-body    |  The background color of the main body   |\n|      --x-color-border-layout-columns-main-body      |    The border color of the main body     |\n|   --x-size-border-width-layout-columns-main-body    |  The border width of the sub main body   |\n| --x-size-margin-bottom-layout-columns-scroll-to-top |  The margin bottom of the scroll to top  |\n|  --x-size-margin-left-layout-columns-scroll-to-top  |   The margin left of the scroll to top   |\n</docs>\n"],"names":["_resolveComponent","_openBlock","_createElementBlock","devMode","_normalizeClass","_normalizeStyle","_renderSlot","_createCommentVNode","$slots","_createElementVNode","_createBlock","_withCtx","_createVNode"],"mappings":"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"}

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

@@ -1,5 +1,5 @@
 import _sfc_main from './single-column-layout.vue2.js';
-import { resolveComponent, openBlock, createElementBlock, normalizeClass, createCommentVNode, renderSlot, createVNode, withCtx, createBlock } from 'vue';
+import { resolveComponent, openBlock, createElementBlock, normalizeClass, renderSlot, createCommentVNode, createVNode, withCtx, createBlock } from 'vue';
 import './single-column-layout.vue3.js';
 import _export_sfc from '../../_virtual/_plugin-vue_export-helper.js';
 
@@ -79,19 +79,16 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
     },
     [
       _ctx.devMode || _ctx.$slots["header"] ? (openBlock(), createElementBlock("header", _hoisted_1, [
-        createCommentVNode(" @slot Slot that is used to insert content into the Header. "),
         renderSlot(_ctx.$slots, "header", {}, () => [
           _ctx.devMode ? (openBlock(), createElementBlock("span", _hoisted_2, "HEADER")) : createCommentVNode("v-if", true)
         ], true)
       ])) : createCommentVNode("v-if", true),
       _ctx.devMode || _ctx.$slots["sub-header"] ? (openBlock(), createElementBlock("div", _hoisted_3, [
-        createCommentVNode(" @slot Slot that can be used to insert content into the Sub Header. "),
         renderSlot(_ctx.$slots, "sub-header", {}, () => [
           _ctx.devMode ? (openBlock(), createElementBlock("span", _hoisted_4, "SUB HEADER")) : createCommentVNode("v-if", true)
         ], true)
       ])) : createCommentVNode("v-if", true),
       _ctx.devMode || _ctx.$slots["toolbar"] ? (openBlock(), createElementBlock("div", _hoisted_5, [
-        createCommentVNode(" @slot Slot that can be used to insert content into the Toolbar. "),
         renderSlot(_ctx.$slots, "toolbar", {}, () => [
           _ctx.devMode ? (openBlock(), createElementBlock("span", _hoisted_6, "TOOLBAR")) : createCommentVNode("v-if", true)
         ], true)
@@ -99,7 +96,6 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
       _ctx.devMode || _ctx.$slots["predictive"] ? (openBlock(), createElementBlock("div", _hoisted_7, [
         createVNode(_component_BaseScroll, { class: "x-layout__predictive-scroll x-list x-list--vertical x-list__item--expand" }, {
           default: withCtx(() => [
-            createCommentVNode(" @slot Slot that can be used to insert content into the Predictive Layer. "),
             renderSlot(_ctx.$slots, "predictive", {}, () => [
               _ctx.devMode ? (openBlock(), createElementBlock("span", _hoisted_8, "PREDICTIVE")) : createCommentVNode("v-if", true)
             ], true)
@@ -116,7 +112,6 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
               class: "x-layout__main-scroll x-list x-list--vertical"
             }, {
               default: withCtx(() => [
-                createCommentVNode(" @slot Slot that can be used to insert content into the Main. "),
                 renderSlot(_ctx.$slots, "main", {}, () => [
                   _ctx.devMode ? (openBlock(), createElementBlock("span", _hoisted_10, "MAIN")) : createCommentVNode("v-if", true)
                 ], true)
@@ -130,13 +125,11 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
         })
       ])) : createCommentVNode("v-if", true),
       _ctx.devMode || _ctx.$slots["floating"] ? (openBlock(), createElementBlock("div", _hoisted_11, [
-        createCommentVNode(" @slot Slot that can be used to insert content into the Floating. "),
         renderSlot(_ctx.$slots, "floating", {}, () => [
           _ctx.devMode ? (openBlock(), createElementBlock("span", _hoisted_12, "FLOATING")) : createCommentVNode("v-if", true)
         ], true)
       ])) : createCommentVNode("v-if", true),
       _ctx.devMode || _ctx.$slots["footer"] ? (openBlock(), createElementBlock("footer", _hoisted_13, [
-        createCommentVNode(" @slot Slot that can be used to insert content into the Footer. "),
         renderSlot(_ctx.$slots, "footer", {}, () => [
           _ctx.devMode ? (openBlock(), createElementBlock("span", _hoisted_14, "FOOTER")) : createCommentVNode("v-if", true)
         ], true)
@@ -148,7 +141,6 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
         class: "x-layout__aside"
       }, {
         default: withCtx(() => [
-          createCommentVNode(" @slot Slot that can be used to insert content into the Aside. "),
           renderSlot(_ctx.$slots, "aside", {}, () => [
             _ctx.devMode ? (openBlock(), createElementBlock("span", _hoisted_15, "ASIDE")) : createCommentVNode("v-if", true)
           ], true)

package/js/components/layouts/single-column-layout.vue.js.map

@@ -1 +1 @@
-{"version":3,"file":"single-column-layout.vue.js","sources":["../../../../src/components/layouts/single-column-layout.vue"],"sourcesContent":["<template>\n  <div class=\"x-layout x-layout--single-column\" :class=\"{ 'dev-mode': devMode }\">\n    <header v-if=\"devMode || $slots['header']\" class=\"x-layout__header x-list x-list--horizontal\">\n      <!-- @slot Slot that is used to insert content into the Header. -->\n      <slot name=\"header\">\n        <span v-if=\"devMode\" class=\"slot-helper\">HEADER</span>\n      </slot>\n    </header>\n\n    <div\n      v-if=\"devMode || $slots['sub-header']\"\n      class=\"x-layout__sub-header x-list x-list--horizontal\"\n    >\n      <!-- @slot Slot that can be used to insert content into the Sub Header. -->\n      <slot name=\"sub-header\">\n        <span v-if=\"devMode\" class=\"slot-helper\">SUB HEADER</span>\n      </slot>\n    </div>\n\n    <div v-if=\"devMode || $slots['toolbar']\" class=\"x-layout__toolbar x-list x-list--horizontal\">\n      <!-- @slot Slot that can be used to insert content into the Toolbar. -->\n      <slot name=\"toolbar\">\n        <span v-if=\"devMode\" class=\"slot-helper\">TOOLBAR</span>\n      </slot>\n    </div>\n\n    <div\n      v-if=\"devMode || $slots['predictive']\"\n      class=\"x-layout__predictive x-list x-list--vertical\"\n    >\n      <BaseScroll class=\"x-layout__predictive-scroll x-list x-list--vertical x-list__item--expand\">\n        <!-- @slot Slot that can be used to insert content into the Predictive Layer. -->\n        <slot name=\"predictive\">\n          <span v-if=\"devMode\" class=\"slot-helper\">PREDICTIVE</span>\n        </slot>\n      </BaseScroll>\n    </div>\n\n    <main v-if=\"devMode || $slots['main']\" class=\"x-layout__main\">\n      <MainScroll>\n        <Scroll id=\"main-scroll\" class=\"x-layout__main-scroll x-list x-list--vertical\">\n          <!-- @slot Slot that can be used to insert content into the Main. -->\n          <slot name=\"main\">\n            <span v-if=\"devMode\" class=\"slot-helper\">MAIN</span>\n          </slot>\n        </Scroll>\n      </MainScroll>\n    </main>\n\n    <div v-if=\"devMode || $slots['floating']\" class=\"x-layout__floating x-list x-list--horizontal\">\n      <!-- @slot Slot that can be used to insert content into the Floating. -->\n      <slot name=\"floating\">\n        <span v-if=\"devMode\" class=\"slot-helper\">FLOATING</span>\n      </slot>\n    </div>\n\n    <footer v-if=\"devMode || $slots['footer']\" class=\"x-layout__footer x-list x-list--horizontal\">\n      <!-- @slot Slot that can be used to insert content into the Footer. -->\n      <slot name=\"footer\">\n        <span v-if=\"devMode\" class=\"slot-helper\">FOOTER</span>\n      </slot>\n    </footer>\n\n    <BaseIdModal\n      v-if=\"devMode || $slots['aside']\"\n      :animation=\"asideAnimation\"\n      modalId=\"aside-modal\"\n      class=\"x-layout__aside\"\n    >\n      <!-- @slot Slot that can be used to insert content into the Aside. -->\n      <slot name=\"aside\">\n        <span v-if=\"devMode\" class=\"slot-helper\">ASIDE</span>\n      </slot>\n    </BaseIdModal>\n\n    <slot name=\"extra-aside\">\n      <span v-if=\"devMode\" class=\"slot-helper\">EXTRA ASIDE</span>\n    </slot>\n  </div>\n</template>\n\n<script lang=\"ts\">\n  import { defineComponent } from 'vue';\n  import Scroll from '../../x-modules/scroll/components/scroll.vue';\n  import MainScroll from '../../x-modules/scroll/components/main-scroll.vue';\n  import { animateTranslate } from '../animations/animate-translate/animate-translate.factory';\n  import BaseIdModal from '../modals/base-id-modal.vue';\n  import BaseScroll from '../scroll/base-scroll.vue';\n  import { AnimationProp } from '../../types';\n\n  /**\n   * Component for use as Layout to be filled with the rest of the Components.\n   *\n   * @deprecated - The layout has been deprecated in favor of using new XDS layout.\n   *\n   * @public\n   */\n  export default defineComponent({\n    name: 'SingleColumnLayout',\n    components: { BaseIdModal, BaseScroll, MainScroll, Scroll },\n    props: {\n      /** The animation used for the Main Aside. */\n      asideAnimation: {\n        type: AnimationProp,\n        default: () => animateTranslate('right')\n      },\n      /** Enables the devMode, which shows the available slots to use with its names. */\n      devMode: Boolean\n    }\n  });\n</script>\n\n<style lang=\"css\" scoped>\n  @import url('../../design-system-deprecated/utilities/dev-mode.css');\n\n  .x-layout {\n    display: grid;\n    align-content: stretch;\n    justify-content: stretch;\n    height: 100%;\n\n    grid-template-rows:\n      [page-start header-start]\n      auto\n      [header-end sub-header-start]\n      auto\n      [sub-header-end toolbar-start]\n      auto\n      [toolbar-end main-start]\n      1fr\n      [floating-start]\n      auto\n      [main-end floating-end footer-start]\n      auto\n      [footer-end page-end];\n\n    grid-template-columns: 1fr;\n  }\n\n  .x-layout > * {\n    grid-column: 1/-1;\n    min-width: 0;\n    min-height: 0;\n    display: flex;\n  }\n\n  .x-layout__header {\n    grid-row: header;\n    z-index: 1;\n  }\n\n  .x-layout__sub-header {\n    grid-row: sub-header;\n    z-index: 1;\n  }\n\n  .x-layout__toolbar {\n    grid-row: toolbar;\n    z-index: 1;\n  }\n\n  .x-layout__predictive {\n    grid-row-start: header-end;\n    grid-row-end: page-end;\n    flex-flow: column nowrap;\n    z-index: 2;\n  }\n\n  .x-layout__main {\n    grid-row: main;\n    flex-flow: column nowrap;\n  }\n\n  .x-layout__floating {\n    grid-row: floating;\n    z-index: 1;\n  }\n\n  .x-layout__footer {\n    grid-row: footer;\n  }\n\n  .x-layout__aside {\n    grid-row: page;\n    z-index: 3;\n  }\n\n  .x-layout :deep(.x-layout__aside .x-modal__content) {\n    width: 100%;\n    height: 100%;\n    margin-inline-start: var(--x-size-margin-left-layout-single-column, 0);\n  }\n\n  .x-layout :deep(.x-layout__aside > *:not(.slot-helper)) {\n    pointer-events: all;\n  }\n</style>\n"],"names":["_resolveComponent","devMode","$slots","_openBlock","_createElementBlock","_createCommentVNode","_renderSlot","_createVNode","_withCtx","asideAnimation"],"mappings":"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"}
+{"version":3,"file":"single-column-layout.vue.js","sources":["../../../../src/components/layouts/single-column-layout.vue"],"sourcesContent":["<template>\n  <div class=\"x-layout x-layout--single-column\" :class=\"{ 'dev-mode': devMode }\">\n    <header v-if=\"devMode || $slots['header']\" class=\"x-layout__header x-list x-list--horizontal\">\n      <!-- @slot Slot that is used to insert content into the Header. -->\n      <slot name=\"header\">\n        <span v-if=\"devMode\" class=\"slot-helper\">HEADER</span>\n      </slot>\n    </header>\n\n    <div\n      v-if=\"devMode || $slots['sub-header']\"\n      class=\"x-layout__sub-header x-list x-list--horizontal\"\n    >\n      <!-- @slot Slot that can be used to insert content into the Sub Header. -->\n      <slot name=\"sub-header\">\n        <span v-if=\"devMode\" class=\"slot-helper\">SUB HEADER</span>\n      </slot>\n    </div>\n\n    <div v-if=\"devMode || $slots['toolbar']\" class=\"x-layout__toolbar x-list x-list--horizontal\">\n      <!-- @slot Slot that can be used to insert content into the Toolbar. -->\n      <slot name=\"toolbar\">\n        <span v-if=\"devMode\" class=\"slot-helper\">TOOLBAR</span>\n      </slot>\n    </div>\n\n    <div\n      v-if=\"devMode || $slots['predictive']\"\n      class=\"x-layout__predictive x-list x-list--vertical\"\n    >\n      <BaseScroll class=\"x-layout__predictive-scroll x-list x-list--vertical x-list__item--expand\">\n        <!-- @slot Slot that can be used to insert content into the Predictive Layer. -->\n        <slot name=\"predictive\">\n          <span v-if=\"devMode\" class=\"slot-helper\">PREDICTIVE</span>\n        </slot>\n      </BaseScroll>\n    </div>\n\n    <main v-if=\"devMode || $slots['main']\" class=\"x-layout__main\">\n      <MainScroll>\n        <Scroll id=\"main-scroll\" class=\"x-layout__main-scroll x-list x-list--vertical\">\n          <!-- @slot Slot that can be used to insert content into the Main. -->\n          <slot name=\"main\">\n            <span v-if=\"devMode\" class=\"slot-helper\">MAIN</span>\n          </slot>\n        </Scroll>\n      </MainScroll>\n    </main>\n\n    <div v-if=\"devMode || $slots['floating']\" class=\"x-layout__floating x-list x-list--horizontal\">\n      <!-- @slot Slot that can be used to insert content into the Floating. -->\n      <slot name=\"floating\">\n        <span v-if=\"devMode\" class=\"slot-helper\">FLOATING</span>\n      </slot>\n    </div>\n\n    <footer v-if=\"devMode || $slots['footer']\" class=\"x-layout__footer x-list x-list--horizontal\">\n      <!-- @slot Slot that can be used to insert content into the Footer. -->\n      <slot name=\"footer\">\n        <span v-if=\"devMode\" class=\"slot-helper\">FOOTER</span>\n      </slot>\n    </footer>\n\n    <BaseIdModal\n      v-if=\"devMode || $slots['aside']\"\n      :animation=\"asideAnimation\"\n      modalId=\"aside-modal\"\n      class=\"x-layout__aside\"\n    >\n      <!-- @slot Slot that can be used to insert content into the Aside. -->\n      <slot name=\"aside\">\n        <span v-if=\"devMode\" class=\"slot-helper\">ASIDE</span>\n      </slot>\n    </BaseIdModal>\n\n    <slot name=\"extra-aside\">\n      <span v-if=\"devMode\" class=\"slot-helper\">EXTRA ASIDE</span>\n    </slot>\n  </div>\n</template>\n\n<script lang=\"ts\">\n  import { defineComponent } from 'vue';\n  import Scroll from '../../x-modules/scroll/components/scroll.vue';\n  import MainScroll from '../../x-modules/scroll/components/main-scroll.vue';\n  import { animateTranslate } from '../animations/animate-translate/animate-translate.factory';\n  import BaseIdModal from '../modals/base-id-modal.vue';\n  import BaseScroll from '../scroll/base-scroll.vue';\n  import { AnimationProp } from '../../types';\n\n  /**\n   * Component for use as Layout to be filled with the rest of the Components.\n   *\n   * @deprecated - The layout has been deprecated in favor of using new XDS layout.\n   *\n   * @public\n   */\n  export default defineComponent({\n    name: 'SingleColumnLayout',\n    components: { BaseIdModal, BaseScroll, MainScroll, Scroll },\n    props: {\n      /** The animation used for the Main Aside. */\n      asideAnimation: {\n        type: AnimationProp,\n        default: () => animateTranslate('right')\n      },\n      /** Enables the devMode, which shows the available slots to use with its names. */\n      devMode: Boolean\n    }\n  });\n</script>\n\n<style lang=\"css\" scoped>\n  @import url('../../design-system-deprecated/utilities/dev-mode.css');\n\n  .x-layout {\n    display: grid;\n    align-content: stretch;\n    justify-content: stretch;\n    height: 100%;\n\n    grid-template-rows:\n      [page-start header-start]\n      auto\n      [header-end sub-header-start]\n      auto\n      [sub-header-end toolbar-start]\n      auto\n      [toolbar-end main-start]\n      1fr\n      [floating-start]\n      auto\n      [main-end floating-end footer-start]\n      auto\n      [footer-end page-end];\n\n    grid-template-columns: 1fr;\n  }\n\n  .x-layout > * {\n    grid-column: 1/-1;\n    min-width: 0;\n    min-height: 0;\n    display: flex;\n  }\n\n  .x-layout__header {\n    grid-row: header;\n    z-index: 1;\n  }\n\n  .x-layout__sub-header {\n    grid-row: sub-header;\n    z-index: 1;\n  }\n\n  .x-layout__toolbar {\n    grid-row: toolbar;\n    z-index: 1;\n  }\n\n  .x-layout__predictive {\n    grid-row-start: header-end;\n    grid-row-end: page-end;\n    flex-flow: column nowrap;\n    z-index: 2;\n  }\n\n  .x-layout__main {\n    grid-row: main;\n    flex-flow: column nowrap;\n  }\n\n  .x-layout__floating {\n    grid-row: floating;\n    z-index: 1;\n  }\n\n  .x-layout__footer {\n    grid-row: footer;\n  }\n\n  .x-layout__aside {\n    grid-row: page;\n    z-index: 3;\n  }\n\n  .x-layout :deep(.x-layout__aside .x-modal__content) {\n    width: 100%;\n    height: 100%;\n    margin-inline-start: var(--x-size-margin-left-layout-single-column, 0);\n  }\n\n  .x-layout :deep(.x-layout__aside > *:not(.slot-helper)) {\n    pointer-events: all;\n  }\n</style>\n"],"names":["_resolveComponent","devMode","$slots","_createElementBlock","_renderSlot","_openBlock","_createCommentVNode","_createVNode","_withCtx","asideAnimation"],"mappings":"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"}

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

@@ -1,5 +1,5 @@
 import _sfc_main from './base-events-modal-close.vue2.js';
-import { resolveComponent, openBlock, createBlock, withCtx, createCommentVNode, renderSlot } from 'vue';
+import { resolveComponent, openBlock, createBlock, withCtx, renderSlot } from 'vue';
 import _export_sfc from '../../_virtual/_plugin-vue_export-helper.js';
 
 function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
@@ -11,7 +11,6 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
     "aria-label": "Close"
   }, {
     default: withCtx(() => [
-      createCommentVNode(" @slot (Required) Button content with a text, an icon or both "),
       renderSlot(_ctx.$slots, "default")
     ]),
     _: 3

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\">\n  import { computed, defineComponent, PropType } from 'vue';\n  import { PropsWithType } from '../../utils/types';\n  import { XEventsTypes } from '../../wiring/events.types';\n  import 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   */\n  export 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 clicked, the component closes the `BaseEventsModal`. The only needed thing is the content that\nthe button should render, that can be any thing: a text, an image, an icon, a combination of the two\nof them...\n\n```vue\n<template>\n  <BaseEventsCloseButton>\n    <img src=\"./close-button-icon.svg\" />\n  </BaseEventsCloseButton>\n</template>\n\n<script>\n  import { BaseEventsModalClose } from '@empathyco/x-components';\n\n  export default {\n    name: 'BaseEventsModalCloseTest',\n    components: {\n      BaseEventsModalClose\n    }\n  };\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 by default too.\nThis event can be changed using the `closingEvent` prop.\n\n```vue\n<template>\n  <BaseEventsModalClose closingEvent=\"UserClosedEmpathize\">×</BaseEventsModalClose>\n</template>\n\n<script>\n  import { BaseEventsModalClose } from '@empathyco/x-components';\n\n  export default {\n    name: 'BaseEventsModalCloseTest',\n    components: {\n      BaseEventsModalClose\n    }\n  };\n</script>\n```\n</docs>\n"],"names":["_resolveComponent","_openBlock","_createBlock","_withCtx","_createCommentVNode","_renderSlot"],"mappings":";;;;;AASoB,EAAA,MAAA,0BAAA,GAAAA,gBAAA,CAAA,iBAAA,CAAA,CAAA;AANX,EAAA,OAAAC,SAAA,EAAuC,EAAAC,WAAA,CAAA,0BAAA,EAAA;AAAA,IAC5C,MAAU,EAAA,IAAA,CAAA,MAAA;AAAA,IACV,KAAA,EAAA,sCAAA;AAAA,IAAA,WAAA,EAAA,aAAA;AALJ,IAAA,YAAA,EAAA,OAAA;AAAA,GAAA,EAAA;aAQIC,OAAQ,CAAA,MAAA;AAAA,MAAAC,kBAAA,CAAA,gEAAA,CAAA;AARZ,MAAAC,UAAA,CAAA,IAAA,CAAA,MAAA,EAAA,SAAA,CAAA;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 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\">\n  import { computed, defineComponent, PropType } from 'vue';\n  import { PropsWithType } from '../../utils/types';\n  import { XEventsTypes } from '../../wiring/events.types';\n  import 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   */\n  export 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 clicked, the component closes the `BaseEventsModal`. The only needed thing is the content that\nthe button should render, that can be any thing: a text, an image, an icon, a combination of the two\nof them...\n\n```vue\n<template>\n  <BaseEventsCloseButton>\n    <img src=\"./close-button-icon.svg\" />\n  </BaseEventsCloseButton>\n</template>\n\n<script>\n  import { BaseEventsModalClose } from '@empathyco/x-components';\n\n  export default {\n    name: 'BaseEventsModalCloseTest',\n    components: {\n      BaseEventsModalClose\n    }\n  };\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 by default too.\nThis event can be changed using the `closingEvent` prop.\n\n```vue\n<template>\n  <BaseEventsModalClose closingEvent=\"UserClosedEmpathize\">×</BaseEventsModalClose>\n</template>\n\n<script>\n  import { BaseEventsModalClose } from '@empathyco/x-components';\n\n  export default {\n    name: 'BaseEventsModalCloseTest',\n    components: {\n      BaseEventsModalClose\n    }\n  };\n</script>\n```\n</docs>\n"],"names":["_resolveComponent","_openBlock","_createBlock","_renderSlot"],"mappings":";;;;;AASoB,EAAA,MAAA,0BAAA,GAAAA,gBAAA,CAAA,iBAAA,CAAA,CAAA;AANX,EAAA,OAAAC,SAAA,EAAuC,EAAAC,WAAA,CAAA,0BAAA,EAAA;AAAA,IAC5C,MAAU,EAAA,IAAA,CAAA,MAAA;AAAA,IACV,KAAA,EAAA,sCAAA;AAAA,IAAA,WAAA,EAAA,aAAA;AALJ,IAAA,YAAA,EAAA,OAAA;AAAA,GAAA,EAAA;;AAAA,MAAAC,UAAA,CAAA,IAAA,CAAA,MAAA,EAAA,SAAA,CAAA;AAAA,KAAA,CAAA;;;;;;;;;"}

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

@@ -1,5 +1,5 @@
 import _sfc_main from './base-events-modal-open.vue2.js';
-import { resolveComponent, openBlock, createBlock, withCtx, createCommentVNode, renderSlot } from 'vue';
+import { resolveComponent, openBlock, createBlock, withCtx, renderSlot } from 'vue';
 import _export_sfc from '../../_virtual/_plugin-vue_export-helper.js';
 
 function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
@@ -11,7 +11,6 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
     "aria-label": "Open"
   }, {
     default: withCtx(() => [
-      createCommentVNode(" @slot (Required) Button content with a text, an icon or both "),
       renderSlot(_ctx.$slots, "default")
     ]),
     _: 3

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\">\n  import { computed, defineComponent, PropType } from 'vue';\n  import { PropsWithType } from '../../utils/types';\n  import { XEventsTypes } from '../../wiring/events.types';\n  import 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   */\n  export 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 clicked, the component closes the `BaseEventsModal`. The only needed thing is the content that\nthe button should render, that can be any thing: a text, an image, an icon, a combination of the two\nof them...\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>\n  import { BaseEventsModalOpen } from '@empathyco/x-components';\n\n  export default {\n    name: 'BaseEventsModalOpenTest',\n    components: {\n      BaseEventsModalOpen\n    }\n  };\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 by default too.\nThis event can be changed using the `openingEvent` prop, but remember to change it in the target\n`BaseEventsModal` too.\n\n```vue\n<template>\n  <BaseEventsModalOpen openingEvent=\"UserOpenedEmpathize\">\n    <span>Open</span>\n  </BaseEventsModalOpen>\n</template>\n\n<script>\n  import { BaseEventsModalOpen } from '@empathyco/x-components';\n\n  export default {\n    name: 'BaseEventsModalOpenTest',\n    components: {\n      BaseEventsModalOpen\n    }\n  };\n</script>\n```\n</docs>\n"],"names":["_resolveComponent","_openBlock","_createBlock","_withCtx","_createCommentVNode","_renderSlot"],"mappings":";;;;;AASoB,EAAA,MAAA,0BAAA,GAAAA,gBAAA,CAAA,iBAAA,CAAA,CAAA;AANX,EAAA,OAAAC,SAAA,EAAsC,EAAAC,WAAA,CAAA,0BAAA,EAAA;AAAA,IAC3C,MAAU,EAAA,IAAA,CAAA,MAAA;AAAA,IACV,KAAA,EAAA,qCAAA;AAAA,IAAA,WAAA,EAAA,YAAA;AALJ,IAAA,YAAA,EAAA,MAAA;AAAA,GAAA,EAAA;aAQIC,OAAQ,CAAA,MAAA;AAAA,MAAAC,kBAAA,CAAA,gEAAA,CAAA;AARZ,MAAAC,UAAA,CAAA,IAAA,CAAA,MAAA,EAAA,SAAA,CAAA;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 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\">\n  import { computed, defineComponent, PropType } from 'vue';\n  import { PropsWithType } from '../../utils/types';\n  import { XEventsTypes } from '../../wiring/events.types';\n  import 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   */\n  export 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 clicked, the component closes the `BaseEventsModal`. The only needed thing is the content that\nthe button should render, that can be any thing: a text, an image, an icon, a combination of the two\nof them...\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>\n  import { BaseEventsModalOpen } from '@empathyco/x-components';\n\n  export default {\n    name: 'BaseEventsModalOpenTest',\n    components: {\n      BaseEventsModalOpen\n    }\n  };\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 by default too.\nThis event can be changed using the `openingEvent` prop, but remember to change it in the target\n`BaseEventsModal` too.\n\n```vue\n<template>\n  <BaseEventsModalOpen openingEvent=\"UserOpenedEmpathize\">\n    <span>Open</span>\n  </BaseEventsModalOpen>\n</template>\n\n<script>\n  import { BaseEventsModalOpen } from '@empathyco/x-components';\n\n  export default {\n    name: 'BaseEventsModalOpenTest',\n    components: {\n      BaseEventsModalOpen\n    }\n  };\n</script>\n```\n</docs>\n"],"names":["_resolveComponent","_openBlock","_createBlock","_renderSlot"],"mappings":";;;;;AASoB,EAAA,MAAA,0BAAA,GAAAA,gBAAA,CAAA,iBAAA,CAAA,CAAA;AANX,EAAA,OAAAC,SAAA,EAAsC,EAAAC,WAAA,CAAA,0BAAA,EAAA;AAAA,IAC3C,MAAU,EAAA,IAAA,CAAA,MAAA;AAAA,IACV,KAAA,EAAA,qCAAA;AAAA,IAAA,WAAA,EAAA,YAAA;AALJ,IAAA,YAAA,EAAA,MAAA;AAAA,GAAA,EAAA;;AAAA,MAAAC,UAAA,CAAA,IAAA,CAAA,MAAA,EAAA,SAAA,CAAA;AAAA,KAAA,CAAA;;;;;;;;;"}

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

@@ -1,5 +1,5 @@
 import _sfc_main from './base-id-modal-close.vue2.js';
-import { openBlock, createElementBlock, createCommentVNode, renderSlot } from 'vue';
+import { openBlock, createElementBlock, renderSlot } from 'vue';
 import _export_sfc from '../../_virtual/_plugin-vue_export-helper.js';
 
 function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
@@ -8,7 +8,6 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
     class: "x-events-modal-id-close-button x-button",
     "data-test": "close-modal-id"
   }, [
-    createCommentVNode(" @slot (Required) Button content with a text, an icon or both "),
     renderSlot(_ctx.$slots, "default")
   ]);
 }

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    @click=\"closeModal\"\n    class=\"x-events-modal-id-close-button x-button\"\n    data-test=\"close-modal-id\"\n  >\n    <!-- @slot (Required) Button content with a text, an icon or both -->\n    <slot />\n  </button>\n</template>\n\n<script lang=\"ts\">\n  import { defineComponent } from 'vue';\n  import { 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   */\n  export 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       */\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>\n  import { BaseIdModalClose } from '@empathyco/x-components';\n\n  export default {\n    name: 'BaseIdModalCloseTest',\n    components: {\n      BaseIdModalClose\n    }\n  };\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>\n  import { BaseIdModalClose } from '@empathyco/x-components';\n\n  export default {\n    name: 'BaseIdModalCloseTest',\n    components: {\n      BaseIdModalClose\n    }\n  };\n</script>\n```\n</docs>\n"],"names":["_openBlock","_createElementBlock","_createCommentVNode"],"mappings":";;;;AAEK,SAAA,WAAA,CAAK,IAAE,EAAA,MAAA,EAAA,MAAA,EAAA,MAAA,EAAA,KAAA,EAAA,QAAA,EAAA;AACH,EAAA,OAAAA,SAAA,EAA0C,EAAAC,kBAAA,CAAA,QAAA,EAAA;AAAA,IAC/C,gBAAU,CAAgB,CAAA,KAAA,MAAA,CAAA,CAAA,CAAA,GAAA,CAAA,GAAA,IAAA,KAAA,IAAA,CAAA,UAAA,IAAA,IAAA,CAAA,UAAA,CAAA,GAAA,IAAA,CAAA,CAAA;AAAA,IAAA,KAAA,EAAA,yCAAA;AAE1B,IAAA,WAAA,EAAA,gBAAA;AAAA,GACA,EAAA;AAAA,IAAAC,kBAAA,CAAA,gEAAA,CAAA;;;;;;;;"}
+{"version":3,"file":"base-id-modal-close.vue.js","sources":["../../../../src/components/modals/base-id-modal-close.vue"],"sourcesContent":["<template>\n  <button\n    @click=\"closeModal\"\n    class=\"x-events-modal-id-close-button x-button\"\n    data-test=\"close-modal-id\"\n  >\n    <!-- @slot (Required) Button content with a text, an icon or both -->\n    <slot />\n  </button>\n</template>\n\n<script lang=\"ts\">\n  import { defineComponent } from 'vue';\n  import { 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   */\n  export 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       */\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>\n  import { BaseIdModalClose } from '@empathyco/x-components';\n\n  export default {\n    name: 'BaseIdModalCloseTest',\n    components: {\n      BaseIdModalClose\n    }\n  };\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>\n  import { BaseIdModalClose } from '@empathyco/x-components';\n\n  export default {\n    name: 'BaseIdModalCloseTest',\n    components: {\n      BaseIdModalClose\n    }\n  };\n</script>\n```\n</docs>\n"],"names":["_openBlock","_createElementBlock"],"mappings":";;;;AAEK,SAAA,WAAA,CAAK,IAAE,EAAA,MAAA,EAAA,MAAA,EAAA,MAAA,EAAA,KAAA,EAAA,QAAA,EAAA;AACH,EAAA,OAAAA,SAAA,EAA0C,EAAAC,kBAAA,CAAA,QAAA,EAAA;AAAA,IAC/C,gBAAU,CAAgB,CAAA,KAAA,MAAA,CAAA,CAAA,CAAA,GAAA,CAAA,GAAA,IAAA,KAAA,IAAA,CAAA,UAAA,IAAA,IAAA,CAAA,UAAA,CAAA,GAAA,IAAA,CAAA,CAAA;AAAA,IAAA,KAAA,EAAA,yCAAA;IAG1B,WAAQ,EAAA,gBAAA;AAAA,GAAA,EAAA;;;;;;;;"}

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

@@ -1,5 +1,5 @@
 import _sfc_main from './base-id-modal-open.vue2.js';
-import { openBlock, createElementBlock, createCommentVNode, renderSlot } from 'vue';
+import { openBlock, createElementBlock, renderSlot } from 'vue';
 import _export_sfc from '../../_virtual/_plugin-vue_export-helper.js';
 
 function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
@@ -8,7 +8,6 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
     class: "x-events-modal-id-open-button x-button",
     "data-test": "open-modal-id"
   }, [
-    createCommentVNode(" @slot (Required) Button content with a text, an icon or both "),
     renderSlot(_ctx.$slots, "default")
   ]);
 }

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    @click=\"openModal\"\n    class=\"x-events-modal-id-open-button x-button\"\n    data-test=\"open-modal-id\"\n  >\n    <!-- @slot (Required) Button content with a text, an icon or both -->\n    <slot />\n  </button>\n</template>\n\n<script lang=\"ts\">\n  import { defineComponent } from 'vue';\n  import { 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   */\n  export 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       */\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>\n  import { BaseIdModalOpen } from '@empathyco/x-components';\n\n  export default {\n    name: 'BaseIdModalOpenTest',\n    components: {\n      BaseIdModalOpen\n    }\n  };\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>\n  import { BaseIdModalOpen } from '@empathyco/x-components';\n\n  export default {\n    name: 'BaseIdModalOpenTest',\n    components: {\n      BaseIdModalOpen\n    }\n  };\n</script>\n```\n</docs>\n"],"names":["_openBlock","_createElementBlock","_createCommentVNode"],"mappings":";;;;AAEK,SAAA,WAAA,CAAK,IAAE,EAAA,MAAA,EAAA,MAAA,EAAA,MAAA,EAAA,KAAA,EAAA,QAAA,EAAA;AACH,EAAA,OAAAA,SAAA,EAAyC,EAAAC,kBAAA,CAAA,QAAA,EAAA;AAAA,IAC9C,gBAAU,CAAe,CAAA,KAAA,MAAA,CAAA,CAAA,CAAA,GAAA,CAAA,GAAA,IAAA,KAAA,IAAA,CAAA,SAAA,IAAA,IAAA,CAAA,SAAA,CAAA,GAAA,IAAA,CAAA,CAAA;AAAA,IAAA,KAAA,EAAA,wCAAA;AAEzB,IAAA,WAAA,EAAA,eAAA;AAAA,GACA,EAAA;AAAA,IAAAC,kBAAA,CAAA,gEAAA,CAAA;;;;;;;;"}
+{"version":3,"file":"base-id-modal-open.vue.js","sources":["../../../../src/components/modals/base-id-modal-open.vue"],"sourcesContent":["<template>\n  <button\n    @click=\"openModal\"\n    class=\"x-events-modal-id-open-button x-button\"\n    data-test=\"open-modal-id\"\n  >\n    <!-- @slot (Required) Button content with a text, an icon or both -->\n    <slot />\n  </button>\n</template>\n\n<script lang=\"ts\">\n  import { defineComponent } from 'vue';\n  import { 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   */\n  export 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       */\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>\n  import { BaseIdModalOpen } from '@empathyco/x-components';\n\n  export default {\n    name: 'BaseIdModalOpenTest',\n    components: {\n      BaseIdModalOpen\n    }\n  };\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>\n  import { BaseIdModalOpen } from '@empathyco/x-components';\n\n  export default {\n    name: 'BaseIdModalOpenTest',\n    components: {\n      BaseIdModalOpen\n    }\n  };\n</script>\n```\n</docs>\n"],"names":["_openBlock","_createElementBlock"],"mappings":";;;;AAEK,SAAA,WAAA,CAAK,IAAE,EAAA,MAAA,EAAA,MAAA,EAAA,MAAA,EAAA,KAAA,EAAA,QAAA,EAAA;AACH,EAAA,OAAAA,SAAA,EAAyC,EAAAC,kBAAA,CAAA,QAAA,EAAA;AAAA,IAC9C,gBAAU,CAAe,CAAA,KAAA,MAAA,CAAA,CAAA,CAAA,GAAA,CAAA,GAAA,IAAA,KAAA,IAAA,CAAA,SAAA,IAAA,IAAA,CAAA,SAAA,CAAA,GAAA,IAAA,CAAA,CAAA;AAAA,IAAA,KAAA,EAAA,wCAAA;IAGzB,WAAQ,EAAA,eAAA;AAAA,GAAA,EAAA;;;;;;;;"}

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

@@ -1,5 +1,5 @@
 import _sfc_main from './base-modal.vue2.js';
-import { withDirectives, openBlock, createElementBlock, createBlock, resolveDynamicComponent, withCtx, normalizeClass, createCommentVNode, renderSlot, vShow } from 'vue';
+import { withDirectives, openBlock, createElementBlock, createBlock, resolveDynamicComponent, withCtx, normalizeClass, renderSlot, createCommentVNode, vShow } from 'vue';
 import './base-modal.vue3.js';
 import _export_sfc from '../../_virtual/_plugin-vue_export-helper.js';
 
@@ -31,7 +31,6 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
                 role: "dialog"
               },
               [
-                createCommentVNode(" @slot (Required) Modal container content "),
                 renderSlot(_ctx.$slots, "default", {}, void 0, true)
               ],
               2