@empathyco/x-components 6.0.0-alpha.157 → 6.0.0-alpha.159

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.159 (2025-10-01)
+
+* chore(deps): pin dependency @empathyco/x-tailwindcss to 2.0.0-alpha.16 (#1834) ([69e6d9b](https://github.com/empathyco/x/commit/69e6d9b)), closes [#1834](https://github.com/empathyco/x/issues/1834)
+
+
+
+
+
+## 6.0.0-alpha.158 (2025-10-01)
+
+* feat(base-teleport): support dynamic host styles and improve type safety (#1839) ([0713104](https://github.com/empathyco/x/commit/0713104)), closes [#1839](https://github.com/empathyco/x/issues/1839)
+* chore(deps): update dependency @badeball/cypress-cucumber-preprocessor to v23 (#1885) ([5af25a4](https://github.com/empathyco/x/commit/5af25a4)), closes [#1885](https://github.com/empathyco/x/issues/1885)
+
+
+
+
+
 ## 6.0.0-alpha.157 (2025-10-01)
 
 * fix: selected tag being removed (#1894) ([287cb48](https://github.com/empathyco/x/commit/287cb48)), closes [#1894](https://github.com/empathyco/x/issues/1894)

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

@@ -20,8 +20,9 @@ _default: import("vue").DefineComponent<{
         type: BooleanConstructor;
         default: boolean;
     };
+    hostStyle: PropType<string | CSSStyleDeclaration>;
 }, {
-    teleportHost: import("vue").Ref<Element | undefined>;
+    teleportHost: import("vue").Ref<HTMLElement | undefined>;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     target: {
         type: PropType<string | Element>;
@@ -35,6 +36,7 @@ _default: import("vue").DefineComponent<{
         type: BooleanConstructor;
         default: boolean;
     };
+    hostStyle: PropType<string | CSSStyleDeclaration>;
 }>>, {
     position: "beforebegin" | "afterbegin" | "beforeend" | "afterend" | "onlychild";
     disabled: boolean;

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

@@ -8,11 +8,12 @@ title: BaseTeleport
 
 ## Props
 
-| Name                  | Description                                                                                                                                                                                                                                                                                                                                                             | Type                           | Default                  |
-| --------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------ | ------------------------ |
-| <code>target</code>   | The element or css selector to which the component will be teleported.                                                                                                                                                                                                                                                                                                  | <code>string \| Element</code> | <code></code>            |
-| <code>position</code> | The position relative to the target<br />- `beforebegin`: Before the target element.<br />- `afterbegin`: Inside the target element, before its first child.<br />- `beforeend`: Inside the target element, after its last child.<br />- `afterend`: After the target element.<br />- `onlychild`: Adds it as child and hides all other children of the target element. | <code>string</code>            | <code>'onlychild'</code> |
-| <code>disabled</code> | If disabled, the slot content will not be teleported                                                                                                                                                                                                                                                                                                                    | <code>boolean</code>           | <code>false</code>       |
+| Name                   | Description                                                                                                                                                                                                                                                                                                                                                             | Type                                       | Default                  |
+| ---------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------ | ------------------------ |
+| <code>target</code>    | The element or css selector to which the component will be teleported.                                                                                                                                                                                                                                                                                                  | <code>string \| Element</code>             | <code></code>            |
+| <code>position</code>  | The position relative to the target<br />- `beforebegin`: Before the target element.<br />- `afterbegin`: Inside the target element, before its first child.<br />- `beforeend`: Inside the target element, after its last child.<br />- `afterend`: After the target element.<br />- `onlychild`: Adds it as child and hides all other children of the target element. | <code>string</code>                        | <code>'onlychild'</code> |
+| <code>disabled</code>  | If disabled, the slot content will not be teleported                                                                                                                                                                                                                                                                                                                    | <code>boolean</code>                       | <code>false</code>       |
+| <code>hostStyle</code> | Styles for the teleport (content container)                                                                                                                                                                                                                                                                                                                             | <code>string \| CSSStyleDeclaration</code> | <code></code>            |
 
 ## Slots
 

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

@@ -1 +1 @@
-{"version":3,"file":"base-teleport.vue.js","sources":["../../../src/components/base-teleport.vue"],"sourcesContent":["<template>\n  <Teleport v-if=\"teleportHost\" :to=\"teleportHost.shadowRoot ?? teleportHost\" :disabled>\n    <slot></slot>\n  </Teleport>\n</template>\n\n<script lang=\"ts\">\nimport type { PropType } from 'vue'\nimport {\n  defineComponent,\n  getCurrentInstance,\n  onBeforeUnmount,\n  onMounted,\n  onUnmounted,\n  ref,\n  watch,\n  watchEffect,\n} from 'vue'\n\nexport default defineComponent({\n  name: 'BaseTeleport',\n  props: {\n    /** The element or css selector to which the component will be teleported. */\n    target: {\n      type: [String, Object] as PropType<string | Element>,\n      required: true,\n    },\n    /**\n     * The position relative to the target\n     * - `beforebegin`: Before the target element.\n     * - `afterbegin`: Inside the target element, before its first child.\n     * - `beforeend`: Inside the target element, after its last child.\n     * - `afterend`: After the target element.\n     * - `onlychild`: Adds it as child and hides all other children of the target element.\n     */\n    position: {\n      type: String as PropType<\n        'beforebegin' | 'afterbegin' | 'beforeend' | 'afterend' | 'onlychild'\n      >,\n      default: 'onlychild',\n    },\n    /** If disabled, the slot content will not be teleported */\n    disabled: {\n      type: Boolean,\n      default: false,\n    },\n  },\n  setup(props) {\n    if (typeof document === 'undefined') {\n      return { teleportHost: ref<Element>() }\n    }\n\n    const instance = getCurrentInstance()\n    /** Hook where the slot content will be teleported to. */\n    const teleportHost = ref<Element>()\n    /** The page element where the teleport host will be inserted. */\n    const targetElement = ref<Element>()\n    let isIsolated = false\n\n    // Before doing app.mount it is unknown if it will be mounted in a shadow so we need to wait.\n    if (instance?.appContext.app._container) {\n      createHost()\n    } else {\n      afterAppMount(createHost)\n    }\n\n    const targetAddedObserver = new MutationObserver(targetAdded)\n    const targetRemovedObserver = new MutationObserver(targetRemoved)\n\n    onUnmounted(() => {\n      if (isIsolated && teleportHost.value) {\n        ;(window as any).xCSSInjector.removeHost(teleportHost.value.shadowRoot)\n      }\n    })\n\n    onBeforeUnmount(() => {\n      targetAddedObserver.disconnect()\n      targetRemovedObserver.disconnect()\n      teleportHost.value?.remove()\n    })\n\n    // Handles target prop changes and init the observers accordingly.\n    watch(\n      () => props.target,\n      newTarget => {\n        targetAddedObserver.disconnect()\n        targetRemovedObserver.disconnect()\n        const target = typeof newTarget === 'string' ? document.querySelector(newTarget) : newTarget\n        if (target?.isConnected) {\n          targetAdded()\n        } else {\n          targetRemoved()\n        }\n      },\n      { immediate: true },\n    )\n\n    // Updates the teleport host when props change.\n    watchEffect(() => {\n      if (!teleportHost.value) {\n        return\n      }\n      if (props.disabled) {\n        teleportHost.value.remove()\n        return\n      }\n      teleportHost.value.className = `x-base-teleport x-base-teleport--${props.position}`\n\n      if (!targetElement.value) {\n        console.warn(`BaseTeleport: Target element \"${props.target}\" not found.`)\n        return\n      }\n      const position = props.position === 'onlychild' ? 'beforeend' : props.position\n      targetElement.value.insertAdjacentElement(position, teleportHost.value)\n    })\n\n    /** Checks if the target element exists in the DOM and updates the observers */\n    function targetAdded() {\n      let element =\n        typeof props.target === 'string' ? document.querySelector(props.target) : props.target\n      if (element?.isConnected) {\n        targetAddedObserver.disconnect()\n        targetElement.value = element\n        while (element.parentElement) {\n          element = element.parentElement\n          targetRemovedObserver.observe(element, { childList: true })\n        }\n      }\n    }\n\n    /** Checks if the target was disconnected from the DOM and updates the observers */\n    function targetRemoved() {\n      if (targetElement.value && !targetElement.value.isConnected) {\n        targetRemovedObserver.disconnect()\n        targetAddedObserver.observe(document.body, { childList: true, subtree: true })\n        targetElement.value = undefined\n      }\n    }\n\n    /** Creates and sets the teleport host element */\n    function createHost() {\n      teleportHost.value = document.createElement('div')\n      isIsolated = instance?.appContext.app._container instanceof ShadowRoot\n      if (isIsolated) {\n        teleportHost.value.attachShadow({ mode: 'open' })\n        ;(window as any).xCSSInjector.addHost(teleportHost.value.shadowRoot)\n      }\n    }\n\n    function afterAppMount(fn: () => void) {\n      onMounted(() => setTimeout(fn, 0))\n    }\n\n    return { teleportHost }\n  },\n})\n\n/** Teleport host styles should be injected outside our shadowRoots */\nif (typeof document !== 'undefined') {\n  const css = document.createElement('style')\n  css.textContent =\n    ':has(> .x-base-teleport--onlychild) > *:not(.x-base-teleport) { display: none; }'\n  document.head?.appendChild(css) ||\n    document.addEventListener('DOMContentLoaded', () => document.head.appendChild(css))\n}\n</script>\n\n<docs lang=\"mdx\">\n## Example\n\nThe BaseTeleport component allows you to teleport its slot content to a specified target element in\nthe DOM. It provides flexibility in positioning the content relative to the target element and\nsupports shadow DOM integration.\n\n### Basic example\n\nTeleport content to a specific element in the DOM:\n\n```vue\n<template>\n  <BaseTeleport target=\"#my-target\">\n    <div>This content will be teleported.</div>\n  </BaseTeleport>\n</template>\n```\n\n### Positioning options\n\nTeleport content inside the target element, before its first child:\n\n```vue\n<template>\n  <BaseTeleport target=\"#my-target\" position=\"afterbegin\">\n    <div>Teleported content at the beginning.</div>\n  </BaseTeleport>\n</template>\n```\n\n### Disabled Teleport\n\nPrevent teleporting the content:\n\n```vue\n<template>\n  <BaseTeleport target=\"#my-target\" :disabled=\"true\">\n    <div>This content will not be teleported.</div>\n  </BaseTeleport>\n</template>\n```\n\n### Notes\n\n- When using the `onlychild` position, all other children of the target element will be hidden.\n- The component supports shadow DOM integration, automatically handling style injection. Anyway, Empathy's custom CSS\n  injector is required. Teleport depends on it to add the styles.\n</docs>\n"],"names":["_openBlock","_createBlock","_Teleport","_renderSlot","_createCommentVNode"],"mappings":";;;;;AACkB,EAAA,OAAA,IAAA,CAAA,YAAA,IAAAA,SAAA,EAAA,EAAhBC,WAEW,CAAAC,QAAA,EAAA;AAAA,IAHb,GAAA,EAAA,CAAA;AAAA,IACiC,EAAA,EAAI,kBAAa,UAAc,IAAA,IAAA,CAAA,YAAA;AAAA,IAAe,QAAA,EAAA,IAAA,CAAA,QAAA;AAAA,GAAA,EAAA;IAC3EC,UAAa,CAAA,IAAA,CAAA,MAAA,EAAA,SAAA,CAAA;AAAA,GAFjB,EAAA,CAAA,EAAA,CAAA,IAAA,EAAA,UAAA,CAAA,CAAA,IAAAC,kBAAA,CAAA,MAAA,EAAA,IAAA,CAAA,CAAA;;;;;;"}
+{"version":3,"file":"base-teleport.vue.js","sources":["../../../src/components/base-teleport.vue"],"sourcesContent":["<template>\n  <Teleport v-if=\"teleportHost\" :to=\"teleportHost.shadowRoot ?? teleportHost\" :disabled>\n    <slot></slot>\n  </Teleport>\n</template>\n\n<script lang=\"ts\">\nimport type { PropType } from 'vue'\nimport {\n  defineComponent,\n  getCurrentInstance,\n  onBeforeUnmount,\n  onMounted,\n  onUnmounted,\n  ref,\n  watch,\n  watchEffect,\n} from 'vue'\n\nexport default defineComponent({\n  name: 'BaseTeleport',\n  props: {\n    /** The element or css selector to which the component will be teleported. */\n    target: {\n      type: [String, Object] as PropType<string | Element>,\n      required: true,\n    },\n    /**\n     * The position relative to the target\n     * - `beforebegin`: Before the target element.\n     * - `afterbegin`: Inside the target element, before its first child.\n     * - `beforeend`: Inside the target element, after its last child.\n     * - `afterend`: After the target element.\n     * - `onlychild`: Adds it as child and hides all other children of the target element.\n     */\n    position: {\n      type: String as PropType<\n        'beforebegin' | 'afterbegin' | 'beforeend' | 'afterend' | 'onlychild'\n      >,\n      default: 'onlychild',\n    },\n    /** If disabled, the slot content will not be teleported */\n    disabled: {\n      type: Boolean,\n      default: false,\n    },\n    /** Styles for the teleport (content container) */\n    hostStyle: Object as PropType<string | CSSStyleDeclaration>,\n  },\n  setup(props) {\n    if (typeof document === 'undefined') {\n      return { teleportHost: ref<HTMLElement>() }\n    }\n\n    const instance = getCurrentInstance()\n    /** Hook where the slot content will be teleported to. */\n    const teleportHost = ref<HTMLElement>()\n    /** The page element where the teleport host will be inserted. */\n    const targetElement = ref<HTMLElement>()\n    let isIsolated = false\n\n    // Before doing app.mount it is unknown if it will be mounted in a shadow so we need to wait.\n    if (instance?.appContext.app._container) {\n      createHost()\n    } else {\n      afterAppMount(createHost)\n    }\n\n    const targetAddedObserver = new MutationObserver(targetAdded)\n    const targetRemovedObserver = new MutationObserver(targetRemoved)\n\n    onUnmounted(() => {\n      if (isIsolated && teleportHost.value) {\n        ;(window as any).xCSSInjector.removeHost(teleportHost.value.shadowRoot)\n      }\n    })\n\n    onBeforeUnmount(() => {\n      targetAddedObserver.disconnect()\n      targetRemovedObserver.disconnect()\n      teleportHost.value?.remove()\n    })\n\n    // Handles target prop changes and init the observers accordingly.\n    watch(\n      () => props.target,\n      newTarget => {\n        targetAddedObserver.disconnect()\n        targetRemovedObserver.disconnect()\n        const target = typeof newTarget === 'string' ? document.querySelector(newTarget) : newTarget\n        if (target?.isConnected) {\n          targetAdded()\n        } else {\n          targetRemoved()\n        }\n      },\n      { immediate: true },\n    )\n\n    // Updates the teleport host when props change.\n    watchEffect(() => {\n      if (!teleportHost.value) {\n        return\n      }\n      if (props.disabled) {\n        teleportHost.value.remove()\n        return\n      }\n      teleportHost.value.className = `x-base-teleport x-base-teleport--${props.position}`\n\n      if (!targetElement.value) {\n        console.warn(`BaseTeleport: Target element \"${props.target}\" not found.`)\n        return\n      }\n      const position = props.position === 'onlychild' ? 'beforeend' : props.position\n      targetElement.value.insertAdjacentElement(position, teleportHost.value)\n    })\n\n    /* Update the host inline styles when it changes */\n    watchEffect(() => {\n      if (teleportHost.value && props.hostStyle) {\n        if (typeof props.hostStyle === 'string') {\n          teleportHost.value.style.cssText = props.hostStyle\n        } else {\n          Object.assign(teleportHost.value.style, props.hostStyle)\n        }\n      }\n    })\n\n    /** Checks if the target element exists in the DOM and updates the observers */\n    function targetAdded() {\n      let element: string | Element | null = props.target\n      if (typeof element === 'string') {\n        element = document.querySelector(element)\n      }\n      if (element instanceof HTMLElement && element.isConnected) {\n        targetAddedObserver.disconnect()\n        targetElement.value = element\n        while (element.parentElement) {\n          element = element.parentElement\n          targetRemovedObserver.observe(element, { childList: true })\n        }\n      }\n    }\n\n    /** Checks if the target was disconnected from the DOM and updates the observers */\n    function targetRemoved() {\n      if (targetElement.value && !targetElement.value.isConnected) {\n        targetRemovedObserver.disconnect()\n        targetAddedObserver.observe(document.body, { childList: true, subtree: true })\n        targetElement.value = undefined\n      }\n    }\n\n    /** Creates and sets the teleport host element */\n    function createHost() {\n      teleportHost.value = document.createElement('div')\n      isIsolated = instance?.appContext.app._container instanceof ShadowRoot\n      if (isIsolated) {\n        teleportHost.value.attachShadow({ mode: 'open' })\n        ;(window as any).xCSSInjector.addHost(teleportHost.value.shadowRoot)\n      }\n    }\n\n    function afterAppMount(fn: () => void) {\n      onMounted(() => setTimeout(fn, 0))\n    }\n\n    return { teleportHost }\n  },\n})\n\n/** Teleport host styles should be injected outside our shadowRoots */\nif (typeof document !== 'undefined') {\n  const css = document.createElement('style')\n  css.textContent =\n    ':has(> .x-base-teleport--onlychild) > *:not(.x-base-teleport) { display: none; }'\n  document.head?.appendChild(css) ||\n    document.addEventListener('DOMContentLoaded', () => document.head.appendChild(css))\n}\n</script>\n\n<docs lang=\"mdx\">\n## Example\n\nThe BaseTeleport component allows you to teleport its slot content to a specified target element in\nthe DOM. It provides flexibility in positioning the content relative to the target element and\nsupports shadow DOM integration.\n\n### Basic example\n\nTeleport content to a specific element in the DOM:\n\n```vue\n<template>\n  <BaseTeleport target=\"#my-target\">\n    <div>This content will be teleported.</div>\n  </BaseTeleport>\n</template>\n```\n\n### Positioning options\n\nTeleport content inside the target element, before its first child:\n\n```vue\n<template>\n  <BaseTeleport target=\"#my-target\" position=\"afterbegin\">\n    <div>Teleported content at the beginning.</div>\n  </BaseTeleport>\n</template>\n```\n\n### Disabled Teleport\n\nPrevent teleporting the content:\n\n```vue\n<template>\n  <BaseTeleport target=\"#my-target\" :disabled=\"true\">\n    <div>This content will not be teleported.</div>\n  </BaseTeleport>\n</template>\n```\n\n### Notes\n\n- When using the `onlychild` position, all other children of the target element will be hidden.\n- The component supports shadow DOM integration, automatically handling style injection. Anyway, Empathy's custom CSS\n  injector is required. Teleport depends on it to add the styles.\n</docs>\n"],"names":["_openBlock","_createBlock","_Teleport","_renderSlot","_createCommentVNode"],"mappings":";;;;;AACkB,EAAA,OAAA,IAAA,CAAA,YAAA,IAAAA,SAAA,EAAA,EAAhBC,WAEW,CAAAC,QAAA,EAAA;AAAA,IAHb,GAAA,EAAA,CAAA;AAAA,IACiC,EAAA,EAAI,kBAAa,UAAc,IAAA,IAAA,CAAA,YAAA;AAAA,IAAe,QAAA,EAAA,IAAA,CAAA,QAAA;AAAA,GAAA,EAAA;IAC3EC,UAAa,CAAA,IAAA,CAAA,MAAA,EAAA,SAAA,CAAA;AAAA,GAFjB,EAAA,CAAA,EAAA,CAAA,IAAA,EAAA,UAAA,CAAA,CAAA,IAAAC,kBAAA,CAAA,MAAA,EAAA,IAAA,CAAA,CAAA;;;;;;"}

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

@@ -25,6 +25,8 @@ var _sfc_main = defineComponent({
             type: Boolean,
             default: false,
         },
+        /** Styles for the teleport (content container) */
+        hostStyle: Object,
     },
     setup(props) {
         if (typeof document === 'undefined') {
@@ -84,10 +86,24 @@ var _sfc_main = defineComponent({
             const position = props.position === 'onlychild' ? 'beforeend' : props.position;
             targetElement.value.insertAdjacentElement(position, teleportHost.value);
         });
+        /* Update the host inline styles when it changes */
+        watchEffect(() => {
+            if (teleportHost.value && props.hostStyle) {
+                if (typeof props.hostStyle === 'string') {
+                    teleportHost.value.style.cssText = props.hostStyle;
+                }
+                else {
+                    Object.assign(teleportHost.value.style, props.hostStyle);
+                }
+            }
+        });
         /** Checks if the target element exists in the DOM and updates the observers */
         function targetAdded() {
-            let element = typeof props.target === 'string' ? document.querySelector(props.target) : props.target;
-            if (element?.isConnected) {
+            let element = props.target;
+            if (typeof element === 'string') {
+                element = document.querySelector(element);
+            }
+            if (element instanceof HTMLElement && element.isConnected) {
                 targetAddedObserver.disconnect();
                 targetElement.value = element;
                 while (element.parentElement) {

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

@@ -1 +1 @@
-{"version":3,"file":"base-teleport.vue2.js","sources":["../../../src/components/base-teleport.vue"],"sourcesContent":["<template>\n  <Teleport v-if=\"teleportHost\" :to=\"teleportHost.shadowRoot ?? teleportHost\" :disabled>\n    <slot></slot>\n  </Teleport>\n</template>\n\n<script lang=\"ts\">\nimport type { PropType } from 'vue'\nimport {\n  defineComponent,\n  getCurrentInstance,\n  onBeforeUnmount,\n  onMounted,\n  onUnmounted,\n  ref,\n  watch,\n  watchEffect,\n} from 'vue'\n\nexport default defineComponent({\n  name: 'BaseTeleport',\n  props: {\n    /** The element or css selector to which the component will be teleported. */\n    target: {\n      type: [String, Object] as PropType<string | Element>,\n      required: true,\n    },\n    /**\n     * The position relative to the target\n     * - `beforebegin`: Before the target element.\n     * - `afterbegin`: Inside the target element, before its first child.\n     * - `beforeend`: Inside the target element, after its last child.\n     * - `afterend`: After the target element.\n     * - `onlychild`: Adds it as child and hides all other children of the target element.\n     */\n    position: {\n      type: String as PropType<\n        'beforebegin' | 'afterbegin' | 'beforeend' | 'afterend' | 'onlychild'\n      >,\n      default: 'onlychild',\n    },\n    /** If disabled, the slot content will not be teleported */\n    disabled: {\n      type: Boolean,\n      default: false,\n    },\n  },\n  setup(props) {\n    if (typeof document === 'undefined') {\n      return { teleportHost: ref<Element>() }\n    }\n\n    const instance = getCurrentInstance()\n    /** Hook where the slot content will be teleported to. */\n    const teleportHost = ref<Element>()\n    /** The page element where the teleport host will be inserted. */\n    const targetElement = ref<Element>()\n    let isIsolated = false\n\n    // Before doing app.mount it is unknown if it will be mounted in a shadow so we need to wait.\n    if (instance?.appContext.app._container) {\n      createHost()\n    } else {\n      afterAppMount(createHost)\n    }\n\n    const targetAddedObserver = new MutationObserver(targetAdded)\n    const targetRemovedObserver = new MutationObserver(targetRemoved)\n\n    onUnmounted(() => {\n      if (isIsolated && teleportHost.value) {\n        ;(window as any).xCSSInjector.removeHost(teleportHost.value.shadowRoot)\n      }\n    })\n\n    onBeforeUnmount(() => {\n      targetAddedObserver.disconnect()\n      targetRemovedObserver.disconnect()\n      teleportHost.value?.remove()\n    })\n\n    // Handles target prop changes and init the observers accordingly.\n    watch(\n      () => props.target,\n      newTarget => {\n        targetAddedObserver.disconnect()\n        targetRemovedObserver.disconnect()\n        const target = typeof newTarget === 'string' ? document.querySelector(newTarget) : newTarget\n        if (target?.isConnected) {\n          targetAdded()\n        } else {\n          targetRemoved()\n        }\n      },\n      { immediate: true },\n    )\n\n    // Updates the teleport host when props change.\n    watchEffect(() => {\n      if (!teleportHost.value) {\n        return\n      }\n      if (props.disabled) {\n        teleportHost.value.remove()\n        return\n      }\n      teleportHost.value.className = `x-base-teleport x-base-teleport--${props.position}`\n\n      if (!targetElement.value) {\n        console.warn(`BaseTeleport: Target element \"${props.target}\" not found.`)\n        return\n      }\n      const position = props.position === 'onlychild' ? 'beforeend' : props.position\n      targetElement.value.insertAdjacentElement(position, teleportHost.value)\n    })\n\n    /** Checks if the target element exists in the DOM and updates the observers */\n    function targetAdded() {\n      let element =\n        typeof props.target === 'string' ? document.querySelector(props.target) : props.target\n      if (element?.isConnected) {\n        targetAddedObserver.disconnect()\n        targetElement.value = element\n        while (element.parentElement) {\n          element = element.parentElement\n          targetRemovedObserver.observe(element, { childList: true })\n        }\n      }\n    }\n\n    /** Checks if the target was disconnected from the DOM and updates the observers */\n    function targetRemoved() {\n      if (targetElement.value && !targetElement.value.isConnected) {\n        targetRemovedObserver.disconnect()\n        targetAddedObserver.observe(document.body, { childList: true, subtree: true })\n        targetElement.value = undefined\n      }\n    }\n\n    /** Creates and sets the teleport host element */\n    function createHost() {\n      teleportHost.value = document.createElement('div')\n      isIsolated = instance?.appContext.app._container instanceof ShadowRoot\n      if (isIsolated) {\n        teleportHost.value.attachShadow({ mode: 'open' })\n        ;(window as any).xCSSInjector.addHost(teleportHost.value.shadowRoot)\n      }\n    }\n\n    function afterAppMount(fn: () => void) {\n      onMounted(() => setTimeout(fn, 0))\n    }\n\n    return { teleportHost }\n  },\n})\n\n/** Teleport host styles should be injected outside our shadowRoots */\nif (typeof document !== 'undefined') {\n  const css = document.createElement('style')\n  css.textContent =\n    ':has(> .x-base-teleport--onlychild) > *:not(.x-base-teleport) { display: none; }'\n  document.head?.appendChild(css) ||\n    document.addEventListener('DOMContentLoaded', () => document.head.appendChild(css))\n}\n</script>\n\n<docs lang=\"mdx\">\n## Example\n\nThe BaseTeleport component allows you to teleport its slot content to a specified target element in\nthe DOM. It provides flexibility in positioning the content relative to the target element and\nsupports shadow DOM integration.\n\n### Basic example\n\nTeleport content to a specific element in the DOM:\n\n```vue\n<template>\n  <BaseTeleport target=\"#my-target\">\n    <div>This content will be teleported.</div>\n  </BaseTeleport>\n</template>\n```\n\n### Positioning options\n\nTeleport content inside the target element, before its first child:\n\n```vue\n<template>\n  <BaseTeleport target=\"#my-target\" position=\"afterbegin\">\n    <div>Teleported content at the beginning.</div>\n  </BaseTeleport>\n</template>\n```\n\n### Disabled Teleport\n\nPrevent teleporting the content:\n\n```vue\n<template>\n  <BaseTeleport target=\"#my-target\" :disabled=\"true\">\n    <div>This content will not be teleported.</div>\n  </BaseTeleport>\n</template>\n```\n\n### Notes\n\n- When using the `onlychild` position, all other children of the target element will be hidden.\n- The component supports shadow DOM integration, automatically handling style injection. Anyway, Empathy's custom CSS\n  injector is required. Teleport depends on it to add the styles.\n</docs>\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"base-teleport.vue2.js","sources":["../../../src/components/base-teleport.vue"],"sourcesContent":["<template>\n  <Teleport v-if=\"teleportHost\" :to=\"teleportHost.shadowRoot ?? teleportHost\" :disabled>\n    <slot></slot>\n  </Teleport>\n</template>\n\n<script lang=\"ts\">\nimport type { PropType } from 'vue'\nimport {\n  defineComponent,\n  getCurrentInstance,\n  onBeforeUnmount,\n  onMounted,\n  onUnmounted,\n  ref,\n  watch,\n  watchEffect,\n} from 'vue'\n\nexport default defineComponent({\n  name: 'BaseTeleport',\n  props: {\n    /** The element or css selector to which the component will be teleported. */\n    target: {\n      type: [String, Object] as PropType<string | Element>,\n      required: true,\n    },\n    /**\n     * The position relative to the target\n     * - `beforebegin`: Before the target element.\n     * - `afterbegin`: Inside the target element, before its first child.\n     * - `beforeend`: Inside the target element, after its last child.\n     * - `afterend`: After the target element.\n     * - `onlychild`: Adds it as child and hides all other children of the target element.\n     */\n    position: {\n      type: String as PropType<\n        'beforebegin' | 'afterbegin' | 'beforeend' | 'afterend' | 'onlychild'\n      >,\n      default: 'onlychild',\n    },\n    /** If disabled, the slot content will not be teleported */\n    disabled: {\n      type: Boolean,\n      default: false,\n    },\n    /** Styles for the teleport (content container) */\n    hostStyle: Object as PropType<string | CSSStyleDeclaration>,\n  },\n  setup(props) {\n    if (typeof document === 'undefined') {\n      return { teleportHost: ref<HTMLElement>() }\n    }\n\n    const instance = getCurrentInstance()\n    /** Hook where the slot content will be teleported to. */\n    const teleportHost = ref<HTMLElement>()\n    /** The page element where the teleport host will be inserted. */\n    const targetElement = ref<HTMLElement>()\n    let isIsolated = false\n\n    // Before doing app.mount it is unknown if it will be mounted in a shadow so we need to wait.\n    if (instance?.appContext.app._container) {\n      createHost()\n    } else {\n      afterAppMount(createHost)\n    }\n\n    const targetAddedObserver = new MutationObserver(targetAdded)\n    const targetRemovedObserver = new MutationObserver(targetRemoved)\n\n    onUnmounted(() => {\n      if (isIsolated && teleportHost.value) {\n        ;(window as any).xCSSInjector.removeHost(teleportHost.value.shadowRoot)\n      }\n    })\n\n    onBeforeUnmount(() => {\n      targetAddedObserver.disconnect()\n      targetRemovedObserver.disconnect()\n      teleportHost.value?.remove()\n    })\n\n    // Handles target prop changes and init the observers accordingly.\n    watch(\n      () => props.target,\n      newTarget => {\n        targetAddedObserver.disconnect()\n        targetRemovedObserver.disconnect()\n        const target = typeof newTarget === 'string' ? document.querySelector(newTarget) : newTarget\n        if (target?.isConnected) {\n          targetAdded()\n        } else {\n          targetRemoved()\n        }\n      },\n      { immediate: true },\n    )\n\n    // Updates the teleport host when props change.\n    watchEffect(() => {\n      if (!teleportHost.value) {\n        return\n      }\n      if (props.disabled) {\n        teleportHost.value.remove()\n        return\n      }\n      teleportHost.value.className = `x-base-teleport x-base-teleport--${props.position}`\n\n      if (!targetElement.value) {\n        console.warn(`BaseTeleport: Target element \"${props.target}\" not found.`)\n        return\n      }\n      const position = props.position === 'onlychild' ? 'beforeend' : props.position\n      targetElement.value.insertAdjacentElement(position, teleportHost.value)\n    })\n\n    /* Update the host inline styles when it changes */\n    watchEffect(() => {\n      if (teleportHost.value && props.hostStyle) {\n        if (typeof props.hostStyle === 'string') {\n          teleportHost.value.style.cssText = props.hostStyle\n        } else {\n          Object.assign(teleportHost.value.style, props.hostStyle)\n        }\n      }\n    })\n\n    /** Checks if the target element exists in the DOM and updates the observers */\n    function targetAdded() {\n      let element: string | Element | null = props.target\n      if (typeof element === 'string') {\n        element = document.querySelector(element)\n      }\n      if (element instanceof HTMLElement && element.isConnected) {\n        targetAddedObserver.disconnect()\n        targetElement.value = element\n        while (element.parentElement) {\n          element = element.parentElement\n          targetRemovedObserver.observe(element, { childList: true })\n        }\n      }\n    }\n\n    /** Checks if the target was disconnected from the DOM and updates the observers */\n    function targetRemoved() {\n      if (targetElement.value && !targetElement.value.isConnected) {\n        targetRemovedObserver.disconnect()\n        targetAddedObserver.observe(document.body, { childList: true, subtree: true })\n        targetElement.value = undefined\n      }\n    }\n\n    /** Creates and sets the teleport host element */\n    function createHost() {\n      teleportHost.value = document.createElement('div')\n      isIsolated = instance?.appContext.app._container instanceof ShadowRoot\n      if (isIsolated) {\n        teleportHost.value.attachShadow({ mode: 'open' })\n        ;(window as any).xCSSInjector.addHost(teleportHost.value.shadowRoot)\n      }\n    }\n\n    function afterAppMount(fn: () => void) {\n      onMounted(() => setTimeout(fn, 0))\n    }\n\n    return { teleportHost }\n  },\n})\n\n/** Teleport host styles should be injected outside our shadowRoots */\nif (typeof document !== 'undefined') {\n  const css = document.createElement('style')\n  css.textContent =\n    ':has(> .x-base-teleport--onlychild) > *:not(.x-base-teleport) { display: none; }'\n  document.head?.appendChild(css) ||\n    document.addEventListener('DOMContentLoaded', () => document.head.appendChild(css))\n}\n</script>\n\n<docs lang=\"mdx\">\n## Example\n\nThe BaseTeleport component allows you to teleport its slot content to a specified target element in\nthe DOM. It provides flexibility in positioning the content relative to the target element and\nsupports shadow DOM integration.\n\n### Basic example\n\nTeleport content to a specific element in the DOM:\n\n```vue\n<template>\n  <BaseTeleport target=\"#my-target\">\n    <div>This content will be teleported.</div>\n  </BaseTeleport>\n</template>\n```\n\n### Positioning options\n\nTeleport content inside the target element, before its first child:\n\n```vue\n<template>\n  <BaseTeleport target=\"#my-target\" position=\"afterbegin\">\n    <div>Teleported content at the beginning.</div>\n  </BaseTeleport>\n</template>\n```\n\n### Disabled Teleport\n\nPrevent teleporting the content:\n\n```vue\n<template>\n  <BaseTeleport target=\"#my-target\" :disabled=\"true\">\n    <div>This content will not be teleported.</div>\n  </BaseTeleport>\n</template>\n```\n\n### Notes\n\n- When using the `onlychild` position, all other children of the target element will be hidden.\n- The component supports shadow DOM integration, automatically handling style injection. Anyway, Empathy's custom CSS\n  injector is required. Teleport depends on it to add the styles.\n</docs>\n"],"names":[],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@empathyco/x-components",
-  "version": "6.0.0-alpha.157",
+  "version": "6.0.0-alpha.159",
   "description": "Empathy X Components",
   "author": "Empathy Systems Corporation S.L.",
   "license": "Apache-2.0",
@@ -95,10 +95,10 @@
   },
   "devDependencies": {
     "@babel/preset-env": "7.28.0",
-    "@badeball/cypress-cucumber-preprocessor": "22.0.1",
+    "@badeball/cypress-cucumber-preprocessor": "23.2.0",
     "@bahmutov/cypress-esbuild-preprocessor": "2.2.5",
     "@cucumber/messages": "28.0.0",
-    "@empathyco/x-tailwindcss": "^2.0.0-alpha.16",
+    "@empathyco/x-tailwindcss": "2.0.0-alpha.16",
     "@microsoft/api-documenter": "7.23.0",
     "@microsoft/api-extractor": "7.52.8",
     "@testing-library/jest-dom": "6.6.4",
@@ -142,5 +142,5 @@
     "access": "public",
     "directory": "dist"
   },
-  "gitHead": "6bcffcec74b0e37c492cbca5eb726c41a01caa43"
+  "gitHead": "5c1d8a0eb2526bfe24c695830b1c4390672aee67"
 }

package/report/x-components.api.json

@@ -10795,7 +10795,25 @@
             },
             {
               "kind": "Content",
-              "text": ";\n        default: boolean;\n    };\n}, {\n    teleportHost: import(\"vue\")."
+              "text": ";\n        default: boolean;\n    };\n    hostStyle: "
+            },
+            {
+              "kind": "Reference",
+              "text": "PropType",
+              "canonicalReference": "@vue/runtime-core!PropType:type"
+            },
+            {
+              "kind": "Content",
+              "text": "<string | "
+            },
+            {
+              "kind": "Reference",
+              "text": "CSSStyleDeclaration",
+              "canonicalReference": "!CSSStyleDeclaration:interface"
+            },
+            {
+              "kind": "Content",
+              "text": ">;\n}, {\n    teleportHost: import(\"vue\")."
             },
             {
               "kind": "Reference",
@@ -10808,8 +10826,8 @@
             },
             {
               "kind": "Reference",
-              "text": "Element",
-              "canonicalReference": "!Element:interface"
+              "text": "HTMLElement",
+              "canonicalReference": "!HTMLElement:interface"
             },
             {
               "kind": "Content",
@@ -10894,7 +10912,25 @@
             },
             {
               "kind": "Content",
-              "text": ";\n        default: boolean;\n    };\n}>>, {\n    position: \"beforebegin\" | \"afterbegin\" | \"beforeend\" | \"afterend\" | \"onlychild\";\n    disabled: boolean;\n}, {}>"
+              "text": ";\n        default: boolean;\n    };\n    hostStyle: "
+            },
+            {
+              "kind": "Reference",
+              "text": "PropType",
+              "canonicalReference": "@vue/runtime-core!PropType:type"
+            },
+            {
+              "kind": "Content",
+              "text": "<string | "
+            },
+            {
+              "kind": "Reference",
+              "text": "CSSStyleDeclaration",
+              "canonicalReference": "!CSSStyleDeclaration:interface"
+            },
+            {
+              "kind": "Content",
+              "text": ">;\n}>>, {\n    position: \"beforebegin\" | \"afterbegin\" | \"beforeend\" | \"afterend\" | \"onlychild\";\n    disabled: boolean;\n}, {}>"
             }
           ],
           "fileUrlPath": "dist/types/components/base-teleport.vue.d.ts",
@@ -10903,7 +10939,7 @@
           "name": "BaseTeleport",
           "variableTypeTokenRange": {
             "startIndex": 1,
-            "endIndex": 34
+            "endIndex": 42
           }
         },
         {

package/report/x-components.api.md

@@ -1579,8 +1579,9 @@ disabled: {
 type: BooleanConstructor;
 default: boolean;
 };
+hostStyle: PropType<string | CSSStyleDeclaration>;
 }, {
-teleportHost: Ref<Element | undefined>;
+teleportHost: Ref<HTMLElement | undefined>;
 }, unknown, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<ExtractPropTypes<    {
 target: {
 type: PropType<string | Element>;
@@ -1594,6 +1595,7 @@ disabled: {
 type: BooleanConstructor;
 default: boolean;
 };
+hostStyle: PropType<string | CSSStyleDeclaration>;
 }>>, {
 position: "beforebegin" | "afterbegin" | "beforeend" | "afterend" | "onlychild";
 disabled: boolean;

package/types/components/base-teleport.vue.d.ts

@@ -22,8 +22,10 @@ declare const _default: import("vue").DefineComponent<{
         type: BooleanConstructor;
         default: boolean;
     };
+    /** Styles for the teleport (content container) */
+    hostStyle: PropType<string | CSSStyleDeclaration>;
 }, {
-    teleportHost: import("vue").Ref<Element | undefined>;
+    teleportHost: import("vue").Ref<HTMLElement | undefined>;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     /** The element or css selector to which the component will be teleported. */
     target: {
@@ -47,6 +49,8 @@ declare const _default: import("vue").DefineComponent<{
         type: BooleanConstructor;
         default: boolean;
     };
+    /** Styles for the teleport (content container) */
+    hostStyle: PropType<string | CSSStyleDeclaration>;
 }>>, {
     position: "beforebegin" | "afterbegin" | "beforeend" | "afterend" | "onlychild";
     disabled: boolean;

package/types/components/base-teleport.vue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"base-teleport.vue?vue&type=script&lang.d.ts","sourceRoot":"","sources":["../../../src/components/base-teleport.vue?vue&type=script&lang.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,KAAK,CAAA;;IAe/B,6EAA6E;;cAEjD,QAAQ,CAAC,MAAM,GAAG,OAAO,CAAC;;;IAGtD;;;;;;;OAOG;;cAEe,QAAQ,CACtB,aAAa,GAAG,YAAY,GAAG,WAAW,GAAG,UAAU,GAAG,WAAW,CACtE;;;IAGH,2DAA2D;;;;;;;;IAnB3D,6EAA6E;;cAEjD,QAAQ,CAAC,MAAM,GAAG,OAAO,CAAC;;;IAGtD;;;;;;;OAOG;;cAEe,QAAQ,CACtB,aAAa,GAAG,YAAY,GAAG,WAAW,GAAG,UAAU,GAAG,WAAW,CACtE;;;IAGH,2DAA2D;;;;;;;;;AAtB/D,wBAwIE"}
+{"version":3,"file":"base-teleport.vue?vue&type=script&lang.d.ts","sourceRoot":"","sources":["../../../src/components/base-teleport.vue?vue&type=script&lang.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,KAAK,CAAA;;IAe/B,6EAA6E;;cAEjD,QAAQ,CAAC,MAAM,GAAG,OAAO,CAAC;;;IAGtD;;;;;;;OAOG;;cAEe,QAAQ,CACtB,aAAa,GAAG,YAAY,GAAG,WAAW,GAAG,UAAU,GAAG,WAAW,CACtE;;;IAGH,2DAA2D;;;;;IAK3D,kDAAkD;eAC7B,QAAQ,CAAC,MAAM,GAAG,mBAAmB,CAAC;;;;IAzB3D,6EAA6E;;cAEjD,QAAQ,CAAC,MAAM,GAAG,OAAO,CAAC;;;IAGtD;;;;;;;OAOG;;cAEe,QAAQ,CACtB,aAAa,GAAG,YAAY,GAAG,WAAW,GAAG,UAAU,GAAG,WAAW,CACtE;;;IAGH,2DAA2D;;;;;IAK3D,kDAAkD;eAC7B,QAAQ,CAAC,MAAM,GAAG,mBAAmB,CAAC;;;;;AA5B/D,wBAuJE"}