@empathyco/x-components 6.0.0-alpha.221 → 6.0.0-alpha.223

package/CHANGELOG.md

@@ -3,6 +3,23 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## 6.0.0-alpha.223 (2026-03-17)
+
+* feat(x-component): restructure x-components to extract `demo` from `library` (#2054) ([db104d1](https://github.com/empathyco/x/commit/db104d1)), closes [#2054](https://github.com/empathyco/x/issues/2054)
+* chore(release): publish ([6264e06](https://github.com/empathyco/x/commit/6264e06))
+
+
+
+
+
+## 6.0.0-alpha.222 (2026-03-16)
+
+**Note:** Version bump only for package @empathyco/x-components
+
+
+
+
+
 ## 6.0.0-alpha.221 (2026-03-16)
 
 **Note:** Version bump only for package @empathyco/x-components

package/ai/index.d.ts

@@ -1 +1 @@
-export * from '../types/x-modules/ai';
+export * from '../types/src/x-modules/ai';

package/core/index.d.ts

@@ -3,17 +3,16 @@
  *
  * @packageDocumentation
  */
-export * from '../types/components';
-export * from '../types/composables';
-export * from '../types/directives';
-export * from '../types/plugins';
-export * from '../types/services';
-export * from '../types/store';
-export * from '../types/types';
-export * from '../types/utils';
-export * from '../types/wiring';
-export * from '../types/x-bus';
-export * from '../types/x-bus/x-priority-queue';
-export * from '../types/x-installer';
-export * from '../types/x-modules/x-modules.types';
+export * from '../types/src/components';
+export * from '../types/src/composables';
+export * from '../types/src/directives';
+export * from '../types/src/plugins';
+export * from '../types/src/services';
+export * from '../types/src/store';
+export * from '../types/src/types';
+export * from '../types/src/utils';
+export * from '../types/src/wiring';
+export * from '../types/src/x-bus';
+export * from '../types/src/x-installer';
+export * from '../types/src/x-modules/x-modules.types';
 //# sourceMappingURL=index.d.ts.map

package/core/index.js

@@ -157,7 +157,6 @@ export { useState } from '../js/composables/use-state.js';
 export { useXBus } from '../js/composables/use-x-bus.js';
 export { infiniteScroll } from '../js/directives/infinite-scroll.js';
 export { typing } from '../js/directives/typing.js';
-export { setupDevtools } from '../js/plugins/devtools/devtools.plugin.js';
 export { bus } from '../js/plugins/x-bus.js';
 export { isSimpleSelector, registerStoreEmitters } from '../js/plugins/x-emitters.js';
 export { XPlugin, xPlugin } from '../js/plugins/x-plugin.js';
@@ -196,7 +195,7 @@ export { createWireFromFunction, wireCommit, wireCommitWithoutPayload, wireDispa
 export { debounce, filter, filterBlacklistedModules, filterFalsyPayload, filterTruthyPayload, filterWhitelistedModules, mapWire, throttle } from '../js/wiring/wires.operators.js';
 export { createWiring, getStateAndGettersFromModule } from '../js/wiring/wiring.utils.js';
 export { XPriorityBus } from '../js/x-bus/x-bus.js';
-export { BaseXPriorityQueue, BaseXPriorityQueueNode } from '../js/x-bus/x-priority-queue/x-priority-queue.js';
+export { BaseXPriorityQueue, BaseXPriorityQueueNode } from '../js/x-bus/x-priority-queue.js';
 export { BaseXAPI } from '../js/x-installer/api/base-api.js';
-export { XInstaller } from '../js/x-installer/x-installer/x-installer.js';
+export { XInstaller } from '../js/x-installer/x-installer.js';
 //# sourceMappingURL=index.js.map

package/core/index.js.map

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

package/device/index.d.ts

@@ -1 +1 @@
-export * from '../types/x-modules/device';
+export * from '../types/src/x-modules/device';

package/docs/API-reference/api/x-adapter-platform.platformaisuggestionsearch.md

@@ -88,7 +88,7 @@ string
 </td></tr>
 <tr><td>
 
-[tagging](./x-adapter-platform.platformaisuggestionsearch.tagging.md)
+[tagging?](./x-adapter-platform.platformaisuggestionsearch.tagging.md)
 
 
 </td><td>
@@ -101,6 +101,8 @@ string
 
 </td><td>
 
+_(Optional)_
+
 
 </td></tr>
 </tbody></table>

package/docs/API-reference/api/x-adapter-platform.platformaisuggestionsearch.tagging.md

@@ -7,7 +7,7 @@
 **Signature:**
 
 ```typescript
-tagging: {
+tagging?: {
         query: string;
     };
 ```

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

@@ -1103,17 +1103,6 @@ Sets the query of the module.
 Sets the request status. Can be used as a mutation.
 
 
-</td></tr>
-<tr><td>
-
-[setupDevtools(app)](./x-components.setupdevtools.md)
-
-
-</td><td>
-
-**_(BETA)_** Setups a plugin for the Vue's devtools adding: - [XEvent](./x-components.xevent.md)<!-- -->s timeline. Every event is recorded in time, and its payload and metadata can be inspected. - Wiring inspector. Events and its wires can be viewed and disabled.
-
-
 </td></tr>
 <tr><td>
 
@@ -8393,6 +8382,17 @@ A normalised version of the snippet config.
 Alias type representing a comparator function between two numbers.
 
 
+</td></tr>
+<tr><td>
+
+[PageMode](./x-components.pagemode.md)
+
+
+</td><td>
+
+Indicates whether the results will be loaded using infinite scroll or a page selector.
+
+
 </td></tr>
 <tr><td>
 

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

@@ -0,0 +1,13 @@
+<!-- Do not edit this file. It is automatically generated by API Documenter. -->
+
+[Home](./index.md) &gt; [@empathyco/x-components](./x-components.md) &gt; [PageMode](./x-components.pagemode.md)
+
+## PageMode type
+
+Indicates whether the results will be loaded using infinite scroll or a page selector.
+
+**Signature:**
+
+```typescript
+export type PageMode = 'infinite_scroll' | 'pagination';
+```

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

@@ -45,7 +45,7 @@ Description
 
 </td><td>
 
-PageMode
+[PageMode](./x-components.pagemode.md)
 
 
 </td><td>

package/empathize/index.d.ts

@@ -1 +1 @@
-export * from '../types/x-modules/empathize';
+export * from '../types/src/x-modules/empathize';

package/experience-controls/index.d.ts

@@ -1 +1 @@
-export * from '../types/x-modules/experience-controls';
+export * from '../types/src/x-modules/experience-controls';

package/extra-params/index.d.ts

@@ -1 +1 @@
-export * from '../types/x-modules/extra-params';
+export * from '../types/src/x-modules/extra-params';

package/facets/index.d.ts

@@ -1 +1 @@
-export * from '../types/x-modules/facets';
+export * from '../types/src/x-modules/facets';

package/history-queries/index.d.ts

@@ -1 +1 @@
-export * from '../types/x-modules/history-queries';
+export * from '../types/src/x-modules/history-queries';

package/identifier-results/index.d.ts

@@ -1 +1 @@
-export * from '../types/x-modules/identifier-results';
+export * from '../types/src/x-modules/identifier-results';

package/js/components/base-keyboard-navigation.vue2.js

@@ -1,13 +1,8 @@
 import { defineComponent, ref, computed, onMounted } from 'vue';
 import '../composables/create-use-device.js';
 import 'vuex';
-import '@vue/devtools-api';
-import '../plugins/devtools/timeline.devtools.js';
-import '@empathyco/x-utils';
-import 'rxjs/operators';
-import 'rxjs';
-import '../plugins/devtools/colors.utils.js';
 import '../plugins/x-bus.js';
+import '@empathyco/x-utils';
 import '../plugins/x-plugin.js';
 import { useXBus } from '../composables/use-x-bus.js';
 import '@vueuse/core';

package/js/components/base-keyboard-navigation.vue2.js.map

@@ -1 +1 @@
-{"version":3,"file":"base-keyboard-navigation.vue2.js","sources":["../../../src/components/base-keyboard-navigation.vue"],"sourcesContent":["<template>\n  <div\n    ref=\"el\"\n    class=\"x-keyboard-navigation\"\n    data-test=\"keyboard-navigation\"\n    @keydown.up.down.right.left.prevent=\"focusNextNavigableElement\"\n  >\n    <!-- @slot (Required) Container content -->\n    <slot />\n  </div>\n</template>\n\n<script lang=\"ts\">\nimport type { PropType } from 'vue'\nimport type { SpatialNavigation } from '../services/services.types'\n\nimport type { ArrowKey, EventsForDirectionLimit, TakeNavigationControl } from '../utils/types'\nimport type { XEventsOf } from '../wiring/events.types'\nimport type { WireMetadata } from '../wiring/wiring.types'\nimport { computed, defineComponent, onMounted, ref } from 'vue'\nimport { useXBus } from '../composables'\nimport { DirectionalFocusNavigationService } from '../services/directional-focus-navigation.service'\n\n/**\n * Base component to handle keyboard navigation for elements inside it. It has a required slot to\n * include the navigable elements.\n *\n * @remarks\n * The component can be customized through props: an array of navigationHijacker objects, which\n * contains: the xEvent to listen to, the moduleName in charge of emitting the event and to which\n * direction it should react to; to take control of the navigation and eventsForDirectionLimit, to\n * emit an xEvent when reaching the navigation limit in any direction.\n *\n * @public\n */\nexport default defineComponent({\n  name: 'BaseKeyboardNavigation',\n  props: {\n    /**\n     * An array of {@link TakeNavigationControl} objects defining when to\n     * take control of the keyboard navigation.\n     */\n    navigationHijacker: {\n      type: Array as PropType<TakeNavigationControl[]>,\n      default: () => [\n        { xEvent: 'UserPressedArrowKey', moduleName: 'searchBox', direction: 'ArrowDown' },\n      ],\n    },\n    /**\n     * An {@link EventsForDirectionLimit} to emit when the user is already at the furthest element\n     * in a direction and tries to keep going on the same direction.\n     */\n    eventsForDirectionLimit: {\n      type: Object as PropType<Partial<EventsForDirectionLimit>>,\n      default: () => ({ ArrowUp: 'UserReachedEmpathizeTop' }),\n    },\n  },\n  setup(props) {\n    const el = ref<HTMLElement>()\n    const xBus = useXBus()\n\n    /**\n     * The {@link SpatialNavigation} service to use.\n     */\n    let navigationService!: SpatialNavigation\n\n    /**\n     * The element to focus.\n     */\n    let elementToFocus: HTMLElement | undefined\n\n    /**\n     * Get the navigation hijacker events.\n     *\n     * @remarks\n     * If the same {@link XEvent} is defined multiple times it is only inserted once.\n     *\n     * @returns The events to hijack the navigation.\n     */\n    const navigationHijackerEvents = computed((): XEventsOf<ArrowKey>[] => {\n      const eventsSet = props.navigationHijacker.map(({ xEvent }) => xEvent)\n      return Array.from(new Set(eventsSet))\n    })\n\n    onMounted(() => {\n      // TODO Replace this with injection\n      navigationService = new DirectionalFocusNavigationService(el.value!)\n    })\n\n    /**\n     * Checks if the component has to take control of the keyboard navigation.\n     *\n     * @param eventPayload - The {@link ArrowKey}.\n     * @param metadata - The {@link WireMetadata}.\n     *\n     * @returns Whether the component needs to take control of the keyboard navigation or not.\n     * @internal\n     */\n    function hasToTakeNavigationControl(eventPayload: ArrowKey, metadata: WireMetadata): boolean {\n      return props.navigationHijacker.some(\n        ({ moduleName, direction }) =>\n          moduleName === metadata.moduleName && direction === eventPayload,\n      )\n    }\n\n    /**\n     * Focus the next navigable element returned by the navigation service.\n     *\n     * @param direction - The navigation direction.\n     * @internal\n     */\n    function focusNextNavigableElement(direction: ArrowKey | KeyboardEvent): void {\n      const dir = typeof direction === 'object' ? (direction.key as ArrowKey) : direction\n      const nextElementToFocus = navigationService?.navigateTo(dir)\n\n      if (elementToFocus !== nextElementToFocus) {\n        elementToFocus = nextElementToFocus\n        elementToFocus.focus()\n      } else {\n        emitDirectionalLimitReached(dir)\n        elementToFocus = undefined\n      }\n    }\n\n    /**\n     * Emit the {@link XEvent} associated to the navigation's direction when reaching its limit.\n     *\n     * @param direction - The navigation direction.\n     * @internal\n     */\n    function emitDirectionalLimitReached(direction: ArrowKey): void {\n      const xEvent = props.eventsForDirectionLimit?.[direction]\n      if (xEvent) {\n        xBus.emit(xEvent, undefined, { target: elementToFocus })\n      }\n    }\n\n    /**\n     * Trigger navigation if this component is in control of it.\n     *\n     * @param eventPayload - The {@link @empathyco/x-bus#SubjectPayload.eventPayload}.\n     * @param metadata - The {@link @empathyco/x-bus#SubjectPayload.metadata}.\n     * @public\n     */\n    navigationHijackerEvents.value.forEach(event => {\n      xBus.on(event, true).subscribe(({ eventPayload, metadata }) => {\n        if (hasToTakeNavigationControl(eventPayload, metadata)) {\n          focusNextNavigableElement(eventPayload)\n        }\n      })\n    })\n\n    return { el, focusNextNavigableElement }\n  },\n})\n</script>\n\n<docs lang=\"mdx\">\n## Events\n\nAn event that the component will emit:\n\n- [`UserReachedEmpathizeTop`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts):\n  the event emitted by default when the container reaches its top navigation, but more events can be\n  emitted for each direction using the `eventsForDirectionLimit` prop.\n\n## Examples\n\nThis component has a slot to inject other components inside it. The component expects a required\nprop, navigationHijacker, which is an array of objects containing: the xEvent to listen to, the\nmoduleName in charge of emitting the event and to which direction it should react to; to take\ncontrol of the navigation. It has another prop, optional in this case, to emit an xEvent when\nreaching the navigation limit in any direction.\n\n### Basic Usage\n\n```vue\n<template>\n  <BaseKeyboardNavigation>\n    <QuerySuggestions />\n  </BaseKeyboardNavigation>\n</template>\n\n<script setup>\nimport { BaseKeyboardNavigation } from '@empathyco/x-components'\nimport QuerySuggestions from './QuerySuggestions.vue'\n</script>\n```\n\n### Defining multiple conditions to take navigation's control\n\n```vue\n<template>\n  <BaseKeyboardNavigation\n    :navigationHijacker=\"[\n      {\n        xEvent: 'UserPressedArrowKey',\n        moduleName: 'searchBox',\n        direction: 'ArrowDown',\n      },\n      {\n        xEvent: 'UserPressedArrowKey',\n        moduleName: 'facets',\n        direction: 'ArrowRight',\n      },\n    ]\"\n  >\n    <QuerySuggestions />\n  </BaseKeyboardNavigation>\n</template>\n\n<script setup>\nimport { BaseKeyboardNavigation } from '@empathyco/x-components'\nimport QuerySuggestions from './QuerySuggestions.vue'\n</script>\n```\n\n### Defining events to emit when reaching a navigation limit\n\n```vue\n<template>\n  <BaseKeyboardNavigation\n    :navigationHijacker=\"[\n      {\n        xEvent: 'UserPressedArrowKey',\n        moduleName: 'searchBox',\n        direction: 'ArrowDown',\n      },\n    ]\"\n    :eventsForDirectionLimit=\"{\n      ArrowUp: 'UserReachedEmpathizeTop',\n    }\"\n  >\n    <QuerySuggestions />\n  </BaseKeyboardNavigation>\n</template>\n\n<script setup>\nimport { BaseKeyboardNavigation } from '@empathyco/x-components'\nimport QuerySuggestions from './QuerySuggestions.vue'\n</script>\n```\n</docs>\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"base-keyboard-navigation.vue2.js","sources":["../../../src/components/base-keyboard-navigation.vue"],"sourcesContent":["<template>\n  <div\n    ref=\"el\"\n    class=\"x-keyboard-navigation\"\n    data-test=\"keyboard-navigation\"\n    @keydown.up.down.right.left.prevent=\"focusNextNavigableElement\"\n  >\n    <!-- @slot (Required) Container content -->\n    <slot />\n  </div>\n</template>\n\n<script lang=\"ts\">\nimport type { PropType } from 'vue'\nimport type { SpatialNavigation } from '../services/services.types'\n\nimport type { ArrowKey, EventsForDirectionLimit, TakeNavigationControl } from '../utils/types'\nimport type { XEventsOf } from '../wiring/events.types'\nimport type { WireMetadata } from '../wiring/wiring.types'\nimport { computed, defineComponent, onMounted, ref } from 'vue'\nimport { useXBus } from '../composables'\nimport { DirectionalFocusNavigationService } from '../services/directional-focus-navigation.service'\n\n/**\n * Base component to handle keyboard navigation for elements inside it. It has a required slot to\n * include the navigable elements.\n *\n * @remarks\n * The component can be customized through props: an array of navigationHijacker objects, which\n * contains: the xEvent to listen to, the moduleName in charge of emitting the event and to which\n * direction it should react to; to take control of the navigation and eventsForDirectionLimit, to\n * emit an xEvent when reaching the navigation limit in any direction.\n *\n * @public\n */\nexport default defineComponent({\n  name: 'BaseKeyboardNavigation',\n  props: {\n    /**\n     * An array of {@link TakeNavigationControl} objects defining when to\n     * take control of the keyboard navigation.\n     */\n    navigationHijacker: {\n      type: Array as PropType<TakeNavigationControl[]>,\n      default: () => [\n        { xEvent: 'UserPressedArrowKey', moduleName: 'searchBox', direction: 'ArrowDown' },\n      ],\n    },\n    /**\n     * An {@link EventsForDirectionLimit} to emit when the user is already at the furthest element\n     * in a direction and tries to keep going on the same direction.\n     */\n    eventsForDirectionLimit: {\n      type: Object as PropType<Partial<EventsForDirectionLimit>>,\n      default: () => ({ ArrowUp: 'UserReachedEmpathizeTop' }),\n    },\n  },\n  setup(props) {\n    const el = ref<HTMLElement>()\n    const xBus = useXBus()\n\n    /**\n     * The {@link SpatialNavigation} service to use.\n     */\n    let navigationService!: SpatialNavigation\n\n    /**\n     * The element to focus.\n     */\n    let elementToFocus: HTMLElement | undefined\n\n    /**\n     * Get the navigation hijacker events.\n     *\n     * @remarks\n     * If the same {@link XEvent} is defined multiple times it is only inserted once.\n     *\n     * @returns The events to hijack the navigation.\n     */\n    const navigationHijackerEvents = computed((): XEventsOf<ArrowKey>[] => {\n      const eventsSet = props.navigationHijacker.map(({ xEvent }) => xEvent)\n      return Array.from(new Set(eventsSet))\n    })\n\n    onMounted(() => {\n      // TODO Replace this with injection\n      navigationService = new DirectionalFocusNavigationService(el.value!)\n    })\n\n    /**\n     * Checks if the component has to take control of the keyboard navigation.\n     *\n     * @param eventPayload - The {@link ArrowKey}.\n     * @param metadata - The {@link WireMetadata}.\n     *\n     * @returns Whether the component needs to take control of the keyboard navigation or not.\n     * @internal\n     */\n    function hasToTakeNavigationControl(eventPayload: ArrowKey, metadata: WireMetadata): boolean {\n      return props.navigationHijacker.some(\n        ({ moduleName, direction }) =>\n          moduleName === metadata.moduleName && direction === eventPayload,\n      )\n    }\n\n    /**\n     * Focus the next navigable element returned by the navigation service.\n     *\n     * @param direction - The navigation direction.\n     * @internal\n     */\n    function focusNextNavigableElement(direction: ArrowKey | KeyboardEvent): void {\n      const dir = typeof direction === 'object' ? (direction.key as ArrowKey) : direction\n      const nextElementToFocus = navigationService?.navigateTo(dir)\n\n      if (elementToFocus !== nextElementToFocus) {\n        elementToFocus = nextElementToFocus\n        elementToFocus.focus()\n      } else {\n        emitDirectionalLimitReached(dir)\n        elementToFocus = undefined\n      }\n    }\n\n    /**\n     * Emit the {@link XEvent} associated to the navigation's direction when reaching its limit.\n     *\n     * @param direction - The navigation direction.\n     * @internal\n     */\n    function emitDirectionalLimitReached(direction: ArrowKey): void {\n      const xEvent = props.eventsForDirectionLimit?.[direction]\n      if (xEvent) {\n        xBus.emit(xEvent, undefined, { target: elementToFocus })\n      }\n    }\n\n    /**\n     * Trigger navigation if this component is in control of it.\n     *\n     * @param eventPayload - The {@link @empathyco/x-bus#SubjectPayload.eventPayload}.\n     * @param metadata - The {@link @empathyco/x-bus#SubjectPayload.metadata}.\n     * @public\n     */\n    navigationHijackerEvents.value.forEach(event => {\n      xBus.on(event, true).subscribe(({ eventPayload, metadata }) => {\n        if (hasToTakeNavigationControl(eventPayload, metadata)) {\n          focusNextNavigableElement(eventPayload)\n        }\n      })\n    })\n\n    return { el, focusNextNavigableElement }\n  },\n})\n</script>\n\n<docs lang=\"mdx\">\n## Events\n\nAn event that the component will emit:\n\n- [`UserReachedEmpathizeTop`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts):\n  the event emitted by default when the container reaches its top navigation, but more events can be\n  emitted for each direction using the `eventsForDirectionLimit` prop.\n\n## Examples\n\nThis component has a slot to inject other components inside it. The component expects a required\nprop, navigationHijacker, which is an array of objects containing: the xEvent to listen to, the\nmoduleName in charge of emitting the event and to which direction it should react to; to take\ncontrol of the navigation. It has another prop, optional in this case, to emit an xEvent when\nreaching the navigation limit in any direction.\n\n### Basic Usage\n\n```vue\n<template>\n  <BaseKeyboardNavigation>\n    <QuerySuggestions />\n  </BaseKeyboardNavigation>\n</template>\n\n<script setup>\nimport { BaseKeyboardNavigation } from '@empathyco/x-components'\nimport QuerySuggestions from './QuerySuggestions.vue'\n</script>\n```\n\n### Defining multiple conditions to take navigation's control\n\n```vue\n<template>\n  <BaseKeyboardNavigation\n    :navigationHijacker=\"[\n      {\n        xEvent: 'UserPressedArrowKey',\n        moduleName: 'searchBox',\n        direction: 'ArrowDown',\n      },\n      {\n        xEvent: 'UserPressedArrowKey',\n        moduleName: 'facets',\n        direction: 'ArrowRight',\n      },\n    ]\"\n  >\n    <QuerySuggestions />\n  </BaseKeyboardNavigation>\n</template>\n\n<script setup>\nimport { BaseKeyboardNavigation } from '@empathyco/x-components'\nimport QuerySuggestions from './QuerySuggestions.vue'\n</script>\n```\n\n### Defining events to emit when reaching a navigation limit\n\n```vue\n<template>\n  <BaseKeyboardNavigation\n    :navigationHijacker=\"[\n      {\n        xEvent: 'UserPressedArrowKey',\n        moduleName: 'searchBox',\n        direction: 'ArrowDown',\n      },\n    ]\"\n    :eventsForDirectionLimit=\"{\n      ArrowUp: 'UserReachedEmpathizeTop',\n    }\"\n  >\n    <QuerySuggestions />\n  </BaseKeyboardNavigation>\n</template>\n\n<script setup>\nimport { BaseKeyboardNavigation } from '@empathyco/x-components'\nimport QuerySuggestions from './QuerySuggestions.vue'\n</script>\n```\n</docs>\n"],"names":[],"mappings":"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"}

package/js/components/display-click-provider.vue.js

@@ -2,15 +2,11 @@ import { defineComponent, computed, provide } from 'vue';
 import '../composables/create-use-device.js';
 import { use$x } from '../composables/use-_x.js';
 import 'vuex';
-import '@vue/devtools-api';
-import '../plugins/devtools/timeline.devtools.js';
-import '@empathyco/x-utils';
-import 'rxjs/operators';
-import 'rxjs';
-import '../plugins/devtools/colors.utils.js';
 import '../plugins/x-bus.js';
+import '@empathyco/x-utils';
 import '../plugins/x-plugin.js';
 import '@vueuse/core';
+import 'rxjs';
 
 var _sfc_main = defineComponent({
     name: 'DisplayClickProvider',

package/js/components/display-click-provider.vue.js.map

@@ -1 +1 @@
-{"version":3,"file":"display-click-provider.vue.js","sources":["../../../src/components/display-click-provider.vue"],"sourcesContent":["<script lang=\"ts\">\nimport type { TaggingRequest } from '@empathyco/x-types'\nimport type { PropType } from 'vue'\n\nimport type { ResultFeature } from '../types/index'\nimport type { DisplayWireMetadata } from '../wiring/index'\nimport { computed, defineComponent, provide } from 'vue'\nimport { use$x } from '../composables/index'\n\nexport default defineComponent({\n  name: 'DisplayClickProvider',\n  props: {\n    resultFeature: {\n      type: String as PropType<ResultFeature>,\n      required: true,\n    },\n    ignoreResultClickEvent: {\n      type: Boolean,\n      default: false,\n    },\n    toolingDisplayTagging: {\n      type: Object as PropType<TaggingRequest>,\n      required: false,\n      default: undefined,\n    },\n    toolingAdd2CartTagging: {\n      type: Object as PropType<TaggingRequest>,\n      required: false,\n      default: undefined,\n    },\n    queryTagging: {\n      type: Object as PropType<TaggingRequest>,\n      required: false,\n      default: undefined,\n    },\n  },\n  setup(props, { slots }) {\n    const x = use$x()\n\n    const displayClickMetadata = computed<Partial<DisplayWireMetadata>>(() => ({\n      displayOriginalQuery: x.query.search,\n      feature: props.resultFeature,\n      queryTagging: props.queryTagging,\n      toolingTagging: props.toolingDisplayTagging,\n      toolingAdd2CartTagging: props.toolingAdd2CartTagging,\n    }))\n\n    const resultAddToCartExtraEventsMap: Partial<Record<ResultFeature, string>> = {\n      related_prompts: 'UserClickedARelatedPromptAdd2Cart',\n      overview: 'UserClickedAnAiOverviewAdd2Cart',\n    }\n\n    const resultClickExtraEventsMap: Partial<Record<ResultFeature, string>> = {\n      related_prompts: 'UserClickedARelatedPromptResult',\n      overview: 'UserClickedAnAiOverviewResult',\n    }\n\n    provide('resultAddToCartExtraEvents', [resultAddToCartExtraEventsMap[props.resultFeature]])\n    provide('resultAddToCartExtraEventsMetadata', {\n      toolingAdd2CartTagging: props.toolingAdd2CartTagging,\n    })\n\n    provide('resultClickExtraEvents', [\n      resultClickExtraEventsMap[props.resultFeature],\n      'UserClickedADisplayResult',\n    ])\n    provide('resultLinkMetadataPerEvent', {\n      UserClickedARelatedPromptResult: displayClickMetadata.value,\n      UserClickedAnAiOverviewResult: displayClickMetadata.value,\n      UserClickedADisplayResult: displayClickMetadata.value,\n      ...(props.ignoreResultClickEvent && {\n        UserClickedAResult: {\n          ignoreInModules: ['tagging'],\n        },\n      }),\n    })\n\n    return () => slots.default?.()[0] ?? ''\n  },\n})\n</script>\n\n<docs lang=\"mdx\">\n## Usage\n\nThe `DisplayClickProvider` component is used to provide context and event metadata for display result clicks and add-to-cart actions. It should wrap the content that needs to access these events and metadata via Vue's provide/inject mechanism.\n\n### Basic example\n\n```vue\n<template>\n  <DisplayClickProvider :resultFeature=\"'overview'\">\n    <ResultCard :result=\"result\" />\n  </DisplayClickProvider>\n</template>\n\n<script setup>\nimport { DisplayClickProvider } from '@empathyco/x-components'\nimport ResultCard from './ResultCard.vue'\nconst result = {\n  /* ...result data... */\n}\n</script>\n```\n\n### With tagging and ignoring result click event\n\n```vue\n<template>\n  <DisplayClickProvider\n    :resultFeature=\"'related_prompts'\"\n    :toolingDisplayTagging=\"displayTagging\"\n    :toolingAdd2CartTagging=\"add2CartTagging\"\n    :queryTagging=\"queryTagging\"\n    :ignoreResultClickEvent=\"true\"\n  >\n    <ResultCard :result=\"result\" />\n  </DisplayClickProvider>\n</template>\n\n<script setup>\nimport { DisplayClickProvider } from '@empathyco/x-components'\nimport ResultCard from './ResultCard.vue'\nconst result = {\n  /* ...result data... */\n}\nconst displayTagging = {\n  /* ...tagging data... */\n}\nconst add2CartTagging = {\n  /* ...tagging data... */\n}\nconst queryTagging = {\n  /* ...tagging data... */\n}\n</script>\n```\n\n### Notes\n\n- The component uses Vue 3's provide/inject API and is intended for use in Vue 3 projects.\n- All props are reactive and can be updated dynamically.\n- The default slot is required and should contain the content that will use the provided context.\n</docs>\n"],"names":[],"mappings":";;;;;;;;;;;;;;AASA,gBAAe,eAAe,CAAC;AAC7B,IAAA,IAAI,EAAE,sBAAsB;AAC5B,IAAA,KAAK,EAAE;AACL,QAAA,aAAa,EAAE;AACb,YAAA,IAAI,EAAE,MAAiC;AACvC,YAAA,QAAQ,EAAE,IAAI;AACf,SAAA;AACD,QAAA,sBAAsB,EAAE;AACtB,YAAA,IAAI,EAAE,OAAO;AACb,YAAA,OAAO,EAAE,KAAK;AACf,SAAA;AACD,QAAA,qBAAqB,EAAE;AACrB,YAAA,IAAI,EAAE,MAAkC;AACxC,YAAA,QAAQ,EAAE,KAAK;AACf,YAAA,OAAO,EAAE,SAAS;AACnB,SAAA;AACD,QAAA,sBAAsB,EAAE;AACtB,YAAA,IAAI,EAAE,MAAkC;AACxC,YAAA,QAAQ,EAAE,KAAK;AACf,YAAA,OAAO,EAAE,SAAS;AACnB,SAAA;AACD,QAAA,YAAY,EAAE;AACZ,YAAA,IAAI,EAAE,MAAkC;AACxC,YAAA,QAAQ,EAAE,KAAK;AACf,YAAA,OAAO,EAAE,SAAS;AACnB,SAAA;AACF,KAAA;AACD,IAAA,KAAK,CAAC,KAAK,EAAE,EAAE,KAAI,EAAG,EAAA;AACpB,QAAA,MAAM,CAAA,GAAI,KAAK,EAAC;AAEhB,QAAA,MAAM,oBAAmB,GAAI,QAAQ,CAA+B,OAAO;AACzE,YAAA,oBAAoB,EAAE,CAAC,CAAC,KAAK,CAAC,MAAM;YACpC,OAAO,EAAE,KAAK,CAAC,aAAa;YAC5B,YAAY,EAAE,KAAK,CAAC,YAAY;YAChC,cAAc,EAAE,KAAK,CAAC,qBAAqB;YAC3C,sBAAsB,EAAE,KAAK,CAAC,sBAAsB;AACrD,SAAA,CAAC,CAAA;AAEF,QAAA,MAAM,6BAA6B,GAA2C;AAC5E,YAAA,eAAe,EAAE,mCAAmC;AACpD,YAAA,QAAQ,EAAE,iCAAiC;SAC7C;AAEA,QAAA,MAAM,yBAAyB,GAA2C;AACxE,YAAA,eAAe,EAAE,iCAAiC;AAClD,YAAA,QAAQ,EAAE,+BAA+B;SAC3C;AAEA,QAAA,OAAO,CAAC,4BAA4B,EAAE,CAAC,6BAA6B,CAAC,KAAK,CAAC,aAAa,CAAC,CAAC,CAAA;QAC1F,OAAO,CAAC,oCAAoC,EAAE;YAC5C,sBAAsB,EAAE,KAAK,CAAC,sBAAsB;AACrD,SAAA,CAAA;QAED,OAAO,CAAC,wBAAwB,EAAE;AAChC,YAAA,yBAAyB,CAAC,KAAK,CAAC,aAAa,CAAC;YAC9C,2BAA2B;AAC5B,SAAA,CAAA;QACD,OAAO,CAAC,4BAA4B,EAAE;YACpC,+BAA+B,EAAE,oBAAoB,CAAC,KAAK;YAC3D,6BAA6B,EAAE,oBAAoB,CAAC,KAAK;YACzD,yBAAyB,EAAE,oBAAoB,CAAC,KAAK;AACrD,YAAA,IAAI,KAAK,CAAC,sBAAqB,IAAK;AAClC,gBAAA,kBAAkB,EAAE;oBAClB,eAAe,EAAE,CAAC,SAAS,CAAC;AAC7B,iBAAA;aACF,CAAC;AACH,SAAA,CAAA;AAED,QAAA,OAAO,MAAM,KAAK,CAAC,OAAO,IAAI,CAAC,CAAC,CAAA,IAAK,EAAC;IACxC,CAAC;AACF,CAAA,CAAA;;;;"}
+{"version":3,"file":"display-click-provider.vue.js","sources":["../../../src/components/display-click-provider.vue"],"sourcesContent":["<script lang=\"ts\">\nimport type { TaggingRequest } from '@empathyco/x-types'\nimport type { PropType } from 'vue'\n\nimport type { ResultFeature } from '../types/index'\nimport type { DisplayWireMetadata } from '../wiring/index'\nimport { computed, defineComponent, provide } from 'vue'\nimport { use$x } from '../composables/index'\n\nexport default defineComponent({\n  name: 'DisplayClickProvider',\n  props: {\n    resultFeature: {\n      type: String as PropType<ResultFeature>,\n      required: true,\n    },\n    ignoreResultClickEvent: {\n      type: Boolean,\n      default: false,\n    },\n    toolingDisplayTagging: {\n      type: Object as PropType<TaggingRequest>,\n      required: false,\n      default: undefined,\n    },\n    toolingAdd2CartTagging: {\n      type: Object as PropType<TaggingRequest>,\n      required: false,\n      default: undefined,\n    },\n    queryTagging: {\n      type: Object as PropType<TaggingRequest>,\n      required: false,\n      default: undefined,\n    },\n  },\n  setup(props, { slots }) {\n    const x = use$x()\n\n    const displayClickMetadata = computed<Partial<DisplayWireMetadata>>(() => ({\n      displayOriginalQuery: x.query.search,\n      feature: props.resultFeature,\n      queryTagging: props.queryTagging,\n      toolingTagging: props.toolingDisplayTagging,\n      toolingAdd2CartTagging: props.toolingAdd2CartTagging,\n    }))\n\n    const resultAddToCartExtraEventsMap: Partial<Record<ResultFeature, string>> = {\n      related_prompts: 'UserClickedARelatedPromptAdd2Cart',\n      overview: 'UserClickedAnAiOverviewAdd2Cart',\n    }\n\n    const resultClickExtraEventsMap: Partial<Record<ResultFeature, string>> = {\n      related_prompts: 'UserClickedARelatedPromptResult',\n      overview: 'UserClickedAnAiOverviewResult',\n    }\n\n    provide('resultAddToCartExtraEvents', [resultAddToCartExtraEventsMap[props.resultFeature]])\n    provide('resultAddToCartExtraEventsMetadata', {\n      toolingAdd2CartTagging: props.toolingAdd2CartTagging,\n    })\n\n    provide('resultClickExtraEvents', [\n      resultClickExtraEventsMap[props.resultFeature],\n      'UserClickedADisplayResult',\n    ])\n    provide('resultLinkMetadataPerEvent', {\n      UserClickedARelatedPromptResult: displayClickMetadata.value,\n      UserClickedAnAiOverviewResult: displayClickMetadata.value,\n      UserClickedADisplayResult: displayClickMetadata.value,\n      ...(props.ignoreResultClickEvent && {\n        UserClickedAResult: {\n          ignoreInModules: ['tagging'],\n        },\n      }),\n    })\n\n    return () => slots.default?.()[0] ?? ''\n  },\n})\n</script>\n\n<docs lang=\"mdx\">\n## Usage\n\nThe `DisplayClickProvider` component is used to provide context and event metadata for display result clicks and add-to-cart actions. It should wrap the content that needs to access these events and metadata via Vue's provide/inject mechanism.\n\n### Basic example\n\n```vue\n<template>\n  <DisplayClickProvider :resultFeature=\"'overview'\">\n    <ResultCard :result=\"result\" />\n  </DisplayClickProvider>\n</template>\n\n<script setup>\nimport { DisplayClickProvider } from '@empathyco/x-components'\nimport ResultCard from './ResultCard.vue'\nconst result = {\n  /* ...result data... */\n}\n</script>\n```\n\n### With tagging and ignoring result click event\n\n```vue\n<template>\n  <DisplayClickProvider\n    :resultFeature=\"'related_prompts'\"\n    :toolingDisplayTagging=\"displayTagging\"\n    :toolingAdd2CartTagging=\"add2CartTagging\"\n    :queryTagging=\"queryTagging\"\n    :ignoreResultClickEvent=\"true\"\n  >\n    <ResultCard :result=\"result\" />\n  </DisplayClickProvider>\n</template>\n\n<script setup>\nimport { DisplayClickProvider } from '@empathyco/x-components'\nimport ResultCard from './ResultCard.vue'\nconst result = {\n  /* ...result data... */\n}\nconst displayTagging = {\n  /* ...tagging data... */\n}\nconst add2CartTagging = {\n  /* ...tagging data... */\n}\nconst queryTagging = {\n  /* ...tagging data... */\n}\n</script>\n```\n\n### Notes\n\n- The component uses Vue 3's provide/inject API and is intended for use in Vue 3 projects.\n- All props are reactive and can be updated dynamically.\n- The default slot is required and should contain the content that will use the provided context.\n</docs>\n"],"names":[],"mappings":";;;;;;;;;;AASA,gBAAe,eAAe,CAAC;AAC7B,IAAA,IAAI,EAAE,sBAAsB;AAC5B,IAAA,KAAK,EAAE;AACL,QAAA,aAAa,EAAE;AACb,YAAA,IAAI,EAAE,MAAiC;AACvC,YAAA,QAAQ,EAAE,IAAI;AACf,SAAA;AACD,QAAA,sBAAsB,EAAE;AACtB,YAAA,IAAI,EAAE,OAAO;AACb,YAAA,OAAO,EAAE,KAAK;AACf,SAAA;AACD,QAAA,qBAAqB,EAAE;AACrB,YAAA,IAAI,EAAE,MAAkC;AACxC,YAAA,QAAQ,EAAE,KAAK;AACf,YAAA,OAAO,EAAE,SAAS;AACnB,SAAA;AACD,QAAA,sBAAsB,EAAE;AACtB,YAAA,IAAI,EAAE,MAAkC;AACxC,YAAA,QAAQ,EAAE,KAAK;AACf,YAAA,OAAO,EAAE,SAAS;AACnB,SAAA;AACD,QAAA,YAAY,EAAE;AACZ,YAAA,IAAI,EAAE,MAAkC;AACxC,YAAA,QAAQ,EAAE,KAAK;AACf,YAAA,OAAO,EAAE,SAAS;AACnB,SAAA;AACF,KAAA;AACD,IAAA,KAAK,CAAC,KAAK,EAAE,EAAE,KAAI,EAAG,EAAA;AACpB,QAAA,MAAM,CAAA,GAAI,KAAK,EAAC;AAEhB,QAAA,MAAM,oBAAmB,GAAI,QAAQ,CAA+B,OAAO;AACzE,YAAA,oBAAoB,EAAE,CAAC,CAAC,KAAK,CAAC,MAAM;YACpC,OAAO,EAAE,KAAK,CAAC,aAAa;YAC5B,YAAY,EAAE,KAAK,CAAC,YAAY;YAChC,cAAc,EAAE,KAAK,CAAC,qBAAqB;YAC3C,sBAAsB,EAAE,KAAK,CAAC,sBAAsB;AACrD,SAAA,CAAC,CAAA;AAEF,QAAA,MAAM,6BAA6B,GAA2C;AAC5E,YAAA,eAAe,EAAE,mCAAmC;AACpD,YAAA,QAAQ,EAAE,iCAAiC;SAC7C;AAEA,QAAA,MAAM,yBAAyB,GAA2C;AACxE,YAAA,eAAe,EAAE,iCAAiC;AAClD,YAAA,QAAQ,EAAE,+BAA+B;SAC3C;AAEA,QAAA,OAAO,CAAC,4BAA4B,EAAE,CAAC,6BAA6B,CAAC,KAAK,CAAC,aAAa,CAAC,CAAC,CAAA;QAC1F,OAAO,CAAC,oCAAoC,EAAE;YAC5C,sBAAsB,EAAE,KAAK,CAAC,sBAAsB;AACrD,SAAA,CAAA;QAED,OAAO,CAAC,wBAAwB,EAAE;AAChC,YAAA,yBAAyB,CAAC,KAAK,CAAC,aAAa,CAAC;YAC9C,2BAA2B;AAC5B,SAAA,CAAA;QACD,OAAO,CAAC,4BAA4B,EAAE;YACpC,+BAA+B,EAAE,oBAAoB,CAAC,KAAK;YAC3D,6BAA6B,EAAE,oBAAoB,CAAC,KAAK;YACzD,yBAAyB,EAAE,oBAAoB,CAAC,KAAK;AACrD,YAAA,IAAI,KAAK,CAAC,sBAAqB,IAAK;AAClC,gBAAA,kBAAkB,EAAE;oBAClB,eAAe,EAAE,CAAC,SAAS,CAAC;AAC7B,iBAAA;aACF,CAAC;AACH,SAAA,CAAA;AAED,QAAA,OAAO,MAAM,KAAK,CAAC,OAAO,IAAI,CAAC,CAAC,CAAA,IAAK,EAAC;IACxC,CAAC;AACF,CAAA,CAAA;;;;"}

package/js/components/layouts/fixed-header-and-asides-layout.vue.js.map

@@ -1 +1 @@
-{"version":3,"file":"fixed-header-and-asides-layout.vue.js","sources":["../../../../src/components/layouts/fixed-header-and-asides-layout.vue"],"sourcesContent":["<template>\n  <MainScroll>\n    <Scroll\n      id=\"main-scroll\"\n      class=\"x-layout x-layout--fixed-header-and-asides\"\n      :class=\"{ 'dev-mode': devMode }\"\n      @scroll=\"setPosition\"\n    >\n      <div\n        key=\"header-backdrop\"\n        class=\"x-layout__header-backdrop\"\n        :class=\"{ 'x-layout__header-backdrop--is-visible': isBackdropVisible }\"\n      />\n\n      <header\n        v-if=\"devMode || $slots.header\"\n        key=\"header\"\n        class=\"x-layout__header x-list x-list--horizontal\"\n      >\n        <!-- @slot Slot that is be used for 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 v-if=\"devMode || $slots['sub-header']\" key=\"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 v-if=\"devMode || $slots.toolbar\" key=\"toolbar\" class=\"x-layout__toolbar\">\n        <slot name=\"toolbar\">\n          <!-- @slot Slot that can be used to insert content above the main. -->\n          <span v-if=\"devMode\" class=\"slot-helper\">TOOLBAR</span>\n        </slot>\n      </section>\n\n      <main v-if=\"devMode || $slots.main\" key=\"main\" class=\"x-layout__main x-list x-list--vertical\">\n        <!-- @slot Slot that is be used for insert content into the Main. -->\n        <slot name=\"main\">\n          <span v-if=\"devMode\" class=\"slot-helper\">MAIN</span>\n        </slot>\n      </main>\n\n      <BaseIdModal\n        v-if=\"devMode || $slots['left-aside']\"\n        key=\"left-aside\"\n        :animation=\"leftAsideAnimation\"\n        modal-id=\"left-aside\"\n        class=\"x-layout__aside x-layout__aside--left\"\n      >\n        <!-- @slot Slot that is be used for insert content into the left aside. -->\n        <slot name=\"left-aside\">\n          <span v-if=\"devMode\" class=\"slot-helper\">LEFT ASIDE</span>\n        </slot>\n      </BaseIdModal>\n\n      <BaseIdModal\n        v-if=\"devMode || $slots['right-aside']\"\n        key=\"right-aside\"\n        :animation=\"rightAsideAnimation\"\n        modal-id=\"right-aside\"\n        class=\"x-layout__aside x-layout__aside--right\"\n      >\n        <!-- @slot Slot that is be used for insert content into the right aside. -->\n        <slot name=\"right-aside\">\n          <span v-if=\"devMode\" class=\"slot-helper\">RIGHT 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\n      <div\n        v-if=\"devMode || $slots['scroll-to-top']\"\n        key=\"scroll-to-top\"\n        class=\"x-layout__scroll-to-top\"\n      >\n        <slot name=\"scroll-to-top\">\n          <span v-if=\"devMode\" class=\"slot-helper\">SCROLL TO TOP</span>\n        </slot>\n      </div>\n    </Scroll>\n  </MainScroll>\n</template>\n\n<script lang=\"ts\">\nimport { computed, defineComponent, ref } from 'vue'\nimport MainScroll from '../../x-modules/scroll/components/main-scroll.vue'\nimport Scroll from '../../x-modules/scroll/components/scroll.vue'\nimport { animateTranslate } from '../animations/animate-translate/animate-translate.factory'\nimport BaseIdModal from '../modals/base-id-modal.vue'\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 */\nexport default defineComponent({\n  name: 'FixedHeaderAndAsidesLayout',\n  components: { BaseIdModal, MainScroll, Scroll },\n  props: {\n    /** Enables the devMode, which shows the available slots to use with its names. */\n    devMode: Boolean,\n  },\n  setup() {\n    const scrollPosition = ref(0)\n\n    const rightAsideAnimation = animateTranslate('right')\n    const leftAsideAnimation = animateTranslate('left')\n\n    const setPosition = (position: number) => {\n      scrollPosition.value = position\n    }\n    const isBackdropVisible = computed(() => scrollPosition.value > 0)\n\n    return {\n      rightAsideAnimation,\n      leftAsideAnimation,\n      setPosition,\n      isBackdropVisible,\n    }\n  },\n})\n</script>\n\n<style lang=\"css\" scoped>\n@import url('../../styles/dev-mode.css');\n\n.x-layout {\n  /* custom properties */\n  display: grid;\n  align-content: stretch;\n  min-height: 100%;\n\n  /* layout */\n  max-height: 100%;\n  --x-size-margin-max-width: calc((100vw - var(--x-size-max-width-layout, 1440px)) / 2);\n  --x-size-margin-layout: max(\n    var(--x-size-min-margin-layout, 20px),\n    var(--x-size-margin-max-width)\n  );\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    [main-end page-end];\n\n  grid-template-columns:\n    [page-start]\n    var(--x-size-margin-layout)\n    [max-width-start]\n    1fr\n    [max-width-end]\n    var(--x-size-margin-layout)\n    [page-end];\n}\n\n.x-layout__header {\n  /* layout */\n  position: sticky;\n  top: -0.5px;\n  z-index: 2;\n  grid-row: header;\n  grid-column: page;\n  max-height: var(--x-size-max-height-layout-header, auto);\n  padding: 0 var(--x-size-margin-layout);\n\n  /* color */\n  background: var(--x-color-background-layout-header, transparent);\n  border-color: var(--x-size-border-color-layout-header, transparent);\n\n  /* border */\n  border-width: var(--x-size-border-width-layout-header, 0);\n  border-style: solid;\n}\n\n.x-layout__sub-header {\n  /* layout */\n  grid-row: sub-header;\n  grid-column: page;\n  padding: 0 var(--x-size-margin-layout);\n\n  /* color */\n  background: var(--x-color-background-layout-sub-header, transparent);\n  border-color: var(--x-size-border-color-layout-sub-header, transparent);\n\n  /* border */\n  border-width: var(--x-size-border-width-layout-sub-header, 0);\n  border-style: solid;\n}\n\n.x-layout__toolbar {\n  /* layout */\n  grid-row: toolbar;\n  grid-column: max-width;\n}\n\n.x-layout__main {\n  /* layout */\n  grid-row: main;\n  grid-column: max-width;\n}\n\n/* layout */\n.x-layout :deep(.x-layout__aside.x-modal) {\n  z-index: 3;\n  flex-flow: row nowrap;\n}\n\n/* layout */\n.x-layout :deep(.x-layout__aside--right.x-modal) {\n  justify-content: flex-end;\n}\n\n/* others */\n.x-layout :deep(.x-layout__aside) {\n  pointer-events: none;\n}\n.x-layout :deep(.x-layout__aside > *:not(.slot-helper)) {\n  pointer-events: all;\n}\n\n.x-layout__scroll-to-top {\n  position: fixed;\n  z-index: 1;\n  bottom: var(--x-size-margin-bottom-layout-scroll-to-top, 16px);\n  right: var(--x-size-margin-right-layout-scroll-to-top, 16px);\n}\n\n.x-layout__header-backdrop {\n  /* layout */\n  grid-row: page;\n  grid-column: page;\n  position: sticky;\n  top: -0.5px;\n  z-index: 1;\n  height: var(--x-size-height-layout-backdrop, 40vh);\n  width: 100%;\n  pointer-events: none;\n\n  /* color */\n  background-color: var(\n    --x-color-background-layout-header-backdrop,\n    var(--x-color-base-neutral-100, white)\n  );\n  mask: linear-gradient(to bottom, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0));\n\n  /* transition */\n  opacity: 0;\n  transition: opacity 0.2s ease-out;\n}\n.x-layout__header-backdrop--is-visible {\n  opacity: 1;\n}\n\n.x-layout :deep(.x-layout__aside .x-modal__content) {\n  background-color: transparent;\n  height: 100%;\n  width: var(--x-size-width-layout-aside, 300px);\n}\n</style>\n\n<docs lang=\"mdx\">\n## Layout\n\nThis component provides a multi-column layout with fixed headers and collapsible fixed asides:\n\n|            |   header   |               |\n| :--------: | :--------: | :-----------: |\n| left-aside | sub-header |  right-aside  |\n|            |  toolbar   |               |\n|            |    main    |               |\n|            |            | scroll-to-top |\n\nAdditionally, it provides an empty slot `extra-aside` to be customized by the user.\n\n## Design Tokens\n\nThe component exposes the following `Design Tokens` for configuration:\n| token | default value |\n| :-----------------------------------------: | :-----------: |\n| --x-size-height-layout-backdrop | 40vh |\n| --x-size-width-layout-aside | 300px |\n| --x-size-min-margin-layout | 20px |\n| --x-size-max-height-layout-header | auto |\n| --x-size-max-width-layout | 1440px |\n| --x-color-background-layout-header-backdrop | white |\n| --x-color-background-layout-header | transparent |\n| --x-size-border-color-layout-header | transparent |\n| --x-size-border-width-layout-header | 0px |\n| --x-color-background-layout-sub-header | transparent |\n| --x-size-border-color-layout-sub-header | transparent |\n| --x-size-border-width-layout-sub-header | 0px |\n\n|                    token                    |                    use                    |\n| :-----------------------------------------: | :---------------------------------------: |\n|       --x-size-height-layout-backdrop       |  The height for header gradient backdrop  |\n|         --x-size-width-layout-aside         |          The width of the asides          |\n|         --x-size-min-margin-layout          | The min horizontal margin for the Layout  |\n|      --x-size-max-height-layout-header      |   The max height for the Layout Header    |\n|          --x-size-max-width-layout          |       The max width for the Layout        |\n| --x-color-background-layout-header-backdrop | The background color of the head backdrop |\n|     --x-color-background-layout-header      |    The background color of the header     |\n|     --x-size-border-color-layout-header     |      The border color of the header       |\n|     --x-size-border-width-layout-header     |       The border with of the header       |\n|   --x-color-background-layout-sub-header    |  The background color of the sub header   |\n|   --x-size-border-color-layout-sub-header   |    The border color of the sub header     |\n|   --x-size-border-width-layout-sub-header   |     The border with of the sub header     |\n\n## Example\n\n```vue\n<template>\n  <FixedHeaderAndAsidesLayout>\n    <template #header>Header content</template>\n    <template #sub-header>Sub-header content</template>\n    <template #toolbar>Toolbar content</template>\n    <template #main>Main content</template>\n    <template #left-aside>Left aside content</template>\n    <template #right-aside>Right aside content</template>\n    <template #extra-aside>Extra aside content</template>\n    <template #scroll-to-top>Scroll to top content</template>\n  </FixedHeaderAndAsidesLayout>\n</template>\n\n<script setup>\nimport FixedHeaderAndAsidesLayout from '@empathyco/x-components/js/components/layouts/fixed-header-and-asides-layout.vue'\n</script>\n```\n</docs>\n"],"names":["_createBlock","_withCtx","_createVNode","_normalizeClass","_createElementVNode","_openBlock","_createElementBlock","_renderSlot","_createCommentVNode"],"mappings":"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"}
+{"version":3,"file":"fixed-header-and-asides-layout.vue.js","sources":["../../../../src/components/layouts/fixed-header-and-asides-layout.vue"],"sourcesContent":["<template>\n  <MainScroll>\n    <Scroll\n      id=\"main-scroll\"\n      class=\"x-layout x-layout--fixed-header-and-asides\"\n      :class=\"{ 'dev-mode': devMode }\"\n      @scroll=\"setPosition\"\n    >\n      <div\n        key=\"header-backdrop\"\n        class=\"x-layout__header-backdrop\"\n        :class=\"{ 'x-layout__header-backdrop--is-visible': isBackdropVisible }\"\n      />\n\n      <header\n        v-if=\"devMode || $slots.header\"\n        key=\"header\"\n        class=\"x-layout__header x-list x-list--horizontal\"\n      >\n        <!-- @slot Slot that is be used for 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 v-if=\"devMode || $slots['sub-header']\" key=\"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 v-if=\"devMode || $slots.toolbar\" key=\"toolbar\" class=\"x-layout__toolbar\">\n        <slot name=\"toolbar\">\n          <!-- @slot Slot that can be used to insert content above the main. -->\n          <span v-if=\"devMode\" class=\"slot-helper\">TOOLBAR</span>\n        </slot>\n      </section>\n\n      <main v-if=\"devMode || $slots.main\" key=\"main\" class=\"x-layout__main x-list x-list--vertical\">\n        <!-- @slot Slot that is be used for insert content into the Main. -->\n        <slot name=\"main\">\n          <span v-if=\"devMode\" class=\"slot-helper\">MAIN</span>\n        </slot>\n      </main>\n\n      <BaseIdModal\n        v-if=\"devMode || $slots['left-aside']\"\n        key=\"left-aside\"\n        :animation=\"leftAsideAnimation\"\n        modal-id=\"left-aside\"\n        class=\"x-layout__aside x-layout__aside--left\"\n      >\n        <!-- @slot Slot that is be used for insert content into the left aside. -->\n        <slot name=\"left-aside\">\n          <span v-if=\"devMode\" class=\"slot-helper\">LEFT ASIDE</span>\n        </slot>\n      </BaseIdModal>\n\n      <BaseIdModal\n        v-if=\"devMode || $slots['right-aside']\"\n        key=\"right-aside\"\n        :animation=\"rightAsideAnimation\"\n        modal-id=\"right-aside\"\n        class=\"x-layout__aside x-layout__aside--right\"\n      >\n        <!-- @slot Slot that is be used for insert content into the right aside. -->\n        <slot name=\"right-aside\">\n          <span v-if=\"devMode\" class=\"slot-helper\">RIGHT 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\n      <div\n        v-if=\"devMode || $slots['scroll-to-top']\"\n        key=\"scroll-to-top\"\n        class=\"x-layout__scroll-to-top\"\n      >\n        <slot name=\"scroll-to-top\">\n          <span v-if=\"devMode\" class=\"slot-helper\">SCROLL TO TOP</span>\n        </slot>\n      </div>\n    </Scroll>\n  </MainScroll>\n</template>\n\n<script lang=\"ts\">\nimport { computed, defineComponent, ref } from 'vue'\nimport MainScroll from '../../x-modules/scroll/components/main-scroll.vue'\nimport Scroll from '../../x-modules/scroll/components/scroll.vue'\nimport { animateTranslate } from '../animations/animate-translate/animate-translate.factory'\nimport BaseIdModal from '../modals/base-id-modal.vue'\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 */\nexport default defineComponent({\n  name: 'FixedHeaderAndAsidesLayout',\n  components: { BaseIdModal, MainScroll, Scroll },\n  props: {\n    /** Enables the devMode, which shows the available slots to use with its names. */\n    devMode: Boolean,\n  },\n  setup() {\n    const scrollPosition = ref(0)\n\n    const rightAsideAnimation = animateTranslate('right')\n    const leftAsideAnimation = animateTranslate('left')\n\n    const setPosition = (position: number) => {\n      scrollPosition.value = position\n    }\n    const isBackdropVisible = computed(() => scrollPosition.value > 0)\n\n    return {\n      rightAsideAnimation,\n      leftAsideAnimation,\n      setPosition,\n      isBackdropVisible,\n    }\n  },\n})\n</script>\n\n<style lang=\"css\" scoped>\n.dev-mode .slot-helper {\n  font-family: inherit;\n  color: grey;\n  box-sizing: border-box;\n  display: flex;\n  height: 100%;\n  width: 100%;\n  justify-content: center;\n  align-items: center;\n  border: dashed 1px grey;\n  border-radius: 10px;\n}\n\n.x-layout {\n  /* custom properties */\n  display: grid;\n  align-content: stretch;\n  min-height: 100%;\n\n  /* layout */\n  max-height: 100%;\n  --x-size-margin-max-width: calc((100vw - var(--x-size-max-width-layout, 1440px)) / 2);\n  --x-size-margin-layout: max(\n    var(--x-size-min-margin-layout, 20px),\n    var(--x-size-margin-max-width)\n  );\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    [main-end page-end];\n\n  grid-template-columns:\n    [page-start]\n    var(--x-size-margin-layout)\n    [max-width-start]\n    1fr\n    [max-width-end]\n    var(--x-size-margin-layout)\n    [page-end];\n}\n\n.x-layout__header {\n  /* layout */\n  position: sticky;\n  top: -0.5px;\n  z-index: 2;\n  grid-row: header;\n  grid-column: page;\n  max-height: var(--x-size-max-height-layout-header, auto);\n  padding: 0 var(--x-size-margin-layout);\n\n  /* color */\n  background: var(--x-color-background-layout-header, transparent);\n  border-color: var(--x-size-border-color-layout-header, transparent);\n\n  /* border */\n  border-width: var(--x-size-border-width-layout-header, 0);\n  border-style: solid;\n}\n\n.x-layout__sub-header {\n  /* layout */\n  grid-row: sub-header;\n  grid-column: page;\n  padding: 0 var(--x-size-margin-layout);\n\n  /* color */\n  background: var(--x-color-background-layout-sub-header, transparent);\n  border-color: var(--x-size-border-color-layout-sub-header, transparent);\n\n  /* border */\n  border-width: var(--x-size-border-width-layout-sub-header, 0);\n  border-style: solid;\n}\n\n.x-layout__toolbar {\n  /* layout */\n  grid-row: toolbar;\n  grid-column: max-width;\n}\n\n.x-layout__main {\n  /* layout */\n  grid-row: main;\n  grid-column: max-width;\n}\n\n/* layout */\n.x-layout :deep(.x-layout__aside.x-modal) {\n  z-index: 3;\n  flex-flow: row nowrap;\n}\n\n/* layout */\n.x-layout :deep(.x-layout__aside--right.x-modal) {\n  justify-content: flex-end;\n}\n\n/* others */\n.x-layout :deep(.x-layout__aside) {\n  pointer-events: none;\n}\n.x-layout :deep(.x-layout__aside > *:not(.slot-helper)) {\n  pointer-events: all;\n}\n\n.x-layout__scroll-to-top {\n  position: fixed;\n  z-index: 1;\n  bottom: var(--x-size-margin-bottom-layout-scroll-to-top, 16px);\n  right: var(--x-size-margin-right-layout-scroll-to-top, 16px);\n}\n\n.x-layout__header-backdrop {\n  /* layout */\n  grid-row: page;\n  grid-column: page;\n  position: sticky;\n  top: -0.5px;\n  z-index: 1;\n  height: var(--x-size-height-layout-backdrop, 40vh);\n  width: 100%;\n  pointer-events: none;\n\n  /* color */\n  background-color: var(\n    --x-color-background-layout-header-backdrop,\n    var(--x-color-base-neutral-100, white)\n  );\n  mask: linear-gradient(to bottom, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0));\n\n  /* transition */\n  opacity: 0;\n  transition: opacity 0.2s ease-out;\n}\n.x-layout__header-backdrop--is-visible {\n  opacity: 1;\n}\n\n.x-layout :deep(.x-layout__aside .x-modal__content) {\n  background-color: transparent;\n  height: 100%;\n  width: var(--x-size-width-layout-aside, 300px);\n}\n</style>\n\n<docs lang=\"mdx\">\n## Layout\n\nThis component provides a multi-column layout with fixed headers and collapsible fixed asides:\n\n|            |   header   |               |\n| :--------: | :--------: | :-----------: |\n| left-aside | sub-header |  right-aside  |\n|            |  toolbar   |               |\n|            |    main    |               |\n|            |            | scroll-to-top |\n\nAdditionally, it provides an empty slot `extra-aside` to be customized by the user.\n\n## Design Tokens\n\nThe component exposes the following `Design Tokens` for configuration:\n| token | default value |\n| :-----------------------------------------: | :-----------: |\n| --x-size-height-layout-backdrop | 40vh |\n| --x-size-width-layout-aside | 300px |\n| --x-size-min-margin-layout | 20px |\n| --x-size-max-height-layout-header | auto |\n| --x-size-max-width-layout | 1440px |\n| --x-color-background-layout-header-backdrop | white |\n| --x-color-background-layout-header | transparent |\n| --x-size-border-color-layout-header | transparent |\n| --x-size-border-width-layout-header | 0px |\n| --x-color-background-layout-sub-header | transparent |\n| --x-size-border-color-layout-sub-header | transparent |\n| --x-size-border-width-layout-sub-header | 0px |\n\n|                    token                    |                    use                    |\n| :-----------------------------------------: | :---------------------------------------: |\n|       --x-size-height-layout-backdrop       |  The height for header gradient backdrop  |\n|         --x-size-width-layout-aside         |          The width of the asides          |\n|         --x-size-min-margin-layout          | The min horizontal margin for the Layout  |\n|      --x-size-max-height-layout-header      |   The max height for the Layout Header    |\n|          --x-size-max-width-layout          |       The max width for the Layout        |\n| --x-color-background-layout-header-backdrop | The background color of the head backdrop |\n|     --x-color-background-layout-header      |    The background color of the header     |\n|     --x-size-border-color-layout-header     |      The border color of the header       |\n|     --x-size-border-width-layout-header     |       The border with of the header       |\n|   --x-color-background-layout-sub-header    |  The background color of the sub header   |\n|   --x-size-border-color-layout-sub-header   |    The border color of the sub header     |\n|   --x-size-border-width-layout-sub-header   |     The border with of the sub header     |\n\n## Example\n\n```vue\n<template>\n  <FixedHeaderAndAsidesLayout>\n    <template #header>Header content</template>\n    <template #sub-header>Sub-header content</template>\n    <template #toolbar>Toolbar content</template>\n    <template #main>Main content</template>\n    <template #left-aside>Left aside content</template>\n    <template #right-aside>Right aside content</template>\n    <template #extra-aside>Extra aside content</template>\n    <template #scroll-to-top>Scroll to top content</template>\n  </FixedHeaderAndAsidesLayout>\n</template>\n\n<script setup>\nimport FixedHeaderAndAsidesLayout from '@empathyco/x-components/js/components/layouts/fixed-header-and-asides-layout.vue'\n</script>\n```\n</docs>\n"],"names":["_createBlock","_withCtx","_createVNode","_normalizeClass","_createElementVNode","_openBlock","_createElementBlock","_renderSlot","_createCommentVNode"],"mappings":"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"}

package/js/components/layouts/fixed-header-and-asides-layout.vue2.js.map

@@ -1 +1 @@
-{"version":3,"file":"fixed-header-and-asides-layout.vue2.js","sources":["../../../../src/components/layouts/fixed-header-and-asides-layout.vue"],"sourcesContent":["<template>\n  <MainScroll>\n    <Scroll\n      id=\"main-scroll\"\n      class=\"x-layout x-layout--fixed-header-and-asides\"\n      :class=\"{ 'dev-mode': devMode }\"\n      @scroll=\"setPosition\"\n    >\n      <div\n        key=\"header-backdrop\"\n        class=\"x-layout__header-backdrop\"\n        :class=\"{ 'x-layout__header-backdrop--is-visible': isBackdropVisible }\"\n      />\n\n      <header\n        v-if=\"devMode || $slots.header\"\n        key=\"header\"\n        class=\"x-layout__header x-list x-list--horizontal\"\n      >\n        <!-- @slot Slot that is be used for 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 v-if=\"devMode || $slots['sub-header']\" key=\"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 v-if=\"devMode || $slots.toolbar\" key=\"toolbar\" class=\"x-layout__toolbar\">\n        <slot name=\"toolbar\">\n          <!-- @slot Slot that can be used to insert content above the main. -->\n          <span v-if=\"devMode\" class=\"slot-helper\">TOOLBAR</span>\n        </slot>\n      </section>\n\n      <main v-if=\"devMode || $slots.main\" key=\"main\" class=\"x-layout__main x-list x-list--vertical\">\n        <!-- @slot Slot that is be used for insert content into the Main. -->\n        <slot name=\"main\">\n          <span v-if=\"devMode\" class=\"slot-helper\">MAIN</span>\n        </slot>\n      </main>\n\n      <BaseIdModal\n        v-if=\"devMode || $slots['left-aside']\"\n        key=\"left-aside\"\n        :animation=\"leftAsideAnimation\"\n        modal-id=\"left-aside\"\n        class=\"x-layout__aside x-layout__aside--left\"\n      >\n        <!-- @slot Slot that is be used for insert content into the left aside. -->\n        <slot name=\"left-aside\">\n          <span v-if=\"devMode\" class=\"slot-helper\">LEFT ASIDE</span>\n        </slot>\n      </BaseIdModal>\n\n      <BaseIdModal\n        v-if=\"devMode || $slots['right-aside']\"\n        key=\"right-aside\"\n        :animation=\"rightAsideAnimation\"\n        modal-id=\"right-aside\"\n        class=\"x-layout__aside x-layout__aside--right\"\n      >\n        <!-- @slot Slot that is be used for insert content into the right aside. -->\n        <slot name=\"right-aside\">\n          <span v-if=\"devMode\" class=\"slot-helper\">RIGHT 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\n      <div\n        v-if=\"devMode || $slots['scroll-to-top']\"\n        key=\"scroll-to-top\"\n        class=\"x-layout__scroll-to-top\"\n      >\n        <slot name=\"scroll-to-top\">\n          <span v-if=\"devMode\" class=\"slot-helper\">SCROLL TO TOP</span>\n        </slot>\n      </div>\n    </Scroll>\n  </MainScroll>\n</template>\n\n<script lang=\"ts\">\nimport { computed, defineComponent, ref } from 'vue'\nimport MainScroll from '../../x-modules/scroll/components/main-scroll.vue'\nimport Scroll from '../../x-modules/scroll/components/scroll.vue'\nimport { animateTranslate } from '../animations/animate-translate/animate-translate.factory'\nimport BaseIdModal from '../modals/base-id-modal.vue'\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 */\nexport default defineComponent({\n  name: 'FixedHeaderAndAsidesLayout',\n  components: { BaseIdModal, MainScroll, Scroll },\n  props: {\n    /** Enables the devMode, which shows the available slots to use with its names. */\n    devMode: Boolean,\n  },\n  setup() {\n    const scrollPosition = ref(0)\n\n    const rightAsideAnimation = animateTranslate('right')\n    const leftAsideAnimation = animateTranslate('left')\n\n    const setPosition = (position: number) => {\n      scrollPosition.value = position\n    }\n    const isBackdropVisible = computed(() => scrollPosition.value > 0)\n\n    return {\n      rightAsideAnimation,\n      leftAsideAnimation,\n      setPosition,\n      isBackdropVisible,\n    }\n  },\n})\n</script>\n\n<style lang=\"css\" scoped>\n@import url('../../styles/dev-mode.css');\n\n.x-layout {\n  /* custom properties */\n  display: grid;\n  align-content: stretch;\n  min-height: 100%;\n\n  /* layout */\n  max-height: 100%;\n  --x-size-margin-max-width: calc((100vw - var(--x-size-max-width-layout, 1440px)) / 2);\n  --x-size-margin-layout: max(\n    var(--x-size-min-margin-layout, 20px),\n    var(--x-size-margin-max-width)\n  );\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    [main-end page-end];\n\n  grid-template-columns:\n    [page-start]\n    var(--x-size-margin-layout)\n    [max-width-start]\n    1fr\n    [max-width-end]\n    var(--x-size-margin-layout)\n    [page-end];\n}\n\n.x-layout__header {\n  /* layout */\n  position: sticky;\n  top: -0.5px;\n  z-index: 2;\n  grid-row: header;\n  grid-column: page;\n  max-height: var(--x-size-max-height-layout-header, auto);\n  padding: 0 var(--x-size-margin-layout);\n\n  /* color */\n  background: var(--x-color-background-layout-header, transparent);\n  border-color: var(--x-size-border-color-layout-header, transparent);\n\n  /* border */\n  border-width: var(--x-size-border-width-layout-header, 0);\n  border-style: solid;\n}\n\n.x-layout__sub-header {\n  /* layout */\n  grid-row: sub-header;\n  grid-column: page;\n  padding: 0 var(--x-size-margin-layout);\n\n  /* color */\n  background: var(--x-color-background-layout-sub-header, transparent);\n  border-color: var(--x-size-border-color-layout-sub-header, transparent);\n\n  /* border */\n  border-width: var(--x-size-border-width-layout-sub-header, 0);\n  border-style: solid;\n}\n\n.x-layout__toolbar {\n  /* layout */\n  grid-row: toolbar;\n  grid-column: max-width;\n}\n\n.x-layout__main {\n  /* layout */\n  grid-row: main;\n  grid-column: max-width;\n}\n\n/* layout */\n.x-layout :deep(.x-layout__aside.x-modal) {\n  z-index: 3;\n  flex-flow: row nowrap;\n}\n\n/* layout */\n.x-layout :deep(.x-layout__aside--right.x-modal) {\n  justify-content: flex-end;\n}\n\n/* others */\n.x-layout :deep(.x-layout__aside) {\n  pointer-events: none;\n}\n.x-layout :deep(.x-layout__aside > *:not(.slot-helper)) {\n  pointer-events: all;\n}\n\n.x-layout__scroll-to-top {\n  position: fixed;\n  z-index: 1;\n  bottom: var(--x-size-margin-bottom-layout-scroll-to-top, 16px);\n  right: var(--x-size-margin-right-layout-scroll-to-top, 16px);\n}\n\n.x-layout__header-backdrop {\n  /* layout */\n  grid-row: page;\n  grid-column: page;\n  position: sticky;\n  top: -0.5px;\n  z-index: 1;\n  height: var(--x-size-height-layout-backdrop, 40vh);\n  width: 100%;\n  pointer-events: none;\n\n  /* color */\n  background-color: var(\n    --x-color-background-layout-header-backdrop,\n    var(--x-color-base-neutral-100, white)\n  );\n  mask: linear-gradient(to bottom, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0));\n\n  /* transition */\n  opacity: 0;\n  transition: opacity 0.2s ease-out;\n}\n.x-layout__header-backdrop--is-visible {\n  opacity: 1;\n}\n\n.x-layout :deep(.x-layout__aside .x-modal__content) {\n  background-color: transparent;\n  height: 100%;\n  width: var(--x-size-width-layout-aside, 300px);\n}\n</style>\n\n<docs lang=\"mdx\">\n## Layout\n\nThis component provides a multi-column layout with fixed headers and collapsible fixed asides:\n\n|            |   header   |               |\n| :--------: | :--------: | :-----------: |\n| left-aside | sub-header |  right-aside  |\n|            |  toolbar   |               |\n|            |    main    |               |\n|            |            | scroll-to-top |\n\nAdditionally, it provides an empty slot `extra-aside` to be customized by the user.\n\n## Design Tokens\n\nThe component exposes the following `Design Tokens` for configuration:\n| token | default value |\n| :-----------------------------------------: | :-----------: |\n| --x-size-height-layout-backdrop | 40vh |\n| --x-size-width-layout-aside | 300px |\n| --x-size-min-margin-layout | 20px |\n| --x-size-max-height-layout-header | auto |\n| --x-size-max-width-layout | 1440px |\n| --x-color-background-layout-header-backdrop | white |\n| --x-color-background-layout-header | transparent |\n| --x-size-border-color-layout-header | transparent |\n| --x-size-border-width-layout-header | 0px |\n| --x-color-background-layout-sub-header | transparent |\n| --x-size-border-color-layout-sub-header | transparent |\n| --x-size-border-width-layout-sub-header | 0px |\n\n|                    token                    |                    use                    |\n| :-----------------------------------------: | :---------------------------------------: |\n|       --x-size-height-layout-backdrop       |  The height for header gradient backdrop  |\n|         --x-size-width-layout-aside         |          The width of the asides          |\n|         --x-size-min-margin-layout          | The min horizontal margin for the Layout  |\n|      --x-size-max-height-layout-header      |   The max height for the Layout Header    |\n|          --x-size-max-width-layout          |       The max width for the Layout        |\n| --x-color-background-layout-header-backdrop | The background color of the head backdrop |\n|     --x-color-background-layout-header      |    The background color of the header     |\n|     --x-size-border-color-layout-header     |      The border color of the header       |\n|     --x-size-border-width-layout-header     |       The border with of the header       |\n|   --x-color-background-layout-sub-header    |  The background color of the sub header   |\n|   --x-size-border-color-layout-sub-header   |    The border color of the sub header     |\n|   --x-size-border-width-layout-sub-header   |     The border with of the sub header     |\n\n## Example\n\n```vue\n<template>\n  <FixedHeaderAndAsidesLayout>\n    <template #header>Header content</template>\n    <template #sub-header>Sub-header content</template>\n    <template #toolbar>Toolbar content</template>\n    <template #main>Main content</template>\n    <template #left-aside>Left aside content</template>\n    <template #right-aside>Right aside content</template>\n    <template #extra-aside>Extra aside content</template>\n    <template #scroll-to-top>Scroll to top content</template>\n  </FixedHeaderAndAsidesLayout>\n</template>\n\n<script setup>\nimport FixedHeaderAndAsidesLayout from '@empathyco/x-components/js/components/layouts/fixed-header-and-asides-layout.vue'\n</script>\n```\n</docs>\n"],"names":["MainScroll"],"mappings":";;;;;;AAkGA;;;;;;AAME;AACF,gBAAe,eAAe,CAAC;AAC7B,IAAA,IAAI,EAAE,4BAA4B;AAClC,IAAA,UAAU,EAAE,EAAE,WAAW,cAAEA,WAAU,EAAE,QAAQ;AAC/C,IAAA,KAAK,EAAE;;AAEL,QAAA,OAAO,EAAE,OAAO;AACjB,KAAA;IACD,KAAK,GAAA;AACH,QAAA,MAAM,cAAa,GAAI,GAAG,CAAC,CAAC,CAAA;AAE5B,QAAA,MAAM,mBAAkB,GAAI,gBAAgB,CAAC,OAAO,CAAA;AACpD,QAAA,MAAM,kBAAiB,GAAI,gBAAgB,CAAC,MAAM,CAAA;AAElD,QAAA,MAAM,cAAc,CAAC,QAAgB,KAAG;AACtC,YAAA,cAAc,CAAC,KAAI,GAAI,QAAO;AAChC,QAAA,CAAA;AACA,QAAA,MAAM,iBAAgB,GAAI,QAAQ,CAAC,MAAM,cAAc,CAAC,KAAI,GAAI,CAAC,CAAA;QAEjE,OAAO;YACL,mBAAmB;YACnB,kBAAkB;YAClB,WAAW;YACX,iBAAiB;SACnB;IACF,CAAC;AACF,CAAA,CAAA;;;;"}
+{"version":3,"file":"fixed-header-and-asides-layout.vue2.js","sources":["../../../../src/components/layouts/fixed-header-and-asides-layout.vue"],"sourcesContent":["<template>\n  <MainScroll>\n    <Scroll\n      id=\"main-scroll\"\n      class=\"x-layout x-layout--fixed-header-and-asides\"\n      :class=\"{ 'dev-mode': devMode }\"\n      @scroll=\"setPosition\"\n    >\n      <div\n        key=\"header-backdrop\"\n        class=\"x-layout__header-backdrop\"\n        :class=\"{ 'x-layout__header-backdrop--is-visible': isBackdropVisible }\"\n      />\n\n      <header\n        v-if=\"devMode || $slots.header\"\n        key=\"header\"\n        class=\"x-layout__header x-list x-list--horizontal\"\n      >\n        <!-- @slot Slot that is be used for 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 v-if=\"devMode || $slots['sub-header']\" key=\"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 v-if=\"devMode || $slots.toolbar\" key=\"toolbar\" class=\"x-layout__toolbar\">\n        <slot name=\"toolbar\">\n          <!-- @slot Slot that can be used to insert content above the main. -->\n          <span v-if=\"devMode\" class=\"slot-helper\">TOOLBAR</span>\n        </slot>\n      </section>\n\n      <main v-if=\"devMode || $slots.main\" key=\"main\" class=\"x-layout__main x-list x-list--vertical\">\n        <!-- @slot Slot that is be used for insert content into the Main. -->\n        <slot name=\"main\">\n          <span v-if=\"devMode\" class=\"slot-helper\">MAIN</span>\n        </slot>\n      </main>\n\n      <BaseIdModal\n        v-if=\"devMode || $slots['left-aside']\"\n        key=\"left-aside\"\n        :animation=\"leftAsideAnimation\"\n        modal-id=\"left-aside\"\n        class=\"x-layout__aside x-layout__aside--left\"\n      >\n        <!-- @slot Slot that is be used for insert content into the left aside. -->\n        <slot name=\"left-aside\">\n          <span v-if=\"devMode\" class=\"slot-helper\">LEFT ASIDE</span>\n        </slot>\n      </BaseIdModal>\n\n      <BaseIdModal\n        v-if=\"devMode || $slots['right-aside']\"\n        key=\"right-aside\"\n        :animation=\"rightAsideAnimation\"\n        modal-id=\"right-aside\"\n        class=\"x-layout__aside x-layout__aside--right\"\n      >\n        <!-- @slot Slot that is be used for insert content into the right aside. -->\n        <slot name=\"right-aside\">\n          <span v-if=\"devMode\" class=\"slot-helper\">RIGHT 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\n      <div\n        v-if=\"devMode || $slots['scroll-to-top']\"\n        key=\"scroll-to-top\"\n        class=\"x-layout__scroll-to-top\"\n      >\n        <slot name=\"scroll-to-top\">\n          <span v-if=\"devMode\" class=\"slot-helper\">SCROLL TO TOP</span>\n        </slot>\n      </div>\n    </Scroll>\n  </MainScroll>\n</template>\n\n<script lang=\"ts\">\nimport { computed, defineComponent, ref } from 'vue'\nimport MainScroll from '../../x-modules/scroll/components/main-scroll.vue'\nimport Scroll from '../../x-modules/scroll/components/scroll.vue'\nimport { animateTranslate } from '../animations/animate-translate/animate-translate.factory'\nimport BaseIdModal from '../modals/base-id-modal.vue'\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 */\nexport default defineComponent({\n  name: 'FixedHeaderAndAsidesLayout',\n  components: { BaseIdModal, MainScroll, Scroll },\n  props: {\n    /** Enables the devMode, which shows the available slots to use with its names. */\n    devMode: Boolean,\n  },\n  setup() {\n    const scrollPosition = ref(0)\n\n    const rightAsideAnimation = animateTranslate('right')\n    const leftAsideAnimation = animateTranslate('left')\n\n    const setPosition = (position: number) => {\n      scrollPosition.value = position\n    }\n    const isBackdropVisible = computed(() => scrollPosition.value > 0)\n\n    return {\n      rightAsideAnimation,\n      leftAsideAnimation,\n      setPosition,\n      isBackdropVisible,\n    }\n  },\n})\n</script>\n\n<style lang=\"css\" scoped>\n.dev-mode .slot-helper {\n  font-family: inherit;\n  color: grey;\n  box-sizing: border-box;\n  display: flex;\n  height: 100%;\n  width: 100%;\n  justify-content: center;\n  align-items: center;\n  border: dashed 1px grey;\n  border-radius: 10px;\n}\n\n.x-layout {\n  /* custom properties */\n  display: grid;\n  align-content: stretch;\n  min-height: 100%;\n\n  /* layout */\n  max-height: 100%;\n  --x-size-margin-max-width: calc((100vw - var(--x-size-max-width-layout, 1440px)) / 2);\n  --x-size-margin-layout: max(\n    var(--x-size-min-margin-layout, 20px),\n    var(--x-size-margin-max-width)\n  );\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    [main-end page-end];\n\n  grid-template-columns:\n    [page-start]\n    var(--x-size-margin-layout)\n    [max-width-start]\n    1fr\n    [max-width-end]\n    var(--x-size-margin-layout)\n    [page-end];\n}\n\n.x-layout__header {\n  /* layout */\n  position: sticky;\n  top: -0.5px;\n  z-index: 2;\n  grid-row: header;\n  grid-column: page;\n  max-height: var(--x-size-max-height-layout-header, auto);\n  padding: 0 var(--x-size-margin-layout);\n\n  /* color */\n  background: var(--x-color-background-layout-header, transparent);\n  border-color: var(--x-size-border-color-layout-header, transparent);\n\n  /* border */\n  border-width: var(--x-size-border-width-layout-header, 0);\n  border-style: solid;\n}\n\n.x-layout__sub-header {\n  /* layout */\n  grid-row: sub-header;\n  grid-column: page;\n  padding: 0 var(--x-size-margin-layout);\n\n  /* color */\n  background: var(--x-color-background-layout-sub-header, transparent);\n  border-color: var(--x-size-border-color-layout-sub-header, transparent);\n\n  /* border */\n  border-width: var(--x-size-border-width-layout-sub-header, 0);\n  border-style: solid;\n}\n\n.x-layout__toolbar {\n  /* layout */\n  grid-row: toolbar;\n  grid-column: max-width;\n}\n\n.x-layout__main {\n  /* layout */\n  grid-row: main;\n  grid-column: max-width;\n}\n\n/* layout */\n.x-layout :deep(.x-layout__aside.x-modal) {\n  z-index: 3;\n  flex-flow: row nowrap;\n}\n\n/* layout */\n.x-layout :deep(.x-layout__aside--right.x-modal) {\n  justify-content: flex-end;\n}\n\n/* others */\n.x-layout :deep(.x-layout__aside) {\n  pointer-events: none;\n}\n.x-layout :deep(.x-layout__aside > *:not(.slot-helper)) {\n  pointer-events: all;\n}\n\n.x-layout__scroll-to-top {\n  position: fixed;\n  z-index: 1;\n  bottom: var(--x-size-margin-bottom-layout-scroll-to-top, 16px);\n  right: var(--x-size-margin-right-layout-scroll-to-top, 16px);\n}\n\n.x-layout__header-backdrop {\n  /* layout */\n  grid-row: page;\n  grid-column: page;\n  position: sticky;\n  top: -0.5px;\n  z-index: 1;\n  height: var(--x-size-height-layout-backdrop, 40vh);\n  width: 100%;\n  pointer-events: none;\n\n  /* color */\n  background-color: var(\n    --x-color-background-layout-header-backdrop,\n    var(--x-color-base-neutral-100, white)\n  );\n  mask: linear-gradient(to bottom, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0));\n\n  /* transition */\n  opacity: 0;\n  transition: opacity 0.2s ease-out;\n}\n.x-layout__header-backdrop--is-visible {\n  opacity: 1;\n}\n\n.x-layout :deep(.x-layout__aside .x-modal__content) {\n  background-color: transparent;\n  height: 100%;\n  width: var(--x-size-width-layout-aside, 300px);\n}\n</style>\n\n<docs lang=\"mdx\">\n## Layout\n\nThis component provides a multi-column layout with fixed headers and collapsible fixed asides:\n\n|            |   header   |               |\n| :--------: | :--------: | :-----------: |\n| left-aside | sub-header |  right-aside  |\n|            |  toolbar   |               |\n|            |    main    |               |\n|            |            | scroll-to-top |\n\nAdditionally, it provides an empty slot `extra-aside` to be customized by the user.\n\n## Design Tokens\n\nThe component exposes the following `Design Tokens` for configuration:\n| token | default value |\n| :-----------------------------------------: | :-----------: |\n| --x-size-height-layout-backdrop | 40vh |\n| --x-size-width-layout-aside | 300px |\n| --x-size-min-margin-layout | 20px |\n| --x-size-max-height-layout-header | auto |\n| --x-size-max-width-layout | 1440px |\n| --x-color-background-layout-header-backdrop | white |\n| --x-color-background-layout-header | transparent |\n| --x-size-border-color-layout-header | transparent |\n| --x-size-border-width-layout-header | 0px |\n| --x-color-background-layout-sub-header | transparent |\n| --x-size-border-color-layout-sub-header | transparent |\n| --x-size-border-width-layout-sub-header | 0px |\n\n|                    token                    |                    use                    |\n| :-----------------------------------------: | :---------------------------------------: |\n|       --x-size-height-layout-backdrop       |  The height for header gradient backdrop  |\n|         --x-size-width-layout-aside         |          The width of the asides          |\n|         --x-size-min-margin-layout          | The min horizontal margin for the Layout  |\n|      --x-size-max-height-layout-header      |   The max height for the Layout Header    |\n|          --x-size-max-width-layout          |       The max width for the Layout        |\n| --x-color-background-layout-header-backdrop | The background color of the head backdrop |\n|     --x-color-background-layout-header      |    The background color of the header     |\n|     --x-size-border-color-layout-header     |      The border color of the header       |\n|     --x-size-border-width-layout-header     |       The border with of the header       |\n|   --x-color-background-layout-sub-header    |  The background color of the sub header   |\n|   --x-size-border-color-layout-sub-header   |    The border color of the sub header     |\n|   --x-size-border-width-layout-sub-header   |     The border with of the sub header     |\n\n## Example\n\n```vue\n<template>\n  <FixedHeaderAndAsidesLayout>\n    <template #header>Header content</template>\n    <template #sub-header>Sub-header content</template>\n    <template #toolbar>Toolbar content</template>\n    <template #main>Main content</template>\n    <template #left-aside>Left aside content</template>\n    <template #right-aside>Right aside content</template>\n    <template #extra-aside>Extra aside content</template>\n    <template #scroll-to-top>Scroll to top content</template>\n  </FixedHeaderAndAsidesLayout>\n</template>\n\n<script setup>\nimport FixedHeaderAndAsidesLayout from '@empathyco/x-components/js/components/layouts/fixed-header-and-asides-layout.vue'\n</script>\n```\n</docs>\n"],"names":["MainScroll"],"mappings":";;;;;;AAkGA;;;;;;AAME;AACF,gBAAe,eAAe,CAAC;AAC7B,IAAA,IAAI,EAAE,4BAA4B;AAClC,IAAA,UAAU,EAAE,EAAE,WAAW,cAAEA,WAAU,EAAE,QAAQ;AAC/C,IAAA,KAAK,EAAE;;AAEL,QAAA,OAAO,EAAE,OAAO;AACjB,KAAA;IACD,KAAK,GAAA;AACH,QAAA,MAAM,cAAa,GAAI,GAAG,CAAC,CAAC,CAAA;AAE5B,QAAA,MAAM,mBAAkB,GAAI,gBAAgB,CAAC,OAAO,CAAA;AACpD,QAAA,MAAM,kBAAiB,GAAI,gBAAgB,CAAC,MAAM,CAAA;AAElD,QAAA,MAAM,cAAc,CAAC,QAAgB,KAAG;AACtC,YAAA,cAAc,CAAC,KAAI,GAAI,QAAO;AAChC,QAAA,CAAA;AACA,QAAA,MAAM,iBAAgB,GAAI,QAAQ,CAAC,MAAM,cAAc,CAAC,KAAI,GAAI,CAAC,CAAA;QAEjE,OAAO;YACL,mBAAmB;YACnB,kBAAkB;YAClB,WAAW;YACX,iBAAiB;SACnB;IACF,CAAC;AACF,CAAA,CAAA;;;;"}

package/js/components/layouts/fixed-header-and-asides-layout.vue3.js

@@ -1,6 +1,6 @@
 import injectCss from '../../../tools/inject-css.js';
 
-var css = ".dev-mode .slot-helper{align-items:center;border:1px dashed grey;border-radius:10px;box-sizing:border-box;color:grey;display:flex;font-family:inherit;height:100%;justify-content:center;width:100%}.x-layout[data-v-d5a25402]{--x-size-margin-max-width:calc((100vw - var(--x-size-max-width-layout, 1440px))/2);--x-size-margin-layout:max(var(--x-size-min-margin-layout,20px),var(--x-size-margin-max-width));align-content:stretch;display:grid;grid-template-columns:[page-start] var(--x-size-margin-layout) [max-width-start] 1fr [max-width-end] var(--x-size-margin-layout) [page-end];grid-template-rows:[page-start header-start] auto [header-end sub-header-start] auto [sub-header-end toolbar-start] auto [toolbar-end main-start] 1fr [main-end page-end];max-height:100%;min-height:100%}.x-layout__header[data-v-d5a25402]{background:var(--x-color-background-layout-header,transparent);border-color:var(--x-size-border-color-layout-header,transparent);border-style:solid;border-width:var(--x-size-border-width-layout-header,0);grid-column:page;grid-row:header;max-height:var(--x-size-max-height-layout-header,auto);padding:0 var(--x-size-margin-layout);position:sticky;top:-.5px;z-index:2}.x-layout__sub-header[data-v-d5a25402]{background:var(--x-color-background-layout-sub-header,transparent);border-color:var(--x-size-border-color-layout-sub-header,transparent);border-style:solid;border-width:var(--x-size-border-width-layout-sub-header,0);grid-column:page;grid-row:sub-header;padding:0 var(--x-size-margin-layout)}.x-layout__toolbar[data-v-d5a25402]{grid-column:max-width;grid-row:toolbar}.x-layout__main[data-v-d5a25402]{grid-column:max-width;grid-row:main}.x-layout[data-v-d5a25402] .x-layout__aside.x-modal{flex-flow:row nowrap;z-index:3}.x-layout[data-v-d5a25402] .x-layout__aside--right.x-modal{justify-content:flex-end}.x-layout[data-v-d5a25402] .x-layout__aside{pointer-events:none}.x-layout[data-v-d5a25402] .x-layout__aside>:not(.slot-helper){pointer-events:all}.x-layout__scroll-to-top[data-v-d5a25402]{bottom:var(--x-size-margin-bottom-layout-scroll-to-top,16px);position:fixed;right:var(--x-size-margin-right-layout-scroll-to-top,16px);z-index:1}.x-layout__header-backdrop[data-v-d5a25402]{background-color:var(\n    --x-color-background-layout-header-backdrop,var(--x-color-base-neutral-100,#fff)\n  );grid-column:page;grid-row:page;height:var(--x-size-height-layout-backdrop,40vh);mask:linear-gradient(180deg,rgba(0,0,0,.8),transparent);opacity:0;pointer-events:none;position:sticky;top:-.5px;transition:opacity .2s ease-out;width:100%;z-index:1}.x-layout__header-backdrop--is-visible[data-v-d5a25402]{opacity:1}.x-layout[data-v-d5a25402] .x-layout__aside .x-modal__content{background-color:transparent;height:100%;width:var(--x-size-width-layout-aside,300px)}";
+var css = ".dev-mode .slot-helper[data-v-d5a25402]{align-items:center;border:1px dashed grey;border-radius:10px;box-sizing:border-box;color:grey;display:flex;font-family:inherit;height:100%;justify-content:center;width:100%}.x-layout[data-v-d5a25402]{--x-size-margin-max-width:calc((100vw - var(--x-size-max-width-layout, 1440px))/2);--x-size-margin-layout:max(var(--x-size-min-margin-layout,20px),var(--x-size-margin-max-width));align-content:stretch;display:grid;grid-template-columns:[page-start] var(--x-size-margin-layout) [max-width-start] 1fr [max-width-end] var(--x-size-margin-layout) [page-end];grid-template-rows:[page-start header-start] auto [header-end sub-header-start] auto [sub-header-end toolbar-start] auto [toolbar-end main-start] 1fr [main-end page-end];max-height:100%;min-height:100%}.x-layout__header[data-v-d5a25402]{background:var(--x-color-background-layout-header,transparent);border-color:var(--x-size-border-color-layout-header,transparent);border-style:solid;border-width:var(--x-size-border-width-layout-header,0);grid-column:page;grid-row:header;max-height:var(--x-size-max-height-layout-header,auto);padding:0 var(--x-size-margin-layout);position:sticky;top:-.5px;z-index:2}.x-layout__sub-header[data-v-d5a25402]{background:var(--x-color-background-layout-sub-header,transparent);border-color:var(--x-size-border-color-layout-sub-header,transparent);border-style:solid;border-width:var(--x-size-border-width-layout-sub-header,0);grid-column:page;grid-row:sub-header;padding:0 var(--x-size-margin-layout)}.x-layout__toolbar[data-v-d5a25402]{grid-column:max-width;grid-row:toolbar}.x-layout__main[data-v-d5a25402]{grid-column:max-width;grid-row:main}.x-layout[data-v-d5a25402] .x-layout__aside.x-modal{flex-flow:row nowrap;z-index:3}.x-layout[data-v-d5a25402] .x-layout__aside--right.x-modal{justify-content:flex-end}.x-layout[data-v-d5a25402] .x-layout__aside{pointer-events:none}.x-layout[data-v-d5a25402] .x-layout__aside>:not(.slot-helper){pointer-events:all}.x-layout__scroll-to-top[data-v-d5a25402]{bottom:var(--x-size-margin-bottom-layout-scroll-to-top,16px);position:fixed;right:var(--x-size-margin-right-layout-scroll-to-top,16px);z-index:1}.x-layout__header-backdrop[data-v-d5a25402]{background-color:var(\n    --x-color-background-layout-header-backdrop,var(--x-color-base-neutral-100,#fff)\n  );grid-column:page;grid-row:page;height:var(--x-size-height-layout-backdrop,40vh);mask:linear-gradient(180deg,rgba(0,0,0,.8),transparent);opacity:0;pointer-events:none;position:sticky;top:-.5px;transition:opacity .2s ease-out;width:100%;z-index:1}.x-layout__header-backdrop--is-visible[data-v-d5a25402]{opacity:1}.x-layout[data-v-d5a25402] .x-layout__aside .x-modal__content{background-color:transparent;height:100%;width:var(--x-size-width-layout-aside,300px)}";
 injectCss(css);
 
 export { css };