@thednp/shorty 2.0.4 → 2.0.5

package/dts.config.ts

@@ -1,14 +1,8 @@
-const packageJson = require("./package.json");
-
-const getPackageName = () => {
-  return packageJson.name.includes('@') ? packageJson.name.split('/')[1] : packageJson.name;
-};
-
 const config = {
   entries: [
     {
       filePath: "./src/index.ts",
-      outFile: `./dist/${getPackageName()}.d.ts`,
+      outFile: `./dist/shorty.d.ts`,
       noCheck: false,
       output: {
         exportReferencedTypes: false,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@thednp/shorty",
-  "version": "2.0.4",
+  "version": "2.0.5",
   "description": "TypeScript shorties for the web",
   "source": "./src/index.ts",
   "main": "./dist/shorty.js",
@@ -32,27 +32,25 @@
   },
   "homepage": "https://github.com/thednp/shorty",
   "devDependencies": {
-    "@types/node": "^20.16.5",
+    "@types/node": "^20.16.15",
     "@typescript-eslint/eslint-plugin": "^5.62.0",
     "@typescript-eslint/parser": "^5.62.0",
-    "@vitest/browser": "^2.1.1",
-    "@vitest/coverage-istanbul": "^2.1.1",
-    "@vitest/ui": "^2.1.1",
+    "@vitest/browser": "^2.1.3",
+    "@vitest/coverage-istanbul": "^2.1.3",
+    "@vitest/ui": "^2.1.3",
     "dts-bundle-generator": "^9.5.1",
     "eslint": "^8.57.1",
     "eslint-plugin-jsdoc": "^46.10.1",
     "eslint-plugin-prefer-arrow": "^1.2.3",
     "eslint-plugin-prettier": "^4.2.1",
-    "happy-dom": "^15.7.4",
     "istanbul-lib-coverage": "^3.2.2",
     "istanbul-lib-instrument": "^5.2.1",
     "nyc": "^15.1.0",
-    "playwright": "^1.47.1",
+    "playwright": "^1.48.1",
     "prettier": "^2.8.8",
-    "rimraf": "^5.0.10",
-    "typescript": "^5.6.2",
-    "vite": "^5.4.6",
-    "vitest": "^2.1.1"
+    "typescript": "^5.6.3",
+    "vite": "^5.4.10",
+    "vitest": "^2.1.3"
   },
   "engines": {
     "node": ">=16",
@@ -61,15 +59,15 @@
   "scripts": {
     "pre-test": "pnpm clean-coverage",
     "badges": "npx -p dependency-version-badge update-badge typescript prettier eslint vitest vite",
-    "test": "pnpm pre-test && vitest --config vitest.config.ts",
-    "test-ui": "pnpm pre-test && vitest --config vitest.config-ui.ts",
+    "test": "pnpm pre-test && vitest --config vitest.config.mts",
+    "test-ui": "pnpm pre-test && vitest --config vitest.config-ui.mts",
     "clean-coverage": "rm -rf coverage .nyc_output",
     "format": "prettier --write \"src/**/*.ts\"",
     "lint": "pnpm lint:ts && pnpm check:ts",
     "lint:ts": "eslint -c .eslintrc.cjs --ext .ts src",
     "fix:ts": "eslint -c .eslintrc.cjs --ext .ts src --fix",
     "check:ts": "tsc -noEmit",
-    "build": "pnpm check:ts && pnpm lint:ts && vite build && pnpm dts",
+    "build": "vite build && pnpm dts",
     "dts": "dts-bundle-generator --config ./dts.config.ts"
   }
 }

package/src/boolean/isMobile.ts

@@ -4,7 +4,7 @@ import userAgent from '../strings/userAgent';
 const mobileBrands = /iPhone|iPad|iPod|Android/i;
 let isMobileCheck = false;
 
-/* istanbul ignore else @preserve */
+// istanbul ignore else @preserve
 if (userAgentData) {
   isMobileCheck = userAgentData.brands.some(x => mobileBrands.test(x.brand));
 } else {

package/src/boolean/supportPassive.ts

@@ -17,7 +17,7 @@ const supportPassive = (() => {
         return result;
       },
     });
-    /* istanbul ignore next */
+    // istanbul ignore next @preserve
     one(document, DOMContentLoadedEvent, noop, opts);
   } catch (e) {
     // throw Error('Passive events are not supported');

package/src/get/getRectRelativeToOffsetParent.ts

@@ -22,7 +22,7 @@ const getRectRelativeToOffsetParent = (
   const rect = getBoundingClientRect(element, isParentAnElement && isScaledElement(offsetParent));
   const offsets = { x: 0, y: 0 };
 
-  /* istanbul ignore else @preserve */
+  // istanbul ignore else @preserve
   if (isParentAnElement) {
     const offsetRect = getBoundingClientRect(offsetParent, true);
     offsets.x = offsetRect.x + offsetParent.clientLeft;

package/src/index.ts

@@ -77,6 +77,7 @@ import focusEvents from './strings/focusEvents';
 import focusEvent from './strings/focusEvent';
 import focusinEvent from './strings/focusinEvent';
 import focusoutEvent from './strings/focusoutEvent';
+import focusableSelector from './strings/focusableSelector';
 
 import gesturechangeEvent from './strings/gesturechangeEvent';
 import gestureendEvent from './strings/gestureendEvent';
@@ -194,6 +195,7 @@ import setElementStyle from './misc/setElementStyle';
 import Timer from './misc/timer';
 import toLowerCase from './misc/toLowerCase';
 import toUpperCase from './misc/toUpperCase';
+import { type FocusableElement, hasFocusTrap, toggleFocusTrap } from './misc/focusTrap';
 
 // get
 import getBoundingClientRect from './get/getBoundingClientRect';
@@ -397,6 +399,9 @@ export {
   createCustomEvent,
   toUpperCase,
   toLowerCase,
+  focusableSelector,
+  hasFocusTrap,
+  toggleFocusTrap,
   Timer,
   emulateAnimationEnd,
   emulateTransitionEnd,
@@ -480,6 +485,7 @@ export {
 export * from './interface/navigatorUA.d';
 export * from './interface/offsetRect.d';
 
+export type { FocusableElement };
 export type { OriginalEvent } from './interface/originalEvent.d';
 
 export type { BoundingClientRect } from './interface/boundingClientRect.d';

package/src/misc/createCustomEvent.ts

@@ -9,7 +9,7 @@ import ObjectAssign from './ObjectAssign';
  * @param config Event.options | Event.properties
  * @returns a new namespaced event
  */
-const createCustomEvent = <O extends Record<string, unknown>, T extends OriginalEvent>(
+const createCustomEvent = <O extends unknown & Record<string, unknown>, T extends OriginalEvent>(
   eventType: string,
   config?: O,
 ): T => {
@@ -18,7 +18,7 @@ const createCustomEvent = <O extends Record<string, unknown>, T extends Original
     bubbles: true,
   }) as T;
 
-  /* istanbul ignore else @preserve */
+  // istanbul ignore else @preserve
   if (isObject(config)) {
     ObjectAssign(OriginalCustomEvent, config);
   }

package/src/misc/data.ts

@@ -19,7 +19,7 @@ const Data = {
   set: <T>(element: HTMLElement, component: string, instance: T): void => {
     if (!isHTMLElement(element)) return;
 
-    /* istanbul ignore else */
+    // istanbul ignore else @preserve
     if (!componentData.has(component)) {
       componentData.set(component, new Map<HTMLElement, T>());
     }
@@ -51,11 +51,9 @@ const Data = {
   get: <T>(element: HTMLElement, component: string): T | null => {
     if (!isHTMLElement(element) || !component) return null;
     const instanceMap = Data.getAllFor<T>(component);
-    // const instanceMap = componentData.get(component) as Map<HTMLElement, InstanceType<T>>;
 
     const instance = element && instanceMap && instanceMap.get(element);
 
-    // return (instance as T) || null;
     return instance || null;
   },
 
@@ -67,13 +65,12 @@ const Data = {
    */
   remove: <T>(element: HTMLElement, component: string): void => {
     const instanceMap = Data.getAllFor<T>(component);
-    // const instanceMap = componentData.get(component) as Map<HTMLElement, InstanceType<T>>;
 
     if (!instanceMap || !isHTMLElement(element)) return;
 
     instanceMap.delete(element);
 
-    /* istanbul ignore else */
+    // istanbul ignore else @preserve
     if (instanceMap.size === 0) {
       componentData.delete(component);
     }

package/src/misc/emulateAnimationEnd.ts

@@ -17,9 +17,9 @@ const emulateAnimationEnd = (element: HTMLElement, handler: EventListener): void
   const delay = getElementAnimationDelay(element);
 
   if (duration) {
-    /** Wrap the handler in on -> off callback */
+    // Wrap the handler in on -> off callback
     const animationEndWrapper = (e: Event): void => {
-      /* istanbul ignore else @preserve */
+      // istanbul ignore else @preserve
       if (e.target === element) {
         handler.apply(element, [e]);
         element.removeEventListener(animationEndEvent, animationEndWrapper);
@@ -28,11 +28,11 @@ const emulateAnimationEnd = (element: HTMLElement, handler: EventListener): void
     };
     element.addEventListener(animationEndEvent, animationEndWrapper);
     setTimeout(() => {
-      /* istanbul ignore next @preserve */
+      // istanbul ignore next @preserve
       if (!called) dispatchEvent(element, endEvent);
     }, duration + delay + 17);
   } else {
-    /* istanbul ignore next @preserve */
+    // istanbul ignore next @preserve
     handler.apply(element, [endEvent]);
   }
 };

package/src/misc/emulateTransitionEnd.ts

@@ -17,9 +17,9 @@ const emulateTransitionEnd = (element: HTMLElement, handler: EventListener): voi
   const delay = getElementTransitionDelay(element);
 
   if (duration) {
-    /** Wrap the handler in on -> off callback */
+    // Wrap the handler in on -> off callback
     const transitionEndWrapper = (e: Event): void => {
-      /* istanbul ignore else @preserve */
+      // istanbul ignore else @preserve
       if (e.target === element) {
         handler.apply(element, [e]);
         element.removeEventListener(transitionEndEvent, transitionEndWrapper);
@@ -28,7 +28,7 @@ const emulateTransitionEnd = (element: HTMLElement, handler: EventListener): voi
     };
     element.addEventListener(transitionEndEvent, transitionEndWrapper);
     setTimeout(() => {
-      /* istanbul ignore next @preserve */
+      // istanbul ignore next @preserve
       if (!called) dispatchEvent(element, endEvent);
     }, duration + delay + 17);
   } else {

package/src/misc/focusTrap.ts

@@ -0,0 +1,64 @@
+import ariaHidden from '../strings/ariaHidden';
+import focusableSelector from '../strings/focusableSelector';
+import querySelectorAll from '../selectors/querySelectorAll';
+import getAttribute from '../attr/getAttribute';
+import hasAttribute from '../attr/hasAttribute';
+import off from '../event/off';
+import on from '../event/on';
+import getDocument from '../get/getDocument';
+import { KeyboardEvent } from '../interface/event';
+
+const focusTrapMap = new Map<HTMLElement, boolean>();
+
+export type FocusableElement =
+  | HTMLAnchorElement
+  | HTMLButtonElement
+  | HTMLInputElement
+  | HTMLTextAreaElement
+  | HTMLDataListElement
+  | HTMLDetailsElement
+  | HTMLSelectElement;
+
+function handleKeyboardNavigation<T extends HTMLElement & EventTarget>(
+  this: T,
+  event: KeyboardEvent<T>,
+) {
+  const { shiftKey, code } = event;
+  const doc = getDocument(this);
+  const focusableElements = [...querySelectorAll<FocusableElement>(focusableSelector, this)].filter(
+    el => !hasAttribute(el, 'disabled') && !getAttribute(el, ariaHidden),
+  );
+
+  if (!focusableElements.length) return;
+  const firstFocusable = focusableElements[0];
+  const lastFocusable = focusableElements[focusableElements.length - 1];
+
+  // istanbul ignore else @preserve
+  if (code === 'Tab') {
+    if (shiftKey && doc.activeElement === firstFocusable) {
+      lastFocusable.focus();
+      event.preventDefault();
+    } else if (!shiftKey && doc.activeElement === lastFocusable) {
+      firstFocusable.focus();
+      event.preventDefault();
+    }
+  }
+}
+
+/**
+ * Utility to check if a designated element is affected by focus trap;
+ * @param target
+ */
+export const hasFocusTrap = (target: HTMLElement) => focusTrapMap.has(target) === true;
+
+/**
+ * Utility to toggle focus trap inside a designated target element;
+ * @param target
+ */
+export const toggleFocusTrap = (target: HTMLElement) => {
+  const isCurrentlyTrapped = hasFocusTrap(target);
+  const action = !isCurrentlyTrapped ? on : off;
+  action(target, 'keydown', handleKeyboardNavigation);
+  if (isCurrentlyTrapped) focusTrapMap.delete(target);
+  else focusTrapMap.set(target, true);
+};

package/src/misc/normalizeOptions.ts

@@ -29,7 +29,7 @@ const normalizeOptions = <T extends { [key: string]: any }>(
     const key: keyof T =
       ns && typeof k === 'string' && k.includes(ns)
         ? k.replace(ns, '').replace(/[A-Z]/g, (match: string) => toLowerCase(match))
-        : k;
+        : /* istanbul ignore next @preserve */ k;
 
     dataOps[key] = normalizeValue(v) as T[keyof T];
   });
@@ -39,7 +39,7 @@ const normalizeOptions = <T extends { [key: string]: any }>(
   });
 
   ObjectEntries(defaultOps).forEach(([k, v]) => {
-    /* istanbul ignore else */
+    // istanbul ignore else @preserve
     if (k in INPUT) {
       normalOps[k] = INPUT[k] as T[keyof T];
     } else if (k in dataOps) {

package/src/misc/timer.ts

@@ -23,9 +23,9 @@ const Timer = {
   set: (element: HTMLElement, callback: TimerHandler, delay: number, key?: string): void => {
     if (!isHTMLElement(element)) return;
 
-    /* istanbul ignore else */
+    // istanbul ignore else @preserve
     if (key && key.length) {
-      /* istanbul ignore else */
+      // istanbul ignore else @preserve
       if (!TimeCache.has(element)) {
         TimeCache.set(element, new Map());
       }
@@ -70,7 +70,7 @@ const Timer = {
     if (key && key.length && isMap(keyTimers as KeyMap)) {
       clearTimeout((keyTimers as KeyMap).get(key));
       (keyTimers as KeyMap).delete(key);
-      /* istanbul ignore else */
+      // istanbul ignore else @preserve
       if ((keyTimers as KeyMap).size === 0) {
         TimeCache.delete(element);
       }

package/src/selectors/getCustomElements.ts

@@ -1,6 +1,5 @@
 import isCustomElement from '../is/isCustomElement';
 import getElementsByTagName from './getElementsByTagName';
-import type { CustomElement } from '../interface/customElement';
 
 /**
  * Returns an `Array` of `Node` elements that are registered as
@@ -11,7 +10,7 @@ import type { CustomElement } from '../interface/customElement';
  * @param parent parent to look into
  * @returns the query result
  */
-const getCustomElements = (parent?: ParentNode): CustomElement[] => {
+const getCustomElements = (parent?: ParentNode) => {
   const collection = getElementsByTagName('*', parent);
 
   return [...collection].filter(isCustomElement);

package/src/selectors/getElementById.ts

@@ -9,8 +9,8 @@ import getDocument from '../get/getDocument';
  * @param context an element in it's document or document
  * @returns the requested element
  */
-const getElementById = (id: string, context?: Node): HTMLElement | null => {
-  return getDocument(context).getElementById(id) || null;
+const getElementById = <T extends HTMLElement>(id: string, context?: Node) => {
+  return (getDocument(context).getElementById(id) as T) || null;
 };
 
 export default getElementById;

package/src/selectors/getElementsByClassName.ts

@@ -9,14 +9,9 @@ import isNode from '../is/isNode';
  * @param parent optional Element to look into
  * @return the 'HTMLCollection'
  */
-const getElementsByClassName = (
-  selector: string,
-  parent?: ParentNode,
-): HTMLCollectionOf<HTMLElement> => {
+const getElementsByClassName = <T extends HTMLElement>(selector: string, parent?: ParentNode) => {
   const lookUp = parent && isNode(parent) ? parent : getDocument();
-  return (lookUp as HTMLElement | Document).getElementsByClassName(
-    selector,
-  ) as HTMLCollectionOf<HTMLElement>;
+  return (lookUp as HTMLElement | Document).getElementsByClassName(selector) as HTMLCollectionOf<T>;
 };
 
 export default getElementsByClassName;

package/src/selectors/getElementsByTagName.ts

@@ -9,12 +9,9 @@ import isNode from '../is/isNode';
  * @param parent optional Element to look into
  * @return the 'HTMLCollection'
  */
-const getElementsByTagName = (
-  selector: string,
-  parent?: ParentNode,
-): HTMLCollectionOf<HTMLElement> => {
+const getElementsByTagName = <T extends HTMLElement>(selector: string, parent?: ParentNode) => {
   const lookUp = isNode(parent) ? parent : getDocument();
-  return (lookUp as Document).getElementsByTagName(selector) as HTMLCollectionOf<HTMLElement>;
+  return (lookUp as Document).getElementsByTagName(selector) as HTMLCollectionOf<T>;
 };
 
 export default getElementsByTagName;

package/src/selectors/querySelector.ts

@@ -10,13 +10,16 @@ import isHTMLElement from '../is/isHTMLElement';
  * @param parent optional node to look into
  * @return the `HTMLElement` or `querySelector` result
  */
-const querySelector = (selector: HTMLElement | string, parent?: ParentNode): HTMLElement | null => {
+const querySelector = <T extends HTMLElement>(
+  selector: HTMLElement | string,
+  parent?: ParentNode,
+): T | null => {
   if (isHTMLElement(selector)) {
-    return selector;
+    return selector as T;
   }
   const lookUp = isNode(parent) ? parent : getDocument();
 
-  return lookUp.querySelector(selector);
+  return lookUp.querySelector<T>(selector);
 };
 
 export default querySelector;

package/src/selectors/querySelectorAll.ts

@@ -8,7 +8,10 @@ import isNode from '../is/isNode';
  * @param parent optional node to look into
  * @return the query result
  */
-const querySelectorAll = (selector: string, parent?: ParentNode): NodeListOf<HTMLElement> => {
+const querySelectorAll = <T extends HTMLElement>(
+  selector: string,
+  parent?: ParentNode,
+): NodeListOf<T> => {
   const lookUp = isNode(parent) ? parent : getDocument();
   return lookUp.querySelectorAll(selector);
 };

package/src/strings/focusableSelector.ts

@@ -0,0 +1,4 @@
+const focusableSelector =
+  'a[href], button, input, textarea, select, details, [tabindex]:not([tabindex="-1"]';
+
+export default focusableSelector;

package/test/fixtures/getExampleDom.ts

@@ -1,7 +1,4 @@
-export const getExampleDOM = () => {
-  const div = document.createElement('div');
-  div.className = 'm-4';
-  const tempDocument = new DOMParser().parseFromString(`
+const markup = `<div class="p-5">
 <div id="alertDemo" class="alert alert-warning alert-dismissible fade show" data-bs-op1="false" data-bs-op2="true" data-bs-op3="10" data-bs-title="" role="alert">
     <button role="button" type="button" class="btn-close bg-none" data-bs-target="alertDemo" data-bs-dismiss="alert" aria-label="Close">
       <svg viewBox="0 0 16 16" class="align-top">
@@ -10,6 +7,10 @@ export const getExampleDOM = () => {
       </svg>
     </button>
     <p><b>Holy guacamole!</b> Best check yo self, you're not looking too good.</p>
+    <button class="btn btn-outline-secondary">
+      ReadMore
+    </button>
+
     <img src="data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgODAgNDMiIHdpZHRoPSI4MCIgaGVpZ2h0PSI0MyIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4NCiAgICAgICAgICAgICAgICAgIDxyZWN0IGZpbGw9IndoaXRlIiBzdHJva2U9IiNjY2MiIHN0cm9rZS13aWR0aD0iMSIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgcng9IjUiPjwvcmVjdD4NCiAgICAgICAgICAgICAgICAgIDx0ZXh0IGRpcmVjdGlvbj0ibHRyIiBmaWxsPSIjMzMzIiB4PSIyNSIgeT0iMjUiIGZvbnQtc2l6ZT0iMTQiPklNRzwvdGV4dD4NCiAgICAgICAgICAgICAgICA8L3N2Zz4=" alt="Image">
 </div>
   <table class="table">
@@ -40,9 +41,12 @@ export const getExampleDOM = () => {
       </tr>
     </tbody>
   </table>
-`, 'text/html');
-  // console.log(tempDocument.body.children)
-  div.append(...tempDocument.body.children);
+</div>
+`;
+
+export const getExampleDOM = () => {
+  const tempDocument = new DOMParser().parseFromString(markup, 'text/html');
+  const container = tempDocument.body.querySelector('div')!;
 
-  return div;
+  return container;
 };

package/test/is.test.ts

@@ -8,13 +8,20 @@ import CustomElem from './fixtures/custom-elem';
 describe('Shorty Library Tests - IS', () => {
   const wrapper = document.createElement('div');
   document.body.append(wrapper);
+
   afterEach(async () => {
     wrapper.innerHTML = '';
   });
 
-  it('Test is folder', () => {
+  it('Test is folder', async () => {
+    vi.useFakeTimers();
     const container = getExampleDOM();
+    const CE1 = new CustomElem();
+    CE1.className = 'btn btn-outline-primary';
+    CE1.style.transform = 'scale(1.01)';
+    container.append(CE1);
     wrapper.append(container);
+    await vi.waitFor(() => container.querySelector('table'), 200);
     const win = container.ownerDocument.defaultView!;
 
     const {
@@ -51,15 +58,12 @@ describe('Shorty Library Tests - IS', () => {
     } = SHORTY;
 
     // const win = getWindow($element[0]);
-    const CE1 = new CustomElem();
-    CE1.className = 'btn btn-outline-primary';
-    CE1.style.transform = 'scale(1.01)';
-    document.body.append(CE1);
+
 
     const element = querySelector('.alert', container)!;
     const CE = querySelector('custom-elem', document) as HTMLElement;
     CE.className = 'btn btn-outline-primary';
-    // CE.style.transform = 'scale(1.01)';
+    CE.style.transform = 'scale(1.01)';
     // win.document.body.append(CE);
     const img = querySelector('img', element);
     const svg = querySelector('svg', element);
@@ -154,12 +158,12 @@ describe('Shorty Library Tests - IS', () => {
   
       expect(isElementInScrollRange(), 'isElementInScrollRange()').to.be.false;
       expect(isElementInScrollRange(win as any), 'isElementInScrollRange(window)').to.be.false;
-      expect(isElementInScrollRange(CE!), 'isElementInScrollRange(CustomElement)').to.be.true;
+      expect(isElementInScrollRange(CE!), 'isElementInScrollRange(CustomElement)').to.be.false;
       expect(isElementInScrollRange(element), 'isElementInScrollRange(node)').to.be.true;
   
       expect(isElementInViewport(), 'isElementInScrollRange()').to.be.false;
       expect(isElementInViewport(win as any), 'isElementInScrollRange(window)').to.be.false;
-      expect(isElementInViewport(CE!), 'isElementInViewport(CustomElement)').to.be.false;
+      expect(isElementInViewport(CE), 'isElementInViewport(CustomElement)').to.be.false;
       expect(isElementInViewport(element), 'isElementInScrollRange(node)').to.be.true;
   
       expect(isNode(), 'isNode()').to.be.false;
@@ -183,7 +187,7 @@ describe('Shorty Library Tests - IS', () => {
       expect(isScaledElement(element), 'isScaledElement(node)').to.be.false;
       expect(isScaledElement(win as any), 'isScaledElement(window)').to.be.false;
       expect(isScaledElement(win.document as any), 'isScaledElement(document)').to.be.false;
-      expect(isScaledElement(CE!), 'isScaledElement(expected)').to.be.true;
+      expect(isScaledElement(CE), 'isScaledElement(expected)').to.be.true;
   
       expect(isSVGElement(), 'isSVGElement()').to.be.false;
       expect(isSVGElement(element), 'isSVGElement(node)').to.be.false;
@@ -230,7 +234,7 @@ describe('Shorty Library Tests - IS', () => {
       expect(isShadowRoot(element), 'isShadowRoot(element)').to.be.false;
       expect(isShadowRoot(document), 'isShadowRoot(document)').to.be.false;
       expect(isShadowRoot(CE!.shadowRoot), 'isShadowRoot(CustomElement.shadowRoot)').to.be.true;  
-
-    }, { timeout: 150 })
+    }, 350);
+    vi.advanceTimersByTime(350)
   });
 });